23

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

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { defineAsyncComponent, markRaw } from 'vue'
+import { useDesignStore } from '../../stores/designStore'
+import config from './index.json'
+
+const designStore = useDesignStore()
+
+// 自动扫描所有设计组件（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)
+}
+</script>
+
+<template>
+  <div class="design-center">
+    <div class="center-header">
+      <span class="title">{{ config.name }}</span>
+      <span class="count">{{ designStore.components.length }} 个实例</span>
+    </div>
+    <div class="center-body">
+      <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 v-if="designStore.components.length === 0" class="empty-tip">
+        <div class="empty-icon">🎨</div>
+        <div>暂无设计组件</div>
+        <div class="empty-hint">从左侧列表点击添加</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.design-center {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #1e1e1e;
+}
+
+.center-header {
+  padding: 8px 12px;
+  background: #2d2d2d;
+  border-bottom: 1px solid #3c3c3c;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.title {
+  color: #cccccc;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.count {
+  color: #888888;
+  font-size: 11px;
+}
+
+.center-body {
+  flex: 1;
+  padding: 12px;
+  overflow: auto;
+}
+
+.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;
+  padding: 40px 20px;
+  font-size: 13px;
+}
+
+.empty-icon {
+  font-size: 40px;
+  margin-bottom: 12px;
+}
+
+.empty-hint {
+  font-size: 11px;
+  margin-top: 8px;
+  color: #555555;
+}
+</style>