90 lines
2.3 KiB
Markdown
90 lines
2.3 KiB
Markdown
# 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/主题 |
|