menu

package.json

@@ -25,12 +25,13 @@
     "vite-plugin-windicss": "^1.8.10",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
+    "vue-types": "^5.0.2",
     "windicss": "^3.5.6"
   },
   "devDependencies": {
     "@types/node": "^18.16.1",
     "@vitejs/plugin-vue": "^4.1.0",
-    "typescript": "^5.0.2",
+    "typescript": "^5.0.4",
     "vite": "^4.3.2",
     "vue-tsc": "^1.4.2"
   }

src/components/layout/Header.tsx

@@ -16,12 +16,13 @@ export default defineComponent(() => {
           </Space>
         </div>
       </div>
-      <div class={"lay_menu"}>
-        <div>
+      <div class={"lay_menu flex"}>
+        <div class={"menu_logo"}>
           <router-link to="/">
             <img src={getImageUrl("logo_header.png")} />
           </router-link>
         </div>
+        <div class={"menu flex-1"}></div>
       </div>
     </div>
   );
@@ -42,5 +43,11 @@ const HeaderLayout = css`
   .lay_menu {
     padding: 22px 30px;
     background: var(--vt-c-primary);
+    .menu_logo {
+      img {
+        height: 54px;
+        object-fit: contain;
+      }
+    }
   }
 `;

src/components/layout/Menu.tsx

@@ -0,0 +1,54 @@
+import { css } from "@linaria/core";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+const menuConfig = [
+  {
+    title: "学院概述",
+    url: "",
+    children: [
+      {
+        title: "学院简介",
+        url: "",
+      },
+      {
+        title: "学院领导",
+        url: "",
+      },
+      {
+        title: "历史沿革",
+        url: "",
+      },
+      {
+        title: "组织机构",
+        url: "",
+      },
+    ],
+  },
+  { title: "党建工作", url: "" },
+  { title: "新闻公告", url: "" },
+  { title: "专业建设", url: "" },
+  { title: "师资队伍", url: "" },
+  { title: "人才培养", url: "" },
+  { title: "招生就业", url: "" },
+  { title: "学科建设", url: "" },
+  { title: "科研创作", url: "" },
+  { title: "学生工作", url: "" },
+];
+export default defineComponent({
+  stup() {
+    return () => (
+      <div class={MenuLayout}>
+        {menuConfig.map((e) => {
+          return <MenuItem data={e} />;
+        })}
+      </div>
+    );
+  },
+});
+const MenuItem = defineComponent({
+  props: {
+    data: any(),
+  },
+  setup() {},
+});
+const MenuLayout = css``;

tsconfig.json

@@ -7,7 +7,7 @@
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,

vite.config.ts

@@ -10,6 +10,7 @@ import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
 // https://vitejs.dev/config/
 export default defineConfig({
   base: process.env.NODE_ENV == "production" ? "./" : "./",
+  build: {},
   plugins: [
     WindiCSS(),
     linaria({

yarn.lock

@@ -1995,6 +1995,11 @@ is-plain-object@3.0.1:
   resolved "http://124.70.149.18:4873/is-plain-object/-/is-plain-object-3.0.1.tgz#662d92d24c0aa4302407b0d45d21f2251c85f85b"
   integrity sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==
 
+is-plain-object@5.0.0:
+  version "5.0.0"
+  resolved "http://124.70.149.18:4873/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "http://124.70.149.18:4873/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -2541,7 +2546,7 @@ tslib@^2.1.0, tslib@^2.3.0:
   resolved "http://124.70.149.18:4873/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
 
-typescript@^5.0.2:
+typescript@^5.0.4:
   version "5.0.4"
   resolved "http://124.70.149.18:4873/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"
   integrity sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==
@@ -2655,6 +2660,13 @@ vue-types@^3.0.0:
   dependencies:
     is-plain-object "3.0.1"
 
+vue-types@^5.0.2:
+  version "5.0.2"
+  resolved "http://124.70.149.18:4873/vue-types/-/vue-types-5.0.2.tgz#d04966bd416510db878f23030014f424a2e6378e"
+  integrity sha512-+/5hnQ65XOYqPs+tEUF8GGTJX95UFVH0wPQo71IJJYh5TKMfik2tGKTLkZ42JqAczANA9hGu5FrZmPgxn20nnA==
+  dependencies:
+    is-plain-object "5.0.0"
+
 vue@^3.2.47:
   version "3.2.47"
   resolved "http://124.70.149.18:4873/vue/-/vue-3.2.47.tgz#3eb736cbc606fc87038dbba6a154707c8a34cff0"