create-yss-spec 2.1.10 → 2.1.13

package/template/.cursor/skills/yss-ui/assets/demos/split-pane/tree-table/index.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { YTree, YSplitPane } from '@yss-ui/components';
+import { initialTreeData as tree } from './constant';
+import './style.less';
+
+defineOptions({ name: 'SplitPaneTreeTableDemo' });
+
+const leftWidth = ref<number>(280);
+const collapsed = ref<boolean>(false);
+
+const onLeftWidthUpdate = (v: number): void => {
+  leftWidth.value = v;
+};
+
+const onToggleChange = (v: boolean): void => {
+  collapsed.value = v;
+};
+
+const getActions = (): Array<{ key: string; label: string; danger?: boolean }> => {
+  return [
+    { key: 'new-folder', label: '新建文件夹' },
+    { key: 'rename', label: '重命名' },
+    { key: 'delete', label: '删除', danger: true },
+  ];
+};
+</script>
+
+<template>
+  <div class="layout">
+    <YSplitPane
+      :initial-width="280"
+      :min-width="200"
+      :max-width="480"
+      collapsible
+      storage-key="demo_split_tree_width"
+      @update:left-width="onLeftWidthUpdate"
+      @toggle="onToggleChange"
+    >
+      <template #left>
+        <YTree :tree-data="tree" :get-node-actions="getActions" />
+      </template>
+      <template #right>
+        <div class="right">
+          <div class="info">
+            <span>左侧宽度：{{ leftWidth }}px</span>
+            <span>{{ collapsed ? '已收起' : '已展开' }}</span>
+          </div>
+          <div class="placeholder">
+            <div class="placeholder__content">右侧内容区域</div>
+          </div>
+        </div>
+      </template>
+    </YSplitPane>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import url('./style.less');
+</style>

package/template/.cursor/skills/yss-ui/assets/demos/split-pane/tree-table/style.less

@@ -0,0 +1,39 @@
+.layout {
+  height: 420px;
+  border: 1px solid var(--y-demo-border, rgb(0 0 0 / 8%));
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  height: 100%;
+}
+
+.info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--y-demo-info-color, rgb(0 0 0 / 65%));
+}
+
+.placeholder {
+  flex: 1;
+  display: grid;
+  place-items: center;
+  border: 1px dashed var(--y-demo-right-border, #e5e6eb);
+  border-radius: 8px;
+  background: var(--y-demo-placeholder-bg, rgb(0 0 0 / 3%));
+}
+
+.placeholder__content {
+  padding: 4px 10px;
+  border-radius: 12px;
+  background: var(--yss-color-primary-5, var(--ant-primary-color-hover, #3177ff));
+  color: var(--y-demo-badge-text, #fff);
+  font-size: 12px;
+}

package/template/.cursor/skills/yss-ui/assets/demos/split-pane/tree-table-layout/hooks/useTreeTable.ts

@@ -0,0 +1,158 @@
+import { ref, reactive } from 'vue';
+import type { YTableColumn, YTableActionConfig } from '@yss-ui/components';
+
+export interface RowVO {
+  id: number;
+  name: string;
+  type: string;
+  host: string;
+  createTime: string;
+  status: number;
+}
+
+export const useTreeTable = () => {
+  // SplitPane state
+  const collapsed = ref(false);
+  const leftWidth = ref(260);
+
+  // Tree state
+  const selectedKeys = ref<string[]>(['1']);
+  const treeData = ref([
+    {
+      key: '1',
+      title: '所有任务流',
+      children: [
+        { key: '1-1', title: 'test' },
+        { key: '1-2', title: '委外管理平台' },
+        { key: '1-3', title: '投资管理演示' },
+        { key: '1-4', title: '数仓演示' },
+        { key: '1-5', title: '数据质量V2' },
+      ],
+    },
+  ]);
+
+  const searchValue = ref('');
+  const onSearch = () => {
+    console.log('Search tree:', searchValue.value);
+  };
+
+  // Table state
+  const loading = ref(false);
+  const searchName = ref('');
+
+  const tableData = ref<RowVO[]>([
+    {
+      id: 1,
+      name: '每日文件获取数量',
+      type: '自定义SQL',
+      host: '14.15.22.11',
+      createTime: '2025-09-10 11:00:00',
+      status: 1,
+    },
+    {
+      id: 2,
+      name: '每日数据接收统计',
+      type: '自定义SQL',
+      host: '14.15.16.21',
+      createTime: '2025-09-10 11:00:00',
+      status: 1,
+    },
+    {
+      id: 3,
+      name: '系统运行状态监控',
+      type: 'Shell脚本',
+      host: '14.15.22.12',
+      createTime: '2025-09-11 09:30:00',
+      status: 0,
+    },
+    {
+      id: 4,
+      name: '核心服务心跳检测',
+      type: 'HTTP检测',
+      host: '14.15.16.22',
+      createTime: '2025-09-11 10:15:00',
+      status: 1,
+    },
+    {
+      id: 5,
+      name: '数据库连接池监控',
+      type: '自定义SQL',
+      host: '14.15.22.13',
+      createTime: '2025-09-12 14:20:00',
+      status: 1,
+    },
+    {
+      id: 6,
+      name: '磁盘空间预警',
+      type: 'Shell脚本',
+      host: '14.15.16.23',
+      createTime: '2025-09-13 16:45:00',
+      status: 1,
+    },
+  ]);
+
+  const columns = ref<YTableColumn[]>([
+    { type: 'checkbox', width: 50, align: 'center' },
+    { field: 'name', title: '监控规则名称', minWidth: 180 },
+    { field: 'type', title: '监控规则类型', width: 120 },
+    { field: 'host', title: '主机地址', width: 140 },
+    { field: 'createTime', title: '创建时间', width: 180 },
+  ]);
+
+  const actionConfig = reactive<YTableActionConfig>({
+    width: 80,
+    align: 'left',
+    fixed: 'right',
+    displayLimit: 2,
+    moreRenderType: 'moreButton',
+    buttons: [
+      {
+        text: '查看',
+        key: 'view',
+        type: 'link',
+        clickFn: ({ row }: any) => alert(`查看：${row.name}`),
+        disabledFn: ({ rowIndex }: any) => rowIndex % 2 === 0,
+      },
+    ],
+  });
+
+  const pagination = reactive({
+    total: 1002,
+    currentPage: 1,
+    pageSize: 20,
+  });
+
+  const handlePageChange = ({ currentPage, pageSize }: any) => {
+    pagination.currentPage = currentPage;
+    pagination.pageSize = pageSize;
+    // Simulate loading
+    loading.value = true;
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  };
+
+  const onRefresh = () => {
+    loading.value = true;
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  };
+
+  return {
+    collapsed,
+    leftWidth,
+    selectedKeys,
+    treeData,
+    searchValue,
+    onSearch,
+    loading,
+    searchName,
+    tableData,
+    columns,
+    pagination,
+    handlePageChange,
+    onRefresh,
+    actionConfig,
+  };
+};

package/template/.cursor/skills/yss-ui/assets/demos/split-pane/tree-table-layout/index.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { YSplitPane, YTree, YTable, YButton } from '@yss-ui/components';
+import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+import { Input } from 'ant-design-vue';
+import { useTreeTable } from './hooks/useTreeTable';
+import './style.less';
+
+defineOptions({ name: 'DemoSplitPaneTreeTableLayout' });
+
+const {
+  collapsed,
+  leftWidth,
+  treeData,
+  selectedKeys,
+  loading,
+  searchName,
+  tableData,
+  columns,
+  pagination,
+  handlePageChange,
+  actionConfig,
+} = useTreeTable();
+</script>
+
+<template>
+  <div class="layout-split-pane-demo">
+    <YSplitPane
+      v-model:collapsed="collapsed"
+      v-model:left-width="leftWidth"
+      :min-width="200"
+      :max-width="400"
+      storage-key="demo-split-tree-layout"
+    >
+      <!-- 左侧树 -->
+      <template #left>
+        <div class="left-pane-content">
+          <div class="tree-title">资源树</div>
+          <div class="tree-wrapper">
+            <YTree v-model:selected-keys="selectedKeys" :tree-data="treeData" block-node default-expand-all />
+          </div>
+        </div>
+      </template>
+
+      <!-- 右侧表格 -->
+      <template #right>
+        <div class="right-pane-content">
+          <!-- 顶部工具栏 -->
+          <div class="table-toolbar">
+            <div class="filter-area">
+              <Input v-model:value="searchName" placeholder="请输入监控规则名称" allow-clear />
+            </div>
+            <div class="action-area">
+              <YButton type="primary">
+                <template #icon><PlusOutlined /></template>
+                添加监控规则
+              </YButton>
+              <YButton danger>
+                <template #icon><DeleteOutlined /></template>
+                删除
+              </YButton>
+            </div>
+          </div>
+
+          <!-- 表格主体 -->
+          <div class="table-wrapper">
+            <YTable
+              v-model:pagination="pagination"
+              :data="tableData"
+              :columns="columns"
+              :loading="loading"
+              :action-config="actionConfig"
+              border
+              height="100%"
+              show-overflow
+              :checkbox-config="{ checkField: 'checked' }"
+              @page-change="handlePageChange"
+            >
+            </YTable>
+          </div>
+        </div>
+      </template>
+    </YSplitPane>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import './style.less';
+</style>

package/template/.cursor/skills/yss-ui/assets/demos/split-pane/tree-table-layout/style.less

@@ -0,0 +1,73 @@
+.layout-split-pane-demo {
+  height: 500px;
+  border: 1px solid var(--color-border, #e8e8e8);
+
+  // Tree 侧边栏样式
+  .left-pane-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+
+    .tree-title {
+      font-weight: 600;
+      margin-bottom: 12px;
+      padding: 0 4px;
+      font-size: 14px;
+    }
+
+    .tree-wrapper {
+      flex: 1;
+      overflow-y: auto;
+    }
+  }
+
+  // 右侧表格区域样式
+  .right-pane-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    background-color: var(--color-bg-container, #fff);
+
+    .table-toolbar {
+      margin-bottom: 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+
+      .filter-area {
+        display: flex;
+        gap: 12px;
+        flex: 1;
+        max-width: 400px;
+      }
+
+      .action-area {
+        display: flex;
+        gap: 8px;
+      }
+    }
+
+    .table-wrapper {
+      flex: 1;
+      min-height: 0; // 关键：让 flex items 正确处理 overflow
+    }
+  }
+}
+
+.action-link {
+  color: var(--yss-color-primary-5, var(--ant-primary-color-hover, #3177ff));
+  cursor: pointer;
+  margin-right: 12px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+}

package/template/.cursor/skills/yss-ui/assets/demos/table/action/index.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { YTable, type YTableActionConfig, type YTableColumn } from '@yss-ui/components';
+import { reactive, ref } from 'vue';
+import './style.less';
+
+defineOptions({ name: 'DemoTableAction' });
+
+const pagination = ref({ current: 1, pageSize: 5, total: 0, showSizeChanger: true });
+
+const columns = reactive<YTableColumn[]>([
+  { type: 'seq' as const, title: '序号', width: 60, align: 'center' as const },
+  { field: 'name', title: '姓名', width: 120 },
+  { field: 'age', title: '年龄', width: 80, align: 'center' as const },
+  { field: 'gender', title: '性别', width: 80, align: 'center' as const },
+]);
+
+const tableData = ref([
+  { _X_ROW_KEY: '1', name: '张三', age: 28, gender: '男', isAudt: false },
+  { _X_ROW_KEY: '2', name: '李四', age: 22, gender: '男', isAudt: true },
+  { _X_ROW_KEY: '3', name: '王五', age: 26, gender: '女', isAudt: false },
+  { _X_ROW_KEY: '4', name: '赵六', age: 30, gender: '男', isAudt: false },
+]);
+
+const actionConfig = reactive<YTableActionConfig>({
+  width: 180,
+  align: 'left',
+  fixed: 'right',
+  displayLimit: 2,
+  moreRenderType: 'moreButton',
+  buttons: [
+    {
+      text: '查看',
+      key: 'view',
+      type: 'link',
+      clickFn: ({ row }: any) => alert(`查看：${row.name}`),
+      disabledFn: ({ rowIndex }: any) => rowIndex % 2 === 0,
+    },
+    {
+      text: '编辑',
+      key: 'hide',
+      type: 'text',
+      hideFn: ({ rowIndex }: any) => rowIndex % 2 === 0,
+      clickFn: ({ row }: any) => alert(`隐藏：${row.name}`),
+    },
+    {
+      text: '运行',
+      key: 'hide2',
+      type: 'text',
+      clickFn: ({ row }: any) => alert(`运行：${row.name}`),
+    },
+    {
+      text: '删除',
+      key: 'delete',
+      type: 'text',
+      isConfirm: true,
+      confirmProps: { title: '是否确认删除此条数据？', needLoading: true },
+      clickFn: async ({ row }: any, _btn: any, { hideLoading, close }: any) => {
+        await new Promise(r => setTimeout(r, 1000));
+        const idx = tableData.value.findIndex(i => i._X_ROW_KEY === row._X_ROW_KEY);
+        if (idx > -1) tableData.value.splice(idx, 1);
+        hideLoading();
+        close();
+        alert('删除成功');
+      },
+    },
+  ],
+});
+</script>
+
+<template>
+  <div class="demo-container">
+    <YTable
+      v-model:pagination="pagination"
+      :data="tableData"
+      :columns="columns"
+      :pageable="true"
+      :action-config="actionConfig"
+      :show-action-column="true"
+    />
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/table/action/style.less

@@ -0,0 +1,3 @@
+.demo-container {
+  padding: 16px;
+}

package/template/.cursor/skills/yss-ui/assets/demos/table/action-auth/index.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { YTable, type YTableActionConfig } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoTableActionAuth' });
+
+const data = ref([
+  { id: 1, name: '张三' },
+  { id: 2, name: '李四' },
+]);
+
+const columns = [
+  { field: 'id', title: 'ID', width: 80 },
+  { field: 'name', title: '姓名' },
+];
+
+const actionConfig: YTableActionConfig = {
+  width: 160,
+  buttons: [
+    { key: 'view', text: '查看' },
+    { key: 'edit', text: '编辑', permissionCode: 'r_security-m_security_datamask-b_datamask_add' },
+    { key: 'del', text: '删除', permissionCode: 'DELETE', fallback: 'disable', isConfirm: true, clickFn: onDelete },
+  ],
+};
+
+async function onDelete(scope: any) {
+  // eslint-disable-next-line no-console
+  console.log('[action-auth] 删除', scope);
+}
+
+// 模拟权限：
+// localStorage.setItem('auth_btns', JSON.stringify([
+//   { btnCode:'EDIT', btnName:'编辑' }
+// ]))
+</script>
+
+<template>
+  <YTable :data="data" :columns="columns" :action-config="actionConfig" />
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/table/action-slot/index.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { YTable, type YTableColumn } from '@yss-ui/components';
+import { reactive, ref } from 'vue';
+import './style.less';
+
+defineOptions({ name: 'DemoTableActionSlot' });
+
+const pagination = ref({
+  current: 1,
+  pageSize: 5,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  pageSizeOptions: ['5', '10', '20', '50'],
+});
+
+const columns = reactive<YTableColumn[]>([
+  { type: 'seq' as const, title: '序号', width: 60, align: 'center' as const },
+  { field: 'name', title: '姓名' },
+  { field: 'role', title: '角色' },
+  { field: 'status', title: '备注', align: 'center' as const },
+  { field: 'action', title: '操作', width: 100, align: 'center' as const, fixed: 'right' as const },
+]);
+
+const tableData = ref([
+  { name: '张三', role: '前端工程师', status: 1, createTime: '2024-01-15 10:30:00' },
+  { name: '李四', role: '产品经理', status: 1, createTime: '2024-01-16 09:20:00' },
+  { name: '王五', role: 'UI 设计师', status: 0, createTime: '2024-01-17 14:15:00' },
+  { name: '赵六', role: '后端工程师', status: 1, createTime: '2024-01-18 11:45:00' },
+  { name: '孙七', role: '测试工程师', status: 1, createTime: '2024-01-19 16:20:00' },
+]);
+
+const onView = (row: any) => {
+  alert(`查看：${row.name}`);
+};
+
+const onEdit = (row: any, rowIndex: number) => {
+  alert(`编辑第 ${rowIndex + 1} 行：${row.name}`);
+};
+
+const onDelete = (row: any, rowIndex: number) => {
+  if (confirm(`确定删除 ${row.name} 吗？`)) {
+    tableData.value.splice(rowIndex, 1);
+    alert('删除成功');
+  }
+};
+</script>
+
+<template>
+  <div class="demo-container">
+    <YTable v-model:pagination="pagination" :data="tableData" :columns="columns" :pageable="true">
+      <!-- 仅通过插槽自定义操作列：不传 actionConfig，不使用 type:'action' -->
+      <template #action="{ row, rowIndex }">
+        <button class="demo-btn demo-btn-link" @click="onView(row)">查看</button>
+        <button class="demo-btn demo-btn-link" @click="onEdit(row, rowIndex)">编辑</button>
+        <button class="demo-btn demo-btn-danger" @click="onDelete(row, rowIndex)">删除</button>
+      </template>
+    </YTable>
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/table/action-slot/style.less

@@ -0,0 +1,36 @@
+.demo-container {
+  padding: 16px;
+}
+
+.demo-btn {
+  padding: 4px 12px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s;
+}
+
+.demo-btn-link {
+  border: none;
+  background: none;
+  color: var(--primary-color, #3371ff);
+  padding: 4px 8px;
+}
+
+.demo-btn-link:hover {
+  color: color-mix(in oklab, var(--primary-color, #3371ff) 85%, white);
+}
+
+.demo-btn-danger {
+  border: none;
+  background: none;
+  color: var(--danger-color, #ff4d4f);
+  padding: 4px 8px;
+  margin-left: 8px;
+}
+
+.demo-btn-danger:hover {
+  color: color-mix(in oklab, var(--danger-color, #ff4d4f) 85%, white);
+}