新增新版本提醒

package.json

@@ -19,6 +19,7 @@
     "prettier": "^2.6.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "semver": "^7.3.7",
     "tough-cookie": "^4.0.0"
   },
   "scripts": {
@@ -68,6 +69,7 @@
     "@testing-library/user-event": "^14.1.0",
     "@types/node": "^17.0.24",
     "@types/prettier": "2.6.0",
+    "@types/semver": "^7.3.7",
     "@types/tough-cookie": "^4.0.2",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",
@@ -89,6 +91,11 @@
     "wait-on": "^6.0.1",
     "web-vitals": "^2.1.4"
   },
+  "description": "蓝奏云网盘客户端",
+  "author": {
+    "name": "chenhb23",
+    "url": "https://github.com/chenhb23"
+  },
   "build": {
     "productName": "蓝奏云盘",
     "copyright": "更多内容到 https://github.com/chenhb23/lanzouyun-disk",

src/renderer/App.tsx

@@ -19,9 +19,11 @@ import electronApi from './electronApi'
 import {config} from './store/Config'
 import pkg from '../../package.json'
 import {delay} from '../common/util'
+import project from '../project.config'
+import {useLatestRelease} from './hook/useLatestRelease'
+import {Touchable} from './component/Touchable'
 
 import './App.css'
-import project from '../project.config'
 
 function taskLength<T>(tasks: T[]) {
   const len = tasks?.length
@@ -33,17 +35,25 @@ const recycleUrl = new URL(project.page.recycle, project.lanzouUrl).toString()
 const App = observer(() => {
   const [activeKey, setActiveKey] = useState('1')
   const [visible, setVisible] = useState(true)
+  const latestVersion = useLatestRelease()
 
   return (
     <div className='App'>
       <main className='main'>
         <aside className='aside'>
           <Menu activeKey={activeKey} onChange={key => setActiveKey(key)}>
-            <Menu.Title
-              title={'去 GitHub 点亮 star'}
-              onClick={() => electronApi.openExternal('https://github.com/chenhb23/lanzouyun-disk')}
-            >
-              <Icon iconName={'github'} style={{fontSize: 14}} /> v{pkg.version}
+            <Menu.Title>
+              <Touchable
+                title={'去 GitHub 点亮 star'}
+                onClick={() => electronApi.openExternal('https://github.com/chenhb23/lanzouyun-disk')}
+              >
+                <Icon iconName={'github'} style={{fontSize: 14}} /> v{pkg.version}
+              </Touchable>
+              {!!latestVersion && (
+                <Touchable onClick={() => electronApi.openExternal(latestVersion.html_url)} title={latestVersion.body}>
+                  （最新: {latestVersion.tag_name}）
+                </Touchable>
+              )}
             </Menu.Title>
             <Menu.Item id={'1'} icon={'file'}>
               全部文件

src/renderer/component/Menu/Menu.css

@@ -15,9 +15,10 @@
 }
 
 .MenuTitle {
-  margin: 12px 0;
   padding-left: 24px;
   color: rgb(154, 154, 154);
   font-size: 12px;
   user-select: none;
+  height: 30px;
+  line-height: 30px;
 }

src/renderer/component/Menu/MenuTitle.tsx

@@ -4,12 +4,7 @@ export interface MenuTitleProps extends Pick<React.LiHTMLAttributes<HTMLLIElemen
 
 export const MenuTitle: React.FC<MenuTitleProps> = props => {
   return (
-    <li
-      className='MenuTitle'
-      title={props.title}
-      onClick={props.onClick}
-      style={props.onClick ? {cursor: 'pointer'} : undefined}
-    >
+    <li className='MenuTitle' title={props.title} onClick={props.onClick}>
       {props.children}
     </li>
   )

src/renderer/component/Touchable.css

@@ -0,0 +1,3 @@
+.Touchable {
+  cursor: pointer;
+}

src/renderer/component/Touchable.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import './Touchable.css'
+
+export interface TouchableProps extends React.HTMLAttributes<HTMLSpanElement> {}
+
+export const Touchable: React.FC<TouchableProps> = props => (
+  <span {...props} className={`Touchable ${props.className ?? ''}`} />
+)

src/renderer/hook/useLatestRelease.ts

@@ -0,0 +1,29 @@
+import {useEffect, useState} from 'react'
+import * as http from '../../common/http'
+import gt from 'semver/functions/gt'
+import pkg from '../../../package.json'
+
+export interface LatestRelease {
+  tag_name: string // tag
+  html_url: string // release 地址
+  body: string // 发布信息
+}
+
+export function useLatestRelease() {
+  const [latestVersion, setLatestVersion] = useState<LatestRelease>(null)
+
+  useEffect(() => {
+    http.share
+      .get('https://api.github.com/repos/chenhb23/lanzouyun-disk/releases')
+      .json<LatestRelease[]>()
+      .then(value => {
+        if (!value?.length) return
+
+        if (gt(value[0].tag_name, pkg.version)) {
+          setLatestVersion(value[0])
+        }
+      })
+  }, [])
+
+  return latestVersion
+}

yarn.lock

@@ -2112,6 +2112,11 @@
   resolved "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/semver@^7.3.7":
+  version "7.3.9"
+  resolved "https://registry.npmmirror.com/@types/semver/-/semver-7.3.9.tgz#152c6c20a7688c30b967ec1841d31ace569863fc"
+  integrity sha512-L/TMpyURfBkf+o/526Zb6kd/tchUP3iBDEPjqjb+U2MAJhVRxxrmr2fwpe08E7QsV7YLcpq0tUaQ9O9x97ZIxQ==
+
 "@types/serve-index@^1.9.1":
   version "1.9.1"
   resolved "https://registry.npmmirror.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
@@ -9135,6 +9140,13 @@ semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.3.7:
+  version "7.3.7"
+  resolved "https://registry.npmmirror.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.17.2:
   version "0.17.2"
   resolved "https://registry.npmmirror.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"