@templmf/temp-solf-lmf 0.0.55 → 0.0.57

package/guanwang/src/App.vue

@@ -1,61 +0,0 @@
-<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

@@ -1,305 +0,0 @@
-<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

@@ -1,84 +0,0 @@
-<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>