项目架构调整，对组件进一步封装化

src/views/HomeView.vue

@@ -52,50 +52,14 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 import { Setting, Document } from '@element-plus/icons-vue';
-import { ref, onMounted } from 'vue';
 
-// 导入已注册的小组件信息
+// 导入小组件显示信息
-import { widgets as registeredWidgets } from '../widgets/registry';
+import { getWidgetItems } from '../widgets/registry';
 
 const router = useRouter();
 
-// 定义小组件项的类型
+// 获取所有可用的小组件列表
-interface WidgetItem {
+const widgets = getWidgetItems();
-  value: string;
-  label: string;
-  icon: string;
-  description: string;
-}
-
-const widgets = ref<WidgetItem[]>([]);
-
-// 小组件图标映射
-const widgetIcons = {
-  'clock': '⏰',
-  'date': '📅',
-  'text': '📝',
-  'image': '🖼️',
-  // 可以为其他小组件添加图标
-};
-
-// 小组件描述映射
-const widgetDescriptions = {
-  'clock': '显示当前时间，可自定义格式、样式和特效',
-  'date': '显示当前日期，可自定义格式、样式和特效',
-  'text': '显示文本，支持渐变、阴影、字体等自定义样式',
-  'image': '显示图片，可自定义大小、特效和位置',
-  // 可以为其他小组件添加描述
-};
-
-// 初始化时加载小组件
-onMounted(() => {
-  widgets.value = registeredWidgets.map((widget: any) => ({
-    value: widget.value as string,
-    label: widget.label as string,
-    icon: widgetIcons[widget.value as keyof typeof widgetIcons] || '🔧', // 默认图标
-    description: widgetDescriptions[widget.value as keyof typeof widgetDescriptions] || '自定义小组件'
-  }));
-});
 
 const goToConfig = () => {
   router.push('/config');

src/widgets/TEMPLATE.md

@@ -0,0 +1,184 @@
+# 新建小组件模板
+
+这是一个模板，用于快速创建新的小组件。
+
+## 步骤
+
+### 1. 创建小组件目录结构
+
+```
+src/widgets/[widget-name]/
+├── index.ts          # 小组件注册入口
+├── types.ts          # 类型定义和默认配置
+├── Widget.vue        # 小组件显示组件
+└── Config.vue        # 小组件配置组件
+```
+
+### 2. 实现 types.ts
+
+```typescript
+import type { BaseWidgetConfig } from '../types';
+
+// 小组件配置接口
+export interface YourWidgetConfig extends BaseWidgetConfig {
+  // 定义你的配置属性
+  text: string;
+  color: string;
+  fontSize: number;
+  // ... 其他配置
+}
+
+// 默认配置
+export const defaultConfig: YourWidgetConfig = {
+  text: 'Hello World',
+  color: '#ffffff',
+  fontSize: 24,
+  // ... 其他默认值
+};
+```
+
+### 3. 实现 Widget.vue
+
+```vue
+<template>
+  <div class="your-widget" :style="widgetStyle">
+    {{ config.text }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { YourWidgetConfig } from './types';
+
+// 接收配置props
+const props = defineProps<{
+  config: YourWidgetConfig;
+}>();
+
+// 计算样式
+const widgetStyle = computed(() => ({
+  color: props.config.color,
+  fontSize: props.config.fontSize + 'px',
+  // ... 其他样式
+}));
+</script>
+
+<style scoped>
+.your-widget {
+  /* 基础样式 */
+}
+</style>
+```
+
+### 4. 实现 Config.vue
+
+```vue
+<template>
+  <div class="config-panel">
+    <el-form :model="config" label-width="120px">
+      <el-form-item label="文本内容">
+        <el-input v-model="config.text" @input="updateConfig" />
+      </el-form-item>
+      
+      <el-form-item label="文字颜色">
+        <el-color-picker v-model="config.color" @change="updateConfig" />
+      </el-form-item>
+      
+      <el-form-item label="字体大小">
+        <el-slider 
+          v-model="config.fontSize" 
+          :min="12" 
+          :max="72" 
+          @change="updateConfig" 
+        />
+      </el-form-item>
+      
+      <!-- 其他配置项... -->
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue';
+import type { YourWidgetConfig } from './types';
+
+// 接收配置和更新函数
+const props = defineProps<{
+  modelValue: YourWidgetConfig;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [config: YourWidgetConfig];
+}>();
+
+// 本地配置状态
+const config = reactive({ ...props.modelValue });
+
+// 监听外部配置变化
+watch(() => props.modelValue, (newValue) => {
+  Object.assign(config, newValue);
+}, { deep: true });
+
+// 更新配置
+const updateConfig = () => {
+  emit('update:modelValue', { ...config });
+};
+</script>
+
+<style scoped>
+.config-panel {
+  padding: 20px;
+}
+</style>
+```
+
+### 5. 实现 index.ts
+
+```typescript
+import Widget from './Widget.vue';
+import Config from './Config.vue';
+import { defaultConfig } from './types';
+import { createWidget } from '../createWidget';
+
+export default createWidget({
+  label: '你的小组件',
+  value: 'your-widget',
+  icon: '🎯', // 选择合适的emoji图标
+  description: '这是你的小组件的描述',
+  component: Widget,
+  configComponent: Config,
+  defaultConfig
+});
+```
+
+### 6. 在 registry.ts 中注册
+
+```typescript
+// 在 src/widgets/registry.ts 中添加导入
+import YourWidget from './your-widget';
+
+// 在小组件注册表中添加
+export const widgets: WidgetRegistration[] = [
+  ClockWidget,
+  DateWidget,
+  TextWidget,
+  ImageWidget,
+  WeatherWidget,
+  YourWidget, // 添加你的小组件
+];
+```
+
+## 完成！
+
+现在你的新小组件就会自动出现在：
+- 首页的小组件列表中
+- 配置页面的小组件选择器中
+- 预览页面中可以显示
+
+## 最佳实践
+
+1. **命名规范**: 使用kebab-case命名目录和文件
+2. **图标选择**: 选择有意义的emoji作为图标
+3. **配置项**: 提供合理的默认值，让小组件开箱即用
+4. **样式**: 使用CSS变量和计算属性，让样式可配置
+5. **类型安全**: 充分利用TypeScript的类型检查

src/widgets/clock/index.ts

@@ -1,11 +1,14 @@
 import Widget from './Widget.vue';
 import Config from './Config.vue';
 import { defaultConfig } from './types';
+import { createWidget } from '../createWidget';
 
-export default {
+export default createWidget({
   label: '时钟小组件',
   value: 'clock',
+  icon: '⏰',
+  description: '显示当前时间，可自定义格式、样式和特效',
   component: Widget,
   configComponent: Config,
-  getDefaultConfig: () => defaultConfig
+  defaultConfig
-};
+});

src/widgets/createWidget.ts

@@ -0,0 +1,47 @@
+import type { Component } from 'vue';
+import type { WidgetRegistration, BaseWidgetConfig } from './types';
+
+/**
+ * 创建小组件注册信息的辅助函数
+ * 
+ * @param options 小组件配置选项
+ * @returns 小组件注册信息
+ */
+export function createWidget(options: {
+  /** 小组件显示名称 */
+  label: string;
+  /** 小组件唯一标识符 */
+  value: string;
+  /** 小组件图标（emoji 或图标字符） */
+  icon: string;
+  /** 小组件描述 */
+  description: string;
+  /** 小组件组件 */
+  component: Component;
+  /** 小组件配置组件 */
+  configComponent: Component;
+  /** 默认配置 */
+  defaultConfig: BaseWidgetConfig;
+}): WidgetRegistration {
+  return {
+    label: options.label,
+    value: options.value,
+    icon: options.icon,
+    description: options.description,
+    component: options.component,
+    configComponent: options.configComponent,
+    getDefaultConfig: () => options.defaultConfig
+  };
+}
+
+/**
+ * 创建小组件类型定义的辅助函数
+ * 
+ * @param defaultConfig 默认配置对象
+ * @returns 包含默认配置的对象
+ */
+export function createWidgetConfig<T extends BaseWidgetConfig>(defaultConfig: T) {
+  return {
+    defaultConfig
+  };
+}

src/widgets/date/index.ts

@@ -1,11 +1,14 @@
 import Widget from './Widget.vue';
 import Config from './Config.vue';
 import { defaultConfig } from './types';
+import { createWidget } from '../createWidget';
 
-export default {
+export default createWidget({
   label: '日期小组件',
   value: 'date',
+  icon: '📅',
+  description: '显示当前日期，可自定义格式、样式和特效',
   component: Widget,
   configComponent: Config,
-  getDefaultConfig: () => defaultConfig
+  defaultConfig
-};
+});

src/widgets/image/index.ts

@@ -1,11 +1,14 @@
 import Widget from './Widget.vue';
 import Config from './Config.vue';
 import { defaultConfig } from './types';
+import { createWidget } from '../createWidget';
 
-export default {
+export default createWidget({
   label: '图片小组件',
   value: 'image',
+  icon: '🖼️',
+  description: '显示图片，可自定义大小、特效和位置',
   component: Widget,
   configComponent: Config,
-  getDefaultConfig: () => defaultConfig
+  defaultConfig
-};
+});

src/widgets/registry.ts

@@ -4,14 +4,28 @@ import DateWidget from './date';
 import TextWidget from './text';
 import ImageWidget from './image';
 
+
+// 导入类型定义
+import type { WidgetRegistration, WidgetItem } from './types';
+
 // 小组件注册表
-export const widgets = [
+export const widgets: WidgetRegistration[] = [
   ClockWidget,
   DateWidget,
   TextWidget,
   ImageWidget,
 ];
 
+// 获取小组件显示信息列表（用于 UI 展示）
+export const getWidgetItems = (): WidgetItem[] => {
+  return widgets.map(widget => ({
+    value: widget.value,
+    label: widget.label,
+    icon: widget.icon,
+    description: widget.description
+  }));
+};
+
 // 获取小组件默认配置
 export const getDefaultConfig = (widgetType: string) => {
   for (const widget of widgets) {
@@ -21,3 +35,8 @@ export const getDefaultConfig = (widgetType: string) => {
   }
   return {};
 };
+
+// 根据类型获取小组件注册信息
+export const getWidget = (widgetType: string): WidgetRegistration | undefined => {
+  return widgets.find(widget => widget.value === widgetType);
+};

src/widgets/text/index.ts

@@ -1,11 +1,14 @@
 import Widget from './Widget.vue';
 import Config from './Config.vue';
 import { defaultConfig } from './types';
+import { createWidget } from '../createWidget';
 
-export default {
+export default createWidget({
   label: '文本小组件',
   value: 'text',
+  icon: '📝',
+  description: '显示文本，支持渐变、阴影、字体等自定义样式',
   component: Widget,
   configComponent: Config,
-  getDefaultConfig: () => defaultConfig
+  defaultConfig
-};
+});

src/widgets/types.ts

@@ -9,12 +9,17 @@ export interface BaseWidgetConfig {
 export interface WidgetRegistration {
   label: string;
   value: string;
+  icon: string;
+  description: string;
   component: Component;
   configComponent: Component;
   getDefaultConfig: () => BaseWidgetConfig;
 }
 
-// 小组件模块导出接口
+// 小组件列表项接口（用于 UI 显示）
-export interface WidgetModule {
+export interface WidgetItem {
-  registration: WidgetRegistration;
+  value: string;
+  label: string;
+  icon: string;
+  description: string;
 }