feat: add memorize vocabulary feature

marmot-z · Sep 22, 2024 · 0586ef1 · 0586ef1
1 parent 0ae34ae
commit 0586ef1
Show file tree

Hide file tree

Showing 19 changed files with 1,070 additions and 556 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,8 +1,8 @@
 {
     "name": "百词斩助手",
-    "description": "百词斩网页助手，支持取词翻译、收藏单词等操作（可同步至百词斩APP中）",
+    "description": "百词斩网页助手，支持取词翻译、收藏单词、背单词等操作（可同步至百词斩APP中）",
     "author": "zhangxunwei",
-    "version": "1.14",
+    "version": "1.15",
     "manifest_version": 3,
     "options_page": "src/options.html",
     "background": {

diff --git a/src/css/option.css b/src/css/option.css
@@ -18,7 +18,7 @@
 }
 
 .section {
-    max-width: 450px;
+    /*max-width: 450px;*/
     margin-bottom: 1rem;
     border: 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);

diff --git a/src/css/review.css → src/css/study.css b/src/css/review.css → src/css/study.css
@@ -1,22 +1,19 @@
-.reviewer-container {
-    width: 400px;
-    height: 560px;
-    scroll-behavior: unset;
-    overflow: hidden;
+#body {
+    overflow: visible;
+    height: 90%;
     background-color: rgb(248 248 248);
 }
 
-.head {
-    height: 4%;
-    padding-left: 5px;
-    padding-top: 5px;
+#head {
     font-size: 15px;
     color: #888787;
+    background-color: rgb(248 248 248);
+    border-bottom: 1px dashed #888787;
 }
 
 .body {
     flex-direction: column; 
-    height: 40%; 
+    height: 38%;
     padding: 0 20px;
 }
 
@@ -26,7 +23,7 @@
     font-size: medium;
 }
 
-.body > .transSentence {
+.body > .hint {
     cursor: pointer;
     color: #888787;
     font-size: medium;
@@ -45,15 +42,11 @@
 
 /* 容器的基础样式 */
 .image-container {
-    position: relative;
-    width: 185px; /* 根据需要调整大小 */
-    margin-left: 10px;
-    margin-top: 10px;
 }
 
 /* 图片的样式 */
 .image-container img {
-    width: 185px;
+    width: 100%;
     cursor: pointer;
 }
 
@@ -74,7 +67,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-    max-width: 160px;
+    max-width: 80%;
 }
 
 .overlay-sign {
@@ -87,10 +80,11 @@
 
 .text-options {
     position: relative;
-    margin: 10px 5px 5px 0px;
+    margin: 10px 5% 10px 5%;
     border-radius: 3px;
     background-color: white;
-    height: 60px;
+    width: 90%;
+    height: 100px;
     justify-items: center;
     align-content: center;
     padding: 0 20px;
@@ -116,7 +110,32 @@
 
 .word-brief-info {
     text-overflow: ellipsis;
-    white-space: nowrap;
+    white-space: normal;
     overflow: hidden;
     border-bottom: 1px dashed;
+}
+
+#tail {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: hsl(214.84deg 100% 93.92%);
+    cursor: pointer;
+}
+
+#tail > #continue-btn {
+    font-size: medium;
+    color: #007bff;
+}
+
+.word-list {
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    padding: 10px 10px 0 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 }
diff --git a/src/js/api.js b/src/js/api.js
@@ -104,7 +104,7 @@
         let len = 0, characterSize = 0;
 
         for (let c of Array.from(phrase)) {
-            if (c == ' ') continue;
+            if (c === ' ') continue;
 
             len++;
 
@@ -246,6 +246,81 @@
         });
     }
 
+    function getSelectBookPlanInfo() {
+        return loadRequestOptions().then(([host, port, accessToken]) => {
+            const url = `http://${host}:${port}/selectBookPlanInfo`;
+
+            return sendRequest({
+                url,
+                method: 'GET',
+                headers: {'access_token': accessToken}
+            });
+        });
+    }
+
+    function getAllBookInfo() {
+        return loadRequestOptions().then(([host, port, accessToken]) => {
+            const url = `http://${host}:${port}/booksInfo`;
+
+            return sendRequest({
+                url,
+                method: 'GET',
+                headers: {'access_token': accessToken}
+            });
+        });
+    }
+
+    function getRoadmaps(bookId) {
+        return loadRequestOptions().then(([host, port, accessToken]) => {
+            const url = `http://${host}:${port}/roadmap?bookId=${bookId}`;
+
+            return sendRequest({
+                url,
+                method: 'GET',
+                headers: {'access_token': accessToken}
+            });
+        });
+    }
+
+    function getLearnedWords(bookId) {
+        return loadRequestOptions().then(([host, port, accessToken]) => {
+            const url = `http://${host}:${port}/learnedWords?bookId=${bookId}`;
+
+            return sendRequest({
+                url,
+                method: 'GET',
+                headers: {'access_token': accessToken}
+            });
+        });
+    }
+
+    function updateDoneData(words) {
+        let records = words.map(w => {
+            return  {
+                word_topic_id: w.topicId,
+                done_times: w.doneTimes,
+                wrong_times: w.wrongTimes,
+            };
+        })
+
+        return loadRequestOptions().then(([host, port, accessToken]) => {
+            const url = `http://${host}:${port}/updateDoneData`;
+
+            return sendRequest({
+                url,
+                method: 'POST',
+                headers: {
+                    'access_token': accessToken,
+                    'content-type': 'application/json',
+                },
+                body: {
+                    doneRecords: records,
+                    wordLevelId: words[0]?.wordLevelId
+                }
+            });
+        });
+    }
+
     function getWordbookId() {
         return storageModule.get('bookId').then(bookId => bookId || 0);
     }
@@ -268,7 +343,7 @@
                         body: options.body ? JSON.stringify(options.body) : undefined
                     })
                     .then(response => response.json())
-                    .then(responseJson => responseJson.code == 200 ? 
+                    .then(responseJson => responseJson.code === 200 ?
                             resolve(responseJson.data) : 
                             reject(new Error(responseJson.message))
                     )
@@ -281,7 +356,8 @@
         getBooks, defaultHost, defaultPort, loginWithEmail,
         searchWord, getWordDetail, collectWord, translate,
         cancelCollectWord, getBookWords, getWordInfo, 
-        getCalendarDailyInfo, getLatestVersion
+        getCalendarDailyInfo, getLatestVersion, getSelectBookPlanInfo,
+        getAllBookInfo, getRoadmaps, getLearnedWords, updateDoneData
     };
 
     global.apiModule = exports;

diff --git a/src/js/event.js b/src/js/event.js
@@ -25,5 +25,15 @@
      */
     const WORD_DETAIL = 'bcz.wordDetail';
 
-    window.events = {AUTHED, UNAUTHED, BOOKS_LOADED, WORD_DETAIL};
+    /**
+     * 开启背单词
+     */
+    const ENABLE_STUDY = 'bcz.enableStudy';
+
+    /**
+     * 关闭背单词
+     */
+    const DISABLE_STUDY = 'bcz.disableStudy';
+
+    window.events = {AUTHED, UNAUTHED, BOOKS_LOADED, WORD_DETAIL, ENABLE_STUDY, DISABLE_STUDY};
 } (this));
diff --git a/src/js/options.js b/src/js/options.js
@@ -3,18 +3,6 @@
 
     const $doc = $(document);
 
-    function initWechatQrCode() {
-        storageModule.get(['host', 'port'])
-            .then(([host, port]) => {
-                $('#qrCodeImg').webuiPopover({
-                    placement: 'left',
-                    type: 'html',
-                    trigger: 'hover',
-                    content: `<img src="http://${host}:${port}/qrcode.jpg" style="width: 250px; height: 375px;"/>`
-                });
-            });
-    }
-
     async function checkUpgrade() {
         let latestVersion = await apiModule.getLatestVersion();
         let currentVersion = window.__baicizhanHelper__.version;
@@ -31,7 +19,7 @@
         loginModule.init();
         settingModule.init();
         wordbookModule.init();
-        initWechatQrCode();
+        studyModule.init();
         checkUpgrade();
 
         let accessToken = await storageModule.get('accessToken');

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -43,7 +43,7 @@
             $doc.trigger(events.WORD_DETAIL, [this]);
         });
         $el.on('keypress', function(e) {
-            if (e.keyCode == 13) $doc.trigger(events.WORD_DETAIL, [this]);        
+            if (e.keyCode === 13) $doc.trigger(events.WORD_DETAIL, [this]);
         });
     }
 
@@ -73,8 +73,7 @@
 
     function init() {
         initNav();
-        initSearch();  
-        initReview();
+        initSearch();
     }
 
     function initSearch() {