# Sub-Store 前端

独立可运行的可视化管理页面，基于 Vue 3 + Vite + Tailwind CSS。

## 安全机制

页面必须通过 `?token=xxx` 参数打开。Token 会与后端 `/api/env` 接口验证：
- **无 token** → 显示 404 页面（防检测）
- **错误 token** → 显示 404 页面
- **正确 token** → 进入管理后台，token 自动从 URL 中移除并存储到 localStorage

## 独立部署

### 构建

```bash
npm install
npm run build
```

构建产物在 `dist/` 目录，包含 4 个文件：
- `index.html` — 入口 HTML
- `config.js` — 运行时配置（可编辑，无需重新构建）
- `assets/index-xxx.js` — 应用 JS
- `assets/index-xxx.css` — 样式 CSS

### 部署方式

**方式一：同源部署（推荐）**

将 `dist/` 内容放在后端服务器的静态文件目录下，配置后端同时提供 API 和静态文件。

**方式二：独立部署 + 反向代理**

前端部署在 Nginx，通过反向代理转发 `/api` 到后端：

```nginx
server {
    listen 80;
    root /path/to/dist;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://backend:3001;
    }

    location /download {
        proxy_pass http://backend:3001;
    }
}
```

**方式三：完全独立部署**

编辑 `config.js`，设置后端 API 地址：

```javascript
window.SUB_STORE_CONFIG = {
  apiBaseUrl: 'https://api.example.com',
  useBearerAuth: true,
}
```

然后部署 `dist/` 到任意静态文件服务器。

## 开发

```bash
npm run dev      # 启动开发服务器 (端口 5173)
npm run build    # 生产构建
npm run preview  # 预览生产构建
```

开发模式下，Vite 自动代理 `/api` 和 `/download` 到 `http://localhost:3001`。

## 功能页面

| 页面 | 路径 | 功能 |
|------|------|------|
| 概览 | `/` | 统计卡片 + 环境信息 + 功能特性 |
| 订阅源 | `/sources` | CRUD + 过滤器编辑 + 预览 + 下载链接 |
| 合集 | `/collections` | CRUD + 源多选 + 模板选择 |
| 模板 | `/templates` | CRUD + JSON 配置编辑 + 内置模板查看 |
| 回收站 | `/recycle-bin` | 恢复 + 彻底删除 |
| 工具 | `/tools` | 代理/规则转换 + 节点信息查询 + 数据导入导出 |
| 设置 | `/settings` | UA/超时/缓存/节点API/主题 |