sub-store/frontend

Sub-Store 前端

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

安全机制

页面必须通过 ?token=xxx 参数打开。Token 会与后端 /api/env 接口验证：

• 无 token → 显示 404 页面（防检测）
• 错误 token → 显示 404 页面
• 正确 token → 进入管理后台，token 自动从 URL 中移除并存储到 localStorage

独立部署

构建

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 到后端：

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 地址：

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

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

开发

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/主题