feat: 导航栏模块开发

src/renderer/components.d.ts

@@ -9,15 +9,22 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
+    ThemeSwitcher: typeof import('./src/components/Theme/themeSwitcher.vue')['default']
     Versions: typeof import('./src/components/Versions.vue')['default']
   }
 }

src/renderer/src/styles/design.scss

@@ -4,18 +4,18 @@
     height: 80px;
   }
   .design-content {
-    background-color: red;
+    // background-color: red;
     height: calc(100vh - 80px);
     .design-panel-box {
-      background-color: deeppink;
+      background-color: #373737;
       width: 64px;
     }
     .design-logic-flow-box {
-      background-color: greenyellow;
+      background-color: #242529;
       width: calc((100% - 64px) * 0.4745);
     }
     .design-content-right {
-      background-color: blue;
+      background-color: #151515;
       width: calc((100% - 64px) * 0.5255);
     }
   }

src/renderer/src/views/Design/Controls/headCtrl.vue

@@ -54,11 +54,13 @@
   </div>
 </template>
 <script lang="ts" setup>
-
+defineOptions({
+  name: 'TitleBar'
+})
 interface Emits {
-  (e: "setting"): void;
+  (e: 'setting'): void
 }
-const emit = defineEmits<Emits>();
+const emit = defineEmits<Emits>()
 
 const dragging = ref(false)
 const mouseX = ref(0)
@@ -130,15 +132,20 @@ const handleClose = () => {
       }
       .title-text {
         width: 270px;
+        height: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         .el-dropdown-link {
+          width: 54px;
+          height: 100%;
           color: #fff;
           font-size: 14px;
           font-weight: 500;
         }
         span {
+          width: 54px;
+          height: 100%;
           color: #fff;
           font-size: 14px;
           font-weight: 500;

src/renderer/src/views/Design/Controls/navCtrl.vue

@@ -1,9 +1,131 @@
 <template>
   <div class="nav-controls-wrap">
-    <ul class="flex">
-      <li v-for="(v, k) in ['保存', '上一步', '下一步', '退出']" :key="k" class="flex flex-center">
-        {{ v }}
-      </li>
-    </ul>
+    <div class="nav-controls">
+      <template v-for="(item, index) in btnInfo" :key="index">
+        <el-button size="small" class="custom-btn">
+          <img class="nav-icon" :src="item.icon" alt="" />
+          <span>{{ item.text }}</span>
+        </el-button>
+      </template>
+    </div>
+    <div class="nav-run">
+      <el-button size="small" class="custom-btn">
+        <img class="nav-icon" src="@/assets/images/navBar/run_mode.png" alt="" />
+        <span>运行模式</span>
+      </el-button>
+    </div>
   </div>
 </template>
+<script lang="ts" setup>
+defineOptions({
+  name: 'NavBar'
+})
+import SaveIcon from '@/assets/images/navBar/save.png'
+import PrevIcon from '@/assets/images/navBar/prev.png'
+import NextIcon from '@/assets/images/navBar/next.png'
+import LockIcon from '@/assets/images/navBar/lock.png'
+import CameraIcon from '@/assets/images/navBar/camera.png'
+import ControlIcon from '@/assets/images/navBar/control.png'
+import GlobalIcon from '@/assets/images/navBar/global.png'
+import CommIcon from '@/assets/images/navBar/comm.png'
+import TriggerIcon from '@/assets/images/navBar/trigger.png'
+import ScriptIcon from '@/assets/images/navBar/script.png'
+import SingleExecIcon from '@/assets/images/navBar/single_execution.png'
+import ContinuousExecIcon from '@/assets/images/navBar/continuous_execution.png'
+import RunInterfaceIcon from '@/assets/images/navBar/run_interface.png'
+import RunModelIcon from '@/assets/images/navBar/run_model.png'
+const btnInfo = [
+  {
+    icon: SaveIcon,
+    text: '保存'
+  },
+  {
+    icon: PrevIcon,
+    text: '上一步'
+  },
+  {
+    icon: NextIcon,
+    text: '下一步'
+  },
+  {
+    icon: LockIcon,
+    text: '锁定'
+  },
+  {
+    icon: CameraIcon,
+    text: '相机管理'
+  },
+  {
+    icon: ControlIcon,
+    text: '控制管理'
+  },
+  {
+    icon: GlobalIcon,
+    text: '全局变量'
+  },
+  {
+    icon: CommIcon,
+    text: '通信管理'
+  },
+  {
+    icon: TriggerIcon,
+    text: '全局触发'
+  },
+  {
+    icon: ScriptIcon,
+    text: '全局脚本'
+  },
+  {
+    icon: SingleExecIcon,
+    text: '单次执行'
+  },
+  {
+    icon: ContinuousExecIcon,
+    text: '连续执行'
+  },
+  {
+    icon: RunInterfaceIcon,
+    text: '编辑运行界面'
+  },
+  {
+    icon: RunModelIcon,
+    text: '编辑运行界面'
+  }
+]
+</script>
+<style lang="scss" scoped>
+.nav-controls-wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 42px;
+  background: #373737;
+  .nav-controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  .custom-btn {
+    display: flex;
+    align-items: center;
+    background-color: #373737;
+    color: white;
+    border: none; /* 可选：移除边框 */
+    font-size: 14px;
+    margin-left: 0;
+    &:hover {
+      background-color: #121212;
+    }
+    .nav-icon {
+      margin-right: 8px;
+      width: 20px;
+      height: 20px;
+    }
+    span {
+      font-weight: 500;
+      font-size: 14px;
+    }
+  }
+}
+</style>

src/renderer/src/views/Design/Controls/panelCtrl.vue

@@ -1,3 +1,111 @@
 <template>
-  <div>123</div>
+  <div class="panel-controls-wrap">
+    <!-- 循环渲染导航项 -->
+    <div class="panel-btn-box">
+      <el-button size="small" class="panel-btn" v-for="(item, index) in btnInfo" :key="index">
+        <img class="panel-icon" :src="item.icon" alt="" />
+      </el-button>
+    </div>
+  </div>
 </template>
+<script lang="ts" setup>
+defineOptions({
+  name: 'PanelBar'
+})
+import GatherIcon from '@/assets/images/panelBar/gather.png' // 采集
+import LocateIcon from '@/assets/images/panelBar/locate.png' // 定位
+import IdentifyIcon from '@/assets/images/panelBar/identify.png' // 识别
+import CalibrateIcon from '@/assets/images/panelBar/calibrate.png' // 校准
+import ImageProcessingIcon from '@/assets/images/panelBar/image_processing.png' // 图片处理
+import ColorProcessingIcon from '@/assets/images/panelBar/color_processing.png' // 色彩处理
+import ImageGenerationIcon from '@/assets/images/panelBar/image_generation.png' // 图片生成
+import LogicalToolsIcon from '@/assets/images/panelBar/logical_tools.png' // 逻辑工具
+import CommunicationIcon from '@/assets/images/panelBar/communication.png' // 通讯
+import DeepLearningIcon from '@/assets/images/panelBar/deep_learning.png' // 深度学习
+
+const btnInfo = [
+  {
+    icon: GatherIcon,
+    text: '采集'
+  },
+  {
+    icon: LocateIcon,
+    text: '定位'
+  },
+  {
+    icon: IdentifyIcon,
+    text: '识别'
+  },
+  {
+    icon: CalibrateIcon,
+    text: '校准'
+  },
+  {
+    icon: ImageProcessingIcon,
+    text: '图片处理'
+  },
+  {
+    icon: ColorProcessingIcon,
+    text: '色彩处理'
+  },
+  {
+    icon: ImageGenerationIcon,
+    text: '图片生成'
+  },
+  {
+    icon: CommunicationIcon,
+    text: '通讯'
+  },
+  {
+    icon: DeepLearningIcon,
+    text: '深度学习'
+  }
+]
+</script>
+<style lang="scss" scoped>
+.panel-controls-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  .panel-btn-box {
+    margin-top: 12px;
+    width: 40px;
+    height: 392px;
+    background: #565656;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    .panel-btn {
+      position: relative;
+      width: 100%;
+      height: 32px;
+      background: #565656;
+      color: white;
+      border: none; /* 可选：移除边框 */
+      margin-left: 0;
+      padding: 5px 8px;
+      .panel-icon {
+        width: 24px;
+        height: 24px !important;
+      }
+      // 三角角标
+      &::after {
+        content: '';
+        position: absolute;
+        right: 4px; // 右下角定位
+        bottom: 4px;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 0 0 4px 4px; // 控制三角大小
+        border-color: transparent transparent #fff transparent; // 三角颜色
+      }
+      &:hover {
+        background: #121212;
+      }
+    }
+  }
+}
+</style>