更新 FullCalendarView.vue

- 在 App.vue 中引入 API 获取背景图片，并实现背景图片的轮换功能。
- 更新主题切换逻辑，支持透明主题，并在主题变化时更新 HTML 属性。
- 在样式中添加透明主题的特定样式，确保各个组件在透明主题下的显示效果。

.env.development

@@ -1 +1,2 @@
-VITE_API_BASE_URL=http://localhost:3001/api/v1/
+VITE_API_BASE_URL=/api/v1/
+VITE_PUBLIC_VAPID_KEY=BH3w49sZA6jXUnE-yt4jO6VKh73lsdsvwoJ6Hx7fmPIDKoqGiUl2GEoZzy-iJfn4SfQQcx7yQdHf9RknwrL_lSM

.env.production

@@ -1 +1,2 @@
-VITE_API_BASE_URL=/api/v1/
+VITE_API_BASE_URL=api/v1/
+VITE_PUBLIC_VAPID_KEY=BH3w49sZA6jXUnE-yt4jO6VKh73lsdsvwoJ6Hx7fmPIDKoqGiUl2GEoZzy-iJfn4SfQQcx7yQdHf9RknwrL_lSM

.github/ISSUE_TEMPLATE/rfc.yml

@@ -0,0 +1,45 @@
+name: 功能提案
+description: Request for Comments
+title: '[RFC]'
+labels: ['RFC']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        一份提案(RFC)定位为 **「在某功能/重构的具体开发前，用于开发者间 review 技术设计/方案的文档」**，
+        目的是让协作的开发者间清晰的知道「要做什么」和「具体会怎么做」，以及所有的开发者都能公开透明的参与讨论；
+        以便评估和讨论产生的影响 (遗漏的考虑、向后兼容性、与现有功能的冲突)，
+        因此提案侧重在对解决问题的 **方案、设计、步骤** 的描述上。
+          
+        如果仅希望讨论是否添加或改进某功能本身，请使用 -> [Issue: 功能改进](https://github.com/jxxghp/MoviePilot/issues/new?assignees=&labels=feature+request&projects=&template=feature_request.yml&title=%5BFeature+Request%5D%3A+)
+  - type: textarea
+    id: background
+    attributes:
+      label: 背景 or 问题
+      description: 简单描述遇到的什么问题或需要改动什么。可以引用其他 issue、讨论、文档等。
+    validations:
+      required: true
+  - type: textarea
+    id: goal
+    attributes:
+      label: '目标 & 方案简述'
+      description: 简单描述提案此提案实现后，**预期的目标效果**，以及简单大致描述会采取的方案/步骤，可能会/不会产生什么影响。
+    validations:
+      required: true
+  - type: textarea
+    id: design
+    attributes:
+      label: '方案设计 & 实现步骤'
+      description: |
+        详细描述你设计的具体方案，可以考虑拆分列表或要点，一步步描述具体打算如何实现的步骤和相关细节。
+        这部份不需要一次性写完整，即使在创建完此提案 issue 后，依旧可以再次编辑修改。
+    validations:
+      required: false
+  - type: textarea
+    id: alternative
+    attributes:
+      label: '替代方案 & 对比'
+      description: |
+        [可选] 为来实现目标效果，还考虑过什么其他方案，有什么对比？
+    validations:
+      required: false

.github/workflows/build.yml

@@ -1,12 +1,12 @@
-name: Build moviepilot frontend
+name: Build Moviepilot-Frontend v2
 
 on:
   workflow_dispatch:
   push:
     branches:
-      - main
+      - v2
     paths:
-      - package.json
+      - 'package.json'
 
 jobs:
   build:
@@ -24,23 +24,39 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'yarn'
 
+      - name: Download Icons
+        run: |
+          pwd
+          curl -sL "https://github.com/jxxghp/MoviePilot-Plugins/archive/refs/heads/main.zip" | busybox unzip -d /tmp -
+          mv /tmp/MoviePilot-Plugins-main/icons public/plugin_icon
+          rm -rf /tmp/MoviePilot-Plugins-main
+
       - name: Build frontend
         id: build_frontend
         run: |
           yarn
           yarn build
+          echo "$frontend_version" > dist/version.txt
           zip -r dist.zip dist
 
+      - name: Delete Release
+        uses: dev-drprasad/delete-tag-and-release@v1.1
+        with:
+          tag_name: ${{ env.frontend_version }}
+          delete_release: true
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Generate Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         with:
           tag_name: ${{ env.frontend_version }}
           name: ${{ env.frontend_version }}
           draft: false
           prerelease: false
+          make_latest: false
           files: |
             dist.zip
         env:

.gitignore

@@ -11,6 +11,7 @@ node_modules
 .DS_Store
 dist
 dist-ssr
+dev-dist
 *.local
 
 /cypress/videos/
@@ -32,3 +33,4 @@ dist-ssr
 
 # iconify dist files
 src/@iconify/*.js
+public/plugin_icon/**

.stylelintrc.json

@@ -21,14 +21,9 @@
         }
     ],
     "rules": {
-        "max-line-length": [
-            120,
-            {
-                "ignore": "comments"
-            }
-        ],
         "liberty/use-logical-spec": true,
         "selector-class-pattern": null,
         "color-function-notation": null
-    }
+    },
-}
+    "fix": true
+}

.vscode/settings.json

@@ -6,15 +6,13 @@
   "[javascript]": {
     "editor.formatOnSave": false
   },
-  "[typescript]": {
-    "editor.formatOnSave": false
-  },
   "[markdown]": {
     "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
   },
   // SCSS
   "[scss]": {
-    "editor.defaultFormatter": "stylelint.vscode-stylelint"
+    "editor.defaultFormatter": "stylelint.vscode-stylelint",
+    "editor.formatOnSave": false
   },
   // JSON
   "[json]": {
@@ -25,14 +23,18 @@
   },
   // Vue
   "[vue]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   // Extension: Volar
   "volar.preview.port": 3000,
   "volar.completion.preferredTagNameCase": "pascal",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
+    "source.fixAll.eslint": "explicit",
-    "source.fixAll.stylelint": true
+    "source.fixAll.stylelint": "explicit"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
   },
   "eslint.alwaysShowStatus": true,
   "eslint.format.enable": true,
@@ -53,6 +55,7 @@
     "stylelint",
     "touchless",
     "triggerer",
+    "unref",
     "vuetify"
   ],
   // Extension: Comment Anchors

README.md

@@ -1,35 +1,41 @@
 # MoviePilot-Frontend
 
-This template should help get you started developing with Vue 3 in Vite.
+*中文 | [English](README_EN.md)*
 
-## Recommended IDE Setup
+[MoviePilot](https://github.com/jxxghp/MoviePilot) 的前端项目，NodeJS版本：>= `v20.12.1`。
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+## 推荐的IDE设置
 
-## Type Support for `.vue` Imports in TS
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (并禁用 Vetur).
 
-Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
+## 配置Vite
 
-However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+请参阅 [Vite 配置参考](https://vitejs.dev/config/).
 
-## Customize configuration
+## 依赖安装
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
 
 ```sh
 yarn
 ```
 
-### Compile and Hot-Reload for Development
+### 开发运行
 
 ```sh
 yarn dev
 ```
 
-### Type-Check, Compile and Minify for Production
+### 编译打包
 
 ```sh
 yarn build
 ```
+
+### 静态运行
+
+1. 使用 `nginx` 等Web服务器托管 `dist` 静态文件，nginx配置参考 `public/nginx.conf`。
+
+2. 使用 `node` 命令直接运行`service.js`，默认监听 `3000` 端口，设置环境变量 `NGINX_PORT` 来调整运行端口。
+
+```shell
+node dist/service.js
+```

README_EN.md

@@ -0,0 +1,41 @@
+# MoviePilot-Frontend
+
+*[中文](README.md) | English*
+
+Frontend project for [MoviePilot](https://github.com/jxxghp/MoviePilot), NodeJS version: >= `v20.12.1`.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (disable Vetur).
+
+## Vite Configuration
+
+Please refer to [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Installation
+
+```sh
+yarn
+```
+
+### Development
+
+```sh
+yarn dev
+```
+
+### Build
+
+```sh
+yarn build
+```
+
+### Production Deployment
+
+1. Use `nginx` or other web servers to host the `dist` static files. See `public/nginx.conf` for nginx configuration reference.
+
+2. Use `node` command to run `service.js` directly. It listens on port `3000` by default. Set the environment variable `NGINX_PORT` to adjust the port.
+
+```shell
+node dist/service.js
+``` 

auto-imports.d.ts

@@ -1,10 +1,13 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -19,13 +22,12 @@ declare global {
   const createGenericProjection: typeof import('@vueuse/math')['createGenericProjection']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
-  const createLogger: typeof import('vuex')['createLogger']
+  const createPinia: typeof import('pinia')['createPinia']
-  const createNamespacedHelpers: typeof import('vuex')['createNamespacedHelpers']
   const createProjection: typeof import('@vueuse/math')['createProjection']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createRef: typeof import('@vueuse/core')['createRef']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
-  const createStore: typeof import('vuex')['createStore']
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
@@ -33,14 +35,17 @@ declare global {
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -50,10 +55,11 @@ declare global {
   const logicNot: typeof import('@vueuse/math')['logicNot']
   const logicOr: typeof import('@vueuse/math')['logicOr']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
-  const mapActions: typeof import('vuex')['mapActions']
+  const mapActions: typeof import('pinia')['mapActions']
-  const mapGetters: typeof import('vuex')['mapGetters']
+  const mapGetters: typeof import('pinia')['mapGetters']
-  const mapMutations: typeof import('vuex')['mapMutations']
+  const mapState: typeof import('pinia')['mapState']
-  const mapState: typeof import('vuex')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
@@ -64,6 +70,7 @@ declare global {
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
   const onDeactivated: typeof import('vue')['onDeactivated']
+  const onElementRemoval: typeof import('@vueuse/core')['onElementRemoval']
   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
   const onLongPress: typeof import('@vueuse/core')['onLongPress']
@@ -75,8 +82,10 @@ declare global {
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -93,9 +102,12 @@ declare global {
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
@@ -105,6 +117,7 @@ declare global {
   const toReactive: typeof import('@vueuse/core')['toReactive']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -143,9 +156,11 @@ declare global {
   const useCeil: typeof import('@vueuse/math')['useCeil']
   const useClamp: typeof import('@vueuse/math')['useClamp']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCountdown: typeof import('@vueuse/core')['useCountdown']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
@@ -185,6 +200,8 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useI18n: typeof import('vue-i18n')['useI18n']
+  const useId: typeof import('vue')['useId']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
@@ -204,6 +221,7 @@ declare global {
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
   const useMin: typeof import('@vueuse/math')['useMin']
+  const useModel: typeof import('vue')['useModel']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -229,6 +247,7 @@ declare global {
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePreferredReducedTransparency: typeof import('@vueuse/core')['usePreferredReducedTransparency']
   const usePrevious: typeof import('@vueuse/core')['usePrevious']
   const useProjection: typeof import('@vueuse/math')['useProjection']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
@@ -237,6 +256,7 @@ declare global {
   const useRound: typeof import('@vueuse/math')['useRound']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
+  const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
@@ -251,11 +271,11 @@ declare global {
   const useStepper: typeof import('@vueuse/core')['useStepper']
   const useStorage: typeof import('@vueuse/core')['useStorage']
   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
-  const useStore: typeof import('vuex')['useStore']
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSum: typeof import('@vueuse/math')['useSum']
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
@@ -308,13 +328,17 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }
+
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
@@ -329,13 +353,12 @@ declare module 'vue' {
     readonly createGenericProjection: UnwrapRef<typeof import('@vueuse/math')['createGenericProjection']>
     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
-    readonly createLogger: UnwrapRef<typeof import('vuex')['createLogger']>
+    readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
-    readonly createNamespacedHelpers: UnwrapRef<typeof import('vuex')['createNamespacedHelpers']>
     readonly createProjection: UnwrapRef<typeof import('@vueuse/math')['createProjection']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createRef: UnwrapRef<typeof import('@vueuse/core')['createRef']>
     readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
-    readonly createStore: UnwrapRef<typeof import('vuex')['createStore']>
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
@@ -343,14 +366,17 @@ declare module 'vue' {
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -360,10 +386,11 @@ declare module 'vue' {
     readonly logicNot: UnwrapRef<typeof import('@vueuse/math')['logicNot']>
     readonly logicOr: UnwrapRef<typeof import('@vueuse/math')['logicOr']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
-    readonly mapActions: UnwrapRef<typeof import('vuex')['mapActions']>
+    readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
-    readonly mapGetters: UnwrapRef<typeof import('vuex')['mapGetters']>
+    readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
-    readonly mapMutations: UnwrapRef<typeof import('vuex')['mapMutations']>
+    readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
-    readonly mapState: UnwrapRef<typeof import('vuex')['mapState']>
+    readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
+    readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
@@ -374,6 +401,7 @@ declare module 'vue' {
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
     readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onElementRemoval: UnwrapRef<typeof import('@vueuse/core')['onElementRemoval']>
     readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
     readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
     readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
@@ -385,8 +413,10 @@ declare module 'vue' {
     readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -403,9 +433,12 @@ declare module 'vue' {
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
+    readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
+    readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
     readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
     readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
     readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
@@ -415,6 +448,7 @@ declare module 'vue' {
     readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
@@ -453,9 +487,11 @@ declare module 'vue' {
     readonly useCeil: UnwrapRef<typeof import('@vueuse/math')['useCeil']>
     readonly useClamp: UnwrapRef<typeof import('@vueuse/math')['useClamp']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
+    readonly useCountdown: UnwrapRef<typeof import('@vueuse/core')['useCountdown']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
@@ -495,6 +531,8 @@ declare module 'vue' {
     readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
+    readonly useId: UnwrapRef<typeof import('vue')['useId']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
     readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
@@ -514,6 +552,7 @@ declare module 'vue' {
     readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
     readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
     readonly useMin: UnwrapRef<typeof import('@vueuse/math')['useMin']>
+    readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
     readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
@@ -539,6 +578,7 @@ declare module 'vue' {
     readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
     readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
     readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
+    readonly usePreferredReducedTransparency: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedTransparency']>
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
     readonly useProjection: UnwrapRef<typeof import('@vueuse/math')['useProjection']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
@@ -547,6 +587,7 @@ declare module 'vue' {
     readonly useRound: UnwrapRef<typeof import('@vueuse/math')['useRound']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useSSRWidth: UnwrapRef<typeof import('@vueuse/core')['useSSRWidth']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
@@ -561,11 +602,11 @@ declare module 'vue' {
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
-    readonly useStore: UnwrapRef<typeof import('vuex')['useStore']>
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
     readonly useSum: UnwrapRef<typeof import('@vueuse/math')['useSum']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
+    readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
     readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
     readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
@@ -615,4 +656,4 @@ declare module 'vue' {
     readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
     readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
   }
-}
+}

components.d.ts

@@ -1,20 +1,24 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
+// biome-ignore lint: disable
-
 export {}
 
-declare module '@vue/runtime-core' {
+/* prettier-ignore */
+declare module 'vue' {
   export interface GlobalComponents {
     DialogCloseBtn: typeof import('./src/@core/components/DialogCloseBtn.vue')['default']
     ErrorHeader: typeof import('./src/@core/components/ErrorHeader.vue')['default']
     ExistIcon: typeof import('./src/@core/components/ExistIcon.vue')['default']
+    LoadingBanner: typeof import('./src/@core/components/LoadingBanner.vue')['default']
+    LocaleSwitcher: typeof import('./src/@core/components/LocaleSwitcher.vue')['default']
     MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
+    PageContentTitle: typeof import('./src/@core/components/PageContentTitle.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ScrollToTopBtn: typeof import('./src/@core/components/ScrollToTopBtn.vue')['default']
+    StatIcon: typeof import('./src/@core/components/StatIcon.vue')['default']
     ThemeSwitcher: typeof import('./src/@core/components/ThemeSwitcher.vue')['default']
   }
 }

index.html

@@ -1,162 +1,214 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="
+    overflow: hidden auto;
+    min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
+    background: var(--initial-loader-bg, #fff);
+  ">
 
 <head>
+  <meta http-equiv="pragma" content="no-cache" />
+  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="expires" content="0" />
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width, user-scalable=no" />
   <title>MoviePilot</title>
-  <meta name="Robots" content="noindex,nofollow,noarchive">
+  <meta name="Robots" content="noindex,nofollow,noarchive" />
-  <meta name="referrer" content="origin">
+  <meta name="referrer" content="origin" />
-  <link rel="icon" type="image/png" href="/logo.png">
+  <link rel="icon" type="image/png" href="/logo.png" />
-  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-  <link rel="apple-touch-startup-image" href="/splash/apple-splash.jpg">
+  <link rel="apple-touch-startup-image" href="/splash/apple-splash.jpg" />
-  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-  <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
   <meta name="mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-  <meta name="apple-mobile-web-app-title" content="MoviePilot">
+  <meta name="apple-mobile-web-app-title" content="MoviePilot" />
-  <meta name="description" content="MoviePilot">
+  <meta name="description" content="MoviePilot" />
-  <meta name="format-detection" content="telephone=no">
+  <meta name="format-detection" content="telephone=no" />
-  <meta name="referrer" content="never">
+  <meta name="referrer" content="never" />
   <meta name="msapplication-TileColor" content="#7D34FD" />
-  <meta name="color-scheme" content="light dark">
+  <meta name="color-scheme" content="light dark" />
-  <meta name="theme-color" content="#28243D" media="(prefers-color-scheme: dark)">
+  <meta name="theme-color" content="#0E1116" media="(prefers-color-scheme: dark)" />
-  <meta name="theme-color" content="#F4F5FA" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#F4F5FA" media="(prefers-color-scheme: light)" />
   <meta name="HandheldFriendly" content="True" />
   <meta name="MobileOptimized" content="320" />
   <link rel="stylesheet" type="text/css" href="/loader.css" />
+  <script>
+    const loaderColor = localStorage.getItem('materio-initial-loader-bg') || '#FFFFFF'
+    if (loaderColor) document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
+    const primaryColor = localStorage.getItem('materio-initial-loader-color') || '#9155FD'
+    if (primaryColor) document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
+  </script>
 </head>
 
-<body>
+<body style="margin: 0">
-  <div id="app">
+  <div id="loading-bg">
-    <div id="loading-bg">
+    <div class="loading-logo">
-      <div class="loading-logo">
+      <!-- Logo -->
-        <!-- Logo -->
+      <svg width="160px" height="160px" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg"
-        <svg width="100px" height="100px" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2">
-          xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/"
+        <style>
-          style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+          /* 添加SVG内部的动画样式 */
-          <g transform="matrix(1,0,0,1,-2606,-236)">
+          @keyframes pulse {
-            <g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
+
-              <rect x="0" y="0" width="192" height="192" style="fill:none;" />
+            0%,
-              <g transform="matrix(-0.800798,0.462341,-0.769972,-1.33363,1869.11,-896.718)">
+            100% {
+              opacity: 0.8;
+            }
+
+            50% {
+              opacity: 1;
+            }
+          }
+
+          @keyframes glow {
+
+            0%,
+            100% {
+              filter: drop-shadow(0 0 3px rgba(141, 81, 249, 0.3));
+            }
+
+            50% {
+              filter: drop-shadow(0 0 6px rgba(141, 81, 249, 0.6));
+            }
+          }
+
+          /* 为各个元素添加动画 */
+          #a2-c {
+            filter: drop-shadow(0 0 5px rgba(141, 81, 249, 0.3));
+            animation: glow 3s ease-in-out infinite;
+          }
+
+          path {
+            animation: pulse 2s ease-in-out infinite;
+          }
+
+          /* 错开不同元素的动画开始时间 */
+          g:nth-child(2) path {
+            animation-delay: 0.3s;
+          }
+
+          g:nth-child(3) path {
+            animation-delay: 0.6s;
+          }
+
+          g:nth-child(4) path {
+            animation-delay: 0.9s;
+          }
+
+          g:nth-child(5) path {
+            animation-delay: 1.2s;
+          }
+        </style>
+        <g transform="matrix(1,0,0,1,-2606,-236)">
+          <g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
+            <rect x="0" y="0" width="192" height="192" style="fill: none" />
+            <g transform="matrix(-0.800798,0.462341,-0.769972,-1.33363,1869.11,-896.718)">
+              <path
+                d="M2241.27,-28.175C2238.86,-28.931 2236.64,-29.181 2234.48,-29.254L2159.78,-29.286L2165.01,-11.207C2167.16,-13.121 2169.64,-13.722 2172.26,-13.808L2222.12,-13.822C2223.52,-13.824 2225,-13.701 2226.78,-13.108L2241.27,-28.175Z"
+                style="fill: url(#_Linear1)" />
+            </g>
+            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+              <path
+                d="M2205.67,331.428L2205.67,332.25L2205.67,352.835C2205.67,354.263 2204.91,355.583 2203.67,356.298C2202.43,357.012 2200.91,357.013 2199.67,356.3L2190.78,351.174C2189.73,350.595 2188.83,350.083 2188.03,349.59L2187.45,349.257C2186.66,348.725 2185.91,348.142 2185.21,347.461C2185.08,347.331 2184.95,347.198 2184.82,347.061C2184.26,346.457 2183.75,345.778 2183.3,344.995C2182.16,343.05 2181.69,341.024 2181.68,338.948L2181.67,268.923L2209.77,274.425C2207.5,275.639 2205.68,278.3 2205.67,281.429L2205.67,331.428Z"
+                style="fill: url(#_Linear2)" />
+            </g>
+            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+              <path
+                d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2295.93,363.064C2295.73,363.184 2295.53,363.301 2295.32,363.414L2295.93,363.064Z"
+                style="fill: rgb(141, 81, 249)" />
+            </g>
+            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+              <path
+                d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2299.79,360.238C2299.79,360.238 2320.03,348.464 2320.04,348.461C2323.1,346.372 2324.69,343.444 2325.17,339.877C2325.17,339.877 2325.17,269.846 2325.17,269.839C2325.06,267.482 2324.56,265.739 2323.61,264.133C2322.56,262.445 2321.26,261.005 2319.55,259.97L2304.42,251.217C2303.96,250.949 2303.39,250.948 2302.92,251.216C2302.46,251.484 2302.17,251.979 2302.17,252.515L2302.17,276.775L2302.17,277.879L2302.17,352.926C2302.17,352.933 2302.17,352.941 2302.17,352.948C2302.04,355.861 2301.23,358.279 2299.79,360.238Z"
+                style="fill: url(#_Linear3)" />
+            </g>
+            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+              <path
+                d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256Z"
+                style="fill: rgb(165, 118, 255)" />
+            </g>
+            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+              <path
+                d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256ZM2253.68,223.756C2251.6,223.789 2249.87,224.269 2248.47,224.996L2188.17,259.754C2184.35,261.992 2182.35,265.367 2182.18,269.874C2182.18,269.874 2182.17,292.759 2182.17,292.757C2183.25,290.047 2185.13,288.051 2187.62,286.607L2249.57,250.919C2249.58,250.917 2249.58,250.915 2249.59,250.913C2250.83,250.243 2252.17,249.839 2253.67,249.847C2255.21,249.841 2256.54,250.253 2257.76,250.914C2257.76,250.916 2257.76,250.917 2257.76,250.919L2274.92,260.807C2275.38,261.075 2275.95,261.074 2276.42,260.806C2276.88,260.538 2277.17,260.043 2277.17,259.508L2277.17,237.568C2277.17,236.317 2276.5,235.16 2275.42,234.535C2275.42,234.535 2258.88,225 2258.87,224.996C2256.87,224.049 2255.2,223.746 2253.68,223.756Z"
+                style="fill: url(#_Linear4)" />
+            </g>
+            <g transform="matrix(0.800798,0.462341,0.769972,-1.33363,-1677.22,-896.858)">
+              <path
+                d="M2241.55,-28.184C2239.1,-28.989 2236.83,-29.204 2234.68,-29.295C2234.68,-29.295 2220.82,-29.3 2215.03,-29.303C2213.48,-29.303 2212.05,-28.808 2211.28,-28.004C2208.65,-25.275 2202.56,-18.936 2199.45,-15.709C2199.07,-15.306 2199.07,-14.809 2199.46,-14.406C2199.85,-14.004 2200.57,-13.758 2201.34,-13.761C2208.36,-13.788 2222.72,-13.845 2222.72,-13.845C2223.98,-13.851 2225.44,-13.657 2227.06,-13.117L2241.55,-28.184Z"
+                style="fill: rgb(141, 81, 249)" />
+            </g>
+            <g transform="matrix(-4.32309,0,0,12.4454,9610.35,-1450.35)">
+              <path
+                d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z"
+                style="fill: rgb(104, 0, 197)" />
+              <clipPath id="_clip5">
                 <path
-                  d="M2241.27,-28.175C2238.86,-28.931 2236.64,-29.181 2234.48,-29.254L2159.78,-29.286L2165.01,-11.207C2167.16,-13.121 2169.64,-13.722 2172.26,-13.808L2222.12,-13.822C2223.52,-13.824 2225,-13.701 2226.78,-13.108L2241.27,-28.175Z"
+                  d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z" />
-                  style="fill:url(#_Linear1);" />
+              </clipPath>
-              </g>
+              <g clip-path="url(#_clip5)">
-              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+                <g transform="matrix(0.124502,0.074907,0.206623,-0.0414384,1997.62,-7.40235)">
-                <path
-                  d="M2205.67,331.428L2205.67,332.25L2205.67,352.835C2205.67,354.263 2204.91,355.583 2203.67,356.298C2202.43,357.012 2200.91,357.013 2199.67,356.3L2190.78,351.174C2189.73,350.595 2188.83,350.083 2188.03,349.59L2187.45,349.257C2186.66,348.725 2185.91,348.142 2185.21,347.461C2185.08,347.331 2184.95,347.198 2184.82,347.061C2184.26,346.457 2183.75,345.778 2183.3,344.995C2182.16,343.05 2181.69,341.024 2181.68,338.948L2181.67,268.923L2209.77,274.425C2207.5,275.639 2205.68,278.3 2205.67,281.429L2205.67,331.428Z"
-                  style="fill:url(#_Linear2);" />
-              </g>
-              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-                <path
-                  d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2295.93,363.064C2295.73,363.184 2295.53,363.301 2295.32,363.414L2295.93,363.064Z"
-                  style="fill:rgb(141,81,249);" />
-              </g>
-              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-                <path
-                  d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2299.79,360.238C2299.79,360.238 2320.03,348.464 2320.04,348.461C2323.1,346.372 2324.69,343.444 2325.17,339.877C2325.17,339.877 2325.17,269.846 2325.17,269.839C2325.06,267.482 2324.56,265.739 2323.61,264.133C2322.56,262.445 2321.26,261.005 2319.55,259.97L2304.42,251.217C2303.96,250.949 2303.39,250.948 2302.92,251.216C2302.46,251.484 2302.17,251.979 2302.17,252.515L2302.17,276.775L2302.17,277.879L2302.17,352.926C2302.17,352.933 2302.17,352.941 2302.17,352.948C2302.04,355.861 2301.23,358.279 2299.79,360.238Z"
-                  style="fill:url(#_Linear3);" />
-              </g>
-              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-                <path
-                  d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256Z"
-                  style="fill:rgb(165,118,255);" />
-              </g>
-              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-                <path
-                  d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256ZM2253.68,223.756C2251.6,223.789 2249.87,224.269 2248.47,224.996L2188.17,259.754C2184.35,261.992 2182.35,265.367 2182.18,269.874C2182.18,269.874 2182.17,292.759 2182.17,292.757C2183.25,290.047 2185.13,288.051 2187.62,286.607L2249.57,250.919C2249.58,250.917 2249.58,250.915 2249.59,250.913C2250.83,250.243 2252.17,249.839 2253.67,249.847C2255.21,249.841 2256.54,250.253 2257.76,250.914C2257.76,250.916 2257.76,250.917 2257.76,250.919L2274.92,260.807C2275.38,261.075 2275.95,261.074 2276.42,260.806C2276.88,260.538 2277.17,260.043 2277.17,259.508L2277.17,237.568C2277.17,236.317 2276.5,235.16 2275.42,234.535C2275.42,234.535 2258.88,225 2258.87,224.996C2256.87,224.049 2255.2,223.746 2253.68,223.756Z"
-                  style="fill:url(#_Linear4);" />
-              </g>
-              <g transform="matrix(0.800798,0.462341,0.769972,-1.33363,-1677.22,-896.858)">
-                <path
-                  d="M2241.55,-28.184C2239.1,-28.989 2236.83,-29.204 2234.68,-29.295C2234.68,-29.295 2220.82,-29.3 2215.03,-29.303C2213.48,-29.303 2212.05,-28.808 2211.28,-28.004C2208.65,-25.275 2202.56,-18.936 2199.45,-15.709C2199.07,-15.306 2199.07,-14.809 2199.46,-14.406C2199.85,-14.004 2200.57,-13.758 2201.34,-13.761C2208.36,-13.788 2222.72,-13.845 2222.72,-13.845C2223.98,-13.851 2225.44,-13.657 2227.06,-13.117L2241.55,-28.184Z"
-                  style="fill:rgb(141,81,249);" />
-              </g>
-              <g transform="matrix(-4.32309,0,0,12.4454,9610.35,-1450.35)">
-                <path
-                  d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z"
-                  style="fill:rgb(104,0,197);" />
-                <clipPath id="_clip5">
                   <path
-                    d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z" />
+                    d="M1726.17,-64.249L1708.16,-72.303L1708.05,-23.514L1721.88,-32.386C1722.96,-33.241 1723.09,-33.944 1723.15,-34.636L1723.15,-54.373C1723.19,-56.238 1724.96,-57.594 1726.87,-56.686L1726.17,-64.249Z"
-                </clipPath>
+                    style="fill: url(#_Linear6)" />
-                <g clip-path="url(#_clip5)">
+                </g>
-                  <g transform="matrix(0.124502,0.074907,0.206623,-0.0414384,1997.62,-7.40235)">
+                <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
-                    <path
+                  <path
-                      d="M1726.17,-64.249L1708.16,-72.303L1708.05,-23.514L1721.88,-32.386C1722.96,-33.241 1723.09,-33.944 1723.15,-34.636L1723.15,-54.373C1723.19,-56.238 1724.96,-57.594 1726.87,-56.686L1726.17,-64.249Z"
+                    d="M1726.17,-45.661L1704.47,-40.254C1706.28,-40.527 1708.14,-40.212 1708.16,-39.416L1708.16,-18.976L1726.17,-18.976L1726.17,-45.661Z"
-                      style="fill:url(#_Linear6);" />
+                    style="fill: rgb(141, 81, 249)" />
-                  </g>
+                </g>
-                  <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
+                <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
-                    <path
+                  <path
-                      d="M1726.17,-45.661L1704.47,-40.254C1706.28,-40.527 1708.14,-40.212 1708.16,-39.416L1708.16,-18.976L1726.17,-18.976L1726.17,-45.661Z"
+                    d="M1726.17,-45.661L1726.17,-18.976L1708.16,-18.976L1708.16,-39.416C1707.79,-40.732 1704.5,-40.298 1702.68,-40.025L1726.17,-45.661ZM1705.49,-40.491C1706.2,-40.507 1706.87,-40.464 1707.4,-40.327C1708.01,-40.173 1708.48,-39.899 1708.62,-39.436C1708.62,-39.429 1708.62,-39.423 1708.62,-39.416L1708.62,-19.152C1708.62,-19.152 1725.72,-19.152 1725.72,-19.152L1725.72,-45.345L1705.49,-40.491Z"
-                      style="fill:rgb(141,81,249);" />
+                    style="fill: url(#_Radial7)" />
-                  </g>
-                  <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
-                    <path
-                      d="M1726.17,-45.661L1726.17,-18.976L1708.16,-18.976L1708.16,-39.416C1707.79,-40.732 1704.5,-40.298 1702.68,-40.025L1726.17,-45.661ZM1705.49,-40.491C1706.2,-40.507 1706.87,-40.464 1707.4,-40.327C1708.01,-40.173 1708.48,-39.899 1708.62,-39.436C1708.62,-39.429 1708.62,-39.423 1708.62,-39.416L1708.62,-19.152C1708.62,-19.152 1725.72,-19.152 1725.72,-19.152L1725.72,-45.345L1705.49,-40.491Z"
-                      style="fill:url(#_Radial7);" />
-                  </g>
                 </g>
               </g>
             </g>
           </g>
-          <defs>
+        </g>
-            <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
+        <defs>
-              gradientTransform="matrix(-70.0711,-0.927611,1.54482,-42.0752,2233.59,-20.1891)">
+          <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
-              <stop offset="0" style="stop-color:rgb(141,81,249);stop-opacity:1" />
+            gradientTransform="matrix(-70.0711,-0.927611,1.54482,-42.0752,2233.59,-20.1891)">
-              <stop offset="1" style="stop-color:rgb(116,50,223);stop-opacity:1" />
+            <stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" />
-            </linearGradient>
+            <stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
-            <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
+          </linearGradient>
-              gradientTransform="matrix(4.78193e-15,-78.0949,78.0949,4.78193e-15,2195.72,354.021)">
+          <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
-              <stop offset="0" style="stop-color:rgb(141,81,249);stop-opacity:1" />
+            gradientTransform="matrix(4.78193e-15,-78.0949,78.0949,4.78193e-15,2195.72,354.021)">
-              <stop offset="1" style="stop-color:rgb(116,50,223);stop-opacity:1" />
+            <stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" />
-            </linearGradient>
+            <stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
-            <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
+          </linearGradient>
-              gradientTransform="matrix(41.6089,41.5866,-41.5866,41.6089,2282.31,262.837)">
+          <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
-              <stop offset="0" style="stop-color:rgb(211,187,255);stop-opacity:1" />
+            gradientTransform="matrix(41.6089,41.5866,-41.5866,41.6089,2282.31,262.837)">
-              <stop offset="1" style="stop-color:rgb(211,187,255);stop-opacity:0" />
+            <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
-            </linearGradient>
+            <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
-            <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
+          </linearGradient>
-              gradientTransform="matrix(9.25616,16.7005,-16.7005,9.25616,2215,243.712)">
+          <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
-              <stop offset="0" style="stop-color:rgb(211,187,255);stop-opacity:1" />
+            gradientTransform="matrix(9.25616,16.7005,-16.7005,9.25616,2215,243.712)">
-              <stop offset="1" style="stop-color:rgb(211,187,255);stop-opacity:0" />
+            <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
-            </linearGradient>
+            <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
-            <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
+          </linearGradient>
-              gradientTransform="matrix(-0.130164,-61.9937,59.4003,-0.135847,1711.63,-25.7957)">
+          <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
-              <stop offset="0" style="stop-color:rgb(116,50,223);stop-opacity:1" />
+            gradientTransform="matrix(-0.130164,-61.9937,59.4003,-0.135847,1711.63,-25.7957)">
-              <stop offset="0.51" style="stop-color:rgb(110,38,217);stop-opacity:1" />
+            <stop offset="0" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
-              <stop offset="1" style="stop-color:rgb(91,0,197);stop-opacity:1" />
+            <stop offset="0.51" style="stop-color: rgb(110, 38, 217); stop-opacity: 1" />
-            </linearGradient>
+            <stop offset="1" style="stop-color: rgb(91, 0, 197); stop-opacity: 1" />
-            <radialGradient id="_Radial7" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+          </linearGradient>
-              gradientTransform="matrix(13.8659,4.71436,-12.1609,5.37534,1708.16,-32.287)">
+          <radialGradient id="_Radial7" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
-              <stop offset="0" style="stop-color:rgb(211,187,255);stop-opacity:1" />
+            gradientTransform="matrix(13.8659,4.71436,-12.1609,5.37534,1708.16,-32.287)">
-              <stop offset="1" style="stop-color:rgb(211,187,255);stop-opacity:0" />
+            <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
-            </radialGradient>
+            <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
-          </defs>
+          </radialGradient>
-        </svg>
+        </defs>
-
+      </svg>
-      </div>
+    </div>
-      <div class="loading">
+    <div class="loading">
-        <div class="effect-1 effects"></div>
+      <div class="effect-1 effects"></div>
-        <div class="effect-2 effects"></div>
+      <div class="effect-2 effects"></div>
-        <div class="effect-3 effects"></div>
+      <div class="effect-3 effects"></div>
-      </div>
     </div>
   </div>
+  <div id="app"></div>
   <script type="module" src="/src/main.ts"></script>
-  <script>
-    const loaderColor = localStorage.getItem('materio-initial-loader-bg') || '#FFFFFF'
-    const primaryColor = localStorage.getItem('materio-initial-loader-color') || '#9155FD'
-
-    if (loaderColor)
-      document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
-
-    if (primaryColor)
-      document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
-  </script>
 </body>
 
 </html>

package.json

@@ -1,7 +1,9 @@
 {
   "name": "moviepilot",
-  "version": "1.2.0-1",
+  "version": "2.4.3",
   "private": true,
+  "type": "module",
+  "bin": "dist/service.js",
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
@@ -9,92 +11,105 @@
     "typecheck": "vue-tsc --noEmit",
     "lint": "eslint . -c .eslintrc.js --fix --ext .ts,.js,.vue,.tsx,.jsx",
     "build:icons": "tsc -b src/@iconify && node src/@iconify/build-icons.js",
-    "postinstall": "npm run build:icons"
+    "postinstall": "npm run build:icons",
+    "pkg": "pkg . -t node18-win-x64 -o MoviePilot-Frontend.exe"
+  },
+  "pkg": {
+    "assets": [
+      "dist/**/*"
+    ]
   },
   "dependencies": {
-    "@casl/ability": "^6.2.0",
+    "@fullcalendar/core": "^6.1.15",
-    "@casl/vue": "^2.2.0",
+    "@fullcalendar/daygrid": "^6.1.15",
-    "@floating-ui/dom": "1.2.8",
+    "@fullcalendar/interaction": "^6.1.15",
-    "@vueuse/core": "^10.1.2",
+    "@fullcalendar/list": "^6.1.15",
-    "@vueuse/math": "^10.1.2",
+    "@fullcalendar/timegrid": "^6.1.15",
-    "apexcharts-clevision": "^3.28.5",
+    "@fullcalendar/vue3": "^6.1.15",
-    "axios": "1.4.0",
+    "@iconify/utils": "^2.2.1",
-    "axios-mock-adapter": "^1.21.4",
+    "@types/js-cookie": "^3.0.6",
-    "chart.js": "^4.1.2",
+    "@vue-flow/background": "^1.3.2",
-    "jwt-decode": "^3.1.2",
+    "@vue-flow/controls": "^1.1.2",
+    "@vue-flow/core": "^1.42.1",
+    "@vue-flow/minimap": "^1.5.2",
+    "@vue-flow/node-resizer": "^1.4.0",
+    "@vue-flow/node-toolbar": "^1.1.0",
+    "@vue-js-cron/vuetify": "^5.0.9",
+    "@vueuse/core": "^12.4.0",
+    "@vueuse/math": "^12.4.0",
+    "ace-builds": "^1.37.4",
+    "apexcharts": "^4.0.0",
+    "axios": "^1.7.9",
+    "colorthief": "^2.6.0",
+    "copy-to-clipboard": "^3.3.3",
+    "dayjs": "^1.11.13",
+    "express": "^4.21.2",
+    "express-http-proxy": "^2.1.1",
+    "js-cookie": "^3.0.5",
+    "lodash-es": "^4.17.21",
+    "mousetrap": "^1.6.5",
     "nprogress": "^0.2.0",
-    "postcss-purgecss": "^5.0.0",
+    "pinia": "^3.0.1",
-    "prismjs": "^1.29.0",
+    "pinia-plugin-persistedstate": "^4.2.0",
-    "pull-refresh-vue3": "^0.3.1",
+    "qrcode.vue": "^3.6.0",
-    "roboto-fontface": "^0.10.0",
+    "sass": "^1.83.4",
-    "sass": "^1.59.3",
+    "tailwindcss": "^ 3.4.17",
-    "tailwindcss": "^3.3.2",
+    "vue": "^3.5.13",
-    "unplugin-vue-define-options": "^1.3.5",
+    "vue-router": "^4.5.0",
-    "vite-plugin-pwa": "^0.16.4",
+    "vue-toast-notification": "^3.1.3",
-    "vue": "^3.3.2",
+    "vue3-ace-editor": "^2.2.4",
-    "vue-chartjs": "^5.2.0",
+    "vue3-apexcharts": "^1.8.0",
-    "vue-flatpickr-component": "11.0.3",
+    "vue3-perfect-scrollbar": "^2.0.0",
-    "vue-i18n": "^9.2.2",
+    "vuedraggable": "^4.1.0",
-    "vue-prism-component": "^2.0.0",
+    "vuetify": "3.7.3",
-    "vue-router": "^4.2.0",
+    "vuetify-use-dialog": "^0.6.11",
-    "vue-toast-notification": "^3",
-    "vue3-apexcharts": "^1.4.1",
-    "vue3-perfect-scrollbar": "^1.6.0",
-    "vuetify": "3.3.5",
-    "vuetify-use-dialog": "^0.6.0",
-    "vuex": "^4.1.0",
-    "vuex-persistedstate": "^4.1.0",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@antfu/eslint-config-vue": "^0.38.6",
-    "@fullcalendar/core": "^6.1.8",
-    "@fullcalendar/daygrid": "^6.1.8",
-    "@fullcalendar/interaction": "^6.1.7",
-    "@fullcalendar/list": "^6.1.7",
-    "@fullcalendar/timegrid": "^6.1.7",
-    "@fullcalendar/vue3": "^6.1.8",
     "@iconify-json/mdi": "^1.1.52",
-    "@iconify/tools": "^2.2.0",
+    "@iconify/tools": "^4.0.4",
-    "@iconify/vue": "4.1.1",
+    "@iconify/vue": "^4.3.0",
-    "@intlify/unplugin-vue-i18n": "^0.10.0",
+    "@intlify/unplugin-vue-i18n": "^6.0.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@types/lodash": "^4.14.197",
+    "@types/lodash-es": "^4.17.12",
+    "@types/mousetrap": "^1.6.15",
     "@types/node": "^20.1.4",
+    "@types/nprogress": "^0.2.3",
     "@types/webfontloader": "^1.6.34",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/parser": "^8.20.0",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.40.0",
+    "eslint": "^9.18.0",
-    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-typescript": "^3.5.1",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-promise": "^6.0.1",
+    "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-regex": "^1.10.0",
-    "eslint-plugin-sonarjs": "^0.19.0",
+    "eslint-plugin-sonarjs": "^3.0.1",
-    "eslint-plugin-unicorn": "^47.0.0",
+    "eslint-plugin-unicorn": "^56.0.1",
     "eslint-plugin-vue": "^9.12.0",
-    "postcss": "^8.4.24",
+    "postcss": "^8.5.1",
     "postcss-html": "^1.5.0",
-    "stylelint": "14.15.0",
+    "stylelint": "^16.13.2",
-    "stylelint-config-idiomatic-order": "9.0.0",
+    "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-standard-scss": "6.1.0",
+    "stylelint-config-standard-scss": "^14.0.0",
-    "stylelint-use-logical-spec": "4.1.0",
+    "stylelint-use-logical-spec": "5.0.1",
-    "type-fest": "^3.10.0",
+    "terser": "^5.36.0",
+    "type-fest": "^4.15.0",
     "typescript": "^5.0.4",
-    "unplugin-auto-import": "^0.15.1",
+    "unplugin-auto-import": "^19.0.0",
-    "unplugin-vue-components": "^0.24.1",
+    "unplugin-vue-components": "^28.0.0",
-    "vite": "^4.3.5",
+    "unplugin-vue-define-options": "^1.5.3",
-    "vite-plugin-pages": "^0.29.0",
+    "vite": "^5.4.11",
-    "vite-plugin-vue-layouts": "^0.8.0",
+    "vite-plugin-pages": "^0.32.1",
-    "vite-plugin-vuetify": "1.0.2",
+    "vite-plugin-pwa": "^0.21.1",
-    "vue-shepherd": "^3.0.0",
+    "vite-plugin-vue-layouts": "^0.11.0",
-    "vue-tsc": "^1.6.5"
+    "vite-plugin-vuetify": "2.0.4",
+    "vue-shepherd": "^4.1.0",
+    "vue-tsc": "^2.0.10",
+    "workbox-build": "^7.3.0",
+    "workbox-window": "^7.3.0"
   },
-  "packageManager": "yarn@1.22.18",
+  "packageManager": "yarn@1.22.18"
-  "resolutions": {
+}
-    "postcss": "8"
-  }
-}

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

public/loader.css

@@ -1,26 +1,32 @@
-body {
-  margin: 0;
-}
-
-html {
-  background: var(--initial-loader-bg, #fff);
-  min-block-size: calc(100% + env(safe-area-inset-top));
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
 #loading-bg {
-  position: absolute;
+  position: fixed;
+  z-index: 9999;
   display: block;
   background: var(--initial-loader-bg, #fff);
-  block-size: 100%;
+  block-size: 100vh;
-  inline-size: 100%;
+  inline-size: 100vw;
+  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
 }
 
 .loading-logo {
   position: absolute;
-  inset-block-start: 40%;
+  inset-block-start: 35%;
-  inset-inline-start: calc(50% - 50px);
+  inset-inline-start: calc(50% - 5rem);
+  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
+}
+
+/* 添加logo完成动画 - 放大虚化效果 */
+.loading-complete .loading-logo {
+  filter: blur(10px);
+  opacity: 0;
+  transform: scale(1.5);
+}
+
+/* 添加加载背景消失动画 - 放大虚化效果 */
+.loading-complete {
+  filter: blur(15px);
+  opacity: 0;
+  transform: scale(1.2);
 }
 
 .loading {
@@ -32,6 +38,12 @@ html {
   inline-size: 55px;
   inset-block-start: 80%;
   inset-inline-start: calc(50% - 27.5px);
+  transition: opacity 0.6s ease;
+}
+
+/* 完成时隐藏加载动画 */
+.loading-complete .loading {
+  opacity: 0;
 }
 
 .loading .effect-1,
@@ -82,4 +94,4 @@ html {
     opacity: 1;
     transform: rotate(1turn);
   }
-}
+}

public/manifest.json

@@ -1,80 +0,0 @@
-{
-  "name": "MoviePilot",
-  "short_name": "MoviePilot",
-  "start_url": "./",
-  "icons": [
-    {
-      "src": "./android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "./android-chrome-192x192_maskable.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "./android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "./android-chrome-512x512_maskable.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
-    }
-  ],
-  "theme_color": "#28243D",
-  "background_color": "#28243D",
-  "display": "standalone",
-  "shortcuts": [
-    {
-      "name": "推荐",
-      "url": "./ranking",
-      "icons": [
-        {
-          "src": "./sparkles-icon-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }
-      ]
-    },
-    {
-      "name": "电影订阅",
-      "url": "./subscribe-movie",
-      "icons": [
-        {
-          "src": "./clock-icon-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }
-      ]
-    },
-    {
-      "name": "电视剧订阅",
-      "url": "./subscribe-tv",
-      "icons": [
-        {
-          "src": "./clock-icon-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }
-      ]
-    },
-    {
-      "name": "设置",
-      "url": "./setting",
-      "icons": [
-        {
-          "src": "./cog-icon-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }
-      ]
-    }
-  ]
-}

public/nginx.conf

@@ -0,0 +1,120 @@
+worker_processes auto;
+
+events {
+    worker_connections 1024;
+}
+
+
+http {
+
+    sendfile on;
+
+    keepalive_timeout 3600;
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+    gzip_proxied any;
+    gzip_min_length 256;
+    gzip_vary on;
+    gzip_comp_level 6;
+
+    server {
+
+        include mime.types;
+        default_type application/octet-stream;
+
+        listen 3000;
+        listen [::]:3000;
+        server_name moviepilot;
+
+        location / {
+            # 主目录
+            expires off;
+            add_header Cache-Control "no-cache, no-store, must-revalidate";
+            root html;
+            try_files $uri $uri/ /index.html;
+        }
+
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            # 静态资源
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+            root html;
+        }
+
+        location /assets {
+            # 静态资源
+            expires 1y;
+            add_header Cache-Control "public";
+            root html;
+        }
+
+        location ~ ^/api/v1/system/(message|progress/) {
+            # SSE MIME类型设置
+            default_type text/event-stream;
+
+            # 禁用缓存
+            add_header Cache-Control no-cache;
+            add_header X-Accel-Buffering no;
+            proxy_buffering off;
+            proxy_cache off;
+
+            # 代理设置
+            proxy_pass http://backend_api;
+            proxy_http_version 1.1;
+            proxy_set_header Connection "";
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+            # 超时设置
+            proxy_read_timeout 3600s;
+        }
+
+        location /api {
+            # 后端API
+            proxy_pass http://backend_api;
+            rewrite ^.+mock-server/?(.*)$ /$1 break;
+            proxy_http_version 1.1;
+            proxy_buffering off;
+            proxy_cache off;
+            proxy_redirect off;
+            proxy_set_header Connection "";
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header Host $http_host;
+            proxy_set_header X-Nginx-Proxy true;
+
+            # 超时设置
+            proxy_read_timeout 600s;
+        }
+
+        location /cookiecloud {
+            # 后端cookiecloud地址
+            proxy_pass http://backend_api;
+            rewrite ^.+mock-server/?(.*)$ /$1 break;
+            proxy_http_version 1.1;
+            proxy_buffering off;
+            proxy_cache off;
+            proxy_redirect off;
+            proxy_set_header Connection "";
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header Host $http_host;
+            proxy_set_header X-Nginx-Proxy true;
+
+            # 超时设置
+            proxy_read_timeout 600s;
+        }
+
+    }
+
+    upstream backend_api {
+        # 后端API的地址和端口
+        server 127.0.0.1:3001;
+        # 可以添加更多后端服务器作为负载均衡
+    }
+
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

public/service.js

@@ -0,0 +1,51 @@
+const path = require('node:path')
+const express = require('express')
+const proxy = require('express-http-proxy')
+
+const app = express()
+const port = process.env.NGINX_PORT || 3000
+
+// 后端 API 地址
+const proxyConfig = {
+  URL: '127.0.0.1',
+  PORT: process.env.PORT || 3001
+}
+
+// 静态文件服务目录
+app.use(express.static(__dirname))
+
+// 配置代理中间件将请求转发给后端API
+app.use(
+  '/api',
+  proxy(`${proxyConfig.URL}:${proxyConfig.PORT}`, {
+    // 路径加上 /api 前缀
+    proxyReqPathResolver: (req) => {
+      return `/api${req.url}`
+    }
+  })
+);
+
+// 配置代理中间件将CookieCloud请求转发给后端API
+app.use(
+  '/cookiecloud',
+  proxy(`${proxyConfig.URL}:${proxyConfig.PORT}`, {
+    // 路径加上 /cookiecloud 前缀
+    proxyReqPathResolver: (req) => {
+      return `/cookiecloud${req.url}`
+    }
+  })
+);
+
+// 处理根路径的请求
+app.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, 'index.html'))
+})
+
+// 处理所有其他请求，重定向到前端入口文件
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, 'index.html'))
+})
+
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`)
+})

src/@core/components/DialogCloseBtn.vue

@@ -1,16 +1,21 @@
 <script lang="ts" setup>
+// 定义输入参数
+const props = defineProps({
+  // 是否显示
+  innerClass: String,
+})
 // 定义触发的自定义事件
-const emit = defineEmits(['click'])
+const emit = defineEmits(['click', 'update:modelValue'])
-
 // 按钮点击
 function onClick() {
+  emit('update:modelValue', false)
   emit('click')
 }
 </script>
 
 <template>
   <IconBtn
-    class="absolute right-3 top-3"
+    :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3'"
     @click.stop="onClick"
   >
     <VIcon icon="mdi-close" />

src/@core/components/ExistIcon.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="absolute top-0 right-0 flex items-center justify-between p-2">
     <div class="pointer-events-none z-40 flex items-center">
-      <div class="relative inline-flex whitespace-nowrap rounded-full border-gray-700 font-semibold leading-5 ring-gray-700">
+      <div
-        <div class="rounded-full bg-opacity-80 shadow-md w-5 border p-0 bg-green-500 border-green-400 ring-green-400 text-green-100">
+        class="relative inline-flex whitespace-nowrap rounded-full border-gray-700 font-semibold leading-5 ring-gray-700"
-          <svg
+      >
-            xmlns="http://www.w3.org/2000/svg"
+        <div
-            viewBox="0 0 20 20"
+          class="rounded-full bg-opacity-80 w-5 border p-0 bg-green-500 border-green-400 ring-green-400 text-green-100"
-            fill="currentColor"
+        >
-            aria-hidden="true"
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          >
             <path
               fill-rule="evenodd"
               d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"

src/@core/components/LoadingBanner.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+// 定义输入参数
+const props = defineProps({
+  progress: Number,
+  text: String,
+})
+</script>
+
+<template>
+  <div class="w-full text-center text-gray-500 text-sm flex flex-col items-center">
+    <VProgressCircular v-if="!props.text || !props.progress" class="mb-3" size="64" indeterminate color="primary" />
+    <VProgressCircular v-if="props.progress" class="mb-3" color="primary" :model-value="props.progress" size="64" />
+    <span>{{ props.text }}</span>
+  </div>
+</template>

src/@core/components/PageContentTitle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps({
+  // 标题
+  title: String,
+})
+</script>
+<template>
+  <div v-if="title" class="my-3 md:flex md:items-center md:justify-between">
+    <div class="min-w-0 flex-1 mx-0">
+      <h2
+        class="ms-1 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-3xl sm:leading-9 md:mb-0"
+        data-testid="page-header"
+      >
+        <span class="text-moviepilot">{{ title }}</span>
+      </h2>
+    </div>
+  </div>
+</template>

src/@core/components/ScrollToTopBtn.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+// 控制回到顶部按钮的可见性
+const showScrollToTop = ref(false)
+const scrollThreshold = 200 // 滚动多少像素后显示按钮
+
+// 滚动事件处理函数
+const handleScroll = () => {
+  showScrollToTop.value = window.scrollY > scrollThreshold
+}
+
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+onMounted(async () => {
+  // Add scroll event listener
+  window.addEventListener('scroll', handleScroll)
+  // Initial check for scroll-to-top
+  handleScroll()
+})
+
+onUnmounted(() => {
+  // Remove scroll event listener
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<template>
+  <div class="global-action-buttons d-none d-sm-block">
+    <Transition name="scroll-fade">
+      <button v-show="showScrollToTop" class="global-action-button" @click="scrollToTop">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M7 14L12 9L17 14"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    </Transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* Global Action Button Styles (FAB) */
+.global-action-buttons {
+  position: fixed;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  inset-block-end: 30px;
+  inset-inline-end: 30px;
+}
+
+.global-action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+  border-radius: 50%;
+  backdrop-filter: blur(10px);
+  background-color: rgba(var(--v-theme-background), 0.8);
+  block-size: 44px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 8%);
+  color: rgb(var(--v-theme-on-surface));
+  cursor: pointer;
+  inline-size: 44px;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+  &:hover {
+    background-color: rgba(var(--v-theme-background), 0.95);
+    color: rgb(var(--v-theme-primary));
+    transform: translateY(-4px);
+  }
+
+  svg {
+    block-size: 20px;
+    inline-size: 20px;
+    transition: all 0.3s ease;
+  }
+}
+</style>

src/@core/components/StatIcon.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+interface Props {
+  color?: string
+  message?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div class="absolute top-2 right-2 flex items-center justify-between p-2">
+    <VBadge :color="props.color" bordered>
+      <template #badge>
+        <VIcon icon="mdi-pulse"></VIcon>
+      </template>
+    </VBadge>
+  </div>
+</template>

src/@core/components/ThemeSwitcher.vue

@@ -1,138 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { useTheme } from 'vuetify'
-import type { ThemeSwitcherTheme } from '@layouts/types'
-
-const props = defineProps<{
-  themes: ThemeSwitcherTheme[]
-}>()
-
-const { name: themeName, global: globalTheme } = useTheme()
-
-const savedTheme = ref(localStorage.getItem('theme') ?? themeName)
-
-const {
-  state: currentThemeName,
-  next: getNextThemeName,
-  index: currentThemeIndex,
-} = useCycleList(
-  props.themes.map(t => t.name),
-  { initialValue: savedTheme.value },
-)
-
-function changeTheme() {
-  const nextTheme = getNextThemeName()
-
-  globalTheme.name.value = nextTheme
-  savedTheme.value = nextTheme
-  localStorage.setItem('theme', nextTheme)
-  // 修改载入时背景色
-  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
-
-  themeTransition()
-}
-
-// Update icon if theme is changed from other sources
-watch(
-  () => globalTheme.name.value,
-  (val) => {
-    currentThemeName.value = val
-  },
-)
-
-// Apply saved theme on page load
-// onMounted(() => {
-//   globalTheme.name.value = savedTheme.value
-// })
-
-function hasScrollbar(el?: Element | null) {
-  if (!el || el.nodeType !== Node.ELEMENT_NODE)
-    return false
-
-  const style = window.getComputedStyle(el)
-  return style.overflowY === 'scroll' || (style.overflowY === 'auto' && el.scrollHeight > el.clientHeight)
-}
-
-function themeTransition() {
-  const x = performance.now()
-  for (let i = 0; i++ < 1e7; (i << 9) & ((9 % 9) * 9 + 9));
-  const cost = performance.now() - x
-  if (cost > 10)
-    return
-
-  const el: HTMLElement = document.querySelector('[data-v-app]')!
-  const children = el.querySelectorAll('*') as NodeListOf<HTMLElement>
-
-  children.forEach((el) => {
-    if (hasScrollbar(el)) {
-      el.dataset.scrollX = String(el.scrollLeft)
-      el.dataset.scrollY = String(el.scrollTop)
-    }
-  })
-
-  const copy = el.cloneNode(true) as HTMLElement
-  copy.classList.add('app-copy')
-  const rect = el.getBoundingClientRect()
-  copy.style.top = `${rect.top}px`
-  copy.style.left = `${rect.left}px`
-  copy.style.width = `${rect.width}px`
-  copy.style.height = `${rect.height}px`
-
-  const targetEl = document.activeElement as HTMLElement
-  const targetRect = targetEl.getBoundingClientRect()
-  const left = targetRect.left + targetRect.width / 2 + window.scrollX
-  const top = targetRect.top + targetRect.height / 2 + window.scrollY
-  el.style.setProperty('--clip-pos', `${left}px ${top}px`)
-  el.style.removeProperty('--clip-size')
-
-  nextTick(() => {
-    el.classList.add('app-transition')
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        el.style.setProperty('--clip-size', `${Math.hypot(window.innerWidth, window.innerHeight)}px`)
-      })
-    })
-  })
-
-  document.body.append(copy)
-  ; (copy.querySelectorAll('[data-scroll-x], [data-scroll-y]') as NodeListOf<HTMLElement>).forEach((el) => {
-    el.scrollLeft = +el.dataset.scrollX!
-    el.scrollTop = +el.dataset.scrollY!
-  })
-
-  function onTransitionend(e: TransitionEvent) {
-    if (e.target === e.currentTarget) {
-      copy.remove()
-      el.removeEventListener('transitionend', onTransitionend)
-      el.removeEventListener('transitioncancel', onTransitionend)
-      el.classList.remove('app-transition')
-      el.style.removeProperty('--clip-size')
-      el.style.removeProperty('--clip-pos')
-    }
-  }
-  el.addEventListener('transitionend', onTransitionend)
-  el.addEventListener('transitioncancel', onTransitionend)
-}
-</script>
-
-<template>
-  <IconBtn @click="changeTheme">
-    <VIcon :icon="props.themes[currentThemeIndex].icon" />
-  </IconBtn>
-</template>
-
-<style lang="sass">
-// Theme transition
-.app-copy
-  position: fixed !important
-  z-index: -1 !important
-  pointer-events: none !important
-  contain: size style !important
-  overflow: clip !important
-
-.app-transition
-  --clip-size: 0
-  --clip-pos: 0 0
-  clip-path: circle(var(--clip-size) at var(--clip-pos))
-  transition: clip-path .35s ease-out
-</style>

src/@core/scss/README.md

@@ -0,0 +1,58 @@
+# SCSS结构说明
+
+## 目录整合
+
+本项目SCSS文件已完成整合：
+- 主入口文件：`src/@core/scss/index.scss`
+- 实际功能文件位于：`src/@core/scss/template/index.scss`
+
+## 整合内容
+
+- 整合了原`src/@core/scss/base`和`src/@core/scss/template`目录的功能
+- 统一使用`template`目录作为SCSS样式的主要引用点
+- 保留原有引用结构以保证向后兼容性
+
+## 整合进度
+
+已完成：
+- ✅ 主入口文件引用更新
+- ✅ mixins文件合并
+- ✅ placeholders目录下文件转移
+- ✅ perfect-scrollbar文件整合
+- ✅ vuetify相关文件整合
+- ✅ default-layout-w-vertical-nav文件整合
+- ✅ 移除了template/index.scss中对base目录组件的依赖
+- ✅ 修复了components.scss中对base/mixins的引用
+- ✅ 修复了variables.scss中对base/variables的引用
+- ✅ 修复了apex-chart.scss和full-calendar.scss的linter错误
+- ✅ 整合并移除了对vuetify/variables的依赖
+- ✅ 修复了SCSS变量名冲突问题
+- ✅ 修复了SASS模块重复加载配置问题
+- ✅ 修复了导入路径问题（misc、utils等模块的引用路径）
+
+待完成：
+- ⬜ 最终测试确保无样式问题
+- ⬜ 清理冗余文件
+
+## 使用方式
+
+在项目中引用SCSS时，应使用：
+```scss
+@use "@core/scss";
+```
+
+这将自动加载所有必要的样式文件。
+
+## 注意事项
+
+此次整合已将所有功能文件整合到template目录，不再依赖base目录的代码。现在可以安全地从外部引用template目录下的文件，但需要进行最终测试以确保样式正常工作。
+
+测试无误后，可以考虑完全删除base目录，以简化项目结构。
+
+## 最近修复
+
+在最近的更新中，我们修复了以下问题：
+1. 解决了变量名冲突问题，通过使用命名空间（如`layouts-vars`）来引用外部模块变量
+2. 修复了SASS模块重复配置问题，将多处的`@forward...with`配置合并到了template/_variables.scss文件中
+3. 统一使用命名空间引用模块，避免后续出现冲突
+4. 修复了`_default-layout-w-vertical-nav.scss`中导入路径错误，将`@use "misc"`修改为`@use "../misc"`

src/@core/scss/_dark.scss

@@ -1,7 +1,7 @@
 @use "@configured-variables" as variables;
 
 // ————————————————————————————————————
-//* ——— Perfect Scrollbar
+// Perfect Scrollbar
 // ————————————————————————————————————
 
 .v-application.v-theme--dark {

src/@core/scss/_default-layout.scss

@@ -1,8 +1,8 @@
 @use "@core/scss/placeholders";
-@use "@core/scss/variables";
+@use "@core/scss/variables" as core-vars;
 
 .layout-navbar {
-  @if variables.$navbar-high-emphasis-text {
+  @if core-vars.$navbar-high-emphasis-text {
     @extend %layout-navbar;
   }
 }

src/@core/scss/_mixins.scss

@@ -17,18 +17,16 @@
 // ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
 @mixin before-pseudo() {
   position: relative;
-  @media (hover) {
+  &::before {
-    &::before {
+    position: absolute;
-      position: absolute;
+    background: currentcolor;
-      background: currentcolor;
+    block-size: 100%;
-      block-size: 100%;
+    border-radius: inherit;
-      border-radius: inherit;
+    content: "";
-      content: "";
+    inline-size: 100%;
-      inline-size: 100%;
+    inset: 0;
-      inset: 0;
+    opacity: 0;
-      opacity: 0;
+    pointer-events: none;
-      pointer-events: none;
-    }
   }
 }
 

src/@core/scss/_variables.scss

@@ -10,17 +10,19 @@
 */
 @use "sass:map";
 
-// @forward "@layouts/styles/variables";
+// 使用模板中的变量，不再进行配置 
+@use "@layouts/styles/variables" as layouts-vars;
 @use "utils";
 
 // 👉 Default layout
 
 $navbar-high-emphasis-text: true !default;
 
-@forward "@layouts/styles/variables" with (
+// 移除@forward配置，已合并到template/_variables.scss
-  $layout-vertical-nav-collapsed-width: 68px !default,
+// @forward "@layouts/styles/variables" with (
-);
+//   $layout-vertical-nav-collapsed-width: 68px !default,
-@use "@layouts/styles/variables" as *;
+// );
+// @use "@layouts/styles/variables" as *;
 
 $theme-colors-name: (
   "primary",
@@ -55,7 +57,7 @@ $vertical-nav-horizontal-padding: 1.375rem 1rem !default;
 $vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding);
 
 // Vertical nav header height. Mostly we will align it with navbar height;
-$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default;
+$vertical-nav-header-height: layouts-vars.$layout-vertical-nav-navbar-height !default;
 $vertical-nav-navbar-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
 
 // Vertical nav header padding

src/@core/scss/base/_components.scss

@@ -1,157 +0,0 @@
-@use "mixins";
-@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
-@use "@layouts/styles/placeholders";
-@use "@configured-variables" as variables;
-
-// 👉 Avatar group
-.v-avatar-group {
-  display: flex;
-  align-items: center;
-
-  > * {
-    &:not(:first-child) {
-      margin-inline-start: -0.8rem;
-    }
-
-    transition: transform 0.25s ease, box-shadow 0.15s ease;
-
-    &:hover {
-      z-index: 2;
-      transform: translateY(-5px) scale(1.05);
-
-      @include mixins.elevation(3);
-    }
-  }
-
-  > .v-avatar {
-    border: 2px solid rgb(var(--v-theme-surface));
-    transition: transform 0.15s ease;
-  }
-}
-
-// 👉 Button outline with default color border color
-.v-alert--variant-outlined,
-.v-avatar--variant-outlined,
-.v-btn.v-btn--variant-outlined,
-.v-card--variant-outlined,
-.v-chip--variant-outlined,
-.v-list-item--variant-outlined {
-  &:not([class*="text-"]) {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-
-  &.text-default {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-}
-
-// 👉 Custom Input
-.v-label.custom-input {
-  padding: 1rem;
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  opacity: 1;
-  white-space: normal;
-
-  &:hover {
-    border-color: rgba(var(--v-border-color), 0.25);
-  }
-
-  &.active {
-    border-color: rgb(var(--v-theme-primary));
-
-    .v-icon {
-      color: rgb(var(--v-theme-primary)) !important;
-    }
-  }
-}
-
-// Dialog responsive width
-.v-dialog {
-  // dialog custom close btn
-  .v-dialog-close-btn {
-    position: absolute;
-    z-index: 1;
-    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
-    inset-block-start: 0.9375rem;
-    inset-inline-end: 0.9375rem;
-
-    .v-btn__overlay {
-      display: none;
-    }
-  }
-
-  .v-card {
-    @extend %style-scroll-bar;
-  }
-}
-
-@media (min-width: 600px) {
-  .v-dialog {
-    &.v-dialog-sm,
-    &.v-dialog-lg,
-    &.v-dialog-xl {
-      .v-overlay__content {
-        inline-size: 565px !important;
-      }
-    }
-  }
-}
-
-@media (min-width: 960px) {
-  .v-dialog {
-    &.v-dialog-lg,
-    &.v-dialog-xl {
-      .v-overlay__content {
-        inline-size: 865px !important;
-      }
-    }
-  }
-}
-
-@media (min-width: 1264px) {
-  .v-dialog.v-dialog-xl {
-    .v-overlay__content {
-      inline-size: 1165px !important;
-    }
-  }
-}
-
-// v-tab with pill support
-
-.v-tabs.v-tabs-pill {
-  .v-tab.v-btn {
-    border-radius: 0.25rem !important;
-    transition: none;
-
-    .v-tab__slider {
-      visibility: hidden;
-    }
-  }
-}
-
-// loop for all colors bg
-@each $color-name in variables.$theme-colors-name {
-  .v-tabs.v-tabs-pill {
-    .v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
-      background-color: rgb(var(--v-theme-#{$color-name}));
-      color: rgb(var(--v-theme-on-#{$color-name})) !important;
-    }
-  }
-}
-
-// ℹ️ We are make even width of all v-timeline body
-.v-timeline--vertical.v-timeline {
-  .v-timeline-item {
-    .v-timeline-item__body {
-      justify-self: stretch !important;
-    }
-  }
-}
-
-// 👉 Textarea
-
-.v-textarea .v-field__input {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-mask-image: none !important;
-  mask-image: none !important;
-}

src/@core/scss/base/_dark.scss

@@ -1,16 +0,0 @@
-@use "@configured-variables" as variables;
-
-// ————————————————————————————————————
-// * ——— Perfect Scrollbar
-// ————————————————————————————————————
-
-.v-application.v-theme--dark {
-  .ps__rail-y,
-  .ps__rail-x {
-    background-color: transparent !important;
-  }
-
-  .ps__thumb-y {
-    background-color: variables.$plugin-ps-thumb-y-dark;
-  }
-}

src/@core/scss/base/_default-layout.scss

@@ -1,16 +0,0 @@
-@use "@core/scss/base/placeholders";
-@use "@core/scss/base/variables";
-
-.layout-vertical-nav,
-.layout-horizontal-nav {
-  ol,
-  ul {
-    list-style: none;
-  }
-}
-
-.layout-navbar {
-  @if variables.$navbar-high-emphasis-text {
-    @extend %layout-navbar;
-  }
-}

src/@core/scss/base/_index.scss

@@ -1,40 +0,0 @@
-@use "sass:map";
-
-// Layout
-@use "vertical-nav";
-@use "default-layout";
-@use "default-layout-w-vertical-nav";
-
-// Layouts package
-@use "layouts";
-
-// Components
-@use "components";
-
-// Utilities
-@use "utilities";
-
-// Misc
-@use "misc";
-
-// Dark
-@use "dark";
-
-// libs
-@use "libs/perfect-scrollbar";
-
-a {
-  color: rgb(var(--v-theme-primary));
-  text-decoration: none;
-}
-
-// Vuetify 3 don't provide margin bottom style like vuetify 2
-p {
-  margin-block-end: 1rem;
-}
-
-// Iconify icon size
-svg.iconify {
-  block-size: 1em;
-  inline-size: 1em;
-}

src/@core/scss/base/_layouts.scss

@@ -1,63 +0,0 @@
-@use "@configured-variables" as variables;
-
-/* ℹ️ This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
-
-/*
-  ℹ️ When we use v-layout as immediate first child of `.page-content-container`, it adds display:flex and page doesn't get contained height
-*/
-// .layout-wrapper.layout-nav-type-vertical {
-//   &.layout-content-height-fixed {
-//     .page-content-container {
-//       > .v-layout:first-child > :not(.v-navigation-drawer):first-child {
-//         flex-grow: 1;
-//         block-size: 100%;
-//       }
-//     }
-//   }
-// }
-.layout-wrapper.layout-nav-type-vertical {
-  &.layout-content-height-fixed {
-    .page-content-container {
-      > .v-layout:first-child {
-        overflow: hidden;
-        min-block-size: 100%;
-
-        > .v-main {
-          // overflow-y: auto;
-
-          .v-main__wrap > :first-child {
-            block-size: 100%;
-            overflow-y: auto;
-          }
-        }
-      }
-    }
-  }
-}
-
-// ℹ️ Let div/v-layout take full height. E.g. Email App
-.layout-wrapper.layout-nav-type-horizontal {
-  &.layout-content-height-fixed {
-    > .layout-page-content {
-      // display: flex;
-    }
-  }
-}
-
-// 👉 Floating navbar styles
-@if variables.$vertical-nav-navbar-style == "floating" {
-  // ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-fixed placeholder)
-  .layout-wrapper.layout-nav-type-vertical.layout-navbar-fixed {
-    .layout-navbar {
-      inset-block-start: variables.$vertical-nav-floating-navbar-top;
-    }
-
-    /*
-      ℹ️ If it's floating navbar
-      Add `vertical-nav-floating-navbar-top` as margin top to .layout-page-content
-    */
-    .layout-page-content {
-      margin-block-start: variables.$vertical-nav-floating-navbar-top;
-    }
-  }
-}

src/@core/scss/base/_misc.scss

@@ -1,20 +0,0 @@
-// ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used)
-.scrollable-content {
-  &.v-navigation-drawer {
-    .v-navigation-drawer__content {
-      display: flex;
-      overflow: hidden;
-      flex-direction: column;
-    }
-  }
-}
-
-// ℹ️ adding styling for code tag
-code {
-  border-radius: 3px;
-  color: rgb(var(--v-code-color));
-  font-size: 90%;
-  font-weight: 400;
-  padding-block: 0.2em;
-  padding-inline: 0.4em;
-}

src/@core/scss/base/_mixins.scss

@@ -1,79 +0,0 @@
-@use "sass:map";
-@use "@styles/variables/_vuetify.scss";
-
-@mixin elevation($z, $important: false) {
-  box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
-}
-
-// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
-@mixin before-pseudo() {
-  position: relative;
-  @media (hover) {
-    &::before {
-      position: absolute;
-      border-radius: inherit;
-      background: currentcolor;
-      block-size: 100%;
-      content: "";
-      inline-size: 100%;
-      inset: 0;
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-}
-
-@mixin bordered-skin($component, $border-property: "border", $important: false) {
-  #{$component} {
-    // background-color: rgb(var(--v-theme-background));
-    box-shadow: none !important;
-    #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
-  }
-}
-
-// ℹ️ Inspired from vuetify's active-states mixin
-// focus => 0.12 & selected => 0.08
-@mixin selected-states($selector) {
-  // #{$selector} {
-  //   opacity: calc(#{map.get(vuetify.$states, "selected")} * var(--v-theme-overlay-multiplier));
-  // }
-
-  // &:hover
-  // #{$selector} {
-  //   opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "hover")} * var(--v-theme-overlay-multiplier));
-  // }
-
-  // &:focus-visible
-  // #{$selector} {
-  //   opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "focus")} * var(--v-theme-overlay-multiplier));
-  // }
-
-  // @supports not selector(:focus-visible) {
-  //   &:focus {
-  //     #{$selector} {
-  //       opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "focus")} * var(--v-theme-overlay-multiplier));
-  //     }
-  //   }
-  // }
-  #{$selector} {
-    opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
-  }
-
-  &:hover
-  #{$selector} {
-    opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
-  }
-
-  &:focus-visible
-  #{$selector} {
-    opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
-  }
-
-  @supports not selector(:focus-visible) {
-    &:focus {
-      #{$selector} {
-        opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
-      }
-    }
-  }
-}

src/@core/scss/base/_utilities.scss

@@ -1,141 +0,0 @@
-@use "@configured-variables" as variables;
-@use "@layouts/styles/mixins" as layoutsMixins;
-
-// 👉 Demo spacers
-// TODO: Use vuetify SCSS variable here
-$card-spacer-content: 16px;
-
-.demo-space-x {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin-block-start: -$card-spacer-content;
-
-  & > * {
-    margin-block-start: $card-spacer-content;
-    margin-inline-end: $card-spacer-content;
-  }
-}
-
-.demo-space-y {
-  & > * {
-    margin-block-end: $card-spacer-content;
-
-    &:last-child {
-      margin-block-end: 0;
-    }
-  }
-}
-
-// 👉 Card match height
-.match-height.v-row {
-  .v-card {
-    block-size: 100%;
-  }
-}
-
-// 👉 Whitespace
-.whitespace-no-wrap {
-  white-space: nowrap;
-}
-
-// 👉 Colors
-
-/*
-  ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
-  Moreover, we also use this class in some places
-
-  ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
-
-  ℹ️ We also need !important to get correct color in badge icon
-*/
-.text-white {
-  color: #fff !important;
-}
-
-.bg-var-theme-background {
-  background-color: rgba(var(--v-theme-background), var(--v-hover-opacity)) !important;
-}
-
-// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
-@each $color-name in variables.$theme-colors-name {
-  .bg-light-#{$color-name} {
-    background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
-  }
-}
-
-// 👉 clamp text
-.clamp-text {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  text-overflow: ellipsis;
-}
-
-.leading-normal {
-  line-height: normal !important;
-}
-
-// 👉 for rtl only
-.flip-in-rtl {
-  @include layoutsMixins.rtl {
-    transform: scaleX(-1);
-  }
-}
-
-// 👉 Carousel
-.carousel-delimiter-top-end {
-  .v-carousel__controls {
-    justify-content: end;
-    block-size: 40px;
-    inset-block-start: 0;
-    padding-inline: 1rem;
-
-    .v-btn--icon.v-btn--density-default {
-      block-size: calc(var(--v-btn-height) + -10px);
-      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-      inline-size: calc(var(--v-btn-height) + -10px);
-
-      &.v-btn--active {
-        color: #fff;
-      }
-
-      .v-btn__overlay {
-        opacity: 0;
-      }
-    }
-  }
-
-  @each $color-name in variables.$theme-colors-name {
-
-    &.dots-active-#{$color-name} {
-      .v-carousel__controls {
-        .v-btn--active {
-          color: rgb(var(--v-theme-#{$color-name})) !important;
-        }
-      }
-    }
-  }
-}
-
-.v-timeline-item {
-  .app-timeline-title {
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 1.3125rem;
-  }
-
-  .app-timeline-meta {
-    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
-    font-size: 12px;
-    line-height: 0.875rem;
-  }
-
-  .app-timeline-text {
-    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-    font-size: 14px;
-    line-height: 1.25rem;
-  }
-}

src/@core/scss/base/_utils.scss

@@ -1,90 +0,0 @@
-@use "sass:map";
-@use "sass:list";
-@use "@configured-variables" as variables;
-
-// Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
-@function map-deep-get($map, $keys...) {
-  @each $key in $keys {
-    $map: map.get($map, $key);
-  }
-
-  @return $map;
-}
-
-@function map-deep-set($map, $keys, $value) {
-  $maps: ($map,);
-  $result: null;
-
-  // If the last key is a map already
-  // Warn the user we will be overriding it with $value
-  @if type-of(nth($keys, -1)) == "map" {
-    @warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
-  }
-
-  // If $keys is a single key
-  // Just merge and return
-  @if length($keys) == 1 {
-    @return map-merge($map, ($keys: $value));
-  }
-
-  // Loop from the first to the second to last key from $keys
-  // Store the associated map to this key in the $maps list
-  // If the key doesn't exist, throw an error
-  @for $i from 1 through length($keys) - 1 {
-    $current-key: list.nth($keys, $i);
-    $current-map: list.nth($maps, -1);
-    $current-get: map.get($current-map, $current-key);
-
-    @if not $current-get {
-      @error "Key `#{$key}` doesn't exist at current level in map.";
-    }
-
-    $maps: list.append($maps, $current-get);
-  }
-
-  // Loop from the last map to the first one
-  // Merge it with the previous one
-  @for $i from length($maps) through 1 {
-    $current-map: list.nth($maps, $i);
-    $current-key: list.nth($keys, $i);
-    $current-val: if($i == list.length($maps), $value, $result);
-    $result: map.map-merge($current-map, ($current-key: $current-val));
-  }
-
-  // Return result
-  @return $result;
-}
-
-// font size utility classes
-@each $name, $size in variables.$font-sizes {
-  .text-#{$name} {
-    font-size: $size;
-    line-height: map.get(variables.$font-line-height, $name);
-  }
-}
-
-// truncate utility class
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// gap utility class
-@each $name, $size in variables.$gap {
-  .gap-#{$name} {
-    gap: $size;
-  }
-
-  .gap-x-#{$name} {
-    column-gap: $size;
-  }
-
-  .gap-y-#{$name} {
-    row-gap: $size;
-  }
-}
-
-.list-none {
-  list-style-type: none;
-}

src/@core/scss/base/_variables.scss

@@ -1,197 +0,0 @@
-@use "vuetify/lib/styles/tools/functions" as *;
-
-/*
-  TODO: Add docs on when to use placeholder vs when to use SASS variable
-
-  Placeholder
-    - When we want to keep customization to our self between templates use it
-
-  Variables
-    - When we want to allow customization from both user and our side
-    - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
-*/
-
-@forward "@layouts/styles/variables" with (
-  // Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app
-  $layout-vertical-nav-z-index: 1004,
-  $layout-overlay-z-index: 1003,
-);
-@use "@layouts/styles/variables" as *;
-
-// 👉 Default layout
-
-$navbar-high-emphasis-text: true !default;
-
-// @forward "@layouts/styles/variables" with (
-//   $layout-vertical-nav-width: 350px !default,
-// );
-
-$theme-colors-name: (
-  "primary",
-  "secondary",
-  "error",
-  "info",
-  "success",
-  "warning"
-) !default;
-
-// 👉 Default layout with vertical nav
-
-$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
-
-// 👉 Vertical nav
-$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
-$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;
-
-// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
-// This is used by nav items & nav header
-$vertical-nav-horizontal-spacing: 1rem !default;
-$vertical-nav-horizontal-padding: 0.75rem !default;
-
-// Vertical nav header height. Mostly we will align it with navbar height;
-$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default;
-$vertical-nav-navbar-elevation: 3 !default;
-$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
-$vertical-nav-floating-navbar-top: 1rem !default;
-
-// Vertical nav header padding
-$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
-$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
-
-// Move logo when vertical nav is mini (collapsed but not hovered)
-$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
-
-// Space between logo and title
-$vertical-nav-header-logo-title-spacing: 0.9rem !default;
-
-// Section title margin top (when its not first child)
-$vertical-nav-section-title-mt: 1.5rem !default;
-
-// Section title margin bottom
-$vertical-nav-section-title-mb: 0.5rem !default;
-
-// Vertical nav icons
-$vertical-nav-items-icon-size: 1.5rem !default;
-$vertical-nav-items-nested-icon-size: 0.9rem !default;
-$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
-
-// Transition duration for nav group arrow
-$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
-
-// Timing function for nav group arrow
-$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
-
-// 👉 Horizontal nav
-
-/*
-    ❗ Heads up
-    ==================
-    Here we assume we will always use shorthand property which will apply same padding on four side
-    This is because this have been used as value of top property by `.popper-content`
-*/
-$horizontal-nav-padding: 0.6875rem !default;
-
-// Gap between top level horizontal nav items
-$horizontal-nav-top-level-items-gap: 4px !default;
-
-// Horizontal nav icons
-$horizontal-nav-items-icon-size: 1.5rem !default;
-$horizontal-nav-third-level-icon-size: 0.9rem !default;
-$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
-
-// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
-// 120px is combined height of navbar & horizontal nav
-$horizontal-nav-popper-content-max-height: calc((var(--vh, 1vh) * 100) - 120px - 4rem) !default;
-
-// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
-$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
-
-// 👉 Plugins
-
-$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
-
-// 👉 Vuetify
-
-// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
-$vuetify-reduce-default-compact-button-icon-size: true !default;
-
-// 👉 Custom variables
-// for utility classes
-$font-sizes: () !default;
-$font-sizes: map-deep-merge(
-  (
-    "xs": 0.75rem,
-    "sm": 0.875rem,
-    "base": 1rem,
-    "lg": 1.125rem,
-    "xl": 1.25rem,
-    "2xl": 1.5rem,
-    "3xl": 1.875rem,
-    "4xl": 2.25rem,
-    "5xl": 3rem,
-    "6xl": 3.75rem,
-    "7xl": 4.5rem,
-    "8xl": 6rem,
-    "9xl": 8rem
-  ),
-  $font-sizes
-);
-
-// line height
-$font-line-height: () !default;
-$font-line-height: map-deep-merge(
-  (
-    "xs": 1rem,
-    "sm": 1.25rem,
-    "base": 1.5rem,
-    "lg": 1.75rem,
-    "xl": 1.75rem,
-    "2xl": 2rem,
-    "3xl": 2.25rem,
-    "4xl": 2.5rem,
-    "5xl": 1,
-    "6xl": 1,
-    "7xl": 1,
-    "8xl": 1,
-    "9xl": 1
-  ),
-  $font-line-height
-);
-
-// gap utility class
-$gap: () !default;
-$gap: map-deep-merge(
-  (
-    "0": 0,
-    "1": 0.25rem,
-    "2": 0.5rem,
-    "3": 0.75rem,
-    "4": 1rem,
-    "5": 1.25rem,
-    "6":1.5rem,
-    "7": 1.75rem,
-    "8": 2rem,
-    "9": 2.25rem,
-    "10": 2.5rem,
-    "11": 2.75rem,
-    "12": 3rem,
-    "14": 3.5rem,
-    "16": 4rem,
-    "20": 5rem,
-    "24": 6rem,
-    "28": 7rem,
-    "32": 8rem,
-    "36": 9rem,
-    "40": 10rem,
-    "44": 11rem,
-    "48": 12rem,
-    "52": 13rem,
-    "56": 14rem,
-    "60": 15rem,
-    "64": 16rem,
-    "72": 18rem,
-    "80": 20rem,
-    "96": 24rem
-  ),
-  $gap
-);

src/@core/scss/base/_vertical-nav.scss

@@ -1,250 +0,0 @@
-@use "@core/scss/base/placeholders" as *;
-@use "@core/scss/template/placeholders" as *;
-@use "@layouts/styles/mixins" as layoutsMixins;
-@use "@configured-variables" as variables;
-@use "@core/scss/base/mixins" as mixins;
-@use "vuetify/lib/styles/tools/states" as vuetifyStates;
-
-.layout-nav-type-vertical {
-  // 👉 Layout Vertical nav
-  .layout-vertical-nav {
-    $sl-layout-nav-type-vertical: &;
-
-    @extend %nav;
-
-    @at-root {
-      // ℹ️ Add styles for collapsed vertical nav
-      .layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}.hovered {
-        @include mixins.elevation(6);
-      }
-    }
-
-    background-color: variables.$vertical-nav-background-color;
-
-    // 👉 Nav header
-    .nav-header {
-      overflow: hidden;
-      padding: variables.$vertical-nav-header-padding;
-      margin-inline: variables.$vertical-nav-header-inline-spacing;
-      min-block-size: variables.$vertical-nav-header-height;
-
-      // TEMPLATE: Check if we need to move this to master
-      .app-logo {
-        flex-shrink: 0;
-        transition: transform 0.25s ease-in-out;
-
-        @at-root {
-          // Move logo a bit to align center with the icons in vertical nav mini variant
-          .layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}:not(.hovered) .nav-header .app-logo {
-            transform: translateX(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini);
-
-            @include layoutsMixins.rtl {
-              transform: translateX(-(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini));
-            }
-          }
-        }
-      }
-
-      .app-title {
-        margin-inline-start: variables.$vertical-nav-header-logo-title-spacing;
-      }
-
-      .header-action {
-        @extend %nav-header-action;
-      }
-    }
-
-    // 👉 Nav items shadow
-    .vertical-nav-items-shadow {
-      position: absolute;
-      z-index: 1;
-      background:
-        linear-gradient(
-          rgb(#{variables.$vertical-nav-background-color-rgb}) 5%,
-          rgba(#{variables.$vertical-nav-background-color-rgb}, 75%) 45%,
-          rgba(#{variables.$vertical-nav-background-color-rgb}, 20%) 80%,
-          transparent
-        );
-      block-size: 55px;
-      inline-size: 100%;
-      inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px);
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.15s ease-in-out;
-      will-change: opacity;
-
-      @include layoutsMixins.rtl {
-        transform: translateX(8px);
-      }
-    }
-
-    &.scrolled {
-      .vertical-nav-items-shadow {
-        opacity: 1;
-      }
-    }
-
-    .ps__rail-y {
-      // ℹ️ Setting z-index: 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow
-      z-index: 1;
-    }
-
-    // 👉 Nav section title
-    .nav-section-title {
-      @extend %vertical-nav-item;
-      @extend %vertical-nav-section-title;
-
-      margin-block-end: variables.$vertical-nav-section-title-mb;
-
-      &:not(:first-child) {
-        margin-block-start: variables.$vertical-nav-section-title-mt;
-      }
-
-      .placeholder-icon {
-        margin-inline: auto;
-      }
-    }
-
-    // Nav item badge
-    .nav-item-badge {
-      @extend %vertical-nav-item-badge;
-    }
-
-    // 👉 Nav group & Link
-    .nav-link,
-    .nav-group {
-      overflow: hidden;
-
-      > :first-child {
-        @extend %vertical-nav-item;
-        @extend %vertical-nav-item-interactive;
-      }
-
-      .nav-item-icon {
-        @extend %vertical-nav-items-icon;
-      }
-
-      &.disabled {
-        opacity: var(--v-disabled-opacity);
-        pointer-events: none;
-      }
-    }
-
-    // 👉 Vertical nav link
-    .nav-link {
-      @extend %nav-link;
-
-      > .router-link-exact-active {
-        @extend %nav-link-active;
-      }
-
-      > a {
-        // Adds before psudo element to style hover state
-        @include mixins.before-pseudo;
-
-        // Adds vuetify states
-        @include vuetifyStates.states($active: false);
-      }
-    }
-
-    // 👉 Vertical nav group
-    .nav-group {
-      // Reduce the size of icon if link/group is inside group
-      .nav-group,
-      .nav-link {
-        .nav-item-icon {
-          @extend %vertical-nav-items-nested-icon;
-        }
-      }
-
-      // Hide icons after 2nd level
-      & .nav-group {
-        .nav-link,
-        .nav-group {
-          .nav-item-icon {
-            @extend %vertical-nav-items-icon-after-2nd-level;
-          }
-        }
-      }
-
-      .nav-group-arrow {
-        flex-shrink: 0;
-        transform-origin: center;
-        transition: transform variables.$vertical-nav-nav-group-arrow-transition-duration variables.$vertical-nav-nav-group-arrow-transition-timing-function;
-        will-change: transform;
-      }
-
-      // Rotate arrow icon if group is opened
-      &.open {
-        > .nav-group-label .nav-group-arrow {
-          transform: rotateZ(90deg);
-        }
-      }
-
-      // Nav group label
-      > :first-child {
-        // Adds before psudo element to style hover state
-        @include mixins.before-pseudo;
-
-        // Adds vuetify states
-        @include vuetifyStates.states($active: false);
-      }
-
-      // Active & open states for nav group label
-      &.active,
-      &.open {
-        > :first-child {
-          @extend %vertical-nav-group-open-active;
-        }
-      }
-    }
-  }
-}
-
-// SECTION: Transitions
-.vertical-nav-section-title-enter-active,
-.vertical-nav-section-title-leave-active {
-  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
-}
-
-.vertical-nav-section-title-enter-from,
-.vertical-nav-section-title-leave-to {
-  opacity: 0;
-  transform: translateX(15px);
-
-  @include layoutsMixins.rtl {
-    transform: translateX(-15px);
-  }
-}
-
-.transition-slide-x-enter-active,
-.transition-slide-x-leave-active {
-  transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
-}
-
-.transition-slide-x-enter-from,
-.transition-slide-x-leave-to {
-  opacity: 0;
-  transform: translateX(-15px);
-
-  @include layoutsMixins.rtl {
-    transform: translateX(15px);
-  }
-}
-
-.vertical-nav-app-title-enter-active,
-.vertical-nav-app-title-leave-active {
-  transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
-}
-
-.vertical-nav-app-title-enter-from,
-.vertical-nav-app-title-leave-to {
-  opacity: 0;
-  transform: translateX(-15px);
-
-  @include layoutsMixins.rtl {
-    transform: translateX(15px);
-  }
-}
-
-// !SECTION

src/@core/scss/base/libs/vuetify/_index.scss

@@ -1 +0,0 @@
-@use "overrides";

src/@core/scss/base/libs/vuetify/_variables.scss

@@ -1,49 +0,0 @@
-// 👉 Shadow opacities
-$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
-$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
-$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
-
-// 👉 Card transition properties
-$card-transition-property-custom: box-shadow, opacity;
-
-@forward "vuetify/settings" with (
-  // 👉 General settings
-  $color-pack: false !default,
-
-  // 👉 Shadow opacity
-  $shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
-  $shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
-  $shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
-
-    // 👉 Card
-  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
-  $card-elevation: 6 !default,
-  $card-title-line-height: 1.6 !default,
-  $card-actions-min-height: unset !default,
-  $card-text-padding: 1.25rem !default,
-  $card-item-padding: 1.25rem !default,
-  $card-actions-padding: 0 12px 12px !default,
-  $card-transition-property: $card-transition-property-custom !default,
-  $card-subtitle-opacity: 1 !default,
-
-  // 👉 Expansion Panel
-  $expansion-panel-active-title-min-height: 48px !default,
-
-  // 👉 List
-  $list-item-icon-margin-end: 16px !default,
-  $list-item-icon-margin-start: 16px !default,
-  $list-item-subtitle-opacity: 1 !default,
-
-  // 👉 Tooltip
-  $tooltip-background-color: rgba(59, 55, 68, 0.9) !default,
-  $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
-  $tooltip-font-size: 0.75rem !default,
-
-  $button-icon-density: ("default": 2, "comfortable": 0, "compact": -1 ) !default,
-
-   // 👉 VTimeline
-  $timeline-dot-size: 34px !default,
-
-  // 👉 VOverlay
-  $overlay-opacity: 1 !default,
-);

src/@core/scss/base/placeholders/_index.scss

@@ -1,5 +0,0 @@
-@forward "vertical-nav";
-@forward "nav";
-@forward "default-layout";
-@forward "default-layout-vertical-nav";
-@forward "misc";

src/@core/scss/base/placeholders/_misc.scss

@@ -1,7 +0,0 @@
-%blurry-bg {
-  /* stylelint-disable property-no-vendor-prefix */
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
-  /* stylelint-enable */
-  background-color: rgb(var(--v-theme-surface), 0.9);
-}

src/@core/scss/base/placeholders/_nav.scss

@@ -1,34 +0,0 @@
-@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
-@use "@core/scss/base/mixins";
-
-// ℹ️ This is common style that needs to be applied to both navs
-%nav {
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-
-  .nav-item-title {
-    letter-spacing: 0.15px;
-  }
-
-  .nav-section-title {
-    letter-spacing: 0.4px;
-  }
-}
-
-/*
-    Active nav link styles for horizontal & vertical nav
-
-    For horizontal nav it will be only applied to top level nav items
-    For vertical nav it will be only applied to nav links (not nav groups)
-*/
-%nav-link-active {
-  background-color: rgb(var(--v-theme-primary));
-  color: rgb(var(--v-theme-on-primary));
-
-  @include mixins.elevation(3);
-}
-
-%nav-link {
-  a {
-    color: inherit;
-  }
-}

src/@core/scss/base/placeholders/_vertical-nav.scss

@@ -1,81 +0,0 @@
-@use "@core/scss/base/mixins";
-@use "@configured-variables" as variables;
-@use "vuetify/lib/styles/tools/states" as vuetifyStates;
-
-%nav-header-action {
-  font-size: 1.25rem;
-}
-
-// Nav items styles (including section title)
-%vertical-nav-item {
-  margin-block: 0;
-  margin-inline: variables.$vertical-nav-horizontal-spacing;
-  padding-block: 0;
-  padding-inline: variables.$vertical-nav-horizontal-padding;
-  white-space: nowrap;
-}
-
-// This is same as `%vertical-nav-item` except section title is excluded
-%vertical-nav-item-interactive {
-  border-radius: 0.4rem;
-  block-size: 2.75rem;
-
-  /*
-    ℹ️ We will use `margin-block-end` instead of `margin-block` to give more space for shadow to appear.
-    With `margin-block`, due to small space (space gets divided between top & bottom) shadow cuts
-  */
-  margin-block-end: 0.375rem;
-}
-
-// Common styles for nav item icon styles
-// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
-%vertical-nav-items-icon {
-  flex-shrink: 0;
-  font-size: variables.$vertical-nav-items-icon-size;
-  margin-inline-end: variables.$vertical-nav-items-icon-margin-inline-end;
-}
-
-// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
-%vertical-nav-items-nested-icon {
-  /*
-    ℹ️ `margin-inline` will be (normal icon font-size - small icon font-size) / 2
-    (1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
-  */
-  $vertical-nav-items-nested-icon-margin-inline: calc((variables.$vertical-nav-items-icon-size - variables.$vertical-nav-items-nested-icon-size) / 2);
-
-  font-size: variables.$vertical-nav-items-nested-icon-size;
-  margin-inline-end: $vertical-nav-items-nested-icon-margin-inline + variables.$vertical-nav-items-icon-margin-inline-end;
-  margin-inline-start: $vertical-nav-items-nested-icon-margin-inline;
-}
-
-%vertical-nav-items-icon-after-2nd-level {
-  visibility: hidden;
-}
-
-// Open & Active nav group styles
-%vertical-nav-group-open-active {
-  @include mixins.selected-states("&::before");
-}
-
-// Section title
-%vertical-nav-section-title {
-  // ℹ️ Setting height will prevent jerking when text & icon is toggled
-  block-size: 1.5rem;
-  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
-  font-size: 0.75rem;
-  text-transform: uppercase;
-}
-
-// Vertical nav item badge styles
-%vertical-nav-item-badge {
-  display: inline-block;
-  border-radius: 1.5rem;
-  font-size: 0.8em;
-  font-weight: 500;
-  line-height: 1;
-  padding-block: 0.25em;
-  padding-inline: 0.55em;
-  text-align: center;
-  vertical-align: baseline;
-  white-space: nowrap;
-}

src/@core/scss/index.scss

@@ -1,33 +1,5 @@
 @use "sass:map";
+@use "template/index";
 
-// Layout
+// 保留这个引用以向后兼容，但实际功能已经移至template/index.scss
-@use "vertical-nav";
+@use "variables";
-@use "default-layout";
-
-// Components
-@use "components";
-
-// Utilities
-@use "utilities";
-
-// Misc
-@use "misc";
-
-// Dark
-@use "dark";
-
-a {
-  color: rgb(var(--v-theme-primary));
-  text-decoration: none;
-}
-
-// Vuetify 3 don't provide margin bottom style like vuetify 2
-p {
-  margin-block-end: 1rem;
-}
-
-// Iconify icon size
-svg.iconify {
-  block-size: 1em;
-  inline-size: 1em;
-}

src/@core/scss/libs/vuetify/_variables.scss

@@ -1,7 +1,7 @@
 $shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
 $shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
 $shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
-$font-family-custom: inter, sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
 // 👉 Card transition properties
 $card-transition-property-custom: box-shadow, opacity;

src/@core/scss/pages/page-auth.scss

@@ -1,5 +1,5 @@
 .auth-wrapper {
-  min-block-size: calc(var(--vh, 1vh) * 100 + env(safe-area-inset-top));
+  min-block-size: calc(var(--vh, 1vh) * 100 + env(safe-area-inset-top) + env(safe-area-inset-bottom));
 }
 
 .auth-footer-mask {

src/@core/scss/template/_components.scss

@@ -1,7 +1,6 @@
 @use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
 @use "@configured-variables" as variables;
 @use "mixins";
-@use "@core/scss/base/mixins" as mixins_base;
 
 // 👉 Alert
 .v-alert {
@@ -176,10 +175,6 @@
   th {
     background: rgb(var(--v-table-header-background)) !important;
   }
-
-  .v-data-table-footer {
-    margin-block-start: 1rem;
-  }
 }
 
 // 👉 Pagination
@@ -194,5 +189,5 @@
 
 // 👉 SnackBar
 .v-snackbar--variant-elevated {
-  @include mixins_base.elevation(6);
+  @include mixins.elevation(6);
 }

src/@core/scss/template/_default-layout-w-vertical-nav.scss

@@ -1,9 +1,8 @@
 @use "@configured-variables" as variables;
-@use "@core/scss/base/placeholders" as *;
+@use "placeholders" as *;
-@use "@core/scss/template/placeholders" as *;
 @use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
-@use "misc";
+@use "../misc";
-@use "@core/scss/base/mixins";
+@use "mixins";
 
 $header: ".layout-navbar";
 
@@ -23,7 +22,7 @@ $header: ".layout-navbar";
     // If navbar is contained => Add border radius to header
     @if variables.$layout-vertical-nav-navbar-is-contained {
       #{$header} {
-        border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+        // border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
       }
     }
 
@@ -64,7 +63,7 @@ $header: ".layout-navbar";
 
     #{$header} {
       @if variables.$layout-vertical-nav-navbar-is-contained {
-        border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+        // border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
       }
 
       background-color: rgb(var(--v-theme-surface));
@@ -101,4 +100,4 @@ $header: ".layout-navbar";
       }
     }
   }
-}
+} 

src/@core/scss/template/_mixins.scss

@@ -1,12 +1,101 @@
+@use "sass:map";
 @use "vuetify/lib/styles/settings" as vuetify_settings;
+@use "@styles/variables/_vuetify.scss" as vuetify;
 
 @mixin avatar-font-sizes($map: $avatar-sizes) {
   @each $sizeName, $multiplier in vuetify_settings.$size-scales {
     /* stylelint-disable-next-line scss/no-global-function-names */
-    $size: map-get($map, $sizeName);
+    $size: map.get($map, $sizeName);
 
     &.v-avatar--size-#{$sizeName} {
       font-size: #{$size}px;
     }
   }
 }
+
+@mixin elevation($z, $important: false) {
+  box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
+}
+
+@mixin before-pseudo() {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    border-radius: inherit;
+    background: currentcolor;
+    block-size: 100%;
+    content: "";
+    inline-size: 100%;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+@mixin bordered-skin($component, $border-property: "border", $important: false) {
+  #{$component} {
+    box-shadow: none !important;
+    #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
+  }
+}
+
+@mixin selected-states($selector) {
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:hover
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:focus-visible
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  @supports not selector(:focus-visible) {
+    &:focus {
+      #{$selector} {
+        opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+      }
+    }
+  }
+}
+
+@mixin push-anchors() {
+  :target {
+    scroll-margin-block-start: 90px;
+  }
+}
+
+@mixin xs {
+  @media (width >= 0) and (width <= 599.98px) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media (width >= 600px) and (width <= 959.98px) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media (width >= 960px) and (width <= 1279.98px) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media (width >= 1280px) and (width <= 1919.98px) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media (width >= 1920px) {
+    @content;
+  }
+}

src/@core/scss/template/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "utils";
+@use "vuetify/lib/styles/tools/functions" as *;
 
 $vertical-nav-horizontal-padding-custom: 1.375rem 1rem;
 
@@ -13,15 +14,16 @@ $vertical-nav-horizontal-padding-custom: 1.375rem 1rem;
 $vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-custom) !default;
 $vertical-nav-items-icon-margin-inline-end: 0.625rem !default;
 
-@forward "@core/scss/base/variables" with (
+// Vertical Nav Configuration
-  $layout-vertical-nav-collapsed-width: 68px !default,
+$vertical-nav-collapsed-width: 68px !default;
-  // ℹ️ This is used to keep consistency between nav items and nav header left & right margin
+
-  // This is used by nav items & nav header
+// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
-  $vertical-nav-horizontal-spacing: 0 1.125rem !default,
+// This is used by nav items & nav header
-  $vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default,
+$vertical-nav-horizontal-spacing: 0 1.125rem !default;
-  // Vertical nav header padding
+$vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default;
-  $vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default,
+
-);
+// Vertical nav header padding
+$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default;
 
 // 👉 Custom Variables
 $avatar-font-sizes: (
@@ -31,3 +33,195 @@ $avatar-font-sizes: (
   "large":20,
   "x-large":24
 ) !default;
+
+// 合并两个文件中的@forward配置
+@forward "@layouts/styles/variables" with (
+  // 来自_variables.scss的配置
+  $layout-vertical-nav-collapsed-width: 68px !default,
+  
+  // 来自template/_variables.scss的配置
+  $layout-vertical-nav-z-index: 1004,
+  $layout-overlay-z-index: 1003
+);
+
+// 使用命名空间来避免变量冲突
+@use "@layouts/styles/variables" as layouts-vars;
+
+$theme-colors-name: (
+  "primary",
+  "secondary",
+  "error",
+  "info",
+  "success",
+  "warning"
+) !default;
+
+// 👉 Default layout with vertical nav
+
+$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
+
+// 👉 Vertical nav
+$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
+$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;
+
+// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
+// This is used by nav items & nav header
+$vertical-nav-horizontal-spacing: 1rem !default;
+$vertical-nav-horizontal-padding: 0.75rem !default;
+
+// Vertical nav header height. Mostly we will align it with navbar height;
+$vertical-nav-header-height: layouts-vars.$layout-vertical-nav-navbar-height !default;
+$vertical-nav-navbar-elevation: 3 !default;
+$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
+$vertical-nav-floating-navbar-top: 1rem !default;
+
+// Vertical nav header padding
+$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
+$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
+
+// Move logo when vertical nav is mini (collapsed but not hovered)
+$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
+
+// Space between logo and title
+$vertical-nav-header-logo-title-spacing: 0.9rem !default;
+
+// Section title margin top (when its not first child)
+$vertical-nav-section-title-mt: 1.5rem !default;
+
+// Section title margin bottom
+$vertical-nav-section-title-mb: 0.5rem !default;
+
+// Vertical nav icons
+$vertical-nav-items-icon-size: 1.5rem !default;
+$vertical-nav-items-nested-icon-size: 0.9rem !default;
+$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
+
+// Transition duration for nav group arrow
+$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
+
+// Timing function for nav group arrow
+$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
+
+// 👉 Horizontal nav
+
+/*
+    ❗ Heads up
+    ==================
+    Here we assume we will always use shorthand property which will apply same padding on four side
+    This is because this have been used as value of top property by `.popper-content`
+*/
+$horizontal-nav-padding: 0.6875rem !default;
+
+// Gap between top level horizontal nav items
+$horizontal-nav-top-level-items-gap: 4px !default;
+
+// Horizontal nav icons
+$horizontal-nav-items-icon-size: 1.5rem !default;
+$horizontal-nav-third-level-icon-size: 0.9rem !default;
+$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
+
+// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
+// 120px is combined height of navbar & horizontal nav
+$horizontal-nav-popper-content-max-height: calc((var(--vh, 1vh) * 100) - 120px - 4rem) !default;
+
+// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
+$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
+
+// 👉 Plugins
+
+$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
+
+// 👉 Vuetify
+
+// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
+$vuetify-reduce-default-compact-button-icon-size: true !default;
+
+// 👉 Custom variables
+// for utility classes
+$font-sizes: () !default;
+$font-sizes: map-deep-merge(
+  (
+    "xs": 0.75rem,
+    "sm": 0.875rem,
+    "base": 1rem,
+    "lg": 1.125rem,
+    "xl": 1.25rem,
+    "2xl": 1.5rem,
+    "3xl": 1.875rem,
+    "4xl": 2.25rem,
+    "5xl": 3rem,
+    "6xl": 3.75rem,
+    "7xl": 4.5rem,
+    "8xl": 6rem,
+    "9xl": 8rem
+  ),
+  $font-sizes
+);
+
+// line height
+$font-line-height: () !default;
+$font-line-height: map-deep-merge(
+  (
+    "xs": 1rem,
+    "sm": 1.25rem,
+    "base": 1.5rem,
+    "lg": 1.75rem,
+    "xl": 1.75rem,
+    "2xl": 2rem,
+    "3xl": 2.25rem,
+    "4xl": 2.5rem,
+    "5xl": 1,
+    "6xl": 1,
+    "7xl": 1,
+    "8xl": 1,
+    "9xl": 1
+  ),
+  $font-line-height
+);
+
+// gap utility class
+$gap: () !default;
+$gap: map-deep-merge(
+  (
+    "0": 0,
+    "1": 0.25rem,
+    "2": 0.5rem,
+    "3": 0.75rem,
+    "4": 1rem,
+    "5": 1.25rem,
+    "6":1.5rem,
+    "7": 1.75rem,
+    "8": 2rem,
+    "9": 2.25rem,
+    "10": 2.5rem,
+    "11": 2.75rem,
+    "12": 3rem,
+    "14": 3.5rem,
+    "16": 4rem,
+    "20": 5rem,
+    "24": 6rem,
+    "28": 7rem,
+    "32": 8rem,
+    "36": 9rem,
+    "40": 10rem,
+    "44": 11rem,
+    "48": 12rem,
+    "52": 13rem,
+    "56": 14rem,
+    "60": 15rem,
+    "64": 16rem,
+    "72": 18rem,
+    "80": 20rem,
+    "96": 24rem
+  ),
+  $gap
+);
+
+// Avatar sizes map
+$avatar-font-sizes: (
+  "x-small": 0.625rem,
+  "small": 0.75rem,
+  "default": 0.875rem,
+  "large": 1rem,
+  "x-large": 1.125rem,
+) !default;

src/@core/scss/template/index.scss

@@ -1,8 +1,42 @@
 @use "sass:map";
-@use "@core/scss/base";
+
+// Layout
+@use "../vertical-nav";
+@use "../default-layout";
+@use "default-layout-w-vertical-nav";
 
 // Components
 @use "components";
 
 // Utilities
 @use "utilities";
+@use "../utils";
+
+// Misc
+@use "../misc";
+
+// Dark
+@use "../dark";
+
+// Variables
+@use "variables";
+
+// libs
+@use "libs/perfect-scrollbar";
+@use "libs/vuetify";
+
+a {
+  color: rgb(var(--v-theme-primary));
+  text-decoration: none;
+}
+
+// Vuetify 3 don't provide margin bottom style like vuetify 2
+p {
+  margin-block-end: 1rem;
+}
+
+// Iconify icon size
+svg.iconify {
+  block-size: 1em;
+  inline-size: 1em;
+}

src/@core/scss/template/libs/apex-chart.scss

@@ -1,76 +1,89 @@
-@use "@styles/variables/_vuetify.scss" as vuetify;
+@use "@configureTheme" as theme;
-@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
+@use "@configured-variables" as variables;
-@use "@layouts/styles/mixins" as layoutsMixins;
+@use "../mixins";
-@use "@core/scss/base/mixins";
 
-.v-application .apexcharts-canvas {
+// 👉 Apex chart
-  &line[stroke="transparent"] {
+.apexcharts-canvas {
-    display: "none";
+  // For RTL alignment
+  .apexcharts-yaxis-texts-g {
+    text-align: start;
   }
 
+  // Tooltip
   .apexcharts-tooltip {
-    @include mixins.elevation(3);
+    line-height: 1.5;
-
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    background: rgb(var(--v-theme-surface));
 
     .apexcharts-tooltip-title {
       border-color: rgba(var(--v-border-color), var(--v-border-opacity));
       background: rgb(var(--v-theme-surface));
       font-weight: 500;
+      margin-block-end: 0.25rem;
+      padding-inline: 1rem;
+    }
+
+    .apexcharts-tooltip-text {
+      display: flex;
+      align-items: center;
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+      font-size: inherit;
+      gap: 0.5rem;
+      line-height: inherit;
+    }
+
+    .apexcharts-tooltip-text-label,
+    .apexcharts-tooltip-text-value {
+      font-weight: 600;
+      line-height: 1.5;
+    }
+    
+    .apexcharts-tooltip-series-group {
+      padding-block: 0 0.5rem;
+      padding-inline: 1rem;
+
+      &:last-child {
+        padding-block-end: 1rem;
+      }
+
+      &.active {
+        padding-block-start: 0;
+      }
     }
 
     &.apexcharts-theme-light {
-      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+      border-color: rgb(var(--v-border-color));
-    }
+      background: rgb(var(--v-theme-surface));
-
+      box-shadow: none;
-    &.apexcharts-theme-dark {
+      
-      color: white;
+      .apexcharts-tooltip-text-label,
-    }
+      .apexcharts-tooltip-text-value {
-
+        color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-    .apexcharts-tooltip-series-group:first-of-type {
+      }
-      padding-block-end: 0;
     }
   }
 
-  .apexcharts-xaxistooltip {
+  .apexcharts-marker {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    transition: none;
-    background: rgb(var(--v-theme-grey-50));
-    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-
-    &::after {
-      border-block-end-color: rgb(var(--v-theme-grey-50));
-    }
-
-    &::before {
-      border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    }
   }
 
+  // 👉 stroke-dasharray
+  .apexcharts-radialbar,
+  .apexcharts-radialbar-slice-current {
+    stroke-linecap: round;
+  }
+
+  .apexcharts-xaxistooltip,
   .apexcharts-yaxistooltip {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    border-color: rgb(var(--v-border-color));
-    background: rgb(var(--v-theme-grey-50));
+    background: rgb(var(--v-theme-surface));
-
+    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
-    &::after {
-      border-inline-start-color: rgb(var(--v-theme-grey-50));
-    }
 
+    &::after,
     &::before {
-      border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
+      border-block-end-color: rgb(var(--v-border-color));
-    }
-  }
-
-  .apexcharts-xaxistooltip-text,
-  .apexcharts-yaxistooltip-text {
-    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-  }
-
-  .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label {
-    @include layoutsMixins.rtl {
-      text-anchor: start;
     }
   }
 
+  // 👉 Text color
   .apexcharts-text,
   .apexcharts-tooltip-text,
   .apexcharts-datalabel-label,
@@ -78,23 +91,16 @@
   .apexcharts-xaxistooltip-text,
   .apexcharts-yaxistooltip-text,
   .apexcharts-legend-text {
-    font-family: vuetify.$body-font-family !important;
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
+    font-family: inherit !important;
   }
 
-  .apexcharts-pie-label {
+  // 👉 Annotation Label
-    fill: white;
+  .apexcharts-annotation-rect {
-    filter: none;
+    &.apexcharts-xaxis-annotation-rect,
-  }
+    &.apexcharts-yaxis-annotation-rect {
-
+      fill-opacity: 0.05;
-  .apexcharts-marker {
+      stroke-opacity: 0;
-    box-shadow: none;
-  }
-
-  .apexcharts-legend-marker {
-    margin-inline-end: 0.3875rem !important;
-
-    @include layoutsMixins.rtl {
-      margin-inline-end: 0.75rem !important;
     }
   }
 }

src/@core/scss/template/libs/full-calendar.scss

@@ -1,4 +1,5 @@
-@use "@core/scss/base/mixins";
+@use "../mixins";
+@use "@configured-variables" as variables;
 
 .v-application .fc {
   --fc-today-bg-color: rgba(var(--v-theme-on-surface), 0.04);
@@ -16,16 +17,20 @@
     padding: 0;
   }
 
+  .fc-toolbar-title {
+    display: inline-block;
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 1.25rem;
+    font-weight: 500;
+    margin-inline-start: 0.25rem;
+  }
+
   .fc-col-header-cell-cushion {
     color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
     font-size: 0.875rem;
     font-weight: 600;
   }
 
-  .fc-toolbar .fc-toolbar-title {
-    margin-inline-start: 0.25rem;
-  }
-
   .fc-event-time {
     font-size: 0.75rem;
   }
@@ -92,10 +97,10 @@
   .fc-header-toolbar {
     flex-wrap: wrap;
     margin: 1.25rem;
-    column-gap: 0.5rem;
+    gap: 1rem 0.5rem;
-    row-gap: 1rem;
   }
 
+  // 👉 Toolbar Chunk and Button Group
   .fc-toolbar-chunk {
     display: flex;
     align-items: center;
@@ -103,19 +108,38 @@
     .fc-button-group {
       .fc-button-primary {
         &,
+        &:focus,
         &:hover,
         &:not(.disabled):active {
           border-color: transparent;
           background-color: transparent;
-          color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-        }
-
-        &:focus {
           box-shadow: none !important;
+          color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
         }
       }
     }
 
+    // 👉 sidebar toggler
+    .fc-drawerToggler-button {
+      display: none;
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(94,86,105,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
+      background-position: 50%;
+      background-repeat: no-repeat;
+      block-size: 1.5625rem;
+      font-size: 0;
+      inline-size: 1.5625rem;
+      margin-inline-end: 0.25rem;
+
+      @media (width <= 1264px) {
+        display: block !important;
+      }
+
+      .v-theme--dark & {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(232,232,241,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
+      }
+    }
+
+    // Special styling for the last toolbar chunk
     &:last-child {
       .fc-button-group {
         border: 0.0625rem solid rgba(var(--v-border-color), var(--v-border-opacity));
@@ -140,13 +164,6 @@
     }
   }
 
-  .fc-toolbar-title {
-    display: inline-block;
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-    font-size: 1.25rem;
-    font-weight: 500;
-  }
-
   .fc-scrollgrid-section {
     th {
       border-inline: 0;
@@ -218,37 +235,6 @@
     }
   }
 
-  // 👉 sidebar toggler
-  .fc-toolbar-chunk {
-    .fc-button-group {
-      align-items: center;
-
-      .fc-button .fc-icon {
-        vertical-align: bottom;
-      }
-
-      // ℹ️ Below two `background-image` styles contains static color due to browser limitation of not parsing the css var inside CSS url()
-      .fc-drawerToggler-button {
-        display: none;
-        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(94,86,105,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
-        background-position: 50%;
-        background-repeat: no-repeat;
-        block-size: 1.5625rem;
-        font-size: 0;
-        inline-size: 1.5625rem;
-        margin-inline-end: 0.25rem;
-
-        @media (max-width: 1264px) {
-          display: block !important;
-        }
-
-        .v-theme--dark & {
-          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(232,232,241,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
-        }
-      }
-    }
-  }
-
   // ℹ️ Workaround of https://github.com/fullcalendar/fullcalendar/issues/6407
   .fc-col-header,
   .fc-daygrid-body,

src/@core/scss/template/libs/perfect-scrollbar.scss

@@ -2,6 +2,11 @@ $ps-size: 0.25rem;
 $ps-hover-size: 0.375rem;
 $ps-track-size: 0.5rem;
 
+.ps__thumb-x,
+.ps__thumb-y {
+  background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important;
+}
+
 .ps__thumb-y {
   inline-size: $ps-size;
   inset-inline-end: 0.0625rem;
@@ -29,7 +34,10 @@ $ps-track-size: 0.5rem;
   inline-size: $ps-hover-size;
 }
 
-.ps__thumb-x,
+// fix bug
-.ps__thumb-y {
+@media(hover: none) {
-  background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important;
+  .ps > .ps__rail-x,
-}
+  .ps > .ps__rail-y {
+    opacity: 0.6;
+  }
+} 

src/@core/scss/template/libs/vuetify/_overrides.scss

@@ -1,5 +1,5 @@
-@use "@core/scss/base/utils";
 @use "@configured-variables" as variables;
+@use "../../../utils";
 
 // 👉 Application
 // ℹ️ We need accurate vh in mobile devices as well
@@ -195,7 +195,6 @@ h6,
   color: rgb(var(--v-border-color));
 }
 
-// 👉 DataTable
 // 👉 DataTable
 .v-data-table {
   /* stylelint-disable-next-line no-descending-specificity */
@@ -212,10 +211,6 @@ h6,
   }
 }
 
-.v-data-table-footer {
-  margin-block-start: 1rem;
-}
-
 // 👉 v-field
 .v-field:hover .v-field__outline {
   --v-field-border-opacity: var(--v-medium-emphasis-opacity);
@@ -254,34 +249,53 @@ h6,
 .v-badge__badge {
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
-// 👉 Btn focus outline style removed
+// 👉 Dialog
-.v-btn:focus-visible::after {
+.v-dialog--fullscreen {
-  opacity: 0 !important;
+  background-color: rgb(var(--v-theme-surface));
 }
 
-// .v-select chip spacing for slot
+// For dialog card title
-.v-input:not(.v-select--chips) .v-select__selection {
+.v-card-item + .v-card-text {
-  .v-chip {
+  padding-block-start: 0 !important;
-    margin-block: 2px var(--select-chips-margin-bottom);
-  }
 }
 
-// 👉 VCard and VList subtitle color
+// 👉 v-slide-group (List of chips)
-.v-card-subtitle,
+.v-slide-group {
-.v-list-item-subtitle {
+  .v-slide-group__container {
-  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+    display: flex;
-}
+    flex-wrap: wrap;
 
-// 👉 placeholders
+    // Spacing between buttons in v-slide-group
-.v-field__input {
+    .v-slide-group-item:not(:last-child) {
-  @at-root {
+      margin-inline-end: 0.5rem;
-    & input::placeholder,
-    input#{&}::placeholder,
-    textarea#{&}::placeholder {
-      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
-      opacity: 1 !important;
     }
   }
 }
+
+// 👉 Expansion Panel
+.v-expansion-panels {
+  .v-expansion-panel-title {
+    min-block-size: unset !important;
+    padding-block: 1rem !important;
+  }
+}
+
+// 👉 v-textarea
+.v-textarea {
+  textarea {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+
+    &:hover,
+    &:focus {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    }
+  }
+}
+
+// 👉 Cursor
+.cursor-pointer {
+  cursor: pointer;
+} 

src/@core/scss/template/libs/vuetify/_variables.scss

@@ -2,9 +2,20 @@ $shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
 $shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
 $shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
 /* stylelint-disable-next-line max-line-length */
-$font-family-custom: inter, sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+// 👉 Card transition properties
+$card-transition-property-custom: box-shadow, opacity;
+
+@forward "vuetify/settings" with (
+  // 👉 General settings
+  $color-pack: false !default,
+
+  // 👉 Shadow opacity
+  $shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
+  $shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
+  $shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
 
-@forward "../../../base/libs/vuetify/variables" with (
   $body-font-family: $font-family-custom !default,
   $border-radius-root: 6px !default,
 
@@ -110,6 +121,18 @@ $font-family-custom: inter, sans-serif, -apple-system, blinkmacsystemfont, "Sego
     24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
   ) !default,
 
+  // 👉 Card
+  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
+  $card-elevation: 6 !default,
+  $card-title-line-height: 2rem !default,
+  $card-actions-min-height: unset !default,
+  $card-text-padding: 1.25rem !default,
+  $card-item-padding: 1.25rem !default,
+  $card-actions-padding: 0 12px 12px !default,
+  $card-transition-property: $card-transition-property-custom !default,
+  $card-subtitle-opacity: 1 !default,
+  $card-title-letter-spacing: 0.0094rem !default,
+
   // 👉 Typography
   $typography: (
     "h1": (
@@ -161,13 +184,16 @@ $font-family-custom: inter, sans-serif, -apple-system, blinkmacsystemfont, "Sego
     )
   ) !default,
 
-  // 👉 Card
+  // 👉 List
-  $card-title-letter-spacing: 0.0094rem !default,
+  $list-item-icon-margin-end: 16px !default,
-  $card-title-line-height: 2rem !default,
+  $list-item-icon-margin-start: 16px !default,
-  $card-subtitle-opacity: 1 !default,
+  $list-item-subtitle-opacity: 1 !default,
+  $list-subheader-text-opacity: 1 !default,
 
   // 👉 Tooltip
-  $tooltip-background-color:#212121 !default,
+  $tooltip-background-color: #212121 !default,
+  $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
+  $tooltip-font-size: 0.75rem !default,
   $tooltip-border-radius: 4px !default,
   $tooltip-padding: 4px 8px !default,
 
@@ -209,9 +235,6 @@ $font-family-custom: inter, sans-serif, -apple-system, blinkmacsystemfont, "Sego
   // 👉 Menu
   $menu-content-border-radius: 5px !default,
 
-  // 👉 List
-  $list-subheader-text-opacity: 1 !default,
-
   // 👉 Snackbar
   $snackbar-background:#212121 !default,
   $snackbar-border-radius: 4px !default,