create-yss-spec 3.0.0 → 3.1.0

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

package/template/.hermes/skills/yss-ui/assets/demos/condition-builder/basic/index.vue

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { YConditionBuilder } from '@yss-ui/components';
-import type { ConditionGroup } from '@yss-ui/components';
-import { operatorOptions, createInitial } from './constants';
-import { useConditionBasic } from './hooks/useConditionBasic';
-
-const model = ref<ConditionGroup>(createInitial());
-const { loadFields, loadValues } = useConditionBasic();
-
-/** 格式化输出的 JSON 参数 */
-const formattedJson = computed(() => {
-  return JSON.stringify(model.value, null, 2);
-});
-</script>
-
-<template>
-  <div class="demo-container">
-    <div class="condition-builder-wrapper">
-      <YConditionBuilder
-        v-model="model"
-        :operator-options="operatorOptions"
-        :load-fields="loadFields"
-        :load-values="args => loadValues({ q: args.q, field: args.field })"
-      />
-    </div>
-
-    <div class="output-section">
-      <h4 class="output-title">输出参数 JSON：</h4>
-      <pre class="json-output">{{ formattedJson }}</pre>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="less">
-.demo-container {
-  gap: var(--spacing-lg, 24px);
-}
-
-.condition-builder-wrapper {
-  min-height: 200px;
-}
-
-.output-section {
-  padding-top: var(--spacing-lg, 24px);
-}
-
-.output-title {
-  margin: 0 0 var(--spacing-md, 16px) 0;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text-primary, #1d2129);
-}
-
-.json-output {
-  background-color: var(--color-fill-1, #f7f8fa);
-  border: 1px solid var(--color-border-2, #e5e6eb);
-  border-radius: var(--radius-md, 6px);
-  padding: var(--spacing-md, 16px);
-  margin: 0;
-  font-family: Monaco, Menlo, 'Ubuntu Mono', monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--color-text-primary, #1d2129);
-  overflow: auto auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 400px;
-}
-
-/* 响应式设计 */
-@media (min-width: 768px) {
-  .demo-container {
-    flex-direction: row;
-    gap: var(--spacing-xl, 32px);
-  }
-
-  .condition-builder-wrapper {
-    flex: 1;
-  }
-
-  .output-section {
-    flex: 0 0 400px;
-    border-top: none;
-    padding-top: 0;
-  }
-}
-
-/* --- 暗色模式适配 --- */
-[data-prefers-color='dark'] {
-  .output-title {
-    color: rgba(255, 255, 255, 0.85);
-  }
-  .json-output {
-    background-color: #141414;
-    border-color: #303030;
-    color: rgba(255, 255, 255, 0.85);
-  }
-}
-</style>

package/template/.hermes/skills/yss-ui/assets/demos/condition-builder/linked/constants.ts

@@ -1,51 +0,0 @@
-import type { ConditionGroup, OperatorOption, OptionItem } from '@yss-ui/components';
-
-export const operatorsByField: Record<string, OperatorOption[]> = {
-  age: [
-    { label: '=', value: '=', kind: 'single' },
-    { label: '>', value: '>', kind: 'single' },
-    { label: 'BETWEEN', value: 'BETWEEN', kind: 'between' },
-  ],
-  name: [
-    { label: '=', value: '=', kind: 'single' },
-    { label: 'LIKE', value: 'LIKE', kind: 'single' },
-    { label: 'IS NULL', value: 'IS NULL', kind: 'none' },
-  ],
-  city: [
-    { label: 'IN', value: 'IN', kind: 'multiple' },
-    { label: 'NOT IN', value: 'NOT IN', kind: 'multiple' },
-  ],
-};
-
-export const fieldOptions: OptionItem[] = [
-  { label: '年龄', value: 'age' },
-  { label: '姓名', value: 'name' },
-  { label: '城市', value: 'city' },
-];
-
-export const valueDictByField: Record<string, OptionItem[]> = {
-  name: [
-    { label: '张三', value: '张三' },
-    { label: '李四', value: '李四' },
-    { label: '王五', value: '王五' },
-  ],
-  city: [
-    { label: '北京', value: '北京' },
-    { label: '上海', value: '上海' },
-    { label: '深圳', value: '深圳' },
-  ],
-  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/.hermes/skills/yss-ui/assets/demos/condition-builder/linked/hooks/useConditionLinked.ts

@@ -1,29 +0,0 @@
-import type { OperatorOption, OptionItem } from '@yss-ui/components';
-import { operatorsByField, fieldOptions, valueDictByField } from '../constants';
-
-export const useConditionLinked = () => {
-  const loadFields = async (q: string) => {
-    const s = (q || '').toLowerCase();
-    return fieldOptions.filter(o => o.label.toLowerCase().includes(s) || o.value.toLowerCase().includes(s));
-  };
-
-  const getOperators = async (field: unknown): Promise<OperatorOption[]> => {
-    const key = String(field || '');
-    return operatorsByField[key] || [];
-  };
-
-  const loadValues = async (args: { q: string; field: unknown; operator?: string }) => {
-    const key = String(args.field || '');
-    const list: OptionItem[] = valueDictByField[key] || [];
-    const s = (args.q || '').toLowerCase();
-    if (args.operator === 'LIKE') {
-      return [
-        { label: '%测试%', value: '%测试%' },
-        { label: '%用户%', value: '%用户%' },
-      ];
-    }
-    return list.filter(o => o.label.toLowerCase().includes(s) || o.value.toLowerCase().includes(s));
-  };
-
-  return { loadFields, getOperators, loadValues };
-};

package/template/.hermes/skills/yss-ui/assets/demos/condition-builder/linked/index.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { YConditionBuilder } from '@yss-ui/components';
-import type { ConditionGroup } from '@yss-ui/components';
-import { createInitial } from './constants';
-import { useConditionLinked } from './hooks/useConditionLinked';
-
-const model = ref<ConditionGroup>(createInitial());
-const { loadFields, getOperators, loadValues } = useConditionLinked();
-</script>
-
-<template>
-  <div>
-    <YConditionBuilder
-      v-model="model"
-      :get-operators="getOperators"
-      :load-fields="loadFields"
-      :load-values="args => loadValues({ q: args.q, field: args.field, operator: args.operator })"
-    />
-  </div>
-</template>
-
-<style scoped lang="less"></style>

package/template/.hermes/skills/yss-ui/assets/demos/condition-builder/nesting-between/constants.ts

@@ -1,35 +0,0 @@
-import type { ConditionGroup, OperatorOption, OptionItem } from '@yss-ui/components';
-
-export const operatorOptions: OperatorOption[] = [
-  { label: '=', value: '=', kind: 'single' },
-  { label: 'BETWEEN', value: 'BETWEEN', kind: 'between' },
-  { label: 'IS NULL', value: 'IS NULL', kind: 'none' },
-];
-
-export const fieldOptions: OptionItem[] = [
-  { label: '日期', value: 'date' },
-  { label: '评分', value: 'score' },
-];
-
-export const initialNested: ConditionGroup = {
-  id: 'root',
-  type: 'GROUP',
-  logicalOp: 'AND',
-  children: [
-    {
-      id: 'g1',
-      type: 'GROUP',
-      logicalOp: 'OR',
-      children: [
-        {
-          id: 'l1',
-          type: 'LEAF',
-          field: 'date',
-          operator: 'BETWEEN',
-          value: ['2024-01-01', '2024-06-01'],
-        },
-        { id: 'l2', type: 'LEAF', field: 'score', operator: '=', value: '80' },
-      ],
-    },
-  ],
-};

package/template/.hermes/skills/yss-ui/assets/demos/condition-builder/nesting-between/hooks/useConditionNesting.ts

@@ -1,25 +0,0 @@
-import type { OptionItem } from '@yss-ui/components';
-import { fieldOptions } from '../constants';
-
-export const useConditionNesting = () => {
-  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 s = (args.q || '').toLowerCase();
-    if (key === 'date') {
-      const all: OptionItem[] = ['2024-01-01', '2024-06-01', '2024-12-31'].map(v => ({ label: v, value: v }));
-      return all.filter(o => o.value.toLowerCase().includes(s));
-    }
-    if (key === 'score') {
-      const all: OptionItem[] = ['60', '80', '90'].map(v => ({ label: v, value: v }));
-      return all.filter(o => o.value.toLowerCase().includes(s));
-    }
-    return [];
-  };
-
-  return { loadFields, loadValues };
-};