fix: 权限列表JSON字段与角色可编辑; 前台site_id与SPA; 首页积木扩展区

Made-with: Cursor

admin/src/views/sites/HomepageEdit.vue

@@ -14,7 +14,7 @@
         </div>
       </template>
 
-      <el-form v-if="siteId" ref="formRef" :model="form" label-width="120px" style="max-width: 720px">
+      <el-form v-if="siteId" ref="formRef" :model="form" label-width="120px" class="homepage-form">
         <el-divider content-position="left">导航与标题</el-divider>
         <el-form-item label="Logo 文案">
           <el-input v-model="form.logo_text" placeholder="YUHENG ONE" />
@@ -110,6 +110,14 @@
         <el-form-item label="页脚文案">
           <el-input v-model="form.footer_text" placeholder="© 2024 YUHENG ONE" />
         </el-form-item>
+
+        <el-divider content-position="left">首页下方扩展区（可视化积木，可拖拽排序）</el-divider>
+        <p class="builder-tip">
+          与「网页管理 → 积木」相同：从左侧手柄拖拽调整模块顺序。保存后内容显示在落地页主视觉与特性卡片<strong>之后</strong>、页脚之前。留空则不显示扩展区。
+        </p>
+        <el-form-item label="扩展积木" class="builder-form-item homepage-builder-wrap">
+          <PageBuilderEditor v-model="form.body_builder" :site-id="siteId" />
+        </el-form-item>
       </el-form>
 
       <el-empty v-else description="请先选择站点" />
@@ -129,6 +137,7 @@ import { ElMessage } from 'element-plus'
 import { getSites, getOfficialSite, getHomepage, updateHomepage } from '../../api/admin'
 import { useAuthStore } from '../../stores/auth'
 import LinkPickerDialog from '../../components/LinkPickerDialog.vue'
+import PageBuilderEditor from '../../components/PageBuilderEditor.vue'
 
 const siteId = ref('')
 const sites = ref([])
@@ -162,7 +171,8 @@ const defaultForm = () => ({
     { title: '量子同步', desc: '跨维度数据同步技术，您的数据在多宇宙中保持一致' },
     { title: '星际防护', desc: '来自未来的安全加密协议，守护您的数字资产安全' }
   ],
-  footer_text: '© 2024 YUHENG ONE // STELLAR EXPLORATION INITIATIVE'
+  footer_text: '© 2024 YUHENG ONE // STELLAR EXPLORATION INITIATIVE',
+  body_builder: ''
 })
 
 const form = reactive(defaultForm())
@@ -284,4 +294,25 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
 }
+.homepage-form {
+  max-width: 720px;
+}
+.builder-tip {
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.6;
+  margin: 0 0 12px;
+  max-width: 900px;
+}
+.homepage-builder-wrap {
+  max-width: 1000px;
+}
+.homepage-builder-wrap :deep(.el-form-item__content) {
+  display: block;
+  margin-left: 0 !important;
+}
+.builder-form-item :deep(.el-form-item__content) {
+  display: block;
+  margin-left: 0 !important;
+}
 </style>

admin/src/views/sites/PageList.vue

@@ -53,10 +53,18 @@
     <el-dialog
       v-model="dialogVisible"
       :title="editId ? '编辑网页' : '新增网页'"
-      :width="form.content_mode === 'builder' ? '960px' : '720px'"
+      :width="form.content_mode === 'builder' ? '1080px' : '720px'"
       top="4vh"
       @close="resetForm"
     >
+      <el-alert
+        v-if="form.content_mode === 'builder'"
+        type="info"
+        :closable="false"
+        show-icon
+        style="margin-bottom: 16px"
+        title="积木模式：从模块左侧 ⋮⋮ 手柄拖拽排序；链接可点「选择链接」选站内页或文件。"
+      />
       <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="Slug" prop="slug">
           <el-input v-model="form.slug" placeholder="如 about、index（index 为首页数据，一般不单独走路由）" :disabled="!!editId" />
@@ -74,10 +82,10 @@
           </el-select>
         </el-form-item>
         <el-form-item label="内容模式">
-          <el-select v-model="form.content_mode" placeholder="模式" style="width: 200px">
-            <el-option label="HTML 富文本" value="html" />
-            <el-option label="积木组装（可视化）" value="builder" />
-          </el-select>
+          <el-radio-group v-model="form.content_mode">
+            <el-radio-button value="builder">积木（可视化拖拽）</el-radio-button>
+            <el-radio-button value="html">HTML 源码</el-radio-button>
+          </el-radio-group>
           <el-button type="primary" link style="margin-left: 12px" @click="insertBuilderTemplate">插入积木模板</el-button>
         </el-form-item>
         <el-form-item label="发布到前台">
@@ -86,7 +94,7 @@
         <el-form-item v-if="form.content_mode === 'html'" label="内容" prop="content">
           <el-input v-model="form.content" type="textarea" :rows="14" placeholder="直接编写 HTML" />
         </el-form-item>
-        <el-form-item v-else label="页面积木" class="builder-form-item">
+        <el-form-item v-else label="页面积木" class="builder-form-item page-builder-wrap">
           <PageBuilderEditor v-model="form.content" :site-id="siteId" />
         </el-form-item>
       </el-form>
@@ -202,7 +210,7 @@ const form = reactive({
   title: '',
   type: 'page',
   content: '',
-  content_mode: 'html',
+  content_mode: 'builder',
   route_path: '',
   published: true
 })
@@ -231,7 +239,7 @@ const openDialog = (row) => {
   form.title = row ? row.title : ''
   form.type = row ? row.type || 'page' : 'page'
   form.content = row ? row.content || '' : ''
-  form.content_mode = row?.content_mode || 'html'
+  form.content_mode = row?.content_mode || 'builder'
   form.route_path = row?.route_path || ''
   form.published = row?.published !== false
   dialogVisible.value = true
@@ -242,7 +250,7 @@ const resetForm = () => {
   form.title = ''
   form.type = 'page'
   form.content = ''
-  form.content_mode = 'html'
+  form.content_mode = 'builder'
   form.route_path = ''
   form.published = true
   editId.value = ''
@@ -303,4 +311,7 @@ onMounted(() => {
   display: block;
   margin-left: 0 !important;
 }
+.page-builder-wrap {
+  max-width: 100%;
+}
 </style>