create-yss-spec 1.0.0

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

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { message, Space, Statistic, Button, Tooltip, Dropdown, Menu, Tag, Select, Row, Col } from 'ant-design-vue';
+import { 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="刷新数据">
+            <Button type="text" size="small" :loading="refreshing" @click="handleRefresh">
+              <template #icon><ReloadOutlined /></template>
+            </Button>
+          </Tooltip>
+          <Tooltip title="设置告警阈值">
+            <Button type="text" size="small" @click="handleSettings">
+              <template #icon><SettingOutlined /></template>
+            </Button>
+          </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>
+            <Button type="text" size="small">
+              <template #icon><MoreOutlined /></template>
+            </Button>
+          </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>
+          <Button type="primary" size="small" @click="handleViewDetails"> 查看详情 </Button>
+        </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/.codex/skills/yss-ui/assets/demos/card/header-extra/style.less

@@ -0,0 +1,124 @@
+.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/.codex/skills/yss-ui/assets/demos/card/layout-metrics/constants.ts

@@ -0,0 +1,61 @@
+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/.codex/skills/yss-ui/assets/demos/card/layout-metrics/index.vue

@@ -0,0 +1,72 @@
+<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/.codex/skills/yss-ui/assets/demos/card/layout-metrics/metrics-cards.vue

@@ -0,0 +1,70 @@
+<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>