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

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="at-placeholder-view">
+    <Icon icon="lucide:message-square" 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/AtDocsView.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="at-placeholder-view">
+    <Icon icon="lucide:book-open" width="32" class="at-placeholder-icon" />
+    <div class="at-placeholder-title">文档</div>
+    <div class="at-placeholder-desc">功能待实现</div>
+    <div class="at-placeholder-hint">将支持引用项目文档、API 文档等</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/AtFilesView.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="at-files-view">
+    <div class="at-view-section-title">文件和文件夹</div>
+
+    <!-- 路径栏 -->
+    <div class="at-view-pathbar">
+      <button class="at-view-pathbtn" title="返回上级" @click="goUp">
+        <Icon icon="lucide:arrow-up" width="12" />
+      </button>
+      <button class="at-view-pathbtn" title="主目录" @click="goHome">
+        <Icon icon="lucide:home" width="12" />
+      </button>
+      <div class="at-view-pathtext" :title="currentPath || ''">
+        {{ currentPath || '-' }}
+      </div>
+    </div>
+
+    <!-- 文件列表 -->
+    <div class="at-view-list">
+      <div v-if="loading" class="at-view-empty">加载中...</div>
+      <div v-else-if="filteredEntries.length === 0" class="at-view-empty">
+        {{ query.trim() ? '没有找到匹配项' : '目录为空' }}
+      </div>
+      <button
+        v-for="(f, i) in filteredEntries"
+        :key="f.path"
+        :class="['at-view-item', { active: activeIndex === i }]"
+        @mouseenter="$emit('set-active', i)"
+        @click="handleEntryClick(f)"
+      >
+        <Icon :icon="f.isDirectory ? 'lucide:folder' : getFileIcon(f.name)" width="14" class="at-view-item-icon" />
+        <span class="at-view-item-name">{{ f.name }}</span>
+        <span class="at-view-item-path">{{ f.path }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { Icon } from '@iconify/vue';
+import type { ChatAdapter } from '../../../adapter';
+import type { FileInfo } from '@huyooo/ai-chat-bridge-electron/renderer';
+import { getFileIcon } from '../../../utils/fileIcon';
+
+const props = defineProps<{
+  adapter: ChatAdapter;
+  initialDir?: string;
+  query: string;
+  activeIndex: number;
+}>();
+
+const emit = defineEmits<{
+  select: [path: string];
+  'set-active': [index: number];
+  'update-count': [count: number];
+}>();
+
+// 状态
+const loading = ref(false);
+const currentPath = ref('');
+const entries = ref<FileInfo[]>([]);
+
+// 过滤后的文件列表
+const filteredEntries = computed(() => {
+  const q = props.query.trim().toLowerCase();
+  if (!q) return entries.value;
+  return entries.value.filter((f) => f.name.toLowerCase().includes(q));
+});
+
+// 通知父组件条目数量变化
+watch(filteredEntries, (list) => {
+  emit('update-count', list.length);
+}, { immediate: true });
+
+// 加载目录
+async function loadDir(dir: string) {
+  if (!props.adapter.listDir) return;
+  loading.value = true;
+  try {
+    const resolved = (await props.adapter.resolvePath?.(dir)) || dir;
+    const list = await props.adapter.listDir(resolved);
+    entries.value = [...list].sort((a, b) => {
+      if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
+    currentPath.value = resolved;
+    emit('set-active', -1);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 返回上级目录
+async function goUp() {
+  if (!props.adapter.parentDir) return;
+  const parent = await props.adapter.parentDir(currentPath.value);
+  if (parent && parent !== currentPath.value) {
+    await loadDir(parent);
+  }
+}
+
+// 返回主目录
+async function goHome() {
+  if (!props.adapter.homeDir) return;
+  const home = await props.adapter.homeDir();
+  await loadDir(home);
+}
+
+// 点击条目
+function handleEntryClick(f: FileInfo) {
+  if (f.isDirectory) {
+    loadDir(f.path);
+    return;
+  }
+  emit('select', f.path);
+}
+
+// 获取当前活动项路径（供父组件调用）
+function getActivePath(): string | null {
+  if (props.activeIndex < 0) return null;
+  return filteredEntries.value[props.activeIndex]?.path || null;
+}
+
+// 确认选择（供父组件调用）
+function confirmActive() {
+  const entry = filteredEntries.value[props.activeIndex];
+  if (entry) {
+    handleEntryClick(entry);
+  }
+}
+
+// 初始加载
+onMounted(async () => {
+  const dir = props.initialDir || (props.adapter.homeDir ? await props.adapter.homeDir() : '');
+  if (dir) await loadDir(dir);
+});
+
+// 暴露给父组件
+defineExpose({
+  getActivePath,
+  confirmActive,
+});
+</script>
+
+<style scoped>
+.at-files-view {
+  display: flex;
+  flex-direction: column;
+}
+
+.at-view-section-title {
+  font-size: 11px;
+  color: #888;
+  padding: 6px 8px 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.at-view-pathbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px 8px;
+}
+
+.at-view-pathbtn {
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #999;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.at-view-pathbtn:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: #ccc;
+}
+
+.at-view-pathtext {
+  flex: 1;
+  min-width: 0;
+  font-size: 11px;
+  color: #777;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.at-view-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.at-view-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-view-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.at-view-item.active {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.at-view-item-icon {
+  color: #999;
+  flex-shrink: 0;
+}
+
+.at-view-item-name {
+  font-size: 13px;
+  color: #ddd;
+  flex-shrink: 0;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.at-view-item-path {
+  font-size: 11px;
+  color: #555;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.at-view-empty {
+  padding: 12px 10px;
+  color: #666;
+  font-size: 12px;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="at-placeholder-view">
+    <Icon icon="lucide:terminal" 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/message/ContentRenderer.vue

@@ -0,0 +1,61 @@
+<template>
+  <div v-if="blocks.length" class="content-renderer">
+    <template v-for="block in blocks" :key="block.id">
+      <!-- 自定义块渲染器 -->
+      <component
+        v-if="customRenderers[block.type]"
+        :is="customRenderers[block.type]"
+        :block="block"
+      />
+      <!-- 内置文本块 -->
+      <TextBlock v-else-if="block.type === 'text'" :block="block" />
+      <!-- 内置代码块 -->
+      <CodeBlock v-else-if="block.type === 'code'" :block="block" @copy="handleCodeCopy" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, type Component } from 'vue'
+import { parseContent } from '@huyooo/ai-chat-shared'
+import type { ContentBlock } from '@huyooo/ai-chat-shared'
+import { TextBlock, CodeBlock } from './blocks'
+
+const props = defineProps<{
+  /** 原始文本内容 */
+  content: string
+  /** 预解析的块列表（可选，用于流式更新） */
+  blocks?: ContentBlock[]
+}>()
+
+const emit = defineEmits<{
+  /** 代码复制事件 */
+  'code-copy': [code: string]
+}>()
+
+// 从上层注入的自定义块渲染器
+const customRenderers = inject<Record<string, Component>>('blockRenderers', {})
+
+// 解析后的内容块
+const blocks = computed(() => {
+  // 优先使用预解析的块
+  if (props.blocks?.length) {
+    return props.blocks
+  }
+  // 否则解析原始内容
+  return parseContent(props.content)
+})
+
+/** 代码复制处理 */
+function handleCodeCopy(code: string) {
+  emit('code-copy', code)
+}
+</script>
+
+<style scoped>
+.content-renderer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+</style>