wui-components-v2 1.1.69 → 1.1.71

package/components/tree-select/components/index.vue

@@ -1,471 +1,471 @@
-<script setup lang="ts">
-import { computed, defineEmits, defineOptions, defineProps, onMounted, ref, toRaw } from 'vue'
-import { useManualTheme } from '../../../composables/useManualTheme'
-import { treeConfigApi, treeDataApi, treeNodeDataApi } from '../../../api/tree'
-import { pageConfig } from '../../../api/page'
-import loadingCom from '../../loading/loading.vue'
-import TreeSelect from './tree-select.vue'
-
-defineOptions({
-  name: 'TreeSelectIndex',
-})
-const props = defineProps<{
-  sourceId: string
-  selectMode: SelectMode
-}>()
-const emit = defineEmits(['handleConfirm', 'handleClose'])
-// 树形节点数据结构定义
-interface TreeNode {
-  id: string
-  name: string
-  children?: TreeNode[]
-  [key: string]: any // 允许其他自定义属性
-}
-
-const { currentThemeColor } = useManualTheme()
-// 选择模式类型
-type SelectMode = 'single' | 'multiple'
-
-// 示例树形数据
-// const treeData: TreeNode[] = [
-//   {
-//     id: '1',
-//     name: '产品管理',
-//     children: [
-//       {
-//         id: '1-1',
-//         name: '产品列表',
-//         children: [
-//           { id: '1-1-1', name: '产品查询' },
-//           { id: '1-1-2', name: '产品新增' },
-//           { id: '1-1-3', name: '产品编辑' },
-//           { id: '1-1-4', name: '产品删除' },
-//         ],
-//       },
-//       {
-//         id: '1-2',
-//         name: '产品分类',
-//         children: [
-//           { id: '1-2-1', name: '分类管理' },
-//           { id: '1-2-2', name: '分类排序' },
-//         ],
-//       },
-//     ],
-//   },
-//   {
-//     id: '2',
-//     name: '订单管理',
-//     children: [
-//       { id: '2-1', name: '订单列表' },
-//       { id: '2-2', name: '订单详情' },
-//       { id: '2-3', name: '订单导出' },
-//     ],
-//   },
-//   {
-//     id: '3',
-//     name: '用户管理',
-//     children: [
-//       {
-//         id: '3-1',
-//         name: '用户列表',
-//         children: [
-//           { id: '3-1-1', name: '用户查询' },
-//           { id: '3-1-2', name: '用户编辑' },
-//         ],
-//       },
-//       { id: '3-2', name: '角色管理' },
-//     ],
-//   },
-//   { id: '4', name: '系统设置' },
-// ]
-const treeData = ref<TreeNode[]>([])
-
-// 选择模式
-const selectMode = ref<SelectMode>(props.selectMode)
-
-// 选中的节点ID
-const selectedKeys = ref<string[]>([])
-// 选中的节点
-const selectedNode = ref<TreeNode[]>([])
-
-// 搜索关键词
-const searchKeyword = ref('')
-
-// 所有节点的引用，用于滚动定位
-const nodeRefs = ref<Record<string, HTMLElement | null>>({})
-
-// 处理选择模式变更
-// function handleModeChange(mode: SelectMode) {
-//   // 切换模式时清空选择
-//   selectedKeys.value = []
-// }
-const treeConfigs = reactive({
-  branchRatmplId: '',
-  branchTitle: '',
-  id: '',
-  rootGtmplId: '',
-  primaryColumnId1: '',
-  primaryColumnId2: '',
-  leafRatmplId: '',
-})
-
-const loading = ref(false)
-// 获取配置
-async function treeConfig1() {
-  try {
-    const res = await treeConfigApi(props.sourceId)
-    treeConfigs.branchRatmplId = res.ttmplConfig.branchRatmplId
-    treeConfigs.branchTitle = res.ttmplConfig.branchTitle
-    treeConfigs.id = res.ttmplConfig.id
-    treeConfigs.rootGtmplId = res.ttmplConfig.rootGtmplId
-    treeConfigs.leafRatmplId = res.ttmplConfig.leafRatmplId
-    treeConfig2(treeConfigs.branchRatmplId)
-  }
-  catch (error) {
-    console.log('error:', error)
-    // TODO handle the exception
-  }
-}
-
-// 获取配置2
-async function treeConfig2(branchRatmplId: string) {
-  try {
-    const res1 = await pageConfig(branchRatmplId)
-    treeConfigs.primaryColumnId1 = res1.ltmplConfig.primaryColumn.sourceId
-    getTreeTopData(treeConfigs.id)
-  }
-  catch (error) {
-    console.log('error:', error)
-    // TODO handle the exception
-  }
-}
-
-// 根据id找到树节点
-async function findTreeNodeandAppend(id: string, arr: TreeNode[], appendData: any) {
-  for (let index = 0; index < arr.length; index++) {
-    const element = arr[index]
-    if (element.id === id) {
-      element.children = appendData.map((item: any) => {
-        return {
-          id: item.code,
-          name: item.fieldMap[treeConfigs.primaryColumnId1],
-          children: [],
-        }
-      })
-    }
-    else {
-      if (element.children)
-        findTreeNodeandAppend(id, element.children, appendData)
-    }
-  }
-}
-
-// 获取树顶层数据
-async function getTreeTopData(id: string) {
-  try {
-    loading.value = true
-    const res = await treeDataApi(id)
-    treeData.value = res.entities.map((item: any) => {
-      return {
-        id: item.code,
-        name: item.fieldMap[treeConfigs.primaryColumnId1],
-        children: [],
-      }
-    })
-  }
-  catch (error) {
-    console.log('error:', error)
-    // TODO handle the exception
-  }
-  finally {
-    loading.value = false
-  }
-}
-
-// 获取树节点数据
-async function getTreeNodeData(node: TreeNode) {
-  try {
-    const res = await treeNodeDataApi(treeConfigs.branchRatmplId, node.id)
-    if (!res.entities.length)
-      return
-      // 追加节点
-    findTreeNodeandAppend(node.id, treeData.value, res.entities)
-  }
-  catch (error) {
-    console.log('error:', error)
-  }
-}
-
-function handleToggleExpand(node: TreeNode) {
-  getTreeNodeData(node)
-}
-
-onMounted(() => {
-  treeConfig1()
-})
-
-// 处理选择变更
-function handleSelectChange(keys: string[], node: TreeNode) {
-  selectedNode.value = [node]
-  selectedKeys.value = keys
-}
-
-// 处理标签关闭
-function handleTagClose(key: string) {
-  selectedKeys.value = selectedKeys.value.filter(k => k !== key)
-}
-
-// 根据ID获取节点名称
-function getNodeNameByKey(key: string): string {
-  const findNode = (nodes: TreeNode[]): TreeNode | null => {
-    for (const node of nodes) {
-      if (node.id === key) {
-        return node
-      }
-      if (node.children && node.children.length > 0) {
-        const found = findNode(node.children)
-        if (found)
-          return found
-      }
-    }
-    return null
-  }
-
-  const node = findNode(treeData.value)
-  return node ? node.name : ''
-}
-
-// 处理搜索
-function handleSearch(keyword?: string) {
-  // 搜索逻辑在filteredTreeData计算属性中处理
-  if (keyword !== undefined) {
-    searchKeyword.value = keyword
-  }
-}
-
-// 过滤后的树形数据
-const filteredTreeData = computed<TreeNode[]>(() => {
-  if (!searchKeyword.value) {
-    return treeData.value
-  }
-
-  const keyword = searchKeyword.value.toLowerCase()
-
-  // 过滤节点的递归函数
-  const filterNodes = (nodes: TreeNode[]): TreeNode[] => {
-    return nodes
-      .map((node) => {
-        // 复制节点，避免修改原数据
-        const newNode = { ...node }
-
-        // 如果有子节点，递归过滤
-        if (newNode.children && newNode.children.length > 0) {
-          newNode.children = filterNodes(newNode.children)
-        }
-
-        // 节点名称包含关键词，或者有符合条件的子节点，则保留该节点
-        const nodeNameMatch = newNode.name.toLowerCase().includes(keyword)
-        const hasMatchingChildren = newNode.children && newNode.children.length > 0
-
-        return nodeNameMatch || hasMatchingChildren ? newNode : null
-      })
-      .filter(Boolean) as TreeNode[]
-  }
-
-  return filterNodes(treeData.value)
-})
-
-// 记录节点引用
-function setNodeRef(id: string, el: HTMLElement | null) {
-  if (el) {
-    nodeRefs.value[id] = el
-  }
-}
-
-// 滚动到指定节点
-function scrollToNode(id: string) {
-  const node = nodeRefs.value[id]
-  if (node) {
-    node.scrollIntoView({ behavior: 'smooth', block: 'center' })
-    // 高亮效果
-    node.classList.add('node-highlight')
-    setTimeout(() => {
-      node.classList.remove('node-highlight')
-    }, 2000)
-  }
-}
-
-// 页面加载时展开有子节点的节点
-onMounted(() => {
-  // 可以在这里添加默认展开逻辑
-})
-
-// 确定
-function handleConfirm() {
-  emit('handleConfirm', toRaw(selectedKeys.value), toRaw(selectedNode.value), treeConfigs.leafRatmplId)
-}
-
-// 取消
-function handleClose() {
-  emit('handleClose')
-}
-</script>
-
-<template>
-  <view class="tree-select-page">
-    <!-- 选择模式切换 -->
-    <!-- <view class="mode-switch-container">
-      <view class="mode-label">
-        选择模式：
-      </view>
-      <wd-radio-group
-        v-model="selectMode"
-        direction="horizontal"
-        @change="handleModeChange"
-      >
-        <wd-radio name="single" label="单选" />
-        <wd-radio name="multiple" label="多选" />
-      </wd-radio-group>
-    </view> -->
-
-    <!-- 搜索框 -->
-    <view class="search-container">
-      <wd-search
-        v-model="searchKeyword"
-        placeholder-class="splaceholderClass"
-        placeholder="搜索节点..."
-        clearable
-        @cancel="handleClose"
-        @input="handleSearch"
-        @clear="handleSearch"
-      />
-    </view>
-    <!-- 已选结果 -->
-    <view v-if="selectedKeys.length > 0" class="selected-result">
-      <view class="result-title">
-        已选 {{ selectedKeys.length }} 项：
-      </view>
-      <view class="result-tags">
-        <wd-tag
-          v-for="key in selectedKeys"
-          :key="key"
-          :bg-color="currentThemeColor.primary"
-          color="#fff"
-          closable
-          round
-          @close="handleTagClose(key)"
-          @click="scrollToNode(key)"
-        >
-          {{ getNodeNameByKey(key) }}
-        </wd-tag>
-      </view>
-    </view>
-
-    <!-- 树形选择区域 -->
-    <loadingCom v-if="loading" />
-    <view v-else class="tree-container">
-      <tree-select
-        :set-node-ref="setNodeRef"
-        :tree-data="filteredTreeData"
-        :select-mode="selectMode"
-        :selected-keys="selectedKeys"
-        @update:selected-keys="handleSelectChange"
-        @toggle-expand="handleToggleExpand"
-      />
-
-      <!-- 空状态 -->
-      <view v-if="filteredTreeData.length === 0" class="empty-state">
-        <wd-icon name="search" size="48" color="#ccc" />
-        <view class="empty-text">
-          没有找到匹配的节点
-        </view>
-      </view>
-    </view>
-    <view class="h-100px" />
-    <!-- 底部按钮 -->
-    <view class="fixed bottom-0 left-0 right-0 box-border w-100% flex p-2 bg-white dark:bg-[var(--wot-dark-background)]">
-      <wd-button
-        custom-class="flex-1"
-        type="primary"
-        @click="handleConfirm"
-      >
-        确定
-      </wd-button>
-    </view>
-  </view>
-</template>
-
-<style scoped>
-.mode-switch-container {
-  padding: 16px;
-  /* background-color: #fff; */
-  margin-bottom: 10px;
-  display: flex;
-  align-items: center;
-}
-
-.mode-label {
-  font-size: 14px;
-  color: #666;
-  margin-right: 12px;
-}
-
-.tree-container {
-  /* background-color: #fff; */
-  padding: 10px 0;
-  min-height: 300px;
-  /* max-height: calc(100vh - 220px); */
-}
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 0;
-  color: #999;
-}
-
-.empty-text {
-  margin-top: 16px;
-  font-size: 14px;
-}
-
-.selected-result {
-  /* background-color: #fff; */
-  padding: 16px;
-}
-
-.result-title {
-  text-align: left;
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 12px;
-}
-
-.result-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-/* 节点高亮动画 */
-.node-highlight {
-  animation: highlight 2s ease;
-}
-:deep(.wd-tag__close){
-  line-height: 0.8;
-  color:#fff;
-}
-:deep(.uni-input-input){
-  text-align: left;
-}
-.splaceholderClass{
-  text-align: left;
-}
-
-@keyframes highlight {
-  0% { background-color: rgba(64, 158, 255, 0.2); }
-  100% { background-color: transparent; }
-}
-</style>
+<script setup lang="ts">
+import { computed, defineEmits, defineOptions, defineProps, onMounted, ref, toRaw } from 'vue'
+import { useManualTheme } from '../../../composables/useManualTheme'
+import { treeConfigApi, treeDataApi, treeNodeDataApi } from '../../../api/tree'
+import { pageConfig } from '../../../api/page'
+import loadingCom from '../../loading/loading.vue'
+import TreeSelect from './tree-select.vue'
+
+defineOptions({
+  name: 'TreeSelectIndex',
+})
+const props = defineProps<{
+  sourceId: string
+  selectMode: SelectMode
+}>()
+const emit = defineEmits(['handleConfirm', 'handleClose'])
+// 树形节点数据结构定义
+interface TreeNode {
+  id: string
+  name: string
+  children?: TreeNode[]
+  [key: string]: any // 允许其他自定义属性
+}
+
+const { currentThemeColor } = useManualTheme()
+// 选择模式类型
+type SelectMode = 'single' | 'multiple'
+
+// 示例树形数据
+// const treeData: TreeNode[] = [
+//   {
+//     id: '1',
+//     name: '产品管理',
+//     children: [
+//       {
+//         id: '1-1',
+//         name: '产品列表',
+//         children: [
+//           { id: '1-1-1', name: '产品查询' },
+//           { id: '1-1-2', name: '产品新增' },
+//           { id: '1-1-3', name: '产品编辑' },
+//           { id: '1-1-4', name: '产品删除' },
+//         ],
+//       },
+//       {
+//         id: '1-2',
+//         name: '产品分类',
+//         children: [
+//           { id: '1-2-1', name: '分类管理' },
+//           { id: '1-2-2', name: '分类排序' },
+//         ],
+//       },
+//     ],
+//   },
+//   {
+//     id: '2',
+//     name: '订单管理',
+//     children: [
+//       { id: '2-1', name: '订单列表' },
+//       { id: '2-2', name: '订单详情' },
+//       { id: '2-3', name: '订单导出' },
+//     ],
+//   },
+//   {
+//     id: '3',
+//     name: '用户管理',
+//     children: [
+//       {
+//         id: '3-1',
+//         name: '用户列表',
+//         children: [
+//           { id: '3-1-1', name: '用户查询' },
+//           { id: '3-1-2', name: '用户编辑' },
+//         ],
+//       },
+//       { id: '3-2', name: '角色管理' },
+//     ],
+//   },
+//   { id: '4', name: '系统设置' },
+// ]
+const treeData = ref<TreeNode[]>([])
+
+// 选择模式
+const selectMode = ref<SelectMode>(props.selectMode)
+
+// 选中的节点ID
+const selectedKeys = ref<string[]>([])
+// 选中的节点
+const selectedNode = ref<TreeNode[]>([])
+
+// 搜索关键词
+const searchKeyword = ref('')
+
+// 所有节点的引用，用于滚动定位
+const nodeRefs = ref<Record<string, HTMLElement | null>>({})
+
+// 处理选择模式变更
+// function handleModeChange(mode: SelectMode) {
+//   // 切换模式时清空选择
+//   selectedKeys.value = []
+// }
+const treeConfigs = reactive({
+  branchRatmplId: '',
+  branchTitle: '',
+  id: '',
+  rootGtmplId: '',
+  primaryColumnId1: '',
+  primaryColumnId2: '',
+  leafRatmplId: '',
+})
+
+const loading = ref(false)
+// 获取配置
+async function treeConfig1() {
+  try {
+    const res = await treeConfigApi(props.sourceId)
+    treeConfigs.branchRatmplId = res.ttmplConfig.branchRatmplId
+    treeConfigs.branchTitle = res.ttmplConfig.branchTitle
+    treeConfigs.id = res.ttmplConfig.id
+    treeConfigs.rootGtmplId = res.ttmplConfig.rootGtmplId
+    treeConfigs.leafRatmplId = res.ttmplConfig.leafRatmplId
+    treeConfig2(treeConfigs.branchRatmplId)
+  }
+  catch (error) {
+    console.log('error:', error)
+    // TODO handle the exception
+  }
+}
+
+// 获取配置2
+async function treeConfig2(branchRatmplId: string) {
+  try {
+    const res1 = await pageConfig(branchRatmplId)
+    treeConfigs.primaryColumnId1 = res1.ltmplConfig.primaryColumn.sourceId
+    getTreeTopData(treeConfigs.id)
+  }
+  catch (error) {
+    console.log('error:', error)
+    // TODO handle the exception
+  }
+}
+
+// 根据id找到树节点
+async function findTreeNodeandAppend(id: string, arr: TreeNode[], appendData: any) {
+  for (let index = 0; index < arr.length; index++) {
+    const element = arr[index]
+    if (element.id === id) {
+      element.children = appendData.map((item: any) => {
+        return {
+          id: item.code,
+          name: item.fieldMap[treeConfigs.primaryColumnId1],
+          children: [],
+        }
+      })
+    }
+    else {
+      if (element.children)
+        findTreeNodeandAppend(id, element.children, appendData)
+    }
+  }
+}
+
+// 获取树顶层数据
+async function getTreeTopData(id: string) {
+  try {
+    loading.value = true
+    const res = await treeDataApi(id)
+    treeData.value = res.entities.map((item: any) => {
+      return {
+        id: item.code,
+        name: item.fieldMap[treeConfigs.primaryColumnId1],
+        children: [],
+      }
+    })
+  }
+  catch (error) {
+    console.log('error:', error)
+    // TODO handle the exception
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 获取树节点数据
+async function getTreeNodeData(node: TreeNode) {
+  try {
+    const res = await treeNodeDataApi(treeConfigs.branchRatmplId, node.id)
+    if (!res.entities.length)
+      return
+      // 追加节点
+    findTreeNodeandAppend(node.id, treeData.value, res.entities)
+  }
+  catch (error) {
+    console.log('error:', error)
+  }
+}
+
+function handleToggleExpand(node: TreeNode) {
+  getTreeNodeData(node)
+}
+
+onMounted(() => {
+  treeConfig1()
+})
+
+// 处理选择变更
+function handleSelectChange(keys: string[], node: TreeNode) {
+  selectedNode.value = [node]
+  selectedKeys.value = keys
+}
+
+// 处理标签关闭
+function handleTagClose(key: string) {
+  selectedKeys.value = selectedKeys.value.filter(k => k !== key)
+}
+
+// 根据ID获取节点名称
+function getNodeNameByKey(key: string): string {
+  const findNode = (nodes: TreeNode[]): TreeNode | null => {
+    for (const node of nodes) {
+      if (node.id === key) {
+        return node
+      }
+      if (node.children && node.children.length > 0) {
+        const found = findNode(node.children)
+        if (found)
+          return found
+      }
+    }
+    return null
+  }
+
+  const node = findNode(treeData.value)
+  return node ? node.name : ''
+}
+
+// 处理搜索
+function handleSearch(keyword?: string) {
+  // 搜索逻辑在filteredTreeData计算属性中处理
+  if (keyword !== undefined) {
+    searchKeyword.value = keyword
+  }
+}
+
+// 过滤后的树形数据
+const filteredTreeData = computed<TreeNode[]>(() => {
+  if (!searchKeyword.value) {
+    return treeData.value
+  }
+
+  const keyword = searchKeyword.value.toLowerCase()
+
+  // 过滤节点的递归函数
+  const filterNodes = (nodes: TreeNode[]): TreeNode[] => {
+    return nodes
+      .map((node) => {
+        // 复制节点，避免修改原数据
+        const newNode = { ...node }
+
+        // 如果有子节点，递归过滤
+        if (newNode.children && newNode.children.length > 0) {
+          newNode.children = filterNodes(newNode.children)
+        }
+
+        // 节点名称包含关键词，或者有符合条件的子节点，则保留该节点
+        const nodeNameMatch = newNode.name.toLowerCase().includes(keyword)
+        const hasMatchingChildren = newNode.children && newNode.children.length > 0
+
+        return nodeNameMatch || hasMatchingChildren ? newNode : null
+      })
+      .filter(Boolean) as TreeNode[]
+  }
+
+  return filterNodes(treeData.value)
+})
+
+// 记录节点引用
+function setNodeRef(id: string, el: HTMLElement | null) {
+  if (el) {
+    nodeRefs.value[id] = el
+  }
+}
+
+// 滚动到指定节点
+function scrollToNode(id: string) {
+  const node = nodeRefs.value[id]
+  if (node) {
+    node.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    // 高亮效果
+    node.classList.add('node-highlight')
+    setTimeout(() => {
+      node.classList.remove('node-highlight')
+    }, 2000)
+  }
+}
+
+// 页面加载时展开有子节点的节点
+onMounted(() => {
+  // 可以在这里添加默认展开逻辑
+})
+
+// 确定
+function handleConfirm() {
+  emit('handleConfirm', toRaw(selectedKeys.value), toRaw(selectedNode.value), treeConfigs.leafRatmplId)
+}
+
+// 取消
+function handleClose() {
+  emit('handleClose')
+}
+</script>
+
+<template>
+  <view class="tree-select-page">
+    <!-- 选择模式切换 -->
+    <!-- <view class="mode-switch-container">
+      <view class="mode-label">
+        选择模式：
+      </view>
+      <wd-radio-group
+        v-model="selectMode"
+        direction="horizontal"
+        @change="handleModeChange"
+      >
+        <wd-radio name="single" label="单选" />
+        <wd-radio name="multiple" label="多选" />
+      </wd-radio-group>
+    </view> -->
+
+    <!-- 搜索框 -->
+    <view class="search-container">
+      <wd-search
+        v-model="searchKeyword"
+        placeholder-class="splaceholderClass"
+        placeholder="搜索节点..."
+        clearable
+        @cancel="handleClose"
+        @input="handleSearch"
+        @clear="handleSearch"
+      />
+    </view>
+    <!-- 已选结果 -->
+    <view v-if="selectedKeys.length > 0" class="selected-result">
+      <view class="result-title">
+        已选 {{ selectedKeys.length }} 项：
+      </view>
+      <view class="result-tags">
+        <wd-tag
+          v-for="key in selectedKeys"
+          :key="key"
+          :bg-color="currentThemeColor.primary"
+          color="#fff"
+          closable
+          round
+          @close="handleTagClose(key)"
+          @click="scrollToNode(key)"
+        >
+          {{ getNodeNameByKey(key) }}
+        </wd-tag>
+      </view>
+    </view>
+
+    <!-- 树形选择区域 -->
+    <loadingCom v-if="loading" />
+    <view v-else class="tree-container">
+      <tree-select
+        :set-node-ref="setNodeRef"
+        :tree-data="filteredTreeData"
+        :select-mode="selectMode"
+        :selected-keys="selectedKeys"
+        @update:selected-keys="handleSelectChange"
+        @toggle-expand="handleToggleExpand"
+      />
+
+      <!-- 空状态 -->
+      <view v-if="filteredTreeData.length === 0" class="empty-state">
+        <wd-icon name="search" size="48" color="#ccc" />
+        <view class="empty-text">
+          没有找到匹配的节点
+        </view>
+      </view>
+    </view>
+    <view class="h-100px" />
+    <!-- 底部按钮 -->
+    <view class="fixed bottom-0 left-0 right-0 box-border w-100% flex p-2 bg-white dark:bg-[var(--wot-dark-background)]">
+      <wd-button
+        custom-class="flex-1"
+        type="primary"
+        @click="handleConfirm"
+      >
+        确定
+      </wd-button>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.mode-switch-container {
+  padding: 16px;
+  /* background-color: #fff; */
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.mode-label {
+  font-size: 14px;
+  color: #666;
+  margin-right: 12px;
+}
+
+.tree-container {
+  /* background-color: #fff; */
+  padding: 10px 0;
+  min-height: 300px;
+  /* max-height: calc(100vh - 220px); */
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  color: #999;
+}
+
+.empty-text {
+  margin-top: 16px;
+  font-size: 14px;
+}
+
+.selected-result {
+  /* background-color: #fff; */
+  padding: 16px;
+}
+
+.result-title {
+  text-align: left;
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 12px;
+}
+
+.result-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* 节点高亮动画 */
+.node-highlight {
+  animation: highlight 2s ease;
+}
+:deep(.wd-tag__close){
+  line-height: 0.8;
+  color:#fff;
+}
+:deep(.uni-input-input){
+  text-align: left;
+}
+.splaceholderClass{
+  text-align: left;
+}
+
+@keyframes highlight {
+  0% { background-color: rgba(64, 158, 255, 0.2); }
+  100% { background-color: transparent; }
+}
+</style>