DeXun/GEAR-OA
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改全局样式（工业风，提交工业风skill

Browse Source
This commit is contained in:
wangyu
2026-04-28 15:37:17 +08:00
parent 1ce1ffad5a
commit 6d9f24bfd4
14 changed files with 573 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
.cursor/skills/ruoyi-industrial-dashboard-style/SKILL.md Normal file
View File

@@ -0,0 +1,194 @@
---
name: ruoyi-industrial-dashboard-style
description: Recreate the industrial dashboard style from `ruoyi-ui/src/views/index.vue` and apply it consistently across the UI, especially buttons, inputs, tables, cards, tags, and other Element-UI components. Use when the user asks for an industrial monitoring layout, blue-themed controls, or a RuoYi UI style based on `ruoyi-ui/src/views/index.vue`.
---
# RuoYi Industrial Dashboard Style
## Goal
Produce UI that matches the look and feel of `ruoyi-ui/src/views/index.vue` and extends it into the global component system:
- Compact, information-dense layout
- Industrial control-room aesthetic
- Dark top status bar
- White cards with subtle borders and soft shadows
- Small typography and tight spacing
- Strong blue accents across all controls, not green
- Table-first monitoring views with status badges and communication indicators
## Core color direction
- Primary actions, links, active states, and focused controls should use blue shades.
- Use deep navy and steel blue as the main palette.
- Avoid default Element-UI green success styling unless the semantics truly require success.
- Reserve red for alarms, orange for warnings, and gray for neutral states.
- Buttons, tags, table headers, and form focus states should visually align with the blue industrial palette.
## Design rules
### Overall layout
- Use a light gray page background.
- Keep padding and gaps tight.
- Prefer multiple horizontal sections over tall stacked blocks.
- Treat each section as a bordered card with a small header.
### Top status bar
- Use a full-width dark header strip.
- Left side should show system name, divider, and unit tag.
- Right side should show online/offline state and a live clock.
- Keep the bar compact, stable, and highly legible.
### KPI cards
- Use white cards with a small colored icon block.
- Show a large numeric value and a smaller label.
- Keep card height short and consistent.
- Prefer blue for normal metrics, orange for in-progress, red for warnings.
### Equipment or station cards
- Use a dark card header with the equipment name and runtime badge.
- Use a grid for dense parameter display.
- Display values in monospace or tabular-style text where possible.
- Add a slim footer with current coil/order, grade, shift, or similar operational context.
### Tables
- Prefer compact tables with borders and stripes.
- Use small button sizes and small tags.
- Keep column widths tight and practical.
- Use status text and colors to show workflow state.
### Communication or alarm indicators
- Use small dots, compact labels, and timestamps.
- Use blue for healthy connections.
- Use red and subtle blinking for alarms or disconnects.
## Visual tokens
Use these as the default visual language unless the user asks otherwise:
- Background: `#f0f2f5`
- Card border: `#dde1e6`
- Primary dark: `#1c2b3a`
- Primary blue: `#1d4e89`
- Secondary blue: `#2471a3`
- Warning orange: `#d68910`
- Danger red: `#c0392b`
- Muted text: `#7f8c8d`
- Soft shadow: `0 1px 4px rgba(0,0,0,.05)`
## Typography and spacing
- Use 11?C13px text for most labels and chrome.
- Use bold, larger numeric values for KPIs.
- Keep corner radii small, around 2?C4px.
- Use subtle dividers and minimal decoration.
## SCSS conventions
- Prefer scoped SCSS.
- Use BEM-style nested blocks like `card__header`, `card__body`, `card__footer`.
- Keep component styles compact and local.
- Use monospace for clocks and numeric readings when appropriate.
## When implementing a new screen
1. Start with the overall page shell and background.
2. Add the dark status bar.
3. Add KPI cards in a tight grid.
4. Add one or more dense equipment/status panels.
5. Add a compact table or communication panel.
6. Apply the color, spacing, border, and blue-control rules above.
## Example prompt behavior
If the user says they like the style from `ruoyi-ui/src/views/index.vue`, interpret that as a request to reuse this exact industrial dashboard language in new pages, components, or screens.
## Design rules
### Overall layout
- Use a light gray page background.
- Keep padding and gaps tight.
- Prefer multiple horizontal sections over tall stacked blocks.
- Treat each section as a bordered card with a small header.
### Top status bar
- Use a full-width dark header strip.
- Left side should show system name, divider, and unit tag.
- Right side should show online/offline state and a live clock.
- Keep the bar compact, stable, and highly legible.
### KPI cards
- Use white cards with a small colored icon block.
- Show a large numeric value and a smaller label.
- Keep card height short and consistent.
- Prefer blue for normal metrics, orange for in-progress, red for warnings.
### Equipment or station cards
- Use a dark card header with the equipment name and runtime badge.
- Use a grid for dense parameter display.
- Display values in monospace or tabular-style text where possible.
- Add a slim footer with current coil/order, grade, shift, or similar operational context.
### Tables
- Prefer compact tables with borders and stripes.
- Use small button sizes and small tags.
- Keep column widths tight and practical.
- Use status text and colors to show workflow state.
### Communication or alarm indicators
- Use small dots, compact labels, and timestamps.
- Use blue for healthy connections.
- Use red and subtle blinking for alarms or disconnects.
## Visual tokens
Use these as the default visual language unless the user asks otherwise:
- Background: `#f0f2f5`
- Card border: `#dde1e6`
- Primary dark: `#1c2b3a`
- Primary blue: `#1d4e89`
- Secondary blue: `#2471a3`
- Warning orange: `#d68910`
- Danger red: `#c0392b`
- Muted text: `#7f8c8d`
- Soft shadow: `0 1px 4px rgba(0,0,0,.05)`
## Typography and spacing
- Use 11?C13px text for most labels and chrome.
- Use bold, larger numeric values for KPIs.
- Keep corner radii small, around 2?C4px.
- Use subtle dividers and minimal decoration.
## SCSS conventions
- Prefer scoped SCSS.
- Use BEM-style nested blocks like `card__header`, `card__body`, `card__footer`.
- Keep component styles compact and local.
- Use monospace for clocks and numeric readings when appropriate.
## When implementing a new screen
1. Start with the overall page shell and background.
2. Add the dark status bar.
3. Add KPI cards in a tight grid.
4. Add one or more dense equipment/status panels.
5. Add a compact table or communication panel.
6. Apply the color, spacing, and border rules above.
## Example prompt behavior
If the user says they like the style from `ruoyi-ui/src/views/index.vue`, interpret that as a request to reuse this exact industrial dashboard language in new pages, components, or screens.

4
gear-admin/src/main/resources/application-prod.yml
View File

@@ -105,13 +105,13 @@ spring:
spring: spring:
redis: redis:
# 地址 # 地址
host: localhost host: 49.232.154.205
# 端口，默认为6379 # 端口，默认为6379
port: 6379 port: 6379
# 数据库索引 # 数据库索引
database: 0 database: 0
# 密码(如没有密码请注释掉) # 密码(如没有密码请注释掉)
# password: password: WANGyu11!
# 连接超时时间 # 连接超时时间
timeout: 10s timeout: 10s
# 是否开启ssl # 是否开启ssl

34
gear-ui3/src/assets/styles/btn.scss
View File

@@ -4,7 +4,7 @@
background: $color; background: $color;
&:hover { &:hover {
color: $color; color: #fff;
&:before, &:before,
&:after { &:after {
@@ -82,13 +82,16 @@
} }
.custom-button { .custom-button {
display: inline-block; display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
background: #fff; background: var(--app-primary);
color: #fff; color: #fff !important;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
outline: 0; outline: 0;
@@ -97,3 +100,26 @@
font-size: 14px; font-size: 14px;
border-radius: 4px; border-radius: 4px;
} }
:global(.el-button) {
color: #fff !important;
}
:global(.el-button > span),
:global(.el-button > span *) ,
:global(.el-button .svg-icon),
:global(.el-button i) {
color: inherit !important;
fill: currentColor;
}
:global(.el-button--default) {
color: var(--app-primary) !important;
}
:global(.el-button--default > span),
:global(.el-button--default > span *),
:global(.el-button--default .svg-icon),
:global(.el-button--default i) {
color: inherit !important;
}

45
gear-ui3/src/assets/styles/element-ui.scss
View File

@@ -5,7 +5,13 @@ $--spacing-base: 8px;
$--spacing-md: $--spacing-base; $--spacing-md: $--spacing-base;
$--spacing-lg: $--spacing-base * 2; $--spacing-lg: $--spacing-base * 2;
$--form-item-margin: $--spacing-base; $--form-item-margin: $--spacing-base;
$--btn-height: 24px; $--btn-height: 24px;
$industrial-primary: #1d4e89;
$industrial-secondary: #2471a3;
$industrial-dark: #1c2b3a;
$industrial-border: #dde1e6;
$industrial-bg: #f0f2f5;
// ====================== 2. CSS尺寸变量（与Sass变量同步）====================== // ====================== 2. CSS尺寸变量（与Sass变量同步）======================
@@ -71,16 +77,35 @@ body {
// 主按钮（尺寸相关） // 主按钮（尺寸相关）
.el-button--primary { .el-button--primary {
@include button-variant(); @include button-variant();
background: $industrial-primary;
border-color: $industrial-primary;
color: #fff !important;
&:hover,
&:focus {
background: $industrial-secondary;
border-color: $industrial-secondary;
color: #fff !important;
}
} }
// 功能按钮（尺寸相关） // 功能按钮（尺寸相关）
.el-button--success, .el-button--success,
.el-button--warning,
.el-button--danger, .el-button--danger,
.el-button--info { .el-button--info {
@include button-variant(); @include button-variant();
} }
.el-button--warning {
@include button-variant();
color: #1c2b3a !important;
&:hover,
&:focus {
color: #1c2b3a !important;
}
}
// 文本按钮（尺寸相关） // 文本按钮（尺寸相关）
.el-button--text { .el-button--text {
height: auto; height: auto;
@@ -142,9 +167,19 @@ body {
// ---------------------- 5.2 表格（紧凑尺寸）---------------------- // ---------------------- 5.2 表格（紧凑尺寸）----------------------
.el-table { .el-table {
border-radius: 8px; border-radius: 6px;
overflow: hidden; overflow: hidden;
margin-top: $--form-item-margin * 2; // 与表单间距 margin-top: $--form-item-margin * 2; // 与表单间距
border: 1px solid $industrial-border;
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th.el-table__cell {
background: #eef3f8;
color: $industrial-dark;
border-bottom: 1px solid $industrial-border;
}
}
// 表头（紧凑padding） // 表头（紧凑padding）
.el-table__header-wrapper { .el-table__header-wrapper {
@@ -429,8 +464,10 @@ body {
// ---------------------- 5.5 卡片/对话框（尺寸层级）---------------------- // ---------------------- 5.5 卡片/对话框（尺寸层级）----------------------
// 卡片尺寸 // 卡片尺寸
.el-card { .el-card {
border-radius: 8px; border-radius: 6px;
overflow: hidden; overflow: hidden;
border: 1px solid $industrial-border;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
// 卡片头部尺寸 // 卡片头部尺寸
.el-card__header { .el-card__header {

183
gear-ui3/src/assets/styles/index.scss
View File

@@ -6,9 +6,25 @@
@use './btn.scss'; @use './btn.scss';
@use './ruoyi.scss'; @use './ruoyi.scss';
:root {
color-scheme: light;
--app-page-bg: #f0f2f5;
--app-card-bg: #ffffff;
--app-card-border: #dde1e6;
--app-primary-dark: #1c2b3a;
--app-primary: #1d4e89;
--app-secondary: #2471a3;
--app-warning: #d68910;
--app-danger: #c0392b;
--app-muted: #7f8c8d;
--app-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
html,
body { body {
height: 100%; height: 100%;
margin: 0; margin: 0;
background: var(--app-page-bg);
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@@ -16,7 +32,17 @@ body {
} }
label { label {
font-weight: 700; font-weight: 600;
color: var(--app-primary-dark);
}
:root {
--app-bg: #f0f2f5;
--app-card-border: #dde1e6;
--app-primary-dark: #1c2b3a;
--app-primary: #1d4e89;
--app-secondary: #2471a3;
--app-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
} }
html { html {
@@ -99,31 +125,32 @@ div:focus {
} }
aside { aside {
background: #eef1f6; background: #eef3f8;
padding: 8px 24px; padding: 8px 16px;
margin-bottom: 20px; margin-bottom: 16px;
border-radius: 2px; border: 1px solid var(--app-card-border);
border-radius: 4px;
display: block; display: block;
line-height: 32px; line-height: 28px;
font-size: 16px; font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #2c3e50; color: var(--app-primary-dark);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
a { a {
color: #337ab7; color: var(--app-primary);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: rgb(32, 160, 255); color: var(--app-secondary);
} }
} }
} }
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px; padding: 16px;
} }
.components-container { .components-container {
@@ -136,36 +163,39 @@ aside {
} }
.sub-navbar { .sub-navbar {
height: 50px; height: 44px;
line-height: 50px; line-height: 44px;
position: relative; position: relative;
width: 100%; width: 100%;
text-align: right; text-align: right;
padding-right: 20px; padding-right: 16px;
transition: 600ms ease position; transition: 600ms ease position;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); background: linear-gradient(90deg, #1c2b3a 0%, #1d4e89 100%);
color: #fff;
.subtitle { .subtitle {
font-size: 20px; font-size: 18px;
color: #fff; color: #fff;
} }
&.draft { &.draft {
background: #d0d0d0; background: #dfe5ec;
color: var(--app-primary-dark);
} }
&.deleted { &.deleted {
background: #d0d0d0; background: #dfe5ec;
color: var(--app-primary-dark);
} }
} }
.link-type, .link-type,
.link-type:focus { .link-type:focus {
color: #337ab7; color: var(--app-primary);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: rgb(32, 160, 255); color: var(--app-secondary);
} }
} }
@@ -179,3 +209,116 @@ aside {
} }
} }
.table-card,
.dashboard-card,
.el-card {
border: 1px solid var(--app-card-border);
border-radius: 4px;
box-shadow: var(--app-shadow);
}
.el-button {
--el-button-disabled-text-color: rgba(255, 255, 255, 0.72);
color: #ffffff;
}
.el-button__text,
.el-button span,
.el-button .svg-icon,
.el-button i {
color: inherit;
}
.el-button--default {
--el-button-text-color: var(--app-primary);
color: var(--app-primary);
}
.el-button--default .el-button__text,
.el-button--default span,
.el-button--default .svg-icon,
.el-button--default i {
color: inherit;
}
.el-card__header {
background: linear-gradient(90deg, #1c2b3a 0%, #25384a 100%);
color: #fff;
font-size: 13px;
font-weight: 600;
}
.el-table {
--el-table-header-bg-color: #eef3f8;
--el-table-header-text-color: #1c2b3a;
--el-table-border-color: #dde1e6;
--el-table-row-hover-bg-color: #f7fbff;
}
.el-button--primary,
.el-button--success,
.el-button--danger,
.el-button--info {
--el-button-text-color: #fff;
--el-button-disabled-text-color: rgba(255, 255, 255, 0.72);
}
.el-button--warning {
--el-button-text-color: #ffffff;
--el-button-disabled-text-color: rgba(255, 255, 255, 0.72);
--el-button-bg-color: var(--app-warning);
--el-button-border-color: var(--app-warning);
--el-button-hover-bg-color: #e09a1b;
--el-button-hover-border-color: #e09a1b;
--el-button-active-bg-color: #c97f0f;
--el-button-active-border-color: #c97f0f;
color: #ffffff;
}
.el-button--warning.is-plain {
--el-button-text-color: #d68910;
--el-button-border-color: #f0c674;
--el-button-bg-color: #fff6e5;
--el-button-hover-text-color: #d68910;
--el-button-hover-bg-color: #fff0d6;
--el-button-hover-border-color: #d68910;
--el-button-active-text-color: #c97f0f;
--el-button-active-border-color: #c97f0f;
color: #d68910;
}
.el-button--primary {
--el-button-bg-color: #1d4e89;
--el-button-border-color: #1d4e89;
--el-button-hover-bg-color: #2471a3;
--el-button-hover-border-color: #2471a3;
--el-button-active-bg-color: #1c2b3a;
--el-button-active-border-color: #1c2b3a;
}
.el-button--success {
--el-button-bg-color: #4b8b3b;
--el-button-border-color: #4b8b3b;
}
.el-button--warning {
--el-button-bg-color: #d68910;
--el-button-border-color: #d68910;
}
.el-button--danger {
--el-button-bg-color: #c0392b;
--el-button-border-color: #c0392b;
}
.el-button--info {
--el-button-bg-color: #1c2b3a;
--el-button-border-color: #1c2b3a;
}
.el-tag--success {
--el-tag-bg-color: rgba(29, 78, 137, 0.12);
--el-tag-border-color: rgba(29, 78, 137, 0.24);
--el-tag-text-color: #1d4e89;
}

16
gear-ui3/src/assets/styles/sidebar.scss
View File

@@ -68,6 +68,7 @@
border: none; border: none;
height: 100%; height: 100%;
width: 100% !important; width: 100% !important;
background: #1c2b3a;
} }
.el-menu-item, .menu-title { .el-menu-item, .menu-title {
@@ -83,21 +84,25 @@
// menu hover // menu hover
.sub-menu-title-noDropdown, .sub-menu-title-noDropdown,
.el-sub-menu__title { .el-sub-menu__title {
color: #d7e2ee !important;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: rgba(255, 255, 255, 0.05) !important;
} }
} }
& .theme-dark .is-active > .el-sub-menu__title { & .theme-dark .is-active > .el-sub-menu__title {
color: vars.$base-menu-color-active !important; color: #ffffff !important;
background: linear-gradient(90deg, rgba(29, 78, 137, 0.95), rgba(36, 113, 163, 0.95));
} }
& .nest-menu .el-sub-menu>.el-sub-menu__title, & .nest-menu .el-sub-menu>.el-sub-menu__title,
& .el-sub-menu .el-menu-item { & .el-sub-menu .el-menu-item {
min-width: vars.$base-sidebar-width !important; min-width: vars.$base-sidebar-width !important;
color: #d7e2ee !important;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: rgba(255, 255, 255, 0.05) !important;
} }
} }
@@ -211,9 +216,10 @@
.nest-menu .el-sub-menu>.el-sub-menu__title, .nest-menu .el-sub-menu>.el-sub-menu__title,
.el-menu-item { .el-menu-item {
color: #d7e2ee !important;
&:hover { &:hover {
// you can use $sub-menuHover background-color: rgba(255, 255, 255, 0.05) !important;
background-color: rgba(0, 0, 0, 0.06) !important;
} }
} }

70
gear-ui3/src/assets/styles/variables.module.scss
View File

@@ -1,42 +1,42 @@
// base color // industrial palette
$blue: #324157; $blue: #1d4e89;
$light-blue: #333c46; $light-blue: #2471a3;
$red: #C03639; $red: #c0392b;
$pink: #E65D6E; $pink: #e65d6e;
$green: #30B08F; $green: #4b8b3b;
$tiffany: #4AB7BD; $tiffany: #4ab7bd;
$yellow: #FEC171; $yellow: #d68910;
$panGreen: #30B08F; $panGreen: #2f8f5b;
// 默认主题变量 // 默认主题变量
$menuText: #bfcbd9; $menuText: #d7e2ee;
$menuActiveText: #409eff; $menuActiveText: #7cc0ff;
$menuBg: #304156; $menuBg: #1c2b3a;
$menuHover: #263445; $menuHover: #25384a;
// 浅色主题theme-light // 浅色主题theme-light
$menuLightBg: #ffffff; $menuLightBg: #f5f7fa;
$menuLightHover: #f0f1f5; $menuLightHover: #e9eef5;
$menuLightText: #303133; $menuLightText: #2f3a4a;
$menuLightActiveText: #409EFF; $menuLightActiveText: #1d4e89;
// 基础变量 // 基础变量
$base-sidebar-width: 200px; $base-sidebar-width: 200px;
$sideBarWidth: 200px; $sideBarWidth: 200px;
// 菜单暗色变量 // 菜单暗色变量
$base-menu-color: #bfcbd9; $base-menu-color: #d7e2ee;
$base-menu-color-active: #f4f4f5; $base-menu-color-active: #ffffff;
$base-menu-background: #304156; $base-menu-background: #1c2b3a;
$base-sub-menu-background: #1f2d3d; $base-sub-menu-background: #16212d;
$base-sub-menu-hover: #001528; $base-sub-menu-hover: #223243;
// 组件变量 // 组件变量
$--color-primary: #409EFF; $--color-primary: #1d4e89;
$--color-success: #67C23A; $--color-success: #4b8b3b;
$--color-warning: #E6A23C; $--color-warning: #d68910;
$--color-danger: #F56C6C; $--color-danger: #c0392b;
$--color-info: #909399; $--color-info: #7f8c8d;
:export { :export {
menuText: $menuText; menuText: $menuText;
@@ -71,12 +71,20 @@ $--color-info: #909399;
--sidebar-bg: #{$menuBg}; --sidebar-bg: #{$menuBg};
--sidebar-text: #{$menuText}; --sidebar-text: #{$menuText};
--menu-hover: #{$menuHover}; --menu-hover: #{$menuHover};
--navbar-bg: #f5f7fa;
--navbar-bg: #ffffff; --navbar-text: #2f3a4a;
--navbar-text: #303133; --navbar-hover: #e9eef5;
--page-bg: #f0f2f5;
--card-bg: #ffffff;
--card-border: #dde1e6;
--panel-header-bg: #1c2b3a;
--panel-header-text: #ffffff;
--panel-accent: #1d4e89;
--panel-accent-2: #2471a3;
--muted-text: #7f8c8d;
/* splitpanes default-theme 变量 */ /* splitpanes default-theme 变量 */
--splitpanes-default-bg: #ffffff; --splitpanes-default-bg: #f5f7fa;
} }

5
gear-ui3/src/layout/components/AppMain.vue
View File

@@ -42,6 +42,7 @@ function addIframe() {
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: var(--app-bg);
} }
.app-main:has(.copyright) { .app-main:has(.copyright) {
@@ -78,11 +79,11 @@ function addIframe() {
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: #f1f1f1; background-color: #edf2f7;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: #c0c0c0; background-color: #aab7c4;
border-radius: 3px; border-radius: 3px;
} }
</style> </style>

40
gear-ui3/src/layout/components/Navbar.vue
View File

@@ -102,11 +102,13 @@ function toggleTheme() {
<style lang='scss' scoped> <style lang='scss' scoped>
.navbar { .navbar {
height: 50px; height: 48px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: var(--navbar-bg); background: linear-gradient(90deg, #1c2b3a 0%, #25384a 100%);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
color: #d7e2ee;
.hamburger-container { .hamburger-container {
line-height: 46px; line-height: 46px;
@@ -115,9 +117,10 @@ function toggleTheme() {
cursor: pointer; cursor: pointer;
transition: background 0.3s; transition: background 0.3s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
color: #d7e2ee;
&:hover { &:hover {
background: rgba(0, 0, 0, 0.025); background: rgba(255, 255, 255, 0.04);
} }
} }
@@ -138,7 +141,7 @@ function toggleTheme() {
.right-menu { .right-menu {
float: right; float: right;
height: 100%; height: 100%;
line-height: 50px; line-height: 48px;
display: flex; display: flex;
&:focus { &:focus {
@@ -147,10 +150,10 @@ function toggleTheme() {
.right-menu-item { .right-menu-item {
display: inline-block; display: inline-block;
padding: 0 8px; padding: 0 10px;
height: 100%; height: 100%;
font-size: 18px; font-size: 16px;
color: #5a5e66; color: #d7e2ee;
vertical-align: text-bottom; vertical-align: text-bottom;
&.hover-effect { &.hover-effect {
@@ -158,7 +161,7 @@ function toggleTheme() {
transition: background 0.3s; transition: background 0.3s;
&:hover { &:hover {
background: rgba(0, 0, 0, 0.025); background: rgba(255, 255, 255, 0.05);
} }
} }
@@ -181,23 +184,28 @@ function toggleTheme() {
padding-right: 0px; padding-right: 0px;
.avatar-wrapper { .avatar-wrapper {
margin-top: 10px; margin-top: 9px;
right: 5px; right: 5px;
position: relative; position: relative;
display: flex;
align-items: center;
gap: 8px;
.user-avatar { .user-avatar {
cursor: pointer; cursor: pointer;
width: 30px; width: 28px;
height: 30px; height: 28px;
border-radius: 50%; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
} }
.user-nickname{ .user-nickname{
position: relative; position: relative;
left: 5px; left: 0;
bottom: 10px; bottom: 0;
font-size: 14px; font-size: 13px;
font-weight: bold; font-weight: 600;
color: #fff;
} }
i { i {

4
gear-ui3/src/layout/components/Sidebar/Logo.vue
View File

@@ -35,7 +35,7 @@ const getLogoBackground = computed(() => {
if (settingsStore.isDark) { if (settingsStore.isDark) {
return 'var(--sidebar-bg)' return 'var(--sidebar-bg)'
} }
return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg return '#1c2b3a'
}) })
// 获取Logo文字颜色 // 获取Logo文字颜色
@@ -43,7 +43,7 @@ const getLogoTextColor = computed(() => {
if (settingsStore.isDark) { if (settingsStore.isDark) {
return 'var(--sidebar-text)' return 'var(--sidebar-text)'
} }
return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText return '#fff'
}) })
</script> </script>

27
gear-ui3/src/layout/components/Sidebar/index.vue
View File

@@ -70,34 +70,45 @@ const activeMenu = computed(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.sidebar-container { .sidebar-container {
background-color: v-bind(getMenuBackground); background: #1c2b3a !important;
border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
.scrollbar-wrapper { .scrollbar-wrapper {
background-color: v-bind(getMenuBackground); background: #1c2b3a !important;
}
:deep(.el-scrollbar__view),
:deep(.el-scrollbar__wrap),
:deep(.el-scrollbar__bar),
:deep(.el-menu),
:deep(.el-menu--popup) {
background: #1c2b3a !important;
} }
.el-menu { .el-menu {
border: none; border: none;
height: 100%; height: 100%;
width: 100% !important; width: 100% !important;
background: #1c2b3a !important;
.el-menu-item, .el-sub-menu__title { .el-menu-item, .el-sub-menu__title {
color: #d7e2ee !important;
&:hover { &:hover {
background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important; background-color: rgba(255, 255, 255, 0.05) !important;
} }
} }
.el-menu-item { .el-menu-item {
color: v-bind(getMenuTextColor);
&.is-active { &.is-active {
color: var(--menu-active-text, #409eff); color: #ffffff !important;
background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important; background: linear-gradient(90deg, rgba(29, 78, 137, 0.92), rgba(36, 113, 163, 0.92)) !important;
box-shadow: inset 3px 0 0 #7cc0ff;
} }
} }
.el-sub-menu__title { .el-sub-menu__title {
color: v-bind(getMenuTextColor); color: #d7e2ee !important;
} }
} }
} }

32
gear-ui3/src/layout/components/TagsView/index.vue
View File

@@ -90,9 +90,9 @@ function isActive(r) {
function activeStyle(tag) { function activeStyle(tag) {
if (!isActive(tag)) return {} if (!isActive(tag)) return {}
return { return {
"background-color": "#f5f7fa", "background-color": "#1d4e89",
"border-color": "#f5f7fa", "border-color": "#1d4e89",
"color": "#303133" "color": "#fff"
} }
} }
@@ -264,9 +264,9 @@ function handleScroll() {
.tags-view-container { .tags-view-container {
height: 34px; height: 34px;
width: 100%; width: 100%;
background: var(--tags-bg, #fff); background: #f5f7fa;
border-bottom: 1px solid var(--tags-item-border, #d8dce5); border-bottom: 1px solid #dde1e6;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .08), 0 0 3px 0 rgba(0, 0, 0, .03);
.tags-view-wrapper { .tags-view-wrapper {
.tags-view-item { .tags-view-item {
@@ -275,9 +275,9 @@ function handleScroll() {
cursor: pointer; cursor: pointer;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
border: 1px solid var(--tags-item-border, #d8dce5); border: 1px solid #d8dce5;
color: var(--tags-item-text, #495060); color: #495060;
background: var(--tags-item-bg, #fff); background: #fff;
padding: 0 8px; padding: 0 8px;
font-size: 12px; font-size: 12px;
margin-left: 5px; margin-left: 5px;
@@ -292,13 +292,13 @@ function handleScroll() {
} }
&.active { &.active {
background-color: #f5f7fa; background-color: #1d4e89;
color: #303133; color: #fff;
border-color: #f5f7fa; border-color: #1d4e89;
&::before { &::before {
content: ''; content: '';
background: #42b983; background: #7cc0ff;
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
@@ -316,7 +316,7 @@ function handleScroll() {
.contextmenu { .contextmenu {
margin: 0; margin: 0;
background: var(--el-bg-color-overlay, #fff); background: #fff;
z-index: 3000; z-index: 3000;
position: absolute; position: absolute;
list-style-type: none; list-style-type: none;
@@ -324,7 +324,7 @@ function handleScroll() {
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: var(--tags-item-text, #333); color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
border: 1px solid var(--el-border-color-light, #e4e7ed); border: 1px solid var(--el-border-color-light, #e4e7ed);
@@ -334,7 +334,7 @@ function handleScroll() {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--tags-item-hover, #eee); background: #eef3f8;
} }
} }
} }

5
gear-ui3/src/layout/index.vue
View File

@@ -72,6 +72,7 @@ function setLayout() {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: #f0f2f5;
&.mobile.openSidebar { &.mobile.openSidebar {
position: fixed; position: fixed;
@@ -106,6 +107,10 @@ function setLayout() {
width: 100%; width: 100%;
} }
.main-container {
background: #f0f2f5;
}
.mobile .fixed-header { .mobile .fixed-header {
width: 100%; width: 100%;
} }

54
gear-ui3/src/views/login.vue
View File

@@ -154,25 +154,22 @@ getCookie()
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
// 亮色主题（默认）
.login { .login {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-size: cover; background-size: cover;
background-image: url('@/assets/images/back.jpg'); background-image: linear-gradient(rgba(28, 43, 58, 0.65), rgba(28, 43, 58, 0.65)), url('@/assets/images/back.jpg');
/* 亮色主题变量 */ --color-bg-form: rgba(255, 255, 255, 0.9);
--color-bg-primary: #f5f7fa90; --color-bg-input: #f7fbff;
--color-bg-form: #f5f7fa90; --color-border-input: #cfd8e3;
--color-bg-input: #f0f2f5; --color-text-primary: #1c2b3a;
--color-border-input: #dcdfe6; --color-text-secondary: #54708a;
--color-text-primary: #303133; --color-text-placeholder: #8a99a8;
--color-text-secondary: #606266; --color-btn-primary: #1d4e89;
--color-text-placeholder: #909399; --color-btn-primary-hover: #2471a3;
--color-btn-primary: #409eff;
--color-btn-primary-hover: #66b1ff;
.title { .title {
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
@@ -181,6 +178,8 @@ getCookie()
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 700;
letter-spacing: 1px;
} }
.right-img { .right-img {
@@ -202,15 +201,16 @@ getCookie()
border-radius: 6px; border-radius: 6px;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
background: var(--color-bg-form); background: var(--color-bg-form);
padding: 25px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 25px 25px 5px 25px; padding: 25px 25px 5px 25px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
border: 1px solid rgba(255, 255, 255, 0.55);
} }
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
background: var(--color-bg-input); background: var(--color-bg-input);
border-radius: 6px; border-radius: 4px;
border: 1px solid var(--color-border-input); border: 1px solid var(--color-border-input);
box-shadow: none;
} }
.el-input { .el-input {
@@ -221,9 +221,7 @@ getCookie()
z-index: 1; z-index: 1;
flex: 3; flex: 3;
border-radius: 6px; border-radius: 6px;
// background: var(--color-bg-form);
padding: 25px; padding: 25px;
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.el-input { .el-input {
height: 40px; height: 40px;
@@ -288,7 +286,6 @@ getCookie()
padding-left: 12px; padding-left: 12px;
} }
/* Element组件样式调整 */
:deep(.el-checkbox__label) { :deep(.el-checkbox__label) {
color: var(--color-text-primary); color: var(--color-text-primary);
} }
@@ -308,21 +305,18 @@ getCookie()
} }
} }
// 暗色主题
.login.dark { .login.dark {
/* 暗色主题变量 - 覆盖亮色变量 */ --color-bg-form: rgba(28, 43, 58, 0.92);
--color-bg-primary: #1a1a1a; --color-bg-input: #223243;
--color-bg-form: #292929; --color-border-input: #3f5569;
--color-bg-input: #333333; --color-text-primary: #edf3f9;
--color-border-input: #444444; --color-text-secondary: #b9c7d4;
--color-text-primary: #ebebeb; --color-text-placeholder: #8fa1b2;
--color-text-secondary: #bfbfbf; --color-btn-primary: #2471a3;
--color-text-placeholder: #999999; --color-btn-primary-hover: #1d4e89;
--color-btn-primary: #409eff;
--color-btn-primary-hover: #66b1ff;
.login-form { .login-form {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
} }
} }
</style> </style>