收藏消息

src/views/assistant/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, nextTick, onMounted, computed, onUnmounted, reactive, watch, isReactive } from 'vue'
 import { Local } from '/@/utils/storage'
-import { User, ChatDotRound, Delete, Edit, Check, Close, ArrowDown } from '@element-plus/icons-vue'
+import { User, ChatDotRound, Delete, Edit, Check, Close, ArrowDown, Star } from '@element-plus/icons-vue'
 import { MarkdownPlugin } from '/@/components/markdown/type/markdown'
 import EChartsPlugin from '/@/components/markdown/plugins/echarts'
 import ToolsLoadingPlugin from '/@/components/markdown/plugins/tools-loading'
@@ -477,6 +477,9 @@ const redirectToModelManager = () => router.push('manage/model')
 const showSettingsPanel = ref(false)
 const showToolCalls = ref(false)
 
+// 侧边栏tab状态
+const activeTab = ref('history')
+
 // 收藏消息功能
 const favoriteMessageIdx = ref(-1)
 const { loading: loadingFavoriteMessage, doLoading: toggleFavorite } = useLoading(async (messageIndex: number) => {
@@ -643,8 +646,23 @@ const { loading: loadingFavoriteMessage, doLoading: toggleFavorite } = useLoadin
 									</div>
 								</div>
 								<div class="ai-message-actions">
-									<el-button :loading="favoriteMessageIdx == idx && loadingFavoriteMessage" type="primary" size="small" @click="toggleFavorite(idx)" class="favorite-btn" plain :disabled="isConversationActive">
-										{{(message.like ?? false) ? '取消收藏' : '收藏'}}
+									<el-button
+										:loading="favoriteMessageIdx == idx && loadingFavoriteMessage"
+										@click="toggleFavorite(idx)"
+										class="favorite-btn"
+										:class="{ 'favorited': message.like ?? false }"
+										:disabled="isConversationActive"
+										text
+										circle
+									>
+										<el-icon>
+											<svg viewBox="0 0 1024 1024" width="16" height="16">
+												<path
+													:fill="(message.like ?? false) ? '#ff4757' : 'currentColor'"
+													d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9z"
+												/>
+											</svg>
+										</el-icon>
 									</el-button>
 								</div>
 							</div>
@@ -1007,19 +1025,29 @@ const { loading: loadingFavoriteMessage, doLoading: toggleFavorite } = useLoadin
 .ai-message-actions {
 	display: flex;
 	justify-content: flex-start;
-	opacity: 0;
 	transition: opacity 0.2s ease;
 }
 
-.ai-message-container:hover .ai-message-actions {
-	opacity: 1;
-}
-
 .favorite-btn {
-	font-size: 12px;
-	padding: 4px 12px;
-	height: 24px;
-	border-radius: 12px;
+	width: 32px !important;
+	height: 32px !important;
+	padding: 0 !important;
+	border: none !important;
+	background: transparent !important;
+	color: var(--el-text-color-regular);
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: var(--el-fill-color-light) !important;
+	}
+
+	&.favorited {
+		color: #ff4757;
+	}
+
+	.el-icon {
+		font-size: 16px;
+	}
 }
 
 .ai-bubble {