diff --git a/locales/en_US.json b/locales/en_US.json
index 9fc48b6..bf02e42 100644
--- a/locales/en_US.json
+++ b/locales/en_US.json
@@ -52,7 +52,10 @@
"closeLeft": "Close left",
"closeRight": "Close right",
"backHome": "Back to the homepage",
- "getRouteError": "Failed to obtain route, please try again later."
+ "getRouteError": "Failed to obtain route, please try again later.",
+ "layoutSetting": "Layout settings",
+ "leftMenu": "Left menu",
+ "topMenu": "Top menu"
},
"login": {
"signInTitle": "Login",
diff --git a/locales/zh_CN.json b/locales/zh_CN.json
index cf3a879..f108ee8 100644
--- a/locales/zh_CN.json
+++ b/locales/zh_CN.json
@@ -52,11 +52,12 @@
"closeRight": "关闭右侧",
"closeAll": "全部关闭",
"backHome": "回到首页",
- "getRouteError": "获取路由失败,请稍后再试"
-
+ "getRouteError": "获取路由失败,请稍后再试",
+ "layoutSetting": "布局设置",
+ "leftMenu": "左侧菜单",
+ "topMenu": "顶部菜单"
},
"http": {
- "defaultTip": "请求错误",
"400": "请求出现语法错误",
"401": "用户未授权",
"403": "服务器拒绝访问",
@@ -68,7 +69,8 @@
"502": "错误网关",
"503": "服务不可用",
"504": "网关超时",
- "505": "http版本不支持该请求"
+ "505": "http版本不支持该请求",
+ "defaultTip": "请求错误"
},
"components": {
"iconSelector": {
diff --git a/src/layouts/components/common/LayoutSelector.vue b/src/layouts/components/common/LayoutSelector.vue
new file mode 100644
index 0000000..61b1e60
--- /dev/null
+++ b/src/layouts/components/common/LayoutSelector.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('app.leftMenu') }}
+
+
+
+
+
+
+
+
+
+ {{ $t('app.topMenu') }}
+
+
+
+
+
diff --git a/src/layouts/components/header/Setting.vue b/src/layouts/components/header/Setting.vue
index 8d5e6bc..672a374 100644
--- a/src/layouts/components/header/Setting.vue
+++ b/src/layouts/components/header/Setting.vue
@@ -1,4 +1,5 @@
+
+
+
+
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/leftMenu.layout.vue
similarity index 99%
rename from src/layouts/BasicLayout/index.vue
rename to src/layouts/leftMenu.layout.vue
index d729acc..36ab5c8 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/leftMenu.layout.vue
@@ -11,7 +11,7 @@ import {
Setting,
TabBar,
UserCenter,
-} from '../components'
+} from './components'
import { useAppStore, useRouteStore } from '@/store'
const routeStore = useRouteStore()
diff --git a/src/layouts/topMenu.layout.vue b/src/layouts/topMenu.layout.vue
new file mode 100644
index 0000000..db1fa8c
--- /dev/null
+++ b/src/layouts/topMenu.layout.vue
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ appStore.footerText }}
+
+
+
+
+
diff --git a/src/modules/i18n.ts b/src/modules/i18n.ts
index 3306190..eeed532 100644
--- a/src/modules/i18n.ts
+++ b/src/modules/i18n.ts
@@ -6,7 +6,7 @@ import { local } from '@/utils'
export const i18n = createI18n({
legacy: false,
- locale: local.get('lang') || 'zhCN', // 默认显示语言
+ locale: local.get('lang') || 'enUS', // 默认显示语言
fallbackLocale: 'enUS',
messages: {
zhCN,
diff --git a/src/router/routes.inner.ts b/src/router/routes.inner.ts
index 162f5b2..868ac9d 100644
--- a/src/router/routes.inner.ts
+++ b/src/router/routes.inner.ts
@@ -6,7 +6,7 @@ export const routes: RouteRecordRaw[] = [
path: '/',
name: 'root',
redirect: '/appRoot',
- component: () => import('@/layouts/index'),
+ // component: () => import('@/layouts/index'),
children: [
],
},
diff --git a/src/store/app/index.ts b/src/store/app/index.ts
index 95702ae..4b5cc4b 100644
--- a/src/store/app/index.ts
+++ b/src/store/app/index.ts
@@ -5,6 +5,7 @@ import themeConfig from './theme.json'
import { local, setLocale } from '@/utils'
type TransitionAnimation = '' | 'fade-slide' | 'fade-bottom' | 'fade-scale' | 'zoom-fade' | 'zoom-out'
+export type LayoutMode = 'leftMenu' | 'topMenu'
const docEle = ref(document.documentElement)
@@ -33,6 +34,7 @@ export const useAppStore = defineStore('app-store', {
showBreadcrumbIcon: true,
showWatermark: false,
transitionAnimation: 'fade-slide' as TransitionAnimation,
+ layoutMode: 'leftMenu' as LayoutMode,
}
},
getters: {
@@ -63,6 +65,7 @@ export const useAppStore = defineStore('app-store', {
this.showBreadcrumbIcon = true
this.showWatermark = false
this.transitionAnimation = 'fade-slide'
+ this.layoutMode = 'leftMenu'
// 重置所有配色
this.setPrimaryColor(this.primaryColor)
diff --git a/src/store/route.ts b/src/store/route.ts
index 8fe1626..e2b22de 100644
--- a/src/store/route.ts
+++ b/src/store/route.ts
@@ -8,7 +8,7 @@ import { router } from '@/router'
import { fetchUserRoutes } from '@/service'
import { staticRoutes } from '@/router/routes.static'
import { usePermission } from '@/hooks'
-import { BasicLayout } from '@/layouts/index'
+import Layout from '@/layouts/index.vue'
import { useAuthStore } from '@/store/auth'
interface RoutesStatus {
@@ -121,7 +121,7 @@ export const useRouteStore = defineStore('route-store', {
path: '/appRoot',
name: 'appRoot',
redirect: import.meta.env.VITE_HOME_PATH,
- component: BasicLayout,
+ component: Layout,
meta: {
title: '',
icon: 'icon-park-outline:home',
diff --git a/unocss.config.ts b/unocss.config.ts
index 2683fd6..2e730e6 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig, presetAttributify, presetUno } from 'unocss'
+import { defineConfig, presetAttributify, presetUno, transformerVariantGroup } from 'unocss'
// https://github.com/unocss/unocss
@@ -11,4 +11,7 @@ export default defineConfig({
'flex-x-center': 'flex justify-center',
'flex-y-center': 'flex items-center',
},
+ transformers: [
+ transformerVariantGroup(),
+ ],
})