1

src/components/studio-one-green/home-2.vue

@@ -0,0 +1,13 @@
+<template>
+  <div id="home-2">
+    <el-row>
+      <el-col :span="24" class="main"> test </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import { ref, toRefs } from 'vue';
+</script>
+<style scoped></style>

src/components/studio-one-green/home-3.vue

@@ -0,0 +1,13 @@
+<template>
+  <div id="home-3">
+    <el-row>
+      <el-col :span="24" class="main"> test </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import { ref, toRefs } from 'vue';
+</script>
+<style scoped></style>

src/components/studio-one-green/home.vue

@@ -1,16 +1,18 @@
 <template>
   <div id="home">
-    <el-container>
+    <el-container class="main">
       <el-header>
         <HomeHead></HomeHead>
       </el-header>
       <el-container>
-        <el-aside class="one">
+        <el-aside class="two">
           <HomeLeft></HomeLeft>
         </el-aside>
         <el-main class="two">
           <el-scrollbar>
-            <router-view></router-view>
+            <el-col :span="24" class="two_1">
+              <router-view></router-view>
+            </el-col>
           </el-scrollbar>
         </el-main>
       </el-container>
@@ -23,19 +25,40 @@ import HomeHead from './homeParts/header-1.vue';
 </script>
 
 <style scoped lang="scss">
-.el-header {
-  padding: 0;
-  background-color: $red;
-  border-bottom: 2px solid $white;
-}
-.one {
-  width: 200px;
-  border-right: 2px solid $white;
-}
-.two {
-  height: 92vh;
-  .router-view {
-    height: 92vh;
+.main {
+  display: flex;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  padding: 10px;
+  background-color: #fff2cc;
+  .el-header {
+    padding: 10px;
+    margin: 0 0 10px 0;
+    background-color: #e2f0d9;
+    border-radius: 10px;
+    border: 1px solid #727e96;
+  }
+  .two {
+    .el-aside {
+      background-color: #e2f0d9;
+      border-radius: 10px;
+      padding: 0.5vw;
+      margin: 0 0.5vw 0 0;
+      border: 1px solid #727e96;
+    }
+    .el-main {
+      padding: 0;
+      border-radius: 10px;
+      background-color: #dae3f3;
+      border: 1px solid #727e96;
+      .two_1 {
+        display: flex;
+        height: 90vh;
+        padding: 10px;
+        flex-direction: column;
+      }
+    }
   }
 }
 </style>

src/components/studio-one-green/homeParts/header-1.vue

@@ -1,73 +1,80 @@
 <template>
-  <el-col :span="24" class="main">
-    <el-row class="head">
-      <el-col :span="8" class="left">
-        <el-image :src="data.imgUrl" class="image"></el-image>
-        <span>{{ webInfo.zhTitle }}-管理中心</span>
-      </el-col>
-      <el-col :span="16" class="right">
-        <span>{{ data.user.name || '游客' }}</span>
-        <el-button type="danger" @click="logout()">退出登录</el-button>
+  <div id="header-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="8" class="one">
+          <span>欢迎进入</span>
+          <span>{{ webInfo.zhTitle }}</span>
+        </el-col>
+        <el-col :span="16" class="two">
+          <el-button
+            size="small"
+            plain
+            v-for="(item, index) in moduleList"
+            :key="index"
+            @click="modulePath(item)"
+            :class="[active == item.active ? 'active' : '']"
+            >{{ item.name }}</el-button
+          >
+          <el-dropdown @command="toDrop">
+            <el-button type="danger" plain>
+              {{ user && user._id ? user.name || user.unit_name || user.nick_name : '暂无昵称' }}
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu>
+              <el-dropdown-item icon="el-icon-user" command="center">个人中心</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-switch-button" command="logout">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
       </el-col>
     </el-row>
-  </el-col>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { ref } from 'vue';
 import type { Ref } from 'vue';
-import { studio_style_Info } from '@/layout/site';
-// let webInfo = studio_style_Info.webInfo;
-const data = reactive({
-  name: '基础动态研究管理平台',
-  user: { name: '王泓璎' },
-  imgUrl: new URL('@/assets/image/logo.png', import.meta.url).href,
-});
-const logout = () => {};
-console.log(studio_style_Info);
+import { studio_style_Info } from '../../../layout/site';
+// import { studio_style_Info } from '@common/src/layout/site';
+let webInfo = studio_style_Info.webInfo;
+let active: 3;
+let moduleList: Ref<any[]> = ref([]);
+let user: Ref<{ _id: string; name: string; unit_name: string; nick_name: string }> = ref({ _id: '', name: '', unit_name: '', nick_name: '' });
+const toDrop = () => {};
+const modulePath = (value: any) => {
+  console.log(value);
+};
 </script>
 
-<style scoped>
-.head {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 10px 0 5px;
-}
-.left {
-  line-height: 60px;
-}
-.left span {
-  display: inline-block;
-  margin: 0 10px;
-  font-size: 24px;
-  color: var(--vt-c-white);
-  font-weight: bold;
-  font-family: cursive;
-}
-.left .image {
-  background: var(--vt-c-white);
-  height: 32px;
-  width: 32px;
-  border-radius: 90px;
-  top: 5px;
-}
-.right {
-  text-align: right;
-  /* line-height: 60px; */
-  word-break: keep-all;
-  white-space: nowrap;
-}
-.right i {
-  position: relative;
-  top: 5px;
-  margin: 0px 15px;
-  font-size: 30px;
-  color: var(--vt-c-white);
-}
-.right span {
-  color: var(--vt-c-white);
-  font-size: 16px;
-  padding: 0 15px 0 0px;
+<style lang="scss" scoped>
+.main {
+  .one {
+    text-align: left;
+    margin: 1vw 0;
+
+    span {
+      font-weight: bold;
+      font-size: 20px;
+    }
+    span:nth-child(1) {
+      color: #ff0000;
+      font-size: 25px;
+      padding: 0 5px 0 0;
+    }
+  }
+  .two {
+    text-align: right;
+    margin: 0.8vw 0;
+    button {
+      margin: 0 0 0 10px;
+    }
+    .el-button {
+      margin: 0 0 0 10px;
+    }
+    .active {
+      color: #07c4a8;
+    }
+  }
 }
 </style>

src/components/studio-one-green/parts/header-1.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="header-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="8" class="one">
+          <span>{{ siteInfo.zhTitle }}</span>
+        </el-col>
+        <el-col :span="16" class="two">
+          <el-button
+            size="small"
+            plain
+            v-for="(item, index) in moduleList"
+            :key="index"
+            @click="modulePath(item)"
+            :class="[active == item.active ? 'active' : '']"
+            >{{ item.name }}</el-button
+          >
+          <el-dropdown @command="toDrop">
+            <el-button type="danger" plain>
+              {{ user && user._id ? user.name || user.unit_name || user.nick_name : '暂无昵称' }}
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu>
+              <el-dropdown-item icon="el-icon-user" command="center">个人中心</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-switch-button" command="logout">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import { studio_style_Info } from '../../../layout/site';
+// import { studio_style_Info } from '@common/src/layout/site';
+let siteInfo = studio_style_Info.webInfo;
+let active: 3;
+let moduleList: Ref<any[]> = ref([]);
+let user: Ref<{ _id: string; name: string; unit_name: string; nick_name: string }> = ref({ _id: '', name: '', unit_name: '', nick_name: '' });
+const toDrop = () => {};
+const modulePath = (value: any) => {
+  console.log(value);
+};
+</script>
+
+<style lang="scss" scoped>
+.main {
+  .one {
+    span {
+      display: inline-block;
+      background-color: #ffc000;
+      padding: 8px 10px;
+      border: 1px solid #ffffff;
+    }
+  }
+  .two {
+    text-align: right;
+    button {
+      margin: 0 0 0 10px;
+    }
+    .el-button {
+      margin: 0 0 0 10px;
+    }
+    .active {
+      color: #07c4a8;
+    }
+  }
+}
+</style>

src/components/studio-one-green/parts/left-1.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="main">
+    <el-menu :collapse="false" unique-opened router background-color="#66363c">
+      <template v-for="item in items">
+        <!-- 二级菜单 -->
+        <template v-if="item.type === '0'">
+          <el-sub-menu :index="item._id || item.index" :key="item._id">
+            <template v-slot:title>
+              <span>{{ item.name }}</span>
+            </template>
+            <template v-for="subItem in item.children">
+              <!-- 三级菜单 -->
+              <el-sub-menu
+                v-if="subItem.children && subItem.children.length > 0 && subItem.children.every((f:any) => f.type === '0' || f.type === '1')"
+                :index="subItem._id"
+                :key="subItem._id"
+              >
+                <template v-slot:title>
+                  <span>{{ subItem.name }}</span>
+                </template>
+                <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.path">
+                  <template v-slot:title>
+                    <span>{{ threeItem.name }}</span>
+                  </template>
+                </el-menu-item>
+              </el-sub-menu>
+              <el-menu-item v-else :index="subItem.path" :key="subItem.path">
+                <template v-slot:title>
+                  <span>{{ subItem.name }}</span>
+                </template>
+              </el-menu-item>
+            </template>
+          </el-sub-menu>
+        </template>
+        <!-- 一级菜单 -->
+        <template v-else>
+          <el-menu-item :index="item.path" :key="item.path">
+            <span>{{ item.name }}</span>
+          </el-menu-item>
+        </template>
+      </template>
+    </el-menu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+// import { project_module_menus } from '@/layout/site';
+
+// 请求列表
+let items: Ref<any[]> = ref([]);
+// items.value = project_module_menus;
+</script>
+
+<style scoped>
+.el-menu {
+  height: 92.5vh;
+  overflow-y: auto;
+}
+.el-menu-item {
+  color: var(--vt-c-white);
+  font-size: 16px;
+  font-weight: 500;
+}
+.el-menu-item span {
+  overflow-y: auto;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:deep().el-sub-menu__title {
+  color: var(--vt-c-white);
+  font-size: 16px;
+  font-weight: 500;
+}
+:deep().el-sub-menu__title span {
+  overflow-y: auto;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.el-menu-item.is-active {
+  color: var(--vt-c-black) !important;
+  background-color: var(--vt-c-white) !important;
+}
+.el-menu-item:hover {
+  color: var(--vt-c-black) !important;
+  background-color: var(--vt-c-white) !important;
+}
+.el-menu::-webkit-scrollbar {
+  width: 2px;
+}
+.el-menu::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: rgb(255, 255, 255);
+}
+</style>

src/stores/user/mutations.ts

@@ -0,0 +1,3 @@
+export const setUser = (state: { user: { role_type: string; lab_id: string } }, payload: { role_type: string; lab_id: string }) => {
+  state.user = payload;
+};

src/stores/user/state.ts

@@ -0,0 +1 @@
+export const user = {};