task-247(admin.html观感对齐): 行内工具组件化（状态药丸/复制文本/掩码揭示复用 secret-mask）

admin-frontend-vue/src/components/CopyText.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { copyFeedback, isCopySupported } from './copy-model'
+
+const props = defineProps<{ text: string }>()
+
+async function handleCopy(): Promise<void> {
+  if (!props.text || !isCopySupported()) {
+    ElMessage.warning(copyFeedback(''))
+    return
+  }
+  try {
+    await navigator.clipboard.writeText(props.text)
+    ElMessage.success(copyFeedback(props.text))
+  } catch {
+    ElMessage.error(copyFeedback(''))
+  }
+}
+</script>
+
+<template>
+  <span class="copy-text" role="button" tabindex="0" :title="text" @click="handleCopy"><slot>{{ text }}</slot></span>
+</template>
+
+<style scoped>
+.copy-text { cursor: pointer; }
+</style>

admin-frontend-vue/src/components/MaskReveal.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref, watch } from 'vue'
+import { secretPlaceholder } from '@/pages/shop/secret-mask'
+
+/**
+ * MaskReveal 掩码揭示（module 13 task 247）：默认以店铺 secret-mask 掩码占位展示，
+ * 点击切换时向父组件发 reveal 事件取明文（以 value prop 回填）；短时后自动收回。
+ */
+const props = withDefaults(defineProps<{ value?: string; revealMs?: number }>(), {
+  value: '',
+  revealMs: 5000,
+})
+const emit = defineEmits<{ (e: 'reveal'): void }>()
+
+const revealed = ref(false)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+function clearTimer(): void {
+  if (timer) {
+    clearTimeout(timer)
+    timer = null
+  }
+}
+
+function show(): void {
+  revealed.value = true
+  emit('reveal')
+  clearTimer()
+  timer = setTimeout(() => {
+    revealed.value = false
+  }, props.revealMs)
+}
+
+function hide(): void {
+  clearTimer()
+  revealed.value = false
+}
+
+function toggle(): void {
+  if (revealed.value) hide()
+  else show()
+}
+
+watch(
+  () => props.value,
+  (v) => {
+    if (!v) revealed.value = false
+  },
+)
+
+onBeforeUnmount(clearTimer)
+</script>
+
+<template>
+  <span class="mask-reveal">
+    <span class="mask-reveal-text">{{ revealed && value ? value : secretPlaceholder() }}</span>
+    <button
+      type="button"
+      class="mask-reveal-toggle"
+      :aria-label="revealed ? '隐藏' : '显示'"
+      @click="toggle"
+    >
+      {{ revealed ? '隐藏' : '显示' }}
+    </button>
+  </span>
+</template>
+
+<style scoped>
+.mask-reveal { display: inline-flex; align-items: center; gap: 6px; }
+.mask-reveal-text { font-variant-numeric: tabular-nums; }
+.mask-reveal-toggle {
+  border: 1px solid #cbd9e6;
+  border-radius: 6px;
+  background: #fff;
+  color: #5b6f83;
+  font-size: 12px;
+  padding: 1px 8px;
+  cursor: pointer;
+}
+.mask-reveal-toggle:hover { color: #2f5d8b; border-color: #95b1cb; background: #edf5fb; }
+</style>

admin-frontend-vue/src/components/StatusPill.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { pillToneStyle, type PillTone } from './status-pill-model'
+
+const props = withDefaults(defineProps<{ text: string; tone?: PillTone }>(), { tone: 'info' })
+const style = computed(() => pillToneStyle(props.tone))
+</script>
+
+<template>
+  <span class="status-pill" :style="{ color: style.text, background: style.bg }">{{ text }}</span>
+</template>
+
+<style scoped>
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 62px;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: 1.7;
+  white-space: nowrap;
+}
+</style>

admin-frontend-vue/src/components/copy-model.ts

@@ -0,0 +1,13 @@
+/**
+ * 复制文本反馈模型（module 13 task 247）：非空给出「已复制 X」，失败/空值给降级文案。
+ */
+export const COPY_FEEDBACK_FALLBACK = '复制失败，请手动选择'
+
+export function copyFeedback(text: string): string {
+  const t = typeof text === 'string' ? text.trim() : ''
+  return t ? `已复制 ${t}` : COPY_FEEDBACK_FALLBACK
+}
+
+export function isCopySupported(): boolean {
+  return typeof navigator !== 'undefined' && typeof navigator.clipboard?.writeText === 'function'
+}

admin-frontend-vue/src/components/status-pill-model.ts

@@ -0,0 +1,37 @@
+/**
+ * 状态药丸配色/分类模型（module 13 task 247）：统一 admin.html 的三态语义色
+ * （success 绿 / danger 红 / warning 琥珀 / info 蓝 / primary 深蓝），供视频任务、
+ * 店铺数据任务、数字人版本等页面复用；未知文本回落 info。
+ */
+export type PillTone = 'success' | 'danger' | 'warning' | 'info' | 'primary'
+
+export interface PillToneStyle {
+  text: string
+  bg: string
+}
+
+export const PILL_TONES: Record<PillTone, PillToneStyle> = {
+  success: { text: '#4e806d', bg: '#e6f6ec' },
+  danger: { text: '#b35f6a', bg: '#fdecec' },
+  warning: { text: '#a8793e', bg: '#fdf0dc' },
+  info: { text: '#4f78a5', bg: '#e7f0f8' },
+  primary: { text: '#2f5d8b', bg: '#e6f0f8' },
+}
+
+/** 取某 tone 的配色；未知 tone 回退 info（不抛错）。 */
+export function pillToneStyle(tone: PillTone): PillToneStyle {
+  return PILL_TONES[tone] ?? PILL_TONES.info
+}
+
+const SUCCESS_PATTERN = /success|succeed|已发布|发布|成功|正常|可用/
+const DANGER_PATTERN = /fail|error|已废弃|失败|不可用|异常/
+const WARNING_PATTERN = /running|pending|waiting|进行|处理中|草稿|待执行|待/
+
+/** 由状态文本（中英文）归类语义 tone。 */
+export function statusTone(raw: string): PillTone {
+  const s = (raw || '').toLowerCase()
+  if (SUCCESS_PATTERN.test(s)) return 'success'
+  if (DANGER_PATTERN.test(s)) return 'danger'
+  if (WARNING_PATTERN.test(s)) return 'warning'
+  return 'info'
+}

admin-frontend-vue/tests/task-247.test.ts

@@ -0,0 +1,73 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readSource } from './helpers.ts'
+import { pillToneStyle, PILL_TONES, statusTone, type PillTone } from '../src/components/status-pill-model.ts'
+import { copyFeedback } from '../src/components/copy-model.ts'
+
+// module 13 task 247：行内工具组件化 —— 状态药丸/复制文本/掩码揭示，供视频/店铺数据/
+// 数字人版本等页面复用；掩码复用店铺中心 secret-mask 语义。
+
+test('test_task_247_pill_model_normal_primary_path', () => {
+  // 正常主路径：状态文本 → 语义 tone。
+  assert.equal(statusTone('SUCCESS'), 'success')
+  assert.equal(statusTone('FAILED'), 'danger')
+  assert.equal(statusTone('已发布'), 'success')
+  assert.equal(statusTone('失败'), 'danger')
+})
+
+test('test_task_247_pill_model_normal_variant_input', () => {
+  // 正常变体：运行/草稿等中间态落 warning；未知回落 info。
+  assert.equal(statusTone('RUNNING'), 'warning')
+  assert.equal(statusTone('草稿'), 'warning')
+  assert.equal(statusTone('something-unknown'), 'info')
+})
+
+test('test_task_247_pill_model_normal_repeated_operation_is_idempotent', () => {
+  assert.equal(statusTone('SUCCESS'), statusTone('success'))
+  assert.deepEqual(pillToneStyle('success'), pillToneStyle('success'))
+})
+
+test('test_task_247_pill_model_boundary_empty_input', () => {
+  // 边界空：空值/未知名不崩溃。
+  assert.equal(statusTone(''), 'info')
+  assert.equal(statusTone(undefined as unknown as string), 'info')
+})
+
+test('test_task_247_pill_model_boundary_single_item', () => {
+  // 边界单元素：每个 tone 都有可读配色（药丸文字/底色为 admin 三态色）。
+  for (const tone of Object.keys(PILL_TONES) as PillTone[]) {
+    const s = pillToneStyle(tone)
+    assert.match(s.text, /^#[0-9a-f]{6}$/)
+    assert.match(s.bg, /^#[0-9a-f]{6}$/)
+  }
+  assert.equal(pillToneStyle('success').text, '#4e806d')
+  assert.equal(pillToneStyle('danger').text, '#b35f6a')
+})
+
+test('test_task_247_pill_model_invalid_input_rejected', () => {
+  // 异常输入：非法 tone 回退 info，不抛错；三态主色与 admin 语义一致。
+  assert.equal(pillToneStyle('bogus' as PillTone).text, PILL_TONES.info.text)
+  assert.equal(PILL_TONES.warning.text, '#a8793e')
+  assert.equal(PILL_TONES.info.text, '#4f78a5')
+})
+
+test('test_task_247_copy_model_boundary_limit_or_missing_field', () => {
+  // 复制反馈：非空给「已复制 X」，空/失败给降级文案。
+  assert.equal(copyFeedback('B001'), '已复制 B001')
+  assert.equal(copyFeedback('  '), '复制失败，请手动选择')
+  assert.equal(copyFeedback(''), '复制失败，请手动选择')
+})
+
+test('test_task_247_components_dependency_failure_returns_actionable_message', () => {
+  // 依赖失败：组件真实存在且接入语义（药丸用 PILL_TONES、复制走 copyFeedback、掩码复用 secret-mask）。
+  assert.ok(readSource('src/components/StatusPill.vue').length > 0)
+  assert.ok(readSource('src/components/CopyText.vue').length > 0)
+  assert.ok(readSource('src/components/MaskReveal.vue').length > 0)
+  const copy = readSource('src/components/CopyText.vue')
+  assert.match(copy, /copyFeedback/)
+  assert.match(copy, /navigator\.clipboard/)
+  const mask = readSource('src/components/MaskReveal.vue')
+  assert.match(mask, /secret-mask|secretPlaceholder|SECRET_PLACEHOLDER/, '掩码应复用店铺 secret-mask 语义')
+  const pill = readSource('src/components/StatusPill.vue')
+  assert.match(pill, /pillToneStyle|PILL_TONES/, '药丸应使用统一配色模型')
+})