规则页：全局分流规则的编辑与规则组管理
新增 RulesPage.vue 和规则、规则组、ini 导入三个对话框，纯逻辑放在 shared/rules.ts。拆分规则字符串复用 vendor 的 splitRuleFields——引号和 嵌套括号里的逗号不会被当成字段分隔；目标之后的选项段原样拼回，改一条 规则不会丢掉它的 no-resolve 尾巴。规则组的缓存路径显式生成：不写 path 时内核按 url 哈希自己算一个，那个路径这里算不出来。
This commit is contained in:
@@ -0,0 +1,326 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 从 subconverter 的 ini 导入规则组。
|
||||
*
|
||||
* 粘贴文本或选本地文件（浏览器 File API 读内容）。只解析 ruleset= 行：
|
||||
* 清单来源（URL 或路径）每行生成一个规则组声明加一条 RULE-SET 规则骨架，
|
||||
* []GEOIP,CN 这类内联写法直接生成规则，[]FINAL 生成兜底规则。
|
||||
* custom_proxy_group= 是 subconverter 自己的建组指令，和本项目的专属组体系
|
||||
* 冲突，不导入。
|
||||
*
|
||||
* ini 里的目标组名（「🎯 全球直连」这类）在这份配置里不一定存在，逐个让用户
|
||||
* 映射到实际出站；没映射的行不导入。
|
||||
*/
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { parseIniRulesets, planIniImport } from '@shared/rules.ts'
|
||||
import type { IniImportPlan } from '@shared/rules.ts'
|
||||
import IconClose from '~icons/ri/close-line'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
/** 映射候选：内置出站、策略组、自有线路 */
|
||||
outboundNames: string[]
|
||||
/** 已声明的规则组名，生成新名字时避开 */
|
||||
existingProviderNames: string[]
|
||||
saving: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{ close: []; submit: [plan: IniImportPlan] }>()
|
||||
|
||||
const KIND_LABELS: Record<string, string> = {
|
||||
url: '规则组',
|
||||
file: '规则组',
|
||||
geoip: 'GEOIP 规则',
|
||||
geosite: 'GEOSITE 规则',
|
||||
final: '兜底规则',
|
||||
}
|
||||
|
||||
const dialog = ref<HTMLDialogElement | null>(null)
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
const text = ref('')
|
||||
const mapping = ref<Record<string, string>>({})
|
||||
|
||||
const entries = computed(() => parseIniRulesets(text.value))
|
||||
|
||||
/** ini 里出现过的目标组名，按出现顺序去重。每个都要映射到一个实际出站。 */
|
||||
const targets = computed(() => [...new Set(entries.value.map((e) => e.target))])
|
||||
|
||||
const plan = computed(() =>
|
||||
planIniImport(entries.value, mapping.value, new Set(props.existingProviderNames)),
|
||||
)
|
||||
|
||||
const unmapped = computed(() => targets.value.filter((t) => !mapping.value[t]))
|
||||
|
||||
const canSubmit = computed(
|
||||
() =>
|
||||
entries.value.length > 0 &&
|
||||
unmapped.value.length === 0 &&
|
||||
Object.keys(plan.value.providers).length +
|
||||
plan.value.rules.length +
|
||||
plan.value.finals.length >
|
||||
0 &&
|
||||
!props.saving,
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(open) => {
|
||||
if (open) {
|
||||
text.value = ''
|
||||
mapping.value = {}
|
||||
dialog.value?.showModal()
|
||||
} else {
|
||||
dialog.value?.close()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// 新解析出来的目标组名补进映射表，消失的清掉
|
||||
watch(targets, (list) => {
|
||||
const next: Record<string, string> = {}
|
||||
for (const target of list) next[target] = mapping.value[target] ?? ''
|
||||
mapping.value = next
|
||||
})
|
||||
|
||||
async function pickFile(event: Event) {
|
||||
const file = (event.target as HTMLInputElement).files?.[0]
|
||||
if (file) text.value = await file.text()
|
||||
// 同一个文件选第二次也要触发 change
|
||||
if (fileInput.value) fileInput.value.value = ''
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if (!canSubmit.value) return
|
||||
emit('submit', plan.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<dialog ref="dialog" class="dlg" @close="emit('close')" @cancel.prevent="emit('close')">
|
||||
<form method="dialog" @submit.prevent="submit">
|
||||
<header class="dlg-head">
|
||||
<h2>导入 ini</h2>
|
||||
<button type="button" class="x" @click="emit('close')"><IconClose /></button>
|
||||
</header>
|
||||
|
||||
<div class="body">
|
||||
<label class="row">
|
||||
<span class="k">内容</span>
|
||||
<span class="v">
|
||||
<textarea
|
||||
v-model="text"
|
||||
class="mono"
|
||||
rows="8"
|
||||
placeholder="粘贴 ini 文本，或从文件读取"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept=".ini,.conf,.txt"
|
||||
hidden
|
||||
@change="pickFile"
|
||||
/>
|
||||
<button type="button" class="btn file" @click="fileInput?.click()">从文件读取</button>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<template v-if="entries.length > 0">
|
||||
<div class="row">
|
||||
<span class="k">条目</span>
|
||||
<ol class="found">
|
||||
<li v-for="(entry, i) in entries" :key="i">
|
||||
<span class="mono src" :title="entry.source || entry.target">
|
||||
{{ entry.kind === 'final' ? '[]FINAL' : entry.source }}
|
||||
</span>
|
||||
<span class="kind">{{ KIND_LABELS[entry.kind] }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<label v-for="target in targets" :key="target" class="row">
|
||||
<span class="k map-name" :title="target">{{ target }}</span>
|
||||
<span class="v">
|
||||
<select v-model="mapping[target]">
|
||||
<option value="" disabled>映射到…</option>
|
||||
<option v-for="name in outboundNames" :key="name" :value="name">{{ name }}</option>
|
||||
</select>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<footer class="dlg-foot">
|
||||
<button type="button" class="btn" @click="emit('close')">取消</button>
|
||||
<button type="submit" class="btn btn-go" :disabled="!canSubmit">
|
||||
{{ saving ? '保存中' : '导入' }}
|
||||
</button>
|
||||
</footer>
|
||||
</form>
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dlg {
|
||||
width: min(560px, calc(100vw - 2 * var(--s-5)));
|
||||
padding: 0;
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-lg);
|
||||
background: var(--c-surface);
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.dlg::backdrop {
|
||||
background: rgb(0 0 0 / 0.45);
|
||||
}
|
||||
|
||||
.dlg-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--s-4) var(--s-5);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.dlg-head h2 {
|
||||
font-size: var(--t-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.x {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--r-sm);
|
||||
background: none;
|
||||
color: var(--c-text-faint);
|
||||
cursor: pointer;
|
||||
}
|
||||
.x:hover {
|
||||
background: var(--c-surface-sunken);
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-4);
|
||||
padding: var(--s-5);
|
||||
max-height: min(64vh, 560px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 7rem 1fr;
|
||||
gap: var(--s-4);
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.k {
|
||||
color: var(--c-text-soft);
|
||||
font-size: var(--t-sm);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: var(--s-2) var(--s-3);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--c-bg);
|
||||
resize: vertical;
|
||||
font-size: var(--t-sm);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
padding: var(--s-2) var(--s-3);
|
||||
padding-right: var(--s-6);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--c-bg);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%23898f98' d='M12 15.6 5.7 9.3l1.4-1.4 4.9 4.9 4.9-4.9 1.4 1.4z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right var(--s-3) center;
|
||||
}
|
||||
|
||||
.found {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-1);
|
||||
max-height: 10rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.found li {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--s-3);
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
|
||||
.src {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.kind {
|
||||
flex: none;
|
||||
color: var(--c-text-faint);
|
||||
font-size: var(--t-xs);
|
||||
}
|
||||
|
||||
.file {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--s-2) var(--s-4);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--c-surface);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dlg-foot {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--s-2);
|
||||
padding: var(--s-4) var(--s-5);
|
||||
border-top: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.btn-go {
|
||||
background: var(--c-accent);
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-go:disabled {
|
||||
background: var(--c-surface-sunken);
|
||||
border-color: var(--c-border);
|
||||
color: var(--c-text-faint);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,329 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 新增或编辑一条分流规则。
|
||||
*
|
||||
* 常见规则按「类型,载荷,目标」三段编辑，目标之后的选项段（no-resolve 这类）单独
|
||||
* 一个输入框、原样拼回，改一条规则不会丢掉它的选项。逻辑规则、子规则这类结构
|
||||
* 不是三段的按整行原文编辑——为每种规则类型建模不值得，内核认识的类型比这里
|
||||
* 列出来的多得多。
|
||||
*/
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { buildRule, isStructuredEditable, parseRule } from '@shared/rules.ts'
|
||||
import IconClose from '~icons/ri/close-line'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
/** 传了就是编辑：下标加原文；没传就是新增 */
|
||||
editing: { index: number; raw: string } | null
|
||||
/** 目标出站的候选：内置出站、策略组、自有线路。之外也允许手填 */
|
||||
outboundNames: string[]
|
||||
/** RULE-SET 载荷的候选：已声明的规则组 */
|
||||
providerNames: string[]
|
||||
saving: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{ close: []; submit: [rule: string] }>()
|
||||
|
||||
/** 常见的规则类型。不在里面的手填，填了就自动按原文编辑。 */
|
||||
const COMMON_TYPES = [
|
||||
'DOMAIN',
|
||||
'DOMAIN-SUFFIX',
|
||||
'DOMAIN-KEYWORD',
|
||||
'DOMAIN-REGEX',
|
||||
'GEOSITE',
|
||||
'GEOIP',
|
||||
'IP-CIDR',
|
||||
'IP-CIDR6',
|
||||
'IP-ASN',
|
||||
'SRC-IP-CIDR',
|
||||
'DST-PORT',
|
||||
'SRC-PORT',
|
||||
'IN-PORT',
|
||||
'PROCESS-NAME',
|
||||
'PROCESS-PATH',
|
||||
'NETWORK',
|
||||
'RULE-SET',
|
||||
'MATCH',
|
||||
]
|
||||
|
||||
const dialog = ref<HTMLDialogElement | null>(null)
|
||||
const rawMode = ref(false)
|
||||
const raw = ref('')
|
||||
const type = ref('DOMAIN-SUFFIX')
|
||||
const payload = ref('')
|
||||
const target = ref('')
|
||||
const extras = ref('')
|
||||
|
||||
const isMatch = computed(() => type.value.trim().toUpperCase() === 'MATCH')
|
||||
const isRuleSet = computed(() => type.value.trim().toUpperCase() === 'RULE-SET')
|
||||
|
||||
/** 结构化表单当前的内容拼成一行。 */
|
||||
function structured(): string {
|
||||
return buildRule({
|
||||
type: type.value.trim(),
|
||||
payload: isMatch.value ? null : payload.value.trim() || null,
|
||||
target: target.value.trim(),
|
||||
extras: extras.value
|
||||
.split(',')
|
||||
.map((part) => part.trim())
|
||||
.filter(Boolean),
|
||||
})
|
||||
}
|
||||
|
||||
const canSubmit = computed(() => {
|
||||
if (props.saving) return false
|
||||
if (rawMode.value) return raw.value.trim().includes(',')
|
||||
if (type.value.trim() === '' || target.value.trim() === '') return false
|
||||
return isMatch.value || payload.value.trim() !== ''
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(open) => {
|
||||
if (open) {
|
||||
const source = props.editing?.raw ?? ''
|
||||
raw.value = source
|
||||
if (source !== '' && !isStructuredEditable(source)) {
|
||||
rawMode.value = true
|
||||
} else {
|
||||
rawMode.value = false
|
||||
const parsed = parseRule(source)
|
||||
type.value = parsed.type || 'DOMAIN-SUFFIX'
|
||||
payload.value = parsed.payload ?? ''
|
||||
target.value = parsed.target ?? ''
|
||||
extras.value = parsed.extras.join(',')
|
||||
}
|
||||
dialog.value?.showModal()
|
||||
} else {
|
||||
dialog.value?.close()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
/** 切换编辑方式时带上当前内容：切成原文就把表单拼成一行，切回表单就重新拆。 */
|
||||
function toggleMode() {
|
||||
if (rawMode.value) {
|
||||
const line = raw.value.trim()
|
||||
if (!isStructuredEditable(line)) return
|
||||
const parsed = parseRule(line)
|
||||
type.value = parsed.type
|
||||
payload.value = parsed.payload ?? ''
|
||||
target.value = parsed.target ?? ''
|
||||
extras.value = parsed.extras.join(',')
|
||||
rawMode.value = false
|
||||
} else {
|
||||
raw.value = structured()
|
||||
rawMode.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if (!canSubmit.value) return
|
||||
emit('submit', rawMode.value ? raw.value.trim() : structured())
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<dialog ref="dialog" class="dlg" @close="emit('close')" @cancel.prevent="emit('close')">
|
||||
<form method="dialog" @submit.prevent="submit">
|
||||
<header class="dlg-head">
|
||||
<h2>{{ editing ? '编辑规则' : '新增规则' }}</h2>
|
||||
<button type="button" class="x" @click="emit('close')"><IconClose /></button>
|
||||
</header>
|
||||
|
||||
<div v-if="rawMode" class="body">
|
||||
<label class="row">
|
||||
<span class="k">规则</span>
|
||||
<span class="v">
|
||||
<input v-model="raw" class="mono" type="text" autocomplete="off" spellcheck="false" />
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div v-else class="body">
|
||||
<label class="row">
|
||||
<span class="k">类型</span>
|
||||
<span class="v">
|
||||
<input v-model="type" class="mono" type="text" list="rule-types" autocomplete="off" />
|
||||
<datalist id="rule-types">
|
||||
<option v-for="t in COMMON_TYPES" :key="t" :value="t" />
|
||||
</datalist>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label v-if="!isMatch" class="row">
|
||||
<span class="k">载荷</span>
|
||||
<span class="v">
|
||||
<input
|
||||
v-model="payload"
|
||||
class="mono"
|
||||
type="text"
|
||||
:list="isRuleSet ? 'rule-set-names' : undefined"
|
||||
:placeholder="isRuleSet ? '规则组名' : 'youtube.com'"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<datalist v-if="isRuleSet" id="rule-set-names">
|
||||
<option v-for="name in providerNames" :key="name" :value="name" />
|
||||
</datalist>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="row">
|
||||
<span class="k">目标</span>
|
||||
<span class="v">
|
||||
<input
|
||||
v-model="target"
|
||||
class="mono"
|
||||
type="text"
|
||||
list="rule-targets"
|
||||
placeholder="DIRECT"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<datalist id="rule-targets">
|
||||
<option v-for="name in outboundNames" :key="name" :value="name" />
|
||||
</datalist>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label v-if="!isMatch" class="row">
|
||||
<span class="k">选项</span>
|
||||
<span class="v">
|
||||
<input
|
||||
v-model="extras"
|
||||
class="mono"
|
||||
type="text"
|
||||
placeholder="no-resolve"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<footer class="dlg-foot">
|
||||
<button type="button" class="btn mode" @click="toggleMode">
|
||||
{{ rawMode ? '按字段编辑' : '按原文编辑' }}
|
||||
</button>
|
||||
<button type="button" class="btn" @click="emit('close')">取消</button>
|
||||
<button type="submit" class="btn btn-go" :disabled="!canSubmit">
|
||||
{{ saving ? '保存中' : '保存' }}
|
||||
</button>
|
||||
</footer>
|
||||
</form>
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dlg {
|
||||
width: min(520px, calc(100vw - 2 * var(--s-5)));
|
||||
padding: 0;
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-lg);
|
||||
background: var(--c-surface);
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.dlg::backdrop {
|
||||
background: rgb(0 0 0 / 0.45);
|
||||
}
|
||||
|
||||
.dlg-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--s-4) var(--s-5);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.dlg-head h2 {
|
||||
font-size: var(--t-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.x {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--r-sm);
|
||||
background: none;
|
||||
color: var(--c-text-faint);
|
||||
cursor: pointer;
|
||||
}
|
||||
.x:hover {
|
||||
background: var(--c-surface-sunken);
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-4);
|
||||
padding: var(--s-5);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 4rem 1fr;
|
||||
gap: var(--s-4);
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.k {
|
||||
color: var(--c-text-soft);
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
|
||||
.v {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: var(--s-2) var(--s-3);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--c-bg);
|
||||
}
|
||||
|
||||
.dlg-foot {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--s-2);
|
||||
padding: var(--s-4) var(--s-5);
|
||||
border-top: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
/* 编辑方式的切换放左边，和右边的确认/取消拉开 */
|
||||
.mode {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--s-2) var(--s-4);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--c-surface);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-go {
|
||||
background: var(--c-accent);
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-go:disabled {
|
||||
background: var(--c-surface-sunken);
|
||||
border-color: var(--c-border);
|
||||
color: var(--c-text-faint);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,287 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 新增一个规则组（rule-providers 里的一条声明）。
|
||||
*
|
||||
* 内容的拉取、缓存、定时更新全是内核的活，这里只写声明：URL 生成 http 类型，
|
||||
* 本地路径生成 file 类型，缓存路径自动补一个确定的——不写 path 时内核按 url
|
||||
* 哈希自己生成，那个路径这里算不出来。
|
||||
*/
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { inferRuleFormat, ruleProviderPath } from '@shared/rules.ts'
|
||||
import type { ConfigObject } from '../../vendor/config-editor/index.ts'
|
||||
import IconClose from '~icons/ri/close-line'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
/** 已被占用的规则组名 */
|
||||
takenNames: string[]
|
||||
saving: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
submit: [entry: { name: string; declaration: ConfigObject }]
|
||||
}>()
|
||||
|
||||
const dialog = ref<HTMLDialogElement | null>(null)
|
||||
const name = ref('')
|
||||
const source = ref('')
|
||||
const behavior = ref('classical')
|
||||
const format = ref<'yaml' | 'text' | 'mrs'>('yaml')
|
||||
/** 用户手选过格式就不再跟着来源推断 */
|
||||
const formatTouched = ref(false)
|
||||
|
||||
const isUrl = computed(() => /^https?:\/\//i.test(source.value.trim()))
|
||||
|
||||
watch(source, (value) => {
|
||||
if (!formatTouched.value) format.value = inferRuleFormat(value.trim())
|
||||
})
|
||||
|
||||
const nameTaken = computed(() => props.takenNames.includes(name.value.trim()))
|
||||
|
||||
/** 内核没有实现 classical 行为的 mrs 格式（rules/provider/ 下只有 domain 和 ipcidr 两种策略） */
|
||||
const mrsConflict = computed(() => format.value === 'mrs' && behavior.value === 'classical')
|
||||
|
||||
const canSubmit = computed(
|
||||
() =>
|
||||
name.value.trim() !== '' &&
|
||||
source.value.trim() !== '' &&
|
||||
!nameTaken.value &&
|
||||
!mrsConflict.value &&
|
||||
!props.saving,
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(open) => {
|
||||
if (open) {
|
||||
name.value = ''
|
||||
source.value = ''
|
||||
behavior.value = 'classical'
|
||||
format.value = 'yaml'
|
||||
formatTouched.value = false
|
||||
dialog.value?.showModal()
|
||||
} else {
|
||||
dialog.value?.close()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
function submit() {
|
||||
if (!canSubmit.value) return
|
||||
const trimmedName = name.value.trim()
|
||||
const trimmedSource = source.value.trim()
|
||||
const declaration: ConfigObject = isUrl.value
|
||||
? {
|
||||
type: 'http',
|
||||
behavior: behavior.value,
|
||||
url: trimmedSource,
|
||||
path: ruleProviderPath(trimmedName, format.value),
|
||||
format: format.value,
|
||||
interval: 86400,
|
||||
}
|
||||
: { type: 'file', behavior: behavior.value, path: trimmedSource, format: format.value }
|
||||
emit('submit', { name: trimmedName, declaration })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<dialog ref="dialog" class="dlg" @close="emit('close')" @cancel.prevent="emit('close')">
|
||||
<form method="dialog" @submit.prevent="submit">
|
||||
<header class="dlg-head">
|
||||
<h2>新增规则组</h2>
|
||||
<button type="button" class="x" @click="emit('close')"><IconClose /></button>
|
||||
</header>
|
||||
|
||||
<div class="body">
|
||||
<label class="row">
|
||||
<span class="k">名称</span>
|
||||
<span class="v">
|
||||
<input v-model="name" type="text" placeholder="ads" autocomplete="off" />
|
||||
<span v-if="nameTaken" class="bad">名称已存在</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="row">
|
||||
<span class="k">来源</span>
|
||||
<span class="v">
|
||||
<input
|
||||
v-model="source"
|
||||
class="mono"
|
||||
type="text"
|
||||
placeholder="https://… 或本地文件路径"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<span v-if="source.trim() !== ''" class="note">
|
||||
{{ isUrl ? 'http 类型，由内核定时拉取' : 'file 类型，读本机文件' }}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="row">
|
||||
<span class="k">行为</span>
|
||||
<span class="v">
|
||||
<select v-model="behavior">
|
||||
<option value="classical">classical</option>
|
||||
<option value="domain">domain</option>
|
||||
<option value="ipcidr">ipcidr</option>
|
||||
</select>
|
||||
<span class="note">
|
||||
清单每行带 DOMAIN,、IP-CIDR, 这类前缀的是 classical；纯域名列表是 domain；
|
||||
纯 IP 网段列表是 ipcidr
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="row">
|
||||
<span class="k">格式</span>
|
||||
<span class="v">
|
||||
<select v-model="format" @change="formatTouched = true">
|
||||
<option value="yaml">yaml</option>
|
||||
<option value="text">text</option>
|
||||
<option value="mrs">mrs</option>
|
||||
</select>
|
||||
<span v-if="mrsConflict" class="bad">mrs 格式只支持 domain 和 ipcidr 两种行为</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<footer class="dlg-foot">
|
||||
<button type="button" class="btn" @click="emit('close')">取消</button>
|
||||
<button type="submit" class="btn btn-go" :disabled="!canSubmit">
|
||||
{{ saving ? '保存中' : '保存' }}
|
||||
</button>
|
||||
</footer>
|
||||
</form>
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dlg {
|
||||
width: min(520px, calc(100vw - 2 * var(--s-5)));
|
||||
padding: 0;
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-lg);
|
||||
background: var(--c-surface);
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.dlg::backdrop {
|
||||
background: rgb(0 0 0 / 0.45);
|
||||
}
|
||||
|
||||
.dlg-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--s-4) var(--s-5);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.dlg-head h2 {
|
||||
font-size: var(--t-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.x {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--r-sm);
|
||||
background: none;
|
||||
color: var(--c-text-faint);
|
||||
cursor: pointer;
|
||||
}
|
||||
.x:hover {
|
||||
background: var(--c-surface-sunken);
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-4);
|
||||
padding: var(--s-5);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 4rem 1fr;
|
||||
gap: var(--s-4);
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.k {
|
||||
color: var(--c-text-soft);
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
|
||||
.v {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: var(--s-2) var(--s-3);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--c-bg);
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
padding-right: var(--s-6);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%23898f98' d='M12 15.6 5.7 9.3l1.4-1.4 4.9 4.9 4.9-4.9 1.4 1.4z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right var(--s-3) center;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: var(--t-xs);
|
||||
color: var(--c-text-faint);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.bad {
|
||||
font-size: var(--t-xs);
|
||||
color: var(--c-danger);
|
||||
}
|
||||
|
||||
.dlg-foot {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--s-2);
|
||||
padding: var(--s-4) var(--s-5);
|
||||
border-top: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--s-2) var(--s-4);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--c-surface);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-go {
|
||||
background: var(--c-accent);
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-go:disabled {
|
||||
background: var(--c-surface-sunken);
|
||||
border-color: var(--c-border);
|
||||
color: var(--c-text-faint);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,799 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 规则页：全局分流规则的编辑，加上规则组（rule-providers）的管理。
|
||||
*
|
||||
* 和路由页同一条界线：增删改规则、增删规则组是配置动作，都走 commit()，有校验和
|
||||
* 重载的等待；「立刻更新」规则组是运行时动作，不写配置文件，直接调内核接口。
|
||||
*
|
||||
* 顺序是分流语义的一部分。这张表的任何操作都只动被动到的那一行，其余行的相对
|
||||
* 顺序不变——排序只有上移下移，没有任何隐式重排。
|
||||
*/
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { collectOutboundNames } from '@shared/inbounds.ts'
|
||||
import {
|
||||
findRuleIssues,
|
||||
firstMatchIndex,
|
||||
insertBeforeMatch,
|
||||
missingLanRules,
|
||||
moveRule,
|
||||
parseRule,
|
||||
ruleProvidersOf,
|
||||
ruleSetReferences,
|
||||
rulesOf,
|
||||
setRuleProviders,
|
||||
setRules,
|
||||
} from '@shared/rules.ts'
|
||||
import type { IniImportPlan, RuleIssue } from '@shared/rules.ts'
|
||||
import type { ConfigObject } from '../../vendor/config-editor/index.ts'
|
||||
import { ApiError, api } from '../api'
|
||||
import type { RuleProviderInfo } from '../api'
|
||||
import { kernel } from '../runtime'
|
||||
import ConfirmDialog from '../components/ConfirmDialog.vue'
|
||||
import RuleForm from './RuleForm.vue'
|
||||
import RuleGroupForm from './RuleGroupForm.vue'
|
||||
import IniImportForm from './IniImportForm.vue'
|
||||
import IconAdd from '~icons/ri/add-line'
|
||||
import IconUp from '~icons/ri/arrow-up-line'
|
||||
import IconDown from '~icons/ri/arrow-down-line'
|
||||
import IconEdit from '~icons/ri/edit-line'
|
||||
import IconDelete from '~icons/ri/delete-bin-line'
|
||||
import IconRefresh from '~icons/ri/refresh-line'
|
||||
import IconLoad from '~icons/ri/loader-4-line'
|
||||
|
||||
const props = defineProps<{ data: ConfigObject; revision: string }>()
|
||||
|
||||
/** 配置文件变了，需要重读整份配置。运行时的变化不走这里。 */
|
||||
const emit = defineEmits<{ saved: [] }>()
|
||||
|
||||
const clone = () => JSON.parse(JSON.stringify(props.data)) as ConfigObject
|
||||
|
||||
const rules = computed(() => rulesOf(props.data))
|
||||
/** 每行拆好的样子，模板直接读，不在渲染里反复拆。 */
|
||||
const rows = computed(() =>
|
||||
rules.value.map((rule, index) => ({ index, raw: rule, ...parseRule(rule) })),
|
||||
)
|
||||
const providers = computed(() =>
|
||||
Object.entries(ruleProvidersOf(props.data)).map(([name, decl]) => ({
|
||||
name,
|
||||
behavior: typeof decl.behavior === 'string' ? decl.behavior : '',
|
||||
source:
|
||||
typeof decl.url === 'string'
|
||||
? decl.url
|
||||
: typeof decl.path === 'string'
|
||||
? decl.path
|
||||
: '',
|
||||
})),
|
||||
)
|
||||
const providerNames = computed(() => providers.value.map((p) => p.name))
|
||||
|
||||
const outbounds = computed(() => collectOutboundNames(props.data))
|
||||
const outboundNames = computed(() => [
|
||||
...outbounds.value.builtins,
|
||||
...outbounds.value.groups,
|
||||
...outbounds.value.ownProxies,
|
||||
])
|
||||
|
||||
/** 第一条 MATCH 的下标。它之后的行标成不可达。 */
|
||||
const matchAt = computed(() => firstMatchIndex(rules.value))
|
||||
|
||||
/** 断引用按行归好，模板里直接查。 */
|
||||
const issuesByIndex = computed(() => {
|
||||
const issueMap = new Map<number, RuleIssue[]>()
|
||||
for (const issue of findRuleIssues(
|
||||
rules.value,
|
||||
new Set(outboundNames.value),
|
||||
new Set(providerNames.value),
|
||||
)) {
|
||||
issueMap.set(issue.index, [...(issueMap.get(issue.index) ?? []), issue])
|
||||
}
|
||||
return issueMap
|
||||
})
|
||||
|
||||
const missingLan = computed(() => missingLanRules(rules.value))
|
||||
|
||||
const saving = ref(false)
|
||||
const failure = ref<{ message: string; hint: string } | null>(null)
|
||||
const done = ref('')
|
||||
|
||||
/** 所有改配置文件的动作都从这里走。 */
|
||||
async function commit(raw: ConfigObject, success: string) {
|
||||
saving.value = true
|
||||
failure.value = null
|
||||
done.value = ''
|
||||
try {
|
||||
const result = await api.applyConfig(raw, props.revision)
|
||||
// 没重载有两种情况（内容没有变化、内核不在线只写了文件），都要如实说
|
||||
done.value = result.reloaded ? success : `${success}（${result.reloadMessage}）`
|
||||
emit('saved')
|
||||
} catch (error) {
|
||||
failure.value =
|
||||
error instanceof ApiError
|
||||
? { message: error.message, hint: error.hint }
|
||||
: { message: String(error), hint: '' }
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function withRules(next: string[]): ConfigObject {
|
||||
const data = clone()
|
||||
setRules(data, next)
|
||||
return data
|
||||
}
|
||||
|
||||
// ── 分流规则 ────────────────────────────────────
|
||||
|
||||
const ruleFormOpen = ref(false)
|
||||
/** 编辑时是下标，新增时是 null */
|
||||
const ruleEditing = ref<number | null>(null)
|
||||
|
||||
function openAddRule() {
|
||||
ruleEditing.value = null
|
||||
ruleFormOpen.value = true
|
||||
}
|
||||
|
||||
function openEditRule(index: number) {
|
||||
ruleEditing.value = index
|
||||
ruleFormOpen.value = true
|
||||
}
|
||||
|
||||
async function submitRule(ruleText: string) {
|
||||
const editing = ruleEditing.value
|
||||
const next =
|
||||
editing === null
|
||||
? insertBeforeMatch(rules.value, [ruleText])
|
||||
: rules.value.map((rule, i) => (i === editing ? ruleText : rule))
|
||||
await commit(withRules(next), editing === null ? '已新增规则' : '已保存')
|
||||
// 失败时不能关对话框——关了再打开就是空表单
|
||||
if (!failure.value) ruleFormOpen.value = false
|
||||
}
|
||||
|
||||
async function move(index: number, delta: -1 | 1) {
|
||||
if (saving.value) return
|
||||
await commit(withRules(moveRule(rules.value, index, delta)), '顺序已保存')
|
||||
}
|
||||
|
||||
/** 待确认删除的规则下标。非 null 时确认对话框打开着。 */
|
||||
const removingRule = ref<number | null>(null)
|
||||
|
||||
async function removeRuleConfirmed() {
|
||||
const index = removingRule.value
|
||||
removingRule.value = null
|
||||
if (index === null || saving.value) return
|
||||
await commit(
|
||||
withRules(rules.value.filter((_, i) => i !== index)),
|
||||
'已删除这条规则',
|
||||
)
|
||||
}
|
||||
|
||||
async function applyLanPreset() {
|
||||
if (saving.value || missingLan.value.length === 0) return
|
||||
await commit(
|
||||
withRules(insertBeforeMatch(rules.value, missingLan.value)),
|
||||
`已加入 ${missingLan.value.length} 条内网直连规则`,
|
||||
)
|
||||
}
|
||||
|
||||
// ── 规则组 ─────────────────────────────────────
|
||||
|
||||
/** 每个规则组的运行时状态：条数、上次更新。内核不在线时是空的。 */
|
||||
const providerState = ref<Record<string, RuleProviderInfo>>({})
|
||||
|
||||
async function reloadProviderState() {
|
||||
if (!kernel.value.online) {
|
||||
providerState.value = {}
|
||||
return
|
||||
}
|
||||
providerState.value = await api
|
||||
.ruleProviders()
|
||||
.then((r) => r.providers)
|
||||
.catch(() => ({}))
|
||||
}
|
||||
|
||||
onMounted(() => void reloadProviderState())
|
||||
// 配置重读（保存成功、别的页面改完回来）之后跟着刷一遍，条数可能刚变过
|
||||
watch(
|
||||
() => props.revision,
|
||||
() => void reloadProviderState(),
|
||||
)
|
||||
|
||||
/** 还没拉取过时内核给的是零值时间，显示成横线而不是 0001 年。 */
|
||||
function formatTime(value: string | undefined): string {
|
||||
if (!value) return '—'
|
||||
const time = new Date(value)
|
||||
if (Number.isNaN(time.getTime()) || time.getFullYear() <= 1) return '—'
|
||||
return time.toLocaleString()
|
||||
}
|
||||
|
||||
const groupFormOpen = ref(false)
|
||||
const importOpen = ref(false)
|
||||
|
||||
async function submitGroup(entry: { name: string; declaration: ConfigObject }) {
|
||||
const next = clone()
|
||||
setRuleProviders(next, { ...ruleProvidersOf(next), [entry.name]: entry.declaration })
|
||||
await commit(next, `已新增规则组 ${entry.name}`)
|
||||
if (!failure.value) {
|
||||
groupFormOpen.value = false
|
||||
void reloadProviderState()
|
||||
}
|
||||
}
|
||||
|
||||
async function submitImport(plan: IniImportPlan) {
|
||||
const next = clone()
|
||||
setRuleProviders(next, { ...ruleProvidersOf(next), ...plan.providers })
|
||||
setRules(next, [...insertBeforeMatch(rules.value, plan.rules), ...plan.finals])
|
||||
const added = plan.rules.length + plan.finals.length
|
||||
await commit(
|
||||
next,
|
||||
`已导入 ${Object.keys(plan.providers).length} 个规则组、${String(added)} 条规则`,
|
||||
)
|
||||
if (!failure.value) {
|
||||
importOpen.value = false
|
||||
void reloadProviderState()
|
||||
}
|
||||
}
|
||||
|
||||
/** 待确认删除的规则组。 */
|
||||
const removingProvider = ref<string | null>(null)
|
||||
/** 删除被拦下的规则组：rules 里还有 RULE-SET 引用它，先把引用列出来。 */
|
||||
const blockedProvider = ref<{ name: string; refs: string[] } | null>(null)
|
||||
const blockedDialog = ref<HTMLDialogElement | null>(null)
|
||||
watch(blockedProvider, (blocked) => {
|
||||
if (blocked) blockedDialog.value?.showModal()
|
||||
else blockedDialog.value?.close()
|
||||
})
|
||||
|
||||
/** 点在遮罩上就关闭。内容区的点击 target 是里面的元素，到不了 dialog 本身。 */
|
||||
function onBlockedBackdrop(event: MouseEvent) {
|
||||
if (event.target === blockedDialog.value) blockedProvider.value = null
|
||||
}
|
||||
|
||||
function askRemoveProvider(name: string) {
|
||||
const refs = ruleSetReferences(rules.value, name)
|
||||
if (refs.length > 0) {
|
||||
blockedProvider.value = { name, refs: refs.map((i) => rules.value[i]!) }
|
||||
} else {
|
||||
removingProvider.value = name
|
||||
}
|
||||
}
|
||||
|
||||
async function removeProviderConfirmed() {
|
||||
const name = removingProvider.value
|
||||
removingProvider.value = null
|
||||
if (name === null || saving.value) return
|
||||
const next = clone()
|
||||
const rest = ruleProvidersOf(next)
|
||||
delete rest[name]
|
||||
setRuleProviders(next, rest)
|
||||
await commit(next, `已删除规则组 ${name}`)
|
||||
if (!failure.value) void reloadProviderState()
|
||||
}
|
||||
|
||||
/** 正在等内核重新拉取的规则组名字。 */
|
||||
const updating = ref<string | null>(null)
|
||||
|
||||
/** 立刻更新是运行时动作：不写配置文件，不走 commit()，也就没有保存的等待感。 */
|
||||
async function updateNow(name: string) {
|
||||
if (updating.value !== null || saving.value) return
|
||||
updating.value = name
|
||||
failure.value = null
|
||||
done.value = ''
|
||||
try {
|
||||
await api.updateRuleProvider(name)
|
||||
await reloadProviderState()
|
||||
} catch (error) {
|
||||
failure.value = {
|
||||
message: error instanceof ApiError ? error.message : String(error),
|
||||
hint: '该操作仅修改内核运行状态，配置文件未被修改。',
|
||||
}
|
||||
} finally {
|
||||
updating.value = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<header class="head">
|
||||
<div class="sums">
|
||||
<div class="sum">
|
||||
<span class="sum-n">{{ rules.length }}</span>
|
||||
<span class="sum-k">分流规则</span>
|
||||
</div>
|
||||
<div class="sum">
|
||||
<span class="sum-n">{{ providers.length }}</span>
|
||||
<span class="sum-k">规则组</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div v-if="failure" class="failure">
|
||||
<strong>{{ failure.message }}</strong>
|
||||
<span v-if="failure.hint">{{ failure.hint }}</span>
|
||||
</div>
|
||||
<p v-else-if="done" class="done">{{ done }}</p>
|
||||
|
||||
<section class="sec">
|
||||
<header class="sec-head">
|
||||
<h2>分流规则</h2>
|
||||
<div class="sec-acts">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
:disabled="saving || missingLan.length === 0"
|
||||
@click="applyLanPreset"
|
||||
>
|
||||
内网直连
|
||||
</button>
|
||||
<button type="button" class="btn" :disabled="saving" @click="openAddRule">
|
||||
<IconAdd />
|
||||
<span>新增</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<ol v-if="rules.length > 0" class="rows">
|
||||
<li v-for="row in rows" :key="row.index">
|
||||
<div :class="['line', matchAt >= 0 && row.index > matchAt && 'is-dead']">
|
||||
<span class="idx mono">{{ row.index + 1 }}</span>
|
||||
<span class="rtype mono">{{ row.type }}</span>
|
||||
<span class="payload mono">
|
||||
<template v-if="row.payload !== null">
|
||||
<span :class="{ bad: issuesByIndex.get(row.index)?.some((i) => i.kind === 'rule-set') }">
|
||||
{{ row.payload }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-if="row.extras.length > 0" class="extras">
|
||||
{{ row.extras.join(', ') }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="rtarget mono">
|
||||
<span :class="{ bad: issuesByIndex.get(row.index)?.some((i) => i.kind === 'target') }">
|
||||
{{ row.target }}
|
||||
</span>
|
||||
<span v-if="issuesByIndex.has(row.index)" class="tag tag-bad">断引用</span>
|
||||
<span v-if="matchAt >= 0 && row.index > matchAt" class="tag">不可达</span>
|
||||
</span>
|
||||
<span class="acts">
|
||||
<button
|
||||
type="button"
|
||||
class="icon-btn"
|
||||
title="上移"
|
||||
:disabled="saving || row.index === 0"
|
||||
@click="move(row.index, -1)"
|
||||
>
|
||||
<IconUp />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="icon-btn"
|
||||
title="下移"
|
||||
:disabled="saving || row.index === rules.length - 1"
|
||||
@click="move(row.index, 1)"
|
||||
>
|
||||
<IconDown />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="icon-btn"
|
||||
title="编辑"
|
||||
:disabled="saving"
|
||||
@click="openEditRule(row.index)"
|
||||
>
|
||||
<IconEdit />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="icon-btn danger"
|
||||
title="删除"
|
||||
:disabled="saving"
|
||||
@click="removingRule = row.index"
|
||||
>
|
||||
<IconDelete />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
<p v-else class="empty">没有分流规则，走规则的流量都会直连。</p>
|
||||
</section>
|
||||
|
||||
<section class="sec">
|
||||
<header class="sec-head">
|
||||
<h2>规则组</h2>
|
||||
<div class="sec-acts">
|
||||
<button type="button" class="btn" :disabled="saving" @click="importOpen = true">
|
||||
导入 ini
|
||||
</button>
|
||||
<button type="button" class="btn" :disabled="saving" @click="groupFormOpen = true">
|
||||
<IconAdd />
|
||||
<span>新增</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<ol v-if="providers.length > 0" class="rows">
|
||||
<li v-for="provider in providers" :key="provider.name">
|
||||
<div class="line gline">
|
||||
<span class="gname">{{ provider.name }}</span>
|
||||
<span class="gbehavior mono">{{ provider.behavior || '—' }}</span>
|
||||
<span class="gsource mono" :title="provider.source">{{ provider.source }}</span>
|
||||
<span class="gcount mono">{{ providerState[provider.name]?.ruleCount ?? '—' }}</span>
|
||||
<span class="gtime mono">{{ formatTime(providerState[provider.name]?.updatedAt) }}</span>
|
||||
<span class="acts">
|
||||
<button
|
||||
type="button"
|
||||
class="icon-btn"
|
||||
:title="kernel.online ? '立刻更新' : '内核未连接'"
|
||||
:disabled="!kernel.online || updating !== null || saving"
|
||||
@click="updateNow(provider.name)"
|
||||
>
|
||||
<IconLoad v-if="updating === provider.name" class="spin" />
|
||||
<IconRefresh v-else />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="icon-btn danger"
|
||||
title="删除"
|
||||
:disabled="saving"
|
||||
@click="askRemoveProvider(provider.name)"
|
||||
>
|
||||
<IconDelete />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
<p v-else class="empty">没有规则组。</p>
|
||||
</section>
|
||||
|
||||
<RuleForm
|
||||
:open="ruleFormOpen"
|
||||
:editing="ruleEditing === null ? null : { index: ruleEditing, raw: rules[ruleEditing]! }"
|
||||
:outbound-names="outboundNames"
|
||||
:provider-names="providerNames"
|
||||
:saving="saving"
|
||||
@close="ruleFormOpen = false"
|
||||
@submit="submitRule"
|
||||
/>
|
||||
|
||||
<RuleGroupForm
|
||||
:open="groupFormOpen"
|
||||
:taken-names="providerNames"
|
||||
:saving="saving"
|
||||
@close="groupFormOpen = false"
|
||||
@submit="submitGroup"
|
||||
/>
|
||||
|
||||
<IniImportForm
|
||||
:open="importOpen"
|
||||
:outbound-names="outboundNames"
|
||||
:existing-provider-names="providerNames"
|
||||
:saving="saving"
|
||||
@close="importOpen = false"
|
||||
@submit="submitImport"
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
:open="removingRule !== null"
|
||||
:message="removingRule === null ? '' : `删除这条规则？${rules[removingRule]}`"
|
||||
action="删除"
|
||||
@close="removingRule = null"
|
||||
@confirm="removeRuleConfirmed"
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
:open="removingProvider !== null"
|
||||
:message="removingProvider === null ? '' : `删除规则组「${removingProvider}」？`"
|
||||
action="删除"
|
||||
@close="removingProvider = null"
|
||||
@confirm="removeProviderConfirmed"
|
||||
/>
|
||||
|
||||
<!-- 删除被 RULE-SET 引用拦下时不给确认键：先改掉这些规则，才轮得到删 -->
|
||||
<dialog
|
||||
ref="blockedDialog"
|
||||
class="dlg"
|
||||
@click="onBlockedBackdrop"
|
||||
@close="blockedProvider = null"
|
||||
@cancel.prevent="blockedProvider = null"
|
||||
>
|
||||
<div v-if="blockedProvider" class="dlg-body">
|
||||
<p class="msg">
|
||||
规则组「{{ blockedProvider.name }}」正被 {{ blockedProvider.refs.length }} 条规则引用：
|
||||
</p>
|
||||
<ul class="refs">
|
||||
<li v-for="rule in blockedProvider.refs" :key="rule" class="mono">{{ rule }}</li>
|
||||
</ul>
|
||||
<footer class="dlg-foot">
|
||||
<button type="button" class="btn" @click="blockedProvider = null">知道了</button>
|
||||
</footer>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--s-4);
|
||||
margin-bottom: var(--s-5);
|
||||
}
|
||||
|
||||
.sums {
|
||||
display: flex;
|
||||
gap: var(--s-6);
|
||||
}
|
||||
|
||||
.sum {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--s-2);
|
||||
}
|
||||
|
||||
.sum-n {
|
||||
font-size: var(--t-2xl);
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.sum-k {
|
||||
color: var(--c-text-soft);
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
|
||||
.failure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-1);
|
||||
border: 1px solid color-mix(in srgb, var(--c-danger) 35%, var(--c-border));
|
||||
border-radius: var(--r-md);
|
||||
background: var(--c-danger-soft);
|
||||
padding: var(--s-3) var(--s-4);
|
||||
margin-bottom: var(--s-4);
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
|
||||
.done {
|
||||
color: var(--c-ok);
|
||||
font-size: var(--t-sm);
|
||||
margin-bottom: var(--s-4);
|
||||
}
|
||||
|
||||
.sec + .sec {
|
||||
margin-top: var(--s-7);
|
||||
}
|
||||
|
||||
.sec-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--s-4);
|
||||
margin-bottom: var(--s-3);
|
||||
}
|
||||
|
||||
.sec-head h2 {
|
||||
font-size: var(--t-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sec-acts {
|
||||
display: flex;
|
||||
gap: var(--s-2);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-2);
|
||||
padding: var(--s-2) var(--s-3);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--c-surface);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover:not(:disabled) {
|
||||
border-color: var(--c-accent);
|
||||
color: var(--c-accent-text);
|
||||
}
|
||||
.btn:disabled {
|
||||
color: var(--c-text-faint);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rows {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--c-surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rows li + li {
|
||||
border-top: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.line {
|
||||
display: grid;
|
||||
grid-template-columns: 2rem 8.5rem minmax(0, 1fr) minmax(6rem, auto) auto;
|
||||
align-items: center;
|
||||
gap: var(--s-3);
|
||||
padding: var(--s-2) var(--s-4);
|
||||
}
|
||||
|
||||
.idx {
|
||||
font-size: var(--t-xs);
|
||||
color: var(--c-text-faint);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.rtype {
|
||||
font-size: var(--t-sm);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.payload {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--s-3);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.extras {
|
||||
color: var(--c-text-faint);
|
||||
font-size: var(--t-xs);
|
||||
}
|
||||
|
||||
.rtarget {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--s-2);
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
|
||||
/* 不可达：在第一条 MATCH 之后，永远轮不到它 */
|
||||
.is-dead .rtype,
|
||||
.is-dead .payload,
|
||||
.is-dead .rtarget {
|
||||
color: var(--c-text-faint);
|
||||
}
|
||||
|
||||
.bad {
|
||||
color: var(--c-danger);
|
||||
}
|
||||
|
||||
.tag {
|
||||
flex: none;
|
||||
padding: 0 var(--s-2);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: 999px;
|
||||
font-size: var(--t-xs);
|
||||
color: var(--c-text-soft);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tag-bad {
|
||||
border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-border));
|
||||
color: var(--c-danger);
|
||||
}
|
||||
|
||||
.acts {
|
||||
display: flex;
|
||||
gap: var(--s-1);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--r-sm);
|
||||
background: none;
|
||||
color: var(--c-text-faint);
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-btn:hover:not(:disabled) {
|
||||
background: var(--c-surface-sunken);
|
||||
color: var(--c-text);
|
||||
}
|
||||
.icon-btn.danger:hover:not(:disabled) {
|
||||
color: var(--c-danger);
|
||||
}
|
||||
.icon-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.gline {
|
||||
grid-template-columns: minmax(8rem, 1fr) 5.5rem minmax(0, 1.6fr) 4rem 10.5rem auto;
|
||||
}
|
||||
|
||||
.gname {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gbehavior {
|
||||
font-size: var(--t-sm);
|
||||
color: var(--c-text-soft);
|
||||
}
|
||||
|
||||
.gsource {
|
||||
font-size: var(--t-sm);
|
||||
color: var(--c-text-soft);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gcount {
|
||||
font-size: var(--t-sm);
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.gtime {
|
||||
font-size: var(--t-xs);
|
||||
color: var(--c-text-soft);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.spin {
|
||||
animation: spin 0.9s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--c-text-faint);
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
|
||||
.dlg {
|
||||
width: min(480px, calc(100vw - 2 * var(--s-5)));
|
||||
padding: 0;
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-lg);
|
||||
background: var(--c-surface);
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.dlg::backdrop {
|
||||
background: rgb(0 0 0 / 0.45);
|
||||
}
|
||||
|
||||
.dlg-body {
|
||||
padding: var(--s-5);
|
||||
}
|
||||
|
||||
.refs {
|
||||
margin: var(--s-3) 0 0;
|
||||
padding-left: 1.2em;
|
||||
font-size: var(--t-sm);
|
||||
color: var(--c-text-soft);
|
||||
}
|
||||
|
||||
.dlg-foot {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--s-5);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user