From bb6ae00ee4f4c78114b702a1550549d959a34f1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=96=8C?= <259278618@qq.com>
Date: Thu, 13 Aug 2026 15:34:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=A8=E4=BD=9C=E5=8D=A1=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20ActionCard=EF=BC=88=E9=80=89=E9=A1=B9=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87/=E6=8B=BC=E9=9F=B3/=E5=90=AC=E8=AF=BB/=E6=8C=89?=
 =?UTF-8?q?=E5=8E=8B=E5=8A=A8=E7=94=BB/=E5=9B=9B=E8=89=B2=E8=BE=B9?=
 =?UTF-8?q?=E6=A1=86=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui-src/src/components/ActionCard.vue | 67 ++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 ui-src/src/components/ActionCard.vue

diff --git a/ui-src/src/components/ActionCard.vue b/ui-src/src/components/ActionCard.vue
new file mode 100644
index 0000000..38c375b
--- /dev/null
+++ b/ui-src/src/components/ActionCard.vue
@@ -0,0 +1,67 @@
+<template>
+  <view class="action-cards">
+    <view
+      v-for="(o, idx) in node.options"
+      :key="o.option_id"
+      class="action-card"
+      :class="['c' + (idx + 1), { disabled: disabled }]"
+      @click="pick(o)"
+    >
+      <view class="ac-mark">{{ ['A', 'B', 'C', 'D'][idx] }}</view>
+      <view v-if="o.prop" class="ac-icon">
+        <image v-if="o.prop.image" class="ac-icon-img" :src="o.prop.image" mode="aspectFit" />
+        <text v-else class="ac-icon-emoji">{{ propEmoji(o.prop.name) }}</text>
+      </view>
+      <view class="ac-text">
+        <RubyText :text="o.text" :pinyin="o.text_pinyin" :show="showPinyin" />
+      </view>
+      <view class="ac-listen" @click.stop="listen(o)">🔊</view>
+    </view>
+  </view>
+</template>
+
+<script>
+import RubyText from '../RubyText.vue'
+import { propVisual } from '../utils/visual.js'
+import { speak } from '../utils/speech.js'
+
+export default {
+  name: 'ActionCard',
+  components: { RubyText },
+  props: {
+    node: { type: Object, required: true }, // 决策节点（options 数组）
+    showPinyin: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ['choose'],
+  methods: {
+    pick(o) {
+      if (this.disabled) return
+      this.$emit('choose', o)
+    },
+    listen(o) {
+      speak(o.text, o.audio)
+    },
+    propEmoji(name) {
+      return propVisual(name).emoji
+    }
+  }
+}
+</script>
+
+<style scoped>
+.action-cards { display: flex; flex-direction: column; gap: 20rpx; }
+.action-card { display: flex; align-items: center; background: #f8f2e8; border: 6rpx solid transparent; border-radius: 24rpx; padding: 26rpx 28rpx; transition: transform 0.15s; }
+.action-card.disabled { opacity: 0.6; }
+.action-card:active { transform: scale(0.96); }
+.action-card.c1 { border-color: #ff9a3d; }
+.action-card.c2 { border-color: #4ecdc4; }
+.action-card.c3 { border-color: #6c8cff; }
+.action-card.c4 { border-color: #a58cff; }
+.ac-mark { width: 56rpx; height: 56rpx; border-radius: 50%; background: #ff9a3d; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-right: 24rpx; flex-shrink: 0; }
+.ac-icon { width: 88rpx; height: 88rpx; background: #fff7ec; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; flex-shrink: 0; }
+.ac-icon-img { width: 64rpx; height: 64rpx; }
+.ac-icon-emoji { font-size: 48rpx; }
+.ac-text { flex: 1; font-size: 30rpx; font-weight: 600; color: #5b4636; }
+.ac-listen { font-size: 36rpx; width: 64rpx; height: 64rpx; display: flex; align-items: center; justify-content: center; background: #fff0e5; border-radius: 50%; margin-left: 16rpx; flex-shrink: 0; }
+</style>