diff --git a/src/pinia/modules/app.js b/src/pinia/modules/app.js
index 0f6c091..68b9b33 100644
--- a/src/pinia/modules/app.js
+++ b/src/pinia/modules/app.js
@@ -32,6 +32,7 @@ export const useAppStore = defineStore('app', () => {
const preferredDark = usePreferredDark()
const toggleTheme = (darkMode) => {
+ config.darkMode = darkMode ? 'dark' : 'light'
isDark.value = darkMode
}
diff --git a/src/pinia/modules/user.js b/src/pinia/modules/user.js
index b2fe957..9281d61 100644
--- a/src/pinia/modules/user.js
+++ b/src/pinia/modules/user.js
@@ -1,13 +1,13 @@
import { login, getUserInfo } from '@/api/user'
import { jsonInBlacklist } from '@/api/jwt'
import router from '@/router/index'
-import { ElLoading, ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus'
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { useRouterStore } from './router'
import { useCookies } from '@vueuse/integrations/useCookies'
import { useStorage } from '@vueuse/core'
-import { techFullscreenLoadingOptions } from '@/utils/loadingTheme'
+import { createTechFullscreenLoading } from '@/utils/loadingTheme'
import { useAppStore } from '@/pinia'
@@ -64,9 +64,7 @@ export const useUserStore = defineStore('user', () => {
/* 登录*/
const LoginIn = async (loginInfo) => {
try {
- loadingInstance.value = ElLoading.service(
- techFullscreenLoadingOptions('登录中，请稍候...')
- )
+ loadingInstance.value = createTechFullscreenLoading('登录中，请稍候...')
const res = await login(loginInfo)
diff --git a/src/style/element_visiable.scss b/src/style/element_visiable.scss
index 4065023..7500bb3 100644
--- a/src/style/element_visiable.scss
+++ b/src/style/element_visiable.scss
@@ -2,6 +2,7 @@
@use '@/style/reset';
@use '@/style/table-tech.scss';
@use '@/style/loading-tech.scss';
+@use '@/style/setting-tech.scss';
.el-button {
font-weight: 600;
@@ -329,7 +330,8 @@ body:not(.login-light-mode) {
justify-content: flex-start;
}
-html.dark {
+html.dark,
+html.light {
--el-bg-color: rgb(7, 17, 31);
--el-bg-color-overlay: rgb(8, 27, 54);
--el-fill-color-light: rgb(15, 23, 42);
@@ -344,7 +346,8 @@ html.dark {
--el-mask-color: rgba(2, 6, 23, 0.72);
}
-html.dark.login-light-mode {
+#userLayout.login-light-mode,
+html.login-light-mode {
--el-bg-color: #ffffff !important;
--el-bg-color-overlay: #ffffff !important;
--el-text-color-primary: #303133 !important;
diff --git a/src/style/loading-tech.scss b/src/style/loading-tech.scss
index 451336f..507b405 100644
--- a/src/style/loading-tech.scss
+++ b/src/style/loading-tech.scss
@@ -1,130 +1,11 @@
-@keyframes gvaLoadingFadeIn {
- from {
- opacity: 0;
- }
+@import '../../public/gva-loading-boot.css';
- to {
- opacity: 1;
- }
-}
-
-@keyframes gvaLoadingSpin {
- to {
- transform: rotate(360deg);
- }
-}
-
-@keyframes gvaLoadingPulse {
- 0%,
- 100% {
- opacity: 0.72;
- }
-
- 50% {
- opacity: 1;
- }
-}
-
-@keyframes gvaLoadingOrbit {
- 0% {
- transform: rotate(0deg);
- }
-
- 100% {
- transform: rotate(360deg);
- }
-}
-
-.el-loading-mask.gva-tech-loading,
-.gva-tech-app .el-loading-mask {
+.el-loading-mask.gva-tech-loading {
animation: gvaLoadingFadeIn 0.22s ease;
- background:
- radial-gradient(circle at 50% 40%, rgba(0, 212, 255, 0.1), transparent 38%),
- rgba(2, 8, 23, 0.42) !important;
- -webkit-backdrop-filter: blur(10px);
- backdrop-filter: blur(10px);
-}
-
-.el-loading-mask.gva-tech-loading.gva-tech-loading--fullscreen {
- background:
- radial-gradient(circle at 50% 38%, rgba(0, 212, 255, 0.14), transparent 40%),
- rgba(2, 8, 23, 0.58) !important;
-}
-
-.el-loading-mask.gva-tech-loading .el-loading-spinner,
-.gva-tech-app .el-loading-mask .el-loading-spinner {
- position: relative;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 14px;
- min-width: 148px;
- padding: 24px 28px 20px;
- margin-top: 0;
- border: 1px solid rgba(0, 212, 255, 0.22);
- border-radius: 18px;
- background:
- linear-gradient(145deg, rgba(10, 28, 54, 0.96), rgba(4, 14, 30, 0.92));
- box-shadow:
- 0 22px 48px rgba(0, 0, 0, 0.34),
- 0 0 28px rgba(0, 212, 255, 0.1),
- inset 0 0 28px rgba(0, 212, 255, 0.05);
-
- .circular {
- display: none !important;
- }
-
- &::before {
- content: '';
- width: 44px;
- height: 44px;
- border: 2px solid rgba(0, 212, 255, 0.12);
- border-top-color: #00d4ff;
- border-right-color: rgba(103, 232, 249, 0.55);
- border-radius: 50%;
- animation: gvaLoadingSpin 0.85s linear infinite;
- box-shadow: 0 0 18px rgba(0, 212, 255, 0.22);
- }
-
- &::after {
- position: absolute;
- top: 18px;
- left: 50%;
- width: 56px;
- height: 56px;
- margin-left: -28px;
- content: '';
- border: 1px dashed rgba(0, 212, 255, 0.16);
- border-radius: 50%;
- animation: gvaLoadingOrbit 2.4s linear infinite;
- pointer-events: none;
- }
-
- .el-loading-text {
- position: relative;
- z-index: 1;
- margin: 0 !important;
- padding-top: 2px;
- font-size: 13px;
- font-weight: 600;
- line-height: 1.4;
- color: #dceeff !important;
- letter-spacing: 0.1em;
- text-shadow: none;
- animation: gvaLoadingPulse 1.6s ease-in-out infinite;
- }
}
@media (prefers-reduced-motion: reduce) {
- .el-loading-mask.gva-tech-loading,
- .gva-tech-app .el-loading-mask {
+ .el-loading-mask.gva-tech-loading {
animation: none;
}
-
- .el-loading-mask.gva-tech-loading .el-loading-spinner::before,
- .el-loading-mask.gva-tech-loading .el-loading-spinner::after,
- .el-loading-mask.gva-tech-loading .el-loading-spinner .el-loading-text {
- animation: none !important;
- }
}
diff --git a/src/style/main.scss b/src/style/main.scss
index 0ec1485..a6e0d45 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -32,7 +32,8 @@ body {
min-height: 100%;
}
-html.dark {
+html.dark,
+html.light {
--tech-bg: #07111f;
--tech-bg-deep: #020617;
--tech-panel: rgba(8, 27, 54, 0.92);
diff --git a/src/style/page-tech-compat.scss b/src/style/page-tech-compat.scss
index 6f349ba..5250aaf 100644
--- a/src/style/page-tech-compat.scss
+++ b/src/style/page-tech-compat.scss
@@ -2,14 +2,18 @@
.gva-tech-layout {
.text-slate-700,
.text-gray-700,
- .text-gray-600 {
+ .text-gray-600,
+ .text-gray-900,
+ .text-gray-800,
+ .text-black {
color: var(--tech-text) !important;
}
.text-slate-500,
.text-slate-400,
.text-slate-300,
- .text-gray-500 {
+ .text-gray-500,
+ .text-gray-400 {
color: var(--tech-text-muted) !important;
}
@@ -130,12 +134,21 @@
.device-grid .device-card,
.profile-container > .bg-white,
- .profile-card {
+ .profile-card,
+ .detail-card,
+ .chart-card,
+ .trend-toolbar {
color: var(--tech-text) !important;
border-color: rgba(0, 212, 255, 0.22) !important;
background:
linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)),
radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 34%) !important;
box-shadow: inset 0 0 24px rgba(0, 212, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.24) !important;
+
+ h3,
+ h4 {
+ color: var(--tech-text-strong) !important;
+ border-bottom-color: rgba(0, 212, 255, 0.18) !important;
+ }
}
}
diff --git a/src/style/setting-tech.scss b/src/style/setting-tech.scss
new file mode 100644
index 0000000..aaa2990
--- /dev/null
+++ b/src/style/setting-tech.scss
@@ -0,0 +1,123 @@
+.theme-config-drawer.el-drawer,
+.theme-config-drawer .el-drawer {
+ color: var(--tech-text);
+ background:
+ radial-gradient(circle at 12% 10%, rgba(0, 212, 255, 0.12), transparent 28%),
+ linear-gradient(180deg, rgba(7, 17, 31, 0.98), rgba(2, 8, 23, 0.98)) !important;
+ box-shadow: -12px 0 40px rgba(0, 0, 0, 0.42), 0 0 28px rgba(0, 212, 255, 0.08);
+}
+
+.theme-config-drawer {
+ .gva-setting-header,
+ .gva-setting-body,
+ .gva-setting-tabs-wrap,
+ .gva-setting-section,
+ .gva-setting-card,
+ .gva-setting-tab-bar {
+ color: var(--tech-text);
+ border-color: rgba(0, 212, 255, 0.18) !important;
+ background:
+ linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)),
+ radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 34%) !important;
+ }
+
+ .gva-setting-header {
+ border-bottom: 1px solid rgba(0, 212, 255, 0.18) !important;
+ background: rgba(2, 8, 23, 0.72) !important;
+ }
+
+ .gva-setting-title,
+ .gva-setting-section-title,
+ .gva-setting-card-title {
+ color: var(--tech-text-strong) !important;
+ }
+
+ .gva-setting-subtitle,
+ .gva-setting-hint,
+ .gva-setting-tab-item:not(.is-active) {
+ color: var(--tech-text-muted) !important;
+ }
+
+ .gva-setting-tab-bar {
+ padding: 6px;
+ border-radius: 14px;
+ background: rgba(2, 8, 23, 0.72) !important;
+ box-shadow: inset 0 0 18px rgba(0, 212, 255, 0.05);
+ }
+
+ .gva-setting-tab-item {
+ min-width: 80px;
+ padding: 10px 18px;
+ border-radius: 10px;
+ cursor: pointer;
+ transition: all 0.15s ease;
+
+ &:not(.is-active):hover {
+ color: var(--tech-text-strong) !important;
+ background: rgba(0, 212, 255, 0.1) !important;
+ }
+
+ &.is-active {
+ color: #031424 !important;
+ box-shadow: 0 0 18px rgba(0, 212, 255, 0.24);
+ }
+ }
+
+ .gva-setting-divider {
+ background: rgba(0, 212, 255, 0.18) !important;
+ }
+
+ .gva-setting-color-item,
+ .gva-setting-color-panel {
+ border-color: rgba(0, 212, 255, 0.18) !important;
+ background: rgba(2, 8, 23, 0.62) !important;
+
+ &:hover {
+ border-color: rgba(0, 212, 255, 0.42) !important;
+ background: rgba(0, 212, 255, 0.08) !important;
+ }
+ }
+
+ .gva-setting-color-code {
+ color: var(--tech-text) !important;
+ border-color: rgba(0, 212, 255, 0.18) !important;
+ background: rgba(2, 8, 23, 0.72) !important;
+ }
+
+ ::-webkit-scrollbar-track {
+ background: rgba(2, 8, 23, 0.72);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: rgba(0, 212, 255, 0.24);
+
+ &:hover {
+ background: rgba(0, 212, 255, 0.38);
+ }
+ }
+}
+
+.gva-tech-tool-btn {
+ color: var(--tech-text);
+ border: 1px solid rgba(0, 212, 255, 0.22) !important;
+ background: rgba(2, 8, 23, 0.62);
+ box-shadow: inset 0 0 14px rgba(0, 212, 255, 0.05);
+
+ &:hover {
+ color: #67e8f9;
+ border-color: rgba(0, 212, 255, 0.42) !important;
+ background: rgba(0, 212, 255, 0.1);
+ }
+}
+
+.gva-tech-cropper {
+ color: var(--tech-text);
+ border-color: rgba(0, 212, 255, 0.18) !important;
+ background: rgba(2, 8, 23, 0.72) !important;
+}
+
+.gva-tech-cropper-panel {
+ border-color: rgba(0, 212, 255, 0.18) !important;
+ background:
+ linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)) !important;
+}
diff --git a/src/utils/loadingTheme.js b/src/utils/loadingTheme.js
index 97fb9ff..f765093 100644
--- a/src/utils/loadingTheme.js
+++ b/src/utils/loadingTheme.js
@@ -1,3 +1,25 @@
+import { ElLoading } from 'element-plus'
+
+export const patchTechLoadingSpinner = (root = document) => {
+ const masks = root.querySelectorAll('.el-loading-mask.gva-tech-loading')
+ const mask = masks[masks.length - 1]
+ if (!mask) return
+
+ const spinner = mask.querySelector('.el-loading-spinner')
+ if (!spinner || spinner.querySelector('.gva-loading-ring')) return
+
+ const ring = document.createElement('div')
+ ring.className = 'gva-loading-ring'
+ ring.setAttribute('aria-hidden', 'true')
+
+ const circular = spinner.querySelector('.circular')
+ if (circular) {
+ spinner.insertBefore(ring, circular)
+ } else {
+ spinner.insertBefore(ring, spinner.firstChild)
+ }
+}
+
export const techLoadingOptions = (overrides = {}) => ({
text: '数据加载中...',
background: 'transparent',
@@ -10,6 +32,24 @@ export const techFullscreenLoadingOptions = (text, overrides = {}) => ({
lock: true,
text,
background: 'transparent',
- customClass: 'gva-tech-loading gva-tech-loading--fullscreen',
+ customClass: 'gva-tech-loading',
...overrides
})
+
+export const createTechLoading = (options = {}) => {
+ const instance = ElLoading.service(techLoadingOptions(options))
+ requestAnimationFrame(() => {
+ patchTechLoadingSpinner()
+ })
+ return instance
+}
+
+export const createTechFullscreenLoading = (text, overrides = {}) => {
+ const instance = ElLoading.service(
+ techFullscreenLoadingOptions(text, overrides)
+ )
+ requestAnimationFrame(() => {
+ patchTechLoadingSpinner()
+ })
+ return instance
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 21bdfee..0dd37a0 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,9 +1,9 @@
import axios from 'axios' // 引入axios
import { useUserStore } from '@/pinia/modules/user'
-import { ElLoading, ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus'
import { emitter } from '@/utils/bus'
import router from '@/router/index'
-import { techLoadingOptions } from '@/utils/loadingTheme'
+import { createTechLoading } from '@/utils/loadingTheme'
const service = axios.create({
baseURL: import.meta.env.VITE_BASE_API,
@@ -37,8 +37,7 @@ const showLoading = (
// 再次检查activeAxios状态，防止竞态条件
if (activeAxios > 0 && !isLoadingVisible) {
if (!option.target) option.target = loadDom
- option = techLoadingOptions(option)
- loadingInstance = ElLoading.service(option)
+ loadingInstance = createTechLoading(option)
isLoadingVisible = true
// 设置强制关闭定时器，防止loading永远不关闭（30秒超时）
diff --git a/src/utils/techChartTheme.js b/src/utils/techChartTheme.js
index e1b4a6e..0a5fb66 100644
--- a/src/utils/techChartTheme.js
+++ b/src/utils/techChartTheme.js
@@ -25,3 +25,17 @@ export const techChartCenterText = {
primary: '#ffffff',
secondary: 'rgba(220, 243, 255, 0.88)'
}
+
+export const techChartSeriesColors = [
+ '#00d4ff',
+ '#10b981',
+ '#f59e0b',
+ '#ef4444',
+ '#3b82f6',
+ '#8b5cf6',
+ '#14b8a6',
+ '#67e8f9'
+]
+
+export const techChartMutedColor = 'rgba(220, 243, 255, 0.88)'
+export const techChartSplitTrackColor = 'rgba(0, 212, 255, 0.12)'
diff --git a/src/view/dashboard/components/charts-content-numbers.vue b/src/view/dashboard/components/charts-content-numbers.vue
index 4d7fb9e..d15f196 100644
--- a/src/view/dashboard/components/charts-content-numbers.vue
+++ b/src/view/dashboard/components/charts-content-numbers.vue
@@ -13,20 +13,25 @@
import Chart from '@/components/charts/index.vue'
import useChartOption from '@/hooks/charts'
import { graphic } from 'echarts'
- import { computed, ref } from 'vue'
- import { useAppStore } from '@/pinia'
+ import { ref } from 'vue'
import { storeToRefs } from 'pinia'
- const appStore = useAppStore()
- const { config } = storeToRefs(appStore)
+ import { useAppStore } from '@/pinia'
+ import {
+ techChartMutedColor,
+ techChartSplitTrackColor,
+ techChartTooltip
+ } from '@/utils/techChartTheme'
+
defineProps({
height: {
type: String,
default: '128px'
}
})
- const dotColor = computed(() => {
- return appStore.isDark ? '#333' : '#E5E8EF'
- })
+
+ const appStore = useAppStore()
+ const { config } = storeToRefs(appStore)
+ const dotColor = techChartSplitTrackColor
const graphicFactory = (side) => {
return {
type: 'text',
@@ -35,7 +40,7 @@
style: {
text: '',
textAlign: 'center',
- fill: '#4E5969',
+ fill: techChartMutedColor,
fontSize: 12
}
}
@@ -69,7 +74,7 @@
data: xAxis.value,
boundaryGap: false,
axisLabel: {
- color: '#4E5969',
+ color: techChartMutedColor,
formatter(value, idx) {
if (idx === 0) return ''
if (idx === xAxis.value.length - 1) return ''
@@ -122,6 +127,7 @@
},
tooltip: {
trigger: 'axis',
+ ...techChartTooltip,
formatter(params) {
const [firstElement] = params
return `
diff --git a/src/view/dashboard/components/charts-people-numbers.vue b/src/view/dashboard/components/charts-people-numbers.vue
index 3d10b3f..93eafb4 100644
--- a/src/view/dashboard/components/charts-people-numbers.vue
+++ b/src/view/dashboard/components/charts-people-numbers.vue
@@ -17,6 +17,7 @@
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/pinia'
+ import { techChartMutedColor } from '@/utils/techChartTheme'
const appStore = useAppStore()
const { config } = storeToRefs(appStore)
@@ -38,7 +39,7 @@
style: {
text: '',
textAlign: 'center',
- fill: '#4E5969',
+ fill: techChartMutedColor,
fontSize: 12
}
}
diff --git a/src/view/equipment/list/components/detail/components/alarm/index.vue b/src/view/equipment/list/components/detail/components/alarm/index.vue
index ef08708..2503af6 100644
--- a/src/view/equipment/list/components/detail/components/alarm/index.vue
+++ b/src/view/equipment/list/components/detail/components/alarm/index.vue
@@ -150,18 +150,18 @@
}
.detail-card {
- background-color: var(--el-bg-color-overlay, #ffffff);
- border-radius: 8px;
+ background: var(--tech-panel-soft);
+ border-radius: 12px;
padding: 24px;
- border: 1px solid var(--el-border-color, #e4e7ed);
+ border: 1px solid var(--tech-border);
h3 {
font-size: 16px;
font-weight: 600;
- color: var(--el-text-color-primary, #303133);
+ color: var(--tech-text-strong);
margin: 0 0 16px 0;
padding-bottom: 12px;
- border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
+ border-bottom: 1px solid rgba(0, 212, 255, 0.18);
}
}
diff --git a/src/view/equipment/list/components/detail/components/trend/index.vue b/src/view/equipment/list/components/detail/components/trend/index.vue
index a105b95..4748070 100644
--- a/src/view/equipment/list/components/detail/components/trend/index.vue
+++ b/src/view/equipment/list/components/detail/components/trend/index.vue
@@ -146,6 +146,13 @@
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { ElMessage, ElMessageBox } from 'element-plus'
+ import {
+ techChartAxisLabel,
+ techChartAxisLine,
+ techChartSeriesColors,
+ techChartSplitLine,
+ techChartTooltip
+ } from '@/utils/techChartTheme'
use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
const props = defineProps({
@@ -359,7 +366,8 @@
const createLineOption = (name, color, data = [], xAxis = []) => {
return {
tooltip: {
- trigger: 'axis'
+ trigger: 'axis',
+ ...techChartTooltip
},
grid: {
left: '3%',
@@ -372,25 +380,14 @@
type: 'category',
data: xAxis,
boundaryGap: false,
- axisLine: {
- lineStyle: {
- color: '#909399'
- }
- }
+ axisLine: techChartAxisLine,
+ axisLabel: techChartAxisLabel
},
yAxis: {
type: 'value',
- axisLine: {
- lineStyle: {
- color: '#909399'
- }
- },
- splitLine: {
- lineStyle: {
- color: '#ebeef5',
- type: 'dashed'
- }
- }
+ axisLine: techChartAxisLine,
+ axisLabel: techChartAxisLabel,
+ splitLine: techChartSplitLine
},
series: [
{
@@ -430,43 +427,43 @@
key: 'voltage',
title: '电压',
unit: 'V',
- color: '#409EFF',
- option: createLineOption('电压', '#409EFF', [], [])
+ color: techChartSeriesColors[0],
+ option: createLineOption('电压', techChartSeriesColors[0], [], [])
},
{
key: 'leakageCurrent',
title: '漏电流值',
unit: 'mA',
- color: '#67C23A',
- option: createLineOption('漏电流', '#67C23A', [], [])
+ color: techChartSeriesColors[1],
+ option: createLineOption('漏电流', techChartSeriesColors[1], [], [])
},
{
key: 'cumulativeElectricity',
title: '累计用电量',
unit: 'kWh',
- color: '#E6A23C',
- option: createLineOption('用电量', '#E6A23C', [], [])
+ color: techChartSeriesColors[2],
+ option: createLineOption('用电量', techChartSeriesColors[2], [], [])
},
{
key: 'current',
title: '电流值',
unit: 'A',
- color: '#F56C6C',
- option: createLineOption('电流', '#F56C6C', [], [])
+ color: techChartSeriesColors[3],
+ option: createLineOption('电流', techChartSeriesColors[3], [], [])
},
{
key: 'internalTemperature',
title: '内部温度',
unit: '℃',
- color: '#909399',
- option: createLineOption('内部温度', '#909399', [], [])
+ color: techChartSeriesColors[4],
+ option: createLineOption('内部温度', techChartSeriesColors[4], [], [])
},
{
key: 'powerFactor',
title: '功率因数',
unit: '',
- color: '#1ABC9C',
- option: createLineOption('功率因数', '#1ABC9C', [], [])
+ color: techChartSeriesColors[5],
+ option: createLineOption('功率因数', techChartSeriesColors[5], [], [])
}
])
diff --git a/src/view/layout/header/index.vue b/src/view/layout/header/index.vue
index a0631f2..e752cc0 100644
--- a/src/view/layout/header/index.vue
+++ b/src/view/layout/header/index.vue
@@ -39,7 +39,7 @@
-
+
{{ userStore.userInfo.nickName }}
diff --git a/src/view/layout/header/tools.vue b/src/view/layout/header/tools.vue
index 1b0ebd3..c5ad552 100644
--- a/src/view/layout/header/tools.vue
+++ b/src/view/layout/header/tools.vue
@@ -7,7 +7,7 @@
@@ -17,7 +17,7 @@
@@ -27,7 +27,7 @@
@@ -36,7 +36,7 @@
diff --git a/src/view/layout/setting/components/themeColorPicker.vue b/src/view/layout/setting/components/themeColorPicker.vue
index 4523c92..06a46d0 100644
--- a/src/view/layout/setting/components/themeColorPicker.vue
+++ b/src/view/layout/setting/components/themeColorPicker.vue
@@ -1,15 +1,15 @@
-
+
-
精选色彩
+
精选色彩
-
+
-
自定义颜色
-
选择任意颜色作为主题色
+
自定义颜色
+
选择任意颜色作为主题色
-
+
-
当前主题色
+
当前主题色
@@ -81,7 +81,7 @@ defineOptions({
const props = defineProps({
modelValue: {
type: String,
- default: '#3b82f6'
+ default: '#00d4ff'
}
})
@@ -90,19 +90,15 @@ const emit = defineEmits(['update:modelValue'])
const customColor = ref(props.modelValue)
const presetColors = [
- { color: '#4E80EE', name: '默认' },
- { color: '#8bb5d1', name: '晨雾蓝' },
- { color: '#a8c8a8', name: '薄荷绿' },
- { color: '#d4a5a5', name: '玫瑰粉' },
- { color: '#c8a8d8', name: '薰衣草' },
- { color: '#f0c674', name: '暖阳黄' },
- { color: '#b8b8b8', name: '月光银' },
- { color: '#d8a8a8', name: '珊瑚橙' },
- { color: '#a8d8d8', name: '海雾青' },
- { color: '#c8c8a8', name: '橄榄绿' },
- { color: '#d8c8a8', name: '奶茶棕' },
- { color: '#a8a8d8', name: '梦幻紫' },
- { color: '#c8d8a8', name: '抹茶绿' }
+ { color: '#00d4ff', name: '科技青' },
+ { color: '#67e8f9', name: '电光蓝' },
+ { color: '#3b82f6', name: '深空蓝' },
+ { color: '#10b981', name: '运行绿' },
+ { color: '#f59e0b', name: '告警橙' },
+ { color: '#ef4444', name: '危险红' },
+ { color: '#8b5cf6', name: '紫电' },
+ { color: '#14b8a6', name: '海雾青' },
+ { color: '#22d3ee', name: '冰晶蓝' }
]
const handleColorChange = (color) => {
@@ -128,24 +124,14 @@ watch(() => props.modelValue, (newValue) => {
.custom-color-picker {
::v-deep(.el-color-picker__trigger) {
- border: 1px solid #e5e7eb;
+ border: 1px solid rgba(0, 212, 255, 0.22);
border-radius: 6px;
transition: all 150ms ease-in-out;
&:hover {
- border-color: #9ca3af;
+ border-color: rgba(0, 212, 255, 0.42);
transform: translateY(-1px);
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
- }
- }
-}
-
-.dark .custom-color-picker {
- ::v-deep(.el-color-picker__trigger) {
- border-color: #4b5563;
-
- &:hover {
- border-color: #6b7280;
+ box-shadow: 0 2px 8px rgba(0, 212, 255, 0.16);
}
}
}
diff --git a/src/view/layout/setting/components/themeModeSelector.vue b/src/view/layout/setting/components/themeModeSelector.vue
index 72eb4e8..fda1461 100644
--- a/src/view/layout/setting/components/themeModeSelector.vue
+++ b/src/view/layout/setting/components/themeModeSelector.vue
@@ -1,15 +1,11 @@
-
+
diff --git a/src/view/layout/setting/index.vue b/src/view/layout/setting/index.vue
index 6e2f3f6..e0504b0 100644
--- a/src/view/layout/setting/index.vue
+++ b/src/view/layout/setting/index.vue
@@ -8,8 +8,8 @@
class="theme-config-drawer"
>
-
-
系统配置
+