feat(admin): WallScenarioCard 双状态场景卡组件
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -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>
|
||||||
Reference in New Issue
Block a user