create-yss-spec 3.0.0 → 3.1.0

package/template/.hermes/skills/yss-ui/assets/demos/table/column-custom-search/style.less

@@ -1,48 +0,0 @@
-.demo-container {
-  padding: 20px;
-}
-
-.vxe-table-filter-header {
-  padding: 8px;
-  border-bottom: 1px solid var(--vxe-ui-border-color, #e8eaec);
-}
-
-.vxe-table-filter-body {
-  max-height: 240px;
-  overflow-y: auto;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.vxe-table-filter-option {
-  padding: 6px 12px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: var(--vxe-ui-layout-hover-background-color, #f5f7fa);
-  }
-
-  .filter-option-text {
-    display: inline-block;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: middle;
-  }
-
-  /* 让复选框标签占满一行并可缩小，便于文本省略号生效 */
-  .ant-checkbox-wrapper {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-
-  /* 文本容器允许收缩，触发省略 */
-  .ant-checkbox-wrapper > span:last-child {
-    flex: 1;
-    min-width: 0;
-  }
-}

package/template/.hermes/skills/yss-ui/assets/demos/table/drag/index.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { YTable } from '@yss-ui/components';
-import { ref } from 'vue';
-
-defineOptions({ name: 'DemoTableDrag' });
-
-const columns = [
-  { type: 'seq' as const, title: '序号', width: 60, align: 'center' as const },
-  { title: '姓名', field: 'name' },
-  { title: '年龄', field: 'age' },
-];
-
-const tableData = ref([
-  { _X_ROW_KEY: '1', name: 'Name1', age: 23 },
-  { _X_ROW_KEY: '2', name: 'Name2', age: 22 },
-  { _X_ROW_KEY: '3', name: 'Name3', age: 18 },
-  { _X_ROW_KEY: '4', name: 'Name4', age: 20 },
-]);
-
-const handleDragEnd = (rows: any[]) => {
-  // eslint-disable-next-line no-console
-  console.log(
-    '拖拽后顺序：',
-    rows.map(r => r.name)
-  );
-};
-</script>
-
-<template>
-  <div style="padding: 12px">
-    <YTable
-      v-model:data="tableData"
-      :columns="columns"
-      :row-dragable="true"
-      :row-config="{ drag: true }"
-      :pageable="false"
-      @row-dragend="handleDragEnd"
-    />
-  </div>
-</template>
-
-<style scoped></style>

package/template/.hermes/skills/yss-ui/assets/demos/table/expand/action-expand.vue

@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { message } from 'ant-design-vue';
-import { YButton, YTable, type YTableColumn } from '@yss-ui/components';
-
-defineOptions({ name: 'DemoTableActionExpand' });
-
-const yTableRef = ref();
-
-const columns: YTableColumn[] = [
-  { type: 'expand', width: 1 }, // 必不可少的开启展开行内置核心列
-  { type: 'seq', width: 60, title: '序号', align: 'center' },
-  { title: '任务名称', field: 'name' },
-  { title: '状态', field: 'status' },
-  { title: '执行人', field: 'executor' },
-  { title: '操作', field: 'action', width: 140 },
-];
-
-// 模拟表格数据
-interface TaskItem {
-  id: string;
-  name: string;
-  status: string;
-  executor: string;
-  _btnLoading?: boolean; // 新增：控制按钮 Loading
-  details?: any[];
-}
-
-const tableData = ref<TaskItem[]>([
-  { id: '1', name: '数据同步任务', status: '成功', executor: 'daoming' },
-  { id: '2', name: '报表生成任务', status: '失败', executor: 'yancong' },
-  { id: '3', name: '日志清理任务', status: '待执行', executor: 'zhangsan' },
-]);
-
-// 操作列的自定义事件
-const handleLogClick = (row: any) => {
-  message.info(`查看任务日志: ${row.name}`);
-};
-
-const handleStepClick = async (row: any) => {
-  const tableInst = yTableRef.value?.getTableInstance();
-  if (!tableInst) return;
-
-  // 如果已经展开了，直接切换折叠状态
-  if (tableInst.isExpandByRow(row)) {
-    tableInst.setRowExpand(row, false);
-    return;
-  }
-
-  // 没展开且已有数据，直接展开
-  if (row.details && row.details.length > 0) {
-    tableInst.setRowExpand(row, true);
-    return;
-  }
-
-  const target = tableData.value.find(item => item.id === row.id);
-  if (target) {
-    target._btnLoading = true;
-    try {
-      const res = await fetchStepDetails(target.id);
-      target.details = res || [];
-      // 请求完成，展开行
-      tableInst.setRowExpand(row, true);
-    } catch (e) {
-      console.error(e);
-      target.details = [];
-    } finally {
-      target._btnLoading = false;
-    }
-  }
-};
-
-// 模拟异步获取步骤详情的方法
-const fetchStepDetails = (id: string): Promise<any[]> => {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      // 模拟没有数据的情况
-      if (id === '1') {
-        resolve([]);
-      } else {
-        resolve([
-          { step: '步骤一：数据抽取', time: '2023-11-20 10:00:00', status: '成功' },
-          { step: '步骤二：数据清洗', time: '2023-11-20 10:05:00', status: '成功' },
-          { step: '步骤三：数据入库', time: '2023-11-20 10:10:00', status: '正在执行' },
-        ]);
-      }
-    }, 2000); // 延长到 2000ms 更容易看清加载状态
-  });
-};
-
-// 展开行触发事件 (仅用于记录或额外控制，因为请求已在按钮里处理)
-const onToggleRowExpand = async () => {
-  // 置空即可，不需要在这里做请求
-};
-</script>
-
-<template>
-  <div style="padding: 12px">
-    <YTable
-      ref="yTableRef"
-      :columns="columns"
-      :data="tableData"
-      :pageable="false"
-      :row-config="{ keyField: 'id' }"
-      :auto-flex-column="false"
-      :expand-config="{ accordion: true, iconOpen: ' ', iconClose: ' ' }"
-      @toggle-row-expand="onToggleRowExpand"
-    >
-      <!-- 使用自定义操作列插槽接管按钮渲染 -->
-      <template #action="{ row }">
-        <YButton type="link" size="small" @click="handleLogClick(row)">日志</YButton>
-        <YButton
-          type="link"
-          size="small"
-          :loading="tableData.find(item => item.id === row.id)?._btnLoading"
-          @click="handleStepClick(row)"
-        >
-          步骤
-        </YButton>
-      </template>
-
-      <!-- hide-default-icon 通过将 iconOpen 和 iconClose 设为空字符串实现 -->
-      <template #expand-row="{ row }">
-        <div style="padding: 16px 24px; background: #fafafa">
-          <YTable
-            :columns="[
-              { type: 'seq', width: 60, title: '序号', align: 'center' },
-              { title: '执行步骤', field: 'step' },
-              { title: '执行时间', field: 'time' },
-              { title: '状态', field: 'status' },
-            ]"
-            :data="tableData.find(item => item.id === row.id)?.details || []"
-            :pageable="false"
-            :auto-flex-column="false"
-          />
-        </div>
-      </template>
-    </YTable>
-  </div>
-</template>
-
-<style scoped></style>

package/template/.hermes/skills/yss-ui/assets/demos/table/expand/index.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { YTable } from '@yss-ui/components';
-import { ref } from 'vue';
-
-defineOptions({ name: 'DemoTableExpand' });
-
-const columns: any[] = [
-  { type: 'seq' as const, width: 60, title: '序号', align: 'center' as const },
-  { type: 'expand' as const, width: 60, title: '展开' },
-  { title: '姓名', field: 'name' },
-  { title: '年龄', field: 'age' },
-  { title: '性别', field: 'sex' },
-];
-
-const tableData = ref([
-  { _X_ROW_KEY: '1', name: '张三', sex: '男', age: 28 },
-  { _X_ROW_KEY: '2', name: '李四', sex: '男', age: 22 },
-]);
-</script>
-
-<template>
-  <div style="padding: 12px">
-    <YTable :columns="columns" :data="tableData" :pageable="false" :expand-config="{ accordion: true }">
-      <template #expand-row="{ row }">
-        <div style="padding: 12px 16px; background: #fafafa">
-          <div>姓名：{{ row.name }}</div>
-          <div>年龄：{{ row.age }}</div>
-          <div>性别：{{ row.sex }}</div>
-        </div>
-      </template>
-    </YTable>
-  </div>
-</template>
-
-<style scoped></style>

package/template/.hermes/skills/yss-ui/assets/demos/table/filter-async/index.vue

@@ -1,93 +0,0 @@
-<script setup lang="ts">
-import { YTable, type YTableColumn } from '@yss-ui/components';
-import { onMounted, ref } from 'vue';
-
-defineOptions({ name: 'DemoTableFilterAsync' });
-
-type Row = { _X_ROW_KEY: string; name: string; age: number; sex: '0' | '1'; city: string };
-
-const tableData = ref<Row[]>([
-  { _X_ROW_KEY: '1', name: 'name1', age: 18, sex: '1', city: 'bj' },
-  { _X_ROW_KEY: '2', name: 'name2', age: 22, sex: '0', city: 'sh' },
-  { _X_ROW_KEY: '3', name: 'tom', age: 25, sex: '1', city: 'gz' },
-  { _X_ROW_KEY: '4', name: 'jerry', age: 19, sex: '0', city: 'sz' },
-]);
-
-const tableRef = ref<any>();
-
-const columns = ref<YTableColumn[]>([
-  { title: '姓名', field: 'name', filterable: true, filters: [{ data: '' }] },
-  {
-    title: '年龄≥',
-    field: 'age',
-    filterable: true,
-    filterMultiple: true,
-    filters: [
-      { label: '全部', value: '' },
-      { label: '18-25', value: '18-25' },
-      { label: '26-35', value: '26-35' },
-      { label: '36-45', value: '36-45' },
-    ],
-    filterMethod: ({ option, cellValue }: any) => {
-      if (!option?.value) return true;
-      const [min, max] = option.value.split('-').map(Number);
-      return cellValue >= min && cellValue <= max;
-    },
-  },
-  {
-    title: '城市(接口 filters)',
-    field: 'city',
-    isTransform: true,
-    filterable: true,
-    filterMultiple: true,
-    filters: [],
-  },
-]);
-
-onMounted(() => {
-  setTimeout(() => {
-    const remoteFilters = [
-      { label: '北京', value: 'bj' },
-      { label: '上海', value: 'sh' },
-      { label: '广州', value: 'gz' },
-      { label: '深圳', value: 'sz' },
-    ];
-    columns.value = columns.value.map(c => (c.field === 'city' ? { ...c, filters: remoteFilters } : c));
-  }, 300);
-});
-
-const optionsMap = {
-  city: [
-    { cityName: '北京', cityCode: 'bj' },
-    { cityName: '上海', cityCode: 'sh' },
-    { cityName: '广州', cityCode: 'gz' },
-    { cityName: '深圳', cityCode: 'sz' },
-  ],
-};
-
-const markActive = (option: any) => {
-  const $table = tableRef.value?.getTableInstance?.();
-  if ($table) $table.updateFilterOptionStatus(option, !!option.data);
-};
-</script>
-
-<template>
-  <div style="padding: 12px">
-    <YTable ref="tableRef" :columns="columns" :data="tableData" :pageable="false" :options-map="optionsMap">
-      <template #name-filter="{ column }">
-        <div style="padding: 8px 12px; width: 220px">
-          <input
-            v-for="(option, index) in column.filters"
-            :key="index"
-            v-model="option.data"
-            placeholder="输入姓名关键字"
-            style="width: 100%; height: 28px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px"
-            @input="markActive(option)"
-          />
-        </div>
-      </template>
-    </YTable>
-  </div>
-</template>
-
-<style scoped></style>

package/template/.hermes/skills/yss-ui/assets/demos/table/filter-auto/index.vue

@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import { YTable, type YTableColumn } from '@yss-ui/components';
-import { ref } from 'vue';
-
-defineOptions({ name: 'DemoTableFilterAuto' });
-
-type Row = { _X_ROW_KEY: string; name: string; age: number; sex: '0' | '1'; status: string };
-
-const tableData = ref<Row[]>([
-  { _X_ROW_KEY: '1', name: 'name1', age: 18, sex: '1', status: 'enabled' },
-  { _X_ROW_KEY: '2', name: 'name2', age: 22, sex: '0', status: 'disabled' },
-  { _X_ROW_KEY: '3', name: 'tom', age: 25, sex: '1', status: 'enabled' },
-  { _X_ROW_KEY: '4', name: 'jerry', age: 19, sex: '0', status: 'disabled' },
-]);
-
-const columns = ref<YTableColumn[]>([
-  {
-    title: '姓名',
-    field: 'name',
-    filterable: true,
-    filters: [{ data: '' }],
-    filterMethod: ({ option, cellValue }: any) => {
-      const kw = String(option?.data || '').trim();
-      if (!kw) return true;
-      return String(cellValue || '')
-        .toLowerCase()
-        .includes(kw.toLowerCase());
-    },
-  },
-  {
-    title: '年龄≥',
-    field: 'age',
-    filterable: true,
-    filters: [{ data: '' }],
-    filterMethod: ({ option, cellValue }: any) => {
-      const v = Number(option?.data);
-      if (!option?.data && option?.data !== 0) return true;
-      return Number(cellValue) >= v;
-    },
-  },
-  {
-    title: '状态',
-    field: 'status',
-    filterable: true,
-    filterMultiple: true,
-    filters: [
-      { label: '启用', value: 'enabled' },
-      { label: '禁用', value: 'disabled' },
-    ],
-    filterMethod: ({ values, cellValue }: any) => {
-      if (!values || values.length === 0) return true;
-      return values.includes(String(cellValue));
-    },
-  },
-]);
-
-const optionsMap = {};
-
-const tableRef = ref<any>();
-const markActive = (option: any) => {
-  const $table = tableRef.value?.getTableInstance?.();
-  if ($table) $table.updateFilterOptionStatus(option, !!option.data);
-};
-</script>
-
-<template>
-  <div style="padding: 12px">
-    <YTable ref="tableRef" :columns="columns" :data="tableData" :pageable="false" :options-map="optionsMap">
-      <template #name-filter="{ column }">
-        <div style="padding: 8px 12px; width: 220px">
-          <input
-            v-for="(option, index) in column.filters"
-            :key="index"
-            v-model="option.data"
-            :placeholder="column.meta?.placeholder || '请输入关键词'"
-            style="width: 100%; height: 28px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px"
-            @input="markActive(option)"
-          />
-        </div>
-      </template>
-
-      <template #age-filter="{ column }">
-        <div style="padding: 8px 12px; width: 220px">
-          <input
-            v-for="(option, index) in column.filters"
-            :key="index"
-            v-model="option.data"
-            type="number"
-            :placeholder="column.meta?.placeholder || '请输入数值'"
-            style="width: 100%; height: 28px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px"
-            @input="markActive(option)"
-          />
-        </div>
-      </template>
-    </YTable>
-  </div>
-</template>
-
-<style scoped></style>

package/template/.hermes/skills/yss-ui/assets/demos/table/filter-custom/index.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { YTable, type YTableColumn } from '@yss-ui/components';
-import { ref } from 'vue';
-
-defineOptions({ name: 'DemoTableFilterCustom' });
-
-const tableData = ref([
-  { _X_ROW_KEY: '1', name: 'Alice', email: 'alice@test.com' },
-  { _X_ROW_KEY: '2', name: 'Bob', email: 'bob@test.com' },
-  { _X_ROW_KEY: '3', name: 'Cindy', email: 'cindy@test.com' },
-  { _X_ROW_KEY: '4', name: 'David', email: 'david@test.com' },
-]);
-
-const tableRef = ref<any>();
-
-const columns = ref<YTableColumn[]>([
-  {
-    field: 'name',
-    title: '姓名(自定义筛选)',
-    filterable: true,
-    filters: [{ data: '' }],
-    filterMethod: ({ option, cellValue }: any) => {
-      const kw = String(option?.data || '').trim();
-      if (!kw) return true;
-      return String(cellValue || '')
-        .toLowerCase()
-        .includes(kw.toLowerCase());
-    },
-  },
-  {
-    field: 'email',
-    title: '邮箱',
-    filterable: true,
-    filters: [{ data: '' }],
-    filterMethod: ({ option, cellValue }: any) => {
-      const kw = String(option?.data || '').trim();
-      if (!kw) return true;
-      return String(cellValue || '')
-        .toLowerCase()
-        .includes(kw.toLowerCase());
-    },
-  },
-]);
-
-const changeFilterEvent = (option: any) => {
-  const $table = tableRef.value?.getTableInstance?.();
-  if ($table) {
-    $table.updateFilterOptionStatus(option, !!option.data);
-  }
-};
-</script>
-
-<template>
-  <div style="padding: 12px">
-    <YTable ref="tableRef" :columns="columns" :data="tableData" :pageable="false">
-      <template #filter="{ column }">
-        <div style="padding: 8px 12px; width: 220px">
-          <input
-            v-for="(option, index) in column.filters"
-            :key="index"
-            v-model="option.data"
-            placeholder="输入姓名关键字"
-            style="width: 100%; height: 28px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px"
-            @input="changeFilterEvent(option)"
-          />
-        </div>
-      </template>
-    </YTable>
-  </div>
-</template>
-
-<style scoped></style>

package/template/.hermes/skills/yss-ui/assets/demos/table/filter-local/index.vue

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { YTable, type YTableColumn } from '@yss-ui/components';
-import { ref } from 'vue';
-
-defineOptions({ name: 'DemoTableFilterLocal' });
-
-const tableData = ref([
-  { _X_ROW_KEY: '1', name_item_nm: 'name1', age: 18, sex: '1' },
-  { _X_ROW_KEY: '2', name_item_nm: 'name2', age: 22, sex: '0' },
-  { _X_ROW_KEY: '3', name_item_nm: 'tom', age: 25, sex: '1' },
-  { _X_ROW_KEY: '4', name_item_nm: 'jerry', age: 19, sex: '0' },
-]);
-
-const tableRef = ref<any>();
-
-const columns = ref<YTableColumn[]>([
-  {
-    title: '姓名',
-    field: 'name_item_nm',
-    filterable: true,
-    filters: [{ data: '' }],
-    filterMethod: ({ option, cellValue }: any) => {
-      const keyword = option?.data ?? '';
-      if (!keyword) return true;
-      return String(cellValue || '')
-        .toLowerCase()
-        .includes(String(keyword).toLowerCase());
-    },
-  },
-  {
-    title: '年龄≥',
-    field: 'age',
-    filterable: true,
-    filters: [{ data: '' }],
-    filterMethod: ({ option, cellValue }: any) => {
-      const v = Number(option?.data);
-      if (!option?.data && option?.data !== 0) return true;
-      return Number(cellValue) >= v;
-    },
-  },
-  {
-    title: '性别',
-    field: 'sex',
-    isTransform: true,
-    filterable: true,
-    filterMultiple: true,
-    filters: [
-      { label: '男', value: '1' },
-      { label: '女', value: '0' },
-    ],
-    filterMethod: ({ values, cellValue }: any) => {
-      if (!values || values.length === 0) return true;
-      return values.includes(String(cellValue));
-    },
-    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
-  },
-]);
-
-const optionsMap = {
-  sex: [
-    { dictName: '男', dictValue: '1' },
-    { dictName: '女', dictValue: '0' },
-  ],
-};
-
-const changeFilterEvent = (option: any) => {
-  const $table = tableRef.value?.getTableInstance?.();
-  if ($table) $table.updateFilterOptionStatus(option, !!option.data);
-};
-</script>
-
-<template>
-  <div style="padding: 12px">
-    <YTable
-      ref="tableRef"
-      :columns="columns"
-      :data="tableData"
-      :pageable="false"
-      :options-map="optionsMap"
-      :filter-config="{ iconNone: 'vxe-icon-search', iconMatch: 'vxe-icon-search' }"
-    >
-      <template #name_item_nm-filter="{ column }">
-        <div style="padding: 8px 12px; width: 220px">
-          <input
-            v-for="(option, index) in column.filters"
-            :key="index"
-            v-model="option.data"
-            placeholder="输入姓名关键字"
-            style="width: 100%; height: 28px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px"
-            @input="changeFilterEvent(option)"
-          />
-        </div>
-      </template>
-
-      <template #age-filter="{ column }">
-        <div style="padding: 8px 12px; width: 220px">
-          <input
-            v-for="(option, index) in column.filters"
-            :key="index"
-            v-model="option.data"
-            type="number"
-            placeholder="输入最小年龄"
-            style="width: 100%; height: 28px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px"
-            @input="changeFilterEvent(option)"
-          />
-        </div>
-      </template>
-    </YTable>
-  </div>
-</template>
-
-<style scoped></style>