feat: 新增空页面及头部菜单

.eslintrc.cjs

@@ -36,6 +36,7 @@ module.exports = {
     'no-shadow': 'off',
     '@typescript-eslint/no-shadow': 'error',
     'no-unused-vars': 'off',
+    'no-else-return': 'off',
     '@typescript-eslint/no-unused-vars': 'error',
     'vue-scoped-css/enforce-style-type': ['error', { allows: ['plain'] }],
     'vue/block-order': [
@@ -52,5 +53,6 @@ module.exports = {
         },
       },
     ],
+    'no-restricted-syntax': ['off', 'iterators/generators'],
   },
 };

.prettierrc.json

@@ -4,5 +4,6 @@
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 100,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "htmlWhitespaceSensitivity": "ignore"
 }

components.d.ts

@@ -12,14 +12,21 @@ declare module 'vue' {
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElFooter: typeof import('element-plus/es')['ElFooter']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     RouterLink: typeof import('vue-router')['RouterLink']

src/App.vue

 <template>
-  <RouterView />
+  <div>
+    <el-container class="min-h-screen">
+      <el-header>
+        <common-header :menu-list="menuList" :current-path="currentPath"></common-header>
+      </el-header>
+      <el-main>
+        <RouterView />
+      </el-main>
+      <el-footer>Footer</el-footer>
+    </el-container>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router';
+import { computed } from 'vue';
+import { uniqueId } from 'lodash-es';
+import CommonHeader from './components/CommonHeader.vue';
+import type { HeaderMenuItem } from './types/common';
+
+const router = useRouter();
+const route = useRoute();
+
+const menuList = computed(() => {
+  const map = new Map<string, HeaderMenuItem>();
+  const result: HeaderMenuItem[] = [];
+  for (const routeItem of router.getRoutes()) {
+    const { menuName, parentMenuName } = routeItem.meta;
+    if (menuName) {
+      const menu = {
+        path: routeItem.path,
+        name: menuName,
+      };
+      if (parentMenuName) {
+        if (map.has(parentMenuName)) {
+          const parent = map.get(parentMenuName)!;
+          parent.subMenus!.push(menu);
+        } else {
+          const parent = {
+            name: parentMenuName,
+            path: uniqueId(),
+            subMenus: [menu],
+          };
+          map.set(parentMenuName, parent);
+          result.push(parent);
+        }
+      } else {
+        result.push(menu);
+      }
+    }
+  }
+  return result;
+});
+
+/**
+ * 当前菜单path
+ */
+const currentPath = computed(() => {
+  if (`#${route.path}` === window.location.hash) {
+    return route.path;
+  } else {
+    return '';
+  }
+});
+</script>

src/components/CommonHeader.vue

 <template>
-  <div>{{ title }}</div>
-  <el-button @click="handleClick">button</el-button>
+  <div class="flex items-center">
+    <div>logo</div>
+    <div class="flex flex-1 justify-center">
+      <el-menu
+        class="!border-none"
+        mode="horizontal"
+        router
+        :default-active="currentPath"
+        :ellipsis="false"
+        @select="handleMenuChange"
+      >
+        <template v-for="menu in menuList" :key="menu.path">
+          <el-sub-menu v-if="menu.subMenus?.length" :index="menu.name">
+            <template #title>{{ getParentName(menu) }}</template>
+            <el-menu-item
+              v-for="subMenu in menu.subMenus"
+              :key="subMenu.path"
+              :index="subMenu.path"
+              :route="subMenu.path"
+            >
+              产业分类
+            </el-menu-item>
+          </el-sub-menu>
+          <el-menu-item v-else :index="menu.path" :route="menu.path">
+            {{ menu.name }}
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </div>
+    <div>登录</div>
+  </div>
 </template>
 <script lang="ts" setup>
-defineProps<{
-  title: string;
-}>();
-const handleClick = () => {
-  return 'click';
+import type { HeaderMenuItem } from '@/types/common';
+
+const props = withDefaults(
+  defineProps<{
+    currentPath: string;
+    menuList: HeaderMenuItem[];
+  }>(),
+  {
+    currentPath: '',
+    menuList: () => [],
+  },
+);
+
+const getParentName = (menu: HeaderMenuItem) => {
+  const current = menu.subMenus!.find(({ path }) => {
+    return props.currentPath === path;
+  });
+  return current?.name || menu.name;
 };
-defineExpose({
-  handleClick,
-});
+
+const handleMenuChange = () => {};
 </script>

src/router/index.ts

 import { createRouter, createWebHashHistory } from 'vue-router';
-import HomeView from '../views/HomeView.vue';
+/** 首页 */
+import HomeView from '@/views/home/HomeView.vue';
+/** 登录页 */
+import LoginView from '@/views/user/LoginView.vue';
+
+/** 产业园 */
+const IndustrialParkList = () => import('@/views/industrial-park/IndustrialParkList.vue');
+/** 开发区 */
+const DevelopZoneList = () => import('@/views/develop/DevelopZoneList.vue');
+/** 土地 */
+const LandList = () => import('@/views/land/LandList.vue');
+/** 载体 */
+const CarrierList = () => import('@/views/carrier/CarrierList.vue');
+/** 产业分类 */
+const IndustryCategory = () => import('@/views/industry/IndustryCategory.vue');
+/** 产业政策 */
+const IndustryPolicy = () => import('@/views/industry/IndustryPolicy.vue');
+/** 用户中心 */
+const UserCenter = () => import('@/views/user/UserCenter.vue');
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -8,6 +26,77 @@ const router = createRouter({
       path: '/',
       name: 'home',
       component: HomeView,
+      meta: {
+        menuName: '首页',
+      },
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: LoginView,
+    },
+    {
+      path: '/user-center',
+      name: 'user-center',
+      component: UserCenter,
+    },
+    {
+      // 开发区列表
+      path: '/develop-zone-list',
+      name: 'develop-zone-list',
+      component: DevelopZoneList,
+      meta: {
+        menuName: '开发区',
+      },
+    },
+    {
+      // 产业园列表
+      path: '/industrial-parkList',
+      name: 'industrial-parkList',
+      component: IndustrialParkList,
+      meta: {
+        menuName: '产业园',
+      },
+    },
+    {
+      path: '/land-list',
+      name: 'land-list',
+      component: LandList,
+      meta: {
+        menuName: '土地',
+      },
+    },
+    {
+      path: '/carrier-list',
+      name: 'carrier-list',
+      component: CarrierList,
+      meta: {
+        menuName: '载体',
+      },
+    },
+    {
+      // 产业分类
+      path: '/industry-category',
+      name: 'industry-category',
+      component: IndustryCategory,
+      meta: {
+        parentMenuName: '产业',
+        menuName: '产业分类',
+      },
+    },
+    {
+      // 产业政策
+      path: '/industry-policy',
+      name: 'industry-policy',
+      component: IndustryPolicy,
+      meta: {
+        parentMenuName: '产业',
+        menuName: '产业政策',
+      },
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      redirect: '/',
     },
   ],
 });

src/types/common.ts

+/**
+ * 头部菜单项
+ */
+export interface HeaderMenuItem {
+  name: string;
+  path: string;
+  subMenus?: HeaderMenuItem[];
+}

src/types/typings.d.ts

+import 'vue-router';
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    menuName?: string;
+    parentMenuName?: string;
+  }
+}

src/views/about/AboutUs.vue

+<!-- 关于立业云 -->
+<template>
+  <div>关于立业云</div>
+</template>
+
+<script lang="ts" setup></script>

src/views/carrier/CarrierList.vue

+<!-- 载体 -->
+<template>
+  <div>载体</div>
+</template>
+
+<script lang="ts" setup></script>

src/views/develop/DevelopZoneList.vue

+<!-- 开发区列表 -->
+<template>
+  <div>开发区</div>
+</template>
+
+<script lang="ts" setup></script>

src/views/HomeView.vue → src/views/home/HomeView.vue

+<!-- 首页 -->
+
 <template>
   <el-form :model="form" label-width="120px">
     <el-form-item label="Activity name" class="w-2 px-4">

src/views/industrial-park/IndustrialParkList.vue

+<!-- 产业园列表 -->
+<template>
+  <div>产业园</div>
+</template>
+
+<script lang="ts" setup></script>

src/views/industry/IndustryCategory.vue

+<!-- 产业分类 -->
+<template>
+  <div>产业分类</div>
+</template>
+
+<script lang="ts" setup></script>

src/views/industry/IndustryPolicy.vue

+<!-- 产业政策 -->
+<template>
+  <div>产业政策</div>
+</template>
+
+<script lang="ts" setup></script>

src/views/land/LandList.vue

+<!-- 土地 -->
+<template>
+  <div>土地</div>
+</template>
+
+<script lang="ts" setup></script>

src/views/map/MapSelection.vue

+<!-- 地图选址 -->
+<template>
+  <div>地图选址</div>
+</template>
+
+<script lang="ts" setup></script>

src/views/partner/PartnerEnlist.vue

+<!-- 合伙人招募-->
+<template>
+  <div>合伙人招募</div>
+</template>
+
+<script lang="ts" setup></script>

src/views/user/LoginView.vue

+<!-- 登录页 -->
+<template>
+  <div>登录页</div>
+</template>
+
+<script lang="ts" setup></script>

src/views/user/UserCenter.vue

+<!-- 用户中心 -->
+<template>
+  <div>用户中心</div>
+</template>
+
+<script lang="ts" setup></script>