From cbf5157dcf2c7caa575639ba1c40b0d9be4919e9 Mon Sep 17 00:00:00 2001
From: Peanut <peanut_hzm@163.com>
Date: Sun, 28 Jun 2026 09:13:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=20MessageCard=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

封装长消息/故事卡片结构，支持短消息简洁气泡模式
---
 mini-program/src/components/MessageCard.vue | 373 ++++++++++++++++++++
 1 file changed, 373 insertions(+)
 create mode 100644 mini-program/src/components/MessageCard.vue

diff --git a/mini-program/src/components/MessageCard.vue b/mini-program/src/components/MessageCard.vue
new file mode 100644
index 0000000..9a16f89
--- /dev/null
+++ b/mini-program/src/components/MessageCard.vue
@@ -0,0 +1,373 @@
+<template>
+  <view v-if="isShortMessage" class="chat-bubble system">
+    <text>{{ content }}</text>
+  </view>
+  <view v-else class="story-card" :class="{ collapsed }">
+    <view class="story-head">
+      <view class="story-title-wrap">
+        <text class="story-title">{{ title || '我的人生剧本' }}</text>
+        <view v-if="tags?.length" class="tag-row">
+          <text v-for="tag in tags" :key="tag" class="tag">{{ tag }}</text>
+        </view>
+      </view>
+      <view class="story-head-actions">
+        <button class="collapse-icon" @click="$emit('toggle-collapse')">
+          <text class="collapse-icon-text">{{ collapsed ? '展开' : '收起' }}</text>
+          <view class="collapse-chevron" :class="{ down: collapsed }">
+            <view></view>
+            <view></view>
+          </view>
+        </button>
+        <button class="copy-card-btn" @click="$emit('copy')">复制</button>
+      </view>
+    </view>
+
+    <scroll-view
+      v-if="collapsed"
+      class="story-body-scroll"
+      scroll-y
+      :enhanced="true"
+      :show-scrollbar="true"
+    >
+      <text class="story-body" :selectable="true" :user-select="true">{{ content }}</text>
+    </scroll-view>
+    <text v-else class="story-body" :selectable="true" :user-select="true">{{ content }}</text>
+
+    <view class="collapse-row" @click="$emit('toggle-collapse')">
+      <text class="collapse-row-text">{{ collapsed ? '展开全文' : '收起全文' }}</text>
+      <view class="collapse-chevron" :class="{ down: collapsed }">
+        <view></view>
+        <view></view>
+      </view>
+    </view>
+
+    <view class="result-actions">
+      <button class="action-btn" @click="$emit('change-direction')">换个方向</button>
+      <button class="action-btn" @click="$emit('not-like-me')">不像我</button>
+      <button class="action-btn" @click="$emit('continue')">继续生成</button>
+      <button class="action-btn primary" @click="$emit('play-tts')">
+        <text class="action-icon">{{ ttsIcon || '▶' }}</text>
+        <text>{{ ttsText || '播放' }}</text>
+      </button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  content: { type: String, required: true },
+  title: { type: String, default: '' },
+  tags: { type: Array, default: () => [] },
+  collapsed: { type: Boolean, default: false },
+  contentLength: { type: Number, required: true },
+  isShortMessage: { type: Boolean, required: true },
+  ttsIcon: { type: String, default: '▶' },
+  ttsText: { type: String, default: '播放' }
+})
+
+defineEmits([
+  'toggle-collapse',
+  'copy',
+  'change-direction',
+  'not-like-me',
+  'continue',
+  'play-tts'
+])
+</script>
+
+<style scoped>
+/* 短消息气泡样式 */
+.chat-bubble {
+  max-width: 86%;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+  padding: 24rpx 28rpx;
+  border-radius: 36rpx;
+  font-size: 34rpx;
+  line-height: 52rpx;
+}
+
+.chat-bubble.system {
+  align-self: flex-start;
+  background: rgba(16, 8, 34, 0.28);
+  border: 1rpx solid rgba(192, 132, 252, 0.3);
+  color: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(8rpx);
+  -webkit-backdrop-filter: blur(8rpx);
+}
+
+/* 故事卡片容器 */
+.story-card {
+  border-radius: 52rpx;
+  padding: 34rpx;
+  background: rgba(12, 5, 28, 0.34);
+  border: 1rpx solid rgba(192, 132, 252, 0.46);
+  box-shadow: 0 0 48rpx rgba(125, 55, 205, 0.14);
+  backdrop-filter: blur(6rpx);
+  -webkit-backdrop-filter: blur(6rpx);
+}
+
+.story-card.collapsed {
+  box-shadow: 0 0 42rpx rgba(125, 55, 205, 0.14);
+}
+
+/* 卡片头部区域 */
+.story-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 20rpx;
+}
+
+.story-head-actions {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12rpx;
+}
+
+.story-title-wrap {
+  flex: 1;
+  min-width: 0;
+}
+
+.story-title {
+  display: block;
+  font-size: 52rpx;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+/* 展开/收起按钮 */
+.collapse-icon {
+  width: 120rpx;
+  min-width: 120rpx;
+  height: 58rpx;
+  min-height: 58rpx;
+  line-height: 1;
+  padding: 0 18rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  color: rgba(255, 244, 255, 0.95);
+  background:
+    linear-gradient(135deg, rgba(134, 72, 255, 0.44), rgba(39, 15, 76, 0.42)),
+    rgba(255, 255, 255, 0.05);
+  border: 1rpx solid rgba(216, 180, 254, 0.46);
+  box-shadow:
+    0 14rpx 30rpx rgba(61, 18, 113, 0.22),
+    inset 0 1rpx 0 rgba(255, 255, 255, 0.26),
+    inset 0 -10rpx 18rpx rgba(33, 9, 73, 0.16);
+  backdrop-filter: blur(8rpx);
+  -webkit-backdrop-filter: blur(8rpx);
+  font-size: 23rpx;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.collapse-icon::after {
+  border: 0;
+}
+
+.collapse-icon:active,
+.copy-card-btn:active,
+.collapse-row:active {
+  transform: scale(0.98);
+  opacity: 0.92;
+}
+
+/* 复制按钮 */
+.copy-card-btn {
+  width: 120rpx;
+  min-width: 120rpx;
+  height: 50rpx;
+  min-height: 50rpx;
+  line-height: 1;
+  padding: 0;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 244, 255, 0.9);
+  font-size: 23rpx;
+  font-weight: 800;
+  letter-spacing: 0;
+  background:
+    radial-gradient(circle at 50% -30%, rgba(255, 255, 255, 0.18), transparent 50%),
+    rgba(88, 28, 135, 0.26);
+  border: 1rpx solid rgba(216, 180, 254, 0.32);
+  box-shadow:
+    inset 0 1rpx 0 rgba(255, 255, 255, 0.16),
+    0 10rpx 22rpx rgba(61, 18, 113, 0.12);
+  backdrop-filter: blur(8rpx);
+  -webkit-backdrop-filter: blur(8rpx);
+}
+
+.copy-card-btn::after {
+  border: 0;
+}
+
+.collapse-icon-text,
+.collapse-row-text {
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* 箭头图标 */
+.collapse-chevron {
+  position: relative;
+  width: 20rpx;
+  height: 16rpx;
+  flex-shrink: 0;
+  transition: transform 0.18s ease;
+}
+
+.collapse-chevron.down {
+  transform: rotate(180deg);
+}
+
+.collapse-chevron view {
+  position: absolute;
+  top: 7rpx;
+  width: 12rpx;
+  height: 4rpx;
+  border-radius: 999rpx;
+  background: linear-gradient(90deg, #fff3b0, #ffd86b);
+  box-shadow: 0 0 12rpx rgba(255, 216, 107, 0.5);
+}
+
+.collapse-chevron view:first-child {
+  left: 0;
+  transform: rotate(-38deg);
+  transform-origin: right center;
+}
+
+.collapse-chevron view:last-child {
+  right: 0;
+  transform: rotate(38deg);
+  transform-origin: left center;
+}
+
+/* 标签行 */
+.tag-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-top: 18rpx;
+}
+
+.tag {
+  padding: 6rpx 16rpx;
+  border-radius: 999rpx;
+  color: #d18aff;
+  font-size: 24rpx;
+  background: rgba(168, 85, 247, 0.22);
+}
+
+/* 正文内容 */
+.story-body {
+  display: block;
+  margin-top: 28rpx;
+  font-size: 32rpx;
+  font-weight: 400;
+  line-height: 1.78;
+  color: rgba(255, 255, 255, 0.92);
+  white-space: pre-wrap;
+}
+
+.story-body-scroll {
+  max-height: 420rpx;
+  height: auto;
+  margin-top: 28rpx;
+  padding-right: 8rpx;
+  box-sizing: border-box;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.story-body-scroll .story-body {
+  margin-top: 0;
+}
+
+/* 底部展开/收起行 */
+.collapse-row {
+  position: relative;
+  height: 62rpx;
+  margin-top: 22rpx;
+  padding: 0 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  border-radius: 999rpx;
+  color: rgba(246, 230, 255, 0.96);
+  font-size: 26rpx;
+  font-weight: 800;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.2), transparent 46%),
+    linear-gradient(135deg, rgba(98, 40, 174, 0.3), rgba(24, 8, 58, 0.24));
+  border: 1rpx solid rgba(192, 132, 252, 0.36);
+  box-shadow:
+    inset 0 1rpx 0 rgba(255, 255, 255, 0.16),
+    0 12rpx 28rpx rgba(61, 18, 113, 0.14);
+  backdrop-filter: blur(6rpx);
+  -webkit-backdrop-filter: blur(6rpx);
+}
+
+.collapse-row::before {
+  content: '';
+  position: absolute;
+  left: 34rpx;
+  right: 34rpx;
+  top: 0;
+  height: 1rpx;
+  background: linear-gradient(90deg, transparent, rgba(255, 236, 180, 0.6), transparent);
+}
+
+/* 操作按钮区域 */
+.result-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14rpx;
+  margin-top: 26rpx;
+}
+
+.action-btn {
+  height: 72rpx;
+  min-height: 72rpx;
+  padding: 0 8rpx;
+  border-radius: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #e8ccff;
+  font-size: 26rpx;
+  font-weight: 700;
+  line-height: 1.15;
+  text-align: center;
+  white-space: normal;
+  box-sizing: border-box;
+  background: rgba(88, 28, 135, 0.18);
+  border: 1rpx solid rgba(192, 132, 252, 0.35);
+}
+
+.action-btn.primary {
+  color: #fff;
+  background: linear-gradient(145deg, #8c44f2, #5f1db8);
+}
+
+.action-icon {
+  margin-right: 8rpx;
+  font-size: 24rpx;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.action-btn::after {
+  border: 0;
+}
+</style>