create-yss-spec 3.0.0 → 3.0.1

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

@@ -1,145 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/echarts/basic.vue

@@ -1,30 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/echarts/calendar-heatmap.vue

@@ -1,49 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/echarts/candlestick.vue

@@ -1,30 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/echarts/dark.vue

@@ -1,40 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/echarts/expose-methods.vue

@@ -1,97 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/echarts/funnel.vue

@@ -1,42 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/echarts/gauge.vue

@@ -1,25 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/echarts/line.vue

@@ -1,24 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/echarts/mix.vue

@@ -1,33 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/echarts/pie.vue

@@ -1,34 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/echarts/radar.vue

@@ -1,38 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/echarts/ring-segment.vue

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