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

package/src/components/input/DropdownSelector.vue

@@ -0,0 +1,322 @@
+<template>
+  <div 
+    ref="selectorRef" 
+    :class="['dropdown-selector', { disabled: disabled }]" 
+    @click.stop="toggleMenu"
+  >
+    <Icon v-if="currentOption?.icon" :icon="currentOption.icon" width="14" />
+    <span class="selector-text">{{ currentOption?.label || placeholder }}</span>
+    <Icon icon="lucide:chevron-down" width="14" class="chevron" />
+
+    <div v-if="menuOpen" :class="['dropdown-menu', `dropdown-${dropdownDirection}`, align === 'right' && 'dropdown-align-right']" @click.stop>
+      <!-- 空状态 -->
+      <div v-if="!hasOptions" class="dropdown-empty">暂无数据</div>
+
+      <!-- 分组模式：使用后端返回的分组数据 -->
+      <template v-else-if="groupedOptions && Object.keys(groupedOptions).length > 0">
+        <template v-for="(groupItems, groupName) in groupedOptions" :key="groupName">
+          <div class="group-title">{{ groupName }}</div>
+          <button
+            v-for="opt in groupItems"
+            :key="opt.value"
+            :class="['dropdown-item', { active: value === opt.value }]"
+            @click="selectOption(opt.value)"
+          >
+            <Icon v-if="opt.icon" :icon="opt.icon" width="14" />
+            <span class="option-label">{{ opt.label }}</span>
+            <span class="option-right">
+              <Icon v-if="value === opt.value" icon="lucide:check" width="14" class="check-icon" />
+            </span>
+          </button>
+        </template>
+      </template>
+
+      <!-- 扁平列表模式：无分组数据时使用 -->
+      <template v-else>
+        <button
+          v-for="opt in sortedOptions"
+          :key="opt.value"
+          :class="['dropdown-item', { active: value === opt.value }]"
+          @click="selectOption(opt.value)"
+        >
+          <Icon v-if="opt.icon" :icon="opt.icon" width="14" />
+          <span class="option-label">{{ opt.label }}</span>
+          <span class="option-right">
+            <Icon v-if="value === opt.value" icon="lucide:check" width="14" class="check-icon" />
+          </span>
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { Icon } from '@iconify/vue';
+
+/** 下拉选项 */
+export interface DropdownOption {
+  value: string;
+  label: string;
+  icon?: string;
+  /** 分组名称（由后端决定，前端只负责渲染，必填） */
+  group?: string;  // 在 DropdownOption 中保持可选，因为不是所有选项都需要分组
+}
+
+/** 分组后的选项（由后端提供） */
+export interface GroupedOptions {
+  [groupName: string]: DropdownOption[];
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** 当前选中的值 */
+    value: string;
+    /** 选项列表（扁平列表） */
+    options?: DropdownOption[];
+    /** 分组后的选项（优先级高于 options，由后端提供） */
+    groupedOptions?: GroupedOptions;
+    /** 占位符文本 */
+    placeholder?: string;
+    /** 容器引用，用于计算下拉方向 */
+    containerRef?: HTMLElement | null;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 下拉菜单对齐方式 */
+    align?: 'left' | 'right';
+  }>(),
+  {
+    placeholder: '请选择',
+    containerRef: null,
+    disabled: false,
+    align: 'left',
+  }
+);
+
+const emit = defineEmits<{
+  select: [value: string];
+}>();
+
+const selectorRef = ref<HTMLDivElement | null>(null);
+const menuOpen = ref(false);
+const dropdownDirection = ref<'up' | 'down'>('up');
+
+// 检查是否有选项
+const hasOptions = computed(() => {
+  if (props.groupedOptions && Object.keys(props.groupedOptions).length > 0) {
+    return Object.values(props.groupedOptions).some(group => group.length > 0);
+  }
+  return props.options && props.options.length > 0;
+});
+
+// 当前选中的选项（从扁平列表或分组数据中查找）
+const currentOption = computed(() => {
+  if (props.groupedOptions) {
+    for (const group of Object.values(props.groupedOptions)) {
+      const found = group.find(opt => opt.value === props.value);
+      if (found) return found;
+    }
+  }
+  return props.options?.find(opt => opt.value === props.value);
+});
+
+// 排序后的选项（扁平列表模式使用）
+const sortedOptions = computed(() => {
+  if (!props.options) return [];
+  return [...props.options].sort((a, b) => a.label.localeCompare(b.label));
+});
+
+/**
+ * 计算下拉方向（根据可用空间）
+ */
+function calculateDropdownDirection(): 'up' | 'down' {
+  if (!selectorRef.value) return 'up';
+  const rect = selectorRef.value.getBoundingClientRect();
+  const spaceAbove = rect.top;
+  const spaceBelow = window.innerHeight - rect.bottom;
+  // 如果上方空间小于 200px 且下方空间更大，则向下弹出
+  return spaceAbove < 200 && spaceBelow > spaceAbove ? 'down' : 'up';
+}
+
+/**
+ * 切换菜单
+ */
+function toggleMenu() {
+  if (props.disabled) return;
+  if (!menuOpen.value) {
+    dropdownDirection.value = calculateDropdownDirection();
+  }
+  menuOpen.value = !menuOpen.value;
+}
+
+/**
+ * 选择选项
+ */
+function selectOption(value: string) {
+  emit('select', value);
+  menuOpen.value = false;
+}
+
+/**
+ * 点击外部关闭菜单
+ */
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as HTMLElement;
+  if (selectorRef.value && !selectorRef.value.contains(target)) {
+    menuOpen.value = false;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style scoped>
+.dropdown-selector {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: var(--chat-muted, #3c3c3c);
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  color: var(--chat-text-muted, #888);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.dropdown-selector:hover:not(.disabled) {
+  background: var(--chat-muted-hover, #444);
+  color: var(--chat-text, #ccc);
+}
+
+.dropdown-selector.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.selector-text {
+  /* max-width: 150px; */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  color: var(--chat-text-muted, #666);
+}
+
+/* 下拉菜单 */
+.dropdown-menu {
+  position: absolute;
+  left: 0;
+  right: auto;
+  min-width: 180px;
+  max-height: 320px;
+  overflow-y: auto;
+  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: 9999;
+  padding: 4px 8px 4px 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* 向上弹出 */
+.dropdown-menu.dropdown-up {
+  bottom: 100%;
+  top: auto;
+  margin-bottom: 4px;
+}
+
+/* 向下弹出 */
+.dropdown-menu.dropdown-down {
+  top: 100%;
+  bottom: auto;
+  margin-top: 4px;
+}
+
+/* 右对齐 */
+.dropdown-menu.dropdown-align-right {
+  left: auto;
+  right: 0;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  font-size: 14px;
+  color: var(--chat-text-muted, #999);
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.dropdown-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--chat-text, #ccc);
+}
+
+.dropdown-item.active {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--chat-text, #fff);
+}
+
+.check-icon {
+  margin-left: auto;
+  color: var(--chat-text, #ccc);
+  flex-shrink: 0;
+}
+
+/* 空状态 */
+.dropdown-empty {
+  padding: 12px 10px;
+  font-size: 12px;
+  color: var(--chat-text-muted, #666);
+  text-align: center;
+}
+
+/* 分组标题 */
+.group-title {
+  padding: 8px 10px 4px;
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--chat-text-muted, #666);
+  font-weight: 500;
+}
+
+.group-title:first-child {
+  margin-top: 0;
+}
+
+/* 选项标签 */
+.option-label {
+  flex: 1;
+  text-align: left;
+}
+
+/* 右侧容器（勾选图标） */
+.option-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+</style>

package/src/components/input/ImagePreviewModal.vue

@@ -0,0 +1,238 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-if="visible" class="image-preview-modal" @click="$emit('close')">
+        <!-- 顶部栏 -->
+        <div class="preview-header" @click.stop>
+          <div v-if="images.length > 1" class="preview-counter">
+            {{ currentIndex + 1 }} / {{ images.length }}
+          </div>
+          <button class="preview-close-btn" title="关闭 (Esc)" @click="$emit('close')">
+            <Icon icon="lucide:x" width="18" />
+          </button>
+        </div>
+
+        <!-- 左导航 -->
+        <button
+          v-if="images.length > 1"
+          class="preview-nav-btn preview-nav-prev"
+          :class="{ disabled: currentIndex <= 0 }"
+          :disabled="currentIndex <= 0"
+          @click.stop="prev"
+        >
+          <Icon icon="lucide:chevron-left" width="20" />
+        </button>
+
+        <!-- 主图片区域 -->
+        <div class="preview-main" @click.stop>
+          <img :src="currentSrc" alt="预览" class="preview-image" />
+        </div>
+
+        <!-- 右导航 -->
+        <button
+          v-if="images.length > 1"
+          class="preview-nav-btn preview-nav-next"
+          :class="{ disabled: currentIndex >= images.length - 1 }"
+          :disabled="currentIndex >= images.length - 1"
+          @click.stop="next"
+        >
+          <Icon icon="lucide:chevron-right" width="20" />
+        </button>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, onMounted, onUnmounted } from 'vue';
+import { Icon } from '@iconify/vue';
+
+const props = defineProps<{
+  visible: boolean;
+  images: string[];
+  initialIndex?: number;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  'update:index': [index: number];
+}>();
+
+// 当前索引（内部状态）
+const currentIndex = defineModel<number>('index', { default: 0 });
+
+// 当前显示的图片
+const currentSrc = computed(() => props.images[currentIndex.value] || '');
+
+// 上一张
+function prev() {
+  if (currentIndex.value > 0) {
+    currentIndex.value--;
+  }
+}
+
+// 下一张
+function next() {
+  if (currentIndex.value < props.images.length - 1) {
+    currentIndex.value++;
+  }
+}
+
+// 键盘导航
+function handleKeydown(e: KeyboardEvent) {
+  if (!props.visible) return;
+  if (e.key === 'Escape') {
+    emit('close');
+  } else if (e.key === 'ArrowLeft') {
+    prev();
+  } else if (e.key === 'ArrowRight') {
+    next();
+  }
+}
+
+// 重置索引
+watch(
+  () => props.visible,
+  (v) => {
+    if (v && props.initialIndex !== undefined) {
+      currentIndex.value = props.initialIndex;
+    }
+  }
+);
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown);
+});
+</script>
+
+<style scoped>
+/* 过渡动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 遮罩层 */
+.image-preview-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
+  background: rgb(61 61 61 / 40%);
+  backdrop-filter: blur(8px);
+}
+
+/* 顶部栏 */
+.preview-header {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px 20px;
+  min-height: 52px;
+}
+
+.preview-counter {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+}
+
+.preview-close-btn {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  padding: 0 12px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.preview-close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-50%) scale(1.05);
+}
+
+.preview-close-btn:active {
+  transform: translateY(-50%) scale(0.95);
+}
+
+/* 导航按钮 */
+.preview-nav-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding: 0 12px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.preview-nav-btn:hover:not(.disabled) {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.preview-nav-btn:active:not(.disabled) {
+  transform: translateY(-50%) scale(0.95);
+}
+
+.preview-nav-btn.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.preview-nav-prev {
+  left: 24px;
+}
+
+.preview-nav-next {
+  right: 24px;
+}
+
+/* 主图片区域 */
+.preview-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0 80px;
+}
+
+.preview-image {
+  max-width: calc(100% - 80px);
+  max-height: calc(100vh - 140px);
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+</style>

package/src/components/input/at-views/AtBranchView.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="at-placeholder-view">
+    <Icon icon="lucide:git-branch" width="32" class="at-placeholder-icon" />
+    <div class="at-placeholder-title">分支差异</div>
+    <div class="at-placeholder-desc">功能待实现</div>
+    <div class="at-placeholder-hint">将支持引用当前分支与主分支的差异</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+defineProps<{
+  query: string;
+  activeIndex: number;
+}>();
+
+defineEmits<{
+  select: [path: string];
+  'set-active': [index: number];
+  'update-count': [count: number];
+}>();
+
+// 暴露给父组件（空实现）
+defineExpose({
+  getActivePath: () => null,
+  confirmActive: () => {},
+});
+</script>
+
+<style scoped>
+.at-placeholder-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  text-align: center;
+}
+
+.at-placeholder-icon {
+  color: #555;
+  margin-bottom: 12px;
+}
+
+.at-placeholder-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #888;
+  margin-bottom: 8px;
+}
+
+.at-placeholder-desc {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.at-placeholder-hint {
+  font-size: 11px;
+  color: #555;
+}
+</style>

package/src/components/input/at-views/AtBrowserView.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="at-placeholder-view">
+    <Icon icon="lucide:globe" width="32" class="at-placeholder-icon" />
+    <div class="at-placeholder-title">网页</div>
+    <div class="at-placeholder-desc">功能待实现</div>
+    <div class="at-placeholder-hint">将支持引用网页内容、URL 等</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+defineProps<{
+  query: string;
+  activeIndex: number;
+}>();
+
+defineEmits<{
+  select: [path: string];
+  'set-active': [index: number];
+  'update-count': [count: number];
+}>();
+
+// 暴露给父组件（空实现）
+defineExpose({
+  getActivePath: () => null,
+  confirmActive: () => {},
+});
+</script>
+
+<style scoped>
+.at-placeholder-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  text-align: center;
+}
+
+.at-placeholder-icon {
+  color: #555;
+  margin-bottom: 12px;
+}
+
+.at-placeholder-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #888;
+  margin-bottom: 8px;
+}
+
+.at-placeholder-desc {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.at-placeholder-hint {
+  font-size: 11px;
+  color: #555;
+}
+</style>