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

package/src/components/input/AtFilePicker.vue

@@ -0,0 +1,657 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="visible"
+      class="at-picker-dropdown"
+      :style="dropdownStyle"
+      @click.stop
+    >
+    <!-- 头部：搜索框 -->
+    <div class="at-picker-header">
+      <button v-if="currentView !== 'categories'" class="at-picker-back" @click="goBackToCategories">
+        <Icon icon="lucide:arrow-left" width="14" />
+      </button>
+      <Icon v-else icon="lucide:search" width="14" class="at-picker-search-icon" />
+      <input
+        ref="searchRef"
+        v-model="query"
+        class="at-picker-search"
+        type="text"
+        :placeholder="currentView === 'categories' ? '添加文件、文件夹、文档...' : getSearchPlaceholder()"
+        spellcheck="false"
+        autocorrect="off"
+        autocomplete="off"
+        autocapitalize="off"
+        @keydown.down.prevent="move(1)"
+        @keydown.up.prevent="move(-1)"
+        @keydown.enter.prevent="confirmActive"
+        @keydown.esc.prevent="handleEsc"
+      />
+    </div>
+
+    <div ref="bodyRef" :class="['at-picker-body', 'chat-scrollbar', { 'is-scrolling': isScrolling }]" @scroll="handleScroll">
+      <!-- 分类视图 -->
+      <template v-if="currentView === 'categories'">
+        <!-- 最近文件 -->
+        <div v-if="filteredRecent.length > 0" class="at-picker-section at-picker-recent">
+          <div class="at-picker-list">
+            <button
+              v-for="(p, i) in filteredRecent"
+              :key="p"
+              :class="['at-picker-item', { active: activeKey === `recent:${i}` }]"
+              @mouseenter="setActive(`recent:${i}`)"
+              @click="selectPath(p)"
+            >
+              <Icon :icon="getFileIcon(p)" width="14" class="at-picker-item-icon" />
+              <span class="at-picker-item-name">{{ basename(p) }}</span>
+              <span class="at-picker-item-path">{{ dirname(p) }}</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- 分类列表 -->
+        <div class="at-picker-section">
+          <div class="at-picker-list">
+            <button
+              v-for="(cat, i) in categories"
+              :key="cat.id"
+              :class="['at-picker-item at-picker-category', { active: activeKey === `cat:${i}` }]"
+              @mouseenter="setActive(`cat:${i}`)"
+              @click="handleCategoryClick(cat)"
+            >
+              <Icon :icon="cat.icon" width="14" class="at-picker-item-icon" />
+              <span class="at-picker-item-name">{{ cat.label }}</span>
+              <Icon icon="lucide:chevron-right" width="12" class="at-picker-chevron" />
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <!-- 子视图组件 -->
+      <template v-else>
+        <component
+          :is="viewComponents[currentView]"
+          ref="viewRef"
+          :adapter="adapter"
+          :initial-dir="initialDir"
+          :query="query"
+          :active-index="viewActiveIndex"
+          @select="selectPath"
+          @set-active="setViewActiveIndex"
+          @update-count="handleViewCountUpdate"
+        />
+      </template>
+    </div>
+
+    <div class="at-picker-footer">
+      <span class="at-picker-hint">↑↓ 导航 · Enter 选择 · Esc {{ currentView === 'categories' ? '关闭' : '返回' }}</span>
+    </div>
+  </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch, type Component, type CSSProperties } from 'vue';
+import { Icon } from '@iconify/vue';
+import type { ChatAdapter } from '../../adapter';
+import { getFileIcon, basename, dirname } from '../../utils/fileIcon';
+
+// 子视图组件
+import AtFilesView from './at-views/AtFilesView.vue';
+import AtDocsView from './at-views/AtDocsView.vue';
+import AtTerminalsView from './at-views/AtTerminalsView.vue';
+import AtChatsView from './at-views/AtChatsView.vue';
+import AtBranchView from './at-views/AtBranchView.vue';
+import AtBrowserView from './at-views/AtBrowserView.vue';
+
+const props = defineProps<{
+  visible: boolean;
+  adapter: ChatAdapter;
+  initialDir?: string;
+  /** 锚点元素（用于定位下拉面板） */
+  anchorEl?: HTMLElement | null;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  select: [path: string];
+}>();
+
+// ============ 常量 ============
+const RECENT_KEY = 'ai-chat.at.recentPaths';
+const MAX_RECENT = 6;
+
+// 分类定义
+type CategoryId = 'files' | 'docs' | 'terminals' | 'chats' | 'branch' | 'browser';
+
+interface Category {
+  id: CategoryId;
+  label: string;
+  icon: string;
+  placeholder: string;
+}
+
+const categories: Category[] = [
+  { id: 'files', label: '文件和文件夹', icon: 'lucide:folder-open', placeholder: '搜索文件和文件夹...' },
+  { id: 'docs', label: '文档', icon: 'lucide:book-open', placeholder: '搜索文档...' },
+  { id: 'terminals', label: '终端', icon: 'lucide:terminal', placeholder: '搜索终端...' },
+  { id: 'chats', label: '历史对话', icon: 'lucide:message-square', placeholder: '搜索历史对话...' },
+  { id: 'branch', label: '分支差异', icon: 'lucide:git-branch', placeholder: '搜索分支差异...' },
+  { id: 'browser', label: '网页', icon: 'lucide:globe', placeholder: '搜索网页...' },
+];
+
+// 视图组件映射
+const viewComponents: Record<CategoryId, Component> = {
+  files: AtFilesView,
+  docs: AtDocsView,
+  terminals: AtTerminalsView,
+  chats: AtChatsView,
+  branch: AtBranchView,
+  browser: AtBrowserView,
+};
+
+// ============ 状态 ============
+type ViewType = 'categories' | CategoryId;
+
+const searchRef = ref<HTMLInputElement | null>(null);
+const bodyRef = ref<HTMLDivElement | null>(null);
+const viewRef = ref<{ getActivePath: () => string | null; confirmActive: () => void } | null>(null);
+const query = ref('');
+const currentView = ref<ViewType>('categories');
+const activeKey = ref<string>('');
+const recentList = ref<string[]>([]);
+
+// 子视图的活动索引和条目数
+const viewActiveIndex = ref(-1);
+const viewItemCount = ref(0);
+
+// 滚动状态标志（防止滚动时鼠标悬停干扰）
+const isScrolling = ref(false);
+let scrollTimer: ReturnType<typeof setTimeout> | null = null;
+
+// ============ 下拉面板定位 ============
+const DROPDOWN_WIDTH = 332;
+const DROPDOWN_MIN_HEIGHT = 200; // 最小高度
+const DROPDOWN_MAX_HEIGHT = 600; // 最大高度（大屏幕时充分利用）
+
+const dropdownStyle = ref<CSSProperties>({});
+
+function updateDropdownPosition() {
+  if (!props.anchorEl) {
+    dropdownStyle.value = {};
+    return;
+  }
+
+  const rect = props.anchorEl.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const viewportWidth = window.innerWidth;
+
+  // 计算上方和下方的可用空间（预留 16px 边距）
+  const spaceAbove = rect.top - 16;
+  const spaceBelow = viewportHeight - rect.bottom - 16;
+
+  // 决定向上还是向下展开
+  const openUp = spaceAbove > spaceBelow;
+
+  // 计算可用高度
+  const availableHeight = openUp ? spaceAbove : spaceBelow;
+  
+  // 计算最大高度：
+  // 1. 优先使用可用空间（确保不超出窗口）
+  // 2. 如果可用空间很大，限制在全局最大高度（大屏幕时充分利用但不浪费）
+  // 3. 同时不能超过视口高度的 80%
+  const viewportMaxHeight = viewportHeight * 0.8;
+  const maxHeight = Math.min(
+    availableHeight, // 使用可用空间（确保不超出窗口）
+    DROPDOWN_MAX_HEIGHT, // 但不超过全局最大高度（大屏幕时限制在 600px）
+    viewportMaxHeight // 也不能超过视口的 80%
+  );
+
+  // 计算水平位置，确保不超出右边界
+  let left = rect.right - DROPDOWN_WIDTH;
+  if (left < 8) left = 8;
+  if (left + DROPDOWN_WIDTH > viewportWidth - 8) {
+    left = viewportWidth - DROPDOWN_WIDTH - 8;
+  }
+
+  if (openUp) {
+    dropdownStyle.value = {
+      position: 'fixed',
+      left: `${left}px`,
+      bottom: `${viewportHeight - rect.top + 6}px`,
+      top: 'auto',
+      maxHeight: `${maxHeight}px`,
+    };
+  } else {
+    dropdownStyle.value = {
+      position: 'fixed',
+      left: `${left}px`,
+      top: `${rect.bottom + 6}px`,
+      bottom: 'auto',
+      maxHeight: `${maxHeight}px`,
+    };
+  }
+}
+
+// ============ 工具函数 ============
+function loadRecent() {
+  try {
+    const raw = localStorage.getItem(RECENT_KEY);
+    if (!raw) {
+      recentList.value = [];
+      return;
+    }
+    const list = JSON.parse(raw) as unknown;
+    if (Array.isArray(list)) {
+      recentList.value = list.filter((x) => typeof x === 'string').slice(0, MAX_RECENT);
+    } else {
+      recentList.value = [];
+    }
+  } catch {
+    recentList.value = [];
+  }
+}
+
+function pushRecent(path: string) {
+  const next = [path, ...recentList.value.filter((p) => p !== path)].slice(0, MAX_RECENT);
+  recentList.value = next;
+  try {
+    localStorage.setItem(RECENT_KEY, JSON.stringify(next));
+  } catch {
+    // ignore
+  }
+}
+
+function getSearchPlaceholder(): string {
+  if (currentView.value === 'categories') return 'Add files, folders, docs...';
+  const cat = categories.find((c) => c.id === currentView.value);
+  return cat?.placeholder || 'Search...';
+}
+
+// ============ 过滤 ============
+const filteredRecent = computed(() => {
+  if (currentView.value !== 'categories') return [];
+  const q = query.value.trim().toLowerCase();
+  if (!q) return recentList.value;
+  return recentList.value.filter((p) => p.toLowerCase().includes(q));
+});
+
+// ============ 视图切换 ============
+function goBackToCategories() {
+  currentView.value = 'categories';
+  query.value = '';
+  activeKey.value = '';
+  viewActiveIndex.value = -1;
+  nextTick(() => searchRef.value?.focus());
+}
+
+function handleCategoryClick(cat: Category) {
+  currentView.value = cat.id;
+  query.value = '';
+  activeKey.value = '';
+  viewActiveIndex.value = -1;
+  nextTick(() => searchRef.value?.focus());
+}
+
+// ============ 选择与关闭 ============
+function handleEsc() {
+  if (currentView.value !== 'categories') {
+    goBackToCategories();
+  } else {
+    emit('close');
+  }
+}
+
+// 处理滚动事件
+function handleScroll() {
+  // 标记正在滚动
+  isScrolling.value = true;
+  
+  // 清除之前的定时器
+  if (scrollTimer) {
+    clearTimeout(scrollTimer);
+  }
+  
+  // 滚动停止后 150ms 才允许鼠标事件（确保滚动完全停止）
+  scrollTimer = setTimeout(() => {
+    isScrolling.value = false;
+    scrollTimer = null;
+  }, 150);
+}
+
+function setActive(key: string) {
+  // 如果正在滚动，完全忽略鼠标悬停事件
+  // 因为滚动时鼠标位置不变，但元素在移动，会不断触发 mouseenter
+  if (isScrolling.value) {
+    return;
+  }
+  // 清除之前的激活状态，确保只有一个激活项
+  activeKey.value = key;
+}
+
+function setViewActiveIndex(index: number) {
+  // 如果正在滚动，完全忽略鼠标悬停事件
+  // 因为滚动时鼠标位置不变，但元素在移动，会不断触发 mouseenter
+  if (isScrolling.value) {
+    return;
+  }
+  // 直接设置，Vue 会自动更新
+  viewActiveIndex.value = index;
+}
+
+function handleViewCountUpdate(count: number) {
+  viewItemCount.value = count;
+}
+
+function selectPath(path: string) {
+  pushRecent(path);
+  emit('select', path);
+}
+
+// ============ 键盘导航 ============
+// 滚动到选中的元素
+function scrollToActive() {
+  nextTick(() => {
+    if (!bodyRef.value) return;
+
+    let activeElement: HTMLElement | null = null;
+
+    if (currentView.value === 'categories') {
+      // 分类视图：找到对应 activeKey 的按钮
+      if (activeKey.value.startsWith('recent:')) {
+        const idx = Number(activeKey.value.split(':')[1] || -1);
+        // 在最近文件列表中查找
+        const recentSection = bodyRef.value.querySelector('.at-picker-recent');
+        if (recentSection) {
+          const buttons = recentSection.querySelectorAll('.at-picker-item');
+          if (idx >= 0 && idx < buttons.length) {
+            activeElement = buttons[idx] as HTMLElement;
+          }
+        }
+      } else if (activeKey.value.startsWith('cat:')) {
+        const idx = Number(activeKey.value.split(':')[1] || -1);
+        // 在分类列表中查找
+        const categorySection = bodyRef.value.querySelector('.at-picker-section:not(.at-picker-recent)');
+        if (categorySection) {
+          const buttons = categorySection.querySelectorAll('.at-picker-item');
+          if (idx >= 0 && idx < buttons.length) {
+            activeElement = buttons[idx] as HTMLElement;
+          }
+        }
+      }
+    } else {
+      // 子视图：找到对应 activeIndex 的元素
+      const activeItems = bodyRef.value.querySelectorAll('.at-view-item.active');
+      if (activeItems.length > 0) {
+        activeElement = activeItems[0] as HTMLElement;
+      }
+    }
+
+    // 滚动到视窗内
+    if (activeElement) {
+      // 使用 requestAnimationFrame 确保 DOM 已更新
+      requestAnimationFrame(() => {
+        activeElement?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        });
+        // 滚动事件会通过 handleScroll 自动处理 isScrolling 状态
+      });
+    }
+  });
+}
+
+function move(delta: number) {
+  if (currentView.value === 'categories') {
+    // 分类视图的导航
+    const recentCount = filteredRecent.value.length;
+    const catCount = categories.length;
+    const total = recentCount + catCount;
+    if (total === 0) return;
+
+    let pos = -1;
+    if (activeKey.value.startsWith('recent:')) {
+      pos = Number(activeKey.value.split(':')[1] || -1);
+    } else if (activeKey.value.startsWith('cat:')) {
+      pos = recentCount + Number(activeKey.value.split(':')[1] || -1);
+    }
+
+    const next = pos < 0 ? 0 : (pos + delta + total) % total;
+    // 直接更新 activeKey，确保状态立即更新
+    if (next < recentCount) {
+      activeKey.value = `recent:${next}`;
+    } else {
+      activeKey.value = `cat:${next - recentCount}`;
+    }
+    // 立即滚动，滚动事件会自动处理 isScrolling 状态
+    scrollToActive();
+  } else {
+    // 子视图的导航
+    const total = viewItemCount.value;
+    if (total === 0) return;
+
+    const current = viewActiveIndex.value;
+    const next = current < 0 ? 0 : (current + delta + total) % total;
+    // 直接更新 viewActiveIndex，确保状态立即更新
+    viewActiveIndex.value = next;
+    // 立即滚动，滚动事件会自动处理 isScrolling 状态
+    scrollToActive();
+  }
+}
+
+function confirmActive() {
+  if (currentView.value === 'categories') {
+    if (activeKey.value.startsWith('recent:')) {
+      const idx = Number(activeKey.value.split(':')[1]);
+      const p = filteredRecent.value[idx];
+      if (p) selectPath(p);
+    } else if (activeKey.value.startsWith('cat:')) {
+      const idx = Number(activeKey.value.split(':')[1]);
+      const cat = categories[idx];
+      if (cat) handleCategoryClick(cat);
+    }
+  } else {
+    // 调用子视图的确认方法
+    viewRef.value?.confirmActive();
+  }
+}
+
+// ============ 生命周期 ============
+watch(
+  () => props.visible,
+  async (v) => {
+    if (!v) return;
+    loadRecent();
+    query.value = '';
+    activeKey.value = '';
+    currentView.value = 'categories';
+    viewActiveIndex.value = -1;
+    updateDropdownPosition();
+    await nextTick();
+    searchRef.value?.focus();
+  }
+);
+
+watch(
+  () => props.anchorEl,
+  () => {
+    if (props.visible) {
+      updateDropdownPosition();
+    }
+  }
+);
+
+// 窗口大小变化时更新位置
+function handleResize() {
+  if (props.visible) {
+    updateDropdownPosition();
+  }
+}
+
+onMounted(() => {
+  loadRecent();
+  window.addEventListener('resize', handleResize);
+  window.addEventListener('scroll', handleResize, true);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  window.removeEventListener('scroll', handleResize, true);
+  // 清理滚动定时器
+  if (scrollTimer) {
+    clearTimeout(scrollTimer);
+    scrollTimer = null;
+  }
+});
+</script>
+
+<style scoped>
+.at-picker-dropdown {
+  position: fixed;
+  width: 332px;
+  background: var(--chat-dropdown-bg, #252526);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.at-picker-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.at-picker-back {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #888;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.at-picker-back:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #ccc;
+}
+
+.at-picker-search-icon {
+  color: #666;
+  flex-shrink: 0;
+}
+
+.at-picker-search {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #ddd;
+  font-size: 13px;
+}
+
+.at-picker-body {
+  padding: 6px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* 滚动期间禁用鼠标悬停事件 */
+.at-picker-body.is-scrolling .at-picker-item,
+.at-picker-body.is-scrolling .at-view-item {
+  pointer-events: none;
+}
+
+.at-picker-section {
+  margin-bottom: 2px;
+}
+
+.at-picker-recent {
+  padding-bottom: 6px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.at-picker-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.at-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: left;
+  padding: 7px 10px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  color: #ccc;
+  width: 100%;
+}
+
+.at-picker-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.at-picker-item.active {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.at-picker-item-icon {
+  color: #999;
+  flex-shrink: 0;
+}
+
+.at-picker-item-name {
+  font-size: 13px;
+  color: #ddd;
+  flex-shrink: 0;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.at-picker-item-path {
+  font-size: 11px;
+  color: #555;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.at-picker-category .at-picker-item-name {
+  flex: 1;
+  max-width: none;
+}
+
+.at-picker-chevron {
+  color: #555;
+  flex-shrink: 0;
+}
+
+.at-picker-footer {
+  padding: 8px 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  color: #555;
+  font-size: 11px;
+}
+</style>