Merge pull request #22 from terwer/dev

feat:#1 完善菜单与底部

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;
 }

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>

components/default/Header.vue

@@ -1,21 +1,25 @@
 <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>
         </div>
       </template>
     </el-page-header>
 
-    <Navbar/>
+    <header-time/>
+    <header-menu/>
+
+    <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 = () => {

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>

components/default/HeaderTime.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-row class="time">
+    <el-col :xs="24" :sm="24" :md="8">
+      <div>
+        现在是
+        <client-only>
+          {{ timeData.clientTime }}
+        </client-only>
+        {{ timeData.weekday }}
+      </div>
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="8">
+      <div>{{ timeData.popTime === "" ? "加载中..." : timeData.popTime }}</div>
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="8">
+      <div>{{ timeData.tradTime === "" ? "加载中..." : timeData.tradTime }}</div>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts" setup>
+import {ElCol, ElRow} from "element-plus";
+import {
+  getClientTime, getWeekByDay,
+  getPopTime,
+  getShengXiao,
+  getTradTime
+} from "~/lib/DateUtil";
+import {onMounted} from "vue";
+import {inBrowser} from "~/lib/util";
+
+const timeData = ref({
+  clientTime: "",
+  weekday: "",
+  popTime: "",
+  tradTime: "",
+  shengxiao: ""
+})
+
+const initData = () => {
+  timeData.value.clientTime = getClientTime()
+  timeData.value.weekday = getWeekByDay();
+  timeData.value.popTime = getPopTime();
+  timeData.value.tradTime = getTradTime();
+  timeData.value.shengxiao = getShengXiao();
+}
+
+initData();
+onMounted(() => {
+  if (inBrowser()) {
+    setInterval(function () {
+      timeData.value.clientTime = getClientTime();
+    }, 1000);
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: "HeaderTime"
+}
+</script>
+
+<style scoped lang="scss">
+.time{
+  margin-bottom: 10px;
+}
+</style>

components/default/HomePostList.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    Data begin
-    {{ data }}
-    Data end
+    {{ data.msg }}
 
     <h1>
       <NuxtLink to="/post">

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";