fix: bugs

.gitignore

@@ -90,3 +90,4 @@ dist-ssr
 bundle-stats-main.html
 bundle-stats-preload.html
 bundle-stats-renderer.html
+tailwind-output.css

package.json

@@ -31,44 +31,47 @@
     "test:types-shared": "tsc --noEmit --project src/shared/tsconfig.json",
     "netease": "npx NeteaseCloudMusicApi",
     "eslint": "eslint --ext .ts,.js ./",
-    "prettier": "prettier --write './**/*.{ts,js,tsx,jsx}'"
+    "prettier": "prettier --write './**/*.{ts,js,tsx,jsx}'",
+    "analyze:css": "npx windicss-analysis",
+    "analyze:js": "npm run build:renderer && open-cli bundle-stats-renderer.html"
   },
   "engines": {
     "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
   },
   "dependencies": {
-    "@sentry/node": "^6.19.6",
+    "@sentry/node": "^6.19.7",
-    "@sentry/tracing": "^6.19.6",
+    "@sentry/tracing": "^6.19.7",
     "NeteaseCloudMusicApi": "^4.5.12",
     "better-sqlite3": "7.5.1",
     "change-case": "^4.1.2",
     "cookie-parser": "^1.4.6",
     "electron-log": "^4.4.6",
     "electron-store": "^8.0.1",
-    "express": "^4.17.3",
+    "express": "^4.18.0",
     "fast-folder-size": "^1.6.1"
   },
   "devDependencies": {
-    "@sentry/react": "^6.19.6",
+    "@electron/universal": "1.2.1",
-    "@testing-library/react": "^13.1.0",
+    "@sentry/react": "^6.19.7",
+    "@testing-library/react": "^13.1.1",
     "@types/better-sqlite3": "^7.5.0",
-    "@types/cookie-parser": "^1.4.2",
+    "@types/cookie-parser": "^1.4.3",
     "@types/express": "^4.17.13",
     "@types/express-fileupload": "^1.2.2",
     "@types/howler": "^2.2.7",
-    "@types/js-cookie": "^3.0.1",
+    "@types/js-cookie": "^3.0.2",
     "@types/lodash-es": "^4.17.6",
     "@types/md5": "^2.3.2",
     "@types/qrcode": "^1.4.2",
-    "@types/react": "^18.0.5",
+    "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.19.0",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
-    "@typescript-eslint/parser": "^5.19.0",
+    "@typescript-eslint/parser": "^5.21.0",
     "@vitejs/plugin-react": "^1.3.1",
-    "@vitest/ui": "^0.9.3",
+    "@vitest/ui": "^0.10.0",
-    "autoprefixer": "^10.4.4",
+    "autoprefixer": "^10.4.5",
-    "axios": "^0.26.1",
+    "axios": "^0.27.2",
-    "c8": "^7.11.0",
+    "c8": "^7.11.2",
     "classnames": "^2.3.1",
     "color.js": "^1.2.0",
     "colord": "^2.9.2",
@@ -76,17 +79,17 @@
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.1",
     "dotenv": "^16.0.0",
-    "electron": "^18.0.4",
+    "electron": "^18.1.0",
     "electron-builder": "^23.0.3",
     "electron-devtools-installer": "^3.2.0",
     "electron-rebuild": "^3.2.7",
-    "electron-releases": "^3.987.0",
+    "electron-releases": "^3.1004.0",
-    "esbuild": "^0.14.36",
+    "esbuild": "^0.14.38",
-    "eslint": "^8.13.0",
+    "eslint": "^8.14.0",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "express-fileupload": "^1.3.1",
-    "framer-motion": "^6.3.0",
+    "framer-motion": "^6.3.2",
     "howler": "^2.2.3",
     "js-cookie": "^3.0.1",
     "jsdom": "^19.0.0",
@@ -94,28 +97,32 @@
     "md5": "^2.3.0",
     "minimist": "^1.2.6",
     "music-metadata": "^7.12.3",
+    "open-cli": "^7.0.1",
     "ora": "^6.1.0",
     "picocolors": "^1.0.0",
     "postcss": "^8.4.12",
     "prettier": "2.6.2",
-    "prettier-plugin-tailwindcss": "^0.1.8",
+    "prettier-plugin-tailwindcss": "^0.1.10",
     "qrcode": "^1.5.0",
-    "react": "^18.0.0",
+    "react": "^18.1.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.1.0",
     "react-ga4": "^1.4.1",
     "react-hot-toast": "^2.2.0",
-    "react-query": "^3.34.19",
+    "react-query": "^3.38.0",
     "react-router-dom": "^6.3.0",
     "react-use": "^17.3.2",
     "rollup-plugin-visualizer": "^5.6.0",
-    "sass": "^1.50.0",
+    "sass": "^1.51.0",
     "tailwindcss": "^3.0.24",
     "typescript": "^4.6.3",
     "unplugin-auto-import": "^0.7.1",
-    "valtio": "^1.5.2",
+    "valtio": "^1.6.0",
-    "vite": "^2.9.5",
+    "vite": "^2.9.6",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vitest": "^0.9.3",
+    "vitest": "^0.10.0",
     "wait-on": "^6.0.1"
+  },
+  "resolutions": {
+    "@electron/universal": "1.2.1"
   }
 }

postcss.config.js

@@ -15,6 +15,9 @@ const replaceBrandColorWithCssVar = () => {
     Declaration(decl) {
       let value = decl.value
       blues.forEach(blue => {
+        if (decl?.parent?.selector?.includes('-blue-')) {
+          return
+        }
         value = value.replace(
           `rgb(${blue.rgb}`,
           `rgb(var(--brand-color-${blue.key})`

scripts/build.main.mjs

@@ -28,6 +28,7 @@ const options = {
   platform: 'node',
   format: 'cjs',
   bundle: true,
+  sourcemap: true,
   define: envForEsbuild,
   external: [
     ...builtinModules.filter(
@@ -80,6 +81,7 @@ if (argv.watch) {
               }
             },
           },
+          sourcemap: true,
         }).then(() => {
           console.log(pc.yellow(`⚡ Run App`))
           if (child) child.kill()

scripts/generate.accent.color.css.js

@@ -5,7 +5,7 @@ const prettier = require('prettier')
 const fs = require('fs')
 const prettierConfig = require('../prettier.config.js')
 
-const pickedColors = {
+ const pickedColors = {
   blue: colors.blue,
   red: colors.red,
   orange: colors.orange,
@@ -24,6 +24,7 @@ const pickedColors = {
   pink: colors.pink,
   rose: colors.rose,
 }
+module.exports = pickedColors
 
 const colorsCss = {}
 Object.entries(pickedColors).forEach(([name, colors]) => {
@@ -46,3 +47,4 @@ ${name === 'blue' ? ':root' : `[data-accent-color='${name}']`} {${color}
 
 const formatted = prettier.format(css, { ...prettierConfig, parser: 'css' })
 fs.writeFileSync('./src/renderer/styles/accentColor.scss', formatted)
+

src/main/cache.ts

@@ -12,7 +12,7 @@ class Cache {
     //
   }
 
-  set(api: string, data: any, query: any = {}) {
+  async set(api: string, data: any, query: any = {}) {
     switch (api) {
       case APIs.UserPlaylist:
       case APIs.UserAccount:

src/main/server.ts

@@ -56,7 +56,7 @@ class Server {
           if ([400, 301].includes(error.status)) {
             return res.status(error.status).send(error.body)
           }
-          return res.status(500).send(error)
+          return res.status(500)
         }
       }
 

src/renderer/components/Cover.tsx

@@ -15,7 +15,7 @@ const Cover = ({
   showHover?: boolean
   alwaysShowShadow?: boolean
 }) => {
-  const [isError, setIsError] = useState(false)
+  const [isError, setIsError] = useState(imageUrl.includes('3132508627578625'))
 
   return (
     <div onClick={onClick} className='group relative z-0'>

src/renderer/pages/Album.tsx

@@ -86,7 +86,7 @@ const Header = ({
     return formatDuration(duration, 'zh-CN', 'hh[hr] mm[min]')
   }, [album?.songs])
 
-  const [isCoverError, setCoverError] = useState(false)
+  const [isCoverError, setCoverError] = useState(coverUrl.includes('3132508627578625'))
 
   const { data: userAlbums } = useUserAlbums()
   const isThisAlbumLiked = useMemo(() => {
@@ -136,7 +136,7 @@ const Header = ({
             coverUrl && (
               <img
                 src={coverUrl}
-                className='rounded-2xl border border-b-0 border-black border-opacity-5 dark:border-white dark:border-opacity-5'
+                className='rounded-2xl border w-full border-b-0 border-black border-opacity-5 dark:border-white dark:border-opacity-5'
                 onError={() => setCoverError(true)}
               />
             )

src/renderer/pages/Settings/Appearance.tsx

@@ -26,26 +26,45 @@ const AccentColor = () => {
     state.settings.accentColor = color
     changeAccentColor(color)
   }
+
+  const accentColor = useSnapshot(state).settings.accentColor
   return (
-    <div className='mt-4 flex'>
+    <div className='mt-4'>
+      <div className='mb-2 dark:text-white'>强调色</div>
+      <div className=' flex items-center'>
         {Object.entries(colors).map(([color, bg]) => (
           <div
             key={color}
-          className={classNames(bg, 'mr-3 h-6 w-6 rounded-full')}
+            className={classNames(bg, 'mr-2.5 h-5 w-5 rounded-full flex items-center justify-center')}
             onClick={() => changeColor(color)}
-        ></div>
+          >
+            {color === accentColor && <div className='bg-white h-1.5 w-1.5 rounded-full'></div>}
+          </div>
         ))}
       </div>
+    </div>
   )
 }
 
+const Theme = () => {
+  return  <div className='mt-4'>
+    <div className='mb-2 dark:text-white'>主题</div>
+    <div>
+      
+    </div>
+  </div>
+}
+
 const Appearance = () => {
   return (
     <div>
-      <div className='text-xl dark:text-white/70'>主题</div>
+      <div className='text-xl font-medium text-gray-800 dark:text-white/70'>
-      <div className='mt-3 h-px w-full bg-white/10'></div>
+        主题
+      </div>
+      <div className='mt-3 h-px w-full bg-black/5 dark:bg-white/10'></div>
 
       <AccentColor />
+      <Theme />
     </div>
   )
 }

src/renderer/pages/Settings/Settings.tsx

@@ -51,8 +51,10 @@ const Sidebar = () => {
         <div
           key={category}
           className={classNames(
-            'btn-hover-animation my-px flex cursor-default items-center justify-between rounded-lg px-3 py-2 font-medium text-black transition-colors duration-200 after:scale-[0.97] after:bg-black/[.06] dark:text-white dark:after:bg-white/10',
+            'btn-hover-animation my-px flex cursor-default items-center justify-between rounded-lg px-3 py-2 font-medium  transition-colors duration-200 after:scale-[0.97] after:bg-black/[.06] dark:text-white dark:after:bg-white/10',
-            active === category && 'after:scale-100 after:opacity-100'
+            active === category
+              ? 'text-black after:scale-100 after:opacity-100'
+              : 'text-gray-600'
           )}
         >
           {category}

src/renderer/store.ts

@@ -1,6 +1,7 @@
 import { proxy, subscribe } from 'valtio'
 import { devtools } from 'valtio/utils'
 import { Player } from '@/renderer/utils/player'
+import {merge} from 'lodash-es'
 
 interface Store {
   uiStates: {
@@ -26,7 +27,7 @@ const initialState: Store = {
 
 const stateInLocalStorage = localStorage.getItem('state')
 export const state = proxy<Store>(
-  (stateInLocalStorage && JSON.parse(stateInLocalStorage)) || initialState
+  merge(initialState, stateInLocalStorage ? JSON.parse(stateInLocalStorage) : {})
 )
 subscribe(state, () => {
   localStorage.setItem('state', JSON.stringify(state))

src/renderer/utils/theme.ts

@@ -3,6 +3,6 @@ export const changeAccentColor = (color: string) => {
 }
 
 const stateString = localStorage.getItem('state')
-const state = stateString ? JSON.parse(stateString) : {}
+const stateInLocalStorage = stateString ? JSON.parse(stateString) : {}
 
-changeAccentColor(state.settings.accentColor || 'blue')
+changeAccentColor(stateInLocalStorage?.settings?.accentColor || 'blue')

tailwind.config.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const colors = require('tailwindcss/colors')
+const pickedColors = require('./scripts/generate.accent.color.css.js')
 
 module.exports = {
   content: [
@@ -10,7 +11,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        ...colors,
+        ...pickedColors,
         brand: colors.blue,
         gray: colors.neutral,
       },

vite.config.ts

@@ -69,14 +69,12 @@ export default defineConfig({
     port: Number(process.env['ELECTRON_WEB_SERVER_PORT'] ?? 42710),
     proxy: {
       '/netease/': {
-        target: `http://127.0.0.1:${process.env.ELECTRON_DEV_NETEASE_API_PORT}/netease`,
+        target: `http://127.0.0.1:${process.env.ELECTRON_DEV_NETEASE_API_PORT}`,
         changeOrigin: true,
-        rewrite: path => path.replace(/^\/netease/, ''),
       },
       '/yesplaymusic/': {
-        target: `http://127.0.0.1:${process.env.ELECTRON_DEV_NETEASE_API_PORT}/yesplaymusic`,
+        target: `http://127.0.0.1:${process.env.ELECTRON_DEV_NETEASE_API_PORT}`,
         changeOrigin: true,
-        rewrite: path => path.replace(/^\/yesplaymusic/, ''),
       },
     },
   },