sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式整改

Browse Source
This commit is contained in:
shenaowei
2026-02-25 23:44:01 +08:00
parent 8beb4a5508
commit 116e363e83
16 changed files with 660 additions and 720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
frontend/app/web-gold/src/views/material/MaterialListNew.vue
View File

@@ -743,25 +743,8 @@ onMounted(async () => {
</script>
<style scoped lang="less">
// ========================================
// 变量定义
// ========================================
@primary-color: #6366f1;
@primary-hover: #4f46e5;
@primary-light: #eef2ff;
@bg-page: #fafbfc;
@bg-card: #ffffff;
@border-color: #e5e7eb;
@border-light: #f3f4f6;
@text-primary: #111827;
@text-secondary: #6b7280;
@text-muted: #9ca3af;
@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
@shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
@radius-sm: 8px;
@radius-md: 12px;
@radius-lg: 16px;
// 使用设计系统变量
// 主色: var(--color-primary-500) = #3B82F6
// ========================================
// 主容器
@@ -769,7 +752,7 @@ onMounted(async () => {
.material-list-container {
display: flex;
height: 100%;
background: @bg-page;
background: var(--color-gray-50);
}
// ========================================
@@ -777,11 +760,11 @@ onMounted(async () => {
// ========================================
.material-sidebar {
width: 220px;
background: @bg-card;
border-right: 1px solid @border-color;
background: var(--color-bg-card);
border-right: 1px solid var(--color-gray-200);
display: flex;
flex-direction: column;
padding: 20px 12px;
padding: var(--space-5) var(--space-3);
flex-shrink: 0;
}
@@ -803,13 +786,13 @@ onMounted(async () => {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
margin-bottom: 12px;
padding: 0 var(--space-2);
margin-bottom: var(--space-3);
span {
font-size: 11px;
font-weight: 600;
color: @text-muted;
color: var(--color-gray-500);
text-transform: uppercase;
letter-spacing: 0.8px;
}
@@ -817,10 +800,10 @@ onMounted(async () => {
.ant-btn {
padding: 2px 6px;
height: auto;
color: @text-muted;
color: var(--color-gray-500);
&:hover {
color: @primary-color;
color: var(--color-primary-500);
}
}
}
@@ -829,15 +812,15 @@ onMounted(async () => {
.sidebar-group-list {
flex: 1;
overflow-y: auto;
margin: 0 -4px;
padding: 0 4px;
margin: 0 calc(var(--space-1) * -1);
padding: 0 var(--space-1);
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background: @border-color;
background: var(--color-gray-200);
border-radius: 2px;
}
}
@@ -846,14 +829,14 @@ onMounted(async () => {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
padding: 10px var(--space-3);
cursor: pointer;
border-radius: @radius-sm;
border-radius: var(--radius-md);
margin-bottom: 2px;
transition: all 0.2s ease;
transition: all var(--duration-fast);
&:hover {
background: @border-light;
background: var(--color-gray-100);
.sidebar-group-item__action-btn {
opacity: 1;
@@ -861,11 +844,11 @@ onMounted(async () => {
}
&--active {
background: @primary-light;
color: @primary-color;
background: var(--color-primary-50);
color: var(--color-primary-500);
.sidebar-group-item__icon {
color: @primary-color;
color: var(--color-primary-500);
}
}
@@ -879,12 +862,12 @@ onMounted(async () => {
&__icon {
margin-right: 10px;
font-size: 14px;
color: @text-muted;
color: var(--color-gray-500);
flex-shrink: 0;
}
&__name {
font-size: 13px;
font-size: var(--font-size-sm);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
@@ -899,34 +882,34 @@ onMounted(async () => {
&__count {
font-size: 11px;
color: @text-muted;
margin-right: 6px;
color: var(--color-gray-500);
margin-right: var(--space-2);
}
&__action-btn {
opacity: 0;
padding: 4px;
padding: var(--space-1);
cursor: pointer;
color: @text-muted;
font-size: 12px;
transition: all 0.15s ease;
color: var(--color-gray-500);
font-size: var(--font-size-xs);
transition: all var(--duration-fast);
&:hover {
color: @primary-color;
color: var(--color-primary-500);
}
&--danger:hover {
color: #ef4444;
color: var(--color-error-500);
}
}
&__edit-input {
:deep(.ant-input) {
height: 24px;
font-size: 13px;
border-color: @primary-color;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
border-radius: 4px;
font-size: var(--font-size-sm);
border-color: var(--color-primary-500);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
border-radius: var(--radius-sm);
}
}
}
@@ -949,50 +932,50 @@ onMounted(async () => {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
background: @bg-card;
border-bottom: 1px solid @border-color;
gap: 24px;
padding: var(--space-4) var(--space-6);
background: var(--color-bg-card);
border-bottom: 1px solid var(--color-gray-200);
gap: var(--space-6);
}
// 分类切换器
.category-switcher {
display: flex;
background: @bg-page;
background: var(--color-gray-50);
border-radius: 10px;
padding: 4px;
gap: 4px;
padding: var(--space-1);
gap: var(--space-1);
&__item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 8px;
gap: var(--space-2);
padding: 10px var(--space-5);
border-radius: var(--radius-md);
cursor: pointer;
font-size: 14px;
font-size: var(--font-size-base);
font-weight: 500;
color: @text-secondary;
color: var(--color-gray-600);
transition: all 0.25s ease;
&:hover {
color: @text-primary;
color: var(--color-gray-900);
}
&--active {
background: @bg-card;
color: @primary-color;
box-shadow: @shadow-sm;
background: var(--color-bg-card);
color: var(--color-primary-500);
box-shadow: var(--shadow-sm);
.category-switcher__icon {
color: @primary-color;
color: var(--color-primary-500);
}
}
}
&__icon {
font-size: 16px;
color: @text-muted;
color: var(--color-gray-500);
transition: color 0.25s ease;
}
}
@@ -1001,34 +984,34 @@ onMounted(async () => {
.storage-quota {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: @bg-page;
border-radius: @radius-sm;
border: 1px solid @border-color;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-gray-50);
border-radius: var(--radius-md);
border: 1px solid var(--color-gray-200);
&__label {
font-size: 12px;
color: @text-muted;
font-size: var(--font-size-xs);
color: var(--color-gray-500);
}
&__value {
font-size: 12px;
font-size: var(--font-size-xs);
font-weight: 500;
color: @text-primary;
color: var(--color-gray-900);
}
&__bar {
width: 80px;
height: 4px;
background: @border-color;
background: var(--color-gray-200);
border-radius: 2px;
overflow: hidden;
}
&__used {
height: 100%;
background: linear-gradient(90deg, @primary-color, #818cf8);
background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400));
border-radius: 2px;
transition: width 0.3s ease;
}
@@ -1038,34 +1021,34 @@ onMounted(async () => {
.toolbar-actions {
display: flex;
align-items: center;
gap: 12px;
gap: var(--space-3);
.search-input {
width: 280px;
:deep(.ant-input) {
border-radius: @radius-sm;
border-color: @border-color;
background: @bg-page;
border-radius: var(--radius-md);
border-color: var(--color-gray-200);
background: var(--color-gray-50);
&:focus {
background: @bg-card;
border-color: @primary-color;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
background: var(--color-bg-card);
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
}
:deep(.ant-input-prefix) {
color: @text-muted;
color: var(--color-gray-500);
}
}
.upload-btn {
border-radius: @radius-sm;
border-radius: var(--radius-md);
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-2);
}
}
@@ -1076,31 +1059,31 @@ onMounted(async () => {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 24px;
background: @primary-light;
border-bottom: 1px solid rgba(99, 102, 241, 0.1);
padding: var(--space-3) var(--space-6);
background: var(--color-primary-50);
border-bottom: 1px solid rgba(59, 130, 246, 0.1);
&__info {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: @text-primary;
font-size: var(--font-size-base);
color: var(--color-gray-900);
.anticon {
color: @primary-color;
color: var(--color-primary-500);
font-size: 16px;
}
strong {
color: @primary-color;
color: var(--color-primary-500);
font-weight: 600;
}
}
&__btns {
display: flex;
gap: 8px;
gap: var(--space-2);
}
}
@@ -1120,7 +1103,7 @@ onMounted(async () => {
// ========================================
.material-content__list {
flex: 1;
padding: 24px;
padding: var(--space-6);
overflow-y: auto;
.loading-spinner {
@@ -1135,7 +1118,7 @@ onMounted(async () => {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 24px;
padding: 80px var(--space-6);
&__icon {
width: 80px;
@@ -1143,20 +1126,20 @@ onMounted(async () => {
display: flex;
align-items: center;
justify-content: center;
background: @border-light;
background: var(--color-gray-100);
border-radius: 50%;
margin-bottom: 20px;
margin-bottom: var(--space-5);
.anticon {
font-size: 36px;
color: @text-muted;
color: var(--color-gray-500);
}
}
&__text {
font-size: 15px;
color: @text-secondary;
margin-bottom: 20px;
font-size: var(--font-size-md);
color: var(--color-gray-600);
margin-bottom: var(--space-5);
}
}
@@ -1166,21 +1149,21 @@ onMounted(async () => {
.material-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
gap: var(--space-5);
}
.material-item {
position: relative;
background: @bg-card;
border: 1px solid @border-color;
border-radius: @radius-md;
background: var(--color-bg-card);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&:hover {
border-color: @primary-color;
box-shadow: @shadow-md;
border-color: var(--color-primary-500);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
.material-item__check {
@@ -1193,12 +1176,12 @@ onMounted(async () => {
}
&--selected {
border-color: @primary-color;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2), @shadow-md;
border-color: var(--color-primary-500);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), var(--shadow-md);
.material-item__check .check-circle {
background: @primary-color;
border-color: @primary-color;
background: var(--color-primary-500);
border-color: var(--color-primary-500);
opacity: 1;
.anticon {
@@ -1214,30 +1197,30 @@ onMounted(async () => {
left: 10px;
z-index: 10;
opacity: 0;
transition: opacity 0.2s ease;
transition: opacity var(--duration-fast);
.check-circle {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: 2px solid @border-color;
border: 2px solid var(--color-gray-200);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: @shadow-sm;
transition: all var(--duration-fast);
box-shadow: var(--shadow-sm);
.anticon {
font-size: 12px;
font-size: var(--font-size-xs);
color: white;
opacity: 0;
transition: opacity 0.2s ease;
transition: opacity var(--duration-fast);
}
&--checked {
background: @primary-color;
border-color: @primary-color;
background: var(--color-primary-500);
border-color: var(--color-primary-500);
.anticon {
opacity: 1;
@@ -1275,7 +1258,7 @@ onMounted(async () => {
.anticon {
font-size: 40px;
color: @text-muted;
color: var(--color-gray-500);
}
}
@@ -1284,7 +1267,7 @@ onMounted(async () => {
bottom: 0;
left: 0;
right: 0;
padding: 8px 12px;
padding: var(--space-2) var(--space-3);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
opacity: 0;
transition: opacity 0.3s ease;
@@ -1304,38 +1287,38 @@ onMounted(async () => {
}
&__name {
font-size: 14px;
font-size: var(--font-size-base);
font-weight: 600;
color: @text-primary;
color: var(--color-gray-900);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.4;
margin-bottom: 6px;
transition: color 0.2s ease;
margin-bottom: var(--space-2);
transition: color var(--duration-fast);
&:hover {
color: @primary-color;
color: var(--color-primary-500);
}
:deep(.ant-input) {
font-size: 14px;
font-size: var(--font-size-base);
font-weight: 600;
height: 22px;
border-radius: 4px;
border-color: @primary-color;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
border-radius: var(--radius-sm);
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
}
&__meta {
display: flex;
align-items: center;
font-size: 12px;
color: @text-muted;
font-size: var(--font-size-xs);
color: var(--color-gray-500);
.meta-dot {
margin: 0 6px;
margin: 0 var(--space-2);
}
}
}
@@ -1347,38 +1330,38 @@ onMounted(async () => {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
background: @bg-card;
border-top: 1px solid @border-color;
padding: 14px var(--space-6);
background: var(--color-bg-card);
border-top: 1px solid var(--color-gray-200);
.footer-left {
display: flex;
align-items: center;
gap: 16px;
gap: var(--space-4);
}
.footer-count {
font-size: 13px;
color: @text-muted;
font-size: var(--font-size-sm);
color: var(--color-gray-500);
}
:deep(.ant-pagination) {
.ant-pagination-item {
border-radius: 6px;
border-color: @border-color;
border-radius: var(--radius-base);
border-color: var(--color-gray-200);
&:hover {
border-color: @primary-color;
border-color: var(--color-primary-500);
a {
color: @primary-color;
color: var(--color-primary-500);
}
}
}
.ant-pagination-item-active {
border-color: @primary-color;
background: @primary-color;
border-color: var(--color-primary-500);
background: var(--color-primary-500);
a {
color: white;
@@ -1387,8 +1370,8 @@ onMounted(async () => {
.ant-pagination-options {
.ant-select-selector {
border-radius: 6px;
border-color: @border-color;
border-radius: var(--radius-base);
border-color: var(--color-gray-200);
}
}
}
@@ -1400,17 +1383,17 @@ onMounted(async () => {
:deep(.batch-delete-modal),
:deep(.delete-group-modal) {
.ant-modal-content {
border-radius: @radius-md;
border-radius: var(--radius-lg);
overflow: hidden;
}
.ant-modal-body {
padding: 24px;
padding: var(--space-6);
}
.ant-modal-footer {
padding: 16px 24px;
border-top: 1px solid @border-color;
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--color-gray-200);
}
}
</style>