84 lines
4.5 KiB
Markdown
84 lines
4.5 KiB
Markdown
---
|
||
description: InsightReply 前端 UI/UX 编码规范与实现方案
|
||
globs: *.ts, *.tsx, *.vue, *.css, *.html
|
||
---
|
||
# InsightReply 前端 UI/UX 编码规范与实现方案
|
||
|
||
本文档基于 `ui-ux-pro-max` 高级设计理念以及现代前端工程化标准，定义了 InsightReply 浏览器插件和 Web 后台的开发规范。
|
||
|
||
## 一、 核心视觉原则 (ui-ux-pro-max 特性)
|
||
|
||
### 1. 极致暗黑与毛玻璃 (Premium Dark Mode & Glassmorphism)
|
||
我们致力于打造充满极客感、空间感和现代感的界面。
|
||
|
||
* **色彩体系**：
|
||
* 主背景色：采用深度黑或深炭灰（例如 `#0A0A0A` 到 `#171717`），坚决避免使用死板的纯黑 (`#000000`)。
|
||
* 次级面板：使用比背景稍亮的一级的灰色区分层级。
|
||
* 强调文字：避免纯白，使用柔和的高反差灰色（如 `#E5E5E5` 或 `#D4D4D4`）减轻视觉疲劳。
|
||
* **毛玻璃效果 (Glassmorphism)**：
|
||
* 重点应用场景：浏览器插件悬浮弹窗、侧边通知、下拉菜单。
|
||
* CSS 标准：`background-color: rgba(23, 23, 23, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1);`。
|
||
|
||
### 2. 动态交互与微动画 (Micro-Interactions)
|
||
所有交互必须平滑且具有生命力。
|
||
|
||
* **过渡动画 (Transitions)**：
|
||
* 所有按钮悬停 (Hover)、面板展开 (Expand) 等状态变化必须带有过渡。
|
||
* 标准推荐：`transition-all duration-200 ease-in-out`。
|
||
* **状态反馈 (Feedback)**：
|
||
* 点击事件触发时提供细微的尺寸缩小反馈 (如 `active:scale-95`)。
|
||
* Loading 或 Success 状态需辅以平滑的 SVG 骨架或打勾动画。
|
||
|
||
### 3. 排版体系与强调色 (Typography & Accent)
|
||
|
||
* **现代无衬线字体**：
|
||
* 优先字体栈：`Inter`, `Geist`, 或 Apple 原生 `SF Pro`。确保字母间距 (Tracking) 在小号字时适当放宽，大标题时适当收紧。
|
||
* **品牌强调色 (Accent Colors)**：
|
||
* 主推 AI 科技质感的渐变色。例如：紫蓝渐变 `from-violet-500 to-blue-500`。
|
||
* 应用于：核心 Call To Action (CTA) 按钮、选中的 Tab 下划线、高亮的重要标签。
|
||
|
||
---
|
||
|
||
## 二、 技术栈实现规范 (Tailwind CSS 最佳实践)
|
||
|
||
我们将使用 **Tailwind CSS (v3 / v4)**，结合以下工程化工具链，系统化落地 `ui-ux-pro-max`：
|
||
|
||
### 1. 原子化运用与 Design Tokens
|
||
* **禁止硬编码魔法值**。所有的自定义颜色（如品牌色紫蓝）、特殊间距，尽其所能都在 `tailwind.config.ts` (或 js) 的 `theme.extend` 中被转换为 Tokens。
|
||
* 例子：`bg-brand-primary` 替代 `bg-[#8B5CF6]`。
|
||
|
||
### 2. 动态类名管理的终极方案
|
||
所有复用性高、含动态计算逻辑的 UI 组件，必须引入 `clsx` 和 `tailwind-merge` 这个组合包（通常约定以 `cn` 函数导出）。
|
||
|
||
* **原因**：避免你在子组件传参时（例如 `class="bg-red-500"`），因为和组件内部默认的 `bg-blue-500` 发成 Tailwind 权重冲突导致样式失效。
|
||
* **`lib/utils.ts` 工具函数标准写法**：
|
||
```typescript
|
||
import { clsx, type ClassValue } from "clsx"
|
||
import { twMerge } from "tailwind-merge"
|
||
|
||
export function cn(...inputs: ClassValue[]) {
|
||
return twMerge(clsx(inputs))
|
||
}
|
||
```
|
||
|
||
### 3. 组件化结构
|
||
高频 UI 实体必须封装。以 Vue 3 + Tailwind 为例：
|
||
* 所有属性 (Props) 变化带来的 UI 变化，结合上述的 `cn` 在 `<script setup>` 顶部计算完毕。
|
||
* 如非极其生僻或庞大的样式块，尽量不要使用 `<style>` 块里的 `@apply`，坚持 Inline Tailwind classes，保证组件的可移植性。
|
||
|
||
---
|
||
|
||
## 三、 浏览器插件 (Chrome Extension) 特定架构规范
|
||
|
||
由于 InsightReply 需要在强敌环伺的第三方页面（如 X / Twitter）上运行，前端注入策略尤为关键。
|
||
|
||
### 1. UI 隔离：必须采用 Shadow DOM
|
||
* **痛点**：Twitter 原生大量的 CSS 选择器极易破坏我们插件的排版（例如它的 `div`, `span` 默认样式），同时我们的样式如果泄漏也可能打乱 Twitter。
|
||
* **规范强制**：
|
||
所有注入到宿主页面的 Content Scripts 最终挂载点 (Mount Root) 必须被包装在 `ShadowRoot` 之内。所有的 Tailwind 打包产物 CSS 将局部单向注入到该 ShadowTree 内。
|
||
|
||
### 2. 轻量化与按需加载
|
||
* 插件端对体积非常敏感。
|
||
* 绝不全量引入极其庞大的组件库包（如不按需加载全量导入 Element Plus）。
|
||
* 页面侧边栏组件与 Background Service Worker (Go 通讯代理层) 通过标准 `chrome.runtime.sendMessage` 保持极简高效的通讯。
|