🎈 perf(app): ui update & recording

s045pd · s045pd · commit e1f32377c5b4 · 2024-12-25T15:06:22.000+08:00
diff --git a/api-server.js b/api-server.js
@@ -9,6 +9,7 @@ const database = require("./database.js");
 const Users = database.Users;
 const Bots = database.Bots;
 const Settings = database.Settings;
+const BotRecording = database.BotRecording;
 const sequelize = database.sequelize;
 const fs = require("fs");
 const { promisify } = require("util");
@@ -305,18 +306,16 @@ async function get_api_server(proxy_utils) {
   // "switch_config",
   // "data_config"
 
-const FIELD_DEFAULT = {
-  switch_config: BOT_DEFAULT_SWITCH_CONFIG,
-  data_config: BOT_DEFAULT_DATA_CONFIG,
-  recording: [],
-  tabs: [],
-  bookmarks: [],
-  history: [],
-  cookies: [],
-  downloads: [],
-};
-
-
+  const FIELD_DEFAULT = {
+    switch_config: BOT_DEFAULT_SWITCH_CONFIG,
+    data_config: BOT_DEFAULT_DATA_CONFIG,
+    recording: [],
+    tabs: [],
+    bookmarks: [],
+    history: [],
+    cookies: [],
+    downloads: [],
+  };
 
   app.get(API_BASE_PATH + "/fields", async (req, res) => {
     const name = req.query.field;
@@ -337,6 +336,93 @@ const FIELD_DEFAULT = {
       .end();
   });
 
+  app.get(API_BASE_PATH + "/recordings", async (req, res) => {
+    const {
+      id,
+      page = 1,
+      pageSize = 20,
+      startDate,
+      endDate,
+      download,
+    } = req.query;
+    const offset = (page - 1) * pageSize;
+    const needDownload = download === "true";
+
+    const whereClause = {
+      bot: id,
+    };
+
+    if (startDate || endDate) {
+      const dateConditions = {};
+      let hasDate = false;
+      if (startDate) {
+        const parsedStartDate = new Date(startDate);
+        if (!isNaN(parsedStartDate.getTime())) {
+          dateConditions[Op.gte] = parsedStartDate;
+          hasDate = true;
+        }
+      }
+      if (endDate) {
+        const parsedEndDate = new Date(endDate);
+        if (!isNaN(parsedEndDate.getTime())) {
+          dateConditions[Op.lte] = parsedEndDate;
+          hasDate = true;
+        }
+      }
+      if (hasDate) {
+        whereClause.createdAt = dateConditions;
+      }
+    }
+
+    const recordings = await BotRecording.findAll({
+      where: whereClause,
+      attributes: ["createdAt", "recording", "text"],
+      order: [["createdAt", "DESC"]],
+      ...(needDownload
+        ? {}
+        : {
+            offset: offset,
+            limit: parseInt(pageSize),
+          }),
+    });
+
+    if (needDownload) {
+      const filename = `${id}_${Date.now()}.mp3`;
+      await mergeBase64MP3s(
+        recordings.map((rec) => rec.recording.data),
+        filename
+      );
+
+      return res.sendFile(path.join(__dirname, filename), (err) => {
+        if (err) {
+          console.error("Error sending file:", err);
+        }
+        // Clean up the file after sending
+        fs.unlink(path.join(__dirname, filename), (unlinkErr) => {
+          if (unlinkErr) console.error("Error deleting file:", unlinkErr);
+        });
+      });
+    }
+
+    const total = await BotRecording.count({ where: whereClause });
+
+    res
+      .status(200)
+      .json({
+        success: true,
+        result: {
+          recordings,
+          pagination: {
+            total,
+            page: parseInt(page),
+            pageSize: parseInt(pageSize),
+            totalPages: Math.ceil(total / pageSize),
+          },
+        },
+      })
+      .end();
+  });
+
   app.post(API_BASE_PATH + "/mp3", async (req, res) => {
     const bot = await Bots.findOne({
       where: {
diff --git a/database.js b/database.js
@@ -196,6 +196,52 @@ Bots.init(
   }
 );
 
+class BotRecording extends Model {}
+BotRecording.init(
+  {
+    id: {
+      allowNull: false,
+      primaryKey: true,
+      type: Sequelize.UUID,
+      defaultValue: uuid.v4(),
+    },
+    recording: {
+      type: Sequelize.TEXT,
+      allowNull: false,
+      default: "",
+    },
+    bot: {
+      type: Sequelize.UUID,
+      allowNull: false,
+      unique: false,
+      references: {
+        model: "bots",
+        key: "id",
+      },
+    },
+    text: {
+      type: Sequelize.TEXT,
+      allowNull: true,
+      default: "",
+    },
+  },
+  {
+    sequelize,
+    modelName: "bot_recordings",
+    indexes: [
+      {
+        fields: ["bot"],
+        method: "BTREE",
+      },
+    ],
+  }
+);
+
+Bots.hasMany(BotRecording, {
+  foreignKey: "bot",
+  sourceKey: "id",
+});
+
 /*
   Various key/values for settings
 */
@@ -250,7 +296,7 @@ function get_default_user_created_banner(username, password) {
   return `
 ============================================================================
 
- █████╗ ████████╗████████╗███████╗███╗   ██╗████████╗██╗ ██████╗ ███╗   ██╗
+ █████╗ ████████╗████████╗███████╗███╗   ██╗████████╗██╗ ████���█╗ ███╗   ██╗
 ██╔══██╗╚══██╔══╝╚══██╔══╝██╔════╝████╗  ██║╚══██╔══╝██║██╔═══██╗████╗  ██║
 ███████║   ██║      ██║   █████╗  ██╔██╗ ██║   ██║   ██║██║   ██║██╔██╗ ██║
 ██╔══██║   ██║      ██║   ██╔══╝  ██║╚██╗██║   ██║   ██║██║   ██║██║╚██╗██║
@@ -357,6 +403,7 @@ async function database_init() {
 
   await Bots.sync({ force: force });
   await Settings.sync({ force: force });
+  await BotRecording.sync({ force: force });
 
   // Set up configs if they're not already set up.
   console.log(`Checking for configs...`);
@@ -371,4 +418,5 @@ module.exports.sequelize = sequelize;
 module.exports.Users = Users;
 module.exports.Bots = Bots;
 module.exports.Settings = Settings;
+module.exports.BotRecording = BotRecording;
 module.exports.database_init = database_init;
diff --git a/gui/src/components/DataRecording.vue b/gui/src/components/DataRecording.vue
@@ -1,12 +1,33 @@
 <template>
   <div>
+    <b-row class="mb-3">
+      <b-col md="6">
+        <b-form-group label="日期范围">
+          <b-form-datepicker
+            v-model="dateRange.startDate"
+            :max="dateRange.endDate"
+            placeholder="开始日期"
+            class="mb-2"
+          ></b-form-datepicker>
+          <b-form-datepicker
+            v-model="dateRange.endDate"
+            :min="dateRange.startDate"
+            placeholder="结束日期"
+          ></b-form-datepicker>
+        </b-form-group>
+      </b-col>
+      <b-col md="6" class="d-flex align-items-end">
+        <b-button @click="fetchData" variant="primary">查询</b-button>
+        <b-button @click="downloadData" variant="primary">下载</b-button>
+      </b-col>
+    </b-row>
+
     <div style="overflow-x: auto">
       <b-table
         id="recording_table"
         :items="info"
         :fields="recording_fields"
-        :current-page="recording_page"
-        :per-page="recording_page_size"
+        :total-rows="totalRows"
         small
         hover
       >
@@ -24,13 +45,8 @@
       </b-table>
     </div>
     <b-pagination
-      striped
-      hover
-      fixed
-      responsive
-      stacked
       v-model="recording_page"
-      :total-rows="info.length"
+      :total-rows="totalRows"
       :per-page="recording_page_size"
       aria-controls="recording_table"
     ></b-pagination>
@@ -39,7 +55,7 @@
 
 <script>
 import { convertToCurrentTimeZone } from "./common.js";
-import { get_field } from "./utils.js";
+import { get_recordings,api_file_request } from "./utils.js";
 export default {
   name: "DataRecording",
   props: {
@@ -50,14 +66,19 @@ export default {
     useMp3: {
       type: Boolean,
       default: false
-    }
+    },
+   
   },
   data() {
     return {
       info: [],
-      // bot recording
+      totalRows: 0,
       recording_page: 1,
       recording_page_size: 20,
+      dateRange: {
+        startDate: null,
+        endDate: null
+      },
       recording_fields: [
         {
           key: "date",
@@ -67,7 +88,6 @@ export default {
           key: "data",
           label: "数据",
         },
-        
       ],
     };
   },
@@ -76,6 +96,11 @@ export default {
       return this.useMp3 ? 'audio/mp3' : 'audio/mpeg'
     }
   },
+  watch: {
+    recording_page() {
+      this.fetchData();
+    }
+  },
   mounted() {
     this.fetchData();
   },
@@ -95,23 +120,34 @@ export default {
       return isMP3 ? 'audio/mp3' : 'audio/mpeg';
     },
     
-    fetchData() {
-      get_field(this.id, "recording")
-        .then((response) => {
-          this.info = response.map((item) => {
-            const audioType = this.checkAudioType(item.data);
-            return {
-              ...item,
-              audioType,  // 存储检测到的类型
-              data: `data:${audioType};base64,${item.data}`,
-              date: convertToCurrentTimeZone(new Date(item.date))
-            };
-          });
-        })
-        .catch((error) => {
-          console.log(error);
+    async fetchData() {
+      try {
+        const response = await get_recordings({
+          id: this.id,
+          page: this.recording_page,
+          pageSize: this.recording_page_size,
+          startDate: this.dateRange.startDate,
+          endDate: this.dateRange.endDate,
         });
+        this.info = response.recordings.map(item => ({
+          audioType: this.checkAudioType(item.recording),
+          data: `data:${this.checkAudioType(item.recording)};base64,${item.recording}`,
+          date: convertToCurrentTimeZone(new Date(item.createdAt))
+        }));
+        console.log(response,this.info);
+        this.totalRows = response.pagination.total;
+    } catch (error) {
+        console.error('Error fetching recordings:', error);
+      }
     },
+    async downloadData() {
+      await api_file_request("GET", "/recordings", null, {
+        id: this.id,
+        download: true,
+        startDate: this.dateRange.startDate,
+        endDate: this.dateRange.endDate
+      })
+    }
   },
 };
 </script>
diff --git a/gui/src/components/utils.js b/gui/src/components/utils.js
@@ -1,10 +1,11 @@
 const BASE_API_PATH = `${location.origin.toString()}/api/v1`;
 
 // make a request to the api for a file
-export const api_file_request = async (method, path, body) => {
+export const api_file_request = async (method, path, body, params) => {
   var request_options = {
     method: method,
     credentials: "include",
+    params: params,
     mode: "cors",
     cache: "no-cache",
     responseType: "blob",
@@ -87,6 +88,22 @@ export const get_field = async (id, field) => {
   return await api_request("GET", "/fields", { id: id, field: field });
 };
 
+export const get_recordings = async ({
+  id,
+  page,
+  pageSize,
+  startDate,
+  endDate,
+} = {}) => {
+  return await api_request("GET", "/recordings", {
+    id,
+    page,
+    pageSize,
+    startDate,
+    endDate,
+  });
+};
+
 // download the certificate authority
 export const download_ca = async () => {
   window.location = `${BASE_API_PATH}/download_ca`;
diff --git a/server.js b/server.js
