718框架搭建

src/components/layout/HeaderIcons.vue

@@ -1,262 +0,0 @@
-<template>
-  <div class="open-page-header-icons">
-    <el-button class="custom-icon-button">
-      <img :src="zk" style="width: 22px;" />
-    </el-button>
-    <el-button class="custom-icon-button">
-      <img :src="help" style="width: 22px;" />
-    </el-button>
-    <el-avatar :src="user" :size="22" />
-    <el-dropdown>
-      <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>
-
-    <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 ">
-          <!-- <el-image :src="icon" fit="contain"></el-image> -->
-          <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 ">
-          <!-- <el-image :src="icon" fit="contain"></el-image> -->
-          <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>
-
-  </div>
-  
-</template>
-
-<script setup>
-import { ElMessageBox, ElMessage } from 'element-plus'
-import { useRouter } from 'vue-router'
-import { useUserStore } from '@/store/user'
-import { useI18n } from 'vue-i18n'
-import { removeToken,removeUserId} from "@/utils/token";
-import { ArrowDown, User, Key, SwitchButton } from '@element-plus/icons-vue'
-import zk from '@/assets/img/zk.png'
-import help from '@/assets/img/help.png'
-import user from '@/assets/img/user.png'
-
-const { t, locale} = useI18n()
-const router = useRouter()
-const userStore = useUserStore()
-const nickName = computed(() => userStore.userInfo.nickName || 'User')
-
-const showProfileDialog = ref(false)
-const showPasswordDialog = ref(false)
-
-const labelWidth = computed(() => {
-  return locale.value === 'zh-CN' ? '80px' : '130px'
-})
-
-const labelWidth1 = computed(() => {
-  return locale.value === 'zh-CN' ? '90px' : '140px'
-})
-
-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 ChangePassword = () => {
-  if (!pwd.value.oldPassword) {
-    ElMessage.error(t('dialog.inputOldPassword'));
-    return;
-  }else if(!pwd.value.newPassword) {
-    ElMessage.error(t('dialog.inputNewPassword'));
-    return;
-  }else if(!pwd.value.confirmNewPassword) {
-    ElMessage.error(t('dialog.inputConfirmNewPassword'));
-    return;
-  }
-  if (pwd.value.newPassword !== pwd.value.confirmNewPassword) {
-    ElMessage.error(t('dialog.passwordMismatch'));
-    return;
-  }
-
-  const params = {
-      transCode: "B00003",
-      oldPassword: enPassword(pwd.value.oldPassword),
-      newPassword: enPassword( pwd.value.newPassword),
-    } 
-
-  request(params).then(res => {
-    ElMessage.success(t('dialog.passwordChangeSuccess'));
-    dialog.value.changePassword = false;
-  }).catch(error => {
-    console.error(error);
-    ElMessage.error(t('dialog.passwordChangeFailed'));
-  });
-}
-
-const handleLogout = () => {
-  userStore.clearUserInfo();
-  removeToken();
-  removeUserId();
-  // 跳转到登录页面
-  ElMessage.success(t('message.logoutSuccess'));
-  router.push('/login');
-}
-
-</script>
-
-<style scoped>
-.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-right: 4px;
-}
-
-
-
-.userinfo-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  
-}
-
-.userinfo-footer {
-  display: flex;
-  justify-content: center;
-}
-</style>

src/components/layout/home.vue

@@ -51,7 +51,7 @@ const route = useRoute()
   left: 0;
   width: 100%;
   height: 100%;
-  object-fit: cover; /* 或 contain，根据需求选择 */
+  object-fit: fill; /* 或 contain，根据需求选择 */
   object-position: center;
   z-index: 0; /* 置于底层 */
 }

src/style/index.css

@@ -54,260 +54,35 @@ img{
   outline: none !important;
 }
 
-/* 改 el-dialog的默认样式*/
-.el-header{
-    padding: 0;
-    --el-header-height:auto;
-}
-.el-main{
-    --el-main-padding: 0;  
-}
-.el-dialog__footer{
-  padding: 10px 20px 20px 20px;
-}
-
-.lastbtn .el-button {
-  width: 85px;
-}
-
-.lastbtn .el-button:last-of-type {
-  background-color: #12739E !important;
-  color: white !important;
-}
-
-.el-message-box__btns button:nth-child(2) {
-  background-color: #12739E !important;
-  color: white !important;
-}
-
-.el-form-item__label {
-  justify-content: flex-start;
-}
-
-.custom-pagination .el-pagination .el-pager li {
-  font-size: 12px;
-  color: #1A1A1A;
-  font-weight: 400;
-}
-
-.custom-pagination .el-pagination .el-pager li.is-active {
-  background: #12739E;
-  color: white;
-}
-
-.open-page-menu .el-menu-item.is-active {
-  background: #E4F1F7;
-  border-radius: 0px 0px 0px 0px;
-  border: 1px solid rgba(18,115,158,0.4);
-
-}
-
-.custom-table .el-table .cell {
-  font-weight: 400;
-  font-size: 12px;
-  color: #333333;
-  text-align: center;
-  font-style: normal;
-  text-transform: none;
-  /* line-height: 55px;
-  height: 55px; */
-}
-
-/* 设置表格主体单元格行高为 55px */
-.custom-table .el-table .el-table__body .cell {
-  height: 55px;
-  line-height: 55px;
-}
-
-/* 设置表头单元格行高为 47px */
-.custom-table .el-table .el-table__header .cell {
-  height: 47px;
-  line-height: 47px;
-}
-
-.custom-icon-button {
-  padding: 0;
-  border: none;
-}
-
-/* 在全局或组件样式添加 */
-.el-dropdown-menu {
-  outline: none !important;
-}
-
-.user-dropdown-trigger:focus {
-  outline: none !important;
-}
-
-.el-dialog__headerbtn:focus {
-  outline: none;
-}
-
-.dialog_class {
-  padding: 0px ;
-  color: #333333;
-  font-size: 16px;
-}
-
-.dialog_class .el-dialog__header {
-  height: 33px;
-  background: #12739E;
-  margin-right: 0;
-  padding: 5px 20px;
-}
-
-.dialog_class .el-dialog__header .el-dialog__title {
-  color: #FFFFFF;
-  font-weight: 400;
-  font-size: 14px;
-  color: #FFFFFF;
-  text-align: left;
-  font-style: normal;
-  text-transform: none;
-}
-
-.dialog_class .el-dialog__header .el-dialog__headerbtn {
-  top: 2px;
-  right: 10px;
-  width: 33px;
-  height: 33px;
-}
-
-/* 弹窗关闭按钮X大小 */
-.dialog_class .el-dialog__header .el-dialog__headerbtn .el-icon svg {
-  width: 24px;
-  height: 24px;
-}
-
-.dialog_class .el-dialog__body {
-  padding: 20px 10px 10px 20px;
-}
-
-.dialog_class .el-dialog__footer {
-  padding: 0px 10px 10px 10px;
-}
-
-
-.custom-header {
-  width: 100%;
-  height: 42px;
-  padding-left: 24px;
-
-  background: #FFFFFF;
-  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
-  border-radius: 6px 6px 6px 6px;
-  border: 1px solid #B3B3B3;
-}
-
-.custom-aside {
+/* 文本区域 */
+.el-textarea__inner {
   height: 100%;
-  background: #FFFFFF;
-  border-radius: 0px 0px 0px 0px;
-  border: 1px solid #EEEEEE;
-  display: flex; /* 使用 flex 布局 */
-  flex-direction: column; /* 垂直方向排列 */
 }
 
-.custom-main {
-  flex: 1;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
 
-.custom-header .el-button {
-  padding: 0;
+.custom-card {
+  background-color: transparent;
+  color: #FFFFFF;
   border: none;
+  border-radius: 0px 0px 0px 0px;
 }
 
-
-.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
-  border-top: 3px solid #12739E;
-}
-
-.custom-aside .full-height-tabs {
-  flex: 1;
-  overflow: auto;
-}
-
-.el-tabs__content {
-  overflow: auto;
-}
-
-.custom-tabcontent {
-  height: 100%;
-}
-
-.custom-aside .el-collapse-item__header {
-  height: 28px;
-  border-radius: 0;
-}
-
-.el-collapse-item__header:focus {
-  outline: none;
-}
-
-.default-theme.splitpanes .splitpanes__pane{
-  background-color: transparent !important;
-}
-
-
-/* 取消所有表格中 el-input 的边框 */
-.el-table .el-input__wrapper {
-  box-shadow: none !important;
-  border: none !important;
-}
-
-.el-table td.el-table__cell div ,.el-table th.el-table__cell div{
+.custom-card .el-card__header {
   display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-/* 让输入框填满整个单元格 */
-.full-width-input .el-input__wrapper {
-  width: 100%;
-  height: 100%;
-  box-shadow: none !important; /* 去掉默认阴影边框 */
-  border: none !important;
-  padding: 0; /* 去掉内边距 */
-  border-radius: 0; /* 去掉圆角 */
-}
-
-/* 调整单元格内边距，使输入框贴合 */
-.el-table .cell {
-  padding: 0 !important;
-}
-
-/* 确保输入框高度和单元格一致 */
-.el-table td {
-  padding: 0 !important;
-  height: 32px;
-}
+  align-items: center; /* 垂直居中 */
 
-/* 让输入框文本居中 */
-.full-width-input .el-input__inner {
-  text-align: center !important;
-}
-
-.el-table td.el-table__cell div .el-select__wrapper{
-  width: 100%;
-}
-.el-table td.el-table__cell div .el-button{
-  width: 100%;
-}
+  border-bottom: none;
+  padding: 0 5px;
 
-/* 时间线左对齐 */
-.el-timeline .el-timeline-item__center .el-timeline-item__wrapper{
-  text-align: left;
-}
-
-/* 文本区域 */
-.el-textarea__inner {
-  height: 100%;
+  height: 40px;
+  background: linear-gradient( 90deg, #00274A 0%, #09154C 100%);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(61, 115, 255, 0), rgba(61, 115, 255, 1)) 1 1;
 }
 
-.spaceclass {
-  display: flex;
-  justify-items: flex-start;
-}
+.custom-card .el-card__body {
+  background: linear-gradient(to top, #173B77 0%, #132440 100%);
+  border-radius: 0px 0px 0px 0px;
+  border: 2px solid rgba(61,115,255,0.3);
+}

src/views/mainContent/footer/infoLog.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <el-card class="custom-card">
+      <template #header>
+        <span>信息日志</span>
+      </template>
+      
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+
+
+</script>
+
+<style scoped>
+
+
+</style>

src/views/mainContent/index.vue

@@ -2,19 +2,47 @@
   <div style="width: 100%;height: 100%;">
     <div class="content">
       <el-container>
-        <el-aside width="200px">Aside</el-aside>
-        <el-main>Main</el-main>
-        <el-aside width="200px">Aside</el-aside>
+        <el-aside class="leftaside">
+          Aside
+        </el-aside>
+        <el-main></el-main>
+        <el-aside class="rightaside">
+          Aside
+        </el-aside>
       </el-container>
     </div>
     <div class="footer">
-
+      <info-log />
     </div>
   </div>
 </template>
 
 <script setup>
-
+import infoLog from './footer/infoLog.vue';
 
 </script>
 
+<style scoped>
+.content {
+  width: 100%;
+  height: 80%;
+
+  .leftaside {
+    width: 25%;
+    padding-left: 40px;
+  }
+
+  .rightaside {
+    width: 25%;
+    padding-right: 40px;
+  }
+}
+
+.footer {
+  width: 100%;
+  height: 20%;
+
+  padding: 0 40px;
+}
+
+</style>

src/views/mainContent/leftaside/agentModel.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup>
+
+</script>

src/views/mainContent/leftaside/exDesign.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup>
+
+</script>

src/views/mainContent/leftaside/opAlgorithm.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup>
+
+</script>

src/views/mainContent/leftaside/opRun.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup>
+
+</script>

src/views/mainContent/rightaside/analyzeWork.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup>
+
+</script>

src/views/mainContent/rightaside/opProblem.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup>
+
+</script>