@c2-markdown-ui/vue 0.0.0-stage → 0.4.4

package/src/lib/widgets/TreeSelect.vue

@@ -0,0 +1,872 @@
+<template>
+  <div class="selector widget-tree-select" ref="rootEl">
+    <div v-if="label || hint || required" class="widget-label-row">
+      <span v-if="required" class="widget-required-mark" aria-hidden="true">*</span>
+      <label v-if="label">{{ label }}</label>
+      <span v-if="hint" class="widget-hint" :data-hint="hint">ⓘ</span>
+    </div>
+    <div class="widget-field-content">
+      <!-- 触发按钮 -->
+      <button
+        type="button"
+        class="ts-input"
+        :class="{ 'widget-input-error': !!error }"
+        :disabled="disabled"
+        :aria-expanded="open"
+        :data-full="allTagsText"
+        @click="toggleOpen"
+      >
+        <!-- 多选 tag 显示（按回显策略过滤 + maxTagCount 截断） -->
+        <template v-if="multiple && selected.length > 0">
+          <span class="ts-tag" v-for="v in displayTags" :key="v.value">
+            {{ v.label }}
+          </span>
+          <span v-if="strategyValues.length > tagLimit" class="ts-tag ts-tag-more">(+{{ strategyValues.length - tagLimit }})</span>
+        </template>
+        <span
+          v-else
+          class="ts-input-text"
+          :class="{ 'ts-placeholder': selected.length === 0 }"
+        >
+          {{ selectedLabel || placeholder || '请选择' }}
+        </span>
+        <span
+          v-if="!disabled && selected.length > 0"
+          class="ts-clear"
+          role="button"
+          tabindex="-1"
+          aria-label="清空"
+          @click.stop="clearValue"
+        >×</span>
+        <span v-else-if="!disabled" class="ts-arrow" :class="{ 'ts-arrow-open': open }" aria-hidden="true">▾</span>
+      </button>
+      <div v-if="error" class="widget-error-text" role="alert">{{ error }}</div>
+
+      <!-- 下拉面板 -->
+      <div v-if="open" class="ts-panel">
+        <!-- 搜索框 -->
+        <div v-if="searchable" class="ts-search">
+          <input
+            ref="searchInputEl"
+            v-model="query"
+            type="text"
+            class="ts-search-input"
+            placeholder="搜索…"
+            @keydown.esc="open = false"
+          />
+        </div>
+        <!-- 工具栏 -->
+        <div class="ts-toolbar">
+          <button type="button" class="ts-tool-btn" @click="expandAll">展开全部</button>
+          <button type="button" class="ts-tool-btn" @click="collapseAll">折叠全部</button>
+        </div>
+        <!-- 树形节点列表 -->
+        <div class="ts-tree" role="tree">
+          <template v-if="visibleNodes.length > 0">
+            <TreeNode
+              v-for="node in visibleNodes"
+              :key="node.value"
+              :node="node"
+              :depth="node.depth"
+              :multiple="multiple"
+              :checked="isNodeChecked(node)"
+              :indeterminate="isNodeIndeterminate(node)"
+              :treeLine="treeLine"
+              :lazy="lazy"
+              :url="url"
+              :remoteData="remoteData"
+              @toggle="handleToggle"
+              @check="handleCheck"
+              @load="handleLoad"
+            />
+          </template>
+          <div v-else class="ts-empty">{{ loading ? '加载中…' : '暂无数据' }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import type { TreeNodeRaw, TreeSelectNode as TsNode, TreeSelectProps } from './treeSelectTypes'
+
+type Node = TsNode
+
+// ---------- 类型 ----------
+
+const props = withDefaults(defineProps<TreeSelectProps>(), {
+  choices: () => [],
+  data: undefined,
+  url: '',
+  lazy: false,
+  multiple: false,
+  checkStrictly: false,
+  showCheckedStrategy: 'all',
+  maxTagCount: undefined,
+  treeLine: false,
+  label: '',
+  default: '',
+  placeholder: '',
+  hint: '',
+  required: false,
+  message: '',
+  error: '',
+  disabled: false,
+  searchable: false
+})
+
+const emit = defineEmits<{
+  change: [value: string | string[]]
+}>()
+
+// ---------- 数据转换 ----------
+function parseSeg(seg: string) {
+  const idx = seg.indexOf(':')
+  if (idx > 0) {
+    const v = seg.slice(0, idx).trim()
+    const l = seg.slice(idx + 1).trim()
+    if (v && l) return { value: v, label: l }
+  }
+  return { value: seg.trim(), label: seg.trim() }
+}
+
+function rawToTree(nodes: TreeNodeRaw[] | undefined, depth = 0): Node[] {
+  if (!Array.isArray(nodes)) return []
+  return nodes.map(n => {
+    const v = n.value ?? n.key
+    const children = n.children
+    const hasChildren = Array.isArray(children) && children.length > 0
+    const wasLoaded = n.loaded === true
+    return {
+      value: String(v ?? ''),
+      label: String(n.label ?? v ?? ''),
+      children: rawToTree(children, depth + 1),
+      loaded: hasChildren || wasLoaded,
+      depth
+    }
+  })
+}
+
+function buildTreeFromChoices(choices: string[]): Node[] {
+  const root: Node[] = []
+  for (const path of choices) {
+    if (!path) continue
+    const segs = path.split('/').map(s => s.trim()).filter(Boolean)
+    if (segs.length === 0) continue
+    let level = root
+    for (let i = 0; i < segs.length; i++) {
+      const { value, label } = parseSeg(segs[i])
+      let node = level.find(n => n.value === value)
+      if (!node) {
+        node = { value, label, children: [], loaded: false, depth: i }
+        level.push(node)
+      }
+      level = node.children
+    }
+  }
+  return root
+}
+
+function normalizeRemoteTree(json: any): TreeNodeRaw[] {
+  let list = json
+  if (!Array.isArray(json)) {
+    list = Array.isArray(json?.data) ? json.data
+      : Array.isArray(json?.options) ? json.options
+      : Array.isArray(json?.choices) ? json.choices
+      : Array.isArray(json?.items) ? json.items
+      : Array.isArray(json?.tree) ? json.tree
+      : Array.isArray(json?.treeData) ? json.treeData
+      : []
+  }
+  const map = (arr: any[]): TreeNodeRaw[] =>
+    (arr || [])
+      .map((it: any): TreeNodeRaw | null => {
+        if (!it || typeof it !== 'object') return null
+        const value = it.value ?? it.key
+        if (value === undefined || value === null || value === '') return null
+        const node: TreeNodeRaw = { value: String(value) }
+        const label = it.label ?? it.name ?? it.text
+        if (label !== undefined && label !== null) node.label = String(label)
+        if (Array.isArray(it.children) && it.children.length > 0) {
+          node.children = map(it.children)
+        }
+        return node
+      })
+      .filter((n: TreeNodeRaw | null): n is TreeNodeRaw => n !== null)
+  return map(list)
+}
+
+// ---------- 状态 ----------
+const remoteData = ref<TreeNodeRaw[] | null>(null)
+const loading = ref(false)
+const expanded = ref<Set<string>>(new Set())
+const selected = ref<string[]>([])
+const query = ref('')
+const open = ref(false)
+const searchInputEl = ref<HTMLInputElement | null>(null)
+const rootEl = ref<HTMLElement | null>(null)
+
+// ---------- 树数据源 ----------
+const baseTree = computed<Node[]>(() => {
+  if (remoteData.value) return rawToTree(remoteData.value)
+  if (Array.isArray(props.data) && props.data.length > 0) return rawToTree(props.data)
+  return buildTreeFromChoices(props.choices)
+})
+
+const searchTree = computed<Node[]>(() => {
+  if (!query.value.trim()) return baseTree.value
+  const q = query.value.toLowerCase()
+  return pruneTree(baseTree.value, q)
+})
+
+function pruneTree(nodes: Node[], q: string): Node[] {
+  const result: Node[] = []
+  for (const node of nodes) {
+    const matchLabel = node.label.toLowerCase().includes(q)
+    const childMatch = pruneTree(node.children, q)
+    if (matchLabel || childMatch.length > 0) {
+      result.push({
+        ...node,
+        children: childMatch.length > 0 ? childMatch : node.children,
+        loaded: childMatch.length > 0 ? true : node.loaded
+      })
+    }
+  }
+  return result
+}
+
+// ---------- 可见节点扁平列表 ----------
+const visibleNodes = computed<Node[]>(() => {
+  const nodes: Node[] = []
+  function walk(list: Node[]) {
+    for (const node of list) {
+      nodes.push(node)
+      if (expanded.value.has(node.value) && node.children.length > 0) {
+        walk(node.children)
+      }
+    }
+  }
+  walk(searchTree.value)
+  return nodes
+})
+
+// ---------- 展示文案 ----------
+const selectedLabel = computed(() => {
+  const v = selected.value[0]
+  if (!v) return ''
+  function find(n: Node[]): string {
+    for (const node of n) {
+      if (node.value === v) return node.label
+      const f = find(node.children)
+      if (f) return f
+    }
+    return ''
+  }
+  return find(baseTree.value)
+})
+
+const displayTags = computed<{ value: string; label: string }[]>(() => {
+  return strategyValues.value.slice(0, tagLimit.value).map(v => ({
+    value: v,
+    label: findLabel(v)
+  }))
+})
+
+function findLabel(v: string): string {
+  function find(n: Node[]): string {
+    for (const node of n) {
+      if (node.value === v) return node.label
+      const f = find(node.children)
+      if (f) return f
+    }
+    return v
+  }
+  return find(baseTree.value)
+}
+
+function findNode(value: string, nodes: Node[] = baseTree.value): Node | undefined {
+  for (const n of nodes) {
+    if (n.value === value) return n
+    const found = findNode(value, n.children)
+    if (found) return found
+  }
+}
+
+/** 触发器最多显示的标签数（antd maxTagCount），不传则不限制 */
+const tagLimit = computed<number>(() => {
+  return typeof props.maxTagCount === 'number' && props.maxTagCount >= 0 ? props.maxTagCount : Infinity
+})
+
+/** 全部已选项文本（策略过滤后），悬浮提示展示用 */
+const allTagsText = computed<string>(() => {
+  if (!props.multiple || selected.value.length === 0) return ''
+  return strategyValues.value.map(v => findLabel(v)).join(', ')
+})
+
+/** 按回显策略（antd showCheckedStrategy）过滤后的选中值：all 全部 / parent 仅顶层父级 / child 仅叶子 */
+const strategyValues = computed<string[]>(() => {
+  const values = selected.value
+  if (!props.multiple || props.checkStrictly || props.showCheckedStrategy === 'all') return values
+  const set = new Set(values)
+  if (props.showCheckedStrategy === 'child') {
+    return values.filter(v => {
+      const n = findNode(v)
+      return !n || n.children.length === 0
+    })
+  }
+  // parent：级联模式下勾满的父级回显为父级本身，其全部后代不单独显示；
+  // 未勾满的父级不显示，只显示其下被选中的叶子/子父级。
+  // 注意"父级全选"不能只看 set.has(父级value) —— 级联勾子节点时 selected 里
+  // 只有叶子值，父级 value 不在其中，需按"所有后代均被选中"判定
+  const result: string[] = []
+  const fullyChecked = (n: Node): boolean =>
+    n.children.length === 0 ? set.has(n.value) : n.children.every(fullyChecked)
+  const walk = (nodes: Node[]) => {
+    for (const n of nodes) {
+      if (n.children.length > 0 && fullyChecked(n)) {
+        // 全选父级：回显自身，跳过后代
+        result.push(n.value)
+      } else {
+        walk(n.children)
+        if (n.children.length === 0 && set.has(n.value)) result.push(n.value)
+      }
+    }
+  }
+  walk(baseTree.value)
+  // selected 中可能存在树外的值（如懒加载未加载的分支），原样保留
+  const known = new Set<string>()
+  const collect = (nodes: Node[]) => {
+    for (const n of nodes) { known.add(n.value); collect(n.children) }
+  }
+  collect(baseTree.value)
+  for (const v of values) if (!known.has(v)) result.push(v)
+  return result
+})
+
+// ---------- 搜索时自动展开匹配祖先 ----------
+watch(query, (q) => {
+  if (!q.trim()) return
+  const qLower = q.toLowerCase()
+  const toExpand = new Set<string>()
+  function collectMatches(nodes: Node[], ancestors: string[]) {
+    for (const node of nodes) {
+      if (node.label.toLowerCase().includes(qLower)) {
+        ancestors.forEach(a => toExpand.add(a))
+      }
+      if (node.children.length > 0) {
+        collectMatches(node.children, [...ancestors, node.value])
+      }
+    }
+  }
+  collectMatches(baseTree.value, [])
+  toExpand.forEach(v => expanded.value.add(v))
+})
+
+// ---------- 交互 ----------
+function toggleOpen() {
+  if (props.disabled) return
+  open.value = !open.value
+  if (open.value && props.searchable) {
+    query.value = ''
+    nextTick(() => searchInputEl.value?.focus())
+  }
+}
+
+function handleToggle(value: string, hasChildren: boolean) {
+  if (hasChildren) {
+    const s = new Set(expanded.value)
+    if (s.has(value)) s.delete(value)
+    else s.add(value)
+    expanded.value = s
+  }
+}
+
+/** 节点是否被全选：checkStrictly 下仅看自身；关联模式下所有后代都被选中 */
+function isNodeChecked(node: Node): boolean {
+  if (props.checkStrictly || !props.multiple) return selected.value.includes(node.value)
+  if (node.children.length === 0) return selected.value.includes(node.value)
+  return node.children.every(c => isNodeChecked(c))
+}
+/** 节点是否被半选（部分后代被选中，仅关联模式非叶子有意义） */
+function isNodeIndeterminate(node: Node): boolean {
+  if (props.checkStrictly || node.children.length === 0) return false
+  const childStates = node.children.map(c => isNodeChecked(c) || isNodeIndeterminate(c))
+  return childStates.some(Boolean) && !childStates.every(Boolean)
+}
+
+function handleCheck(node: Node) {
+  touched = true
+  if (props.multiple) {
+    if (props.checkStrictly) {
+      // 父子不关联：只切换单节点
+      selected.value = selected.value.includes(node.value)
+        ? selected.value.filter(v => v !== node.value)
+        : [...selected.value, node.value]
+    } else {
+      const set = new Set(selected.value)
+      if (set.has(node.value)) set.delete(node.value)
+      else set.add(node.value)
+      // 全选/取消子孙
+      function walkDescendants(n: Node, check: boolean) {
+        if (check) set.add(n.value)
+        else set.delete(n.value)
+        n.children.forEach(c => walkDescendants(c, check))
+      }
+      const checked = set.has(node.value)
+      walkDescendants(node, checked)
+      selected.value = Array.from(set)
+    }
+  } else {
+    selected.value = [node.value]
+    open.value = false
+  }
+  emit('change', props.multiple ? strategyValues.value : selected.value[0] ?? '')
+}
+
+/** 查找从根到目标节点的 value 路径（懒加载 fill 按路径逐级定位挂载点） */
+function nodePathOf(target: string, nodes: Node[] = baseTree.value): string[] | null {
+  for (const n of nodes) {
+    if (n.value === target) return [n.value]
+    if (n.children.length > 0) {
+      const sub = nodePathOf(target, n.children)
+      if (sub) return [n.value, ...sub]
+    }
+  }
+  return null
+}
+
+async function handleLoad(node: Node) {
+  if (!props.url || node.loaded) return
+  loading.value = true
+  try {
+    const sep = props.url.includes('?') ? '&' : '?'
+    const res = await fetch(`${props.url}${sep}parent=${encodeURIComponent(node.value)}`)
+    if (!res.ok) throw new Error()
+    const json = await res.json()
+    const list = normalizeRemoteTree(json)
+    // 注入子级到 remoteData（按从根到节点的完整路径定位挂载点）
+    function fill(nodes: TreeNodeRaw[], path: string[], children: TreeNodeRaw[]): TreeNodeRaw[] {
+      return nodes.map(n => {
+        const v = String(n.value ?? n.key ?? '')
+        if (v !== path[0]) return n
+        if (path.length === 1) return { ...n, children, loaded: true }
+        return { ...n, children: fill(n.children || [], path.slice(1), children) }
+      })
+    }
+    if (remoteData.value) {
+      const path = nodePathOf(node.value) ?? [node.value]
+      remoteData.value = fill(remoteData.value, path, list)
+    }
+  } catch {
+    // 静默失败
+  } finally {
+    loading.value = false
+  }
+}
+
+function expandAll() {
+  const all = new Set<string>()
+  function collect(nodes: Node[]) {
+    for (const n of nodes) {
+      if (n.children.length > 0) {
+        all.add(n.value)
+        collect(n.children)
+      }
+    }
+  }
+  collect(baseTree.value)
+  expanded.value = all
+}
+
+function collapseAll() {
+  expanded.value = new Set()
+}
+
+function clearValue() {
+  touched = true
+  selected.value = []
+  emit('change', props.multiple ? [] : '')
+}
+
+// ---------- 初始化选中值 ----------
+/** 默认值语义（对齐 antd TreeSelect defaultValue）：
+ *  逗号分隔多值；每个值支持 / 分隔路径（zj/hz）或节点 value（hz），
+ *  路径写法按段逐级查找（段先按 value 匹配、再按 label 匹配），定位到路径末端节点；
+ *  单段 value 在根级找不到时，从整棵树深度查找（antd 语义：value 全树唯一） */
+function resolveDefault(treeNodes: Node[]): { values: string[]; ancestors: string[] } {
+  const def = props.default
+  if (!def) return { values: [], ancestors: [] }
+  const paths = Array.isArray(def)
+    ? def.map(String)
+    : String(def).split(',').map(s => s.trim()).filter(Boolean)
+  const values: string[] = []
+  const ancestors: string[] = []
+  /** 从整棵树深度查找节点，返回从根到命中节点的 value 链 */
+  function deepFind(nodes: Node[], seg: string, chain: string[]): string[] | null {
+    for (const n of nodes) {
+      if (n.value === seg || n.label === seg) return [...chain, n.value]
+      const sub = deepFind(n.children, seg, [...chain, n.value])
+      if (sub) return sub
+    }
+    return null
+  }
+  for (const path of paths) {
+    const segs = path.split('/').map(s => s.trim()).filter(Boolean)
+    let level = treeNodes
+    let node: Node | undefined
+    const chain: string[] = []
+    for (const seg of segs) {
+      const found = level.find(n => n.value === seg) ?? level.find(n => n.label === seg)
+      if (!found) { node = undefined; break }
+      chain.push(found.value)
+      node = found
+      level = found.children
+    }
+    if (node) {
+      values.push(node.value)
+      ancestors.push(...chain.slice(0, -1))
+    } else if (segs.length === 1) {
+      // 单段 value 逐级未命中（根级找不到）：从整棵树深度查找（antd defaultValue 语义）
+      const deep = deepFind(treeNodes, segs[0], [])
+      if (deep) {
+        values.push(deep[deep.length - 1])
+        ancestors.push(...deep.slice(0, -1))
+      }
+    }
+  }
+  return {
+    values: [...new Set(values)],
+    ancestors: [...new Set(ancestors)]
+  }
+}
+
+/** 用户是否交互过（勾选/清空）：交互后不再跟随 default 变化，避免覆盖用户选择 */
+let touched = false
+
+// 挂载/数据源就绪/default 变化时回填默认值（含祖先展开）
+watch(
+  () => [props.default, baseTree.value] as const,
+  () => {
+    if (touched) return
+    const { values, ancestors } = resolveDefault(baseTree.value)
+    selected.value = values
+    const s = new Set(expanded.value)
+    ancestors.forEach(a => s.add(a))
+    expanded.value = s
+  },
+  { immediate: true }
+)
+
+// ---------- 远端加载 ----------
+if (props.url) {
+  let cancelled = false
+  loading.value = true
+  ;(async () => {
+    try {
+      const res = await fetch(props.url)
+      if (!res.ok) throw new Error()
+      const json = await res.json()
+      if (cancelled) return
+      remoteData.value = normalizeRemoteTree(json)
+    } catch {
+      // 静默失败
+    } finally {
+      if (!cancelled) loading.value = false
+    }
+  })()
+}
+
+// ---------- 点击外部关闭 ----------
+function onDocClick(e: MouseEvent) {
+  if (rootEl.value && !rootEl.value.contains(e.target as globalThis.Node)) {
+    open.value = false
+  }
+}
+onMounted(() => document.addEventListener('mousedown', onDocClick))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick))
+</script>
+
+<script lang="ts">
+// 子组件：单个树节点（避免模板递归，改用递归渲染）
+import { defineComponent, h, type VNode } from 'vue'
+import type { TreeSelectNode } from './treeSelectTypes'
+
+const TreeNode = defineComponent({
+  name: 'TreeNode',
+  props: {
+    node: { type: Object as () => TreeSelectNode, required: true },
+    depth: { type: Number, required: true },
+    multiple: { type: Boolean, default: false },
+    checked: { type: Boolean, default: false },
+    indeterminate: { type: Boolean, default: false },
+    treeLine: { type: Boolean, default: false },
+    lazy: { type: Boolean, default: false },
+    url: { type: String, default: '' }
+  },
+  emits: ['toggle', 'check', 'load'],
+  setup(props, { emit }) {
+    return () => {
+      const { node, depth, multiple, checked, indeterminate, treeLine } = props
+      // 懒加载模式下，未加载子级的节点（children 为空且 loaded=false）视为"可展开"，
+      // 显示展开箭头；加载完成返回空数组时 loaded=true，确认为真叶子
+      const isLazyUnloaded = props.lazy && !!props.url && !node.loaded && node.children.length === 0
+      const hasChildren = node.children.length > 0 || isLazyUnloaded
+      const paddingLeft = 16 + depth * 20
+
+      const labelEl = h('span', { class: 'ts-node-label', style: { paddingLeft: '8px' } }, node.label)
+
+      let leftEl: VNode
+      if (multiple) {
+        // 子组件内部元素不受 scoped 样式影响，选中/半选状态色用内联样式保证
+        leftEl = h('span', {
+          class: ['ts-checkbox', checked ? 'ts-checked' : '', indeterminate ? 'ts-indeterminate' : ''].filter(Boolean),
+          role: 'checkbox',
+          'aria-checked': indeterminate ? 'mixed' : checked ? 'true' : 'false',
+          style: (checked || indeterminate) ? { color: '#1677ff' } : undefined
+        }, checked ? '☑' : indeterminate ? '▣' : '☐')
+      } else {
+        leftEl = h('span', {
+          class: ['ts-radio', checked ? 'ts-radio-checked' : ''].filter(Boolean),
+          role: 'radio',
+          'aria-checked': checked ? 'true' : 'false',
+          style: checked ? { color: '#1677ff' } : undefined
+        }, checked ? '●' : '○')
+      }
+
+      const arrowEl = hasChildren
+        ? h('span', {
+            class: 'ts-node-arrow',
+            'aria-hidden': 'true',
+            onClick: (e: MouseEvent) => { e.stopPropagation(); emit('toggle', node.value, true) }
+          }, '▸')
+        : h('span', { class: 'ts-node-leaf', 'aria-hidden': 'true' }, '·')
+
+      return h('div', {
+        class: ['ts-node', treeLine ? 'ts-tree-line' : ''].filter(Boolean),
+        role: 'treeitem',
+        style: { paddingLeft: `${paddingLeft}px` },
+        onClick: () => {
+          if (hasChildren) {
+            emit('toggle', node.value, true)
+            // 懒加载未加载子级：单击展开时同步请求子级（对齐 React 版 handleNodeClick 行为）
+            if (isLazyUnloaded) emit('load', node)
+          }
+          // 单选模式下点击非叶子节点只展开不选中（避免关闭下拉）；多选模式保持展开+勾选
+          if (!hasChildren || multiple) emit('check', node)
+        },
+        onDblclick: () => {
+          if (props.lazy && props.url && hasChildren && !node.loaded) {
+            emit('load', node)
+          }
+        }
+      }, [leftEl, arrowEl, labelEl])
+    }
+  }
+})
+
+export { TreeNode }
+export default {}
+</script>
+
+<style scoped>
+.widget-tree-select { position: relative; }
+
+.ts-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  width: 100%;
+  min-height: 42px;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  text-align: left;
+}
+.ts-input:hover { border-color: #4096ff; }
+.ts-input:focus {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+}
+.ts-input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+
+.ts-input-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ts-placeholder { color: rgba(0, 0, 0, 0.45); }
+.ts-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; transition: transform 0.2s; margin-left: auto; }
+.ts-arrow-open { transform: rotate(180deg); }
+.ts-clear {
+  padding: 0 0.25rem;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 1rem;
+  line-height: 1;
+  margin-left: auto;
+}
+.ts-clear:hover { color: rgba(0, 0, 0, 0.88); }
+
+/* 触发器悬浮提示：展示全部已选项（maxTagCount 截断时补全） */
+.ts-input[data-full]:not([data-full=''])::after {
+  content: attr(data-full);
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  padding: 0.5rem 0.75rem;
+  max-width: 18rem;
+  width: max-content;
+  white-space: normal;
+  word-break: break-all;
+  font-size: 0.75rem;
+  font-weight: 400;
+  text-align: left;
+  color: #fafafa;
+  background-color: rgba(0, 0, 0, 0.88);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+  z-index: 100;
+}
+.ts-input[data-full]:not([data-full='']):not([aria-expanded='true']):hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+.ts-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  color: rgba(0, 0, 0, 0.88);
+}
+.ts-tag-more { color: rgba(0, 0, 0, 0.45); }
+
+.ts-panel {
+  position: absolute;
+  z-index: 50;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 240px;
+  max-height: 320px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+}
+
+.ts-search { padding: 0.5rem; border-bottom: 1px solid #f0f0f0; }
+.ts-search-input {
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  outline: none;
+}
+.ts-search-input:focus { border-color: #1677ff; }
+
+.ts-toolbar {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-bottom: 1px solid #f0f0f0;
+}
+.ts-tool-btn {
+  padding: 0.125rem 0.5rem;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: transparent;
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.65);
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+.ts-tool-btn:hover { color: #1677ff; border-color: #1677ff; }
+
+.ts-tree {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.375rem 0;
+}
+
+.ts-node {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.88);
+  border-radius: 4px;
+  margin: 0 0.25rem;
+  transition: background 0.15s;
+}
+.ts-node:hover { background: #f5f5f5; }
+
+/* 树连接线（antd treeLine）：横向连线 + 纵向缩进引导线 */
+.ts-node.ts-tree-line { position: relative; }
+.ts-node.ts-tree-line::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 8px;
+  border-left: 1px solid #d9d9d9;
+}
+.ts-node.ts-tree-line:first-child::before { top: 50%; }
+.ts-node.ts-tree-line:last-child::before { bottom: 50%; }
+.ts-node.ts-tree-line::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  width: 12px;
+  border-top: 1px solid #d9d9d9;
+}
+
+.ts-checkbox, .ts-radio {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.9375rem;
+  color: #1677ff;
+  flex-shrink: 0;
+  width: 16px;
+  justify-content: center;
+}
+
+.ts-node-arrow {
+  display: inline-flex;
+  align-items: center;
+  width: 16px;
+  font-size: 0.625rem;
+  color: rgba(0, 0, 0, 0.45);
+  transition: transform 0.2s;
+  flex-shrink: 0;
+  cursor: default;
+}
+.ts-node-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ts-node-leaf { display: inline-block; width: 16px; text-align: center; color: rgba(0, 0, 0, 0.25); font-size: 1rem; flex-shrink: 0; }
+
+.ts-empty {
+  padding: 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.45);
+}
+</style>