wui-components-v2 1.1.68 → 1.1.70

package/components/wui-tree-page/components/tree-item.vue

@@ -1,238 +1,238 @@
-<script setup lang="ts">
-import { computed, defineEmits, defineOptions, defineProps } from 'vue'
-import { desaturateColor } from '../../../utils'
-import { useManualTheme } from '../../../composables/useManualTheme'
-
-defineOptions({
-  name: 'TreeItem',
-})
-const props = defineProps({
-  node: {
-    type: Object,
-    required: true,
-  },
-  level: {
-    type: Number,
-    default: 0,
-  },
-  searchKeyword: {
-    type: String,
-    default: '',
-  },
-  leafRatmplId: {
-    type: String,
-    default: '',
-  },
-})
-const emit = defineEmits(['addBranch', 'addLeaf', 'remove', 'update', 'toggleExpand'])
-const { currentThemeColor } = useManualTheme()
-interface TreeNode {
-  id: string
-  label: string
-  expanded: boolean
-  type: 'branch' | 'leaf' | 'root'
-  loading: boolean
-  children?: TreeNode[]
-  [key: string]: any // 允许其他自定义属性
-}
-// const router = useRouter()
-
-const hasChildren = computed(() => {
-  return props.node.children && props.node.children.length > 0
-})
-
-// 计算是否需要高亮
-const isHighlight = computed(() => {
-  if (!props.searchKeyword) return false
-  return props.node.label.toLowerCase().includes(props.searchKeyword.toLowerCase())
-})
-
-// 展开/收起
-function toggleExpand(node?: TreeNode) {
-  emit('toggleExpand', node || props.node)
-}
-
-// 添加分支节点事件
-function onAddBranch() {
-  emit('addBranch', props.node)
-}
-// 添加叶子节点事件
-function onAddLeaf() {
-  emit('addLeaf', props.node)
-}
-
-// 删除节点事件
-function onRemove() {
-  emit('remove', props.node)
-}
-
-// 编辑节点事件
-function handleEdit() {
-  emit('update', props.node)
-}
-
-// 事件透传（递归组件必须将子组件的事件向上传递）
-function emitAddBranch(e: TreeNode) {
-  emit('addBranch', e)
-}
-function emitAddLeaf(e: TreeNode) {
-  emit('addLeaf', e)
-}
-function emitRemove(e: TreeNode) {
-  emit('remove', e)
-}
-function emitUpdate(e: TreeNode) {
-  emit('update', e)
-}
-</script>
-
-<template>
-  <view class="tree-node">
-    <!-- 节点内容行 -->
-    <view class="node-content bg-white dark:bg-[#1B1B1E]" :style="{ paddingLeft: `${level * 30}rpx` }">
-      <!-- 展开/收起图标 -->
-      <view
-        class="icon-area"
-        @click.stop="
-          () => {
-            toggleExpand()
-          }
-        "
-      >
-        <text v-if="node.type !== 'leaf'" class="arrow" :class="{ rotated: node.expanded }">
-          <wd-loading v-if="node.loading" size="16" />
-          <wd-icon v-else name="arrow-right" size="18px" />
-        </text>
-        <text v-else class="dot dark:text-white">•</text>
-      </view>
-
-      <!-- 节点名称 (支持搜索高亮) -->
-      <view
-        class="label-area text-gray-800 dark:text-white"
-        @click.stop="
-          () => {
-            toggleExpand()
-          }
-        "
-      >
-        <text :class="{ highlight: isHighlight }">
-          {{ node.label }}
-        </text>
-      </view>
-
-      <!-- 操作按钮区域 -->
-      <view class="action-area">
-        <view
-          v-if="(node.type === 'branch' || node.type === 'root') && leafRatmplId"
-          class="btn"
-          :style="{ backgroundColor: desaturateColor(currentThemeColor.primary) }"
-          @click.stop="onAddLeaf"
-        >
-          <text :style="{ color: currentThemeColor.primary }">+</text>
-        </view>
-        <view
-          v-if="node.type === 'branch' || node.type === 'root'"
-          class="btn"
-          :style="{ backgroundColor: desaturateColor(currentThemeColor.primary) }"
-          @click.stop="onAddBranch"
-        >
-          <text class="i-carbon:decision-tree text-3" :style="{ color: currentThemeColor.primary }" />
-        </view>
-        <wd-icon
-          class="btn"
-          name="edit"
-          size="28rpx"
-          :style="{ backgroundColor: desaturateColor(currentThemeColor.primary), color: currentThemeColor.primary }"
-          @click.stop="handleEdit"
-        />
-        <text class="btn del" @click.stop="onRemove">－</text>
-      </view>
-    </view>
-
-    <!-- 递归渲染子节点 -->
-    <view v-if="hasChildren && node.expanded" class="children-container">
-      <tree-item
-        v-for="child in node.children"
-        :key="child.id"
-        :node="child"
-        :level="level + 1"
-        :leaf-ratmpl-id="props.leafRatmplId"
-        :search-keyword="searchKeyword"
-        @add-leaf="emitAddLeaf"
-        @add-branch="emitAddBranch"
-        @remove="emitRemove"
-        @update="emitUpdate"
-        @toggle-expand="toggleExpand"
-      />
-    </view>
-  </view>
-</template>
-
-<style scoped>
-.tree-node {
-  width: 100%;
-}
-
-.node-content {
-  display: flex;
-  align-items: center;
-  height: 88rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-  padding-right: 20rpx;
-}
-
-.icon-area {
-  width: 50rpx;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #999;
-}
-
-.arrow {
-  font-size: 24rpx;
-  transition: transform 0.2s;
-}
-
-.arrow.rotated {
-  transform: rotate(90deg);
-}
-
-.dot {
-  font-size: 60rpx;
-  color: #ddd;
-}
-
-.label-area {
-  flex: 1;
-  font-size: 30rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.highlight {
-  color: #007aff;
-  font-weight: bold;
-}
-
-.action-area {
-  display: flex;
-  gap: 20rpx;
-}
-
-.btn {
-  width: 44rpx;
-  height: 44rpx;
-  line-height: 40rpx;
-  text-align: center;
-  border-radius: 8rpx;
-  font-size: 32rpx;
-}
-
-.del {
-  background-color: #ffebee;
-  color: #f44336;
-}
-</style>
+<script setup lang="ts">
+import { computed, defineEmits, defineOptions, defineProps } from 'vue'
+import { desaturateColor } from '../../../utils'
+import { useManualTheme } from '../../../composables/useManualTheme'
+
+defineOptions({
+  name: 'TreeItem',
+})
+const props = defineProps({
+  node: {
+    type: Object,
+    required: true,
+  },
+  level: {
+    type: Number,
+    default: 0,
+  },
+  searchKeyword: {
+    type: String,
+    default: '',
+  },
+  leafRatmplId: {
+    type: String,
+    default: '',
+  },
+})
+const emit = defineEmits(['addBranch', 'addLeaf', 'remove', 'update', 'toggleExpand'])
+const { currentThemeColor } = useManualTheme()
+interface TreeNode {
+  id: string
+  label: string
+  expanded: boolean
+  type: 'branch' | 'leaf' | 'root'
+  loading: boolean
+  children?: TreeNode[]
+  [key: string]: any // 允许其他自定义属性
+}
+// const router = useRouter()
+
+const hasChildren = computed(() => {
+  return props.node.children && props.node.children.length > 0
+})
+
+// 计算是否需要高亮
+const isHighlight = computed(() => {
+  if (!props.searchKeyword) return false
+  return props.node.label.toLowerCase().includes(props.searchKeyword.toLowerCase())
+})
+
+// 展开/收起
+function toggleExpand(node?: TreeNode) {
+  emit('toggleExpand', node || props.node)
+}
+
+// 添加分支节点事件
+function onAddBranch() {
+  emit('addBranch', props.node)
+}
+// 添加叶子节点事件
+function onAddLeaf() {
+  emit('addLeaf', props.node)
+}
+
+// 删除节点事件
+function onRemove() {
+  emit('remove', props.node)
+}
+
+// 编辑节点事件
+function handleEdit() {
+  emit('update', props.node)
+}
+
+// 事件透传（递归组件必须将子组件的事件向上传递）
+function emitAddBranch(e: TreeNode) {
+  emit('addBranch', e)
+}
+function emitAddLeaf(e: TreeNode) {
+  emit('addLeaf', e)
+}
+function emitRemove(e: TreeNode) {
+  emit('remove', e)
+}
+function emitUpdate(e: TreeNode) {
+  emit('update', e)
+}
+</script>
+
+<template>
+  <view class="tree-node">
+    <!-- 节点内容行 -->
+    <view class="node-content bg-white dark:bg-[#1B1B1E]" :style="{ paddingLeft: `${level * 30}rpx` }">
+      <!-- 展开/收起图标 -->
+      <view
+        class="icon-area"
+        @click.stop="
+          () => {
+            toggleExpand()
+          }
+        "
+      >
+        <text v-if="node.type !== 'leaf'" class="arrow" :class="{ rotated: node.expanded }">
+          <wd-loading v-if="node.loading" size="16" />
+          <wd-icon v-else name="arrow-right" size="18px" />
+        </text>
+        <text v-else class="dot dark:text-white">•</text>
+      </view>
+
+      <!-- 节点名称 (支持搜索高亮) -->
+      <view
+        class="label-area text-gray-800 dark:text-white"
+        @click.stop="
+          () => {
+            toggleExpand()
+          }
+        "
+      >
+        <text :class="{ highlight: isHighlight }">
+          {{ node.label }}
+        </text>
+      </view>
+
+      <!-- 操作按钮区域 -->
+      <view class="action-area">
+        <view
+          v-if="(node.type === 'branch' || node.type === 'root') && leafRatmplId"
+          class="btn"
+          :style="{ backgroundColor: desaturateColor(currentThemeColor.primary) }"
+          @click.stop="onAddLeaf"
+        >
+          <text :style="{ color: currentThemeColor.primary }">+</text>
+        </view>
+        <view
+          v-if="node.type === 'branch' || node.type === 'root'"
+          class="btn"
+          :style="{ backgroundColor: desaturateColor(currentThemeColor.primary) }"
+          @click.stop="onAddBranch"
+        >
+          <text class="i-carbon:decision-tree text-3" :style="{ color: currentThemeColor.primary }" />
+        </view>
+        <wd-icon
+          class="btn"
+          name="edit"
+          size="28rpx"
+          :style="{ backgroundColor: desaturateColor(currentThemeColor.primary), color: currentThemeColor.primary }"
+          @click.stop="handleEdit"
+        />
+        <text class="btn del" @click.stop="onRemove">－</text>
+      </view>
+    </view>
+
+    <!-- 递归渲染子节点 -->
+    <view v-if="hasChildren && node.expanded" class="children-container">
+      <tree-item
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :level="level + 1"
+        :leaf-ratmpl-id="props.leafRatmplId"
+        :search-keyword="searchKeyword"
+        @add-leaf="emitAddLeaf"
+        @add-branch="emitAddBranch"
+        @remove="emitRemove"
+        @update="emitUpdate"
+        @toggle-expand="toggleExpand"
+      />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.tree-node {
+  width: 100%;
+}
+
+.node-content {
+  display: flex;
+  align-items: center;
+  height: 88rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  padding-right: 20rpx;
+}
+
+.icon-area {
+  width: 50rpx;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+}
+
+.arrow {
+  font-size: 24rpx;
+  transition: transform 0.2s;
+}
+
+.arrow.rotated {
+  transform: rotate(90deg);
+}
+
+.dot {
+  font-size: 60rpx;
+  color: #ddd;
+}
+
+.label-area {
+  flex: 1;
+  font-size: 30rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.highlight {
+  color: #007aff;
+  font-weight: bold;
+}
+
+.action-area {
+  display: flex;
+  gap: 20rpx;
+}
+
+.btn {
+  width: 44rpx;
+  height: 44rpx;
+  line-height: 40rpx;
+  text-align: center;
+  border-radius: 8rpx;
+  font-size: 32rpx;
+}
+
+.del {
+  background-color: #ffebee;
+  color: #f44336;
+}
+</style>