feat：自定义主题

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "1.8.9-1",
+  "version": "1.9.0",
   "private": true,
   "bin": "dist/service.js",
   "scripts": {

src/@core/components/ThemeSwitcher.vue

@@ -4,6 +4,8 @@ import { useTheme } from 'vuetify'
 import type { ThemeSwitcherTheme } from '@layouts/types'
 import api from '@/api'
 import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
+import { useToast } from 'vue-toast-notification'
+import { VAceEditor } from 'vue3-ace-editor'
 
 const props = defineProps<{
   themes: ThemeSwitcherTheme[]
@@ -18,6 +20,17 @@ const { state: currentThemeName, next: getNextThemeName } = useCycleList(
   { initialValue: savedTheme.value },
 )
 
+const $toast = useToast()
+
+// 自定义CSS弹窗
+const cssDialog = ref(false)
+
+// 自定义 CSS
+const customCSS = ref('')
+
+// 编辑器主题
+const editorTheme = computed(() => (currentThemeName.value === 'light' ? 'github' : 'monokai'))
+
 // 主题切换动画
 function themeTransition() {
   const x = performance.now()
@@ -134,6 +147,43 @@ watch(
   () => currentThemeName.value,
   () => updateTheme(),
 )
+
+// 获取自定义 CSS
+async function getCustomCSS() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/UserCustomCSS')
+    if (result && result.success && result.data?.value) {
+      customCSS.value = result.data?.value ?? ''
+      if (customCSS.value) {
+        const style = document.createElement('style')
+        style.innerHTML = result.data?.value ?? ''
+        document.head.appendChild(style)
+      }
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 保存自定义 CSS
+async function saveCustomCSS() {
+  cssDialog.value = false
+  try {
+    const result: { [key: string]: any } = await api.post('system/setting/UserCustomCSS', customCSS.value, {
+      headers: {
+        'Content-Type': 'text/plain',
+      },
+    })
+
+    if (result.success) $toast.success('自定义CSS保存成功！')
+  } catch (e) {
+    console.error('保存自定义 CSS 到服务端失败')
+  }
+}
+
+onMounted(() => {
+  getCustomCSS()
+})
 </script>
 
 <template>
@@ -150,8 +200,30 @@ watch(
         </template>
         <VListItemTitle>{{ theme.title }}</VListItemTitle>
       </VListItem>
+      <VListItem @click="cssDialog = true">
+        <template #prepend>
+          <VIcon icon="mdi-palette" />
+        </template>
+        <VListItemTitle>自定义</VListItemTitle>
+      </VListItem>
     </VList>
   </VMenu>
+  <!-- 自定义 CSS -- -->
+  <VDialog v-model="cssDialog" persistent max-width="50rem">
+    <VCard title="自定义主题风格">
+      <DialogCloseBtn @click="cssDialog = false" />
+      <VDivider />
+      <VAceEditor v-model:value="customCSS" lang="css" :theme="editorTheme" style="block-size: 30rem" />
+      <VCardText class="text-center">
+        <VBtn @click="saveCustomCSS" class="w-1/2">
+          <template #prepend>
+            <VIcon icon="mdi-content-save" />
+          </template>
+          保存
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
 </template>
 
 <style lang="sass">

src/ace-config.ts

@@ -8,6 +8,8 @@ import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url'
 
 import modeYamlUrl from 'ace-builds/src-noconflict/mode-yaml?url'
 
+import modeCssUrl from 'ace-builds/src-noconflict/mode-css?url'
+
 import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url'
 
 import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url'
@@ -24,6 +26,8 @@ import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url'
 
 import workerYamlUrl from 'ace-builds/src-noconflict/worker-yaml?url'
 
+import workerCssUrl from 'ace-builds/src-noconflict/worker-css?url'
+
 import snippetsHtmlUrl from 'ace-builds/src-noconflict/snippets/html?url'
 
 import snippetsJsUrl from 'ace-builds/src-noconflict/snippets/javascript?url'
@@ -32,12 +36,15 @@ import snippetsYamlUrl from 'ace-builds/src-noconflict/snippets/yaml?url'
 
 import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url'
 
+import snippertsCssUrl from 'ace-builds/src-noconflict/snippets/css?url'
+
 import 'ace-builds/src-noconflict/ext-language_tools'
 
 ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
 ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
 ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl)
 ace.config.setModuleUrl('ace/mode/yaml', modeYamlUrl)
+ace.config.setModuleUrl('ace/mode/css', modeCssUrl)
 ace.config.setModuleUrl('ace/theme/github', themeGithubUrl)
 ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl)
 ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl)
@@ -46,9 +53,11 @@ ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl)
 ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl)
 ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl)
 ace.config.setModuleUrl('ace/mode/yaml_worker', workerYamlUrl)
+ace.config.setModuleUrl('ace/mode/css_worker', workerCssUrl)
 ace.config.setModuleUrl('ace/snippets/html', snippetsHtmlUrl)
 ace.config.setModuleUrl('ace/snippets/javascript', snippetsJsUrl)
 ace.config.setModuleUrl('ace/snippets/javascript', snippetsYamlUrl)
 ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl)
+ace.config.setModuleUrl('ace/snippets/css', snippertsCssUrl)
 
 ace.require('ace/ext/language_tools')