@templmf/temp-solf-lmf 0.0.53 → 0.0.55

package/guanwang/src/App.vue

@@ -0,0 +1,61 @@
+<template>
+  <div style="display: flex; flex-direction: column; min-height: 100vh;">
+    <!-- 非移动端 且 非 /chat 页才启用自定义鼠标 -->
+    <CustomCursor v-if="showCursor" />
+    <Navbar />
+    <main style="flex: 1; padding-top: 64px;">
+      <router-view :chat-store="chatStore" />
+    </main>
+    <Footer v-if="!isChat" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { provideTheme } from './composables/useTheme.js'
+import { provideAuth } from './composables/useAuth.js'
+import { useChatStore } from './chat-sdk/headless/useChatStore.js'
+import { useTracker } from './tracker/index.js'
+import Navbar from './components/Navbar.vue'
+import Footer from './components/Footer.vue'
+import CustomCursor from './components/CustomCursor.vue'
+
+provideTheme()
+
+const { user } = provideAuth()
+const chatStore = useChatStore({
+  models: [
+    {
+      id:      import.meta.env.VITE_MODEL      || 'gpt-4o',
+      name:    import.meta.env.VITE_MODEL      || 'gpt-4o',
+      baseURL: import.meta.env.VITE_API_BASE_URL || 'https://api.openai.com',
+      apiKey:  import.meta.env.VITE_API_KEY    || '',
+      vision:  false,
+    },
+    {
+      id:      import.meta.env.VITE_VL_MODEL      || 'gpt-4o',
+      name:    import.meta.env.VITE_VL_MODEL      || 'gpt-4o',
+      baseURL: import.meta.env.VITE_VL_API_BASE_URL || 'https://api.openai.com',
+      apiKey:  import.meta.env.VITE_VL_API_KEY    || '',
+      vision:  true,
+    },
+  ],
+  defaultModel: import.meta.env.VITE_MODEL || 'gpt-4o',
+  autoVision:   true,
+  modes:        ['code', 'ask', 'architect', 'requirements'],
+  defaultMode:  'code',
+  getUser:      () => user.value,
+})
+const route     = useRoute()
+const router    = useRouter()
+const isMobile  = window.innerWidth < 768
+const isChat    = computed(() => route.path === '/chat')
+const showCursor = computed(() => !isMobile && !isChat.value)
+
+// ── 路由页面访问埋点 ───────────────────────────────────────────────
+const tracker = useTracker()
+router.afterEach((to) => {
+  tracker.pageView(to.path)
+})
+</script>

package/guanwang/src/chat-sdk/core/components/ChatBox.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="chat-root">
+
+    <!-- 侧边栏 -->
+    <aside v-if="!isMobile" class="chat-sidebar-bg" style="width:256px;flex-shrink:0;">
+      <ChatSidebar :store="chatStore" :user="user" />
+    </aside>
+
+    <!-- Mobile 侧边栏 -->
+    <template v-if="isMobile && mobileSidebar">
+      <div style="position:fixed;inset:0;z-index:40;display:flex;" @click="mobileSidebar=false">
+        <aside class="chat-sidebar-bg" style="width:256px;height:100%;z-index:41;" @click.stop>
+          <ChatSidebar :store="chatStore" :user="user" @close="mobileSidebar=false" />
+        </aside>
+        <div style="flex:1;background:rgba(0,0,0,0.4);" />
+      </div>
+    </template>
+
+    <!-- 主区 -->
+    <div class="chat-main">
+
+      <!-- Header -->
+      <div class="chat-header">
+        <el-button v-if="isMobile" text circle @click="mobileSidebar=true">
+          <Menu :size="18" color="var(--text-secondary)" />
+        </el-button>
+        <div class="chat-header__avatar">
+          <Bot :size="18" color="white" :stroke-width="1.75" />
+        </div>
+        <div style="flex:1;">
+          <p class="font-display" style="font-weight:600;color:var(--text-primary);font-size:14px;margin:0;">
+            {{ config.title || 'AI 助手' }}
+          </p>
+        </div>
+        <!-- 模式切换 -->
+        <el-select
+          v-if="availableModes.length > 1"
+          :model-value="chatStore.currentMode?.value"
+          size="small"
+          class="mode-select"
+          @change="chatStore.switchMode"
+        >
+          <el-option
+            v-for="m in availableModes"
+            :key="m.id"
+            :label="m.label"
+            :value="m.id"
+          />
+        </el-select>
+        <el-button v-if="chatStore.isLoading.value" size="small"
+          style="color:#f87171;border-color:rgba(248,113,113,0.3);"
+          @click="chatStore.abortStream()">
+          <StopCircle :size="13" style="margin-right:5px;" color="#f87171" /> 停止
+        </el-button>
+        <el-button v-else size="small" text @click="chatStore.clearSession(chatStore.activeId.value)">
+          <Trash2 :size="13" style="margin-right:5px;" /> 清空
+        </el-button>
+      </div>
+
+      <!-- 消息列表 -->
+      <el-scrollbar ref="scrollbarRef" style="flex:1;" @scroll="onScroll">
+        <div class="msg-list" ref="msgListRef">
+          <MessageBubble
+            v-for="msg in chatStore.activeSession.value.messages"
+            :key="msg.id"
+            :msg="msg"
+            :user="user"
+            v-memo="[msg.id, msg.streaming, msg.error]"
+          />
+          <div ref="bottomAnchorRef" style="height:1px;" />
+        </div>
+      </el-scrollbar>
+
+      <!-- 新消息提示 -->
+      <transition name="fade">
+        <button v-if="showNewMsgTip" class="new-msg-tip" @click="scrollToBottom(true)">
+          ↓ 新消息
+        </button>
+      </transition>
+
+      <!-- 输入区 -->
+      <div class="chat-input-wrap">
+        <div style="max-width:760px;margin:0 auto;">
+          <InputBar
+            :is-loading="chatStore.isLoading.value"
+            :placeholder="config.placeholder || '发送消息... (Enter 发送，Shift+Enter 换行)'"
+            :auto-focus="true"
+            :available-models="textModels"
+            :selected-model-id="chatStore.selectedModel.value?.id || ''"
+            :show-model-selector="featuresEnabled.modelSelector !== false && textModels.length > 1"
+            @send="onSend"
+            @select-model="chatStore.selectModel"
+          />
+          <p class="font-mono" style="font-size:11px;color:var(--text-muted);text-align:center;margin-top:8px;">
+            AI 可能会出错，重要决策请自行核实
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Artifact 面板 -->
+    <ArtifactPanel v-if="featuresEnabled.artifact" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
+import { Menu, Bot, StopCircle, Trash2 } from 'lucide-vue-next'
+import MessageBubble from './MessageBubble.vue'
+import ChatSidebar   from './ChatSidebar.vue'
+import InputBar      from './InputBar.vue'
+import { provideArtifactStore } from '../../features/artifact/useArtifactStore.js'
+
+// ArtifactPanel 按需加载
+const ArtifactPanel = defineAsyncComponent(() =>
+  import('../../features/artifact/ArtifactPanel.vue')
+)
+
+const props = defineProps({
+  // SDK config，由 createAIChat() 传入
+  config:    { type: Object, required: true },
+  // chatStore 实例，由 createAIChat() 通过 useChat() 创建后传入
+  chatStore: { type: Object, required: true },
+  // 用户信息（可选，不传则为游客模式）
+  user:      { type: Object, default: null },
+})
+
+// features 开关
+const featuresEnabled = computed(() => props.config.features || {})
+
+// 只把非视觉模型暴露给用户选择
+const textModels = computed(() =>
+  props.chatStore.availableModels.filter(m => !m.vision)
+)
+
+// 可用模式列表（从 modeConfigs 中提取，供 header select 使用）
+const MODE_LABELS = { code: 'Code 模式', ask: 'Ask 模式', architect: 'Architect 模式', requirements: '需求模式' }
+const availableModes = computed(() => {
+  const configs = props.chatStore.modeConfigs?.value || {}
+  return Object.keys(configs).map(id => ({
+    id,
+    label: MODE_LABELS[id] || id,
+  }))
+})
+
+// Artifact Store provide
+const artifactStore = provideArtifactStore()
+
+const isMobile      = window.innerWidth < 768
+const mobileSidebar = ref(false)
+const scrollbarRef  = ref(null)
+const bottomAnchorRef = ref(null)
+const isAtBottom    = ref(true)
+const showNewMsgTip = ref(false)
+let   anchorObserver = null
+
+onMounted(() => {
+  anchorObserver = new IntersectionObserver(
+    ([entry]) => {
+      isAtBottom.value = entry.isIntersecting
+      if (entry.isIntersecting) showNewMsgTip.value = false
+    },
+    { root: scrollbarRef.value?.wrapRef, threshold: 0.1 }
+  )
+  nextTick(() => {
+    if (bottomAnchorRef.value) anchorObserver.observe(bottomAnchorRef.value)
+  })
+})
+
+onUnmounted(() => {
+  anchorObserver?.disconnect()
+  if (scrollRafId) cancelAnimationFrame(scrollRafId)
+})
+
+// ── 滚动节流 ─────────────────────────────────────────────────────
+// 流式期间每次 content 变化都会触发 scrollToBottom，
+// 用 rAF 确保同一帧内多次调用只执行一次，避免反复读写 scrollHeight 导致强制回流
+let scrollRafId = null
+
+function scrollToBottom(force = false) {
+  const wrap = scrollbarRef.value?.wrapRef
+  if (!wrap) return
+  if (!force && !isAtBottom.value) {
+    showNewMsgTip.value = true
+    return
+  }
+  if (scrollRafId) return   // 本帧已排队，跳过
+  scrollRafId = requestAnimationFrame(() => {
+    scrollRafId = null
+    const w = scrollbarRef.value?.wrapRef
+    if (!w) return
+    w.scrollTop = w.scrollHeight
+    showNewMsgTip.value = false
+  })
+}
+
+function onScroll() {
+  if (isAtBottom.value) showNewMsgTip.value = false
+}
+
+function onSend(payload) {
+  // 有附件时强制走 vision 模型，用户无法通过模型选择器改变此行为
+  const hasAttachments = payload.attachments?.length > 0
+  if (hasAttachments) {
+    const visionModel = props.chatStore.availableModels.find(m => m.vision)
+    if (visionModel) payload = { ...payload, modelOverride: visionModel.id }
+  }
+  props.chatStore.sendMessage(payload, props.chatStore.activeId.value, payload.modelOverride)
+}
+
+watch(
+  () => props.chatStore.activeSession.value.messages.length,
+  () => nextTick(() => scrollToBottom())
+)
+watch(
+  () => {
+    const msgs = props.chatStore.activeSession.value.messages
+    const last = msgs[msgs.length - 1]
+    return last?.streaming ? last.content?.length : 0
+  },
+  () => { if (isAtBottom.value) scrollToBottom() }
+)
+watch(() => props.chatStore.activeId.value, () => {
+  artifactStore.clearSession()
+})
+</script>
+
+<style scoped>
+.chat-root {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+.chat-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-primary);
+  transition: background 0.3s;
+  min-width: 320px;
+}
+.chat-header {
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex; align-items: center; gap: 10px;
+  background: var(--bg-secondary); transition: background 0.3s;
+  flex-shrink: 0;
+}
+.chat-header__avatar {
+  width: 34px; height: 34px; border-radius: 50%;
+  background: var(--brand-500);
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.msg-list {
+  padding: 24px 20px;
+  display: flex; flex-direction: column; gap: 16px;
+  min-height: 100%;
+}
+.chat-input-wrap {
+  padding: 14px 20px;
+  border-top: 1px solid var(--border-subtle);
+  background: var(--bg-secondary); transition: background 0.3s;
+  flex-shrink: 0;
+}
+.new-msg-tip {
+  position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);
+  padding: 6px 16px; border-radius: 20px;
+  background: var(--brand-500); color: white;
+  font-size: 13px; border: none; cursor: pointer;
+  box-shadow: 0 4px 16px rgba(26,111,196,0.4);
+  transition: all 0.15s; z-index: 10;
+}
+.new-msg-tip:hover { background: var(--brand-600); }
+.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+:deep(.el-scrollbar__wrap) { overflow-x: hidden; }
+
+/* 模式切换 select */
+.mode-select { width: 110px; }
+:deep(.mode-select .el-input__wrapper) {
+  background: var(--tag-bg) !important;
+  box-shadow: none !important;
+  border: 1px solid var(--border-default) !important;
+  border-radius: 6px !important;
+  padding: 0 8px !important;
+  height: 28px !important;
+  transition: border-color 0.15s !important;
+}
+:deep(.mode-select .el-input__wrapper:hover),
+:deep(.mode-select .el-input__wrapper.is-focus) {
+  border-color: var(--brand-500) !important;
+}
+:deep(.mode-select .el-input__inner) {
+  font-size: 12px !important;
+  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;
+  color: var(--text-secondary) !important;
+  height: 26px !important;
+  line-height: 26px !important;
+}
+:deep(.mode-select .el-select__caret) {
+  color: var(--text-muted) !important;
+  font-size: 11px !important;
+}
+</style>

package/guanwang/src/chat-sdk/core/components/ChatSidebar.vue

@@ -0,0 +1,84 @@
+<template>
+  <div style="display: flex; flex-direction: column; height: 100%; padding: 14px 10px;">
+    <el-button
+      type="primary"
+      style="width: 100%; margin-bottom: 16px; font-size: 13px; border-radius: 10px;"
+      @click="store.newSession(); $emit('close')"
+    >
+      <Plus :size="14" style="margin-right: 6px;" /> 新建对话
+    </el-button>
+
+    <p class="font-mono" style="font-size: 10px; color: var(--text-muted); padding: 2px 6px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em;">历史记录</p>
+
+    <el-scrollbar style="flex: 1;">
+      <div style="display: flex; flex-direction: column; gap: 1px; padding-right: 2px;">
+        <div
+          v-for="s in store.sessions.value"
+          :key="s.id"
+          style="position: relative; display: flex; align-items: center;"
+        >
+          <div
+            class="chat-history-item"
+            :class="{ active: s.id === store.activeId.value }"
+            style="flex: 1; padding-right: 28px;"
+            @click="store.setActiveId(s.id); $emit('close')"
+          >{{ s.title }}</div>
+          <el-tooltip content="删除对话" placement="right" :show-after="400">
+            <el-button
+              text
+              size="small"
+              circle
+              style="position: absolute; right: 2px; color: var(--text-muted); opacity: 0.5; transition: opacity 0.15s;"
+              class="delete-btn"
+              @click.stop="store.deleteSession(s.id)"
+            >
+              <Trash2 :size="12" />
+            </el-button>
+          </el-tooltip>
+        </div>
+      </div>
+    </el-scrollbar>
+
+    <!-- Bottom user info -->
+    <div style="padding-top: 10px; border-top: 1px solid var(--border-subtle); margin-top: 8px;">
+      <div v-if="user" style="display: flex; align-items: center; gap: 8px;">
+        <div
+          :style="{
+            width: '24px', height: '24px', borderRadius: '50%',
+            background: avatarBg, display: 'flex', alignItems: 'center', justifyContent: 'center',
+            color: 'white', fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: '10px', flexShrink: 0,
+          }"
+        >{{ userInitial }}</div>
+        <div>
+          <p style="font-size: 12px; color: var(--text-primary); font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; margin: 0;">{{ user.name }}</p>
+          <p class="font-mono" style="font-size: 10px; color: var(--text-muted); margin: 0;">{{ user.role }}</p>
+        </div>
+      </div>
+      <div v-else style="display: flex; align-items: center; gap: 6px;">
+        <span class="animate-pulse-slow" style="width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: inline-block;" />
+        <span class="font-mono" style="font-size: 11px; color: var(--text-muted);">游客模式</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Plus, Trash2 } from 'lucide-vue-next'
+
+const props = defineProps({
+  store: { type: Object, required: true },
+  user:  { type: Object, default: null },
+})
+
+defineEmits(['close'])
+
+const AVATAR_COLORS = ['#1A6FC4', '#0891b2', '#059669', '#7c3aed', '#b45309']
+const userInitial   = computed(() => (props.user?.name || props.user?.username || '?')[0].toUpperCase())
+const avatarBg      = computed(() => AVATAR_COLORS[(props.user?.id || 0) % AVATAR_COLORS.length])
+</script>
+
+<style scoped>
+.delete-btn:hover { opacity: 1 !important; }
+:deep(.el-scrollbar__wrap) { overflow-x: hidden; }
+</style>