-
{{ 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 @@
-
-
{{ 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 @@
@@ -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 @@
-
机器人状态
-
@@ -44,18 +44,18 @@
{{ item.robotName }}
{{ agvRuntimeStatusLabel(item.status) }}
-
-
-
-
+
-
-
-
![]()
-
+
@@ -39,6 +36,7 @@ import useUserStore from '@/store/modules/user'
import useLockStore from '@/store/modules/lock'
import { unlockScreen } from '@/api/login'
import defAva from '@/assets/images/profile.jpg'
+import { Lock, Right } from '@element-plus/icons-vue'
const router = useRouter()
const userStore = useUserStore()
@@ -51,11 +49,8 @@ const isShaking = ref(false)
const currentTime = ref('')
const currentDate = ref('')
const passwordInput = ref(null)
-const particleCanvas = ref(null)
let timer = null
-let animationId = null
-let particles = []
const onAvatarError = (e) => {
e.target.src = defAva
@@ -108,98 +103,37 @@ const goLogin = () => {
})
}
-const initParticles = () => {
- const canvas = particleCanvas.value
- if (!canvas) return
- const ctx = canvas.getContext('2d')
- const resize = () => {
- canvas.width = window.innerWidth
- canvas.height = window.innerHeight
- }
- resize()
- window.addEventListener('resize', resize)
-
- particles = Array.from({ length: 80 }, () => ({
- x: Math.random() * canvas.width,
- y: Math.random() * canvas.height,
- r: Math.random() * 2 + 1,
- dx: (Math.random() - 0.5) * 0.6,
- dy: (Math.random() - 0.5) * 0.6,
- alpha: Math.random() * 0.5 + 0.2
- }))
-
- const draw = () => {
- ctx.clearRect(0, 0, canvas.width, canvas.height)
- particles.forEach(p => {
- ctx.beginPath()
- ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2)
- ctx.fillStyle = `rgba(255,255,255,${p.alpha})`
- ctx.fill()
- p.x += p.dx
- p.y += p.dy
- if (p.x < 0 || p.x > canvas.width) p.dx *= -1
- if (p.y < 0 || p.y > canvas.height) p.dy *= -1
- })
- for (let i = 0; i < particles.length; i++) {
- for (let j = i + 1; j < particles.length; j++) {
- const a = particles[i], b = particles[j]
- const dist = Math.hypot(a.x - b.x, a.y - b.y)
- if (dist < 120) {
- ctx.beginPath()
- ctx.moveTo(a.x, a.y)
- ctx.lineTo(b.x, b.y)
- ctx.strokeStyle = `rgba(255,255,255,${0.15 * (1 - dist / 120)})`
- ctx.lineWidth = 0.5
- ctx.stroke()
- }
- }
- }
- animationId = requestAnimationFrame(draw)
- }
- draw()
-}
-
onMounted(() => {
startClock()
- initParticles()
nextTick(() => passwordInput.value?.focus())
})
onBeforeUnmount(() => {
clearInterval(timer)
- cancelAnimationFrame(animationId)
})
diff --git a/src/views/login.vue b/src/views/login.vue
index 36116e2..474cd1d 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -167,33 +167,40 @@ getCookie()
diff --git a/src/views/register.vue b/src/views/register.vue
index 254cc8e..bd39f76 100644
--- a/src/views/register.vue
+++ b/src/views/register.vue
@@ -156,24 +156,40 @@ getCode()
{{ currentTime }}
{{ currentDate }}
@@ -11,7 +8,7 @@
{{ userStore.nickName }}
系统已锁定，请输入密码解锁
@@ -19,7 +16,7 @@