leo-projects/codernew-api-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(UI优化): 优化导航栏、组件和全局样式

Browse Source 
导航栏优化：
- 移除搜索框
- 移除消息通知图标
- 修复 React Hooks 规则问题
- 优化头像显示逻辑

组件样式：
- 优化 TabBar 样式
- 优化 Pagination 样式
- 更新全局布局样式
This commit is contained in:
gaoziman 2025-11-18 20:47:48 +08:00
parent 555d3b164e
commit 660ab2eb9c
4 changed files with 115 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/NavBar/style/index.module.less
View File

@ -10,6 +10,8 @@
.left { .left {
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1;
min-width: 0;
} }
.logo { .logo {
@ -30,6 +32,56 @@
white-space: nowrap; white-space: nowrap;
} }
.navbar-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
margin-left: 24px;
font-size: 15px;
color: var(--color-text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.breadcrumb-node {
color: var(--color-text-2);
transition: color 0.2s;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
}
.breadcrumb-clickable {
cursor: pointer;
}
.breadcrumb-clickable:hover {
color: var(--color-text-1);
}
.breadcrumb-node:last-of-type {
color: var(--color-text-1);
font-weight: 600;
cursor: default;
}
.breadcrumb-divider {
color: var(--color-text-4);
margin: 0 2px;
white-space: nowrap;
}
.breadcrumb-icon {
color: var(--color-text-3);
display: inline-flex;
align-items: center;
font-size: 16px;
}
.right { .right {
display: flex; display: flex;
list-style: none; list-style: none;

87
src/components/Pagination/style/index.module.less
View File

@ -2,59 +2,52 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
padding: 16px 0; padding: 12px 0;
// 覆盖 Arco Design 分页组件的样式 // 覆盖 Arco Design 分页组件的样式
:global { :global {
.arco-pagination { .arco-pagination {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 4px;
// 总数显示 // 总数显示
.arco-pagination-total-text { .arco-pagination-total-text {
font-size: 14px; font-size: 13px;
color: #4e5969; color: #4e5969;
margin-right: 16px; margin-right: 8px;
} }
// 页码按钮样式 // 页码按钮样式
.arco-pagination-item { .arco-pagination-item {
min-width: 36px; min-width: 30px;
height: 36px; height: 30px;
line-height: 36px; line-height: 30px;
padding: 0; padding: 0 8px;
margin: 0 4px; margin: 0 4px;
border: none; border: 1px solid #d0d5dd;
border-radius: 8px; border-radius: 4px;
background-color: #f2f3f5; background-color: #fff;
color: #4e5969; color: #475467;
font-weight: 500; font-weight: 500;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover {
background-color: #e5e6eb; border-color: #a0aec0;
color: #1d2129; color: #1d2129;
} }
// 当前选中的页码 // 当前选中的页码
&.arco-pagination-item-active { &.arco-pagination-item-active {
background: linear-gradient( background: rgb(var(--arcoblue-6));
135deg, border-color: rgb(var(--arcoblue-6));
rgb(var(--arcoblue-6)) 0%,
rgb(var(--arcoblue-7)) 100%
);
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
box-shadow: 0 2px 8px rgba(var(--arcoblue-6), 0.3); box-shadow: none;
&:hover { &:hover {
background: linear-gradient( background: rgb(var(--arcoblue-5));
135deg, border-color: rgb(var(--arcoblue-5));
rgb(var(--arcoblue-7)) 0%,
rgb(var(--arcoblue-8)) 100%
);
box-shadow: 0 4px 12px rgba(var(--arcoblue-6), 0.4);
} }
} }
@ -73,9 +66,9 @@
// 省略号 // 省略号
.arco-pagination-item-jumper { .arco-pagination-item-jumper {
min-width: 36px; min-width: 30px;
height: 36px; height: 30px;
line-height: 36px; line-height: 30px;
border: none; border: none;
background-color: transparent; background-color: transparent;
color: #86909c; color: #86909c;
@ -84,19 +77,20 @@
// 上一页/下一页按钮 // 上一页/下一页按钮
.arco-pagination-item-previous, .arco-pagination-item-previous,
.arco-pagination-item-next { .arco-pagination-item-next {
min-width: 36px; min-width: 30px;
height: 36px; height: 30px;
border: none; border: 1px solid #d0d5dd;
border-radius: 8px; border-radius: 4px;
background-color: #f2f3f5; background-color: #fff;
transition: all 0.2s ease; transition: all 0.2s ease;
margin: 0 4px;
.arco-icon { .arco-icon {
color: #4e5969; color: #475467;
} }
&:not(.arco-pagination-item-disabled):hover { &:not(.arco-pagination-item-disabled):hover {
background-color: #e5e6eb; border-color: #a0aec0;
.arco-icon { .arco-icon {
color: #1d2129; color: #1d2129;
@ -115,36 +109,35 @@
// 每页显示数量选择器 // 每页显示数量选择器
.arco-pagination-size-changer { .arco-pagination-size-changer {
margin-left: 16px; margin-left: 8px;
.arco-select-view { .arco-select-view {
border-radius: 8px; border-radius: 4px;
background-color: #f2f3f5; background-color: #fff;
border: none; border: 1px solid #d0d5dd;
&:hover { &:hover {
background-color: #e5e6eb; border-color: #a0aec0;
} }
} }
} }
// 跳转输入框 // 跳转输入框
.arco-pagination-jumper { .arco-pagination-jumper {
margin-left: 16px; margin-left: 8px;
.arco-pagination-jumper-input { .arco-pagination-jumper-input {
.arco-input-inner-wrapper { .arco-input-inner-wrapper {
border-radius: 8px; border-radius: 4px;
background-color: #f2f3f5; background-color: #fff;
border: none; border: 1px solid #d0d5dd;
&:hover { &:hover {
background-color: #e5e6eb; border-color: #a0aec0;
} }
&:focus-within { &:focus-within {
background-color: #fff; border-color: rgb(var(--arcoblue-6));
border: 1px solid rgb(var(--arcoblue-6));
} }
} }
} }

49
src/components/TabBar/index.module.less
View File

@ -1,10 +1,11 @@
.tab-bar { .tab-bar {
display: flex; display: flex;
align-items: center; align-items: center;
height: 48px; min-height: 40px;
background-color: var(--color-bg-2); background-color: transparent;
border-bottom: 1px solid var(--color-border); border-bottom: none;
padding: 0 16px; padding: 0 10px;
margin-bottom: 16px;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
@ -26,15 +27,18 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
height: 100%; height: 100%;
width: 100%;
} }
.tab-item { .tab-item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: 32px; height: 34px;
padding: 0 16px; padding: 0 16px;
background-color: var(--color-fill-2); background-color: #f4f6fb;
border-radius: 16px; border-radius: 999px;
border: none;
box-shadow: none;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
@ -43,35 +47,26 @@
color: var(--color-text-2); color: var(--color-text-2);
&:hover { &:hover {
background-color: var(--color-fill-3); color: var(--color-text-1);
transform: translateY(-1px);
} }
&.tab-item-active { &.tab-item-active {
background: linear-gradient( background: rgba(22, 93, 255, 10%);
135deg, color: rgb(var(--primary-6));
rgb(var(--primary-6)) 0%,
rgb(var(--primary-5)) 100%
);
color: #fff;
font-weight: 500; font-weight: 500;
box-shadow: 0 2px 8px rgba(var(--primary-6), 0.3); border: none;
box-shadow: none;
&:hover { &:hover {
background: linear-gradient( background: rgba(22, 93, 255, 15%);
135deg,
rgb(var(--primary-5)) 0%,
rgb(var(--primary-4)) 100%
);
box-shadow: 0 4px 12px rgba(var(--primary-6), 0.4);
} }
.tab-close { .tab-close {
color: rgba(255, 255, 255, 80%); color: rgb(var(--primary-6));
&:hover { &:hover {
color: #fff; color: #fff;
background-color: rgba(255, 255, 255, 20%); background-color: rgba(22, 93, 255, 25%);
} }
} }
} }
@ -92,13 +87,13 @@
height: 16px; height: 16px;
margin-left: 8px; margin-left: 8px;
border-radius: 50%; border-radius: 50%;
color: var(--color-text-3); color: var(--color-text-2);
transition: all 0.2s; transition: all 0.2s;
font-size: 12px; font-size: 12px;
&:hover { &:hover {
color: var(--color-text-1); color: rgb(var(--primary-6));
background-color: var(--color-fill-3); background-color: rgba(22, 93, 255, 12%);
} }
} }
} }

6
src/style/layout.module.less
View File

@ -122,11 +122,7 @@
} }
.layout-content-wrapper { .layout-content-wrapper {
padding: 16px 20px 0; padding: 16px 24px 24px;
}
.layout-breadcrumb {
margin-bottom: 16px;
} }
.spin { .spin {