wangpeng/yidaima
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add app blueprint generation flow

Browse Source
This commit is contained in:
王鹏
2026-05-23 16:09:44 +08:00
parent 0fbe78868b
commit d91161a302
23 changed files with 933 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
RuoYi-Vue/easycode-web/src/api/project.js
View File

@@ -43,6 +43,15 @@ export function generateDatabase(projectId, data) {
}).then(unwrap)
}
export function generateAppBlueprint(projectId, data) {
return request({
url: `/front/project/${projectId}/generate-app-blueprint`,
method: 'post',
timeout: GENERATE_REQUEST_TIMEOUT,
data
}).then(unwrap)
}
export function getDatabase(projectId) {
return request({
url: `/front/project/${projectId}/database`,

182
RuoYi-Vue/easycode-web/src/views/GenerateView.vue
View File

@@ -45,7 +45,10 @@
/>
<div class="toolbar">
<el-button type="primary" :icon="DataAnalysis" :loading="generating" @click="handleGenerateDatabase">
<el-button type="primary" :loading="generatingAppBlueprint" @click="handleGenerateAppBlueprint">
生成应用蓝图
</el-button>
<el-button type="primary" :icon="DataAnalysis" :disabled="!hasAppBlueprint" :loading="generating" @click="handleGenerateDatabase">
生成数据库
</el-button>
<el-button :disabled="!projectId || !database.tables.length" :loading="saving" @click="handleSaveDatabase">
@@ -64,6 +67,44 @@
</div>
</div>
<div class="panel app-blueprint-panel">
<div class="panel-header database-header">
<h2 class="panel-title">应用蓝图</h2>
<div class="database-header-actions">
<span class="muted">角色：{{ appBlueprint.roles.length }}</span>
<span class="muted">前台菜单：{{ appBlueprint.frontendMenus.length }}</span>
<span class="muted">后台菜单：{{ appBlueprint.adminMenus.length }}</span>
</div>
</div>
<div v-if="hasAppBlueprint" class="app-blueprint-content">
<div class="app-blueprint-grid">
<section>
<h3>角色</h3>
<el-tag v-for="role in appBlueprint.roles" :key="role.code" effect="plain">
{{ role.name || role.code }}
</el-tag>
</section>
<section>
<h3>前台菜单</h3>
<el-tag v-for="menu in appBlueprint.frontendMenus" :key="menu.code" type="success" effect="plain">
{{ menu.name || menu.code }}
</el-tag>
</section>
<section>
<h3>后台菜单</h3>
<el-tag v-for="menu in appBlueprint.adminMenus" :key="menu.code" type="warning" effect="plain">
{{ menu.name || menu.code }}
</el-tag>
</section>
</div>
<el-input v-model="appBlueprintJson" type="textarea" :rows="12" spellcheck="false" />
<div class="toolbar compact-toolbar">
<el-button @click="applyAppBlueprintJson">应用调整</el-button>
</div>
</div>
<el-empty v-else description="生成应用蓝图后，这里会展示角色和前后台菜单" />
</div>
<div class="panel designer-panel">
<div class="panel-header database-header">
<h2 class="panel-title">数据库设计</h2>
@@ -131,24 +172,27 @@
</template>
<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { DataAnalysis, View } from '@element-plus/icons-vue'
import DatabaseDesigner from '@/components/DatabaseDesigner.vue'
import ErDiagramView from '@/components/ErDiagramView.vue'
import { createProject, generateDatabase, generateProject, getDatabase, getProject, saveDatabase } from '@/api/project'
import { createProject, generateAppBlueprint, generateDatabase, generateProject, getDatabase, getProject, saveDatabase } from '@/api/project'
const route = useRoute()
const router = useRouter()
const generating = ref(false)
const generatingAppBlueprint = ref(false)
const saving = ref(false)
const previewing = ref(false)
const loadingProject = ref(false)
const databaseView = ref('editor')
const projectId = ref(normalizeProjectId(route.query.projectId))
const errorMessage = ref('')
const appBlueprint = ref(emptyAppBlueprint())
const appBlueprintJson = ref(formatJson(emptyAppBlueprint()))
const database = ref({ tables: [], sql: '', erDiagram: emptyErDiagram(), businessActions: [] })
const projectForm = reactive({
projectName: '',
@@ -158,6 +202,9 @@ const projectForm = reactive({
})
const LAST_PROJECT_KEY = 'easycode_last_project_id'
const hasAppBlueprint = computed(() => {
return appBlueprint.value.roles.length > 0 || appBlueprint.value.frontendMenus.length > 0 || appBlueprint.value.adminMenus.length > 0
})
function unwrap(result) {
return result?.data || result || {}
@@ -171,6 +218,41 @@ function emptyErDiagram() {
}
}
function emptyAppBlueprint() {
return {
roles: [],
frontendMenus: [],
adminMenus: []
}
}
function formatJson(value) {
return JSON.stringify(value || {}, null, 2)
}
function parseMaybeJson(value) {
if (!value) return {}
if (typeof value === 'object') return value
try {
return JSON.parse(value)
} catch (error) {
return {}
}
}
function normalizeAppBlueprint(payload) {
const data = parseMaybeJson(unwrap(payload))
return {
roles: Array.isArray(data.roles) ? data.roles : [],
frontendMenus: Array.isArray(data.frontendMenus) ? data.frontendMenus : [],
adminMenus: Array.isArray(data.adminMenus) ? data.adminMenus : []
}
}
function syncAppBlueprintJson() {
appBlueprintJson.value = formatJson(appBlueprint.value)
}
function normalizeErDiagram(value) {
const source = value && typeof value === 'object' ? value : {}
return {
@@ -215,6 +297,8 @@ async function loadProjectDraft(value) {
projectForm.projectName = project.projectName || ''
projectForm.projectDesc = project.projectDesc || ''
projectForm.industryTemplate = project.industryTemplate || ''
appBlueprint.value = normalizeAppBlueprint(project.appBlueprint)
syncAppBlueprintJson()
database.value = normalizeDatabase(databaseResult)
rememberProject(id)
} catch (error) {
@@ -251,14 +335,63 @@ async function ensureProject() {
return projectId.value
}
async function handleGenerateDatabase() {
function validateRequirementInput() {
if (!projectForm.projectName.trim()) {
ElMessage.warning('请输入项目名称')
return
return false
}
if (!projectForm.keyword.trim() && !projectForm.projectDesc.trim()) {
ElMessage.warning('请输入需求关键词或补充说明')
return false
}
return true
}
async function handleGenerateAppBlueprint() {
if (!validateRequirementInput()) {
return
}
generatingAppBlueprint.value = true
errorMessage.value = ''
try {
const id = await ensureProject()
const result = await generateAppBlueprint(id, {
projectName: projectForm.projectName,
projectDesc: projectForm.projectDesc || projectForm.keyword,
industryTemplate: projectForm.industryTemplate,
extraRequirements: projectForm.keyword,
appBlueprint: appBlueprintJson.value
})
appBlueprint.value = normalizeAppBlueprint(result)
syncAppBlueprintJson()
ElMessage.success('应用蓝图已生成')
} catch (error) {
errorMessage.value = error.message || '生成应用蓝图失败，请稍后重试。'
} finally {
generatingAppBlueprint.value = false
}
}
function applyAppBlueprintJson() {
try {
appBlueprint.value = normalizeAppBlueprint(JSON.parse(appBlueprintJson.value || '{}'))
syncAppBlueprintJson()
ElMessage.success('应用蓝图已应用')
} catch (error) {
ElMessage.warning('应用蓝图 JSON 格式不正确')
}
}
async function handleGenerateDatabase() {
if (!validateRequirementInput()) {
return
}
if (!hasAppBlueprint.value) {
ElMessage.warning('请先生成并确认应用蓝图')
return
}
@@ -354,6 +487,41 @@ onMounted(() => {
overflow: hidden;
}
.app-blueprint-content {
display: grid;
gap: 16px;
padding: 20px;
}
.app-blueprint-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.app-blueprint-grid section {
align-content: start;
border: 1px solid var(--border-color);
border-radius: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
min-height: 96px;
padding: 14px;
}
.app-blueprint-grid h3 {
flex-basis: 100%;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
margin: 0;
}
.compact-toolbar {
justify-content: flex-end;
}
.blueprint-list {
display: grid;
gap: 14px;
@@ -438,5 +606,9 @@ onMounted(() => {
align-items: flex-start;
flex-direction: column;
}
.app-blueprint-grid {
grid-template-columns: 1fr;
}
}
</style>