feat: optimize header align & add more route

Author: YunYouJun

package.json

@@ -4,6 +4,10 @@
   "version": "0.1.0",
   "type": "module",
   "packageManager": "[email protected]",
+  "homepage": "https://vite-starter.element-plus.org",
+  "repository": {
+    "url": "https://github.com/element-plus/element-plus-vite-starter"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -20,6 +24,7 @@
   },
   "devDependencies": {
     "@iconify-json/ep": "^1.2.1",
+    "@iconify-json/ri": "^1.2.3",
     "@types/node": "^20.17.6",
     "@vitejs/plugin-vue": "^5.2.0",
     "sass": "^1.81.0",

pnpm-lock.yaml

@@ -1,10 +1,17 @@
 <script lang="ts" setup>
 import { toggleDark } from "~/composables";
+
+import { repository } from '~/../package.json'
 </script>
 
 <template>
-  <el-menu class="el-menu-demo" mode="horizontal">
-    <el-menu-item index="1">Element Plus</el-menu-item>
+  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" router>
+    <el-menu-item index="/">
+      <div class="flex items-center justify-center gap-2">
+        <div class="text-xl" i-ep-element-plus />
+        <span>Element Plus</span>
+      </div>
+    </el-menu-item>
     <el-sub-menu index="2">
       <template #title>Workspace</template>
       <el-menu-item index="2-1">item one</el-menu-item>
@@ -19,6 +26,8 @@ import { toggleDark } from "~/composables";
     </el-sub-menu>
     <el-menu-item index="3" disabled>Info</el-menu-item>
     <el-menu-item index="4">Orders</el-menu-item>
+
+    
     <el-menu-item h="full" @click="toggleDark()">
       <button
         class="border-none w-full bg-transparent cursor-pointer"
@@ -27,5 +36,19 @@ import { toggleDark } from "~/composables";
         <i inline-flex i="dark:ep-moon ep-sunny" />
       </button>
     </el-menu-item>
+    
+    <el-menu-item h="full">
+      <a class="size-full flex items-center justify-center" :href="repository.url" target="_blank">
+        <div i-ri-github-fill />
+      </a>
+    </el-menu-item>
   </el-menu>
 </template>
+
+<style lang="scss">
+.el-menu-demo {
+  &.ep-menu--horizontal > .ep-menu-item:nth-child(1) {
+    margin-right: auto;
+  }
+}
+</style>

src/components/layouts/BaseHeader.vue

@@ -33,7 +33,7 @@ const handleClose = (key: string, keyPath: string[]) => {
       </template>
       <el-menu-item-group>
         <template #title><span>Group One</span></template>
-        <el-menu-item index="1-1">item one</el-menu-item>
+        <el-menu-item index="/nav/1/item-1">item one</el-menu-item>
         <el-menu-item index="1-2">item two</el-menu-item>
       </el-menu-item-group>
       <el-menu-item-group title="Group Two">

src/components/layouts/BaseSide.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Item One
+  </div>
+</template>

src/pages/nav/1/item-1.vue

@@ -19,6 +19,7 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/nav/1/item-1': RouteRecordInfo<'/nav/1/item-1', '/nav/1/item-1', Record<never, never>, Record<never, never>>,
     '/nav/2': RouteRecordInfo<'/nav/2', '/nav/2', Record<never, never>, Record<never, never>>,
     '/nav/4': RouteRecordInfo<'/nav/4', '/nav/4', Record<never, never>, Record<never, never>>,
   }