create-yss-spec 3.3.1 → 3.3.3

package/template/.trae/skills/yss-ui/assets/demos/monaco/log-viewer.vue

@@ -1,260 +0,0 @@
-<script setup lang="ts">
-import { ref, onBeforeUnmount } from 'vue';
-import { YMonaco, YButton } from '@yss-ui/components';
-import { Space, Tag, Alert } from 'ant-design-vue';
-import { PlayCircleOutlined, PauseCircleOutlined, ClearOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
-
-/**
- * 日志查看器示例
- * - 模拟服务日志增量加载
- * - 滚动到底部触发加载更多
- * - 行数限制与自动清理
- *
- * 语言选择说明：
- * - 使用 'shell' 可高亮路径、IP、数字等常见日志元素
- * - 也可使用 'plaintext' 作为纯文本显示
- */
-
-const monacoRef = ref<any>(null);
-const isStreaming = ref(false);
-const logCount = ref(0);
-const totalLines = ref(0);
-let streamTimer: number | null = null;
-let batchCounter = 1;
-
-/** 日志类型枚举 */
-const LOG_LEVELS = ['INFO', 'WARN', 'ERROR', 'DEBUG'];
-
-/** 生成随机日志内容 */
-const generateLogLine = (): string => {
-  const timestamp = new Date().toISOString();
-  const level = LOG_LEVELS[Math.floor(Math.random() * LOG_LEVELS.length)];
-  const messages = [
-    'Request processed successfully',
-    'Database connection established',
-    'Cache miss for key: user_session_12345',
-    'API call to external service completed',
-    'Background task executed',
-    'User authentication successful',
-    'File upload completed: document.pdf',
-    'Email notification sent',
-    'Memory usage: 1024MB / 2048MB',
-    'Transaction committed successfully',
-  ];
-  const message = messages[Math.floor(Math.random() * messages.length)];
-  const threadId = Math.floor(Math.random() * 100);
-
-  return `[${timestamp}] [${level}] [Thread-${threadId}] ${message}`;
-};
-
-/** 开始模拟日志流 */
-const startLogStream = () => {
-  if (isStreaming.value) return;
-
-  isStreaming.value = true;
-  logCount.value = 0;
-
-  streamTimer = window.setInterval(() => {
-    if (!monacoRef.value) {
-      console.warn('⚠️ monacoRef.value 为 null');
-      return;
-    }
-
-    // 每次追加 5-10 行日志
-    const linesToAdd = Math.floor(Math.random() * 6) + 5;
-    const logs = [];
-
-    for (let i = 0; i < linesToAdd; i++) {
-      logs.push(generateLogLine());
-      logCount.value++;
-    }
-
-    const content = logs.join('\n');
-    console.log(`📝 准备追加 ${linesToAdd} 行日志，总计 ${content.length} 字符`);
-
-    monacoRef.value.appendContent(content);
-    totalLines.value = monacoRef.value.getLineCount();
-
-    console.log(`📊 当前行数: ${totalLines.value}`);
-  }, 500); // 每 500ms 追加一批
-};
-
-/** 停止日志流 */
-const stopLogStream = () => {
-  if (streamTimer) {
-    clearInterval(streamTimer);
-    streamTimer = null;
-  }
-  isStreaming.value = false;
-};
-
-/** 清空日志 */
-const clearLogs = () => {
-  stopLogStream();
-  monacoRef.value?.clearContent();
-  logCount.value = 0;
-  totalLines.value = 0;
-  batchCounter = 1;
-};
-
-/** 手动滚动到底部 */
-const scrollToBottom = () => {
-  monacoRef.value?.scrollToBottom();
-};
-
-/** 滚动到底部事件处理 */
-const handleScrollEnd = () => {
-  console.log('📍 滚动到底部，模拟加载更多...');
-
-  if (!monacoRef.value || !isStreaming.value) return;
-
-  // 模拟从后端请求更多日志
-  const moreLogs = [];
-  for (let i = 0; i < 20; i++) {
-    moreLogs.push(generateLogLine());
-    logCount.value++;
-  }
-
-  monacoRef.value.appendContent(`\n--- 批次 ${batchCounter++} ---\n${moreLogs.join('\n')}`);
-  totalLines.value = monacoRef.value.getLineCount();
-};
-
-/** 行数超出限制事件处理 */
-const handleLineExceed = (lines: number) => {
-  console.log(`⚠️ 日志行数超出限制：${lines} 行，已自动清理`);
-};
-
-onBeforeUnmount(() => {
-  stopLogStream();
-});
-</script>
-
-<template>
-  <div class="log-viewer-demo">
-    <div class="control-panel">
-      <Space>
-        <y-button v-if="!isStreaming" type="primary" @click="startLogStream">
-          <template #icon><PlayCircleOutlined /></template>
-          开始模拟日志流
-        </y-button>
-        <y-button v-else danger @click="stopLogStream">
-          <template #icon><PauseCircleOutlined /></template>
-          停止日志流
-        </y-button>
-        <y-button @click="clearLogs">
-          <template #icon><ClearOutlined /></template>
-          清空日志
-        </y-button>
-        <y-button @click="scrollToBottom">
-          <template #icon><ArrowDownOutlined /></template>
-          滚动到底部
-        </y-button>
-      </Space>
-
-      <div class="stats">
-        <Tag color="blue">总日志数: {{ logCount }}</Tag>
-        <Tag color="green">当前行数: {{ totalLines }}</Tag>
-        <Tag v-if="isStreaming" color="orange"> <span class="blinking-dot">●</span> 实时流式 </Tag>
-      </div>
-    </div>
-
-    <div class="log-container">
-      <YMonaco
-        ref="monacoRef"
-        :model-value="''"
-        :log-mode="true"
-        :max-lines="5000"
-        :scroll-threshold="10"
-        :auto-scroll="true"
-        language="shell"
-        :height="500"
-        :readonly="true"
-        :options="{
-          fontSize: 13,
-          lineNumbers: 'on',
-          scrollBeyondLastLine: false,
-          minimap: { enabled: false },
-          wordWrap: 'off',
-        }"
-        @scroll-end="handleScrollEnd"
-        @line-exceed="handleLineExceed"
-      />
-    </div>
-
-    <div class="tips">
-      <Alert type="info" show-icon>
-        <template #message>
-          <strong>功能说明</strong>
-        </template>
-        <template #description>
-          <ul>
-            <li>✅ <strong>自动滚动</strong>：启用日志流后自动滚动到底部显示最新日志</li>
-            <li>✅ <strong>滚动触底加载</strong>：手动滚动到底部时会触发加载更多日志</li>
-            <li>✅ <strong>行数限制</strong>：最大保留 5000 行，超出时自动删除旧日志</li>
-            <li>✅ <strong>性能优化</strong>：采用增量追加而非全量替换，Monaco 虚拟滚动性能优异</li>
-            <li>💡 查看控制台可以看到 <code>scroll-end</code> 事件触发日志</li>
-          </ul>
-        </template>
-      </Alert>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="less">
-.log-viewer-demo {
-  .control-panel {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-    padding: 12px 16px;
-    border-radius: 4px;
-
-    .stats {
-      display: flex;
-      gap: 8px;
-    }
-
-    .blinking-dot {
-      animation: blink 1.5s infinite;
-    }
-  }
-
-  // .log-container {
-  //   margin-bottom: 16px;
-  //   border: 1px solid #d9d9d9;
-  //   border-radius: 4px;
-  //   overflow: hidden;
-  // }
-
-  .tips {
-    ul {
-      margin: 8px 0 0 0;
-      padding-left: 20px;
-
-      li {
-        margin-bottom: 4px;
-        line-height: 1.8;
-      }
-
-      code {
-        padding: 2px 6px;
-        background: #f0f0f0;
-        border-radius: 3px;
-        font-family: 'Consolas', 'Monaco', monospace;
-        font-size: 0.9em;
-      }
-    }
-  }
-}
-
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.3;
-  }
-}
-</style>

package/template/.trae/skills/yss-ui/assets/demos/monaco/mock/mockLogApi.ts

@@ -1,199 +0,0 @@
-/**
- * 日志 API 模拟层
- * 模拟真实的前后端联调场景
- */
-
-/** 日志等级枚举 */
-export type LogLevel = 'INFO' | 'WARN' | 'ERROR' | 'DEBUG';
-
-/** 日志条目接口 */
-export interface LogEntry {
-  timestamp: string;
-  level: LogLevel;
-  thread: string;
-  logger: string;
-  message: string;
-}
-
-/** 分页响应接口 */
-export interface LogPageResponse {
-  data: LogEntry[];
-  page: number;
-  size: number;
-  total: number;
-  hasMore: boolean;
-}
-
-/** 日志消息模板 */
-const LOG_MESSAGES = {
-  INFO: [
-    'Application started successfully',
-    'Database connection pool initialized with 20 connections',
-    'HTTP server listening on port 8080',
-    'Scheduled task executed: data_sync_job',
-    'Cache refreshed: product_catalog (1024 items)',
-    'User session created: session_id=abc123',
-    'Request processed in 45ms',
-    'Background worker thread started',
-    'Configuration reloaded from application.yml',
-    'Health check passed: all services operational',
-  ],
-  WARN: [
-    'Slow query detected: SELECT * FROM users (2.3s)',
-    'Connection pool usage high: 18/20 connections in use',
-    'Cache miss rate exceeds threshold: 35%',
-    'API rate limit approaching: 950/1000 requests',
-    'Disk usage high: 85% on /data partition',
-    'Deprecated API endpoint accessed: /v1/legacy/users',
-    'Response time degraded: avg 500ms (baseline 200ms)',
-    'Memory usage high: 1.8GB / 2GB allocated',
-  ],
-  ERROR: [
-    'Failed to connect to database: connection timeout',
-    'Null pointer exception in UserService.findById()',
-    'Authentication failed: invalid credentials',
-    'File not found: /config/application.properties',
-    'External API call failed: HTTP 503 Service Unavailable',
-    'Transaction rollback: constraint violation on user_email',
-    'Failed to send email notification: SMTP connection refused',
-    'JSON parsing error: unexpected token at position 42',
-  ],
-  DEBUG: [
-    'Method entry: UserController.login(username=admin)',
-    'SQL executed: SELECT id, name FROM users WHERE id = ?',
-    'Cache hit: product_12345',
-    'Validation passed: email format valid',
-    'Cookie parsed: session_token=xyz789',
-    'Request headers: {Accept: application/json, User-Agent: ...}',
-    'Response body: {"status":"success","data":{...}}',
-    'Thread pool status: active=5, queued=2, completed=1523',
-  ],
-};
-
-/** 日志记录器名称 */
-const LOGGERS = [
-  'com.example.controller.UserController',
-  'com.example.service.OrderService',
-  'com.example.repository.ProductRepository',
-  'com.example.security.AuthenticationFilter',
-  'com.example.scheduler.DataSyncJob',
-  'com.example.util.CacheManager',
-  'org.springframework.web.servlet.DispatcherServlet',
-  'org.hibernate.engine.jdbc.spi.SqlExceptionHelper',
-];
-
-/** 生成的总日志条数 */
-const TOTAL_LOGS = 500;
-
-/** 预生成的日志数据（模拟数据库中的历史日志） */
-const allLogs: LogEntry[] = [];
-
-/**
- * 初始化日志数据（生成模拟的历史日志）
- */
-const initializeMockData = () => {
-  if (allLogs.length > 0) return; // 已初始化
-
-  const now = Date.now();
-  const levels: LogLevel[] = ['INFO', 'WARN', 'ERROR', 'DEBUG'];
-
-  for (let i = 0; i < TOTAL_LOGS; i++) {
-    // 越早的日志，时间戳越小
-    const timestamp = new Date(now - (TOTAL_LOGS - i) * 10000).toISOString();
-    const level = levels[Math.floor(Math.random() * levels.length)];
-    const messages = LOG_MESSAGES[level];
-    const message = messages[Math.floor(Math.random() * messages.length)];
-    const logger = LOGGERS[Math.floor(Math.random() * LOGGERS.length)];
-    const threadId = Math.floor(Math.random() * 20) + 1;
-
-    allLogs.push({
-      timestamp,
-      level,
-      thread: `http-nio-8080-exec-${threadId}`,
-      logger,
-      message,
-    });
-  }
-};
-
-/**
- * 模拟网络延迟
- */
-const simulateDelay = (ms: number = 500): Promise<void> => {
-  const delay = ms + Math.random() * 300; // 增加随机性
-  return new Promise(resolve => setTimeout(resolve, delay));
-};
-
-/**
- * 格式化日志条目为字符串
- */
-export const formatLogEntry = (log: LogEntry): string => {
-  return `[${log.timestamp}] [${log.level.padEnd(5)}] [${log.thread}] ${log.logger} - ${log.message}`;
-};
-
-/**
- * 初始化接口 - 获取最新的日志
- * @param size 返回的日志条数，默认 50
- */
-export const initializeLog = async (size: number = 50): Promise<LogPageResponse> => {
-  initializeMockData();
-  await simulateDelay(400);
-
-  // 返回最新的 size 条日志
-  const latestLogs = allLogs.slice(-size);
-
-  return {
-    data: latestLogs,
-    page: 1,
-    size,
-    total: allLogs.length,
-    hasMore: allLogs.length > size,
-  };
-};
-
-/**
- * 分页查询历史日志
- * @param page 页码（从 1 开始）
- * @param size 每页条数
- * @returns 分页日志数据
- */
-export const fetchHistoryLogs = async (page: number, size: number): Promise<LogPageResponse> => {
-  initializeMockData();
-  await simulateDelay(500);
-
-  // 计算起始索引（从最新的日志往前推）
-  // page=1 是最新的 size 条
-  // page=2 是次新的 size 条
-  const endIndex = allLogs.length - (page - 1) * size;
-  const startIndex = Math.max(0, endIndex - size);
-
-  const logs = allLogs.slice(startIndex, endIndex);
-
-  return {
-    data: logs.reverse(), // 反转，让最新的在下面
-    page,
-    size,
-    total: allLogs.length,
-    hasMore: startIndex > 0,
-  };
-};
-
-/**
- * 生成实时日志（用于模拟新日志产生）
- */
-export const generateRealtimeLog = (): LogEntry => {
-  const levels: LogLevel[] = ['INFO', 'WARN', 'ERROR', 'DEBUG'];
-  const level = levels[Math.floor(Math.random() * levels.length)];
-  const messages = LOG_MESSAGES[level];
-  const message = messages[Math.floor(Math.random() * messages.length)];
-  const logger = LOGGERS[Math.floor(Math.random() * LOGGERS.length)];
-  const threadId = Math.floor(Math.random() * 20) + 1;
-
-  return {
-    timestamp: new Date().toISOString(),
-    level,
-    thread: `http-nio-8080-exec-${threadId}`,
-    logger,
-    message,
-  };
-};

package/template/.trae/skills/yss-ui/assets/demos/monaco/monaco.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { YButton, YMonaco, YssFormily } from '@yss-ui/components';
-import { ref } from 'vue';
-
-const formRef = ref<any>();
-
-const initialValues = {
-  code: 'SELECT 1 AS id;',
-};
-
-const schema = {
-  type: 'object',
-  properties: {
-    layout: {
-      type: 'void',
-      'x-component': 'FormLayout',
-      'x-component-props': { layout: 'vertical', labelWidth: 90 },
-      properties: {
-        grid: {
-          type: 'void',
-          'x-component': 'FormGrid',
-          'x-component-props': { maxColumns: 1, minColumns: 1 },
-          properties: {
-            code: {
-              type: 'string',
-              title: 'SQL',
-              'x-decorator': 'FormItem',
-              // 使用插槽承载自定义编辑器，与 field.value/field.setValue 联动
-              'x-component': 'Slot',
-              'x-component-props': { name: 'monacoSlot', params: ['field'] },
-              'x-decorator-props': { gridSpan: 1 },
-            },
-          },
-        },
-      },
-    },
-  },
-} as const;
-
-const onGet = (): void => {
-  const values = formRef.value?.getValues?.();
-  // eslint-disable-next-line no-console
-  console.log('[Formily + YMonaco] 当前 code 值:', values?.code);
-};
-
-const sampleSQL = 'SELECT *\nFROM demo_table\nWHERE status = 1;';
-const onSet = (): void => {
-  formRef.value?.setValues?.({ code: sampleSQL });
-};
-</script>
-
-<template>
-  <div>
-    <YssFormily ref="formRef" :schema="schema" :initial-values="initialValues">
-      <template #monacoSlot="{ field }">
-        <YMonaco v-model="field.value" language="sql" height="360px" />
-      </template>
-    </YssFormily>
-    <div style="margin-top: 12px; display: flex; justify-content: flex-end">
-      <YButton theme="primary" type="primary" @click="onGet">获取值</YButton>
-      <YButton style="margin-left: 8px" @click="onSet">设置示例 SQL</YButton>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>

package/template/.trae/skills/yss-ui/assets/demos/monaco/readonly.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { YButton, YMonaco } from '@yss-ui/components';
-import { ref } from 'vue';
-
-const readonly = ref<boolean>(true);
-const code = ref<string>(`SELECT *\nFROM users\nWHERE status = 'active';\n`);
-
-function toggle() {
-  readonly.value = !readonly.value;
-}
-</script>
-
-<template>
-  <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px">
-    <YButton size="small" @click="toggle">切换只读：{{ readonly ? '开' : '关' }}</YButton>
-  </div>
-  <YMonaco v-model="code" language="sql" :readonly="readonly" />
-</template>
-
-<style scoped></style>

package/template/.trae/skills/yss-ui/assets/demos/monaco/resizable.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { YMonaco } from '@yss-ui/components';
-import { ref } from 'vue';
-
-const code = ref<string>(`-- 拖动右下角可以改变编辑器宽高\nSELECT * FROM dual;`);
-</script>
-
-<template>
-  <YMonaco
-    v-model="code"
-    language="sql"
-    theme="vs"
-    :height="260"
-    :width="'100%'"
-    :resizable="true"
-    :resize-directions="['se', 'e', 's']"
-    :min-width="360"
-    :min-height="160"
-  />
-</template>
-
-<style scoped></style>

package/template/.trae/skills/yss-ui/assets/demos/monaco/sql-schema.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { YMonaco } from '@yss-ui/components';
-import { ref } from 'vue';
-
-const sql = ref<string>('SELECT u.id, u.name FROM users u JOIN orders o ON u.id = o.user_id');
-
-const sqlSchema = {
-  schema: 'public',
-  tables: [
-    { name: 'users', columns: [{ name: 'id' }, { name: 'name' }, { name: 'age' }] },
-    { name: 'orders', columns: [{ name: 'order_id' }, { name: 'user_id' }, { name: 'amount' }] },
-  ],
-};
-</script>
-
-<template>
-  <YMonaco v-model="sql" language="sql" :sql-schema="sqlSchema" :height="300" />
-</template>
-
-<style scoped></style>

package/template/.trae/skills/yss-ui/assets/demos/monaco/switch-lang-theme.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { YMonaco } from '@yss-ui/components';
-import { Select } from 'ant-design-vue';
-import { ref, watch } from 'vue';
-
-const refEditor = ref<InstanceType<typeof YMonaco> | null>(null);
-const lang = ref<'javascript' | 'json' | 'sql'>('json');
-const theme = ref<'vs' | 'vs-dark'>('vs');
-const code = ref<string>(`{\n  "name": "yss-ui",\n  "version": "1.0.0"\n}\n`);
-
-const langOptions = [
-  { label: 'Javascript', value: 'javascript' },
-  { label: 'Typescript', value: 'typescript' },
-  { label: 'JSON', value: 'json' },
-  { label: 'SQL', value: 'sql' },
-  { label: 'Python', value: 'python' },
-  { label: 'Java', value: 'java' },
-  { label: 'Go', value: 'go' },
-  { label: 'HTML', value: 'html' },
-  { label: 'CSS', value: 'css' },
-  { label: 'YAML', value: 'yaml' },
-  { label: 'Markdown', value: 'markdown' },
-  { label: 'Shell', value: 'shell' },
-  { label: 'Ruby', value: 'ruby' },
-  { label: 'Rust', value: 'rust' },
-  { label: 'PHP', value: 'php' },
-  { label: 'YAML', value: 'yaml' },
-];
-
-const themeOptions = [
-  { label: 'Vs', value: 'vs' },
-  { label: 'Vs-dark', value: 'vs-dark' },
-];
-
-watch(theme, newVal => {
-  refEditor.value?.setTheme(newVal);
-});
-</script>
-
-<template>
-  <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px">
-    <Select v-model:value="lang" :options="langOptions" style="width: 120px" />
-    <Select v-model:value="theme" :options="themeOptions" style="width: 120px" />
-  </div>
-  <YMonaco ref="refEditor" v-model="code" :language="lang" :theme="theme" :height="260" />
-</template>
-
-<style scoped></style>

package/template/.trae/skills/yss-ui/assets/demos/split-pane/tree-table/constant.ts

@@ -1,18 +0,0 @@
-export const initialTreeData: any[] = [
-  {
-    key: 'all',
-    title: '所有任务流',
-    children: [
-      { key: 'test', title: 'test' },
-      { key: 'a', title: '委外管理平台' },
-      { key: 'b', title: '投资管理演示' },
-      { key: 'c', title: '数仓演示' },
-      { key: 'd', title: '数据质量V2' },
-    ],
-  },
-];
-
-export const rows = Array.from({ length: 8 }).map((_, i) => ({
-  id: i + 1,
-  name: ['echo_date', 'ee', 'echo_params', 'd_i', 'U_condition', 'U_sub'][i % 6] + (i > 4 ? `_${i}` : ''),
-}));