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

package/src/components/message/WelcomeMessage.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="welcome-message">
+    <!-- 标题区域 -->
+    <div class="welcome-header">
+      <div class="welcome-title-row">
+        <Icon :icon="config.icon" width="28" class="welcome-icon" />
+        <h2 class="welcome-title">{{ config.title }}</h2>
+      </div>
+      <p class="welcome-subtitle">{{ config.subtitle }}</p>
+    </div>
+
+    <!-- 能力标签 -->
+    <div v-if="config.features.length" class="features-section">
+      <div class="section-header">
+        <Icon icon="lucide:zap" width="14" class="section-icon" />
+        <span class="section-title">支持的能力</span>
+      </div>
+      <div class="features-list">
+        <div v-for="feature in config.features" :key="feature.name" class="feature-tag">
+          <Icon :icon="feature.icon" width="14" class="feature-icon" />
+          <span>{{ feature.name }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 快捷操作 -->
+    <div v-if="config.tasks.length" class="tasks-section">
+      <div class="section-header">
+        <Icon icon="lucide:rocket" width="14" class="section-icon" />
+        <span class="section-title">快捷操作</span>
+      </div>
+      <div class="tasks-grid" :class="tasksGridClass">
+        <button
+          v-for="task in config.tasks"
+          :key="task.name"
+          class="task-card"
+          @click="$emit('quick-action', task.prompt)"
+        >
+          <Icon :icon="task.icon" width="18" class="task-icon" />
+          <div class="task-content">
+            <div class="task-name">{{ task.name }}</div>
+            <div class="task-desc">{{ task.desc }}</div>
+          </div>
+          <Icon icon="lucide:arrow-right" width="14" class="task-arrow" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
+import { type WelcomeConfig, defaultWelcomeConfig } from './welcome-types';
+
+const props = withDefaults(defineProps<{
+  /** 欢迎页配置（可部分配置，未配置项使用默认值） */
+  config?: Partial<WelcomeConfig>;
+}>(), {
+  config: () => ({}),
+});
+
+defineEmits<{
+  'quick-action': [prompt: string];
+}>();
+
+// 合并配置
+const config = computed<WelcomeConfig>(() => ({
+  title: props.config?.title ?? defaultWelcomeConfig.title,
+  subtitle: props.config?.subtitle ?? defaultWelcomeConfig.subtitle,
+  icon: props.config?.icon ?? defaultWelcomeConfig.icon,
+  features: props.config?.features ?? defaultWelcomeConfig.features,
+  tasks: props.config?.tasks ?? defaultWelcomeConfig.tasks,
+}));
+
+// 根据任务数量动态选择网格布局
+const tasksGridClass = computed(() => {
+  const count = config.value.tasks.length;
+  if (count === 1) return 'tasks-single';
+  if (count === 2) return 'tasks-two';
+  if (count === 3) return 'tasks-three';
+  return 'tasks-multi';
+});
+</script>
+
+<style scoped>
+.welcome-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  padding: 40px 24px;
+  max-width: 640px;
+  margin: 0 auto;
+  min-height: 100%;
+}
+
+/* 标题区域 */
+.welcome-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 8px;
+}
+
+.welcome-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.welcome-icon {
+  color: var(--chat-text-muted, #888);
+}
+
+.welcome-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--chat-text, #fff);
+  margin: 0;
+}
+
+.welcome-subtitle {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+  margin: 0;
+}
+
+/* 区域标题 */
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  padding-left: 2px;
+}
+
+.section-icon {
+  color: var(--chat-text-muted, #666);
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--chat-text-muted, #888);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* 能力标签 */
+.features-section {
+  width: 100%;
+}
+
+.features-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+
+.feature-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--chat-muted, #2a2a2a);
+  border: 1px solid var(--chat-border, #3a3a3a);
+  border-radius: 20px;
+  font-size: 12px;
+  color: var(--chat-text, #ccc);
+  transition: all 0.15s;
+}
+
+.feature-tag:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.feature-icon {
+  color: var(--chat-text-muted, #888);
+}
+
+/* 快捷操作 */
+.tasks-section {
+  width: 100%;
+}
+
+.tasks-grid {
+  display: grid;
+  gap: 10px;
+}
+
+/* 单个任务：居中显示 */
+.tasks-single {
+  grid-template-columns: minmax(200px, 320px);
+  justify-content: center;
+}
+
+/* 两个任务：两列 */
+.tasks-two {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+/* 三个任务：三列 */
+.tasks-three {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* 多个任务：两列自动换行 */
+.tasks-multi {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.task-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  background: var(--chat-muted, #2a2a2a);
+  border: 1px solid var(--chat-border, #3a3a3a);
+  border-radius: 10px;
+  color: var(--chat-text, #ccc);
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.task-card:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(59, 130, 246, 0.5);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.task-icon {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(59, 130, 246, 0.15);
+  border-radius: 8px;
+  color: #60a5fa;
+}
+
+.task-card:hover .task-icon {
+  background: rgba(59, 130, 246, 0.25);
+}
+
+.task-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.task-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--chat-text, #fff);
+  margin-bottom: 2px;
+}
+
+.task-desc {
+  font-size: 11px;
+  color: var(--chat-text-muted, #888);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.task-arrow {
+  flex-shrink: 0;
+  color: var(--chat-text-muted, #666);
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: all 0.2s;
+}
+
+.task-card:hover .task-arrow {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 响应式 */
+@media (max-width: 540px) {
+  .welcome-message {
+    padding: 32px 16px;
+    gap: 24px;
+  }
+
+  .welcome-title {
+    font-size: 24px;
+  }
+
+  .tasks-two,
+  .tasks-three,
+  .tasks-multi {
+    grid-template-columns: 1fr;
+  }
+
+  .task-arrow {
+    display: none;
+  }
+}
+</style>

package/src/components/message/blocks/CodeBlock.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="code-block">
+    <!-- 头部：语言 + 操作按钮 -->
+    <div class="code-header">
+      <span class="code-language">{{ languageDisplay }}</span>
+      <div class="code-actions">
+        <CopyButton :text="block.content" title="复制代码" @copy="emit('copy', $event)" />
+      </div>
+    </div>
+    <!-- 代码内容 -->
+    <pre class="code-content"><code v-html="highlightedCode"></code></pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { highlightCode, getLanguageDisplayName } from '@huyooo/ai-chat-shared'
+import type { CodeBlock } from '@huyooo/ai-chat-shared'
+import CopyButton from '../../common/CopyButton.vue'
+
+const props = defineProps<{
+  block: CodeBlock
+}>()
+
+const emit = defineEmits<{
+  copy: [code: string]
+}>()
+
+// 语言显示名称
+const languageDisplay = computed(() => 
+  getLanguageDisplayName(props.block.language)
+)
+
+// 高亮后的代码
+const highlightedCode = computed(() => 
+  highlightCode(props.block.content, props.block.language)
+)
+</script>
+
+<style scoped>
+.code-block {
+  background: var(--chat-code-bg, #1f2937);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 8px 0;
+}
+
+.code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.code-language {
+  font-size: 12px;
+  color: var(--chat-text-muted, #888);
+  font-family: 'SF Mono', Monaco, monospace;
+}
+
+.code-content {
+  margin: 0;
+  padding: 12px;
+  overflow-x: auto;
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--chat-code-text, #e5e7eb);
+}
+
+/* 统一滚动条样式 */
+.code-content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.code-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.code-content::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
+  border-radius: 3px;
+}
+
+.code-content::-webkit-scrollbar-thumb:hover {
+  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
+}
+
+.code-content code {
+  font-family: inherit;
+}
+
+/* highlight.js 主题覆盖 */
+.code-content :deep(.hljs-keyword) { color: #c678dd; }
+.code-content :deep(.hljs-string) { color: #98c379; }
+.code-content :deep(.hljs-number) { color: #d19a66; }
+.code-content :deep(.hljs-comment) { color: #5c6370; font-style: italic; }
+.code-content :deep(.hljs-function) { color: #61afef; }
+.code-content :deep(.hljs-class) { color: #e5c07b; }
+.code-content :deep(.hljs-variable) { color: #e06c75; }
+.code-content :deep(.hljs-operator) { color: #56b6c2; }
+.code-content :deep(.hljs-punctuation) { color: #abb2bf; }
+.code-content :deep(.hljs-property) { color: #e06c75; }
+.code-content :deep(.hljs-attr) { color: #d19a66; }
+.code-content :deep(.hljs-built_in) { color: #e5c07b; }
+.code-content :deep(.hljs-title) { color: #61afef; }
+.code-content :deep(.hljs-params) { color: #abb2bf; }
+.code-content :deep(.hljs-literal) { color: #56b6c2; }
+.code-content :deep(.hljs-type) { color: #e5c07b; }
+</style>

package/src/components/message/blocks/TextBlock.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="text-block">{{ block.content }}</div>
+</template>
+
+<script setup lang="ts">
+import type { TextBlock } from '@huyooo/ai-chat-shared'
+
+defineProps<{
+  block: TextBlock
+}>()
+</script>
+
+<style scoped>
+.text-block {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--chat-text, #ccc);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>

package/src/components/message/blocks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * 内容块组件导出
+ */
+
+export { default as TextBlock } from './TextBlock.vue'
+export { default as CodeBlock } from './CodeBlock.vue'

package/src/components/message/parts/CollapsibleCard.vue

@@ -0,0 +1,135 @@
+<template>
+  <div :class="['collapsible-card', { expanded: modelValue }]">
+    <div class="card-header">
+      <div class="card-header-left" @click="emit('update:modelValue', !modelValue)">
+        <div class="card-icon" :style="{ color: iconColor }">
+          <Icon v-if="spinning" icon="lucide:loader-2" width="14" class="spinning" />
+          <Icon v-else :icon="icon" width="14" />
+        </div>
+        <span class="card-title" :style="titleColor ? { color: titleColor } : {}">{{ title }}</span>
+        <span v-if="subtitle" class="card-subtitle">{{ subtitle }}</span>
+      </div>
+      <div class="card-header-right">
+        <slot name="header-actions" />
+        <Icon 
+          v-if="collapsible"
+          :icon="modelValue ? 'lucide:chevron-up' : 'lucide:chevron-down'" 
+          width="14" 
+          class="card-chevron"
+          @click.stop="emit('update:modelValue', !modelValue)"
+        />
+      </div>
+    </div>
+    <div v-if="modelValue" class="card-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+withDefaults(defineProps<{
+  /** 图标名称 */
+  icon: string
+  /** 图标颜色 */
+  iconColor?: string
+  /** 标题 */
+  title: string
+  /** 标题颜色 */
+  titleColor?: string
+  /** 副标题 */
+  subtitle?: string
+  /** 是否展开 */
+  modelValue: boolean
+  /** 图标是否旋转（加载状态） */
+  spinning?: boolean
+  /** 是否可折叠（显示 chevron） */
+  collapsible?: boolean
+}>(), {
+  iconColor: 'var(--chat-accent, #3b82f6)',
+  collapsible: true,
+  spinning: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+</script>
+
+<style scoped>
+.collapsible-card {
+  margin: 8px 0;
+  border-radius: 8px;
+  background: var(--chat-muted, #2a2a2a);
+  border: 1px solid var(--chat-border, #333);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  user-select: none;
+}
+
+.card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  cursor: pointer;
+}
+
+.card-header-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.card-title {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+}
+
+.card-subtitle {
+  font-size: 12px;
+  color: var(--chat-text-muted, #666);
+}
+
+.card-chevron {
+  color: var(--chat-text-muted, #666);
+  transition: transform 0.2s;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.collapsible-card.expanded .card-chevron {
+  transform: rotate(180deg);
+}
+
+.card-content {
+  padding: 12px;
+  min-width: 0;
+  overflow: hidden;
+}
+</style>

package/src/components/message/parts/ErrorPart.vue

@@ -0,0 +1,51 @@
+<template>
+  <CollapsibleCard
+    v-model="expanded"
+    icon="lucide:alert-circle"
+    icon-color="var(--chat-error, #ef4444)"
+    :title="categoryLabel"
+    title-color="var(--chat-error, #ef4444)"
+  >
+    <div class="error-content">{{ message }}</div>
+  </CollapsibleCard>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import CollapsibleCard from './CollapsibleCard.vue'
+
+const props = defineProps<{
+  message: string
+  category?: string
+  retryable?: boolean
+}>()
+
+// 默认展开显示错误信息
+const expanded = ref(true)
+
+/** 分类标签映射 */
+const categoryLabel = computed(() => {
+  const labels: Record<string, string> = {
+    api: 'API 错误',
+    network: '网络错误',
+    timeout: '请求超时',
+    auth: '认证失败',
+    rate_limit: '请求限流',
+    server: '服务器错误',
+    unknown: '未知错误',
+  }
+  return labels[props.category || 'unknown'] || props.category || '请求失败'
+})
+</script>
+
+<style scoped>
+.error-content {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--chat-text-muted, #999);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  margin: 0;
+}
+</style>