iTi-Flask/.codex/skills/netx-design/SKILL.md

name	description
netx-design	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：

pnpm -C web/admin check:design-contracts
pnpm -C web/admin test
pnpm -C web/admin build

改 Desktop：

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。
• 不加全局假搜索和假环境切换。
• 不为单页创造新视觉体系。