adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): Home page ui upgrade

Browse Source
This commit is contained in:
zhaoying
2026-03-07 12:20:55 +08:00
parent 0b3b241436
commit e2b6c713e7
22 changed files with 1016 additions and 1000 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
web/src/styles/antdThemeConfig.ts
View File

@@ -3,87 +3,99 @@ import type { ThemeConfig } from 'antd';
// 浅色主题配置
export const lightTheme: ThemeConfig = {
token: {
colorPrimary: '#155EEF',
colorPrimary: '#171719',
colorBgBase: '#ffffff',
colorTextBase: '#212332',
colorTextBase: '#171719',
colorBorder: '#DFE4ED',
colorBgLayout: '#ffffff',
colorBgContainer: '#ffffff',
colorText: '#212332',
colorText: '#171719',
colorTextSecondary: '#6b7280',
borderRadius: 6,
borderRadius: 8,
colorSplit: '#DFE4ED',
colorBorderBg: '#DFE4ED',
colorBgContainerDisabled: '#F6F8FC',
colorBgContainerDisabled: '#F6F6F6',
colorTextDisabled: '#5B6167',
// Card 用到
borderRadiusLG: 12,
borderRadiusSM: 8,
colorBorderSecondary: '#DFE4ED',
// colorBgContainer: '#FBFDFF',
colorError: '#FF5D34',
sizeSM: 12,
fontSizeSM: 12,
boxShadow: 'none',
},
components: {
Layout: {
headerBg: 'transparent',
bodyBg: '#FBFDFF',
siderBg: 'transparent',
headerPadding: '16px 46px 16px 21px',
bodyBg: '#EEEFF4',
siderBg: '#FAFCFF',
headerPadding: '0 24px 0 20px',
headerHeight: 64,
headerColor: '#212332',
},
Menu: {
itemColor: '#5B6167',
itemSelectedColor: '#212332',
subMenuItemSelectedColor: '#212332',
fontSize: 13,
itemColor: '#171719',
itemSelectedColor: '#FFFFFF',
subMenuItemSelectedColor: '#FFFFFF',
itemHoverColor: '#212332',
itemHoverBg: '#FFFFFF',
itemHoverColor: '#171719',
itemHoverBg: 'rgba(223,228,237,0.5)',
itemBg: 'transparent',
itemSelectedBg: '#FFFFFF',
itemSelectedBg: '#171719',
subMenuItemBg: 'transparent',
itemPaddingInline: 12,
itemHeight: 32,
itemPaddingInline: 10,
itemHeight: 38,
itemMarginBlock: 8,
horizontalLineHeight: 32,
itemMarginInline: 12,
itemBorderRadius: 6,
itemBorderRadius: 8,
iconSize: 16,
iconMarginInlineEnd: 8,
iconMarginInlineEnd: 10,
collapsedIconSize: 12,
collapsedWidth: '64px',
popupBg: '#FBFDFF',
groupTitleFontSize: 12,
groupTitleColor: '#5B6167',
groupTitleLineHeight: '17px',
},
Button: {
defaultColor: '#5B6167',
defaultColor: '#171719',
defaultBorderColor: '#EBEBEB',
defaultShadow: 'none',
primaryShadow: 'none',
dangerShadow: 'none'
dangerShadow: 'none',
defaultGhostBorderColor: '#EBEBEB',
defaultHoverColor: 'rgba(23, 23, 25, 0.7)',
defaultHoverBorderColor: 'rgba(23, 23, 25, 0.7)',
},
Form: {
labelColor: '#212332',
labelColor: '#171719',
itemMarginBottom: 16,
},
Slider: {
// dotSize: 10,
controlSize: 8,
railSize: 8,
controlSize: 6,
railSize: 6,
handleSize: 10,
handleSizeHover: 10,
handleColor: '#155EEF',
trackBg: '#155EEF',
railBg: '#E1E2E7',
handleColor: '#171719',
handleActiveOutlineColor: '#171719',
trackBg: '#171719',
railBg: '#EBEBEB',
},
Table: {
borderColor: '#DFE4ED',
headerBg: '#FBFDFF',
headerColor: '#5B6167',
borderColor: '#EBEBEB',
headerBg: '#FFFFFF',
rowHoverBg: '#F0F3F8',
rowSelectedBg: '#E9F1FF',
rowSelectedHoverBg: '#F0F3F8',
@@ -95,19 +107,36 @@ export const lightTheme: ThemeConfig = {
},
Breadcrumb: {
itemColor: '#5B6167',
lastItemColor: '#212332',
lastItemColor: '#171719',
linkColor: '#5B6167',
linkHoverColor: '#212332',
linkHoverColor: '#171719',
fontSize: 18,
},
Input: {
inputFontSizeSM: 12,
controlHeightSM: 26
controlHeightSM: 26,
activeShadow: 'none',
},
InputNumber: {
activeShadow: 'none',
},
Select: {
lineHeightSM: 26
lineHeightSM: 26,
},
Upload: {
pictureCardSize: 96,
},
Switch: {
trackHeight: 24,
trackHeightSM: 18,
handleSize: 20,
handleSizeSM: 14,
innerMinMarginSM: 8,
innerMaxMarginSM: 27,
},
Cascader: {
optionSelectedBg: '#F6F6F6',
optionSelectedColor: '#212332'
}
}
};

5
web/src/styles/common.css Normal file
View File

@@ -0,0 +1,5 @@
.rb-border { border: 1px solid #DFE4ED; }
.rb-border-t { border-top: 1px solid #DFE4ED; }
.rb-border-r { border-right: 1px solid #DFE4ED; }
.rb-border-b { border-bottom: 1px solid #DFE4ED; }
.rb-border-l { border-left: 1px solid #DFE4ED; }

144
web/src/styles/index.css
View File

@@ -1,5 +1,65 @@
@import "tailwindcss" prefix(rb);
@plugin "@tailwindcss/typography";
@import "./common.css";
@font-face {
font-family: 'MiSans-Bold';
src: url('@/assets/font/MiSans/MiSans-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}@font-face {
font-family: 'MiSans-Demibold';
src: url('@/assets/font/MiSans/MiSans-Demibold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}@font-face {
font-family: 'MiSans-ExtraLight';
src: url('@/assets/font/MiSans/MiSans-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'MiSans-Heavy';
src: url('@/assets/font/MiSans/MiSans-Heavy.woff2') format('woff2');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'MiSans-Light';
src: url('@/assets/font/MiSans/MiSans-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'MiSans-Medium';
src: url('@/assets/font/MiSans/MiSans-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'MiSans-Normal';
src: url('@/assets/font/MiSans/MiSans-Normal.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'MiSans-Regular';
src: url('@/assets/font/MiSans/MiSans-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'MiSans-Semibold';
src: url('@/assets/font/MiSans/MiSans-Semibold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'MiSans-Thin';
src: url('@/assets/font/MiSans/MiSans-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
}
html, body, #root {
height: 100%;
@@ -31,7 +91,7 @@ body {
.ant-menu-light>.ant-menu .ant-menu-item-selected,
.ant-menu-light:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):hover,
.ant-menu-light>.ant-menu:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):hover {
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
box-shadow: none;
}
.ant-menu-light .ant-menu-item-selected,
.ant-menu-light>.ant-menu .ant-menu-item-selected {
@@ -47,8 +107,14 @@ body {
background: #FFFFFF;
color: #212332;
}
.ant-menu-inline-collapsed>.ant-menu-item,
.ant-menu-inline-collapsed>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item,
.ant-menu-inline-collapsed>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-submenu>.ant-menu-submenu-title,
.ant-menu-inline-collapsed>.ant-menu-submenu>.ant-menu-submenu-title {
padding-inline: calc(50% - 6px - 14px);
}
.ant-slider .ant-slider-handle::after {
background-color: #155EEF;
background-color: #171719;
width: 12px;
height: 12px;
}
@@ -56,6 +122,34 @@ body {
width: 12px;
height: 12px;
}
.ant-slider-horizontal .ant-slider-handle {
inset-block-start: 3px;
}
.ant-slider.small {
margin: 0;
padding: 8px;
}
.ant-slider-horizontal.small .ant-slider-handle {
inset-block-start: 5px;
}
.ant-slider.small .ant-slider-handle::after {
background-color: #171719;
width: 10px;
height: 10px;
}
.ant-slider.small .ant-slider-handle::before {
width: 10px;
height: 10px;
}
.ant-slider.small .ant-slider-handle:hover::after,
.ant-slider.small .ant-slider-handle:active::after,
.ant-slider.small .ant-slider-handle:focus::after {
outline: 2px solid #171719;
}
.ant-slider.small .ant-slider-rail,
.ant-slider.small .ant-slider-track {
border-radius: 3px;
}
.ant-table-container {
border: 1px solid #DFE4ED;
border-radius: 8px;
@@ -83,6 +177,16 @@ body {
.ant-table-wrapper .ant-table-thead>tr>td {
font-weight: 500;
}
.ant-table-wrapper .ant-table.ant-table-small .ant-table-title,
.ant-table-wrapper .ant-table.ant-table-small .ant-table-footer,
.ant-table-wrapper .ant-table.ant-table-small .ant-table-cell,
.ant-table-wrapper .ant-table.ant-table-small .ant-table-thead>tr>th,
.ant-table-wrapper .ant-table.ant-table-small .ant-table-tbody>tr>th,
.ant-table-wrapper .ant-table.ant-table-small .ant-table-tbody>tr>td,
.ant-table-wrapper .ant-table.ant-table-small tfoot>tr>th,
.ant-table-wrapper .ant-table.ant-table-small tfoot>tr>td {
padding: 12px 16px;
}
.ant-table-wrapper .ant-table-pagination.ant-pagination {
margin: 24px 0 32px 0;
}
@@ -165,13 +269,7 @@ body {
.infinite-scroll-component {
overflow-x: hidden !important;
}
.ant-slider-horizontal .ant-slider-handle {
inset-block-start: 6px;
}
::-webkit-scrollbar-track {
background: transparent !important;
}
.ant-breadcrumb a:hover {
background-color: transparent;
}
@@ -183,6 +281,34 @@ body {
}
.ͼ2 .cm-gutters {
background-color: #FFFFFF;
background-color: transparent;
border: none;
}
::-webkit-scrollbar {
width: 6px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #DFE4ED;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #DFE4ED;
}
.ant-select-focused.ant-select-outlined:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector {
box-shadow: none;
}
.ant-select-dropdown .ant-select-item {
color: #212332;
}
.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
color: #212332;
background: #F6F6F6;
}