# Sub-Store 前端功能规划文档

> 基于原项目 `ref/sub-store-cloudflare/frontend` 的交互分析，规划 Go 重构版前端。
> 核心原则：**上下布局，PC 优先**，弃用移动端 swipe/popup/floating-button 交互模式。

---

## 1. 原前端交互痛点分析

### 1.1 移动端优先的架构问题

| 痛点 | 原项目实现 | PC 上的问题 |
|------|-----------|-------------|
| **Swipe 手势操作** | `SubListItem` 用 `nut-swipe` 左/右滑动暴露 复制/下载/删除 按钮 | 桌面端无触屏，swipe 不触发，操作隐藏在不可见区域 |
| **底部 TabBar** | `TabBar.vue` 3 个 tab 固定底部，768px+ 才切换为侧边栏 | PC 上侧边栏是浮动定位 (`position: fixed`)，非真正双栏布局 |
| **底部 Popup 弹窗** | 添加订阅、模板编辑、目标选择均用 `nut-popup position="bottom"` | 占满下半屏，PC 上极不协调，无法利用横向空间 |
| **浮动按钮** | `nut-drag` 可拖拽的刷新/添加按钮，固定在屏幕边缘 | PC 上浮动按钮遮挡内容，拖拽行为多余 |
| **单列滚动列表** | 源和集合在同一个页面上下排列，tag 筛选条横排 | PC 宽屏下大量留白，列表项信息密度低 |
| **编辑器 Tab 横滚** | SubEditor 的 display/content/actions 三个 tab 横向排列 | PC 上应该用左右分栏或垂直 Tab |
| **SubEditor 巨型组件** | 单文件 2174 行，混合 source/collection 两种编辑逻辑 | 维护困难，状态管理混乱 |
| **全屏预览覆盖** | Preview.vue 用 `position: fixed; inset: 0` 全屏覆盖 | PC 上应该是侧面板或分栏，不离开当前上下文 |
| **无键盘快捷键** | 所有操作只能点击 | PC 用户期望 Ctrl+S 保存、Esc 关闭等 |
| **无右键菜单** | 操作按钮散落在列表项内部 | PC 用户期望右键弹出操作菜单 |
| **Tools 页面粗糙** | 转换器/分享/回收站堆在一个页面，原生 HTML 控件 | 功能孤立，与主流程割裂 |

### 1.2 信息架构问题

- 源 (Source) 和集合 (Collection) 混在同一列表，靠标题区分，概念不清
- 模板管理藏在 "My" 设置页，与集合编辑中的模板选择脱节
- 分享 (Share) 和回收站 (Recycle Bin) 被丢进 Tools 工具页，而非关联到对应资源
- 预览/对比需要跳路由或弹全屏，丢失列表上下文
- 下载链接生成操作分散：列表项有复制链接，编辑页有链接生成，Tools 有分享创建

---

## 2. 整体布局设计：上下布局

```
┌──────────────────────────────────────────────────────────────────┐
│  TopBar  (h: 48px)                                                │
│  [Logo] Sub-Store    [搜索框]        [刷新] [主题] [语言] [设置]   │
├──────────────────────────────────────────────────────────────────┤
│  NavBar  (h: 40px)                                                 │
│  [订阅源] [集合] [模板] [工具] [回收站]              [+ 新建 ▾]    │
├──────────────────────────────────────────────────────────────────┤
│                                                                    │
│  Main Content Area  (flex: 1, overflow: auto)                      │
│                                                                    │
│  ┌──────────────────────┐  ┌──────────────────────────────────┐   │
│  │  Left Panel          │  │  Right Panel / Detail             │   │
│  │  (列表区, 固定宽度)   │  │  (编辑/预览/详情, flex: 1)        │   │
│  │  w: 360px            │  │                                  │   │
│  │                      │  │                                  │   │
│  │  [搜索] [筛选 tag]    │  │                                  │   │
│  │  ┌─────────────────┐ │  │                                  │   │
│  │  │ Source/Col Card │ │  │                                  │   │
│  │  ├─────────────────┤ │  │                                  │   │
│  │  │ Source/Col Card │ │  │                                  │   │
│  │  ├─────────────────┤ │  │                                  │   │
│  │  │ ...             │ │  │                                  │   │
│  │  └─────────────────┘ │  │                                  │   │
│  └──────────────────────┘  └──────────────────────────────────┘   │
│                                                                    │
├──────────────────────────────────────────────────────────────────┤
│  StatusBar  (h: 28px, 可选)                                        │
│  ● 已连接 · 12 源 · 3 集合 · v1.0.0          [最后同步: 2分钟前]   │
└──────────────────────────────────────────────────────────────────┘
```

### 2.1 布局规则

- **TopBar**: 始终固定顶部，包含全局搜索、全局操作（刷新/主题/语言/设置）
- **NavBar**: 水平标签栏，切换主功能区域，当前页高亮
- **Main Content**: 根据当前 Tab 显示不同内容，内部可左右分栏
- **StatusBar**: 底部状态栏，显示连接状态/数据统计/同步时间（可选关闭）
- **最小宽度**: 1024px（PC 优先），窄屏降级为单列+抽屉

### 2.2 响应式策略

| 宽度 | 布局 | 说明 |
|------|------|------|
| ≥1280px | 双栏 (列表+详情) | 详情区常驻右侧 |
| 1024-1279px | 双栏 (列表+详情) | 列表区缩窄至 320px |
| 768-1023px | 单栏 + 右抽屉 | 详情从右侧滑入抽屉 |
| <768px | 单栏 + 全屏推入 | 详情全屏推入（移动端兼容） |

---

## 3. 功能模块规划

### 3.1 订阅源管理 (Sources)

#### 3.1.1 源列表 (Left Panel)

**功能点**:
- 卡片式列表，每张卡片显示：名称、类型徽章 (remote/local)、启用开关、流量摘要、标签
- 顶部工具栏：搜索框（实时过滤名称/URL）、标签筛选条、排序按钮
- 列表项右键菜单：编辑、复制链接、预览、克隆、删除、创建分享
- 拖拽排序（HTML5 drag API，非 vuedraggable touch 模式）
- 选中状态：单击选中（高亮），双击打开编辑
- 多选：Ctrl+Click 多选，批量启用/禁用/删除/导出
- 列表底部：显示总数和已加载数

**卡片信息层次**:
```
┌──────────────────────────────────────┐
│ [●] 机场A                  [remote] │
│     https://example.com/sub...  [⚡] │
│     ↑ 12.3GB  ↓ 89.7GB / 100GB      │
│     [HK] [JP]                    [⋮] │
└──────────────────────────────────────┘
```

#### 3.1.2 源编辑 (Right Panel / Drawer)

**布局**: 垂直分区，非 Tab 切换

**区域 1 - 基本信息**:
- ID（创建后只读）、显示名、备注、标签（逗号分隔或 chip 输入）
- 图标 URL、图标彩色开关

**区域 2 - 数据源**:
- 类型切换：Remote / Local（radio button 横排）
- Remote: URL 文本域（支持多行多 URL）、UA 输入、passThrough UA 开关、subUserinfo 输入
- Local: 全屏代码编辑器按钮 + 文件导入按钮 + 内容验证按钮 + CodeMirror 编辑器（内嵌）

**区域 3 - 节点处理** (Filter Pipeline):
- 可视化流水线编辑器，每个 filter 是一个可折叠卡片
- 拖拽排序 filter 执行顺序
- 每个 filter 类型有专属配置表单：
  - **Region Filter**: 复选框组 (HK/JP/SG/US/UK/DE/KR/TW)，keep/exclude 开关
  - **Type Filter**: 复选框组 (ss/vmess/vless/trojan/...)，keep/exclude 开关
  - **Regex Filter**: 正则输入框（支持多个），keep/exclude 开关，字段选择
  - **Regex Rename**: 表格式输入 (表达式 → 替换为)
  - **Regex Delete**: 正则输入框（支持多个），字段选择
  - **Regex Sort**: 优先级正则列表 + 方向选择
  - **Handle Duplicate**: 去重字段选择、动作 (delete/rename)、后缀模板、连接符、位置
  - **Sort**: 方向选择 (asc/desc/random)
  - **Flag Operator**: 模式 (add/remove)、台湾旗配置
  - **Quick Setting**: UDP/TFO/scert/useless/vmess-aead 下拉选择
  - **Resolve Domain**: DNS provider 选择、记录类型、过滤模式、自定义 URL、EDNS、并发数
  - **Script**: 脚本选择下拉（从注册表加载）、参数表单（根据 metadata.parameters 动态生成）
- 新增 filter 按钮 → 下拉菜单选择类型
- 每个 filter 可启用/禁用（开关）、删除（按钮）

**区域 4 - 操作栏** (底部固定):
- [预览] [对比] [保存] [另存为]
- Ctrl+S 快捷键保存

#### 3.1.3 源预览

**功能**: 调用 `/api/preview/source` 显示原始节点 vs 处理后节点

**布局**: 右侧面板内的分栏视图
- 左栏：原始节点列表（可搜索、可排序）
- 右栏：处理后节点列表
- 顶部：节点数量统计 (原始 N → 处理后 M, 跳过 K)
- 每个节点显示：名称、类型、服务器:端口、协议详情
- 支持展开节点查看完整字段

#### 3.1.4 源下载链接

**功能**: 生成各目标的下载链接

**交互**: 点击列表项的"复制链接"按钮 → 弹出链接面板（右侧抽屉或 popover）
- 目标选择：13 种目标客户端（下拉或 grid 按钮）
- 链接显示：只读文本框 + 复制按钮
- 二维码生成（可选）
- 临时覆盖选项：URL/content/UA 输入框（展开式高级选项）

---

### 3.2 集合管理 (Collections)

#### 3.2.1 集合列表 (Left Panel)

**与源列表同结构**，但卡片额外显示：
- 包含的源数量/名称摘要
- 关联的模板名
- ignoreFailed 状态徽章

#### 3.2.2 集合编辑 (Right Panel / Drawer)

**区域 1 - 基本信息**: 同源编辑

**区域 2 - 集合配置**:
- 模板选择：下拉选择（内置 6 套 + 自定义），旁边"管理模板"链接
- 源选择器：双栏穿梭框 (Transfer) 布局
  - 左栏：所有可用源（可搜索、可按 tag 筛选）
  - 右栏：已选源（可拖拽排序）
  - 全选/反选/清空按钮
  - 空选择 = 包含所有 enabled 源（需明确提示）
- ignoreFailed 切换：下拉选择 (跳过失败源 / 全部要求成功)

**区域 3 - 节点处理**: 同源编辑的 Filter Pipeline（集合级 filter）

**区域 4 - 操作栏**: 同源编辑

#### 3.2.3 集合预览

**功能**: 调用 `/api/preview/collection`，显示合并后的节点

**布局**: 同源预览，但显示多源合并信息
- 额外显示：各源的节点数量、失败源列表
- 可按来源分组显示

---

### 3.3 模板管理 (Templates)

**独立 Tab 页**，非隐藏在设置中。

#### 3.3.1 模板列表

- 表格布局：名称、目标客户端、类型 (内置/自定义)、操作
- 内置模板：只读，可查看不可编辑/删除
- 自定义模板：编辑、删除、克隆
- 新建按钮、从文件导入按钮 (JSON/YAML)

#### 3.3.2 模板编辑

**布局**: 右侧面板或模态对话框

**区域 1 - 元信息**:
- ID（创建后只读）、名称、目标客户端选择

**区域 2 - 配置编辑器**:
- CodeMirror JSON/YAML 编辑器（全宽）
- 语法高亮、格式化按钮、校验按钮
- 可视化预览（可选）：解析 proxy-groups 和 rules，以树形图展示

**区域 3 - 内置模板预览**:
- 点击内置模板 → 只读模式显示配置 + 结构说明

---

### 3.4 工具 (Tools)

**独立 Tab 页**，包含三大工具，内部用子 Tab 或卡片分区。

#### 3.4.1 格式转换器

**功能**: 一次性代理/规则转换 (`/api/proxy/parse`, `/api/rule/parse`)

**布局**: 左右分栏
- 左栏：输入
  - 类型切换：代理转换 / 规则转换
  - 目标选择：下拉
  - 输入文本域（支持粘贴 URI/YAML/JSON）
  - 从文件导入按钮
  - [转换] 按钮
- 右栏：输出
  - 输出文本域（只读）
  - 统计信息：解析 N / 输出 M / 跳过 K
  - 复制按钮、下载按钮

#### 3.4.2 分享管理 (Shares)

**功能**: 创建/管理 download grants

**布局**: 列表 + 表单

**列表区**:
- 表格：资源类型、资源 ID、目标、过期时间、状态、操作
- 操作：启用/禁用切换、删除、复制链接
- 按资源类型筛选

**创建表单** (右侧面板或顶部展开):
- 资源类型：source / collection
- 资源 ID：下拉选择（从现有数据加载）
- 目标：下拉（auto 或指定）
- 过期时间：数字 + 单位（小时/天），或永不过期
- [创建] → 生成 token + URL，显示并可复制

#### 3.4.3 节点信息查询

**功能**: 调用 `/api/utils/node-info` 查询 IP 信息

**布局**: 简单表单 + 结果卡片
- 输入：服务器地址
- 结果：IP、国家、地区、城市、连接信息

---

### 3.5 回收站 (Recycle Bin)

**独立 Tab 页**。

**布局**: 表格 + 详情抽屉

**列表**:
- 表格：资源类型、资源 ID、删除时间、操作
- 操作：恢复、彻底删除
- 按资源类型筛选
- 显示总数 / 上限 50 提示

**恢复逻辑**:
- 恢复时检查 ID 冲突（后端已处理，前端需展示友好错误）
- 恢复成功后刷新对应列表

---

### 3.6 设置 (Settings)

**模态对话框或独立全屏页**，非当前 My.vue 的卡片堆叠。

**布局**: 左侧分类菜单 + 右侧设置表单

**分类**:

#### 3.6.1 请求设置
- 默认 User-Agent
- 默认流量 User-Agent
- 默认超时 (ms)
- 后端请求并发数
- 并发等待时间 (ms)
- 远程缓存 TTL (s)
- 缓存错误降级开关
- 节点信息 API URL

#### 3.6.2 外观设置
- 主题选择（8 套主题）
- 简单模式开关
- 图标显示开关
- 图标彩色开关
- 列表视图模式（单列/双列）
- 浮动按钮开关（移动端兼容用）
- 编辑器分组模式

#### 3.6.3 数据管理
- 导出备份（下载 JSON）
- 导入备份（上传 JSON）
- Admin Token 设置
- 下载 Token 显示

#### 3.6.4 关于
- 后端类型、版本、存储引擎
- GitHub 链接
- 文档链接

---

## 4. 全局交互设计

### 4.1 键盘快捷键

| 快捷键 | 功能 |
|--------|------|
| `Ctrl+K` | 聚焦全局搜索 |
| `Ctrl+N` | 新建（当前 Tab 对应类型） |
| `Ctrl+S` | 保存当前编辑 |
| `Ctrl+Shift+S` | 另存为 |
| `Ctrl+P` | 预览当前选中项 |
| `Ctrl+D` | 复制下载链接 |
| `Delete` | 删除选中项（需确认） |
| `Esc` | 关闭面板/对话框/取消选中 |
| `↑↓` | 列表中上下移动选中 |
| `Enter` | 打开选中项编辑 |
| `Space` | 切换选中项启用/禁用 |

### 4.2 右键菜单

**列表项右键**:
- 编辑
- 预览节点
- 复制下载链接 ▸ (子菜单：mihomo / sing-box / surge / ...)
- 创建分享
- 克隆
- 导出
- 删除

**空白区域右键**:
- 新建源
- 新建集合
- 粘贴导入
- 刷新列表

### 4.3 拖放操作

- **列表内拖拽**: 排序（显示插入位置指示线）
- **跨列表拖拽**: 源拖入集合（自动添加到集合的 sourceIds）
- **文件拖入**: 拖入 JSON/YAML 文件 → 导入备份或模板

### 4.4 通知系统

- **Toast**: 操作成功/失败（右上角，自动消失）
- **通知中心**: 右上角铃铛图标，记录历史通知
- **内联状态**: 列表项上的流量加载状态、同步状态

### 4.5 确认对话框

- 删除操作：模态确认框，显示资源名称
- 导入覆盖：模态确认框，显示将影响的数据统计
- 离开未保存编辑：路由守卫拦截，提示保存

---

## 5. 数据流与状态管理

### 5.1 Store 结构（Pinia）

```
stores/
├── global.ts          # 全局状态：环境信息、连接状态、主题
├── sources.ts         # 源列表、CRUD、排序
├── collections.ts     # 集合列表、CRUD、排序
├── templates.ts       # 模板列表、CRUD
├── shares.ts          # 分享列表、CRUD
├── recycleBin.ts      # 回收站列表、恢复/删除
├── settings.ts        # 应用设置
├── scripts.ts         # 脚本注册表元数据
└── notify.ts          # 通知队列
```

### 5.2 API 层

保持原项目的 axios 拦截器模式，但简化适配层：

```typescript
// api/client.ts — axios 实例 + 拦截器
// api/sources.ts — 源 CRUD
// api/collections.ts — 集合 CRUD
// api/templates.ts — 模板 CRUD
// api/shares.ts — 分享 CRUD
// api/recycle.ts — 回收站
// api/settings.ts — 设置 + 导出/导入
// api/tools.ts — 转换器、节点信息
// api/env.ts — 环境
```

**关键简化**: 原项目的 `api/app/index.ts` (705 行) 包含大量 UI ↔ API 的 filter 格式转换逻辑 (`toApiFilters` / `fromApiFilters` / `toActionMeta`)。重构版应将此逻辑移入编辑器组件的 model 层，API 层只做纯 HTTP 调用。

### 5.3 Filter Pipeline 数据模型

```typescript
// 编辑器内部的 UI 模型（与原项目 UiProcess 一致）
type FilterAction = {
  id: string;           // 前端 UUID
  type: ActionType;     // 'Region Filter' | 'Type Filter' | ...
  args: Record<string, any>;
  customName?: string;
  disabled: boolean;
};

// 提交到后端时转换为 FilterRule[]
// 从后端加载时转换为 FilterAction[]
// 转换逻辑封装在 composables/useFilterTransform.ts
```

---

## 6. 技术选型建议

### 6.1 框架与 UI 库

| 组件 | 原项目 | 重构建议 | 理由 |
|------|--------|----------|------|
| 框架 | Vue 3 | Vue 3 | 保持一致 |
| UI 库 | NutUI (移动端) | Naive UI / PrimeVue | PC 优先，需数据表格/穿梭框/树形组件 |
| 状态管理 | Pinia | Pinia | 保持一致 |
| 路由 | Vue Router | Vue Router | 保持一致 |
| HTTP | Axios | Axios 或 ofetch | 保持 Axios 即可 |
| 代码编辑器 | CodeMirror 5 | CodeMirror 6 / Monaco | CM6 更现代，Monaco 更强大 |
| 拖拽 | vuedraggable (SortableJS) | 原生 HTML5 Drag API + vue-draggable-plus | PC 用原生拖拽更可靠 |
| i18n | vue-i18n | vue-i18n | 保持一致 |
| 图标 | Font Awesome + NutUI Icon | Lucide / Tabler Icons | 更现代的图标集 |
| 样式 | SCSS + CSS 变量 | UnoCSS / Tailwind CSS | 原子化 CSS，开发更快 |
| 主题 | 8 套主题 (SCSS 变量) | CSS 变量 + 暗色模式 | 简化主题系统 |

### 6.2 组件库选择考量

**Naive UI** (推荐):
- Vue 3 原生，TypeScript 友好
- 内置数据表格、穿梭框、树形、抽屉、右键菜单
- 暗色模式原生支持
- 中文社区活跃

**PrimeVue**:
- 组件最全（含 CodeMirror 集成）
- 主题系统强大
- 但体积较大

---

## 7. 页面路由规划

```
/                   → 重定向到 /sources
/sources            → 订阅源管理（列表 + 右侧详情/编辑）
/sources/:id        → 订阅源管理（选中指定源，右侧显示编辑）
/collections        → 集合管理
/collections/:id    → 集合管理（选中指定集合）
/templates          → 模板管理
/templates/:id      → 模板管理（选中指定模板）
/tools              → 工具（默认显示转换器）
/tools/converter    → 格式转换器
/tools/shares       → 分享管理
/tools/node-info    → 节点信息查询
/recycle-bin        → 回收站
/settings           → 设置（模态对话框，非独立路由）
/preview/:type/:id  → 预览（可选独立路由，用于书签/分享）
```

**路由模式**: 
- 列表+详情使用嵌套路由，详情区为子路由 `<router-view>`
- 预览使用 query 参数 `?preview=true` 或子路由，避免全屏覆盖

---

## 8. 功能优先级

### P0 — MVP 必须实现

1. 上下布局框架（TopBar + NavBar + Main + StatusBar）
2. 订阅源列表 + 编辑（基本表单 + URL/Content + Filter Pipeline）
3. 集合列表 + 编辑（源选择器 + 模板选择 + Filter Pipeline）
4. 源/集合预览（原始 vs 处理后节点对比）
5. 下载链接生成 + 复制
6. 模板列表 + 查看（内置只读）
7. 设置（请求设置 + Admin Token）
8. 导出/导入备份
9. 键盘快捷键（Ctrl+S, Ctrl+K, Esc）
10. 暗色模式

### P1 — 增强体验

1. 模板创建/编辑（CodeMirror 编辑器）
2. 分享管理（创建/列表/启停/删除）
3. 回收站（列表/恢复/彻底删除）
4. 格式转换器工具
5. 节点信息查询工具
6. 右键菜单
7. 拖拽排序 + 跨列表拖拽
8. 多选批量操作
9. 全局搜索（跨类型搜索源/集合/模板）

### P2 — 高级功能

1. 脚本参数动态表单
2. 节点信息内联展示（预览中展开节点详情）
3. 拖入文件导入
4. 二维码生成
5. 通知中心
6. 自定义主题
7. 移动端响应式降级

---

## 9. 与后端 API 的对接

### 9.1 API 端点映射

| 前端功能 | 后端 API | 方法 |
|----------|----------|------|
| 源列表 | `/api/sources` | GET |
| 创建源 | `/api/sources` | POST |
| 更新源 | `/api/sources/:name` | PATCH |
| 删除源 | `/api/sources/:name` | DELETE |
| 排序源 | `/api/sources` (PUT) 或 `/api/sort/sources` (POST) | PUT/POST |
| 集合列表 | `/api/collections` | GET |
| 创建集合 | `/api/collections` | POST |
| 更新集合 | `/api/collections/:name` | PATCH |
| 删除集合 | `/api/collections/:name` | DELETE |
| 排序集合 | `/api/collections` (PUT) 或 `/api/sort/collections` (POST) | PUT/POST |
| 模板列表 | `/api/templates` | GET |
| 创建模板 | `/api/templates` | POST |
| 更新模板 | `/api/templates/:name` | PATCH |
| 删除模板 | `/api/templates/:name` | DELETE |
| 预览源 | `/api/preview/source` | POST |
| 预览集合 | `/api/preview/collection` | POST |
| 下载链接 | `/api/link/source/:name`, `/api/link/collection/:name` | GET |
| 流量信息 | `/api/source/flow/:name` | GET |
| 转换器 | `/api/proxy/parse`, `/api/rule/parse` | POST |
| 分享列表 | `/api/shares` | GET |
| 创建分享 | `/api/shares` | POST |
| 更新分享 | `/api/shares/:id` | PATCH |
| 删除分享 | `/api/shares/:id` | DELETE |
| 回收站列表 | `/api/recycle-bin` | GET |
| 恢复 | `/api/recycle-bin/:id/restore` | POST |
| 彻底删除 | `/api/recycle-bin/:id` | DELETE |
| 设置 | `/api/settings` | GET/PATCH |
| 导出 | `/api/storage` | GET |
| 导入 | `/api/storage` | POST |
| 环境 | `/api/env` | GET |
| 脚本列表 | `/api/scripts` | GET |
| 节点信息 | `/api/utils/node-info` | POST |

### 9.2 鉴权

- 所有 `/api/*` 请求携带 `Authorization: Bearer <token>` 头
- Token 存储在 localStorage，可通过 URL `?token=` 参数初始化
- 401 响应 → 清除 Token，显示重新输入界面

### 9.3 响应格式适配

统一响应包络：
```json
{ "status": "success", "data": <T> }
{ "status": "failed", "error": { "code": <number>, "message": <string> } }
```

前端 axios 拦截器：
- 成功：解包 `response.data.data`
- 失败：提取 `response.data.error.message`，Toast 通知

---

## 10. 原项目功能对照清单

| 原项目功能 | 重构状态 | 说明 |
|-----------|----------|------|
| 源列表 + swipe 操作 | ✅ 保留，改右键菜单 | 弃用 swipe |
| 集合列表 + swipe 操作 | ✅ 保留，改右键菜单 | 弃用 swipe |
| 源编辑 (SubEditor) | ✅ 保留，拆分组件 | 2174 行 → 拆为 3-4 个子组件 |
| 集合编辑 | ✅ 保留，穿梭框选源 | 弃用 checkbox+draggable |
| Filter Pipeline 编辑 | ✅ 保留，改进交互 | 可视化流水线 + 专属配置表单 |
| 预览/对比 | ✅ 保留，右侧面板 | 弃用全屏覆盖 |
| 下载链接 | ✅ 保留，popover | 弃用 PreviewPanel 弹窗 |
| 模板管理 | ✅ 提升为独立 Tab | 从 My 页移出 |
| 设置 (My.vue) | ✅ 保留，改模态/独立页 | 分类菜单 + 表单 |
| 备份导出/导入 | ✅ 保留 | 移入设置-数据管理 |
| 工具页 | ✅ 保留，增强 | 转换器+分享+节点信息 |
| 回收站 | ✅ 提升为独立 Tab | 从 Tools 移出 |
| 分享管理 | ✅ 提升为 Tools 子页 | 从 Tools 移出 |
| 浮动按钮 | ❌ 移除 | PC 不需要 |
| 底部 TabBar | ❌ 移除 | 改为顶部 NavBar |
| 底部 Popup | ❌ 移除 | 改为右侧抽屉/模态 |
| 主题系统 | ✅ 保留，简化 | 8 套 → 暗色/亮色 + 配色变量 |
| i18n | ✅ 保留 | 中/英双语 |
| 标签筛选 | ✅ 保留 | 列表顶部 chip 筛选 |
| 拖拽排序 | ✅ 保留，原生 HTML5 | 弃用 vuedraggable |
| CodeMirror 编辑 | ✅ 保留，升级 CM6 | 本地内容/模板编辑 |
| 脚本参数 | ✅ 保留，动态表单 | 根据 metadata.parameters 生成 |
| 流量信息 | ✅ 保留 | 卡片内联显示 |
| 节点信息查询 | ✅ 保留 | Tools 子功能 |