Wormhole/web/src/components/ForwardPluginEditor.vue

<template>
  <div class="plugin-editor">
    <div v-for="(plugin, index) in modelValue" :key="index" class="plugin-item">
      <div class="plugin-head">
        <el-tag size="small">{{ labelOf(plugin.type) }}</el-tag>
        <span class="plugin-type">{{ plugin.type }}</span>
        <div class="plugin-actions">
          <el-switch v-model="plugin.enabled" size="small" />
          <el-button size="small" link :disabled="index === 0" @click="move(index, -1)">{{ t('forwardPlugin.moveUp') }}</el-button>
          <el-button size="small" link :disabled="index === modelValue.length - 1" @click="move(index, 1)">{{ t('forwardPlugin.moveDown') }}</el-button>
          <el-button size="small" link type="danger" @click="remove(index)">{{ t('common.delete') }}</el-button>
        </div>
      </div>

      <template v-if="plugin.type === 'sub_filter'">
        <div v-for="(rule, ri) in plugin.config.filters" :key="ri" class="filter-row">
          <el-input v-model="rule.from" :placeholder="t('forwardPlugin.find')" />
          <el-input v-model="rule.to" :placeholder="t('forwardPlugin.replaceWith')" />
          <el-button link type="danger" @click="removeFilter(plugin, ri)">{{ t('forwardPlugin.removeShort') }}</el-button>
        </div>
        <el-button size="small" @click="addFilter(plugin)">{{ t('forwardPlugin.addRule') }}</el-button>
        <el-form-item :label="t('forwardPlugin.mimeTypes')" label-width="90px" class="plugin-mime">
          <el-select v-model="plugin.config.types" multiple filterable allow-create default-first-option class="w-full">
            <el-option label="text/html" value="text/html" />
            <el-option label="text/css" value="text/css" />
            <el-option label="application/javascript" value="application/javascript" />
          </el-select>
        </el-form-item>
      </template>

      <template v-else-if="plugin.type === 'inject_js'">
        <el-input v-model="plugin.config.script" type="textarea" :rows="4" :placeholder="t('forwardPlugin.scriptPlaceholder')" />
      </template>

      <template v-else-if="plugin.type === 'cookie_domain'">
        <div class="pair-row">
          <el-input v-model="plugin.config.from" :placeholder="t('forwardPlugin.fromDomain')" />
          <el-input v-model="plugin.config.to" :placeholder="t('forwardPlugin.toDomain')" />
        </div>
      </template>

      <template v-else-if="plugin.type === 'response_cache'">
        <div class="pair-row">
          <el-input-number v-model="plugin.config.max_mb" :min="0" :max="1024" />
          <span class="hint-inline">{{ t('forwardPlugin.mbHint') }}</span>
        </div>
        <div class="pair-row">
          <el-input-number v-model="plugin.config.ttl_sec" :min="1" :max="86400" />
          <span class="hint-inline">{{ t('forwardPlugin.ttlSec') }}</span>
        </div>
      </template>
    </div>

    <el-dropdown trigger="click" @command="addPlugin">
      <el-button type="primary" plain size="small">{{ t('forwardPlugin.addPlugin') }}</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="t in types" :key="t.type" :command="t.type">{{ t.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const props = defineProps({
  modelValue: { type: Array, default: () => [] },
  types: { type: Array, default: () => [] },
})
const emit = defineEmits(['update:modelValue'])

const typeMap = computed(() => {
  const m = {}
  for (const t of props.types) m[t.type] = t
  return m
})

function labelOf(type) {
  return typeMap.value[type]?.label || type
}

function defaultConfig(type) {
  const meta = typeMap.value[type]
  if (!meta?.default_config) return {}
  return JSON.parse(JSON.stringify(meta.default_config))
}

function addPlugin(type) {
  const next = [...props.modelValue, { type, enabled: true, config: defaultConfig(type) }]
  emit('update:modelValue', next)
}

function remove(index) {
  const next = props.modelValue.filter((_, i) => i !== index)
  emit('update:modelValue', next)
}

function move(index, delta) {
  const next = [...props.modelValue]
  const target = index + delta
  if (target < 0 || target >= next.length) return
  ;[next[index], next[target]] = [next[target], next[index]]
  emit('update:modelValue', next)
}

function addFilter(plugin) {
  if (!plugin.config.filters) plugin.config.filters = []
  plugin.config.filters.push({ from: '', to: '' })
}

function removeFilter(plugin, index) {
  plugin.config.filters.splice(index, 1)
}
</script>

<style scoped>
.plugin-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.plugin-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.plugin-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.plugin-type {
  color: var(--muted-foreground);
  font-size: 0.75rem;
}
.plugin-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.plugin-mime {
  margin-top: var(--space-2);
}
.filter-row,
.pair-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}
.pair-row + .pair-row {
  margin-top: var(--space-2);
}
.hint-inline {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}
</style>