create-yss-spec 3.3.1 → 3.3.3

package/template/.claude/skills/yss-ui/assets/demos/card/header-extra/style.less

@@ -1,124 +0,0 @@
-.header-extra-demo {
-  .resource-card {
-    .metrics-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: var(--spacing-lg, 24px);
-
-      .metric-item {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--spacing-md, 16px);
-
-        .metric-icon {
-          width: 48px;
-          height: 48px;
-          border-radius: var(--border-radius-base, 6px);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-
-          /deep/ .anticon {
-            font-size: 24px;
-          }
-
-          &.metric-normal {
-            background: var(--success-color-background, #f6ffed);
-
-            /deep/ .anticon {
-              color: var(--success-color, #52c41a);
-            }
-          }
-
-          &.metric-warning {
-            background: var(--warning-color-background, #fff7e6);
-
-            /deep/ .anticon {
-              color: var(--warning-color, #faad14);
-            }
-          }
-
-          &.metric-error {
-            background: var(--error-color-background, #fff2f0);
-
-            /deep/ .anticon {
-              color: var(--error-color, #ff4d4f);
-            }
-          }
-        }
-
-        .metric-content {
-          flex: 1;
-
-          .metric-trend {
-            display: flex;
-            align-items: center;
-            gap: var(--spacing-xs, 4px);
-            margin-top: var(--spacing-xs, 4px);
-            font-size: 12px;
-
-            .trend-up {
-              color: var(--error-color, #ff4d4f);
-            }
-
-            .trend-down {
-              color: var(--success-color, #52c41a);
-            }
-
-            .trend-text {
-              color: var(--text-color-secondary, #999);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .stat-item {
-    text-align: center;
-    padding: var(--spacing-md, 16px);
-
-    .stat-value {
-      font-size: 28px;
-      font-weight: 600;
-      line-height: 1;
-      margin-bottom: var(--spacing-xs, 8px);
-    }
-
-    .stat-label {
-      font-size: 14px;
-      font-weight: 500;
-      margin-bottom: var(--spacing-xs, 4px);
-      color: var(--text-color, rgb(0 0 0 / 85%));
-    }
-
-    .stat-desc {
-      font-size: 12px;
-      color: var(--text-color-secondary, #999);
-    }
-  }
-}
-
-/* 响应式优化 */
-@media (max-width: 768px) {
-  .header-extra-demo {
-    .resource-card .metrics-grid {
-      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-      gap: var(--spacing-md, 16px);
-
-      .metric-item .metric-icon {
-        width: 40px;
-        height: 40px;
-
-        /deep/ .anticon {
-          font-size: 20px;
-        }
-      }
-    }
-
-    .stat-item .stat-value {
-      font-size: 20px;
-    }
-  }
-}

package/template/.claude/skills/yss-ui/assets/demos/card/layout-metrics/constants.ts

@@ -1,61 +0,0 @@
-import type { EChartsCoreOption } from 'echarts';
-
-/** CPU仪表盘配置 */
-export const createCpuGaugeOption = (): EChartsCoreOption => ({
-  series: [
-    {
-      type: 'gauge',
-      progress: { show: true },
-      center: ['50%', '55%'], // 可以微调Y轴位置，让其在垂直方向上更居中
-      radius: '85%', // 增大半径，使仪表盘更大
-      detail: { valueAnimation: true, formatter: '{value}%' },
-      data: [{ value: 65, name: '处理器' }],
-    },
-  ],
-});
-
-/** 磁盘仪表盘配置 */
-export const createDiskGaugeOption = (): EChartsCoreOption => ({
-  series: [
-    {
-      type: 'gauge',
-      progress: { show: true },
-      center: ['50%', '55%'], // 可以微调Y轴位置，让其在垂直方向上更居中
-      radius: '85%', // 增大半径，使仪表盘更大
-      itemStyle: {
-        color: '#5cb85c',
-        shadowColor: 'rgba(92,184,92,0.45)',
-        shadowBlur: 10,
-        shadowOffsetX: 2,
-        shadowOffsetY: 2,
-      },
-      detail: { valueAnimation: true, formatter: '{value}%' },
-      data: [
-        {
-          value: 57,
-          name: '内存',
-        },
-      ],
-    },
-  ],
-});
-
-/** 线程统计数据 */
-export const THREAD_STATS_DATA = {
-  total: 95,
-  details: [
-    { label: '定时等待', value: 20, color: '#ff6b6b' },
-    { label: '新线程', value: 20, color: '#4ecdc4' },
-    { label: '运行中', value: 20, color: '#45b7d1' },
-    { label: '等待', value: 20, color: '#f9ca24' },
-    { label: '阻塞', value: 20, color: '#f0932b' },
-    { label: '中断', value: 20, color: '#eb4d4b' },
-  ],
-};
-
-/** 磁盘使用信息 */
-export const DISK_USAGE_INFO = {
-  used: 23,
-  total: 100,
-  unit: 'GB',
-};

package/template/.claude/skills/yss-ui/assets/demos/card/layout-metrics/index.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { YCard, YEcharts } from '@yss-ui/components';
-import { ref } from 'vue';
-import { createCpuGaugeOption, createDiskGaugeOption, THREAD_STATS_DATA, DISK_USAGE_INFO } from './constants';
-import './style.less';
-
-/** CPU使用率仪表盘配置 */
-const cpuGaugeOption = ref(createCpuGaugeOption());
-
-/** 活动线程数配置 */
-const threadStats = ref(THREAD_STATS_DATA);
-
-/** 磁盘使用率仪表盘配置 */
-const diskGaugeOption = ref(createDiskGaugeOption());
-</script>
-
-<template>
-  <div class="metrics-dashboard">
-    <!-- 三个卡片在一行展示 -->
-    <div class="metrics-row">
-      <!-- CPU使用率仪表盘 -->
-      <YCard class="gauge-card">
-        <template #title>
-          <div class="gauge-title">最大内存使用率</div>
-        </template>
-        <div class="gauge-container">
-          <YEcharts :options="cpuGaugeOption" style="width: 100%; height: 280px" />
-        </div>
-      </YCard>
-
-      <!-- 活动线程数 -->
-      <YCard class="thread-card">
-        <template #title>
-          <div class="thread-title">当前活动线程数</div>
-        </template>
-        <div class="thread-container">
-          <div class="thread-total">{{ threadStats.total }}</div>
-          <div class="thread-details">
-            <div v-for="item in threadStats.details" :key="item.label" class="thread-item">
-              <span class="thread-label">{{ item.label }}</span>
-              <span class="thread-value" :style="{ color: item.color }">{{ item.value }}</span>
-            </div>
-          </div>
-        </div>
-      </YCard>
-
-      <!-- 磁盘使用率仪表盘 -->
-      <YCard class="gauge-card">
-        <template #title>
-          <div class="gauge-title">最大磁盘使用率</div>
-        </template>
-        <div class="gauge-container">
-          <YEcharts :options="diskGaugeOption" style="width: 100%; height: 280px" />
-        </div>
-      </YCard>
-
-      <!-- 磁盘使用量卡片 -->
-      <YCard class="storage-card">
-        <template #title>
-          <div class="storage-title">磁盘使用量（{{ DISK_USAGE_INFO.unit }}）</div>
-        </template>
-        <div class="storage-container">
-          <div class="storage-value">{{ DISK_USAGE_INFO.used }}/{{ DISK_USAGE_INFO.total }}</div>
-        </div>
-      </YCard>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="less">
-@import url('./style.less');
-</style>

package/template/.claude/skills/yss-ui/assets/demos/card/layout-metrics/metrics-cards.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { YCard } from '@yss-ui/components';
-
-/** 指标数据 */
-const metricsData = [
-  {
-    id: 'cpu',
-    title: 'CPU使用率',
-    value: '54%',
-    icon: '💻',
-    color: '#1890ff',
-    bgColor: '#e6f7ff',
-  },
-  {
-    id: 'memory',
-    title: '内存使用率',
-    value: '41.09%',
-    icon: '🧠',
-    color: '#52c41a',
-    bgColor: '#f6ffed',
-  },
-  {
-    id: 'disk',
-    title: '磁盘使用率',
-    value: '28%',
-    icon: '💾',
-    color: '#faad14',
-    bgColor: '#fff7e6',
-  },
-  {
-    id: 'alerts',
-    title: '告警规则个数',
-    value: '4',
-    icon: '⚠️',
-    color: '#ff4d4f',
-    bgColor: '#fff2f0',
-  },
-];
-</script>
-
-<template>
-  <div class="metrics-cards-dashboard">
-    <div class="metrics-cards-row">
-      <YCard
-        v-for="metric in metricsData"
-        :key="metric.id"
-        :span="6"
-        :gutter="16"
-        class="metric-card"
-        :xs="24"
-        :sm="12"
-        :md="6"
-      >
-        <div class="metric-content">
-          <div class="metric-icon" :style="{ backgroundColor: metric.bgColor }">
-            <span class="icon-text">{{ metric.icon }}</span>
-          </div>
-          <div class="metric-info">
-            <div class="metric-title">{{ metric.title }}</div>
-            <div class="metric-value" :style="{ color: metric.color }">
-              {{ metric.value }}
-            </div>
-          </div>
-        </div>
-      </YCard>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="less"></style>

package/template/.claude/skills/yss-ui/assets/demos/card/layout-metrics/style.less

@@ -1,232 +0,0 @@
-.metrics-dashboard {
-  .metrics-row {
-    display: grid;
-
-    /* 使用 auto-fit 实现真正的自适应布局，最小卡片宽度 320px */
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: var(--spacing-lg, 24px);
-    margin-bottom: var(--spacing-lg, 24px);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  /* 仪表盘卡片样式 */
-  .gauge-card {
-    .gauge-title {
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--text-color, #333);
-    }
-
-    .gauge-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 280px;
-    }
-
-    .disk-usage {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-top: var(--spacing-md, 16px);
-      padding-top: var(--spacing-sm, 8px);
-      border-top: 1px solid var(--border-color, #f0f0f0);
-
-      .usage-text {
-        font-size: 14px;
-        color: var(--text-color-secondary, #666);
-      }
-
-      .usage-value {
-        font-size: 18px;
-        font-weight: 600;
-        color: var(--warning-color, #faad14);
-      }
-    }
-  }
-
-  /* 线程统计卡片样式 */
-  .thread-card {
-    .thread-title {
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--text-color, #333);
-    }
-
-    .thread-container {
-      text-align: center;
-      padding: var(--spacing-lg, 24px) 0;
-    }
-
-    .thread-total {
-      font-size: 72px;
-      font-weight: 700;
-      line-height: 1;
-      margin-bottom: var(--spacing-lg, 24px);
-      color: var(--warning-color, #faad14);
-    }
-
-    .thread-details {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(3, 1fr);
-      gap: var(--spacing-xs, 4px) var(--spacing-md, 110px);
-      max-width: 240px;
-      margin: 0 auto;
-      align-items: start;
-    }
-
-    .thread-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 12px;
-      padding: 4px 0;
-      white-space: nowrap;
-
-      .thread-label {
-        font-weight: 400;
-        color: var(--text-color-secondary, #999);
-        margin-right: var(--spacing-xs, 4px);
-      }
-
-      .thread-value {
-        font-weight: 600;
-        font-size: 12px;
-        color: var(--error-color, #ff4d4f);
-      }
-    }
-  }
-
-  /* 指标卡片样式 */
-  .metric-card {
-    min-height: 120px;
-  }
-
-  /* 图表卡片样式 */
-  .chart-card {
-    .chart-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 150px;
-    }
-  }
-
-  /* 统计数据卡片样式 */
-  .stats-card {
-    text-align: center;
-
-    .big-number {
-      font-size: 42px;
-      font-weight: 600;
-      line-height: 1.2;
-      margin-bottom: var(--spacing-sm, 8px);
-      color: var(--primary-color, #1890ff);
-    }
-
-    .sub-stats {
-      display: flex;
-      gap: var(--spacing-sm, 12px);
-      justify-content: center;
-
-      .stat-item {
-        color: var(--text-color-secondary, #999);
-        font-size: 12px;
-      }
-    }
-  }
-
-  /* 告警卡片样式 */
-  .alert-card {
-    .alert-level {
-      display: inline-block;
-      padding: 2px 6px;
-      border-radius: 2px;
-      font-size: 12px;
-      margin-right: var(--spacing-sm, 8px);
-
-      &.level-warning {
-        background: var(--warning-color-background, #fff7e6);
-        color: var(--warning-color, #faad14);
-        border: 1px solid var(--warning-color-border, #ffd591);
-      }
-
-      &.level-error {
-        background: var(--error-color-background, #fff2f0);
-        color: var(--error-color, #ff4d4f);
-        border: 1px solid var(--error-color-border, #ffccc7);
-      }
-    }
-
-    .alert-name {
-      font-weight: 500;
-    }
-
-    .alert-host {
-      color: var(--text-color-secondary, #999);
-      font-size: 13px;
-    }
-  }
-
-  /* 存储卡片样式 */
-  .storage-card {
-    .storage-title {
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--text-color, #333);
-    }
-
-    .storage-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 280px;
-    }
-
-    .storage-value {
-      font-size: 36px;
-      font-weight: 600;
-      text-align: center;
-      color: var(--warning-color, #f0a020);
-      line-height: 1.2;
-    }
-  }
-}
-
-/* 响应式设计优化 */
-
-/* 超小屏幕：强制单列布局，调整最小宽度 */
-@media (max-width: 767px) {
-  .metrics-dashboard {
-    .metrics-row {
-      grid-template-columns: 1fr;
-      gap: var(--spacing-md, 16px);
-    }
-  }
-}
-
-/* 小屏幕：降低最小卡片宽度以适应更小的屏幕 */
-@media (max-width: 480px) {
-  .metrics-dashboard {
-    .metrics-row {
-      grid-template-columns: 1fr;
-      gap: var(--spacing-sm, 12px);
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .metrics-dashboard {
-    .stats-card .big-number {
-      font-size: 28px;
-    }
-
-    .storage-card .storage-value {
-      font-size: 24px;
-    }
-  }
-}

package/template/.claude/skills/yss-ui/assets/demos/card/loading/index.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { YButton, YCard } from '@yss-ui/components';
-
-const loading = ref(true);
-</script>
-
-<template>
-  <YCard title="加载中" :loading="loading" :padding="16" style="width: 360px">
-    <div>这是加载完成后的内容。</div>
-    <div>你可以用 loading 来包裹异步内容。</div>
-  </YCard>
-  <div style="margin-top: 12px">
-    <YButton size="small" @click="loading = !loading">{{ loading ? '停止' : '开始' }}加载</YButton>
-  </div>
-  <br />
-</template>
-
-<style scoped lang="less"></style>

package/template/.claude/skills/yss-ui/assets/demos/card/meta/index.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { YCard } from '@yss-ui/components';
-</script>
-
-<template>
-  <YCard :hoverable="true" style="width: 320px">
-    <template #meta-title>业务服务 A</template>
-    <template #meta-description>服务说明：核心交易服务，负责订单处理等。</template>
-    <template #meta-avatar>
-      <img
-        alt="avatar"
-        src="https://avatars.githubusercontent.com/u/69631?v=4"
-        style="width: 40px; height: 40px; border-radius: 50%"
-      />
-    </template>
-  </YCard>
-</template>
-
-<style scoped lang="less"></style>

package/template/.claude/skills/yss-ui/assets/demos/condition-builder/basic/constants.ts

@@ -1,44 +0,0 @@
-import type { ConditionGroup, OperatorOption, OptionItem } from '@yss-ui/components';
-
-export const operatorOptions: OperatorOption[] = [
-  { label: '等于', value: 'EQ', kind: 'single' },
-  { label: '大于', value: 'GT', kind: 'single' },
-  { label: '小于', value: 'LT', kind: 'single' },
-  { label: '区间', value: 'BETWEEN', kind: 'between' },
-  { label: '包含', value: 'IN', kind: 'multiple' },
-  { label: '大于等于', value: 'GTE', kind: 'single' },
-  { label: '小于等于', value: 'LTE', kind: 'single' },
-];
-
-export const fieldOptions: OptionItem[] = [
-  { label: '年龄', value: 'age' },
-  { label: '姓名', value: 'name' },
-  { label: '城市', value: 'city' },
-];
-
-export const valueDict: Record<string, OptionItem[]> = {
-  name: [
-    { label: '张三', value: 'zhangsan' },
-    { label: '李四', value: 'lisi' },
-    { label: '王五', value: 'wangwu' },
-  ],
-  city: [
-    { label: '北京', value: 'beijing' },
-    { label: '上海', value: 'shanghai' },
-    { label: '广州', value: 'guangzhou' },
-  ],
-  age: [
-    { label: '18', value: '18' },
-    { label: '25', value: '25' },
-    { label: '30', value: '30' },
-  ],
-};
-
-export {};
-
-export const createInitial = (): ConditionGroup => ({
-  id: 'root',
-  type: 'GROUP',
-  logicalOp: 'AND',
-  children: [],
-});

package/template/.claude/skills/yss-ui/assets/demos/condition-builder/basic/hooks/useConditionBasic.ts

@@ -1,18 +0,0 @@
-import type { OptionItem } from '@yss-ui/components';
-import { fieldOptions, valueDict } from '../constants';
-
-export const useConditionBasic = () => {
-  const loadFields = async (q: string) => {
-    const s = (q || '').toLowerCase();
-    return fieldOptions.filter(o => o.label.toLowerCase().includes(s) || o.value.toLowerCase().includes(s));
-  };
-
-  const loadValues = async (args: { q: string; field: unknown }) => {
-    const key = String(args.field || '');
-    const list: OptionItem[] = valueDict[key] || [];
-    const s = (args.q || '').toLowerCase();
-    return list.filter(o => o.label.toLowerCase().includes(s) || o.value.toLowerCase().includes(s));
-  };
-
-  return { loadFields, loadValues };
-};