create-yss-spec 3.3.1 → 3.3.4

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

@@ -1,60 +0,0 @@
-<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/.claude/skills/yss-ui/assets/demos/split-pane/tree-table/style.less

@@ -1,39 +0,0 @@
-.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/.claude/skills/yss-ui/assets/demos/split-pane/tree-table-layout/hooks/useTreeTable.ts

@@ -1,158 +0,0 @@
-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/.claude/skills/yss-ui/assets/demos/split-pane/tree-table-layout/index.vue

@@ -1,88 +0,0 @@
-<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/.claude/skills/yss-ui/assets/demos/split-pane/tree-table-layout/style.less

@@ -1,73 +0,0 @@
-.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/.claude/skills/yss-ui/assets/demos/table/action/index.vue

@@ -1,83 +0,0 @@
-<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/.claude/skills/yss-ui/assets/demos/table/action/style.less

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

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

@@ -1,41 +0,0 @@
-<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/.claude/skills/yss-ui/assets/demos/table/action-slot/index.vue

@@ -1,62 +0,0 @@
-<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/.claude/skills/yss-ui/assets/demos/table/action-slot/style.less

@@ -1,36 +0,0 @@
-.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);
-}