diff --git a/.env.development b/.env.development index 10db161..a5744e5 100644 --- a/.env.development +++ b/.env.development @@ -7,8 +7,8 @@ VITE_APP_ENV = 'development' # 招商车研物联网平台/开发环境 VITE_APP_BASE_API = '/dev-api' -VITE_API_URL = http://192.168.0.222:13080 -VITE_WS_URL = ws://192.168.0.222:13080/ws +VITE_API_URL = http://192.168.0.199:13080 +VITE_WS_URL = ws://192.168.0.199:13080/ws VITE_PORT = 80 VITE_INSPECTION_TYPE = "inspection" VITE_MINIO_URL = "http://192.168.28.10:9000/cmvr-iot/" diff --git a/src/App.vue b/src/App.vue index 498b169..1a79052 100644 --- a/src/App.vue +++ b/src/App.vue @@ -16,7 +16,7 @@ onMounted(() => { diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue index 234531b..8fe7a43 100644 --- a/src/components/HeaderSearch/index.vue +++ b/src/components/HeaderSearch/index.vue @@ -271,7 +271,7 @@ watch(searchPool, (list) => { padding-left: 0; padding-right: 0; box-shadow: none !important; - border-bottom: 1px solid #d9d9d9; + border-bottom: 1px solid var(--min-border-light); vertical-align: middle; } } diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue index acd05c5..113986b 100644 --- a/src/components/ImagePreview/index.vue +++ b/src/components/ImagePreview/index.vue @@ -69,14 +69,16 @@ const realHeight = computed(() => @@ -78,12 +75,9 @@ function addIframe() { height: 6px; } -::-webkit-scrollbar-track { - background-color: #f1f1f1; -} - -::-webkit-scrollbar-thumb { - background-color: #c0c0c0; - border-radius: 3px; +@media (max-width: 768px) { + .app-main { + padding: 16px; + } } diff --git a/src/layout/components/Copyright/index.vue b/src/layout/components/Copyright/index.vue index ed589de..693c66e 100644 --- a/src/layout/components/Copyright/index.vue +++ b/src/layout/components/Copyright/index.vue @@ -22,10 +22,10 @@ const content = computed(() => settingsStore.footerContent) height: 36px; padding: 10px 20px; text-align: right; - background-color: #f8f8f8; - color: #666; + background-color: var(--min-bg-page); + color: var(--min-text-secondary); font-size: 14px; - border-top: 1px solid #e7e7e7; + border-top: 1px solid var(--min-border-light); z-index: 999; } - \ No newline at end of file + diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 00a0867..a92c654 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -175,14 +175,16 @@ async function toggleTheme(event) { \ No newline at end of file + diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index 0373c4e..dee7020 100644 --- a/src/layout/components/Sidebar/Logo.vue +++ b/src/layout/components/Sidebar/Logo.vue @@ -67,8 +67,8 @@ const getLogoTextColor = computed(() => { .sidebar-logo-container { position: relative; width: 100%; - height: 50px; - line-height: 50px; + height: 56px; + line-height: 56px; background: v-bind(getLogoBackground); text-align: center; overflow: hidden; @@ -78,8 +78,8 @@ const getLogoTextColor = computed(() => { width: 100%; & .sidebar-logo { - width: 32px; - height: 32px; + width: 28px; + height: 28px; vertical-align: middle; margin-right: 12px; } @@ -89,7 +89,7 @@ const getLogoTextColor = computed(() => { margin: 0; color: v-bind(getLogoTextColor); font-weight: 600; - line-height: 50px; + line-height: 56px; font-size: 14px; font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; vertical-align: middle; diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 33e1141..bfe790e 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -80,10 +80,20 @@ const activeMenu = computed(() => { border: none; height: 100%; width: 100% !important; + + .el-menu-item, + .el-sub-menu__title { + height: 48px; + line-height: 48px; + margin: 2px 8px; + border-radius: var(--min-radius-sm); + font-size: 14px; + font-weight: 500; + } .el-menu-item, .el-sub-menu__title { &:hover { - background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important; + background-color: var(--menu-hover) !important; } } @@ -91,8 +101,18 @@ const activeMenu = computed(() => { color: v-bind(getMenuTextColor); &.is-active { - color: var(--menu-active-text, #409eff); - background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important; + color: var(--menu-active-text); + background-color: var(--min-primary-soft) !important; + + &::before { + content: ''; + position: absolute; + top: 12px; + bottom: 12px; + left: 0; + width: 2px; + background: var(--min-primary); + } } } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 2fa2c69..e03f766 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -8,7 +8,6 @@ :class="isActive(tag) ? 'active' : ''" :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" class="tags-view-item" - :style="activeStyle(tag)" @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent="openMenu(tag, $event)" > @@ -45,7 +44,6 @@ import ScrollPane from './ScrollPane' import { getNormalPath } from '@/utils/ruoyi' import useTagsViewStore from '@/store/modules/tagsView' -import useSettingsStore from '@/store/modules/settings' import usePermissionStore from '@/store/modules/permission' const visible = ref(false); @@ -61,7 +59,6 @@ const router = useRouter(); const visitedViews = computed(() => useTagsViewStore().visitedViews); const routes = computed(() => usePermissionStore().routes); -const theme = computed(() => useSettingsStore().theme); watch(route, () => { addTags() @@ -85,14 +82,6 @@ function isActive(r) { return r.path === route.path } -function activeStyle(tag) { - if (!isActive(tag)) return {}; - return { - "background-color": theme.value, - "border-color": theme.value - }; -} - function isAffix(tag) { return tag.meta && tag.meta.affix } @@ -259,50 +248,40 @@ function handleScroll() { diff --git a/src/layout/components/TopNav/index.vue b/src/layout/components/TopNav/index.vue index 3810cfe..3a8e461 100644 --- a/src/layout/components/TopNav/index.vue +++ b/src/layout/components/TopNav/index.vue @@ -172,37 +172,37 @@ onMounted(() => { \ No newline at end of file + diff --git a/src/views/corpusManger/corpus/components/CorpusList.vue b/src/views/corpusManger/corpus/components/CorpusList.vue index bb2ccc3..4b51de0 100644 --- a/src/views/corpusManger/corpus/components/CorpusList.vue +++ b/src/views/corpusManger/corpus/components/CorpusList.vue @@ -274,9 +274,10 @@ onBeforeUnmount(() => { \ No newline at end of file + diff --git a/src/views/corpusManger/corpus/components/StatCards.vue b/src/views/corpusManger/corpus/components/StatCards.vue index 32bdb07..83c3f27 100644 --- a/src/views/corpusManger/corpus/components/StatCards.vue +++ b/src/views/corpusManger/corpus/components/StatCards.vue @@ -3,7 +3,7 @@
- +
{{ item.label }} @@ -75,62 +75,47 @@ onMounted(() => { gap: 16px; .card { - background: #fff; - border-radius: 12px; - padding: 8px 32px; + min-width: 0; + background: var(--min-bg-white); + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-base); + padding: 20px; .flex-between { display: flex; align-items: center; justify-content: space-between; - gap: 32px; + gap: 16px; .icon-container { - width: 52px; - height: 52px; + width: 44px; + height: 44px; + flex: 0 0 44px; display: flex; align-items: center; justify-content: center; - border-radius: 12px; - } - - .task { - background: #196afd; - } - - .add { - background: #16cb8d; - } - - .language { - background: #735df6; - } - - .consuming { - background: #fd9131; - } - - .timbre { - background: #2f7bf9; + border-radius: var(--min-radius-sm); + background: var(--min-primary-soft); } .right { flex: 1; + min-width: 0; display: flex; flex-direction: column; gap: 8px; .stat-label { - font-size: 16px; - color: #64748b; - font-weight: 500; + font-size: 13px; + color: var(--min-text-secondary); + font-weight: 400; } .stat-number { font-size: 24px; - font-weight: 700; - letter-spacing: -0.02em; - color: #0f172a; + font-weight: 600; + letter-spacing: 0; + color: var(--min-text-primary); } .stat-trend { @@ -143,19 +128,31 @@ onMounted(() => { } &.up { - color: #22c55e; + color: var(--el-color-success); } &.down { - color: #ef4444; + color: var(--el-color-danger); } &.neutral { - color: #94a3b8; + color: var(--min-text-secondary); } } } } } } - \ No newline at end of file + +@media (max-width: 1200px) { + .row-cards { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .row-cards { + grid-template-columns: minmax(0, 1fr); + } +} + diff --git a/src/views/corpusManger/speech_synthesis/components/AudioPlayer.vue b/src/views/corpusManger/speech_synthesis/components/AudioPlayer.vue index 9be64cb..25eb093 100644 --- a/src/views/corpusManger/speech_synthesis/components/AudioPlayer.vue +++ b/src/views/corpusManger/speech_synthesis/components/AudioPlayer.vue @@ -7,8 +7,8 @@
- - + + {{ formatTime(currentTime) }} @@ -211,9 +211,10 @@ onBeforeUnmount(() => { \ No newline at end of file + diff --git a/src/views/corpusManger/speech_synthesis/components/MainWorkspace.vue b/src/views/corpusManger/speech_synthesis/components/MainWorkspace.vue index 27b38f9..dc61992 100644 --- a/src/views/corpusManger/speech_synthesis/components/MainWorkspace.vue +++ b/src/views/corpusManger/speech_synthesis/components/MainWorkspace.vue @@ -330,13 +330,15 @@ const cancel = () => { .right { flex: 1; - background: #fff; + min-width: 0; + background: var(--min-bg-white); + border: 1px solid var(--min-border-light); padding: 20px; - border-radius: 12px; + border-radius: var(--min-radius-base); .title { font-size: 16px; - font-weight: bold; + font-weight: 600; margin-bottom: 10px; } @@ -357,13 +359,15 @@ const cancel = () => { .left { flex: 1; - background: #fff; + min-width: 0; + background: var(--min-bg-white); + border: 1px solid var(--min-border-light); padding: 20px; - border-radius: 12px; + border-radius: var(--min-radius-base); .title { font-size: 16px; - font-weight: bold; + font-weight: 600; margin-bottom: 10px; } @@ -386,4 +390,11 @@ const cancel = () => { } } } - \ No newline at end of file + +@media (max-width: 900px) { + .main-workspace .workspace-container { + flex-direction: column; + gap: 16px; + } +} + diff --git a/src/views/corpusManger/speech_synthesis/components/StatCards.vue b/src/views/corpusManger/speech_synthesis/components/StatCards.vue index dd4656b..17434dd 100644 --- a/src/views/corpusManger/speech_synthesis/components/StatCards.vue +++ b/src/views/corpusManger/speech_synthesis/components/StatCards.vue @@ -3,7 +3,7 @@
- +
{{ item.label }} @@ -81,66 +81,51 @@ onMounted(() => { \ No newline at end of file + +@media (max-width: 1440px) { + .row-cards { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (max-width: 900px) { + .row-cards { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .row-cards { + grid-template-columns: minmax(0, 1fr); + } +} + diff --git a/src/views/corpusManger/speech_synthesis/components/TaskList.vue b/src/views/corpusManger/speech_synthesis/components/TaskList.vue index e8f2345..d164615 100644 --- a/src/views/corpusManger/speech_synthesis/components/TaskList.vue +++ b/src/views/corpusManger/speech_synthesis/components/TaskList.vue @@ -278,9 +278,10 @@ defineExpose({ \ No newline at end of file + diff --git a/src/views/device/register/index.vue b/src/views/device/register/index.vue index f5a68a1..513c565 100644 --- a/src/views/device/register/index.vue +++ b/src/views/device/register/index.vue @@ -155,27 +155,27 @@ onMounted(async () => { \ No newline at end of file + diff --git a/src/views/device/robotManger/TechButtonWithLine.vue b/src/views/device/robotManger/TechButtonWithLine.vue index a2a3526..a7c248f 100644 --- a/src/views/device/robotManger/TechButtonWithLine.vue +++ b/src/views/device/robotManger/TechButtonWithLine.vue @@ -90,18 +90,18 @@ const props = defineProps({ linePadding: { type: Number, default: 20 }, // --- 仅用于样式的 Props --- - buttonGradient: { type: Array, default: () => ['#00f0ff', '#00d0ff'] }, // 按钮背景渐变色 - buttonHoverGradient: { type: Array, default: () => ['#00d0ff', '#00f0ff'] }, // 悬停时的渐变色 - buttonBorderColor: { type: String, default: 'rgba(0, 255, 255, 0.6)' }, - lineColor: { type: String, default: 'rgba(0, 150, 200, 0.4)' }, // 细线基础颜色 - lineHoverColor: { type: String, default: 'rgba(0, 255, 255, 1)' }, // 扫描线高亮颜色 + buttonGradient: { type: Array, default: () => ['var(--min-primary)', 'var(--min-primary)'] }, + buttonHoverGradient: { type: Array, default: () => ['var(--min-primary-hover)', 'var(--min-primary-hover)'] }, + buttonBorderColor: { type: String, default: 'var(--min-primary)' }, + lineColor: { type: String, default: 'var(--min-primary)' }, + lineHoverColor: { type: String, default: 'var(--min-primary)' }, lineStrokeWidth: { type: Number, default: 3 }, neonGlowIntensity: { type: Number, default: 3 }, // 霓虹光效强度 scanLineSpeed: { type: Number, default: 8 }, // 扫描线动画速度 animationDuration: { type: Number, default: 0.4 }, // 基础动画时长 - hoverScale: { type: Number, default: 1.03 }, // 悬停时的放大比例 + hoverScale: { type: Number, default: 1 }, // --- New Props for Flowing Light Effect --- - flowLineColor: { type: String, default: 'rgba(0, 255, 255, 0.8)' }, // 流光颜色 + flowLineColor: { type: String, default: 'var(--min-primary)' }, flowLineAnimationSpeed: { type: Number, default: 7 }, // 流光动画速度 }); @@ -167,14 +167,11 @@ const buttonStyle = computed(() => { const buttonWidthPx = typeof props.buttonWidth === 'number' ? `${props.buttonWidth}px` : props.buttonWidth; const buttonHeightPx = typeof props.buttonHeight === 'number' ? `${props.buttonHeight}px` : props.buttonHeight; - const currentGradient = isHovering.value ? props.buttonHoverGradient : props.buttonGradient; - - - const style = { + return { position: 'absolute', left: `${calculatedButtonX.value}px`, top: `${calculatedButtonY.value}px`, - transform: 'translate(-50%, -50%)', // 居中对齐 + transform: 'translate(-50%, -50%)', cursor: 'pointer', display: 'flex', alignItems: 'center', @@ -182,88 +179,44 @@ const buttonStyle = computed(() => { boxSizing: 'border-box', width: buttonWidthPx, height: buttonHeightPx, - borderRadius: '15px', // 强制平直四角 - // 更硬朗的背景，减少模糊，增加纹理感 - background: `linear-gradient(135deg, ${currentGradient[0]}, ${currentGradient[1]})`, - // 模拟金属/磨砂质感，但更锐利 - boxShadow: ` - inset 0 0 0 2px ${props.buttonBorderColor}, /* 内部边框 */ - 0 0 5px rgba(0, 150, 200, 0.5), /* 较弱的主光晕 */ - 0 0 12px rgba(0, 200, 255, 0.6), /* 第二层光晕 */ - 0 3px 10px rgba(0, 0, 0, 0.4) /* 底部阴影 */ - `, - color: '#ffffff', + border: `1px solid ${props.buttonBorderColor}`, + borderRadius: '4px', + background: isHovering.value ? 'var(--min-primary-hover)' : 'var(--min-primary)', + boxShadow: 'none', + color: 'var(--min-bg-white)', fontSize: '14px', - fontWeight: 'bold', // 更粗的字体 - letterSpacing: '0.7px', - textShadow: '0 0 5px rgba(0, 150, 200, 0.9)', // 文本的锐利光效 - transition: `all ${props.animationDuration}s ease-in-out`, - overflow: 'visible', // 允许流光伪元素溢出 + fontWeight: '600', + letterSpacing: '0', + textShadow: 'none', + transition: `background ${props.animationDuration}s ease`, + overflow: 'visible', zIndex: 1, }; - - if (isHovering.value) { - style.transform = `translate(-50%, -50%) scale(${props.hoverScale})`; - style.boxShadow = ` - inset 0 0 0 3px ${props.buttonBorderColor}, /* 悬停时内部边框变宽 */ - 0 0 8px rgba(0, 200, 255, 0.7), - 0 0 18px rgba(0, 230, 255, 0.8), - 0 5px 15px rgba(0, 0, 0, 0.5) /* 底部阴影增强 */ - `; - } - return style; }); // 按钮形状裁剪器的样式 const clipperStyle = computed(() => { - const currentGradient = isHovering.value ? props.buttonHoverGradient : props.buttonGradient; - - const style = { - position: 'relative', // 相对于 techButtonContainer 定位 + return { + position: 'relative', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', boxSizing: 'border-box', - borderRadius: '0px', // **clipper 的形状由 clip-path 定义** - background: `linear-gradient(135deg, ${currentGradient[0]}, ${currentGradient[1]})`, - boxShadow: ` - inset 0 0 0 2px ${props.buttonBorderColor}, /* 内部边框 */ - 0 0 5px rgba(0, 150, 200, 0.5), /* 较弱的主光晕 */ - 0 0 12px rgba(0, 200, 255, 0.6), /* 第二层光晕 */ - 0 3px 10px rgba(0, 0, 0, 0.4) /* 底部阴影 */ - `, - color: '#ffffff', + borderRadius: '3px', + background: isHovering.value ? 'var(--min-primary-hover)' : 'var(--min-primary)', + boxShadow: 'none', + color: 'var(--min-bg-white)', fontSize: '14px', - fontWeight: 'bold', - letterSpacing: '0.7px', - textShadow: '0 0 5px rgba(0, 150, 200, 0.9)', // 文本的锐利光效 - transition: `all ${props.animationDuration}s ease-in-out`, - overflow: 'hidden', // **clipper 内部的内容会被 clip-path 裁剪** - clipPath: `polygon( - 6px 0, /* 左上角内缩进5px */ - calc(100% - 6px) 0, /* 右上角内缩进5px */ - 100% 6px, /* 右上角外延5px */ - 100% calc(100% - 6px), /* 右下角内缩进5px */ - calc(100% - 6px) 100%, - 6px 100%, /* 左下角内缩进5px */ - 0 calc(100% - 6px), - 0 6px, /* 左下角外延5px */ - 6px 0px /* 左上角内缩进5px（重复起点，闭合多边形） */ - )`, - zIndex: 1, // 确保clipper在流光之上 + fontWeight: '600', + letterSpacing: '0', + textShadow: 'none', + transition: `background ${props.animationDuration}s ease`, + overflow: 'hidden', + clipPath: 'none', + zIndex: 1, }; - - if (isHovering.value) { - style.boxShadow = ` - inset 0 0 0 3px ${props.buttonBorderColor}, /* 悬停时内部边框变宽 */ - 0 0 8px rgba(0, 200, 255, 0.7), - 0 0 18px rgba(0, 230, 255, 0.8), - 0 5px 15px rgba(0, 0, 0, 0.5) /* 底部阴影增强 */ - `; - } - return style; }); // 线的三个关键点 (相对于 SVG 内部坐标系 (0,0) 是按钮中心) @@ -428,7 +381,7 @@ watch( box-sizing: border-box; overflow: visible; /* 允许 SVG 滤镜和动画效果溢出 */ z-index: 1; - border-radius: 8px; /* 科技感圆角 */ + border-radius: var(--min-radius-base); /* 基础过渡效果，用于缩放和阴影 */ /* transition: transform v-bind('`${props.animationDuration}s`') ease-in-out, box-shadow v-bind('`${props.animationDuration}s`') ease-in-out, background v-bind('`${props.animationDuration}s`') ease-in-out; */ } @@ -457,12 +410,12 @@ watch( } .button-text { - font-family: 'Orbitron', sans-serif; /* 科技感字体 */ - font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; + font-family: var(--min-font-family); + font-weight: 600; + text-transform: none; + letter-spacing: 0; /* color: v-bind('props.buttonBorderColor'); 文本颜色与边框颜色呼应 */ - color: #fff; + color: var(--min-bg-white); } /* --- SVG Line Styles --- */ @@ -476,7 +429,8 @@ watch( /* 主线条的动画 */ .main-line { - animation: scanline v-bind('`${props.scanLineSpeed}s`') linear infinite; + display: none; + animation: none; /* 调整 stroke-dasharray 来控制扫描线的长度和间隔 */ stroke-dasharray: 15px, 80px; /* 15px 显示, 100px 隐藏 */ stroke-dashoffset: 0; /* 初始位置 */ @@ -491,7 +445,7 @@ watch( /* 细微基线样式 */ .base-line { - opacity: 0.6; + opacity: 0.5; transition: all v-bind('`${props.animationDuration}s`') ease-in-out; } .tech-button-with-line:hover .base-line { @@ -501,7 +455,7 @@ watch( /* --- Flowing Light Border Effect --- */ /* 使用 ::before 伪元素实现四周的流光 */ .tech-button-with-line::before { - content: ''; + content: none; position: absolute; top: -4px; /* 稍向外延伸 */ left: -4px; @@ -509,12 +463,7 @@ watch( bottom: -4px; /* 关键：创建动态的流光渐变 */ /* 渐变方向是从左到右，颜色从透明到高亮再到透明 */ - background: linear-gradient( - 90deg, - transparent, - v-bind('props.flowLineColor'), - transparent - ); + background: var(--min-primary); border-radius: 0px; /* **与按钮一致的平直四角** */ opacity: 0.8; /* 初始可见度 */ filter: blur(5px); /* 轻微模糊，模拟光晕 */ @@ -544,4 +493,4 @@ watch( 50% { background-position: 100% 0; } /* 移动到右侧完全移出 */ 100% { background-position: -100% 0; } /* 回到初始状态，循环 */ } - \ No newline at end of file + diff --git a/src/views/device/robotManger/index.vue b/src/views/device/robotManger/index.vue index 7eb5638..e0df16c 100644 --- a/src/views/device/robotManger/index.vue +++ b/src/views/device/robotManger/index.vue @@ -659,19 +659,20 @@ onMounted(() => { display: flex; overflow: hidden; padding: 0; - background-color: #fff; - border-radius: 10px; + background-color: var(--min-bg-white); + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-base); height: calc(100vh - 120px); /* 示例高度，请根据实际布局调整 */ box-sizing: border-box; } .tree-panel { flex-shrink: 0; - border-right: 1px solid #ddd; + border-right: 1px solid var(--min-border-light); overflow-y: auto; height: 100%; /* 填充父容器高度 */ transition: width 0.3s ease; - background-color: #f8f8f8; /* 示例背景色 */ + background-color: var(--min-bg-subtle); } .tree-panel:deep(.el-tree) { @@ -713,14 +714,17 @@ onMounted(() => { justify-content: center; cursor: pointer; font-size: 24px; - background-color: #e0e0e0; - border-radius: 4px; + color: var(--min-text-regular); + background-color: var(--min-bg-white); + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-base); z-index: 2001; - box-shadow: 0 2px 4px rgba(0,0,0,.1); + box-shadow: none; } .toggle-button:hover { - background-color: #d0d0d0; + color: var(--min-primary); + background-color: var(--min-primary-soft); } .clickable-area { @@ -735,11 +739,14 @@ onMounted(() => { top: 50%; left: 50%; transform: translate(-50%, -50%); - color: #fff; - text-shadow: 0 0 5px #000; - animation: blink 1.5s infinite; + padding: 4px 8px; + color: var(--min-bg-white); + background: var(--min-primary); + border-radius: var(--min-radius-sm); + text-shadow: none; + animation: none; font-size: 14px; - font-weight: bold; + font-weight: 600; pointer-events: none; /* 防止文本本身捕获点击事件 */ } @@ -752,12 +759,13 @@ onMounted(() => { .popup { display: flex; flex-direction: column; - background: white; + background: var(--min-bg-white); user-select: none; overflow: hidden; /* 整体 overflow hidden，内容由子组件处理 */ box-sizing: border-box; transition: width 0.2s, height 0.2s, top 0.2s, left 0.2s; - border: 1px solid #eee; + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-base); position: absolute; /* 确保 popup 是绝对定位 */ } @@ -768,20 +776,20 @@ onMounted(() => { .drag-handle { height: 30px; - background: #e0e0e0; + background: var(--min-bg-subtle); cursor: move; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; - border-bottom: 1px solid #eee; /* 增加分隔线 */ + border-bottom: 1px solid var(--min-border-light); } .popup-title { font-size: 16px; - font-weight: bold; - color: #333; + font-weight: 600; + color: var(--min-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -803,7 +811,9 @@ onMounted(() => { cursor: pointer; font-size: 18px; padding: 4px 8px; - background: #f0f0f0; + color: var(--min-text-secondary); + background: var(--min-bg-white); + border: 1px solid var(--min-border-light); border-radius: 4px; display: flex; align-items: center; @@ -812,15 +822,17 @@ onMounted(() => { } .control-icon:hover { - background: #d0d0d0; + color: var(--min-primary); + background: var(--min-primary-soft); } .close-icon { - color: #ff4444; + color: var(--el-color-danger); } .close-icon:hover { - background: #ff6666; + color: var(--min-bg-white); + background: var(--el-color-danger); } .resize-edge, .resize-corner { @@ -856,7 +868,7 @@ onMounted(() => { display: flex; justify-content: flex-end; padding-top: 10px; - border-top: 1px solid #eee; + border-top: 1px solid var(--min-border-light); } .el-dialog { display: flex; diff --git a/src/views/flow/components/Aside.vue b/src/views/flow/components/Aside.vue index a818eef..1adb1c0 100644 --- a/src/views/flow/components/Aside.vue +++ b/src/views/flow/components/Aside.vue @@ -96,13 +96,13 @@ const handleDragCustom = (event, node) => { height: 100%; min-height: 0; flex-direction: column; - color: #1f2937; + color: var(--min-text-primary); } .library-header { padding: 16px 14px 14px; - border-bottom: 1px solid #e4e8ef; - background: #fff; + border-bottom: 1px solid var(--min-border-light); + background: var(--min-bg-white); } .library-heading { @@ -114,12 +114,12 @@ const handleDragCustom = (event, node) => { .library-title { font-size: 15px; - font-weight: 650; + font-weight: 600; } .library-subtitle { margin-top: 2px; - color: #8a94a6; + color: var(--min-text-secondary); font-size: 12px; } @@ -138,16 +138,16 @@ const handleDragCustom = (event, node) => { .el-collapse-item__header { height: 46px; padding: 0 14px; - border-bottom-color: #e8ebf0; - background: #f8fafc; - color: #344054; + border-bottom-color: var(--min-border-light); + background: var(--min-bg-page); + color: var(--min-text-regular); font-size: 13px; font-weight: 600; } .el-collapse-item__wrap { - border-bottom-color: #e8ebf0; - background: #f8fafc; + border-bottom-color: var(--min-border-light); + background: var(--min-bg-page); } .el-collapse-item__content { @@ -170,10 +170,10 @@ const handleDragCustom = (event, node) => { height: 20px; padding: 0 6px; place-items: center; - border: 1px solid #dfe4ec; - border-radius: 4px; - background: #fff; - color: #7a8597; + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-sm); + background: var(--min-bg-white); + color: var(--min-text-secondary); font-size: 11px; font-weight: 500; line-height: 18px; @@ -192,16 +192,15 @@ const handleDragCustom = (event, node) => { gap: 9px; align-items: center; padding: 9px 8px 9px 10px; - border: 1px solid #e1e6ed; - border-radius: 7px; - background: #fff; + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-base); + background: var(--min-bg-white); cursor: grab; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; &:hover { - border-color: #f2a071; - box-shadow: 0 5px 14px rgba(31, 41, 55, 0.08); - transform: translateX(2px); + border-color: var(--min-primary); + box-shadow: none; } &:active { cursor: grabbing; } @@ -212,8 +211,8 @@ const handleDragCustom = (event, node) => { width: 34px; height: 34px; place-items: center; - border-radius: 6px; - background: #f1f5f9; + border-radius: var(--min-radius-sm); + background: var(--min-bg-page); img { width: 21px; @@ -226,7 +225,7 @@ const handleDragCustom = (event, node) => { .node-name { overflow: hidden; - color: #202938; + color: var(--min-text-primary); font-size: 13px; font-weight: 600; text-overflow: ellipsis; @@ -237,7 +236,7 @@ const handleDragCustom = (event, node) => { display: -webkit-box; overflow: hidden; margin-top: 4px; - color: #7a8597; + color: var(--min-text-secondary); font-size: 11px; line-height: 16px; -webkit-box-orient: vertical; @@ -245,7 +244,7 @@ const handleDragCustom = (event, node) => { } .drag-handle { - color: #a8b0bf; + color: var(--min-text-placeholder); font-size: 16px; } diff --git a/src/views/flow/components/OuterNode.vue b/src/views/flow/components/OuterNode.vue index 0cdc977..90a8729 100644 --- a/src/views/flow/components/OuterNode.vue +++ b/src/views/flow/components/OuterNode.vue @@ -39,12 +39,12 @@ onMounted(() => { .node__box { width: 320px; height: auto; - background: #fff; + background: var(--min-bg-white); padding: 12px; cursor: default; - border-radius: 12px; - border: 2px solid white; - box-shadow: 0 5px 15px 0#00000008; + border-radius: var(--min-radius-base); + border: 1px solid var(--min-border-light); + box-shadow: none; position: relative; } diff --git a/src/views/flow/index.vue b/src/views/flow/index.vue index c6e0bf4..49e3264 100644 --- a/src/views/flow/index.vue +++ b/src/views/flow/index.vue @@ -2723,10 +2723,10 @@ onUnmounted(() => { gap: 12px; margin-bottom: 16px; padding: 10px 12px; - border: 1px solid #dfe6ef; - border-radius: 6px; - background: #f7f9fc; - color: #65758b; + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-base); + background: var(--min-bg-page); + color: var(--min-text-secondary); font-size: 13px; } @@ -2753,8 +2753,8 @@ onUnmounted(() => { align-items: center; justify-content: space-between; padding: 0 16px; - border-bottom: 1px solid #e3e7ee; - background: #fff; + border-bottom: 1px solid var(--min-border-light); + background: var(--min-bg-white); gap: 18px; .flow-heading { @@ -2767,9 +2767,9 @@ onUnmounted(() => { .flow-heading__name { overflow: hidden; max-width: 320px; - color: #1f2937; + color: var(--min-text-primary); font-size: 16px; - font-weight: 650; + font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } @@ -2780,10 +2780,10 @@ onUnmounted(() => { align-items: center; gap: 6px; padding: 0 8px; - border: 1px solid #dfe4ec; - border-radius: 5px; - background: #f8fafc; - color: #687386; + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-sm); + background: var(--min-bg-page); + color: var(--min-text-secondary); font-size: 11px; white-space: nowrap; } @@ -2838,7 +2838,7 @@ onUnmounted(() => { .publish-actions { padding-left: 10px; - border-left: 1px solid #e4e8ef; + border-left: 1px solid var(--min-border-light); } } } @@ -2857,8 +2857,8 @@ onUnmounted(() => { margin: 0; width: 272px; padding: 0; - border-right: 1px solid #e3e7ee; - background: #f8fafc; + border-right: 1px solid var(--min-border-light); + background: var(--min-bg-page); } .canvas-toolbar { @@ -2869,26 +2869,26 @@ onUnmounted(() => { z-index: 20; align-items: center; padding: 4px; - border: 1px solid #dfe4ec; - border-radius: 7px; - background: rgba(255, 255, 255, 0.96); - box-shadow: 0 6px 18px rgba(31, 41, 55, 0.1); + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-base); + background: var(--min-bg-white); + box-shadow: none; .el-button { width: 30px; height: 30px; padding: 0; border: 0; - border-radius: 5px; + border-radius: var(--min-radius-sm); background: transparent; - color: #566174; + color: var(--min-text-secondary); } .el-button + .el-button { margin-left: 2px; } .el-button:hover { - background: #f1f5f9; - color: #1f2937; + background: var(--min-bg-page); + color: var(--min-text-primary); } } @@ -2896,7 +2896,7 @@ onUnmounted(() => { width: 1px; height: 18px; margin: 0 4px; - background: #e1e6ed; + background: var(--min-border-light); } .flow__container { @@ -2923,7 +2923,7 @@ onUnmounted(() => { :deep(.vue-flow__edge-path), :deep(.vue-flow__connection-path) { - stroke: #ff6b35; + stroke: var(--min-primary); stroke-width: 2; } @@ -2936,14 +2936,14 @@ onUnmounted(() => { } :deep(.vue-flow__selection) { - border: 1px solid #2f80ed; - background: rgba(47, 128, 237, 0.1); - box-shadow: 0 0 0 1px rgba(47, 128, 237, 0.08); + border: 1px solid var(--min-primary); + background: var(--min-primary-soft); + box-shadow: none; } :deep(.vue-flow__nodesselection-rect) { - border: 1px dashed rgba(47, 128, 237, 0.72); - background: rgba(47, 128, 237, 0.04); + border: 1px dashed var(--min-primary); + background: var(--min-primary-soft); } :deep(.vue-flow__handle) { @@ -2960,16 +2960,16 @@ onUnmounted(() => { } :deep(.vue-flow__edge.selected .vue-flow__edge-path) { - stroke: #1677ff; - stroke-width: 4; - filter: drop-shadow(0 0 3px rgba(22, 119, 255, 0.45)); + stroke: var(--min-primary); + stroke-width: 3; + filter: none; } :deep(.vue-flow__controls) { overflow: hidden; - border: 1px solid #dfe4ec; - border-radius: 6px; - box-shadow: 0 6px 18px rgba(20, 33, 61, 0.12); + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-base); + box-shadow: none; } } } @@ -3011,7 +3011,7 @@ onUnmounted(() => { gap: 16px; min-height: 82px; padding: 14px 0; - border-bottom: 1px solid #ebeef5; + border-bottom: 1px solid var(--min-border-light); } .version-history__main { @@ -3029,7 +3029,7 @@ onUnmounted(() => { .version-history__meta, .version-history__note { margin-top: 6px; - color: #606266; + color: var(--min-text-secondary); font-size: 13px; line-height: 1.4; } diff --git a/src/views/flow/nodes/function/stopLoop.vue b/src/views/flow/nodes/function/stopLoop.vue index e2f57c9..a8cec80 100644 --- a/src/views/flow/nodes/function/stopLoop.vue +++ b/src/views/flow/nodes/function/stopLoop.vue @@ -47,12 +47,12 @@ const setNodeName = (name) => { .node__container { width: 300px; height: auto; - background: #fff; + background: var(--min-bg-white); padding: 12px; cursor: default; - border-radius: 12px; - border: 2px solid white; - box-shadow: 0 5px 15px 0#00000008; + border-radius: var(--min-radius-base); + border: 1px solid var(--min-border-light); + box-shadow: none; position: relative; .title__container { @@ -67,13 +67,13 @@ const setNodeName = (name) => { .text { font-size: 16px; - font-weight: bold; + font-weight: 600; margin-left: 12px; } } .subTitle { - color: #737a87; + color: var(--min-text-secondary); font-size: 12px; margin: 8px 0; } @@ -82,9 +82,9 @@ const setNodeName = (name) => { .input__container { width: 100%; - background-color: #fafbfc; + background-color: var(--min-bg-page); padding: 0 16px; - border-radius: 8px; + border-radius: var(--min-radius-base); box-sizing: border-box; .title { @@ -100,15 +100,15 @@ const setNodeName = (name) => { .tag { width: 3px; height: 16px; - background: #1664ff; + background: var(--min-primary); border-radius: 0 4px 4px 0; margin-right: 12px; } .text { font-size: 16px; - font-weight: 700; - color: #0c0d0e; + font-weight: 600; + color: var(--min-text-primary); } } @@ -196,7 +196,7 @@ const setNodeName = (name) => { margin-bottom: 12px; .paramsTitle { - color: #0c0d0e; + color: var(--min-text-primary); font-size: 14px; font-weight: 500; } diff --git a/src/views/flow/vue-flow/FlowNode.vue b/src/views/flow/vue-flow/FlowNode.vue index 772b803..27188b5 100644 --- a/src/views/flow/vue-flow/FlowNode.vue +++ b/src/views/flow/vue-flow/FlowNode.vue @@ -260,56 +260,41 @@ onMounted(() => bindComponent(componentRef.value)); \ No newline at end of file + diff --git a/src/views/inspection/cockpit/components/ManualTakeover/DirectionControl.vue b/src/views/inspection/cockpit/components/ManualTakeover/DirectionControl.vue index ffc6f0b..f3ba623 100644 --- a/src/views/inspection/cockpit/components/ManualTakeover/DirectionControl.vue +++ b/src/views/inspection/cockpit/components/ManualTakeover/DirectionControl.vue @@ -322,4 +322,58 @@ function onRelease() { } } } + +.panel { + .card { + border-bottom-color: var(--min-border-light); + + &__head h3 { + color: var(--min-text-secondary); + font-family: var(--min-font-family); + font-weight: 600; + letter-spacing: 0; + } + + :deep(.el-tag) { + border-color: var(--min-border-light); + background: var(--min-primary-soft); + color: var(--min-primary); + } + + .dpad { + &__btn, + &__core { + border-color: var(--min-border-light); + border-radius: var(--min-radius-base); + background: var(--min-bg-page); + color: var(--min-text-regular); + box-shadow: none; + } + + &__btn:hover, + &__btn:active { + border-color: var(--min-primary); + background: var(--min-primary-soft); + color: var(--min-primary); + box-shadow: none; + transform: none; + } + + &__core span { background: var(--min-primary); } + } + + .param { + &__head { color: var(--min-text-secondary); } + &__val { color: var(--min-primary); } + + :deep(.el-slider__runway) { background: var(--min-border-light); } + :deep(.el-slider__bar) { background: var(--min-primary); } + :deep(.el-slider__button) { + border-color: var(--min-primary); + background: var(--min-bg-white); + box-shadow: none; + } + } + } +} diff --git a/src/views/inspection/cockpit/components/ManualTakeover/VoiceConversation.vue b/src/views/inspection/cockpit/components/ManualTakeover/VoiceConversation.vue index 280c094..9dad101 100644 --- a/src/views/inspection/cockpit/components/ManualTakeover/VoiceConversation.vue +++ b/src/views/inspection/cockpit/components/ManualTakeover/VoiceConversation.vue @@ -1083,6 +1083,148 @@ $panel-border: rgb(112 192 255 / 24%); audio { display: none; } } +.voice-conversation { + color: var(--min-text-primary); + background: var(--min-bg-white); + + &::before, + &::after, + .tech-grid, + .orbit-glow { + display: none; + } + + .corner-title { + color: var(--min-text-primary); + font-size: 16px; + font-weight: 600; + letter-spacing: 0; + text-shadow: none; + } + + .hero-title { + h1 { + color: var(--min-text-primary); + font-size: 20px; + font-weight: 600; + letter-spacing: 0; + text-shadow: none; + } + + p { + color: var(--min-text-secondary); + letter-spacing: 0; + } + } + + .microphone-orbit { + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-base); + background: var(--min-primary-soft); + box-shadow: none; + animation: none; + + &::before { + border-color: var(--min-primary); + border-radius: var(--min-radius-sm); + box-shadow: none; + } + } + + .microphone-core { + border-radius: var(--min-radius-sm); + background: var(--min-primary); + box-shadow: none; + } + + .sound-wave i { + border-radius: var(--min-radius-sm); + background: var(--min-primary); + box-shadow: none; + } + + .floating-status { + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-sm); + color: var(--min-text-regular); + background: var(--min-bg-page); + box-shadow: none; + } + + .robot-volume { + color: var(--min-text-secondary); + + &__value { color: var(--min-text-primary); } + + :deep(.el-slider__runway) { background: var(--min-border-light); } + :deep(.el-slider__bar) { background: var(--min-primary); } + :deep(.el-slider__button) { + border-color: var(--min-primary); + background: var(--min-bg-white); + box-shadow: none; + } + } + + :deep(.call-button) { + border: 1px solid var(--min-primary); + border-radius: var(--min-radius-base); + color: #fff; + background: var(--min-primary); + box-shadow: none; + font-weight: 600; + letter-spacing: 0; + + &:hover, + &:focus { + border-color: var(--min-primary-hover); + background: var(--min-primary-hover); + transform: none; + } + + &.call-button--danger { + border-color: var(--el-color-danger); + background: var(--el-color-danger); + } + } + + :deep(.mute-button) { + border-color: var(--min-border-light); + color: var(--min-text-regular); + background: var(--min-bg-white); + + &:hover { + border-color: var(--min-primary); + color: var(--min-primary); + background: var(--min-primary-soft); + } + } + + .status-card { + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-base); + background: var(--min-bg-page); + box-shadow: none; + backdrop-filter: none; + + .status-copy { + p, + p strong { color: var(--min-text-primary); } + span { color: var(--min-text-secondary); } + } + } + + .feature-tags { + border-top-color: var(--min-border-light); + + span { + border: 1px solid var(--min-border-light); + border-radius: var(--min-radius-sm); + color: var(--min-text-secondary); + background: var(--min-bg-white); + } + } +} + @keyframes orbit-breathe { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.035); filter: brightness(1.16); } diff --git a/src/views/inspection/cockpit/components/MapOverview.vue b/src/views/inspection/cockpit/components/MapOverview.vue index 2114a44..5ff440e 100644 --- a/src/views/inspection/cockpit/components/MapOverview.vue +++ b/src/views/inspection/cockpit/components/MapOverview.vue @@ -5,7 +5,7 @@
机器人状态
-
+
{{ item.robotName }}
{{ agvRuntimeStatusLabel(item.status) }}
@@ -44,18 +44,18 @@
- + 实时地图 — 工厂园区
- +
- +
- +
@@ -169,7 +169,7 @@ onUnmounted(() => { }) - \ No newline at end of file + diff --git a/src/views/inspection/cockpit/index.vue b/src/views/inspection/cockpit/index.vue index 916636b..7901b90 100644 --- a/src/views/inspection/cockpit/index.vue +++ b/src/views/inspection/cockpit/index.vue @@ -1,5 +1,5 @@