create-yss-spec 2.2.10 → 3.0.1

package/template/.hermes/skills/yss-ui/assets/demos/card/flexible-layout/style.less

@@ -1,191 +0,0 @@
-.flexible-layout-demo {
-  padding: var(--spacing-lg, 24px);
-
-  .layout-info {
-    margin-bottom: var(--spacing-xl, 32px);
-
-    h3 {
-      font-size: 18px;
-      font-weight: 600;
-      margin-bottom: var(--spacing-sm, 8px);
-      color: var(--text-color, #333);
-    }
-
-    p {
-      font-size: 14px;
-      line-height: 1.6;
-      color: var(--text-color-secondary, #666);
-      margin: 0;
-
-      code {
-        background: var(--code-bg, #f6f8fa);
-        border: 1px solid var(--border-color-light, #e1e4e8);
-        border-radius: 3px;
-        padding: 2px 6px;
-        font-family: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-        font-size: 85%;
-      }
-    }
-  }
-
-  /* 自适应网格布局 */
-  .flexible-grid {
-    display: grid;
-
-    /* 核心：使用 auto-fit 和 minmax 实现真正的自适应 */
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: var(--spacing-lg, 24px);
-    margin-bottom: var(--spacing-xl, 32px);
-  }
-
-  /* 指标卡片样式 */
-  .metric-card {
-    min-height: 160px;
-    transition:
-      transform 0.2s ease,
-      box-shadow 0.2s ease;
-
-    &:hover {
-      transform: translateY(-2px);
-    }
-
-    .metric-title {
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--text-color, #333);
-    }
-
-    .metric-content {
-      padding: var(--spacing-md, 16px) 0;
-    }
-
-    .metric-value {
-      font-size: 28px;
-      font-weight: 700;
-      line-height: 1.2;
-      color: var(--primary-color, #1890ff);
-      margin-bottom: var(--spacing-sm, 8px);
-
-      .sub-value {
-        font-size: 16px;
-        font-weight: 400;
-        color: var(--text-color-secondary, #999);
-        margin-left: var(--spacing-xs, 4px);
-      }
-    }
-
-    .metric-trend {
-      margin-bottom: var(--spacing-sm, 8px);
-
-      .trend-indicator {
-        display: inline-block;
-        font-size: 13px;
-        font-weight: 500;
-        padding: 2px 8px;
-        border-radius: 12px;
-
-        &.trend-up {
-          background: var(--success-color-bg, #f6ffed);
-          color: var(--success-color, #52c41a);
-          border: 1px solid var(--success-color-border, #b7eb8f);
-
-          &::before {
-            content: "↗ ";
-          }
-        }
-
-        &.trend-down {
-          background: var(--error-color-bg, #fff2f0);
-          color: var(--error-color, #ff4d4f);
-          border: 1px solid var(--error-color-border, #ffccc7);
-
-          &::before {
-            content: "↘ ";
-          }
-        }
-      }
-    }
-
-    .metric-description {
-      font-size: 12px;
-      line-height: 1.4;
-      color: var(--text-color-tertiary, #999);
-    }
-  }
-
-  /* 布局说明 */
-  .layout-explanation {
-    .feature-list {
-      margin: 0;
-      padding-left: var(--spacing-lg, 20px);
-
-      li {
-        margin-bottom: var(--spacing-sm, 8px);
-        line-height: 1.6;
-        color: var(--text-color-secondary, #666);
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-
-        strong {
-          color: var(--text-color, #333);
-        }
-      }
-    }
-  }
-}
-
-/* 响应式优化 */
-@media (max-width: 768px) {
-  .flexible-layout-demo {
-    padding: var(--spacing-md, 16px);
-
-    .flexible-grid {
-      /* 小屏幕强制单列，降低最小宽度 */
-      grid-template-columns: 1fr;
-      gap: var(--spacing-md, 16px);
-    }
-
-    .metric-card {
-      .metric-value {
-        font-size: 24px;
-      }
-    }
-
-    .layout-info {
-      margin-bottom: var(--spacing-lg, 24px);
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  .flexible-layout-demo {
-    padding: var(--spacing-sm, 12px);
-
-    .flexible-grid {
-      gap: var(--spacing-sm, 12px);
-    }
-
-    .metric-card {
-      min-height: 140px;
-
-      .metric-value {
-        font-size: 20px;
-      }
-    }
-  }
-}
-
-/* 超大屏幕优化：限制最大列数，避免卡片过宽 */
-@media (min-width: 1600px) {
-  .flexible-layout-demo {
-    .flexible-grid {
-      /* 在超大屏幕上最多显示 4 列 */
-      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-      max-width: 1400px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-}

package/template/.hermes/skills/yss-ui/assets/demos/card/header-extra/index.vue

@@ -1,260 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { message, Space, Statistic, Tooltip, Dropdown, Menu, Tag, Select, Row, Col } from 'ant-design-vue';
-import { YButton, YCard } from '@yss-ui/components';
-import './style.less';
-import {
-  CloudServerOutlined,
-  ReloadOutlined,
-  SettingOutlined,
-  MoreOutlined,
-  DownloadOutlined,
-  HistoryOutlined,
-  BellOutlined,
-  DesktopOutlined,
-  HddOutlined,
-  DatabaseOutlined,
-  AlertOutlined,
-  ArrowUpOutlined,
-  ArrowDownOutlined,
-  ProjectOutlined,
-} from '@ant-design/icons-vue';
-
-/** 图标组件映射 */
-const Icon = CloudServerOutlined;
-
-/** 刷新状态 */
-const refreshing = ref(false);
-
-/** 时间周期选择 */
-const selectedPeriod = ref('7d');
-
-/** 服务器状态 */
-const serverStatus = ref({
-  text: '运行正常',
-  color: 'success',
-});
-
-/** 监控指标数据 */
-const metrics = ref([
-  {
-    key: 'cpu',
-    title: 'CPU使用率',
-    value: 54,
-    suffix: '%',
-    precision: 0,
-    icon: DesktopOutlined,
-    status: 'warning',
-    valueColor: '#faad14',
-    trend: 'up',
-    trendText: '较昨日 +2.3%',
-  },
-  {
-    key: 'memory',
-    title: '内存使用率',
-    value: 41.09,
-    suffix: '%',
-    precision: 2,
-    icon: DatabaseOutlined,
-    status: 'normal',
-    valueColor: '#52c41a',
-    trend: 'down',
-    trendText: '较昨日 -1.2%',
-  },
-  {
-    key: 'disk',
-    title: '磁盘使用率',
-    value: 28,
-    suffix: '%',
-    precision: 0,
-    icon: HddOutlined,
-    status: 'normal',
-    valueColor: '#1890ff',
-    trend: 'up',
-    trendText: '较昨日 +0.8%',
-  },
-  {
-    key: 'alerts',
-    title: '告警规则',
-    value: 4,
-    suffix: '个',
-    precision: 0,
-    icon: AlertOutlined,
-    status: 'error',
-    valueColor: '#ff4d4f',
-    trend: 'up',
-    trendText: '新增 2 个',
-  },
-]);
-
-/** 项目统计数据 */
-const projectStats = ref([
-  {
-    key: 'total',
-    label: '总项目数',
-    value: 156,
-    description: '所有项目',
-    color: '#1890ff',
-  },
-  {
-    key: 'active',
-    label: '活跃项目',
-    value: 89,
-    description: '本周有更新',
-    color: '#52c41a',
-  },
-  {
-    key: 'pending',
-    label: '待部署',
-    value: 12,
-    description: '等待发布',
-    color: '#faad14',
-  },
-  {
-    key: 'issues',
-    label: '问题项目',
-    value: 3,
-    description: '需要处理',
-    color: '#ff4d4f',
-  },
-]);
-
-/** 处理刷新 */
-const handleRefresh = async () => {
-  refreshing.value = true;
-  try {
-    // 模拟刷新数据
-    await new Promise(resolve => setTimeout(resolve, 1000));
-    message.success('数据刷新成功');
-  } finally {
-    refreshing.value = false;
-  }
-};
-
-/** 处理设置 */
-const handleSettings = () => {
-  message.info('打开告警阈值设置');
-};
-
-/** 处理菜单点击 */
-const handleMenuClick = (info: { key: string | number }) => {
-  const key = String(info.key);
-  const actions: Record<string, string> = {
-    export: '导出监控报告',
-    history: '查看历史趋势',
-    alert: '配置告警规则',
-  };
-  message.info(actions[key] || '未知操作');
-};
-
-/** 查看详情 */
-const handleViewDetails = () => {
-  message.info(`查看 ${selectedPeriod.value} 的详细统计`);
-};
-</script>
-
-<template>
-  <div class="header-extra-demo">
-    <!-- 服务器资源监控卡片 -->
-    <YCard :span="24" :gutter="16" class="resource-card">
-      <template #title>
-        <Space>
-          <Icon />
-          <span>服务器资源概览</span>
-          <Tag :color="serverStatus.color" size="small">{{ serverStatus.text }}</Tag>
-        </Space>
-      </template>
-      <template #extra>
-        <Space>
-          <Tooltip title="刷新数据">
-            <YButton type="text" size="small" :loading="refreshing" @click="handleRefresh">
-              <template #icon><ReloadOutlined /></template>
-            </YButton>
-          </Tooltip>
-          <Tooltip title="设置告警阈值">
-            <YButton type="text" size="small" @click="handleSettings">
-              <template #icon><SettingOutlined /></template>
-            </YButton>
-          </Tooltip>
-          <Dropdown>
-            <template #overlay>
-              <Menu @click="handleMenuClick">
-                <Menu.Item key="export">
-                  <DownloadOutlined />
-                  导出报告
-                </Menu.Item>
-                <Menu.Item key="history">
-                  <HistoryOutlined />
-                  历史趋势
-                </Menu.Item>
-                <Menu.Item key="alert">
-                  <BellOutlined />
-                  告警配置
-                </Menu.Item>
-              </Menu>
-            </template>
-            <YButton type="text" size="small">
-              <template #icon><MoreOutlined /></template>
-            </YButton>
-          </Dropdown>
-        </Space>
-      </template>
-
-      <div class="metrics-grid">
-        <div v-for="metric in metrics" :key="metric.key" class="metric-item">
-          <div class="metric-icon" :class="`metric-${metric.status}`">
-            <component :is="metric.icon" />
-          </div>
-          <div class="metric-content">
-            <Statistic
-              :title="metric.title"
-              :value="metric.value"
-              :suffix="metric.suffix"
-              :precision="metric.precision"
-              :value-style="{ color: metric.valueColor }"
-            />
-            <div class="metric-trend">
-              <ArrowUpOutlined v-if="metric.trend === 'up'" class="trend-up" />
-              <ArrowDownOutlined v-if="metric.trend === 'down'" class="trend-down" />
-              <span class="trend-text">{{ metric.trendText }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </YCard>
-
-    <!-- 项目统计卡片 -->
-    <YCard :span="24" :gutter="16" style="margin-top: 16px">
-      <template #title>
-        <Space>
-          <ProjectOutlined />
-          <span>项目统计</span>
-        </Space>
-      </template>
-      <template #extra>
-        <Space>
-          <Select v-model:value="selectedPeriod" size="small" style="width: 80px">
-            <Select.Option value="7d">7天</Select.Option>
-            <Select.Option value="30d">30天</Select.Option>
-            <Select.Option value="90d">90天</Select.Option>
-          </Select>
-          <YButton type="primary" size="small" @click="handleViewDetails"> 查看详情 </YButton>
-        </Space>
-      </template>
-
-      <Row :gutter="24">
-        <Col v-for="stat in projectStats" :key="stat.key" :span="6">
-          <div class="stat-item">
-            <div class="stat-value" :style="{ color: stat.color }">{{ stat.value }}</div>
-            <div class="stat-label">{{ stat.label }}</div>
-            <div class="stat-desc">{{ stat.description }}</div>
-          </div>
-        </Col>
-      </Row>
-    </YCard>
-  </div>
-</template>
-
-<style scoped lang="less">
-@import url('./style.less');
-</style>

package/template/.hermes/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/.hermes/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/.hermes/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>