sillyspec 3.20.3 → 3.20.4

package/packages/dashboard/src/composables/useLayout.js

@@ -0,0 +1,131 @@
+/**
+ * 布局管理 Composable
+ * 管理双层布局的概览/详情比例和三栏宽度
+ */
+import { reactive, ref, onMounted } from 'vue'
+
+const STORAGE_KEY = 'dashboard-layout-v2'
+
+// 默认值
+const DEFAULT_OVERVIEW_HEIGHT = 30 // 概览区域百分比
+const DEFAULT_COLUMN_WIDTHS = [33.33, 33.33, 33.33] // 三栏宽度百分比
+
+// 最小值限制
+const MIN_OVERVIEW_HEIGHT = 15
+const MAX_OVERVIEW_HEIGHT = 75
+const MIN_COLUMN_WIDTH = 10
+
+/**
+ * 布局管理 Hook
+ */
+export function useLayout() {
+  // 布局状态
+  const layout = reactive({
+    overviewHeight: DEFAULT_OVERVIEW_HEIGHT,
+    columnWidths: [...DEFAULT_COLUMN_WIDTHS]
+  })
+
+  // 拖动状态
+  const isDragging = ref(false)
+  const dragType = ref(null) // 'vertical' | 'horizontal'
+
+  /**
+   * 加载保存的布局
+   */
+  function loadLayout() {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY)
+      if (saved) {
+        const parsed = JSON.parse(saved)
+        if (parsed.overviewHeight !== undefined) {
+          layout.overviewHeight = Math.max(MIN_OVERVIEW_HEIGHT, Math.min(MAX_OVERVIEW_HEIGHT, parsed.overviewHeight))
+        }
+        if (Array.isArray(parsed.columnWidths) && parsed.columnWidths.length === 3) {
+          layout.columnWidths = parsed.columnWidths
+        }
+      }
+    } catch (e) {
+      console.error('Failed to load layout:', e)
+      // 使用默认值
+      resetLayout()
+    }
+  }
+
+  /**
+   * 保存布局到 localStorage
+   */
+  function saveLayout() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        overviewHeight: layout.overviewHeight,
+        columnWidths: layout.columnWidths
+      }))
+    } catch (e) {
+      console.error('Failed to save layout:', e)
+    }
+  }
+
+  /**
+   * 重置布局为默认值
+   */
+  function resetLayout() {
+    layout.overviewHeight = DEFAULT_OVERVIEW_HEIGHT
+    layout.columnWidths = [...DEFAULT_COLUMN_WIDTHS]
+    saveLayout()
+  }
+
+  /**
+   * 设置概览区域高度（百分比）
+   */
+  function setOverviewHeight(percent) {
+    layout.overviewHeight = Math.max(MIN_OVERVIEW_HEIGHT, Math.min(MAX_OVERVIEW_HEIGHT, percent))
+    saveLayout()
+  }
+
+  /**
+   * 设置列宽度（索引，百分比）
+   */
+  function setColumnWidth(index, percent) {
+    if (index >= 0 && index < 3) {
+      layout.columnWidths[index] = Math.max(MIN_COLUMN_WIDTH, percent)
+      saveLayout()
+    }
+  }
+
+  /**
+   * 开始拖动
+   */
+  function startDrag(type) {
+    isDragging.value = true
+    dragType.value = type
+    document.body.classList.add('resizing')
+  }
+
+  /**
+   * 结束拖动
+   */
+  function endDrag() {
+    isDragging.value = false
+    dragType.value = null
+    document.body.classList.remove('resizing')
+    saveLayout()
+  }
+
+  // 组件挂载时加载布局
+  onMounted(() => {
+    loadLayout()
+  })
+
+  return {
+    layout,
+    isDragging,
+    dragType,
+    loadLayout,
+    saveLayout,
+    resetLayout,
+    setOverviewHeight,
+    setColumnWidth,
+    startDrag,
+    endDrag
+  }
+}

package/packages/dashboard/src/composables/useWebSocket.js

@@ -1,129 +1,129 @@
-import { ref, onMounted, onUnmounted } from 'vue'
-
-/**
- * WebSocket connection composable with auto-reconnect
- * @returns {object} WebSocket API
- */
-export function useWebSocket() {
-  const ws = ref(null)
-  const connected = ref(false)
-  const reconnectTimeout = ref(null)
-  const handlers = new Map()
-
-  /**
-   * Connect to WebSocket server
-   */
-  function connect() {
-    const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
-    const wsUrl = `${protocol}//${location.host}`
-
-    ws.value = new WebSocket(wsUrl)
-
-    ws.value.onopen = () => {
-      connected.value = true
-      console.log('WebSocket connected')
-    }
-
-    ws.value.onclose = () => {
-      connected.value = false
-      console.log('WebSocket disconnected, reconnecting in 3s...')
-
-      // Auto-reconnect after 3 seconds
-      reconnectTimeout.value = setTimeout(() => {
-        connect()
-      }, 3000)
-    }
-
-    ws.value.onerror = (err) => {
-      console.error('WebSocket error:', err)
-    }
-
-    ws.value.onmessage = (event) => {
-      try {
-        const message = JSON.parse(event.data)
-        const { type, data } = message
-
-        // Call registered handlers for this message type
-        const typeHandlers = handlers.get(type) || []
-        typeHandlers.forEach(handler => handler(data))
-
-        // Call wildcard handlers
-        const wildcardHandlers = handlers.get('*') || []
-        wildcardHandlers.forEach(handler => handler(message))
-      } catch (err) {
-        console.error('Error parsing WebSocket message:', err)
-      }
-    }
-  }
-
-  /**
-   * Register event handler for a message type
-   * @param {string} type - Message type
-   * @param {function} handler - Handler function
-   * @returns {function} Unsubscribe function
-   */
-  function on(type, handler) {
-    if (!handlers.has(type)) {
-      handlers.set(type, [])
-    }
-    handlers.get(type).push(handler)
-
-    // Return unsubscribe function
-    return () => {
-      const typeHandlers = handlers.get(type)
-      if (typeHandlers) {
-        const index = typeHandlers.indexOf(handler)
-        if (index > -1) {
-          typeHandlers.splice(index, 1)
-        }
-      }
-    }
-  }
-
-  /**
-   * Send message to server
-   * @param {object} data - Message data
-   */
-  function send(data) {
-    if (ws.value && connected.value) {
-      ws.value.send(JSON.stringify(data))
-    } else {
-      console.warn('Cannot send message: WebSocket not connected')
-    }
-  }
-
-  /**
-   * Disconnect WebSocket
-   */
-  function disconnect() {
-    if (reconnectTimeout.value) {
-      clearTimeout(reconnectTimeout.value)
-      reconnectTimeout.value = null
-    }
-
-    if (ws.value) {
-      ws.value.close()
-      ws.value = null
-    }
-
-    connected.value = false
-  }
-
-  // Auto-connect on mount
-  onMounted(() => {
-    connect()
-  })
-
-  // Cleanup on unmount
-  onUnmounted(() => {
-    disconnect()
-  })
-
-  return {
-    connected,
-    on,
-    send,
-    disconnect,
-    reconnect: connect
-  }
-}
+import { ref, onMounted, onUnmounted } from 'vue'
+
+/**
+ * WebSocket connection composable with auto-reconnect
+ * @returns {object} WebSocket API
+ */
+export function useWebSocket() {
+  const ws = ref(null)
+  const connected = ref(false)
+  const reconnectTimeout = ref(null)
+  const handlers = new Map()
+
+  /**
+   * Connect to WebSocket server
+   */
+  function connect() {
+    const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
+    const wsUrl = `${protocol}//${location.host}`
+
+    ws.value = new WebSocket(wsUrl)
+
+    ws.value.onopen = () => {
+      connected.value = true
+      console.log('WebSocket connected')
+    }
+
+    ws.value.onclose = () => {
+      connected.value = false
+      console.log('WebSocket disconnected, reconnecting in 3s...')
+
+      // Auto-reconnect after 3 seconds
+      reconnectTimeout.value = setTimeout(() => {
+        connect()
+      }, 3000)
+    }
+
+    ws.value.onerror = (err) => {
+      console.error('WebSocket error:', err)
+    }
+
+    ws.value.onmessage = (event) => {
+      try {
+        const message = JSON.parse(event.data)
+        const { type, data } = message
+
+        // Call registered handlers for this message type
+        const typeHandlers = handlers.get(type) || []
+        typeHandlers.forEach(handler => handler(data))
+
+        // Call wildcard handlers
+        const wildcardHandlers = handlers.get('*') || []
+        wildcardHandlers.forEach(handler => handler(message))
+      } catch (err) {
+        console.error('Error parsing WebSocket message:', err)
+      }
+    }
+  }
+
+  /**
+   * Register event handler for a message type
+   * @param {string} type - Message type
+   * @param {function} handler - Handler function
+   * @returns {function} Unsubscribe function
+   */
+  function on(type, handler) {
+    if (!handlers.has(type)) {
+      handlers.set(type, [])
+    }
+    handlers.get(type).push(handler)
+
+    // Return unsubscribe function
+    return () => {
+      const typeHandlers = handlers.get(type)
+      if (typeHandlers) {
+        const index = typeHandlers.indexOf(handler)
+        if (index > -1) {
+          typeHandlers.splice(index, 1)
+        }
+      }
+    }
+  }
+
+  /**
+   * Send message to server
+   * @param {object} data - Message data
+   */
+  function send(data) {
+    if (ws.value && connected.value) {
+      ws.value.send(JSON.stringify(data))
+    } else {
+      console.warn('Cannot send message: WebSocket not connected')
+    }
+  }
+
+  /**
+   * Disconnect WebSocket
+   */
+  function disconnect() {
+    if (reconnectTimeout.value) {
+      clearTimeout(reconnectTimeout.value)
+      reconnectTimeout.value = null
+    }
+
+    if (ws.value) {
+      ws.value.close()
+      ws.value = null
+    }
+
+    connected.value = false
+  }
+
+  // Auto-connect on mount
+  onMounted(() => {
+    connect()
+  })
+
+  // Cleanup on unmount
+  onUnmounted(() => {
+    disconnect()
+  })
+
+  return {
+    connected,
+    on,
+    send,
+    disconnect,
+    reconnect: connect
+  }
+}

package/packages/dashboard/src/main.js

@@ -1,8 +1,8 @@
-import { createApp } from 'vue'
-import naive from 'naive-ui'
-import App from './App.vue'
-import './style.css'
-
-const app = createApp(App)
-app.use(naive)
-app.mount('#app')
+import { createApp } from 'vue'
+import naive from 'naive-ui'
+import App from './App.vue'
+import './style.css'
+
+const app = createApp(App)
+app.use(naive)
+app.mount('#app')

package/packages/dashboard/src/style.css

@@ -1,132 +1,132 @@
-@import "tailwindcss";
-
-@theme {
-  --color-bg: #F5F5F7;
-  --color-primary: #D97706;
-  --color-primary-dim: #92400E;
-  --color-warning: #EA580C;
-  --color-danger: #DC2626;
-  --color-muted: #6B7280;
-  --color-surface: #FFFFFF;
-  --color-surface-2: #F0F0F3;
-  --color-border: #E5E5EA;
-  --color-border-light: #D1D1D6;
-  --color-text: #1C1C1E;
-  --color-text-secondary: #636366;
-  --color-info: #2563EB;
-  --color-success: #16A34A;
-
-  --font-display: 'JetBrains Mono', monospace;
-  --font-body: 'DM Sans', sans-serif;
-
-  --animate-pulse-glow: pulse-glow 2s ease-in-out infinite;
-  --animate-pulse-dot: pulse-dot 1.5s ease-in-out infinite;
-  --animate-breathe: breathe 3s ease-in-out infinite;
-  --animate-shimmer: shimmer 2s linear infinite;
-  --animate-slide-in: slide-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@keyframes pulse-glow {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
-  50% { box-shadow: 0 0 12px 2px rgba(251, 191, 36, 0.15); }
-}
-
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.4; transform: scale(1.5); }
-}
-
-@keyframes breathe {
-  0%, 100% { opacity: 0.5; }
-  50% { opacity: 1; }
-}
-
-@keyframes shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
-
-@keyframes slide-in {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes glow-border {
-  0%, 100% { border-color: rgba(251, 191, 36, 0.15); }
-  50% { border-color: rgba(251, 191, 36, 0.5); }
-}
-
-@keyframes float {
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-3px); }
-}
-
-.font-mono-log {
-  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
-
-/* Noise texture background */
-.noise-bg {
-  position: relative;
-}
-.noise-bg::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Diagonal accent stripe */
-.accent-stripe {
-  background: repeating-linear-gradient(
-    -45deg,
-    transparent,
-    transparent 8px,
-    rgba(251, 191, 36, 0.03) 8px,
-    rgba(251, 191, 36, 0.03) 9px
-  );
-}
-
-/* Progress bar */
-.progress-gradient {
-  background: linear-gradient(90deg, #FBBF24, #F59E0B, #FB923C);
-}
-
-/* Skeleton shimmer */
-.skeleton-shimmer {
-  background: linear-gradient(90deg, #1A1E28 25%, #2A3040 50%, #1A1E28 75%);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s ease-in-out infinite;
-}
-
-/* Scrollbar */
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #2A3040;
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #3A4555;
-}
-
-* {
-  scrollbar-width: thin;
-  scrollbar-color: #2A2A2D transparent;
-}
-
-/* Selection */
-::selection {
-  background: rgba(251, 191, 36, 0.2);
-  color: #FBBF24;
-}
+@import "tailwindcss";
+
+@theme {
+  --color-bg: #F5F5F7;
+  --color-primary: #D97706;
+  --color-primary-dim: #92400E;
+  --color-warning: #EA580C;
+  --color-danger: #DC2626;
+  --color-muted: #6B7280;
+  --color-surface: #FFFFFF;
+  --color-surface-2: #F0F0F3;
+  --color-border: #E5E5EA;
+  --color-border-light: #D1D1D6;
+  --color-text: #1C1C1E;
+  --color-text-secondary: #636366;
+  --color-info: #2563EB;
+  --color-success: #16A34A;
+
+  --font-display: 'JetBrains Mono', monospace;
+  --font-body: 'DM Sans', sans-serif;
+
+  --animate-pulse-glow: pulse-glow 2s ease-in-out infinite;
+  --animate-pulse-dot: pulse-dot 1.5s ease-in-out infinite;
+  --animate-breathe: breathe 3s ease-in-out infinite;
+  --animate-shimmer: shimmer 2s linear infinite;
+  --animate-slide-in: slide-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
+  50% { box-shadow: 0 0 12px 2px rgba(251, 191, 36, 0.15); }
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(1.5); }
+}
+
+@keyframes breathe {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes slide-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes glow-border {
+  0%, 100% { border-color: rgba(251, 191, 36, 0.15); }
+  50% { border-color: rgba(251, 191, 36, 0.5); }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-3px); }
+}
+
+.font-mono-log {
+  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+/* Noise texture background */
+.noise-bg {
+  position: relative;
+}
+.noise-bg::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Diagonal accent stripe */
+.accent-stripe {
+  background: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 8px,
+    rgba(251, 191, 36, 0.03) 8px,
+    rgba(251, 191, 36, 0.03) 9px
+  );
+}
+
+/* Progress bar */
+.progress-gradient {
+  background: linear-gradient(90deg, #FBBF24, #F59E0B, #FB923C);
+}
+
+/* Skeleton shimmer */
+.skeleton-shimmer {
+  background: linear-gradient(90deg, #1A1E28 25%, #2A3040 50%, #1A1E28 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #2A3040;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #3A4555;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #2A2A2D transparent;
+}
+
+/* Selection */
+::selection {
+  background: rgba(251, 191, 36, 0.2);
+  color: #FBBF24;
+}