@huyooo/ai-chat-frontend-vue 0.1.6 → 0.1.7

package/src/components/{chat/ui → header}/ChatHeader.vue

@@ -19,7 +19,7 @@
             @click.stop="handleHideTab(session.id)"
             title="关闭标签"
           >
-            <X :size="12" />
+            <Icon icon="lucide:x" width="18" />
           </button>
         </div>
       </template>
@@ -33,7 +33,7 @@
         title="新建对话"
         @click="$emit('new-session')"
       >
-        <Plus :size="14" />
+        <Icon icon="lucide:plus" width="18" />
       </button>
 
       <!-- 历史记录 -->
@@ -43,7 +43,7 @@
           title="历史记录"
           @click.stop="toggleHistory"
         >
-          <Clock :size="14" />
+          <Icon icon="lucide:clock" width="18" />
         </button>
 
         <!-- 历史记录面板 -->
@@ -51,26 +51,29 @@
           <div class="panel-header">
             <span>历史记录</span>
             <button class="icon-btn small" title="新建对话" @click="handleNewFromHistory">
-              <Plus :size="12" />
+              <Icon icon="lucide:plus" width="18" />
             </button>
           </div>
-          <div class="panel-content">
-            <div
-              v-for="session in sessions"
-              :key="session.id"
-              :class="['history-item', { active: session.id === currentSessionId }]"
-              @click="handleSelectHistory(session.id)"
-            >
-              <span class="history-title">{{ session.title }}</span>
-              <span class="history-date">{{ formatDate(session.updatedAt) }}</span>
-              <button
-                class="history-delete"
-                title="删除"
-                @click.stop="$emit('delete-session', session.id)"
+          <div class="panel-content chat-scrollbar">
+            <template v-for="group in groupedSessions" :key="group.label">
+              <div class="history-group-label">{{ group.label }}</div>
+              <div
+                v-for="session in group.sessions"
+                :key="session.id"
+                :class="['history-item', { active: session.id === currentSessionId }]"
+                @click="handleSelectHistory(session.id)"
               >
-                <Trash2 :size="12" />
-              </button>
-            </div>
+                <span class="history-title">{{ session.title }}</span>
+                <span class="history-time">{{ formatTime(session.updatedAt) }}</span>
+                <button
+                  class="history-action-btn delete"
+                  title="删除"
+                  @click.stop="$emit('delete-session', session.id)"
+                >
+                  <Icon icon="lucide:trash-2" width="18" />
+                </button>
+              </div>
+            </template>
             <div v-if="sessions.length === 0" class="empty-state">
               暂无历史对话
             </div>
@@ -85,35 +88,35 @@
           title="更多选项"
           @click.stop="toggleMore"
         >
-          <MoreHorizontal :size="14" />
+          <Icon icon="lucide:more-horizontal" width="18" />
         </button>
 
         <!-- 更多选项菜单 -->
         <div v-if="moreOpen" class="dropdown-panel more-panel">
           <button class="menu-item" @click="handleMenuAction('clear-all')">
-            <Trash2 :size="14" />
+            <Icon icon="lucide:trash-2" width="18" />
             <span>清空所有对话</span>
           </button>
           <button class="menu-item" @click="handleMenuAction('close-others')">
-            <XCircle :size="14" />
+            <Icon icon="lucide:x-circle" width="18" />
             <span>关闭其他对话</span>
           </button>
           <div class="menu-divider"></div>
           <button class="menu-item" @click="handleMenuAction('export')">
-            <Download :size="14" />
+            <Icon icon="lucide:download" width="18" />
             <span>导出对话</span>
           </button>
           <button class="menu-item" @click="handleMenuAction('copy-id')">
-            <Copy :size="14" />
+            <Icon icon="lucide:copy" width="18" />
             <span>复制请求 ID</span>
           </button>
           <div class="menu-divider"></div>
           <button class="menu-item" @click="handleMenuAction('feedback')">
-            <MessageSquare :size="14" />
+            <Icon icon="lucide:message-square" width="18" />
             <span>反馈</span>
           </button>
           <button class="menu-item" @click="handleMenuAction('settings')">
-            <Settings :size="14" />
+            <Icon icon="lucide:settings" width="18" />
             <span>Agent 设置</span>
           </button>
         </div>
@@ -126,7 +129,16 @@
         title="关闭"
         @click="$emit('close')"
       >
-        <X :size="14" />
+        <Icon icon="lucide:x" width="18" />
+      </button>
+
+      <!-- 设置按钮 -->
+      <button
+        class="icon-btn"
+        title="设置"
+        @click="$emit('settings')"
+      >
+        <Icon icon="lucide:settings" width="18" />
       </button>
     </div>
   </div>
@@ -134,19 +146,8 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import {
-  X,
-  Plus,
-  Clock,
-  MoreHorizontal,
-  Trash2,
-  XCircle,
-  Download,
-  Copy,
-  MessageSquare,
-  Settings,
-} from 'lucide-vue-next';
-import type { SessionRecord } from '../../../types';
+import { Icon } from '@iconify/vue';
+import type { SessionRecord } from '../../types';
 
 const props = defineProps<{
   sessions: SessionRecord[];
@@ -158,6 +159,7 @@ const emit = defineEmits<{
   'new-session': [];
   'switch-session': [sessionId: string];
   'delete-session': [sessionId: string];
+  'hide-session': [sessionId: string, hidden: boolean];
   'close': [];
   'clear-all': [];
   'close-others': [];
@@ -167,12 +169,9 @@ const emit = defineEmits<{
   'settings': [];
 }>();
 
-// 隐藏的 tab（关闭但不删除）
-const hiddenTabs = ref<Set<string>>(new Set());
-
 // 可见的会话（过滤掉隐藏的）
 const visibleSessions = computed(() =>
-  props.sessions.filter((s) => !hiddenTabs.value.has(s.id))
+  props.sessions.filter((s) => !s.hidden)
 );
 
 // 下拉菜单状态
@@ -186,28 +185,72 @@ function getDisplayTitle(title: string) {
   return title === '新对话' ? 'New Chat' : title;
 }
 
-// 格式化日期
-function formatDate(date: Date) {
+// 格式化时间（HH:mm）
+function formatTime(date: Date): string {
+  const d = new Date(date);
+  const hours = String(d.getHours()).padStart(2, '0');
+  const minutes = String(d.getMinutes()).padStart(2, '0');
+  return `${hours}:${minutes}`;
+}
+
+// 获取日期分组标签
+function getDateGroupLabel(date: Date): string {
   const d = new Date(date);
   const now = new Date();
-  const diff = now.getTime() - d.getTime();
+
+  // 重置时间部分，只比较日期
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const target = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  const diff = today.getTime() - target.getTime();
   const days = Math.floor(diff / (1000 * 60 * 60 * 24));
 
   if (days === 0) return '今天';
   if (days === 1) return '昨天';
-  if (days < 7) return `${days}天前`;
-  return d.toLocaleDateString();
+
+  // 其他显示具体日期
+  const month = d.getMonth() + 1;
+  const day = d.getDate();
+  return `${month}月${day}日`;
 }
 
-// 隐藏 tab
+// 按日期分组会话
+interface SessionGroup {
+  label: string;
+  sessions: SessionRecord[];
+}
+
+const groupedSessions = computed<SessionGroup[]>(() => {
+  const groups = new Map<string, SessionRecord[]>();
+
+  for (const session of props.sessions) {
+    const label = getDateGroupLabel(session.updatedAt);
+    const group = groups.get(label);
+    if (group) {
+      group.push(session);
+    } else {
+      groups.set(label, [session]);
+    }
+  }
+
+  // 转换为数组，保持顺序
+  return Array.from(groups.entries()).map(([label, sessions]) => ({
+    label,
+    sessions,
+  }));
+});
+
+// 隐藏 tab（触发事件由父组件持久化到数据库）
 function handleHideTab(sessionId: string) {
-  hiddenTabs.value = new Set([...hiddenTabs.value, sessionId]);
+  emit('hide-session', sessionId, true);
   if (sessionId === props.currentSessionId) {
     const remaining = props.sessions.filter(
-      (s) => s.id !== sessionId && !hiddenTabs.value.has(s.id)
+      (s) => s.id !== sessionId && !s.hidden
     );
     if (remaining.length > 0) {
       emit('switch-session', remaining[0].id);
+    } else {
+      // 最后一个 tab 被关闭，创建新会话
+      emit('new-session');
     }
   }
 }
@@ -232,13 +275,12 @@ function handleNewFromHistory() {
 
 // 选择历史
 function handleSelectHistory(sessionId: string) {
-  emit('switch-session', sessionId);
+  const session = props.sessions.find((s) => s.id === sessionId);
   // 如果被隐藏了，恢复显示
-  if (hiddenTabs.value.has(sessionId)) {
-    const newHidden = new Set(hiddenTabs.value);
-    newHidden.delete(sessionId);
-    hiddenTabs.value = newHidden;
+  if (session?.hidden) {
+    emit('hide-session', sessionId, false);
   }
+  emit('switch-session', sessionId);
   historyOpen.value = false;
 }
 
@@ -315,13 +357,12 @@ onUnmounted(() => {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 4px;
   padding: 4px 8px;
   background: transparent;
   border: none;
   border-radius: 4px;
   color: var(--chat-text-muted, #888);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.15s;
@@ -346,27 +387,35 @@ onUnmounted(() => {
 }
 
 .tab-close {
-  display: none;
-  width: 16px;
-  height: 16px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
   padding: 0;
-  background: transparent;
+  padding-left: 8px;
+  background: linear-gradient(to right, transparent, var(--chat-bg, #1e1e1e) 50%);
   border: none;
-  border-radius: 2px;
-  color: var(--chat-text-muted, #888);
+  border-radius: 0 4px 4px 0;
+  color: var(--chat-text-muted, #666);
   cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  transition: all 0.15s;
+  opacity: 0;
 }
 
 .tab-item:hover .tab-close {
-  display: flex;
+  opacity: 1;
+}
+
+.tab-item.active .tab-close {
+  background: linear-gradient(to right, transparent, var(--chat-muted, #3c3c3c) 50%);
 }
 
 .tab-close:hover {
   color: var(--chat-text, #fff);
-  background: var(--chat-muted, #444);
 }
 
 .header-actions {
@@ -419,7 +468,7 @@ onUnmounted(() => {
 }
 
 .history-panel {
-  width: 280px;
+  width: 360px;
 }
 
 .more-panel {
@@ -433,21 +482,36 @@ onUnmounted(() => {
   justify-content: space-between;
   padding: 10px 12px;
   border-bottom: 1px solid var(--chat-border, #333);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--chat-text-muted, #888);
 }
 
 .panel-content {
-  max-height: 300px;
+  max-height: 400px;
   overflow-y: auto;
 }
 
+
+/* 日期分组标签 */
+.history-group-label {
+  padding: 8px 12px 4px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--chat-text-muted, #666);
+}
+
+.history-group-label:not(:first-child) {
+  border-top: 1px solid var(--chat-border, #333);
+  margin-top: 4px;
+  padding-top: 12px;
+}
+
 .history-item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
+  gap: 4px;
+  padding: 6px 12px;
   cursor: pointer;
   transition: background 0.15s;
 }
@@ -462,47 +526,60 @@ onUnmounted(() => {
 
 .history-title {
   flex: 1;
-  font-size: 13px;
+  font-size: 14px;
   color: var(--chat-text, #ccc);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.history-date {
-  font-size: 11px;
+.history-time {
+  font-size: 14px;
   color: var(--chat-text-muted, #666);
   flex-shrink: 0;
+  margin-right: 10px;
 }
 
-.history-delete {
-  display: none;
-  width: 20px;
-  height: 20px;
+.history-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.history-item:hover .history-actions {
+  opacity: 1;
+}
+
+.history-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
   padding: 0;
   background: transparent;
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
   color: var(--chat-text-muted, #666);
   cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  transition: all 0.15s;
 }
 
-.history-item:hover .history-delete {
-  display: flex;
+.history-action-btn:hover {
+  color: var(--chat-text, #fff);
 }
 
-.history-delete:hover {
+.history-action-btn.delete:hover {
   color: var(--chat-destructive, #ef4444);
-  background: var(--chat-destructive, #ef444420);
 }
 
 .empty-state {
   padding: 20px;
   text-align: center;
-  font-size: 13px;
+  font-size: 14px;
   color: var(--chat-text-muted, #666);
 }
 
@@ -515,7 +592,7 @@ onUnmounted(() => {
   background: transparent;
   border: none;
   border-radius: 4px;
-  font-size: 13px;
+  font-size: 14px;
   color: var(--chat-text-muted, #999);
   cursor: pointer;
   transition: all 0.15s;