create-yss-spec 2.1.10 → 2.1.11

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

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

@@ -0,0 +1,232 @@
+.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/.cursor/skills/yss-ui/assets/demos/card/loading/index.vue

@@ -0,0 +1,19 @@
+<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/.cursor/skills/yss-ui/assets/demos/card/meta/index.vue

@@ -0,0 +1,19 @@
+<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/.cursor/skills/yss-ui/assets/demos/condition-builder/basic/constants.ts

@@ -0,0 +1,44 @@
+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/.cursor/skills/yss-ui/assets/demos/condition-builder/basic/hooks/useConditionBasic.ts

@@ -0,0 +1,18 @@
+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/.cursor/skills/yss-ui/assets/demos/condition-builder/basic/index.vue

@@ -0,0 +1,100 @@
+<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/.cursor/skills/yss-ui/assets/demos/condition-builder/linked/constants.ts

@@ -0,0 +1,51 @@
+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/.cursor/skills/yss-ui/assets/demos/condition-builder/linked/hooks/useConditionLinked.ts

@@ -0,0 +1,29 @@
+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/.cursor/skills/yss-ui/assets/demos/condition-builder/linked/index.vue

@@ -0,0 +1,23 @@
+<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/.cursor/skills/yss-ui/assets/demos/condition-builder/nesting-between/constants.ts

@@ -0,0 +1,35 @@
+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/.cursor/skills/yss-ui/assets/demos/condition-builder/nesting-between/hooks/useConditionNesting.ts

@@ -0,0 +1,25 @@
+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 };
+};