---
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 check:design-contracts
pnpm -C web/admin test
pnpm -C web/admin build
```

改 Desktop：

```bash
pnpm -C apps/netx-desktop check:design-contracts
pnpm -C apps/netx-desktop test
pnpm -C apps/netx-desktop build
```

## 禁止项

- 不用原生 `<select>`。
- 不用 `window.confirm`。
- 不直接引用 `docs/design`。
- 不新增手写 Logo SVG。
- 不加全局假搜索和假环境切换。
- 不为单页创造新视觉体系。