feat: MessageCard 支持按 messageType 条件渲染 script/chat 专属按钮组
This commit is contained in:
@@ -1,10 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<view v-if="isShortMessage" class="chat-bubble system">
|
<!-- 短消息气泡(chat/system 短消息) -->
|
||||||
|
<view v-if="isShortMessage && messageType !== 'script'" class="chat-bubble system">
|
||||||
<text>{{ content }}</text>
|
<text>{{ content }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 长文本卡片(story-card),按 messageType 渲染不同按钮 -->
|
||||||
<view v-else class="story-card" :class="{ collapsed }">
|
<view v-else class="story-card" :class="{ collapsed }">
|
||||||
<view class="story-head">
|
<view class="story-head">
|
||||||
<view class="story-title-wrap">
|
<view class="story-title-wrap">
|
||||||
|
<text v-if="versionLabel" class="version-label">{{ versionLabel }}</text>
|
||||||
<text class="story-title">{{ title || '我的人生剧本' }}</text>
|
<text class="story-title">{{ title || '我的人生剧本' }}</text>
|
||||||
<view v-if="tags?.length" class="tag-row">
|
<view v-if="tags?.length" class="tag-row">
|
||||||
<text v-for="tag in tags" :key="tag" class="tag">{{ tag }}</text>
|
<text v-for="tag in tags" :key="tag" class="tag">{{ tag }}</text>
|
||||||
@@ -41,7 +45,20 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="result-actions">
|
<!-- script 专属按钮组 -->
|
||||||
|
<view v-if="messageType === 'script'" class="script-actions">
|
||||||
|
<button v-if="canRewrite" class="action-btn" @click="$emit('rewrite')">改写</button>
|
||||||
|
<button v-if="canContinue" class="action-btn" @click="$emit('continue-script')">续写</button>
|
||||||
|
<button v-if="hasChildren" class="action-btn" @click="$emit('view-versions')">查看历史版本</button>
|
||||||
|
<button v-if="canDelete" class="action-btn danger" @click="$emit('delete-version')">删除版本</button>
|
||||||
|
<button class="action-btn primary" @click="$emit('play-tts')">
|
||||||
|
<text class="action-icon">{{ ttsIcon || '▶' }}</text>
|
||||||
|
<text>{{ ttsText || '播放' }}</text>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- chat / 旧版兼容按钮组 -->
|
||||||
|
<view v-else class="result-actions">
|
||||||
<button class="action-btn" @click="$emit('change-direction')">换个方向</button>
|
<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('not-like-me')">不像我</button>
|
||||||
<button class="action-btn" @click="$emit('continue')">继续生成</button>
|
<button class="action-btn" @click="$emit('continue')">继续生成</button>
|
||||||
@@ -62,7 +79,14 @@ const props = defineProps({
|
|||||||
contentLength: { type: Number, required: true },
|
contentLength: { type: Number, required: true },
|
||||||
isShortMessage: { type: Boolean, required: true },
|
isShortMessage: { type: Boolean, required: true },
|
||||||
ttsIcon: { type: String, default: '▶' },
|
ttsIcon: { type: String, default: '▶' },
|
||||||
ttsText: { type: String, default: '播放' }
|
ttsText: { type: String, default: '播放' },
|
||||||
|
// 新增
|
||||||
|
messageType: { type: String, default: 'script', validator: v => ['script', 'chat', 'system'].includes(v) },
|
||||||
|
versionLabel: { type: String, default: '' },
|
||||||
|
hasChildren: { type: Boolean, default: false },
|
||||||
|
canDelete: { type: Boolean, default: false },
|
||||||
|
canRewrite: { type: Boolean, default: true },
|
||||||
|
canContinue: { type: Boolean, default: true }
|
||||||
})
|
})
|
||||||
|
|
||||||
defineEmits([
|
defineEmits([
|
||||||
@@ -71,7 +95,12 @@ defineEmits([
|
|||||||
'change-direction',
|
'change-direction',
|
||||||
'not-like-me',
|
'not-like-me',
|
||||||
'continue',
|
'continue',
|
||||||
'play-tts'
|
'play-tts',
|
||||||
|
// 新增
|
||||||
|
'rewrite',
|
||||||
|
'continue-script',
|
||||||
|
'view-versions',
|
||||||
|
'delete-version'
|
||||||
])
|
])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -370,4 +399,28 @@ defineEmits([
|
|||||||
.action-btn::after {
|
.action-btn::after {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 新增样式 */
|
||||||
|
.version-label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4rpx 16rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
background: rgba(140, 68, 242, 0.28);
|
||||||
|
color: #d6b8ff;
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.script-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16rpx;
|
||||||
|
padding: 16rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn.danger {
|
||||||
|
color: #ff8080;
|
||||||
|
border-color: rgba(255, 128, 128, 0.4);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user