移动端项目问题

问题 1：解决只有部分页面共同有导航栏及标题问题

将有标签栏的页面单独封装成一个 LayOut 组件 与 app.vue 同级，所有有状态栏的在 LayOut 展示，其他页面在 app.vue 页面展示

有标签栏的页面就是LayOut 路由的子集

问题 2：配服务

1.在 vite.config.vue 中配服务

在defineConfig 里面 写 service

2.在service 中 用 proxy 配置

格式👇

/api：名字

target：源

server: {
    proxy: {
      '/api': {
        target: '接口网址',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

问题 3：接入 ai

1.ai 聊天区 叫富文件 打字机效果 安装 vue-markdown（不用）

在哪里写就在哪引入 用的时候用 source 动态绑定 ai 回答输出的富文件

1.安装npm install marked dompurify 用来处理 ai 回答的 markdown 文本格式

用 marked.parse(xxx)将 markdown 文本转成 html

再用 dompurity 净化 html 防止 xxs 攻击

// 用v-html处理
<div class="ask" v-html="handleMarkdown(item.question)"></div>

// 引入
import DomPurify from "dompurify";
import { marked } from "marked";


// 处理markdown
const handleMarkdown = (val: string) => {
  return DomPurify.sanitize(String(marked.parse(val)));
};

2.用 scrollIntoView({block:”end”})

解决监听 自动向上滚动问题

用 ref 绑定之后用scrollIntoView({block:”end”})

3. 接入 ai 的时候 要解析携带的数据

步骤如下👇

1.接收数据

const result = await fetch("/doubao/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer 1e641d1d-4f35-413c-8bf8-bf5f6ee213c8",
    },
    body: JSON.stringify({
      model: "doubao-seed-1-6-vision-250815",
      messages: [
        { role: "system", content: "You are a helpful assistant." },

        { role: "user", content: questionValue.value },
      ],
      stream: true,
    }),
  });

2.解析

    //  ① 解析数据 但还是Promise {<pending>}状态 不可读
  if (result.body) {
    let resultData = result.body.getReader();
    console.log(resultData, "第一次获取");

    //  ② 定义一个编码解析方式
    let codeMain = new TextDecoder("utf-8");
    console.log(codeMain, "解码方式");
    //  ③ 循环读取数据
    while (isDone.value) {
      // ④ 用.read()方法读取数据 但还是不可以读取 值在value中
      let resMain = await resultData.read();
      console.log(resMain, "第二次解析");
      isDone.value = !resMain.done;
      if (isDone.value == false) {
        break;
      }
      //⑤ 用这个解码方式再次处理数据
      let data = codeMain.decode(resMain.value, { stream: true });
      //⑥ 把不需要的字符截掉
      let dataArr = data.split("data: ").slice(1);

      console.log(dataArr, "截取后的答案");
      // let dataArr = data.choices[0].message.content;
      console.log(dataArr, "截取后的答案");
      //⑦ 把返回的答案存到数组talkList中

      dataArr.forEach((item) => {
        if (item) {
          if (!item.includes("[DONE]")) {
            // loading
            const lastItem = talkList.value[talkList.value.length - 1];
            lastItem.loading = false;
            talkList.value[talkList.value.length - 1].answer +=
              JSON.parse(item).choices[0].delta.content;
          }
        }
      });