@vibe-forge/client 0.2.0-alpha.0

package/src/store/index.ts

@@ -0,0 +1,23 @@
+import { atom } from 'jotai'
+
+// 侧边栏宽度
+export const sidebarWidthAtom = atom(
+  Number(localStorage.getItem('sidebarWidth')) || 300
+)
+
+// 侧边栏是否正在缩放
+export const isSidebarResizingAtom = atom<boolean>(false)
+
+// 侧边栏是否折叠
+export const isSidebarCollapsedAtom = atom(
+  localStorage.getItem('sidebarCollapsed') === 'true'
+)
+
+// 当前选中的会话 ID (全局 UI 状态，用于控制高亮等)
+export const activeSessionIdAtom = atom<string | undefined>(undefined)
+
+// 主题模式: 'light' | 'dark' | 'system'
+export type ThemeMode = 'light' | 'dark' | 'system'
+export const themeAtom = atom<ThemeMode>(
+  (localStorage.getItem('theme') as ThemeMode) || 'system'
+)

package/src/styles/global.scss

@@ -0,0 +1,100 @@
+html, body, #root, .ant-app {
+  height: 100%;
+  margin: 0;
+}
+
+.ant-app {
+  display: flex;
+  flex-direction: column;
+}
+
+.ant-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+[class*='material-symbols'] {
+  user-select: none;
+}
+
+.material-symbols-rounded {
+  font-size: 20px;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}
+
+:root {
+  --bg-color: #ffffff; /* 页面/主容器背景 */
+  --sub-bg-color: #f6f6f6; /* 次级容器背景 */
+  --sub-sub-bg-color: #e1e1e1; /* 更内层/弱化容器背景 */
+
+  --text-color: #000000; /* 主文本颜色 */
+  --sub-text-color: #1b1b1b; /* 次级容器文本颜色 */
+  --sub-sub-text-color: #303030; /* 更内层/弱化容器文本颜色 */
+
+  --border-color: #d0d0d0; /* 默认边框/分割线 */
+  --sub-border-color: #c0c0c0; /* 轻分割线/次级边框 */
+  --sub-sub-border-color: #a0a0a0; /* 弱化层级边框 */
+
+  --placeholder-color: #9ca3af; /* 页面/主容器下的占位符文本颜色 */
+
+  --tag-bg: #f9fafb; /* 标签/微容器背景 */
+  --tag-hover-bg: #f3f4f6; /* 标签/微容器悬浮背景 */
+  --code-bg: #f0f2f4; /* 代码块背景 */
+  --code-border: #f1f5f9; /* 代码块边框 */
+  --star-color: #f59e0b; /* 收藏/星标颜色 */
+  --primary-color: #6366f1; /* 主色调/主行动强调 */
+  --success-color: #0f766e; /* 成功状态颜色 */
+  --warning-color: #b45309; /* 警告状态颜色 */
+  --primary-text-color: #1d4ed8; /* 链接/强调文字颜色 */
+  --danger-color: #dc2626; /* 危险/错误状态颜色 */
+}
+
+html.dark {
+  --bg-color: #141414; /* 页面/主容器背景 */
+  --sub-bg-color: #262626; /* 次级容器背景 */
+  --sub-sub-bg-color: #303030; /* 更内层/弱化容器背景 */
+
+  --text-color: #ffffff; /* 主文本颜色 */
+  --sub-text-color: #8c8c8c; /* 次级说明文本 */
+  --sub-sub-text-color: #a5a5a5; /* 辅助弱化文本 */
+
+  --border-color: #303030; /* 默认边框/分割线 */
+  --sub-border-color: #434343; /* 轻分割线/次级边框 */
+  --sub-sub-border-color: #595959; /* 弱化层级边框 */
+
+  --placeholder-color: #575859; /* 页面/主容器下的占位符文本颜色 */
+
+  --tag-bg: #1f1f1f; /* 标签/微容器背景 */
+  --tag-hover-bg: #262626; /* 标签/微容器悬浮背景 */
+  --code-bg: #1e293b; /* 代码块背景 */
+  --code-border: #334155; /* 代码块边框 */
+  --star-color: #ffb81c; /* 收藏/星标颜色 */
+  --primary-color: #818cf8; /* 主色调/主行动强调 */
+  --success-color: #2dd4bf; /* 成功状态颜色 */
+  --warning-color: #f59e0b; /* 警告状态颜色 */
+  --primary-text-color: #60a5fa; /* 链接/强调文字颜色 */
+  --danger-color: #f87171; /* 危险/错误状态颜色 */
+}
+
+.ant-select-dropdown
+  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  background-color: var(--tag-hover-bg);
+  color: var(--text-color);
+}
+
+.ant-select-dropdown
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+  background-color: var(--primary-color);
+  color: #ffffff;
+}
+
+.ant-select-dropdown
+  .ant-select-item-option-selected.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  background-color: var(--primary-color);
+  color: #ffffff;
+}

package/src/utils/shortcutUtils.ts

@@ -0,0 +1,88 @@
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react'
+
+export type ShortcutSpec = {
+  key: string
+  metaKey: boolean
+  ctrlKey: boolean
+  altKey: boolean
+  shiftKey: boolean
+}
+
+const normalizeKey = (key: string) => {
+  if (key === ' ') return 'space'
+  return key.toLowerCase()
+}
+
+export const parseShortcut = (shortcut: string | undefined, isMac: boolean) => {
+  if (shortcut == null || shortcut.trim() === '') return null
+  const tokens = shortcut.split('+').map(token => token.trim()).filter(Boolean)
+  if (tokens.length === 0) return null
+  const parsed: ShortcutSpec = {
+    key: '',
+    metaKey: false,
+    ctrlKey: false,
+    altKey: false,
+    shiftKey: false
+  }
+  for (const token of tokens) {
+    const lower = token.toLowerCase()
+    if (lower === 'cmd' || lower === 'command' || lower === 'meta') {
+      parsed.metaKey = true
+    } else if (lower === 'ctrl' || lower === 'control') {
+      parsed.ctrlKey = true
+    } else if (lower === 'alt' || lower === 'option') {
+      parsed.altKey = true
+    } else if (lower === 'shift') {
+      parsed.shiftKey = true
+    } else if (lower === 'mod') {
+      if (isMac) parsed.metaKey = true
+      else parsed.ctrlKey = true
+    } else {
+      parsed.key = normalizeKey(lower)
+    }
+  }
+  return parsed.key === '' ? null : parsed
+}
+
+export const formatShortcutLabel = (shortcut: string | undefined, isMac: boolean) => {
+  if (shortcut == null || shortcut.trim() === '') return ''
+  const tokens = shortcut.split('+').map(token => token.trim()).filter(Boolean)
+  return tokens.map((token) => {
+    const lower = token.toLowerCase()
+    if (lower === 'mod') return isMac ? '⌘' : 'Ctrl'
+    if (lower === 'cmd' || lower === 'command' || lower === 'meta') return '⌘'
+    if (lower === 'ctrl' || lower === 'control') return 'Ctrl'
+    if (lower === 'alt' || lower === 'option') return 'Alt'
+    if (lower === 'shift') return 'Shift'
+    if (lower === 'space') return 'Space'
+    if (token.length === 1) return token.toUpperCase()
+    return token
+  }).join('+')
+}
+
+export const isShortcutMatch = (
+  e: KeyboardEvent | ReactKeyboardEvent,
+  shortcut: string | undefined,
+  isMac: boolean
+) => {
+  const parsed = parseShortcut(shortcut, isMac)
+  if (parsed == null) return false
+  if (e.metaKey !== parsed.metaKey) return false
+  if (e.ctrlKey !== parsed.ctrlKey) return false
+  if (e.altKey !== parsed.altKey) return false
+  if (e.shiftKey !== parsed.shiftKey) return false
+  return normalizeKey(e.key) === parsed.key
+}
+
+export const getShortcutFromEvent = (
+  e: KeyboardEvent | ReactKeyboardEvent
+) => {
+  const key = normalizeKey(e.key)
+  if (['meta', 'control', 'shift', 'alt'].includes(key)) return null
+  const tokens: string[] = []
+  if (e.metaKey || e.ctrlKey) tokens.push('mod')
+  if (e.shiftKey) tokens.push('shift')
+  if (e.altKey) tokens.push('alt')
+  tokens.push(key)
+  return tokens.join('+')
+}

package/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly __VF_PROJECT_AI_SERVER_HOST__: string
+  readonly __VF_PROJECT_AI_SERVER_PORT__: string
+  readonly __VF_PROJECT_AI_CLIENT_HOST__: string
+  readonly __VF_PROJECT_AI_CLIENT_PORT__: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/src/ws.ts

@@ -0,0 +1,33 @@
+import type { WSEvent } from '@vibe-forge/core'
+
+const SERVER_HOST = import.meta.env.__VF_PROJECT_AI_SERVER_HOST__ || window.location.hostname
+const SERVER_PORT = import.meta.env.__VF_PROJECT_AI_SERVER_PORT__ || '8787'
+const WS_URL = `ws://${SERVER_HOST}:${SERVER_PORT}/ws`
+
+export interface WSHandlers {
+  onOpen?: () => void
+  onMessage?: (data: WSEvent) => void
+  onError?: (err: Event) => void
+  onClose?: () => void
+}
+
+export function createSocket(handlers: WSHandlers, params?: Record<string, string>) {
+  let url = WS_URL
+  if (params) {
+    const searchParams = new URLSearchParams(params)
+    url += (url.includes('?') ? '&' : '?') + searchParams.toString()
+  }
+  const ws = new WebSocket(url)
+  ws.addEventListener('open', () => handlers.onOpen?.())
+  ws.addEventListener('message', (ev) => {
+    try {
+      const data = JSON.parse(String(ev.data)) as unknown
+      handlers.onMessage?.(data as WSEvent)
+    } catch (e) {
+      console.error(e)
+    }
+  })
+  ws.addEventListener('error', (err) => handlers.onError?.(err))
+  ws.addEventListener('close', () => handlers.onClose?.())
+  return ws
+}

package/vite.config.ts

@@ -0,0 +1,26 @@
+import process from 'node:process'
+
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react()],
+  root: '.',
+  server: {
+    host: process.env.__VF_PROJECT_AI_CLIENT_HOST__,
+    port: Number(process.env.__VF_PROJECT_AI_CLIENT_PORT__ ?? 5173)
+  },
+  envPrefix: [
+    '__VF_PROJECT_AI_'
+  ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler'
+      }
+    }
+  },
+  test: {
+    environment: 'node'
+  }
+})