feat(mini-program): 澄清卡片组件

mini-program/src/components/ClarificationCard.vue

@@ -0,0 +1,209 @@
+<template>
+  <view class="clarification-card">
+    <view v-if="card.question" class="card-question">
+      <text>{{ card.question }}</text>
+    </view>
+    <view v-if="card.description" class="card-description">
+      <text>{{ card.description }}</text>
+    </view>
+
+    <view v-if="hasOptions" class="card-options">
+      <view
+        v-for="opt in card.options"
+        :key="opt.value"
+        class="option-item"
+        :class="{ active: isSelected(opt.value) }"
+        @click="toggleOption(opt)"
+      >
+        <view class="option-content">
+          <text class="option-label">{{ opt.label }}</text>
+          <text v-if="opt.description" class="option-desc">{{ opt.description }}</text>
+        </view>
+        <view v-if="isSelected(opt.value)" class="option-check">✓</view>
+      </view>
+    </view>
+
+    <view v-if="card.allow_custom || isTextInput" class="card-custom">
+      <textarea
+        v-model="customText"
+        :placeholder="card.input_placeholder || '请输入你的回答'"
+        class="custom-textarea"
+        :auto-height="true"
+        :show-confirm-bar="false"
+        maxlength="200"
+      />
+    </view>
+
+    <view class="card-actions">
+      <view class="submit-btn" :class="{ disabled: !canSubmit }" @click="handleSubmit">
+        <text>提交</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  card: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['submit'])
+
+const selectedValues = ref([])
+const customText = ref('')
+
+const isTextInput = computed(() => props.card.card_type === 'text_input')
+const hasOptions = computed(() => Array.isArray(props.card.options) && props.card.options.length > 0)
+const isSingle = computed(() => props.card.card_type === 'single_select')
+const isMulti = computed(() => props.card.card_type === 'multi_select' || props.card.card_type === 'mixed')
+
+const canSubmit = computed(() => {
+  const minSel = props.card.min_selections || 1
+  if (selectedValues.value.length < minSel) return false
+  if (isTextInput.value && !customText.value.trim()) return false
+  return true
+})
+
+function isSelected(value) {
+  return selectedValues.value.includes(value)
+}
+
+function toggleOption(opt) {
+  const value = opt.value
+  if (isSingle.value) {
+    selectedValues.value = [value]
+  } else if (isMulti.value) {
+    const idx = selectedValues.value.indexOf(value)
+    if (idx >= 0) {
+      selectedValues.value.splice(idx, 1)
+    } else {
+      const maxSel = props.card.max_selections || selectedValues.value.length + 1
+      if (selectedValues.value.length < maxSel) {
+        selectedValues.value.push(value)
+      }
+    }
+  }
+}
+
+function handleSubmit() {
+  if (!canSubmit.value) return
+
+  let answer
+  if (selectedValues.value.length > 0) {
+    answer = selectedValues.value.join('、')
+    if (customText.value.trim()) {
+      answer = `${answer}（${customText.value.trim()}）`
+    }
+  } else {
+    answer = customText.value.trim()
+  }
+
+  emit('submit', answer)
+}
+</script>
+
+<style scoped>
+.clarification-card {
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 16rpx;
+  padding: 32rpx 28rpx;
+  margin: 24rpx 0;
+}
+
+.card-question {
+  color: #ffffff;
+  font-size: 32rpx;
+  font-weight: 600;
+  margin-bottom: 16rpx;
+  line-height: 1.5;
+}
+
+.card-description {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 26rpx;
+  margin-bottom: 24rpx;
+  line-height: 1.5;
+}
+
+.card-options {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+  margin-bottom: 24rpx;
+}
+
+.option-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx;
+  background: rgba(255, 255, 255, 0.05);
+  border: 2rpx solid rgba(255, 255, 255, 0.1);
+  border-radius: 12rpx;
+}
+
+.option-item.active {
+  background: rgba(8, 126, 139, 0.3);
+  border-color: #087e8b;
+}
+
+.option-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.option-label {
+  color: #ffffff;
+  font-size: 28rpx;
+}
+
+.option-desc {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 24rpx;
+  margin-top: 8rpx;
+}
+
+.option-check {
+  color: #087e8b;
+  font-size: 32rpx;
+  margin-left: 16rpx;
+}
+
+.card-custom {
+  margin-bottom: 24rpx;
+}
+
+.custom-textarea {
+  width: 100%;
+  min-height: 120rpx;
+  padding: 20rpx;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12rpx;
+  color: #ffffff;
+  font-size: 28rpx;
+  box-sizing: border-box;
+}
+
+.card-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.submit-btn {
+  padding: 16rpx 48rpx;
+  background: #087e8b;
+  border-radius: 32rpx;
+  color: #ffffff;
+  font-size: 28rpx;
+}
+
+.submit-btn.disabled {
+  opacity: 0.5;
+}
+</style>