@agile-team/wl-skills-kit 2.11.1 → 2.11.2

package/files/.wl-skills/src/components/global/C_TagStatus/types.ts

@@ -1,64 +1,64 @@
-/*
- * @Author: ChenYu ycyplus@gmail.com
- * @Date: 2026-02-14
- * @LastEditors: ChenYu ycyplus@gmail.com
- * @LastEditTime: 2026-02-14
- * @FilePath: \cx-ui-produce\src\components\global\C_TagStatus\types.ts
- * @Description: 状态标签组件 - 类型定义
- * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.
- */
-
-/**
- * Element Plus Tag 组件的类型
- */
-export type TagType = "" | "success" | "warning" | "danger" | "info";
-
-/**
- * Element Plus Tag 组件的效果
- */
-export type TagEffect = "light" | "dark" | "plain";
-
-/**
- * 状态类型枚举
- */
-export enum StatusType {
-  /** 计划状态 */
-  PLAN = "plan",
-  /** 产品状态 */
-  PRODUCT = "product",
-  /** 材料状态 */
-  MATERIAL = "material",
-  /** 进程状态 */
-  PROCESS = "process",
-  /** 切取确认状态 */
-  SAMPLING = "sampling",
-  /** 试样状态 */
-  SAMPLE = "sample",
-  /** 出炉状态 */
-  SLAB = "slab",
-  /** 布尔状态 */
-  BOOLEAN = "boolean"
-}
-
-/**
- * 状态配置项
- */
-export interface StatusConfig {
-  /** 状态值（用于匹配） */
-  value: string | number | boolean;
-  /** 显示文本 */
-  label: string;
-  /** Element Plus Tag 类型 */
-  type?: TagType;
-  /** 自定义颜色（优先级高于 type） */
-  color?: string;
-  /** Tag 效果 */
-  effect?: TagEffect;
-}
-
-/**
- * 状态类型配置映射
- */
-export type StatusTypeConfig = {
-  [key in StatusType]?: StatusConfig[];
-};
+/*
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2026-02-14
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-02-14
+ * @FilePath: \cx-ui-produce\src\components\global\C_TagStatus\types.ts
+ * @Description: 状态标签组件 - 类型定义
+ * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.
+ */
+
+/**
+ * Element Plus Tag 组件的类型
+ */
+export type TagType = "" | "success" | "warning" | "danger" | "info";
+
+/**
+ * Element Plus Tag 组件的效果
+ */
+export type TagEffect = "light" | "dark" | "plain";
+
+/**
+ * 状态类型枚举
+ */
+export enum StatusType {
+  /** 计划状态 */
+  PLAN = "plan",
+  /** 产品状态 */
+  PRODUCT = "product",
+  /** 材料状态 */
+  MATERIAL = "material",
+  /** 进程状态 */
+  PROCESS = "process",
+  /** 切取确认状态 */
+  SAMPLING = "sampling",
+  /** 试样状态 */
+  SAMPLE = "sample",
+  /** 出炉状态 */
+  SLAB = "slab",
+  /** 布尔状态 */
+  BOOLEAN = "boolean"
+}
+
+/**
+ * 状态配置项
+ */
+export interface StatusConfig {
+  /** 状态值（用于匹配） */
+  value: string | number | boolean;
+  /** 显示文本 */
+  label: string;
+  /** Element Plus Tag 类型 */
+  type?: TagType;
+  /** 自定义颜色（优先级高于 type） */
+  color?: string;
+  /** Tag 效果 */
+  effect?: TagEffect;
+}
+
+/**
+ * 状态类型配置映射
+ */
+export type StatusTypeConfig = {
+  [key in StatusType]?: StatusConfig[];
+};

package/files/.wl-skills/src/components/global/C_Tree/README.md

@@ -1,153 +1,153 @@
-# C_Tree 全局树形组件
-
-纯树形展示组件，提供标签页、搜索、过滤等功能。布局由页面自行控制。
-
-## 设计原则
-
-- ✅ **单一职责**：只负责树形展示，不管布局
-- ✅ **解耦设计**：与页面布局完全独立
-- ✅ **高复用性**：可在任何布局中使用
-- ✅ **自动导入**：无需手动 import
-
-## Props
-
-| 参数              | 说明         | 类型                   | 默认值                                   | 必填   |
-| ----------------- | ------------ | ---------------------- | ---------------------------------------- | ------ |
-| tabs              | 标签页配置   | `Array<{label, name}>` | -                                        | 否     |
-| treeData          | 树形数据     | `Array`                | -                                        | **是** |
-| treeProps         | 树形配置     | `Object`               | `{children: 'children', label: 'label'}` | 否     |
-| defaultActiveTab  | 默认激活标签 | `string`               | `'tab1'`                                 | 否     |
-| showSearch        | 显示搜索     | `boolean`              | `true`                                   | 否     |
-| searchPlaceholder | 搜索占位符   | `string`               | `'关键词搜索'`                           | 否     |
-| defaultExpandAll  | 默认展开     | `boolean`              | `true`                                   | 否     |
-| highlightCurrent  | 高亮当前     | `boolean`              | `true`                                   | 否     |
-
-## Events
-
-| 事件名     | 说明       | 参数                |
-| ---------- | ---------- | ------------------- |
-| node-click | 节点被点击 | `(data: any)`       |
-| tab-change | 标签页切换 | `(tabName: string)` |
-
-## Slots
-
-| 插槽名 | 说明           | 参数       |
-| ------ | -------------- | ---------- |
-| node   | 自定义节点内容 | `{ data }` |
-
-## 暴露方法
-
-| 方法名      | 说明       | 参数                |
-| ----------- | ---------- | ------------------- |
-| clearSearch | 清空搜索   | -                   |
-| switchTab   | 切换标签页 | `(tabName: string)` |
-
-## 使用示例
-
-### 1. 基础用法
-
-```vue
-<template>
-  <C_Tree :tree-data="treeData" @node-click="handleNodeClick" />
-</template>
-
-<script setup>
-const treeData = ref([
-  {
-    id: "1",
-    label: "节点1",
-    children: [{ id: "1-1", label: "子节点1-1" }]
-  }
-]);
-
-const handleNodeClick = (data) => {
-  console.log("点击节点:", data);
-};
-</script>
-```
-
-### 2. 带标签页和搜索
-
-```vue
-<template>
-  <C_Tree
-    :tabs="tabs"
-    :tree-data="treeData"
-    :default-active-tab="activeTab"
-    @node-click="handleNodeClick"
-    @tab-change="handleTabChange"
-  />
-</template>
-
-<script setup>
-const tabs = [
-  { label: "基本信息", name: "tab1" },
-  { label: "交付标准", name: "tab2" }
-];
-
-const activeTab = ref("tab1");
-const treeData = ref([...]);
-
-const handleTabChange = (tabName) => {
-  activeTab.value = tabName;
-  // 加载对应标签页的数据...
-};
-</script>
-```
-
-### 3. 左右布局（使用 jh-drag-col）
-
-```vue
-<template>
-  <jh-drag-col :left-width="300">
-    <!-- 左侧：树形 -->
-    <template #left>
-      <C_Tree
-        :tabs="tabs"
-        :tree-data="treeData"
-        @node-click="handleNodeClick"
-      />
-    </template>
-
-    <!-- 右侧：详情 -->
-    <template #right>
-      <div class="detail-panel">
-        <h3>{{ selectedNode?.label }}</h3>
-        <p>详情内容...</p>
-      </div>
-    </template>
-  </jh-drag-col>
-</template>
-
-<script setup>
-const tabs = [
-  { label: "基本信息", name: "tab1" },
-  { label: "交付标准", name: "tab2" }
-];
-
-const treeData = ref([...]);
-const selectedNode = ref(null);
-
-const handleNodeClick = (data) => {
-  selectedNode.value = data;
-};
-</script>
-
-<style scoped>
-.detail-panel {
-  padding: 16px;
-  background: #fff;
-  border-radius: 4px;
-  height: 100%;
-}
-</style>
-```
-
-## 注意事项
-
-1. **treeData 必填**：组件必须传入树形数据
-2. **布局由页面控制**：组件本身只占满父容器的 100% 高度
-3. **自动导入**：已配置 Vite 自动导入，无需手动 import
-4. **事件名格式**：使用 kebab-case（`@node-click`、`@tab-change`）
-
-
+# C_Tree 全局树形组件
+
+纯树形展示组件，提供标签页、搜索、过滤等功能。布局由页面自行控制。
+
+## 设计原则
+
+- ✅ **单一职责**：只负责树形展示，不管布局
+- ✅ **解耦设计**：与页面布局完全独立
+- ✅ **高复用性**：可在任何布局中使用
+- ✅ **自动导入**：无需手动 import
+
+## Props
+
+| 参数              | 说明         | 类型                   | 默认值                                   | 必填   |
+| ----------------- | ------------ | ---------------------- | ---------------------------------------- | ------ |
+| tabs              | 标签页配置   | `Array<{label, name}>` | -                                        | 否     |
+| treeData          | 树形数据     | `Array`                | -                                        | **是** |
+| treeProps         | 树形配置     | `Object`               | `{children: 'children', label: 'label'}` | 否     |
+| defaultActiveTab  | 默认激活标签 | `string`               | `'tab1'`                                 | 否     |
+| showSearch        | 显示搜索     | `boolean`              | `true`                                   | 否     |
+| searchPlaceholder | 搜索占位符   | `string`               | `'关键词搜索'`                           | 否     |
+| defaultExpandAll  | 默认展开     | `boolean`              | `true`                                   | 否     |
+| highlightCurrent  | 高亮当前     | `boolean`              | `true`                                   | 否     |
+
+## Events
+
+| 事件名     | 说明       | 参数                |
+| ---------- | ---------- | ------------------- |
+| node-click | 节点被点击 | `(data: any)`       |
+| tab-change | 标签页切换 | `(tabName: string)` |
+
+## Slots
+
+| 插槽名 | 说明           | 参数       |
+| ------ | -------------- | ---------- |
+| node   | 自定义节点内容 | `{ data }` |
+
+## 暴露方法
+
+| 方法名      | 说明       | 参数                |
+| ----------- | ---------- | ------------------- |
+| clearSearch | 清空搜索   | -                   |
+| switchTab   | 切换标签页 | `(tabName: string)` |
+
+## 使用示例
+
+### 1. 基础用法
+
+```vue
+<template>
+  <C_Tree :tree-data="treeData" @node-click="handleNodeClick" />
+</template>
+
+<script setup>
+const treeData = ref([
+  {
+    id: "1",
+    label: "节点1",
+    children: [{ id: "1-1", label: "子节点1-1" }]
+  }
+]);
+
+const handleNodeClick = (data) => {
+  console.log("点击节点:", data);
+};
+</script>
+```
+
+### 2. 带标签页和搜索
+
+```vue
+<template>
+  <C_Tree
+    :tabs="tabs"
+    :tree-data="treeData"
+    :default-active-tab="activeTab"
+    @node-click="handleNodeClick"
+    @tab-change="handleTabChange"
+  />
+</template>
+
+<script setup>
+const tabs = [
+  { label: "基本信息", name: "tab1" },
+  { label: "交付标准", name: "tab2" }
+];
+
+const activeTab = ref("tab1");
+const treeData = ref([...]);
+
+const handleTabChange = (tabName) => {
+  activeTab.value = tabName;
+  // 加载对应标签页的数据...
+};
+</script>
+```
+
+### 3. 左右布局（使用 jh-drag-col）
+
+```vue
+<template>
+  <jh-drag-col :left-width="300">
+    <!-- 左侧：树形 -->
+    <template #left>
+      <C_Tree
+        :tabs="tabs"
+        :tree-data="treeData"
+        @node-click="handleNodeClick"
+      />
+    </template>
+
+    <!-- 右侧：详情 -->
+    <template #right>
+      <div class="detail-panel">
+        <h3>{{ selectedNode?.label }}</h3>
+        <p>详情内容...</p>
+      </div>
+    </template>
+  </jh-drag-col>
+</template>
+
+<script setup>
+const tabs = [
+  { label: "基本信息", name: "tab1" },
+  { label: "交付标准", name: "tab2" }
+];
+
+const treeData = ref([...]);
+const selectedNode = ref(null);
+
+const handleNodeClick = (data) => {
+  selectedNode.value = data;
+};
+</script>
+
+<style scoped>
+.detail-panel {
+  padding: 16px;
+  background: #fff;
+  border-radius: 4px;
+  height: 100%;
+}
+</style>
+```
+
+## 注意事项
+
+1. **treeData 必填**：组件必须传入树形数据
+2. **布局由页面控制**：组件本身只占满父容器的 100% 高度
+3. **自动导入**：已配置 Vite 自动导入，无需手动 import
+4. **事件名格式**：使用 kebab-case（`@node-click`、`@tab-change`）
+
+

package/files/.wl-skills/src/components/global/C_Tree/index.scss

@@ -1,42 +1,42 @@
-.c-tree-panel {
-  height: 100%;
-  background: #fff;
-  border-radius: 4px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .tree-tabs {
-    margin-bottom: 12px;
-    flex-shrink: 0;
-  }
-
-  .tree-search {
-    margin-bottom: 12px;
-    flex-shrink: 0;
-  }
-
-  .el-tree {
-    flex: 1;
-    overflow-y: auto;
-
-    // 滚动条样式
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: rgba(0, 0, 0, 0.2);
-      border-radius: 3px;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.3);
-      }
-    }
-  }
-
-  .tree-node-label {
-    font-size: 14px;
-  }
-}
+.c-tree-panel {
+  height: 100%;
+  background: #fff;
+  border-radius: 4px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .tree-tabs {
+    margin-bottom: 12px;
+    flex-shrink: 0;
+  }
+
+  .tree-search {
+    margin-bottom: 12px;
+    flex-shrink: 0;
+  }
+
+  .el-tree {
+    flex: 1;
+    overflow-y: auto;
+
+    // 滚动条样式
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.3);
+      }
+    }
+  }
+
+  .tree-node-label {
+    font-size: 14px;
+  }
+}

package/files/.wl-skills/src/components/global/C_Tree/index.vue

@@ -1,78 +1,78 @@
-<template>
-  <div class="c-tree-panel">
-    <!-- Tab 切换 -->
-    <el-tabs
-      v-if="tabs && tabs.length > 0"
-      v-model="activeTab"
-      class="tree-tabs"
-    >
-      <el-tab-pane
-        v-for="tab in tabs"
-        :key="tab.name"
-        :label="tab.label"
-        :name="tab.name"
-      />
-    </el-tabs>
-
-    <!-- 搜索框 -->
-    <div v-if="showSearch" class="tree-search">
-      <el-input
-        v-model="searchKeyword"
-        :placeholder="searchPlaceholder"
-        clearable
-        :prefix-icon="Search"
-        size="small"
-      />
-    </div>
-
-    <!-- 树形组件 -->
-    <el-tree
-      ref="treeRef"
-      :data="treeData"
-      :props="treeProps"
-      :filter-node-method="filterNode"
-      :default-expand-all="defaultExpandAll"
-      :highlight-current="highlightCurrent"
-      @node-click="handleNodeClick"
-    >
-      <template #default="{ data }">
-        <slot name="node" :data="data">
-          <span class="tree-node-label">{{ data[treeProps.label] }}</span>
-        </slot>
-      </template>
-    </el-tree>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { createTree, type Props } from "./data";
-
-const props = withDefaults(defineProps<Props>(), {
-  treeProps: () => ({ children: "children", label: "label" }),
-  defaultActiveTab: "tab1",
-  showSearch: true,
-  searchPlaceholder: "关键词搜索",
-  defaultExpandAll: true,
-  highlightCurrent: true
-});
-
-const emit = defineEmits<{
-  (e: "node-click", data: any): void;
-  (e: "tab-change", tabName: string): void;
-}>();
-
-const {
-  Search,
-  activeTab,
-  searchKeyword,
-  treeRef,
-  filterNode,
-  handleNodeClick,
-  clearSearch,
-  switchTab
-} = createTree(props, emit);
-
-defineExpose({ treeRef, searchKeyword, activeTab, clearSearch, switchTab });
-</script>
-
-<style scoped lang="scss" src="./index.scss"></style>
+<template>
+  <div class="c-tree-panel">
+    <!-- Tab 切换 -->
+    <el-tabs
+      v-if="tabs && tabs.length > 0"
+      v-model="activeTab"
+      class="tree-tabs"
+    >
+      <el-tab-pane
+        v-for="tab in tabs"
+        :key="tab.name"
+        :label="tab.label"
+        :name="tab.name"
+      />
+    </el-tabs>
+
+    <!-- 搜索框 -->
+    <div v-if="showSearch" class="tree-search">
+      <el-input
+        v-model="searchKeyword"
+        :placeholder="searchPlaceholder"
+        clearable
+        :prefix-icon="Search"
+        size="small"
+      />
+    </div>
+
+    <!-- 树形组件 -->
+    <el-tree
+      ref="treeRef"
+      :data="treeData"
+      :props="treeProps"
+      :filter-node-method="filterNode"
+      :default-expand-all="defaultExpandAll"
+      :highlight-current="highlightCurrent"
+      @node-click="handleNodeClick"
+    >
+      <template #default="{ data }">
+        <slot name="node" :data="data">
+          <span class="tree-node-label">{{ data[treeProps.label] }}</span>
+        </slot>
+      </template>
+    </el-tree>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { createTree, type Props } from "./data";
+
+const props = withDefaults(defineProps<Props>(), {
+  treeProps: () => ({ children: "children", label: "label" }),
+  defaultActiveTab: "tab1",
+  showSearch: true,
+  searchPlaceholder: "关键词搜索",
+  defaultExpandAll: true,
+  highlightCurrent: true
+});
+
+const emit = defineEmits<{
+  (e: "node-click", data: any): void;
+  (e: "tab-change", tabName: string): void;
+}>();
+
+const {
+  Search,
+  activeTab,
+  searchKeyword,
+  treeRef,
+  filterNode,
+  handleNodeClick,
+  clearSearch,
+  switchTab
+} = createTree(props, emit);
+
+defineExpose({ treeRef, searchKeyword, activeTab, clearSearch, switchTab });
+</script>
+
+<style scoped lang="scss" src="./index.scss"></style>