SmartBench/CMVR-IOT-UI
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 暗黑模式

Browse Source
This commit is contained in:
zhanghao 2025-12-02 09:10:14 +08:00
parent e89524f242
commit 75df1a177c
2 changed files with 531 additions and 478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,223 +1,286 @@
// base color // base color
$blue: #324157; $blue: #324157;
$light-blue: #333c46; $light-blue: #333c46;
$red: #C03639; $red: #c03639;
$pink: #E65D6E; $pink: #e65d6e;
$green: #30B08F; $green: #30b08f;
$tiffany: #4AB7BD; $tiffany: #4ab7bd;
$yellow: #FEC171; $yellow: #fec171;
$panGreen: #30B08F; $panGreen: #30b08f;
// 默认主题变量 // 默认主题变量
$menuText: #bfcbd9; $menuText: #bfcbd9;
$menuActiveText: #409eff; $menuActiveText: #409eff;
$menuBg: #304156; $menuBg: #304156;
$menuHover: #263445; $menuHover: #263445;
// 浅色主题theme-light // 浅色主题theme-light
$menuLightBg: #ffffff; $menuLightBg: #ffffff;
$menuLightHover: #f0f1f5; $menuLightHover: #f0f1f5;
$menuLightText: #303133; $menuLightText: #303133;
$menuLightActiveText: #409EFF; $menuLightActiveText: #409eff;
// 基础变量 // 基础变量
$base-sidebar-width: 200px; $base-sidebar-width: 200px;
$sideBarWidth: 200px; $sideBarWidth: 200px;
// 菜单暗色变量 // 菜单暗色变量
$base-menu-color: #bfcbd9; $base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5; $base-menu-color-active: #f4f4f5;
$base-menu-background: #304156; $base-menu-background: #304156;
$base-sub-menu-background: #1f2d3d; $base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528; $base-sub-menu-hover: #001528;
// 组件变量 // 组件变量
$--color-primary: #409EFF; $--color-primary: #409eff;
$--color-success: #67C23A; $--color-success: #67c23a;
$--color-warning: #E6A23C; $--color-warning: #e6a23c;
$--color-danger: #F56C6C; $--color-danger: #f56c6c;
$--color-info: #909399; $--color-info: #909399;
:export { :export {
menuText: $menuText; menuText: $menuText;
menuActiveText: $menuActiveText; menuActiveText: $menuActiveText;
menuBg: $menuBg; menuBg: $menuBg;
menuHover: $menuHover; menuHover: $menuHover;
menuLightBg: $menuLightBg; menuLightBg: $menuLightBg;
menuLightHover: $menuLightHover; menuLightHover: $menuLightHover;
menuLightText: $menuLightText; menuLightText: $menuLightText;
menuLightActiveText: $menuLightActiveText; menuLightActiveText: $menuLightActiveText;
sideBarWidth: $sideBarWidth; sideBarWidth: $sideBarWidth;
// 导出基础颜色 // 导出基础颜色
blue: $blue; blue: $blue;
lightBlue: $light-blue; lightBlue: $light-blue;
red: $red; red: $red;
pink: $pink; pink: $pink;
green: $green; green: $green;
tiffany: $tiffany; tiffany: $tiffany;
yellow: $yellow; yellow: $yellow;
panGreen: $panGreen; panGreen: $panGreen;
// 导出组件颜色 // 导出组件颜色
colorPrimary: $--color-primary; colorPrimary: $--color-primary;
colorSuccess: $--color-success; colorSuccess: $--color-success;
colorWarning: $--color-warning; colorWarning: $--color-warning;
colorDanger: $--color-danger; colorDanger: $--color-danger;
colorInfo: $--color-info; colorInfo: $--color-info;
} }
// CSS变量定义 // CSS变量定义
:root { :root {
/* 亮色模式变量 */ /* 亮色模式变量 */
--sidebar-bg: #{$menuBg}; --sidebar-bg: #{$menuBg};
--sidebar-text: #{$menuText}; --sidebar-text: #{$menuText};
--menu-hover: #{$menuHover}; --menu-hover: #{$menuHover};
--navbar-bg: #ffffff; --navbar-bg: #ffffff;
--navbar-text: #303133; --navbar-text: #303133;
/* splitpanes default-theme 变量 */ /* splitpanes default-theme 变量 */
--splitpanes-default-bg: #ffffff; --splitpanes-default-bg: #ffffff;
--main-fill-bg:rgb(242, 243, 245); --main-fill-bg: rgb(242, 243, 245);
} }
// 暗黑模式变量 // 暗黑模式变量
html.dark { html.dark {
--main-fill-bg:rgba(255, 255, 255, .08); --main-fill-bg: rgba(255, 255, 255, 0.08);
/* 默认通用 */ /* 默认通用 */
--el-bg-color: #141414; --el-bg-color: #141414;
--el-bg-color-overlay: #1d1e1f; --el-bg-color-overlay: #1d1e1f;
--el-text-color-primary: #ffffff; --el-text-color-primary: #ffffff;
--el-text-color-regular: #d0d0d0; --el-text-color-regular: #d0d0d0;
--el-border-color: #434343; --el-border-color: #434343;
--el-border-color-light: #434343; --el-border-color-light: #434343;
/* 侧边栏 */ /* 侧边栏 */
--sidebar-bg: #141414; --sidebar-bg: #141414;
--sidebar-text: #ffffff; --sidebar-text: #ffffff;
--menu-hover: #2d2d2d; --menu-hover: #2d2d2d;
--menu-active-text: #{$menuActiveText}; --menu-active-text: #{$menuActiveText};
/* 顶部导航栏 */ /* 顶部导航栏 */
--navbar-bg: #141414; --navbar-bg: #141414;
--navbar-text: #ffffff; --navbar-text: #ffffff;
--navbar-hover: #141414; --navbar-hover: #141414;
/* 标签栏 */ /* 标签栏 */
--tags-bg: #141414; --tags-bg: #141414;
--tags-item-bg: #1d1e1f; --tags-item-bg: #1d1e1f;
--tags-item-border: #303030; --tags-item-border: #303030;
--tags-item-text: #d0d0d0; --tags-item-text: #d0d0d0;
--tags-item-hover: #2d2d2d; --tags-item-hover: #2d2d2d;
--tags-close-hover: #64666a; --tags-close-hover: #64666a;
/* splitpanes 组件暗黑模式变量 */ /* splitpanes 组件暗黑模式变量 */
--splitpanes-bg: #141414; --splitpanes-bg: #141414;
--splitpanes-border: #303030; --splitpanes-border: #303030;
--splitpanes-splitter-bg: #1d1e1f; --splitpanes-splitter-bg: #1d1e1f;
--splitpanes-splitter-hover-bg: #2d2d2d; --splitpanes-splitter-hover-bg: #2d2d2d;
/* blockquote 暗黑模式变量 */ /* blockquote 暗黑模式变量 */
--blockquote-bg: #1d1e1f; --blockquote-bg: #1d1e1f;
--blockquote-border: #303030; --blockquote-border: #303030;
--blockquote-text: #d0d0d0; --blockquote-text: #d0d0d0;
/* Cron 时间表达式 模式变量 */ /* Cron 时间表达式 模式变量 */
--cron-border: #303030; --cron-border: #303030;
/* splitpanes default-theme 暗黑模式变量 */ /* splitpanes default-theme 暗黑模式变量 */
--splitpanes-default-bg: #141414; --splitpanes-default-bg: #141414;
/* 侧边栏菜单覆盖 */ /* 侧边栏菜单覆盖 */
.sidebar-container { .sidebar-container {
.el-menu-item, .menu-title { .el-menu-item,
color: var(--el-text-color-regular); .menu-title {
} color: var(--el-text-color-regular);
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title, }
& .theme-dark .el-sub-menu .el-menu-item { & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
background-color: var(--el-bg-color) !important; & .theme-dark .el-sub-menu .el-menu-item {
} background-color: var(--el-bg-color) !important;
} }
}
/* 顶部栏栏菜单覆盖 */
.el-menu--horizontal { /* 顶部栏栏菜单覆盖 */
.el-menu-item { .el-menu--horizontal {
&:not(.is-disabled) { .el-menu-item {
&:hover, &:not(.is-disabled) {
&:focus { &:hover,
background-color: var(--navbar-hover) !important; &:focus {
} background-color: var(--navbar-hover) !important;
} }
} }
} }
}
/* 分割窗格覆盖 */
.splitpanes { /* 分割窗格覆盖 */
background-color: var(--splitpanes-bg); .splitpanes {
background-color: var(--splitpanes-bg);
.splitpanes__pane {
background-color: var(--splitpanes-bg); .splitpanes__pane {
border-color: var(--splitpanes-border); background-color: var(--splitpanes-bg);
} border-color: var(--splitpanes-border);
}
.splitpanes__splitter {
background-color: var(--splitpanes-splitter-bg); .splitpanes__splitter {
border-color: var(--splitpanes-border); background-color: var(--splitpanes-splitter-bg);
border-color: var(--splitpanes-border);
&:hover {
background-color: var(--splitpanes-splitter-hover-bg); &:hover {
} background-color: var(--splitpanes-splitter-hover-bg);
}
&:before,
&:after { &:before,
background-color: var(--splitpanes-border); &:after {
} background-color: var(--splitpanes-border);
} }
} }
}
/* 表格样式覆盖 */
.el-table { /* 表格样式覆盖 */
--el-table-header-bg-color: var(--el-bg-color-overlay) !important; .el-table {
--el-table-header-text-color: var(--el-text-color-regular) !important; --el-table-header-bg-color: var(--el-bg-color-overlay) !important;
--el-table-border-color: var(--el-border-color-light) !important; --el-table-header-text-color: var(--el-text-color-regular) !important;
--el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important; --el-table-border-color: var(--el-border-color-light) !important;
--el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
th { .el-table__header-wrapper,
background-color: var(--el-bg-color-overlay, #f8f8f9) !important; .el-table__fixed-header-wrapper {
color: var(--el-text-color-regular, #515a6e); th {
} background-color: var(--el-bg-color-overlay, #f8f8f9) !important;
} color: var(--el-text-color-regular, #515a6e);
} }
}
/* 树组件高亮样式覆盖 */ }
.el-tree {
.el-tree-node.is-current > .el-tree-node__content { /* 树组件高亮样式覆盖 */
background-color: var(--el-bg-color-overlay) !important; .el-tree {
color: var(--el-color-primary); .el-tree-node.is-current > .el-tree-node__content {
} background-color: var(--el-bg-color-overlay) !important;
color: var(--el-color-primary);
.el-tree-node__content:hover { }
background-color: var(--el-bg-color-overlay);
} .el-tree-node__content:hover {
} background-color: var(--el-bg-color-overlay);
}
/* 下拉菜单样式覆盖 */ }
.el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover{
background-color: var(--navbar-hover) !important; /* 下拉菜单样式覆盖 */
} .el-dropdown-menu__item:not(.is-disabled):focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
/* blockquote样式覆盖 */ background-color: var(--navbar-hover) !important;
blockquote { }
background-color: var(--blockquote-bg) !important;
border-left-color: var(--blockquote-border) !important; /* blockquote样式覆盖 */
color: var(--blockquote-text) !important; blockquote {
} background-color: var(--blockquote-bg) !important;
border-left-color: var(--blockquote-border) !important;
/* 时间表达式标题样式覆盖 */ color: var(--blockquote-text) !important;
.popup-result .title { }
background: var(--cron-border);
} /* 时间表达式标题样式覆盖 */
.popup-result .title {
} background: var(--cron-border);
}
.el-aside {
background: #4d4d4d;
}
.el-header {
border-bottom: 1px solid #282828 !important;
}
.el-collapse {
--el-collapse-header-bg-color: #000;
.collapseItem {
.el-collapse-item__wrap {
background-color: #3c3c3c;
.node {
background-color: #000;
.title_container {
color: #fff;
}
.node_desc {
color: #f7f7f7;
}
}
}
}
}
.node__container {
background: #000;
// border: 2px solid #000;
.subTitle {
color: #fbfbfb !important;
}
}
.node__box {
background: #000;
border: 2px solid #000;
.subTitle {
color: #fbfbfb !important;
}
.input__container {
background: #2d2d2d;
.title {
.text {
color: #fbfbfb !important;
}
}
}
}
.lf-canvas-overlay {
background: #3e3e3e !important;
}
}

500
src/views/flow/nodes/common/endNode.vue
View File

@ -1,256 +1,246 @@
<template> <template>
<div class="node__container" > <div class="node__container" >
<!-- 状态栏 --> <!-- 状态栏 -->
<div class="title__container"> <div class="title__container">
<div class="title"> <div class="title">
<img src="../../icon/end.svg" alt=""> <img src="../../icon/end.svg" alt="">
<span class="text">end</span> <span class="text">end</span>
</div> </div>
<div class="subTitle">工作流的终止节点，结束整个流程</div> <div class="subTitle">工作流的终止节点，结束整个流程</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
const props = defineProps({ const props = defineProps({
model: Object, model: Object,
graphModel: Object, graphModel: Object,
properties: Object, properties: Object,
text: String, text: String,
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@keyframes rotateAnimation { .node__container {
from { width: 300px;
transform: rotate(0deg); height: auto;
} background: #fff;
to { padding: 12px;
transform: rotate(360deg); cursor: default;
} border-radius: 12px;
} border: 2px solid transparent;
box-shadow: 0 5px 15px 0#00000008;
.node__container { position: relative;
width: 300px;
height: auto; .state__container {
background: #fff; display: none;
padding: 12px; margin-bottom: 8px;
cursor: default;
border-radius: 12px; .context {
border: 2px solid white; display: flex;
box-shadow: 0 5px 15px 0#00000008; align-items: center;
position: relative; justify-content: space-between;
padding: 4px;
.state__container { font-size: 12px;
display: none;
margin-bottom: 8px; .state {
display: flex;
.context { align-items: center;
display: flex;
align-items: center; .text {
justify-content: space-between; margin: 0 8px;
padding: 4px; }
font-size: 12px; }
.state { .resultText {
display: flex; color: #1664ff;
align-items: center; cursor: pointer;
}
.text { }
margin: 0 8px; }
}
} .nodeState-success {
display: block;
.resultText { background-color: #eef9f1;
color: #1664ff;
cursor: pointer; .el-icon {
} font-size: 16px;
} color: #309256;
} }
}
.nodeState-success {
display: block; .nodeState-error{
background-color: #eef9f1; display: block;
background-color: #fdf5f5;
.el-icon {
font-size: 16px; .el-icon {
color: #309256; font-size: 16px;
} color: #ee3f38;
} }
}
.nodeState-error{
display: block; .nodeState-running{
background-color: #fdf5f5; display: block;
background-color: #f4f7ff;
.el-icon {
font-size: 16px; .el-icon {
color: #ee3f38; color: #68a2e4;
} font-size: 16px;
} }
}
.nodeState-running{
display: block; .title__container {
background-color: #f4f7ff; .title {
display: flex;
.el-icon { align-items: center;
color: #68a2e4;
font-size: 16px; img {
animation: rotateAnimation 2s linear infinite; width: 24px;
} height: 24px;
} }
.title__container { .text {
.title { font-size: 16px;
display: flex; font-weight: bold;
align-items: center; margin-left: 12px;
}
img { }
width: 24px;
height: 24px; .subTitle {
} color: #737a87;
font-size: 12px;
.text { margin: 8px 0;
font-size: 16px; }
font-weight: bold;
margin-left: 12px; }
}
} .input__container {
width: 100%;
.subTitle { background-color: #fafbfc;
color: #737a87; padding: 0 16px;
font-size: 12px; border-radius: 8px;
margin: 8px 0; box-sizing: border-box;
}
.title {
} height: 32px;
display: flex;
.input__container { align-items: center;
width: 100%; justify-content: space-between;
background-color: #fafbfc;
padding: 0 16px; .left {
border-radius: 8px; display: flex;
box-sizing: border-box; align-items: center;
.title { .tag {
height: 32px; width: 3px;
display: flex; height: 16px;
align-items: center; background: #1664ff;
justify-content: space-between; border-radius: 0 4px 4px 0;
margin-right: 12px;
.left { }
display: flex;
align-items: center; .text {
font-size: 16px;
.tag { font-weight: 700;
width: 3px; color: #0c0d0e;
height: 16px; }
background: #1664ff; }
border-radius: 0 4px 4px 0;
margin-right: 12px; .right {
} .addFormItem {
border: none;
.text { background: transparent;
font-size: 16px; cursor: pointer;
font-weight: 700; }
color: #0c0d0e; }
} }
}
.form__container {
.right { margin: 12px 0;
.addFormItem {
border: none; .sub-properties {
background: transparent; margin-left: 10px;
cursor: pointer; .zw {
} margin-left: 15px;
} &::before {
} content: "";
position: absolute;
.form__container { left: 0;
margin: 12px 0; top: -4px;
width: 10px;
.sub-properties { border-left: 1px solid gray;
margin-left: 10px; border-bottom: 1px solid gray;
.zw { border-bottom-left-radius: 4px;
margin-left: 15px; background-color: transparent;
&::before { height: 24px;
content: ""; }
position: absolute; }
left: 0; }
top: -4px;
width: 10px; .gSon-properties {
border-left: 1px solid gray; margin-left: 10px;
border-bottom: 1px solid gray; .zw {
border-bottom-left-radius: 4px; margin-left: 15px;
background-color: transparent; &::before {
height: 24px; content: "";
} position: absolute;
} left: 0;
} top: -4px;
width: 10px;
.gSon-properties { border-left: 1px solid gray;
margin-left: 10px; border-bottom: 1px solid gray;
.zw { border-bottom-left-radius: 4px;
margin-left: 15px; background-color: transparent;
&::before { height: 24px;
content: ""; }
position: absolute; }
left: 0; }
top: -4px;
width: 10px; .deleteBtn {
border-left: 1px solid gray; margin-bottom: 22px;
border-bottom: 1px solid gray; cursor: pointer;
border-bottom-left-radius: 4px; }
background-color: transparent;
height: 24px; .addBtn {
} margin-bottom: 22px;
} cursor: pointer;
} }
.deleteBtn { :deep(.el-row) {
margin-bottom: 22px; align-items: end;
cursor: pointer;
} .el-input {
--el-input-width: 140px;
.addBtn { }
margin-bottom: 22px;
cursor: pointer; .el-select {
} --el-select-width: 140px;
}
:deep(.el-row) {
align-items: end; .el-cascader {
--el-form-inline-content-width: 140px;
.el-input { }
--el-input-width: 140px; }
} }
}
.el-select { }
--el-select-width: 140px; </style>
}
<style lang="scss">
.el-cascader { .popover__container {
--el-form-inline-content-width: 140px; min-width: 300px !important;
}
} .params__container {
} margin-bottom: 12px;
}
} .paramsTitle {
</style> color: #0c0d0e;
font-size: 14px;
<style lang="scss"> font-weight: 500;
.popover__container { }
min-width: 300px !important; }
}
.params__container {
margin-bottom: 12px;
.paramsTitle {
color: #0c0d0e;
font-size: 14px;
font-weight: 500;
}
}
}
</style> </style>