-
-
- {{ instance.name }}
-
-
-
-
+
+
+
+
+
+
+
+
+
+ {{ instance.name }}
+
+
+
+
+
-
+
+
🎨
-
暂无设计组件
-
从左侧列表点击添加
+
暂无内容
+
+ 点击“页面管理”选择Vue页面，或从左侧列表添加设计组件
+
@@ -99,12 +140,32 @@ const handleRemove = (instanceId: string, event: Event) => {
font-size: 11px;
}
+.file-info {
+ color: #4fc3f7;
+ font-size: 12px;
+ font-weight: 500;
+}
+
.center-body {
flex: 1;
padding: 12px;
overflow: auto;
}
+.page-preview {
+ width: 100%;
+ height: 100%;
+ background: white;
+ border-radius: 8px;
+ overflow: auto;
+}
+
+.component-list {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
.component-row {
margin-bottom: 12px;
border-radius: 6px;
diff --git a/draggable-panels/src/fauto/materials/PageManager/index.json b/draggable-panels/src/fauto/materials/PageManager/index.json
new file mode 100644
index 0000000..f160107
--- /dev/null
+++ b/draggable-panels/src/fauto/materials/PageManager/index.json
@@ -0,0 +1,4 @@
+{
+ "name": "页面管理",
+ "description": "浏览和管理src/views目录下的Vue页面文件"
+}
diff --git a/draggable-panels/src/fauto/materials/PageManager/index.vue b/draggable-panels/src/fauto/materials/PageManager/index.vue
new file mode 100644
index 0000000..62338c4
--- /dev/null
+++ b/draggable-panels/src/fauto/materials/PageManager/index.vue
@@ -0,0 +1,254 @@
+
+
+
+
+
+
+
+
当前文件:
+
{{ vueFileStore.selectedFileName }}
+
+
+
+
+
+
+ {{ getNodeIcon(data) }}
+
+ {{ node.label }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/draggable-panels/src/fauto/stores/vueFileStore.ts b/draggable-panels/src/fauto/stores/vueFileStore.ts
new file mode 100644
index 0000000..9f9ffc7
--- /dev/null
+++ b/draggable-panels/src/fauto/stores/vueFileStore.ts
@@ -0,0 +1,110 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+// Vue文件树节点
+export interface VueFileNode {
+ name: string // 文件/文件夹名称
+ path: string // 完整路径
+ type: 'file' | 'folder' // 类型
+ children?: VueFileNode[] // 子节点
+}
+
+export const useVueFileStore = defineStore('vueFile', () => {
+ // 当前选中的Vue文件路径
+ const selectedFilePath = ref
(null)
+
+ // 当前选中的文件名
+ const selectedFileName = ref(null)
+
+ // 文件树结构
+ const fileTree = ref([])
+
+ // 设置选中的文件
+ const selectFile = (path: string, name: string) => {
+ selectedFilePath.value = path
+ selectedFileName.value = name
+ console.log('选中文件:', { path, name })
+ }
+
+ // 清除选中
+ const clearSelection = () => {
+ selectedFilePath.value = null
+ selectedFileName.value = null
+ }
+
+ // 构建文件树（从import.meta.glob结果）
+ const buildFileTree = (modules: Record): VueFileNode[] => {
+ const tree: VueFileNode[] = []
+ const folderMap = new Map()
+
+ for (const path in modules) {
+ // 移除开头的 '../views/' 或 './views/'
+ const relativePath = path.replace(/^\.\.?\/views\//, '')
+ const parts = relativePath.split('/')
+
+ let currentLevel = tree
+ let currentPath = ''
+
+ // 处理路径的每一部分
+ for (let i = 0; i < parts.length; i++) {
+ const part = parts[i]
+ currentPath = currentPath ? `${currentPath}/${part}` : part
+
+ const isFile = i === parts.length - 1 && part.endsWith('.vue')
+
+ if (isFile) {
+ // 添加文件节点
+ currentLevel.push({
+ name: part,
+ path: path,
+ type: 'file'
+ })
+ } else {
+ // 添加文件夹节点
+ let folder = folderMap.get(currentPath)
+
+ if (!folder) {
+ folder = {
+ name: part,
+ path: currentPath,
+ type: 'folder',
+ children: []
+ }
+ currentLevel.push(folder)
+ folderMap.set(currentPath, folder)
+ }
+
+ currentLevel = folder.children!
+ }
+ }
+ }
+
+ // 排序：文件夹在前，文件在后
+ const sortTree = (nodes: VueFileNode[]) => {
+ nodes.sort((a, b) => {
+ if (a.type !== b.type) {
+ return a.type === 'folder' ? -1 : 1
+ }
+ return a.name.localeCompare(b.name)
+ })
+
+ nodes.forEach(node => {
+ if (node.children) {
+ sortTree(node.children)
+ }
+ })
+ }
+
+ sortTree(tree)
+ return tree
+ }
+
+ return {
+ selectedFilePath,
+ selectedFileName,
+ fileTree,
+ selectFile,
+ clearSelection,
+ buildFileTree
+ }
+})
diff --git a/draggable-panels/src/main.ts b/draggable-panels/src/main.ts
index d0721d8..b1f448a 100644
--- a/draggable-panels/src/main.ts
+++ b/draggable-panels/src/main.ts
@@ -1,5 +1,7 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
import './style.css'
import App from './App.vue'
import router from './router'
@@ -9,4 +11,5 @@ const pinia = createPinia()
app.use(pinia)
app.use(router)
+app.use(ElementPlus)
app.mount('#app')
diff --git a/draggable-panels/src/views/TestPage1.vue b/draggable-panels/src/views/TestPage1.vue
new file mode 100644
index 0000000..c2b4282
--- /dev/null
+++ b/draggable-panels/src/views/TestPage1.vue
@@ -0,0 +1,52 @@
+
+
+
测试页面 1
+
+
+ 左侧内容区域
+
+
+ 右侧内容区域
+
+
+
+
+
+ 列 1
+
+
+ 列 2
+
+
+ 列 3
+
+
+
+
测试页面 2 - 表单布局
+
+
+ 表单标题区域
+
+
+
+
+
+ 标签
+
+
+ 输入框
+
+
+
+
+
+ 标签
+
+
+ 输入框
+
+
+
+
+
+ 提交按钮
+
+
+
+
仪表板概览
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 图表区域
+
+
+ 侧边栏信息
+
+
+
+
用户资料
+
+
+
+
+
+
+
+
+ 姓名: 张三
+
+
+ 邮箱: zhang@example.com
+
+
+
+
+ 电话: 138****8888
+
+
+ 部门: 技术部
+
+
+
+