全局工具栏ui设计

src/components/layout/HeaderButtonBar.vue

@@ -0,0 +1,611 @@
+<template>
+  <div class="header-button-bar" style="position: relative">
+    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick">
+      <!-- 特殊按钮 tab 退出 保存 -->
+      <el-tab-pane v-for="btn in fakeTabs" :key="btn.name" :name="btn.name">
+        <template #label>
+          <span @click.stop>
+            <el-tooltip :content="btn.label" placement="top">
+              <el-button
+                :type="btn.type"
+                :size="btn.size || 'small'"
+                @click="btn.onClick"
+                class="icon-only-button"
+              >
+                <img :src="btn.icon" alt="icon" class="button-icon" />
+              </el-button>
+            </el-tooltip>
+          </span>
+        </template>
+        <template #default></template>
+      </el-tab-pane>
+      <!-- 普通标签页 -->
+      <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
+        <template #label>
+          <el-tooltip :content="tab.label" placement="top">
+            <span class="tab-label">
+              <img :src="tab.icon" alt="icon" class="tab-icon" />
+              {{ tab.label }}
+            </span>
+          </el-tooltip>
+        </template>
+        <div class="button-group">
+          <el-tooltip
+            v-for="button in tab.buttons"
+            :key="button.action"
+            :content="button.label"
+            placement="top"
+          >
+            <el-button
+              type=""
+              @click="emitButtonClick(button.action)"
+              class="icon-text-button"
+            >
+              <img :src="button.icon" alt="icon" class="button-icon" />
+              {{ button.label }}
+            </el-button>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+      <!-- 特殊按钮 tab 帮助 -->
+      <el-tab-pane v-for="btn in fakeTabs2" :key="btn.name" :name="btn.name">
+        <template #label>
+          <span @click.stop>
+            <el-tooltip :content="btn.label" placement="top">
+              <el-button
+                :type="btn.type"
+                :size="btn.size || 'small'"
+                @click="btn.onClick"
+                class="icon-only-button"
+              >
+                <img :src="btn.icon" alt="icon" class="button-icon" />
+              </el-button>
+            </el-tooltip>
+          </span>
+        </template>
+        <template #default></template>
+      </el-tab-pane>
+      <el-tab-pane name="user" key="userButton">
+        <template #label>
+          <span @click.stop style="margin-top:5px;">
+            <el-avatar :src="user" :size="22" />
+            <el-dropdown style="margin-top:4px;">
+              <div class="user-dropdown-trigger">
+                <span class="nickname">{{ nickName }}</span>
+                <el-icon class="el-icon--right"><arrow-down /></el-icon>
+              </div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="handleProfile">
+                    <el-icon><User /></el-icon>
+                    <span>{{ $t("index.userinfo") }}</span>
+                  </el-dropdown-item>
+                  <el-dropdown-item @click="handleChangePassword">
+                    <el-icon><Key /></el-icon>
+                    <span>{{ $t("index.changePassword") }}</span>
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    divided
+                    @click="handleLogout"
+                    style="color: #f56c6c"
+                  >
+                    <el-icon><SwitchButton /></el-icon>
+                    <span>{{ $t("index.logout") }}</span>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </span>
+        </template>
+        <template #default></template>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+
+  <el-dialog
+    v-model="dialog.userinfoDialog"
+    align-center
+    :append-to-body="true"
+    width="600"
+    class="dialog_class"
+    draggable
+  >
+    <template #header="{ titleId, titleClass }">
+      <div class="my-header">
+        <h4 :id="titleId" :class="titleClass">{{ $t("dialog.userinfo") }}</h4>
+      </div>
+    </template>
+
+    <el-card class="userinfo-card" shadow="never">
+      <template #header>
+        <div class="userinfo-header">
+          <el-avatar :src="user" :size="30" style="margin-right: 10px" />
+          <h4 class="userinfo-nickname">
+            {{ userStore.userInfo.nickName || "User" }}
+          </h4>
+        </div>
+      </template>
+      <el-form :label-width="labelWidth" label-position="left">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('dialog.username')">
+              {{ userStore.userInfo.userName }}
+            </el-form-item>
+            <el-form-item :label="$t('dialog.mobileNo')">
+              {{ userStore.userInfo.mobileNo }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('dialog.nickname')">
+              {{ userStore.userInfo.nickName || "User" }}
+            </el-form-item>
+            <el-form-item :label="$t('dialog.email')">
+              {{ userStore.userInfo.email }}
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item :label="$t('dialog.regTime')">
+          {{ userStore.userInfo.regTime }}
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <template #footer>
+      <span class="userinfo-footer lastbtn">
+        <el-button @click="dialog.userinfoDialog = false">{{
+          $t("dialog.cancel")
+        }}</el-button>
+        <el-button @click="dialog.userinfoDialog = false">
+          {{ $t("dialog.ok") }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+    v-model="dialog.changePassword"
+    align-center
+    :append-to-body="true"
+    width="500"
+    class="dialog_class"
+    draggable
+  >
+    <template #header="{ titleId, titleClass }">
+      <div class="my-header">
+        <h4 :id="titleId" :class="titleClass">
+          {{ $t("dialog.changePassword") }}
+        </h4>
+      </div>
+    </template>
+
+    <el-card class="userinfo-card" shadow="never">
+      <el-form :label-width="labelWidth1">
+        <el-form-item :label="`${$t('dialog.oldPassword')}：`">
+          <el-input
+            v-model="pwd.oldPassword"
+            type="password"
+            show-password
+            :placeholder="$t('dialog.inputOldPassword')"
+          />
+        </el-form-item>
+        <el-form-item :label="`${$t('dialog.newPassword')}：`">
+          <el-input
+            v-model="pwd.newPassword"
+            type="password"
+            show-password
+            :placeholder="$t('dialog.inputNewPassword')"
+          />
+        </el-form-item>
+        <el-form-item :label="`${$t('dialog.confirmNewPassword')}：`">
+          <el-input
+            v-model="pwd.confirmNewPassword"
+            type="password"
+            show-password
+            :placeholder="$t('dialog.inputConfirmNewPassword')"
+          />
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <template #footer>
+      <span class="lastbtn">
+        <el-button @click="dialog.changePassword = false">{{
+          $t("dialog.cancel")
+        }}</el-button>
+        <el-button @click="ChangePassword">
+          {{ $t("dialog.ok") }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed } from "vue"
+import { useRouter } from "vue-router"
+import { useI18n } from "vue-i18n"
+import { useUserStore } from "@/store/user"
+import { removeToken, removeUserId } from "@/utils/token"
+import { ElMessageBox, ElMessage } from "element-plus"
+import { ArrowDown, User, Key, SwitchButton } from '@element-plus/icons-vue'
+const userStore = useUserStore()
+const router = useRouter()
+const { t } = useI18n()
+const nickName = computed(() => userStore.userInfo.nickName || "User")
+
+import exitIcon from "@/assets/icons/exit.png" // 退出
+import saveFileIcon from "@/assets/icons/save.png" // 保存文件
+import saveProjectIcon from "@/assets/icons/saveProject.png" // 保存项目
+import editIcon from "@/assets/icons/edit.png" // 编辑
+import importProIcon from "@/assets/icons/importPro.png" // 导入
+import tutorialIcon from "@/assets/icons/tutorial.png" // 配置
+import copyIcon from "@/assets/icons/copy.png" // 复制
+import cutIcon from "@/assets/icons/cut.png" // 剪切
+import pasteIcon from "@/assets/icons/paste.png" // 粘贴
+import alignLeftIcon from "@/assets/icons/alignLeft.png" // 左对齐
+import alignRightIcon from "@/assets/icons/alignRight.png" // 右对齐
+import topToItIcon from "@/assets/icons/topToIt.png" // 顶部对齐
+import bottomToItIcon from "@/assets/icons/bottomToIt.png" // 底部
+import horizontalDistributionIcon from "@/assets/icons/horizontalDistribution.png" // 水平分布
+import verticalDistributionIcon from "@/assets/icons/vertical.png" // 垂直分布
+import rotateRightIcon from "@/assets/icons/rotateRight.png" // 右旋转
+import rotateLeftIcon from "@/assets/icons/rotateLeft.png" // 左旋转
+import horizontalFlipIcon from "@/assets/icons/horizontalFlip.png" // 水平翻转
+import verticalFlipIcon from "@/assets/icons вертикReverse.png" // 垂直翻转
+import imageIcon from "@/assets/icons/image.png" // 图片
+import graphicIcon from "@/assets/icons/graphic.png" // 图形
+import documentIcon from "@/assets/icons/document.png" // 文档
+import commentIcon from "@/assets/icons/comment.png" // 注释
+import importProjectIcon from "@/assets/icons/importProject.png" // 导入项目
+import importExportIcon from "@/assets/icons/import.png" // 导入导出
+import importFMUIcon from "@/assets/icons/importfmu.png" // 导入FMU
+import importCADIcon from "@/assets/icons/importCAD.png" // 导入CAD
+import exportXMLIcon from "@/assets/icons/exportXML.png" // 导出XML
+import exportFMUIcon from "@/assets/icons/exportFMU.png" // 导出FMU
+import unitManagementIcon from "@/assets/icons/unit.png" // 单位管理
+import perferenceIcon from "@/assets/icons/perference.png" // 偏好设置
+import systemSettingsIcon from "@/assets/icons/system.png" // 系统设置
+import toolIcon from "@/assets/icons/tool.png" // 工具
+import undoIcon from "@/assets/icons/withDrawing.png" // 撤销
+import redoIcon from "@/assets/icons/redo.png" // 重做
+import configIcon from "@/assets/icons/tutorial.png" // 配置
+import navigationIcon from "@/assets/icons/navigation.png" // 导航
+import parameterAssistantIcon from "@/assets/icons/parameterAssistant.png" // 参数助手
+import helpIcon from "@/assets/icons/help.png" // 帮助
+import user from "@/assets/img/user.png" // 用户头像
+
+const showProfileDialog = ref(false)
+const showPasswordDialog = ref(false)
+const emit = defineEmits(["button-click"])
+const showSecondContent = ref(false)
+
+const fakeTabs = [
+  {
+    name: "exit",
+    label: "退出",
+    type: "",
+    icon: exitIcon,
+    onClick: () => {
+      console.log("点击了 退出")
+    }
+  },
+  {
+    name: "save",
+    label: "保存",
+    type: "",
+    icon: saveProjectIcon,
+    onClick: () => {
+      console.log("点击了 导入文件")
+    }
+  }
+]
+
+const fakeTabs2 = [
+  {
+    name: "help",
+    label: "帮助",
+    type: "",
+    icon: helpIcon,
+    onClick: () => {
+      console.log("点击了 帮助")
+    }
+  }
+]
+
+const tabs = [
+  {
+    name: "edit",
+    label: t("tabs.edit"),
+    icon: editIcon,
+    buttons: [
+      { action: "cut", label: t("buttons.cut"), icon: cutIcon },
+      { action: "copy", label: t("buttons.copy"), icon: copyIcon },
+      { action: "paste", label: t("buttons.paste"), icon: pasteIcon },
+      { action: "undo", label: t("buttons.undo"), icon: undoIcon },
+      { action: "redo", label: t("buttons.redo"), icon: redoIcon }
+    ]
+  },
+  {
+    name: "import-export",
+    label: t("tabs.importExport"),
+    icon: importExportIcon,
+    buttons: [
+      {
+        action: "importProject",
+        label: t("buttons.importProject"),
+        icon: importProjectIcon
+      },
+      {
+        action: "importFMU",
+        label: t("buttons.importFMU"),
+        icon: importFMUIcon
+      },
+      {
+        action: "importCAD",
+        label: t("buttons.importCAD"),
+        icon: importCADIcon
+      },
+      {
+        action: "exportXML",
+        label: t("buttons.exportXML"),
+        icon: exportXMLIcon
+      },
+      {
+        action: "exportFMU",
+        label: t("buttons.exportFMU"),
+        icon: exportFMUIcon
+      }
+    ]
+  },
+  {
+    name: "config",
+    label: t("tabs.config"),
+    icon: configIcon,
+    buttons: [
+      {
+        action: "unitManagement",
+        label: t("buttons.unitManagement"),
+        icon: unitManagementIcon
+      },
+      {
+        action: "preference",
+        label: t("buttons.preference"),
+        icon: perferenceIcon
+      }
+    ]
+  },
+  {
+    name: "tools",
+    label: t("tabs.tools"),
+    icon: toolIcon,
+    buttons: [
+      { action: "wizard", label: t("buttons.wizard"), icon: navigationIcon },
+      {
+        action: "parameterAssisant",
+        label: t("buttons.parameterAssistant"),
+        icon: parameterAssistantIcon
+      }
+    ]
+  }
+]
+
+const activeTab = ref(tabs[0].name)
+
+let dialog = ref({
+  userinfoDialog: false,
+  changePassword: false
+})
+
+let pwd = ref({
+  oldPassword: "",
+  newPassword: "",
+  confirmNewPassword: ""
+})
+
+const handleProfile = () => {
+  dialog.value.userinfoDialog = true
+}
+
+const handleChangePassword = () => {
+  dialog.value.changePassword = true
+  pwd.value.oldPassword = ""
+  pwd.value.newPassword = ""
+  pwd.value.confirmNewPassword = ""
+}
+
+const handleLogout = () => {
+  userStore.clearUserInfo()
+  removeToken()
+  removeUserId()
+  ElMessage.success(t("message.logoutSuccess"))
+  router.push("/login")
+}
+
+const emitButtonClick = (action) => {
+  emit("button-click", action)
+}
+
+const handleTabClick = (tab) => {
+  console.log("Tab switched to:", tab.name)
+}
+</script>
+
+<style scoped>
+.header-button-bar {
+  position: relative; /* 作为绝对定位的参照 */
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: #ffffff;
+  margin: -1px 0 -3px -1px;
+}
+
+:deep(.el-tabs) {
+  width: 100%;
+}
+
+:deep(.el-tabs__nav-wrap) {
+  width: 100%;
+  position: relative; /* 备用定位参照 */
+}
+
+:deep(.el-tabs__nav) {
+  display: flex;
+  gap: 4px;
+  width: calc(100% - 100px); /* 为 #tab-user 预留空间 */
+}
+
+:deep(#tab-user) {
+  position: absolute;
+  right: -70px; /* 紧贴右边缘 */
+  top: 50%; /* 垂直居中 */
+  transform: translateY(-50%); /* 调整垂直位置 */
+  padding: 0;
+  display: flex;
+  align-items: center;
+  background-color: #edf2fa;
+  border: none;
+}
+
+.custom-tab-nav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.left-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.tab-like-button {
+  padding: 8px 16px;
+  font-size: 14px;
+  border: none;
+  background: #fff;
+  transition: all 0.3s;
+}
+
+.tab-like-button:hover {
+  background-color: #f0f0f0;
+  color: #075679;
+}
+
+.tabs-nav {
+  flex: 1;
+}
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 6px;
+}
+
+.button-group .el-button {
+  min-width: 60px;
+  padding: 4px 8px;
+  font-size: 14px;
+  border: none;
+  transition: all 0.3s;
+}
+
+.button-group .el-button:hover {
+  background-color: #f0f0f0;
+  color: #075679;
+}
+
+:deep(.el-tabs__header) {
+  margin: 0;
+  border-bottom: 1px solid #e4e7ed;
+  background-color: #edf2fa;
+}
+
+:deep(.el-tabs__content) {
+  padding: 0;
+  background: #ffffff;
+}
+
+.icon-only-button {
+  padding: 0;
+  min-width: 32px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #edf2fa;
+  border: none;
+}
+
+:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
+  border-top: none;
+}
+
+.icon-text-button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.button-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.tab-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tab-icon {
+  width: 16px;
+  height: 16px;
+}
+
+:deep(#tab-exit) {
+  padding: 0 !important;
+}
+
+:deep(#tab-save) {
+  padding: 0 !important;
+}
+
+:deep(#tab-help) {
+  padding: 0 !important;
+}
+
+.open-page-header-icons {
+  width: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.open-page-header-icons .el-button {
+  padding: 0;
+  border: none;
+  margin: 0;
+}
+
+.user-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.nickname {
+  margin-left: 6px;
+}
+
+.userinfo-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.userinfo-footer {
+  display: flex;
+  justify-content: center;
+}
+</style>

src/components/layout/header.vue

@@ -1,54 +1,49 @@
 <template>
-   <div class="ve_menu_logo">
-            <div class="ve_logo_img">
-                <el-image
-                    style="height: 100%"
-                    :src="logo"
-                    fit="contain"
-                ></el-image>
-            </div>
-            <!-- <h3 class="ve_logo_title">
+  <div class="ve_menu_logo">
+    <div class="ve_logo_img">
+      <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
+    </div>
+    
+    <!-- <h3 class="ve_logo_title">
                 {{ $t("index.subtitle") }}
             </h3> -->
-        </div>
-
+  </div>
 </template>
 <script setup>
-import { ref, onMounted, reactive, } from "vue";
-import logo from "@/assets/img/login-logo.png";
-import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import { ref, onMounted, reactive } from "vue"
+import logo from "@/assets/img/login-logo.png"
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
 
 </script>
 <style lang="scss" scoped>
 .ve_menu_logo {
-    width: 100%;
-    height: 32px;
-    background-color:#075679 ;
+  width: 100%;
+  height: 32px;
+//   background-color: #075679;
+  // overflow: hidden;
+//   padding: 0 10px;
+  text-align: left;
+
+  .ve_logo_img {
+    height: 100%;
+    text-align: center;
+    // 和side收缩后的宽度一致
+    // padding: 10px;
+    display: inline-block;
+    box-sizing: border-box;
+    vertical-align: middle;
+  }
+  .ve_logo_title {
     overflow: hidden;
-    padding: 0 10px;
-    text-align: left;
- 
-    .ve_logo_img {
-        height: 100%;
-        text-align: center;
-        // 和side收缩后的宽度一致
-        // padding: 10px;
-        display: inline-block;
-        box-sizing: border-box;
-        vertical-align: middle;
-    }
-    .ve_logo_title {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: inline-block;
-        margin: 0;
-        font-size: 18px;
-        vertical-align: middle;
-        color: #fff;
-        font-family: 'Microsoft YaHei';
-        &:hover {
-  
-        }
+    text-overflow: ellipsis;
+    display: inline-block;
+    margin: 0;
+    font-size: 18px;
+    vertical-align: middle;
+    color: #fff;
+    font-family: "Microsoft YaHei";
+    &:hover {
     }
+  }
 }
 </style>

src/components/layout/home.vue

@@ -6,14 +6,14 @@
     <el-main>
       <div class="home-page-container">
         <div class="home-page-header">
-          <el-tabs v-model="activeTab">
-            <el-tab-pane label="FILE" name="file"></el-tab-pane>
-            <el-tab-pane label="MODEL" name="model"></el-tab-pane>
+          <HeaderTabs @button-click="handleButtonClick" />
+          <!-- <el-tabs v-model="activeTab"> -->
+            <!-- <el-tab-pane label="FILE" name="file"></el-tab-pane> -->
+            <!-- <el-tab-pane label="MODEL" name="model"></el-tab-pane> -->
             <!-- <el-tab-pane label="RUN" name="run"></el-tab-pane>
             <el-tab-pane label="RESULT" name="result"></el-tab-pane> -->
-          </el-tabs>
-        
-          <HeaderIcons />
+          <!-- </el-tabs> -->
+          <!-- <HeaderIcons /> -->
         </div>
         <div class="home-page-content">
           <router-view />
@@ -26,6 +26,7 @@
 <script setup>
 import myheader from '@/components/layout/header.vue'
 import HeaderIcons from '@/components/layout/HeaderIcons.vue'
+import HeaderTabs  from "./HeaderButtonBar.vue"
 
 import { RouterView, RouterLink,useRouter, useRoute } from "vue-router"
 import { request, enPassword } from "@/utils/request";
@@ -59,10 +60,33 @@ watch(activeTab, (newTab) => {
   }
 });
 
+const handleButtonClick = (action) => {
+  console.log("Button clicked:", action)
+  // 这里处理各个按钮的点击事件
+  switch (action) {
+    case 'exit':
+      // 退出逻辑
+      break
+    case 'save':
+      // 保存逻辑
+      break
+    case 'undo':
+      // 撤销逻辑
+      break
+    // 其他操作...
+  }
+}
+
 
 </script>
 
 <style scoped>
+
+.el-header{
+  background-color: #075679;
+  margin: 0 2px 0 0 !important;
+}
+
 .home-page {
   width: 100%;
   height: 100vh;
@@ -75,17 +99,14 @@ watch(activeTab, (newTab) => {
   overflow: auto;
 }
 
-.home-page-header{
+.home-page-header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column; /* 改为垂直布局 */
+  justify-content: flex-start; /* 顶部对齐 */
+  align-items: flex-start; /* 左对齐 */
   width: 100%;
-  height: 42px;
-  padding: 0 30px 0 30px;
-
+  min-height: 80px; /* 最小高度，允许扩展 */
   background: #FFFFFF;
-  border-radius: 0px 0px 0px 0px;
-  border: 1px solid #B3B3B3;
 }
 
 .home-page-header-title{
@@ -103,7 +124,7 @@ watch(activeTab, (newTab) => {
 .home-page-content{
   display: flex;
   width: 100%;
-  height: calc(100vh - 32px - 42px);
+  height: calc(100vh - 32px - 89px);
 
 }
 
@@ -120,4 +141,16 @@ watch(activeTab, (newTab) => {
   height: 100%;
 }
 
+:deep(.el-header) {
+  padding: 0; 
+  margin: 0; 
+  height: auto;
+}
+
+:deep(.el-main) {
+  padding: 0;
+  margin: 0;
+  flex: 1;
+}
+
 </style>

src/locales/en.json

@@ -132,5 +132,38 @@
     "saveUnitGroup": "Save Unit System",
     "deleteUnitGroup": "Delete Unit System",
     "operations": "Operations"
+  },
+  "buttons" : {
+    "exit": "Exit",
+    "save": "Save",
+    "undo": "Undo",
+    "redo": "Redo",
+    "copy": "Copy",
+    "cut":  "Cut",
+    "delete": "Delete",
+    "paste": "Paste",
+    "importProject": "Import Project",
+    "exportProject": "Export Project",
+    "importFMU": "Import FMU",
+    "importCAD": "Import CAD",
+    "exportXML": "Export XML",
+    "exportFMU": "Export FMU",
+    "exportReport": "Export Report",
+    "systemSettings": "System Settings",
+    "userPreferences": "User Preferences",
+    "projectConfig": "Project Config",
+    "modelParams": "Model Params",
+    "pluginManager": "Plugin Manager",
+    "unitManagement": "Unit Management",
+    "preference": "Preference",
+    "wizard": "Wizard",
+    "parameterAssistant": "Parameter Assistant"
+  },
+    "tabs":{
+    "edit":"Edit",
+    "importExport":"Import/Export",
+    "config":"Config",
+    "tools":"Tools",
+    "help":"Help"
   }
 }

src/locales/zh-CN.json

@@ -132,7 +132,38 @@
     "saveUnitGroup": "保存单位系统",
     "deleteUnitGroup": "删除单位系统",
     "operations": "操作"
-
+  },
+  "buttons" : {
+    "exit": "退出",
+    "save": "保存",
+    "undo": "撤销",
+    "redo": "重做",
+    "copy": "复制",
+    "cut": "剪切",
+    "delete": "删除",
+    "paste": "粘贴",
+    "importProject": "导入项目",
+    "exportProject": "导出项目",
+    "importFMU": "导入FMU",
+    "importCAD": "导入CAD",
+    "exportXML": "导出XML",
+    "exportFMU": "导出FMU",
+    "exportReport": "导出报告",
+    "systemSettings": "系统设置",
+    "userPreferences": "用户偏好",
+    "projectConfig": "项目配置",
+    "modelParams": "模型参数",
+    "pluginManager": "插件管理",
+    "unitManagement": "单位管理",
+    "preference": "偏好设置",
+    "wizard": "向导",
+    "parameterAssistant": "参数助手"
+  },
+  "tabs":{
+    "edit":"编辑",
+    "importExport":"导入/导出",
+    "config":"配置",
+    "tools":"工具",
+    "help":"帮助"
   }
-
 }

src/views/model/index.vue

@@ -1,8 +1,7 @@
 <template>
   <el-container>
-    <el-header class="custom-header">
+    <!-- <el-header class="custom-header">
       <el-space :size="spacesize" class="spaceclass">
-        <!-- 工具栏 -->
         <template v-for="(item, index) in headerbuttons" :key="index">
           <el-button
             v-if="item.type === 'button'"
@@ -17,7 +16,7 @@
           ></el-divider>
         </template>
       </el-space>
-    </el-header>
+    </el-header> -->
     <splitpanes class="default-theme diysplitpanes">
       <pane min-size="10" size="20" max-size="50" class="custom-aside">
         <el-tabs