zhouhui.jiang / test_cursor

Go to a project
Toggle navigation Toggle navigation pinning
zhouhui.jiang
dfc145be 1 parent fb603427

update 改成黑白灰

Inline Side-by-side
Showing 3 changed files with 98 additions and 104 deletions
......@@ -8,7 +8,6 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
......@@ -19,21 +18,16 @@ declare module 'vue' {
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTag: typeof import('element-plus/es')['ElTag']
ElText: typeof import('element-plus/es')['ElText']
Header: typeof import('./src/components/layout/Header.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Sidebar: typeof import('./src/components/layout/Sidebar.vue')['default']
SidebarItem: typeof import('./src/components/layout/SidebarItem.vue')['default']
}
export interface ComponentCustomProperties {
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
}
}
......
......@@ -106,13 +106,13 @@
font-size: var(--el-font-size-small);
}
// Sidebar 导航规范 - 深色主题
// Sidebar 导航规范 - 黑白灰主题
.sidebar {
width: var(--sidebar-width);
height: 100vh;
background: #1a1a1a; // 深色背景
border-right: 1px solid #333;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
background: #ffffff; // 白色背景
border-right: 1px solid var(--el-border-color);
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
transition: width 0.3s ease;
......@@ -128,8 +128,8 @@
align-items: center;
justify-content: center;
padding: 0 var(--el-spacing-large);
border-bottom: 1px solid #333;
background: #1a1a1a;
border-bottom: 1px solid var(--el-border-color);
background: #ffffff;
}
.logo-link {
......@@ -138,7 +138,7 @@
justify-content: center;
gap: var(--el-spacing-base);
text-decoration: none;
color: white;
color: var(--el-text-color-primary);
transition: opacity 0.2s ease;
width: 100%;
......@@ -157,7 +157,7 @@
font-family: var(--el-font-family);
font-size: 20px;
font-weight: 700;
color: white;
color: var(--el-text-color-primary);
white-space: nowrap;
letter-spacing: 1px;
}
......@@ -167,10 +167,10 @@
overflow-y: auto;
}
// 菜单项样式 - 深色主题
// 菜单项样式 - 黑白灰主题
.el-menu {
border-right: none;
background: #1a1a1a;
background: #ffffff;
}
.el-menu-item {
......@@ -178,7 +178,7 @@
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #ffffff;
color: var(--el-text-color-regular);
height: 48px;
line-height: 48px;
margin: 2px 8px;
......@@ -190,8 +190,8 @@
padding: 0 16px;
&.is-active {
color: #ffffff;
background-color: #333333;
color: var(--el-text-color-primary);
background-color: var(--el-bg-color-page);
font-weight: 500;
&::before {
......@@ -202,14 +202,14 @@
transform: translateY(-50%);
width: 3px;
height: 20px;
background-color: #007bff;
background-color: var(--el-color-primary);
border-radius: 0 2px 2px 0;
}
}
&:hover {
background-color: #333333;
color: #ffffff;
background-color: var(--el-bg-color-page);
color: var(--el-text-color-primary);
}
&:active {
......@@ -232,7 +232,7 @@
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #ffffff;
color: var(--el-text-color-regular);
height: 48px;
line-height: 48px;
margin: 2px 8px;
......@@ -243,8 +243,8 @@
padding: 0 16px;
&:hover {
background-color: #333333;
color: #ffffff;
background-color: var(--el-bg-color-page);
color: var(--el-text-color-primary);
}
&:active {
......@@ -262,18 +262,18 @@
}
}
// 子菜单 - 深色主题
// 子菜单 - 黑白灰主题
.el-submenu .el-menu-item {
margin: 1px 16px;
padding-left: 24px;
height: 40px;
line-height: 40px;
font-size: 13px;
color: #cccccc;
color: var(--el-text-color-secondary);
&.is-active {
color: #ffffff;
background-color: #333333;
color: var(--el-text-color-primary);
background-color: var(--el-bg-color-page);
&::before {
left: 16px;
......@@ -281,21 +281,21 @@
}
&:hover {
background-color: #333333;
color: #ffffff;
background-color: var(--el-bg-color-page);
color: var(--el-text-color-primary);
}
}
// 弹出菜单系统 (Flyout Menu) - 深色主题
// 弹出菜单系统 (Flyout Menu) - 黑白灰主题
.sidebar-flyout {
position: fixed;
top: var(--header-height);
left: var(--sidebar-collapsed-width);
width: 200px;
background: #1a1a1a;
border: 1px solid #333;
background: #ffffff;
border: 1px solid var(--el-border-color);
border-left: none;
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
z-index: 1000;
border-radius: 0 6px 6px 0;
overflow: hidden;
......@@ -309,7 +309,7 @@
display: flex;
align-items: center;
padding: 8px 16px;
color: #ffffff;
color: var(--el-text-color-regular);
text-decoration: none;
transition: all 0.2s ease;
font-family: var(--el-font-family);
......@@ -319,13 +319,13 @@
cursor: pointer;
&:hover {
background: #333333;
color: #ffffff;
background: var(--el-bg-color-page);
color: var(--el-text-color-primary);
}
&.is-active {
background: #333333;
color: #ffffff;
background: var(--el-bg-color-page);
color: var(--el-text-color-primary);
font-weight: 500;
position: relative;
......@@ -337,7 +337,7 @@
transform: translateY(-50%);
width: 3px;
height: 20px;
background-color: #007bff;
background-color: var(--el-color-primary);
border-radius: 0 2px 2px 0;
}
}
......@@ -356,7 +356,7 @@
.flyout-arrow {
font-size: 12px;
color: #cccccc;
color: var(--el-text-color-secondary);
transition: transform 0.2s ease;
&.expanded {
......@@ -366,14 +366,14 @@
}
.flyout-submenu {
background: #222222;
border-top: 1px solid #333;
background: var(--el-bg-color-page);
border-top: 1px solid var(--el-border-color);
.flyout-subitem {
display: flex;
align-items: center;
padding: 8px 24px;
color: #cccccc;
color: var(--el-text-color-secondary);
text-decoration: none;
transition: all 0.2s ease;
font-family: var(--el-font-family);
......@@ -383,13 +383,13 @@
cursor: pointer;
&:hover {
background: #333333;
color: #ffffff;
background: var(--el-bg-color-page);
color: var(--el-text-color-primary);
}
&.is-active {
background: #333333;
color: #ffffff;
background: var(--el-bg-color-page);
color: var(--el-text-color-primary);
font-weight: 500;
}
}
......
// RuoYi 风格主题变量
// 黑白灰主题变量
:root {
// 主色调 - 蓝色主题
--el-color-primary: #409eff;
--el-color-primary-light-3: #79bbff;
--el-color-primary-light-5: #a0cfff;
--el-color-primary-light-7: #c6e2ff;
--el-color-primary-light-8: #d9ecff;
--el-color-primary-light-9: #ecf5ff;
--el-color-primary-dark-2: #337ecc;
// 主色调 - 黑色主题
--el-color-primary: #000000;
--el-color-primary-light-3: #333333;
--el-color-primary-light-5: #666666;
--el-color-primary-light-7: #999999;
--el-color-primary-light-8: #cccccc;
--el-color-primary-light-9: #f5f5f5;
--el-color-primary-dark-2: #000000;
// 成功色
--el-color-success: #67c23a;
--el-color-success-light-3: #95d475;
--el-color-success-light-5: #b3e19d;
--el-color-success-light-7: #d1edc4;
--el-color-success-light-8: #e1f3d8;
--el-color-success-light-9: #f0f9ff;
// 成功色 - 深灰色
--el-color-success: #4a4a4a;
--el-color-success-light-3: #6b6b6b;
--el-color-success-light-5: #8c8c8c;
--el-color-success-light-7: #adadad;
--el-color-success-light-8: #cecece;
--el-color-success-light-9: #efefef;
// 警告色
--el-color-warning: #e6a23c;
--el-color-warning-light-3: #eebe77;
--el-color-warning-light-5: #f3d19e;
--el-color-warning-light-7: #f8e3c5;
--el-color-warning-light-8: #faecd8;
--el-color-warning-light-9: #fdf6ec;
// 警告色 - 中灰色
--el-color-warning: #666666;
--el-color-warning-light-3: #808080;
--el-color-warning-light-5: #999999;
--el-color-warning-light-7: #b3b3b3;
--el-color-warning-light-8: #cccccc;
--el-color-warning-light-9: #e6e6e6;
// 危险色
--el-color-danger: #f56c6c;
--el-color-danger-light-3: #f89898;
--el-color-danger-light-5: #fab6b6;
--el-color-danger-light-7: #fcd3d3;
--el-color-danger-light-8: #fde2e2;
--el-color-danger-light-9: #fef0f0;
// 危险色 - 深灰色
--el-color-danger: #333333;
--el-color-danger-light-3: #555555;
--el-color-danger-light-5: #777777;
--el-color-danger-light-7: #999999;
--el-color-danger-light-8: #bbbbbb;
--el-color-danger-light-9: #dddddd;
// 信息色
--el-color-info: #909399;
--el-color-info-light-3: #b1b3b8;
--el-color-info-light-5: #c8c9cc;
--el-color-info-light-7: #dedfe0;
--el-color-info-light-8: #e9e9eb;
--el-color-info-light-9: #f4f4f5;
// 信息色 - 浅灰色
--el-color-info: #999999;
--el-color-info-light-3: #b3b3b3;
--el-color-info-light-5: #cccccc;
--el-color-info-light-7: #e0e0e0;
--el-color-info-light-8: #e9e9e9;
--el-color-info-light-9: #f2f2f2;
// 文本颜色
--el-text-color-primary: #303133;
--el-text-color-regular: #606266;
--el-text-color-secondary: #909399;
--el-text-color-placeholder: #a8abb2;
--el-text-color-disabled: #c0c4cc;
// 文本颜色 - 黑白灰渐变
--el-text-color-primary: #000000;
--el-text-color-regular: #333333;
--el-text-color-secondary: #666666;
--el-text-color-placeholder: #999999;
--el-text-color-disabled: #cccccc;
// 边框颜色
--el-border-color: #dcdfe6;
--el-border-color-light: #e4e7ed;
--el-border-color-lighter: #ebeef5;
--el-border-color-extra-light: #f2f6fc;
// 边框颜色 - 灰色渐变
--el-border-color: #e0e0e0;
--el-border-color-light: #e8e8e8;
--el-border-color-lighter: #f0f0f0;
--el-border-color-extra-light: #f8f8f8;
// 背景色
// 背景色 - 白色到浅灰
--el-bg-color: #ffffff;
--el-bg-color-page: #f2f3f5;
--el-bg-color-page: #fafafa;
--el-bg-color-overlay: #ffffff;
// 布局相关
......@@ -65,11 +65,11 @@
--header-height: 50px;
--breadcrumb-height: 40px;
// 阴影
--el-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
--el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
--el-box-shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
// 阴影 - 黑白灰阴影
--el-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.04);
--el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
--el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.04);
--el-box-shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.08);
// 圆角
--el-border-radius-base: 4px;
......