A
+ *
+ *
+ * ``` // B.vue
+ * ```vue
+ *
+ * B
+ *
+ *
+ * ```;
+ *
+ * // C.vue is same as B.vue
+ *
+ * @param contextName Context name
+ * @param fn Context function
+ */
+export default function useContext
+
+
+
+
diff --git a/frontend/packages/materials/src/libs/admin-layout/shared.ts b/frontend/packages/materials/src/libs/admin-layout/shared.ts
new file mode 100644
index 00000000..940451ea
--- /dev/null
+++ b/frontend/packages/materials/src/libs/admin-layout/shared.ts
@@ -0,0 +1,68 @@
+import type { AdminLayoutProps, LayoutCssVars, LayoutCssVarsProps } from '../../types';
+
+/** The id of the scroll element of the layout */
+export const LAYOUT_SCROLL_EL_ID = '__SCROLL_EL_ID__';
+
+/** The max z-index of the layout */
+export const LAYOUT_MAX_Z_INDEX = 100;
+
+/**
+ * Create layout css vars by css vars props
+ *
+ * @param props Css vars props
+ */
+function createLayoutCssVarsByCssVarsProps(props: LayoutCssVarsProps) {
+ const cssVars: LayoutCssVars = {
+ '--soy-header-height': `${props.headerHeight}px`,
+ '--soy-header-z-index': props.headerZIndex,
+ '--soy-tab-height': `${props.tabHeight}px`,
+ '--soy-tab-z-index': props.tabZIndex,
+ '--soy-sider-width': `${props.siderWidth}px`,
+ '--soy-sider-collapsed-width': `${props.siderCollapsedWidth}px`,
+ '--soy-sider-z-index': props.siderZIndex,
+ '--soy-mobile-sider-z-index': props.mobileSiderZIndex,
+ '--soy-footer-height': `${props.footerHeight}px`,
+ '--soy-footer-z-index': props.footerZIndex
+ };
+
+ return cssVars;
+}
+
+/**
+ * Create layout css vars
+ *
+ * @param props
+ */
+export function createLayoutCssVars(props: AdminLayoutProps) {
+ const {
+ mode,
+ isMobile,
+ maxZIndex = LAYOUT_MAX_Z_INDEX,
+ headerHeight,
+ tabHeight,
+ siderWidth,
+ siderCollapsedWidth,
+ footerHeight
+ } = props;
+
+ const headerZIndex = maxZIndex - 3;
+ const tabZIndex = maxZIndex - 5;
+ const siderZIndex = mode === 'vertical' || isMobile ? maxZIndex - 1 : maxZIndex - 4;
+ const mobileSiderZIndex = isMobile ? maxZIndex - 2 : 0;
+ const footerZIndex = maxZIndex - 5;
+
+ const cssProps: LayoutCssVarsProps = {
+ headerHeight,
+ headerZIndex,
+ tabHeight,
+ tabZIndex,
+ siderWidth,
+ siderZIndex,
+ mobileSiderZIndex,
+ siderCollapsedWidth,
+ footerHeight,
+ footerZIndex
+ };
+
+ return createLayoutCssVarsByCssVarsProps(cssProps);
+}
diff --git a/frontend/packages/materials/src/libs/page-tab/button-tab.vue b/frontend/packages/materials/src/libs/page-tab/button-tab.vue
new file mode 100644
index 00000000..0826e712
--- /dev/null
+++ b/frontend/packages/materials/src/libs/page-tab/button-tab.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/packages/materials/src/libs/page-tab/chrome-tab-bg.vue b/frontend/packages/materials/src/libs/page-tab/chrome-tab-bg.vue
new file mode 100644
index 00000000..151e03a2
--- /dev/null
+++ b/frontend/packages/materials/src/libs/page-tab/chrome-tab-bg.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/frontend/packages/materials/src/libs/page-tab/chrome-tab.vue b/frontend/packages/materials/src/libs/page-tab/chrome-tab.vue
new file mode 100644
index 00000000..e4509b06
--- /dev/null
+++ b/frontend/packages/materials/src/libs/page-tab/chrome-tab.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
diff --git a/frontend/packages/materials/src/libs/page-tab/index.module.css b/frontend/packages/materials/src/libs/page-tab/index.module.css
new file mode 100644
index 00000000..abf56a5f
--- /dev/null
+++ b/frontend/packages/materials/src/libs/page-tab/index.module.css
@@ -0,0 +1,97 @@
+/* @type */
+
+.button-tab {
+ border-color: #e5e7eb;
+}
+
+.button-tab_dark {
+ border-color: #ffffff3d;
+}
+
+.button-tab:hover {
+ color: var(--soy-primary-color);
+ border-color: var(--soy-primary-color-opacity3);
+}
+
+.button-tab_active {
+ color: var(--soy-primary-color);
+ border-color: var(--soy-primary-color-opacity3);
+ background-color: var(--soy-primary-color-opacity1);
+}
+
+.button-tab_active_dark {
+ background-color: var(--soy-primary-color-opacity2);
+}
+
+.button-tab .svg-close:hover {
+ font-size: 12px;
+ color: #ffffff;
+ background-color: var(--soy-primary-color);
+}
+
+.button-tab_dark .svg-close:hover {
+ color: #000000;
+}
+
+.chrome-tab:hover {
+ z-index: 9;
+}
+
+.chrome-tab_active {
+ z-index: 10;
+ color: var(--soy-primary-color);
+}
+
+.chrome-tab__bg {
+ color: transparent;
+}
+
+.chrome-tab_active .chrome-tab__bg {
+ color: var(--soy-primary-color1);
+}
+
+.chrome-tab_active_dark .chrome-tab__bg {
+ color: var(--soy-primary-color2);
+}
+
+.chrome-tab:hover .chrome-tab__bg {
+ color: #dee1e6;
+}
+
+.chrome-tab_active:hover .chrome-tab__bg {
+ color: var(--soy-primary-color1);
+}
+
+.chrome-tab_dark:hover .chrome-tab__bg {
+ color: #333333;
+}
+
+.chrome-tab_active_dark:hover .chrome-tab__bg {
+ color: var(--soy-primary-color2);
+}
+
+.chrome-tab .svg-close:hover {
+ font-size: 12px;
+ color: #ffffff;
+ background-color: #9ca3af;
+}
+
+.chrome-tab_active .svg-close:hover {
+ background-color: var(--soy-primary-color);
+}
+
+.chrome-tab_dark .svg-close:hover {
+ color: #000000;
+}
+
+.chrome-tab_active .chrome-tab-divider {
+ opacity: 0;
+}
+
+.chrome-tab:hover .chrome-tab-divider {
+ opacity: 0;
+}
+
+.chrome-tab_dark .chrome-tab-divider {
+ background-color: rgba(255, 255, 255, 0.9);
+}
diff --git a/frontend/packages/materials/src/libs/page-tab/index.module.css.d.ts b/frontend/packages/materials/src/libs/page-tab/index.module.css.d.ts
new file mode 100644
index 00000000..ab45c0a9
--- /dev/null
+++ b/frontend/packages/materials/src/libs/page-tab/index.module.css.d.ts
@@ -0,0 +1,15 @@
+declare const styles: {
+ readonly 'button-tab': string;
+ readonly 'button-tab_dark': string;
+ readonly 'button-tab_active': string;
+ readonly 'button-tab_active_dark': string;
+ readonly 'chrome-tab': string;
+ readonly 'chrome-tab_active': string;
+ readonly 'chrome-tab__bg': string;
+ readonly 'chrome-tab_active_dark': string;
+ readonly 'chrome-tab_dark': string;
+ readonly 'chrome-tab-divider': string;
+ readonly 'svg-close': string;
+};
+
+export default styles;
diff --git a/frontend/packages/materials/src/libs/page-tab/index.ts b/frontend/packages/materials/src/libs/page-tab/index.ts
new file mode 100644
index 00000000..b402adf8
--- /dev/null
+++ b/frontend/packages/materials/src/libs/page-tab/index.ts
@@ -0,0 +1,3 @@
+import PageTab from './index.vue';
+
+export default PageTab;
diff --git a/frontend/packages/materials/src/libs/page-tab/index.vue b/frontend/packages/materials/src/libs/page-tab/index.vue
new file mode 100644
index 00000000..dd4c5d13
--- /dev/null
+++ b/frontend/packages/materials/src/libs/page-tab/index.vue
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/packages/materials/src/libs/simple-scrollbar/index.ts b/frontend/packages/materials/src/libs/simple-scrollbar/index.ts
new file mode 100644
index 00000000..1453a06a
--- /dev/null
+++ b/frontend/packages/materials/src/libs/simple-scrollbar/index.ts
@@ -0,0 +1,3 @@
+import SimpleScrollbar from './index.vue';
+
+export default SimpleScrollbar;
diff --git a/frontend/packages/materials/src/libs/simple-scrollbar/index.vue b/frontend/packages/materials/src/libs/simple-scrollbar/index.vue
new file mode 100644
index 00000000..1e8076b1
--- /dev/null
+++ b/frontend/packages/materials/src/libs/simple-scrollbar/index.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/packages/materials/src/types/index.ts b/frontend/packages/materials/src/types/index.ts
new file mode 100644
index 00000000..bbcfb9d6
--- /dev/null
+++ b/frontend/packages/materials/src/types/index.ts
@@ -0,0 +1,294 @@
+/** Header config */
+interface AdminLayoutHeaderConfig {
+ /**
+ * Whether header is visible
+ *
+ * @default true
+ */
+ headerVisible?: boolean;
+ /**
+ * Header class
+ *
+ * @default ''
+ */
+ headerClass?: string;
+ /**
+ * Header height
+ *
+ * @default 56px
+ */
+ headerHeight?: number;
+}
+
+/** Tab config */
+interface AdminLayoutTabConfig {
+ /**
+ * Whether tab is visible
+ *
+ * @default true
+ */
+ tabVisible?: boolean;
+ /**
+ * Tab class
+ *
+ * @default ''
+ */
+ tabClass?: string;
+ /**
+ * Tab height
+ *
+ * @default 48px
+ */
+ tabHeight?: number;
+}
+
+/** Sider config */
+interface AdminLayoutSiderConfig {
+ /**
+ * Whether sider is visible
+ *
+ * @default true
+ */
+ siderVisible?: boolean;
+ /**
+ * Sider class
+ *
+ * @default ''
+ */
+ siderClass?: string;
+ /**
+ * Mobile sider class
+ *
+ * @default ''
+ */
+ mobileSiderClass?: string;
+ /**
+ * Sider collapse status
+ *
+ * @default false
+ */
+ siderCollapse?: boolean;
+ /**
+ * Sider width when collapse is false
+ *
+ * @default '220px'
+ */
+ siderWidth?: number;
+ /**
+ * Sider width when collapse is true
+ *
+ * @default '64px'
+ */
+ siderCollapsedWidth?: number;
+}
+
+/** Content config */
+export interface AdminLayoutContentConfig {
+ /**
+ * Content class
+ *
+ * @default ''
+ */
+ contentClass?: string;
+ /**
+ * Whether content is full the page
+ *
+ * If true, other elements will be hidden by `display: none`
+ */
+ fullContent?: boolean;
+}
+
+/** Footer config */
+export interface AdminLayoutFooterConfig {
+ /**
+ * Whether footer is visible
+ *
+ * @default true
+ */
+ footerVisible?: boolean;
+ /**
+ * Whether footer is fixed
+ *
+ * @default true
+ */
+ fixedFooter?: boolean;
+ /**
+ * Footer class
+ *
+ * @default ''
+ */
+ footerClass?: string;
+ /**
+ * Footer height
+ *
+ * @default 48px
+ */
+ footerHeight?: number;
+ /**
+ * Whether footer is on the right side
+ *
+ * When the layout is vertical, the footer is on the right side
+ */
+ rightFooter?: boolean;
+}
+
+/**
+ * Layout mode
+ *
+ * - Horizontal
+ * - Vertical
+ */
+export type LayoutMode = 'horizontal' | 'vertical';
+
+/**
+ * The scroll mode when content overflow
+ *
+ * - Wrapper: the layout component's wrapper element has a scrollbar
+ * - Content: the layout component's content element has a scrollbar
+ *
+ * @default 'wrapper'
+ */
+export type LayoutScrollMode = 'wrapper' | 'content';
+
+/** Admin layout props */
+export interface AdminLayoutProps
+ extends AdminLayoutHeaderConfig,
+ AdminLayoutTabConfig,
+ AdminLayoutSiderConfig,
+ AdminLayoutContentConfig,
+ AdminLayoutFooterConfig {
+ /**
+ * Layout mode
+ *
+ * - {@link LayoutMode}
+ */
+ mode?: LayoutMode;
+ /** Is mobile layout */
+ isMobile?: boolean;
+ /**
+ * Scroll mode
+ *
+ * - {@link ScrollMode}
+ */
+ scrollMode?: LayoutScrollMode;
+ /**
+ * The id of the scroll element of the layout
+ *
+ * It can be used to get the corresponding Dom and scroll it
+ *
+ * @example
+ * use the default id by import
+ * ```ts
+ * import { adminLayoutScrollElId } from '@sa/vue-materials';
+ * ```
+ *
+ * @default
+ * ```ts
+ * const adminLayoutScrollElId = '__ADMIN_LAYOUT_SCROLL_EL_ID__'
+ * ```
+ */
+ scrollElId?: string;
+ /** The class of the scroll element */
+ scrollElClass?: string;
+ /** The class of the scroll wrapper element */
+ scrollWrapperClass?: string;
+ /**
+ * The common class of the layout
+ *
+ * Is can be used to configure the transition animation
+ *
+ * @default 'transition-all-300'
+ */
+ commonClass?: string;
+ /**
+ * Whether fix the header and tab
+ *
+ * @default true
+ */
+ fixedTop?: boolean;
+ /**
+ * The max z-index of the layout
+ *
+ * The z-index of Header,Tab,Sider and Footer will not exceed this value
+ */
+ maxZIndex?: number;
+}
+
+type Kebab${result.routeName}
+
+
+
+`;
+
+ const filePath = path.join(routeDir, fileName);
+
+ await writeFile(filePath, vueTemplate);
+}
diff --git a/frontend/packages/scripts/src/commands/update-pkg.ts b/frontend/packages/scripts/src/commands/update-pkg.ts
new file mode 100644
index 00000000..54d1132d
--- /dev/null
+++ b/frontend/packages/scripts/src/commands/update-pkg.ts
@@ -0,0 +1,5 @@
+import { execCommand } from '../shared';
+
+export async function updatePkg(args: string[] = ['--deep', '-u']) {
+ execCommand('npx', ['ncu', ...args], { stdio: 'inherit' });
+}
diff --git a/frontend/packages/scripts/src/config/index.ts b/frontend/packages/scripts/src/config/index.ts
new file mode 100644
index 00000000..4f84e3d2
--- /dev/null
+++ b/frontend/packages/scripts/src/config/index.ts
@@ -0,0 +1,55 @@
+import process from 'node:process';
+import { loadConfig } from 'c12';
+import type { CliOption } from '../types';
+
+const defaultOptions: CliOption = {
+ cwd: process.cwd(),
+ cleanupDirs: [
+ '**/dist',
+ '**/package-lock.json',
+ '**/yarn.lock',
+ '**/pnpm-lock.yaml',
+ '**/node_modules',
+ '!node_modules/**'
+ ],
+ gitCommitTypes: [
+ ['feat', 'A new feature'],
+ ['fix', 'A bug fix'],
+ ['docs', 'Documentation only changes'],
+ ['style', 'Changes that do not affect the meaning of the code'],
+ ['refactor', 'A code change that neither fixes a bug nor adds a feature'],
+ ['perf', 'A code change that improves performance'],
+ ['optimize', 'A code change that optimizes code quality'],
+ ['test', 'Adding missing tests or correcting existing tests'],
+ ['build', 'Changes that affect the build system or external dependencies'],
+ ['ci', 'Changes to our CI configuration files and scripts'],
+ ['chore', "Other changes that don't modify src or test files"],
+ ['revert', 'Reverts a previous commit']
+ ],
+ gitCommitScopes: [
+ ['projects', 'project'],
+ ['packages', 'packages'],
+ ['components', 'components'],
+ ['hooks', 'hook functions'],
+ ['utils', 'utils functions'],
+ ['types', 'TS declaration'],
+ ['styles', 'style'],
+ ['deps', 'project dependencies'],
+ ['release', 'release project'],
+ ['other', 'other changes']
+ ],
+ ncuCommandArgs: ['--deep', '-u'],
+ changelogOptions: {}
+};
+
+export async function loadCliOptions(overrides?: Partial
+
+ {{ item.title }}
+
+
+
+
+
+
+
diff --git a/frontend/src/components/common/exception-base.vue b/frontend/src/components/common/exception-base.vue
new file mode 100644
index 00000000..4b1dfc27
--- /dev/null
+++ b/frontend/src/components/common/exception-base.vue
@@ -0,0 +1,43 @@
+
+
+
+
+ {{ $t('common.backToHome') }}
+
+
+
+
diff --git a/frontend/src/components/common/full-screen.vue b/frontend/src/components/common/full-screen.vue
new file mode 100644
index 00000000..41c1c562
--- /dev/null
+++ b/frontend/src/components/common/full-screen.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+
diff --git a/frontend/src/components/common/theme-schema-switch.vue b/frontend/src/components/common/theme-schema-switch.vue
new file mode 100644
index 00000000..f505cbeb
--- /dev/null
+++ b/frontend/src/components/common/theme-schema-switch.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/custom/button-icon.vue b/frontend/src/components/custom/button-icon.vue
new file mode 100644
index 00000000..9f8c9596
--- /dev/null
+++ b/frontend/src/components/custom/button-icon.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/custom/mountains-bg.vue b/frontend/src/components/custom/mountains-bg.vue
new file mode 100644
index 00000000..88ebd663
--- /dev/null
+++ b/frontend/src/components/custom/mountains-bg.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/components/custom/soybean-avatar.vue b/frontend/src/components/custom/soybean-avatar.vue
new file mode 100644
index 00000000..98c55bfb
--- /dev/null
+++ b/frontend/src/components/custom/soybean-avatar.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+ {{ $t('common.lookForward') }}
+
+
+
+
+
+
diff --git a/frontend/src/components/custom/svg-icon.vue b/frontend/src/components/custom/svg-icon.vue
new file mode 100644
index 00000000..0d200c71
--- /dev/null
+++ b/frontend/src/components/custom/svg-icon.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/constants/app.ts b/frontend/src/constants/app.ts
new file mode 100644
index 00000000..ca4f9276
--- /dev/null
+++ b/frontend/src/constants/app.ts
@@ -0,0 +1,52 @@
+import { transformRecordToOption } from '@/utils/common';
+
+export const themeSchemaRecord: Record
+
- ![dRAGon]()
- dRAGon
- © 2024
-
-
-
diff --git a/frontend/src/layout/AppLayout.vue b/frontend/src/layout/AppLayout.vue
deleted file mode 100644
index dd7f3cdb..00000000
--- a/frontend/src/layout/AppLayout.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
- ![logo]()
- dRAGon
-
-
-
-
-
-
-
-
-
diff --git a/frontend/src/layout/composables/layout.js b/frontend/src/layout/composables/layout.js
deleted file mode 100644
index e6c68a3a..00000000
--- a/frontend/src/layout/composables/layout.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { toRefs, reactive, computed } from 'vue';
-
-const layoutConfig = reactive({
- ripple: true,
- darkTheme: false,
- inputStyle: 'outlined',
- menuMode: 'static',
- theme: 'aura-light-purple',
- scale: 14,
- activeMenuItem: null
-});
-
-const layoutState = reactive({
- staticMenuDesktopInactive: false,
- overlayMenuActive: false,
- profileSidebarVisible: false,
- configSidebarVisible: false,
- staticMenuMobileActive: false,
- menuHoverActive: false
-});
-
-export function useLayout() {
- const setScale = (scale) => {
- layoutConfig.scale = scale;
- };
-
- const setActiveMenuItem = (item) => {
- layoutConfig.activeMenuItem = item.value || item;
- };
-
- const onMenuToggle = () => {
- if (layoutConfig.menuMode === 'overlay') {
- layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
- }
-
- if (window.innerWidth > 991) {
- layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive;
- } else {
- layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive;
- }
- };
-
- const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive);
-
- const isDarkTheme = computed(() => layoutConfig.darkTheme);
-
- return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem };
-}
diff --git a/frontend/src/layouts/base-layout/index.vue b/frontend/src/layouts/base-layout/index.vue
new file mode 100644
index 00000000..746aa68b
--- /dev/null
+++ b/frontend/src/layouts/base-layout/index.vue
@@ -0,0 +1,140 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ $t('system.title') }} +
+
+
+ + {{ label }} +
+
+
+
+
+
+
+
diff --git a/frontend/src/layouts/modules/global-menu/horizontal-mix-menu.vue b/frontend/src/layouts/modules/global-menu/horizontal-mix-menu.vue
new file mode 100644
index 00000000..1a57b2df
--- /dev/null
+++ b/frontend/src/layouts/modules/global-menu/horizontal-mix-menu.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/layouts/modules/global-search/components/search-footer.vue b/frontend/src/layouts/modules/global-search/components/search-footer.vue
new file mode 100644
index 00000000..0fa6c8f8
--- /dev/null
+++ b/frontend/src/layouts/modules/global-search/components/search-footer.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+ {{ $t('system.title') }}
+
+
+
+
+
+
diff --git a/frontend/src/layouts/modules/global-search/components/search-modal.vue b/frontend/src/layouts/modules/global-search/components/search-modal.vue
new file mode 100644
index 00000000..39f18a84
--- /dev/null
+++ b/frontend/src/layouts/modules/global-search/components/search-modal.vue
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ tab.label }}
+
+
+
+
+
diff --git a/frontend/src/layouts/modules/theme-drawer/components/setting-item.vue b/frontend/src/layouts/modules/theme-drawer/components/setting-item.vue
new file mode 100644
index 00000000..fd2111e9
--- /dev/null
+++ b/frontend/src/layouts/modules/theme-drawer/components/setting-item.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t(themeLayoutModeRecord[key]) }}
+
+
+
+
+
diff --git a/frontend/src/layouts/modules/theme-drawer/index.vue b/frontend/src/layouts/modules/theme-drawer/index.vue
new file mode 100644
index 00000000..aa937d5a
--- /dev/null
+++ b/frontend/src/layouts/modules/theme-drawer/index.vue
@@ -0,0 +1,31 @@
+
+
+
+
+ {{ label }}
+
+
+
+ {{ $t('theme.configOperation.resetConfig') }}
+
+
+
+
diff --git a/frontend/src/layouts/modules/theme-drawer/modules/dark-mode.vue b/frontend/src/layouts/modules/theme-drawer/modules/dark-mode.vue
new file mode 100644
index 00000000..d2063df8
--- /dev/null
+++ b/frontend/src/layouts/modules/theme-drawer/modules/dark-mode.vue
@@ -0,0 +1,69 @@
+
+
+
+
+ {{ $t('theme.configOperation.copyConfig') }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/layouts/modules/theme-drawer/modules/layout-mode.vue b/frontend/src/layouts/modules/theme-drawer/modules/layout-mode.vue
new file mode 100644
index 00000000..1c50b7d0
--- /dev/null
+++ b/frontend/src/layouts/modules/theme-drawer/modules/layout-mode.vue
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('theme.themeColor.followPrimary') }}
+
+
+
+
+
+
+
diff --git a/frontend/src/locales/dayjs.ts b/frontend/src/locales/dayjs.ts
new file mode 100644
index 00000000..1ba64295
--- /dev/null
+++ b/frontend/src/locales/dayjs.ts
@@ -0,0 +1,18 @@
+import { locale } from 'dayjs';
+import 'dayjs/locale/en';
+import { localStg } from '@/utils/storage';
+
+/**
+ * Set dayjs locale
+ *
+ * @param lang
+ */
+export function setDayjsLocale(lang: App.I18n.LangType = 'en-US') {
+ const localMap = {
+ 'en-US': 'en'
+ } satisfies Record
+ {{ $t('theme.recommendColorDesc') }}
+
+
+ 
+
`;
+
+ const app = document.getElementById('app');
+
+ if (app) {
+ app.innerHTML = loading;
+ }
+}
diff --git a/frontend/src/plugins/nprogress.ts b/frontend/src/plugins/nprogress.ts
new file mode 100644
index 00000000..841ae1ee
--- /dev/null
+++ b/frontend/src/plugins/nprogress.ts
@@ -0,0 +1,9 @@
+import NProgress from 'nprogress';
+
+/** Setup plugin NProgress */
+export function setupNProgress() {
+ NProgress.configure({ easing: 'ease', speed: 500 });
+
+ // mount on window
+ window.NProgress = NProgress;
+}
diff --git a/frontend/src/router/elegant/imports.ts b/frontend/src/router/elegant/imports.ts
new file mode 100644
index 00000000..dc383cb1
--- /dev/null
+++ b/frontend/src/router/elegant/imports.ts
@@ -0,0 +1,29 @@
+/* eslint-disable */
+/* prettier-ignore */
+// Generated by elegant-router
+// Read more: https://github.com/soybeanjs/elegant-router
+
+import type { RouteComponent } from "vue-router";
+import type { LastLevelRouteKey, RouteLayout } from "@elegant-router/types";
+
+import BaseLayout from "@/layouts/base-layout/index.vue";
+import BlankLayout from "@/layouts/blank-layout/index.vue";
+
+export const layouts: Record
+
+
+ ${dot}
+
+