forked from SmartBench/CMVR-IOT-UI
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a51190adf7 | |||
| a49404ec5c | |||
| a59028227f |
15
index.html
15
index.html
@ -7,6 +7,9 @@
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<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>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<style>
|
||||
@ -44,7 +47,7 @@
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
border-top-color: #d8b36a;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
-ms-animation: spin 2s linear infinite;
|
||||
-moz-animation: spin 2s linear infinite;
|
||||
@ -62,7 +65,7 @@
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
border-top-color: #008080;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
-moz-animation: spin 3s linear infinite;
|
||||
-o-animation: spin 3s linear infinite;
|
||||
@ -79,7 +82,7 @@
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
border-top-color: #d8b36a;
|
||||
-moz-animation: spin 1.5s linear infinite;
|
||||
-o-animation: spin 1.5s linear infinite;
|
||||
-ms-animation: spin 1.5s linear infinite;
|
||||
@ -122,7 +125,7 @@
|
||||
top: 0;
|
||||
width: 51%;
|
||||
height: 100%;
|
||||
background: #7171C6;
|
||||
background: #3b342a;
|
||||
z-index: 1000;
|
||||
-webkit-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
@ -178,8 +181,8 @@
|
||||
}
|
||||
|
||||
#loader-wrapper .load_title {
|
||||
font-family: 'Open Sans';
|
||||
color: #FFF;
|
||||
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
|
||||
color: #fff4dc;
|
||||
font-size: 19px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
@ -9,30 +9,30 @@ $yellow: #fec171;
|
||||
$panGreen: #30b08f;
|
||||
|
||||
// 默认主题变量
|
||||
$menuText: #bfcbd9;
|
||||
$menuActiveText: #409eff;
|
||||
$menuBg: #304156;
|
||||
$menuHover: #263445;
|
||||
$menuText: #e7dac0;
|
||||
$menuActiveText: #f3cf7a;
|
||||
$menuBg: #3b342a;
|
||||
$menuHover: #554a3a;
|
||||
|
||||
// 浅色主题theme-light
|
||||
$menuLightBg: #ffffff;
|
||||
$menuLightHover: #f0f1f5;
|
||||
$menuLightText: #303133;
|
||||
$menuLightActiveText: #409eff;
|
||||
$menuLightBg: #fffaf0;
|
||||
$menuLightHover: #e8dcc0;
|
||||
$menuLightText: #504737;
|
||||
$menuLightActiveText: #008080;
|
||||
|
||||
// 基础变量
|
||||
$base-sidebar-width: 200px;
|
||||
$sideBarWidth: 200px;
|
||||
|
||||
// 菜单暗色变量
|
||||
$base-menu-color: #bfcbd9;
|
||||
$base-menu-color-active: #f4f4f5;
|
||||
$base-menu-background: #304156;
|
||||
$base-sub-menu-background: #1f2d3d;
|
||||
$base-sub-menu-hover: #001528;
|
||||
$base-menu-color: #e7dac0;
|
||||
$base-menu-color-active: #f3cf7a;
|
||||
$base-menu-background: #3b342a;
|
||||
$base-sub-menu-background: #2c271f;
|
||||
$base-sub-menu-hover: #554a3a;
|
||||
|
||||
// 组件变量
|
||||
$--color-primary: #409eff;
|
||||
$--color-primary: #008080;
|
||||
$--color-success: #67c23a;
|
||||
$--color-warning: #e6a23c;
|
||||
$--color-danger: #f56c6c;
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="navbar" :class="'nav' + settingsStore.navType">
|
||||
<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" />
|
||||
<top-nav v-if="settingsStore.navType == 2" id="topmenu-container" class="topmenu-container" />
|
||||
<template v-if="settingsStore.navType == 3">
|
||||
@ -8,6 +13,12 @@
|
||||
<top-bar id="topbar-container" class="topbar-container" />
|
||||
</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">
|
||||
<template v-if="appStore.device !== 'mobile'">
|
||||
<header-search id="header-search" class="right-menu-item" />
|
||||
|
||||
@ -139,7 +139,7 @@ const theme = ref(settingsStore.theme)
|
||||
const sideTheme = ref(settingsStore.sideTheme)
|
||||
const tagsViewPersist = ref(settingsStore.tagsViewPersist)
|
||||
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 */
|
||||
function dynamicTitleChange() {
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div :class="['sidebar-theme-wrapper', {'has-logo':showLogo}, sideTheme]" class="sidebar-container">
|
||||
<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-menu
|
||||
:default-active="activeMenu"
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<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">
|
||||
<router-link
|
||||
v-for="tag in visitedViews"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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"/>
|
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
||||
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
|
||||
@ -7,6 +7,10 @@
|
||||
<navbar @setLayout="setLayout" />
|
||||
<tags-view v-if="needTagsView" />
|
||||
</div>
|
||||
<div class="shell-watermark" aria-hidden="true">
|
||||
<span>CMVR / CONTROL REGISTER</span>
|
||||
<span>ARCHIVE 04</span>
|
||||
</div>
|
||||
<app-main />
|
||||
<settings ref="settingRef" />
|
||||
</div>
|
||||
|
||||
@ -8,6 +8,7 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import locale from 'element-plus/es/locale/lang/zh-cn'
|
||||
|
||||
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 store from './store'
|
||||
|
||||
@ -15,7 +15,7 @@ const useSettingsStore = defineStore(
|
||||
{
|
||||
state: () => ({
|
||||
title: '',
|
||||
theme: storageSetting.theme || '#409EFF',
|
||||
theme: storageSetting.theme || '#008080',
|
||||
sideTheme: storageSetting.sideTheme || sideTheme,
|
||||
showSettings: showSettings,
|
||||
navType: storageSetting.navType === undefined ? navType : storageSetting.navType,
|
||||
|
||||
1184
src/styles/retro.css
Normal file
1184
src/styles/retro.css
Normal file
File diff suppressed because it is too large
Load Diff
@ -39,28 +39,28 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" width="130">
|
||||
<el-table-column label="类型">
|
||||
<template #default="{ row }">{{ kindLabel(row.deviceKind, row.typeName) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="运行状态" width="120" align="center">
|
||||
<el-table-column label="运行状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.onlineStatus === '1' ? 'success' : 'info'" effect="light">
|
||||
{{ row.onlineStatus === '1' ? '在线' : '离线' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="健康状态" width="120" align="center">
|
||||
<el-table-column label="健康状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="isFault(row) ? 'danger' : 'success'" effect="plain">
|
||||
{{ isFault(row) ? '故障' : '正常' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</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>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lastSeenTime" label="最后上报" width="180" />
|
||||
<el-table-column label="操作" width="100" fixed="right" align="center">
|
||||
</el-table-column> -->
|
||||
<!-- <el-table-column prop="lastSeenTime" label="最后上报" width="180" /> -->
|
||||
<el-table-column label="操作" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="controlRoute(row.deviceKind)" link type="primary"
|
||||
:disabled="row.onlineStatus !== '1'" @click="openControl(row)">示教</el-button>
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
<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="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="status">
|
||||
<template #default="scope">
|
||||
@ -138,9 +138,9 @@
|
||||
<el-form-item label="端口号" prop="port">
|
||||
<el-input v-model="form.port" placeholder="请输入端口号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="说明" prop="description">
|
||||
<!-- <el-form-item label="说明" prop="description">
|
||||
<el-input v-model="form.description" placeholder="请输入说明"/>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="备注" prop="remake">
|
||||
<el-input :rows="2"
|
||||
type="textarea" v-model="form.remake" placeholder="请输入备注"/>
|
||||
|
||||
@ -96,13 +96,15 @@ const handleDragCustom = (event, node) => {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
color: #1f2937;
|
||||
color: var(--retro-text-primary);
|
||||
background: #f1e7d0;
|
||||
}
|
||||
|
||||
.library-header {
|
||||
padding: 16px 14px 14px;
|
||||
border-bottom: 1px solid #e4e8ef;
|
||||
background: #fff;
|
||||
border-bottom: 2px solid var(--retro-border-dark);
|
||||
background-color: var(--retro-bg-white);
|
||||
background-image: var(--retro-paper-texture);
|
||||
}
|
||||
|
||||
.library-heading {
|
||||
@ -113,13 +115,15 @@ const handleDragCustom = (event, node) => {
|
||||
}
|
||||
|
||||
.library-title {
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.library-subtitle {
|
||||
margin-top: 2px;
|
||||
color: #8a94a6;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -138,16 +142,16 @@ const handleDragCustom = (event, node) => {
|
||||
.el-collapse-item__header {
|
||||
height: 46px;
|
||||
padding: 0 14px;
|
||||
border-bottom-color: #e8ebf0;
|
||||
background: #f8fafc;
|
||||
color: #344054;
|
||||
border-bottom: 1px solid var(--retro-border-dark);
|
||||
background: #efe4ca;
|
||||
color: var(--retro-text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
border-bottom-color: #e8ebf0;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid var(--retro-border-dark);
|
||||
background: #f7eedb;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
@ -170,10 +174,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(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-white);
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
@ -192,16 +196,18 @@ const handleDragCustom = (event, node) => {
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
padding: 9px 8px 9px 10px;
|
||||
border: 1px solid #e1e6ed;
|
||||
border-radius: 7px;
|
||||
background: #fff;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
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;
|
||||
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(--retro-primary);
|
||||
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
|
||||
transform: translate(-1px, -1px);
|
||||
}
|
||||
|
||||
&:active { cursor: grabbing; }
|
||||
@ -212,8 +218,9 @@ const handleDragCustom = (event, node) => {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
background: #f1f5f9;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-muted);
|
||||
|
||||
img {
|
||||
width: 21px;
|
||||
@ -226,7 +233,8 @@ const handleDragCustom = (event, node) => {
|
||||
|
||||
.node-name {
|
||||
overflow: hidden;
|
||||
color: #202938;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
@ -237,7 +245,7 @@ const handleDragCustom = (event, node) => {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
margin-top: 4px;
|
||||
color: #7a8597;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
-webkit-box-orient: vertical;
|
||||
@ -245,7 +253,7 @@ const handleDragCustom = (event, node) => {
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
color: #a8b0bf;
|
||||
color: var(--retro-border-dark);
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -94,10 +94,10 @@ defineExpose({ closePopover });
|
||||
gap: 8px;
|
||||
margin: -4px -4px 10px;
|
||||
padding: 5px 7px 5px 9px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 6px;
|
||||
background: #f7f9fc;
|
||||
color: #526071;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-muted);
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -125,9 +125,9 @@ defineExpose({ closePopover });
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 7px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 0;
|
||||
background: rgba(255, 250, 240, 0.76);
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
@ -135,28 +135,28 @@ defineExpose({ closePopover });
|
||||
}
|
||||
|
||||
.node-state--success {
|
||||
border-color: #c8ead5;
|
||||
background: #effaf3;
|
||||
color: #1e7d49;
|
||||
border-color: #65743f;
|
||||
background: #e2e3c7;
|
||||
color: #536431;
|
||||
}
|
||||
|
||||
.node-state--failed,
|
||||
.node-state--stopped {
|
||||
border-color: #f1cecb;
|
||||
background: #fff3f2;
|
||||
color: #c33b32;
|
||||
border-color: #9a4035;
|
||||
background: #efd8cf;
|
||||
color: #8f332c;
|
||||
}
|
||||
|
||||
.node-state--paused {
|
||||
border-color: #d9dee7;
|
||||
background: #f3f5f8;
|
||||
color: #657084;
|
||||
border-color: #746b5d;
|
||||
background: #e7dcc5;
|
||||
color: #61594d;
|
||||
}
|
||||
|
||||
.node-state--running {
|
||||
border-color: #cbdcf8;
|
||||
background: #f0f6ff;
|
||||
color: #2f6fca;
|
||||
border-color: #406e72;
|
||||
background: #d9e5e2;
|
||||
color: #315f63;
|
||||
|
||||
.node-state__icon { animation: rotate-animation 1.2s linear infinite; }
|
||||
}
|
||||
@ -176,11 +176,12 @@ defineExpose({ closePopover });
|
||||
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 {
|
||||
margin-bottom: 8px;
|
||||
color: #344054;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
@ -188,7 +189,7 @@ defineExpose({ closePopover });
|
||||
.result-section__content {
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
color: #475467;
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -218,9 +218,10 @@ onMounted(() => {
|
||||
height: 36px;
|
||||
flex: 0 0 36px;
|
||||
place-items: center;
|
||||
border-radius: 7px;
|
||||
background: #f1f5f9;
|
||||
color: var(--node-accent, #475569);
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-muted);
|
||||
color: var(--node-accent, #406e72);
|
||||
|
||||
img {
|
||||
width: 22px;
|
||||
@ -240,7 +241,8 @@ onMounted(() => {
|
||||
|
||||
.node-title__name {
|
||||
overflow: hidden;
|
||||
color: #1f2937;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
line-height: 22px;
|
||||
@ -251,10 +253,10 @@ onMounted(() => {
|
||||
.node-title__type {
|
||||
flex: 0 0 auto;
|
||||
padding: 1px 6px;
|
||||
border: 1px solid #dfe4ec;
|
||||
border-radius: 4px;
|
||||
background: #f8fafc;
|
||||
color: #697386;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: #f0e6cf;
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -287,31 +289,32 @@ onMounted(() => {
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #7b8494;
|
||||
color: var(--retro-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #dfe4ec;
|
||||
background: #f8fafc;
|
||||
color: #344054;
|
||||
border-color: var(--retro-border-dark);
|
||||
background: var(--retro-bg-muted);
|
||||
color: var(--retro-text-primary);
|
||||
box-shadow: 2px 2px 0 rgba(33, 27, 18, 0.24);
|
||||
}
|
||||
|
||||
&.is-run:hover {
|
||||
border-color: #b7dfc7;
|
||||
background: #effaf3;
|
||||
color: #168447;
|
||||
border-color: #65743f;
|
||||
background: #e2e3c7;
|
||||
color: #536431;
|
||||
}
|
||||
|
||||
&.is-danger:hover {
|
||||
border-color: #f2c5c2;
|
||||
background: #fff3f2;
|
||||
color: #d93025;
|
||||
border-color: #9a4035;
|
||||
background: #efd8cf;
|
||||
color: #8f332c;
|
||||
}
|
||||
|
||||
&.is-confirm { color: #168447; }
|
||||
&.is-confirm { color: #65743f; }
|
||||
}
|
||||
|
||||
.node-title__editor {
|
||||
@ -325,7 +328,7 @@ onMounted(() => {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
margin-top: 8px;
|
||||
color: #7a8494;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
@ -173,7 +173,7 @@
|
||||
<template #edge-flow-edge="edgeProps">
|
||||
<FlowEdge v-bind="edgeProps" />
|
||||
</template>
|
||||
<Background color="#d9dee8" :gap="24" :size="1" />
|
||||
<Background color="#b8a98b" :gap="24" :size="1.2" />
|
||||
<Controls position="bottom-right" />
|
||||
</VueFlow>
|
||||
</el-main>
|
||||
@ -528,11 +528,11 @@ const defaultEdgeOptions = {
|
||||
interactionWidth: 32,
|
||||
markerEnd: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
color: "#ff6b35",
|
||||
color: "#8b4513",
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
style: { stroke: "#ff6b35", strokeWidth: 2 },
|
||||
style: { stroke: "#8b4513", strokeWidth: 2 },
|
||||
};
|
||||
|
||||
/**
|
||||
@ -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: 2px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-muted);
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@ -2753,8 +2753,10 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #e3e7ee;
|
||||
background: #fff;
|
||||
border-bottom: 3px solid var(--retro-border-strong);
|
||||
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;
|
||||
|
||||
.flow-heading {
|
||||
@ -2767,7 +2769,8 @@ onUnmounted(() => {
|
||||
.flow-heading__name {
|
||||
overflow: hidden;
|
||||
max-width: 320px;
|
||||
color: #1f2937;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 16px;
|
||||
font-weight: 650;
|
||||
text-overflow: ellipsis;
|
||||
@ -2780,10 +2783,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(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: #efe4ca;
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -2791,35 +2794,35 @@ onUnmounted(() => {
|
||||
.flow-status__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
border-radius: 0;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.flow-status--release,
|
||||
.flow-status--testRunFinish {
|
||||
border-color: #c8ead5;
|
||||
background: #effaf3;
|
||||
color: #1e7d49;
|
||||
border-color: #65743f;
|
||||
background: #e2e3c7;
|
||||
color: #536431;
|
||||
}
|
||||
|
||||
.flow-status--testRunning,
|
||||
.flow-status--updateData {
|
||||
border-color: #cbdcf8;
|
||||
background: #f0f6ff;
|
||||
color: #2f6fca;
|
||||
border-color: #406e72;
|
||||
background: #d9e5e2;
|
||||
color: #315f63;
|
||||
}
|
||||
|
||||
.flow-status--testRunError,
|
||||
.flow-status--stop {
|
||||
border-color: #f1cecb;
|
||||
background: #fff3f2;
|
||||
color: #c33b32;
|
||||
border-color: #9a4035;
|
||||
background: #efd8cf;
|
||||
color: #8f332c;
|
||||
}
|
||||
|
||||
.flow-status--pause {
|
||||
border-color: #ead9b8;
|
||||
background: #fff9eb;
|
||||
color: #9a6700;
|
||||
border-color: #a06a1e;
|
||||
background: #f1dec0;
|
||||
color: #82551a;
|
||||
}
|
||||
|
||||
.btn__container {
|
||||
@ -2838,7 +2841,7 @@ onUnmounted(() => {
|
||||
|
||||
.publish-actions {
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid #e4e8ef;
|
||||
border-left: 2px solid var(--retro-border-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2851,14 +2854,16 @@ onUnmounted(() => {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--retro-bg-page);
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
margin: 0;
|
||||
width: 272px;
|
||||
padding: 0;
|
||||
border-right: 1px solid #e3e7ee;
|
||||
background: #f8fafc;
|
||||
border-right: 3px solid var(--retro-border-strong);
|
||||
background: #f1e7d0;
|
||||
box-shadow: 3px 0 0 rgba(33, 27, 18, 0.18);
|
||||
}
|
||||
|
||||
.canvas-toolbar {
|
||||
@ -2869,26 +2874,31 @@ 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: 2px solid var(--retro-border-strong);
|
||||
border-radius: 0;
|
||||
background-color: rgba(255, 250, 240, 0.97);
|
||||
background-image: var(--retro-paper-texture);
|
||||
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
|
||||
|
||||
.el-button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #566174;
|
||||
color: var(--retro-text-regular);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.el-button + .el-button { margin-left: 2px; }
|
||||
|
||||
.el-button:hover {
|
||||
background: #f1f5f9;
|
||||
color: #1f2937;
|
||||
border-color: var(--retro-border-dark);
|
||||
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;
|
||||
height: 18px;
|
||||
margin: 0 4px;
|
||||
background: #e1e6ed;
|
||||
background: var(--retro-border-dark);
|
||||
}
|
||||
|
||||
.flow__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
background-color: #faf3df;
|
||||
background-image: var(--retro-paper-texture);
|
||||
|
||||
:deep(.vue-flow__node) {
|
||||
border: 0;
|
||||
@ -2923,7 +2935,7 @@ onUnmounted(() => {
|
||||
|
||||
:deep(.vue-flow__edge-path),
|
||||
:deep(.vue-flow__connection-path) {
|
||||
stroke: #ff6b35;
|
||||
stroke: #8b4513;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@ -2936,14 +2948,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: 2px solid var(--retro-primary);
|
||||
background: rgba(0, 128, 128, 0.1);
|
||||
box-shadow: 3px 3px 0 rgba(0, 92, 92, 0.18);
|
||||
}
|
||||
|
||||
:deep(.vue-flow__nodesselection-rect) {
|
||||
border: 1px dashed rgba(47, 128, 237, 0.72);
|
||||
background: rgba(47, 128, 237, 0.04);
|
||||
border: 2px dashed var(--retro-primary);
|
||||
background: rgba(0, 128, 128, 0.05);
|
||||
}
|
||||
|
||||
:deep(.vue-flow__handle) {
|
||||
@ -2960,16 +2972,32 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
:deep(.vue-flow__edge.selected .vue-flow__edge-path) {
|
||||
stroke: #1677ff;
|
||||
stroke: var(--retro-primary);
|
||||
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) {
|
||||
overflow: hidden;
|
||||
border: 1px solid #dfe4ec;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 6px 18px rgba(20, 33, 61, 0.12);
|
||||
border: 2px solid var(--retro-border-strong);
|
||||
border-radius: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -58,12 +58,13 @@ onMounted(() => {
|
||||
.group__container {
|
||||
width: 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;
|
||||
cursor: default;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #b8c5d8;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
box-shadow: 5px 5px 0 rgba(33, 27, 18, 0.26);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@ -78,12 +79,12 @@ onMounted(() => {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #64748b;
|
||||
background: #406e72;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #8fa0b8;
|
||||
box-shadow: 0 8px 24px rgba(31, 41, 55, 0.08);
|
||||
border-color: var(--retro-border-strong);
|
||||
box-shadow: 6px 6px 0 rgba(33, 27, 18, 0.3);
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -96,17 +97,18 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 4px;
|
||||
color: #475569;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.group-summary__count {
|
||||
padding: 2px 8px;
|
||||
border: 1px solid #d9e0ea;
|
||||
border-radius: 4px;
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-muted);
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@ -114,11 +116,12 @@ onMounted(() => {
|
||||
.child__container {
|
||||
min-height: 80px;
|
||||
flex: 1;
|
||||
background-color: #f6f8fb;
|
||||
background-image: radial-gradient(#d6dde8 0.7px, transparent 0.7px);
|
||||
background-color: #f4ead2;
|
||||
background-image: radial-gradient(#b9aa8e 0.8px, transparent 0.8px), var(--retro-paper-texture);
|
||||
background-size: 16px 16px;
|
||||
border: 1px dashed #aeb9c9;
|
||||
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);
|
||||
}
|
||||
|
||||
.el-row {
|
||||
|
||||
@ -21,5 +21,5 @@ defineExpose({ closePopover })
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
||||
@ -129,9 +129,10 @@ defineExpose({ closePopover })
|
||||
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
background-color: #f0e6cf;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
@ -147,15 +148,15 @@ defineExpose({ closePopover })
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background: var(--retro-primary);
|
||||
border-radius: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
color: var(--retro-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -213,9 +214,10 @@ defineExpose({ closePopover })
|
||||
|
||||
.output__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
background-color: #f0e6cf;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
@ -226,15 +228,15 @@ defineExpose({ closePopover })
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background: var(--retro-primary);
|
||||
border-radius: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
color: var(--retro-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -176,20 +176,24 @@ const setNodeName = (name) => {
|
||||
.group__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background-color: rgba(255, 250, 240, 0.98);
|
||||
background-image: var(--retro-paper-texture);
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #cfd7e6;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
box-shadow: 5px 5px 0 rgba(33, 27, 18, 0.26);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
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 {
|
||||
content: "";
|
||||
@ -198,13 +202,13 @@ const setNodeName = (name) => {
|
||||
left: 0;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
border-radius: 8px 0 0 8px;
|
||||
background: #ff6b35;
|
||||
border-radius: 0;
|
||||
background: #8b4513;
|
||||
}
|
||||
|
||||
&--dragover {
|
||||
border-color: #ff6b35;
|
||||
box-shadow: inset 0 0 0 2px rgba(255, 107, 53, 0.14);
|
||||
border-color: var(--retro-primary);
|
||||
box-shadow: inset 0 0 0 3px rgba(0, 128, 128, 0.16), 5px 5px 0 rgba(33, 27, 18, 0.26);
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -217,17 +221,18 @@ const setNodeName = (name) => {
|
||||
justify-content: space-between;
|
||||
height: 30px;
|
||||
margin-top: 4px;
|
||||
color: #344054;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loop-body-count {
|
||||
padding: 2px 8px;
|
||||
color: #667085;
|
||||
border: 1px solid #dfe4ec;
|
||||
background: #f8fafc;
|
||||
border-radius: 4px;
|
||||
color: var(--retro-text-regular);
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
background: var(--retro-bg-muted);
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@ -247,15 +252,17 @@ const setNodeName = (name) => {
|
||||
.child__container {
|
||||
min-height: 300px;
|
||||
flex: 1;
|
||||
background-color: #f7f9fc;
|
||||
border: 1px dashed #aeb9c9;
|
||||
border-radius: 6px;
|
||||
background-color: #f4ead2;
|
||||
background-image: var(--retro-paper-texture);
|
||||
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;
|
||||
}
|
||||
|
||||
&--dragover .child__container {
|
||||
background-color: #fff8f3;
|
||||
border-color: #ff6b35;
|
||||
background-color: #dce7db;
|
||||
border-color: var(--retro-primary);
|
||||
}
|
||||
|
||||
.el-row {
|
||||
|
||||
@ -47,12 +47,13 @@ const setNodeName = (name) => {
|
||||
.node__container {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
background-color: var(--retro-bg-white);
|
||||
background-image: var(--retro-paper-texture);
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
border-radius: 12px;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 5px 15px 0#00000008;
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
|
||||
position: relative;
|
||||
|
||||
.title__container {
|
||||
@ -73,7 +74,7 @@ const setNodeName = (name) => {
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
color: #737a87;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 12px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
@ -82,9 +83,10 @@ const setNodeName = (name) => {
|
||||
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
background-color: #f0e6cf;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
@ -100,15 +102,15 @@ const setNodeName = (name) => {
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background: #9a4035;
|
||||
border-radius: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
color: var(--retro-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -196,7 +198,7 @@ const setNodeName = (name) => {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.paramsTitle {
|
||||
color: #0c0d0e;
|
||||
color: var(--retro-text-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -237,10 +237,11 @@ defineExpose({ closePopover });
|
||||
width: 100%;
|
||||
min-height: 180px;
|
||||
padding: 16px;
|
||||
border: 1px solid #dfe4ec;
|
||||
border-left: 4px solid var(--node-accent, #b7791f);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-left: 6px solid var(--node-accent, #a06a1e);
|
||||
border-radius: 0;
|
||||
background-color: var(--retro-bg-white);
|
||||
background-image: var(--retro-paper-texture);
|
||||
// box-shadow: 0 8px 24px rgba(31, 41, 55, 0.09);
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
@ -249,7 +250,7 @@ defineExpose({ closePopover });
|
||||
.condition-summary {
|
||||
margin-top: 14px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e8ebf0;
|
||||
border-top: 1px dashed var(--retro-border-dark);
|
||||
}
|
||||
|
||||
.condition-summary__title,
|
||||
@ -261,13 +262,14 @@ defineExpose({ closePopover });
|
||||
|
||||
.condition-summary__title {
|
||||
margin-bottom: 8px;
|
||||
color: #344054;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.condition-summary__count {
|
||||
color: #98a2b3;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@ -276,9 +278,9 @@ defineExpose({ closePopover });
|
||||
min-height: 44px;
|
||||
margin-top: 6px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e4e8ef;
|
||||
border-radius: 6px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: #f0e6cf;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@ -287,19 +289,19 @@ defineExpose({ closePopover });
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -18px;
|
||||
border-top: 1px solid var(--node-accent, #b7791f);
|
||||
border-top: 2px solid var(--node-accent, #a06a1e);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.condition-summary__item--else {
|
||||
background: #fffaf0;
|
||||
background: #f1dec0;
|
||||
}
|
||||
|
||||
.condition-summary__order {
|
||||
width: 96px;
|
||||
flex: 0 0 96px;
|
||||
color: #3978c5;
|
||||
color: var(--retro-primary-dark);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
overflow: hidden;
|
||||
@ -309,7 +311,7 @@ defineExpose({ closePopover });
|
||||
|
||||
.condition-summary__text {
|
||||
flex: 1;
|
||||
color: #7a8494;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
@ -79,16 +79,18 @@ const deleteEdge = () => {
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 1px solid #efb8b4;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: #d93025;
|
||||
border: 2px solid #9a4035;
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-white);
|
||||
color: #8f332c;
|
||||
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 {
|
||||
border-color: #d93025;
|
||||
background: #fff1f0;
|
||||
border-color: #6f2823;
|
||||
background: #efd8cf;
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.34);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -260,31 +260,33 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flow-node-shell {
|
||||
--node-accent: #4f6b8a;
|
||||
--node-accent: #406e72;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
&--queue-drop-active .flow-node-content {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.35), 0 10px 24px rgba(47, 128, 237, 0.18);
|
||||
border-radius: 0;
|
||||
outline: 3px dashed var(--retro-primary);
|
||||
outline-offset: 4px;
|
||||
box-shadow: 6px 6px 0 rgba(0, 128, 128, 0.25);
|
||||
}
|
||||
|
||||
&--start,
|
||||
&--subStart { --node-accent: #239565; }
|
||||
&--subStart { --node-accent: #65743f; }
|
||||
|
||||
&--end,
|
||||
&--subEnd,
|
||||
&--stopLoop { --node-accent: #d45252; }
|
||||
&--stopLoop { --node-accent: #9a4035; }
|
||||
|
||||
&--branch { --node-accent: #b7791f; }
|
||||
&--branch { --node-accent: #a06a1e; }
|
||||
&--loop,
|
||||
&--currentLoop { --node-accent: #df6b35; }
|
||||
&--currentLoop { --node-accent: #8b4513; }
|
||||
&--http,
|
||||
&--code { --node-accent: #3978c5; }
|
||||
&--code { --node-accent: #406e72; }
|
||||
&--sdAgent,
|
||||
&--recognize { --node-accent: #7a5ab8; }
|
||||
&--recognize { --node-accent: #76543c; }
|
||||
|
||||
&--loop,
|
||||
&--selectArea {
|
||||
@ -292,24 +294,28 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
}
|
||||
|
||||
&:hover .flow-node-card {
|
||||
border-color: #cbd3df;
|
||||
box-shadow: 0 10px 26px rgba(31, 41, 55, 0.11);
|
||||
transform: translate(-1px, -1px);
|
||||
border-color: var(--retro-border-strong);
|
||||
box-shadow: 6px 6px 0 rgba(33, 27, 18, 0.3);
|
||||
}
|
||||
|
||||
&--selected .flow-node-card {
|
||||
border-color: #2f80ed;
|
||||
box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.2), 0 10px 26px rgba(31, 41, 55, 0.12);
|
||||
border-color: var(--retro-primary);
|
||||
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) {
|
||||
border-color: #2f80ed;
|
||||
box-shadow: none;
|
||||
border-color: var(--retro-primary);
|
||||
}
|
||||
|
||||
&--selected.flow-node-shell--loop :deep(.group__container),
|
||||
&--selected.flow-node-shell--selectArea :deep(.group__container) {
|
||||
border-color: #2f80ed;
|
||||
box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.18);
|
||||
border-color: var(--retro-primary);
|
||||
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 {
|
||||
overflow: hidden;
|
||||
margin-top: 8px;
|
||||
color: #667085;
|
||||
padding-top: 6px;
|
||||
border-top: 1px dashed var(--retro-border-dark);
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
text-overflow: ellipsis;
|
||||
@ -334,11 +342,12 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
height: auto;
|
||||
padding: 13px 14px 13px 16px;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border: 1px solid #dfe4ec;
|
||||
border-left: 4px solid var(--node-accent);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 7px 20px rgba(31, 41, 55, 0.08);
|
||||
background-color: rgba(255, 250, 240, 0.98);
|
||||
background-image: var(--retro-paper-texture);
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-left: 6px solid var(--node-accent);
|
||||
border-radius: 0;
|
||||
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
|
||||
@ -366,8 +375,9 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
height: 38px;
|
||||
flex: 0 0 38px;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: #f1f5f9;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-muted);
|
||||
}
|
||||
|
||||
:deep(.terminal-node__icon img) {
|
||||
@ -378,7 +388,8 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
:deep(.terminal-node__content) { min-width: 0; }
|
||||
|
||||
:deep(.terminal-node__title) {
|
||||
color: #1f2937;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
line-height: 21px;
|
||||
@ -387,7 +398,7 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
:deep(.terminal-node__description) {
|
||||
overflow: hidden;
|
||||
margin-top: 3px;
|
||||
color: #7a8494;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
text-overflow: ellipsis;
|
||||
@ -398,19 +409,20 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
.flow-handle {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid #fff;
|
||||
border: 2px solid var(--retro-bg-white);
|
||||
border-radius: 0;
|
||||
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;
|
||||
transition: transform 0.14s ease, box-shadow 0.14s ease;
|
||||
|
||||
&: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 {
|
||||
left: -6px;
|
||||
background: #fff;
|
||||
background: var(--retro-bg-white);
|
||||
border-color: var(--node-accent);
|
||||
}
|
||||
|
||||
|
||||
@ -150,11 +150,11 @@ const toVueEdge = (edge) => {
|
||||
interactionWidth: 32,
|
||||
markerEnd: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
color: "#ff6b35",
|
||||
color: "#8b4513",
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
style: { stroke: "#ff6b35", strokeWidth: 2 },
|
||||
style: { stroke: "#8b4513", strokeWidth: 2 },
|
||||
data: { backend: normalized },
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<div class="home-dashboard">
|
||||
<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="platform-state">
|
||||
<span class="state-dot"></span>
|
||||
@ -29,6 +36,12 @@
|
||||
</div>
|
||||
</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">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
@ -219,8 +232,8 @@ const features = [
|
||||
title: '设备接入',
|
||||
description: '配置机器人与终端设备',
|
||||
icon: SetUp,
|
||||
color: '#2563eb',
|
||||
background: '#eaf2ff',
|
||||
color: '#006b6b',
|
||||
background: '#d8e5dc',
|
||||
menuTitles: ['设备注册', '设备配置管理', '设备管理'],
|
||||
fallback: '/device/register',
|
||||
},
|
||||
@ -228,8 +241,8 @@ const features = [
|
||||
title: '流程编排',
|
||||
description: '构建可视化测试工作流',
|
||||
icon: Operation,
|
||||
color: '#0f8a73',
|
||||
background: '#e7f6f2',
|
||||
color: '#65743f',
|
||||
background: '#e2e3c7',
|
||||
menuTitles: ['任务流程编排', '流程编排'],
|
||||
fallback: '/flow',
|
||||
},
|
||||
@ -237,8 +250,8 @@ const features = [
|
||||
title: '巡检执行',
|
||||
description: '调度机器人巡检任务',
|
||||
icon: Monitor,
|
||||
color: '#c56a16',
|
||||
background: '#fff3e5',
|
||||
color: '#965b24',
|
||||
background: '#f1dec0',
|
||||
menuTitles: ['执行任务', '运行任务', '巡检任务执行'],
|
||||
fallback: '/inspection/runTask',
|
||||
},
|
||||
@ -246,8 +259,8 @@ const features = [
|
||||
title: '巡检配置',
|
||||
description: '管理地图、点位与任务',
|
||||
icon: Grid,
|
||||
color: '#6b57c7',
|
||||
background: '#f0edff',
|
||||
color: '#76543c',
|
||||
background: '#ead8c8',
|
||||
menuTitles: ['巡检任务', '巡检地图', '地图管理'],
|
||||
fallback: '/inspection/task',
|
||||
},
|
||||
@ -255,8 +268,8 @@ const features = [
|
||||
title: '测试记录',
|
||||
description: '追踪执行结果与日志',
|
||||
icon: DocumentChecked,
|
||||
color: '#d14343',
|
||||
background: '#ffeded',
|
||||
color: '#8f3f35',
|
||||
background: '#efd8cf',
|
||||
menuTitles: ['任务历史', '测试记录', '任务实例', '执行记录'],
|
||||
fallback: '/test/history',
|
||||
},
|
||||
@ -264,8 +277,8 @@ const features = [
|
||||
title: '语料中心',
|
||||
description: '管理语音与合成资源',
|
||||
icon: Headset,
|
||||
color: '#087f9c',
|
||||
background: '#e8f7fa',
|
||||
color: '#406e72',
|
||||
background: '#d9e5e2',
|
||||
menuTitles: ['语料库', '语料管理', '车载语料'],
|
||||
fallback: '/corpusManger/corpus',
|
||||
},
|
||||
@ -458,18 +471,23 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
border-radius: 6px;
|
||||
border: 3px solid var(--retro-border-strong);
|
||||
border-radius: 0;
|
||||
background-image: url('../assets/images/index-background.jpg');
|
||||
background-position: center 48%;
|
||||
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 {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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,
|
||||
@ -487,7 +505,7 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin-bottom: 13px;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
color: rgba(255, 244, 220, 0.86);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -495,9 +513,10 @@ onBeforeUnmount(() => {
|
||||
.state-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #35d2a0;
|
||||
box-shadow: 0 0 0 5px rgba(53, 210, 160, 0.16);
|
||||
border: 1px solid #fff4dc;
|
||||
border-radius: 0;
|
||||
background: #d7b35f;
|
||||
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.34);
|
||||
animation: status-pulse 2.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@ -506,13 +525,15 @@ onBeforeUnmount(() => {
|
||||
font-size: 32px;
|
||||
line-height: 1.28;
|
||||
font-weight: 700;
|
||||
font-family: var(--retro-font-display);
|
||||
letter-spacing: 0;
|
||||
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.46);
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
max-width: 670px;
|
||||
margin: 12px 0 22px;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
color: rgba(255, 244, 220, 0.8);
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
@ -526,30 +547,31 @@ onBeforeUnmount(() => {
|
||||
.hero-actions :deep(.el-button) {
|
||||
min-width: 126px;
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
border-radius: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-actions :deep(.el-button--primary) {
|
||||
border-color: #1688e7;
|
||||
background: #1688e7;
|
||||
border-color: #d8c497;
|
||||
background: #007272;
|
||||
color: #fffaf0;
|
||||
}
|
||||
|
||||
.cockpit-button {
|
||||
border-color: rgba(255, 255, 255, 0.42) !important;
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
color: #fff !important;
|
||||
border-color: #d8c497 !important;
|
||||
background: rgba(59, 52, 42, 0.72) !important;
|
||||
color: #fff4dc !important;
|
||||
}
|
||||
|
||||
.cockpit-button:hover {
|
||||
border-color: #fff !important;
|
||||
background: rgba(255, 255, 255, 0.18) !important;
|
||||
border-color: #fff4dc !important;
|
||||
background: rgba(91, 75, 54, 0.88) !important;
|
||||
}
|
||||
|
||||
.hero-time {
|
||||
min-width: 190px;
|
||||
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;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
@ -560,12 +582,13 @@ onBeforeUnmount(() => {
|
||||
font-size: 42px;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
font-family: var(--retro-font-display);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.hero-time > span:last-child,
|
||||
.time-label {
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
color: rgba(255, 244, 220, 0.76);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@ -592,6 +615,8 @@ onBeforeUnmount(() => {
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
font-family: var(--retro-font-display);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
@ -600,6 +625,7 @@ onBeforeUnmount(() => {
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
line-height: 1.35;
|
||||
font-family: var(--retro-font-display);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@ -620,16 +646,18 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 6px;
|
||||
background: var(--el-bg-color);
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--el-border-color);
|
||||
box-shadow: 0 10px 24px rgba(28, 44, 64, 0.08);
|
||||
transform: translate(-2px, -2px);
|
||||
border-color: var(--retro-border-strong);
|
||||
box-shadow: 5px 5px 0 rgba(33, 27, 18, 0.3);
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
@ -638,14 +666,15 @@ onBeforeUnmount(() => {
|
||||
flex: 0 0 48px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.metric-icon--blue { color: #2563eb; background: #eaf2ff; }
|
||||
.metric-icon--green { color: #0f8a73; background: #e7f6f2; }
|
||||
.metric-icon--orange { color: #c56a16; background: #fff3e5; }
|
||||
.metric-icon--red { color: #d14343; background: #ffeded; }
|
||||
.metric-icon--blue { color: #006b6b; background: #d8e5dc; }
|
||||
.metric-icon--green { color: #65743f; background: #e2e3c7; }
|
||||
.metric-icon--orange { color: #965b24; background: #f1dec0; }
|
||||
.metric-icon--red { color: #8f3f35; background: #efd8cf; }
|
||||
|
||||
.metric-content {
|
||||
min-width: 0;
|
||||
@ -694,9 +723,11 @@ onBeforeUnmount(() => {
|
||||
.dashboard-panel {
|
||||
min-width: 0;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 6px;
|
||||
background: var(--el-bg-color);
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background-color: var(--el-bg-color);
|
||||
background-image: var(--retro-paper-texture);
|
||||
box-shadow: var(--retro-shadow-small);
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
@ -706,6 +737,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
.text-action {
|
||||
border: 0;
|
||||
border-bottom: 1px dashed currentColor;
|
||||
padding: 5px 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -731,7 +763,7 @@ onBeforeUnmount(() => {
|
||||
min-height: 63px;
|
||||
padding: 11px 6px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--el-border-color-extra-light);
|
||||
border-top: 1px solid var(--retro-border-dark);
|
||||
display: grid;
|
||||
grid-template-columns: 10px minmax(130px, 1fr) auto 18px;
|
||||
align-items: center;
|
||||
@ -753,7 +785,7 @@ onBeforeUnmount(() => {
|
||||
.task-status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
border-radius: 0;
|
||||
background: var(--el-color-info);
|
||||
}
|
||||
|
||||
@ -807,7 +839,8 @@ onBeforeUnmount(() => {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--el-color-success-light-9);
|
||||
@ -835,13 +868,13 @@ onBeforeUnmount(() => {
|
||||
min-width: 0;
|
||||
min-height: 76px;
|
||||
padding: 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 38px minmax(0, 1fr) 14px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
background: var(--el-fill-color-extra-light);
|
||||
background: #f5ecd9;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
@ -849,8 +882,9 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.feature-item:hover {
|
||||
border-color: var(--el-border-color);
|
||||
background: var(--el-fill-color-light);
|
||||
border-color: var(--retro-primary);
|
||||
background: #e8dcc0;
|
||||
box-shadow: 2px 2px 0 rgba(33, 27, 18, 0.24);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
@ -858,7 +892,8 @@ onBeforeUnmount(() => {
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@ -896,7 +931,7 @@ onBeforeUnmount(() => {
|
||||
.recent-item {
|
||||
min-width: 0;
|
||||
min-height: 62px;
|
||||
border-top: 1px solid var(--el-border-color-extra-light);
|
||||
border-top: 1px solid var(--retro-border-dark);
|
||||
display: grid;
|
||||
grid-template-columns: 32px minmax(0, 1fr) auto auto;
|
||||
align-items: center;
|
||||
@ -955,11 +990,12 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
: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 {
|
||||
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,
|
||||
@ -968,8 +1004,8 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
@keyframes status-pulse {
|
||||
0%, 100% { box-shadow: 0 0 0 4px rgba(53, 210, 160, 0.12); }
|
||||
50% { box-shadow: 0 0 0 7px rgba(53, 210, 160, 0.04); }
|
||||
0%, 100% { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.34); }
|
||||
50% { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); }
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@ -1005,7 +1041,7 @@ onBeforeUnmount(() => {
|
||||
.hero-time {
|
||||
width: 100%;
|
||||
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;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@ -114,7 +114,7 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="配置状态" prop="configStatus">
|
||||
<!-- <el-table-column align="center" label="配置状态" prop="configStatus">
|
||||
<template #default="scope">
|
||||
<TableTags
|
||||
:options="[
|
||||
@ -132,7 +132,7 @@
|
||||
:value="scope.row.configStatus"
|
||||
></TableTags>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="创建人"
|
||||
|
||||
@ -87,7 +87,7 @@
|
||||
<el-table-column label="系统版本" prop="osVersion" />
|
||||
<el-table-column label="操作系统" prop="osSystem" width="100" />
|
||||
<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">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
|
||||
@ -51,9 +51,9 @@
|
||||
<el-button icon="Edit" link type="primary" @click="handleUpdate(scope.row)">
|
||||
修改
|
||||
</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)">复制
|
||||
</el-button>
|
||||
</el-button> -->
|
||||
<el-button icon="Cpu" link type="primary" @click="handleBindCase(scope.row)">绑定用例
|
||||
</el-button>
|
||||
<el-button icon="Delete" link type="primary" @click="handleDelete(scope.row)">删除
|
||||
|
||||
@ -86,7 +86,7 @@
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="配置状态" prop="configStatus">
|
||||
<!-- <el-table-column align="center" label="配置状态" prop="configStatus">
|
||||
<template #default="scope">
|
||||
<TableTags
|
||||
:options="[
|
||||
@ -104,7 +104,7 @@
|
||||
:value="scope.row.configStatus"
|
||||
></TableTags>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="280">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
|
||||
@ -167,10 +167,16 @@ getCookie()
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.login {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
overflow: hidden;
|
||||
background-color: rgba(250, 243, 223, 0.76);
|
||||
background-image: var(--retro-paper-texture);
|
||||
}
|
||||
.login::before {
|
||||
content: "";
|
||||
@ -180,44 +186,62 @@ getCookie()
|
||||
background-image: url("../assets/images/login-background.jpg");
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
margin: 0 auto 30px;
|
||||
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 {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
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;
|
||||
padding: 25px 25px 5px 25px;
|
||||
max-width: 100%;
|
||||
padding: 32px 30px 14px;
|
||||
.el-input {
|
||||
height: 40px;
|
||||
height: 44px;
|
||||
input {
|
||||
height: 40px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 0px;
|
||||
height: 43px;
|
||||
width: 15px;
|
||||
margin-left: 0;
|
||||
color: var(--retro-primary-dark);
|
||||
}
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
color: var(--retro-text-secondary);
|
||||
}
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 40px;
|
||||
height: 44px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
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 {
|
||||
@ -227,13 +251,32 @@ getCookie()
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
color: var(--retro-text-regular);
|
||||
font-family: var(--retro-font-display);
|
||||
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 {
|
||||
height: 40px;
|
||||
padding-left: 12px;
|
||||
height: 44px;
|
||||
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>
|
||||
|
||||
@ -94,24 +94,24 @@
|
||||
prop="taskName"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
<!-- <el-table-column
|
||||
align="center"
|
||||
label="分组名称"
|
||||
prop="groupName"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
/> -->
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="任务描述"
|
||||
prop="taskDesc"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
<!-- <el-table-column
|
||||
align="center"
|
||||
label="备注"
|
||||
prop="remark"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
/> -->
|
||||
<el-table-column align="center" label="状态" prop="status">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
|
||||
@ -118,7 +118,7 @@
|
||||
prop="detectDesc"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column align="center" label="所属分组" prop="groupId">
|
||||
<!-- <el-table-column align="center" label="所属分组" prop="groupId">
|
||||
<template #default="scope">
|
||||
{{
|
||||
groupList?.find((item) => item.value === scope.row.groupId)[
|
||||
@ -126,7 +126,7 @@
|
||||
]
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="备注"
|
||||
@ -146,7 +146,7 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="配置状态" prop="isDeploy">
|
||||
<!-- <el-table-column align="center" label="配置状态" prop="isDeploy">
|
||||
<template #default="scope">
|
||||
<TableTags
|
||||
:options="[
|
||||
@ -164,7 +164,7 @@
|
||||
:value="scope.row.isDeploy"
|
||||
></TableTags>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user