mihomo-patchbay/web/views/RuleForm.vue

<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',
  '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>