3

draggable-panels/src/fauto/materials/DesignCenter/index.vue

@@ -1,42 +1,11 @@
 <script setup lang="ts">
-import { defineAsyncComponent, markRaw, computed, watch } from 'vue'
-import { useDesignStore } from '../../stores/designStore'
+import { defineAsyncComponent, computed, watch } from 'vue'
 import { useVueFileStore } from '../../stores/vueFileStore'
 import InteractiveWrapper from './InteractiveWrapper.vue'
 import config from './index.json'
 
-const designStore = useDesignStore()
 const vueFileStore = useVueFileStore()
 
-// 自动扫描所有设计组件（eager 模式确保同步加载）
-const designComponentModules = import.meta.glob('../../designComponents/*/index.vue', { eager: true })
-
-// 自动构建设计组件映射表
-const designComponentMap: Record<string, any> = {}
-
-for (const path in designComponentModules) {
-  // 从路径中提取组件 ID，例如 '../../designComponents/TextInput/index.vue' => 'TextInput'
-  const match = path.match(/\/designComponents\/(.+)\/index\.vue$/)
-  if (match) {
-    const id = match[1]
-    const mod = designComponentModules[path] as any
-    designComponentMap[id] = markRaw(mod.default || mod)
-  }
-}
-
-const getComponent = (componentId: string) => {
-  return designComponentMap[componentId]
-}
-
-const handleSelect = (instanceId: string) => {
-  designStore.selectComponent(instanceId)
-}
-
-const handleRemove = (instanceId: string, event: Event) => {
-  event.stopPropagation()
-  designStore.removeComponent(instanceId)
-}
-
 // 扫描所有views目录下的Vue文件
 const viewModules = import.meta.glob('../../../views/**/*.vue')
 
@@ -65,10 +34,7 @@ watch(() => vueFileStore.selectedFilePath, (newPath) => {
   <div class="design-center">
     <div class="center-header">
       <span class="title">{{ config.name }}</span>
-      <span class="count" v-if="!vueFileStore.selectedFilePath">
-        {{ designStore.components.length }} 个实例
-      </span>
-      <span class="file-info" v-else>
+      <span class="file-info" v-if="vueFileStore.selectedFilePath">
         📄 {{ vueFileStore.selectedFileName }}
       </span>
     </div>
@@ -78,35 +44,12 @@ watch(() => vueFileStore.selectedFilePath, (newPath) => {
         <InteractiveWrapper :component="selectedPageComponent" />
       </div>
       
-      <!-- 原有的设计组件实例列表 -->
-      <div v-else-if="designStore.components.length > 0" class="component-list">
-        <div 
-          v-for="instance in designStore.components" 
-          :key="instance.id"
-          class="component-row"
-          :class="{ selected: designStore.selectedId === instance.id }"
-          @click="handleSelect(instance.id)"
-        >
-          <div class="component-label">
-            <span class="component-name">{{ instance.name }}</span>
-            <button class="remove-btn" @click="handleRemove(instance.id, $event)">×</button>
-          </div>
-          <div class="component-preview">
-            <component 
-              v-if="getComponent(instance.componentId)"
-              :is="getComponent(instance.componentId)"
-              v-bind="instance.props"
-            />
-          </div>
-        </div>
-      </div>
-      
       <!-- 空状态 -->
       <div v-else class="empty-tip">
         <div class="empty-icon">🎨</div>
         <div>暂无内容</div>
         <div class="empty-hint">
-          点击“页面管理”选择Vue页面，或从左侧列表添加设计组件
+          点击“页面管理”选择Vue页面开始设计
         </div>
       </div>
     </div>
@@ -136,11 +79,6 @@ watch(() => vueFileStore.selectedFilePath, (newPath) => {
   font-weight: 500;
 }
 
-.count {
-  color: #888888;
-  font-size: 11px;
-}
-
 .file-info {
   color: #4fc3f7;
   font-size: 12px;
@@ -161,67 +99,6 @@ watch(() => vueFileStore.selectedFilePath, (newPath) => {
   overflow: auto;
 }
 
-.component-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.component-row {
-  margin-bottom: 12px;
-  border-radius: 6px;
-  border: 2px solid transparent;
-  transition: border-color 0.2s;
-  cursor: pointer;
-}
-
-.component-row:hover {
-  border-color: #3c3c3c;
-}
-
-.component-row.selected {
-  border-color: #007acc;
-}
-
-.component-label {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 10px;
-  background: #252526;
-  border-radius: 4px 4px 0 0;
-}
-
-.component-name {
-  color: #e0e0e0;
-  font-size: 12px;
-}
-
-.remove-btn {
-  width: 20px;
-  height: 20px;
-  background: transparent;
-  border: none;
-  color: #888888;
-  font-size: 16px;
-  cursor: pointer;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.remove-btn:hover {
-  background: #ff4444;
-  color: white;
-}
-
-.component-preview {
-  padding: 8px;
-  background: #1e1e1e;
-  border-radius: 0 0 4px 4px;
-}
-
 .empty-tip {
   color: #666666;
   text-align: center;