添加更新通知

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vocabularies_killer",
-  "version": "1.0.0",
+  "version": "1.0.11",
   "productName": "记单词",
   "scripts": {
     "dev:web": "cross-env NODE_FFFF=development webpack -w",
@@ -20,11 +20,13 @@
     "rc-tooltip": "^5.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-hooks-use-modal": "^2.1.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.0.2",
     "use-sound": "^4.0.0"
   },
   "devDependencies": {
+    "@types/node": "^17.0.4",
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.8",
     "babel-loader": "^8.2.2",

src/components/NotificationModal/index.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react'
+import { selectUi, updateshowNotification } from 'src/store/ui'
+import { useModal } from 'react-hooks-use-modal'
+import { useSelector } from 'react-redux';
+
+const modalStyle: React.CSSProperties = {
+  backgroundColor: '#fff',
+  padding: '20px',
+	width: '200px',
+	height: '240px',
+  borderRadius: '10px',
+};
+
+export const NotificationModal = () => {
+	const { showNotification } = useSelector(selectUi)
+
+	useEffect(() => {
+		showNotification? open() : close()
+	}, [showNotification])
+
+  const [Modal, open, close, isOpen] = useModal('root', {
+    preventScroll: true,
+    closeOnOverlayClick: true
+  })
+  return (
+    <div>
+      <Modal>
+        <div style={modalStyle}>
+          <h3>更新内容</h3>
+          <div>
+						1、修复句子发音Bug
+					</div>
+        </div>
+      </Modal>
+    </div>
+  )
+}

src/components/layout/index.tsx

@@ -6,12 +6,14 @@ import { selectUi, updateShowSetting } from 'src/store/ui'
 import { HomeDrawer } from '../HomeDrawer'
 import { HomeFooter } from '../HomeFooter'
 import { HomeHeader } from '../HomeHeader'
+import { NotificationModal } from '../NotificationModal'
 
 import './index.less'
 
 export const Layout = (props: any) => {
   return (
     <div className="layout">
+      <NotificationModal />
       <HomeDrawer />
       {/* <HomeHeader /> */}
       {/* <div>Header</div> */}

src/hooks/useEnterPlugin.ts

@@ -1,21 +1,35 @@
 import React, { useEffect, useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { updateShowSetting } from 'src/store/ui'
-import { initialUtoolState, selectUtool, setUtoolSetting } from 'src/store/utool'
+import { updateShowSetting, updateshowNotification } from 'src/store/ui'
+import {
+  initialUtoolState,
+  selectUtool,
+  setUtoolSetting
+} from 'src/store/utool'
 import { addVocabularyAsync, fetchWordList, selectWord } from 'src/store/word'
 import { PluginEnterAction } from 'src/types/common'
 
 export const useEnterPluginHook = () => {
   const { reviewCount } = useSelector(selectWord)
   const dispatch = useDispatch()
-
   const utoolsSettingRef = useRef<UtoolState>()
 
   /* 根据打开plugin的方式，执行一些逻辑 */
   useEffect(() => {
     utools.onPluginEnter(async (action: PluginEnterAction) => {
+      const currentVerson = window.services.getAppVerson()
+      const previousVerson = window.services.wordModel.getAppVersionFromDb()
+
+      if (
+        !previousVerson?.version ||
+        currentVerson !== previousVerson?.version
+      ) {
+        window.services.wordModel.setAppVerson(currentVerson)
+        dispatch(updateshowNotification(true))
+        console.log('新版，更新version', currentVerson)
+      }
 
-			await initUtoolSetting()
+      await initUtoolSetting()
 
       if (action.code === 'add vocabulary') {
         handlePluginAddWord(action)
@@ -24,11 +38,10 @@ export const useEnterPluginHook = () => {
       if (action.code === 'review') {
         handlePluginReview()
       }
-
     })
   }, [reviewCount])
 
-	const initUtoolSetting = () => {
+  const initUtoolSetting = () => {
     return new Promise((resolve) => {
       let setting = window.services.wordModel.getUtoolsSetting()
       if (!setting) {
@@ -40,8 +53,7 @@ export const useEnterPluginHook = () => {
       utoolsSettingRef.current = setting
       resolve(setting)
     })
-	}
-
+  }
 
   const handlePluginAddWord = (action: PluginEnterAction) => {
     const needclose = !!utoolsSettingRef.current?.closeAfterAddWord
@@ -50,11 +62,11 @@ export const useEnterPluginHook = () => {
       addVocabularyAsync({
         text: action.payload,
         cb: () => {
-           if (needclose){
-             window.utools.outPlugin()
-           } else {
+          if (needclose) {
+            window.utools.outPlugin()
+          } else {
             dispatch(fetchWordList())
-           }
+          }
         }
       })
     )

src/pages/list/components/list-item.tsx

@@ -104,7 +104,7 @@ export default function Card({ word, showFirstWordTranslate }: CardProps) {
         )
         const textContent = transalteSrapper?.textContent
         console.log(textContent);
-        textContent?.replace(/\d+\.\s([\w|\s',，"“”]+)[\.\?\!\。\？\！]/g, (...args) => {
+        textContent?.replace(/\d+\.\s([\w|\s\-%',，"“”]+)[\.\?\!\。\？\！]/g, (...args) => {
           if (args[1]) {
             console.log('args', args[1]);
             sentences.push(args[1])

src/store/ui.ts

@@ -3,10 +3,12 @@ import { RootState } from './root'
 
 export interface UiState {
   showSetting: boolean
+  showNotification: boolean
 }
 
 const initialState: UiState = {
-  showSetting: false
+  showSetting: false,
+  showNotification: false
 }
 
 export const UiSlice = createSlice({
@@ -16,11 +18,14 @@ export const UiSlice = createSlice({
     updateShowSetting: (state, { payload }: PayloadAction<boolean>) => {
       state.showSetting = payload
     },
+    updateshowNotification: (state, { payload }: PayloadAction<boolean>) => {
+      state.showNotification = payload
+    },
   }
 })
 
 export const selectUi = (state: RootState) => state.ui
 
-export const { updateShowSetting } = UiSlice.actions
+export const { updateShowSetting, updateshowNotification } = UiSlice.actions
 
 export default UiSlice.reducer

src/types/global.d.ts

@@ -7,6 +7,7 @@ interface Window {
       audioBaseUrl: string
       tableName: ''
     }
+    getAppVerson: () => string;
     wordModel: {
       addVocabulary: (text?:string) => Promise<Word>
       deleteWrodObj: (text: string) => Promise<DbReturn>
@@ -19,6 +20,8 @@ interface Window {
       minimizeDbSize: Function
       getUtoolsSetting: () => UtoolState
       setUtoolsSetting: (setting: Partial<UtoolState>) => void
+      getAppVersionFromDb: () => {version:string}
+      setAppVerson: (verson:string) => void
     }
   }
 }

utools_ts/assets/plugin.json

@@ -1,7 +1,7 @@
 {
 	"pluginName": "vocabularies book",
 	"description": "vocabularies book",
-	"version": "0.0.1",
+	"version": "1.0.11",
 	"logo": "logo.png",
 	"main": "index.html",
 	"preload": "./utool/preload.js",

utools_ts/preload.ts

@@ -1,9 +1,17 @@
 import { tableNames, audioBaseUrl } from './constant'
 import { wordModel } from './wordModel'
+import { readFileSync } from 'fs'
+import * as path from 'path'
+
 ;(window as any).services = {
   constanst: {
     tableNames,
     audioBaseUrl
   },
-  wordModel
+  wordModel,
+  getAppVerson: function () {
+    const data =
+      readFileSync(path.resolve(__dirname, '../plugin.json'), 'utf-8') || '{}'
+    return JSON.parse(data)?.version
+  }
 }

utools_ts/tsconfig.json

@@ -8,18 +8,11 @@
     "target": "ES2020",
     "allowJs": true,
     "strict": true,
-    "types": [
-      "utools-api-types"
-    ],
+    "typeRoots": ["node_modules/@types"],
+    "types": ["utools-api-types", "node"],
     "moduleResolution": "node",
     "strictPropertyInitialization": false
   },
-  "include": [
-    "./**/*"
-  ],
-  "exclude": [
-    "../node_modules",
-    "../dist",
-    "../src/**/*"
-  ],  
-}
+  "include": ["./**/*"],
+  "exclude": ["../node_modules", "../dist", "../src/**/*"]
+}

utools_ts/wordModel.ts

@@ -217,6 +217,29 @@ class WordModel {
       return null
     }
   }
+
+  getAppVersionFromDb() {
+    try {
+      return utools.db.get('version') as any
+    } catch (error) {
+      console.log('error', error)
+      return null
+    }
+  }
+
+  setAppVerson(version: string) {
+    try {
+      const oldVersion = (utools.db.get('version') as any) || {}
+      const newVersion = Object.assign(oldVersion, {version})
+      utools.db.put({
+        _id: 'version',
+        ...newVersion
+      })
+    } catch (error) {
+      console.log('error', error)
+      return null
+    }
+  }
 }
 
 export const wordModel = new WordModel()