feat(plugin): support user settings

koishijs · Nov 6, 2023 · 117ca66 · 117ca66
1 parent b4a03d1
commit 117ca66
Showing 1 changed file with 73 additions and 33 deletions.
diff --git a/packages/plugin/clients/enhance/client/index.ts b/packages/plugin/clients/enhance/client/index.ts
@@ -1,4 +1,5 @@
-import { Context } from '@koishijs/client'
+import { Config, Context, Schema, useConfig } from '@koishijs/client'
+import { RemovableRef } from '@vueuse/core'
 import * as colorString from 'color-string'
 
 declare global {
@@ -27,15 +28,14 @@ declare global {
 const styleSheetId = 'koishell-enhance-stylesheet'
 
 const baseCSS = `
-input,
-textarea {
-  -webkit-touch-callout: auto !important;
-  user-select: auto !important;
-  -webkit-user-select: auto !important;
-  cursor: auto !important;
-}
-
-*:not(input, textarea, .monaco-mouse-cursor-text, .monaco-mouse-cursor-text *) {
+*:not(
+    input,
+    textarea,
+    .monaco-mouse-cursor-text,
+    .monaco-mouse-cursor-text *,
+    .k-text-selectable,
+    .k-text-selectable *
+  ) {
   -webkit-touch-callout: none !important;
   user-select: none !important;
   -webkit-user-select: none !important;
@@ -75,7 +75,9 @@ let styleSheet: HTMLStyleElement
 
 const getComputedColorHex = (s: string) => {
   const r = colorString.get(
-    window.getComputedStyle(window.document.documentElement).getPropertyValue(s)
+    window
+      .getComputedStyle(window.document.documentElement)
+      .getPropertyValue(s),
   )
   if (!r || !r.value) return '000000'
   return colorString.to.hex(r.value).slice(1, 7)
@@ -99,11 +101,10 @@ const send = (message: string) => {
   }
 }
 
-const syncStyleSheet = () => {
+const syncStyleSheet = (config: RemovableRef<Config>) => {
   if (!styleSheet) return
 
-  // TODO: Get config
-  switch ('enhanceColor' as 'enhanceColor' | 'enhance') {
+  switch (config.value.desktop.enhance) {
     case 'enhanceColor':
       styleSheet.innerHTML = baseCSS + enhanceColorCSS
       break
@@ -113,71 +114,110 @@ const syncStyleSheet = () => {
   }
 }
 
-const syncTheme = () => {
-  // TODO: Get config
-  switch ('enhanceColor' as 'enhanceColor' | 'enhance') {
+const syncTheme = (config: RemovableRef<Config>) => {
+  switch (config.value.desktop.enhance) {
     case 'enhanceColor':
       send(
         `T${
           window.document.documentElement.classList.contains('dark') ? 'D' : 'L'
         }C${getComputedColorHex('--k-color-border')}${getComputedColorHex(
-          '--bg1'
-        )}${getComputedColorHex('--fg1')}`
+          '--bg1',
+        )}${getComputedColorHex('--fg1')}`,
       )
       break
     case 'enhance':
       send(
-        window.document.documentElement.classList.contains('dark') ? 'TD' : 'TL'
+        window.document.documentElement.classList.contains('dark')
+          ? 'TD'
+          : 'TL',
       )
       break
   }
 }
 
 const resetTheme = () => send('TR')
 
-const sync = () => {
-  syncStyleSheet()
-  syncTheme()
+const sync = (config: RemovableRef<Config>) => {
+  syncStyleSheet(config)
+  syncTheme(config)
 }
 
 const reset = () => {
   resetTheme()
 }
 
-const supportsEnhance = () =>
+const supports = (f: 'enhance' | 'enhanceColor') =>
   Array.isArray(window.__KOI_SHELL__?.supports) &&
-  window.__KOI_SHELL__.supports.includes('enhance')
+  window.__KOI_SHELL__.supports.includes(f)
 
-const enhance = () => {
-  if (!supportsEnhance()) return
+const enhance = (config: RemovableRef<Config>) => {
+  if (!supports('enhance')) return
 
   if (!styleSheet) {
     styleSheet = window.document.getElementById(
-      styleSheetId
+      styleSheetId,
     ) as HTMLStyleElement
     styleSheet = document.createElement('style')
     styleSheet.id = styleSheetId
     document.head.appendChild(styleSheet)
   }
 
   if (!themeObserver) {
-    themeObserver = new MutationObserver(sync)
+    themeObserver = new MutationObserver(() => sync(config))
     themeObserver.observe(window.document.documentElement, { attributes: true })
   }
 
-  sync()
+  sync(config)
 }
 
 const disposeEnhance = () => {
-  if (!supportsEnhance()) return
+  if (!supports('enhance')) return
 
   if (styleSheet) window.document.head.removeChild(styleSheet)
   if (themeObserver) themeObserver.disconnect()
 
   reset()
 }
 
+declare module '@koishijs/client' {
+  interface Config {
+    desktop: {
+      enhance: 'off' | 'enhance' | 'enhanceColor'
+    }
+  }
+}
+
 export default (ctx: Context) => {
-  enhance()
-  ctx.on('dispose', disposeEnhance)
+  ctx.settings({
+    id: 'desktop-enhance',
+    schema: Schema.object({
+      desktop: Schema.object({
+        enhance: Schema.union(
+          [
+            Schema.const('off').description('增强关闭'),
+            Schema.const('enhance')
+              .description('增强')
+              // @ts-expect-error 【管理员】孤梦星影 1:35:20 看了源码，实际上是可用的  只是没有类型  你可以 @ts-ignore
+              .disabled(!supports('enhance')),
+
+            Schema.const('enhanceColor')
+              .description('增强色彩')
+              // @ts-expect-error 【管理员】孤梦星影 1:35:20 看了源码，实际上是可用的  只是没有类型  你可以 @ts-ignore
+              .disabled(!supports('enhanceColor')),
+          ].filter(Boolean),
+        )
+          .default(supports('enhance') ? 'enhance' : 'off')
+          .description('Koishi 桌面增强模式。'),
+      }).description('Koishi 桌面设置'),
+    }),
+  })
+
+  ctx.on('ready', () => {
+    const config = useConfig()
+
+    if (config.value.desktop.enhance !== 'off') {
+      enhance(config)
+      ctx.on('dispose', disposeEnhance)
+    }
+  })
 }