一、關(guān)于Claude

1.什么是Claude？

Claude是一款人工智能聊天機(jī)器人。它可以像朋友一樣和你自然地互動聊天。和Claude聊天體驗(yàn)很像跟人聊天，你可以討論任何話題，問各種各樣的問題。Claude會盡量理解你說的每一句話，并給出合適的回復(fù)。相比之下，Chat GPT是一個(gè)開源的對話模型，主要用于生成對話的回復(fù)內(nèi)容。和Chat GPT聊天感覺更像在和一個(gè)自動回復(fù)機(jī)器聊天，它給出的回復(fù)不太個(gè)性化，也不會真正理解語義。而Claude是一個(gè)完整的人工智能對話系統(tǒng)，專注于提供更富有個(gè)性的溝通交互體驗(yàn)。

2.Claude和Chat GPT的區(qū)別

• 理解力：Claude具有較強(qiáng)的語言理解能力，能理解上下文和語句意思，提取關(guān)鍵信息。Chat GPT主要依靠統(tǒng)計(jì)學(xué)習(xí)，對語義理解較為薄弱。

• 知識量：Claude有一個(gè)較為廣泛的知識圖譜，包括常識、詞匯等，以幫助理解語言和回答問題。Chat GPT主要依靠預(yù)訓(xùn)練的語言模型，知識面相對有限。

• 個(gè)性化：Claude的回復(fù)更加個(gè)性化，可以根據(jù)聊天內(nèi)容和上下文作出恰當(dāng)?shù)幕貞?yīng)和提問。Chat GPT的回復(fù)比較固定和非個(gè)性化,缺乏連貫性。

• 交互體驗(yàn)：和Claude的對話更像人與人的自然交流，有問有答，可以交換多個(gè)輪次。而Chat GPT更類似自動問答，一問一答，交互體驗(yàn)稍顯生硬。

總之，盡管兩者都是人工智能對話技術(shù)產(chǎn)品，但Claude在理解力、知識量、個(gè)性化和交互體驗(yàn)等方面都優(yōu)于Chat GPT，可以提供更加近似人的溝通互動體驗(yàn)。但無論哪一種技術(shù),人機(jī)交互還需要繼續(xù)進(jìn)步和提高。

二、接入Claude前的準(zhǔn)備

1.注冊Slack

Slack是一個(gè)工作效率管理平臺，讓每個(gè)人都能夠使用無代碼自動化和 AI 功能，還可以無縫連接搜索和知識共享，并確保團(tuán)隊(duì)保持聯(lián)系和參與。在世界各地，Slack 不僅受到公司的信任，同時(shí)也是人們偏好使用的平臺。目前市面上使用Claude的方式都是通過Slack接入。

注冊地址：https://slack.com/get-started#/createnew

注意：注冊時(shí)盡量使用谷歌郵箱，這樣后續(xù)操作的成功率高，不會因?yàn)楦鞣N各樣的問題導(dǎo)致無法使用Claude。

2.創(chuàng)建工作區(qū)

注冊成功之后我們首先需要創(chuàng)建一個(gè)工作區(qū)，工作區(qū)是一個(gè)獨(dú)立的協(xié)作環(huán)境，每個(gè)工作區(qū)有自己的渠道(Channels)、成員、權(quán)限設(shè)置等，不同工作區(qū)之間彼此隔離，成員和資源不共享。

?然后填寫“工作區(qū)名稱”，點(diǎn)擊“下一步”

?輸入姓名，上傳照片（選填），繼續(xù)點(diǎn)擊“下一步”

?接著，輸入頻道名稱，繼續(xù)點(diǎn)擊“下一步”

?添加成功后便會出現(xiàn)如下界面：

?3.添加Claude應(yīng)用到工作區(qū)（此步驟需要魔法）

點(diǎn)擊左側(cè)菜單【瀏覽Slack】下的【應(yīng)用】，如下圖：

?在應(yīng)用列表中搜索Claude，并點(diǎn)擊“添加”

?點(diǎn)擊“了解更多”，并授權(quán)添加Claude到Slack

說明：出現(xiàn)以上界面說明當(dāng)前ip被封鎖了，需要使用魔法上網(wǎng)（代理地區(qū)建議選擇US），并使用全局代理或切換無痕瀏覽等方法。

切換正確的地區(qū)之后點(diǎn)擊 “Add to Slask”將會出現(xiàn)以下界面，然后點(diǎn)擊“允許”按鈕

?4.開通高級功能

回到工作區(qū)主界面，在左側(cè)中會自動出現(xiàn)Claude應(yīng)用，此時(shí)跟Claude聊天會發(fā)現(xiàn)它是不會回復(fù)任何消息的

?然后點(diǎn)擊左側(cè)菜單【更多】-【Slack Connect】

?接著點(diǎn)擊“創(chuàng)建頻道”，如下圖：

?注意：若出現(xiàn)以下界面，沒有“開始免費(fèi)試用”的按鈕，建議重新創(chuàng)建一個(gè)工作區(qū)（從第二步開始重新來一遍）

?正常界面如下圖，點(diǎn)擊“開始免費(fèi)試用”按鈕，這里不需要輸入任何的信用卡等的信息

?創(chuàng)建一個(gè)頻道，隨便輸入一個(gè)名稱，然后點(diǎn)擊“下一步”

?完成后會在左側(cè)菜單中出現(xiàn)剛才新建的頻道，如下圖：

?接下來，我們?yōu)檫@個(gè)頻道添加Claude應(yīng)用

?然后，選擇剛剛創(chuàng)建的頻道

?完成之后，在左側(cè)菜單中，選擇我們剛剛創(chuàng)建的頻道，@Claude 發(fā)送任意消息，首次@會觸發(fā)一個(gè)申請，點(diǎn)一下“Agree”即可

?完成以上操作后，就相當(dāng)于擁有了一個(gè)跟ChatGPT一樣聰明的人工智能AI助手。同時(shí)也可以在Slack內(nèi)通過@Claude的方式跟他進(jìn)行對話，如下圖：

?5.獲取Token和授權(quán)

進(jìn)入Slack API官網(wǎng)，地址：https://api.slack.com/，然后在頂部右上角的“Your apps ”處點(diǎn)擊“Create your first app”，如下圖：

?然后進(jìn)入界面后，點(diǎn)擊“Create an App”，接著選擇“From scratch”

?然后輸入“App Name”，選擇前面創(chuàng)建的工作空間，再點(diǎn)擊“Create App”

?創(chuàng)建成功之后，在左側(cè)的菜單中找到【OAuth & Permissions】，然后在頁面中間往下滑找到【User Token Scopes】，點(diǎn)擊"Add an OAuth Scopes"按鈕，依次搜索添加以下權(quán)限：

channels:history
channels:read
channels:write
groups:history
groups:read
groups:write
chat:write
im:history
im:write
mpim:history
mpim:write

?一共11個(gè)權(quán)限，添加完成之后?；氐巾敳俊綩Auth Tokens for Your Workspace】欄，點(diǎn)擊【Install to Workspace】，然后確認(rèn)授權(quán)即可

?至此，便拿到了App的Token，將其復(fù)制出來（后面有用）

?接著，回到工作區(qū)，點(diǎn)擊左側(cè)菜單中的【Claude】，獲取Claude ID，如下圖：

?三、在Laf中接入Claude

登錄Laf云開發(fā)平臺?https://laf.dev/，在應(yīng)用列表中選擇一個(gè)應(yīng)用后點(diǎn)擊【開發(fā)】按鈕，進(jìn)入 Laf 應(yīng)用開發(fā) IDE

?1. 添加NPM依賴

點(diǎn)擊左下角【NPM依賴】處的“+”按鈕，在彈框中搜索“claude-api-slack”，選中第一個(gè)后再點(diǎn)擊“保存并重啟”，等待3秒左右依賴會添加完成

?2. 添加函數(shù)

點(diǎn)擊左上角【函數(shù)列表】處的“+”按鈕，在彈框中輸入函數(shù)名（比如：claude-func），其他默認(rèn)，完成后點(diǎn)擊“確認(rèn)”按鈕，等待3秒左右函數(shù)會添加完成

?3.云函數(shù)完整代碼

云函數(shù)“claude-func”的完整代碼如下：

import cloud from '@lafjs/cloud'

export default async function (ctx: FunctionContext) {
  // 接收一個(gè)question，和一個(gè)可選的上下文id：conversationId
  const { question, conversationId } = ctx.body;
  //參數(shù)校驗(yàn)
  if (!question) {
    return resultData(-1, '參數(shù)question不能為空！');
  }
  return await askCluadeAPi(question, conversationId);
}

async function askCluadeAPi(question, conversationId) {
  // slack應(yīng)用的token
  const token = 'xxx-xxxxxx';
  // claude的ID
  const bot = 'xxx';
  // 注意，這里是頻道名稱，不是頻道id，開頭不用加#
  const chatId = 'channel_name';

  try {
    // 初始化claude
    const { Authenticator } = await import('claude-api-slack');

    // 通過緩存保存客戶端，可以避免每次提問都是在新會話
    let claudeClient = cloud.shared.get('claudeClient');
    if (!claudeClient) {
      claudeClient = new Authenticator(token, bot);
      cloud.shared.set('claudeClient', claudeClient);
    }
    // 創(chuàng)建頻道并返回房間ID：channel
    const channel = await claudeClient.newChannel(chatId);

    let result;
    if (conversationId) {
      result = await claudeClient.sendMessage({
        text: question,
        channel,
        conversationId,
        onMessage: (originalMessage) => {
          console.log("loading", originalMessage);
        }
      });
    } else {
      result = await claudeClient.sendMessage({
        text: question,
        channel,
        onMessage: (originalMessage) => {
          // console.log("loading", originalMessage)
          console.log("loading", originalMessage);
        }
      });
    }
    console.log("success", result);
    let data = {
      answer: result.text,
      conversationId: result.conversationId
    };
    return resultData(0, '成功！', data);
  }
  catch (e) {
    console.log('出現(xiàn)異常', e.message);
    return resultData(-1, '出現(xiàn)異常：' + e.message);
  }
}

//返回結(jié)果數(shù)據(jù)
async function resultData(code = -1, msg = '', data = null) {
  return { code, msg, data }
}

點(diǎn)擊發(fā)布后使用Apipost調(diào)用結(jié)果如下：

?四、前端整合

前端技術(shù)棧：vue + element plus

1.創(chuàng)建vue項(xiàng)目

這里使用vue腳手架創(chuàng)建項(xiàng)目，運(yùn)行以下命令來創(chuàng)建一個(gè)新項(xiàng)目：

vue create hello-world

2.安裝element plus依賴并引入

建議使用包管理器（如 NPM、Yarn 或 pnpm）安裝 Element Plus

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

官網(wǎng)：https://element-plus.gitee.io/zh-CN/guide/installation.html?

安裝完成后在main.js中引入組件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入element-plus
import ElementPlus from 'element-plus'
import * as ElIcons from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'

const app = createApp(App)
for (const name in ElIcons) {
    app.component(name, ElIcons[name]);
}
app.use(ElementPlus, { locale })
app.use(store)
app.use(router)
app.mount('#app')

3.代碼實(shí)現(xiàn)

修改“vue.config.js”文件中的配置，其中“target”為Laf接口訪問前綴

module.exports = {
  transpileDependencies: true,
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
      proxy: {
          '/api': {
              target: 'https://gghfpp.laf.dev',
              changeOrigin: true,
              ws: false,
              pathRewrite: {
                  '^/api': ''
              }
          }
      }
  }
}

接著，完成頁面布局和邏輯業(yè)務(wù)實(shí)現(xiàn)，以“home.vue”為例，完整代碼如下：

<template>
  <div class="page">
    <el-container>
      <el-header ref="elHeader">
        <p>歡迎體驗(yàn)Claude AI~</p>
      </el-header>
      <el-main :style="{ height: scrollerHeight + 'px' }">
        <el-scrollbar class="msg-list" ref="elScrollbar">
          <div ref="divScroll">
            <el-row v-for="(item, key) in msgList" :key="key" class="msg-item">
              <el-col>
                <div :class="item.type == 2 ? 'time t1' : 'time t2'">{{ item.time }}</div>
                <div class="content">
                  <img v-if="item.type == 1" class="img_1" src="../assets/images/ic_claude.png" />
                  <el-card :style="{ 'margin-left': (item.type == 2 ? 'auto' : '0') }">
                    <div class="txt" v-html="item.content"></div>
                  </el-card>
                  <img v-if="item.type == 2" class="img_2" src="../assets/images/me.png" />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-scrollbar>
      </el-main>
      <el-footer ref="elFooter">
        <el-input v-model="queryInfo.prompt" placeholder="請輸入消息..." clearable size="large" :disabled="isDisabled">
          <template #append>
            <el-button type="primary" :disabled="isDisabled" @click="sendMessage()">
              <el-icon>
                <Position />
              </el-icon>發(fā)送
            </el-button>
          </template>
        </el-input>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import topBar from '@/components/topBar.vue'

var _this;
export default {
  name: 'home',
  components: {
    topBar
  },
  data() {
    return {
      // 容器高度初始化為0
      scrollerHeight: 0,
      // 查詢參數(shù)信息
      queryInfo: {
        conversationId: null,
        prompt: null,
        question: null
      },
      // 信息集合
      msgList: [],
      msgIndex: 0,
      isDisabled: false
    }
  },
  created() {
    _this = this;
    _this.queryInfo.conversationId = Math.ceil(Math.random() * 1000000000000);
  },
  mounted: function () {
    _this.calculateHeight();

    // 當(dāng)瀏覽器窗口大小發(fā)生變化時(shí)，重新計(jì)算容器高度
    window.addEventListener('resize', () => {
      _this.calculateHeight();
    });
  },
  methods: {
    // 計(jì)算容器高度
    calculateHeight() {
      // 獲取頂部元素
      let elHeader = _this.$refs.elHeader;
      // 獲取底部元素
      let elFooter = _this.$refs.elFooter;
      if (elHeader && elFooter) {
        _this.scrollerHeight = document.documentElement.clientHeight - elHeader.$el.offsetHeight - elFooter.$el.offsetHeight - 1;
      }
    },
    //發(fā)送消息
    sendMessage() {
      const _prompt = _this.queryInfo.prompt;
      if (!_prompt) {
        _this.$message.toast({
          message: '請輸入消息！'
        });
        return;
      }

      _this.queryInfo.question = _prompt;
      _this.queryInfo.prompt = '';
      _this.insertMsg(2, _prompt);
      _this.isDisabled = true;

      //延遲0.5秒執(zhí)行
      setTimeout(function () {
        _this.insertMsg(1, '??機(jī)器人正在思考??中...');
      }, 500);

      //開始計(jì)時(shí)
      let seconds = 0;
      let timer = setInterval(function () {
        seconds++;
        _this.msgList[_this.msgList.length - 1].content = '??機(jī)器人正在思考??中...' + seconds + ' 秒';
      }, 1000);

      _this.sendRequest(timer);
    },
    //發(fā)起請求
    sendRequest(timer) {
      _this.$requests
        .post("/api/claude-func", _this.queryInfo)
        .then((res) => {
          _this.isDisabled = false;
          //關(guān)閉計(jì)時(shí)
          clearInterval(timer);
          console.log('請求結(jié)果', res);
          if (res != null) {
            // _this.$message.toast({
            //   message: res.msg,
            //   type: "success",
            // });

            if (res.data) {
              let answer = res.data.answer.replaceAll(',', '，').replaceAll(':', '：').replaceAll('!', '！').replaceAll(/\n\n/g, '<br>').replaceAll(/\n/g, '<br>');
              // _this.insertMsg(1, answer);
              _this.msgList[_this.msgList.length - 1].content = '';

              //實(shí)現(xiàn)打字機(jī)效果
              let index = 0;
              let _timer = setInterval(function () {
                if (answer.length < index) {
                  clearInterval(_timer);
                }

                let str;
                //遇到<br>時(shí)自動換行
                if ((index + 4) <= answer.length && answer.substr(index, 4) == '<br>') {
                  str = answer.substr(index, 4);
                  index = index + 4;
                }
                else {
                  str = answer.substr(index, 1);
                  index++;
                }
                _this.msgList[_this.msgList.length - 1].content += str;

                //實(shí)現(xiàn)自動滾動
                _this.autoScroll();
              }, 100);
            }
          }
        });
    },
    // 插入會話
    insertMsg(type, content) {
      _this.msgIndex = _this.msgIndex + 1;
      _this.msgList.push({
        id: _this.msgIndex,
        type: type || 0,//類型 1-機(jī)器人，2-自己
        content: content || '',
        time: _this.$date.fmtDateTime(null, 3)
      });
    },
    //自動滾動
    autoScroll() {
      _this.$nextTick(() => {
        let divScroll = _this.$refs.divScroll;
        let elScrollbar = _this.$refs.elScrollbar;
        if (divScroll.offsetHeight > elScrollbar.$el.offsetHeight) {
          elScrollbar.setScrollTop(divScroll.offsetHeight - elScrollbar.$el.offsetHeight);
        }
      });
    }
  }
}
</script>

<style lang="scss">
.page {
  .el-header {
    line-height: 20px;
    text-align: left;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
    height: auto;
    padding: 8px 15px;

    p {
      font-size: 14px;
      color: #303133;
    }

    .tips {
      color: red;
    }
  }

  .el-main {
    padding: 12px 15px;

    .msg-list {
      .msg-item:last-child {
        margin-bottom: 0;
      }

      .msg-item {
        margin-bottom: 15px;
        text-align: left;

        .content {
          display: flex;

        }

        .img_1 {
          width: 36px;
          height: 36px;
          margin-right: 8px;
        }

        .img_2 {
          width: 36px;
          height: 36px;
          margin-left: 8px;
        }

        .el-card__body {
          padding: 8px 15px;
          font-size: 14px;
          color: #303133;
          min-width: 130px;
        }

        .time {
          margin-bottom: 5px;
          color: #909399;
          font-size: 12px;
        }

        .t1 {
          text-align: right;
          margin-right: 45px;
        }

        .t2 {
          margin-left: 45px;
        }
      }
    }
  }

  .el-footer {
    line-height: 60px;
    background-color: #ecf5ff;
    color: var(--el-text-color-primary);

    .el-input-group__append {
      background-color: #409EFF;
      color: #ffffff;
      box-shadow: none;
    }
  }
}
</style>

說明：post請求時(shí)，第一個(gè)url參數(shù)需要使用自己在Laf中創(chuàng)建的云函數(shù)的名稱

1）內(nèi)容輸出時(shí)實(shí)現(xiàn)打字機(jī)效果，這里采用了定時(shí)器的方式，每隔100毫秒將后端返回的內(nèi)容拆分后逐個(gè)進(jìn)行追加，核心代碼如下：

//實(shí)現(xiàn)打字機(jī)效果
let index = 0;
let _timer = setInterval(function () {
  if (answer.length < index) {
    clearInterval(_timer);
  }
  let str;
  //遇到<br>時(shí)自動換行
  if ((index + 4) <= answer.length && answer.substr(index, 4) == '<br>') {
    str = answer.substr(index, 4);
    index = index + 4;
  }
  else {
    str = answer.substr(index, 1);
    index++;
  }
  _this.msgList[_this.msgList.length - 1].content += str;
  //實(shí)現(xiàn)自動滾動
  _this.autoScroll();
}, 100);

2）el-scrollbar實(shí)現(xiàn)自動滾動到最底部，官網(wǎng)element plus文檔上說可以使用Infinite Scroll無限滾動，但是并沒有自動滾動到底部的設(shè)置選項(xiàng)。

實(shí)現(xiàn)思路：首先在el-scrollbar滾動視圖組件內(nèi)增加加一層div，然后再在內(nèi)容變更時(shí)實(shí)現(xiàn)自動滾動到底部的處理方法autoScroll()，核心代碼如下：

<el-scrollbar class="msg-list" ref="elScrollbar">
  <div ref="divScroll">
    <el-row v-for="(item, key) in msgList" :key="key" class="msg-item">
      <el-col>
        <div :class="item.type == 2 ? 'time t1' : 'time t2'">{{ item.time }}</div>
        <div class="content">
          <img v-if="item.type == 1" class="img_1" src="../assets/images/ic_claude.png" />
          <el-card :style="{ 'margin-left': (item.type == 2 ? 'auto' : '0') }">
            <div class="txt" v-html="item.content"></div>
          </el-card>
          <img v-if="item.type == 2" class="img_2" src="../assets/images/me.png" />
        </div>
      </el-col>
    </el-row>
  </div>
</el-scrollbar>

//自動滾動
autoScroll() {
  _this.$nextTick(() => {
    let divScroll = _this.$refs.divScroll;
    let elScrollbar = _this.$refs.elScrollbar;
    if (divScroll.offsetHeight > elScrollbar.$el.offsetHeight) {
      elScrollbar.setScrollTop(divScroll.offsetHeight - elScrollbar.$el.offsetHeight);
    }
  });
}

在src目錄下創(chuàng)建utils文件夾，用于存放以上關(guān)聯(lián)的js，具體代碼如下：

日期格式化（date.js）

//時(shí)間處理
const date = {
    /**
     * 
     * @param {時(shí)間} dateTime 
     * @param {類型} type 默認(rèn)：年月日
     * type=1 年-月-日
     * type=2 年.月.日
     * type=3 年-月-日 時(shí):分:秒
     * type=4 年.月.日 時(shí):分:秒
     * @returns 
     */
    fmtDateTime(dateTime, type) {
        if (dateTime == '' || dateTime == null) {
            dateTime = new Date();
        } else {
            // dateTime = dateTime.substr(0, 4) + "/" + dateTime.substr(5, 2) + "/" + dateTime.substr(8, 2) + " " + dateTime.substr(11, 8);
            dateTime = new Date(dateTime);
        }

        var y = dateTime.getFullYear();
        var m = dateTime.getMonth() + 1;
        var d = dateTime.getDate();
        var h = dateTime.getHours() > 9 ? dateTime.getHours().toString() : '0' + dateTime.getHours();
        var mm = dateTime.getMinutes() > 9 ? dateTime.getMinutes().toString() : '0' + dateTime.getMinutes();
        var ss = dateTime.getSeconds() > 9 ? dateTime.getSeconds().toString() : '0' + dateTime.getSeconds();

        if (type === 1) {
            return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
        }
        else if (type === 2) {
            return y + '.' + (m < 10 ? ('0' + m) : m) + '.' + (d < 10 ? ('0' + d) : d);
        }
        else if (type === 3) {
            return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + " " + h + ":" + mm + ":" + ss;
        }
        else if (type === 4) {
            return y + '.' + (m < 10 ? ('0' + m) : m) + '.' + (d < 10 ? ('0' + d) : d) + " " + h + ":" + mm + ":" + ss;
        }
        return y + '年' + (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日';
    }
}

export default date

消息彈框提示（message.js）

import { ElMessageBox, ElMessage } from "element-plus";

const message = {
    //詢問框
    confirm(obj) {
        var message = obj.message || '確定執(zhí)行此操作嗎？'
        var title = obj.title || '溫馨提示'
        return ElMessageBox.confirm(message, title, {
            type: 'warning',//success info warning error
            showCancelButton: obj.showCancelButton || true,
            cancelButtonText: obj.cancelButtonText || '取消',
            confirmButtonText: obj.confirmButtonText || '確定',
        }).then(obj.success || function () {

        }).catch(obj.fail || function () {

        });
    },
    //信息提示
    toast(obj) {
        return ElMessage({
            message: obj.message || 'this is a message.',
            type: obj.type || 'warning',//success warning info error
            duration: obj.duration || 3000,
            showClose: obj.showClose || false
        });
    }
}

export default message

http請求（requests.js）

import axios from 'axios'
import message from './message';

// 創(chuàng)建 axios 實(shí)例
const requests = axios.create({
    // baseURL: 'http://localhost:8088',
    withCredentials: true,
    headers: {
        // 'Content-Type': 'application/json',
        // 'content-type' : 'application/x-www-form-urlencoded',
        // 'auth': 'test'
    },
    timeout: 30 * 1000 // 請求超時(shí)時(shí)間 30秒
})

// 錯(cuò)誤處理函數(shù)
const err = (error) => {
    if (error.response) {
        const data = error.response.data;
        if (error.response.status === 403) {
            message.toast({
                message: data.message || data.msg
            });
        }
        if (error.response.status === 401) {
            message.toast({
                type: 'warning',
                message: '你沒有權(quán)限。'
            });
        }
    }
    return Promise.reject(error)
}

// requests interceptor(請求攔截器)
requests.interceptors.request.use(config => {
    const token = localStorage.getItem('token')
    if (token) {
        config.headers['auth'] = token // 讓每個(gè)請求攜帶自定義 token
    }
    return config
}, err)

// requests interceptor（接收攔截器）
requests.interceptors.response.use((response) => {
    const res = response.data;
    if (res.code == 0) {
        return Promise.resolve(res).catch((e) => { });
    } else {
        message.toast({
            message: res.msg
        });

        return Promise.reject(res).catch((e) => { });
    }
}, err)

export default {
    requests
}

同時(shí)，需要修改“main.js”，進(jìn)行引入，配置全局變量

import message from './utils/message'
import requests from './utils/requests'
import date from './utils/date'

//配置全局屬性
app.config.globalProperties.$requests = requests.requests
app.config.globalProperties.$message = message
app.config.globalProperties.$date = date

“App.vue”頁面中樣式如下：

<template>
  <router-view />
</template>

<style lang="scss">
body {
  padding: 0;
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

p {
  margin: 0;
  padding: 0;
}

.el-message{
  width: max-content;
}
</style>

以為全部完成后，使用命令npm run serve運(yùn)行項(xiàng)目，界面效果如下：

?在線體驗(yàn)地址：http://claude.jhcrs.cn/?文章來源地址http://www.zghlxwxcb.cn/news/detail-842537.html

到了這里，關(guān)于新手小白如何使用Laf免費(fèi)接入Claude，并快速擁有一個(gè)屬于自己的AI助手的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！