Chatbox.Vue的程式碼解析 from ChatGpt‐4o - 3dw/auto20-next GitHub Wiki

這段程式碼是一個 Vue.js 的元件，用於處理聊天訊息。以下是各部分的詳細解釋：

元件導入和定義

import { defineComponent } from 'vue';
import { onValue, set, ref } from 'firebase/database';
import { db, chatsRef } from '../firebase';
import mix from '../mixins/mix.ts';

export default defineComponent({
  name: 'ChatBox',
  mixins: [mix],
  props: ['uid', 'user', 'photoURL'],
  data() {
    return {
      p: '',
      msg: '',
      key: '閒聊',
      edit: '',
      chats: [],
      read: 0,
      isFull: false,
      isMini: true,
      label: '閒聊',
      labels: ['諮詢', '故障', '找伴', '閒聊']
    };
  },
  watch: {
    label(newL) {
      this.key = newL;
    }
  },
  methods: {
    preview() {
      var o = {
        uid: this.uid,
        n: this.user && this.user.providerData && this.user.providerData[0] ? this.user.providerData[0].displayName : 'Anonymous',
        t: this.msg,
        l: this.label,
        edit: false,
        photoURL: this.photoURL || '',
        time: (new Date()).getTime()
      };
      this.p = o;
    },
    addChat() {
      if (this.user && this.user.providerData) {
        console.log(this.user.providerData[0]);
      } else {
        console.error("User or providerData is undefined");
      }
      var o = {
        uid: this.uid,
        n: this.user && this.user.providerData && this.user.providerData[0] ? this.user.providerData[0].displayName : 'Anonymous',
        t: this.msg,
        l: this.label,
        photoURL: this.photoURL || '',
        time: (new Date()).getTime()
      };
      if (this.msg) {
        const rid = (Math.random() + '').substr(0, 8).replace('.', '');
        this.chats[rid] = o;
        this.msg = '';
        this.p = '';
      }
      set(ref(db, 'chats'), this.chats).then(
        console.log('chats更新成功')
      );
    },
    loginGoogle() {
      this.$emit('loginGoogle');
    },
    fil(list) {
      var k = this.key;
      const ks = Object.keys(list);
      var l = [];
      for (var i = 0; i < ks.length; i++) {
        l.push(list[ks[i]]);
      }
      l = l.filter(function(o) { return (o.t + o.l).indexOf(k) > -1 || !k }).map(function(o) {
        o.edit = false; return o;
      });
      l.sort(function(a, b) {
        return a.time - b.time;
      });
      return l;
    },
    reCount() {
      this.read = this.fil(this.chats).length;
      localStorage.setItem('read', this.read);
    }
  },
  mounted() {
    onValue(chatsRef, (snapshot) => {
      const data = snapshot.val();
      this.chats = data;
    });
    this.read = localStorage.getItem('read') || 0;
    if (this.read === 'undefined') {
      this.read = 0;
    }
  }
});

詳細解釋

1. 導入依賴模組：

   • defineComponent：Vue.js 的組件定義函數。
   • onValue, set, ref：從 Firebase 資料庫模組中導入的函數，用於監聽數據變化、設定數據和引用資料庫路徑。
   • db, chatsRef：從 firebase 配置中導入的資料庫和聊天引用。
   • mix：從 mixins/mix.ts 導入的混入，可能包含共享的邏輯或屬性。

2. 定義元件：

   • name：元件名稱為 ChatBox。
   • mixins：使用混入 mix。
   • props：從父元件傳入的屬性，包括 uid、user 和 photoURL。
   • data：元件的本地狀態，包括多個變量如 p、msg、key 等。

3. 監聽屬性變化：

   • 當 label 變化時，更新 key 的值。

4. 方法：

   • preview：創建一個消息預覽對象 o，包含用戶 ID、名稱、消息內容、標籤等，並將其設置為 p。
   • addChat：添加新的聊天消息至 chats 陣列，並將其更新至 Firebase 資料庫。
   • loginGoogle：觸發 loginGoogle 事件，應該是調用父元件中的 Google 登錄方法。
   • fil：過濾和排序聊天消息，返回過濾和排序後的消息列表。
   • reCount：重新計算未讀消息數量，並將其存儲在本地儲存中。

5. 元件掛載時：

   • 使用 onValue 監聽 chatsRef 的數據變化，並更新 chats 狀態。
   • 從本地儲存中獲取未讀消息數量，並初始化 read。

這段程式碼展示了一個完整的聊天功能的實現，從消息的預覽、添加到資料庫的更新，以及未讀消息的計算。這些功能結合在一起，形成了一個功能完整的聊天元件。