@templmf/temp-solf-lmf 0.0.53 → 0.0.55

package/guanwang/src/chat-sdk/core/useTheme.js

@@ -0,0 +1,31 @@
+/**
+ * useTheme.js
+ * 主题（深色/浅色）管理，provide/inject 模式
+ */
+import { ref, watch, provide, inject } from 'vue'
+
+const THEME_KEY = Symbol('theme')
+
+export function createTheme() {
+  const theme = ref('light')
+
+  watch(theme, val => {
+    document.documentElement.setAttribute('data-theme', val)
+  }, { immediate: true })
+
+  function toggleTheme() {
+    theme.value = theme.value === 'dark' ? 'light' : 'dark'
+  }
+
+  return { theme, toggleTheme }
+}
+
+export function provideTheme() {
+  const themeStore = createTheme()
+  provide(THEME_KEY, themeStore)
+  return themeStore
+}
+
+export function useTheme() {
+  return inject(THEME_KEY)
+}

package/guanwang/src/chat-sdk/features/artifact/ArtifactCard.vue

@@ -0,0 +1,172 @@
+<template>
+  <!--
+    轻量卡片：替代消息气泡里的完整代码块
+    只显示图标 + 文件名 + 语言标识 + 行数，点击打开右侧面板
+  -->
+  <div
+    class="artifact-card"
+    :class="{ 'is-active': isActive, 'is-streaming': artifact.streaming }"
+    @click="store.open(artifact.id)"
+  >
+    <!-- 左侧：图标 + 文件信息 -->
+    <div class="artifact-card__icon">
+      <component :is="langIcon" :size="18" color="var(--brand-400)" :stroke-width="1.5" />
+    </div>
+
+    <div class="artifact-card__info">
+      <span class="artifact-card__name">{{ artifact.fileName }}</span>
+      <span class="artifact-card__meta">
+        {{ langLabel }}
+        <template v-if="!artifact.streaming">
+          &nbsp;·&nbsp;{{ artifact.lines }} 行
+        </template>
+        <template v-else>
+          &nbsp;·&nbsp;<span class="streaming-dot-wrap"><span class="streaming-dot" />生成中</span>
+        </template>
+      </span>
+    </div>
+
+    <!-- 右侧：操作区 -->
+    <div class="artifact-card__actions" @click.stop>
+      <button class="art-btn" @click="copyCode" :disabled="artifact.streaming" title="复制代码">
+          <Check v-if="copied" :size="13" color="#4ade80" />
+          <Copy  v-else        :size="13" />
+        </button>
+      <button class="art-btn art-btn--primary" @click="store.open(artifact.id)">
+        <ExternalLink :size="13" />
+        {{ isActive ? '已展开' : '展开' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import {
+  FileCode, FileText, Globe, Layers, BarChart2,
+  Braces, Terminal, Copy, Check, ExternalLink,
+} from 'lucide-vue-next'
+import { useArtifactStore } from './useArtifactStore.js'
+
+const props = defineProps({
+  artifact: { type: Object, required: true },
+})
+
+const store    = useArtifactStore()
+const copied   = ref(false)
+const isActive = computed(() => store.activeId.value === props.artifact.id)
+
+const langLabel = computed(() =>
+  store.LANG_LABEL[props.artifact.lang] || props.artifact.lang?.toUpperCase() || 'Code'
+)
+
+// 语言 → 图标
+const ICON_MAP = {
+  vue: Layers, html: Globe, jsx: Layers, tsx: Layers,
+  javascript: FileCode, js: FileCode, typescript: FileCode, ts: FileCode,
+  python: FileCode, go: FileCode, rust: FileCode, java: FileCode,
+  css: Braces, scss: Braces, sass: Braces,
+  bash: Terminal, sh: Terminal, shell: Terminal,
+  sql: Braces, json: Braces, yaml: Braces,
+  mermaid: BarChart2, svg: Globe,
+  math: FileText, latex: FileText,
+}
+const langIcon = computed(() => ICON_MAP[props.artifact.lang] || FileCode)
+
+function copyCode() {
+  navigator.clipboard?.writeText(props.artifact.code).catch(() => {})
+  copied.value = true
+  setTimeout(() => { copied.value = false }, 2000)
+}
+</script>
+
+<style scoped>
+.artifact-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  margin: 8px 0;
+  border-radius: 10px;
+  border: 1px solid var(--border-default);
+  background: var(--bg-card);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+  user-select: none;
+}
+.artifact-card:hover {
+  border-color: rgba(26,111,196,0.45);
+  background: var(--bg-card-hover);
+  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+}
+.artifact-card.is-active {
+  border-color: var(--brand-500);
+  background: var(--tag-bg);
+  box-shadow: 0 0 0 2px rgba(26,111,196,0.15);
+}
+/* streaming时呼吸边框动画 */
+.artifact-card.is-streaming {
+  animation: card-breathe 1.8s ease-in-out infinite;
+}
+@keyframes card-breathe {
+  0%, 100% { border-color: rgba(26,111,196,0.25); box-shadow: none; }
+  50%       { border-color: rgba(26,111,196,0.6);  box-shadow: 0 0 0 2px rgba(26,111,196,0.12); }
+}
+
+.artifact-card__icon {
+  width: 36px; height: 36px; flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--tag-bg);
+  border: 1px solid var(--tag-border);
+  display: flex; align-items: center; justify-content: center;
+}
+
+.artifact-card__info {
+  flex: 1; min-width: 0;
+  display: flex; flex-direction: column; gap: 2px;
+}
+.artifact-card__name {
+  font-size: 13px; font-weight: 500;
+  font-family: 'Cascadia Code', 'Consolas', monospace;
+  color: var(--text-primary);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.artifact-card__meta {
+  font-size: 11px;
+  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  color: var(--text-muted);
+  display: flex; align-items: center; gap: 2px;
+}
+
+.artifact-card__actions {
+  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
+}
+.art-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 4px 8px; font-size: 11px;
+  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  border: 1px solid var(--border-default);
+  border-radius: 6px; background: transparent;
+  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
+}
+.art-btn:hover { border-color: rgba(26,111,196,0.4); color: var(--brand-400); background: var(--tag-bg); }
+.art-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.art-btn--primary {
+  background: var(--brand-500); color: white; border-color: var(--brand-500);
+}
+.art-btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: white; }
+
+.streaming-dot-wrap {
+  display: inline-flex; align-items: center; gap: 4px;
+  color: var(--brand-400);
+}
+.streaming-dot {
+  width: 5px; height: 5px; border-radius: 50%;
+  background: #4ade80;
+  animation: pulseSlow 1.2s ease infinite;
+}
+@keyframes pulseSlow {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.4; transform: scale(0.75); }
+}
+</style>