feat: 修改设置和记录数据库

027xiguapi · Feb 26, 2024 · 39b715e · 39b715e
1 parent 429286f
commit 39b715e
Show file tree

Hide file tree

Showing 15 changed files with 113 additions and 3,600 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@ lib
 dist-electron
 release
 *.local
+dev-dist
 
 stats.html
 

diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -1,5 +1,9 @@
 # @pear-rec/web
 
+## 1.4.2
+
+feat: 修改设置和记录数据库
+
 ## 1.4.1
 
 feat: 增加 PWA

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@pear-rec/web",
   "private": true,
-  "version": "1.4.1",
+  "version": "1.4.2",
   "scripts": {
     "dev": "vite",
     "build": "rimraf dist && tsc && vite build",
@@ -83,4 +83,4 @@
     "lib": "lib"
   },
   "description": ""
-}
+}
diff --git a/packages/web/src/components/records/RecordsContent.tsx b/packages/web/src/components/records/RecordsContent.tsx
@@ -1,19 +1,17 @@
-import React, { useState, useEffect, forwardRef } from 'react';
-import { Layout, Button, List, Skeleton, Avatar } from 'antd';
 import {
-  ScissorOutlined,
   AudioOutlined,
   CameraOutlined,
+  PictureOutlined,
   VideoCameraOutlined,
 } from '@ant-design/icons';
+import { Avatar, Button, Layout, List, Skeleton } from 'antd';
 import dayjs from 'dayjs';
-import { useApi } from '../../api';
-import { useRecordApi } from '../../api/record';
+import { saveAs } from 'file-saver';
+import { forwardRef, useEffect, useState } from 'react';
+import { db } from '../../db';
 import { eventEmitter } from '../../util/bus';
 
 const { Content } = Layout;
-const recordApi = useRecordApi();
-const api = useApi();
 
 const RecordAudioCard = forwardRef(() => {
   const [initLoading, setInitLoading] = useState(true);
@@ -56,13 +54,11 @@ const RecordAudioCard = forwardRef(() => {
     data.map((item) => {
       ids.push(item.id);
     });
-    const res = (await recordApi.deleteListRecord(ids)) as any;
-    if (res.code == 0) {
-      const newData = [];
-      setData(newData);
-      setList(newData);
-      window.dispatchEvent(new Event('resize'));
-    }
+    await db.records.bulkDelete(ids);
+    const newData = [];
+    setData(newData);
+    setList(newData);
+    window.dispatchEvent(new Event('resize'));
     setIsDelete(false);
   }
 
@@ -71,30 +67,44 @@ const RecordAudioCard = forwardRef(() => {
   }
 
   async function getRecords() {
-    const res = (await recordApi.getRecords({ pageSize, pageNumber })) as any;
-    if (res.code == 0) {
+    let records = await db.records
+      .orderBy('id')
+      .offset((pageNumber - 1) * pageSize)
+      .limit(pageSize)
+      .toArray();
+    if (records.length >= 0) {
       setInitLoading(false);
-      setData(res.data);
-      setList(res.data);
+      setData(records);
+      setList(records);
       setPageNumber(pageNumber + 1);
-      setIsMore(res.data.length < pageSize ? false : true);
+      setIsMore(records.length < pageSize ? false : true);
     }
   }
 
   async function onLoadMore() {
     setLoading(true);
     setList(
       data.concat(
-        [...new Array(10)].map(() => ({ loading: true, filePath: '----', createdAt: '----' })),
+        [...new Array(10)].map(() => ({
+          loading: true,
+          fileName: '----',
+          filePath: '----',
+          createdAt: '----',
+        })),
       ),
     );
-    const res = (await recordApi.getRecords({ pageSize, pageNumber })) as any;
-    if (res.code == 0) {
-      const newData = data.concat(res.data);
+    let records = await db.records
+      .orderBy('id')
+      .offset((pageNumber - 1) * pageSize)
+      .limit(pageSize)
+      .toArray();
+
+    if (records.length >= 0) {
+      const newData = data.concat(records);
       setData(newData);
       setList(newData);
       setLoading(false);
-      setIsMore(res.data.length < pageSize ? false : true);
+      setIsMore(records.length < pageSize ? false : true);
       window.dispatchEvent(new Event('resize'));
     }
   }
@@ -128,7 +138,7 @@ const RecordAudioCard = forwardRef(() => {
 
   function getAvatar(record: any) {
     if (record.fileType == 'ss' || record.fileType == 'eg' || record.fileType == 'ei') {
-      return <ScissorOutlined />;
+      return <PictureOutlined />;
     }
     if (record.fileType == 'rs') {
       return <CameraOutlined />;
@@ -144,39 +154,37 @@ const RecordAudioCard = forwardRef(() => {
   function handleOpenFilePath(record: any) {
     if (record.fileType == 'ss') {
       window.electronAPI
-        ? window.electronAPI?.sendViOpenWin({ imgUrl: record.filePath })
-        : window.open(`/viewImage.html?imgUrl=${record.filePath}`);
+        ? window.electronAPI?.sendViOpenWin({ recordId: record.id })
+        : window.open(`/viewImage.html?recordId=${record.id}`);
     }
     if (record.fileType == 'rs') {
       window.electronAPI
-        ? window.electronAPI.sendVvOpenWin({ videoUrl: record.filePath })
-        : window.open(`/viewVideo.html?videoUrl=${record.filePath}`);
+        ? window.electronAPI.sendVvOpenWin({ recordId: record.id })
+        : window.open(`/viewVideo.html?recordId=${record.id}`);
     }
     if (record.fileType == 'rv') {
       window.electronAPI
-        ? window.electronAPI.sendVvOpenWin({ videoUrl: record.filePath })
-        : window.open(`/viewVideo.html?videoUrl=${record.filePath}`);
+        ? window.electronAPI.sendVvOpenWin({ recordId: record.id })
+        : window.open(`/viewVideo.html?recordId=${record.id}`);
     }
     if (record.fileType == 'ra') {
       window.electronAPI
-        ? window.electronAPI.sendVaOpenWin({ audioUrl: record.filePath })
-        : window.open(`/viewAudio.html?audioUrl=${record.filePath}`);
+        ? window.electronAPI.sendVaOpenWin({ recordId: record.id })
+        : window.open(`/viewAudio.html?recordId=${record.id}`);
     }
   }
 
   async function handleDeleteRecord(record: any, index) {
-    const res = (await recordApi.deleteRecord(record.id)) as any;
-    if (res.code == 0) {
-      const newData = [...data];
-      newData.splice(index, 1);
-      setData(newData);
-      setList(newData);
-      window.dispatchEvent(new Event('resize'));
-    }
+    await db.records.delete(record.id);
+    const newData = [...data];
+    newData.splice(index, 1);
+    setData(newData);
+    setList(newData);
+    window.dispatchEvent(new Event('resize'));
   }
 
-  function openFilePath(filePath) {
-    api.openFilePath(filePath);
+  function handleDownloadRecord(record) {
+    saveAs(record.fileData, record.fileName);
   }
 
   const loadMore =
@@ -207,6 +215,9 @@ const RecordAudioCard = forwardRef(() => {
               <a key="list-loadmore-delete" onClick={() => handleDeleteRecord(record, index)}>
                 删除
               </a>,
+              <a key="list-loadmore-download" onClick={() => handleDownloadRecord(record)}>
+                下载
+              </a>,
             ]}
           >
             <Skeleton avatar title={false} loading={record.loading} active>
@@ -215,7 +226,7 @@ const RecordAudioCard = forwardRef(() => {
                 title={
                   <a
                     onClick={() => handleOpenFilePath(record)}
-                    dangerouslySetInnerHTML={{ __html: record.filePath }}
+                    dangerouslySetInnerHTML={{ __html: record.filePath || record.fileName }}
                   ></a>
                 }
                 description={
@@ -226,9 +237,9 @@ const RecordAudioCard = forwardRef(() => {
                         __html: dayjs(record.createdAt).format('YYYY-MM-DD HH:mm:ss'),
                       }}
                     ></span>
-                    <span className="openFolder" onClick={() => openFilePath(record.filePath)}>
+                    {/* <span className="openFolder" onClick={() => openFilePath(record)}>
                       在文件夹中显示
-                    </span>
+                    </span> */}
                   </span>
                 }
               />

diff --git a/packages/web/src/components/records/RecordsHeader.tsx b/packages/web/src/components/records/RecordsHeader.tsx
@@ -3,16 +3,13 @@ import type { MenuProps } from 'antd';
 import { Avatar, Button, Dropdown, Input, Layout, Row } from 'antd';
 import React, { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useApi } from '../../api';
 import { eventEmitter } from '../../util/bus';
 
 const logo = './imgs/icons/png/512x512.png';
 const { Header } = Layout;
 
 const RecordsHeader = forwardRef((props: any, ref: any) => {
   const { t } = useTranslation();
-  const api = useApi();
-  const { setting } = props;
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     eventEmitter.emit('searchRecord', e.target.value);
@@ -23,19 +20,19 @@ const RecordsHeader = forwardRef((props: any, ref: any) => {
       key: '1',
       label: '全部清除',
     },
-    {
-      key: '2',
-      label: '打开下载文件夹',
-    },
+    // {
+    //   key: '2',
+    //   label: '打开下载文件夹',
+    // },
   ];
 
   const handleMenuClick: MenuProps['onClick'] = async (e) => {
     if (e.key === '1') {
       eventEmitter.emit('deleteAllRecord');
     }
-    if (e.key === '2') {
-      api.getFolder(setting.filePath);
-    }
+    // if (e.key === '2') {
+    //   api.getFolder(setting.filePath);
+    // }
   };
 
   function handleLogoClick() {

diff --git a/packages/web/src/components/setting/basicSetting.tsx b/packages/web/src/components/setting/basicSetting.tsx
@@ -1,15 +1,12 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Switch, Form, Input, Select, Button } from 'antd';
 import { FolderOpenOutlined } from '@ant-design/icons';
-import { useApi } from '../../api';
-import { useSettingApi } from '../../api/setting';
+import { Button, Form, Input, Select, Switch } from 'antd';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { db } from '../../db';
 import { Local } from '../../util/storage';
 
 const { TextArea } = Input;
 const BasicSetting = (props) => {
-  const api = useApi();
-  const settingApi = useSettingApi();
   const { t, i18n } = useTranslation();
   const [form] = Form.useForm();
   const { user, setting } = props;
@@ -27,11 +24,11 @@ const BasicSetting = (props) => {
   async function handleSetFilePath() {
     const filePath = await window.electronAPI?.invokeSeSetFilePath(setting.filePath);
     filePath && form.setFieldValue('filePath', filePath);
-    settingApi.editSetting(setting.id, { filePath: filePath || '' });
+    db.settings.update(setting.id, { filePath: filePath || '' });
   }
 
   function handleOpenFilePath() {
-    setting.filePath && api.getFolder(form.getFieldValue('filePath'));
+    // setting.filePath && api.getFolder(form.getFieldValue('filePath'));
   }
 
   async function getFilePath() {
@@ -45,7 +42,7 @@ const BasicSetting = (props) => {
   }
 
   function handleSetOpenAtLogin(isOpen: boolean) {
-    settingApi.editSetting(setting.id, { openAtLogin: isOpen });
+    db.settings.update(setting.id, { openAtLogin: isOpen });
   }
 
   async function getOpenAtLogin() {
@@ -56,7 +53,7 @@ const BasicSetting = (props) => {
   function handleChangeLanguage(lng: string) {
     Local.set('i18n', lng);
     i18n.changeLanguage(lng);
-    settingApi.editSetting(setting.id, { language: lng });
+    db.settings.update(setting.id, { language: lng });
     window.electronAPI?.sendSeSetLanguage(lng);
   }
 

diff --git a/packages/web/src/components/setting/serverSetting.tsx b/packages/web/src/components/setting/serverSetting.tsx
@@ -1,19 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { Button, Form, Input, Switch } from 'antd';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Switch, Form, Input } from 'antd';
-import { useSettingApi } from '../../api/setting';
-import { Local } from '../../util/storage';
+import { db } from '../../db';
 
 const { TextArea } = Input;
 const BasicSetting = (props) => {
-  const settingApi = useSettingApi();
   const { t, i18n } = useTranslation();
-  const [server, setServer] = useState(
-    Local.get('server') || {
-      openServer: false,
-      serverPath: 'http://localhost:9190/',
-    },
-  );
   const [form] = Form.useForm();
   const { user, setting } = props;
 
@@ -23,35 +15,26 @@ const BasicSetting = (props) => {
 
   function init() {
     getServerPath();
-    getOpenAtLogin();
+    getOpenServer();
   }
 
   async function handleSetServerPath(e) {
     const serverPath = e.target.value;
-    settingApi.editSetting(setting.id, { serverPath: serverPath });
-    setServer({ openServer: server.openServer, serverPath: serverPath });
-    Local.set('server', {
-      openServer: server.openServer,
-      serverPath: serverPath,
-    });
+    db.settings.update(setting.id, { serverPath: serverPath });
   }
 
   async function getServerPath() {
-    const serverPath = setting.serverPath || server.serverPath || 'http://localhost:9190/';
+    const serverPath = setting.serverPath || 'http://localhost:9190/';
     form.setFieldValue('serverPath', serverPath);
   }
 
   function handleSetOpenServer(isOpen: boolean) {
-    setServer({ openServer: isOpen, serverPath: server.serverPath });
-    Local.set('server', {
-      openServer: isOpen,
-      serverPath: server.serverPath,
-    });
+    db.settings.update(setting.id, { openServer: isOpen });
   }
 
-  async function getOpenAtLogin() {
-    const openServer = server.openServer || false;
-    form.setFieldValue('openServer', openServer);
+  async function getOpenServer() {
+    const openAtLogin = setting.openAtLogin || false;
+    form.setFieldValue('openAtLogin', openAtLogin);
   }
 
   function handleTipClick() {
@@ -79,7 +62,7 @@ const BasicSetting = (props) => {
       </Form>
 
       <p className="tip" onClick={handleTipClick}>
-        {t('setting.address')}: https://github.com/027xiguapi/pear-rec
+        {t('setting.address')}:<Button type="link">https://github.com/027xiguapi/pear-rec</Button>
       </p>
     </div>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ lib @@
     dist-electron
     release
     *.local
+    dev-dist
     stats.html
@@ Expand Down @@