合并规则页（task/rules-page）

# Conflicts:
#	web/api.ts

shared/rules.test.ts

@@ -0,0 +1,285 @@
+import { describe, expect, it } from 'bun:test'
+import {
+  buildRule,
+  findRuleIssues,
+  firstMatchIndex,
+  inferRuleFormat,
+  insertBeforeMatch,
+  isStructuredEditable,
+  missingLanRules,
+  moveRule,
+  parseIniRulesets,
+  parseRule,
+  planIniImport,
+  ruleProviderPath,
+  ruleSetReferences,
+  setRuleProviders,
+  setRules,
+} from './rules.ts'
+import type { ConfigObject } from '../vendor/config-editor/index.ts'
+
+describe('规则字符串的拆分与拼装', () => {
+  it('常见的三段规则', () => {
+    expect(parseRule('DOMAIN-SUFFIX,youtube.com,PROXY')).toEqual({
+      type: 'DOMAIN-SUFFIX',
+      payload: 'youtube.com',
+      target: 'PROXY',
+      extras: [],
+    })
+  })
+
+  it('MATCH 没有载荷', () => {
+    expect(parseRule('MATCH,PROXY')).toEqual({
+      type: 'MATCH',
+      payload: null,
+      target: 'PROXY',
+      extras: [],
+    })
+  })
+
+  it('选项尾部原样保留', () => {
+    const parsed = parseRule('IP-CIDR,127.0.0.0/8,DIRECT,no-resolve')
+    expect(parsed.extras).toEqual(['no-resolve'])
+    // 改目标不能丢掉选项
+    expect(buildRule({ ...parsed, target: 'REJECT' })).toBe('IP-CIDR,127.0.0.0/8,REJECT,no-resolve')
+  })
+
+  it('拆开再拼回原样', () => {
+    for (const rule of [
+      'DOMAIN-SUFFIX,youtube.com,PROXY',
+      'MATCH,PROXY',
+      'IP-CIDR,127.0.0.0/8,DIRECT,no-resolve',
+      'RULE-SET,ads,REJECT',
+      'AND,((DOMAIN-SUFFIX,a.com),(DST-PORT,443)),PROXY',
+    ]) {
+      expect(buildRule(parseRule(rule))).toBe(rule)
+    }
+  })
+
+  it('逻辑规则的载荷里有逗号也不被拆开', () => {
+    const parsed = parseRule('AND,((DOMAIN-SUFFIX,a.com),(DST-PORT,443)),PROXY')
+    expect(parsed.payload).toBe('((DOMAIN-SUFFIX,a.com),(DST-PORT,443))')
+    expect(parsed.target).toBe('PROXY')
+  })
+
+  it('结构化编辑只给常见形状，逻辑规则和子规则按原文编辑', () => {
+    expect(isStructuredEditable('DOMAIN-SUFFIX,youtube.com,PROXY')).toBe(true)
+    expect(isStructuredEditable('MATCH,PROXY')).toBe(true)
+    expect(isStructuredEditable('AND,((DOMAIN-SUFFIX,a.com),(DST-PORT,443)),PROXY')).toBe(false)
+    expect(isStructuredEditable('SUB-RULE,(DOMAIN-SUFFIX,a.com),sub1')).toBe(false)
+    expect(isStructuredEditable('孤零零一段')).toBe(false)
+  })
+})
+
+describe('规则表的顺序', () => {
+  const rules = ['DOMAIN-SUFFIX,a.com,DIRECT', 'MATCH,PROXY', 'DOMAIN-SUFFIX,b.com,REJECT']
+
+  it('第一条 MATCH 之后的规则不可达', () => {
+    expect(firstMatchIndex(rules)).toBe(1)
+    expect(firstMatchIndex(['DOMAIN-SUFFIX,a.com,DIRECT'])).toBe(-1)
+  })
+
+  it('新规则插在第一条 MATCH 之前', () => {
+    expect(insertBeforeMatch(rules, ['GEOIP,CN,DIRECT'])).toEqual([
+      'DOMAIN-SUFFIX,a.com,DIRECT',
+      'GEOIP,CN,DIRECT',
+      'MATCH,PROXY',
+      'DOMAIN-SUFFIX,b.com,REJECT',
+    ])
+  })
+
+  it('没有 MATCH 时加在末尾', () => {
+    expect(insertBeforeMatch(['GEOIP,CN,DIRECT'], ['MATCH,PROXY'])).toEqual([
+      'GEOIP,CN,DIRECT',
+      'MATCH,PROXY',
+    ])
+  })
+
+  it('上移下移只交换相邻两条，其余不动', () => {
+    expect(moveRule(rules, 0, 1)).toEqual([
+      'MATCH,PROXY',
+      'DOMAIN-SUFFIX,a.com,DIRECT',
+      'DOMAIN-SUFFIX,b.com,REJECT',
+    ])
+    expect(moveRule(rules, 0, -1)).toBe(rules)
+    expect(moveRule(rules, 2, 1)).toBe(rules)
+  })
+})
+
+describe('断引用', () => {
+  it('目标出站不存在和规则组不存在都标出来', () => {
+    const rules = [
+      'DOMAIN-SUFFIX,a.com,NOPE',
+      'RULE-SET,ads,REJECT',
+      'RULE-SET,gone,DIRECT',
+      'SUB-RULE,(DOMAIN-SUFFIX,a.com),sub1',
+      'MATCH,PROXY',
+    ]
+    const issues = findRuleIssues(rules, new Set(['PROXY', 'REJECT', 'DIRECT']), new Set(['ads']))
+    expect(issues).toEqual([
+      { index: 0, kind: 'target', name: 'NOPE' },
+      { index: 2, kind: 'rule-set', name: 'gone' },
+    ])
+  })
+})
+
+describe('内网直连预设', () => {
+  it('空表全缺', () => {
+    expect(missingLanRules([])).toHaveLength(8)
+  })
+
+  it('已管住的网段不重复加，哪怕写法不完全一样', () => {
+    const existing = ['IP-CIDR,192.168.0.0/16,DIRECT', 'MATCH,PROXY']
+    const missing = missingLanRules(existing)
+    expect(missing).toHaveLength(7)
+    expect(missing.some((r) => r.includes('192.168.0.0/16'))).toBe(false)
+  })
+})
+
+describe('删除规则组前找引用', () => {
+  it('列出 rules 里引用它的规则下标', () => {
+    const rules = ['RULE-SET,ads,REJECT', 'DOMAIN-SUFFIX,a.com,DIRECT', 'RULE-SET,ads,PROXY']
+    expect(ruleSetReferences(rules, 'ads')).toEqual([0, 2])
+    expect(ruleSetReferences(rules, 'other')).toEqual([])
+  })
+})
+
+describe('配置形状', () => {
+  it('rules 空了删掉整个键', () => {
+    const data: ConfigObject = { rules: ['MATCH,PROXY'] }
+    setRules(data, ['A,B,C'])
+    expect(data.rules).toEqual(['A,B,C'])
+    setRules(data, [])
+    expect('rules' in data).toBe(false)
+  })
+
+  it('rule-providers 空了删掉整个键', () => {
+    const data: ConfigObject = {}
+    setRuleProviders(data, { ads: { type: 'http' } })
+    expect(Object.keys(data['rule-providers'] as ConfigObject)).toEqual(['ads'])
+    setRuleProviders(data, {})
+    expect('rule-providers' in data).toBe(false)
+  })
+})
+
+describe('ini 的 ruleset= 行解析', () => {
+  const ini = `
+[custom]
+; 注释行不算
+;ruleset=🎯 全球直连,[]GEOIP,LAN
+ruleset=🎯 全球直连,https://example.com/LocalAreaNetwork.list
+ruleset=🛑 全球拦截,https://example.com/BanAD.list?token=1
+ruleset=🎯 全球直连,https://example.com/GoogleCN.list
+ruleset=🍎 苹果服务,Apple.list
+ruleset=🎯 全球直连,[]GEOIP,CN
+ruleset=🐟 漏网之鱼,[]FINAL
+custom_proxy_group=🚀 节点选择\`select\`[]AUTO
+`
+
+  it('URL、本地路径、内联 GEOIP 和 FINAL 都认出来', () => {
+    expect(parseIniRulesets(ini)).toEqual([
+      { target: '🎯 全球直连', kind: 'url', source: 'https://example.com/LocalAreaNetwork.list' },
+      { target: '🛑 全球拦截', kind: 'url', source: 'https://example.com/BanAD.list?token=1' },
+      { target: '🎯 全球直连', kind: 'url', source: 'https://example.com/GoogleCN.list' },
+      { target: '🍎 苹果服务', kind: 'file', source: 'Apple.list' },
+      { target: '🎯 全球直连', kind: 'geoip', source: 'CN' },
+      { target: '🐟 漏网之鱼', kind: 'final', source: '' },
+    ])
+  })
+
+  it('custom_proxy_group 和残缺行不产生条目', () => {
+    expect(parseIniRulesets('ruleset=\nruleset=只有目标,\ncustom_proxy_group=x`select`y')).toEqual([])
+  })
+})
+
+describe('ini 导入计划', () => {
+  const entries = parseIniRulesets(`
+ruleset=🎯 全球直连,https://example.com/LocalAreaNetwork.list
+ruleset=🎯 全球直连,https://example.com/GoogleCN.list
+ruleset=🎯 全球直连,[]GEOIP,CN
+ruleset=🐟 漏网之鱼,[]FINAL
+`)
+
+  it('每行一个规则组加一条规则骨架，FINAL 落在表末尾', () => {
+    const plan = planIniImport(
+      entries,
+      { '🎯 全球直连': 'DIRECT', '🐟 漏网之鱼': 'PROXY' },
+      new Set(),
+    )
+    expect(Object.keys(plan.providers)).toEqual(['LocalAreaNetwork', 'GoogleCN'])
+    expect(plan.providers.LocalAreaNetwork).toEqual({
+      type: 'http',
+      behavior: 'classical',
+      url: 'https://example.com/LocalAreaNetwork.list',
+      path: './providers/rules/LocalAreaNetwork.txt',
+      format: 'text',
+      interval: 86400,
+    })
+    expect(plan.rules).toEqual([
+      'RULE-SET,LocalAreaNetwork,DIRECT',
+      'RULE-SET,GoogleCN,DIRECT',
+      'GEOIP,CN,DIRECT',
+    ])
+    expect(plan.finals).toEqual(['MATCH,PROXY'])
+  })
+
+  it('同一个来源出现多次只声明一个规则组', () => {
+    const plan = planIniImport(
+      [
+        { target: '甲', kind: 'url', source: 'https://example.com/a.list' },
+        { target: '乙', kind: 'url', source: 'https://example.com/a.list' },
+      ],
+      { 甲: 'DIRECT', 乙: 'REJECT' },
+      new Set(),
+    )
+    expect(Object.keys(plan.providers)).toEqual(['a'])
+    expect(plan.rules).toEqual(['RULE-SET,a,DIRECT', 'RULE-SET,a,REJECT'])
+  })
+
+  it('和已有规则组撞名时加序号', () => {
+    const plan = planIniImport(
+      [{ target: '甲', kind: 'url', source: 'https://example.com/ads.list' }],
+      { 甲: 'REJECT' },
+      new Set(['ads']),
+    )
+    expect(Object.keys(plan.providers)).toEqual(['ads-2'])
+    expect(plan.rules).toEqual(['RULE-SET,ads-2,REJECT'])
+  })
+
+  it('本地路径生成 file 类型，path 就是来源本身', () => {
+    const plan = planIniImport(
+      [{ target: '甲', kind: 'file', source: 'D:\\lists\\ads.list' }],
+      { 甲: 'REJECT' },
+      new Set(),
+    )
+    expect(plan.providers['ads']).toEqual({
+      type: 'file',
+      behavior: 'classical',
+      path: 'D:\\lists\\ads.list',
+      format: 'text',
+    })
+  })
+
+  it('没映射目标组的行跳过', () => {
+    const plan = planIniImport(entries, { '🎯 全球直连': 'DIRECT' }, new Set())
+    expect(plan.finals).toEqual([])
+    expect(plan.rules).toHaveLength(3)
+  })
+})
+
+describe('清单格式与缓存路径', () => {
+  it('格式按扩展名推断，拿不准回 yaml', () => {
+    expect(inferRuleFormat('https://example.com/a.list?token=1')).toBe('text')
+    expect(inferRuleFormat('https://example.com/a.txt')).toBe('text')
+    expect(inferRuleFormat('https://example.com/a.mrs')).toBe('mrs')
+    expect(inferRuleFormat('https://example.com/a.yaml')).toBe('yaml')
+    expect(inferRuleFormat('https://example.com/no-extension')).toBe('yaml')
+  })
+
+  it('缓存路径的扩展名跟着格式走', () => {
+    expect(ruleProviderPath('ads', 'text')).toBe('./providers/rules/ads.txt')
+    expect(ruleProviderPath('ads', 'mrs')).toBe('./providers/rules/ads.mrs')
+    expect(ruleProviderPath('ads', 'yaml')).toBe('./providers/rules/ads.yaml')
+    expect(ruleProviderPath('🛑 广告', 'yaml')).toBe('./providers/rules/广告.yaml')
+  })
+})

shared/rules.ts

@@ -0,0 +1,340 @@
+/**
+ * 分流规则与规则组（rule-providers）的纯逻辑。
+ *
+ * 拆分规则字符串只为显示和编辑常见字段，不为每种规则类型建模——内核认识的类型
+ * 比界面需要的多得多，拆不明白的（逻辑规则、子规则）由界面按原文整行编辑。
+ * 拆分用 vendor 的 splitRuleFields：它认得引号和嵌套括号，`AND`/`OR` 这类载荷里
+ * 的逗号不会被当成字段分隔。
+ */
+import { splitRuleFields } from '../vendor/config-editor/index.ts'
+import type { ConfigObject } from '../vendor/config-editor/index.ts'
+
+/** 一条分流规则拆开的样子。extras 是目标之后的选项段（如 no-resolve），原样保留。 */
+export interface ParsedRule {
+  type: string
+  /** MATCH 没有载荷，为 null */
+  payload: string | null
+  /** 目标出站。拆不出来（字段不够）时为 null */
+  target: string | null
+  extras: string[]
+}
+
+export function parseRule(rule: string): ParsedRule {
+  const fields = splitRuleFields(rule)
+  const type = fields[0] ?? ''
+  if (type.toUpperCase() === 'MATCH') {
+    return { type, payload: null, target: fields[1] ?? null, extras: fields.slice(2) }
+  }
+  return { type, payload: fields[1] ?? null, target: fields[2] ?? null, extras: fields.slice(3) }
+}
+
+/** 拼回一行规则。空字段不写，所以 MATCH 不会多出一个空载荷段。 */
+export function buildRule(parsed: ParsedRule): string {
+  return [parsed.type, parsed.payload, parsed.target, ...parsed.extras]
+    .filter((part): part is string => part !== null && part !== '')
+    .join(',')
+}
+
+/**
+ * 界面能按「类型,载荷,目标」结构化编辑的规则。
+ *
+ * 逻辑规则和子规则的结构不是这个形状，让它们进表单只会把原文拆坏，按整行编辑。
+ */
+const RAW_ONLY_TYPES = new Set(['AND', 'OR', 'NOT', 'SUB-RULE'])
+
+export function isStructuredEditable(rule: string): boolean {
+  const parsed = parseRule(rule)
+  if (RAW_ONLY_TYPES.has(parsed.type.toUpperCase())) return false
+  return parsed.target !== null
+}
+
+/** 第一条 MATCH 的下标。它之后的规则永远到不了。没有 MATCH 返回 -1。 */
+export function firstMatchIndex(rules: string[]): number {
+  return rules.findIndex((rule) => parseRule(rule).type.toUpperCase() === 'MATCH')
+}
+
+/** 把新规则插到第一条 MATCH 之前；没有 MATCH 就加在末尾。 */
+export function insertBeforeMatch(rules: string[], additions: string[]): string[] {
+  const at = firstMatchIndex(rules)
+  const index = at < 0 ? rules.length : at
+  return [...rules.slice(0, index), ...additions, ...rules.slice(index)]
+}
+
+/** 上移或下移一条规则。越界时原样返回。 */
+export function moveRule(rules: string[], index: number, delta: -1 | 1): string[] {
+  const to = index + delta
+  if (index < 0 || index >= rules.length || to < 0 || to >= rules.length) return rules
+  const next = [...rules]
+  next[index] = rules[to]!
+  next[to] = rules[index]!
+  return next
+}
+
+/** 一条规则的断引用：目标出站不存在，或者 RULE-SET 引用的规则组不存在。 */
+export interface RuleIssue {
+  index: number
+  kind: 'target' | 'rule-set'
+  name: string
+}
+
+/**
+ * 找出引用了不存在的出站或规则组的规则。
+ *
+ * 内核自带的校验命令不检查这类引用，只在有流量经过时才报错，所以保存前的自检
+ * （vendor 的 validateDocument）和界面上的标注都要自己查。SUB-RULE 的目标段是
+ * 子规则集合名而不是出站，跳过——那是路由页的段落，这里不认。
+ */
+export function findRuleIssues(
+  rules: string[],
+  outboundNames: ReadonlySet<string>,
+  providerNames: ReadonlySet<string>,
+): RuleIssue[] {
+  const issues: RuleIssue[] = []
+  rules.forEach((rule, index) => {
+    const parsed = parseRule(rule)
+    const type = parsed.type.toUpperCase()
+    if (type === 'RULE-SET' && parsed.payload !== null && !providerNames.has(parsed.payload)) {
+      issues.push({ index, kind: 'rule-set', name: parsed.payload })
+    }
+    if (type !== 'SUB-RULE' && parsed.target !== null && !outboundNames.has(parsed.target)) {
+      issues.push({ index, kind: 'target', name: parsed.target })
+    }
+  })
+  return issues
+}
+
+/**
+ * 「内网直连」预设：回环、私网和链路本地地址一律 DIRECT。
+ *
+ * no-resolve 是这类规则的固定尾巴：它们按目标 IP 匹配，让内核先做一次 DNS 解析
+ * 才能匹配是白忙一场，还会拖慢纯 IP 的连接。
+ */
+export const LAN_DIRECT_RULES = [
+  'IP-CIDR,127.0.0.0/8,DIRECT,no-resolve',
+  'IP-CIDR,10.0.0.0/8,DIRECT,no-resolve',
+  'IP-CIDR,172.16.0.0/12,DIRECT,no-resolve',
+  'IP-CIDR,192.168.0.0/16,DIRECT,no-resolve',
+  'IP-CIDR,169.254.0.0/16,DIRECT,no-resolve',
+  'IP-CIDR6,::1/128,DIRECT,no-resolve',
+  'IP-CIDR6,fc00::/7,DIRECT,no-resolve',
+  'IP-CIDR6,fe80::/10,DIRECT,no-resolve',
+] as const
+
+/**
+ * 预设里还没出现在规则表里的那几条。
+ *
+ * 按「类型,载荷」判重而不是整行比对：用户手写的 `IP-CIDR,192.168.0.0/16,DIRECT`
+ * 没有 no-resolve 尾巴，语义上已经管住了这个网段，再塞一条带尾巴的是重复。
+ */
+export function missingLanRules(rules: string[]): string[] {
+  const covered = new Set(
+    rules.map((rule) => {
+      const parsed = parseRule(rule)
+      return `${parsed.type.toUpperCase()},${parsed.payload ?? ''}`
+    }),
+  )
+  return LAN_DIRECT_RULES.filter((preset) => {
+    const parsed = parseRule(preset)
+    return !covered.has(`${parsed.type},${parsed.payload ?? ''}`)
+  })
+}
+
+/** rules: 里引用了这个规则组的规则下标。删除规则组前拿它拦人。 */
+export function ruleSetReferences(rules: string[], providerName: string): number[] {
+  const result: number[] = []
+  rules.forEach((rule, index) => {
+    const parsed = parseRule(rule)
+    if (parsed.type.toUpperCase() === 'RULE-SET' && parsed.payload === providerName) {
+      result.push(index)
+    }
+  })
+  return result
+}
+
+/** 配置里的 rule-providers 段。不是映射就当没有。 */
+export function ruleProvidersOf(data: ConfigObject): Record<string, ConfigObject> {
+  const value = data['rule-providers']
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) return {}
+  return value as Record<string, ConfigObject>
+}
+
+/** 直接改传入的对象——调用方先 clone。providers 空了就把整个键去掉，不留空映射。 */
+export function setRuleProviders(data: ConfigObject, providers: Record<string, ConfigObject>): void {
+  if (Object.keys(providers).length === 0) delete data['rule-providers']
+  else data['rule-providers'] = providers
+}
+
+/** 配置里的分流规则表。不是数组就当没有；非字符串的条目自检会报，这里不呈现。 */
+export function rulesOf(data: ConfigObject): string[] {
+  if (!Array.isArray(data.rules)) return []
+  return data.rules.filter((rule): rule is string => typeof rule === 'string')
+}
+
+/** 同上。规则表空了就删掉 rules 键，不留空数组。 */
+export function setRules(data: ConfigObject, rules: string[]): void {
+  if (rules.length === 0) delete data.rules
+  else data.rules = rules
+}
+
+/** 给文件名和规则组名去重用。 */
+function safeName(text: string): string {
+  return text.replace(/[^\p{L}\p{N}_-]+/gu, '-').replace(/^-+|-+$/g, '')
+}
+
+/** FNV-1a。只用来给名字去重，不是安全用途。 */
+function shortHash(text: string): string {
+  let h = 0x811c9dc5
+  for (let i = 0; i < text.length; i += 1) {
+    h ^= text.charCodeAt(i)
+    h = Math.imul(h, 0x01000193) >>> 0
+  }
+  return h.toString(16).padStart(8, '0')
+}
+
+/**
+ * 一个 http 规则组的缓存文件落在哪。
+ *
+ * 不写 path 时内核按 url 哈希自己生成一个（rules/provider/parse.go:51），那个路径
+ * 这里算不出来，所以补一个确定的。扩展名跟着格式走，翻目录时看得出里面是什么。
+ */
+export function ruleProviderPath(name: string, format: string): string {
+  const ext = format === 'mrs' ? 'mrs' : format === 'text' ? 'txt' : 'yaml'
+  return `./providers/rules/${safeName(name) || shortHash(name)}.${ext}`
+}
+
+/** 清单格式按来源的扩展名推断。拿不准时回到 yaml——那是内核没写 format 时的默认。 */
+export function inferRuleFormat(source: string): 'yaml' | 'text' | 'mrs' {
+  const clean = (source.split(/[?#]/)[0] ?? '').toLowerCase()
+  if (clean.endsWith('.mrs')) return 'mrs'
+  if (clean.endsWith('.list') || clean.endsWith('.txt')) return 'text'
+  return 'yaml'
+}
+
+/** ini 里一行 ruleset= 解析出来的东西。 */
+export interface IniRuleset {
+  /** ini 里的目标组名（「🎯 全球直连」这类），导入时由用户映射到实际出站 */
+  target: string
+  kind: 'url' | 'file' | 'geoip' | 'geosite' | 'final'
+  /** kind 为 url/file 时是来源，为 geoip/geosite 时是类别名，final 时为空 */
+  source: string
+}
+
+/**
+ * 解析 subconverter ini 里的 ruleset= 行。
+ *
+ * 以 ; 和 # 开头的是 ini 的注释，跳过。custom_proxy_group= 是 subconverter 自己的
+ * 建组指令，和本项目的专属组体系冲突，不在解析范围内。
+ * 来源以 [] 开头的是内联规则而不是清单：[]GEOIP,CN 这类直接生成规则，不建规则组；
+ * []FINAL（以及 []MATCH）是兜底规则。
+ */
+export function parseIniRulesets(text: string): IniRuleset[] {
+  const result: IniRuleset[] = []
+  for (const line of text.split(/\r?\n/)) {
+    const trimmed = line.trim()
+    if (trimmed === '' || trimmed.startsWith(';') || trimmed.startsWith('#')) continue
+    const match = /^ruleset\s*=\s*(.+)$/i.exec(trimmed)
+    if (!match) continue
+    const body = match[1]!
+    const comma = body.indexOf(',')
+    if (comma < 0) continue
+    const target = body.slice(0, comma).trim()
+    const source = body.slice(comma + 1).trim()
+    if (target === '' || source === '') continue
+
+    if (source.startsWith('[]')) {
+      const inline = source.slice(2).trim()
+      const geo = /^(GEOIP|GEOSITE)\s*,\s*(.+)$/i.exec(inline)
+      if (geo) {
+        result.push({
+          target,
+          kind: geo[1]!.toUpperCase() === 'GEOIP' ? 'geoip' : 'geosite',
+          source: geo[2]!.trim(),
+        })
+      } else if (inline.toUpperCase() === 'FINAL' || inline.toUpperCase() === 'MATCH') {
+        result.push({ target, kind: 'final', source: '' })
+      }
+      // 其它 [] 写法（[]REJECT 这类）认不出来，跳过比生成一条错规则好
+      continue
+    }
+    result.push({ target, kind: /^https?:\/\//i.test(source) ? 'url' : 'file', source })
+  }
+  return result
+}
+
+/** ini 导入的产物：一批规则组声明，加一批新规则。 */
+export interface IniImportPlan {
+  providers: Record<string, ConfigObject>
+  /** 普通规则，插在第一条 MATCH 之前 */
+  rules: string[]
+  /** ini 里 []FINAL 生成的兜底规则，加在整张表末尾 */
+  finals: string[]
+}
+
+/**
+ * 把 ini 的 ruleset 行变成规则组声明和规则。
+ *
+ * 每个来源生成一个规则组，名字取来源的文件名（去扩展名），和已有的、以及本次
+ * 已生成的撞名时加序号。ACL4SSR 的清单是 classical 行为的 text 格式，行为按
+ * classical 声明，格式按扩展名推断。
+ * 目标组名由 mapping 逐个映射到实际出站，没映射的行跳过。
+ */
+export function planIniImport(
+  entries: IniRuleset[],
+  mapping: Readonly<Record<string, string>>,
+  existingProviders: ReadonlySet<string>,
+): IniImportPlan {
+  const providers: Record<string, ConfigObject> = {}
+  const rules: string[] = []
+  const finals: string[] = []
+  const taken = new Set(existingProviders)
+
+  /** 同一行 ruleset 重复出现时共用一个名字，不重复声明。 */
+  const nameBySource = new Map<string, string>()
+  const nameFor = (source: string): string => {
+    const known = nameBySource.get(source)
+    if (known) return known
+    const base = (source.split(/[?#]/)[0] ?? '').split(/[\\/]/).pop() ?? ''
+    const stem = safeName(base.replace(/\.(list|txt|yaml|yml|mrs)$/i, '')) || 'rules'
+    let name = stem
+    for (let i = 2; taken.has(name); i += 1) name = `${stem}-${String(i)}`
+    taken.add(name)
+    nameBySource.set(source, name)
+    return name
+  }
+
+  for (const entry of entries) {
+    const target = mapping[entry.target]
+    if (!target) continue
+
+    if (entry.kind === 'geoip') {
+      rules.push(`GEOIP,${entry.source},${target}`)
+      continue
+    }
+    if (entry.kind === 'geosite') {
+      rules.push(`GEOSITE,${entry.source},${target}`)
+      continue
+    }
+    if (entry.kind === 'final') {
+      finals.push(`MATCH,${target}`)
+      continue
+    }
+
+    const format = inferRuleFormat(entry.source)
+    const name = nameFor(`${entry.kind}:${entry.source}`)
+    if (!providers[name]) {
+      providers[name] =
+        entry.kind === 'url'
+          ? {
+              type: 'http',
+              behavior: 'classical',
+              url: entry.source,
+              path: ruleProviderPath(name, format),
+              format,
+              interval: 86400,
+            }
+          : { type: 'file', behavior: 'classical', path: entry.source, format }
+    }
+    rules.push(`RULE-SET,${name},${target}`)
+  }
+  return { providers, rules, finals }
+}

web/api.ts

@@ -121,6 +121,20 @@ export interface ListenerFields {
   types: Record<string, { note: string; fields: FieldSpec[] }>
 }
 
+export interface RuleProviderInfo {
+  /** domain / ipcidr / classical */
+  behavior: string
+  /** yaml / text / mrs。inline 类型的没有这个字段 */
+  format?: string
+  name: string
+  /** 当前装了多少条规则 */
+  ruleCount: number
+  /** HTTP / File / Inline */
+  vehicleType: string
+  /** RFC3339。还没拉取过时是零值（0001-01-01） */
+  updatedAt: string
+}
+
 export const api = {
   readConfig: () => request<ConfigSnapshot>('GET', '/api/config'),
 
@@ -216,6 +230,23 @@ export const api = {
   refreshProvider: (name: string) =>
     request<unknown>('PUT', `/api/kernel/providers/proxies/${encodeURIComponent(name)}`),
 
+  /**
+   * 每个规则组的运行时状态：装了多少条规则、上次什么时候更新。
+   * 配置文件里只有声明，这两个数字只有运行中的内核知道。
+   */
+  ruleProviders: () =>
+    request<{ providers: Record<string, RuleProviderInfo> }>('GET', '/api/kernel/providers/rules'),
+
+  /**
+   * 让内核立刻重新拉取某个规则组。
+   * 这是运行时动作，不写配置文件，所以不走落盘那条保护链路。
+   */
+  updateRuleProvider: (name: string) =>
+    request<Record<string, never>>(
+      'PUT',
+      `/api/kernel/providers/rules/${encodeURIComponent(name)}`,
+    ),
+
   /**
    * 订阅及其线路。配置文件里只有订阅地址，有哪些线路只有运行中的内核知道。
    *

web/views/IniImportForm.vue

@@ -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>

web/views/RuleForm.vue

@@ -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>

web/views/RuleGroupForm.vue

@@ -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>

web/views/RulesPage.vue

@@ -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>