feat: 调整了目录结构

2026-04-23 16:37:26 +08:00
parent 8161e7512b
commit 736c2feb4f
58 changed files with 2370 additions and 373 deletions
--- a/src/pages/ChatModule/AnswerComponent/index.vue
+++ b/src/pages/ChatModule/AnswerComponent/index.vue
@@ -0,0 +1,150 @@
+<template>
+  <view class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
+    <!-- 占位撑开 -->
+    <view class="w-vw"></view>
+    <view class="flex flex-col p-16 border-box border-left-4">
+      <view v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-8">
+        <uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />
+        <text class="font-size-16 font-500 text-color-900 ml-6"> {{ title }}</text>
+      </view>
+      <!-- 文字内容，最多显示3行 -->
+      <view class="answer-content font-size-12 font-color-600">
+        <ChatMarkdown :key="textKey" :text="processedText" />
+      </view>
+      <!-- 超过3行时显示...提示 -->
+      <view v-if="!finish" class="flex flex-row flex-items-center mt-8">
+        <text class="font-size-12 font-400 font-color-600">正在生成</text>
+        <ChatLoading />
+      </view>
+      <view v-if="isOverflow" class="flex flex-row flex-items-center mt-8" @click="lookDetailAction">
+        <text class="font-size-12 font-400 theme-color-500 mr-4">查看详情</text>
+        <uni-icons class="icon-active" type="right" size="14" color="opacity"></uni-icons>
+      </view>
+
+    </view>
+  </view>
+
+</template>
+
+<script setup>
+import { defineProps, computed, ref, watch, onBeforeUnmount } from "vue";
+
+import ChatMarkdown from "../../ChatMain/ChatMarkdown/index.vue";
+import ChatLoading from "../../ChatMain/ChatLoading/index.vue";
+import StreamManager from '@/utils/StreamManager.js';
+
+const isOverflow = ref(false)
+
+// 直接根据文字长度判断，超过约100个字符认为会溢出（约3行）
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  text: {
+    type: String,
+    default: "",
+  },
+  finish: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 用于强制重新渲染的key
+const textKey = ref(0);
+
+// 处理文本内容：按行截断以保证预览最多显示三行（更贴近视觉行数）
+// 点击“查看详情”会跳转到完整页面（不受预览截断影响）。
+const PREVIEW_LINES = 3;
+const PREVIEW_CHAR_LIMIT = 100; // 作为备用，当没有换行但过长时也会截断
+const processedText = computed(() => {
+  const txt = props.text ? String(props.text) : "";
+  if (!txt) return "";
+
+  // 按行分割（保留空行）
+  const lines = txt.split(/\r?\n/);
+
+  // 如果行数超过限制，截取前 PREVIEW_LINES 行并添加省略号
+  if (lines.length > PREVIEW_LINES) {
+    return lines.slice(0, PREVIEW_LINES).join("\n") + "...";
+  }
+
+  // 若虽然行数不超过，但总长度仍然很长，做字符级截断作为兜底
+  if (txt.length > PREVIEW_CHAR_LIMIT) {
+    return txt.slice(0, PREVIEW_CHAR_LIMIT) + "...";
+  }
+
+  return txt;
+});
+
+// 监听 text 变化：更新 textKey 并同步 isOverflow（合并为单一响应函数，避免冗余）
+watch(
+  () => props.text,
+  (newText, oldText) => {
+    const textStr = newText ? String(newText) : "";
+    const lines = textStr.split(/\r?\n/);
+    isOverflow.value = lines.length > PREVIEW_LINES || textStr.length > PREVIEW_CHAR_LIMIT;
+    if (newText !== oldText) {
+      textKey.value++;
+    }
+  },
+  { immediate: true }
+);
+
+const lookDetailAction = () => {
+  const message = props.text ? String(props.text) : "";
+  // 使用 StreamManager 以 streamId 转发当前及后续流式更新，详情页通过 streamId 订阅
+  const streamId = `stream_${Date.now()}_${Math.random().toString(36).slice(2,8)}`;
+  StreamManager.openStream(streamId, message, !!props.finish);
+
+  // 将当前组件后续 props.text/props.finish 的更新转发到 StreamManager
+  const stopForward = watch(
+    () => props.text,
+    (v) => {
+      StreamManager.updateStream(streamId, v ? String(v) : "", !!props.finish);
+    }
+  );
+  const stopFinishWatcher = watch(
+    () => props.finish,
+    (f) => {
+      StreamManager.updateStream(streamId, props.text ? String(props.text) : "", !!f);
+      if (f) {
+        stopForward();
+        stopFinishWatcher();
+      }
+    }
+  );
+
+  // 清理：组件卸载时停止转发（若仍存在）
+  onBeforeUnmount(() => {
+    try {
+      stopForward && stopForward();
+      stopFinishWatcher && stopFinishWatcher();
+    } catch (e) {}
+  });
+
+  // 传递 finished 参数，完成状态下不自动滚到底部
+  uni.navigateTo({ url: `/pages/ChatMain/ChatLongAnswer/index?streamId=${encodeURIComponent(streamId)}&finished=${props.finish ? '1' : '0'}` });
+}
+
+</script>
+
+<style scoped lang="scss">
+.icon-active {
+  margin-top: 1px;
+  color: $theme-color-500;
+}
+.answer-content {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 16px;
+  max-height: 80px;
+}
+.border-left-4 {
+  border-left: 4px solid $theme-color-500;
+}
+</style>