chore: 调整和升级配置面板

Author: apades

Diff for: package.json

@@ -71,7 +71,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
     "@apad/rc-slider": "^10.5.0",
-    "@apad/setting-panel": "^0.3.1",
+    "@apad/setting-panel": "^0.4.4",
     "ahooks": "^3.7.8",
     "ass-compiler": "^0.1.11",
     "bilibili-live-ws": "^6.3.1",

Diff for: pnpm-lock.yaml

@@ -43,11 +43,15 @@ const config_danmaku = {
   opacity: config({
     defaultValue: 1,
     label: t('settingPanel.opacity'),
-    desc: t('settingPanel.opacityDesc'),
+    type: 'range',
+    range: [0, 1],
   }),
   fontSize: config({
     defaultValue: 16,
     label: t('settingPanel.fontSize'),
+    type: 'range',
+    range: [12, 32],
+    rangeStep: 1,
   }),
   fontWeight: config({
     defaultValue: 600,

Diff for: src/store/config/danmaku.ts

@@ -6,7 +6,12 @@ import {
   setBrowserSyncStorage,
   useBrowserSyncStorage,
 } from '@root/utils/storage'
-import { autorun, makeAutoObservable, observe as mobxObserve } from 'mobx'
+import {
+  autorun,
+  makeAutoObservable,
+  observe as mobxObserve,
+  configure,
+} from 'mobx'
 import { observer } from 'mobx-react'
 import { docPIPConfig } from './docPIP'
 import zh from '@apad/setting-panel/i18n/zh_cn.json'
@@ -30,7 +35,13 @@ import isPluginEnv from '@root/shared/isPluginEnv'
 import config_floatButton from './floatButton'
 import { isUndefined } from 'lodash-es'
 import { DEFAULT_EVENT_INJECT_SITE } from '@root/shared/config'
+import isDev from '@root/shared/isDev'
 
+if (isDev) {
+  configure({
+    enforceActions: 'never',
+  })
+}
 export { DocPIPRenderType } from './docPIP'
 
 export enum videoBorderType {
@@ -212,9 +223,10 @@ export const baseConfigMap = {
 
 export const {
   configStore,
-  openSettingPanel: _openSettingPanel,
+  openSettingPanel,
   closeSettingPanel,
   observe,
+  updateConfig: _updateConfig,
 } = initSetting({
   settings: baseConfigMap,
   saveInLocal: !isPluginEnv,
@@ -275,12 +287,7 @@ let oldConfig: typeof configStore
 const updateConfig = async (config?: typeof configStore) => {
   config ??= await getBrowserSyncStorage(DM_MINI_PLAYER_CONFIG)
   if (!config) return
-  Object.entries(config).forEach(([key, value]) => {
-    ;(configStore as any)[key] = value
-  })
-  if (window.__spSetSavedConfig) {
-    window.__spSetSavedConfig(config)
-  }
+  _updateConfig(config)
 }
 
 // 同步多个tab的config
@@ -298,11 +305,6 @@ if (isPluginEnv) {
   }
 }
 
-export function openSettingPanel(renderTarget?: HTMLElement) {
-  _openSettingPanel(renderTarget)
-  setTimeout(updateConfig, 50)
-}
-
 window.configStore = configStore
 window.openSettingPanel = openSettingPanel
 
@@ -319,13 +321,7 @@ autorun(() => {
 })
 useBrowserSyncStorage(FLOAT_BTN_HIDDEN, async (val) => {
   if (isUndefined(val)) return
-  const config = await getBrowserSyncStorage(DM_MINI_PLAYER_CONFIG)
-
-  if (!config) return
-  configStore.floatButtonVisible = !val
-  if (window.__spSetSavedConfig) {
-    window.__spSetSavedConfig({ ...config, floatButtonVisible: !val })
-  }
+  updateConfig()
 })
 
 export default configStore

Diff for: src/store/config/index.ts

@@ -8,6 +8,8 @@ const config_subtitle = {
   subtitle_opacity: config({
     label: t('settingPanel.subtitleOpacity'),
     defaultValue: 1,
+    type: 'range',
+    range: [0, 1],
   }),
   subtitle_bg: config({
     label: t('settingPanel.subtitleBg'),
@@ -17,10 +19,15 @@ const config_subtitle = {
   subtitle_bgOpacity: config({
     label: t('settingPanel.subtitleBgOpacity'),
     defaultValue: 0.3,
+    type: 'range',
+    range: [0, 1],
   }),
   subtitle_fontSize: config({
     label: t('settingPanel.subtitleFontSize'),
     defaultValue: 16,
+    type: 'range',
+    range: [12, 32],
+    rangeStep: 1,
   }),
   subtitle_fontColor: config({
     label: t('settingPanel.subtitleFontColor'),
@@ -34,6 +41,8 @@ const config_subtitle = {
   subtitle_fontOpacity: config({
     label: t('settingPanel.subtitleFontOpacity'),
     defaultValue: 1,
+    type: 'range',
+    range: [0, 1],
   }),
   subtitle_fontFamily: config({
     label: t('settingPanel.subtitleFontFamily'),