u

2025-09-12 22:03:19 +08:00
1 parent 785bce1907
commit 985b42cafb
@@ -13,6 +13,7 @@
    "@floating-ui/vue": "^1.1.9",
    "@iconify/vue": "5.0.0",
    "naive-ui": "^2.42.0",
+    "tdesign-vue-next": "^1.16.1",
    "vue": "^3.5.18"
  },
  "devDependencies": {
@@ -1,7 +1,4 @@
@use './_light' as *;
@use './_dark' as *;
-@use './_radius' as *;
-@use './_font' as *;
-@use './_size' as *;


@@ -1,14 +1,18 @@
 import type { ConfigProviderContext } from '../_config/context'
-import { inject } from 'vue'
+import { getCurrentInstance, inject } from 'vue'
 import { configProviderInjectionKey } from '../_config/context'

 const DEFAULT_PREFIX = 'ao'

 export function getPrefixCls(componentName?: string): string {
-  const configProvider: ConfigProviderContext | undefined
-    = inject(configProviderInjectionKey, undefined)
+  let prefix = DEFAULT_PREFIX

-  const prefix = configProvider?.prefixCls ?? DEFAULT_PREFIX
+  // 仅在 setup 或函数式组件中可以调用 inject
+  const instance = getCurrentInstance()
+  if (instance) {
+    const configProvider: ConfigProviderContext | undefined = inject(configProviderInjectionKey, undefined)
+    prefix = configProvider?.prefixCls ?? DEFAULT_PREFIX
+  }

  return componentName ? `${prefix}-${componentName}` : prefix
 }
@@ -1,5 +1,5 @@
 import type { PropType, VNode } from 'vue'
-import { cloneVNode, defineComponent, ref } from 'vue'
+import { cloneVNode, defineComponent, ref, watch } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
 import Tag from '../tag/index'

@@ -13,60 +13,100 @@ export default defineComponent({
      default: () => [],
    },
    checkedProps: {
-      type: Object as PropType<{
-        type?: string
-        status?: string
-      }>,
+      type: Object as PropType<{ type?: 'solid' | 'light' | 'outline' | 'outline-light', status?: 'primary' | 'danger' | 'warning' | 'success' | 'default' }>,
      default: () => ({
        type: 'solid',
        status: 'primary',
      }),
    },
    uncheckedProps: {
-      type: Object as PropType<{
-        type?: string
-        status?: string
-      }>,
+      type: Object as PropType<{ type?: 'solid' | 'light' | 'outline' | 'outline-light', status?: 'primary' | 'danger' | 'warning' | 'success' | 'default' }>,
      default: () => ({
        type: 'solid',
        status: 'default',
      }),
    },
-    class: {
-      type: [String, Array, Object],
-      default: '',
+    class: { type: [String, Array, Object], default: '' },
+    style: { type: Object, default: () => ({}) },
  },
-    style: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: [],
-  setup(props, { slots }) {
+  emits: ['update:modelValue', 'change'],
+  setup(props, { slots, emit }) {
    const prefixCls = getPrefixCls('tag-group')
-    const selectedValues = ref([...props.modelValue])
+    const selectedValues = ref<(string | number)[]>([...props.modelValue])

+    // 外部 v-model 更新时同步内部值
+    watch(
+      () => props.modelValue,
+      (val) => {
+        selectedValues.value = [...val]
+      },
+    )
+
+    const updateValue = (value: string | number, checked: boolean) => {
+      let newValues = [...selectedValues.value]
+
+      if (props.multiple) {
+        if (checked) {
+          if (!newValues.includes(value))
+            newValues.push(value)
+        }
+        else {
+          newValues = newValues.filter(v => v !== value)
+        }
+      }
+      else {
+        // 单选：checked 为 true → 只保留当前值
+        newValues = checked ? [value] : []
+      }
+
+      selectedValues.value = newValues
+      emit('update:modelValue', newValues)
+      emit('change', newValues)
+    }
+
+    const renderTag = (value: string | number, label?: string, vnode?: VNode) => {
+      const checked = selectedValues.value.includes(value)
+      const baseProps = {
+        'key': value,
+        value,
+        checked,
+        'checkable': true,
+        'checkedProps': props.checkedProps,
+        'uncheckedProps': props.uncheckedProps,
+        'onUpdate:checked': (val: boolean) => updateValue(value, val),
+      }
+
+      if (vnode) {
+        return cloneVNode(vnode, baseProps)
+      }
+      else {
+        return (
+          <Tag {...baseProps}>
+            {label}
+          </Tag>
+        )
+      }
+    }
+
+    // slot 渲染
    const renderSlotTags = () => {
      const slotNodes = slots.default?.() || []
      return slotNodes.map((vnode: VNode) => {
-        // 判断是否是 Tag 组件
-        if (vnode.type === Tag) {
+        if ((vnode.type as any)?.name === 'Tag') {
          const value = (vnode.props as any)?.value
-          const checked = selectedValues.value.includes(value)
-          return cloneVNode(vnode, {
-            checked,
-            'type': checked ? props.checkedProps.type : props.uncheckedProps.type,
-            'status': checked ? props.checkedProps.status : props.uncheckedProps.status,
-            'onUpdate:checked': (val: boolean) => handleTagClick(value, val),
-          })
+          return renderTag(value, undefined, vnode)
        }
        return vnode
      })
    }

+    // options 渲染
+    const renderOptionTags = () =>
+      props.options.map(opt => renderTag(opt.value, opt.label))
+
    return () => (
      <div class={[prefixCls, props.class]} style={{ ...props.style }}>
-        {slots.default?.()}
+        {props.options.length ? renderOptionTags() : renderSlotTags()}
      </div>
    )
  },
@@ -53,6 +53,37 @@ $tag-prefix: '#{$prefix}-tag';
    }
  }

+  &-check {
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  }
+
+  &-disabled {
+    cursor: default;
+  }
+
+  &-check.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-default {
+    background-color: $default-color-disabled;
+    color: $text-color-disabled;
+  }
+
+  &-checked.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-primary {
+    background-color: $primary-color-disabled;
+  }
+
+  &-checked.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-danger {
+    background-color: $danger-color-disabled;
+  }
+
+  &-checked.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-warning {
+    background-color: $warning-color-disabled;
+  }
+
+  &-checked.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-success {
+    background-color: $success-color-disabled;
+  }
+
  &-type-solid {
    &.#{$tag-prefix}-status-default {
      color: $text-color-base;
@@ -6,6 +6,7 @@ import Icon from '../icon/index'
 export default defineComponent({
  name: 'Tag',
  props: {
+
    shape: {
      type: String as PropType<'square' | 'round' | 'mark'>,
      default: 'square',
@@ -22,51 +23,77 @@ export default defineComponent({
      type: String as () => 'primary' | 'danger' | 'warning' | 'success' | 'default',
      default: 'default',
    },
-    showClose: {
-      type: Boolean,
-      default: false,
+    checkable: { type: Boolean, default: false },
+    checked: { type: Boolean, default: false },
+    value: { type: [String, Number], required: false },
+    checkedProps: {
+      type: Object as PropType<{ type?: 'solid' | 'light' | 'outline' | 'outline-light', status?: 'primary' | 'danger' | 'warning' | 'success' | 'default' }>,
+      default: () => ({
+        type: 'solid',
+        status: 'primary',
+      }),
    },
-    icon: {
-      type: String,
-      default: '',
+    uncheckedProps: {
+      type: Object as PropType<{ type?: 'solid' | 'light' | 'outline' | 'outline-light', status?: 'primary' | 'danger' | 'warning' | 'success' | 'default' }>,
+      default: () => ({
+        type: 'solid',
+        status: 'default',
+      }),
    },
-    disabled: {
-      type: Boolean,
-      default: false,
+    showClose: { type: Boolean, default: false },
+    icon: { type: String, default: '' },
+    disabled: { type: Boolean, default: false },
+    class: { type: [String, Array, Object], default: '' },
+    style: { type: Object, default: () => ({}) },
  },
-    class: {
-      type: [String, Array, Object],
-      default: '',
-    },
-    style: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: ['click', 'close'],
+  emits: ['click', 'close', 'update:checked'],
  setup(props, { slots, emit }) {
    const prefixCls = getPrefixCls('tag')
    const visible = ref(true)

    const handleClick = (event: MouseEvent) => {
-      emit('click', event)
+      if (props.disabled)
+        return
+
+      // 如果 checkable，触发 update:checked
+      if (props.checkable) {
+        emit('update:checked', !props.checked)
+      }
+
+      emit('click', { value: props.value, checked: props.checked, event })
    }

    const handleClose = (event: MouseEvent) => {
      event.stopPropagation()
-      visible.value = false // 点击关闭隐藏 Tag
-      emit('close', event)
+      visible.value = false
+      emit('close', { value: props.value, event })
    }

    return () =>
-      visible.value && (
+      visible.value && (() => {
+        const renderType = props.checkable
+          ? props.checked
+            ? props.checkedProps.type
+            : props.uncheckedProps.type
+          : props.type
+
+        const renderStatus = props.checkable
+          ? props.checked
+            ? props.checkedProps.status
+            : props.uncheckedProps.status
+          : props.status
+
+        return (
          <div
            class={[
              prefixCls,
              `${prefixCls}-size-${props.size}`,
              `${prefixCls}-shape-${props.shape}`,
-            `${prefixCls}-type-${props.type}`,
-            `${prefixCls}-status-${props.status}`,
+              `${prefixCls}-type-${renderType}`,
+              `${prefixCls}-status-${renderStatus}`,
+              { [`${prefixCls}-check`]: props.checkable },
+              { [`${prefixCls}-checked`]: props.checked },
+              { [`${prefixCls}-disabled`]: props.disabled },
              props.class,
            ]}
            style={{ ...props.style }}
@@ -79,5 +106,6 @@ export default defineComponent({
            )}
          </div>
        )
+      })()
  },
 })
@@ -20,6 +20,9 @@ importers:
      naive-ui:
        specifier: ^2.42.0
        version: 2.42.0(vue@3.5.19(typescript@5.8.3))
+      tdesign-vue-next:
+        specifier: ^1.16.1
+        version: 1.16.1(vue@3.5.19(typescript@5.8.3))
      vue:
        specifier: ^3.5.18
        version: 3.5.19(typescript@5.8.3)
@@ -255,6 +258,10 @@ packages:
    peerDependencies:
      '@babel/core': ^7.0.0-0

+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/template@7.27.2':
    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
    engines: {node: '>=6.9.0'}
@@ -616,42 +623,36 @@ packages:
    engines: {node: '>= 10.0.0'}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@parcel/watcher-linux-arm-musl@2.5.1':
    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
    engines: {node: '>= 10.0.0'}
    cpu: [arm]
    os: [linux]
-    libc: [musl]

  '@parcel/watcher-linux-arm64-glibc@2.5.1':
    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
    engines: {node: '>= 10.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@parcel/watcher-linux-arm64-musl@2.5.1':
    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
    engines: {node: '>= 10.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@parcel/watcher-linux-x64-glibc@2.5.1':
    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
    engines: {node: '>= 10.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@parcel/watcher-linux-x64-musl@2.5.1':
    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
    engines: {node: '>= 10.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@parcel/watcher-win32-arm64@2.5.1':
    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -683,6 +684,9 @@ packages:
    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}

+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
  '@rolldown/pluginutils@1.0.0-beta.29':
    resolution: {integrity: sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==}

@@ -723,67 +727,56 @@ packages:
    resolution: {integrity: sha512-JWnrj8qZgLWRNHr7NbpdnrQ8kcg09EBBq8jVOjmtlB3c8C6IrynAJSMhMVGME4YfTJzIkJqvSUSVJRqkDnu/aA==}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm-musleabihf@4.48.0':
    resolution: {integrity: sha512-9xu92F0TxuMH0tD6tG3+GtngwdgSf8Bnz+YcsPG91/r5Vgh5LNofO48jV55priA95p3c92FLmPM7CvsVlnSbGQ==}
    cpu: [arm]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-arm64-gnu@4.48.0':
    resolution: {integrity: sha512-NLtvJB5YpWn7jlp1rJiY0s+G1Z1IVmkDuiywiqUhh96MIraC0n7XQc2SZ1CZz14shqkM+XN2UrfIo7JB6UufOA==}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm64-musl@4.48.0':
    resolution: {integrity: sha512-QJ4hCOnz2SXgCh+HmpvZkM+0NSGcZACyYS8DGbWn2PbmA0e5xUk4bIP8eqJyNXLtyB4gZ3/XyvKtQ1IFH671vQ==}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-loongarch64-gnu@4.48.0':
    resolution: {integrity: sha512-Pk0qlGJnhILdIC5zSKQnprFjrGmjfDM7TPZ0FKJxRkoo+kgMRAg4ps1VlTZf8u2vohSicLg7NP+cA5qE96PaFg==}
    cpu: [loong64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-ppc64-gnu@4.48.0':
    resolution: {integrity: sha512-/dNFc6rTpoOzgp5GKoYjT6uLo8okR/Chi2ECOmCZiS4oqh3mc95pThWma7Bgyk6/WTEvjDINpiBCuecPLOgBLQ==}
    cpu: [ppc64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-riscv64-gnu@4.48.0':
    resolution: {integrity: sha512-YBwXsvsFI8CVA4ej+bJF2d9uAeIiSkqKSPQNn0Wyh4eMDY4wxuSp71BauPjQNCKK2tD2/ksJ7uhJ8X/PVY9bHQ==}
    cpu: [riscv64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-riscv64-musl@4.48.0':
    resolution: {integrity: sha512-FI3Rr2aGAtl1aHzbkBIamsQyuauYtTF9SDUJ8n2wMXuuxwchC3QkumZa1TEXYIv/1AUp1a25Kwy6ONArvnyeVQ==}
    cpu: [riscv64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-s390x-gnu@4.48.0':
    resolution: {integrity: sha512-Dx7qH0/rvNNFmCcIRe1pyQ9/H0XO4v/f0SDoafwRYwc2J7bJZ5N4CHL/cdjamISZ5Cgnon6iazAVRFlxSoHQnQ==}
    cpu: [s390x]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.48.0':
    resolution: {integrity: sha512-GUdZKTeKBq9WmEBzvFYuC88yk26vT66lQV8D5+9TgkfbewhLaTHRNATyzpQwwbHIfJvDJ3N9WJ90wK/uR3cy3Q==}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-musl@4.48.0':
    resolution: {integrity: sha512-ao58Adz/v14MWpQgYAb4a4h3fdw73DrDGtaiF7Opds5wNyEQwtO6M9dBh89nke0yoZzzaegq6J/EXs7eBebG8A==}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-win32-arm64-msvc@4.48.0':
    resolution: {integrity: sha512-kpFno46bHtjZVdRIOxqaGeiABiToo2J+st7Yce+aiAoo1H0xPi2keyQIP04n2JjDVuxBN6bSz9R6RdTK5hIppw==}
@@ -833,9 +826,18 @@ packages:
  '@types/node@24.3.0':
    resolution: {integrity: sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==}

+  '@types/sortablejs@1.15.8':
+    resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
+
+  '@types/tinycolor2@1.4.6':
+    resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
+
  '@types/unist@3.0.3':
    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}

+  '@types/validator@13.15.3':
+    resolution: {integrity: sha512-7bcUmDyS6PN3EuD9SlGGOxM77F8WLVsrwkxyWxKnxzmXoequ6c7741QBrANq6htVRGOITJ7z72mTP6Z4XyuG+Q==}
+
  '@typescript-eslint/eslint-plugin@8.40.0':
    resolution: {integrity: sha512-w/EboPlBwnmOBtRbiOvzjD+wdiZdgFeo17lkltrtn7X37vagKKWJABvyfsJXTlHe6XBzugmYgd4A4nW+k8Mixw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1159,6 +1161,9 @@ packages:
  date-fns@3.6.0:
    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}

+  dayjs@1.11.18:
+    resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==}
+
  de-indent@1.0.2:
    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}

@@ -1855,6 +1860,9 @@ packages:
    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
    engines: {node: '>=16 || 14 >=14.17'}

+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
  mlly@1.8.0:
    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}

@@ -2096,6 +2104,9 @@ packages:
  sisteransi@1.0.5:
    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}

+  sortablejs@1.15.6:
+    resolution: {integrity: sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==}
+
  source-map-js@1.2.1:
    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
    engines: {node: '>=0.10.0'}
@@ -2140,6 +2151,20 @@ packages:
    resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==}
    engines: {node: '>=6'}

+  tdesign-icons-vue-next@0.3.7:
+    resolution: {integrity: sha512-Q5ebVty/TCqhBa0l/17kkhjC0pBAOGvn7C35MAt1xS+johKVM9QEDOy9R6XEl332AiwQ37MwqioczqjYC30ckw==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  tdesign-vue-next@1.16.1:
+    resolution: {integrity: sha512-UftAv+Zp1670Ld0+EfCk5/8X4OigKvXKDTgO3X2PIvq8KTZA1Nvf0IegYvwCoKAjCaV1jYEmEHuGfmlXskdSCg==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      vue: '>=3.1.0'
+
+  tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+
  tinyexec@1.0.1:
    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}

@@ -2257,6 +2282,10 @@ packages:
  util-deprecate@1.0.2:
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}

+  validator@13.15.15:
+    resolution: {integrity: sha512-BgWVbCI72aIQy937xbawcs+hrVaN/CZ2UwutgaJ36hGqRrLNM+f5LUT/YPRbo8IV/ASeFzXszezV+y2+rq3l8A==}
+    engines: {node: '>= 0.10'}
+
  vdirs@0.1.8:
    resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
    peerDependencies:
@@ -2585,6 +2614,8 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@babel/runtime@7.28.4': {}
+
  '@babel/template@7.27.2':
    dependencies:
      '@babel/code-frame': 7.27.1
@@ -2935,6 +2966,8 @@ snapshots:

  '@pkgr/core@0.2.9': {}

+  '@popperjs/core@2.11.8': {}
+
  '@rolldown/pluginutils@1.0.0-beta.29': {}

  '@rolldown/pluginutils@1.0.0-beta.34': {}
@@ -3035,8 +3068,14 @@ snapshots:
    dependencies:
      undici-types: 7.10.0

+  '@types/sortablejs@1.15.8': {}
+
+  '@types/tinycolor2@1.4.6': {}
+
  '@types/unist@3.0.3': {}

+  '@types/validator@13.15.3': {}
+
  '@typescript-eslint/eslint-plugin@8.40.0(@typescript-eslint/parser@8.40.0(eslint@9.34.0)(typescript@5.8.3))(eslint@9.34.0)(typescript@5.8.3)':
    dependencies:
      '@eslint-community/regexpp': 4.12.1
@@ -3422,6 +3461,8 @@ snapshots:

  date-fns@3.6.0: {}

+  dayjs@1.11.18: {}
+
  de-indent@1.0.2: {}

  debug@4.4.1:
@@ -4348,6 +4389,8 @@ snapshots:
    dependencies:
      brace-expansion: 2.0.2

+  mitt@3.0.1: {}
+
  mlly@1.8.0:
    dependencies:
      acorn: 8.15.0
@@ -4598,6 +4641,8 @@ snapshots:

  sisteransi@1.0.5: {}

+  sortablejs@1.15.6: {}
+
  source-map-js@1.2.1: {}

  source-map@0.6.1:
@@ -4637,6 +4682,30 @@ snapshots:

  tapable@2.2.3: {}

+  tdesign-icons-vue-next@0.3.7(vue@3.5.19(typescript@5.8.3)):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      vue: 3.5.19(typescript@5.8.3)
+
+  tdesign-vue-next@1.16.1(vue@3.5.19(typescript@5.8.3)):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@popperjs/core': 2.11.8
+      '@types/lodash-es': 4.17.12
+      '@types/sortablejs': 1.15.8
+      '@types/tinycolor2': 1.4.6
+      '@types/validator': 13.15.3
+      dayjs: 1.11.18
+      lodash-es: 4.17.21
+      mitt: 3.0.1
+      sortablejs: 1.15.6
+      tdesign-icons-vue-next: 0.3.7(vue@3.5.19(typescript@5.8.3))
+      tinycolor2: 1.6.0
+      validator: 13.15.15
+      vue: 3.5.19(typescript@5.8.3)
+
+  tinycolor2@1.6.0: {}
+
  tinyexec@1.0.1: {}

  tinyglobby@0.2.14:
@@ -4772,6 +4841,8 @@ snapshots:

  util-deprecate@1.0.2: {}

+  validator@13.15.15: {}
+
  vdirs@0.1.8(vue@3.5.19(typescript@5.8.3)):
    dependencies:
      evtd: 0.2.4
@@ -1,13 +1,36 @@
 <script setup lang="ts">
+import { ref } from 'vue'

+const checked = ref(['1'])
+
+const checked1 = ref(false)
+const checked2 = ref(false)
+const checked3 = ref(false)
+
+const STYLE_B_UNCHECKED_PROPS = {
+  theme: 'default',
+  variant: 'outline',
+}
+
+const STYLE_C_CHECKED_PROPS = {
+  theme: 'primary',
+  variant: 'outline',
+}
 </script>

 <template>
  <div class="demo">
    <div class="row">
-      <ATagGroup>
-        <ATag show-close>测试1</ATag>
-        <ATag show-close>测试2</ATag>
+      <ATag show-close checkable disabled>
+        测试 1
+      </ATag>
+      <ATagGroup v-model="checked">
+        <ATag show-close value="1">
+          测试 1
+        </ATag>
+        <ATag show-close value="2">
+          测试2
+        </ATag>
      </ATagGroup>
    </div>
  </div>
@@ -1,6 +1,9 @@
 import naive from 'naive-ui'
+import TDesign from 'tdesign-vue-next'
 import { createApp } from 'vue'
 import App from './App.vue'
 import './style.scss'

-createApp(App).use(naive).mount('#app')
+import 'tdesign-vue-next/es/style/index.css'
+
+createApp(App).use(naive).use(TDesign).mount('#app')