feat:#1 完善菜单与底部

terwer · Oct 9, 2022 · c63eab6 · c63eab6
1 parent 6034cdc
commit c63eab6
Show file tree

Hide file tree

Showing 14 changed files with 297 additions and 43 deletions.
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
@@ -15,6 +15,26 @@ a {
   color: var(--el-color-primary);
 }
 
+/**
+* 所有主题公共样式
+* 注意：每个主题都要引用这个样式
+*/
+body {
+  font-family: "LXGW WenKai","Wenquanyi Micro Hei","Wenquanyi Micro Hei Mono","Microsoft YaHei", "PT Sans", "-apple-system", "Liberation Mono", monospace, dejavu sans mono,Fira Code,Microsoft Yahei,Consolas,Courier New,monospace,Menlo,Monaco !important;
+  color: #666 !important;
+}
+body,
+* {
+  box-sizing: border-box;
+}
+body a {
+  text-decoration: none;
+  color: #00a4ff;
+}
+body a:hover {
+  color: orangered;
+}
+
 /*
 页面动画
 https://github.com/nuxt/framework/issues/3141#issuecomment-1212899838
@@ -45,4 +65,12 @@ https://github.com/nuxt/framework/issues/3141#issuecomment-1212899838
 .layout-leave-to {
   transform: translateY(-20px);
   opacity: 0;
+}
+
+/* layout */
+.jvue-body{
+  padding: 20px;
+}
+.el-menu-item > div{
+  margin-left: -20px !important;
 }
diff --git a/components/default/Footer.vue b/components/default/Footer.vue
@@ -1,10 +1,25 @@
 <template>
   <footer>
-    footer .
-    <NuxtLink href="/setting">Setting</NuxtLink>
+    <div class="h-6"/>
+
+    <!-- 运行信息 -->
+    <div class="page">博客已稳定运行： {{ getCountDown() }}</div>
+    <div class="page">
+      运行环境：Docker 20.10.17 、 Docker Compose v2.10.2 、Java 17.0.4、Maven 3.6.0、Spring Boot 2.7.3，
+      Vercel CLI 28.0.1、Node 16.17.0、Vue 3.2.40、Nuxt 3.0.0-rc.11
+    </div>
+    <!-- 备案信息 -->
+    <div class="page copyright">
+      &copy; 2011-{{ getNowYear() }} <a href="https://terwer.space" target="_blank">Terwer</a> All Rights Reseaved.
+    </div>
   </footer>
 </template>
 
+<script lang="ts" setup>
+import {getNowYear, getCountDown} from "~/lib/DateUtil";
+
+</script>
+
 <script lang="ts">
 
 export default {
@@ -14,5 +29,7 @@ export default {
 </script>
 
 <style scoped>
-
+.page {
+  padding: 5px 0;
+}
 </style>
diff --git a/components/default/Header.vue b/components/default/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <el-page-header :icon="ArrowLeft" title="返回" @click="onBack" v-if="$route.fullPath!='/'">
+    <el-page-header :icon="ArrowLeft" title="返回" @click="onBack" v-if="false">
       <template #content>
         <div class="flex items-center">
           <span class="text-large font-600 mr-3"> {{ $route.fullPath }} </span>
@@ -9,16 +9,17 @@
     </el-page-header>
 
     <header-time/>
+    <header-menu/>
 
-    <navbar/>
+    <div class="h-6" />
   </header>
 </template>
 
 <script lang="ts" setup>
-import Navbar from "~/components/default/Navbar.vue";
 import {ElPageHeader} from "element-plus";
 import {ArrowLeft} from '@element-plus/icons-vue'
 import HeaderTime from "~/components/default/HeaderTime.vue";
+import HeaderMenu from "~/components/default/HeaderMenu.vue";
 
 const router = useRouter();
 const onBack = () => {

diff --git a/components/default/HeaderMenu.vue b/components/default/HeaderMenu.vue
@@ -0,0 +1,118 @@
+<template>
+  <client-only>
+    <el-menu
+        :default-active="activeIndex"
+        class="el-menu-demo"
+        mode="horizontal"
+        @select="handleSelect"
+    >
+      <template v-for="item in menuData.menuList">
+        <el-sub-menu
+            v-if="item.children && item.children.length > 0"
+            :key="item.id"
+            :index="item.link"
+        >
+          <template #title>
+            <font-awesome-icon :icon="item.icon || ''"/>
+            {{ item.name }}
+          </template>
+          <el-menu-item
+              v-for="child in item.children"
+              :key="child.id"
+              :index="item.link + child.link"
+          >
+            <nuxt-link :to="item.link + child.link">
+              <font-awesome-icon :icon="child.icon || ''"/>
+              {{ child.name }}
+            </nuxt-link>
+          </el-menu-item>
+        </el-sub-menu>
+        <el-menu-item v-else :key="item.id" :index="item.link">
+          <div>
+            <nuxt-link :to="item.link">
+              <font-awesome-icon :icon="item.icon || ''"/>
+              {{ item.name }}
+            </nuxt-link>
+          </div>
+        </el-menu-item>
+      </template>
+    </el-menu>
+  </client-only>
+</template>
+
+<script lang="ts" setup>
+import {ElMenu, ElMenuItem, ElSubMenu} from "element-plus";
+import {ref} from 'vue'
+import logUtil from "~/lib/logUtil";
+
+const router = useRouter();
+
+const activeIndex = ref('/')
+const menuData = ref({
+  menuList: [
+    {
+      id: 1,
+      name: "首页",
+      link: "/",
+      icon: "fa-home"
+    },
+    {
+      id: 2,
+      name: "文章",
+      link: "/",
+      icon: "fa-book",
+      children: [
+        {
+          id: 21,
+          name: "后端开发",
+          link: "/backend",
+          icon: "fa-jar"
+        }
+      ]
+    },
+    {
+      id: 4,
+      name: "随笔",
+      link: "/essay",
+      icon: "fa-bolt"
+    },
+    {
+      id: 5,
+      name: "关于",
+      link: "/about",
+      icon: "fa-user"
+    },
+    {
+      id: 5,
+      name: "设置",
+      link: "/setting",
+      icon: "fa-gear"
+    }
+  ]
+})
+
+const handleSelect = (key: string, keyPath: string[]) => {
+  logUtil.logInfo("go=>", key)
+  router.push({path: key});
+
+}
+</script>
+
+<script lang="ts">
+
+export default {
+  name: "HeaderMenu",
+}
+</script>
+
+<style scoped>
+.el-menu-item a svg {
+  vertical-align: middle;
+  margin-top: -4px;
+}
+
+.el-sub-menu svg {
+  vertical-align: middle;
+  padding-right: 5px;
+}
+</style>
diff --git a/components/default/HeaderTime.vue b/components/default/HeaderTime.vue
@@ -62,9 +62,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.time {
-  line-height: 30px;
-  text-align: left;
-  padding: 10px;
+.time{
+  margin-bottom: 10px;
 }
 </style>
diff --git a/components/default/Navbar.vue b/components/default/Navbar.vue
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -6,6 +6,23 @@
   </div>
 </template>
 
+<script lang="ts" setup>
+useHead({
+  title: 'My App',
+  // or, instead:
+  // titleTemplate: (title) => `My App - ${title}`,
+  viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
+  charset: 'utf-8',
+  meta: [
+    {name: 'keywords', content: 'site,app,vercel'},
+    {name: 'description', content: 'My amazing site.'}
+  ],
+  bodyAttrs: {
+    class: 'jvue-body'
+  }
+})
+</script>
+
 <script lang="ts">
 import Header from "~/components/default/Header.vue";
 import Footer from "~/components/default/Footer.vue";

diff --git a/lib/DateUtil.ts b/lib/DateUtil.ts
@@ -10,6 +10,13 @@ import {calendar} from "./Calendar";
 // @ts-ignore
 const lunar: any = calendar.solar2lunar();
 
+/**
+ * 获取当前年
+ */
+const getNowYear = () => {
+    return lunar.lYear;
+}
+
 /**
  * 根据日期获取星期几
  * @returns {string} 星期
@@ -87,4 +94,31 @@ const getShengXiao = function () {
     return shengxiao;
 };
 
-export {getClientTime, getPopTime, getTradTime, getShengXiao, getWeekByDay};
+/**
+ * 获取倒计时
+ * @param y 年
+ * @param m 月
+ * @param d 日
+ */
+const getCountDown = (y?: number, m?: number, d?: number) => {
+    var today = new Date();
+
+    var BigDay = new Date("September 10, 2011");
+    var msPerDay = 24 * 60 * 60 * 1000;
+    var timeLeft = (today.getTime() - BigDay.getTime());
+    var e_daysLeft = timeLeft / msPerDay;
+    var daysLeft = Math.floor(e_daysLeft);
+    var yearsLeft = 0;
+    if (daysLeft > 365) {
+        yearsLeft = Math.floor(daysLeft / 365);
+        e_daysLeft = e_daysLeft % 365;
+        daysLeft = daysLeft % 365;
+    }
+
+    var e_hrsLeft = (e_daysLeft - daysLeft) * 24;
+    var hrsLeft = Math.floor(e_hrsLeft);
+    var minsLeft = Math.floor((e_hrsLeft - hrsLeft) * 60);
+    return yearsLeft + " 年 " + daysLeft + " 天 " + hrsLeft + " 小时 " + minsLeft + " 分钟";
+}
+
+export {getNowYear, getClientTime, getPopTime, getTradTime, getShengXiao, getWeekByDay, getCountDown};
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -26,7 +26,9 @@ export default defineNuxtConfig({
 
     // build
     build: {
-        transpile: ['element-plus/es'],
+        transpile: [
+            'element-plus/es',
+        ]
     },
 
     typescript: {

diff --git a/package.json b/package.json
@@ -22,6 +22,10 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
     "arraybuffer-xml-parser": "^0.6.0",
     "element-plus": "^2.2.15",
     "pinia": "^2.0.22",

diff --git a/pages/about.vue b/pages/about.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>作者邮箱：youweics@163.com</div>
+</template>
+
+<script>
+export default {
+  name: "about"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/index.vue b/pages/index.vue
@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 useHead({
-  title: 'My App',
+  title: 'My App Index',
   // or, instead:
   // titleTemplate: (title) => `My App - ${title}`,
   viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
@@ -14,7 +14,7 @@ useHead({
     {name: 'description', content: 'My amazing site.'}
   ],
   bodyAttrs: {
-    class: 'jvue-index-body'
+    class: 'jvue-body jvue-index-body'
   }
 })
 </script>