From a59028227f24faf19c498f341d560b599a7f3152 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Fri, 28 Aug 2026 08:47:39 +0800
Subject: [PATCH] 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.
---
 index.html                                    |  17 +-
 src/assets/styles/variables.module.scss       |  28 +-
 src/layout/components/Settings/index.vue      |   4 +-
 src/main.js                                   |   1 +
 src/store/modules/settings.js                 |   2 +-
 src/styles/retro.css                          | 522 ++++++++++++++++++
 src/views/flow/components/Aside.vue           |  56 +-
 src/views/flow/components/NodeState.vue       |  45 +-
 src/views/flow/components/NodeTitle.vue       |  45 +-
 src/views/flow/index.vue                      | 130 +++--
 .../flow/nodes/common/selectAreaNode.vue      |  35 +-
 src/views/flow/nodes/function/actionQueue.vue |   2 +-
 src/views/flow/nodes/function/currentLoop.vue |  22 +-
 src/views/flow/nodes/function/loop.vue        |  45 +-
 src/views/flow/nodes/function/stopLoop.vue    |  24 +-
 src/views/flow/nodes/function/switch.vue      |  30 +-
 src/views/flow/vue-flow/FlowEdge.vue          |  16 +-
 src/views/flow/vue-flow/FlowNode.vue          |  74 +--
 src/views/flow/vue-flow/adapter.js            |   4 +-
 src/views/index.vue                           | 141 +++--
 src/views/login.vue                           |  81 ++-
 21 files changed, 993 insertions(+), 331 deletions(-)
 create mode 100644 src/styles/retro.css

diff --git a/index.html b/index.html
index 17457d3..2904fd4 100644
--- a/index.html
+++ b/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;
@@ -212,4 +215,4 @@
   <script type="module" src="/src/main.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 98c265a..5bbc342 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -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;
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 3953127..0a9289a 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -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() {
@@ -278,4 +278,4 @@ defineExpose({
     margin: -3px 8px 0px 0px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/main.js b/src/main.js
index f281aea..b5d5dc6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -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'
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 95841ee..de49396 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -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,
diff --git a/src/styles/retro.css b/src/styles/retro.css
new file mode 100644
index 0000000..c34cce1
--- /dev/null
+++ b/src/styles/retro.css
@@ -0,0 +1,522 @@
+:root {
+  /* Core palette: aged paper, oxidized teal and workshop brown. */
+  --retro-bg-page: #faf3df;
+  --retro-bg-white: #fffaf0;
+  --retro-bg-muted: #efe4ca;
+  --retro-bg-deep: #3b342a;
+  --retro-border-dark: #7a674f;
+  --retro-border-strong: #4b3d30;
+  --retro-text-primary: #211b12;
+  --retro-text-regular: #504737;
+  --retro-text-secondary: #7c7160;
+  --retro-primary: #008080;
+  --retro-primary-dark: #005e5e;
+  --retro-primary-soft: #d4e4dc;
+  --retro-ochre: #b07a2a;
+  --retro-danger: #9a4035;
+  --retro-success: #65743f;
+  --retro-radius-none: 0px;
+  --retro-radius-sm: 2px;
+  --retro-border-width: 2px;
+  --retro-shadow-hard: 4px 4px 0 0 rgba(33, 27, 18, 0.3);
+  --retro-shadow-small: 2px 2px 0 0 rgba(33, 27, 18, 0.32);
+  --retro-shadow-inset: inset 2px 2px 0 rgba(75, 61, 48, 0.14);
+  --retro-font-display: "Playfair Display", "Noto Serif SC", "Songti SC", STSong, Georgia, "Times New Roman", serif;
+  --retro-font-body: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
+  --retro-paper-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.055'/%3E%3C/svg%3E");
+
+  /* Element Plus theme bridge. */
+  --el-color-primary: var(--retro-primary);
+  --el-color-primary-rgb: 0, 128, 128;
+  --el-color-success: var(--retro-success);
+  --el-color-warning: var(--retro-ochre);
+  --el-color-danger: var(--retro-danger);
+  --el-color-error: var(--retro-danger);
+  --el-color-info: #746b5d;
+
+  --el-bg-color: var(--retro-bg-white);
+  --el-bg-color-page: var(--retro-bg-page);
+  --el-bg-color-overlay: var(--retro-bg-white);
+  --el-text-color-primary: var(--retro-text-primary);
+  --el-text-color-regular: var(--retro-text-regular);
+  --el-text-color-secondary: var(--retro-text-secondary);
+  --el-text-color-placeholder: #998c78;
+  --el-text-color-disabled: #aa9d87;
+
+  --el-border-color-darker: var(--retro-border-strong);
+  --el-border-color-dark: #665442;
+  --el-border-color: var(--retro-border-dark);
+  --el-border-color-light: #a58f70;
+  --el-border-color-lighter: #c7b99d;
+  --el-border-color-extra-light: #ddd1b7;
+  --el-border-radius-base: var(--retro-radius-sm);
+  --el-border-radius-small: var(--retro-radius-none);
+  --el-border-radius-round: var(--retro-radius-sm);
+  --el-border-radius-circle: var(--retro-radius-sm);
+
+  --el-fill-color: #e8dcc0;
+  --el-fill-color-light: #f0e6cf;
+  --el-fill-color-lighter: #f5ecd9;
+  --el-fill-color-extra-light: #faf3e3;
+  --el-fill-color-dark: #d8c8a8;
+  --el-fill-color-darker: #c9b58f;
+  --el-fill-color-blank: var(--retro-bg-white);
+  --el-disabled-bg-color: #eadfc7;
+  --el-disabled-text-color: #948874;
+  --el-disabled-border-color: #b9aa8e;
+  --el-mask-color: rgba(33, 27, 18, 0.58);
+  --el-mask-color-extra-light: rgba(33, 27, 18, 0.25);
+  --el-box-shadow: var(--retro-shadow-hard);
+  --el-box-shadow-light: var(--retro-shadow-hard);
+  --el-box-shadow-lighter: var(--retro-shadow-small);
+  --el-box-shadow-dark: 6px 6px 0 rgba(20, 16, 11, 0.48);
+  --el-font-family: var(--retro-font-body);
+
+  /* Existing layout variables. */
+  --main-fill-bg: var(--retro-bg-page);
+  --navbar-bg: #f4ead2;
+  --navbar-text: var(--retro-text-primary);
+  --navbar-hover: #e4d5b7;
+  --sidebar-bg: var(--retro-bg-deep);
+  --sidebar-text: #e7dac0;
+  --sidebar-logo-text: #fff4dc;
+  --menu-hover: #554a3a;
+  --menu-active-text: #f3cf7a;
+  --tags-bg: #e9dcc0;
+  --tags-item-bg: #fff7e7;
+  --tags-item-border: var(--retro-border-dark);
+  --tags-item-text: var(--retro-text-regular);
+  --tags-item-hover: #dfd0b2;
+  --tags-close-hover: #806b50;
+  --splitpanes-default-bg: var(--retro-bg-white);
+}
+
+html,
+body,
+#app {
+  background-color: var(--retro-bg-page);
+}
+
+body {
+  color: var(--retro-text-primary);
+  font-family: var(--retro-font-body);
+  background-image: var(--retro-paper-texture);
+  background-attachment: fixed;
+}
+
+body,
+button,
+input,
+textarea,
+select {
+  letter-spacing: 0;
+}
+
+::selection {
+  color: var(--retro-bg-white);
+  background: var(--retro-primary);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.retro-title,
+.el-dialog__title,
+.el-drawer__title,
+.el-card__header,
+.el-descriptions__title,
+.el-page-header__title {
+  font-family: var(--retro-font-display);
+  letter-spacing: 0;
+}
+
+/* Background and structural surfaces. */
+#app .app-main {
+  background-color: var(--retro-bg-page) !important;
+  background-image: var(--retro-paper-texture);
+}
+
+#app .app-container {
+  border: var(--retro-border-width) solid var(--retro-border-dark);
+  border-radius: var(--retro-radius-none);
+  background-color: rgba(255, 250, 240, 0.96);
+  box-shadow: var(--retro-shadow-hard);
+}
+
+#app .navbar {
+  border-bottom: var(--retro-border-width) solid var(--retro-border-strong);
+  background: var(--navbar-bg) !important;
+  box-shadow: 0 3px 0 rgba(75, 61, 48, 0.3) !important;
+}
+
+#app .navbar .hamburger-container,
+#app .navbar .right-menu-item {
+  border-right: 1px solid rgba(75, 61, 48, 0.24);
+}
+
+#app .navbar .right-menu-item.hover-effect:hover,
+#app .navbar .hamburger-container:hover {
+  background: var(--navbar-hover) !important;
+}
+
+#app .navbar .user-avatar {
+  border: 2px solid var(--retro-border-strong);
+  border-radius: var(--retro-radius-sm) !important;
+  filter: sepia(0.18) contrast(1.04);
+}
+
+#app .sidebar-container {
+  border-right: 3px solid var(--retro-border-strong);
+  background: var(--retro-bg-deep) !important;
+  box-shadow: 4px 0 0 rgba(33, 27, 18, 0.25) !important;
+}
+
+#app .sidebar-logo-container,
+#app .sidebar-container .scrollbar-wrapper,
+#app .sidebar-container .el-menu {
+  --el-menu-bg-color: var(--retro-bg-deep) !important;
+  --el-menu-text-color: var(--sidebar-text) !important;
+  --el-menu-hover-bg-color: var(--menu-hover) !important;
+  background: var(--retro-bg-deep) !important;
+}
+
+#app .sidebar-logo-container {
+  border-bottom: 2px solid #8e7658;
+}
+
+#app .sidebar-logo-container .sidebar-title {
+  color: var(--sidebar-logo-text) !important;
+  font-family: var(--retro-font-display) !important;
+  font-weight: 700 !important;
+}
+
+#app .sidebar-container .el-menu-item,
+#app .sidebar-container .el-sub-menu__title {
+  color: var(--sidebar-text) !important;
+  border-left: 4px solid transparent;
+}
+
+#app .sidebar-container .el-menu-item:hover,
+#app .sidebar-container .el-sub-menu__title:hover {
+  background: var(--menu-hover) !important;
+}
+
+#app .sidebar-container .el-menu-item.is-active {
+  color: var(--menu-active-text) !important;
+  border-left-color: var(--retro-primary);
+  background: #594d3c !important;
+  font-weight: 700;
+}
+
+#app .tags-view-container {
+  border-bottom: 2px solid var(--retro-border-strong) !important;
+  background: var(--tags-bg) !important;
+  box-shadow: 0 3px 0 rgba(75, 61, 48, 0.22) !important;
+}
+
+#app .tags-view-container .tags-view-item {
+  border: 1px solid var(--retro-border-dark) !important;
+  border-radius: 0 !important;
+  background: var(--tags-item-bg) !important;
+  color: var(--tags-item-text) !important;
+}
+
+#app .tags-view-container .tags-view-item.active {
+  border-color: var(--retro-primary-dark) !important;
+  background: var(--retro-primary) !important;
+  color: #fffaf0 !important;
+  box-shadow: 2px 2px 0 rgba(33, 27, 18, 0.28);
+}
+
+#app .tags-view-container .tags-view-item.active::before {
+  border-radius: 0 !important;
+  background: #f3cf7a !important;
+}
+
+/* Element Plus: hard edges and mechanical interaction. */
+.el-button {
+  border-width: 2px;
+  border-radius: var(--retro-radius-sm);
+  box-shadow: var(--retro-shadow-small);
+  font-weight: 700;
+}
+
+.el-button:not(.is-disabled):hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 3px 3px 0 rgba(33, 27, 18, 0.32);
+}
+
+.el-button:not(.is-disabled):active {
+  transform: translate(2px, 2px);
+  box-shadow: none;
+}
+
+.el-button.is-circle,
+.el-button.is-round {
+  border-radius: var(--retro-radius-sm);
+}
+
+.el-button.is-text,
+.el-button.is-link,
+.el-button--text {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.el-input__wrapper,
+.el-select__wrapper,
+.el-textarea__inner,
+.el-input-number,
+.el-date-editor.el-input__wrapper {
+  border: 2px solid var(--retro-border-dark);
+  border-radius: var(--retro-radius-sm);
+  background-color: var(--retro-bg-white);
+  box-shadow: var(--retro-shadow-inset) !important;
+}
+
+.el-input__wrapper:hover,
+.el-select__wrapper:hover,
+.el-textarea__inner:hover,
+.el-input-number:hover {
+  border-color: var(--retro-primary);
+}
+
+.el-input__wrapper.is-focus,
+.el-select__wrapper.is-focused,
+.el-textarea__inner:focus {
+  border-color: var(--retro-primary);
+  box-shadow: var(--retro-shadow-inset), 2px 2px 0 rgba(0, 128, 128, 0.35) !important;
+}
+
+.el-card,
+.el-dialog,
+.el-message-box,
+.el-drawer,
+.el-popover.el-popper,
+.el-dropdown__popper,
+.el-select__popper,
+.el-picker__popper {
+  border: 2px solid var(--retro-border-strong);
+  border-radius: var(--retro-radius-none);
+  background-color: var(--retro-bg-white);
+  box-shadow: var(--retro-shadow-hard) !important;
+}
+
+.el-card__header,
+.el-dialog__header,
+.el-message-box__header,
+.el-drawer__header {
+  border-bottom: 2px solid var(--retro-border-dark);
+  background: var(--retro-bg-muted);
+}
+
+.el-dialog__header,
+.el-message-box__header {
+  margin-right: 0;
+  padding-bottom: 16px;
+}
+
+.el-dialog__footer,
+.el-message-box__btns {
+  border-top: 1px solid var(--retro-border-dark);
+  background: #f7eedb;
+}
+
+.el-table {
+  --el-table-border-color: var(--retro-border-dark);
+  --el-table-header-bg-color: var(--retro-bg-muted);
+  --el-table-header-text-color: var(--retro-text-primary);
+  --el-table-row-hover-bg-color: #eee2c8;
+  border: 2px solid var(--retro-border-dark);
+  border-radius: 0;
+}
+
+.el-table th.el-table__cell {
+  border-bottom: 2px solid var(--retro-border-dark);
+  background: var(--retro-bg-muted) !important;
+  font-family: var(--retro-font-display);
+  font-weight: 700;
+}
+
+.el-table td.el-table__cell {
+  border-bottom-color: #c9b999;
+}
+
+.el-table::before,
+.el-table--border::after,
+.el-table--border::before,
+.el-table__inner-wrapper::before {
+  background-color: var(--retro-border-dark) !important;
+}
+
+.el-tabs__nav-wrap::after {
+  height: 2px;
+  background-color: var(--retro-border-dark);
+}
+
+.el-tabs__active-bar {
+  height: 3px;
+  background-color: var(--retro-primary);
+}
+
+.el-tag,
+.el-badge__content,
+.el-segmented,
+.el-checkbox__inner,
+.el-radio__inner,
+.el-switch__core,
+.el-progress-bar__outer,
+.el-pagination button,
+.el-pager li {
+  border-radius: var(--retro-radius-none) !important;
+}
+
+.el-tag {
+  border-width: 1px;
+  font-weight: 700;
+}
+
+.el-checkbox__inner,
+.el-radio__inner {
+  border-width: 2px;
+}
+
+.el-pagination button,
+.el-pager li {
+  border: 1px solid var(--retro-border-dark);
+  margin: 0 2px;
+  background: var(--retro-bg-white) !important;
+}
+
+.el-pager li.is-active {
+  background: var(--retro-primary) !important;
+  color: #fffaf0;
+}
+
+.el-alert,
+.el-collapse,
+.el-collapse-item__header,
+.el-collapse-item__wrap,
+.el-descriptions,
+.el-upload-dragger,
+.el-tree,
+.el-menu--popup {
+  border-radius: var(--retro-radius-none) !important;
+}
+
+.el-upload-dragger {
+  border: 2px dashed var(--retro-border-dark);
+  background: #fbf3e1;
+}
+
+.el-tooltip__trigger:focus-visible,
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+  outline: 3px double var(--retro-primary);
+  outline-offset: 2px;
+}
+
+.el-loading-mask {
+  background-color: rgba(250, 243, 223, 0.82);
+}
+
+.el-message,
+.el-notification {
+  border: 2px solid var(--retro-border-strong);
+  border-radius: 0;
+  box-shadow: var(--retro-shadow-hard);
+}
+
+#nprogress .bar {
+  height: 3px !important;
+  background: var(--retro-primary) !important;
+}
+
+::-webkit-scrollbar {
+  width: 10px !important;
+  height: 10px !important;
+}
+
+::-webkit-scrollbar-track {
+  border-left: 1px solid var(--retro-border-dark);
+  background: #e1d3b6 !important;
+}
+
+::-webkit-scrollbar-thumb {
+  border: 1px solid var(--retro-border-strong);
+  border-radius: 0 !important;
+  background: #8c7a61 !important;
+}
+
+/* Dark mode remains archival and warm instead of returning to modern blue-black. */
+html.dark {
+  color-scheme: dark;
+  --retro-bg-page: #1e1c17;
+  --retro-bg-white: #29261f;
+  --retro-bg-muted: #373126;
+  --retro-border-dark: #917b5d;
+  --retro-border-strong: #bd9d6d;
+  --retro-text-primary: #f1e4c7;
+  --retro-text-regular: #d4c5a8;
+  --retro-text-secondary: #aa9b81;
+  --retro-shadow-hard: 4px 4px 0 0 rgba(0, 0, 0, 0.72);
+  --retro-shadow-small: 2px 2px 0 0 rgba(0, 0, 0, 0.72);
+  --el-bg-color: var(--retro-bg-white);
+  --el-bg-color-page: var(--retro-bg-page);
+  --el-bg-color-overlay: #302c23;
+  --el-text-color-primary: var(--retro-text-primary);
+  --el-text-color-regular: var(--retro-text-regular);
+  --el-text-color-secondary: var(--retro-text-secondary);
+  --el-border-color: var(--retro-border-dark);
+  --el-border-color-light: #74644e;
+  --el-border-color-lighter: #5d513f;
+  --el-border-color-extra-light: #4c4335;
+  --el-fill-color: #3e382d;
+  --el-fill-color-light: #373229;
+  --el-fill-color-lighter: #322e26;
+  --el-fill-color-extra-light: #2d2a23;
+  --el-fill-color-blank: var(--retro-bg-white);
+  --main-fill-bg: var(--retro-bg-page);
+  --navbar-bg: #302b22;
+  --navbar-text: var(--retro-text-primary);
+  --navbar-hover: #493f31;
+  --tags-bg: #352f25;
+  --tags-item-bg: #29261f;
+  --tags-item-border: #806d53;
+  --tags-item-text: var(--retro-text-regular);
+}
+
+html.dark #app .app-container {
+  background-color: rgba(41, 38, 31, 0.96);
+}
+
+html.dark .el-loading-mask {
+  background-color: rgba(30, 28, 23, 0.82);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+@media (max-width: 768px) {
+  #app .app-main {
+    padding: 12px;
+  }
+
+  #app .app-container {
+    padding: 14px;
+    box-shadow: 3px 3px 0 rgba(33, 27, 18, 0.28);
+  }
+}
diff --git a/src/views/flow/components/Aside.vue b/src/views/flow/components/Aside.vue
index a818eef..c85c3f7 100644
--- a/src/views/flow/components/Aside.vue
+++ b/src/views/flow/components/Aside.vue
@@ -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>
diff --git a/src/views/flow/components/NodeState.vue b/src/views/flow/components/NodeState.vue
index 8c11ff3..46845c8 100644
--- a/src/views/flow/components/NodeState.vue
+++ b/src/views/flow/components/NodeState.vue
@@ -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;
   }
 }
diff --git a/src/views/flow/components/NodeTitle.vue b/src/views/flow/components/NodeTitle.vue
index 8859e9e..2ef33cb 100644
--- a/src/views/flow/components/NodeTitle.vue
+++ b/src/views/flow/components/NodeTitle.vue
@@ -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;
diff --git a/src/views/flow/index.vue b/src/views/flow/index.vue
index c6e0bf4..8025322 100644
--- a/src/views/flow/index.vue
+++ b/src/views/flow/index.vue
@@ -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;
+        }
       }
     }
   }
diff --git a/src/views/flow/nodes/common/selectAreaNode.vue b/src/views/flow/nodes/common/selectAreaNode.vue
index 27be9eb..6fffb8c 100644
--- a/src/views/flow/nodes/common/selectAreaNode.vue
+++ b/src/views/flow/nodes/common/selectAreaNode.vue
@@ -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 {
diff --git a/src/views/flow/nodes/function/actionQueue.vue b/src/views/flow/nodes/function/actionQueue.vue
index c711e3b..b73fbd7 100644
--- a/src/views/flow/nodes/function/actionQueue.vue
+++ b/src/views/flow/nodes/function/actionQueue.vue
@@ -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>
diff --git a/src/views/flow/nodes/function/currentLoop.vue b/src/views/flow/nodes/function/currentLoop.vue
index 4299bcc..fc04737 100644
--- a/src/views/flow/nodes/function/currentLoop.vue
+++ b/src/views/flow/nodes/function/currentLoop.vue
@@ -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);
       }
     }
 
diff --git a/src/views/flow/nodes/function/loop.vue b/src/views/flow/nodes/function/loop.vue
index 702416b..c35c8bb 100644
--- a/src/views/flow/nodes/function/loop.vue
+++ b/src/views/flow/nodes/function/loop.vue
@@ -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 {
diff --git a/src/views/flow/nodes/function/stopLoop.vue b/src/views/flow/nodes/function/stopLoop.vue
index e2f57c9..32d2da4 100644
--- a/src/views/flow/nodes/function/stopLoop.vue
+++ b/src/views/flow/nodes/function/stopLoop.vue
@@ -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;
     }
diff --git a/src/views/flow/nodes/function/switch.vue b/src/views/flow/nodes/function/switch.vue
index c293922..61fe345 100644
--- a/src/views/flow/nodes/function/switch.vue
+++ b/src/views/flow/nodes/function/switch.vue
@@ -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;
diff --git a/src/views/flow/vue-flow/FlowEdge.vue b/src/views/flow/vue-flow/FlowEdge.vue
index ca50187..922c4e2 100644
--- a/src/views/flow/vue-flow/FlowEdge.vue
+++ b/src/views/flow/vue-flow/FlowEdge.vue
@@ -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);
     }
   }
 }
diff --git a/src/views/flow/vue-flow/FlowNode.vue b/src/views/flow/vue-flow/FlowNode.vue
index 772b803..b9f0ac9 100644
--- a/src/views/flow/vue-flow/FlowNode.vue
+++ b/src/views/flow/vue-flow/FlowNode.vue
@@ -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);
   }
 
diff --git a/src/views/flow/vue-flow/adapter.js b/src/views/flow/vue-flow/adapter.js
index c3c66e1..a92b39c 100644
--- a/src/views/flow/vue-flow/adapter.js
+++ b/src/views/flow/vue-flow/adapter.js
@@ -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 },
   };
 };
diff --git a/src/views/index.vue b/src/views/index.vue
index 23394b3..9b25642 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -219,8 +219,8 @@ const features = [
     title: '设备接入',
     description: '配置机器人与终端设备',
     icon: SetUp,
-    color: '#2563eb',
-    background: '#eaf2ff',
+    color: '#006b6b',
+    background: '#d8e5dc',
     menuTitles: ['设备注册', '设备配置管理', '设备管理'],
     fallback: '/device/register',
   },
@@ -228,8 +228,8 @@ const features = [
     title: '流程编排',
     description: '构建可视化测试工作流',
     icon: Operation,
-    color: '#0f8a73',
-    background: '#e7f6f2',
+    color: '#65743f',
+    background: '#e2e3c7',
     menuTitles: ['任务流程编排', '流程编排'],
     fallback: '/flow',
   },
@@ -237,8 +237,8 @@ const features = [
     title: '巡检执行',
     description: '调度机器人巡检任务',
     icon: Monitor,
-    color: '#c56a16',
-    background: '#fff3e5',
+    color: '#965b24',
+    background: '#f1dec0',
     menuTitles: ['执行任务', '运行任务', '巡检任务执行'],
     fallback: '/inspection/runTask',
   },
@@ -246,8 +246,8 @@ const features = [
     title: '巡检配置',
     description: '管理地图、点位与任务',
     icon: Grid,
-    color: '#6b57c7',
-    background: '#f0edff',
+    color: '#76543c',
+    background: '#ead8c8',
     menuTitles: ['巡检任务', '巡检地图', '地图管理'],
     fallback: '/inspection/task',
   },
@@ -255,8 +255,8 @@ const features = [
     title: '测试记录',
     description: '追踪执行结果与日志',
     icon: DocumentChecked,
-    color: '#d14343',
-    background: '#ffeded',
+    color: '#8f3f35',
+    background: '#efd8cf',
     menuTitles: ['任务历史', '测试记录', '任务实例', '执行记录'],
     fallback: '/test/history',
   },
@@ -264,8 +264,8 @@ const features = [
     title: '语料中心',
     description: '管理语音与合成资源',
     icon: Headset,
-    color: '#087f9c',
-    background: '#e8f7fa',
+    color: '#406e72',
+    background: '#d9e5e2',
     menuTitles: ['语料库', '语料管理', '车载语料'],
     fallback: '/corpusManger/corpus',
   },
@@ -458,18 +458,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 +492,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 +500,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 +512,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 +534,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 +569,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 +602,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 +612,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 +633,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 +653,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 +710,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 +724,7 @@ onBeforeUnmount(() => {
 
 .text-action {
   border: 0;
+  border-bottom: 1px dashed currentColor;
   padding: 5px 0;
   display: inline-flex;
   align-items: center;
@@ -731,7 +750,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 +772,7 @@ onBeforeUnmount(() => {
 .task-status-dot {
   width: 8px;
   height: 8px;
-  border-radius: 50%;
+  border-radius: 0;
   background: var(--el-color-info);
 }
 
@@ -807,7 +826,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 +855,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 +869,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 +879,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 +918,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 +977,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 +991,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 +1028,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;
   }
diff --git a/src/views/login.vue b/src/views/login.vue
index 36116e2..c6c8e4d 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -167,57 +167,81 @@ 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: "";
   position: absolute;
-  inset: 0;  
+  inset: 0;
   width: 100%;
   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>