20260720172840

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/_semantic.md

@@ -0,0 +1,103 @@
+# _semantic
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { SemanticPreview } from '@/components/semantic'
+import { useComponentLocale } from '@/composables/use-locale'
+import { locales } from '../locales'
+
+const mode = ref<'single' | 'multiple'>('single')
+
+const { t } = useComponentLocale(locales)
+
+const semantics = computed(() => {
+  const base = [
+    { name: 'root', desc: t('root') },
+    { name: 'prefix', desc: t('prefix') },
+    { name: 'placeholder', desc: t('placeholder') },
+  ]
+
+  if (mode.value === 'multiple') {
+    base.push(
+      ...[
+        { name: 'content', desc: t('content') },
+        { name: 'item', desc: t('item') },
+        { name: 'itemContent', desc: t('itemContent') },
+        { name: 'itemRemove', desc: t('itemRemove') },
+      ],
+    )
+  }
+
+  base.push(
+    ...[
+      { name: 'input', desc: t('input') },
+      { name: 'suffix', desc: t('suffix') },
+      { name: 'popup.root', desc: t('popup.root') },
+      { name: 'popup.item', desc: t('popup.item') },
+      { name: 'popup.itemTitle', desc: t('popup.itemTitle') },
+      { name: 'popup.itemSwitcher', desc: t('popup.itemSwitcher'), version: '1.3.0' },
+    ],
+  )
+
+  return base
+})
+
+const treeValue = ref<string | string[] | undefined>(undefined)
+function handleResetValue(newMode: string | number) {
+  if (newMode === 'multiple') {
+    treeValue.value = ['aojunhao123']
+  }
+  else {
+    treeValue.value = undefined
+  }
+}
+
+const divRef = ref<HTMLDivElement | null>(null)
+
+const treeData = [
+  {
+    value: 'contributors',
+    title: 'contributors',
+    children: [
+      { value: 'aojunhao123', title: 'aojunhao123' },
+      { value: 'thinkasany', title: 'thinkasany' },
+      { value: 'meet-student', title: 'meet-student' },
+    ],
+  },
+]
+</script>
+
+<template>
+  <SemanticPreview
+    component-name="TreeSelect"
+    :semantics="semantics"
+  >
+    <template #default="{ classes }">
+      <div ref="divRef" :style="{ position: 'absolute', height: '200px' }">
+        <div :style="{ display: 'flex', justifyContent: 'center', marginBottom: '12px' }">
+          <a-segmented v-model:value="mode" :options="['single', 'multiple']" @change="handleResetValue" />
+        </div>
+
+        <a-tree-select
+          v-model:value="treeValue"
+          prefix="prefix"
+          :style="{ width: '300px' }"
+          :tree-data="treeData"
+          tree-default-expand-all
+          :multiple="mode === 'multiple'"
+          show-search
+          max-tag-count="responsive"
+          placeholder="Please select"
+          allow-clear
+          open
+          :get-popup-container="() => divRef!"
+          :classes="classes"
+        />
+      </div>
+    </template>
+  </SemanticPreview>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/async.md

@@ -0,0 +1,71 @@
+# Asynchronous loading
+
+## Description (en-US)
+
+Asynchronous loading tree node.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { TreeSelectEmits, TreeSelectProps } from 'antdv-next'
+import { ref } from 'vue'
+
+type TreeDataItem = NonNullable<TreeSelectProps['treeData']>[number]
+
+const value = ref<string>()
+const treeData = ref<TreeDataItem[]>([
+  { id: 1, pId: 0, value: '1', title: 'Expand to load' },
+  { id: 2, pId: 0, value: '2', title: 'Expand to load' },
+  { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
+])
+
+function genTreeNode(parentId: string | number, isLeaf = false): TreeDataItem {
+  const random = Math.random().toString(36).substring(2, 6)
+  return {
+    id: random,
+    pId: parentId,
+    value: random,
+    title: isLeaf ? 'Tree Node' : 'Expand to load',
+    isLeaf,
+  }
+}
+
+const onLoadData: TreeSelectProps['loadData'] = ({ id }) =>
+  new Promise<void>((resolve) => {
+    setTimeout(() => {
+      const parentId = id ?? 0
+      treeData.value = treeData.value.concat([
+        genTreeNode(parentId, false),
+        genTreeNode(parentId, true),
+        genTreeNode(parentId, true),
+      ])
+      resolve()
+    }, 300)
+  })
+
+const onChange: TreeSelectEmits['change'] = (newValue) => {
+  console.log(newValue)
+}
+</script>
+
+<template>
+  <a-tree-select
+    v-model:value="value"
+    tree-data-simple-mode
+    style="width: 100%"
+    :styles="{
+      popup: {
+        root: {
+          maxHeight: '400px',
+          overflow: 'auto',
+        },
+      },
+    }"
+    placeholder="Please select"
+    :load-data="onLoadData"
+    :tree-data="treeData"
+    @change="onChange"
+  />
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/basic.md

@@ -0,0 +1,95 @@
+# Basic
+
+## Description (en-US)
+
+The most basic usage.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { TreeSelectEmits } from 'antdv-next'
+import { ref } from 'vue'
+
+const value = ref()
+const treeData = [
+  {
+    value: 'parent 1',
+    title: 'parent 1',
+    children: [
+      {
+        value: 'parent 1-0',
+        title: 'parent 1-0',
+        children: [
+          {
+            value: 'leaf1',
+            title: 'leaf1',
+          },
+          {
+            value: 'leaf2',
+            title: 'leaf2',
+          },
+          {
+            value: 'leaf3',
+            title: 'leaf3',
+          },
+          {
+            value: 'leaf4',
+            title: 'leaf4',
+          },
+          {
+            value: 'leaf5',
+            title: 'leaf5',
+          },
+          {
+            value: 'leaf6',
+            title: 'leaf6',
+          },
+        ],
+      },
+      {
+        value: 'parent 1-1',
+        title: 'parent 1-1',
+        children: [
+          {
+            value: 'leaf11',
+            title: 'leaf11',
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const onPopupScroll: TreeSelectEmits['popupScroll'] = (e) => {
+  console.log('onPopupScroll', e)
+}
+</script>
+
+<template>
+  <a-tree-select
+    v-model:value="value"
+    :tree-data="treeData"
+    style="width: 100%"
+    :styles="{
+      popup: {
+        root: {
+          maxHeight: '400px',
+          overflow: 'auto',
+        },
+      },
+    }"
+    placeholder="Please select"
+    allow-clear
+    tree-default-expand-all
+    @popup-scroll="onPopupScroll"
+  >
+    <template #treeTitleRender="item">
+      <template v-if="item.value === 'leaf11'">
+        <b style="color: #08c">leaf11</b>
+      </template>
+    </template>
+  </a-tree-select>
+  {{ value }}
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/checkable.md

@@ -0,0 +1,71 @@
+# Checkable
+
+## Description (en-US)
+
+Multiple and checkable.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { TreeSelect } from 'antdv-next'
+import { ref } from 'vue'
+
+const SHOW_PARENT = TreeSelect.SHOW_PARENT
+
+const treeData = [
+  {
+    title: 'Node1',
+    value: '0-0',
+    key: '0-0',
+    children: [
+      {
+        title: 'Child Node1',
+        value: '0-0-0',
+        key: '0-0-0',
+      },
+    ],
+  },
+  {
+    title: 'Node2',
+    value: '0-1',
+    key: '0-1',
+    children: [
+      {
+        title: 'Child Node3',
+        value: '0-1-0',
+        key: '0-1-0',
+      },
+      {
+        title: 'Child Node4',
+        value: '0-1-1',
+        key: '0-1-1',
+      },
+      {
+        title: 'Child Node5',
+        value: '0-1-2',
+        key: '0-1-2',
+      },
+    ],
+  },
+]
+
+const value = ref<string[]>(['0-0-0'])
+
+function onChange(newValue: string[]) {
+  console.log('onChange', newValue)
+}
+</script>
+
+<template>
+  <a-tree-select
+    v-model:value="value"
+    :tree-data="treeData"
+    tree-checkable
+    :show-checked-strategy="SHOW_PARENT"
+    placeholder="Please select"
+    style="width: 100%"
+    @change="onChange"
+  />
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/maxCount.md

@@ -0,0 +1,69 @@
+# Max Count
+
+## Description (en-US)
+
+You can set the `maxCount` prop to control the max number of items can be selected. When the limit is exceeded, the options will become disabled.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { DownOutlined } from '@antdv-next/icons'
+import { TreeSelect } from 'antdv-next'
+import { ref } from 'vue'
+
+const MAX_COUNT = 3
+const SHOW_CHILD = TreeSelect.SHOW_CHILD
+
+const treeData = [
+  {
+    title: 'Parent 1',
+    value: 'parent1',
+    children: [
+      {
+        title: 'Child 1-1',
+        value: 'child1-1',
+      },
+      {
+        title: 'Child 1-2',
+        value: 'child1-2',
+      },
+    ],
+  },
+  {
+    title: 'Parent 2',
+    value: 'parent2',
+    children: [
+      {
+        title: 'Child 2-1',
+        value: 'child2-1',
+      },
+      {
+        title: 'Child 2-2',
+        value: 'child2-2',
+      },
+    ],
+  },
+]
+
+const value = ref<string[]>(['child1-1'])
+</script>
+
+<template>
+  <a-tree-select
+    v-model:value="value"
+    :tree-data="treeData"
+    multiple
+    tree-checkable
+    :max-count="MAX_COUNT"
+    style="width: 100%"
+    :show-checked-strategy="SHOW_CHILD"
+    placeholder="Please select"
+  >
+    <template #suffixIcon>
+      <span>{{ value.length }} / {{ MAX_COUNT }}</span>
+      <DownOutlined />
+    </template>
+  </a-tree-select>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/maxCountNoEffect.md

@@ -0,0 +1,74 @@
+# Max Count no effect
+
+## Description (en-US)
+
+When `showCheckedStrategy=SHOW_PARENT` or `showCheckedStrategy=SHOW_ALL` and `treeCheckStrictly=false`, `maxCount` will not take effect.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { DownOutlined } from '@antdv-next/icons'
+import { TreeSelect } from 'antdv-next'
+import { ref } from 'vue'
+
+const MAX_COUNT = 2
+const SHOW_PARENT = TreeSelect.SHOW_PARENT
+
+const treeData = [
+  {
+    title: 'Node1',
+    value: '0-0',
+    key: '0-0',
+    children: [
+      {
+        title: 'Child Node1',
+        value: '0-0-1',
+        key: '0-0-1',
+      },
+      {
+        title: 'Child Node2',
+        value: '0-0-2',
+        key: '0-0-2',
+      },
+    ],
+  },
+  {
+    title: 'Node2',
+    value: '0-1',
+    key: '0-1',
+    children: [
+      {
+        title: 'Child Node3',
+        value: '0-1-1',
+        key: '0-1-1',
+      },
+      {
+        title: 'Child Node4',
+        value: '0-1-2',
+        key: '0-1-2',
+      },
+    ],
+  },
+]
+
+const value = ref<string[]>([])
+</script>
+
+<template>
+  <a-tree-select
+    v-model:value="value"
+    tree-checkable
+    :show-checked-strategy="SHOW_PARENT"
+    :max-count="MAX_COUNT"
+    placeholder="please select"
+    style="width: 100%"
+    :tree-data="treeData"
+  >
+    <template #suffixIcon>
+      <span>{{ value.length }} / {{ MAX_COUNT }}</span>
+      <DownOutlined />
+    </template>
+  </a-tree-select>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/multiple.md

@@ -0,0 +1,81 @@
+# Multiple Selection
+
+## Description (en-US)
+
+Multiple selection usage.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { TreeSelectEmits } from 'antdv-next'
+import { ref } from 'vue'
+
+const treeData = [
+  {
+    value: 'parent 1',
+    title: 'parent 1',
+    children: [
+      {
+        value: 'parent 1-0',
+        title: 'parent 1-0',
+        children: [
+          {
+            value: 'leaf1',
+            title: 'my leaf',
+          },
+          {
+            value: 'leaf2',
+            title: 'your leaf',
+          },
+        ],
+      },
+      {
+        value: 'parent 1-1',
+        title: 'parent 1-1',
+        children: [
+          {
+            value: 'sss',
+            title: 'sss',
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const value = ref<string[]>()
+
+const onChange: TreeSelectEmits['change'] = (newValue) => {
+  console.log(newValue)
+}
+</script>
+
+<template>
+  <a-tree-select
+    v-model:value="value"
+    show-search
+    style="width: 100%"
+    :styles="{
+      popup: {
+        root: {
+          maxHeight: '400px',
+          overflow: 'auto',
+        },
+      },
+    }"
+    placeholder="Please select"
+    allow-clear
+    multiple
+    tree-default-expand-all
+    :tree-data="treeData"
+    @change="onChange"
+  >
+    <template #treeTitleRender="item">
+      <template v-if="item.value === 'sss'">
+        <b style="color: #08c">sss</b>
+      </template>
+    </template>
+  </a-tree-select>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/placement.md

@@ -0,0 +1,90 @@
+# Placement
+
+## Description (en-US)
+
+You can manually specify the position of the popup via `placement`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { TreeSelectProps } from 'antdv-next'
+import { ref, shallowRef } from 'vue'
+
+type Placement = NonNullable<TreeSelectProps['placement']>
+
+const placement = shallowRef<Placement>('topLeft')
+const value = ref<string>()
+
+const treeData = [
+  {
+    value: 'parent 1',
+    title: 'parent 1',
+    children: [
+      {
+        value: 'parent 1-0',
+        title: 'parent 1-0',
+        children: [
+          {
+            value: 'leaf1',
+            title: 'leaf1',
+          },
+          {
+            value: 'leaf2',
+            title: 'leaf2',
+          },
+        ],
+      },
+      {
+        value: 'parent 1-1',
+        title: 'parent 1-1',
+        children: [
+          {
+            value: 'leaf3',
+            title: 'leaf3',
+          },
+        ],
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <a-radio-group v-model:value="placement">
+    <a-radio-button value="topLeft">
+      topLeft
+    </a-radio-button>
+    <a-radio-button value="topRight">
+      topRight
+    </a-radio-button>
+    <a-radio-button value="bottomLeft">
+      bottomLeft
+    </a-radio-button>
+    <a-radio-button value="bottomRight">
+      bottomRight
+    </a-radio-button>
+  </a-radio-group>
+  <br>
+  <br>
+  <a-tree-select
+    v-model:value="value"
+    show-search
+    :styles="{
+      popup: {
+        root: {
+          maxHeight: '400px',
+          overflow: 'auto',
+          minWidth: '300px',
+        },
+      },
+    }"
+    placeholder="Please select"
+    :popup-match-select-width="false"
+    :placement="placement"
+    allow-clear
+    tree-default-expand-all
+    :tree-data="treeData"
+  />
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/status.md

@@ -0,0 +1,16 @@
+# Status
+
+## Description (en-US)
+
+Add status to TreeSelect with `status`, which could be `error` or `warning`.
+
+## Source
+
+```vue
+<template>
+  <a-space direction="vertical" style="width: 100%">
+    <a-tree-select status="error" style="width: 100%" placeholder="Error" />
+    <a-tree-select status="warning" style="width: 100%" multiple placeholder="Warning multiple" />
+  </a-space>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/style-class.md

@@ -0,0 +1,103 @@
+# Custom semantic dom styling
+
+## Description (en-US)
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { TreeSelectProps } from 'antdv-next'
+
+const classes: TreeSelectProps['classes'] = {
+  root: 'custom-tree-select',
+}
+
+const stylesObject: TreeSelectProps['styles'] = {
+  input: {
+    fontSize: 16,
+  },
+  suffix: {
+    color: '#1890ff',
+  },
+  popup: {
+    root: {
+      border: '1px solid #1890ff',
+    },
+  },
+}
+
+const stylesFn: TreeSelectProps['styles'] = (info) => {
+  if (info.props.size === 'middle') {
+    return {
+      suffix: {
+        color: '#722ed1',
+      },
+      popup: {
+        item: {
+          color: '#722ed1',
+        },
+      },
+    }
+  }
+  return {}
+}
+
+const treeData: TreeSelectProps['treeData'] = [
+  {
+    value: 'parent 1',
+    title: 'parent 1',
+    children: [
+      {
+        value: 'parent 1-0',
+        title: 'parent 1-0',
+        children: [
+          {
+            value: 'leaf1',
+            title: 'leaf1',
+          },
+          {
+            value: 'leaf2',
+            title: 'leaf2',
+          },
+        ],
+      },
+      {
+        value: 'parent 1-1',
+        title: 'parent 1-1',
+        children: [
+          {
+            value: 'leaf3',
+            title: 'leaf3',
+          },
+        ],
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <a-flex vertical gap="large">
+    <a-tree-select
+      :tree-data="treeData"
+      :classes="classes"
+      :styles="stylesObject"
+      placeholder="Object"
+    />
+    <a-tree-select
+      :tree-data="treeData"
+      :classes="classes"
+      :styles="stylesFn"
+      placeholder="Function"
+      size="middle"
+    />
+  </a-flex>
+</template>
+
+<style>
+.custom-tree-select {
+  width: 300px;
+  border-radius: 6px;
+}
+</style>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/suffix.md

@@ -0,0 +1,100 @@
+# Prefix and Suffix
+
+## Description (en-US)
+
+Custom `prefix` and `suffixIcon`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { TreeSelectEmits } from 'antdv-next'
+import { SmileOutlined } from '@antdv-next/icons'
+import { ref } from 'vue'
+
+const treeData = [
+  {
+    value: 'parent 1',
+    title: 'parent 1',
+    children: [
+      {
+        value: 'parent 1-0',
+        title: 'parent 1-0',
+        children: [
+          {
+            value: 'leaf1',
+            title: 'my leaf',
+          },
+          {
+            value: 'leaf2',
+            title: 'your leaf',
+          },
+        ],
+      },
+      {
+        value: 'parent 1-1',
+        title: 'parent 1-1',
+        children: [
+          {
+            value: 'sss',
+            title: 'sss',
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const value = ref<string>()
+
+const onChange: TreeSelectEmits['change'] = (newValue) => {
+  console.log(newValue)
+}
+</script>
+
+<template>
+  <a-tree-select
+    v-model:value="value"
+    show-search
+    style="width: 100%"
+    :styles="{
+      popup: {
+        root: {
+          maxHeight: '400px',
+          overflow: 'auto',
+        },
+      },
+    }"
+    placeholder="Please select"
+    allow-clear
+    tree-default-expand-all
+    :tree-data="treeData"
+    @change="onChange"
+  >
+    <template #suffixIcon>
+      <SmileOutlined />
+    </template>
+  </a-tree-select>
+  <br>
+  <br>
+  <a-tree-select
+    v-model:value="value"
+    show-search
+    prefix="Prefix"
+    style="width: 100%"
+    :styles="{
+      popup: {
+        root: {
+          maxHeight: '400px',
+          overflow: 'auto',
+        },
+      },
+    }"
+    placeholder="Please select"
+    allow-clear
+    tree-default-expand-all
+    :tree-data="treeData"
+    @change="onChange"
+  />
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/treeData.md

@@ -0,0 +1,60 @@
+# Generate from tree data
+
+## Description (en-US)
+
+The tree structure can be populated using `treeData` property. This is a quick and easy way to provide the tree content.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { TreeSelectEmits } from 'antdv-next'
+import { ref } from 'vue'
+
+const treeData = [
+  {
+    title: 'Node1',
+    value: '0-0',
+    children: [
+      {
+        title: 'Child Node1',
+        value: '0-0-1',
+      },
+      {
+        title: 'Child Node2',
+        value: '0-0-2',
+      },
+    ],
+  },
+  {
+    title: 'Node2',
+    value: '0-1',
+  },
+]
+
+const value = ref<string>()
+
+const onChange: TreeSelectEmits['change'] = (newValue) => {
+  console.log(newValue)
+}
+</script>
+
+<template>
+  <a-tree-select
+    v-model:value="value"
+    style="width: 100%"
+    :styles="{
+      popup: {
+        root: {
+          maxHeight: '400px',
+          overflow: 'auto',
+        },
+      },
+    }"
+    :tree-data="treeData"
+    placeholder="Please select"
+    tree-default-expand-all
+    @change="onChange"
+  />
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/treeLine.md

@@ -0,0 +1,84 @@
+# Show Tree Line
+
+## Description (en-US)
+
+Use `treeLine` to show the line style.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { CarryOutOutlined } from '@antdv-next/icons'
+import { h, ref } from 'vue'
+
+const treeData = [
+  {
+    value: 'parent 1',
+    title: 'parent 1',
+    icon: h(CarryOutOutlined),
+    children: [
+      {
+        value: 'parent 1-0',
+        title: 'parent 1-0',
+        icon: h(CarryOutOutlined),
+        children: [
+          {
+            value: 'leaf1',
+            title: 'leaf1',
+            icon: h(CarryOutOutlined),
+          },
+          {
+            value: 'leaf2',
+            title: 'leaf2',
+            icon: h(CarryOutOutlined),
+          },
+        ],
+      },
+      {
+        value: 'parent 1-1',
+        title: 'parent 1-1',
+        icon: h(CarryOutOutlined),
+        children: [
+          {
+            value: 'sss',
+            title: 'sss',
+            icon: h(CarryOutOutlined),
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const treeLine = ref(true)
+const showLeafIcon = ref(false)
+const showIcon = ref(false)
+</script>
+
+<template>
+  <a-space direction="vertical">
+    <a-switch
+      v-model:checked="showIcon"
+      checked-children="showIcon"
+      un-checked-children="showIcon"
+    />
+    <a-switch
+      v-model:checked="treeLine"
+      checked-children="treeLine"
+      un-checked-children="treeLine"
+    />
+    <a-switch
+      v-model:checked="showLeafIcon"
+      :disabled="!treeLine"
+      checked-children="showLeafIcon"
+      un-checked-children="showLeafIcon"
+    />
+    <a-tree-select
+      :tree-line="treeLine ? { showLeafIcon } : false"
+      style="width: 300px"
+      :tree-data="treeData"
+      :tree-icon="showIcon"
+    />
+  </a-space>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/demo/variant.md

@@ -0,0 +1,25 @@
+# Variants
+
+## Description (en-US)
+
+Variants of TreeSelect, there are four variants: `outlined` `filled` `borderless` and `underlined`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+const style = {
+  width: '100%',
+  maxWidth: '100%',
+}
+</script>
+
+<template>
+  <a-flex vertical gap="middle">
+    <a-tree-select :style="style" placeholder="Please select" variant="borderless" />
+    <a-tree-select :style="style" placeholder="Please select" variant="filled" />
+    <a-tree-select :style="style" placeholder="Please select" variant="outlined" />
+    <a-tree-select :style="style" placeholder="Please select" variant="underlined" />
+  </a-flex>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/tree-select/docs.md

@@ -0,0 +1,159 @@
+---
+title: TreeSelect
+description: Tree selection control.
+---
+
+## When To Use 
+`TreeSelect` is similar to `Select`, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.
+
+## Demos
+
+| Demo | Path |
+| --- | --- |
+| Basic | demo/basic.md |
+| Multiple Selection | demo/multiple.md |
+| Generate from tree data | demo/treeData.md |
+| Checkable | demo/checkable.md |
+| Asynchronous loading | demo/async.md |
+| Show Tree Line | demo/treeLine.md |
+| Placement | demo/placement.md |
+| Variants | demo/variant.md |
+| Status | demo/status.md |
+| Max Count | demo/maxCount.md |
+| Max Count no effect | demo/maxCountNoEffect.md |
+| Prefix and Suffix | demo/suffix.md |
+| Custom semantic dom styling | demo/style-class.md |
+
+## API
+
+### TreeSelect Props 
+Common props ref：[Common props](../../docs/vue/common-props.md)
+
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| allowClear | Show clear button | boolean \| { clearIcon?: VueNode } | false | - | × |
+| defaultOpen | Initial open state of dropdown | boolean | - | - | × |
+| defaultValue | To set the initial selected treeNode(s) | string \| string[] | - | - | × |
+| disabled | Disabled or not | boolean | false | - | × |
+| popupMatchSelectWidth | Determine whether the popup menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | - | × |
+| popupRender | Customize dropdown content | (menu: VueNode) => VueNode | - | - | × |
+| fieldNames | Customize node label, value, children field name | object | { label: `label`, value: `value`, children: `children` } | - | × |
+| getPopupContainer | To set the container of the dropdown menu | (triggerNode: HTMLElement) => HTMLElement | () => document.body | - | × |
+| labelInValue | Whether to embed label in value, turn the format of value from `string` to { value: string, label: VueNode, halfChecked: boolean } | boolean | false | - | × |
+| listHeight | Config popup height | number | 256 | - | × |
+| loadData | Load data asynchronously | (node: DataNode) => Promise<void> | - | - | × |
+| maxTagCount | Max tag count to show. `responsive` will cost render performance | number \| 'responsive' | - | - | × |
+| maxCount | The maximum number of items that can be selected. Only takes effect when `multiple=true`. If (`showCheckedStrategy = 'SHOW_ALL'` and `treeCheckStrictly` is disabled) or `showCheckedStrategy = 'SHOW_PARENT'` is used, `maxCount` will not take effect. | number | - | - | × |
+| maxTagPlaceholder | Placeholder for not showing tags | VueNode \| ((omittedValues: LabeledValue[]) => VueNode) | - | - | × |
+| maxTagTextLength | Max tag text length to show | number | - | - | × |
+| multiple | Support multiple or not, will be `true` when enable `treeCheckable` | boolean | false | - | × |
+| notFoundContent | Specify content to show when no result matches | VueNode | `Not Found` | - | × |
+| open | Controlled open state of dropdown | boolean | - | - | × |
+| placeholder | Placeholder of the select input | string | - | - | × |
+| placement | The position where the selection box pops up | `bottomLeft` \| `bottomRight` \| `topLeft` \| `topRight` | `bottomLeft` | - | × |
+| prefix | The custom prefix | VueNode | - | - | × |
+| showCheckedStrategy | The way show selected item in box when `treeCheckable` set. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode) | `TreeSelect.SHOW_ALL` \| `TreeSelect.SHOW_PARENT` \| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` | - | × |
+| showSearch | Support search or not | boolean \| [Object](#showsearch) | single: false \| multiple: true | - | × |
+| size | To set the size of the select input | `large` \| `middle` \| `small` | - | - | × |
+| status | Set validation status | `error` \| `warning` | - | - | × |
+| variant | Variants of selector | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |
+| suffixIcon | The custom suffix icon | VueNode | `<DownOutlined />` | - | × |
+| switcherIcon | Customize collapse/expand icon of tree node | VueNode \| ((props: AntTreeNodeProps) => VueNode) | - | - | ✓ |
+| tagRender | Customize tag render when `multiple` | (props: any) => VueNode | - | - | × |
+| treeCheckable | Whether to show checkbox on the treeNodes | boolean | false | - | × |
+| treeCheckStrictly | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true | boolean | false | - | × |
+| treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array<{ value, title, children, [disabled, disableCheckbox, selectable, checkable] }> | [] | - | × |
+| treeDataSimpleMode | Enable simple mode of treeData. Changes the `treeData` schema to: [{id:1, pId:0, value:'1', title:"test1",...},...] where pId is parent node's id). It is possible to replace the default `id` and `pId` keys by providing object to `treeDataSimpleMode` | boolean \| object<{ id: string, pId: string, rootPId: string }> | false | - | × |
+| treeTitleRender | Customize tree node title render | (nodeData: DataNode) => VueNode | - | - | × |
+| treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false | - | × |
+| treeDefaultExpandedKeys | Default expanded treeNodes | string[] | - | - | × |
+| treeExpandAction | Tree title open logic when click, optional: false \| `click` \| `doubleClick` | string \| boolean | false | - | × |
+| treeExpandedKeys | Set expanded keys | string[] | - | - | × |
+| treeIcon | Shows the icon before a TreeNode's title | boolean | false | - | × |
+| treeLine | Show the line. Ref [Tree - showLine](../tree/docs.md/#tree-demo-line) | boolean \| object | false | - | × |
+| treeLoadedKeys | (Controlled) Set loaded tree nodes, work with `loadData` only | string[] | [] | - | × |
+| treeNodeLabelProp | Will render as content of select | string | `title` | - | × |
+| value | To set the current selected treeNode(s), support `v-model:value` | string \| string[] | - | - | × |
+| virtual | Disable virtual scroll when set to false | boolean | true | - | × |
+| bordered | Deprecated. Use `variant` instead | boolean | - | - | × |
+| showArrow | Deprecated. Set `suffixIcon` to null to hide | boolean | - | - | × |
+
+### Events 
+| Event | Description | Type | Version |
+| --- | --- | --- | --- |
+| change | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - |
+| openChange | Callback when dropdown open state changes | (open: boolean) => void | - |
+| select | A callback function, can be executed when you select a treeNode | function(value, node, extra) | - |
+| treeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) | - |
+| popupScroll | Called when dropdown scrolls | (event: UIEvent) => void | - |
+
+### Slots 
+| Slot | Description | Type | Version |
+| --- | --- | --- | --- |
+| suffixIcon | The custom suffix icon | () => any | - |
+| tagRender | Customize tag render when `multiple` | (props: any) => any | - |
+| notFoundContent | Specify content to show when no result matches | () => any | - |
+| switcherIcon | Customize collapse/expand icon of tree node | () => any | - |
+| treeTitleRender | Customize tree node title render | (nodeData: DataNode) => any | - |
+
+### Methods 
+| Name | Description | Version |
+| --- | --- | --- |
+| blur() | Remove focus | - |
+| focus() | Get focus | - |
+
+## Types 
+### showSearch 
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| autoClearSearchValue | If auto clear search input value when multiple select is selected/deselected | boolean | true | - |
+| filterTreeNode | Whether to filter treeNodes by input value | boolean \| (inputValue: string, treeNode: DataNode) => boolean | function | - |
+| searchValue | Work with `onSearch` to make search value controlled | string | - | - |
+| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | `value` | - |
+| onSearch | A callback function, can be executed when the search input changes | (value: string) => void | - | - |
+
+### TreeNode Props 
+> We recommend you to use `treeData` rather than `TreeNode`, to avoid the trouble of manual construction.
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - | - |
+| disableCheckbox | Disables the checkbox of the treeNode | boolean | false | - |
+| disabled | Disabled or not | boolean | false | - |
+| isLeaf | Leaf node or not | boolean | false | - |
+| key | Required property (unless using `treeDataSimpleMode`), should be unique in the tree | Key | - | - |
+| selectable | Whether can be selected | boolean | true | - |
+| title | Content showed on the treeNodes | VueNode | `---` | - |
+| value | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | Key | - | - |
+
+## Semantic DOM
+
+| _semantic | demo/_semantic.md |
+
+## FAQ
+
+### How to get parent node in onChange? 
+We don't provide this since performance consideration. You can get by this way: <https://codesandbox.io/s/get-parent-node-in-onchange-eb1608>
+
+### Why sometimes customize Option cause scroll break? 
+You can ref Select [FAQ](../select/docs.md).
+
+### Why `loadData` not trigger when searching? 
+In earlier version, `loadData` will be triggered when searching. But we got feedback that it will block network when inputting. So we change it to not trigger `loadData` when searching. But you can still handle async logic by `filterTreeNode`:
+
+```html
+<a-tree-select
+  :filterTreeNode="(input, treeNode) => {
+    const match = YOUR_LOGIC_HERE;
+
+    if (match && !treeNode.isLeaf && !treeNode.children) {
+      // Do some loading logic
+    }
+
+    return match;
+  }"
+/>
+```
+
+### Why can't popup scroll horizontally? 
+Just turn off virtual scrolling, because the `scrollWidth` of the complete list cannot be accurately measured when virtual scrolling is turned on.

code/fms/.claude/skills/antdv-next/references/components/tree-select/token.md

@@ -0,0 +1,32 @@
+# tree-select Token
+
+Use these variables through `theme.components.TreeSelect`. This document lists definitions only and does not include values.
+
+```vue
+<a-config-provider
+  :theme="{
+    token: {
+      // Global token configuration
+    },
+    components: {
+      TreeSelect: {
+        // Token name: value
+      },
+    },
+  }"
+>
+  ...
+</a-config-provider>
+```
+
+## Token List
+
+| Token | Type | Description |
+| --- | --- | --- |
+| `titleHeight` | `number` | Node title height |
+| `switcherSize` | `number \| undefined` | Switcher width of tree |
+| `indentSize` | `number \| undefined` | Indent width of tree |
+| `nodeHoverBg` | `string` | Background color of hovered node |
+| `nodeHoverColor` | `string` | Text color of hovered node |
+| `nodeSelectedBg` | `string` | Background color of selected node |
+| `nodeSelectedColor` | `string` | Text color of selected node |