@huyooo/ai-chat-frontend-vue 0.1.2

package/src/components/chat/ui/ChatHeader.vue

@@ -0,0 +1,535 @@
+<template>
+  <div class="chat-header">
+    <!-- 左侧：Tabs 可滚动区域 -->
+    <div class="tabs-container">
+      <span v-if="visibleSessions.length === 0" class="tab-item active">
+        New Chat
+      </span>
+      <template v-else>
+        <div
+          v-for="session in visibleSessions"
+          :key="session.id"
+          :class="['tab-item', { active: session.id === currentSessionId }]"
+          :title="session.title"
+          @click="$emit('switch-session', session.id)"
+        >
+          <span class="tab-title">{{ getDisplayTitle(session.title) }}</span>
+          <button
+            class="tab-close"
+            @click.stop="handleHideTab(session.id)"
+            title="关闭标签"
+          >
+            <X :size="12" />
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- 右侧：操作按钮 -->
+    <div class="header-actions">
+      <!-- 新建会话 -->
+      <button
+        class="icon-btn"
+        title="新建对话"
+        @click="$emit('new-session')"
+      >
+        <Plus :size="14" />
+      </button>
+
+      <!-- 历史记录 -->
+      <div ref="historyRef" class="dropdown-container">
+        <button
+          :class="['icon-btn', { active: historyOpen }]"
+          title="历史记录"
+          @click.stop="toggleHistory"
+        >
+          <Clock :size="14" />
+        </button>
+
+        <!-- 历史记录面板 -->
+        <div v-if="historyOpen" class="dropdown-panel history-panel">
+          <div class="panel-header">
+            <span>历史记录</span>
+            <button class="icon-btn small" title="新建对话" @click="handleNewFromHistory">
+              <Plus :size="12" />
+            </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)"
+              >
+                <Trash2 :size="12" />
+              </button>
+            </div>
+            <div v-if="sessions.length === 0" class="empty-state">
+              暂无历史对话
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 更多选项 -->
+      <div ref="moreRef" class="dropdown-container">
+        <button
+          :class="['icon-btn', { active: moreOpen }]"
+          title="更多选项"
+          @click.stop="toggleMore"
+        >
+          <MoreHorizontal :size="14" />
+        </button>
+
+        <!-- 更多选项菜单 -->
+        <div v-if="moreOpen" class="dropdown-panel more-panel">
+          <button class="menu-item" @click="handleMenuAction('clear-all')">
+            <Trash2 :size="14" />
+            <span>清空所有对话</span>
+          </button>
+          <button class="menu-item" @click="handleMenuAction('close-others')">
+            <XCircle :size="14" />
+            <span>关闭其他对话</span>
+          </button>
+          <div class="menu-divider"></div>
+          <button class="menu-item" @click="handleMenuAction('export')">
+            <Download :size="14" />
+            <span>导出对话</span>
+          </button>
+          <button class="menu-item" @click="handleMenuAction('copy-id')">
+            <Copy :size="14" />
+            <span>复制请求 ID</span>
+          </button>
+          <div class="menu-divider"></div>
+          <button class="menu-item" @click="handleMenuAction('feedback')">
+            <MessageSquare :size="14" />
+            <span>反馈</span>
+          </button>
+          <button class="menu-item" @click="handleMenuAction('settings')">
+            <Settings :size="14" />
+            <span>Agent 设置</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- 关闭按钮 -->
+      <button
+        v-if="showClose"
+        class="icon-btn"
+        title="关闭"
+        @click="$emit('close')"
+      >
+        <X :size="14" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<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';
+
+const props = defineProps<{
+  sessions: SessionRecord[];
+  currentSessionId?: string | null;
+  showClose?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'new-session': [];
+  'switch-session': [sessionId: string];
+  'delete-session': [sessionId: string];
+  'close': [];
+  'clear-all': [];
+  'close-others': [];
+  'export': [];
+  'copy-id': [];
+  'feedback': [];
+  'settings': [];
+}>();
+
+// 隐藏的 tab（关闭但不删除）
+const hiddenTabs = ref<Set<string>>(new Set());
+
+// 可见的会话（过滤掉隐藏的）
+const visibleSessions = computed(() =>
+  props.sessions.filter((s) => !hiddenTabs.value.has(s.id))
+);
+
+// 下拉菜单状态
+const historyOpen = ref(false);
+const moreOpen = ref(false);
+const historyRef = ref<HTMLDivElement | null>(null);
+const moreRef = ref<HTMLDivElement | null>(null);
+
+// 显示标题
+function getDisplayTitle(title: string) {
+  return title === '新对话' ? 'New Chat' : title;
+}
+
+// 格式化日期
+function formatDate(date: Date) {
+  const d = new Date(date);
+  const now = new Date();
+  const diff = now.getTime() - d.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();
+}
+
+// 隐藏 tab
+function handleHideTab(sessionId: string) {
+  hiddenTabs.value = new Set([...hiddenTabs.value, sessionId]);
+  if (sessionId === props.currentSessionId) {
+    const remaining = props.sessions.filter(
+      (s) => s.id !== sessionId && !hiddenTabs.value.has(s.id)
+    );
+    if (remaining.length > 0) {
+      emit('switch-session', remaining[0].id);
+    }
+  }
+}
+
+// 切换历史面板
+function toggleHistory() {
+  historyOpen.value = !historyOpen.value;
+  moreOpen.value = false;
+}
+
+// 切换更多菜单
+function toggleMore() {
+  moreOpen.value = !moreOpen.value;
+  historyOpen.value = false;
+}
+
+// 从历史新建
+function handleNewFromHistory() {
+  emit('new-session');
+  historyOpen.value = false;
+}
+
+// 选择历史
+function handleSelectHistory(sessionId: string) {
+  emit('switch-session', sessionId);
+  // 如果被隐藏了，恢复显示
+  if (hiddenTabs.value.has(sessionId)) {
+    const newHidden = new Set(hiddenTabs.value);
+    newHidden.delete(sessionId);
+    hiddenTabs.value = newHidden;
+  }
+  historyOpen.value = false;
+}
+
+// 菜单操作
+function handleMenuAction(action: string) {
+  moreOpen.value = false;
+  switch (action) {
+    case 'clear-all':
+      emit('clear-all');
+      break;
+    case 'close-others':
+      emit('close-others');
+      break;
+    case 'export':
+      emit('export');
+      break;
+    case 'copy-id':
+      emit('copy-id');
+      break;
+    case 'feedback':
+      emit('feedback');
+      break;
+    case 'settings':
+      emit('settings');
+      break;
+  }
+}
+
+// 点击外部关闭菜单
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as HTMLElement;
+  if (historyRef.value && !historyRef.value.contains(target)) {
+    historyOpen.value = false;
+  }
+  if (moreRef.value && !moreRef.value.contains(target)) {
+    moreOpen.value = false;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style scoped>
+.chat-header {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 12px;
+  background: var(--chat-header-bg, #1e1e1e);
+  border-bottom: 1px solid var(--chat-border, #333);
+  flex-shrink: 0;
+}
+
+.tabs-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  overflow-x: auto;
+  padding-right: 8px;
+}
+
+.tabs-container::-webkit-scrollbar {
+  display: none;
+}
+
+.tab-item {
+  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-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+  max-width: 120px;
+  flex-shrink: 0;
+}
+
+.tab-item:hover {
+  color: var(--chat-text, #ccc);
+}
+
+.tab-item.active {
+  background: var(--chat-muted, #3c3c3c);
+  color: var(--chat-text, #fff);
+}
+
+.tab-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tab-close {
+  display: none;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  color: var(--chat-text-muted, #888);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.tab-item:hover .tab-close {
+  display: flex;
+}
+
+.tab-close:hover {
+  color: var(--chat-text, #fff);
+  background: var(--chat-muted, #444);
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--chat-text-muted, #888);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.icon-btn:hover,
+.icon-btn.active {
+  color: var(--chat-text, #fff);
+}
+
+.icon-btn.small {
+  width: 20px;
+  height: 20px;
+}
+
+.dropdown-container {
+  position: relative;
+}
+
+.dropdown-panel {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: var(--chat-dropdown-bg, #252526);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  z-index: 100;
+  overflow: hidden;
+}
+
+.history-panel {
+  width: 280px;
+}
+
+.more-panel {
+  width: 200px;
+  padding: 4px;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--chat-border, #333);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--chat-text-muted, #888);
+}
+
+.panel-content {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.history-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.history-item.active {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.history-title {
+  flex: 1;
+  font-size: 13px;
+  color: var(--chat-text, #ccc);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.history-date {
+  font-size: 11px;
+  color: var(--chat-text-muted, #666);
+  flex-shrink: 0;
+}
+
+.history-delete {
+  display: none;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--chat-text-muted, #666);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.history-item:hover .history-delete {
+  display: flex;
+}
+
+.history-delete:hover {
+  color: var(--chat-destructive, #ef4444);
+  background: var(--chat-destructive, #ef444420);
+}
+
+.empty-state {
+  padding: 20px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--chat-text-muted, #666);
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  color: var(--chat-text-muted, #999);
+  cursor: pointer;
+  transition: all 0.15s;
+  text-align: left;
+}
+
+.menu-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--chat-text, #ccc);
+}
+
+.menu-divider {
+  height: 1px;
+  background: var(--chat-border, #333);
+  margin: 4px 0;
+}
+</style>

package/src/components/chat/ui/WelcomeMessage.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="welcome-message">
+    <div class="welcome-icon">
+      <Sparkles :size="48" />
+    </div>
+    <h3 class="welcome-title">AI Assistant</h3>
+    <p class="welcome-desc">我可以帮你完成各种任务，试试下面的快捷操作：</p>
+
+    <div class="quick-actions">
+      <button
+        v-for="action in quickActions"
+        :key="action.id"
+        class="quick-btn"
+        @click="$emit('quick-action', action.prompt)"
+      >
+        <component :is="action.icon" :size="14" class="quick-icon" />
+        <span>{{ action.label }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { markRaw } from 'vue';
+import {
+  Sparkles,
+  Code,
+  FileText,
+  Search,
+  MessageCircle,
+} from 'lucide-vue-next';
+
+defineEmits<{
+  'quick-action': [prompt: string];
+}>();
+
+const quickActions = [
+  {
+    id: 'code',
+    label: '写代码',
+    prompt: '帮我写一段代码',
+    icon: markRaw(Code),
+  },
+  {
+    id: 'explain',
+    label: '解释代码',
+    prompt: '帮我解释这段代码',
+    icon: markRaw(FileText),
+  },
+  {
+    id: 'search',
+    label: '搜索信息',
+    prompt: '帮我搜索一下',
+    icon: markRaw(Search),
+  },
+  {
+    id: 'chat',
+    label: '聊聊天',
+    prompt: '我们聊聊天吧',
+    icon: markRaw(MessageCircle),
+  },
+];
+</script>
+
+<style scoped>
+.welcome-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 32px 20px;
+  text-align: center;
+}
+
+.welcome-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  color: var(--chat-text, #ccc);
+  margin-bottom: 20px;
+}
+
+.welcome-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--chat-text, #ccc);
+  margin-bottom: 8px;
+}
+
+.welcome-desc {
+  font-size: 14px;
+  color: var(--chat-text-muted, #888);
+  margin-bottom: 24px;
+}
+
+.quick-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  max-width: 320px;
+}
+
+.quick-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  background: var(--chat-muted, #2d2d2d);
+  border: 1px solid var(--chat-border, #444);
+  border-radius: 8px;
+  color: var(--chat-text, #ccc);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.quick-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.quick-icon {
+  color: var(--chat-text-muted, #888);
+}
+
+.quick-btn:hover .quick-icon {
+  color: var(--chat-text, #fff);
+}
+</style>