页面优化 增加系统权限菜单

src/components/KGBuilderTM/DiseaseTerminology.vue

@@ -41,7 +41,7 @@ let icdOptions = ref([
   margin-top: 5px;
 
   .icd {
-    width: 300px;
+    // width: 300px;
 
     .icd-selector {
       padding: 5px 10px 0px;

src/router/index.ts

@@ -1,161 +1,193 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import AppCopy from '@/views/AppCopy.vue'
-import HomeView from '@/views/HomeView.vue'
-import Layout from '@/views/KMPlatform/Layout.vue'
-import Home from '@/views/KMPlatform/Home/Home.vue'
-import KGBuilder from '@/views/KMPlatform/KGBuilder/KGBuilder.vue'
-import KnowledgeBase from '@/views/KMPlatform/KnowledgeBase/KnowledgeBase.vue'
-import OpenPlatform from '@/views/KMPlatform/OpenPlatform/OpenPlatform.vue'
-import TerminologyManagement from '@/views/KMPlatform/KGBuilder/TM/TerminologyManagement.vue'
-import EntityTypeManagement from '@/views/KMPlatform/KGBuilder/KTM/EntityTypeManagement.vue'
-import KnowledgeBaseManagement from '@/views/KMPlatform/KnowledgeBase/KBM/KnowledgeBaseManagement.vue'
-import KnowledgeManagement from '@/views/KMPlatform/KnowledgeBase/KM/KnowledgeManagement.vue'
-import { getSessionVar,deleteSessionVar } from "@/utils/session"
+import { createRouter, createWebHistory } from "vue-router";
+import AppCopy from "@/views/AppCopy.vue";
+import HomeView from "@/views/HomeView.vue";
+import Layout from "@/views/KMPlatform/Layout.vue";
+import Home from "@/views/KMPlatform/Home/Home.vue";
+import KGBuilder from "@/views/KMPlatform/KGBuilder/KGBuilder.vue";
+import KnowledgeBase from "@/views/KMPlatform/KnowledgeBase/KnowledgeBase.vue";
+import OpenPlatform from "@/views/KMPlatform/OpenPlatform/OpenPlatform.vue";
+import TerminologyManagement from "@/views/KMPlatform/KGBuilder/TM/TerminologyManagement.vue";
+import EntityTypeManagement from "@/views/KMPlatform/KGBuilder/KTM/EntityTypeManagement.vue";
+import KnowledgeBaseManagement from "@/views/KMPlatform/KnowledgeBase/KBM/KnowledgeBaseManagement.vue";
+import KnowledgeManagement from "@/views/KMPlatform/KnowledgeBase/KM/KnowledgeManagement.vue";
+import AccountManage from "@/views/KMPlatform/Permission/AccountManage.vue";
+import PermissionManage from "@/views/KMPlatform/Permission/permission.vue";
+import RoleManage from "@/views/KMPlatform/Permission/RoleManage.vue";
+import { getSessionVar, deleteSessionVar } from "@/utils/session";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
+      path: "/",
       component: AppCopy,
-      redirect: '/home',
+      redirect: "/home",
       children: [
         {
-          path: 'home',
-          name: 'home',
+          path: "home",
+          name: "home",
           component: HomeView,
         },
         {
-          path: 'workspace',
-          name: 'workspace',
-          component: () => import('@/views/WorkspaceView.vue'),
+          path: "workspace",
+          name: "workspace",
+          component: () => import("@/views/WorkspaceView.vue"),
           children: [
             {
-              path: 'queue/:id',
-              name: 'queue',
-              component: () => import('@/views/QueueView.vue'),
-
+              path: "queue/:id",
+              name: "queue",
+              component: () => import("@/views/QueueView.vue"),
             },
             {
-              path: 'worker',
-              name: 'worker',
-              component: () => import('@/views/WorkerView.vue'),
+              path: "worker",
+              name: "worker",
+              component: () => import("@/views/WorkerView.vue"),
             },
             {
-              path: 'graph',
-              name: 'graph',
-              component: () => import('../views/GraphView.vue'),
+              path: "graph",
+              name: "graph",
+              component: () => import("../views/GraphView.vue"),
             },
             {
-              path: 'graph-mgr/:id',
-              name: 'graph-mgr',
-              component: () => import('../views/GraphManagement.vue'),
-            }
-          ]
+              path: "graph-mgr/:id",
+              name: "graph-mgr",
+              component: () => import("../views/GraphManagement.vue"),
+            },
+          ],
         },
         {
-          path: 'about',
-          name: 'about',
-          component: () => import('../views/AboutView.vue'),
-        }
-      ]
+          path: "about",
+          name: "about",
+          component: () => import("../views/AboutView.vue"),
+        },
+      ],
     },
     {
-      path: '/kmplatform',
-      name: 'kmplatform',
+      path: "/kmplatform",
+      name: "kmplatform",
       component: Layout,
-      redirect: '/kmplatform/home',
+      redirect: "/kmplatform/home",
       children: [
         {
-          path: 'home',
-          name: 'kmplatform-home',
+          path: "home",
+          name: "kmplatform-home",
           meta: {
-            title: "主页"
+            title: "主页",
           },
           component: Home,
-          children: []
+          children: [],
         },
         {
-          path: 'knowledgebase',
-          name: 'knowledgebase',
+          path: "knowledgebase",
+          name: "knowledgebase",
           meta: {
             title: "知识库",
-            keepAlive: true
+            keepAlive: true,
           },
           component: KnowledgeBase,
-          redirect: '/kmplatform/knowledgebase/kbm',
+          redirect: "/kmplatform/knowledgebase/kbm",
           children: [
             {
-              path: 'kbm',
-              name: 'kbm',
+              path: "kbm",
+              name: "kbm",
               meta: {
                 title: "知识库",
-                keepAlive: true
+                keepAlive: true,
               },
               component: KnowledgeBaseManagement,
             },
             {
-              path: 'km/:kbId',
-              name: 'km',
+              path: "km/:kbId",
+              name: "km",
               meta: {
                 title: "知识库",
-                keepAlive: false
+                keepAlive: false,
               },
               component: KnowledgeManagement,
-            }
-          ]
+            },
+          ],
         },
         {
-          path: 'kgbuilder',
-          name: 'kgbuilder',
+          path: "kgbuilder",
+          name: "kgbuilder",
           meta: {
-            title: "知识图谱构建"
+            title: "知识图谱构建",
           },
           redirect: "/kmplatform/kgbuilder/tm",
           component: KGBuilder,
           children: [
             {
-              path: 'tm',
-              name: 'kgb-tm',
+              path: "tm",
+              name: "kgb-tm",
               meta: {
-                title: "术语管理"
+                title: "术语管理",
               },
               component: TerminologyManagement,
             },
             {
-              path: 'ktm',
-              name: 'kgb-ktm',
+              path: "ktm",
+              name: "kgb-ktm",
               meta: {
-                title: "实体类型管理"
+                title: "实体类型管理",
               },
               component: EntityTypeManagement,
-            }
-          ]
+            },
+          ],
         },
         {
-          path: 'openplatform',
-          name: 'openplatform',
+          path: "openplatform",
+          name: "openplatform",
           meta: {
-            title: "开放平台"
+            title: "开放平台",
           },
           component: OpenPlatform,
-          children: []
-        }
-      ]
+          children: [],
+        },
+        // {
+        //   path: "kgpermission",
+        //   name: "kgpermission",
+        //   meta: {
+        //     title: "系统权限",
+        //   },
+        //   redirect: "/kmplatform/kgpermission/AccountManage",
+        //   component: PermissionManage,
+        //   children: [
+        //     {
+        //       path: "RoleManage",
+        //       name: "kgb-RoleManage",
+        //       meta: {
+        //         title: "角色管理",
+        //       },
+        //       component: RoleManage,
+        //     },
+        //     {
+        //       path: "AccountManage",
+        //       name: "kgb-AccountManage",
+        //       meta: {
+        //         title: "账号管理",
+        //       },
+        //       component: AccountManage,
+        //     },
+        //   ],
+        // },
+      ],
     },
   ],
-})
+});
 
 router.beforeEach((to, from, next) => {
-  if(getSessionVar('session_id') == null && getSessionVar('username') == null ) {
-    if (to.name !== 'home') {
-      next({ name: 'home' }); // 重定向到登录页面
-    }else {
+  if (
+    getSessionVar("session_id") == null &&
+    getSessionVar("username") == null
+  ) {
+    if (to.name !== "home") {
+      next({ name: "home" }); // 重定向到登录页面
+    } else {
       next(); // 确认转移
     }
   } else {
-     next(); // 确认转移
+    next(); // 确认转移
   }
 });
 
-export default router
+export default router;

src/stores/menu.js

@@ -25,6 +25,13 @@ export const useMenuStore = defineStore('menu', () => {
     name: 'openplatform',
     title: "开放平台",
     children: []
-  }])
+  },
+  // {
+  //   path: '/kmplatform/kgpermission',
+  //   name: 'kgpermission',
+  //   title: "系统权限",
+  //   children: []
+  // }
+])
   return { routeList }
 })

src/views/HomeView.vue

@@ -1,6 +1,68 @@
 <template>
+   <el-alert style="margin-bottom: 20px;" title="上传文档，自动提取文本，自动抽取知识，自动构建图谱 支持多种文档格式，如PDF、DOCX等 支持多种知识抽取模型，如LLM、RAG等 支持多种图谱构建模型，如Neo4j、Postgres等" type="success" :closable="false" />
   <!-- 主要内容区域 -->
-  <el-row style="display: flex; justify-content: center; padding-top:50px;">
+    <el-steps
+    style="margin-bottom: 20px;padding: 33px 8%;"
+    :space="200"
+    simple
+  >
+    <el-step >
+      <template #icon>
+        <el-icon size="30" color="#40a1ff"><upload-filled /></el-icon>
+        </template> 
+      <template #title>
+        <div>第一步</div>
+        <div>上传文档</div>
+        <!-- <span>上传文档</span> -->
+      </template>
+    </el-step>
+       <el-step status="process">
+      <template #icon>
+        <el-icon size="30" color="#40a1ff"><TrendCharts /></el-icon>
+        </template> 
+      <template #title>
+        <div>第二步</div>
+        <div>文本切片</div>
+      </template>
+    </el-step>
+       <el-step status="process">
+      <template #icon>
+        <el-icon size="30" color="#40a1ff"><ChromeFilled /></el-icon>
+        </template> 
+      <template #title>
+        <div>第三步</div>
+        <div>知识抽取</div>
+        <!-- <span>上传文档</span> -->
+      </template>
+    </el-step>
+       <el-step status="process" >
+      <template #icon>
+        <el-icon size="30" color="#40a1ff"><HelpFilled /></el-icon>
+        </template> 
+      <template #title>
+        <div>第四步</div>
+        <div>图谱构建</div>
+        <!-- <span>上传文档</span> -->
+      </template>
+    </el-step>
+       <el-step  status="process">
+      <template #icon>
+        <el-icon size="30" color="#40a1ff"><Grid /></el-icon>
+        </template> 
+      <template #title>
+        <div>第五步</div>
+        <div>查看图谱</div>
+        <!-- <span>上传文档</span> -->
+      </template>
+    </el-step>
+
+
+    <!-- <el-step title="文本切片"  />
+    <el-step title="知识抽取" />
+    <el-step title="图谱构建"  />
+    <el-step title="查看图谱"/> -->
+  </el-steps>
+  <!-- <el-row style="display: flex; justify-content: center; padding-top:50px;">
 
     <svg width="1000" height="150">
       <g fill="none" stroke="black" stroke-width="1">
@@ -50,24 +112,24 @@
         、
       </g>
     </svg>
-  </el-row>
-  <el-row>
+  </el-row> -->
+  <el-row style="display: flex;justify-content: space-between;padding: 0 50px;">
     <template v-for="(queue, index) in queuesSummary" :key="index">
-      <el-card shadow="hover" style="width: 300px; margin: 10px;">
-        <div class="card-header">
+      <el-card shadow="hover" style="width: 40%; margin: 10px; padding: 30px; text-align: center;background: linear-gradient( #eef6ff 0%, #F6F6F9 100%);">
+        <div class="card-header" style="margin-bottom: 10px;">
           <span>{{ formatQueueName(queue.queue_category, queue.queue_name) }}</span>
           <span class="card-status" :class="queue.status === 'running' ? 'status-running' : 'status-idle'">
             {{ queue.status }}
           </span>
         </div>
         <div class="card-content">
-          <p>总任务数：{{ queue.job_count }}</p>
+          <p style="margin-bottom: 5px;">总任务数：{{ queue.job_count }}</p>
           <p>完成的任务数：{{ queue.job_finished_count }}</p>
         </div>
       </el-card>
     </template>
   </el-row>
-  <el-row style="display: flex; justify-content: center; padding-top:100px;">
+  <!-- <el-row style="display: flex; justify-content: center; padding-top:100px;">
     <div style="text-align: left; font-size:12pt;">
       <el-row>
         <el-text>上传文档，自动提取文本，自动抽取知识，自动构建图谱</el-text></el-row>
@@ -76,7 +138,7 @@
       <el-row><el-text>支持多种图谱构建模型，如Neo4j、Postgres等</el-text></el-row>
 
     </div>
-  </el-row>
+  </el-row> -->
 </template>
 
 <script setup lang="ts">
@@ -119,7 +181,7 @@ onMounted(() => {
 
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .workspace-container {
   display: flex;
   height: 100vh;
@@ -181,4 +243,5 @@ onMounted(() => {
     }
   }
 }
+
 </style>

src/views/KMPlatform/KGBuilder/KGBuilder.vue

@@ -58,14 +58,18 @@ function handleMenuClick(data) {
 
       .menu-item {
         cursor: pointer;
-        padding: 3px 0px;
+        padding: 10px;
+        margin-bottom: 5px;
 
         &:is(.active) {
-          color: #0A61F7;
+          // color: #0A61F7;
+          color:#40a1ff;
+           background: #eef6ff;
         }
 
         &:hover {
-          color: #0A61F7;
+          // color: #0A61F7;
+          background: #eef6ff;
         }
       }
     }

src/views/KMPlatform/Permission/AccountManage.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="main">
+    <!-- <div class="export-button pl-10">
+      <el-button v-has="99102" type="primary" @click="onClick_add">
+        创建账号
+      </el-button>
+    </div> -->
+    <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="date" label="Date" width="180" />
+    <el-table-column prop="name" label="Name" width="180" />
+    <el-table-column prop="address" label="Address" />
+  </el-table>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive,getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
+let tableData = reactive([])
+const init = async() => {
+  const data = await proxy.$http.get('/open_platform/user/roles')
+  console.log(data,'111')
+}
+init()
+
+</script>
+
+<style lang="scss" scoped>
+
+
+</style>

src/views/KMPlatform/Permission/RoleManage.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+
+        角色管理
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/KMPlatform/Permission/permission.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="kg-builder">
+    <div class="aside" style="width: 200px">
+      <ul class="menu-list">
+        <li
+          v-for="i in menuList"
+          :class="route.path === i.path ? 'menu-item active' : 'menu-item'"
+          :key="i.name"
+          @click="handleMenuClick(toRaw(i))"
+        >
+          {{ i.title }}
+        </li>
+      </ul>
+    </div>
+    <div class="content">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, toRaw } from "vue";
+import { useRoute, useRouter } from "vue-router";
+const route = useRoute();
+const router = useRouter();
+let menuList = ref([
+  {
+    path: "/kmplatform/kgpermission/RoleManage",
+    name: "kgb-RoleManage",
+    title: "角色管理",
+  },
+  {
+    path: "/kmplatform/kgpermission/AccountManage",
+    name: "kgb-AccountManage",
+    title: "账号管理",
+  },
+]);
+
+function handleMenuClick(data) {
+  router.push({ path: data.path });
+}
+</script>
+
+<style lang="less" scoped>
+.kg-builder {
+  display: flex;
+  min-height: 100%;
+
+  .aside {
+    flex: 0 0 auto;
+    // border-right: 1px solid #808080;
+    padding: 10px 10px 0px;
+
+    .menu-title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+
+    .menu-list {
+    //   margin: 20px 0px 0px;
+
+      .menu-item {
+        cursor: pointer;
+        padding: 10px;
+        font-size: 18px;
+        &:is(.active) {
+          color: #0a61f7;
+        }
+
+        &:hover {
+          color: #0a61f7;
+        }
+      }
+    }
+  }
+
+  .content {
+    flex: 1 1 auto;
+  }
+}
+</style>