Skip to content

Commit 2e69317

Browse files
linshenkxlinshenkx
committed
feat(ui): 新增经典主题风格及相关国际化支持
- 在naive-theme.ts中添加经典主题配置，包含颜色和样式设置 - 在MainLayout.vue中优化布局，增加主内容包装器以支持新主题 - 在ThemeToggleUI.vue中实现经典主题图标的渲染逻辑 - 更新en-US.ts和zh-CN.ts文件，新增经典主题的国际化翻译 此次更新增强了用户界面的主题选择功能，提供了更多样化的视觉体验。
1 parent ba63eff commit 2e69317

File tree

5 files changed

+177
-8
lines changed

5 files changed

+177
-8
lines changed

‎packages/ui/src/components/MainLayout.vue‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<!-- 使用ToastUI包装整个布局以提供NMessageProvider -->
33
<ToastUI>
4-
<NLayout style="position: fixed; inset: 0; width: 100vw; height: 100vh;
4+
<NLayout style="position: fixed; inset: 0; width: 100vw; height: 100vh;
55
max-height: 100vh;
6-
overflow: hidden; display: flex; min-height: 0;"
7-
content-style="height: 100%; max-height: 100%; overflow: hidden; min-height: 0;"
6+
overflow: hidden; display: flex; min-height: 0;"
7+
content-style="height: 100%; max-height: 100%; min-height: 0; overflow: hidden;"
88
>
99

10-
<NFlex vertical style="position: fixed; inset: 0; width: 100vw; max-height: 100vh; height: 100vh">
10+
<NFlex vertical style="position: fixed; inset: 0; width: 100vw; max-height: 100vh; height: 100vh; min-height: 0;">
1111
<!-- 顶部导航栏 -->
1212
<NLayoutHeader class="theme-header nav-header-enhanced">
1313
<NFlex justify="space-between" align="center" class="w-full nav-content" :wrap="false" :size="[16, 12]">
@@ -46,11 +46,12 @@
4646

4747
<!-- 主要内容区域 - 严格控制在剩余空间内 -->
4848
<NLayoutContent has-sider
49-
style="flex: 1; min-height: 0; max-height: 90vh; height: 90vh;"
50-
content-style="height: 100%; max-height: 100%; overflow: hidden; min-height: 0;"
49+
style="flex: 1; min-height: 0; overflow: hidden;"
50+
content-style="height: 100%; max-height: 100%; min-height: 0; box-sizing: border-box; padding: 24px clamp(16px, 2vw, 48px) 40px; display: flex; flex-direction: column; align-items: stretch; overflow: hidden;"
5151
>
52-
<!-- content-style="height: 100%; max-height: 100%; overflow: hidden; min-height: 0;" -->
52+
<div class="main-content-wrapper">
5353
<slot name="main"></slot>
54+
</div>
5455
</NLayoutContent>
5556
</NFlex>
5657

@@ -117,6 +118,22 @@ const logoSize = computed(() => {
117118
</script>
118119

119120
<style>
121+
.main-content-wrapper {
122+
width: 100%;
123+
margin: 0;
124+
height: 100%;
125+
display: flex;
126+
flex-direction: column;
127+
flex: 1;
128+
min-height: 0;
129+
overflow: auto;
130+
}
131+
132+
.main-content-wrapper > * {
133+
flex: 1;
134+
min-height: 0;
135+
}
136+
120137
/* 增强导航栏样式 */
121138
.nav-header-enhanced {
122139
min-height: 64px !important;

‎packages/ui/src/components/ThemeToggleUI.vue‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,19 @@ const createThemeIcon = (themeId: string, isColored: boolean = false) => {
7575
d: 'M12 2L13.09 8.26L19 7L14.74 12L19 17L13.09 15.74L12 22L10.91 15.74L5 17L9.26 12L5 7L10.91 8.26L12 2Z'
7676
})
7777
])
78-
78+
79+
case 'classic':
80+
return h('svg', {
81+
class: `${baseClass}`,
82+
style: isColored ? 'color: #b08968;' : undefined,
83+
viewBox: '0 0 24 24',
84+
fill: 'currentColor'
85+
}, [
86+
h('path', {
87+
d: 'M12 3a9 9 0 011.8 17.823l-.3.06a1 1 0 01-.202.017H8.5a4.5 4.5 0 01-4.5-4.5v-3.13a1 1 0 01.21-.617l3.2-3.99A5 5 0 0112 3zm-.45 2.028a3 3 0 00-2.07 1.102l-3.2 3.99a2 2 0 00-.29.508V16.4A2.5 2.5 0 008.5 18.9h4.447A7 7 0 0011.55 5.028z'
88+
})
89+
])
90+
7991
case 'green':
8092
return h('svg', {
8193
class: `${baseClass}`,

‎packages/ui/src/config/naive-theme.ts‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,144 @@ export const naiveThemeConfigs: Record<string, ThemeConfig> = {
104104
}
105105
},
106106

107+
classic: {
108+
id: 'classic',
109+
name: '经典风格',
110+
naiveTheme: lightTheme,
111+
themeOverrides: {
112+
common: {
113+
primaryColor: '#7b6a58',
114+
primaryColorHover: '#6a5a4a',
115+
primaryColorPressed: '#594a3d',
116+
primaryColorSuppl: '#d7ccbc',
117+
successColor: '#059669',
118+
successColorHover: '#047857',
119+
successColorPressed: '#065f46',
120+
successColorSuppl: '#dcfce7',
121+
errorColor: '#dc2626',
122+
errorColorHover: '#b91c1c',
123+
errorColorPressed: '#991b1b',
124+
errorColorSuppl: '#fee2e2',
125+
bodyColor: '#f5f2ec',
126+
cardColor: '#fefcf8',
127+
modalColor: '#f9f5ef',
128+
popoverColor: '#fefcf8',
129+
tableColor: '#f7f1e8',
130+
inputColor: '#f8f4ee',
131+
hoverColor: 'rgba(123, 106, 88, 0.08)',
132+
textColorBase: '#403830',
133+
textColor1: '#403830',
134+
textColor2: '#6a6156',
135+
textColor3: '#968d82',
136+
placeholderColor: '#b0a79c',
137+
borderColor: '#e3d7c7',
138+
dividerColor: '#ede3d6',
139+
scrollbarColor: 'rgba(141, 126, 110, 0.4)',
140+
scrollbarColorHover: 'rgba(123, 106, 88, 0.55)',
141+
closeIconColor: 'rgba(103, 92, 80, 0.7)',
142+
closeIconColorHover: '#675c50',
143+
closeIconColorPressed: '#51473d',
144+
clearColor: 'rgba(123, 106, 88, 0.2)',
145+
clearColorHover: 'rgba(123, 106, 88, 0.3)',
146+
clearColorPressed: 'rgba(123, 106, 88, 0.4)',
147+
boxShadow1: '0 6px 20px rgba(87, 69, 55, 0.08)',
148+
boxShadow2: '0 12px 32px rgba(87, 69, 55, 0.12)'
149+
},
150+
Button: {
151+
textColorPrimary: '#3f382f',
152+
textColorHoverPrimary: '#3f382f',
153+
textColorPressedPrimary: '#3f382f',
154+
textColorFocusPrimary: '#3f382f',
155+
textColorDisabledPrimary: 'rgba(63, 56, 47, 0.4)',
156+
colorPrimary: '#d7ccbc',
157+
colorHoverPrimary: '#cabfaa',
158+
colorPressedPrimary: '#beb29a',
159+
colorFocusPrimary: '#d7ccbc',
160+
colorDisabledPrimary: '#e5dbcf',
161+
borderPrimary: '1px solid #cabfaa',
162+
borderHoverPrimary: '1px solid #b9ac96',
163+
borderPressedPrimary: '1px solid #a59782',
164+
borderFocusPrimary: '1px solid #cabfaa',
165+
borderDisabledPrimary: '1px solid #e2d6c7',
166+
rippleColorPrimary: 'rgba(123, 106, 88, 0.35)',
167+
textColor: '#4c443c',
168+
textColorHover: '#3f382f',
169+
textColorPressed: '#3f382f',
170+
color: '#f6f1ea',
171+
colorHover: '#ede3d6',
172+
colorPressed: '#e1d6c7',
173+
border: '1px solid #e3d7c7',
174+
borderHover: '1px solid #d8ccba',
175+
borderPressed: '1px solid #cbbca5'
176+
},
177+
Input: {
178+
color: '#f8f4ee',
179+
colorDisabled: '#f3ede5',
180+
colorFocus: '#fefbf7',
181+
textColor: '#403830',
182+
textColorDisabled: 'rgba(64, 56, 48, 0.45)',
183+
placeholderColor: '#b0a79c',
184+
placeholderColorDisabled: 'rgba(176, 167, 156, 0.6)',
185+
iconColor: '#a29688',
186+
iconColorHover: '#877b6d',
187+
iconColorPressed: '#6e6256',
188+
iconColorDisabled: 'rgba(162, 150, 136, 0.5)',
189+
clearColor: 'rgba(123, 106, 88, 0.2)',
190+
clearColorHover: 'rgba(123, 106, 88, 0.32)',
191+
clearColorPressed: 'rgba(123, 106, 88, 0.45)',
192+
border: '1px solid #d8cdbd',
193+
borderDisabled: '1px solid rgba(216, 205, 189, 0.6)',
194+
borderHover: '1px solid #cbbfae',
195+
borderFocus: '1px solid #bfae99',
196+
boxShadowFocus: '0 0 0 2px rgba(123, 106, 88, 0.16)',
197+
caretColor: '#7b6a58',
198+
suffixTextColor: '#8a7c6c',
199+
prefixTextColor: '#8a7c6c'
200+
},
201+
Card: {
202+
color: '#fefcf8',
203+
colorModal: '#fefcf8',
204+
colorTarget: '#fefcf8',
205+
textColor: '#403830',
206+
titleTextColor: '#3a332b',
207+
borderColor: '#e3d7c7',
208+
actionColor: '#f3eadf',
209+
closeIconColor: '#8f8376',
210+
closeIconColorHover: '#6e6256',
211+
closeIconColorPressed: '#5a4f45',
212+
boxShadow: '0 12px 32px rgba(87, 69, 55, 0.12)'
213+
},
214+
Tabs: {
215+
tabColor: '#f1ece4',
216+
tabColorActive: '#e4d8c8',
217+
tabBorderColor: '#e3d7c7',
218+
tabTextColorBar: '#6a6156',
219+
tabTextColorBarHover: '#4d453c',
220+
tabTextColorBarActive: '#4d453c',
221+
tabTextColorCard: '#6a6156',
222+
tabTextColorCardActive: '#3f382f',
223+
barColor: '#d2c5b5'
224+
},
225+
Radio: {
226+
buttonBorderColor: '#e3d7c7',
227+
buttonBorderColorActive: '#cabfaa',
228+
buttonColor: '#f6f1ea',
229+
buttonColorActive: '#d7ccbc',
230+
buttonTextColor: '#6a6156',
231+
buttonTextColorActive: '#3f382f'
232+
},
233+
Dropdown: {
234+
color: '#fefcf8',
235+
optionTextColor: '#4c443c',
236+
optionTextColorHover: '#3f382f',
237+
optionTextColorActive: '#3f382f',
238+
optionColorHover: '#ede3d6',
239+
optionColorActive: '#e1d6c7',
240+
borderColor: '#e3d7c7'
241+
}
242+
}
243+
},
244+
107245
green: {
108246
id: 'green',
109247
name: '绿色模式',

‎packages/ui/src/i18n/locales/en-US.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -618,6 +618,7 @@ export default {
618618
light: 'Light',
619619
dark: 'Dark',
620620
blue: 'Blue',
621+
classic: 'Classic',
621622
green: 'Green',
622623
purple: 'Purple'
623624
},

‎packages/ui/src/i18n/locales/zh-CN.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -618,6 +618,7 @@
618618
light: '日间',
619619
dark: '夜间',
620620
blue: '蓝色',
621+
classic: '经典',
621622
green: '绿色',
622623
purple: '紫色'
623624
},

0 commit comments

Comments
 (0)