530model界面框架

package-lock.json

@@ -36,6 +36,7 @@
         "pinia-plugin-persistedstate": "^3.2.0",
         "sass": "^1.71.1",
         "sass-loader": "^13.3.3",
+        "splitpanes": "^4.0.4",
         "three": "^0.174.0",
         "v-scale-screen": "^2.2.0",
         "vite-plugin-monaco-editor": "^1.1.0",
@@ -8142,6 +8143,17 @@
       "resolved": "https://registry.npmmirror.com/spark-md5/-/spark-md5-3.0.2.tgz",
       "integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw=="
     },
+    "node_modules/splitpanes": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmmirror.com/splitpanes/-/splitpanes-4.0.4.tgz",
+      "integrity": "sha512-RbysugZhjbCw5fgplvk3hOXr41stahQDtZhHVkhnnJI6H4wlGDhM2kIpbehy7v92duy9GnMa8zIhHigIV1TWtg==",
+      "funding": {
+        "url": "https://github.com/sponsors/antoniandre"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz",

package.json

@@ -38,6 +38,7 @@
     "pinia-plugin-persistedstate": "^3.2.0",
     "sass": "^1.71.1",
     "sass-loader": "^13.3.3",
+    "splitpanes": "^4.0.4",
     "three": "^0.174.0",
     "v-scale-screen": "^2.2.0",
     "vite-plugin-monaco-editor": "^1.1.0",

src/App.vue

@@ -1,8 +1,20 @@
 <template>
-  <router-view></router-view>
+  <el-config-provider :locale="elementLocale">
+    <router-view />
+  </el-config-provider>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+
+const { locale } = useI18n()
+
+const elementLocale = computed(() => {
+  return locale.value === 'zh-CN' ? zhCn : en
+})
 </script>
 
 <style>

src/components/layout/HeaderIcons.vue

@@ -31,7 +31,7 @@
     </el-dropdown>
 
     <el-dialog v-model="dialog.userinfoDialog" align-center :append-to-body="true" 
-      width="500" class="dialog_class" draggable>
+      width="600" class="dialog_class" draggable>
 
       <template #header="{ titleId, titleClass }">
         <div class="my-header ">
@@ -43,12 +43,12 @@
       <el-card class="userinfo-card" shadow="never">
         <template #header>
           <div class="userinfo-header">
-            <el-avatar :src="user" :size="30"/>
+            <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" class="userinfo-form">
+        <el-form :label-width="labelWidth" label-position="left">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item :label="$t('dialog.username')">
@@ -154,7 +154,7 @@ const showProfileDialog = ref(false)
 const showPasswordDialog = ref(false)
 
 const labelWidth = computed(() => {
-  return locale.value === 'zh-CN' ? '80px' : '120px'
+  return locale.value === 'zh-CN' ? '80px' : '130px'
 })
 
 const labelWidth1 = computed(() => {
@@ -247,6 +247,7 @@ const handleLogout = () => {
 }
 
 
+
 .userinfo-header {
   display: flex;
   align-items: center;

src/components/layout/home.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="home-page">
+    <el-header>
+        <myheader />
+    </el-header>
+    <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>
+            <el-tab-pane label="RUN" name="run"></el-tab-pane>
+            <el-tab-pane label="RESULT" name="result"></el-tab-pane>
+          </el-tabs>
+        
+          <HeaderIcons />
+        </div>
+        <div class="home-page-content">
+          <router-view />
+        </div>
+      </div>
+    </el-main>
+  </div>
+</template>
+
+<script setup>
+import myheader from '@/components/layout/header.vue'
+import HeaderIcons from '@/components/layout/HeaderIcons.vue'
+
+import { RouterView, RouterLink,useRouter, useRoute } from "vue-router"
+import { request, enPassword } from "@/utils/request";
+import { ElMessage } from 'element-plus'
+
+import { useI18n } from 'vue-i18n'
+
+const { t, locale } = useI18n()
+
+const router = useRouter();
+// 获取路由实例
+const route = useRoute()
+
+
+// 根据当前路由路径设置 activeTab
+let activeTab = ref(route.path.slice(1) || 'model');
+let pid = ref('')
+
+// 监听路由变化，同步 activeTab
+watch(() => route.path, (newPath) => {
+  const tabName = newPath.slice(1);
+  if (tabName) {
+    activeTab.value = tabName;
+  }
+});
+
+// 监听 activeTab 变化，导航到对应路由
+watch(activeTab, (newTab) => {
+  if (newTab && route.path !== `/${newTab}`) {
+    router.push(`/${newTab}`);
+  }
+});
+
+
+</script>
+
+<style scoped>
+.home-page {
+  width: 100%;
+  height: 100vh;
+  overflow: auto;
+}
+
+.home-page-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.home-page-header{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 42px;
+  padding: 0 30px 0 30px;
+
+  background: #FFFFFF;
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid #B3B3B3;
+}
+
+.home-page-header-title{
+  margin-left: 10px;
+  font-size: 15px;
+  color: #333333;
+}
+
+.home-page-header-icons .el-button {
+  padding: 0;
+  border: none;
+  margin: 0;
+}
+
+.home-page-content{
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 32px - 42px);
+
+}
+
+.home-page-leftside{
+  width: 200px;
+  height: 100%;
+  background: #FFFFFF;
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid #EEEEEE;
+}
+
+.home-page-rightside{
+  flex: 1;
+  height: 100%;
+}
+
+</style>

src/components/layout/openpage.vue

@@ -64,14 +64,6 @@ import user from '@/assets/img/user.png'
 const router = useRouter();
 const userStore = useUserStore();
 
-
-let dialog = ref({
-  userinfoDialog: false,
-  changePassword: false,
-});
-
-
-
 const activeIndex = computed(() => {
   // 获取当前路由的所有匹配路径
   const matched = router.currentRoute.value.matched

src/locales/en.json

@@ -6,7 +6,8 @@
     "deleteSuccess": "Delete successful",
     "deleteFailed": "Delete failed",
     "deleteCancelled": "Deletion cancelled",
-    "logoutSuccess": "Logout successful"
+    "logoutSuccess": "Logout successful",
+    "oneSelection": "Please select one item"
   },
   "common": {
     "tip": "Tip",
@@ -33,7 +34,9 @@
     "rememberMe": "Remember Me",
     "loginButton": "Login",
     "forgotPassword": "Forgot Password?",
-    "register": "Register"
+    "register": "Register",
+    "usernameLength": "Length must be between 3 and 18 characters",
+    "passwordLength": "Length must be between 6 and 18 characters"
   },
   "index": {
     "title": "Home",
@@ -58,6 +61,7 @@
     "uname": "Author",
     "keywords": "Keywords",
     "description": "Description",
+    "inputmessage": "Please enter",
     "total": "Total",
     "selectAll": "Select All",
     "delete": "Delete",

src/locales/zh-CN.json

@@ -6,7 +6,8 @@
     "deleteSuccess": "删除成功",
     "deleteFailed": "删除失败",
     "deleteCancelled": "已取消删除",
-    "logoutSuccess": "退出登录成功"
+    "logoutSuccess": "退出登录成功",
+    "oneSelection": "请选择一个项目"
   },
   "common": {
     "tip": "提示",
@@ -33,7 +34,9 @@
     "rememberMe": "记住密码",
     "loginButton": "登录",
     "forgotPassword": "忘记密码？",
-    "register": "注册"
+    "register": "注册",
+    "usernameLength": "长度必须在 3 到 18 个字符之间",
+    "passwordLength": "长度必须在 6 到 18 个字符之间"
   },
   "index": {
     "title": "首页",
@@ -58,6 +61,7 @@
     "uname": "作者",
     "keywords": "关键词",
     "description": "描述",
+    "inputmessage":"请输入",
     "total": "总计",
     "selectAll": "全选",
     "delete": "删除",

src/router/index.js

@@ -34,6 +34,54 @@ const router = createRouter({
             },
           ]
       },
+      {
+        path:'/home',
+        name: 'home',
+        redirect:"/model",
+        component: () => import('@/components/layout/home.vue'),
+        meta:{
+              keepAlive:false,
+              title: '主页'
+        },
+        children: [
+          {
+          path: '/file',
+          name: 'file',
+          component: () => import('@/views/file/index.vue'),
+          meta: {
+            keepAlive: false,
+            title: '文件'
+            }
+          },
+          {
+          path: '/model',
+          name: 'model',
+          component: () => import('@/views/model/index.vue'),
+          meta: {
+            keepAlive: false,
+            title: '模型'
+            }
+          },
+          {
+          path: '/run',
+          name: 'run',
+          component: () => import('@/views/run/index.vue'),
+          meta: {
+            keepAlive: false,
+            title: '运行'
+            }
+          },
+          {
+          path: '/result',
+          name: 'result',
+          component: () => import('@/views/result/index.vue'),
+          meta: {
+            keepAlive: false,
+            title: '结果'
+            }
+          }
+        ]
+      },
       {
         path: '/login',
         name: 'login',

src/store/project.js

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useProjectStore = defineStore('project', () => {
+  const pid = ref('');
+
+  const setpid = (val) => {
+    pid.value = val
+  }
+
+  const clearpid = () => {
+    pid.value = ''
+  }
+  
+  return {
+    pid,
+    setpid,
+    clearpid,
+  }
+},{
+  persist: true, // 启用持久化
+})

src/style/index.css

@@ -175,4 +175,59 @@ img{
 
 .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 {
+  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;
+  border: none;
+}
+
+
+.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
+  border-top: 3px solid #12739E;
+}
+
+.custom-aside .full-height-tabs {
+  flex: 1;
+}
+
+.custom-tabcontent {
+  height: 100%;
+}
+
+.custom-aside .el-collapse-item__header {
+  height: 28px;
+  border-radius: 0;
+}
+
+.el-collapse-item__header:focus {
+  outline: none;
 }

src/utils/i18n.js

@@ -38,11 +38,19 @@
 import { createI18n } from 'vue-i18n'
 import en from '../locales/en.json'
 import zhCN from '../locales/zh-CN.json'
+import ElementEn from 'element-plus/dist/locale/en.mjs'; // Element 英文包
+import ElementZhCN from 'element-plus/dist/locale/zh-cn.mjs'; // Element 中文包
 
 const messages = {
-  en,
-  'zh-CN': zhCN
-}
+  en: {
+    ...en, // 英文翻译
+    ...ElementEn, // Element Plus 的英文翻译
+  },
+  'zh-CN': {
+    ...zhCN, // 中文翻译
+    ...ElementZhCN, // Element Plus 的中文翻译
+  },
+};
 
 const i18n = createI18n({
   legacy: false, // 使用Composition API模式

src/views/file/index.vue

@@ -0,0 +1,3 @@
+<template>
+  flie
+</template>

src/views/login/index.vue

@@ -115,10 +115,10 @@ const loading = ref(false)
 // 表单验证规则
 const loginRules = reactive({
   username: [
-    { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
+    { min: 3, max: 18, message: t('login.usernameLength'), trigger: 'blur' }
   ],
   password: [
-    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
+    { min: 6, max: 18, message: t('login.passwordLength'), trigger: 'blur' }
   ]
 })
 

src/views/model/index.vue

@@ -0,0 +1,231 @@
+<template>
+  <el-container>
+    <el-header class="custom-header">
+      <el-space :size="spacesize">
+        <el-button>
+          <img :src="getImgPath('newproject.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('save.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('importpro.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('exportpro.png')" style="width: 24px;" />
+        </el-button>
+        <el-divider direction="vertical" ></el-divider>
+        <el-button>
+          <img :src="getImgPath('back.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('goon.png')" style="width: 24px;" />
+        </el-button>
+        <el-divider direction="vertical" ></el-divider>
+        <el-button>
+          <img :src="getImgPath('temp.png')" style="width: 24px;" />
+        </el-button>
+        <el-divider direction="vertical" ></el-divider>
+        <el-button>
+          <img :src="getImgPath('temp.png')" style="width: 24px;" />
+        </el-button>
+        <el-divider direction="vertical" ></el-divider>
+        <el-button>
+          <img :src="getImgPath('temp.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('temp.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('temp.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('temp.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('temp.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('temp.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('temp.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('temp.png')" style="width: 24px;" />
+        </el-button>
+        <el-divider direction="vertical" ></el-divider>
+        <el-button>
+          <img :src="getImgPath('text.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('text2.png')" style="width: 24px;" />
+        </el-button>
+        <el-button>
+          <img :src="getImgPath('text3.png')" style="width: 24px;" />
+        </el-button>
+        <el-divider direction="vertical" ></el-divider>
+        <el-button>
+          <img :src="getImgPath('temp.png')" style="width: 24px;" />
+        </el-button>
+      </el-space>
+    </el-header>
+    <splitpanes class="default-theme">
+      <pane min-size="10" size="20" max-size="50" class="custom-aside">
+        <el-tabs type="border-card" class="full-height-tabs">
+
+          <el-tab-pane label="Liberal">
+            <el-collapse v-model="colactiveNames">
+              <el-collapse-item
+                v-for="item in collapseData"
+                :key="item.ftypecode"
+                :title="item.ftypedesc"
+                :name="String(item.ftypecode)"
+              >
+              <div class="coms-container">
+                <div
+                  v-for="com in item.coms"
+                  :key="com.comId"
+                  class="com-item"
+                >
+                  <img
+                    
+                    :src="getImgPath('temp.png')"
+                    alt="component image"
+                    class="com-image"
+                  />
+                <div class="com-name">{{ com.name }}</div>
+              </div>
+              </div>
+              </el-collapse-item>
+            </el-collapse>
+          </el-tab-pane>
+
+          <el-tab-pane label="Project"></el-tab-pane>
+
+        </el-tabs>
+      </pane>
+      <pane class="custom-main">
+        <div class="main-header">
+          <el-tabs type="border-card">
+            <el-tab-pane label="Topology">
+              <el-space :size="spacesize">
+                <el-button
+                  v-for="(item, index) in mainbuttons"
+                  :key="index"
+                  class="custom-icon-button"
+                >
+                  <img :src="getImgPath(item.img)" style="width: 24px;" />
+                </el-button>
+              </el-space>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div class="flow-content">
+          
+        </div>
+      </pane>
+    </splitpanes>
+  </el-container>
+
+</template>
+
+<script setup>
+import { Splitpanes, Pane } from 'splitpanes'
+import 'splitpanes/dist/splitpanes.css'
+import { request } from "@/utils/request";
+import { ElMessage} from 'element-plus'
+import { useProjectStore } from '@/store/project'
+import { useI18n } from 'vue-i18n'
+
+const { t, locale } = useI18n()
+
+const projectStore = useProjectStore()
+
+const getImgPath = (url) => {
+  return new URL(`../../assets/img/${url}`, import.meta.url).href
+}
+
+let pid = computed(() => projectStore.pid || '')
+
+let spacesize = ref(10);
+let colactiveNames = ref(['1'])
+let collapseData = ref();
+
+let mainbuttons = ref([
+  {img: 'temp.png'},
+  {img: 'temp.png'},
+  {img: 'temp.png'},
+  {img: 'temp.png'},
+  {img: 'temp.png'},
+  {img: 'temp.png'},
+  {img: 'temp.png'},
+  {img: 'temp.png'},
+  {img: 'temp.png'},
+])
+
+const getComponent = () => {
+  const params = {
+    transCode: 'ES1001',
+    pid:pid.value
+  };
+  request(params)
+    .then((res) => {
+      console.log(res);
+      collapseData.value = res.rows;
+      console.log('zujian:',collapseData.value)
+    })
+    .catch((err) => {
+      ElMessage.error(err.returnMsg);
+    });
+}
+
+onMounted(() => {
+    getComponent();
+});
+
+</script>
+
+<style scoped>
+.main-header {
+  height: 32px;
+  background: #EEEEEE;
+  border-radius: 0px 0px 0px 0px;
+  border: 4px solid #EEEEEE;
+}
+
+.main-header :deep(.el-tabs--border-card>.el-tabs__content) {
+  padding: 5px 15px;
+}
+
+.main-header :deep(.el-tabs__content) {
+  background: #FFFFFF;
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid #D8D8D8;
+}
+
+.coms-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.com-item {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  width: 130px;
+}
+.com-image {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+.com-name {
+  font-size: 11px;
+}
+
+.flow-content {
+  width: 100%;
+  flex: 1;
+}
+</style>

src/views/project/index.vue

@@ -65,11 +65,13 @@
             <el-pagination
                 v-model:current-page="gd.currentPage4"
                 v-model:page-size="gd.pageSize4"
+                :page-sizes="[5, 10, 20, 50]"
                 background
                 size="small"
-                layout="prev, slot, pager, next"
+                layout="prev, slot, sizes, pager, next"
                 :total="parseInt(gd.total)"
                 class="mt-4"
+                @size-change="handleSizeChange"
                 @current-change="handleCurrentChange2"
             >
               <template #default>
@@ -99,10 +101,13 @@
     </template>
     <div>
     <el-form-item :label="`${$t('project.name')}：`" :label-width="labelWidth">
-        <el-input v-model="newproject.name" class="w-50 m-2" placeholder="请输入" maxlength="100"/>
+        <el-input v-model="newproject.name" class="w-50 m-2" :placeholder="$t('project.inputmessage')" maxlength="100"/>
+    </el-form-item>
+    <el-form-item :label="`${$t('project.keywords')}：`" :label-width="labelWidth">
+        <el-input v-model="newproject.keywords" class="w-50 m-2" :placeholder="$t('project.inputmessage')" maxlength="100"/>
     </el-form-item>
     <el-form-item :label="`${$t('project.description')}：`" :label-width="labelWidth">
-        <el-input v-model="newproject.description" class="w-50 m-2" placeholder="请输入" maxlength="500"/>
+        <el-input v-model="newproject.description" class="w-50 m-2" :placeholder="$t('project.inputmessage')" maxlength="500"/>
     </el-form-item>
     </div>
     <template #footer>
@@ -120,15 +125,19 @@
 
 <script setup>
 import { request } from "@/utils/request";
+import router from "@/router"
 import { ElMessage, ElButton, ElDialog, ElSelect, ElMessageBox } from 'element-plus'
 import {Search} from '@element-plus/icons-vue'
 import { useI18n } from 'vue-i18n'
+import { useProjectStore } from '@/store/project'
 
 
 const { t, locale } = useI18n()
 
+const projectStore = useProjectStore()
+
 const labelWidth = computed(() => {
-  return locale.value === 'zh-CN' ? '70px' : '110px'
+  return locale.value === 'zh-CN' ? '70px' : '120px'
 })
 
 let projectlists = ref([]);
@@ -138,7 +147,8 @@ let addProjectdialog = ref(false);
 
 let newproject = ref({
     name: '',
-    description: ''
+    description: '',
+    keywords: ''
 });
 
 let gd = ref({
@@ -170,6 +180,12 @@ const getprojectlist = () => {
         })
 };
 
+const handleSizeChange = (newSize) => {
+    gd.value.pageSize4 = newSize;
+    gd.value.currentPage4 = 1;
+    getprojectlist();
+}
+
 const handleCurrentChange2=(val)=>{
     getprojectlist();
 }
@@ -178,7 +194,8 @@ const addProject = () => {
   const params = {
     transCode: 'ES0002',
     name: newproject.value.name,
-    remark: newproject.value.description
+    remark: newproject.value.description,
+    keywords: newproject.value.keywords
   };
   request(params)
     .then((res) => {
@@ -252,7 +269,19 @@ const deleteSelected = () => {
 // 确认选中行
 const confirmSelected = () => {
   
-};
+  if (selectedRows.value.length !== 1) {
+    ElMessage.warning(t('message.oneSelection')) // "请选择一个项目"
+    return
+  }
+
+  // 获取第一个选中项的pid（或根据需要处理多个选中项）
+  const pid = selectedRows.value[0].pid
+  projectStore.setpid(pid.value)
+  
+  router.push({
+    path: '/home',
+  })
+}
 
 onMounted(() => {
     getprojectlist();

src/views/result/index.vue

@@ -0,0 +1,3 @@
+<template>
+  flie
+</template>

src/views/run/index.vue

@@ -0,0 +1,3 @@
+<template>
+  flie
+</template>