zhanghao/CMVR-BID
1
0
Fork 0
forked from SmartBench/CMVR-IOT-UI
Code Pull Requests Activity

Compare commits

merge into: zhanghao:dev
Branches Tags
zhanghao:dev
zhanghao:mimicry
zhanghao:cyberpunk
zhanghao:minimalism
zhanghao:retro
SmartBench:dev
SmartBench:feature/unified-resource-center
SmartBench:lxl-dev
SmartBench:main
zhanghao:v1.0.0
SmartBench:v1.0.0
...
pull from: zhanghao:retro
Branches Tags
zhanghao:mimicry
zhanghao:cyberpunk
zhanghao:minimalism
zhanghao:retro
zhanghao:dev
SmartBench:dev
SmartBench:feature/unified-resource-center
SmartBench:lxl-dev
SmartBench:main
zhanghao:v1.0.0
SmartBench:v1.0.0

3 Commits
dev ... retro

Author SHA1 Message Date
zhanghao
a51190adf7 feat: 添加复古主题下的导航栏、侧边栏和标签视图信息架构 2026-08-28 09:37:53 +08:00
zhanghao
a49404ec5c feat: 隐藏多个表格列以简化界面 2026-08-28 09:13:33 +08:00
zhanghao
a59028227f feat: update styles for a retro theme across the application 
- Changed edge colors in vue-flow adapter for a cohesive retro look.
- Updated feature colors and backgrounds in index.vue to match the new theme.
- Enhanced login page styles with retro textures and colors.
- Introduced a new retro.css file to define a comprehensive color palette and styles.
- Adjusted various components to utilize the new retro styles, including buttons, inputs, and cards.
- Improved responsiveness and accessibility in the login form and other UI elements.
 2026-08-28 08:47:39 +08:00
33 changed files with 1714 additions and 357 deletions
Show Stats Expand all files Collapse all files

15
index.html
View File

@ -7,6 +7,9 @@
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
<title>%VITE_APP_TITLE%</title> <title>%VITE_APP_TITLE%</title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style> <style>
@ -44,7 +47,7 @@
margin: -75px 0 0 -75px; margin: -75px 0 0 -75px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #d8b36a;
-webkit-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite;
@ -62,7 +65,7 @@
bottom: 5px; bottom: 5px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #008080;
-webkit-animation: spin 3s linear infinite; -webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite; -moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite; -o-animation: spin 3s linear infinite;
@ -79,7 +82,7 @@
bottom: 15px; bottom: 15px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #d8b36a;
-moz-animation: spin 1.5s linear infinite; -moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite; -o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite; -ms-animation: spin 1.5s linear infinite;
@ -122,7 +125,7 @@
top: 0; top: 0;
width: 51%; width: 51%;
height: 100%; height: 100%;
background: #7171C6; background: #3b342a;
z-index: 1000; z-index: 1000;
-webkit-transform: translateX(0); -webkit-transform: translateX(0);
-ms-transform: translateX(0); -ms-transform: translateX(0);
@ -178,8 +181,8 @@
} }
#loader-wrapper .load_title { #loader-wrapper .load_title {
font-family: 'Open Sans'; font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
color: #FFF; color: #fff4dc;
font-size: 19px; font-size: 19px;
width: 100%; width: 100%;
text-align: center; text-align: center;

28
src/assets/styles/variables.module.scss
View File

@ -9,30 +9,30 @@ $yellow: #fec171;
$panGreen: #30b08f; $panGreen: #30b08f;
// 默认主题变量 // 默认主题变量
$menuText: #bfcbd9; $menuText: #e7dac0;
$menuActiveText: #409eff; $menuActiveText: #f3cf7a;
$menuBg: #304156; $menuBg: #3b342a;
$menuHover: #263445; $menuHover: #554a3a;
// 浅色主题theme-light // 浅色主题theme-light
$menuLightBg: #ffffff; $menuLightBg: #fffaf0;
$menuLightHover: #f0f1f5; $menuLightHover: #e8dcc0;
$menuLightText: #303133; $menuLightText: #504737;
$menuLightActiveText: #409eff; $menuLightActiveText: #008080;
// 基础变量 // 基础变量
$base-sidebar-width: 200px; $base-sidebar-width: 200px;
$sideBarWidth: 200px; $sideBarWidth: 200px;
// 菜单暗色变量 // 菜单暗色变量
$base-menu-color: #bfcbd9; $base-menu-color: #e7dac0;
$base-menu-color-active: #f4f4f5; $base-menu-color-active: #f3cf7a;
$base-menu-background: #304156; $base-menu-background: #3b342a;
$base-sub-menu-background: #1f2d3d; $base-sub-menu-background: #2c271f;
$base-sub-menu-hover: #001528; $base-sub-menu-hover: #554a3a;
// 组件变量 // 组件变量
$--color-primary: #409eff; $--color-primary: #008080;
$--color-success: #67c23a; $--color-success: #67c23a;
$--color-warning: #e6a23c; $--color-warning: #e6a23c;
$--color-danger: #f56c6c; $--color-danger: #f56c6c;

11
src/layout/components/Navbar.vue
View File

@ -1,6 +1,11 @@
<template> <template>
<div class="navbar" :class="'nav' + settingsStore.navType"> <div class="navbar" :class="'nav' + settingsStore.navType">
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<div class="navbar-context">
<span class="navbar-context__eyebrow">FIELD OPERATIONS / CMVR</span>
<strong>{{ route.meta?.title || '工作台' }}</strong>
<code>{{ route.path }}</code>
</div>
<breadcrumb v-if="settingsStore.navType == 1" id="breadcrumb-container" class="breadcrumb-container" /> <breadcrumb v-if="settingsStore.navType == 1" id="breadcrumb-container" class="breadcrumb-container" />
<top-nav v-if="settingsStore.navType == 2" id="topmenu-container" class="topmenu-container" /> <top-nav v-if="settingsStore.navType == 2" id="topmenu-container" class="topmenu-container" />
<template v-if="settingsStore.navType == 3"> <template v-if="settingsStore.navType == 3">
@ -8,6 +13,12 @@
<top-bar id="topbar-container" class="topbar-container" /> <top-bar id="topbar-container" class="topbar-container" />
</template> </template>
<div class="navbar-console-status" aria-label="系统状态">
<span class="console-led"></span>
<span>LOCAL CONSOLE</span>
<b>READY</b>
</div>
<div class="right-menu"> <div class="right-menu">
<template v-if="appStore.device !== 'mobile'"> <template v-if="appStore.device !== 'mobile'">
<header-search id="header-search" class="right-menu-item" /> <header-search id="header-search" class="right-menu-item" />

2
src/layout/components/Settings/index.vue
View File

@ -139,7 +139,7 @@ const theme = ref(settingsStore.theme)
const sideTheme = ref(settingsStore.sideTheme) const sideTheme = ref(settingsStore.sideTheme)
const tagsViewPersist = ref(settingsStore.tagsViewPersist) const tagsViewPersist = ref(settingsStore.tagsViewPersist)
const storeSettings = computed(() => settingsStore) const storeSettings = computed(() => settingsStore)
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]) const predefineColors = ref(["#008080", "#8B4513", "#65743F", "#B07A2A", "#9A4035", "#406E72", "#746B5D", "#4B3D30"])
/** 是否需要dynamicTitle */ /** 是否需要dynamicTitle */
function dynamicTitleChange() { function dynamicTitleChange() {

4
src/layout/components/Sidebar/index.vue
View File

@ -1,6 +1,10 @@
<template> <template>
<div :class="['sidebar-theme-wrapper', {'has-logo':showLogo}, sideTheme]" class="sidebar-container"> <div :class="['sidebar-theme-wrapper', {'has-logo':showLogo}, sideTheme]" class="sidebar-container">
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<div class="sidebar-plate" aria-hidden="true">
<span>ARCHIVE INDEX</span>
<strong>04 / 12</strong>
</div>
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"

1
src/layout/components/TagsView/index.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div id="tags-view-container" class="tags-view-container"> <div id="tags-view-container" class="tags-view-container">
<div class="tags-view-label" aria-hidden="true">OPEN DOSSIERS</div>
<scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll"> <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
<router-link <router-link
v-for="tag in visitedViews" v-for="tag in visitedViews"

6
src/layout/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme, '--current-color-light': theme + '1a', '--current-color-dark-bg': theme + '33' }"> <div :class="classObj" class="app-wrapper retro-shell" :style="{ '--current-color': theme, '--current-color-light': theme + '1a', '--current-color-dark-bg': theme + '33' }">
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar v-if="!sidebar.hide" class="sidebar-container" /> <sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container"> <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
@ -7,6 +7,10 @@
<navbar @setLayout="setLayout" /> <navbar @setLayout="setLayout" />
<tags-view v-if="needTagsView" /> <tags-view v-if="needTagsView" />
</div> </div>
<div class="shell-watermark" aria-hidden="true">
<span>CMVR / CONTROL REGISTER</span>
<span>ARCHIVE 04</span>
</div>
<app-main /> <app-main />
<settings ref="settingRef" /> <settings ref="settingRef" />
</div> </div>

1
src/main.js
View File

@ -8,6 +8,7 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
import locale from 'element-plus/es/locale/lang/zh-cn' import locale from 'element-plus/es/locale/lang/zh-cn'
import '@/assets/styles/index.scss' // global css import '@/assets/styles/index.scss' // global css
import '@/styles/retro.css' // retro theme overrides must load after Element Plus and the base styles
import App from './App' import App from './App'
import store from './store' import store from './store'

2
src/store/modules/settings.js
View File

@ -15,7 +15,7 @@ const useSettingsStore = defineStore(
{ {
state: () => ({ state: () => ({
title: '', title: '',
theme: storageSetting.theme || '#409EFF', theme: storageSetting.theme || '#008080',
sideTheme: storageSetting.sideTheme || sideTheme, sideTheme: storageSetting.sideTheme || sideTheme,
showSettings: showSettings, showSettings: showSettings,
navType: storageSetting.navType === undefined ? navType : storageSetting.navType, navType: storageSetting.navType === undefined ? navType : storageSetting.navType,

1184
src/styles/retro.css Normal file
View File

File diff suppressed because it is too large Load Diff

14
src/views/device/register/index.vue
View File

@ -39,28 +39,28 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="类型" width="130"> <el-table-column label="类型">
<template #default="{ row }">{{ kindLabel(row.deviceKind, row.typeName) }}</template> <template #default="{ row }">{{ kindLabel(row.deviceKind, row.typeName) }}</template>
</el-table-column> </el-table-column>
<el-table-column label="运行状态" width="120" align="center"> <el-table-column label="运行状态" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="row.onlineStatus === '1' ? 'success' : 'info'" effect="light"> <el-tag :type="row.onlineStatus === '1' ? 'success' : 'info'" effect="light">
{{ row.onlineStatus === '1' ? '在线' : '离线' }} {{ row.onlineStatus === '1' ? '在线' : '离线' }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="健康状态" width="120" align="center"> <el-table-column label="健康状态" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="isFault(row) ? 'danger' : 'success'" effect="plain"> <el-tag :type="isFault(row) ? 'danger' : 'success'" effect="plain">
{{ isFault(row) ? '故障' : '正常' }} {{ isFault(row) ? '故障' : '正常' }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="errorMessage" label="状态信息" min-width="180" show-overflow-tooltip> <!-- <el-table-column prop="errorMessage" label="状态信息" min-width="180" show-overflow-tooltip>
<template #default="{ row }">{{ row.errorMessage || '运行正常' }}</template> <template #default="{ row }">{{ row.errorMessage || '运行正常' }}</template>
</el-table-column> </el-table-column> -->
<el-table-column prop="lastSeenTime" label="最后上报" width="180" /> <!-- <el-table-column prop="lastSeenTime" label="最后上报" width="180" /> -->
<el-table-column label="操作" width="100" fixed="right" align="center"> <el-table-column label="操作" fixed="right" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-button v-if="controlRoute(row.deviceKind)" link type="primary" <el-button v-if="controlRoute(row.deviceKind)" link type="primary"
:disabled="row.onlineStatus !== '1'" @click="openControl(row)">示教</el-button> :disabled="row.onlineStatus !== '1'" @click="openControl(row)">示教</el-button>

6
src/views/device/terminal/index.vue
View File

@ -89,7 +89,7 @@
<el-table-column label="终端名称" align="center" prop="name" show-overflow-tooltip/> <el-table-column label="终端名称" align="center" prop="name" show-overflow-tooltip/>
<el-table-column label="主机" align="center" prop="host" show-overflow-tooltip/> <el-table-column label="主机" align="center" prop="host" show-overflow-tooltip/>
<el-table-column label="端口号" align="center" prop="port" show-overflow-tooltip/> <el-table-column label="端口号" align="center" prop="port" show-overflow-tooltip/>
<el-table-column label="说明" align="center" prop="description" show-overflow-tooltip/> <!-- <el-table-column label="说明" align="center" prop="description" show-overflow-tooltip/> -->
<el-table-column label="备注" align="center" prop="remake" show-overflow-tooltip/> <el-table-column label="备注" align="center" prop="remake" show-overflow-tooltip/>
<el-table-column label="状态" align="center" prop="status"> <el-table-column label="状态" align="center" prop="status">
<template #default="scope"> <template #default="scope">
@ -138,9 +138,9 @@
<el-form-item label="端口号" prop="port"> <el-form-item label="端口号" prop="port">
<el-input v-model="form.port" placeholder="请输入端口号"/> <el-input v-model="form.port" placeholder="请输入端口号"/>
</el-form-item> </el-form-item>
<el-form-item label="说明" prop="description"> <!-- <el-form-item label="说明" prop="description">
<el-input v-model="form.description" placeholder="请输入说明"/> <el-input v-model="form.description" placeholder="请输入说明"/>
</el-form-item> </el-form-item> -->
<el-form-item label="备注" prop="remake"> <el-form-item label="备注" prop="remake">
<el-input :rows="2" <el-input :rows="2"
type="textarea" v-model="form.remake" placeholder="请输入备注"/> type="textarea" v-model="form.remake" placeholder="请输入备注"/>

56
src/views/flow/components/Aside.vue
View File

@ -96,13 +96,15 @@ const handleDragCustom = (event, node) => {
height: 100%; height: 100%;
min-height: 0; min-height: 0;
flex-direction: column; flex-direction: column;
color: #1f2937; color: var(--retro-text-primary);
background: #f1e7d0;
} }
.library-header { .library-header {
padding: 16px 14px 14px; padding: 16px 14px 14px;
border-bottom: 1px solid #e4e8ef; border-bottom: 2px solid var(--retro-border-dark);
background: #fff; background-color: var(--retro-bg-white);
background-image: var(--retro-paper-texture);
} }
.library-heading { .library-heading {
@ -113,13 +115,15 @@ const handleDragCustom = (event, node) => {
} }
.library-title { .library-title {
color: var(--retro-text-primary);
font-family: var(--retro-font-display);
font-size: 15px; font-size: 15px;
font-weight: 650; font-weight: 650;
} }
.library-subtitle { .library-subtitle {
margin-top: 2px; margin-top: 2px;
color: #8a94a6; color: var(--retro-text-secondary);
font-size: 12px; font-size: 12px;
} }
@ -138,16 +142,16 @@ const handleDragCustom = (event, node) => {
.el-collapse-item__header { .el-collapse-item__header {
height: 46px; height: 46px;
padding: 0 14px; padding: 0 14px;
border-bottom-color: #e8ebf0; border-bottom: 1px solid var(--retro-border-dark);
background: #f8fafc; background: #efe4ca;
color: #344054; color: var(--retro-text-primary);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
} }
.el-collapse-item__wrap { .el-collapse-item__wrap {
border-bottom-color: #e8ebf0; border-bottom: 1px solid var(--retro-border-dark);
background: #f8fafc; background: #f7eedb;
} }
.el-collapse-item__content { .el-collapse-item__content {
@ -170,10 +174,10 @@ const handleDragCustom = (event, node) => {
height: 20px; height: 20px;
padding: 0 6px; padding: 0 6px;
place-items: center; place-items: center;
border: 1px solid #dfe4ec; border: 1px solid var(--retro-border-dark);
border-radius: 4px; border-radius: 0;
background: #fff; background: var(--retro-bg-white);
color: #7a8597; color: var(--retro-text-regular);
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
line-height: 18px; line-height: 18px;
@ -192,16 +196,18 @@ const handleDragCustom = (event, node) => {
gap: 9px; gap: 9px;
align-items: center; align-items: center;
padding: 9px 8px 9px 10px; padding: 9px 8px 9px 10px;
border: 1px solid #e1e6ed; border: 2px solid var(--retro-border-dark);
border-radius: 7px; border-radius: 0;
background: #fff; background-color: var(--retro-bg-white);
background-image: var(--retro-paper-texture);
box-shadow: 2px 2px 0 rgba(33, 27, 18, 0.22);
cursor: grab; cursor: grab;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
&:hover { &:hover {
border-color: #f2a071; border-color: var(--retro-primary);
box-shadow: 0 5px 14px rgba(31, 41, 55, 0.08); box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
transform: translateX(2px); transform: translate(-1px, -1px);
} }
&:active { cursor: grabbing; } &:active { cursor: grabbing; }
@ -212,8 +218,9 @@ const handleDragCustom = (event, node) => {
width: 34px; width: 34px;
height: 34px; height: 34px;
place-items: center; place-items: center;
border-radius: 6px; border: 1px solid var(--retro-border-dark);
background: #f1f5f9; border-radius: 0;
background: var(--retro-bg-muted);
img { img {
width: 21px; width: 21px;
@ -226,7 +233,8 @@ const handleDragCustom = (event, node) => {
.node-name { .node-name {
overflow: hidden; overflow: hidden;
color: #202938; color: var(--retro-text-primary);
font-family: var(--retro-font-display);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -237,7 +245,7 @@ const handleDragCustom = (event, node) => {
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
margin-top: 4px; margin-top: 4px;
color: #7a8597; color: var(--retro-text-secondary);
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -245,7 +253,7 @@ const handleDragCustom = (event, node) => {
} }
.drag-handle { .drag-handle {
color: #a8b0bf; color: var(--retro-border-dark);
font-size: 16px; font-size: 16px;
} }
</style> </style>

45
src/views/flow/components/NodeState.vue
View File

@ -94,10 +94,10 @@ defineExpose({ closePopover });
gap: 8px; gap: 8px;
margin: -4px -4px 10px; margin: -4px -4px 10px;
padding: 5px 7px 5px 9px; padding: 5px 7px 5px 9px;
border: 1px solid #dbe3ee; border: 1px solid var(--retro-border-dark);
border-radius: 6px; border-radius: 0;
background: #f7f9fc; background: var(--retro-bg-muted);
color: #526071; color: var(--retro-text-regular);
font-size: 12px; font-size: 12px;
} }
@ -125,9 +125,9 @@ defineExpose({ closePopover });
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 0 7px; padding: 0 7px;
border: 0; border: 1px solid currentColor;
border-radius: 4px; border-radius: 0;
background: rgba(255, 255, 255, 0.72); background: rgba(255, 250, 240, 0.76);
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
font-size: 11px; font-size: 11px;
@ -135,28 +135,28 @@ defineExpose({ closePopover });
} }
.node-state--success { .node-state--success {
border-color: #c8ead5; border-color: #65743f;
background: #effaf3; background: #e2e3c7;
color: #1e7d49; color: #536431;
} }
.node-state--failed, .node-state--failed,
.node-state--stopped { .node-state--stopped {
border-color: #f1cecb; border-color: #9a4035;
background: #fff3f2; background: #efd8cf;
color: #c33b32; color: #8f332c;
} }
.node-state--paused { .node-state--paused {
border-color: #d9dee7; border-color: #746b5d;
background: #f3f5f8; background: #e7dcc5;
color: #657084; color: #61594d;
} }
.node-state--running { .node-state--running {
border-color: #cbdcf8; border-color: #406e72;
background: #f0f6ff; background: #d9e5e2;
color: #2f6fca; color: #315f63;
.node-state__icon { animation: rotate-animation 1.2s linear infinite; } .node-state__icon { animation: rotate-animation 1.2s linear infinite; }
} }
@ -176,11 +176,12 @@ defineExpose({ closePopover });
padding: 14px 16px; padding: 14px 16px;
} }
.result-section--output { border-top: 1px solid #e8ebf0; } .result-section--output { border-top: 1px solid var(--retro-border-dark); }
.result-section__title { .result-section__title {
margin-bottom: 8px; margin-bottom: 8px;
color: #344054; color: var(--retro-text-primary);
font-family: var(--retro-font-display);
font-size: 13px; font-size: 13px;
font-weight: 650; font-weight: 650;
} }
@ -188,7 +189,7 @@ defineExpose({ closePopover });
.result-section__content { .result-section__content {
max-height: 280px; max-height: 280px;
overflow: auto; overflow: auto;
color: #475467; color: var(--retro-text-regular);
font-size: 12px; font-size: 12px;
} }
} }

45
src/views/flow/components/NodeTitle.vue
View File

@ -218,9 +218,10 @@ onMounted(() => {
height: 36px; height: 36px;
flex: 0 0 36px; flex: 0 0 36px;
place-items: center; place-items: center;
border-radius: 7px; border: 1px solid var(--retro-border-dark);
background: #f1f5f9; border-radius: 0;
color: var(--node-accent, #475569); background: var(--retro-bg-muted);
color: var(--node-accent, #406e72);
img { img {
width: 22px; width: 22px;
@ -240,7 +241,8 @@ onMounted(() => {
.node-title__name { .node-title__name {
overflow: hidden; overflow: hidden;
color: #1f2937; color: var(--retro-text-primary);
font-family: var(--retro-font-display);
font-size: 15px; font-size: 15px;
font-weight: 650; font-weight: 650;
line-height: 22px; line-height: 22px;
@ -251,10 +253,10 @@ onMounted(() => {
.node-title__type { .node-title__type {
flex: 0 0 auto; flex: 0 0 auto;
padding: 1px 6px; padding: 1px 6px;
border: 1px solid #dfe4ec; border: 1px solid var(--retro-border-dark);
border-radius: 4px; border-radius: 0;
background: #f8fafc; background: #f0e6cf;
color: #697386; color: var(--retro-text-regular);
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
} }
@ -287,31 +289,32 @@ onMounted(() => {
padding: 0; padding: 0;
place-items: center; place-items: center;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 5px; border-radius: 0;
background: transparent; background: transparent;
color: #7b8494; color: var(--retro-text-secondary);
cursor: pointer; cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
&:hover { &:hover {
border-color: #dfe4ec; border-color: var(--retro-border-dark);
background: #f8fafc; background: var(--retro-bg-muted);
color: #344054; color: var(--retro-text-primary);
box-shadow: 2px 2px 0 rgba(33, 27, 18, 0.24);
} }
&.is-run:hover { &.is-run:hover {
border-color: #b7dfc7; border-color: #65743f;
background: #effaf3; background: #e2e3c7;
color: #168447; color: #536431;
} }
&.is-danger:hover { &.is-danger:hover {
border-color: #f2c5c2; border-color: #9a4035;
background: #fff3f2; background: #efd8cf;
color: #d93025; color: #8f332c;
} }
&.is-confirm { color: #168447; } &.is-confirm { color: #65743f; }
} }
.node-title__editor { .node-title__editor {
@ -325,7 +328,7 @@ onMounted(() => {
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
margin-top: 8px; margin-top: 8px;
color: #7a8494; color: var(--retro-text-secondary);
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;

130
src/views/flow/index.vue
View File

@ -173,7 +173,7 @@
<template #edge-flow-edge="edgeProps"> <template #edge-flow-edge="edgeProps">
<FlowEdge v-bind="edgeProps" /> <FlowEdge v-bind="edgeProps" />
</template> </template>
<Background color="#d9dee8" :gap="24" :size="1" /> <Background color="#b8a98b" :gap="24" :size="1.2" />
<Controls position="bottom-right" /> <Controls position="bottom-right" />
</VueFlow> </VueFlow>
</el-main> </el-main>
@ -528,11 +528,11 @@ const defaultEdgeOptions = {
interactionWidth: 32, interactionWidth: 32,
markerEnd: { markerEnd: {
type: MarkerType.ArrowClosed, type: MarkerType.ArrowClosed,
color: "#ff6b35", color: "#8b4513",
width: 20, width: 20,
height: 20, height: 20,
}, },
style: { stroke: "#ff6b35", strokeWidth: 2 }, style: { stroke: "#8b4513", strokeWidth: 2 },
}; };
/** /**
@ -2723,10 +2723,10 @@ onUnmounted(() => {
gap: 12px; gap: 12px;
margin-bottom: 16px; margin-bottom: 16px;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid #dfe6ef; border: 2px solid var(--retro-border-dark);
border-radius: 6px; border-radius: 0;
background: #f7f9fc; background: var(--retro-bg-muted);
color: #65758b; color: var(--retro-text-regular);
font-size: 13px; font-size: 13px;
} }
@ -2753,8 +2753,10 @@ onUnmounted(() => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 16px; padding: 0 16px;
border-bottom: 1px solid #e3e7ee; border-bottom: 3px solid var(--retro-border-strong);
background: #fff; background-color: var(--retro-bg-white);
background-image: var(--retro-paper-texture);
box-shadow: 0 3px 0 rgba(33, 27, 18, 0.22);
gap: 18px; gap: 18px;
.flow-heading { .flow-heading {
@ -2767,7 +2769,8 @@ onUnmounted(() => {
.flow-heading__name { .flow-heading__name {
overflow: hidden; overflow: hidden;
max-width: 320px; max-width: 320px;
color: #1f2937; color: var(--retro-text-primary);
font-family: var(--retro-font-display);
font-size: 16px; font-size: 16px;
font-weight: 650; font-weight: 650;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -2780,10 +2783,10 @@ onUnmounted(() => {
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 0 8px; padding: 0 8px;
border: 1px solid #dfe4ec; border: 1px solid var(--retro-border-dark);
border-radius: 5px; border-radius: 0;
background: #f8fafc; background: #efe4ca;
color: #687386; color: var(--retro-text-regular);
font-size: 11px; font-size: 11px;
white-space: nowrap; white-space: nowrap;
} }
@ -2791,35 +2794,35 @@ onUnmounted(() => {
.flow-status__dot { .flow-status__dot {
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 50%; border-radius: 0;
background: currentColor; background: currentColor;
} }
.flow-status--release, .flow-status--release,
.flow-status--testRunFinish { .flow-status--testRunFinish {
border-color: #c8ead5; border-color: #65743f;
background: #effaf3; background: #e2e3c7;
color: #1e7d49; color: #536431;
} }
.flow-status--testRunning, .flow-status--testRunning,
.flow-status--updateData { .flow-status--updateData {
border-color: #cbdcf8; border-color: #406e72;
background: #f0f6ff; background: #d9e5e2;
color: #2f6fca; color: #315f63;
} }
.flow-status--testRunError, .flow-status--testRunError,
.flow-status--stop { .flow-status--stop {
border-color: #f1cecb; border-color: #9a4035;
background: #fff3f2; background: #efd8cf;
color: #c33b32; color: #8f332c;
} }
.flow-status--pause { .flow-status--pause {
border-color: #ead9b8; border-color: #a06a1e;
background: #fff9eb; background: #f1dec0;
color: #9a6700; color: #82551a;
} }
.btn__container { .btn__container {
@ -2838,7 +2841,7 @@ onUnmounted(() => {
.publish-actions { .publish-actions {
padding-left: 10px; padding-left: 10px;
border-left: 1px solid #e4e8ef; border-left: 2px solid var(--retro-border-dark);
} }
} }
} }
@ -2851,14 +2854,16 @@ onUnmounted(() => {
padding: 0; padding: 0;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: var(--retro-bg-page);
} }
.el-aside { .el-aside {
margin: 0; margin: 0;
width: 272px; width: 272px;
padding: 0; padding: 0;
border-right: 1px solid #e3e7ee; border-right: 3px solid var(--retro-border-strong);
background: #f8fafc; background: #f1e7d0;
box-shadow: 3px 0 0 rgba(33, 27, 18, 0.18);
} }
.canvas-toolbar { .canvas-toolbar {
@ -2869,26 +2874,31 @@ onUnmounted(() => {
z-index: 20; z-index: 20;
align-items: center; align-items: center;
padding: 4px; padding: 4px;
border: 1px solid #dfe4ec; border: 2px solid var(--retro-border-strong);
border-radius: 7px; border-radius: 0;
background: rgba(255, 255, 255, 0.96); background-color: rgba(255, 250, 240, 0.97);
box-shadow: 0 6px 18px rgba(31, 41, 55, 0.1); background-image: var(--retro-paper-texture);
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
.el-button { .el-button {
width: 30px; width: 30px;
height: 30px; height: 30px;
padding: 0; padding: 0;
border: 0; border: 1px solid transparent;
border-radius: 5px; border-radius: 0;
background: transparent; background: transparent;
color: #566174; color: var(--retro-text-regular);
box-shadow: none;
} }
.el-button + .el-button { margin-left: 2px; } .el-button + .el-button { margin-left: 2px; }
.el-button:hover { .el-button:hover {
background: #f1f5f9; border-color: var(--retro-border-dark);
color: #1f2937; background: var(--retro-bg-muted);
color: var(--retro-text-primary);
transform: none;
box-shadow: 2px 2px 0 rgba(33, 27, 18, 0.24);
} }
} }
@ -2896,13 +2906,15 @@ onUnmounted(() => {
width: 1px; width: 1px;
height: 18px; height: 18px;
margin: 0 4px; margin: 0 4px;
background: #e1e6ed; background: var(--retro-border-dark);
} }
.flow__container { .flow__container {
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
background-color: #faf3df;
background-image: var(--retro-paper-texture);
:deep(.vue-flow__node) { :deep(.vue-flow__node) {
border: 0; border: 0;
@ -2923,7 +2935,7 @@ onUnmounted(() => {
:deep(.vue-flow__edge-path), :deep(.vue-flow__edge-path),
:deep(.vue-flow__connection-path) { :deep(.vue-flow__connection-path) {
stroke: #ff6b35; stroke: #8b4513;
stroke-width: 2; stroke-width: 2;
} }
@ -2936,14 +2948,14 @@ onUnmounted(() => {
} }
:deep(.vue-flow__selection) { :deep(.vue-flow__selection) {
border: 1px solid #2f80ed; border: 2px solid var(--retro-primary);
background: rgba(47, 128, 237, 0.1); background: rgba(0, 128, 128, 0.1);
box-shadow: 0 0 0 1px rgba(47, 128, 237, 0.08); box-shadow: 3px 3px 0 rgba(0, 92, 92, 0.18);
} }
:deep(.vue-flow__nodesselection-rect) { :deep(.vue-flow__nodesselection-rect) {
border: 1px dashed rgba(47, 128, 237, 0.72); border: 2px dashed var(--retro-primary);
background: rgba(47, 128, 237, 0.04); background: rgba(0, 128, 128, 0.05);
} }
:deep(.vue-flow__handle) { :deep(.vue-flow__handle) {
@ -2960,16 +2972,32 @@ onUnmounted(() => {
} }
:deep(.vue-flow__edge.selected .vue-flow__edge-path) { :deep(.vue-flow__edge.selected .vue-flow__edge-path) {
stroke: #1677ff; stroke: var(--retro-primary);
stroke-width: 4; stroke-width: 4;
filter: drop-shadow(0 0 3px rgba(22, 119, 255, 0.45)); filter: drop-shadow(2px 2px 0 rgba(33, 27, 18, 0.3));
} }
:deep(.vue-flow__controls) { :deep(.vue-flow__controls) {
overflow: hidden; overflow: hidden;
border: 1px solid #dfe4ec; border: 2px solid var(--retro-border-strong);
border-radius: 6px; border-radius: 0;
box-shadow: 0 6px 18px rgba(20, 33, 61, 0.12); box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
}
:deep(.vue-flow__controls-button) {
border: 0;
border-bottom: 1px solid var(--retro-border-dark);
border-radius: 0;
background: var(--retro-bg-white);
color: var(--retro-text-primary);
&:hover {
background: var(--retro-bg-muted);
}
&:last-child {
border-bottom: 0;
}
} }
} }
} }

35
src/views/flow/nodes/common/selectAreaNode.vue
View File

@ -58,12 +58,13 @@ onMounted(() => {
.group__container { .group__container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(255, 255, 255, 0.96); background-color: rgba(255, 250, 240, 0.97);
background-image: var(--retro-paper-texture);
padding: 16px; padding: 16px;
cursor: default; cursor: default;
border-radius: 8px; border-radius: 0;
border: 1px solid #b8c5d8; border: 2px solid var(--retro-border-dark);
box-shadow: none; box-shadow: 5px 5px 0 rgba(33, 27, 18, 0.26);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@ -78,12 +79,12 @@ onMounted(() => {
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: #64748b; background: #406e72;
} }
&:hover { &:hover {
border-color: #8fa0b8; border-color: var(--retro-border-strong);
box-shadow: 0 8px 24px rgba(31, 41, 55, 0.08); box-shadow: 6px 6px 0 rgba(33, 27, 18, 0.3);
} }
.title { .title {
@ -96,17 +97,18 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 4px; margin-top: 4px;
color: #475569; color: var(--retro-text-primary);
font-family: var(--retro-font-display);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
} }
.group-summary__count { .group-summary__count {
padding: 2px 8px; padding: 2px 8px;
border: 1px solid #d9e0ea; border: 1px solid var(--retro-border-dark);
border-radius: 4px; border-radius: 0;
background: #f8fafc; background: var(--retro-bg-muted);
color: #64748b; color: var(--retro-text-regular);
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
} }
@ -114,11 +116,12 @@ onMounted(() => {
.child__container { .child__container {
min-height: 80px; min-height: 80px;
flex: 1; flex: 1;
background-color: #f6f8fb; background-color: #f4ead2;
background-image: radial-gradient(#d6dde8 0.7px, transparent 0.7px); background-image: radial-gradient(#b9aa8e 0.8px, transparent 0.8px), var(--retro-paper-texture);
background-size: 16px 16px; background-size: 16px 16px;
border: 1px dashed #aeb9c9; border: 2px dashed var(--retro-border-dark);
border-radius: 6px; border-radius: 0;
box-shadow: inset 2px 2px 0 rgba(75, 61, 48, 0.12);
} }
.el-row { .el-row {

2
src/views/flow/nodes/function/actionQueue.vue
View File

@ -21,5 +21,5 @@ defineExpose({ closePopover })
</script> </script>
<style scoped> <style scoped>
.action-queue-node__summary { margin-top: 7px; color: #667085; font-size: 11px; line-height: 16px; } .action-queue-node__summary { margin-top: 7px; color: var(--retro-text-secondary); font-size: 11px; line-height: 16px; }
</style> </style>

22
src/views/flow/nodes/function/currentLoop.vue
View File

@ -129,9 +129,10 @@ defineExpose({ closePopover })
.input__container { .input__container {
width: 100%; width: 100%;
background-color: #fafbfc; background-color: #f0e6cf;
padding: 0 16px; padding: 0 16px;
border-radius: 8px; border: 1px solid var(--retro-border-dark);
border-radius: 0;
box-sizing: border-box; box-sizing: border-box;
.title { .title {
@ -147,15 +148,15 @@ defineExpose({ closePopover })
.tag { .tag {
width: 3px; width: 3px;
height: 16px; height: 16px;
background: #1664ff; background: var(--retro-primary);
border-radius: 0 4px 4px 0; border-radius: 0;
margin-right: 12px; margin-right: 12px;
} }
.text { .text {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #0c0d0e; color: var(--retro-text-primary);
} }
} }
@ -213,9 +214,10 @@ defineExpose({ closePopover })
.output__container { .output__container {
width: 100%; width: 100%;
background-color: #fafbfc; background-color: #f0e6cf;
padding: 0 16px; padding: 0 16px;
border-radius: 8px; border: 1px solid var(--retro-border-dark);
border-radius: 0;
box-sizing: border-box; box-sizing: border-box;
.title { .title {
@ -226,15 +228,15 @@ defineExpose({ closePopover })
.tag { .tag {
width: 3px; width: 3px;
height: 16px; height: 16px;
background: #1664ff; background: var(--retro-primary);
border-radius: 0 4px 4px 0; border-radius: 0;
margin-right: 12px; margin-right: 12px;
} }
.text { .text {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #0c0d0e; color: var(--retro-text-primary);
} }
} }

45
src/views/flow/nodes/function/loop.vue
View File

@ -176,20 +176,24 @@ const setNodeName = (name) => {
.group__container { .group__container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #fff; background-color: rgba(255, 250, 240, 0.98);
background-image: var(--retro-paper-texture);
padding: 16px; padding: 16px;
box-sizing: border-box; box-sizing: border-box;
cursor: default; cursor: default;
border-radius: 8px; border-radius: 0;
border: 1px solid #cfd7e6; border: 2px solid var(--retro-border-dark);
box-shadow: none; box-shadow: 5px 5px 0 rgba(33, 27, 18, 0.26);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: border-color 0.18s ease, box-shadow 0.18s ease; transition: border-color 0.18s ease, box-shadow 0.18s ease;
&:hover { border-color: #aeb9c9; } &:hover {
border-color: var(--retro-border-strong);
box-shadow: 6px 6px 0 rgba(33, 27, 18, 0.3);
}
&::before { &::before {
content: ""; content: "";
@ -198,13 +202,13 @@ const setNodeName = (name) => {
left: 0; left: 0;
width: 5px; width: 5px;
height: 100%; height: 100%;
border-radius: 8px 0 0 8px; border-radius: 0;
background: #ff6b35; background: #8b4513;
} }
&--dragover { &--dragover {
border-color: #ff6b35; border-color: var(--retro-primary);
box-shadow: inset 0 0 0 2px rgba(255, 107, 53, 0.14); box-shadow: inset 0 0 0 3px rgba(0, 128, 128, 0.16), 5px 5px 0 rgba(33, 27, 18, 0.26);
} }
.title { .title {
@ -217,17 +221,18 @@ const setNodeName = (name) => {
justify-content: space-between; justify-content: space-between;
height: 30px; height: 30px;
margin-top: 4px; margin-top: 4px;
color: #344054; color: var(--retro-text-primary);
font-family: var(--retro-font-display);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
} }
.loop-body-count { .loop-body-count {
padding: 2px 8px; padding: 2px 8px;
color: #667085; color: var(--retro-text-regular);
border: 1px solid #dfe4ec; border: 1px solid var(--retro-border-dark);
background: #f8fafc; background: var(--retro-bg-muted);
border-radius: 4px; border-radius: 0;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
} }
@ -247,15 +252,17 @@ const setNodeName = (name) => {
.child__container { .child__container {
min-height: 300px; min-height: 300px;
flex: 1; flex: 1;
background-color: #f7f9fc; background-color: #f4ead2;
border: 1px dashed #aeb9c9; background-image: var(--retro-paper-texture);
border-radius: 6px; border: 2px dashed var(--retro-border-dark);
border-radius: 0;
box-shadow: inset 2px 2px 0 rgba(75, 61, 48, 0.12);
transition: background-color 0.18s ease, border-color 0.18s ease; transition: background-color 0.18s ease, border-color 0.18s ease;
} }
&--dragover .child__container { &--dragover .child__container {
background-color: #fff8f3; background-color: #dce7db;
border-color: #ff6b35; border-color: var(--retro-primary);
} }
.el-row { .el-row {

24
src/views/flow/nodes/function/stopLoop.vue
View File

@ -47,12 +47,13 @@ const setNodeName = (name) => {
.node__container { .node__container {
width: 300px; width: 300px;
height: auto; height: auto;
background: #fff; background-color: var(--retro-bg-white);
background-image: var(--retro-paper-texture);
padding: 12px; padding: 12px;
cursor: default; cursor: default;
border-radius: 12px; border-radius: 0;
border: 2px solid white; border: 2px solid var(--retro-border-dark);
box-shadow: 0 5px 15px 0#00000008; box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
position: relative; position: relative;
.title__container { .title__container {
@ -73,7 +74,7 @@ const setNodeName = (name) => {
} }
.subTitle { .subTitle {
color: #737a87; color: var(--retro-text-secondary);
font-size: 12px; font-size: 12px;
margin: 8px 0; margin: 8px 0;
} }
@ -82,9 +83,10 @@ const setNodeName = (name) => {
.input__container { .input__container {
width: 100%; width: 100%;
background-color: #fafbfc; background-color: #f0e6cf;
padding: 0 16px; padding: 0 16px;
border-radius: 8px; border: 1px solid var(--retro-border-dark);
border-radius: 0;
box-sizing: border-box; box-sizing: border-box;
.title { .title {
@ -100,15 +102,15 @@ const setNodeName = (name) => {
.tag { .tag {
width: 3px; width: 3px;
height: 16px; height: 16px;
background: #1664ff; background: #9a4035;
border-radius: 0 4px 4px 0; border-radius: 0;
margin-right: 12px; margin-right: 12px;
} }
.text { .text {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #0c0d0e; color: var(--retro-text-primary);
} }
} }
@ -196,7 +198,7 @@ const setNodeName = (name) => {
margin-bottom: 12px; margin-bottom: 12px;
.paramsTitle { .paramsTitle {
color: #0c0d0e; color: var(--retro-text-primary);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }

30
src/views/flow/nodes/function/switch.vue
View File

@ -237,10 +237,11 @@ defineExpose({ closePopover });
width: 100%; width: 100%;
min-height: 180px; min-height: 180px;
padding: 16px; padding: 16px;
border: 1px solid #dfe4ec; border: 2px solid var(--retro-border-dark);
border-left: 4px solid var(--node-accent, #b7791f); border-left: 6px solid var(--node-accent, #a06a1e);
border-radius: 8px; border-radius: 0;
background: #fff; background-color: var(--retro-bg-white);
background-image: var(--retro-paper-texture);
// box-shadow: 0 8px 24px rgba(31, 41, 55, 0.09); // box-shadow: 0 8px 24px rgba(31, 41, 55, 0.09);
box-sizing: border-box; box-sizing: border-box;
cursor: default; cursor: default;
@ -249,7 +250,7 @@ defineExpose({ closePopover });
.condition-summary { .condition-summary {
margin-top: 14px; margin-top: 14px;
padding-top: 12px; padding-top: 12px;
border-top: 1px solid #e8ebf0; border-top: 1px dashed var(--retro-border-dark);
} }
.condition-summary__title, .condition-summary__title,
@ -261,13 +262,14 @@ defineExpose({ closePopover });
.condition-summary__title { .condition-summary__title {
margin-bottom: 8px; margin-bottom: 8px;
color: #344054; color: var(--retro-text-primary);
font-family: var(--retro-font-display);
font-size: 13px; font-size: 13px;
font-weight: 650; font-weight: 650;
} }
.condition-summary__count { .condition-summary__count {
color: #98a2b3; color: var(--retro-text-secondary);
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
} }
@ -276,9 +278,9 @@ defineExpose({ closePopover });
min-height: 44px; min-height: 44px;
margin-top: 6px; margin-top: 6px;
padding: 0 10px; padding: 0 10px;
border: 1px solid #e4e8ef; border: 1px solid var(--retro-border-dark);
border-radius: 6px; border-radius: 0;
background: #f8fafc; background: #f0e6cf;
position: relative; position: relative;
&::after { &::after {
@ -287,19 +289,19 @@ defineExpose({ closePopover });
position: absolute; position: absolute;
top: 50%; top: 50%;
right: -18px; right: -18px;
border-top: 1px solid var(--node-accent, #b7791f); border-top: 2px solid var(--node-accent, #a06a1e);
pointer-events: none; pointer-events: none;
} }
} }
.condition-summary__item--else { .condition-summary__item--else {
background: #fffaf0; background: #f1dec0;
} }
.condition-summary__order { .condition-summary__order {
width: 96px; width: 96px;
flex: 0 0 96px; flex: 0 0 96px;
color: #3978c5; color: var(--retro-primary-dark);
font-size: 12px; font-size: 12px;
font-weight: 650; font-weight: 650;
overflow: hidden; overflow: hidden;
@ -309,7 +311,7 @@ defineExpose({ closePopover });
.condition-summary__text { .condition-summary__text {
flex: 1; flex: 1;
color: #7a8494; color: var(--retro-text-secondary);
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
overflow-wrap: anywhere; overflow-wrap: anywhere;

16
src/views/flow/vue-flow/FlowEdge.vue
View File

@ -79,16 +79,18 @@ const deleteEdge = () => {
height: 30px; height: 30px;
padding: 0; padding: 0;
place-items: center; place-items: center;
border: 1px solid #efb8b4; border: 2px solid #9a4035;
border-radius: 50%; border-radius: 0;
background: #fff; background: var(--retro-bg-white);
color: #d93025; color: #8f332c;
cursor: pointer; cursor: pointer;
box-shadow: 0 4px 12px rgba(31, 41, 55, 0.2); box-shadow: 3px 3px 0 rgba(33, 27, 18, 0.32);
&:hover { &:hover {
border-color: #d93025; border-color: #6f2823;
background: #fff1f0; background: #efd8cf;
transform: translate(-1px, -1px);
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.34);
} }
} }
} }

74
src/views/flow/vue-flow/FlowNode.vue
View File

@ -260,31 +260,33 @@ onMounted(() => bindComponent(componentRef.value));
<style scoped lang="scss"> <style scoped lang="scss">
.flow-node-shell { .flow-node-shell {
--node-accent: #4f6b8a; --node-accent: #406e72;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
&--queue-drop-active .flow-node-content { &--queue-drop-active .flow-node-content {
border-radius: 8px; border-radius: 0;
box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.35), 0 10px 24px rgba(47, 128, 237, 0.18); outline: 3px dashed var(--retro-primary);
outline-offset: 4px;
box-shadow: 6px 6px 0 rgba(0, 128, 128, 0.25);
} }
&--start, &--start,
&--subStart { --node-accent: #239565; } &--subStart { --node-accent: #65743f; }
&--end, &--end,
&--subEnd, &--subEnd,
&--stopLoop { --node-accent: #d45252; } &--stopLoop { --node-accent: #9a4035; }
&--branch { --node-accent: #b7791f; } &--branch { --node-accent: #a06a1e; }
&--loop, &--loop,
&--currentLoop { --node-accent: #df6b35; } &--currentLoop { --node-accent: #8b4513; }
&--http, &--http,
&--code { --node-accent: #3978c5; } &--code { --node-accent: #406e72; }
&--sdAgent, &--sdAgent,
&--recognize { --node-accent: #7a5ab8; } &--recognize { --node-accent: #76543c; }
&--loop, &--loop,
&--selectArea { &--selectArea {
@ -292,24 +294,28 @@ onMounted(() => bindComponent(componentRef.value));
} }
&:hover .flow-node-card { &:hover .flow-node-card {
border-color: #cbd3df; transform: translate(-1px, -1px);
box-shadow: 0 10px 26px rgba(31, 41, 55, 0.11); border-color: var(--retro-border-strong);
box-shadow: 6px 6px 0 rgba(33, 27, 18, 0.3);
} }
&--selected .flow-node-card { &--selected .flow-node-card {
border-color: #2f80ed; border-color: var(--retro-primary);
box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.2), 0 10px 26px rgba(31, 41, 55, 0.12); outline: 2px solid var(--retro-primary);
outline-offset: 3px;
box-shadow: 6px 6px 0 rgba(0, 92, 92, 0.28);
} }
&--selected.flow-node-shell--branch :deep(.node__container) { &--selected.flow-node-shell--branch :deep(.node__container) {
border-color: #2f80ed; border-color: var(--retro-primary);
box-shadow: none;
} }
&--selected.flow-node-shell--loop :deep(.group__container), &--selected.flow-node-shell--loop :deep(.group__container),
&--selected.flow-node-shell--selectArea :deep(.group__container) { &--selected.flow-node-shell--selectArea :deep(.group__container) {
border-color: #2f80ed; border-color: var(--retro-primary);
box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.18); outline: 2px solid var(--retro-primary);
outline-offset: 3px;
box-shadow: 6px 6px 0 rgba(0, 92, 92, 0.24);
} }
} }
@ -322,7 +328,9 @@ onMounted(() => bindComponent(componentRef.value));
.flow-node-executor { .flow-node-executor {
overflow: hidden; overflow: hidden;
margin-top: 8px; margin-top: 8px;
color: #667085; padding-top: 6px;
border-top: 1px dashed var(--retro-border-dark);
color: var(--retro-text-secondary);
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -334,11 +342,12 @@ onMounted(() => bindComponent(componentRef.value));
height: auto; height: auto;
padding: 13px 14px 13px 16px; padding: 13px 14px 13px 16px;
position: relative; position: relative;
background: #fff; background-color: rgba(255, 250, 240, 0.98);
border: 1px solid #dfe4ec; background-image: var(--retro-paper-texture);
border-left: 4px solid var(--node-accent); border: 2px solid var(--retro-border-dark);
border-radius: 8px; border-left: 6px solid var(--node-accent);
box-shadow: 0 7px 20px rgba(31, 41, 55, 0.08); border-radius: 0;
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.16s ease, box-shadow 0.16s ease; transition: border-color 0.16s ease, box-shadow 0.16s ease;
@ -366,8 +375,9 @@ onMounted(() => bindComponent(componentRef.value));
height: 38px; height: 38px;
flex: 0 0 38px; flex: 0 0 38px;
place-items: center; place-items: center;
border-radius: 50%; border: 1px solid var(--retro-border-dark);
background: #f1f5f9; border-radius: 0;
background: var(--retro-bg-muted);
} }
:deep(.terminal-node__icon img) { :deep(.terminal-node__icon img) {
@ -378,7 +388,8 @@ onMounted(() => bindComponent(componentRef.value));
:deep(.terminal-node__content) { min-width: 0; } :deep(.terminal-node__content) { min-width: 0; }
:deep(.terminal-node__title) { :deep(.terminal-node__title) {
color: #1f2937; color: var(--retro-text-primary);
font-family: var(--retro-font-display);
font-size: 15px; font-size: 15px;
font-weight: 650; font-weight: 650;
line-height: 21px; line-height: 21px;
@ -387,7 +398,7 @@ onMounted(() => bindComponent(componentRef.value));
:deep(.terminal-node__description) { :deep(.terminal-node__description) {
overflow: hidden; overflow: hidden;
margin-top: 3px; margin-top: 3px;
color: #7a8494; color: var(--retro-text-secondary);
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -398,19 +409,20 @@ onMounted(() => bindComponent(componentRef.value));
.flow-handle { .flow-handle {
width: 12px; width: 12px;
height: 12px; height: 12px;
border: 2px solid #fff; border: 2px solid var(--retro-bg-white);
border-radius: 0;
background: var(--node-accent); background: var(--node-accent);
box-shadow: 0 0 0 1px var(--node-accent), 0 2px 5px rgba(31, 41, 55, 0.18); box-shadow: 0 0 0 1px var(--node-accent), 2px 2px 0 rgba(33, 27, 18, 0.34);
z-index: 10; z-index: 10;
transition: transform 0.14s ease, box-shadow 0.14s ease; transition: transform 0.14s ease, box-shadow 0.14s ease;
&:hover { &:hover {
box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.18), 0 2px 6px rgba(31, 41, 55, 0.2); box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.22), 2px 2px 0 rgba(33, 27, 18, 0.36);
} }
&--target { &--target {
left: -6px; left: -6px;
background: #fff; background: var(--retro-bg-white);
border-color: var(--node-accent); border-color: var(--node-accent);
} }

4
src/views/flow/vue-flow/adapter.js
View File

@ -150,11 +150,11 @@ const toVueEdge = (edge) => {
interactionWidth: 32, interactionWidth: 32,
markerEnd: { markerEnd: {
type: MarkerType.ArrowClosed, type: MarkerType.ArrowClosed,
color: "#ff6b35", color: "#8b4513",
width: 20, width: 20,
height: 20, height: 20,
}, },
style: { stroke: "#ff6b35", strokeWidth: 2 }, style: { stroke: "#8b4513", strokeWidth: 2 },
data: { backend: normalized }, data: { backend: normalized },
}; };
}; };

154
src/views/index.vue
View File

@ -1,6 +1,13 @@
<template> <template>
<div class="home-dashboard"> <div class="home-dashboard">
<section class="hero-panel"> <section class="hero-panel">
<div class="hero-spec" aria-hidden="true">
<span class="hero-spec__label">FIELD MANUAL</span>
<strong>CMVR</strong>
<span class="hero-spec__code">BID / 04</span>
<i></i>
<small>TEST OPERATIONS<br />CONTROL DESK</small>
</div>
<div class="hero-content"> <div class="hero-content">
<div class="platform-state"> <div class="platform-state">
<span class="state-dot"></span> <span class="state-dot"></span>
@ -29,6 +36,12 @@
</div> </div>
</section> </section>
<div class="dashboard-rule" aria-hidden="true">
<span>OPERATING REGISTER</span>
<i></i>
<b>LIVE / 04</b>
</div>
<section class="overview-section" aria-labelledby="overview-title"> <section class="overview-section" aria-labelledby="overview-title">
<div class="section-heading"> <div class="section-heading">
<div> <div>
@ -219,8 +232,8 @@ const features = [
title: '设备接入', title: '设备接入',
description: '配置机器人与终端设备', description: '配置机器人与终端设备',
icon: SetUp, icon: SetUp,
color: '#2563eb', color: '#006b6b',
background: '#eaf2ff', background: '#d8e5dc',
menuTitles: ['设备注册', '设备配置管理', '设备管理'], menuTitles: ['设备注册', '设备配置管理', '设备管理'],
fallback: '/device/register', fallback: '/device/register',
}, },
@ -228,8 +241,8 @@ const features = [
title: '流程编排', title: '流程编排',
description: '构建可视化测试工作流', description: '构建可视化测试工作流',
icon: Operation, icon: Operation,
color: '#0f8a73', color: '#65743f',
background: '#e7f6f2', background: '#e2e3c7',
menuTitles: ['任务流程编排', '流程编排'], menuTitles: ['任务流程编排', '流程编排'],
fallback: '/flow', fallback: '/flow',
}, },
@ -237,8 +250,8 @@ const features = [
title: '巡检执行', title: '巡检执行',
description: '调度机器人巡检任务', description: '调度机器人巡检任务',
icon: Monitor, icon: Monitor,
color: '#c56a16', color: '#965b24',
background: '#fff3e5', background: '#f1dec0',
menuTitles: ['执行任务', '运行任务', '巡检任务执行'], menuTitles: ['执行任务', '运行任务', '巡检任务执行'],
fallback: '/inspection/runTask', fallback: '/inspection/runTask',
}, },
@ -246,8 +259,8 @@ const features = [
title: '巡检配置', title: '巡检配置',
description: '管理地图、点位与任务', description: '管理地图、点位与任务',
icon: Grid, icon: Grid,
color: '#6b57c7', color: '#76543c',
background: '#f0edff', background: '#ead8c8',
menuTitles: ['巡检任务', '巡检地图', '地图管理'], menuTitles: ['巡检任务', '巡检地图', '地图管理'],
fallback: '/inspection/task', fallback: '/inspection/task',
}, },
@ -255,8 +268,8 @@ const features = [
title: '测试记录', title: '测试记录',
description: '追踪执行结果与日志', description: '追踪执行结果与日志',
icon: DocumentChecked, icon: DocumentChecked,
color: '#d14343', color: '#8f3f35',
background: '#ffeded', background: '#efd8cf',
menuTitles: ['任务历史', '测试记录', '任务实例', '执行记录'], menuTitles: ['任务历史', '测试记录', '任务实例', '执行记录'],
fallback: '/test/history', fallback: '/test/history',
}, },
@ -264,8 +277,8 @@ const features = [
title: '语料中心', title: '语料中心',
description: '管理语音与合成资源', description: '管理语音与合成资源',
icon: Headset, icon: Headset,
color: '#087f9c', color: '#406e72',
background: '#e8f7fa', background: '#d9e5e2',
menuTitles: ['语料库', '语料管理', '车载语料'], menuTitles: ['语料库', '语料管理', '车载语料'],
fallback: '/corpusManger/corpus', fallback: '/corpusManger/corpus',
}, },
@ -458,18 +471,23 @@ onBeforeUnmount(() => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 32px; gap: 32px;
border-radius: 6px; border: 3px solid var(--retro-border-strong);
border-radius: 0;
background-image: url('../assets/images/index-background.jpg'); background-image: url('../assets/images/index-background.jpg');
background-position: center 48%; background-position: center 48%;
background-size: cover; background-size: cover;
color: #fff; background-color: #66503b;
background-blend-mode: multiply;
color: #fff4dc;
box-shadow: 6px 6px 0 rgba(33, 27, 18, 0.38);
} }
.hero-panel::before { .hero-panel::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(8, 24, 37, 0.72); background-color: rgba(48, 37, 25, 0.68);
background-image: var(--retro-paper-texture);
} }
.hero-content, .hero-content,
@ -487,7 +505,7 @@ onBeforeUnmount(() => {
align-items: center; align-items: center;
gap: 9px; gap: 9px;
margin-bottom: 13px; margin-bottom: 13px;
color: rgba(255, 255, 255, 0.82); color: rgba(255, 244, 220, 0.86);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
} }
@ -495,9 +513,10 @@ onBeforeUnmount(() => {
.state-dot { .state-dot {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border: 1px solid #fff4dc;
background: #35d2a0; border-radius: 0;
box-shadow: 0 0 0 5px rgba(53, 210, 160, 0.16); background: #d7b35f;
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.34);
animation: status-pulse 2.2s ease-in-out infinite; animation: status-pulse 2.2s ease-in-out infinite;
} }
@ -506,13 +525,15 @@ onBeforeUnmount(() => {
font-size: 32px; font-size: 32px;
line-height: 1.28; line-height: 1.28;
font-weight: 700; font-weight: 700;
font-family: var(--retro-font-display);
letter-spacing: 0; letter-spacing: 0;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.46);
} }
.hero-description { .hero-description {
max-width: 670px; max-width: 670px;
margin: 12px 0 22px; margin: 12px 0 22px;
color: rgba(255, 255, 255, 0.76); color: rgba(255, 244, 220, 0.8);
font-size: 15px; font-size: 15px;
line-height: 1.7; line-height: 1.7;
} }
@ -526,30 +547,31 @@ onBeforeUnmount(() => {
.hero-actions :deep(.el-button) { .hero-actions :deep(.el-button) {
min-width: 126px; min-width: 126px;
margin: 0; margin: 0;
border-radius: 4px; border-radius: 0;
font-weight: 600; font-weight: 600;
} }
.hero-actions :deep(.el-button--primary) { .hero-actions :deep(.el-button--primary) {
border-color: #1688e7; border-color: #d8c497;
background: #1688e7; background: #007272;
color: #fffaf0;
} }
.cockpit-button { .cockpit-button {
border-color: rgba(255, 255, 255, 0.42) !important; border-color: #d8c497 !important;
background: rgba(255, 255, 255, 0.1) !important; background: rgba(59, 52, 42, 0.72) !important;
color: #fff !important; color: #fff4dc !important;
} }
.cockpit-button:hover { .cockpit-button:hover {
border-color: #fff !important; border-color: #fff4dc !important;
background: rgba(255, 255, 255, 0.18) !important; background: rgba(91, 75, 54, 0.88) !important;
} }
.hero-time { .hero-time {
min-width: 190px; min-width: 190px;
padding-left: 26px; padding-left: 26px;
border-left: 1px solid rgba(255, 255, 255, 0.24); border-left: 2px solid rgba(255, 244, 220, 0.42);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
@ -560,12 +582,13 @@ onBeforeUnmount(() => {
font-size: 42px; font-size: 42px;
line-height: 1; line-height: 1;
font-weight: 600; font-weight: 600;
font-family: var(--retro-font-display);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.hero-time > span:last-child, .hero-time > span:last-child,
.time-label { .time-label {
color: rgba(255, 255, 255, 0.72); color: rgba(255, 244, 220, 0.76);
font-size: 13px; font-size: 13px;
} }
@ -592,6 +615,8 @@ onBeforeUnmount(() => {
font-size: 10px; font-size: 10px;
line-height: 1.2; line-height: 1.2;
font-weight: 700; font-weight: 700;
font-family: var(--retro-font-display);
text-transform: uppercase;
} }
.section-heading h2, .section-heading h2,
@ -600,6 +625,7 @@ onBeforeUnmount(() => {
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
font-size: 18px; font-size: 18px;
line-height: 1.35; line-height: 1.35;
font-family: var(--retro-font-display);
letter-spacing: 0; letter-spacing: 0;
} }
@ -620,16 +646,18 @@ onBeforeUnmount(() => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
border: 1px solid var(--el-border-color-lighter); border: 2px solid var(--retro-border-dark);
border-radius: 6px; border-radius: 0;
background: var(--el-bg-color); background-color: var(--el-bg-color);
background-image: var(--retro-paper-texture);
box-shadow: var(--retro-shadow-small);
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
} }
.metric-card:hover { .metric-card:hover {
transform: translateY(-2px); transform: translate(-2px, -2px);
border-color: var(--el-border-color); border-color: var(--retro-border-strong);
box-shadow: 0 10px 24px rgba(28, 44, 64, 0.08); box-shadow: 5px 5px 0 rgba(33, 27, 18, 0.3);
} }
.metric-icon { .metric-icon {
@ -638,14 +666,15 @@ onBeforeUnmount(() => {
flex: 0 0 48px; flex: 0 0 48px;
display: grid; display: grid;
place-items: center; place-items: center;
border-radius: 6px; border: 1px solid var(--retro-border-dark);
border-radius: 0;
font-size: 24px; font-size: 24px;
} }
.metric-icon--blue { color: #2563eb; background: #eaf2ff; } .metric-icon--blue { color: #006b6b; background: #d8e5dc; }
.metric-icon--green { color: #0f8a73; background: #e7f6f2; } .metric-icon--green { color: #65743f; background: #e2e3c7; }
.metric-icon--orange { color: #c56a16; background: #fff3e5; } .metric-icon--orange { color: #965b24; background: #f1dec0; }
.metric-icon--red { color: #d14343; background: #ffeded; } .metric-icon--red { color: #8f3f35; background: #efd8cf; }
.metric-content { .metric-content {
min-width: 0; min-width: 0;
@ -694,9 +723,11 @@ onBeforeUnmount(() => {
.dashboard-panel { .dashboard-panel {
min-width: 0; min-width: 0;
padding: 20px; padding: 20px;
border: 1px solid var(--el-border-color-lighter); border: 2px solid var(--retro-border-dark);
border-radius: 6px; border-radius: 0;
background: var(--el-bg-color); background-color: var(--el-bg-color);
background-image: var(--retro-paper-texture);
box-shadow: var(--retro-shadow-small);
} }
.panel-heading { .panel-heading {
@ -706,6 +737,7 @@ onBeforeUnmount(() => {
.text-action { .text-action {
border: 0; border: 0;
border-bottom: 1px dashed currentColor;
padding: 5px 0; padding: 5px 0;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -731,7 +763,7 @@ onBeforeUnmount(() => {
min-height: 63px; min-height: 63px;
padding: 11px 6px; padding: 11px 6px;
border: 0; border: 0;
border-top: 1px solid var(--el-border-color-extra-light); border-top: 1px solid var(--retro-border-dark);
display: grid; display: grid;
grid-template-columns: 10px minmax(130px, 1fr) auto 18px; grid-template-columns: 10px minmax(130px, 1fr) auto 18px;
align-items: center; align-items: center;
@ -753,7 +785,7 @@ onBeforeUnmount(() => {
.task-status-dot { .task-status-dot {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 0;
background: var(--el-color-info); background: var(--el-color-info);
} }
@ -807,7 +839,8 @@ onBeforeUnmount(() => {
width: 44px; width: 44px;
height: 44px; height: 44px;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 50%; border: 1px solid var(--retro-border-dark);
border-radius: 0;
display: grid; display: grid;
place-items: center; place-items: center;
background: var(--el-color-success-light-9); background: var(--el-color-success-light-9);
@ -835,13 +868,13 @@ onBeforeUnmount(() => {
min-width: 0; min-width: 0;
min-height: 76px; min-height: 76px;
padding: 10px; padding: 10px;
border: 1px solid transparent; border: 1px solid var(--retro-border-dark);
border-radius: 5px; border-radius: 0;
display: grid; display: grid;
grid-template-columns: 38px minmax(0, 1fr) 14px; grid-template-columns: 38px minmax(0, 1fr) 14px;
align-items: center; align-items: center;
gap: 9px; gap: 9px;
background: var(--el-fill-color-extra-light); background: #f5ecd9;
color: inherit; color: inherit;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
@ -849,8 +882,9 @@ onBeforeUnmount(() => {
} }
.feature-item:hover { .feature-item:hover {
border-color: var(--el-border-color); border-color: var(--retro-primary);
background: var(--el-fill-color-light); background: #e8dcc0;
box-shadow: 2px 2px 0 rgba(33, 27, 18, 0.24);
} }
.feature-icon { .feature-icon {
@ -858,7 +892,8 @@ onBeforeUnmount(() => {
height: 38px; height: 38px;
display: grid; display: grid;
place-items: center; place-items: center;
border-radius: 5px; border: 1px solid var(--retro-border-dark);
border-radius: 0;
font-size: 20px; font-size: 20px;
} }
@ -896,7 +931,7 @@ onBeforeUnmount(() => {
.recent-item { .recent-item {
min-width: 0; min-width: 0;
min-height: 62px; min-height: 62px;
border-top: 1px solid var(--el-border-color-extra-light); border-top: 1px solid var(--retro-border-dark);
display: grid; display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto auto; grid-template-columns: 32px minmax(0, 1fr) auto auto;
align-items: center; align-items: center;
@ -955,11 +990,12 @@ onBeforeUnmount(() => {
} }
:global(html.dark) .hero-panel::before { :global(html.dark) .hero-panel::before {
background: rgba(4, 13, 22, 0.82); background-color: rgba(22, 19, 14, 0.8);
background-image: var(--retro-paper-texture);
} }
:global(html.dark) .metric-card:hover { :global(html.dark) .metric-card:hover {
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.72);
} }
:global(html.dark) .metric-icon, :global(html.dark) .metric-icon,
@ -968,8 +1004,8 @@ onBeforeUnmount(() => {
} }
@keyframes status-pulse { @keyframes status-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(53, 210, 160, 0.12); } 0%, 100% { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.34); }
50% { box-shadow: 0 0 0 7px rgba(53, 210, 160, 0.04); } 50% { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
@ -1005,7 +1041,7 @@ onBeforeUnmount(() => {
.hero-time { .hero-time {
width: 100%; width: 100%;
padding: 18px 0 0; padding: 18px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.24); border-top: 2px solid rgba(255, 244, 220, 0.42);
border-left: 0; border-left: 0;
align-items: flex-start; align-items: flex-start;
} }

4
src/views/inspection/point/index.vue
View File

@ -114,7 +114,7 @@
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="配置状态" prop="configStatus"> <!-- <el-table-column align="center" label="配置状态" prop="configStatus">
<template #default="scope"> <template #default="scope">
<TableTags <TableTags
:options="[ :options="[
@ -132,7 +132,7 @@
:value="scope.row.configStatus" :value="scope.row.configStatus"
></TableTags> ></TableTags>
</template> </template>
</el-table-column> </el-table-column> -->
<el-table-column <el-table-column
align="center" align="center"
label="创建人" label="创建人"

2
src/views/intelligenceTest/mobilePhone/index.vue
View File

@ -87,7 +87,7 @@
<el-table-column label="系统版本" prop="osVersion" /> <el-table-column label="系统版本" prop="osVersion" />
<el-table-column label="操作系统" prop="osSystem" width="100" /> <el-table-column label="操作系统" prop="osSystem" width="100" />
<el-table-column label="厂商" align="center" prop="manufacturer" /> <el-table-column label="厂商" align="center" prop="manufacturer" />
<el-table-column label="额外参数" align="center" prop="specifications" :show-overflow-tooltip="true" width="180"/> <!-- <el-table-column label="额外参数" align="center" prop="specifications" :show-overflow-tooltip="true" width="180"/> -->
<el-table-column label="状态" align="center" width="100"> <el-table-column label="状态" align="center" width="100">
<template #default="scope"> <template #default="scope">
<el-switch <el-switch

4
src/views/intelligenceTest/taskManage/index.vue
View File

@ -51,9 +51,9 @@
<el-button icon="Edit" link type="primary" @click="handleUpdate(scope.row)"> <el-button icon="Edit" link type="primary" @click="handleUpdate(scope.row)">
修改 修改
</el-button> </el-button>
<el-button :loading="copyingId === scope.row.id" icon="CopyDocument" link type="primary" <!-- <el-button :loading="copyingId === scope.row.id" icon="CopyDocument" link type="primary"
@click="handleCopy(scope.row)">复制 @click="handleCopy(scope.row)">复制
</el-button> </el-button> -->
<el-button icon="Cpu" link type="primary" @click="handleBindCase(scope.row)">绑定用例 <el-button icon="Cpu" link type="primary" @click="handleBindCase(scope.row)">绑定用例
</el-button> </el-button>
<el-button icon="Delete" link type="primary" @click="handleDelete(scope.row)">删除 <el-button icon="Delete" link type="primary" @click="handleDelete(scope.row)">删除

4
src/views/intelligenceTest/testCase/index.vue
View File

@ -86,7 +86,7 @@
></el-switch> ></el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="配置状态" prop="configStatus"> <!-- <el-table-column align="center" label="配置状态" prop="configStatus">
<template #default="scope"> <template #default="scope">
<TableTags <TableTags
:options="[ :options="[
@ -104,7 +104,7 @@
:value="scope.row.configStatus" :value="scope.row.configStatus"
></TableTags> ></TableTags>
</template> </template>
</el-table-column> </el-table-column> -->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="280"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="280">
<template #default="scope"> <template #default="scope">
<el-tooltip content="修改" placement="top"> <el-tooltip content="修改" placement="top">

79
src/views/login.vue
View File

@ -167,10 +167,16 @@ getCookie()
<style lang='scss' scoped> <style lang='scss' scoped>
.login { .login {
position: relative;
isolation: isolate;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
padding: 24px;
overflow: hidden;
background-color: rgba(250, 243, 223, 0.76);
background-image: var(--retro-paper-texture);
} }
.login::before { .login::before {
content: ""; content: "";
@ -180,44 +186,62 @@ getCookie()
background-image: url("../assets/images/login-background.jpg"); background-image: url("../assets/images/login-background.jpg");
height: 100%; height: 100%;
background-size: cover; background-size: cover;
opacity: 0.3; /* 只在这层做透明 */ background-position: center;
filter: sepia(0.82) saturate(0.65) contrast(1.08);
opacity: 0.24;
z-index: -1; z-index: -1;
} }
.title { .title {
margin: 0px auto 30px auto; margin: 0 auto 30px;
text-align: center; text-align: center;
color: #707070; color: var(--retro-text-primary);
font-family: var(--retro-font-display);
font-size: 24px;
line-height: 1.45;
text-shadow: 1px 1px 0 #fff4dc;
} }
.login-form { .login-form {
border-radius: 6px; position: relative;
background: #ffffff; border: 3px solid var(--retro-border-strong);
border-top: 10px solid var(--retro-primary);
border-radius: 0;
outline: 1px solid #b59a72;
outline-offset: -7px;
background-color: rgba(255, 250, 240, 0.96);
background-image: var(--retro-paper-texture);
box-shadow: 8px 8px 0 rgba(33, 27, 18, 0.38);
width: 400px; width: 400px;
padding: 25px 25px 5px 25px; max-width: 100%;
padding: 32px 30px 14px;
.el-input { .el-input {
height: 40px; height: 44px;
input { input {
height: 40px; height: 44px;
} }
} }
.input-icon { .input-icon {
height: 39px; height: 43px;
width: 14px; width: 15px;
margin-left: 0px; margin-left: 0;
color: var(--retro-primary-dark);
} }
} }
.login-tip { .login-tip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #bfbfbf; color: var(--retro-text-secondary);
} }
.login-code { .login-code {
width: 33%; width: 33%;
height: 40px; height: 44px;
float: right; float: right;
img { img {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
border: 2px solid var(--retro-border-dark);
background: var(--retro-bg-white);
filter: sepia(0.2) contrast(1.1);
} }
} }
.el-login-footer { .el-login-footer {
@ -227,13 +251,32 @@ getCookie()
bottom: 0; bottom: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #fff; color: var(--retro-text-regular);
font-family: Arial; font-family: var(--retro-font-display);
font-size: 12px; font-size: 12px;
letter-spacing: 1px; letter-spacing: 0;
background: rgba(239, 228, 202, 0.86);
border-top: 2px solid var(--retro-border-dark);
} }
.login-code-img { .login-code-img {
height: 40px; height: 44px;
padding-left: 12px; padding-left: 0;
}
@media (max-width: 520px) {
.login {
padding: 18px;
align-items: flex-start;
padding-top: 12vh;
}
.login-form {
padding: 28px 20px 12px;
box-shadow: 5px 5px 0 rgba(33, 27, 18, 0.36);
}
.title {
font-size: 20px;
}
} }
</style> </style>

8
src/views/test/configs/index.vue
View File

@ -94,24 +94,24 @@
prop="taskName" prop="taskName"
show-overflow-tooltip show-overflow-tooltip
/> />
<el-table-column <!-- <el-table-column
align="center" align="center"
label="分组名称" label="分组名称"
prop="groupName" prop="groupName"
show-overflow-tooltip show-overflow-tooltip
/> /> -->
<el-table-column <el-table-column
align="center" align="center"
label="任务描述" label="任务描述"
prop="taskDesc" prop="taskDesc"
show-overflow-tooltip show-overflow-tooltip
/> />
<el-table-column <!-- <el-table-column
align="center" align="center"
label="备注" label="备注"
prop="remark" prop="remark"
show-overflow-tooltip show-overflow-tooltip
/> /> -->
<el-table-column align="center" label="状态" prop="status"> <el-table-column align="center" label="状态" prop="status">
<template #default="scope"> <template #default="scope">
<el-switch <el-switch

8
src/views/test/detect/index.vue
View File

@ -118,7 +118,7 @@
prop="detectDesc" prop="detectDesc"
show-overflow-tooltip show-overflow-tooltip
/> />
<el-table-column align="center" label="所属分组" prop="groupId"> <!-- <el-table-column align="center" label="所属分组" prop="groupId">
<template #default="scope"> <template #default="scope">
{{ {{
groupList?.find((item) => item.value === scope.row.groupId)[ groupList?.find((item) => item.value === scope.row.groupId)[
@ -126,7 +126,7 @@
] ]
}} }}
</template> </template>
</el-table-column> </el-table-column> -->
<el-table-column <el-table-column
align="center" align="center"
label="备注" label="备注"
@ -146,7 +146,7 @@
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="配置状态" prop="isDeploy"> <!-- <el-table-column align="center" label="配置状态" prop="isDeploy">
<template #default="scope"> <template #default="scope">
<TableTags <TableTags
:options="[ :options="[
@ -164,7 +164,7 @@
:value="scope.row.isDeploy" :value="scope.row.isDeploy"
></TableTags> ></TableTags>
</template> </template>
</el-table-column> </el-table-column> -->
<el-table-column <el-table-column
align="center" align="center"
class-name="small-padding fixed-width" class-name="small-padding fixed-width"