From ab0cf9f64e6befd2f7f5e84ffc524eef8a0ba491 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Wed, 14 Oct 2026 19:08:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20WallScenarioCard=20=E5=8F=8C?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=9C=BA=E6=99=AF=E5=8D=A1=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 .../views/config/center/wall/ScenarioCard.vue | 224 ++++++++++++++++++
 1 file changed, 224 insertions(+)
 create mode 100644 admin/src/views/config/center/wall/ScenarioCard.vue

diff --git a/admin/src/views/config/center/wall/ScenarioCard.vue b/admin/src/views/config/center/wall/ScenarioCard.vue
new file mode 100644
index 0000000..3b7a983
--- /dev/null
+++ b/admin/src/views/config/center/wall/ScenarioCard.vue
@@ -0,0 +1,224 @@
+<!--
+  双状态场景卡（spec §5.2）：同一场景 × 未留资/已留资两池位（WALL_SCENARIOS）。
+  语言 tabs = poolLanguages(两池并集)（必留语言不可删；附加语言可删/可加）；
+  每语言 tab 下两池位各一行编辑器（一行一句，增删行）。
+  直接改传入的 reactive WallEditModel.pools（与 WallPane 现状同模式）。
+-->
+<template>
+  <div class="scenario-card">
+    <div class="sc-head">
+      <div>
+        <p class="sc-title">{{ def.title }}</p>
+        <p class="sc-note">{{ def.note }}</p>
+      </div>
+      <ElTag v-if="requiredMissing.length" type="danger" size="small">
+        缺必留语言：{{ requiredMissing.join(' / ') }}
+      </ElTag>
+    </div>
+
+    <ElTabs v-if="langs.length" v-model="activeLang" class="sc-tabs">
+      <ElTabPane v-for="lang in langs" :key="lang" :name="lang">
+        <template #label>
+          <span class="sc-lang-label">
+            {{ lang }}
+            <span v-if="isExtraLang(lang)" class="sc-lang-del" title="删除此语言"
+              @click.prevent="removeLang(lang)">×</span>
+          </span>
+        </template>
+        <div v-for="pool in def.pools" :key="pool.field" class="sc-pool">
+          <p class="sc-pool-label">{{ SCENARIO_WHEN_LABELS[pool.when] }}</p>
+          <div v-for="(row, i) in poolRows(pool.field, lang)" :key="i" class="sc-row">
+            <ElInput
+              :model-value="row"
+              placeholder="话术句子（一行一句）"
+              class="sc-input"
+              @update:model-value="setPoolRow(pool.field, lang, i, $event)"
+            />
+            <ElButton
+              link type="danger" size="small"
+              @click="removePoolRow(pool.field, lang, i)"
+            >删除</ElButton>
+          </div>
+          <ElButton size="small" text bg class="sc-add"
+            @click="addPoolRow(pool.field, lang)">＋ 添加一句</ElButton>
+        </div>
+      </ElTabPane>
+    </ElTabs>
+    <p v-else class="sc-empty">还没有话术——添加第一个语言开始</p>
+
+    <div class="sc-new-lang">
+      <ElInput v-model="newLang" placeholder="语言代码如 pt / ru / ar" class="sc-new-lang-input" />
+      <ElButton size="small" @click="addLang">＋ 添加语言</ElButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {
+    POOL_REQUIRED_LANGS,
+    SCENARIO_WHEN_LABELS,
+    poolLanguages,
+    type ScenarioDef,
+    type WallEditModel
+  } from '../model'
+
+  defineOptions({ name: 'WallScenarioCard' })
+
+  const props = defineProps<{
+    def: ScenarioDef
+    model: WallEditModel
+  }>()
+
+  const activeLang = ref('')
+  const newLang = ref('')
+
+  const langs = computed(() =>
+    poolLanguages(Object.fromEntries(props.def.pools.map((p) => [p.field, props.model.pools[p.field]])))
+  )
+
+  watch(
+    langs,
+    (list) => {
+      if (list.length && !list.includes(activeLang.value)) activeLang.value = list[0]
+    },
+    { immediate: true }
+  )
+
+  const requiredMissing = computed(() =>
+    POOL_REQUIRED_LANGS.filter(
+      (l) => !langs.value.includes(l) || props.def.pools.some((p) => !(props.model.pools[p.field][l]?.length))
+    )
+  )
+
+  function isExtraLang(lang: string): boolean {
+    return !(POOL_REQUIRED_LANGS as readonly string[]).includes(lang)
+  }
+
+  function poolRows(field: string, lang: string): string[] {
+    return props.model.pools[field as keyof WallEditModel['pools']][lang] ?? []
+  }
+
+  function ensurePool(field: string, lang: string): string[] {
+    const pool = props.model.pools[field as keyof WallEditModel['pools']]
+    if (!pool[lang]) pool[lang] = []
+    return pool[lang]
+  }
+
+  function setPoolRow(field: string, lang: string, i: number, value: string): void {
+    ensurePool(field, lang)[i] = value
+  }
+
+  function addPoolRow(field: string, lang: string): void {
+    ensurePool(field, lang).push('')
+  }
+
+  function removePoolRow(field: string, lang: string, i: number): void {
+    ensurePool(field, lang).splice(i, 1)
+  }
+
+  function addLang(): void {
+    const code = newLang.value.trim().toLowerCase()
+    if (!/^[a-z]{2,3}$/.test(code)) {
+      ElMessage.warning('语言代码为 2-3 位字母（如 pt / ru / ar）')
+      return
+    }
+    for (const pool of props.def.pools) ensurePool(pool.field, code)
+    activeLang.value = code
+    newLang.value = ''
+  }
+
+  function removeLang(lang: string): void {
+    for (const pool of props.def.pools) delete props.model.pools[pool.field as keyof WallEditModel['pools']][lang]
+  }
+</script>
+
+<style scoped lang="scss">
+  .scenario-card {
+    padding: 14px 16px;
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 8px;
+
+    .sc-head {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+
+      .sc-title {
+        margin: 0;
+        font-weight: 600;
+        font-size: 14px;
+        color: var(--el-text-color-primary);
+      }
+
+      .sc-note {
+        margin: 2px 0 0;
+        font-size: 12px;
+        color: var(--art-gray-500);
+      }
+    }
+
+    .sc-tabs {
+      margin-top: 6px;
+
+      :deep(.el-tabs__header) {
+        margin-bottom: 8px;
+      }
+    }
+
+    .sc-lang-label {
+      .sc-lang-del {
+        margin-left: 4px;
+        font-size: 12px;
+        color: var(--el-color-danger);
+        cursor: pointer;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+
+    .sc-pool {
+      margin-bottom: 10px;
+
+      .sc-pool-label {
+        margin: 0 0 6px;
+        padding-left: 8px;
+        font-size: 12px;
+        color: var(--art-gray-500);
+        border-left: 3px solid var(--el-color-primary-light-5);
+      }
+    }
+
+    .sc-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 6px;
+
+      .sc-input {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+
+    .sc-empty {
+      margin: 10px 0;
+      font-size: 12px;
+      color: var(--art-gray-400);
+    }
+
+    .sc-new-lang {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding-top: 8px;
+      border-top: 1px dashed var(--el-border-color-lighter);
+
+      .sc-new-lang-input {
+        width: 180px;
+      }
+    }
+  }
+</style>