create-yss-spec 2.1.10 → 2.1.13

package/template/.cursor/skills/yss-ui/assets/demos/tree/basic-left/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="layout-demo">
+    <div ref="treeAreaRef" style="width: 280px">
+      <YTree
+        v-model:search-value="search"
+        :tree-data="data"
+        :get-node-actions="getActions"
+        :expanded-keys="expandedKeys"
+        :field-names="{ title: 'name', key: 'code', children: 'children' }"
+        :height="treeHeight"
+        @action="handleAction"
+        @expand="onExpand"
+      >
+        <template #node-prefix="{ node }">
+          <FolderOpenOutlined v-if="!isLeaf(node) && isExpanded(node)" />
+          <FolderOutlined v-else-if="!isLeaf(node)" />
+          <FileOutlined v-else />
+        </template>
+      </YTree>
+    </div>
+    <div class="right-demo">右侧区域（表格占位）</div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { YTree } from '@yss-ui/components';
+import { useTreeHeight, YTREE_SEARCH_HEIGHT } from '@yss-ui/hooks';
+import { FolderOutlined, FolderOpenOutlined, FileOutlined } from '@ant-design/icons-vue';
+
+const treeAreaRef = ref<HTMLDivElement>();
+const search = ref('');
+const expandedKeys = ref<string[]>(['root']);
+
+const { treeHeight } = useTreeHeight(treeAreaRef, {
+  extraOffset: YTREE_SEARCH_HEIGHT,
+});
+
+const data = ref([
+  {
+    code: 'root',
+    name: '所有任务流',
+    children: [
+      { code: 'test', name: 'test' },
+      { code: 'a', name: '委外管理平台委外管理平台委外管理平台委外管理平台' },
+      { code: 'b0', name: '投资管理演示' },
+      { code: 'c', name: '数仓演示' },
+      { code: 'd', name: '数据质量V2' },
+      { code: 'b', name: '投资管理演示' },
+      { code: 'c1', name: '数仓演示' },
+      { code: 'd1', name: '数据质量V2' },
+      { code: 'b1', name: '投资管理演示' },
+      { code: 'c2', name: '数仓演示' },
+      { code: 'd2', name: '数据质量V2' },
+      { code: 'b2', name: '投资管理演示' },
+      { code: 'c3', name: '数仓演示' },
+      { code: 'd3', name: '数据质量V2' },
+      { code: 'b3', name: '投资管理演示' },
+      { code: 'c4', name: '数仓演示' },
+      { code: 'd4', name: '数据质量V2' },
+      { code: 'b4', name: '投资管理演示' },
+      { code: 'c5', name: '数仓演示' },
+      { code: 'd5', name: '数据质量V2' },
+      { code: 'b5', name: '投资管理演示' },
+      { code: 'c6', name: '数仓演示' },
+      { code: 'd6', name: '数据质量V2' },
+      { code: 'b6', name: '投资管理演示' },
+      { code: 'c7', name: '数仓演示' },
+      { code: 'd7', name: '数据质量V2' },
+      { code: 'b7', name: '投资管理演示' },
+      { code: 'c8', name: '数仓演示' },
+      { code: 'd8', name: '数据质量V2' },
+      { code: 'b8', name: '投资管理演示' },
+      { code: 'c9', name: '数仓演示' },
+      { code: 'd9', name: '数据质量V2' },
+      { code: 'b9', name: '投资管理演示' },
+      { code: 'c10', name: '数仓演示' },
+      { code: 'd10', name: '数据质量V2底部' },
+    ],
+  },
+]);
+
+const getActions = (_node: any) => {
+  return [
+    { key: 'new-folder', label: '新建文件夹' },
+    { key: 'rename', label: '重命名' },
+    { key: 'move', label: '移动到' },
+    { key: 'export', label: '导出' },
+    { key: 'import', label: '导入' },
+    { key: 'delete', label: '删除', danger: true },
+  ];
+};
+
+const onExpand = (keys: (string | number)[], _info: any) => {
+  expandedKeys.value = keys.map(k => String(k));
+};
+
+const handleAction = (payload: { key: string; node: any }) => {
+  console.info('action:', payload);
+};
+
+const isLeaf = (node: any): boolean => {
+  return !Array.isArray(node.children) || node.children.length === 0;
+};
+
+const isExpanded = (node: any): boolean => {
+  return expandedKeys.value.includes(String(node.key));
+};
+</script>
+
+<style scoped lang="less">
+.layout-demo {
+  display: flex;
+  gap: 16px;
+  height: 300px;
+  overflow: auto;
+}
+
+.right-demo {
+  flex: 1;
+  border: 1px dashed #e5e6eb;
+  padding: 16px;
+  background-color: var(--y-demo-placeholder-bg, rgba(0, 0, 0, 0.03));
+}
+</style>

package/template/.cursor/skills/yss-ui/assets/demos/tree/datasource-group/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div style="width: 300px">
+    <YTree :tree-data="sources" :ellipsis-tooltip="true">
+      <template #node-title="{ node, text }">
+        <span>
+          {{ text }}
+          <span v-if="node.count" style="margin-left: 6px; color: #8b5cf6">({{ node.count }})</span>
+        </span>
+      </template>
+    </YTree>
+  </div>
+</template>
+<script setup lang="ts">
+import { YTree } from '@yss-ui/components';
+const sources = [
+  {
+    key: 'all',
+    title: '所有数据来源',
+    count: 54,
+    children: [
+      { key: 'sys1', title: '系统1', count: 1, children: [{ key: 'oracle3', title: '测试Oracle3' }] },
+      { key: 'sys2', title: '系统2', count: 1, children: [{ key: 'mysql34', title: '测试Mysql34' }] },
+      { key: 'sys3', title: '系统3', count: 1 },
+      { key: 'sys4', title: '系统4', count: 1 },
+      { key: 'unassigned', title: '未分配', count: 31 },
+      { key: 'dev', title: '数据开发使用', count: 16 },
+      { key: 'crm', title: '客户关系管理系统', count: 3 },
+    ],
+  },
+];
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/tree/multi-checkable/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="demo">
+    <div class="panel">
+      <YTree
+        v-model:checked-keys="checkedKeys"
+        :tree-data="data"
+        checkable
+        default-expand-all
+        :selectable="false"
+        block-node
+        @check="onCheck"
+      />
+    </div>
+    <div class="result">
+      <div class="result__title">已勾选 Keys：</div>
+      <div class="result__list">
+        <span v-for="k in checkedKeys" :key="k" class="tag">{{ k }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { YTree } from '@yss-ui/components';
+
+const checkedKeys = ref<(string | number)[]>(['1-1']);
+const data = ref([
+  {
+    key: 'root',
+    title: '多选（复选框）',
+    children: [
+      {
+        key: '1',
+        title: '分组-1',
+        children: [
+          { key: '1-1', title: '项-1-1' },
+          { key: '1-2', title: '项-1-2' },
+        ],
+      },
+      {
+        key: '2',
+        title: '分组-2',
+        children: [
+          { key: '2-1', title: '项-2-1' },
+          { key: '2-2', title: '项-2-2' },
+        ],
+      },
+    ],
+  },
+]);
+
+const onCheck = (keys: any, info: any) => {
+  // antdv 事件形态：keys 可能是数组或对象（受控/非受控差异）
+  checkedKeys.value = Array.isArray(keys) ? keys : keys.checked;
+  console.info('checked:', keys, info);
+};
+</script>
+<style scoped lang="less">
+.demo {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.panel {
+  width: 320px;
+}
+.result__title {
+  color: var(--y-demo-text-secondary, rgba(0, 0, 0, 0.65));
+  font-size: 12px;
+}
+.result__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background-color: var(--y-demo-chip-bg, rgba(0, 0, 0, 0.04));
+  border: 1px solid var(--y-demo-chip-border, rgba(0, 0, 0, 0.08));
+  font-size: 12px;
+}
+</style>

package/template/.cursor/skills/yss-ui/assets/demos/tree/multiple-select/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="demo">
+    <YTree
+      v-model:selected-keys="selectedKeys"
+      :tree-data="data"
+      :multiple="true"
+      default-expand-all
+      block-node
+      @select="onSelect"
+    />
+    <div class="tips">按住 Cmd/Ctrl 可多选节点</div>
+    <div class="result">
+      <span v-for="k in selectedKeys" :key="k" class="tag">{{ k }}</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { YTree } from '@yss-ui/components';
+
+const selectedKeys = ref<(string | number)[]>(['1-1']);
+const data = ref([
+  {
+    key: 'root',
+    title: '多选（高亮选中）',
+    children: [
+      {
+        key: '1',
+        title: '分组-1',
+        children: [
+          { key: '1-1', title: '项-1-1' },
+          { key: '1-2', title: '项-1-2' },
+        ],
+      },
+      {
+        key: '2',
+        title: '分组-2',
+        children: [
+          { key: '2-1', title: '项-2-1' },
+          { key: '2-2', title: '项-2-2' },
+        ],
+      },
+    ],
+  },
+]);
+
+const onSelect = (keys: any, info: any) => {
+  selectedKeys.value = Array.isArray(keys) ? keys : keys.selected;
+  console.info('selected:', keys, info);
+};
+</script>
+<style scoped lang="less">
+.demo {
+  width: 320px;
+}
+.tips {
+  margin-top: 8px;
+  color: var(--y-demo-text-secondary, rgba(0, 0, 0, 0.65));
+  font-size: 12px;
+}
+.result {
+  margin-top: 6px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background-color: var(--y-demo-chip-bg, rgba(0, 0, 0, 0.04));
+  border: 1px solid var(--y-demo-chip-border, rgba(0, 0, 0, 0.08));
+  font-size: 12px;
+}
+</style>

package/template/.cursor/skills/yss-ui/assets/demos/tree/resource-list/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div style="width: 280px">
+    <YTree :tree-data="resources" block-node>
+      <template #node-title="{ node, text }">
+        <span :style="{ color: node.color || 'inherit' }">{{ text }}</span>
+      </template>
+    </YTree>
+  </div>
+</template>
+<script setup lang="ts">
+import { YTree } from '@yss-ui/components';
+const resources = [
+  {
+    key: 'all',
+    title: '全部',
+    color: '#001a7d',
+    children: [
+      {
+        key: 'srv',
+        title: '服务资源',
+        color: '#1d39c4',
+        children: [
+          { key: 'core', title: '核心应用' },
+          { key: 'eureka', title: 'Eureka' },
+        ],
+      },
+      {
+        key: 'sys',
+        title: '系统资源',
+        color: '#595959',
+        children: [
+          { key: 'db', title: '数据源' },
+          { key: 'redis', title: 'Redis' },
+          { key: 'tomcat', title: 'Tomcat', color: '#3371ff' },
+        ],
+      },
+      { key: 'biz', title: '业务资源', color: '#8c8c8c' },
+    ],
+  },
+];
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/tree/search-toolbar/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="layout-demo">
+    <div style="width: 280px">
+      <YTree
+        v-model:search-value="search"
+        :tree-data="data"
+        :get-node-actions="getActions"
+        :expanded-keys="expandedKeys"
+        @action="handleAction"
+        @expand="onExpand"
+      >
+        <template #search>
+          <div class="toolbar">
+            <AInput v-model:value="search" allow-clear placeholder="请输入关键词" size="small" class="toolbar__input" />
+            <div class="toolbar__actions">
+              <span class="toolbar-icon" title="刷新" @click="reloadTree">
+                <ReloadOutlined />
+              </span>
+              <span class="toolbar-icon" title="新增文件夹" @click="createFile">
+                <FolderAddOutlined />
+              </span>
+            </div>
+          </div>
+        </template>
+        <template #node-prefix="{ node }">
+          <FolderOpenOutlined v-if="!isLeaf(node) && isExpanded(node)" />
+          <FolderOutlined v-else-if="!isLeaf(node)" />
+          <FileOutlined v-else />
+        </template>
+      </YTree>
+    </div>
+    <div class="right-demo">右侧区域（表格占位）</div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { YTree } from '@yss-ui/components';
+import { Input as AInput } from 'ant-design-vue';
+import {
+  FolderOutlined,
+  FolderOpenOutlined,
+  FileOutlined,
+  ReloadOutlined,
+  FolderAddOutlined,
+} from '@ant-design/icons-vue';
+
+const search = ref('');
+const expandedKeys = ref<string[]>(['root']);
+
+const data = ref([
+  {
+    key: 'root',
+    title: '所有任务流',
+    children: [
+      { key: 'test', title: 'test' },
+      { key: 'a', title: '委外管理平台委外管理平台委外管理平台委外管理平台' },
+      { key: 'b', title: '投资管理演示' },
+      { key: 'c', title: '数仓演示' },
+      { key: 'd', title: '数据质量V2' },
+    ],
+  },
+]);
+
+const getActions = (_node: any) => {
+  return [
+    { key: 'new-folder', label: '新建文件夹' },
+    { key: 'rename', label: '重命名' },
+    { key: 'move', label: '移动到' },
+    { key: 'export', label: '导出' },
+    { key: 'import', label: '导入' },
+    { key: 'delete', label: '删除', danger: true },
+  ];
+};
+
+function onExpand(keys: (string | number)[], _info: any) {
+  expandedKeys.value = keys.map(k => String(k));
+}
+
+const handleAction = (payload: { key: string; node: any }) => {
+  console.info('action:', payload);
+};
+
+const reloadTree = () => {
+  expandedKeys.value = ['root'];
+  data.value = [...data.value];
+};
+
+const createFile = () => {
+  const root = data.value[0];
+  const id = `new_${Date.now()}`;
+  (root.children = root.children || []).push({ key: id, title: `新文件_${id.slice(-4)}` });
+  data.value = [...data.value];
+};
+
+const isLeaf = (node: any): boolean => {
+  return !Array.isArray(node.children) || node.children.length === 0;
+};
+
+const isExpanded = (node: any): boolean => {
+  return expandedKeys.value.includes(String(node.key));
+};
+</script>
+<style scoped lang="less">
+.layout-demo {
+  display: flex;
+  gap: 16px;
+}
+
+.right-demo {
+  flex: 1;
+  border: 1px dashed #e5e6eb;
+  padding: 16px;
+  background-color: var(--y-demo-placeholder-bg, rgba(0, 0, 0, 0.03));
+}
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.toolbar__input {
+  flex: 1;
+  min-width: 0;
+}
+
+.toolbar__actions {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.toolbar-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--y-tree-toolbar-icon, rgb(0 0 0 / 65%));
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.toolbar-icon:hover {
+  background-color: var(--y-tree-toolbar-hover-bg, rgb(0 0 0 / 6%));
+  color: var(--y-tree-toolbar-icon-hover, rgb(0 0 0 / 85%));
+}
+
+.toolbar-icon:active {
+  background-color: var(--y-tree-toolbar-active-bg, rgb(0 0 0 / 10%));
+}
+</style>

package/template/.cursor/skills/yss-ui/assets/demos/tree/slot-icon/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div style="width: 320px">
+    <YTree :tree-data="data" default-expand-all :show-icon="true" block-node>
+      <!-- 直传 antdv 的 #icon 插槽（组件已完整透传） -->
+      <template #icon="{ data }">
+        <template v-if="Array.isArray(data?.children) && data.children.length">
+          <FolderOutlined />
+        </template>
+        <template v-else>
+          <FileOutlined />
+        </template>
+      </template>
+    </YTree>
+  </div>
+</template>
+<script setup lang="ts">
+import { YTree } from '@yss-ui/components';
+import { FolderOutlined, FileOutlined } from '@ant-design/icons-vue';
+
+const data = [
+  {
+    key: 'root',
+    title: '显示图标（icon 插槽）',
+    children: [
+      { key: '1', title: '文件-1' },
+      { key: '2', title: '文件-2' },
+      {
+        key: '3',
+        title: '目录',
+        children: [{ key: '3-1', title: '文件-3-1' }],
+      },
+    ],
+  },
+];
+</script>
+<style scoped lang="less"></style>

package/template/.cursor/skills/yss-ui/assets/demos/tree/slot-switcher-icon/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div style="width: 320px">
+    <YTree :tree-data="data" default-expand-all block-node>
+      <!-- 直传 antdv 的 #switcherIcon 插槽（组件已完整透传） -->
+      <template #switcherIcon="{ expanded }">
+        <span style="display: inline-flex; align-items: center">
+          <CaretDownOutlined v-if="expanded" />
+          <CaretRightOutlined v-else />
+        </span>
+      </template>
+    </YTree>
+  </div>
+</template>
+<script setup lang="ts">
+import { YTree } from '@yss-ui/components';
+import { CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons-vue';
+
+const data = [
+  {
+    key: 'root',
+    title: '自定义展开/收起图标',
+    children: [
+      { key: '1', title: '子节点-1' },
+      { key: '2', title: '子节点-2' },
+      {
+        key: '3',
+        title: '子节点-3',
+        children: [{ key: '3-1', title: '子节点-3-1' }],
+      },
+    ],
+  },
+];
+</script>
+<style scoped lang="less"></style>

package/template/.cursor/skills/yss-ui/assets/docs/components/button.md

@@ -0,0 +1,79 @@
+---
+title: Button 按钮
+description: 基于 Ant Design Vue Button 封装的企业级按钮组件
+toc: content
+---
+
+# Button 按钮
+
+基于 Ant Design Vue `Button` 的企业级封装，统一主题与权限能力，提供一致的 API 与用法体验。
+
+## 何时使用
+
+- 标记并触发一个动作（或一组动作）。
+- 需要统一主题色和交互规范。
+- 需要简化权限控制（隐藏/禁用）。
+
+## 代码演示
+
+### 尺寸与块级
+
+<code src="./demos/button/size.vue"></code>
+
+### 加载/禁用/幽灵/危险
+
+<code src="./demos/button/states.vue"></code>
+
+### 权限按钮（localStorage）
+
+统一用 `YButton` 传入 `permissionCode` 即可：
+
+<code src="./demos/button/permission.vue"></code>
+
+<code src="./demos/button/auth-basic.vue"></code>
+
+### 权限下拉（localStorage）
+
+<code src="./demos/button/auth-dropdown.vue"></code>
+
+## API
+
+### YButton Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| theme | `'primary' \| 'success' \| 'warning' \| 'danger'` | `'primary'` | 主题类名扩展，便于统一定制样式（不会改变 AntD 原始外观，需结合 CSS 变量使用）。 |
+| type | `'default' \| 'primary' \| 'dashed' \| 'link' \| 'text'` | `'default'` | 同 AntD Button。 |
+| size | `'small' \| 'middle' \| 'large'` | `'middle'` | 同 AntD Button。 |
+| loading | `boolean \| { delay?: number }` | `false` | 同 AntD Button，支持延迟。 |
+| disabled | `boolean` | `false` | 同 AntD Button。 |
+| danger | `boolean` | `false` | 同 AntD Button。 |
+| ghost | `boolean` | `false` | 同 AntD Button。 |
+| shape | `'circle' \| 'round'` | `-` | 同 AntD Button。 |
+| block | `boolean` | `false` | 同 AntD Button。 |
+| htmlType | `'button' \| 'submit' \| 'reset'` | `'button'` | 同 AntD Button。 |
+| href | `string` | `-` | 透传给 AntD，用作外链（渲染为 `<a>`）。 |
+| target | `string` | `-` | 透传给 AntD，配合 `href` 使用。 |
+| permissionCode | `string` | `-` | 按钮权限码；传入则启用权限逻辑。 |
+| fallback | `'hide' \| 'disable'` | `'hide'` | 无权限时策略：隐藏或禁用。 |
+| modifiers | `Array<'stop' \| 'prevent'>` | `[]` | 点击修饰：阻止冒泡/默认。 |
+
+### YButton Events
+
+| 事件名 | 回调参数 | 说明 |
+| --- | --- | --- |
+| click | `(e: MouseEvent)` | 点击事件（当 `disabled/loading` 时不会触发）。 |
+
+### YButton Slots
+
+| 插槽名 | 说明 |
+| --- | --- |
+| default | 按钮内容。 |
+| icon | 图标插槽（已转发至 AntD `#icon`）。 |
+
+### 与 Ant Design Vue 的对齐清单
+
+- Props：已对齐 AntD Button 常用属性，并新增 `theme`。非声明式属性通过 `$attrs` 透传。
+- Slots：支持默认插槽与 `#icon` 插槽（向下转发至 AntD）。
+- Events：对齐 AntD 的 `click` 行为；`disabled/loading` 下不触发。
+- 跳转能力：支持 `href/target` 透传，渲染为链接按钮。