You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
---
name: netx-design
description: Use when changing or reviewing netx Web Admin, Desktop Core UI, visual design contracts, navigation, components, page layout, copy, or frontend interaction behavior.
---
# netx UI 设计
## 使用场景
在 `/root/Projects/Mine/netx` 中处理这些内容时使用：
- `web/admin`
- `apps/netx-desktop`
- 导航信息架构。
- 页面布局。
- 组件复用。
- UI 文案。
- 设计契约检查失败。
## 先读
按顺序读取：
1. `docs/specs/ui-design.md`
2. `web/admin/src/app/routes.ts`
3. `web/admin/src/components/netx/*`
4. `web/admin/src/components/common/DataWorkbench.vue`
5. `apps/netx-desktop/src/App.vue`
6. `apps/netx-desktop/src/components/client/*`
视觉资产在 `docs/design/netx-ui-dev-assets` 。页面源码不得直接引用该目录。
## Admin 规则
- Admin 是高信息密度控制台。
- 一级导航固定走 `Overview / Nodes / Networks / Gateways / Services / Routes / DNS / Security / Diagnostics / Settings` 。
- `Gateways` 是具有 Gateway capability 的节点视图。
- `Services` 覆盖 HTTP、HTTPS、TCP、UDP、SOCKS5、Shadowsocks。
- HTTP、Tunnel、SOCKS5、Shadowsocks 都归入 `Services` 。
- 页面优先复用 `components/netx` 和 `DataWorkbench` 。
## Desktop 规则
- Desktop 是本机 Core 工作台。
- 交互按 PC 分屏处理。
- Desktop 不承载网络逻辑。
- 通过 Local API / IPC 管理 `netx-core` 。
- 使用分屏工作台壳。
## 重构期间
本 skill 描述当前 UI 结构，不用于阻止已确认的 UI 或产品重构。
当重构改变以下内容时，同步更新本 skill 和 `docs/specs/ui-design.md` ：
- Admin 目录归属。
- Desktop 目录归属。
- 导航信息架构。
- 组件入口。
- 设计资产路径。
- 设计检查命令。
- 页面交互主模式。
若本 skill 与当前源码或已确认重构目标冲突，以当前源码和重构目标为准，并在同次修改中修正本 skill。
## 必跑检查
改 Admin：
```bash
pnpm -C web/admin test
pnpm -C web/admin build
```
改 Desktop：
```bash
pnpm -C apps/netx-desktop test
pnpm -C apps/netx-desktop build
```
## 禁止项
- 不用原生 `<select>` 。
- 不用 `window.confirm` 。
- 不直接引用 `docs/design` 。
- 不新增手写 Logo SVG。
- 不加全局假搜索和假环境切换。
- 不为单页创造新视觉体系。