create-yss-spec 2.1.9 → 2.1.11

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

@@ -0,0 +1,260 @@
+<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/.cursor/skills/yss-ui/assets/demos/monaco/mock/mockLogApi.ts

@@ -0,0 +1,199 @@
+/**
+ * 日志 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/.cursor/skills/yss-ui/assets/demos/monaco/monaco.vue

@@ -0,0 +1,66 @@
+<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/.cursor/skills/yss-ui/assets/demos/monaco/readonly.vue

@@ -0,0 +1,20 @@
+<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/.cursor/skills/yss-ui/assets/demos/monaco/resizable.vue

@@ -0,0 +1,22 @@
+<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/.cursor/skills/yss-ui/assets/demos/monaco/sql-schema.vue

@@ -0,0 +1,20 @@
+<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/.cursor/skills/yss-ui/assets/demos/monaco/switch-lang-theme.vue

@@ -0,0 +1,48 @@
+<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/.cursor/skills/yss-ui/assets/demos/split-pane/tree-table/constant.ts

@@ -0,0 +1,18 @@
+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}` : ''),
+}));