StormFlow

Appearance

Design System ​

本文档描述 StormFlow 的设计规范。所有 UI 实现应遵循此规范。

风格方向 ​

深色主题，参考 Linear / Vercel 的极简感。近黑背景 + 半透明毛玻璃节点卡片，强调内容本身。减少装饰性元素，通过微妙的层级与光影传达深度。

设计架构 ​

Brand Tokens (@theme)  →  Nuxt UI Semantic (--ui-*)  →  StormFlow Domain (--sf-*)
  • Brand Tokens：OKLCH 色阶，在 @theme static 中定义，Tailwind 可直接使用（bg-brand-500）
  • Nuxt UI Semantic：覆盖 --ui-bg、--ui-border、--ui-text-* 等，所有 Nuxt UI 组件自动继承
  • StormFlow Domain：--sf-* 前缀，用于 Vue Flow 节点、边、Handle 等画布元素

颜色 ​

所有颜色使用 OKLCH 色彩空间，提供感知均匀的色阶过渡。

品牌色（Brand Purple） ​

色阶OKLCH用途
50oklch(97.0% 0.015 285)极淡背景
100oklch(93.5% 0.030 285)淡背景
200oklch(86.0% 0.060 285)轻高亮
300oklch(76.0% 0.100 285)辅助高亮
400oklch(65.0% 0.150 280)深色模式主文字/图标
500oklch(55.0% 0.190 275)品牌主色 — 按钮、选中态
600oklch(47.0% 0.180 275)悬停态
700oklch(40.0% 0.160 275)按下态
800oklch(33.0% 0.130 275)暗背景
900oklch(26.0% 0.100 275)极暗背景
950oklch(19.0% 0.070 275)最深色

品牌渐变：linear-gradient(135deg, brand-500, brand 蓝方向)

背景层级 ​

层级CSS 变量OKLCH 值用途
最底层--ui-bgoklch(8.0% 0.010 270)页面/App 背景
次底层--ui-bg-mutedoklch(12.0% 0.012 270)侧边栏、次要面板
浮层--ui-bg-elevatedoklch(16.0% 0.014 270)卡片、弹窗、下拉菜单
强调层--ui-bg-accentedoklch(20.0% 0.016 270)悬停行、激活项
反转--ui-bg-invertedoklch(95.0% 0.005 270)高对比反转（徽章等）

边框层级 ​

层级CSS 变量OKLCH 值用途
默认--ui-borderoklch(22.0% 0.012 270)标准边框
柔和--ui-border-mutedoklch(18.0% 0.010 270)微妙分隔线
强调--ui-border-accentedoklch(28.0% 0.015 270)悬停/聚焦边框
反转--ui-border-invertedoklch(90.0% 0.005 270)反转场景

文字层级 ​

层级CSS 变量OKLCH 值Nuxt UI 工具类用途
高亮--ui-text-highlightedoklch(97.0% 0.005 270)text-highlighted标题、重要信息
默认--ui-text-defaultoklch(88.0% 0.008 270)text-default正文
辅助--ui-text-mutedoklch(60.0% 0.015 270)text-muted次要文字、说明
淡化--ui-text-tonedoklch(48.0% 0.012 270)text-toned禁用、占位符
幽灵--ui-text-dimmedoklch(38.0% 0.010 270)text-dimmed极弱提示
反转--ui-text-invertedoklch(10.0% 0.010 270)text-inverted在浅色背景上

节点类型色（区分连接点与节点图标） ​

节点类型CSS 变量OKLCH 值近似色
文本节点--color-node-textoklch(63.0% 0.190 255)蓝
图片节点--color-node-imageoklch(65.0% 0.200 145)绿
视频节点--color-node-videooklch(60.0% 0.190 300)紫

语义色 ​

按 Nuxt UI 默认语义色（success、info、warning、error），不额外覆盖。

Nuxt UI 颜色映射 ​

在 app.config.ts 中配置：

ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'brand', // 品牌紫，@theme 中定义的 brand 色阶
      secondary: 'blue', // 辅助蓝
      neutral: 'slate', // 中性色，冷灰调，匹配 Linear 风格
    },
  },
})

排版 ​

字体 ​

  • 字体族：系统默认（font-sans，即 Nuxt UI 默认）
  • 等宽字体：font-mono（代码片段、数值显示）

字号层级 ​

用途字号字重行高
页面标题text-2xl（24px）font-bold1.33
节点标题text-sm（14px）font-medium1.43
正文text-sm（14px）font-normal1.43
辅助文字text-xs（12px）font-normal1.33
按钮文字text-sm（14px）font-medium1.43

节点样式 ​

属性值 / Token说明
圆角--radius-node: 0.75remTailwind rounded-node
背景--sf-node-bg半透明 + backdrop-blur(12px)
边框--sf-node-border微妙分隔
选中态--sf-node-shadow-selected品牌色光晕 + 2px 实线环
拖拽态--sf-node-shadow-dragging深阴影提升
最小宽度--sf-node-min-w: 300px
最大宽度--sf-node-max-w: 400px
最小高度--sf-node-min-h: 200px

快捷工具类：sf-glass（毛玻璃表面 = 背景 + blur + 边框）

连接点 (Handle) ​

属性值 / Token
形状圆形
默认直径--sf-handle-size: 12px
悬停直径--sf-handle-size-hover: 16px
默认边框--sf-handle-border
悬停填充--sf-handle-active（品牌色）
输入连接点节点左侧居中
输出连接点节点右侧居中

连线 (Edge) ​

属性值 / Token
类型贝塞尔曲线
默认颜色--sf-edge-color
悬停/选中--sf-edge-selected
流动动画--animate-edge-flow

画布 ​

属性值 / Token
背景点阵网格（可关闭）
网格点色--sf-grid-dot
网格间距--sf-grid-gap: 20px
网格点径--sf-grid-dot-size: 1px
缩放范围0.3x - 2.0x
平移无限制

Focus 状态 ​

  • Focus ring 使用 Nuxt UI 默认行为：primary 色（品牌紫）ring
  • 所有可交互元素（按钮、输入框、节点）必须有可见的 focus 指示器
  • Nuxt UI 组件自动提供，自定义组件需手动添加 focus-visible:ring-2 focus-visible:ring-primary

圆角 ​

层级Token值用途
组件默认--ui-radius0.5remNuxt UI 组件统一圆角
节点卡片--radius-node0.75remVue Flow 节点

工具类 ​

工具类用途
sf-glass毛玻璃表面（bg + blur + border）
sf-gradient-text品牌渐变文字
sf-gradient-bg品牌渐变背景

响应式 ​

  • 桌面端优先，最小宽度 1280px
  • MVP 阶段不考虑移动端适配

深色/浅色模式 ​

MVP 阶段仅深色主题，不提供切换。通过 nuxt.config.ts 中 colorMode.preference: 'dark' 强制。

动画 ​

属性值 / Token说明
默认过渡150ms easeTailwind transition
连线流动--animate-edge-flow虚线移动动画
节点进入--animate-node-in缩放 + 淡入
节点退出--animate-node-out缩放 + 淡出
prefers-reduced-motion全局禁用动画和过渡main.css 中 @media