Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4e08b79

Browse files
chansee97chansee97
committed
feat: update the layout mode
1 parent fcd28fc commit 4e08b79

File tree

16 files changed

+231
-399
lines changed

16 files changed

+231
-399
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
- Secondary encapsulation of commonly used components to meet basic work requirements.
3232
- Dark theme adaptation, maintaining the Naive style for interface aesthetics.
3333
- Only performs eslint validation during submission without excessive restrictions for simpler development.
34-
- Flexible and configurable interface style layout.
34+
- Flexible and configurable interface layout based on [pro-naive-ui](https://github.com/Zheng-Changfu/pro-naive-ui)
3535
- Multilanguage (i18n) support.
3636

3737
## Project preview

‎README.zh-CN.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
- 对日常使用频率较高的组件二次封装,满足基础工作需求
3232
- 黑暗主题适配, 界面样式保持Naive风格
3333
- 仅在提交时进行eslint校验，没有过多限制，开发更简便
34-
- 界面样式布局灵活可配置
34+
- 基于[pro-naive-ui](https://github.com/Zheng-Changfu/pro-naive-ui)的界面布局，灵活可配置
3535
- 多语言（i18n）支持
3636

3737
## 项目预览

‎locales/en_US.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,12 @@
5959
"backHome": "Back to the homepage",
6060
"getRouteError": "Failed to obtain route, please try again later.",
6161
"layoutSetting": "Layout settings",
62-
"leftMenu": "Left menu",
63-
"topMenu": "Top menu",
64-
"mixMenu": "Mix menu"
62+
"verticalLayout": "Vertical layout",
63+
"horizontalLayout": "Horizontal layout",
64+
"twoColumnLayout": "Two column layout",
65+
"mixedTwoColumnLayout": "Mixed two column layout",
66+
"sidebarLayout": "Sidebar layout",
67+
"mixedSidebarLayout": "Mixed sidebar layout"
6568
},
6669
"login": {
6770
"signInTitle": "Login",

‎locales/zh_CN.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,12 @@
5959
"backHome": "回到首页",
6060
"getRouteError": "获取路由失败，请稍后再试",
6161
"layoutSetting": "布局设置",
62-
"leftMenu": "左侧菜单",
63-
"topMenu": "顶部菜单",
64-
"mixMenu": "混合菜单"
62+
"verticalLayout": "竖向布局",
63+
"horizontalLayout": "横向布局",
64+
"twoColumnLayout": "双栏布局",
65+
"mixedTwoColumnLayout": "混合双栏布局",
66+
"sidebarLayout": "侧边栏布局",
67+
"mixedSidebarLayout": "双栏布局"
6568
},
6669
"http": {
6770
"400": "请求出现语法错误",

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"md-editor-v3": "^5.6.1",
5858
"pinia": "^3.0.3",
5959
"pinia-plugin-persistedstate": "^4.3.0",
60+
"pro-naive-ui": "^2.4.3",
6061
"quill": "^2.0.3",
6162
"radash": "^12.1.0",
6263
"vue": "^3.5.16",

‎src/layouts/Content.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
import { useAppStore, useRouteStore } from '@/store'
3+
4+
const appStore = useAppStore()
5+
const routeStore = useRouteStore()
6+
</script>
7+
8+
<template>
9+
<n-el>
10+
<router-view
11+
v-slot="{ Component, route }"
12+
class="flex-1 p-16px"
13+
style="background-color: var(--action-color);"
14+
>
15+
<transition :name="appStore.transitionAnimation" mode="out-in">
16+
<keep-alive :include="routeStore.cacheRoutes">
17+
<component :is="Component" v-if="appStore.loadFlag" :key="route.fullPath" />
18+
</keep-alive>
19+
</transition>
20+
</router-view>
21+
</n-el>
22+
</template>

‎src/layouts/components/common/LayoutSelector.vue‎

Lines changed: 72 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,120 @@
11
<script setup lang="ts">
2-
import type { LayoutMode } from '@/store/app'
2+
import type { ProLayoutMode } from 'pro-naive-ui'
33
4-
const value = defineModel<LayoutMode>('value', { required: true })
4+
const value = defineModel<ProLayoutMode>('value', { required: true })
55
</script>
66

77
<template>
8-
<div class="flex-center gap-4">
9-
<n-tooltip placement="bottom" trigger="hover">
8+
<div class="selector-wapper gap-4">
9+
<n-tooltip placement="top" trigger="hover">
1010
<template #trigger>
1111
<n-el
1212
:class="{
13-
'outline outline-2': value === 'leftMenu',
13+
'outline outline-2': value === 'vertical',
1414
}"
1515
class="grid grid-cols-[20%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
16-
@click="value = 'leftMenu'"
16+
@click="value = 'vertical'"
1717
>
1818
<div class="bg-[var(--primary-color)]" />
1919
<div class="bg-[var(--divider-color)]" />
2020
</n-el>
2121
</template>
22-
<span> {{ $t('app.leftMenu') }} </span>
22+
<span> {{ $t('app.verticalLayout') }} </span>
2323
</n-tooltip>
2424

25-
<n-tooltip placement="bottom" trigger="hover">
25+
<n-tooltip placement="top" trigger="hover">
2626
<template #trigger>
2727
<n-el
2828
:class="{
29-
'outline outline-2': value === 'topMenu',
29+
'outline outline-2': value === 'horizontal',
3030
}"
3131
class="grid grid-rows-[30%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
32-
@click="value = 'topMenu'"
32+
@click="value = 'horizontal'"
33+
>
34+
<div class="bg-[var(--primary-color)]" />
35+
<div class="bg-[var(--divider-color)]" />
36+
</n-el>
37+
</template>
38+
<span> {{ $t('app.horizontalLayout') }} </span>
39+
</n-tooltip>
40+
41+
<n-tooltip placement="top" trigger="hover">
42+
<template #trigger>
43+
<n-el
44+
:class="{
45+
'outline outline-2': value === 'two-column',
46+
}"
47+
class="grid grid-cols-[10%_15%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
48+
@click="value = 'two-column'"
3349
>
3450
<div class="bg-[var(--primary-color)]" />
51+
<div class="bg-[var(--primary-color-suppl)]" />
3552
<div class="bg-[var(--divider-color)]" />
3653
</n-el>
3754
</template>
38-
<span> {{ $t('app.topMenu') }} </span>
55+
<span> {{ $t('app.twoColumnLayout') }} </span>
3956
</n-tooltip>
4057

4158
<n-tooltip placement="bottom" trigger="hover">
4259
<template #trigger>
4360
<n-el
4461
:class="{
45-
'outline outline-2': value === 'mixMenu',
62+
'outline outline-2': value === 'mixed-two-column',
63+
}"
64+
class="grid grid-cols-[10%_15%_1fr] grid-rows-[20%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
65+
@click="value = 'mixed-two-column'"
66+
>
67+
<div class="bg-[var(--primary-color-suppl)] row-span-2" />
68+
<div class="bg-[var(--primary-color-suppl)] row-span-2" />
69+
<div class="bg-[var(--primary-color)]" />
70+
<div class="bg-[var(--divider-color)]" />
71+
</n-el>
72+
</template>
73+
<span> {{ $t('app.mixedTwoColumnLayout') }} </span>
74+
</n-tooltip>
75+
76+
<n-tooltip placement="bottom" trigger="hover">
77+
<template #trigger>
78+
<n-el
79+
:class="{
80+
'outline outline-2': value === 'sidebar',
4681
}"
4782
class="grid grid-cols-[20%_1fr] grid-rows-[20%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
48-
@click="value = 'mixMenu'"
83+
@click="value = 'sidebar'"
4984
>
50-
<div class="bg-[var(--primary-color)] row-span-2" />
85+
<div class="bg-[var(--divider-color)] col-span-2" />
5186
<div class="bg-[var(--primary-color)]" />
5287
<div class="bg-[var(--divider-color)]" />
5388
</n-el>
5489
</template>
55-
<span> {{ $t('app.mixMenu') }} </span>
90+
<span> {{ $t('app.sidebarLayout') }} </span>
91+
</n-tooltip>
92+
93+
<n-tooltip placement="bottom" trigger="hover">
94+
<template #trigger>
95+
<n-el
96+
:class="{
97+
'outline outline-2': value === 'mixed-sidebar',
98+
}"
99+
class="grid grid-cols-[20%_1fr] grid-rows-[20%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
100+
@click="value = 'mixed-sidebar'"
101+
>
102+
<div class="bg-[var(--primary-color)] col-span-2" />
103+
<div class="bg-[var(--primary-color-suppl)]" />
104+
<div class="bg-[var(--divider-color)]" />
105+
</n-el>
106+
</template>
107+
<span> {{ $t('app.mixedSidebarLayout') }} </span>
56108
</n-tooltip>
57109
</div>
58110
</template>
59111

60112
<style lang="scss" scoped>
113+
.selector-wapper{
114+
display: grid;
115+
grid-template-columns: repeat(3, 1fr);
116+
}
117+
61118
.grid{
62119
height: 60px;
63120
width: 86px;

src/layouts/components/sider/Logo.vue renamed to src/layouts/components/common/Logo.vue

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,16 @@ const router = useRouter()
55
const appStore = useAppStore()
66
77
const name = import.meta.env.VITE_APP_NAME
8+
9+
const hidenLogoText = computed(() => {
10+
if (['sidebar', 'mixed-sidebar', 'horizontal'].includes(appStore.layoutMode)) {
11+
return false
12+
}
13+
if (['two-column', 'mixed-two-column'].includes(appStore.layoutMode)) {
14+
return true
15+
}
16+
return appStore.collapsed
17+
})
818
</script>
919

1020
<template>
@@ -14,7 +24,7 @@ const name = import.meta.env.VITE_APP_NAME
1424
>
1525
<svg-icons-logo class="text-1.5em" />
1626
<span
17-
v-show="!appStore.collapsed"
27+
v-show="!hidenLogoText"
1828
class="text-ellipsis overflow-hidden whitespace-nowrap"
1929
>{{ name }}</span>
2030
</div>

‎src/layouts/components/index.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import BackTop from './common/BackTop.vue'
22
import Setting from './common/Setting.vue'
33
import SettingDrawer from './common/SettingDrawer.vue'
4+
import Logo from './common/Logo.vue'
45

56
import Breadcrumb from './header/Breadcrumb.vue'
67
import CollapaseButton from './header/CollapaseButton.vue'
@@ -9,9 +10,6 @@ import Notices from './header/Notices.vue'
910
import Search from './header/Search.vue'
1011
import UserCenter from './header/UserCenter.vue'
1112

12-
import Logo from './sider/Logo.vue'
13-
import Menu from './sider/Menu.vue'
14-
1513
import TabBar from './tab/TabBar.vue'
1614

1715
export {
@@ -20,7 +18,6 @@ export {
2018
CollapaseButton,
2119
FullScreen,
2220
Logo,
23-
Menu,
2421
Notices,
2522
Search,
2623
Setting,

‎src/layouts/components/sider/Menu.vue‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

0 commit comments

Comments
 (0)