ff

2026-06-16 14:34:09 +08:00
parent 1236865f4b
commit 4c56c7cb04
126 changed files with 14802 additions and 0 deletions
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -0,0 +1,176 @@
+---
+version: 1.0
+name: Haiyu AI — Sci-Fi Intelligence
+description: 海宇数科大模型官网视觉规范。深空底色 + 青紫霓虹渐变 + 微弱网格/辉光，传达「智能基础设施」而非传统企业站。
+
+colors:
+  primary: "#0b5fff"
+  on-primary: "#f8fbff"
+  ink: "#0a1224"
+  body: "#5c6b8a"
+  hairline: "#d8e2f2"
+  canvas: "#f4f8ff"
+  canvas-elevated: "#ffffff"
+  canvas-dark: "#050816"
+  canvas-dark-mid: "#0c1228"
+  surface-dark-soft: "#151d3a"
+  surface-dark-glass: "rgb(12 20 48 / 0.55)"
+  on-dark: "#eef6ff"
+  on-dark-muted: "#9eb4d8"
+  accent-cyan: "#00e8ff"
+  accent-violet: "#8b5cf6"
+  accent-magenta: "#e879f9"
+  accent-electric: "#22d3ee"
+  accent-mint: "#a5f3fc"
+  glow-cyan: "rgb(0 232 255 / 0.45)"
+  glow-violet: "rgb(139 92 246 / 0.4)"
+
+typography:
+  display-xxl:
+    fontFamily: Inter, system-ui, sans-serif
+    fontSize: 64px
+    fontWeight: 500
+    lineHeight: 1.15
+  display-xl:
+    fontSize: 40px
+    fontWeight: 500
+    lineHeight: 1.2
+  display-lg:
+    fontSize: 28px
+    fontWeight: 500
+    lineHeight: 1.3
+  display-md:
+    fontSize: 22px
+    fontWeight: 500
+    lineHeight: 1.35
+  body-lg:
+    fontSize: 18px
+    fontWeight: 400
+    lineHeight: 1.65
+  body-md:
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.7
+  caption:
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.55
+  caption-strong:
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.55
+  mono-caps-button:
+    fontFamily: JetBrains Mono, ui-monospace, monospace
+    fontSize: 14px
+    fontWeight: 500
+  mono-caps-eyebrow:
+    fontSize: 11px
+    fontWeight: 500
+    letterSpacing: 0.12em
+  mono-caption:
+    fontSize: 11px
+    fontWeight: 400
+
+rounded:
+  xs: 3.25px
+  sm: 6px
+  md: 10px
+  full: 9999px
+
+spacing:
+  section: 88px
+  container-gutter-desktop: 32px
+  container-gutter-mobile: 16px
+
+components:
+  nav-bar:
+    backgroundColor: "{colors.canvas-dark}"
+    borderColor: "rgb(0 232 255 / 0.15)"
+  button-primary:
+    background: "linear-gradient(135deg, {colors.accent-cyan}, {colors.accent-violet})"
+    textColor: "{colors.on-primary}"
+    glow: "{colors.glow-cyan}"
+  button-ghost-on-dark:
+    backgroundColor: "{colors.surface-dark-glass}"
+    borderColor: "rgb(0 232 255 / 0.25)"
+  hero-band-dark:
+    background: "{colors.canvas-dark} + mesh grid + radial violet glow"
+  card-on-dark:
+    background: "{colors.surface-dark-glass}"
+    borderColor: "rgb(0 232 255 / 0.2)"
+  card-on-light:
+    background: "{colors.canvas-elevated}"
+    borderColor: "{colors.hairline}"
+  stats-card-tinted:
+    background: "linear-gradient(145deg, rgb(0 232 255 / 0.12), rgb(139 92 246 / 0.1))"
+---
+
+## Overview
+
+海宇数科官网面向**大模型服务与智能报告**的官方展示（非控制台）。视觉关键词：**深空、霓虹、网格、辉光、数据流**。
+
+- **深色 band**（`canvas-dark`）：Hero、智能体、企业方案、联系。叠加 `band-mesh` 径向光晕与细网格，像「控制台外的指挥舱」。
+- **浅色 band**（`canvas`）：产品能力、模型表、资讯。冷白底 + 淡蓝 hairline，卡片微抬。
+- **品牌渐变**（固定三停）：`accent-cyan` → `accent-violet` → `accent-magenta`。用于 Hero 装饰、主按钮、标题 `text-gradient`。**禁止**拆成单色图标或再加第四荧光色。
+- **主 CTA**：青紫渐变底 + 外发光（`shadow-glow-cyan`），不是纯黑块。
+- **中文排版**：`locale-zh.css` 放宽行高、取消西文负字距；眉标可用 `type-eyebrow` 或 `type-mono-caps-eyebrow`（短标签）。
+
+## Colors
+
+| 令牌                                               | 用途                         |
+| -------------------------------------------------- | ---------------------------- |
+| `primary`                                          | 深色填充按钮、强调条（备用） |
+| `accent-cyan` / `accent-violet` / `accent-magenta` | 渐变与科技眉标               |
+| `canvas-dark`                                      | 深空主背景                   |
+| `canvas`                                           | 浅色 section                 |
+| `hairline`                                         | 浅色分割与卡片边             |
+| `border-glow`                                      | 深色玻璃卡边框（CSS 变量）   |
+| `on-dark` / `on-dark-muted`                        | 深色上的正文层级             |
+
+## Typography
+
+- 展示：Inter 500，标题可用 `text-gradient`（仅 h1/h2 主标题）。
+- Mono：JetBrains Mono，**仅**代码块、可选短眉标；不写长段落。
+
+## Layout
+
+- `container-site` max 1280px。
+- `band-section` 仅垂直 `section` 间距；水平只由 container 控制。
+- `section-stack` 统一块间距。
+
+## Components（实现见 `src/styles/components.css` + `effects.css`）
+
+- `btn-primary` — 渐变 + 辉光  
+- `btn-ghost-on-dark` — 玻璃描边  
+- `btn-secondary-glow` — 浅色 band 上的描边 CTA  
+- `card-on-dark` / `card-glass` — 深色玻璃  
+- `card-on-light` — 白卡 + hairline  
+- `badge-glow` — 深色上的小标签  
+- `gradient-brand` / `text-gradient` — 品牌渐变  
+
+## Do's
+
+- 深色区域加 `band-mesh` 或 `band-grid`（二选一或叠加，勿整页花屏）。
+- 统计/高亮块用 `stats-tile`（淡青紫渐变底）。
+- 模型表头用 `type-caption-strong` + `text-body`。
+
+## Don'ts
+
+- 不用 `zinc-*` / 随意 hex。
+- 不用 `prefers-color-scheme` 自动主题。
+- 浅色卡片不要大面积彩色阴影；辉光留给按钮与 Hero 装饰。
+- 主标题不要全大写 mono。
+
+## 样式文件架构
+
+```
+src/app/globals.css      # 入口：tailwind + tokens + typography + layout + components + effects + locale-zh
+src/styles/tokens.css    # @theme 色板、渐变、阴影
+src/styles/typography.css
+src/styles/layout.css    # container、band、section-stack
+src/styles/components.css
+src/styles/effects.css   # mesh、grid、text-gradient、glow、stats-tile
+src/styles/locale-zh.css # 中文排版与按钮字体
+```
+
+变更令牌时同步 `tokens.css` 与 `effects.css`，运行 `pnpm test`。