feat(admin): 积木页面可视化编辑与链接选择器（站内页/可下载文件）

Made-with: Cursor

admin/src/views/sites/PageList.vue

@@ -50,7 +50,13 @@
       </el-table>
     </el-card>
 
-    <el-dialog v-model="dialogVisible" :title="editId ? '编辑网页' : '新增网页'" width="720px" @close="resetForm">
+    <el-dialog
+      v-model="dialogVisible"
+      :title="editId ? '编辑网页' : '新增网页'"
+      :width="form.content_mode === 'builder' ? '960px' : '720px'"
+      top="4vh"
+      @close="resetForm"
+    >
       <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" />
@@ -70,15 +76,18 @@
         <el-form-item label="内容模式">
           <el-select v-model="form.content_mode" placeholder="模式" style="width: 200px">
             <el-option label="HTML 富文本" value="html" />
-            <el-option label="积木组装（JSON）" value="builder" />
+            <el-option label="积木组装（可视化）" value="builder" />
           </el-select>
           <el-button type="primary" link style="margin-left: 12px" @click="insertBuilderTemplate">插入积木模板</el-button>
         </el-form-item>
         <el-form-item label="发布到前台">
           <el-switch v-model="form.published" />
         </el-form-item>
-        <el-form-item label="内容" prop="content">
-          <el-input v-model="form.content" type="textarea" :rows="12" placeholder="HTML 模式直接写 HTML；积木模式为 JSON，见项目 docs/PAGE_BUILDER.md" />
+        <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">
+          <PageBuilderEditor v-model="form.content" :site-id="siteId" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -94,6 +103,7 @@ import { ref, reactive, onMounted, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getSites } from '../../api/admin'
 import { getPages, createPage, updatePage, deletePage } from '../../api/admin'
+import PageBuilderEditor from '../../components/PageBuilderEditor.vue'
 
 const siteId = ref('')
 const sites = ref([])
@@ -289,4 +299,8 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
 }
+.builder-form-item :deep(.el-form-item__content) {
+  display: block;
+  margin-left: 0 !important;
+}
 </style>