create-yss-spec 2.1.10 → 2.1.13

package/template/.cursor/skills/yss-ui/assets/demos/cron/select/index.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+/**
+ * YCron 在 Select 下拉面板中使用示例
+ * @description 将 Cron 组件放入 Select 的下拉面板，类似日期选择器的交互方式
+ */
+import { ref, computed } from 'vue';
+import { Popover } from 'ant-design-vue';
+import { ScheduleOutlined } from '@ant-design/icons-vue';
+import { YButton, YCron } from '@yss-ui/components';
+
+/** 弹出框是否可见 */
+const popoverVisible = ref(false);
+
+/** Cron 表达式 */
+const cronValue = ref('0 0 12 * * ?');
+
+/** 临时表达式（编辑中） */
+const tempCronValue = ref('');
+
+/**
+ * 打开弹出框
+ */
+const openPopover = () => {
+  tempCronValue.value = cronValue.value;
+  popoverVisible.value = true;
+};
+
+/**
+ * 确认选择
+ */
+const handleConfirm = () => {
+  cronValue.value = tempCronValue.value;
+  popoverVisible.value = false;
+};
+
+/**
+ * 取消选择
+ */
+const handleCancel = () => {
+  popoverVisible.value = false;
+};
+
+/**
+ * 显示的表达式文本
+ */
+const displayValue = computed(() => cronValue.value);
+</script>
+
+<template>
+  <div class="demo-cron-select">
+    <Popover
+      v-model:open="popoverVisible"
+      trigger="click"
+      placement="bottomLeft"
+      :arrow="false"
+      overlay-class-name="cron-select-popover"
+    >
+      <template #content>
+        <div class="cron-popover-content">
+          <YCron v-model="tempCronValue" />
+          <div class="cron-popover-footer">
+            <YButton size="small" @click="handleCancel">取消</YButton>
+            <YButton type="primary" size="small" @click="handleConfirm">确定</YButton>
+          </div>
+        </div>
+      </template>
+
+      <div class="cron-select-trigger" @click="openPopover">
+        <ScheduleOutlined class="cron-select-icon" />
+        <span class="cron-select-value">{{ displayValue }}</span>
+      </div>
+    </Popover>
+  </div>
+</template>
+
+<style scoped lang="less">
+.demo-cron-select {
+  width: 280px;
+}
+
+.cron-select-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 11px;
+  height: 32px;
+  // background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: #4096ff;
+  }
+}
+
+.cron-select-icon {
+  // color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+}
+
+.cron-select-value {
+  flex: 1;
+  font-family: 'SFMono-Regular', Consolas, monospace;
+  font-size: 13px;
+  // color: rgba(0, 0, 0, 0.88);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cron-select-suffix {
+  color: rgba(0, 0, 0, 0.25);
+  display: flex;
+  align-items: center;
+}
+
+.cron-popover-content {
+  width: 460px;
+
+  .y-cron {
+    border: none;
+    height: 296px;
+  }
+}
+
+.cron-popover-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 0 0;
+  border-top: 1px solid #f0f0f0;
+  margin-top: 8px;
+}
+</style>
+
+<style lang="less">
+// 全局样式：调整 Popover 内边距
+.cron-select-popover {
+  .ant-popover-inner {
+    padding: 12px;
+  }
+}
+</style>

package/template/.cursor/skills/yss-ui/assets/demos/echarts/basic.vue

@@ -0,0 +1,30 @@
+<template>
+  <div style="width: 100%; height: 360px">
+    <YEcharts :options="option" />
+  </div>
+  <YButton type="primary" size="small" @click="randomize">随机数据</YButton>
+  <span style="margin-left: 8px; color: var(--demo-text-muted)">点击更新 options，验证响应式 setOption</span>
+</template>
+
+<script setup lang="ts">
+import { YButton, YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { ref } from 'vue';
+
+const option = ref<EChartsCoreOption>({
+  title: { text: '基础柱状图' },
+  tooltip: {},
+  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
+  yAxis: { type: 'value' },
+  series: [{ type: 'bar', data: [23, 19, 36, 10, 15, 22, 18], name: '销量' }],
+});
+
+const randomize = () => {
+  option.value = {
+    ...option.value,
+    series: [{ type: 'bar', data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 50 + 5)) }],
+  };
+};
+</script>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/echarts/calendar-heatmap.vue

@@ -0,0 +1,49 @@
+<template>
+  <div style="width: 100%; height: 360px">
+    <YEcharts :options="option" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { ref } from 'vue';
+
+const getVirtualData = (year: number) => {
+  const date = +new Date(year, 0, 1);
+  const end = +new Date(year, 11, 31);
+  const dayTime = 3600 * 24 * 1000;
+  const data: [string, number][] = [];
+  for (let time = date; time <= end; time += dayTime) {
+    data.push([new Date(time).toISOString().slice(0, 10), Math.floor(Math.random() * 1000)]);
+  }
+  return data;
+};
+
+const year = new Date().getFullYear();
+
+const option = ref<EChartsCoreOption>({
+  title: { text: '日历热力图' },
+  tooltip: {},
+  visualMap: {
+    min: 0,
+    max: 1000,
+    type: 'continuous',
+    calculable: true,
+    orient: 'horizontal',
+    left: 'center',
+    bottom: 20,
+  },
+  calendar: {
+    range: year,
+    cellSize: ['auto', 18],
+  },
+  series: {
+    type: 'heatmap',
+    coordinateSystem: 'calendar',
+    data: getVirtualData(year),
+  },
+});
+</script>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/echarts/candlestick.vue

@@ -0,0 +1,30 @@
+<template>
+  <div style="width: 100%; height: 360px">
+    <YEcharts :options="option" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { ref } from 'vue';
+
+// 示例数据：开盘、收盘、最低、最高
+const data = [
+  [2320.26, 2320.26, 2287.3, 2362.94],
+  [2300, 2291.3, 2288.26, 2308.38],
+  [2295.35, 2346.5, 2295.35, 2346.92],
+  [2347.22, 2358.98, 2337.35, 2363.8],
+  [2360.75, 2382.48, 2347.89, 2383.76],
+];
+
+const option = ref<EChartsCoreOption>({
+  title: { text: 'K 线图' },
+  tooltip: { trigger: 'axis' },
+  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], boundaryGap: true },
+  yAxis: { scale: true },
+  series: [{ type: 'candlestick', data }],
+});
+</script>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/echarts/dark.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { YButton, YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { computed, ref } from 'vue';
+
+const theme = ref<'light' | 'dark'>('light');
+const darkMode = ref(true);
+
+const option = ref<EChartsCoreOption>({
+  xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E', 'F'] },
+  yAxis: { type: 'value' },
+  series: [{ type: 'bar', data: [12, 20, 15, 8, 18, 25] }],
+});
+
+// 使用 CSS 变量 + 计算样式，避免硬编码颜色
+const containerStyle = computed(() => ({
+  width: '100%',
+  height: '360px',
+  background: darkMode.value ? '#141414' : 'var(--ant-bg-container, #ffffff)',
+  border: '1px solid var(--demo-border-color, #d9d9d9)',
+  borderRadius: '8px',
+}));
+</script>
+
+<template>
+  <div style="display: flex; gap: 12px; align-items: center; margin-bottom: 8px">
+    <span>主题：</span>
+    <YButton :type="theme === 'light' ? 'primary' : 'default'" @click="theme = 'light'">light</YButton>
+    <YButton :type="theme === 'dark' ? 'primary' : 'default'" @click="theme = 'dark'">dark</YButton>
+    <span style="margin-left: 12px">darkMode: </span>
+    <YButton :type="darkMode ? 'primary' : 'default'" @click="darkMode = !darkMode">{{
+      darkMode ? 'On' : 'Off'
+    }}</YButton>
+  </div>
+  <div :style="containerStyle">
+    <YEcharts :options="option" :theme="theme" :dark-mode="darkMode" />
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/echarts/expose-methods.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { YButton, YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { ref } from 'vue';
+
+const chartRef = ref<InstanceType<typeof YEcharts> | null>(null);
+const remountKey = ref(0);
+const boxWidth = ref<string>('100%');
+const lastAction = ref<string>('');
+const instanceInfo = ref<string>('');
+
+const option = ref<EChartsCoreOption>({
+  title: { text: '实例方法演示' },
+  tooltip: {},
+  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
+  yAxis: { type: 'value' },
+  series: [{ type: 'bar', name: '销量', data: [23, 19, 36, 10, 15, 22, 18] }],
+});
+
+const randomizeMerge = (): void => {
+  const data = Array.from({ length: 7 }, () => Math.floor(Math.random() * 50 + 5));
+  chartRef.value?.setOption({ series: [{ type: 'bar', name: '销量', data }] }, false);
+  lastAction.value = 'setOption 合并更新 series 数据';
+};
+
+const replaceOption = (): void => {
+  const newOption: EChartsCoreOption = {
+    title: { text: '完全替换为折线图' },
+    tooltip: { trigger: 'axis' },
+    xAxis: { type: 'category', data: ['一', '二', '三', '四', '五', '六', '日'] },
+    yAxis: { type: 'value' },
+    series: [{ type: 'line', smooth: true, name: '均价', data: [12, 14, 15, 16, 12, 10, 9] }],
+  };
+  chartRef.value?.setOption(newOption, true);
+  lastAction.value = 'setOption(notMerge=true) 完全替换配置';
+};
+
+const getIns = (): void => {
+  const ins = chartRef.value?.getInstance();
+  instanceInfo.value = ins ? `已创建 (id=${(ins as any)?.id ?? 'n/a'})` : '实例为空 (已销毁或未挂载)';
+  lastAction.value = 'getInstance 获取实例';
+  // 控制台可展开查看原始实例
+  // eslint-disable-next-line no-console
+  console.log('[YEcharts getInstance]', ins);
+};
+
+const toggleWidth = (): void => {
+  boxWidth.value = boxWidth.value === '100%' ? '60%' : '100%';
+  lastAction.value = '改变容器宽度';
+};
+
+const manualResize = (): void => {
+  chartRef.value?.resize();
+  lastAction.value = '手动调用 resize 重绘';
+};
+
+const doDispose = (): void => {
+  chartRef.value?.dispose();
+  lastAction.value = 'dispose 销毁实例';
+};
+
+const recreate = (): void => {
+  remountKey.value += 1;
+  lastAction.value = '通过切换 key 重建实例';
+};
+</script>
+
+<template>
+  <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px">
+    <YButton size="small" type="primary" @click="randomizeMerge">setOption 合并更新</YButton>
+    <YButton size="small" @click="replaceOption">setOption 覆盖 (notMerge)</YButton>
+    <YButton size="small" @click="getIns">getInstance</YButton>
+    <YButton size="small" @click="toggleWidth">改变容器宽度</YButton>
+    <YButton size="small" @click="manualResize">手动重绘 resize</YButton>
+    <YButton size="small" danger @click="doDispose">dispose 销毁</YButton>
+    <YButton size="small" @click="recreate">重建实例</YButton>
+  </div>
+  <div class="demo-hint-text" style="margin-bottom: 8px; color: var(--demo-text-muted)">
+    本示例关闭了自动自适应 (autoresize=false)。改变容器宽度后需要手动调用 resize。
+  </div>
+  <div :style="{ width: boxWidth, height: '360px', border: '1px dashed var(--demo-border-color, #d9d9d9)' }">
+    <YEcharts ref="chartRef" :key="remountKey" :options="option" :autoresize="false" />
+  </div>
+  <div style="margin-top: 8px; color: var(--demo-text-muted)">容器宽度：{{ boxWidth }}</div>
+  <div v-if="lastAction" style="margin-top: 4px; color: var(--demo-text-muted)">最近操作：{{ lastAction }}</div>
+  <div v-if="instanceInfo" style="margin-top: 4px; color: var(--demo-text-muted)">实例：{{ instanceInfo }}</div>
+  <div class="demo-hint-text" style="margin-top: 8px; color: var(--demo-text-muted)">
+    场景说明：
+    <span>
+      1) 在侧边栏伸缩/容器尺寸变化但未启用自动自适应时，调用 <code>resize</code>； 2) 基于已有配置动态更新数据时，使用
+      <code>setOption</code> 合并； 3) 需要完全替换图表类型/结构时，使用 <code>setOption(notMerge=true)</code>； 4)
+      离开路由或销毁时机手动释放资源，调用 <code>dispose</code>。
+    </span>
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/echarts/funnel.vue

@@ -0,0 +1,42 @@
+<template>
+  <div style="width: 100%; height: 360px">
+    <YEcharts :options="option" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { ref } from 'vue';
+
+const option = ref<EChartsCoreOption>({
+  title: { text: '漏斗图' },
+  tooltip: { trigger: 'item', formatter: '{b} : {c}%' },
+  series: [
+    {
+      name: '转化',
+      type: 'funnel',
+      left: '10%',
+      top: 60,
+      bottom: 20,
+      width: '80%',
+      min: 0,
+      max: 100,
+      minSize: '0%',
+      maxSize: '100%',
+      sort: 'descending',
+      gap: 2,
+      label: { show: true, position: 'inside' },
+      data: [
+        { value: 100, name: '展现' },
+        { value: 80, name: '点击' },
+        { value: 60, name: '访问' },
+        { value: 30, name: '咨询' },
+        { value: 10, name: '订单' },
+      ],
+    },
+  ],
+});
+</script>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/echarts/gauge.vue

@@ -0,0 +1,25 @@
+<template>
+  <div style="width: 100%; height: 360px">
+    <YEcharts :options="option" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { ref } from 'vue';
+
+const option = ref<EChartsCoreOption>({
+  title: { text: '仪表盘' },
+  series: [
+    {
+      type: 'gauge',
+      progress: { show: true },
+      detail: { valueAnimation: true, formatter: '{value}%' },
+      data: [{ value: 65, name: '完成率' }],
+    },
+  ],
+});
+</script>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/echarts/line.vue

@@ -0,0 +1,24 @@
+<template>
+  <div style="width: 100%; height: 360px">
+    <YEcharts :options="option" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { ref } from 'vue';
+
+const option = ref<EChartsCoreOption>({
+  title: { text: '折线图' },
+  tooltip: { trigger: 'axis' },
+  xAxis: { type: 'category', boundaryGap: false, data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'] },
+  yAxis: { type: 'value' },
+  series: [
+    { type: 'line', name: 'PV', smooth: true, data: [120, 200, 150, 80, 70, 110] },
+    { type: 'line', name: 'UV', smooth: true, data: [90, 130, 120, 60, 50, 90] },
+  ],
+});
+</script>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/echarts/mix.vue

@@ -0,0 +1,33 @@
+<template>
+  <div style="width: 100%; height: 360px">
+    <YEcharts :options="option" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { ref } from 'vue';
+
+const option = ref<EChartsCoreOption>({
+  title: { text: '折柱混合' },
+  tooltip: { trigger: 'axis' },
+  legend: {},
+  xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }],
+  yAxis: [
+    { type: 'value', name: '销量' },
+    {
+      type: 'value',
+      name: '均价',
+      alignTicks: true,
+      splitLine: { show: false },
+    },
+  ],
+  series: [
+    { name: '销量', type: 'bar', data: [23, 19, 36, 10, 15, 22, 18] },
+    { name: '均价', type: 'line', yAxisIndex: 1, smooth: true, data: [12, 14, 15, 16, 12, 10, 9] },
+  ],
+});
+</script>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/echarts/pie.vue

@@ -0,0 +1,34 @@
+<template>
+  <div style="width: 100%; height: 360px">
+    <YEcharts :options="option" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { ref } from 'vue';
+
+const option = ref<EChartsCoreOption>({
+  title: { text: '饼图', left: 'center' },
+  tooltip: { trigger: 'item' },
+  legend: { orient: 'vertical', left: 'left' },
+  series: [
+    {
+      name: '访问来源',
+      type: 'pie',
+      radius: '60%',
+      data: [
+        { value: 1048, name: '搜索' },
+        { value: 735, name: '直接' },
+        { value: 580, name: '邮件' },
+        { value: 484, name: '联盟' },
+        { value: 300, name: '视频' },
+      ],
+      emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0 } },
+    },
+  ],
+});
+</script>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/echarts/radar.vue

@@ -0,0 +1,38 @@
+<template>
+  <div style="width: 100%; height: 360px">
+    <YEcharts :options="option" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { ref } from 'vue';
+
+const option = ref<EChartsCoreOption>({
+  title: { text: '雷达图' },
+  legend: { data: ['预算', '开销'] },
+  radar: {
+    indicator: [
+      { name: '销售', max: 6500 },
+      { name: '管理', max: 16000 },
+      { name: '信息技术', max: 30000 },
+      { name: '客服', max: 38000 },
+      { name: '研发', max: 52000 },
+      { name: '市场', max: 25000 },
+    ],
+  },
+  series: [
+    {
+      name: '预算 vs 开销',
+      type: 'radar',
+      data: [
+        { value: [4300, 10000, 28000, 35000, 50000, 19000], name: '预算' },
+        { value: [5000, 14000, 28000, 31000, 42000, 21000], name: '开销' },
+      ],
+    },
+  ],
+});
+</script>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/echarts/ring-segment.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { computed } from 'vue';
+
+const colors = ['#409eff', '#f5bf3c', '#909399', '#f95f53', '#43cf7c'];
+
+const data = [
+  { name: '运行中', value: 30 },
+  { name: '等待中', value: 60 },
+  { name: '暂停', value: 90 },
+  { name: '失败', value: 100 },
+  { name: '成功', value: 110 },
+];
+
+const max = computed(() => Math.max(...data.map(item => item.value)));
+const sum = computed(() => data.reduce((acc, item) => acc + item.value, 0));
+
+const getTooltipText = ({ name = '', value = 0 }: { name?: string; value?: number }): string => {
+  const percent = sum.value === 0 ? '0.0' : ((value / sum.value) * 100).toFixed(1);
+  return `${name}: ${value} (${percent}%)`;
+};
+
+const option = computed<EChartsCoreOption>(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: (params: { name?: string; value?: number }) => getTooltipText(params),
+  },
+  angleAxis: {
+    show: false,
+    clockwise: false,
+    max: max.value + max.value / 3,
+  },
+  radiusAxis: {
+    type: 'category',
+    data: data.map(item => `${item.name}:(${((item.value / sum.value) * 100).toFixed(1)}%)`),
+    z: 10,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    axisLabel: {
+      interval: 0,
+      color: '#333',
+      align: 'left',
+      margin: -10,
+    },
+  },
+  polar: {
+    show: false,
+    center: ['50%', '50%'],
+  },
+  series: [
+    {
+      type: 'bar',
+      data: data.map((item, index) => ({
+        value: item.value,
+        name: item.name,
+        itemStyle: { color: colors[index] },
+      })),
+      barWidth: 16,
+      coordinateSystem: 'polar',
+    },
+  ],
+}));
+</script>
+
+<template>
+  <div class="ring-segment-demo">
+    <YEcharts :options="option" />
+  </div>
+</template>
+
+<style scoped lang="less">
+.ring-segment-demo {
+  width: 100%;
+  height: 360px;
+}
+</style>