Add Widget

export const WIDGET_CODE_LIST = [
  // ...
  'myWidget',   // 顺序决定组件库抽屉中的排列顺序
] as const

export const WIDGET_SETTING_PANE_MAP: Partial<Record<WidgetCodes, settingPanes>> = {
  // ...
  myWidget: 'clockDate',   // ← 指向对应的 pane code
}

export const WIDGET_GROUPS: Array<{
  labelKey: string
  codes: WidgetCodes[]
}> = [
  {
    labelKey: 'widgetGroup.timeAndDate',
    codes: ['clockDigital', ... , 'myWidget'], // ← 追加到对应分组（time/bookmark/tool 三选一）
  },
]

export const WIDGET_CODE = 'myWidget'
export const WIDGET_CONFIG = {
  enabled: false,
  layout: { xOffsetKey: 'left', xOffsetValue: 50, xTranslateValue: -50,
            yOffsetKey: 'top',  yOffsetValue: 50,  yTranslateValue: -50 },
  // 颜色字段统一用双元素数组：[浅色值, 深色值]
  fontColor: ['rgba(255,255,255,1)', 'rgba(0,0,0,1)'],
  // ... 其他配置
}
export type TWidgetConfig = typeof WIDGET_CONFIG

import Index from './index.vue'
import { WIDGET_CODE, WIDGET_CONFIG } from './config'
import { WIDGET_ICON_META } from '@/logic/constants/icons'

export default {
  code: WIDGET_CODE,
  component: Index,
  config: WIDGET_CONFIG,
  iconName: WIDGET_ICON_META[WIDGET_CODE].iconName,
  iconSize: WIDGET_ICON_META[WIDGET_CODE].widgetSize,
  widgetLabel: 'setting.myWidget',   // i18n key
}

export const ICONS = {
  // ... 已有图标 ...
  myWidget: 'mdi:some-valid-icon',   // ← 先在这里定义
}

export const WIDGET_ICON_META: Record<WidgetCodes, WidgetIconMeta> = {
  // ... 已有条目 ...
  myWidget: { iconName: ICONS.myWidget, widgetSize: 30 },  // ← 引用常量
}

// 在 WidgetConfigByCode 类型中追加一行（使用动态 import() 语法，无需单独 import）
myWidget: import('@/newtab/widgets/myWidget/config').TWidgetConfig

"setting": {
  "myWidget": "我的组件"
}

<template>
  <SettingFormWrap>
    <!-- 在这里使用原子组件（ColorField, FontField, SliderField, etc.）构建表单 -->
    <SwitchField
      v-model="localConfig.myWidget.enabled"
    />
    <ColorField
      v-model="localConfig.myWidget.fontColor"
      :label="$t('common.color')"
    />
    <!-- ... 更多表单项 -->
  </SettingFormWrap>
</template>

<script setup lang="ts">
import { SettingFormWrap } from '@/setting/components/SettingFormWrap'
import { SwitchField, ColorField } from '@/setting/fields'
import { localConfig } from '@/logic/config/state'
</script>

{ code: 'myWidget', labelKey: 'setting.myWidget' },

export const SETTING_ICON_META: Record<settingPanes, SettingIconMeta> = {
  // ...
  myWidget: { iconName: ICONS.myWidget, settingSize: 20 },
}

export const WIDGET_SETTING_PANE_MAP: Partial<Record<WidgetCodes, settingPanes>> = {
  // ...
  myWidget: 'myWidget',   // Widget code 对应到 setting pane code
}