web

src/components/web-frame/home.vue

@@ -0,0 +1,29 @@
+<template>
+  <div id="home">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <el-col :span="24" class="one">
+          <component :is="cHeader"></component>
+        </el-col>
+        <el-col :span="24">
+          <router-view></router-view>
+        </el-col>
+        <el-col :span="24"><component :is="cFoot"></component></el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 组件
+import cHeader from './parts/header.vue'
+import cFoot from './parts/foot.vue'
+import type { Ref } from 'vue'
+import { ref, toRefs, onMounted } from 'vue'
+const loading = ref(false)
+onMounted(async () => {
+  loading.value = true
+  loading.value = false
+})
+</script>
+<style scoped lang="scss"></style>

src/components/web-frame/parts/foot.vue

@@ -0,0 +1,38 @@
+<template>
+  <div id="foot">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <div class="w_1200">
+            <p v-html="footInfo.content"></p>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { footInfo } from '../../../layout/site'
+import { ref, onMounted } from 'vue'
+const loading = ref(false)
+onMounted(async () => {
+  loading.value = true
+  loading.value = false
+})
+</script>
+<style scoped lang="scss">
+.main {
+  .one {
+    min-height: 30px;
+    background-color: #3a3637;
+    color: #999999;
+    padding: 10px 0;
+    :deep(p) {
+      p {
+        margin: 0 0 5px 0;
+      }
+    }
+  }
+}
+</style>

src/components/web-frame/parts/header.vue

@@ -0,0 +1,208 @@
+<template>
+  <div id="header">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <div class="w_1200">
+            <el-col class="one_title">
+              <el-col :span="12" class="one-1"> 欢迎来到{{ siteInfos.zhTitle }} </el-col>
+              <el-col :span="12" class="one-2">
+                <el-button type="primary" size="small" @click="toLogin('adminLogin')" v-if="user == null">管理登录</el-button>
+                <el-button type="primary" size="small" @click="toLogin('userLogin')" v-if="user == null">平台登录</el-button>
+                <el-button type="danger" size="small" @click="toLogout()" v-if="user && user._id != null">退出登录</el-button>
+                <el-button type="primary" size="small" @click="toCenter()" v-if="user && user._id != null">个人中心</el-button>
+                <span class="textOver">{{ user && user._id ? user.name || user.title : '游客' }}</span>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" class="two" @click="toHome()">
+          <div class="w_1200">
+            <el-image :src="siteInfos.logo_url"></el-image>
+            <span>{{ siteInfos.zhTitle }}</span>
+          </div>
+        </el-col>
+        <el-col :span="24" class="thr">
+          <div class="w_1200">
+            <el-menu
+              :default-active="route.path"
+              background-color="#0085d2"
+              text-color="#fff"
+              active-text-color="#fff"
+              router
+              mode="horizontal"
+              :ellipsis="false"
+            >
+              <template v-for="item in menuList">
+                <!-- 二级菜单，三级菜单 -->
+                <template v-if="item.type == '0'">
+                  <el-sub-menu :index="item.path" :key="item.path">
+                    <!-- 二级菜单-名称 -->
+                    <template v-slot:title>{{ item.name }}</template>
+                    <template v-for="subItem in item.children">
+                      <!-- 三级菜单 -->
+                      <el-sub-menu v-if="subItem.children" :index="subItem.path" :key="subItem.path">
+                        <!-- 三级菜单-名称 -->
+                        <template v-slot:title>{{ subItem.name }}</template>
+                        <!-- 三级菜单-菜单列表 -->
+                        <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.path">
+                          <template v-slot:title>{{ threeItem.name }}</template>
+                        </el-menu-item>
+                      </el-sub-menu>
+                      <!-- 二级菜单-菜单列表 -->
+                      <el-menu-item v-else :index="subItem.path" :key="`${subItem.path}`" :route="{ path: item.path }">
+                        <template v-slot:title>{{ item.name }}</template>
+                      </el-menu-item>
+                    </template>
+                  </el-sub-menu>
+                </template>
+                <!-- 一级菜单 -->
+                <template v-else>
+                  <el-menu-item :index="item.path" :key="item.path" :route="{ path: item.path }">
+                    <template v-slot:title>{{ item.name }}</template>
+                  </el-menu-item>
+                </template>
+              </template>
+            </el-menu>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { siteInfo, menuInfo } from '../../../layout/site'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import store from '@/stores/counter'
+import type { Ref } from 'vue'
+import { ref, onMounted } from 'vue'
+// 接口
+import { ModuleStore } from '@common/src/stores/system/module'
+import { MenusStore } from '@common/src/stores/system/menus'
+import type { IQueryResult } from '@/util/types.util' //
+const moduleAxios = ModuleStore()
+const menusAxios = MenusStore()
+// 路由
+const router = useRouter()
+const route: any = useRoute()
+let user: Ref<any> = ref({})
+const siteInfos: Ref<any> = ref(siteInfo)
+const menuList: Ref<any> = ref(menuInfo.menuList)
+onMounted(async () => {
+  user.value = store.state.user
+  await search()
+})
+const search = async () => {
+  let name = import.meta.env.VITE_APP_ROUTER
+  const res: IQueryResult = await moduleAxios.query({ name: name, is_use: '0' })
+  if (res && res.errcode == '0') {
+    if (res.total > 0) {
+      let moduleInfo = res.data[0]
+      let menusInfo: IQueryResult = await menusAxios.query({ module_id: moduleInfo._id })
+      if (res.errcode == '0') menuList.value = menusInfo.data
+    }
+  } else {
+    ElMessage({ message: `${res.errmsg}`, type: 'error' })
+  }
+}
+// 跳转登录
+const toLogin = (type) => {
+  router.push({ path: `/login/${type}` })
+}
+// 首页
+const toHome = () => {
+  router.push({ path: '/' })
+}
+// 个人中心
+const toCenter = () => {
+  console.log('1')
+  // let token = sessionStorage.getItem('token');
+  // if (token) window.location.href = `http://localhost:8002/liveuser/login?token=${token}`;
+}
+// 退出登录
+const toLogout = () => {
+  sessionStorage.removeItem('token')
+  location.reload()
+}
+</script>
+<style scoped lang="scss">
+.main {
+  height: 250px;
+  overflow: hidden;
+  background: url('@/assets/top-1.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  .one {
+    height: 40px;
+    line-height: 40px;
+    background: rgba(33, 82, 153, 0.12156862745098039);
+    color: #fff;
+    .one_title {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      .one-2 {
+        text-align: right;
+        span {
+          color: #000;
+          padding: 0 10px 0 0;
+          float: right;
+          width: 68%;
+        }
+        .el-button {
+          float: right;
+          margin: 5px;
+        }
+      }
+    }
+  }
+  .two {
+    height: 160px;
+    overflow: hidden;
+    padding: 50px 0px;
+    .el-image {
+      float: left;
+      width: 60px;
+      height: 60px;
+    }
+    span {
+      float: left;
+      height: 60px;
+      line-height: 60px;
+      margin: 0 10px;
+      color: #2d64b3;
+      font-size: 36px;
+      font-family: cursive;
+      text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
+      font-weight: 600;
+    }
+  }
+  .two:hover {
+    cursor: pointer;
+  }
+  .thr {
+    height: 50px;
+    overflow: hidden;
+    :deep(.el-menu-item) {
+      width: 16.7%;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      border-right: 1px solid #fff;
+      font-size: 20px;
+    }
+    :deep(.el-menu-item:last-child) {
+      width: 16.7%;
+      border-right: none;
+    }
+    .el-menu--horizontal > .el-menu-item {
+      border-bottom: none;
+    }
+    .el-menu--horizontal > .el-menu-item.is-active {
+      background-color: #fe950e !important;
+    }
+  }
+}
+</style>

src/layout/site.ts

@@ -1,9 +1,9 @@
 // 网站基本设置
 export const siteInfo = {
   display: false,
-  zhTitle: '中科在线（长春）'
+  zhTitle: '中科在线（长春）',
   // enTitle: 'Changchun Furui Technology Co., Ltd',
-  // logo_url: require('../../assets/logo.png')
+  logo_url: '/src/assets/logo.png'
 }
 // 菜单设置
 export const menuInfo = {
@@ -16,12 +16,12 @@ export const menuInfo = {
     // actColor: '#ffffff',
   },
   menuList: [
-    { icon: '', index: '/live', title: '直播大厅' },
-    { icon: '', index: '/channel', title: '科技频道' },
-    { icon: '', index: '/market', title: '科技超市' },
-    { icon: '', index: '/interflow', title: '交流合作' },
-    { icon: '', index: '/service', title: '创新服务' },
-    { icon: '', index: '/universal', title: '科学普及' }
+    { icon: '', path: '/live', name: '直播大厅' },
+    { icon: '', path: '/channel', name: '科技频道' },
+    { icon: '', path: '/market', name: '科技超市' },
+    { icon: '', path: '/interflow', name: '交流合作' },
+    { icon: '', path: '/service', name: '创新服务' },
+    { icon: '', path: '/universal', name: '科学普及' }
   ]
 }
 // 轮播图设置

vite.config.ts

@@ -1,14 +1,16 @@
 import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+const path = require('path')
+const common = path.resolve(__dirname, '../common')
+export default defineConfig(({ mode }) => {
+  return {
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+        '@common': common
+      }
     }
   }
 })