feat: sing-box Clash template support + Docker CI + frontend scaffold
- Clash→sing-box template conversion engine (singbox_template.go) - Auto-map 40+ Clash rule-providers to sing-box .srs binary rule-sets - Fix sing-box 1.11+/1.12+ migrations (sniff/block/WireGuard/DNS/rule_set) - Fix WireGuard URI '+' parsing bug (rawParamGet) - Add REJECT block outbound for selector group references - Skip rules referencing rule-sets with no sing-box equivalent - Verified: sing-box run succeeds with ACL4SSR template (16 rule-sets loaded) - Add Dockerfile (multi-stage Go build) - Add GitHub Actions workflow (multi-arch: amd64+arm64, push to ghcr.io) - Add frontend scaffold (Vue3 + Vite + Tailwind)
This commit is contained in:
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Root component — just renders routed pages
|
||||
</script>
|
||||
@@ -0,0 +1,98 @@
|
||||
import axios from 'axios'
|
||||
import { getEffectiveToken, clearToken } from '@/utils/token'
|
||||
|
||||
// Read runtime config (injected by config.js, defaults to same-origin)
|
||||
const apiBaseUrl = (window.SUB_STORE_CONFIG?.apiBaseUrl) || ''
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: apiBaseUrl + '/api',
|
||||
timeout: 30000,
|
||||
})
|
||||
|
||||
// Request interceptor — attach admin token
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = getEffectiveToken()
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
})
|
||||
|
||||
// Response interceptor — unwrap data, handle errors
|
||||
api.interceptors.response.use(
|
||||
(response) => response.data,
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
// Token might be stale — clear it and let the router guard handle redirect
|
||||
clearToken()
|
||||
}
|
||||
const msg = error.response?.data?.error?.message || error.message || 'Request failed'
|
||||
return Promise.reject(new Error(msg))
|
||||
}
|
||||
)
|
||||
|
||||
// --- API methods ---
|
||||
|
||||
// Env
|
||||
export const getEnv = () => api.get('/env')
|
||||
export const getScripts = () => api.get('/scripts')
|
||||
|
||||
// Settings
|
||||
export const getSettings = () => api.get('/settings')
|
||||
export const updateSettings = (data) => api.patch('/settings', data)
|
||||
|
||||
// Storage
|
||||
export const exportStorage = () => api.get('/storage')
|
||||
export const importStorage = (data) => api.post('/storage', data)
|
||||
|
||||
// Sources
|
||||
export const listSources = () => api.get('/sources')
|
||||
export const createSource = (data) => api.post('/sources', data)
|
||||
export const getSource = (name) => api.get(`/sources/${name}`)
|
||||
export const updateSource = (name, data) => api.patch(`/sources/${name}`, data)
|
||||
export const deleteSource = (name) => api.delete(`/sources/${name}`)
|
||||
export const sortSources = (ids) => api.put('/sources', ids)
|
||||
|
||||
// Collections
|
||||
export const listCollections = () => api.get('/collections')
|
||||
export const createCollection = (data) => api.post('/collections', data)
|
||||
export const getCollection = (name) => api.get(`/collections/${name}`)
|
||||
export const updateCollection = (name, data) => api.patch(`/collections/${name}`, data)
|
||||
export const deleteCollection = (name) => api.delete(`/collections/${name}`)
|
||||
export const sortCollections = (ids) => api.put('/collections', ids)
|
||||
|
||||
// Templates
|
||||
export const listTemplates = () => api.get('/templates')
|
||||
export const createTemplate = (data) => api.post('/templates', data)
|
||||
export const getTemplate = (name) => api.get(`/templates/${name}`)
|
||||
export const updateTemplate = (name, data) => api.patch(`/templates/${name}`, data)
|
||||
export const deleteTemplate = (name) => api.delete(`/templates/${name}`)
|
||||
|
||||
// Shares
|
||||
export const listShares = () => api.get('/shares')
|
||||
export const createShare = (data) => api.post('/shares', data)
|
||||
export const updateShare = (id, data) => api.patch(`/shares/${id}`, data)
|
||||
export const deleteShare = (id) => api.delete(`/shares/${id}`)
|
||||
|
||||
// Recycle bin
|
||||
export const listRecycleBin = () => api.get('/recycle-bin')
|
||||
export const deleteRecycleEntry = (id) => api.delete(`/recycle-bin/${id}`)
|
||||
export const restoreRecycleEntry = (id) => api.post(`/recycle-bin/${id}/restore`)
|
||||
|
||||
// Preview
|
||||
export const previewSource = (data) => api.post('/preview/source', data)
|
||||
export const previewCollection = (data) => api.post('/preview/collection', data)
|
||||
|
||||
// Download links
|
||||
export const getLinkSource = (name, target) => api.get(`/link/source/${name}`, { params: target ? { target } : {} })
|
||||
export const getLinkCollection = (name, target) => api.get(`/link/collection/${name}`, { params: target ? { target } : {} })
|
||||
|
||||
// Flow info
|
||||
export const getFlowInfo = (name) => api.get(`/source/flow/${name}`)
|
||||
|
||||
// Tools
|
||||
export const parseProxy = (data) => api.post('/proxy/parse', data)
|
||||
export const parseRule = (data) => api.post('/rule/parse', data)
|
||||
export const getNodeInfo = (server) => api.post('/utils/node-info', { server })
|
||||
|
||||
export default api
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<teleport to="body">
|
||||
<div v-if="modelValue" class="fixed inset-0 z-[60] flex items-center justify-center p-4">
|
||||
<div class="absolute inset-0 bg-black/40" @click="$emit('update:modelValue', false)"></div>
|
||||
<div class="relative bg-white rounded-lg shadow-xl w-full max-w-sm p-5">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">{{ title }}</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">{{ message }}</p>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button class="px-4 py-2 text-sm rounded-lg hover:bg-gray-100" @click="$emit('update:modelValue', false)">取消</button>
|
||||
<button class="px-4 py-2 text-sm rounded-lg text-white"
|
||||
:class="danger ? 'bg-red-600 hover:bg-red-700' : 'bg-primary-600 hover:bg-primary-700'"
|
||||
@click="$emit('confirm')">{{ confirmText }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
modelValue: Boolean,
|
||||
title: { type: String, default: '确认' },
|
||||
message: { type: String, default: '确定执行此操作？' },
|
||||
confirmText: { type: String, default: '确定' },
|
||||
danger: { type: Boolean, default: false }
|
||||
})
|
||||
defineEmits(['update:modelValue', 'confirm'])
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<teleport to="body">
|
||||
<div v-if="modelValue" class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div class="absolute inset-0 bg-black/40" @click="$emit('update:modelValue', false)"></div>
|
||||
<div class="relative bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[85vh] flex flex-col">
|
||||
<div class="flex items-center justify-between px-6 py-3 border-b">
|
||||
<h3 class="text-base font-semibold text-gray-900">{{ title }}</h3>
|
||||
<button class="text-gray-400 hover:text-gray-600 text-xl" @click="$emit('update:modelValue', false)">×</button>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto px-6 py-4">
|
||||
<slot />
|
||||
</div>
|
||||
<div v-if="$slots.footer" class="px-6 py-3 border-t flex justify-end gap-2">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
modelValue: Boolean,
|
||||
title: { type: String, default: '' }
|
||||
})
|
||||
defineEmits(['update:modelValue'])
|
||||
</script>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="min-h-screen flex bg-gray-50">
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-60 bg-gray-900 text-gray-300 flex flex-col fixed inset-y-0 left-0 z-30">
|
||||
<div class="px-5 py-4 border-b border-gray-700">
|
||||
<h1 class="text-lg font-bold text-white flex items-center gap-2">
|
||||
<span class="inline-block w-2 h-2 bg-primary-500 rounded-full"></span>
|
||||
Sub-Store
|
||||
</h1>
|
||||
<p class="text-xs text-gray-500 mt-0.5" v-if="env">{{ env.backend }} · {{ env.version }}</p>
|
||||
</div>
|
||||
<nav class="flex-1 py-3 overflow-y-auto">
|
||||
<router-link
|
||||
v-for="item in menu"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="flex items-center gap-3 px-5 py-2.5 text-sm transition-colors"
|
||||
:class="$route.path === item.to || (item.to !== '/' && $route.path.startsWith(item.to))
|
||||
? 'bg-gray-800 text-white border-l-2 border-primary-500'
|
||||
: 'hover:bg-gray-800/50 border-l-2 border-transparent'"
|
||||
>
|
||||
<span class="text-base">{{ item.icon }}</span>
|
||||
<span>{{ item.label }}</span>
|
||||
</router-link>
|
||||
</nav>
|
||||
<div class="px-5 py-3 border-t border-gray-700 text-xs text-gray-500">
|
||||
<p>SQLite · Go</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main content -->
|
||||
<main class="flex-1 ml-60 min-h-screen">
|
||||
<div class="px-6 py-5">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getEnv } from '@/api'
|
||||
|
||||
const env = ref(null)
|
||||
const menu = [
|
||||
{ to: '/', icon: '📊', label: '概览' },
|
||||
{ to: '/sources', icon: '📡', label: '订阅源' },
|
||||
{ to: '/collections', icon: '📁', label: '合集' },
|
||||
{ to: '/templates', icon: '📋', label: '模板' },
|
||||
{ to: '/shares', icon: '🔗', label: '分享' },
|
||||
{ to: '/recycle-bin', icon: '♻️', label: '回收站' },
|
||||
{ to: '/tools', icon: '🔧', label: '工具' },
|
||||
{ to: '/settings', icon: '⚙️', label: '设置' },
|
||||
]
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await getEnv()
|
||||
env.value = res.data
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,10 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './style.css'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<h2 class="text-xl font-bold">合集</h2>
|
||||
<button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700" @click="openCreate">+ 新建</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="text-gray-400 text-sm">加载中...</div>
|
||||
<div v-else-if="collections.length === 0" class="text-gray-400 text-sm py-8 text-center">暂无合集</div>
|
||||
<div v-else class="space-y-2">
|
||||
<div v-for="col in collections" :key="col.id"
|
||||
class="bg-white rounded-lg p-4 shadow-sm border flex items-center justify-between hover:shadow-md transition-shadow">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium text-gray-900">{{ col.name }}</span>
|
||||
<span v-if="!col.enabled" class="px-1.5 py-0.5 rounded text-xs bg-red-100 text-red-700">已禁用</span>
|
||||
</div>
|
||||
<div class="flex gap-3 mt-1 text-xs text-gray-400">
|
||||
<span>订阅源: {{ col.sourceIds?.length || 0 }}</span>
|
||||
<span>过滤器: {{ col.filters?.length || 0 }}</span>
|
||||
<span>模板: {{ col.templateId || 'default' }}</span>
|
||||
<span v-if="col.ignoreFailed">忽略失败</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1 ml-3">
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-gray-100" @click="copyLink(col)">链接</button>
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-blue-50 text-blue-600" @click="editCol(col)">编辑</button>
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-red-50 text-red-600" @click="remove(col)">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal v-model="showModal" :title="editing ? '编辑合集' : '新建合集'">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">名称 / ID</label>
|
||||
<input v-model="form.name" :disabled="editing" placeholder="my-collection"
|
||||
class="w-full px-3 py-2 border rounded-lg text-sm disabled:bg-gray-100" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">订阅源 (多选)</label>
|
||||
<div class="max-h-32 overflow-y-auto border rounded-lg p-2 space-y-1">
|
||||
<label v-for="src in allSources" :key="src.id" class="flex items-center gap-2 text-sm cursor-pointer hover:bg-gray-50 px-1 py-0.5 rounded">
|
||||
<input type="checkbox" :value="src.id" v-model="form.sourceIds" class="rounded" />
|
||||
<span>{{ src.name }}</span>
|
||||
<span class="text-xs text-gray-400">({{ src.type }})</span>
|
||||
</label>
|
||||
<p v-if="allSources.length === 0" class="text-xs text-gray-400 py-1">无可用订阅源</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">模板</label>
|
||||
<select v-model="form.templateId" class="w-full px-3 py-2 border rounded-lg text-sm">
|
||||
<option value="">默认</option>
|
||||
<option v-for="t in allTemplates" :key="t.id" :value="t.id">{{ t.name }} ({{ t.target }})</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" v-model="form.enabled" class="rounded" /> 启用
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" v-model="form.ignoreFailed" class="rounded" /> 忽略失败源
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label class="text-sm font-medium">过滤器</label>
|
||||
<button class="text-xs text-primary-600 hover:underline" @click="form.filters.push({ type: 'include', pattern: '' })">+ 添加</button>
|
||||
</div>
|
||||
<div v-for="(f, i) in form.filters" :key="i" class="flex gap-1 mb-1.5">
|
||||
<select v-model="f.type" class="px-2 py-1 border rounded text-xs w-28">
|
||||
<option v-for="t in filterTypes" :key="t" :value="t">{{ t }}</option>
|
||||
</select>
|
||||
<input v-model="f.pattern" placeholder="pattern" class="flex-1 px-2 py-1 border rounded text-xs" />
|
||||
<button class="px-2 py-1 text-xs text-red-500 hover:bg-red-50 rounded" @click="form.filters.splice(i,1)">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<button class="px-4 py-2 text-sm rounded-lg hover:bg-gray-100" @click="showModal = false">取消</button>
|
||||
<button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700" @click="save">保存</button>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog v-model="confirmDialog.show" :title="confirmDialog.title" :message="confirmDialog.message"
|
||||
:danger="confirmDialog.danger" @confirm="confirmDialog.action(); confirmDialog.show = false" />
|
||||
|
||||
<div v-if="toast" class="fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-sm z-50"
|
||||
:class="toast.type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white'">
|
||||
{{ toast.msg }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import Modal from '@/components/Modal.vue'
|
||||
import ConfirmDialog from '@/components/ConfirmDialog.vue'
|
||||
import { listCollections, createCollection, updateCollection, deleteCollection, listSources, listTemplates, getLinkCollection } from '@/api'
|
||||
|
||||
const collections = ref([])
|
||||
const allSources = ref([])
|
||||
const allTemplates = ref([])
|
||||
const loading = ref(true)
|
||||
const showModal = ref(false)
|
||||
const editing = ref(false)
|
||||
const toast = ref(null)
|
||||
const confirmDialog = ref({ show: false, title: '', message: '', danger: false, action: null })
|
||||
|
||||
const filterTypes = ['include', 'exclude', 'rename', 'dedupe', 'sort', 'delete-field', 'flag', 'quick', 'resolve', 'custom']
|
||||
|
||||
const emptyForm = () => ({
|
||||
name: '', sourceIds: [], filters: [], templateId: '', ignoreFailed: true, enabled: true
|
||||
})
|
||||
const form = reactive(emptyForm())
|
||||
|
||||
function showToast(msg, type = 'success') {
|
||||
toast.value = { msg, type }
|
||||
setTimeout(() => toast.value = null, 2500)
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
Object.assign(form, emptyForm())
|
||||
editing.value = false
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function editCol(col) {
|
||||
Object.assign(form, {
|
||||
name: col.id,
|
||||
sourceIds: [...(col.sourceIds || [])],
|
||||
filters: JSON.parse(JSON.stringify(col.filters || [])),
|
||||
templateId: col.templateId || '',
|
||||
ignoreFailed: col.ignoreFailed !== false,
|
||||
enabled: col.enabled !== false,
|
||||
})
|
||||
editing.value = true
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
async function save() {
|
||||
try {
|
||||
const payload = { ...form }
|
||||
if (editing.value) {
|
||||
await updateCollection(form.name, payload)
|
||||
} else {
|
||||
await createCollection(payload)
|
||||
}
|
||||
showModal.value = false
|
||||
await load()
|
||||
showToast(editing.value ? '已更新' : '已创建')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(col) {
|
||||
confirmDialog.value = {
|
||||
show: true, title: '删除合集', message: `确定删除 "${col.name}"？`, danger: true,
|
||||
action: async () => {
|
||||
try {
|
||||
await deleteCollection(col.id)
|
||||
await load()
|
||||
showToast('已删除')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function copyLink(col) {
|
||||
try {
|
||||
const res = await getLinkCollection(col.id)
|
||||
await navigator.clipboard.writeText(res.data.url)
|
||||
showToast('链接已复制')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const [colRes, srcRes, tplRes] = await Promise.all([listCollections(), listSources(), listTemplates()])
|
||||
collections.value = colRes.data || []
|
||||
allSources.value = srcRes.data || []
|
||||
allTemplates.value = tplRes.data || []
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold mb-5">概览</h2>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<div v-for="stat in stats" :key="stat.label" class="bg-white rounded-lg p-4 shadow-sm border">
|
||||
<p class="text-sm text-gray-500">{{ stat.label }}</p>
|
||||
<p class="text-2xl font-bold mt-1" :class="stat.color">{{ stat.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm border">
|
||||
<h3 class="font-semibold mb-3">环境信息</h3>
|
||||
<div v-if="env" class="space-y-1.5 text-sm">
|
||||
<div class="flex justify-between"><span class="text-gray-500">应用</span><span>{{ env.app }}</span></div>
|
||||
<div class="flex justify-between"><span class="text-gray-500">后端</span><span>{{ env.backend }}</span></div>
|
||||
<div class="flex justify-between"><span class="text-gray-500">版本</span><span>{{ env.version }}</span></div>
|
||||
<div class="flex justify-between"><span class="text-gray-500">运行时</span><span>{{ env.runtime }}</span></div>
|
||||
<div class="flex justify-between"><span class="text-gray-500">存储</span><span>{{ env.storage }}</span></div>
|
||||
</div>
|
||||
<div v-else class="text-gray-400 text-sm">加载中...</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm border">
|
||||
<h3 class="font-semibold mb-3">功能特性</h3>
|
||||
<div v-if="env?.feature" class="flex flex-wrap gap-2">
|
||||
<span v-for="(val, key) in env.feature" :key="key"
|
||||
class="px-2 py-1 rounded text-xs"
|
||||
:class="val ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'">
|
||||
{{ featureLabels[key] || key }}: {{ val ? '✓' : '✗' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { getEnv, listSources, listCollections, listTemplates, listShares } from '@/api'
|
||||
|
||||
const env = ref(null)
|
||||
const sources = ref([])
|
||||
const collections = ref([])
|
||||
const templates = ref([])
|
||||
const shares = ref([])
|
||||
|
||||
const stats = computed(() => [
|
||||
{ label: '订阅源', value: sources.value.length, color: 'text-blue-600' },
|
||||
{ label: '合集', value: collections.value.length, color: 'text-purple-600' },
|
||||
{ label: '模板', value: templates.value.length, color: 'text-green-600' },
|
||||
{ label: '分享链接', value: shares.value.length, color: 'text-orange-600' },
|
||||
])
|
||||
|
||||
const featureLabels = {
|
||||
buildTimeScripts: '脚本引擎',
|
||||
proxyConversion: '代理转换',
|
||||
ruleConversion: '规则转换',
|
||||
scopedShares: '作用域分享',
|
||||
recycleBin: '回收站',
|
||||
nodeInfo: '节点信息',
|
||||
surgeMac: 'Surge Mac',
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const [envRes, srcRes, colRes, tplRes, shrRes] = await Promise.all([
|
||||
getEnv(), listSources(), listCollections(), listTemplates(), listShares()
|
||||
])
|
||||
env.value = envRes.data
|
||||
sources.value = srcRes.data || []
|
||||
collections.value = colRes.data || []
|
||||
templates.value = tplRes.data || []
|
||||
shares.value = shrRes.data || []
|
||||
} catch (e) {
|
||||
console.error('Failed to load dashboard', e)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div class="text-center">
|
||||
<p class="text-7xl font-bold text-gray-300">404</p>
|
||||
<p class="mt-4 text-gray-400">Page Not Found</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 404 page — shown when token is missing or invalid
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold mb-5">回收站</h2>
|
||||
|
||||
<div v-if="loading" class="text-gray-400 text-sm">加载中...</div>
|
||||
<div v-else-if="entries.length === 0" class="text-gray-400 text-sm py-8 text-center">回收站为空</div>
|
||||
<div v-else class="space-y-2">
|
||||
<div v-for="entry in entries" :key="entry.id"
|
||||
class="bg-white rounded-lg p-4 shadow-sm border flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1.5 py-0.5 rounded text-xs"
|
||||
:class="resourceTypeColor(entry.resourceType)">
|
||||
{{ entry.resourceType }}
|
||||
</span>
|
||||
<span class="font-medium text-gray-900">{{ entry.resourceId }}</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1">删除于: {{ formatTime(entry.deletedAt) }}</p>
|
||||
</div>
|
||||
<div class="flex gap-1 ml-3">
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-blue-50 text-blue-600" @click="restore(entry)">恢复</button>
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-red-50 text-red-600" @click="purge(entry)">彻底删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog v-model="confirmDialog.show" :title="confirmDialog.title" :message="confirmDialog.message"
|
||||
:danger="confirmDialog.danger" :confirmText="confirmDialog.confirmText"
|
||||
@confirm="confirmDialog.action(); confirmDialog.show = false" />
|
||||
|
||||
<div v-if="toast" class="fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-sm z-50"
|
||||
:class="toast.type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white'">
|
||||
{{ toast.msg }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import ConfirmDialog from '@/components/ConfirmDialog.vue'
|
||||
import { listRecycleBin, deleteRecycleEntry, restoreRecycleEntry } from '@/api'
|
||||
|
||||
const entries = ref([])
|
||||
const loading = ref(true)
|
||||
const toast = ref(null)
|
||||
const confirmDialog = ref({ show: false, title: '', message: '', danger: false, confirmText: '确定', action: null })
|
||||
|
||||
function showToast(msg, type = 'success') {
|
||||
toast.value = { msg, type }
|
||||
setTimeout(() => toast.value = null, 2500)
|
||||
}
|
||||
|
||||
function formatTime(ts) {
|
||||
if (!ts) return ''
|
||||
return new Date(ts).toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
function resourceTypeColor(type) {
|
||||
const map = {
|
||||
source: 'bg-blue-100 text-blue-700',
|
||||
collection: 'bg-purple-100 text-purple-700',
|
||||
template: 'bg-green-100 text-green-700',
|
||||
share: 'bg-orange-100 text-orange-700',
|
||||
}
|
||||
return map[type] || 'bg-gray-100 text-gray-600'
|
||||
}
|
||||
|
||||
async function restore(entry) {
|
||||
confirmDialog.value = {
|
||||
show: true, title: '恢复', message: `恢复 "${entry.resourceId}"？`, danger: false, confirmText: '恢复',
|
||||
action: async () => {
|
||||
try {
|
||||
await restoreRecycleEntry(entry.id)
|
||||
await load()
|
||||
showToast('已恢复')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function purge(entry) {
|
||||
confirmDialog.value = {
|
||||
show: true, title: '彻底删除', message: `彻底删除 "${entry.resourceId}"？此操作不可撤销！`, danger: true, confirmText: '彻底删除',
|
||||
action: async () => {
|
||||
try {
|
||||
await deleteRecycleEntry(entry.id)
|
||||
await load()
|
||||
showToast('已彻底删除')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await listRecycleBin()
|
||||
entries.value = res.data || []
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold mb-5">设置</h2>
|
||||
|
||||
<div v-if="loading" class="text-gray-400 text-sm">加载中...</div>
|
||||
<div v-else class="space-y-4 max-w-2xl">
|
||||
<!-- General settings -->
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm border">
|
||||
<h3 class="font-semibold mb-3 text-sm">通用</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="block text-sm mb-1">默认 User-Agent</label>
|
||||
<input v-model="settings.defaultUserAgent" class="w-full px-3 py-2 border rounded-lg text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm mb-1">默认流量查询 User-Agent</label>
|
||||
<input v-model="settings.defaultFlowUserAgent" class="w-full px-3 py-2 border rounded-lg text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm mb-1">请求超时 (ms)</label>
|
||||
<input v-model="settings.defaultTimeout" class="w-full px-3 py-2 border rounded-lg text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm mb-1">后端并发数</label>
|
||||
<input v-model="settings.backendRequestConcurrency" class="w-full px-3 py-2 border rounded-lg text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm mb-1">远程缓存 TTL (秒)</label>
|
||||
<input v-model="settings.remoteCacheTtl" class="w-full px-3 py-2 border rounded-lg text-sm" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="checkbox" id="cache-stale" v-model="settings.remoteCacheStaleOnError" class="rounded" />
|
||||
<label for="cache-stale" class="text-sm">缓存过期时仍返回旧数据</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Node info API -->
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm border">
|
||||
<h3 class="font-semibold mb-3 text-sm">节点信息 API</h3>
|
||||
<input v-model="settings.nodeInfoApiUrl" placeholder="https://ipwho.is/{ip}"
|
||||
class="w-full px-3 py-2 border rounded-lg text-sm font-mono" />
|
||||
<p class="text-xs text-gray-400 mt-1">URL 中 {ip} 会被替换为查询的 IP</p>
|
||||
</div>
|
||||
|
||||
<!-- Theme -->
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm border">
|
||||
<h3 class="font-semibold mb-3 text-sm">主题</h3>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<input type="checkbox" id="theme-auto" v-model="settings.theme.auto" class="rounded" />
|
||||
<label for="theme-auto" class="text-sm">自动跟随系统</label>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label class="text-xs text-gray-500">亮色主题</label>
|
||||
<input v-model="settings.theme.light" class="w-full px-3 py-2 border rounded-lg text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs text-gray-500">暗色主题</label>
|
||||
<input v-model="settings.theme.dark" class="w-full px-3 py-2 border rounded-lg text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App name -->
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm border">
|
||||
<h3 class="font-semibold mb-3 text-sm">应用</h3>
|
||||
<div>
|
||||
<label class="block text-sm mb-1">应用名称</label>
|
||||
<input v-model="settings.appName" class="w-full px-3 py-2 border rounded-lg text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700" @click="save">保存设置</button>
|
||||
</div>
|
||||
|
||||
<div v-if="toast" class="fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-sm z-50"
|
||||
:class="toast.type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white'">
|
||||
{{ toast.msg }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getSettings, updateSettings } from '@/api'
|
||||
|
||||
const settings = ref(null)
|
||||
const loading = ref(true)
|
||||
const toast = ref(null)
|
||||
|
||||
function showToast(msg, type = 'success') {
|
||||
toast.value = { msg, type }
|
||||
setTimeout(() => toast.value = null, 2500)
|
||||
}
|
||||
|
||||
async function save() {
|
||||
try {
|
||||
await updateSettings(settings.value)
|
||||
showToast('设置已保存')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await getSettings()
|
||||
settings.value = res.data
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold mb-5">分享链接</h2>
|
||||
|
||||
<!-- Create share form -->
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm border mb-4">
|
||||
<h3 class="font-semibold mb-3 text-sm">创建分享</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-2 mb-3">
|
||||
<select v-model="form.resourceType" class="px-3 py-2 border rounded-lg text-sm">
|
||||
<option value="source">订阅源</option>
|
||||
<option value="collection">合集</option>
|
||||
</select>
|
||||
<select v-model="form.resourceId" class="px-3 py-2 border rounded-lg text-sm">
|
||||
<option value="">选择资源</option>
|
||||
<option v-for="r in availableResources" :key="r.id" :value="r.id">{{ r.name }}</option>
|
||||
</select>
|
||||
<select v-model="form.target" class="px-3 py-2 border rounded-lg text-sm">
|
||||
<option value="">自动</option>
|
||||
<option v-for="t in targets" :key="t" :value="t">{{ t }}</option>
|
||||
</select>
|
||||
<input v-model="form.expiresHours" type="number" min="0" placeholder="有效小时(0=永久)"
|
||||
class="px-3 py-2 border rounded-lg text-sm" />
|
||||
</div>
|
||||
<button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700"
|
||||
:disabled="!form.resourceId" @click="create">创建分享</button>
|
||||
<div v-if="createdUrl" class="mt-3 p-3 bg-gray-50 rounded-lg break-all text-xs font-mono cursor-pointer hover:bg-gray-100" @click="copy(createdUrl)">
|
||||
{{ createdUrl }} <span class="text-primary-600">[点击复制]</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shares list -->
|
||||
<div v-if="loading" class="text-gray-400 text-sm">加载中...</div>
|
||||
<div v-else-if="shares.length === 0" class="text-gray-400 text-sm py-4 text-center">暂无分享</div>
|
||||
<div v-else class="space-y-2">
|
||||
<div v-for="share in shares" :key="share.id"
|
||||
class="bg-white rounded-lg p-4 shadow-sm border flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1.5 py-0.5 rounded text-xs"
|
||||
:class="share.resourceType === 'source' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700'">
|
||||
{{ share.resourceType }}
|
||||
</span>
|
||||
<span class="font-medium text-gray-900">{{ share.resourceId }}</span>
|
||||
<span v-if="share.target" class="text-xs text-gray-400">→ {{ share.target }}</span>
|
||||
<span v-if="!share.enabled" class="px-1.5 py-0.5 rounded text-xs bg-red-100 text-red-700">已禁用</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1">
|
||||
创建: {{ formatTime(share.createdAt) }}
|
||||
<span v-if="share.expiresAt"> · 过期: {{ formatTime(share.expiresAt) }}</span>
|
||||
<span v-else> · 永久有效</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-1 ml-3">
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-gray-100" @click="toggle(share)">
|
||||
{{ share.enabled ? '禁用' : '启用' }}
|
||||
</button>
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-red-50 text-red-600" @click="remove(share)">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog v-model="confirmDialog.show" :title="confirmDialog.title" :message="confirmDialog.message"
|
||||
:danger="confirmDialog.danger" @confirm="confirmDialog.action(); confirmDialog.show = false" />
|
||||
|
||||
<div v-if="toast" class="fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-sm z-50"
|
||||
:class="toast.type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white'">
|
||||
{{ toast.msg }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import ConfirmDialog from '@/components/ConfirmDialog.vue'
|
||||
import { listShares, createShare, updateShare, deleteShare, listSources, listCollections } from '@/api'
|
||||
|
||||
const shares = ref([])
|
||||
const sources = ref([])
|
||||
const collections = ref([])
|
||||
const loading = ref(true)
|
||||
const createdUrl = ref('')
|
||||
const toast = ref(null)
|
||||
const confirmDialog = ref({ show: false, title: '', message: '', danger: false, action: null })
|
||||
|
||||
const targets = ['mihomo', 'stash', 'surge', 'surge-mac', 'surfboard', 'loon', 'egern', 'shadowrocket', 'qx', 'sing-box', 'v2ray', 'uri', 'json']
|
||||
|
||||
const form = reactive({
|
||||
resourceType: 'source', resourceId: '', target: '', expiresHours: '0'
|
||||
})
|
||||
|
||||
const availableResources = computed(() => form.resourceType === 'source' ? sources.value : collections.value)
|
||||
|
||||
function showToast(msg, type = 'success') {
|
||||
toast.value = { msg, type }
|
||||
setTimeout(() => toast.value = null, 2500)
|
||||
}
|
||||
|
||||
function formatTime(ts) {
|
||||
if (!ts) return ''
|
||||
return new Date(ts).toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
async function copy(text) {
|
||||
await navigator.clipboard.writeText(text)
|
||||
showToast('已复制')
|
||||
}
|
||||
|
||||
async function create() {
|
||||
try {
|
||||
const payload = {
|
||||
resourceType: form.resourceType,
|
||||
resourceId: form.resourceId,
|
||||
target: form.target || undefined,
|
||||
expiresIn: Math.max(0, Number(form.expiresHours) || 0) * 3600,
|
||||
}
|
||||
const res = await createShare(payload)
|
||||
createdUrl.value = res.data.url
|
||||
await load()
|
||||
showToast('分享已创建')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
async function toggle(share) {
|
||||
try {
|
||||
await updateShare(share.id, { enabled: !share.enabled })
|
||||
await load()
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(share) {
|
||||
confirmDialog.value = {
|
||||
show: true, title: '删除分享', message: '确定删除此分享？', danger: true,
|
||||
action: async () => {
|
||||
try {
|
||||
await deleteShare(share.id)
|
||||
await load()
|
||||
showToast('已删除')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const [shrRes, srcRes, colRes] = await Promise.all([listShares(), listSources(), listCollections()])
|
||||
shares.value = shrRes.data || []
|
||||
sources.value = srcRes.data || []
|
||||
collections.value = colRes.data || []
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<h2 class="text-xl font-bold">订阅源</h2>
|
||||
<button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700" @click="openCreate">+ 新建</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="text-gray-400 text-sm">加载中...</div>
|
||||
<div v-else-if="sources.length === 0" class="text-gray-400 text-sm py-8 text-center">暂无订阅源</div>
|
||||
<div v-else class="space-y-2">
|
||||
<div v-for="src in sources" :key="src.id"
|
||||
class="bg-white rounded-lg p-4 shadow-sm border flex items-center justify-between hover:shadow-md transition-shadow">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium text-gray-900">{{ src.name }}</span>
|
||||
<span class="px-1.5 py-0.5 rounded text-xs"
|
||||
:class="src.type === 'remote' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600'">{{ src.type }}</span>
|
||||
<span v-if="!src.enabled" class="px-1.5 py-0.5 rounded text-xs bg-red-100 text-red-700">已禁用</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1 truncate">{{ src.type === 'local' ? '(本地内容)' : src.url }}</p>
|
||||
<div class="flex gap-2 mt-1 text-xs text-gray-400">
|
||||
<span>过滤器: {{ src.filters?.length || 0 }}</span>
|
||||
<span v-if="src.createdAt">创建: {{ formatTime(src.createdAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1 ml-3">
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-gray-100" @click="copyLink(src)">链接</button>
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-gray-100" @click="preview(src)">预览</button>
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-blue-50 text-blue-600" @click="editSource(src)">编辑</button>
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-red-50 text-red-600" @click="remove(src)">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit Modal -->
|
||||
<Modal v-model="showModal" :title="editing ? '编辑订阅源' : '新建订阅源'">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">名称 / ID</label>
|
||||
<input v-model="form.name" :disabled="editing" placeholder="my-sub"
|
||||
class="w-full px-3 py-2 border rounded-lg text-sm disabled:bg-gray-100" />
|
||||
<p class="text-xs text-gray-400 mt-0.5">仅支持小写字母、数字、下划线、连字符</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">类型</label>
|
||||
<select v-model="form.type" class="w-full px-3 py-2 border rounded-lg text-sm">
|
||||
<option value="remote">远程 (URL)</option>
|
||||
<option value="local">本地 (内容)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="form.type === 'remote'">
|
||||
<label class="block text-sm font-medium mb-1">URL</label>
|
||||
<textarea v-model="form.url" rows="3" placeholder="https://example.com/sub (多个URL换行)"
|
||||
class="w-full px-3 py-2 border rounded-lg text-sm font-mono"></textarea>
|
||||
</div>
|
||||
<div v-if="form.type === 'local'">
|
||||
<label class="block text-sm font-medium mb-1">内容</label>
|
||||
<textarea v-model="form.content" rows="6" placeholder="ss://... 或 base64 内容"
|
||||
class="w-full px-3 py-2 border rounded-lg text-sm font-mono"></textarea>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="checkbox" id="src-enabled" v-model="form.enabled" class="rounded" />
|
||||
<label for="src-enabled" class="text-sm">启用</label>
|
||||
</div>
|
||||
|
||||
<!-- Filters editor -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label class="text-sm font-medium">过滤器</label>
|
||||
<button class="text-xs text-primary-600 hover:underline" @click="addFilter">+ 添加</button>
|
||||
</div>
|
||||
<div v-for="(f, i) in form.filters" :key="i" class="flex gap-1 mb-1.5">
|
||||
<select v-model="f.type" class="px-2 py-1 border rounded text-xs w-28">
|
||||
<option v-for="t in filterTypes" :key="t" :value="t">{{ t }}</option>
|
||||
</select>
|
||||
<input v-model="f.pattern" placeholder="pattern" class="flex-1 px-2 py-1 border rounded text-xs" />
|
||||
<input v-model="f.field" placeholder="field" class="w-24 px-2 py-1 border rounded text-xs" />
|
||||
<button class="px-2 py-1 text-xs text-red-500 hover:bg-red-50 rounded" @click="form.filters.splice(i,1)">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<button class="px-4 py-2 text-sm rounded-lg hover:bg-gray-100" @click="showModal = false">取消</button>
|
||||
<button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700" @click="save">保存</button>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Preview Modal -->
|
||||
<Modal v-model="showPreview" title="预览结果" >
|
||||
<div v-if="previewLoading" class="text-gray-400 text-sm py-4 text-center">解析中...</div>
|
||||
<div v-else-if="previewData">
|
||||
<p class="text-xs text-gray-500 mb-2">原始节点: {{ previewData.original?.length || 0 }} · 处理后: {{ previewData.processed?.length || 0 }}</p>
|
||||
<div class="max-h-96 overflow-y-auto text-xs font-mono bg-gray-50 p-3 rounded">
|
||||
<div v-for="(node, i) in (previewData.processed || previewData.original || [])" :key="i" class="py-0.5">
|
||||
<span class="text-gray-400">{{ i+1 }}.</span>
|
||||
<span class="text-blue-600">{{ node.name || node.remarks || 'unnamed' }}</span>
|
||||
<span class="text-gray-400 ml-2">{{ node.type }}</span>
|
||||
<span v-if="node.server" class="text-gray-400 ml-2">{{ node.server }}:{{ node.port }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- Confirm Dialog -->
|
||||
<ConfirmDialog v-model="confirmDialog.show" :title="confirmDialog.title" :message="confirmDialog.message"
|
||||
:danger="confirmDialog.danger" @confirm="confirmDialog.action(); confirmDialog.show = false" />
|
||||
|
||||
<!-- Toast -->
|
||||
<div v-if="toast" class="fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-sm z-50"
|
||||
:class="toast.type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white'">
|
||||
{{ toast.msg }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import Modal from '@/components/Modal.vue'
|
||||
import ConfirmDialog from '@/components/ConfirmDialog.vue'
|
||||
import { listSources, createSource, updateSource, deleteSource, previewSource, getLinkSource } from '@/api'
|
||||
|
||||
const sources = ref([])
|
||||
const loading = ref(true)
|
||||
const showModal = ref(false)
|
||||
const editing = ref(false)
|
||||
const showPreview = ref(false)
|
||||
const previewLoading = ref(false)
|
||||
const previewData = ref(null)
|
||||
const toast = ref(null)
|
||||
const confirmDialog = ref({ show: false, title: '', message: '', danger: false, action: null })
|
||||
|
||||
const filterTypes = ['include', 'exclude', 'rename', 'dedupe', 'sort', 'delete-field', 'flag', 'quick', 'resolve', 'custom']
|
||||
|
||||
const emptyForm = () => ({
|
||||
name: '', type: 'remote', url: '', content: '', enabled: true, filters: []
|
||||
})
|
||||
const form = reactive(emptyForm())
|
||||
|
||||
function showToast(msg, type = 'success') {
|
||||
toast.value = { msg, type }
|
||||
setTimeout(() => toast.value = null, 2500)
|
||||
}
|
||||
|
||||
function formatTime(ts) {
|
||||
if (!ts) return ''
|
||||
return new Date(ts).toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
Object.assign(form, emptyForm())
|
||||
editing.value = false
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function editSource(src) {
|
||||
Object.assign(form, {
|
||||
name: src.id,
|
||||
type: src.type || 'remote',
|
||||
url: src.url || '',
|
||||
content: src.content || '',
|
||||
enabled: src.enabled !== false,
|
||||
filters: JSON.parse(JSON.stringify(src.filters || []))
|
||||
})
|
||||
editing.value = true
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function addFilter() {
|
||||
form.filters.push({ type: 'include', pattern: '', field: '' })
|
||||
}
|
||||
|
||||
async function save() {
|
||||
try {
|
||||
const payload = {
|
||||
name: form.name,
|
||||
type: form.type,
|
||||
url: form.url,
|
||||
content: form.content,
|
||||
enabled: form.enabled,
|
||||
filters: form.filters.filter(f => f.type),
|
||||
}
|
||||
if (editing.value) {
|
||||
await updateSource(form.name, payload)
|
||||
} else {
|
||||
await createSource(payload)
|
||||
}
|
||||
showModal.value = false
|
||||
await load()
|
||||
showToast(editing.value ? '已更新' : '已创建')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(src) {
|
||||
confirmDialog.value = {
|
||||
show: true, title: '删除订阅源', message: `确定删除 "${src.name}"？`, danger: true,
|
||||
action: async () => {
|
||||
try {
|
||||
await deleteSource(src.id)
|
||||
await load()
|
||||
showToast('已删除')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function preview(src) {
|
||||
showPreview.value = true
|
||||
previewLoading.value = true
|
||||
previewData.value = null
|
||||
try {
|
||||
const res = await previewSource({
|
||||
id: src.id, name: src.name, type: src.type, url: src.url, content: src.content,
|
||||
filters: src.filters
|
||||
})
|
||||
previewData.value = res.data
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
showPreview.value = false
|
||||
} finally {
|
||||
previewLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function copyLink(src) {
|
||||
try {
|
||||
const res = await getLinkSource(src.id)
|
||||
await navigator.clipboard.writeText(res.data.url)
|
||||
showToast('链接已复制')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await listSources()
|
||||
sources.value = res.data || []
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<h2 class="text-xl font-bold">模板</h2>
|
||||
<button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700" @click="openCreate">+ 新建</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="text-gray-400 text-sm">加载中...</div>
|
||||
<div v-else-if="templates.length === 0" class="text-gray-400 text-sm py-8 text-center">暂无模板</div>
|
||||
<div v-else class="space-y-2">
|
||||
<div v-for="tpl in templates" :key="tpl.id"
|
||||
class="bg-white rounded-lg p-4 shadow-sm border flex items-center justify-between hover:shadow-md transition-shadow">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium text-gray-900">{{ tpl.name }}</span>
|
||||
<span class="px-1.5 py-0.5 rounded text-xs bg-purple-100 text-purple-700">{{ tpl.target }}</span>
|
||||
<span v-if="tpl.readonly" class="px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-500">内置</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1">{{ Object.keys(tpl.config || {}).length }} 个配置项</p>
|
||||
</div>
|
||||
<div class="flex gap-1 ml-3" v-if="!tpl.readonly">
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-blue-50 text-blue-600" @click="editTpl(tpl)">编辑</button>
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-red-50 text-red-600" @click="remove(tpl)">删除</button>
|
||||
</div>
|
||||
<div class="flex gap-1 ml-3" v-else>
|
||||
<button class="px-2.5 py-1 text-xs rounded hover:bg-gray-100" @click="viewTpl(tpl)">查看</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal v-model="showModal" :title="editing ? '编辑模板' : '新建模板'" >
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">名称 / ID</label>
|
||||
<input v-model="form.name" :disabled="editing" placeholder="my-template"
|
||||
class="w-full px-3 py-2 border rounded-lg text-sm disabled:bg-gray-100" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">目标平台</label>
|
||||
<select v-model="form.target" class="w-full px-3 py-2 border rounded-lg text-sm">
|
||||
<option v-for="t in targets" :key="t" :value="t">{{ t }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">配置 (JSON)</label>
|
||||
<textarea v-model="form.configStr" rows="12"
|
||||
placeholder='{"proxy-groups": [], "rules": []}'
|
||||
class="w-full px-3 py-2 border rounded-lg text-sm font-mono"></textarea>
|
||||
<p v-if="configError" class="text-xs text-red-500 mt-1">{{ configError }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<button class="px-4 py-2 text-sm rounded-lg hover:bg-gray-100" @click="showModal = false">取消</button>
|
||||
<button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700" @click="save">保存</button>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<Modal v-model="showView" title="查看模板配置">
|
||||
<pre class="text-xs font-mono bg-gray-50 p-3 rounded max-h-96 overflow-auto">{{ JSON.stringify(viewingConfig, null, 2) }}</pre>
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog v-model="confirmDialog.show" :title="confirmDialog.title" :message="confirmDialog.message"
|
||||
:danger="confirmDialog.danger" @confirm="confirmDialog.action(); confirmDialog.show = false" />
|
||||
|
||||
<div v-if="toast" class="fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-sm z-50"
|
||||
:class="toast.type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white'">
|
||||
{{ toast.msg }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import Modal from '@/components/Modal.vue'
|
||||
import ConfirmDialog from '@/components/ConfirmDialog.vue'
|
||||
import { listTemplates, createTemplate, updateTemplate, deleteTemplate } from '@/api'
|
||||
|
||||
const templates = ref([])
|
||||
const loading = ref(true)
|
||||
const showModal = ref(false)
|
||||
const editing = ref(false)
|
||||
const showView = ref(false)
|
||||
const viewingConfig = ref(null)
|
||||
const toast = ref(null)
|
||||
const confirmDialog = ref({ show: false, title: '', message: '', danger: false, action: null })
|
||||
|
||||
const targets = ['mihomo', 'stash', 'surge', 'surge-mac', 'surfboard', 'loon', 'egern', 'shadowrocket', 'qx', 'sing-box', 'v2ray', 'uri', 'json']
|
||||
|
||||
const emptyForm = () => ({ name: '', target: 'mihomo', configStr: '{}' })
|
||||
const form = reactive(emptyForm())
|
||||
|
||||
const configError = computed(() => {
|
||||
try { JSON.parse(form.configStr); return '' } catch { return 'JSON 格式错误' }
|
||||
})
|
||||
|
||||
function showToast(msg, type = 'success') {
|
||||
toast.value = { msg, type }
|
||||
setTimeout(() => toast.value = null, 2500)
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
Object.assign(form, emptyForm())
|
||||
editing.value = false
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function editTpl(tpl) {
|
||||
Object.assign(form, {
|
||||
name: tpl.id,
|
||||
target: tpl.target,
|
||||
configStr: JSON.stringify(tpl.config || {}, null, 2)
|
||||
})
|
||||
editing.value = true
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function viewTpl(tpl) {
|
||||
viewingConfig.value = tpl.config
|
||||
showView.value = true
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (configError.value) {
|
||||
showToast(configError.value, 'error')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const payload = {
|
||||
name: form.name,
|
||||
target: form.target,
|
||||
config: JSON.parse(form.configStr)
|
||||
}
|
||||
if (editing.value) {
|
||||
await updateTemplate(form.name, payload)
|
||||
} else {
|
||||
await createTemplate(payload)
|
||||
}
|
||||
showModal.value = false
|
||||
await load()
|
||||
showToast(editing.value ? '已更新' : '已创建')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(tpl) {
|
||||
confirmDialog.value = {
|
||||
show: true, title: '删除模板', message: `确定删除 "${tpl.name}"？`, danger: true,
|
||||
action: async () => {
|
||||
try {
|
||||
await deleteTemplate(tpl.id)
|
||||
await load()
|
||||
showToast('已删除')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await listTemplates()
|
||||
templates.value = res.data || []
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold mb-5">工具</h2>
|
||||
|
||||
<!-- Proxy/Rule Converter -->
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm border mb-4">
|
||||
<h3 class="font-semibold mb-3">转换器</h3>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<select v-model="convKind" class="px-3 py-2 border rounded-lg text-sm">
|
||||
<option value="proxy">代理转换</option>
|
||||
<option value="rule">规则转换</option>
|
||||
</select>
|
||||
<select v-model="convTarget" class="px-3 py-2 border rounded-lg text-sm">
|
||||
<option v-for="t in convTargets" :key="t" :value="t">{{ t }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<textarea v-model="convInput" rows="5" placeholder="粘贴订阅内容或规则..."
|
||||
class="w-full px-3 py-2 border rounded-lg text-sm font-mono mb-2"></textarea>
|
||||
<div class="flex gap-2 mb-2">
|
||||
<button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700"
|
||||
:disabled="converting" @click="runConvert">{{ converting ? '转换中...' : '转换' }}</button>
|
||||
<button v-if="convOutput" class="px-4 py-2 text-sm rounded-lg hover:bg-gray-100" @click="copy(convOutput)">复制结果</button>
|
||||
</div>
|
||||
<p v-if="convStats" class="text-xs text-gray-500 mb-2">{{ convStats }}</p>
|
||||
<textarea v-if="convOutput" v-model="convOutput" rows="8" readonly
|
||||
class="w-full px-3 py-2 border rounded-lg text-sm font-mono bg-gray-50"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Node Info -->
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm border mb-4">
|
||||
<h3 class="font-semibold mb-3">节点信息查询</h3>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<input v-model="nodeServer" placeholder="服务器地址 / IP"
|
||||
class="flex-1 px-3 py-2 border rounded-lg text-sm" @keyup.enter="queryNode" />
|
||||
<button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700"
|
||||
:disabled="!nodeServer || nodeLoading" @click="queryNode">{{ nodeLoading ? '查询中...' : '查询' }}</button>
|
||||
</div>
|
||||
<div v-if="nodeInfo" class="bg-gray-50 rounded-lg p-3 text-sm space-y-1">
|
||||
<div class="flex justify-between"><span class="text-gray-500">IP</span><span>{{ nodeInfo.ip }}</span></div>
|
||||
<div class="flex justify-between"><span class="text-gray-500">国家</span><span>{{ nodeInfo.country }}</span></div>
|
||||
<div class="flex justify-between"><span class="text-gray-500">地区</span><span>{{ nodeInfo.region }}</span></div>
|
||||
<div class="flex justify-between"><span class="text-gray-500">城市</span><span>{{ nodeInfo.city }}</span></div>
|
||||
<div v-if="nodeInfo.connection" class="flex justify-between"><span class="text-gray-500">ISP</span><span>{{ nodeInfo.connection?.isp || '-' }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Storage Export/Import -->
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm border">
|
||||
<h3 class="font-semibold mb-3">数据备份</h3>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700" @click="exportData">导出全部</button>
|
||||
<label class="px-4 py-2 bg-gray-600 text-white rounded-lg text-sm hover:bg-gray-700 cursor-pointer">
|
||||
导入备份
|
||||
<input type="file" accept=".json" class="hidden" @change="importData" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="toast" class="fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-sm z-50"
|
||||
:class="toast.type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white'">
|
||||
{{ toast.msg }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { parseProxy, parseRule, getNodeInfo, exportStorage, importStorage } from '@/api'
|
||||
|
||||
const proxyTargets = ['mihomo', 'stash', 'surge', 'surge-mac', 'surfboard', 'loon', 'egern', 'shadowrocket', 'qx', 'sing-box', 'v2ray', 'uri', 'json']
|
||||
const ruleTargets = ['mihomo', 'surge', 'loon', 'qx']
|
||||
|
||||
const convKind = ref('proxy')
|
||||
const convTarget = ref('mihomo')
|
||||
const convInput = ref('')
|
||||
const convOutput = ref('')
|
||||
const convStats = ref('')
|
||||
const converting = ref(false)
|
||||
|
||||
const nodeServer = ref('')
|
||||
const nodeInfo = ref(null)
|
||||
const nodeLoading = ref(false)
|
||||
|
||||
const toast = ref(null)
|
||||
|
||||
const convTargets = computed(() => convKind.value === 'proxy' ? proxyTargets : ruleTargets)
|
||||
|
||||
function showToast(msg, type = 'success') {
|
||||
toast.value = { msg, type }
|
||||
setTimeout(() => toast.value = null, 2500)
|
||||
}
|
||||
|
||||
async function copy(text) {
|
||||
await navigator.clipboard.writeText(text)
|
||||
showToast('已复制')
|
||||
}
|
||||
|
||||
async function runConvert() {
|
||||
if (!convInput.value.trim()) {
|
||||
showToast('请输入内容', 'error')
|
||||
return
|
||||
}
|
||||
converting.value = true
|
||||
convOutput.value = ''
|
||||
convStats.value = ''
|
||||
try {
|
||||
const fn = convKind.value === 'proxy' ? parseProxy : parseRule
|
||||
const res = await fn({ content: convInput.value, target: convTarget.value })
|
||||
convOutput.value = res.data.content || res.data.par_res || ''
|
||||
convStats.value = `解析: ${res.data.parsed || 0} · 输出: ${res.data.emitted || 0} · 跳过: ${res.data.skipped || 0}`
|
||||
if (res.data.warnings?.length) {
|
||||
convStats.value += ' · ⚠ ' + res.data.warnings.join('; ')
|
||||
}
|
||||
showToast('转换成功')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
} finally {
|
||||
converting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function queryNode() {
|
||||
nodeLoading.value = true
|
||||
nodeInfo.value = null
|
||||
try {
|
||||
const res = await getNodeInfo(nodeServer.value)
|
||||
nodeInfo.value = res.data
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
} finally {
|
||||
nodeLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function exportData() {
|
||||
try {
|
||||
const res = await exportStorage()
|
||||
const blob = new Blob([JSON.stringify(res, null, 2)], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `sub-store-backup-${Date.now()}.json`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
showToast('已导出')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
async function importData(event) {
|
||||
const file = event.target.files?.[0]
|
||||
if (!file) return
|
||||
try {
|
||||
const text = await file.text()
|
||||
const data = JSON.parse(text)
|
||||
await importStorage(data)
|
||||
showToast('导入成功')
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error')
|
||||
}
|
||||
event.target.value = ''
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { getTokenFromURL, getStoredToken, isTokenValidated, storeToken, clearToken, validateToken } from '@/utils/token'
|
||||
|
||||
// Layouts
|
||||
import AdminLayout from '@/layouts/AdminLayout.vue'
|
||||
|
||||
// Pages
|
||||
import NotFound from '@/pages/NotFound.vue'
|
||||
import Dashboard from '@/pages/Dashboard.vue'
|
||||
import Sources from '@/pages/Sources.vue'
|
||||
import Collections from '@/pages/Collections.vue'
|
||||
import Templates from '@/pages/Templates.vue'
|
||||
import Shares from '@/pages/Shares.vue'
|
||||
import RecycleBin from '@/pages/RecycleBin.vue'
|
||||
import Tools from '@/pages/Tools.vue'
|
||||
import Settings from '@/pages/Settings.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: AdminLayout,
|
||||
children: [
|
||||
{ path: '', name: 'dashboard', component: Dashboard, meta: { title: '概览' } },
|
||||
{ path: 'sources', name: 'sources', component: Sources, meta: { title: '订阅源' } },
|
||||
{ path: 'collections', name: 'collections', component: Collections, meta: { title: '合集' } },
|
||||
{ path: 'templates', name: 'templates', component: Templates, meta: { title: '模板' } },
|
||||
{ path: 'shares', name: 'shares', component: Shares, meta: { title: '分享' } },
|
||||
{ path: 'recycle-bin', name: 'recycle-bin', component: RecycleBin, meta: { title: '回收站' } },
|
||||
{ path: 'tools', name: 'tools', component: Tools, meta: { title: '工具' } },
|
||||
{ path: 'settings', name: 'settings', component: Settings, meta: { title: '设置' } },
|
||||
]
|
||||
},
|
||||
// Catch-all 404
|
||||
{ path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound }
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
// Track if we're currently validating to avoid duplicate calls
|
||||
let validatingPromise = null
|
||||
|
||||
/**
|
||||
* Global async token guard.
|
||||
* The page must be opened with ?token=xxx.
|
||||
* When a token is provided in the URL, it's validated against the backend.
|
||||
* If valid → stored and URL stripped. If invalid → 404.
|
||||
* Subsequent navigations use the stored, already-validated token.
|
||||
*/
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
// If navigating to 404 page, always allow (avoid infinite loop)
|
||||
if (to.name === 'not-found') {
|
||||
return next()
|
||||
}
|
||||
|
||||
// Check token from Vue Router query (authoritative during navigation)
|
||||
const routeToken = to.query.token
|
||||
|
||||
// If URL has a token, validate it before allowing access
|
||||
if (routeToken) {
|
||||
// Avoid duplicate validation
|
||||
if (!validatingPromise) {
|
||||
validatingPromise = validateToken(routeToken)
|
||||
}
|
||||
const isValid = await validatingPromise
|
||||
validatingPromise = null
|
||||
|
||||
if (isValid) {
|
||||
storeToken(routeToken)
|
||||
// Navigate to same route without token in query
|
||||
const cleanQuery = { ...to.query }
|
||||
delete cleanQuery.token
|
||||
return next({ ...to, query: cleanQuery, replace: true })
|
||||
} else {
|
||||
// Invalid token → clear storage, show 404
|
||||
clearToken()
|
||||
return next({ name: 'not-found' })
|
||||
}
|
||||
}
|
||||
|
||||
// No token in URL — check if we have a validated stored token
|
||||
const storedToken = getStoredToken()
|
||||
const validated = isTokenValidated()
|
||||
|
||||
if (!storedToken || !validated) {
|
||||
return next({ name: 'not-found' })
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,13 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
|
||||
/* Transition */
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* Token management — the page MUST be opened with ?token=xxx
|
||||
* The token is validated against the backend /api/env endpoint.
|
||||
* If invalid or missing, the router guard shows a 404 page.
|
||||
*/
|
||||
|
||||
const TOKEN_KEY = 'sub_store_admin_token'
|
||||
const VALIDATED_KEY = 'sub_store_token_validated'
|
||||
|
||||
/** Extract token from URL query string */
|
||||
export function getTokenFromURL() {
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
return params.get('token') || ''
|
||||
}
|
||||
|
||||
/** Store token in localStorage (persists across page reloads) */
|
||||
export function storeToken(token) {
|
||||
if (token) {
|
||||
localStorage.setItem(TOKEN_KEY, token)
|
||||
localStorage.setItem(VALIDATED_KEY, 'true')
|
||||
}
|
||||
}
|
||||
|
||||
/** Get stored token */
|
||||
export function getStoredToken() {
|
||||
return localStorage.getItem(TOKEN_KEY) || ''
|
||||
}
|
||||
|
||||
/** Check if token has been validated */
|
||||
export function isTokenValidated() {
|
||||
return localStorage.getItem(VALIDATED_KEY) === 'true'
|
||||
}
|
||||
|
||||
/** Clear token (logout) */
|
||||
export function clearToken() {
|
||||
localStorage.removeItem(TOKEN_KEY)
|
||||
localStorage.removeItem(VALIDATED_KEY)
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate token against backend by calling /api/env.
|
||||
* Returns true if token is valid, false otherwise.
|
||||
*/
|
||||
export async function validateToken(token) {
|
||||
if (!token) return false
|
||||
try {
|
||||
const base = (window.SUB_STORE_CONFIG?.apiBaseUrl) || ''
|
||||
const resp = await fetch(`${base}/api/env?token=${encodeURIComponent(token)}`)
|
||||
if (!resp.ok) return false
|
||||
const data = await resp.json()
|
||||
return data.status === 'success'
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the effective token: from URL if present, otherwise from storage.
|
||||
* This is used by the API layer to always send the token.
|
||||
*/
|
||||
export function getEffectiveToken() {
|
||||
const urlToken = getTokenFromURL()
|
||||
if (urlToken) return urlToken
|
||||
return getStoredToken()
|
||||
}
|
||||
Reference in New Issue
Block a user