test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(菜单): 左侧菜单样式

This commit is contained in:
baiqi 2024-05-15 11:27:59 +08:00 committed by 刘瑞斌
parent 0a23c86363
commit 81e1911cdd
14 changed files with 46 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/assets/icon-font/iconfont.css
View File

@ -1,7 +1,7 @@
@font-face {
font-family: iconfont; /* Project id 3462279 */
src: url('iconfont.woff2?t=1715686154177') format('woff2'), url('iconfont.woff?t=1715686154177') format('woff'),
url('iconfont.ttf?t=1715686154177') format('truetype'), url('iconfont.svg?t=1715686154177#iconfont') format('svg');
src: url('iconfont.woff2?t=1715742855393') format('woff2'), url('iconfont.woff?t=1715742855393') format('woff'),
url('iconfont.ttf?t=1715742855393') format('truetype'), url('iconfont.svg?t=1715742855393#iconfont') format('svg');
}
.iconfont {
font-size: 16px;
@ -10,6 +10,9 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-icon_api-test-filled2::before {
content: '\e7b4';
}
.icon-a-icon_test-tracking_filled1::before {
content: '\e7b3';
}

2
frontend/src/assets/icon-font/iconfont.js
View File

File diff suppressed because one or more lines are too long

7
frontend/src/assets/icon-font/iconfont.json
View File

@ -5,6 +5,13 @@
"css_prefix_text": "icon-",
"description": "DE、MS项目icon管理",
"glyphs": [
{
"icon_id": "40342056",
"name": "icon_api-test-filled",
"font_class": "icon_api-test-filled2",
"unicode": "e7b4",
"unicode_decimal": 59316
},
{
"icon_id": "40334819",
"name": "icon_test-tracking_filled",

2
frontend/src/assets/icon-font/iconfont.svg
View File

@ -14,6 +14,8 @@
/>
<missing-glyph />
<glyph glyph-name="icon_api-test-filled2" unicode="&#59316;" d="M128 810.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667v-85.333333H85.333333V768a42.666667 42.666667 0 0 0 42.666667 42.666667z m682.666667-554.666667a170.666667 170.666667 0 1 0 0-341.333333 170.666667 170.666667 0 0 0 0 341.333333z m85.333333 341.333333a42.666667 42.666667 0 0 0 42.666667-42.666666l0.042666-298.666667a213.333333 213.333333 0 0 1-298.666666-298.666667H128a42.666667 42.666667 0 0 0-42.666667 42.666667V554.666667a42.666667 42.666667 0 0 0 42.666667 42.666666h768z m-80.256-384.085333c-4.693333 0.682667-8.96-3.157333-9.557333-8.533333l-25.002667-233.984c-0.554667-5.376 2.773333-10.24 7.466667-10.922667l16.981333-2.389333c4.693333-0.682667 8.96 3.157333 9.514667 8.533333l25.002666 233.984c0.554667 5.376-2.773333 10.24-7.466666 10.922667l-16.938667 2.389333z m75.136-63.573333l-13.994667-11.221334a10.794667 10.794667 0 0 1-2.133333-13.696l24.32-39.850666-24.746667-40.533334a10.794667 10.794667 0 0 1 2.133334-13.653333l13.994666-11.306667c3.84-3.114667 9.216-2.005333 11.946667 2.432l34.304 56.32 0.810667 1.664 0.512 1.749334a11.093333 11.093333 0 0 1-0.896 9.386666l-34.346667 56.32c-2.688 4.437333-8.021333 5.546667-11.904 2.432z m-171.946667-1.877334l-34.304-56.32-0.810666-1.706666-0.512-1.706667a11.050667 11.050667 0 0 1 0.896-9.386667l34.346666-56.32c2.688-4.48 8.021333-5.546667 11.904-2.432l13.994667 11.264a10.794667 10.794667 0 0 1 2.133333 13.653334l-24.32 39.850666 24.746667 40.533334a10.794667 10.794667 0 0 1-2.133333 13.696l-13.994667 11.264c-3.84 3.114667-9.216 2.048-11.946667-2.389334zM382.634667 512.426667H310.528L230.186667 298.666667h67.498666l10.368 35.285333h75.264L393.813333 298.666667h69.12L382.592 512.426667z m210.986666 0H483.84V298.666667h66.346667v79.36h36.138666c26.666667 0 46.506667 6.058667 59.434667 18.218666 12.970667 12.117333 19.498667 29.013333 19.498667 50.602667 0 20.992-5.973333 37.162667-17.92 48.554667-11.861333 11.349333-29.781333 17.066667-53.717334 17.066666z m175.018667 0h-66.218667V298.666667h66.218667V512.426667z m-422.784-55.466667l23.637333-76.8H322.346667l23.466666 76.8z m223.146667 11.989333c12.373333 0 20.736-2.346667 25.216-6.997333 4.48-4.693333 6.698667-10.368 6.698666-17.066667 0-6.912-2.56-12.544-7.68-16.981333-5.205333-4.437333-14.122667-6.613333-26.88-6.613333h-16.213333v47.658666h18.858667z" horiz-adv-x="1024" />
<glyph glyph-name="a-icon_test-tracking_filled1" unicode="&#59315;" d="M981.333333 85.333333a170.666667 170.666667 0 1 0-341.333333 0 170.666667 170.666667 0 0 0 341.333333 0z m-153.514666 102.4a17.066667 17.066667 0 0 1-34.133334 0v-102.485333a17.066667 17.066667 0 0 1 4.992-12.074667l72.32-72.32a17.066667 17.066667 0 0 1 24.149334 24.106667l-67.370667 67.370667V187.733333zM341.333333 853.333333a42.666667 42.666667 0 0 1-42.666666-42.666666v-170.666667a42.538667 42.538667 0 0 1 42.666666-42.666667 42.453333 42.453333 0 0 1 41.813334 34.048C383.701333 634.197333 384 637.056 384 640V810.666667a42.666667 42.666667 0 0 1-42.666667 42.666666z m341.333334 0a42.666667 42.666667 0 0 1-42.666667-42.666666v-170.666667a42.666667 42.666667 0 1 1 85.333333 0V810.666667a42.666667 42.666667 0 0 1-42.666666 42.666666zM128 725.333333h128v-85.333333a85.333333 85.333333 0 1 1 170.666667 0V725.333333h170.666666v-85.333333a85.333333 85.333333 0 1 1 170.666667 0V725.333333h128a42.666667 42.666667 0 0 0 42.666667-42.666666v-426.666667a213.333333 213.333333 0 0 1-298.666667-298.666667H128a42.666667 42.666667 0 0 0-42.666667 42.666667V682.666667a42.666667 42.666667 0 0 0 42.666667 42.666666z m85.333333-469.333333a42.666667 42.666667 0 0 1 0-85.333333h298.666667a42.666667 42.666667 0 0 1 0 85.333333H213.333333z m0 170.666667a42.666667 42.666667 0 0 1 0-85.333334h170.666667a42.666667 42.666667 0 0 1 0 85.333334H213.333333z" horiz-adv-x="1024" />
<glyph glyph-name="icon_functional_testing1" unicode="&#59314;" d="M256 853.333333a42.666667 42.666667 0 0 1-42.666667-42.666666v-42.666667h597.333334V810.666667a42.666667 42.666667 0 0 1-42.666667 42.666666H256zM128 640a42.666667 42.666667 0 0 0 42.666667 42.666667h682.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-42.666667H128V640zM85.333333 512a42.666667 42.666667 0 0 1-42.666666-42.666667v-512a42.666667 42.666667 0 0 1 42.666666-42.666666h853.333334a42.666667 42.666667 0 0 1 42.666666 42.666666V469.333333a42.666667 42.666667 0 0 1-42.666666 42.666667H85.333333z m192-128a64 64 0 0 1 0-128h469.333334a64 64 0 0 1 0 128h-469.333334z" horiz-adv-x="1024" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 453 KiB

After

Width:  |  Height:  |  Size: 455 KiB

BIN
frontend/src/assets/icon-font/iconfont.ttf
View File

Binary file not shown.

BIN
frontend/src/assets/icon-font/iconfont.woff
View File

Binary file not shown.

BIN
frontend/src/assets/icon-font/iconfont.woff2
View File

Binary file not shown.

39
frontend/src/components/business/ms-menu/index.vue
View File

@ -391,7 +391,7 @@
}}
>
<a-menu-item
class={['flex items-center justify-between', collapsed.value ? 'h-[56px] w-[56px]' : '']}
class={['flex w-full items-center justify-between', collapsed.value ? 'h-[56px] w-[56px]' : '']}
key="personalInfo"
>
{collapsed.value ? (
@ -428,10 +428,12 @@
element?.name === SettingRouteEnum.SETTING_ORGANIZATION ? (
<a-menu-item key={element?.name} v-slots={{ icon }} onClick={() => goto(element)}>
<div class="inline-flex w-[calc(100%-34px)] items-center justify-between !bg-transparent">
{t(
collapsed.value
? element?.meta?.collapsedLocale || element?.meta?.locale || ''
: element?.meta?.locale || ''
{collapsed.value ? (
<div class="text-center text-[12px] leading-[16px]">
{t(element?.meta?.collapsedLocale || element?.meta?.locale || '')}
</div>
) : (
t(element?.meta?.locale || '')
)}
{xPack.value
? orgTrigger(element, menuSwitchOrgVisible, () => (
@ -454,10 +456,12 @@
</a-menu-item>
) : (
<a-menu-item key={element?.name} v-slots={{ icon }} onClick={() => goto(element)}>
{t(
collapsed.value
? element?.meta?.collapsedLocale || element?.meta?.locale || ''
: element?.meta?.locale || ''
{collapsed.value ? (
<div class="text-center text-[12px] leading-[16px]">
{t(element?.meta?.collapsedLocale || element?.meta?.locale || '')}
</div>
) : (
t(element?.meta?.locale || '')
)}
</a-menu-item>
);
@ -475,10 +479,12 @@
v-slots={{
icon,
title: () =>
h(
'div',
t(collapsed.value ? element?.meta?.collapsedLocale || '' : element?.meta?.locale || '')
h('div', {
innerHTML: t(
collapsed.value ? element?.meta?.collapsedLocale || '' : element?.meta?.locale || ''
),
class: collapsed.value ? 'text-[12px] leading-[16px]' : '',
}),
}}
class={BOTTOM_MENU_LIST.includes(element?.name as string) ? 'arco-menu-inline--bottom' : ''}
>
@ -506,6 +512,7 @@
selected-keys={selectedKey.value}
auto-open-selected={true}
level-indent={34}
class={collapsed.value ? 'arco-menu-collapsed' : ''}
style="height: 100%;width:100%;"
onCollapse={setCollapse}
trigger-props={{
@ -608,10 +615,12 @@
min-width: 60px;
}
.arco-menu-vertical.arco-menu-collapsed {
margin-left: 8px;
width: 56px;
.arco-menu-inner {
@apply !p-0;
padding-top: 12px !important;
padding-bottom: 32px !important;
.arco-menu-item,
.arco-menu-inline--bottom {
@ -649,6 +658,12 @@
}
}
}
.arco-menu-collapsed {
.arco-menu-collapse-button {
top: 12px;
right: -16px;
}
}
.arco-menu-item-tooltip {
@apply hidden;
}

2
frontend/src/layout/default-layout.vue
View File

@ -187,7 +187,7 @@
background-color: var(--color-bg-6);
}
}
:deep(.arco-menu-light) {
:deep(.arco-menu-light:not(.arco-menu-collapsed)) {
background-color: transparent !important;
.arco-menu-item {
:hover {

2
frontend/src/locale/en-US/index.ts
View File

@ -66,7 +66,6 @@ export default {
'menu.settings': 'Settings',
'menu.settingsShort': 'System',
'menu.settings.system': 'System',
'menu.settings.systemManagement': 'System Management',
'menu.settings.system.usergroup': 'User Group',
'menu.settings.system.authorizedManagement': 'Authorized',
'menu.settings.system.pluginManager': 'Plugin',
@ -78,7 +77,6 @@ export default {
'menu.settings.system.parameter': 'System Parameter',
'menu.settings.system.log': 'Log',
'menu.settings.organization': 'Organization',
'menu.settings.organizationManagement': 'Organization Management',
'menu.settings.organization.member': 'Member',
'menu.settings.organization.userGroup': 'User Group',
'menu.settings.organization.project': 'Project',

2
frontend/src/locale/zh-CN/index.ts
View File

@ -70,7 +70,6 @@ export default {
'menu.settings': '系统设置',
'menu.settingsShort': '系统',
'menu.settings.system': '系统',
'menu.settings.systemManagement': '系统管理',
'menu.settings.system.user': '用户',
'menu.settings.system.usergroup': '用户组',
'menu.settings.system.authorizedManagement': '授权',
@ -82,7 +81,6 @@ export default {
'menu.settings.system.parameter': '系统参数',
'menu.settings.system.log': '日志',
'menu.settings.organization': '组织',
'menu.settings.organizationManagement': '组织管理',
'menu.settings.organization.member': '成员',
'menu.settings.organization.userGroup': '用户组',
'menu.settings.organization.project': '项目',

2
frontend/src/router/routes/modules/apiTest.ts
View File

@ -11,7 +11,7 @@ const ApiTest: AppRouteRecordRaw = {
meta: {
locale: 'menu.apiTest',
collapsedLocale: 'menu.apiTestShort',
icon: 'icon-icon_api-test-filled1',
icon: 'icon-icon_api-test-filled2',
order: 4,
hideChildrenInMenu: true,
roles: [

2
frontend/src/router/routes/modules/setting.ts
View File

@ -40,7 +40,6 @@ const Setting: AppRouteRecordRaw = {
component: null,
meta: {
locale: 'menu.settings.system',
collapsedLocale: 'menu.settings.systemManagement',
roles: [
'SYSTEM_USER:READ',
'SYSTEM_USER_ROLE:READ',
@ -184,7 +183,6 @@ const Setting: AppRouteRecordRaw = {
component: null,
meta: {
locale: 'menu.settings.organization',
collapsedLocale: 'menu.settings.organizationManagement',
roles: [
'ORGANIZATION_MEMBER:READ',
'ORGANIZATION_USER_ROLE:READ',