修改管理员菜单

package.json

@@ -12,10 +12,19 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
+    "axios": "^1.3.4",
+    "element-plus": "^2.3.1",
     "lodash": "^4.17.21",
+    "moment": "^2.29.4",
+    "naf-core": "^0.1.2",
     "pinia": "^2.0.32",
+    "sortablejs": "^1.15.0",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

src/App.vue

@@ -1,5 +0,0 @@
-<template>
-  <RouterView />
-</template>
-<script setup lang="ts"></script>
-<style scoped></style>

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

@@ -1,6 +1,46 @@
 <template>
-  <div id="home-1">第一部分</div>
+  <div id="home">
+    <el-container class="main" :style="{ background: styleInfo.main_bg_color }">
+      <el-aside class="one" :style="{ background: styleInfo.aside_bg_color, 'border-color': styleInfo.aside_border_color }">
+        <HomeLeft></HomeLeft>
+      </el-aside>
+      <el-container class="two" :style="{ background: styleInfo.con_bg_color }">
+        <el-header class="two_1">
+          <HomeHead></HomeHead>
+        </el-header>
+        <el-main class="two_2" :style="{ background: styleInfo.conmain_bg_color, 'border-color': styleInfo.aside_border_color }">
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { studio_style_Info } from '../../layout/site';
+import HomeLeft from './homeParts1/left-1.vue';
+import HomeHead from './homeParts1/header-1.vue';
+let styleInfo = studio_style_Info;
+</script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.main {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  .one {
+    border-radius: 10px;
+    margin: 0.5vw;
+    padding: 0.5vw;
+    border: 1px solid;
+  }
+  .two {
+    min-width: 1200px;
+    .two_2 {
+      border-radius: 10px;
+      margin: 0.5vw;
+      padding: 0.5vw;
+      border: 1px solid;
+    }
+  }
+}
+</style>

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

@@ -1,15 +1,18 @@
 <template>
   <div id="home">
     <home1 v-if="type == '1'"></home1>
-    <home2 v-else-if="type == '2'"></home2>
-    <home3 v-else-if="type == '3'"></home3>
+    <!-- <home2 v-else-if="type == '2'"></home2>
+    <home3 v-else-if="type == '3'"></home3> -->
   </div>
 </template>
 
 <script setup lang="ts">
 // 组件
+
 import store from '@/stores/counter';
 import home1 from './home-1.vue';
+// import home2 from './home-2.vue';
+// import home3 from './home-3.vue';
 import type { Ref } from 'vue';
 import { ref, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';

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

@@ -0,0 +1,100 @@
+<template>
+  <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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+import store from '@/stores/counter';
+import { ref, onMounted } from 'vue';
+import type { Ref } from 'vue';
+import { studio_style_Info } from '../../../layout/site';
+// import { studio_style_Info } from '@common/src/layout/site';
+const router = useRouter();
+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 = (e: string) => {
+  if (e == 'logout') {
+    localStorage.removeItem('token');
+    window.location.href = `${import.meta.env.VITE_APP_HOST}`;
+  } else if (e == 'center') {
+    router.push({ path: '/userInfo/center' });
+  }
+};
+
+const toPath = (value: string) => {
+  router.push({ path: `${value}` });
+}; // 模块跳转
+const modulePath = (e: { path: string }) => {
+  window.location.href = `${e.path}`;
+};
+onMounted(async () => {
+  user.value = store.state.user;
+});
+</script>
+
+<style lang="scss" scoped>
+.main {
+  display: flex;
+  flex-direction: row;
+  .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/homeParts1/left-1.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-row>
+    <el-col :span="24" class="aside">
+      <el-menu
+        :default-active="onRoutes"
+        unique-opened
+        router
+        :background-color="styleInfo.menus_bg_color"
+        :text-color="styleInfo.menus_txt_color"
+        :active-text-color="styleInfo.menus_actxt_color"
+      >
+        <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" :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>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import type { Ref } from 'vue';
+import { project_module_menus, studio_style_Info } from '../../../layout/site';
+import { ElMessage } from 'element-plus';
+// 接口
+import { ModuleStore } from '@common/src/stores/admin/module'; //模块
+import { RoleStore } from '@common/src/stores/admin/role'; //模块
+import type { IQueryResult } from '@/util/types.util'; //
+const module = ModuleStore();
+const role = RoleStore();
+
+// 请求列表
+let items: Ref<any[]> = ref([]);
+items.value = project_module_menus;
+let styleInfo = studio_style_Info;
+const onRoutes = () => {};
+onMounted(async () => {
+  let name = import.meta.env.VITE_APP_ROUTER;
+  const res: IQueryResult = await module.query({ name: name, is_use: 'Y' });
+  if (res && res.errcode == '0') {
+    if (res.total > 0) {
+      let moduleInfo = res.data[0];
+      let roleInfo = await role.um();
+      if (roleInfo.errcode == '0') {
+        if (roleInfo.data) {
+          let menus = roleInfo.data[moduleInfo._id];
+          if (menus && menus.length > 0) {
+            items.value = menus;
+          }
+        }
+      }
+    }
+  } else {
+    ElMessage({ message: `${res.errmsg}`, type: 'error' });
+  }
+});
+</script>
+
+<style scoped>
+.main {
+  width: 100%;
+}
+.el-menu-item.is-active {
+  background-color: #65cd94 !important;
+}
+.el-menu-item:focus,
+.el-menu-item:hover {
+  background-color: #65cd94 !important;
+  color: #ffffff !important;
+}
+</style>

src/main.ts

@@ -1,6 +1,21 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import App from './App.vue';
+import router from './router';
+import ElementPlus from 'element-plus';
+import 'element-plus/theme-chalk/index.css';
+import locale from 'element-plus/lib/locale/lang/zh-cn';
+// import moment from 'moment';
+import '@/assets/main.css';
+// import 'animate.css';
+import * as ElementPlusIconsVue from '@element-plus/icons-vue';
 const app = createApp(App);
 app.use(createPinia());
+app.use(router);
+app.use(ElementPlus, { locale });
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component);
+}
+// app.config.globalProperties.$moment = moment;
+// app.config.globalProperties.$limit = parseInt(import.meta.env.VITE_APP_PAGE_SIZE) || 10;
 app.mount('#app');