feat:尝试记录用户数据

src/components/AIChatter/AIChatter.vue

@@ -3,7 +3,6 @@
   Author: BaiQi
   Created Date: 2024-6-21
 -->
-<!--TODO: 设置单次ai对话次数：10次-->
 <template>
   <div :class="[{'teacher-view': props.isTeacher},$style.container]">
     <!--大语言模型选择器-->
@@ -235,7 +234,7 @@
     emitter.emit("click-ai-send-button", {
       date: Date.now(),
       userId: store.user.id,
-      message: `第${AICount.value+1}次点击了AI提问按钮`,
+      info: `第${AICount.value+1}次点击了AI提问按钮`,
       eventId: `${store.user.id}_${Date.now()}`,
       type: "AIChatter"
     })
@@ -323,6 +322,10 @@
     console.log(messageList)
   }
 
+  // const recordKeyUp = (event:any) => {
+  //   console.log(event)
+  // }
+
 
 </script>
 

src/components/WordEditor/WordEditor.vue

@@ -20,6 +20,10 @@
   import {ref, watch, onMounted, defineProps, reactive} from 'vue';
   import { ElMessage } from 'element-plus';
   import { DocumentEditor } from '@onlyoffice/document-editor-vue'
+  import emitter from "@/utils/emitter";
+  import {useStore} from "@/store";
+
+  const store = useStore()
 
   interface IProps {
     onValueChange?: (state: boolean) => void;
@@ -138,6 +142,7 @@
     console.log("监听 OnlyOffice组件中的文档状态变化事件", event.data)
     props.onValueChange?.(event.data);
   };
+
 </script>
 
 <script lang="ts">

src/utils/indexedDBUtil.ts

@@ -0,0 +1,118 @@
+// const indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
+const indexedDB = window.indexedDB;
+
+class IndexedDB {
+    private _db: IDBDatabase | null; // 数据库
+    private _transaction: IDBTransaction | null; // 事务
+    private _request: IDBOpenDBRequest | null;
+    private _dbName: string; // 数据库名
+    private _cacheTableName: string; // 表名
+    private _dbversion: number; // 数据库版本
+
+    constructor() {
+        this._db = null;
+        this._transaction = null;
+        this._request = null;
+        this._dbName = "userWritingDB";
+        this._cacheTableName = "userWritingTable";
+        this._dbversion = 1;
+    }
+
+    async initDB(val: string): Promise<Event> {
+        return new Promise<Event>((resolve, reject) => {
+            this._request = indexedDB.open(this._dbName, this._dbversion);
+            // 数据库初始化成功
+            this._request!.onsuccess = (event) => {
+                this._db = this._request!.result;
+                resolve(event);
+            };
+            // 数据库初始化失败
+            this._request!.onerror = (event) => {
+                reject(event);
+            };
+            // 数据库初次创建或更新时会触发
+            this._request!.onupgradeneeded = (event) => {
+                let db = this._request!.result;
+                if (!db.objectStoreNames.contains(this._cacheTableName)) {
+                    db.createObjectStore(this._cacheTableName, {
+                        keyPath: val,
+                    });
+                }
+                resolve(event);
+            };
+        });
+    }
+
+    closeDB() {
+        if (this._db) {
+            this._db.close();
+            console.log(`关闭数据库`);
+        }
+    }
+
+    async addData(params: any): Promise<Event> {
+        return new Promise<Event>((resolve, reject) => {
+            let transaction = this._db!.transaction(this._cacheTableName, "readwrite");
+            let store = transaction.objectStore(this._cacheTableName);
+            let response = store.add(params);
+            // 操作成功
+            response.onsuccess = (event) => {
+                console.log("操作成功");
+                resolve(event);
+            };
+            // 操作失败
+            response.onerror = (event) => {
+                console.log("操作失败");
+                reject(event);
+            };
+        });
+    }
+
+    async getDataByKey(key: any): Promise<any> {
+        return new Promise<any>((resolve, reject) => {
+            let transaction = this._db!.transaction(this._cacheTableName);
+            let objectStore = transaction.objectStore(this._cacheTableName);
+            // 通过主键读取数据
+            let request = objectStore.get(key);
+            // 操作成功
+            request.onsuccess = () => {
+                resolve(request.result);
+            };
+            // 操作失败
+            request.onerror = (event) => {
+                reject(event);
+            };
+        });
+    }
+
+    async clearDB(): Promise<Event> {
+        return new Promise<Event>((resolve, reject) => {
+            let transaction = this._db && this._db.transaction(this._cacheTableName, "readwrite");
+            let store = transaction && transaction.objectStore(this._cacheTableName);
+            let response = store && store.clear();
+            // 操作成功
+            response.onsuccess = (event) => {
+                console.log("清空数据库数据");
+                resolve(event);
+            };
+            // 操作失败
+            response.onerror = (event) => {
+                reject(event);
+            };
+        });
+    }
+
+    async deleteDBAll(): Promise<void> {
+        let deleteRequest = indexedDB.deleteDatabase(this._dbName);
+        return new Promise<void>((resolve, reject) => {
+            deleteRequest.onerror = function (event) {
+                console.log("删除失败");
+            };
+            deleteRequest.onsuccess = function (event) {
+                console.log("删除数据库成功");
+            };
+        });
+    }
+}
+
+export default IndexedDB;

src/views/EditPage/EditPage.vue

@@ -5,7 +5,7 @@
 -->
 <template>
 
-  <div class="my-work">
+  <div class="my-work" >
 
     <div class="my-work-slider">
       <el-button class="back" color="#597D3B" @click="handleBack">&lt;返回</el-button>
@@ -108,6 +108,17 @@
         })
   }
 
+  const handleMouseMove = (event: MouseEvent) => {
+    // console.log(`鼠标位置：x = ${event.clientX}, y = ${event.clientY}`);
+    // indexedDB.addData({
+    //   date: Date.now(),
+    //   userId: store.user.id,
+    //   info: `x = ${event.clientX}, y = ${event.clientY}`,
+    //   eventId: `${store.user.id}_${Date.now()}`,
+    //   type: "MouseMove"
+    // })
+  };
+
   // // 接收word是否修改后未保存，用于决定是否提醒用户
   // emitter.on("is-modified", () => {
   //   isModified.value = true
@@ -130,8 +141,6 @@
     indexedDB.clearDB()
     indexedDB.closeDB()
     indexedDB.deleteDBAll()
-    // emitter.off("click-ai-send-button")
-    // emitter.off('is-modified')
     removeAllEventListeners();
   })
 

src/views/EditPage/index.scss

@@ -23,5 +23,6 @@
     width: 100%;
     flex: 1;
     max-width: 100%;
+
   }
 }

src/views/EditPage/userWritingRecord.ts

@@ -0,0 +1,47 @@
+import emitter from '@/utils/emitter';
+import IndexedDB from '@/utils/indexedDBUtil';
+import { ElMessage } from 'element-plus';
+import {ref} from "vue";
+
+export let isModified = ref(false)
+
+// 处理word区鼠标移动的记录
+export const setupWordMouseMoveListener = (indexedDB: IndexedDB) => {
+    emitter.on("word-mouse-move", (event: any) => {
+        // indexedDB.addData(event)
+        // console.log(event);
+    });
+};
+
+
+// 处理AI对话点击发送按钮事件的监听函数
+export const setupClickAISendButtonListener = (indexedDB: IndexedDB) => {
+    emitter.on("click-ai-send-button", (event: any) => {
+        // indexedDB.addData(event)
+    });
+};
+
+// 处理is-modified事件的监听函数
+export const setupIsModifiedListener = () => {
+    emitter.on("is-modified", () => {
+        isModified.value = true;
+    });
+};
+
+// 可以根据后续需要继续添加更多的事件监听设置函数
+
+// 统一注册所有事件监听的函数
+export const registerAllEventListeners = (indexedDB: IndexedDB) => {
+    // 后续若有其他事件监听，在此处添加调用对应的设置函数即可
+    setupClickAISendButtonListener(indexedDB);
+    setupIsModifiedListener();
+    setupWordMouseMoveListener(indexedDB)
+};
+
+// 统一移除所有事件监听的函数
+export const removeAllEventListeners = () => {
+    // 后续如有更多事件监听，在此处添加移除对应事件的代码
+    emitter.off("click-ai-send-button");
+    emitter.off("is-modified");
+    emitter.off("word-mouse-move");
+};

src/views/Home/component/Edit/index.vue

@@ -141,10 +141,10 @@
   /*
   用于提醒用户作业未保存
    */
-  window.addEventListener('beforeunload', (e) => {
-    e.preventDefault();
-    e.returnValue = '您编辑的信息尚未保存，您确定要离开吗？';
-  });
+  // window.addEventListener('beforeunload', (e) => {
+  //   e.preventDefault();
+  //   e.returnValue = '您编辑的信息尚未保存，您确定要离开吗？';
+  // });
 
 
 </script>