Refactor UI components for improved layout and styling

- Updated VoiceConversation.vue to set a fixed font size for the header.
- Changed index.vue to use an aside element for the header and adjusted layout to a grid system.
- Enhanced lock.vue by restructuring the layout and improving visual elements for better user experience.
- Revamped login.vue to introduce a visual section and reorganized form elements for clarity.
- Redesigned register.vue to include a visual brand section and improved form layout for user registration.

src/assets/styles/sidebar.scss

@@ -47,7 +47,7 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 56px);
+        height: auto;
       }
     }
 
@@ -62,7 +62,7 @@
     }
 
     .svg-icon {
-      margin-right: 12px;
+      margin-right: 14px;
     }
 
     .el-menu {

src/assets/styles/variables.module.scss

@@ -21,8 +21,8 @@ $menuLightText: #374151;
 $menuLightActiveText: #0052d9;
 
 // 基础变量
-$base-sidebar-width: 216px;
+$base-sidebar-width: 248px;
-$sideBarWidth: 216px;
+$sideBarWidth: 248px;
 
 // 菜单暗色变量
 $base-menu-color: #374151;

src/components/Breadcrumb/index.vue

@@ -85,13 +85,13 @@ getBreadcrumb()
 
 <style lang='scss' scoped>
 .app-breadcrumb.el-breadcrumb {
-  display: inline-block;
+  display: block;
-  font-size: 14px;
+  margin-top: 4px;
-  line-height: 50px;
+  font-size: 11px;
-  margin-left: 8px;
+  line-height: 16px;
 
   .no-redirect {
-    color: #97a8be;
+    color: var(--min-text-secondary);
     cursor: text;
   }
 }

src/components/TableSearch/index.vue

@@ -37,17 +37,22 @@ const resetQuery = () => {
 </script>
 
 <template>
+  <div v-show="showSearch" class="table-search-shell">
+    <div class="table-search-heading">
+      <span>FILTER</span>
+      <strong>条件筛选</strong>
+    </div>
     <el-form
         :model="queryParams"
         :ref="queryRef"
         :inline="inline"
-      v-show="showSearch"
         :label-width="labelWidth"
+        class="table-search-form"
     >
       <el-row :gutter="16">
         <slot name="one"></slot>
         <slot name="other" v-if="formData.search"></slot>
-      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" :xxl="6" style="padding-bottom: 10px;">
+        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" :xxl="6" class="table-search-actions">
           <el-space>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -62,8 +67,45 @@ const resetQuery = () => {
         </el-col>
       </el-row>
     </el-form>
+  </div>
 </template>
 
 <style scoped lang="scss">
+.table-search-shell {
+  margin-bottom: 16px;
+  border: 1px solid var(--min-border-light);
+  background: var(--min-bg-white);
+}
+
+.table-search-heading {
+  min-height: 44px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--min-border-light);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  span {
+    color: var(--min-primary);
+    font-size: 9px;
+    font-weight: 600;
+  }
+
+  strong {
+    color: var(--min-text-primary);
+    font-size: 13px;
+    font-weight: 600;
+  }
+}
+
+.table-search-form {
+  padding: 18px 18px 2px;
+}
+
+.table-search-actions {
+  padding-bottom: 16px;
+  display: flex;
+  align-items: flex-end;
+}
 
 </style>

src/layout/components/AppMain.vue

@@ -1,12 +1,31 @@
 <template>
-  <section class="app-main">
+  <section class="app-main" :class="{ 'app-main--immersive': isImmersive }">
-    <router-view v-slot="{ Component, route }">
+    <div class="workspace-stage">
+      <header v-if="!isImmersive" class="workspace-context">
+        <div class="workspace-context__marker" aria-hidden="true">
+          <span>{{ sectionCode }}</span>
+          <i></i>
+        </div>
+        <div class="workspace-context__copy">
+          <span class="workspace-context__eyebrow">{{ sectionLabel }}</span>
+          <h1>{{ routeTitle }}</h1>
+        </div>
+        <div class="workspace-context__path">
+          <span>当前位置</span>
+          <strong>{{ routeTrail }}</strong>
+        </div>
+      </header>
+
+      <div class="workspace-view">
+        <router-view v-slot="{ Component, route: currentRoute }">
           <transition name="fade-transform" mode="out-in">
             <keep-alive :include="tagsViewStore.cachedViews">
-          <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
+              <component v-if="!currentRoute.meta.link" :is="Component" :key="currentRoute.path"/>
             </keep-alive>
           </transition>
         </router-view>
+      </div>
+    </div>
     <iframe-toggle />
     <copyright />
   </section>
@@ -20,6 +39,33 @@ import useTagsViewStore from '@/store/modules/tagsView'
 const route = useRoute()
 const tagsViewStore = useTagsViewStore()
 
+const sectionMap = {
+  system: ['SYS', '系统管理'],
+  monitor: ['OPS', '运行监控'],
+  tool: ['DEV', '开发工具'],
+  device: ['DEV', '设备中心'],
+  inspection: ['INS', '巡检业务'],
+  intelligenceTest: ['AIT', '智能测试'],
+  test: ['TST', '测试管理'],
+  corpusManger: ['COR', '语料中心'],
+  vi: ['VOC', '语音测试'],
+  is: ['HMI', '交互测试'],
+  evaluate: ['EVA', '评价中心'],
+}
+
+const pathSection = computed(() => route.path.split('/').filter(Boolean)[0] || 'index')
+const sectionMeta = computed(() => sectionMap[pathSection.value] || ['CMV', '业务工作台'])
+const sectionCode = computed(() => sectionMeta.value[0])
+const sectionLabel = computed(() => sectionMeta.value[1])
+const routeTitle = computed(() => route.meta?.title || route.name || '工作台')
+const routeTrail = computed(() => {
+  const titles = route.matched
+    .map(item => item.meta?.title)
+    .filter(Boolean)
+  return titles.length ? titles.join(' / ') : routeTitle.value
+})
+const isImmersive = computed(() => route.path === '/index')
+
 onMounted(() => {
   addIframe()
 })
@@ -38,8 +84,8 @@ function addIframe() {
 <style lang="scss" scoped>
 @use "@/assets/styles/variables.module" as *;
 .app-main {
-  height: calc(100% - 56px);
+  height: calc(100% - 72px);
-  padding: 24px;
+  padding: 0;
   width: 100%;
   position: relative;
   overflow: hidden;
@@ -47,17 +93,150 @@ function addIframe() {
   display: flex;
 }
 
+.workspace-stage {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.workspace-context {
+  min-height: 112px;
+  flex: 0 0 112px;
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr) minmax(220px, auto);
+  align-items: stretch;
+  border-bottom: 1px solid var(--min-border-light);
+  background: var(--min-bg-white);
+}
+
+.workspace-context__marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border-right: 1px solid var(--min-border-light);
+  color: var(--min-primary);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.workspace-context__marker i {
+  width: 24px;
+  height: 2px;
+  background: var(--min-primary);
+}
+
+.workspace-context__copy {
+  min-width: 0;
+  padding: 24px 32px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.workspace-context__eyebrow,
+.workspace-context__path span {
+  color: var(--min-text-secondary);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.workspace-context__copy h1 {
+  margin: 6px 0 0;
+  overflow: hidden;
+  color: var(--min-text-primary);
+  font-size: 24px;
+  line-height: 1.25;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-context__path {
+  min-width: 220px;
+  padding: 24px 32px;
+  border-left: 1px solid var(--min-border-light);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  text-align: right;
+}
+
+.workspace-context__path strong {
+  max-width: 360px;
+  margin-top: 7px;
+  overflow: hidden;
+  color: var(--min-text-regular);
+  font-size: 13px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-view {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  padding: 24px 32px 32px;
+  overflow: auto;
+}
+
+.app-main--immersive .workspace-view {
+  padding: 0;
+  overflow: hidden;
+}
+
 .fixed-header + .app-main {
-  padding-top: 80px;
+  padding-top: 72px;
 }
 
 .hasTagsView {
   .app-main {
-    height: calc(100% - 96px);
+    height: calc(100% - 116px);
   }
 
   .fixed-header + .app-main {
-    padding-top: 120px;
+    padding-top: 116px;
+  }
+}
+
+@media (max-width: 768px) {
+  .app-main {
+    height: calc(100% - 64px);
+  }
+
+  .hasTagsView .app-main {
+    height: calc(100% - 106px);
+  }
+
+  .workspace-context {
+    min-height: 88px;
+    flex-basis: 88px;
+    grid-template-columns: 48px minmax(0, 1fr);
+  }
+
+  .workspace-context__marker {
+    font-size: 9px;
+  }
+
+  .workspace-context__copy {
+    padding: 16px 20px;
+  }
+
+  .workspace-context__copy h1 {
+    font-size: 20px;
+  }
+
+  .workspace-context__path {
+    display: none;
+  }
+
+  .workspace-view {
+    padding: 16px;
   }
 }
 </style>
@@ -75,9 +254,4 @@ function addIframe() {
   height: 6px;
 }
 
-@media (max-width: 768px) {
-  .app-main {
-    padding: 16px;
-  }
-}
 </style>

src/layout/components/Navbar.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="navbar" :class="'nav' + settingsStore.navType">
     <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <breadcrumb v-if="settingsStore.navType == 1" id="breadcrumb-container" class="breadcrumb-container" />
+    <div v-if="settingsStore.navType == 1" class="navbar-context">
+      <div class="navbar-context__title">
+        <span>CONTROL DESK</span>
+        <strong>{{ currentTitle }}</strong>
+      </div>
+      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    </div>
     <top-nav v-if="settingsStore.navType == 2" id="topmenu-container" class="topmenu-container" />
     <template v-if="settingsStore.navType == 3">
       <logo v-show="settingsStore.sidebarLogo" :collapse="false"></logo>
@@ -88,6 +94,7 @@ const appStore = useAppStore()
 const userStore = useUserStore()
 const lockStore = useLockStore()
 const settingsStore = useSettingsStore()
+const currentTitle = computed(() => route.meta?.title || route.name || '工作台')
 
 function toggleSideBar() {
   appStore.toggleSideBar()
@@ -175,7 +182,7 @@ async function toggleTheme(event) {
 
 <style lang='scss' scoped>
 .navbar {
-  height: 56px;
+  height: 72px;
   overflow: hidden;
   position: relative;
   background: var(--navbar-bg);
@@ -183,12 +190,13 @@ async function toggleTheme(event) {
   box-shadow: none;
 
   .hamburger-container {
-    width: 56px;
+    width: 64px;
-    line-height: 52px;
+    line-height: 68px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background 0.3s;
+    border-right: 1px solid var(--min-border-light);
+    transition: background 0.2s;
     -webkit-tap-highlight-color: transparent;
 
     &:hover {
@@ -197,7 +205,39 @@ async function toggleTheme(event) {
   }
 
   .breadcrumb-container {
+    display: block;
+  }
+
+  .navbar-context {
+    height: 100%;
+    min-width: 0;
+    padding: 10px 20px;
     float: left;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .navbar-context__title {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    span {
+      color: var(--min-primary);
+      font-size: 10px;
+      font-weight: 600;
+    }
+
+    strong {
+      overflow: hidden;
+      color: var(--min-text-primary);
+      font-size: 14px;
+      font-weight: 600;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   .topmenu-container {
@@ -213,7 +253,7 @@ async function toggleTheme(event) {
   .right-menu {
     float: right;
     height: 100%;
-    line-height: 56px;
+    line-height: 72px;
     display: flex;
 
     &:focus {
@@ -233,10 +273,12 @@ async function toggleTheme(event) {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background 0.3s;
+        border-left: 1px solid transparent;
+        transition: color 0.2s, background 0.2s;
 
         &:hover {
           background: var(--navbar-hover);
+          color: var(--min-primary);
         }
       }
 
@@ -256,10 +298,12 @@ async function toggleTheme(event) {
 
     .avatar-container {
       width: auto;
-      margin: 0 24px 0 8px;
+      margin: 0;
+      padding: 0 24px 0 16px;
+      border-left: 1px solid var(--min-border-light);
 
       .avatar-wrapper {
-        height: 56px;
+        height: 72px;
         margin-top: 0;
         display: flex;
         align-items: center;
@@ -273,6 +317,17 @@ async function toggleTheme(event) {
           border-radius: 50%;
         }
 
+        .user-nickname {
+          max-width: 120px;
+          margin-left: 10px;
+          overflow: hidden;
+          color: var(--min-text-primary);
+          font-size: 13px;
+          font-weight: 500;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
         i {
           cursor: pointer;
           position: absolute;
@@ -284,4 +339,36 @@ async function toggleTheme(event) {
     }
   }
 }
+
+@media (max-width: 768px) {
+  .navbar {
+    height: 64px;
+
+    .hamburger-container {
+      width: 56px;
+      line-height: 60px;
+    }
+
+    .navbar-context {
+      padding: 8px 14px;
+    }
+
+    .navbar-context__title span,
+    .breadcrumb-container {
+      display: none;
+    }
+
+    .right-menu .avatar-container {
+      padding: 0 14px;
+
+      .avatar-wrapper {
+        height: 64px;
+      }
+
+      .user-nickname {
+        display: none;
+      }
+    }
+  }
+}
 </style>

src/layout/components/Sidebar/Logo.vue

@@ -6,8 +6,13 @@
         <h1 v-else class="sidebar-title">{{ title }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <span class="sidebar-brand-mark">
           <img v-if="logo" :src="logo" class="sidebar-logo" />
+        </span>
+        <span class="sidebar-brand-copy">
           <h1 class="sidebar-title">{{ title }}</h1>
+          <small>TEST OPERATIONS</small>
+        </span>
       </router-link>
     </transition>
   </div>
@@ -67,36 +72,71 @@ const getLogoTextColor = computed(() => {
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 56px;
+  height: 72px;
-  line-height: 56px;
+  line-height: 72px;
   background: v-bind(getLogoBackground);
-  text-align: center;
+  text-align: left;
   overflow: hidden;
 
   & .sidebar-logo-link {
     height: 100%;
     width: 100%;
+    padding: 0 18px;
+    display: flex;
+    align-items: center;
 
     & .sidebar-logo {
       width: 28px;
       height: 28px;
-      vertical-align: middle;
+      object-fit: contain;
-      margin-right: 12px;
     }
 
     & .sidebar-title {
-      display: inline-block;
+      display: block;
       margin: 0;
       color: v-bind(getLogoTextColor);
       font-weight: 600;
-      line-height: 56px;
+      overflow: hidden;
-      font-size: 14px;
+      line-height: 1.25;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      font-size: 13px;
-      vertical-align: middle;
+      font-family: var(--min-font-family);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .sidebar-brand-mark {
+    width: 36px;
+    height: 36px;
+    flex: 0 0 36px;
+    border: 1px solid var(--min-border-light);
+    display: grid;
+    place-items: center;
+  }
+
+  .sidebar-brand-copy {
+    min-width: 0;
+    margin-left: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+
+    small {
+      color: var(--min-text-secondary);
+      font-size: 9px;
+      line-height: 1.2;
+      font-weight: 500;
     }
   }
 
   &.collapse {
+    text-align: center;
+
+    .sidebar-logo-link {
+      padding: 0;
+      justify-content: center;
+    }
+
     .sidebar-logo {
       margin-right: 0px;
     }

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div :class="['sidebar-theme-wrapper', {'has-logo':showLogo}, sideTheme]" class="sidebar-container">
     <logo v-if="showLogo" :collapse="isCollapse" />
+    <div v-show="!isCollapse" class="sidebar-section-label">
+      <span>工作导航</span>
+      <strong>01</strong>
+    </div>
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
@@ -21,6 +25,13 @@
         />
       </el-menu>
     </el-scrollbar>
+    <div v-show="!isCollapse" class="sidebar-status">
+      <span class="sidebar-status__signal"></span>
+      <span>
+        <strong>CMVR CONTROL OS</strong>
+        <small>系统在线</small>
+      </span>
+    </div>
   </div>
 </template>
 
@@ -71,11 +82,38 @@ const activeMenu = computed(() => {
 <style lang="scss" scoped>
 .sidebar-container {
   background-color: v-bind(getMenuBackground);
+  display: flex;
+  flex-direction: column;
   
   .scrollbar-wrapper {
     background-color: v-bind(getMenuBackground);
   }
 
+  > .el-scrollbar {
+    min-height: 0;
+    flex: 1;
+  }
+
+  .sidebar-section-label {
+    height: 48px;
+    padding: 0 20px;
+    flex: 0 0 48px;
+    border-top: 1px solid var(--min-border-light);
+    border-bottom: 1px solid var(--min-border-light);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--min-text-secondary);
+    font-size: 10px;
+    font-weight: 500;
+
+    strong {
+      color: var(--min-primary);
+      font-size: 11px;
+      font-weight: 600;
+    }
+  }
+
   .el-menu {
     border: none;
     height: 100%;
@@ -83,11 +121,12 @@ const activeMenu = computed(() => {
 
     .el-menu-item,
     .el-sub-menu__title {
-      height: 48px;
+      height: 52px;
-      line-height: 48px;
+      line-height: 52px;
-      margin: 2px 8px;
+      margin: 0;
-      border-radius: var(--min-radius-sm);
+      border-radius: 0;
-      font-size: 14px;
+      border-bottom: 1px solid var(--min-border-light);
+      font-size: 13px;
       font-weight: 500;
     }
     
@@ -102,13 +141,14 @@ const activeMenu = computed(() => {
       
       &.is-active {
         color: var(--menu-active-text);
-        background-color: var(--min-primary-soft) !important;
+        background-color: var(--min-bg-white) !important;
+        font-weight: 600;
 
         &::before {
           content: '';
           position: absolute;
-          top: 12px;
+          top: 0;
-          bottom: 12px;
+          bottom: 0;
           left: 0;
           width: 2px;
           background: var(--min-primary);
@@ -120,5 +160,42 @@ const activeMenu = computed(() => {
       color: v-bind(getMenuTextColor);
     }
   }
+
+  .sidebar-status {
+    min-height: 72px;
+    padding: 16px 20px;
+    flex: 0 0 72px;
+    border-top: 1px solid var(--min-border-light);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: var(--min-bg-subtle);
+
+    > span:last-child {
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    strong {
+      color: var(--min-text-primary);
+      font-size: 10px;
+      font-weight: 600;
+    }
+
+    small {
+      color: var(--min-text-secondary);
+      font-size: 10px;
+    }
+  }
+
+  .sidebar-status__signal {
+    width: 8px;
+    height: 8px;
+    flex: 0 0 8px;
+    border-radius: var(--min-radius-sm);
+    background: var(--min-primary);
+  }
 }
 </style>

src/layout/components/TagsView/index.vue

@@ -1,5 +1,9 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
+    <div class="tags-view-index">
+      <span>OPEN</span>
+      <strong>{{ String(visitedViews.length).padStart(2, '0') }}</strong>
+    </div>
     <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
       <router-link
         v-for="tag in visitedViews"
@@ -248,30 +252,52 @@ function handleScroll() {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 40px;
+  height: 44px;
   width: 100%;
-  background: var(--tags-bg, #fff);
+  display: flex;
+  background: var(--min-bg-subtle);
   border-bottom: 1px solid var(--tags-item-border, #d8dce5);
   box-shadow: none;
 
+  .tags-view-index {
+    width: 72px;
+    flex: 0 0 72px;
+    border-right: 1px solid var(--tags-item-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    color: var(--min-text-secondary);
+    font-size: 9px;
+
+    strong {
+      color: var(--min-primary);
+      font-size: 10px;
+      font-weight: 600;
+    }
+  }
+
   .tags-view-wrapper {
+    min-width: 0;
+    flex: 1;
+
     .tags-view-item {
       display: inline-block;
       position: relative;
       cursor: pointer;
-      height: 32px;
+      height: 43px;
-      line-height: 31px;
+      line-height: 43px;
       border: 0;
+      border-right: 1px solid var(--tags-item-border);
       border-bottom: 2px solid transparent;
       color: var(--tags-item-text);
       background: transparent;
-      padding: 0 12px;
+      padding: 0 16px;
       font-size: 12px;
-      margin-left: 4px;
+      margin: 0;
-      margin-top: 4px;
 
       &:first-of-type {
-        margin-left: 12px;
+        margin-left: 0;
       }
 
       &:last-of-type {
@@ -281,6 +307,7 @@ function handleScroll() {
       &.active {
         color: var(--min-primary);
         border-bottom-color: var(--min-primary);
+        background: var(--min-bg-white);
         font-weight: 600;
       }
     }
@@ -311,6 +338,22 @@ function handleScroll() {
     }
   }
 }
+
+@media (max-width: 768px) {
+  .tags-view-container {
+    height: 42px;
+
+    .tags-view-index {
+      display: none;
+    }
+
+    .tags-view-wrapper .tags-view-item {
+      height: 41px;
+      line-height: 41px;
+      padding: 0 12px;
+    }
+  }
+}
 </style>
 
 <style lang="scss">

src/styles/minimalist.css

@@ -16,6 +16,7 @@
   --min-primary: #0052d9;
   --min-primary-hover: #0046b8;
   --min-primary-soft: #eef4ff;
+  --min-primary-border: #cbdcf8;
 
   /* 4px / 8px grid */
   --min-radius-sm: 2px;
@@ -54,6 +55,29 @@
   --el-border-radius-small: var(--min-radius-sm);
   --el-border-radius-round: var(--min-radius-base);
   --el-color-primary: var(--min-primary);
+  --el-color-success: var(--min-primary);
+  --el-color-success-light-3: #4d86e5;
+  --el-color-success-light-5: #80a8ec;
+  --el-color-success-light-7: var(--min-primary-border);
+  --el-color-success-light-8: #dfe9fa;
+  --el-color-success-light-9: var(--min-primary-soft);
+  --el-color-success-dark-2: var(--min-primary-hover);
+  --el-color-warning: var(--min-primary);
+  --el-color-warning-light-3: #4d86e5;
+  --el-color-warning-light-5: #80a8ec;
+  --el-color-warning-light-7: var(--min-primary-border);
+  --el-color-warning-light-8: #dfe9fa;
+  --el-color-warning-light-9: var(--min-primary-soft);
+  --el-color-warning-dark-2: var(--min-primary-hover);
+  --el-color-danger: var(--min-primary);
+  --el-color-danger-light-3: #4d86e5;
+  --el-color-danger-light-5: #80a8ec;
+  --el-color-danger-light-7: var(--min-primary-border);
+  --el-color-danger-light-8: #dfe9fa;
+  --el-color-danger-light-9: var(--min-primary-soft);
+  --el-color-danger-dark-2: var(--min-primary-hover);
+  --el-color-error: var(--min-primary);
+  --el-color-error-light-9: var(--min-primary-soft);
   --el-box-shadow: var(--min-shadow-overlay);
   --el-box-shadow-light: 0 4px 16px rgba(31, 41, 55, 0.06);
   --el-box-shadow-lighter: 0 2px 8px rgba(31, 41, 55, 0.05);
@@ -159,6 +183,73 @@ label {
   background: var(--min-bg-white);
 }
 
+/* Structural workspace system shared by standard management pages. */
+.workspace-view > .app-container {
+  min-height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.workspace-view .app-container > .el-form.el-form--inline,
+.workspace-view .app-container > div:first-child > .el-form.el-form--inline,
+.workspace-view .tree-sidebar-content .content-inner > .el-form.el-form--inline {
+  position: relative;
+  margin: 0 0 16px;
+  padding: 20px 20px 4px;
+  border: 1px solid var(--min-border-light);
+  border-top: 2px solid var(--min-primary);
+  background: var(--min-bg-white);
+}
+
+.workspace-view .app-container > .el-row.mb8,
+.workspace-view .app-container > div:first-child > .el-row.mb8,
+.workspace-view .tree-sidebar-content .content-inner > .el-row.mb8 {
+  min-height: 58px;
+  margin: 0 0 16px !important;
+  padding: 12px 16px;
+  border: 1px solid var(--min-border-light);
+  display: flex;
+  align-items: center;
+  background: var(--min-bg-white);
+}
+
+.workspace-view .app-container > .el-table,
+.workspace-view .app-container > div:not([class]) > .el-table,
+.workspace-view .tree-sidebar-content .content-inner > .el-table {
+  border: 1px solid var(--min-border-light);
+  border-bottom: 0;
+}
+
+.workspace-view .tree-sidebar-manage-wrap {
+  min-height: 100%;
+  border: 1px solid var(--min-border-light);
+  display: flex;
+  overflow: hidden;
+  background: var(--min-bg-white);
+}
+
+.workspace-view .tree-sidebar-manage-wrap .tree-sidebar-content {
+  min-width: 0;
+  flex: 1;
+  background: var(--min-bg-page);
+}
+
+.workspace-view .tree-sidebar-manage-wrap .content-inner {
+  height: 100%;
+  padding: 20px;
+  overflow: auto;
+}
+
+.workspace-view .pagination-container {
+  min-height: 58px;
+  margin: 0 !important;
+  padding: 12px 16px !important;
+  border: 1px solid var(--min-border-light);
+  background: var(--min-bg-white);
+}
+
 .el-card {
   border: 1px solid var(--min-border-light);
   border-radius: var(--min-radius-base);
@@ -192,6 +283,36 @@ label {
   background: var(--min-primary-hover);
 }
 
+.el-button--success,
+.el-button--warning,
+.el-button--danger,
+.el-button--info {
+  --el-button-text-color: var(--min-text-regular);
+  --el-button-bg-color: var(--min-bg-white);
+  --el-button-border-color: var(--min-border-light);
+  --el-button-hover-text-color: var(--min-primary);
+  --el-button-hover-bg-color: var(--min-primary-soft);
+  --el-button-hover-border-color: var(--min-primary);
+  --el-button-active-text-color: var(--min-primary);
+  --el-button-active-border-color: var(--min-primary);
+  --el-button-active-bg-color: var(--min-primary-soft);
+}
+
+.el-button--success.is-disabled,
+.el-button--warning.is-disabled,
+.el-button--danger.is-disabled,
+.el-button--info.is-disabled {
+  --el-button-disabled-text-color: var(--min-text-placeholder);
+  --el-button-disabled-bg-color: var(--min-bg-page);
+  --el-button-disabled-border-color: var(--min-border-light);
+}
+
+.el-message-box__status.el-message-box-icon--warning,
+.el-message-box__status.el-message-box-icon--error,
+.el-message-box__status.el-message-box-icon--success {
+  color: var(--min-primary);
+}
+
 .el-button--cyan,
 .el-button--cyan:hover,
 .el-button--cyan:focus,
@@ -237,18 +358,19 @@ label {
   --el-table-border-color: var(--min-border-light);
   --el-table-row-hover-bg-color: var(--min-bg-page);
   color: var(--min-text-regular);
+  background: var(--min-bg-white);
 }
 
 .el-table th.el-table__cell {
-  height: 44px;
+  height: 48px;
   padding: var(--min-space-base) 0;
   font-size: 12px;
   font-weight: 600;
 }
 
 .el-table td.el-table__cell {
-  height: 48px;
+  height: 52px;
-  padding: var(--min-space-base) 0;
+  padding: 10px 0;
 }
 
 .el-table .cell {
@@ -267,6 +389,7 @@ label {
 .el-message-box__header {
   padding: var(--min-space-5) var(--min-space-6) var(--min-space-4);
   border-bottom: 1px solid var(--min-border-light);
+  border-left: 4px solid var(--min-primary);
 }
 
 .el-dialog__title,
@@ -359,4 +482,26 @@ label {
   .el-dialog {
     max-width: calc(100vw - 32px);
   }
+
+  .workspace-view .app-container > .el-form.el-form--inline,
+  .workspace-view .app-container > div:first-child > .el-form.el-form--inline,
+  .workspace-view .tree-sidebar-content .content-inner > .el-form.el-form--inline {
+    padding: 16px 16px 0;
+  }
+
+  .workspace-view .tree-sidebar-manage-wrap {
+    border: 0;
+    flex-direction: column;
+    overflow: visible;
+  }
+
+  .workspace-view .tree-sidebar-manage-wrap .tree-sidebar {
+    width: 100% !important;
+    max-height: 280px;
+    border: 1px solid var(--min-border-light);
+  }
+
+  .workspace-view .tree-sidebar-manage-wrap .content-inner {
+    padding: 16px 0 0;
+  }
 }

src/views/corpusManger/corpus/index.vue

@@ -1,17 +1,21 @@
 <template>
     <div class="page-container">
-        <!-- 统计卡片 -->
+        <aside class="insight-panel">
+            <header>
+                <span>CORPUS / INDEX</span>
+                <strong>语料数据概况</strong>
+            </header>
             <StatCards />
+        </aside>
 
-        <!-- 主体：目录树 + 列表 + 详情 -->
+        <main class="main-layout">
-        <div class="main-layout">
             <div class="left-panel">
                 <CategoryTree @select-category="onSelectCategory" />
             </div>
             <div class="right-panel">
                 <CorpusList :categoryId="categoryId"  />
             </div>
-        </div>
+        </main>
     </div>
 </template>
 <script setup>
@@ -29,32 +33,82 @@ const onSelectCategory = (node) => {
 </script>
 <style lang="scss" scoped>
 .page-container {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: 272px minmax(0, 1fr);
     gap: 20px;
     width: 100%;
     height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.insight-panel {
+    min-width: 0;
     overflow: auto;
+
+    > header {
+        display: flex;
+        min-height: 82px;
+        flex-direction: column;
+        justify-content: center;
+        gap: 5px;
+        padding: 16px 20px;
+        border: 1px solid var(--min-border-light);
+        border-bottom: 0;
+        background: var(--min-bg-white);
+
+        span {
+            color: var(--min-primary);
+            font-size: 10px;
+            font-weight: 600;
+        }
+
+        strong {
+            color: var(--min-text-primary);
+            font-size: 15px;
+            font-weight: 600;
+        }
+    }
+
+    :deep(.row-cards) {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 0;
+    }
+
+    :deep(.row-cards .card) {
+        min-height: 132px;
+        border-bottom: 0;
+        border-radius: 0;
+    }
+
+    :deep(.row-cards .card:last-child) {
+        border-bottom: 1px solid var(--min-border-light);
+    }
 }
 
 .main-layout {
     display: grid;
     grid-template-columns: 260px 1fr;
     gap: 20px;
-    align-items: start;
+    min-width: 0;
-    flex: 1;
+    min-height: 0;
+    align-items: stretch;
+    overflow: auto;
 }
 
 .left-panel {
     position: sticky;
     top: 20px;
     height: 100%;
+    min-height: 0;
 }
 
 .right-panel {
     display: flex;
     flex-direction: column;
     gap: 20px;
+    min-width: 0;
+    min-height: 0;
 }
 
 .detail-wrapper {
@@ -62,8 +116,27 @@ const onSelectCategory = (node) => {
 }
 
 @media (max-width: 1200px) {
+    .page-container {
+        grid-template-columns: minmax(0, 1fr);
+        height: auto;
+        overflow: auto;
+    }
+
+    .insight-panel {
+        overflow: visible;
+    }
+
+    .insight-panel :deep(.row-cards) {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .insight-panel :deep(.row-cards .card) {
+        border-bottom: 1px solid var(--min-border-light);
+    }
+
     .main-layout {
         grid-template-columns: 1fr;
+        overflow: visible;
     }
 
     .left-panel {

src/views/corpusManger/speech_synthesis/components/MainWorkspace.vue

@@ -325,16 +325,18 @@ const cancel = () => {
 <style lang="scss" scoped>
 .main-workspace {
     .workspace-container {
-        display: flex;
+        display: grid;
-        gap: 24px;
+        grid-template-columns: minmax(320px, 0.8fr) minmax(440px, 1.2fr);
+        gap: 20px;
 
         .right {
             flex: 1;
             min-width: 0;
             background: var(--min-bg-white);
             border: 1px solid var(--min-border-light);
+            border-top: 2px solid var(--min-primary);
             padding: 20px;
-            border-radius: var(--min-radius-base);
+            border-radius: 0;
 
             .title {
                 font-size: 16px;
@@ -362,8 +364,9 @@ const cancel = () => {
             min-width: 0;
             background: var(--min-bg-white);
             border: 1px solid var(--min-border-light);
+            border-top: 2px solid var(--min-primary);
             padding: 20px;
-            border-radius: var(--min-radius-base);
+            border-radius: 0;
 
             .title {
                 font-size: 16px;
@@ -391,9 +394,9 @@ const cancel = () => {
     }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 980px) {
     .main-workspace .workspace-container {
-        flex-direction: column;
+        grid-template-columns: minmax(0, 1fr);
         gap: 16px;
     }
 }

src/views/corpusManger/speech_synthesis/index.vue

@@ -1,17 +1,16 @@
 <template>
     <div class="page-container">
-        <!-- 统计卡片 -->
+        <aside class="statCards">
-        <div class="statCards">
+            <header><span>SPEECH / METRICS</span><strong>合成运行指标</strong></header>
             <StatCards />
-        </div>
+        </aside>
 
-        <!-- 主工作区 -->
+        <main class="synthesis-workspace">
             <div class="mainWorkspace">
                 <MainWorkspace @refresh="refresh" />
             </div>
-
-        <!-- 任务列表 -->
             <TaskList ref="taskListRef" />
+        </main>
     </div>
 </template>
 <script setup>
@@ -27,16 +26,70 @@ const refresh = () => {
 </script>
 <style lang="scss" scoped>
 .page-container {
+    display: grid;
+    grid-template-columns: 252px minmax(0, 1fr);
+    gap: 20px;
     width: 100%;
     height: 100%;
-    overflow: auto;
+    min-height: 0;
+    overflow: hidden;
 
     .statCards {
-        margin-bottom: 12px;
+        min-width: 0;
+        overflow: auto;
+
+        > header {
+            display: flex;
+            min-height: 78px;
+            flex-direction: column;
+            justify-content: center;
+            gap: 5px;
+            padding: 16px 20px;
+            border: 1px solid var(--min-border-light);
+            border-bottom: 0;
+            background: var(--min-bg-white);
+
+            span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
+            strong { color: var(--min-text-primary); font-size: 15px; font-weight: 600; }
+        }
+
+        :deep(.row-cards) {
+            grid-template-columns: minmax(0, 1fr);
+            gap: 0;
+        }
+
+        :deep(.row-cards .card) {
+            min-height: 118px;
+            border-bottom: 0;
+            border-radius: 0;
+        }
+
+        :deep(.row-cards .card:last-child) {
+            border-bottom: 1px solid var(--min-border-light);
+        }
+    }
+
+    .synthesis-workspace {
+        min-width: 0;
+        min-height: 0;
+        overflow: auto;
     }
 
     .mainWorkspace {
-        margin-bottom: 12px;
+        margin-bottom: 20px;
     }
 }
+
+@media (max-width: 1180px) {
+    .page-container {
+        grid-template-columns: minmax(0, 1fr);
+        height: auto;
+        overflow: auto;
+    }
+
+    .page-container .statCards { overflow: visible; }
+    .page-container .statCards :deep(.row-cards) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .page-container .statCards :deep(.row-cards .card) { border-bottom: 1px solid var(--min-border-light); }
+    .page-container .synthesis-workspace { overflow: visible; }
+}
 </style>

src/views/device/register/index.vue

@@ -2,8 +2,8 @@
   <div class="app-container robot-device-page">
     <section class="page-heading">
       <div>
-        <h2>机器人设备</h2>
+        <span>DEVICE / INVENTORY</span>
-        <p>设备由机器人在线上报，切换机器人后自动刷新。</p>
+        <h2>机器人设备台账</h2>
       </div>
       <div class="robot-selector">
         <span>当前机器人</span>
@@ -16,20 +16,24 @@
       </div>
     </section>
 
-    <section class="status-strip">
+    <div class="device-workspace">
+      <aside class="status-strip">
+        <header><span>STATUS</span><strong>库存状态</strong></header>
         <div><strong>{{ devices.length }}</strong><span>设备总数</span></div>
         <div><strong class="online">{{ onlineCount }}</strong><span>在线设备</span></div>
         <div><strong class="fault">{{ faultCount }}</strong><span>故障设备</span></div>
+      </aside>
+
+      <section class="device-data">
         <div class="filters">
+          <span>DEVICE LIST</span>
           <el-input v-model="keyword" clearable :prefix-icon="Search" placeholder="搜索名称或设备 ID" />
           <el-select v-model="deviceKind" clearable placeholder="全部类型">
             <el-option v-for="item in deviceKinds" :key="item.value"
               :label="item.label" :value="item.value" />
           </el-select>
         </div>
-    </section>
+        <el-table v-loading="loading" :data="filteredDevices" height="100%"
-
-    <el-table v-loading="loading" :data="filteredDevices" height="calc(100vh - 285px)"
           empty-text="当前机器人尚未上报设备">
           <el-table-column label="设备" min-width="220">
             <template #default="{ row }">
@@ -68,6 +72,8 @@
             </template>
           </el-table-column>
         </el-table>
+      </section>
+    </div>
   </div>
 </template>
 
@@ -155,19 +161,26 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
-.robot-device-page { min-height: 100%; background: var(--min-bg-white); }
+.robot-device-page { display: flex; height: 100%; min-height: 560px; flex-direction: column; background: transparent; }
 .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 4px 0 20px; }
+.page-heading > div:first-child { display: flex; align-items: baseline; gap: 14px; }
+.page-heading > div:first-child > span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
 .page-heading h2 { margin: 0 0 4px; color: var(--min-text-primary); font-size: 20px; font-weight: 600; letter-spacing: 0; }
-.page-heading p { margin: 0; color: var(--min-text-secondary); font-size: 13px; }
 .robot-selector { display: flex; align-items: center; gap: 8px; color: var(--min-text-regular); font-size: 13px; }
 .robot-selector .el-select { width: 330px; }
-.status-strip { display: flex; align-items: center; gap: 32px; margin-bottom: 16px; padding: 16px 20px; border: 1px solid var(--min-border-light); border-radius: var(--min-radius-base); background: var(--min-bg-white); }
+.device-workspace { display: grid; flex: 1; min-height: 0; grid-template-columns: 196px minmax(0, 1fr); border: 1px solid var(--min-border-light); background: var(--min-bg-white); }
-.status-strip > div:not(.filters) { display: grid; min-width: 74px; }
+.status-strip { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid var(--min-border-light); background: var(--min-bg-white); }
-.status-strip strong { color: var(--min-text-primary); font-size: 24px; font-weight: 600; line-height: 28px; }
+.status-strip header { display: flex; min-height: 74px; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--min-border-light); }
-.status-strip strong.online { color: #16a34a; }
+.status-strip header span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
-.status-strip strong.fault { color: #dc2626; }
+.status-strip header strong { color: var(--min-text-primary); font-size: 15px; font-weight: 600; }
+.status-strip > div { display: flex; min-height: 112px; flex-direction: column; justify-content: center; gap: 6px; padding: 20px; border-bottom: 1px solid var(--min-border-light); }
+.status-strip strong { color: var(--min-text-primary); font-size: 28px; font-weight: 600; line-height: 32px; }
+.status-strip strong.online { color: var(--min-primary); }
+.status-strip strong.fault { color: var(--min-text-primary); }
 .status-strip span { color: var(--min-text-secondary); font-size: 12px; }
-.filters { display: flex; flex: 1; justify-content: flex-end; gap: 10px; }
+.device-data { display: grid; min-width: 0; min-height: 0; grid-template-rows: 74px minmax(0, 1fr); }
+.filters { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--min-border-light); }
+.filters > span { margin-right: auto; color: var(--min-text-secondary); font-size: 10px; font-weight: 600; }
 .filters .el-input { width: 240px; }
 .filters .el-select { width: 150px; }
 .device-name { display: flex; align-items: center; gap: 12px; }
@@ -177,8 +190,16 @@ onMounted(async () => {
 .device-name small { overflow: hidden; color: var(--min-text-secondary); text-overflow: ellipsis; }
 .muted { color: var(--min-text-placeholder); }
 @media (max-width: 900px) {
-  .page-heading, .status-strip { align-items: stretch; flex-direction: column; }
+  .robot-device-page { height: auto; }
+  .page-heading { align-items: stretch; flex-direction: column; }
+  .device-workspace { grid-template-columns: minmax(0, 1fr); }
+  .status-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid var(--min-border-light); }
+  .status-strip header { grid-column: 1 / -1; }
+  .status-strip > div { min-height: 90px; border-right: 1px solid var(--min-border-light); }
+  .device-data { min-height: 620px; }
   .robot-selector, .filters { justify-content: flex-start; flex-wrap: wrap; }
   .robot-selector .el-select, .filters .el-input { width: 100%; }
+  .filters { height: auto; }
+  .filters > span { width: 100%; }
 }
 </style>

src/views/flow/index.vue

@@ -4,9 +4,11 @@
  -->
 <template>
   <div class="page">
-    <el-container class="page__container">
+    <el-container class="page__container" :class="{ 'page__container--log': flowInfoData.isLog }">
       <el-header v-if="!flowInfoData.isLog">
         <div class="flow-heading">
+          <span class="flow-heading__index">FLOW / 01</span>
+          <div class="flow-heading__identity">
             <div class="flow-heading__name">{{ flowInfoData.name || "未命名流程" }}</div>
             <div class="flow-status" :class="`flow-status--${flowState}`">
               <span class="flow-status__dot"></span>
@@ -19,6 +21,7 @@
               正在查看 V{{ previewingVersionNo }}
             </el-tag>
           </div>
+        </div>
         <div v-if="!versionPreviewMode" class="btn__container">
           <div class="btn flow-actions">
             <el-tag v-if="hasRunResult && ['testRunError', 'testRunFinish'].includes(flowState)" :type="flowState === 'testRunFinish' ? 'success' : 'danger'">
@@ -121,6 +124,7 @@
           <Aside />
         </el-aside>
         <el-main>
+          <div class="canvas-stage">
             <div class="canvas-toolbar">
               <el-tooltip v-if="!flowStore.disableForm" content="撤销" placement="bottom">
                 <el-button aria-label="撤销" @click="lf.undo()"><el-icon><RefreshLeft /></el-icon></el-button>
@@ -176,6 +180,27 @@
               <Background color="#d9dee8" :gap="24" :size="1" />
               <Controls position="bottom-right" />
             </VueFlow>
+          </div>
+          <aside class="flow-summary">
+            <header>
+              <span>FLOW INDEX</span>
+              <strong>流程概况</strong>
+            </header>
+            <div class="flow-summary__metrics">
+              <div><strong>{{ flowMetrics.nodeCount }}</strong><span>节点</span></div>
+              <div><strong>{{ flowMetrics.edgeCount }}</strong><span>连线</span></div>
+              <div><strong>{{ nodeErrorList.length }}</strong><span>异常</span></div>
+            </div>
+            <dl class="flow-summary__list">
+              <div><dt>当前状态</dt><dd>{{ stateMap[flowState] }}</dd></div>
+              <div><dt>编辑状态</dt><dd>{{ draftDirty ? '有未保存修改' : '已同步' }}</dd></div>
+              <div><dt>发布版本</dt><dd>{{ publishedVersionNo ? `V${publishedVersionNo}` : '未发布' }}</dd></div>
+              <div><dt>画布模式</dt><dd>{{ flowStore.disableForm ? '只读' : '编辑' }}</dd></div>
+            </dl>
+            <button class="flow-summary__fit" type="button" @click="fitView">
+              <el-icon><FullScreen /></el-icon><span>适应全部节点</span>
+            </button>
+          </aside>
         </el-main>
       </el-container>
     </el-container>
@@ -849,6 +874,10 @@ const flowInfoData = ref({
   isLog: false,
   name: "流程",
 });
+const flowMetrics = computed(() => ({
+  nodeCount: (vueFlow.getNodes.value || []).length,
+  edgeCount: (vueFlow.getEdges.value || []).length,
+}));
 
 /**
  * 试运行
@@ -2744,24 +2773,44 @@ onUnmounted(() => {
   overflow: hidden;
 
   .page__container {
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
     position: relative;
 
     .el-header {
       display: flex;
+      height: auto;
+      min-height: 92px;
       align-items: center;
       justify-content: space-between;
-      padding: 0 16px;
+      padding: 14px 20px;
       border-bottom: 1px solid var(--min-border-light);
       background: var(--min-bg-white);
-      gap: 18px;
+      gap: 24px;
 
       .flow-heading {
+        display: flex;
+        flex: 0 0 230px;
+        min-width: 0;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+      }
+
+      .flow-heading__index {
+        color: var(--min-primary);
+        font-size: 10px;
+        font-weight: 600;
+      }
+
+      .flow-heading__identity {
         display: flex;
         min-width: 0;
         align-items: center;
-        gap: 10px;
+        flex-wrap: wrap;
+        gap: 8px;
       }
 
       .flow-heading__name {
@@ -2796,37 +2845,26 @@ onUnmounted(() => {
       }
 
       .flow-status--release,
-      .flow-status--testRunFinish {
-        border-color: #c8ead5;
-        background: #effaf3;
-        color: #1e7d49;
-      }
-
       .flow-status--testRunning,
-      .flow-status--updateData {
+      .flow-status--testRunFinish,
-        border-color: #cbdcf8;
+      .flow-status--updateData,
-        background: #f0f6ff;
-        color: #2f6fca;
-      }
-
       .flow-status--testRunError,
-      .flow-status--stop {
+      .flow-status--stop,
-        border-color: #f1cecb;
-        background: #fff3f2;
-        color: #c33b32;
-      }
-
       .flow-status--pause {
-        border-color: #ead9b8;
+        border-color: var(--min-primary-border);
-        background: #fff9eb;
+        background: var(--min-primary-soft);
-        color: #9a6700;
+        color: var(--min-primary);
       }
 
       .btn__container {
         display: flex;
+        flex: 1;
         min-width: 0;
         align-items: center;
+        justify-content: flex-end;
         gap: 10px;
+        overflow-x: auto;
+        scrollbar-width: thin;
 
         .btn {
           display: flex;
@@ -2844,13 +2882,17 @@ onUnmounted(() => {
     }
 
     .container {
-      height: calc(100% - 60px);
+      flex: 1;
+      min-height: 0;
     }
 
     .el-main {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 216px;
       padding: 0;
       position: relative;
       overflow: hidden;
+      background: var(--min-bg-white);
     }
 
     .el-aside {
@@ -2861,6 +2903,13 @@ onUnmounted(() => {
       background: var(--min-bg-page);
     }
 
+    .canvas-stage {
+      position: relative;
+      min-width: 0;
+      overflow: hidden;
+      border-right: 1px solid var(--min-border-light);
+    }
+
     .canvas-toolbar {
       display: flex;
       position: absolute;
@@ -2972,6 +3021,129 @@ onUnmounted(() => {
         box-shadow: none;
       }
     }
+
+    .flow-summary {
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+      background: var(--min-bg-white);
+
+      > header {
+        display: flex;
+        min-height: 74px;
+        flex-direction: column;
+        justify-content: center;
+        gap: 4px;
+        padding: 14px 18px;
+        border-bottom: 1px solid var(--min-border-light);
+
+        span {
+          color: var(--min-primary);
+          font-size: 10px;
+          font-weight: 600;
+        }
+
+        strong {
+          color: var(--min-text-primary);
+          font-size: 15px;
+          font-weight: 600;
+        }
+      }
+    }
+
+    .flow-summary__metrics {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      border-bottom: 1px solid var(--min-border-light);
+
+      > div {
+        display: flex;
+        min-width: 0;
+        height: 86px;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        border-right: 1px solid var(--min-border-light);
+
+        &:last-child { border-right: 0; }
+      }
+
+      strong {
+        color: var(--min-text-primary);
+        font-size: 20px;
+        font-weight: 600;
+      }
+
+      span {
+        margin-top: 4px;
+        color: var(--min-text-secondary);
+        font-size: 10px;
+      }
+    }
+
+    .flow-summary__list {
+      margin: 0;
+      padding: 8px 18px;
+
+      > div {
+        display: flex;
+        min-height: 48px;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        border-bottom: 1px solid var(--min-border-light);
+      }
+
+      dt,
+      dd { margin: 0; }
+
+      dt {
+        color: var(--min-text-secondary);
+        font-size: 11px;
+      }
+
+      dd {
+        overflow: hidden;
+        color: var(--min-text-primary);
+        font-size: 11px;
+        font-weight: 600;
+        text-align: right;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .flow-summary__fit {
+      display: flex;
+      height: 44px;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      margin: auto 18px 18px;
+      border: 1px solid var(--min-border-light);
+      border-radius: var(--min-radius-sm);
+      background: var(--min-bg-white);
+      color: var(--min-text-regular);
+      cursor: pointer;
+
+      &:hover {
+        border-color: var(--min-primary);
+        color: var(--min-primary);
+      }
+    }
+  }
+
+  @media (max-width: 1280px) {
+    .page__container .el-main { grid-template-columns: minmax(0, 1fr) 192px; }
+    .page__container .el-aside { width: 236px; }
+  }
+
+  @media (max-width: 1080px) {
+    .page__container .el-main { grid-template-columns: minmax(0, 1fr); }
+    .page__container .flow-summary { display: none; }
+    .page__container .el-header { align-items: flex-start; flex-direction: column; }
+    .page__container .el-header .flow-heading { flex-basis: auto; }
+    .page__container .el-header .btn__container { width: 100%; justify-content: flex-start; }
   }
 }
 </style>

src/views/index.vue

@@ -8,7 +8,7 @@
         </div>
         <h1>招商车研机器人智能测试管理系统</h1>
         <p class="hero-description">
-          连接设备、编排流程、执行测试与巡检任务，集中管理机器人全生命周期测试业务。
+          DEVICE {{ stats.device.value }} / FLOW {{ stats.flow.value }} / INSPECTION {{ stats.inspection.value }} / INSTANCE {{ stats.instance.value }}
         </p>
         <div class="hero-actions">
           <el-button type="primary" size="large" @click="router.push('/flow')">
@@ -29,6 +29,7 @@
       </div>
     </section>
 
+    <div class="operations-layout">
       <section class="overview-section" aria-labelledby="overview-title">
       <div class="section-heading">
         <div>
@@ -57,6 +58,7 @@
       </div>
       </section>
 
+      <main class="operations-main">
         <section class="workspace-grid">
           <div class="dashboard-panel task-panel">
         <div class="panel-heading">
@@ -121,7 +123,6 @@
             </span>
             <span class="feature-copy">
               <strong>{{ feature.title }}</strong>
-              <small>{{ feature.description }}</small>
             </span>
             <el-icon class="feature-arrow"><ArrowRight /></el-icon>
           </button>
@@ -160,6 +161,8 @@
         <span>{{ recentInstancesRestricted ? '暂无测试实例查看权限' : '暂无测试执行记录' }}</span>
       </div>
         </section>
+      </main>
+    </div>
   </div>
 </template>
 
@@ -445,23 +448,23 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  padding: 0 2px 24px;
+  padding: 0 32px 32px;
   color: var(--el-text-color-primary);
 }
 
 .hero-panel {
   position: relative;
-  min-height: 196px;
+  min-height: 320px;
-  padding: 32px;
+  padding: 48px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
-  border: 1px solid var(--min-border-light);
+  border: 0;
-  border-radius: var(--min-radius-base);
+  border-radius: 0;
-  background: var(--min-bg-white);
+  background: #18202a;
-  color: var(--min-text-primary);
+  color: #ffffff;
 }
 
 .hero-panel::before {
@@ -472,8 +475,16 @@ onBeforeUnmount(() => {
   background-image: url('../assets/images/index-background.jpg');
   background-position: center 48%;
   background-size: cover;
-  filter: grayscale(1);
+  filter: grayscale(1) contrast(1.08);
-  opacity: 0.07;
+  opacity: 0.78;
+}
+
+.hero-panel::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: rgba(17, 24, 39, 0.62);
 }
 
 .hero-content,
@@ -483,7 +494,7 @@ onBeforeUnmount(() => {
 }
 
 .hero-content {
-  max-width: 760px;
+  max-width: 720px;
 }
 
 .platform-state {
@@ -491,7 +502,7 @@ onBeforeUnmount(() => {
   align-items: center;
   gap: 9px;
   margin-bottom: 13px;
-  color: var(--min-text-secondary);
+  color: rgba(255, 255, 255, 0.74);
   font-size: 13px;
   font-weight: 600;
 }
@@ -505,7 +516,8 @@ onBeforeUnmount(() => {
 
 .hero-content h1 {
   margin: 0;
-  font-size: 24px;
+  max-width: 680px;
+  font-size: 36px;
   line-height: 1.28;
   font-weight: 600;
   letter-spacing: 0;
@@ -514,8 +526,8 @@ onBeforeUnmount(() => {
 .hero-description {
   max-width: 670px;
   margin: 12px 0 22px;
-  color: var(--min-text-secondary);
+  color: rgba(255, 255, 255, 0.76);
-  font-size: 14px;
+  font-size: 15px;
   line-height: 1.65;
 }
 
@@ -538,21 +550,21 @@ onBeforeUnmount(() => {
 }
 
 .cockpit-button {
-  border-color: var(--min-border-light) !important;
+  border-color: rgba(255, 255, 255, 0.62) !important;
-  background: var(--min-bg-white) !important;
+  background: transparent !important;
-  color: var(--min-text-regular) !important;
+  color: #ffffff !important;
 }
 
 .cockpit-button:hover {
-  border-color: var(--min-primary) !important;
+  border-color: #ffffff !important;
-  background: var(--min-primary-soft) !important;
+  background: rgba(255, 255, 255, 0.12) !important;
-  color: var(--min-primary) !important;
+  color: #ffffff !important;
 }
 
 .hero-time {
   min-width: 190px;
   padding-left: 26px;
-  border-left: 1px solid var(--min-border-light);
+  border-left: 1px solid rgba(255, 255, 255, 0.36);
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -568,12 +580,25 @@ onBeforeUnmount(() => {
 
 .hero-time > span:last-child,
 .time-label {
-  color: var(--min-text-secondary);
+  color: rgba(255, 255, 255, 0.72);
   font-size: 13px;
 }
 
+.operations-layout {
+  display: grid;
+  grid-template-columns: 292px minmax(0, 1fr);
+  gap: 24px;
+  padding-top: 24px;
+}
+
+.operations-main {
+  min-width: 0;
+}
+
 .overview-section {
-  padding: 24px 0 20px;
+  padding: 0;
+  border-top: 2px solid var(--min-primary);
+  background: var(--min-bg-white);
 }
 
 .section-heading,
@@ -585,7 +610,12 @@ onBeforeUnmount(() => {
 }
 
 .section-heading {
-  margin-bottom: 14px;
+  min-height: 72px;
+  margin: 0;
+  padding: 14px 16px;
+  border-right: 1px solid var(--min-border-light);
+  border-bottom: 1px solid var(--min-border-light);
+  border-left: 1px solid var(--min-border-light);
 }
 
 .section-kicker {
@@ -612,19 +642,22 @@ onBeforeUnmount(() => {
 
 .metric-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1fr);
-  gap: 14px;
+  gap: 0;
 }
 
 .metric-card {
   position: relative;
-  min-height: 116px;
+  min-height: 104px;
-  padding: 20px;
+  padding: 16px;
   display: flex;
   align-items: center;
   gap: 16px;
-  border: 1px solid var(--el-border-color-lighter);
+  border: 0;
-  border-radius: var(--min-radius-base);
+  border-right: 1px solid var(--min-border-light);
+  border-bottom: 1px solid var(--min-border-light);
+  border-left: 1px solid var(--min-border-light);
+  border-radius: 0;
   background: var(--el-bg-color);
   transition: border-color 160ms ease, background-color 160ms ease;
 }
@@ -655,7 +688,7 @@ onBeforeUnmount(() => {
 .metric-content {
   min-width: 0;
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: baseline;
   column-gap: 10px;
 }
@@ -691,16 +724,17 @@ onBeforeUnmount(() => {
 
 .workspace-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
+  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
-  gap: 16px;
+  gap: 24px;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
 }
 
 .dashboard-panel {
   min-width: 0;
   padding: 20px;
-  border: 1px solid var(--el-border-color-lighter);
+  border: 1px solid var(--min-border-light);
-  border-radius: var(--min-radius-base);
+  border-top: 2px solid var(--min-primary);
+  border-radius: 0;
   background: var(--el-bg-color);
 }
 
@@ -841,7 +875,7 @@ onBeforeUnmount(() => {
   min-height: 76px;
   padding: 10px;
   border: 1px solid transparent;
-  border-radius: var(--min-radius-base);
+  border-radius: 0;
   display: grid;
   grid-template-columns: 38px minmax(0, 1fr) 14px;
   align-items: center;
@@ -889,7 +923,7 @@ onBeforeUnmount(() => {
 }
 
 .recent-panel {
-  margin-bottom: 2px;
+  margin-bottom: 0;
 }
 
 .recent-list {
@@ -969,8 +1003,17 @@ onBeforeUnmount(() => {
 }
 
 @media (max-width: 1200px) {
+  .operations-layout {
+    grid-template-columns: 1fr;
+  }
+
   .metric-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .metric-card {
+    border-top: 1px solid var(--min-border-light);
+    border-left: 0;
   }
 
   .workspace-grid {
@@ -980,12 +1023,12 @@ onBeforeUnmount(() => {
 
 @media (max-width: 768px) {
   .home-dashboard {
-    padding-bottom: 16px;
+    padding: 0 16px 16px;
   }
 
   .hero-panel {
     min-height: 0;
-    padding: 28px 22px;
+    padding: 36px 24px;
     align-items: flex-start;
     flex-direction: column;
   }
@@ -1016,6 +1059,10 @@ onBeforeUnmount(() => {
     grid-template-columns: 1fr;
   }
 
+  .metric-card {
+    border-left: 1px solid var(--min-border-light);
+  }
+
   .recent-item:nth-child(2) {
     border-top: 1px solid var(--el-border-color-extra-light);
   }

src/views/inspection/cockpit/components/Header.vue

@@ -1,20 +1,25 @@
 <template>
     <div class="header-container">
-        <div class="left">
+        <div class="cockpit-brand">
-            <div class="date">
+            <span>CMVR / INS</span>
-                <div>{{ currentTime }}</div>
+            <strong>两江鱼复智能网联新能源汽车产业基地数字化平台</strong>
-                <div class="week">{{ weekText }}</div>
-            </div>
-            <div class="binary-strip">{{ binaryText }}</div>
-        </div>
-        <div class="application-title">两江鱼复智能网联新能源汽车产业基地数字化平台</div>
-        <div class="right">
-            <div class="binary-strip">{{ binaryText }}</div>
-            <div class="btn-container">
-                <button class="nav-btn"  :class="{ active: activePage === 'home' }" @click="handleBtn('home')">地图总览</button>
-                <button class="nav-btn"  :class="{ active: activePage === 'monitoring' }" @click="handleBtn('monitoring')">智能监控</button>
-                <button class="nav-btn"  :class="{ active: activePage === 'manualTakeover' }" @click="handleBtn('manualTakeover')">人工接管</button>
         </div>
+        <div class="cockpit-nav-label"><span>工作视图</span><b>03</b></div>
+        <nav class="btn-container" aria-label="巡检驾驶舱视图">
+            <button class="nav-btn" :class="{ active: activePage === 'home' }" @click="handleBtn('home')">
+                <span>01</span><strong>地图总览</strong><small>MAP OVERVIEW</small>
+            </button>
+            <button class="nav-btn" :class="{ active: activePage === 'monitoring' }" @click="handleBtn('monitoring')">
+                <span>02</span><strong>智能监控</strong><small>LIVE MONITOR</small>
+            </button>
+            <button class="nav-btn" :class="{ active: activePage === 'manualTakeover' }" @click="handleBtn('manualTakeover')">
+                <span>03</span><strong>人工接管</strong><small>MANUAL CONTROL</small>
+            </button>
+        </nav>
+        <div class="cockpit-clock">
+            <span class="clock-status"><i></i> SYSTEM LIVE</span>
+            <strong>{{ currentTime }}</strong>
+            <small>{{ weekText }}</small>
         </div>
     </div>
 </template>
@@ -26,8 +31,6 @@ const emits = defineEmits(['activePage'])
 const currentTime = ref('')
 const weekText = ref('')
 
-const binaryText = ref('13513034532438213')
-
 const weekNames = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
 const updateClock = () => {
     const now = new Date();
@@ -41,122 +44,181 @@ const updateClock = () => {
     weekText.value = weekNames[now.getDay()]
 }
 
-const genBinary = (len) => {
-    let str = '';
-    for (let i = 0; i < len; i++) str += Math.round(Math.random()).toString();
-    return str;
-}
-
-const animateBinary = () => {
-    binaryText.value = genBinary(30)
-}
-
 const activePage = ref('home')
 const handleBtn = (page) => {
     activePage.value = page
     emits("activePage", page);
 }
 
-let clockTimer, binaryTimer;
+let clockTimer;
 onMounted(() => {
     updateClock();
     clockTimer = setInterval(updateClock, 1000);
-    animateBinary()
-    binaryTimer = setInterval(animateBinary, 400);
 })
 
 onUnmounted(() => {
     clearInterval(clockTimer)
-    clearInterval(binaryTimer)
 })
 
 </script>
 <style lang="scss" scoped>
 .header-container {
-    // width: 100%;
+    width: 100%;
     height: 100%;
     display: flex;
-    gap: 24px;
+    min-height: 0;
-    margin: 0 24px;
+    flex-direction: column;
+    margin: 0;
+    background: var(--min-bg-white);
 }
 
-.left { 
+.cockpit-brand {
-    flex: 1;
     display: flex;
-    justify-content: space-evenly;
+    min-height: 164px;
-
+    flex-direction: column;
-    .date {
-        display: flex;
-        align-items: center;
     justify-content: center;
-        gap: 12px;
+    gap: 14px;
-        color: var(--min-text-secondary);
+    padding: 24px;
-        font-size: 13px;
+    border-bottom: 1px solid var(--min-border-light);
-        font-weight: 600;
-        letter-spacing: 0;
 
-        .week {
+    span {
-            font-size: 13px;
+        color: var(--min-primary);
-        }
+        font-size: 10px;
-    }
-}
-
-.application-title { 
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
         font-weight: 600;
-    text-align: center;
+    }
+
+    strong {
         color: var(--min-text-primary);
-    letter-spacing: 0;
+        font-size: 16px;
-    white-space: nowrap;
+        font-weight: 600;
+        line-height: 1.65;
+    }
 }
 
-.right {
+.cockpit-nav-label {
-    flex: 1;
-    display: flex;
-    justify-content: space-evenly;
-
-    .btn-container {
     display: flex;
+    height: 52px;
     align-items: center;
     justify-content: space-between;
-        gap: 12px ;
+    padding: 0 24px;
+    border-bottom: 1px solid var(--min-border-light);
+    color: var(--min-text-secondary);
+    font-size: 11px;
+
+    b {
+        color: var(--min-text-primary);
+        font-size: 12px;
+        font-weight: 600;
+    }
+}
+
+.btn-container {
+    display: flex;
+    flex-direction: column;
 
     .nav-btn {
-            height: 32px;
+        display: grid;
-            padding: 0 12px;
+        position: relative;
-            border: 1px solid var(--min-border-light);
+        min-height: 88px;
-            border-radius: var(--min-radius-sm);
+        grid-template-columns: 22px minmax(0, 1fr);
+        align-items: center;
+        column-gap: 10px;
+        row-gap: 3px;
+        padding: 16px 24px;
+        border: 0;
+        border-bottom: 1px solid var(--min-border-light);
         background: var(--min-bg-white);
         color: var(--min-text-secondary);
-            font-size: 14px;
+        text-align: left;
         cursor: pointer;
-            transition: all 0.2s;
-            white-space: nowrap;
-        }
 
-        .active {
+        > span {
-            background: var(--min-primary-soft);
+            width: 22px;
-            border-color: var(--min-primary);
+            grid-row: 1 / 3;
-            color: var(--min-primary);
+            color: var(--min-text-secondary);
-            box-shadow: none;
-        }
-    }
-}
-
- .binary-strip {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: 'Orbitron', monospace;
             font-size: 10px;
-    color: var(--min-text-placeholder);
+        }
-    letter-spacing: 2px;
+
-    white-space: nowrap;
+        strong {
-    overflow: hidden;
+            grid-column: 2;
+            color: var(--min-text-primary);
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        small {
+            grid-column: 2;
+            margin-left: 0;
+            color: var(--min-text-secondary);
+            font-size: 9px;
+        }
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: 3px;
+            background: transparent;
+        }
+
+        &:hover {
+            background: var(--min-bg-page);
+        }
+
+        &.active {
+            background: var(--min-primary-soft);
+
+            &::before { background: var(--min-primary); }
+            > span,
+            strong { color: var(--min-primary); }
+        }
+    }
 }
 
+.cockpit-clock {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-top: auto;
+    padding: 20px 24px;
+    border-top: 1px solid var(--min-border-light);
+
+    .clock-status {
+        color: var(--min-primary);
+        font-size: 9px;
+        font-weight: 600;
+
+        i {
+            display: inline-block;
+            width: 5px;
+            height: 5px;
+            margin-right: 6px;
+            border-radius: 50%;
+            background: var(--min-primary);
+        }
+    }
+
+    strong {
+        color: var(--min-text-primary);
+        font-size: 13px;
+        font-weight: 600;
+    }
+
+    small {
+        color: var(--min-text-secondary);
+        font-size: 11px;
+    }
+}
+
+@media (max-width: 900px) {
+    .cockpit-brand { min-height: 112px; }
+    .cockpit-brand strong { font-size: 14px; line-height: 1.4; }
+    .cockpit-nav-label,
+    .cockpit-clock { display: none; }
+    .btn-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .btn-container .nav-btn { min-height: 64px; padding: 12px; }
+    .btn-container .nav-btn small { display: none; }
+}
 </style>

src/views/inspection/cockpit/components/ManualTakeover/VoiceConversation.vue

@@ -822,7 +822,7 @@ $panel-border: rgb(112 192 255 / 24%);
 
     h1 {
       margin: 0;
-      font-size: clamp(23px, 3vw, 30px);
+      font-size: 28px;
       line-height: 1.2;
       letter-spacing: 5px;
       text-shadow: 0 0 25px rgb(79 159 255 / 25%);

src/views/inspection/cockpit/index.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="inspection-cockpit">
-        <div class="header">
+        <aside class="header">
             <Header @active-page="activePage" />
-        </div>
+        </aside>
         <div class="body-box">
             <MapOverview v-if="currentPage === 'home'" />
             <ManualTakeover v-if="currentPage === 'manualTakeover'" />
@@ -34,21 +34,33 @@ const activePage = (page) => {
     position: relative;
     z-index: 1;
     background-color: var(--min-bg-page);
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: 248px minmax(0, 1fr);
 
     .header {
-        height: 64px;
+        min-width: 0;
+        height: 100%;
         background: var(--min-bg-white);
-        border-bottom: 1px solid var(--min-border-light);
+        border-right: 1px solid var(--min-border-light);
     }
 
     .body-box {
-        flex: 1;
         min-height: 0;
-        padding: 16px;
+        min-width: 0;
+        padding: 20px;
         overflow: hidden;
     }
+
+    @media (max-width: 900px) {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: 176px minmax(0, 1fr);
+
+        .header {
+            height: 176px;
+            border-right: 0;
+            border-bottom: 1px solid var(--min-border-light);
+        }
+    }
 }
 </style>
 <style lang="scss">
@@ -61,11 +73,6 @@ const activePage = (page) => {
         display: none !important;
     }
 
-    .header-container {
-        margin: 0 24px;
-        gap: 24px;
-    }
-
     .page-container,
     > .body-box > .monitor-container {
         border: 1px solid var(--min-border-light);
@@ -100,6 +107,16 @@ const activePage = (page) => {
         background: var(--min-primary-soft) !important;
     }
 
+    .robot svg,
+    .mode-item svg {
+        color: var(--min-primary) !important;
+        fill: currentColor !important;
+    }
+
+    .xgplayer-error .xgplayer-error-refresh {
+        color: var(--min-primary) !important;
+    }
+
     .title,
     .container-title,
     .robot-state,
@@ -174,11 +191,6 @@ const activePage = (page) => {
         border-radius: var(--min-radius-base);
     }
 
-    @media (max-width: 1100px) {
-        .header-container .left { display: none; }
-        .application-title { justify-content: flex-start; }
-    }
-
     @media (max-width: 900px) {
         > .body-box {
             overflow: auto;
@@ -205,10 +217,6 @@ const activePage = (page) => {
     }
 
     @media (max-width: 640px) {
-        .header-container {
-            margin: 0 12px;
-        }
-
         > .body-box {
             padding: 12px;
         }

src/views/lock.vue

@@ -1,21 +1,30 @@
 <template>
   <div class="lock-container">
-    <!-- 时钟 -->
+    <section class="lock-visual">
+      <div class="lock-brand"><span>CMVR / SECURE</span><strong>CONTROL DESK</strong></div>
+      <div class="clock-group">
+        <span>LOCAL TIME</span>
         <div class="lock-time">{{ currentTime }}</div>
         <div class="lock-date">{{ currentDate }}</div>
+      </div>
+      <div class="lock-state"><i></i><span>SESSION LOCKED</span></div>
+    </section>
 
-    <!-- 锁屏卡片 -->
+    <main class="lock-access">
+      <div class="access-index"><span>ACCESS</span><strong>03</strong></div>
       <div class="lock-card">
+        <div class="account-row">
           <div class="avatar-wrap">
             <img :src="userStore.avatar" class="lock-avatar" @error="onAvatarError" />
             <div class="lock-icon"><el-icon><Lock /></el-icon></div>
           </div>
-      <div class="lock-username">{{ userStore.nickName }}</div>
+          <div><span>LOCKED ACCOUNT</span><div class="lock-username">{{ userStore.nickName }}</div></div>
-      <div class="lock-hint">系统已锁定，请输入密码解锁</div>
+        </div>
 
+        <div class="input-label">账户密码</div>
         <div class="input-wrap" :class="{ shake: isShaking }">
           <input ref="passwordInput" v-model="password" type="password" placeholder="请输入登录密码" class="lock-input" @keydown.enter="handleUnlock" autocomplete="off" />
-        <button class="unlock-btn" @click="handleUnlock" :disabled="loading">
+          <button class="unlock-btn" title="解锁" aria-label="解锁" @click="handleUnlock" :disabled="loading">
             <el-icon v-if="!loading"><Right /></el-icon>
             <span v-else class="loading-dot">···</span>
           </button>
@@ -27,6 +36,7 @@
           <a href="javascript:;" @click="goLogin">退出重新登录</a>
         </div>
       </div>
+    </main>
   </div>
 </template>
 
@@ -113,62 +123,115 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .lock-container {
   position: fixed;
   inset: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(440px, 36vw);
   background: var(--min-bg-page);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   z-index: 9999;
   font-family: var(--min-font-family);
   overflow: hidden;
 }
 
-.lock-time {
+.lock-visual {
   position: relative;
-  z-index: 1;
+  isolation: isolate;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 42px 48px;
+  background-image: url('../assets/images/login-background.jpg');
+  background-position: center;
+  background-size: cover;
+}
+
+.lock-visual::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.lock-brand {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  span { padding-right: 16px; border-right: 2px solid var(--min-primary); color: var(--min-primary); font-size: 10px; font-weight: 600; }
+  strong { color: var(--min-text-primary); font-size: 13px; font-weight: 600; }
+}
+
+.clock-group {
+  > span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
+}
+
+.lock-time {
+  margin: 12px 0 4px;
   color: var(--min-text-primary);
-  font-size: 48px;
+  font-size: 72px;
   font-weight: 500;
-  letter-spacing: 0;
-  margin-bottom: 8px;
   font-variant-numeric: tabular-nums;
 }
 
-.lock-date {
+.lock-date { color: var(--min-text-secondary); font-size: 14px; }
+
+.lock-state {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--min-text-regular);
+  font-size: 10px;
+  font-weight: 600;
+
+  i { width: 6px; height: 6px; border-radius: 50%; background: var(--min-primary); }
+}
+
+.lock-access {
   position: relative;
-  z-index: 1;
+  display: flex;
-  font-size: 15px;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  padding: 56px 48px;
+  background: var(--min-bg-white);
+}
+
+.access-index {
+  display: flex;
+  position: absolute;
+  top: 28px;
+  right: 32px;
+  gap: 10px;
   color: var(--min-text-secondary);
-  margin-bottom: 32px;
+  font-size: 10px;
-  letter-spacing: 0;
+
+  strong { color: var(--min-primary); font-size: 12px; font-weight: 600; }
 }
 
 .lock-card {
-  position: relative;
+  width: min(360px, 100%);
-  z-index: 1;
+}
-  width: min(400px, calc(100vw - 32px));
+
-  padding: 32px;
+.account-row {
-  border: 1px solid var(--min-border-light);
-  border-radius: var(--min-radius-base);
-  background: var(--min-bg-white);
   display: flex;
-  flex-direction: column;
   align-items: center;
-  box-shadow: none;
+  gap: 16px;
+  margin-bottom: 36px;
+
+  > div:last-child > span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
 }
 
 .avatar-wrap {
   position: relative;
-  margin-bottom: 16px;
 }
 
 .lock-avatar {
-  width: 80px;
+  width: 64px;
-  height: 80px;
+  height: 64px;
   border-radius: 50%;
   border: 1px solid var(--min-border-light);
   object-fit: cover;
@@ -195,14 +258,14 @@ onBeforeUnmount(() => {
   color: var(--min-text-primary);
   font-size: 18px;
   font-weight: 600;
-  margin-bottom: 6px;
+  margin-top: 5px;
   letter-spacing: 0;
 }
 
-.lock-hint {
+.input-label {
   color: var(--min-text-secondary);
-  font-size: 13px;
+  font-size: 11px;
-  margin-bottom: 28px;
+  margin-bottom: 8px;
 }
 
 .input-wrap {
@@ -305,8 +368,11 @@ onBeforeUnmount(() => {
 }
 
 @media (max-width: 520px) {
-  .lock-time { font-size: 40px; }
+  .lock-container { grid-template-columns: 1fr; grid-template-rows: 220px minmax(0, 1fr); }
-  .lock-date { margin-bottom: 24px; }
+  .lock-visual { padding: 24px; }
-  .lock-card { padding: 24px; }
+  .lock-time { margin-top: 8px; font-size: 44px; }
+  .lock-state { display: none; }
+  .lock-access { padding: 64px 24px; align-items: flex-start; }
+  .lock-card { width: 100%; }
 }
 </style>

src/views/login.vue

@@ -1,7 +1,31 @@
 <template>
   <div class="login">
+    <section class="login-visual">
+      <div class="visual-brand">
+        <span class="visual-brand__index">CMVR / 2026</span>
+        <strong>{{ title }}</strong>
+      </div>
+      <div class="visual-copy">
+        <span>INTELLIGENT TEST OPERATIONS</span>
+        <h1>机器人智能测试<br>运行中枢</h1>
+        <div class="visual-modules">
+          <span>设备接入</span>
+          <span>流程编排</span>
+          <span>巡检执行</span>
+        </div>
+      </div>
+    </section>
+
+    <main class="login-access">
+      <div class="access-index">
+        <span>SECURE ACCESS</span>
+        <strong>01</strong>
+      </div>
       <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">{{ title }}</h3>
+        <div class="form-heading">
+          <span>ACCOUNT</span>
+          <h2>登录工作台</h2>
+        </div>
         <el-form-item prop="username">
           <el-input
             v-model="loginForm.username"
@@ -40,27 +64,26 @@
             <img :src="codeUrl" @click="getCode" class="login-code-img"/>
           </div>
         </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+        <div class="form-options">
-      <el-form-item style="width:100%;">
+          <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
+          <router-link v-if="register" class="link-type" :to="'/register'">立即注册</router-link>
+        </div>
+        <el-form-item class="submit-row">
           <el-button
             :loading="loading"
             size="large"
             type="primary"
-          style="width:100%;"
             @click.prevent="handleLogin"
           >
-          <span v-if="!loading">登 录</span>
+            <span v-if="!loading">进入系统</span>
-          <span v-else>登 录 中...</span>
+            <span v-else>正在登录...</span>
           </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
-        </div>
         </el-form-item>
       </el-form>
-    <!--  底部  -->
       <div class="el-login-footer">
         <span>{{ footerContent }}</span>
       </div>
+    </main>
   </div>
 </template>
 
@@ -167,26 +190,140 @@ getCookie()
 
 <style lang='scss' scoped>
 .login {
-  position: relative;
+  display: grid;
-  isolation: isolate;
+  grid-template-columns: minmax(0, 1fr) minmax(440px, 36vw);
-  display: flex;
-  justify-content: center;
-  align-items: center;
   height: 100%;
   overflow: hidden;
   background: var(--min-bg-page);
 }
-.login::before {
+
-  content: "";
+.login-visual {
-  position: absolute;
+  position: relative;
-  inset: 0;
+  isolation: isolate;
+  min-width: 0;
+  padding: 42px 48px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
   background-image: url("../assets/images/login-background.jpg");
   background-position: center;
   background-size: cover;
-  filter: grayscale(1);
-  opacity: 0.08;
-  z-index: -1;
 }
+
+.login-visual::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: rgba(255, 255, 255, 0.68);
+}
+
+.visual-brand {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+
+  strong {
+    max-width: 420px;
+    color: var(--min-text-primary);
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+
+.visual-brand__index {
+  padding-right: 18px;
+  border-right: 2px solid var(--min-primary);
+  color: var(--min-primary);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.visual-copy {
+  max-width: 620px;
+
+  > span {
+    color: var(--min-primary);
+    font-size: 11px;
+    font-weight: 600;
+  }
+
+  h1 {
+    margin: 14px 0 28px;
+    color: var(--min-text-primary);
+    font-size: 52px;
+    line-height: 1.14;
+    font-weight: 600;
+  }
+}
+
+.visual-modules {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+
+  span {
+    min-width: 104px;
+    padding: 10px 14px;
+    border: 1px solid rgba(31, 41, 55, 0.28);
+    border-right: 0;
+    color: var(--min-text-regular);
+    background: rgba(255, 255, 255, 0.52);
+    font-size: 12px;
+
+    &:last-child {
+      border-right: 1px solid rgba(31, 41, 55, 0.28);
+    }
+  }
+}
+
+.login-access {
+  position: relative;
+  min-width: 0;
+  padding: 42px clamp(36px, 5vw, 76px);
+  border-left: 1px solid var(--min-border-light);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: var(--min-bg-white);
+}
+
+.access-index {
+  position: absolute;
+  top: 32px;
+  right: 36px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--min-text-secondary);
+  font-size: 9px;
+
+  strong {
+    color: var(--min-primary);
+    font-size: 11px;
+    font-weight: 600;
+  }
+}
+
+.form-heading {
+  margin-bottom: 40px;
+
+  span {
+    color: var(--min-primary);
+    font-size: 10px;
+    font-weight: 600;
+  }
+
+  h2 {
+    margin: 8px 0 0;
+    color: var(--min-text-primary);
+    font-size: 28px;
+    line-height: 1.25;
+    font-weight: 600;
+  }
+}
+
 .title {
   margin: 0 0 32px;
   color: var(--min-text-primary);
@@ -196,11 +333,9 @@ getCookie()
 }
 
 .login-form {
-  width: min(420px, calc(100% - 32px));
+  width: 100%;
-  padding: 40px 40px 20px;
+  max-width: 440px;
-  border: 1px solid var(--min-border-light);
+  margin: 0 auto;
-  border-radius: var(--min-radius-base);
-  background: var(--min-bg-white);
   .el-input {
     height: 40px;
     input {
@@ -213,6 +348,27 @@ getCookie()
     margin-left: 0px;
   }
 }
+
+.form-options {
+  min-height: 48px;
+  margin-top: 4px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.submit-row {
+  margin-bottom: 0;
+
+  :deep(.el-form-item__content),
+  :deep(.el-button) {
+    width: 100%;
+  }
+
+  :deep(.el-button) {
+    height: 44px;
+  }
+}
 .login-tip {
   font-size: 13px;
   text-align: center;
@@ -228,11 +384,10 @@ getCookie()
   }
 }
 .el-login-footer {
-  height: 40px;
+  position: absolute;
-  line-height: 40px;
+  right: 0;
-  position: fixed;
+  bottom: 24px;
-  bottom: 0;
+  left: 0;
-  width: 100%;
   text-align: center;
   color: var(--min-text-secondary);
   font-family: var(--min-font-family);
@@ -245,8 +400,65 @@ getCookie()
 }
 
 @media (max-width: 520px) {
-  .login-form {
+  .login {
-    padding: 32px 24px 12px;
+    grid-template-columns: 1fr;
+    grid-template-rows: 220px minmax(0, 1fr);
+  }
+
+  .login-visual {
+    padding: 24px;
+  }
+
+  .visual-brand strong,
+  .visual-modules {
+    display: none;
+  }
+
+  .visual-copy h1 {
+    margin: 8px 0 0;
+    font-size: 28px;
+  }
+
+  .login-access {
+    padding: 54px 24px 48px;
+    justify-content: flex-start;
+  }
+
+  .form-heading {
+    margin-bottom: 28px;
+
+    h2 {
+      font-size: 24px;
+    }
+  }
+
+  .access-index {
+    top: 18px;
+    right: 24px;
+  }
+
+  .el-login-footer {
+    position: static;
+    margin-top: auto;
+    padding-top: 24px;
+  }
+}
+
+@media (max-width: 900px) and (min-width: 521px) {
+  .login {
+    grid-template-columns: minmax(0, 1fr) 440px;
+  }
+
+  .login-visual {
+    padding: 32px;
+  }
+
+  .visual-copy h1 {
+    font-size: 36px;
+  }
+
+  .visual-modules {
+    display: none;
   }
 }
 </style>

src/views/register.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="register">
+    <main class="register-access">
+      <div class="access-index"><span>ACCOUNT</span><strong>02</strong></div>
       <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
-      <h3 class="title">{{ title }}</h3>
+        <div class="form-heading"><span>USER REGISTRATION</span><h2>创建账户</h2><p>{{ title }}</p></div>
         <el-form-item prop="username">
           <el-input
             v-model="registerForm.username"
@@ -52,26 +54,26 @@
             <img :src="codeUrl" @click="getCode" class="register-code-img"/>
           </div>
         </el-form-item>
-      <el-form-item style="width:100%;">
+        <el-form-item class="register-actions">
           <el-button
             :loading="loading"
             size="large"
             type="primary"
-          style="width:100%;"
             @click.prevent="handleRegister"
           >
-          <span v-if="!loading">注 册</span>
+            <span v-if="!loading">注册账户</span>
-          <span v-else>注 册 中...</span>
+            <span v-else>注册中...</span>
           </el-button>
-        <div style="float: right;">
+          <router-link class="link-type" :to="'/login'">返回登录</router-link>
-          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
-        </div>
         </el-form-item>
       </el-form>
-    <!--  底部  -->
+      <div class="el-register-footer"><span>{{ footerContent }}</span></div>
-    <div class="el-register-footer">
+    </main>
-      <span>{{ footerContent }}</span>
+    <section class="register-visual">
-    </div>
+      <div class="visual-brand"><span>CMVR / BID</span><strong>{{ title }}</strong></div>
+      <div class="visual-copy"><span>CONTROL ENVIRONMENT</span><h1>统一测试运营<br>与设备控制</h1></div>
+      <div class="visual-index"><span>FLOW</span><span>INSPECTION</span><span>CORPUS</span></div>
+    </section>
   </div>
 </template>
 
@@ -156,40 +158,61 @@ getCode()
 
 <style lang='scss' scoped>
 .register {
-  position: relative;
+  display: grid;
-  isolation: isolate;
+  grid-template-columns: minmax(440px, 36vw) minmax(0, 1fr);
-  display: flex;
-  justify-content: center;
-  align-items: center;
   height: 100%;
   overflow: hidden;
   background: var(--min-bg-page);
 }
-.register::before {
+
-  content: "";
+.register-visual {
-  position: absolute;
+  position: relative;
-  inset: 0;
+  isolation: isolate;
-  z-index: -1;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 42px 48px;
+  overflow: hidden;
   background-image: url("../assets/images/login-background.jpg");
   background-position: center;
   background-size: cover;
-  filter: grayscale(1);
-  opacity: 0.08;
 }
-.title {
+
-  margin: 0 0 32px;
+.register-visual::before {
-  color: var(--min-text-primary);
+  content: '';
-  font-size: 20px;
+  position: absolute;
-  font-weight: 600;
+  inset: 0;
-  text-align: left;
+  z-index: -1;
+  background: rgba(255, 255, 255, 0.68);
+}
+
+.register-access {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 56px 48px 68px;
+  background: var(--min-bg-white);
+}
+
+.access-index {
+  display: flex;
+  position: absolute;
+  top: 28px;
+  right: 32px;
+  align-items: center;
+  gap: 10px;
+  color: var(--min-text-secondary);
+  font-size: 10px;
+
+  strong { color: var(--min-primary); font-size: 12px; font-weight: 600; }
 }
 
 .register-form {
-  width: min(420px, calc(100% - 32px));
+  width: min(360px, 100%);
-  padding: 40px 40px 20px;
+
-  border: 1px solid var(--min-border-light);
-  border-radius: var(--min-radius-base);
-  background: var(--min-bg-white);
   .el-input {
     height: 40px;
     input {
@@ -202,6 +225,38 @@ getCode()
     margin-left: 0px;
   }
 }
+
+.form-heading {
+  margin-bottom: 32px;
+
+  > span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
+  h2 { margin: 8px 0 5px; color: var(--min-text-primary); font-size: 28px; font-weight: 600; }
+  p { margin: 0; color: var(--min-text-secondary); font-size: 12px; }
+}
+
+.visual-brand {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+
+  span { padding-right: 18px; border-right: 2px solid var(--min-primary); color: var(--min-primary); font-size: 11px; font-weight: 600; }
+  strong { max-width: 420px; color: var(--min-text-primary); font-size: 14px; font-weight: 600; }
+}
+
+.visual-copy {
+  max-width: 620px;
+
+  span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
+  h1 { margin: 14px 0 0; color: var(--min-text-primary); font-size: 52px; font-weight: 600; line-height: 1.14; }
+}
+
+.visual-index {
+  display: flex;
+  flex-wrap: wrap;
+
+  span { min-width: 108px; padding: 10px 14px; border: 1px solid rgba(31, 41, 55, 0.28); border-right: 0; background: rgba(255, 255, 255, 0.52); color: var(--min-text-regular); font-size: 11px; }
+  span:last-child { border-right: 1px solid rgba(31, 41, 55, 0.28); }
+}
 .register-tip {
   font-size: 13px;
   text-align: center;
@@ -217,25 +272,43 @@ getCode()
   }
 }
 .el-register-footer {
-  height: 40px;
+  position: absolute;
-  line-height: 40px;
+  right: 32px;
-  position: fixed;
+  bottom: 20px;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
   color: var(--min-text-secondary);
   font-family: var(--min-font-family);
   font-size: 12px;
   letter-spacing: 0;
 }
+.register-actions :deep(.el-form-item__content) { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
+.register-actions .el-button { flex: 1; margin: 0; }
+.register-actions .link-type { white-space: nowrap; }
 .register-code-img {
   height: 40px;
   padding-left: 12px;
 }
 
 @media (max-width: 520px) {
-  .register-form {
+  .register {
-    padding: 32px 24px 12px;
+    grid-template-columns: 1fr;
+    grid-template-rows: 220px minmax(0, 1fr);
   }
+
+  .register-visual {
+    grid-row: 1;
+    padding: 24px;
+  }
+
+  .visual-brand strong,
+  .visual-index { display: none; }
+  .visual-copy h1 { font-size: 28px; }
+  .register-access { grid-row: 2; padding: 54px 24px 60px; align-items: flex-start; }
+
+  .register-form {
+    width: 100%;
+  }
+
+  .form-heading h2 { font-size: 24px; }
+  .el-register-footer { right: 24px; left: 24px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
 }
 </style>