From 56f1eac7c86e4c6fd315c92b474f0814c9356eb7 Mon Sep 17 00:00:00 2001
From: PeterAlbus <wuhongdb@163.com>
Date: Sat, 26 Mar 2022 10:26:43 +0800
Subject: [PATCH] make some part of page as component

---
 components.d.ts                 |   2 +
 src/App.vue                     |   2 +-
 src/components/FriendLinks.vue  |  37 ++++++++++
 src/components/PersonalInfo.vue |  43 +++++++++++
 src/router/index.ts             |  30 ++++----
 src/views/About.vue             |  34 ++-------
 src/views/Blog.vue              |  28 ++------
 src/views/Home.vue              |  55 +++-----------
 src/views/Photo.vue             | 124 +++++++++++++-------------------
 src/views/Types.vue             |  33 ++-------
 src/views/UploadPhoto.vue       |   8 +--
 11 files changed, 177 insertions(+), 219 deletions(-)
 create mode 100644 src/components/FriendLinks.vue
 create mode 100644 src/components/PersonalInfo.vue

diff --git a/components.d.ts b/components.d.ts
index 1e49101..29113c4 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -22,6 +22,8 @@ declare module 'vue' {
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     Footer: typeof import('./src/components/Footer.vue')['default']
+    FriendLinks: typeof import('./src/components/FriendLinks.vue')['default']
+    PersonalInfo: typeof import('./src/components/PersonalInfo.vue')['default']
     TopNavBar: typeof import('./src/components/TopNavBar.vue')['default']
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 4cf924d..916c68b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -145,7 +145,7 @@ a {
 
 *::-webkit-scrollbar {
   /*滚动条整体样式*/
-  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
+  width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
   height: 1px;
 }
 *::-webkit-scrollbar-thumb {
diff --git a/src/components/FriendLinks.vue b/src/components/FriendLinks.vue
new file mode 100644
index 0000000..746ae3b
--- /dev/null
+++ b/src/components/FriendLinks.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="module">
+    <h2 class="title"><el-icon style="vertical-align: -10%"><link-icon /></el-icon>友情链接</h2>
+    <div class="content paragraph">
+      <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {Link as LinkIcon} from "@element-plus/icons-vue";
+import {onMounted, ref} from "vue";
+import axios from "axios";
+
+let friendLinkList=ref([
+  {
+    linkId: 1,
+    linkName: 'loading',
+    linkUrl: '#'
+  }
+])
+
+const getFriendLinkList=function () {
+  axios.get('friendLink/getFriendLinkList')
+      .then(res => {
+        friendLinkList.value = res.data;
+      })
+}
+
+onMounted(()=>{
+  getFriendLinkList()
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/PersonalInfo.vue b/src/components/PersonalInfo.vue
new file mode 100644
index 0000000..ca93b9d
--- /dev/null
+++ b/src/components/PersonalInfo.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="module">
+    <div class="content paragraph">
+      <el-avatar :size="50" src="/assets/2.png"></el-avatar>
+      <h4>PeterAlbus</h4>
+      <p v-if="info!==''">{{ info }}</p>
+      <el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
+        <a href="mailto:wuhongdb@163.com">
+          <i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
+        </a>
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="github" placement="top">
+        <a href="https://github.com/PeterAlbus" target="_blank">
+          <i class="fa fa-fw fa-github" style="font-size:20px"></i>
+        </a>
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="bilibili" placement="top">
+        <a href="https://space.bilibili.com/2003822" target="_blank">
+          <i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
+        </a>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {toRefs} from "vue";
+
+const props = defineProps({
+  info: {
+    type: String,
+    default() {
+      return ''
+    },
+  },
+});
+
+const {info} = toRefs(props);
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 419421c..c17dad6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,7 +17,7 @@ const routes: Array<RouteRecordRaw> = [
         meta:{
             title:'主页——PeterAlbus的博客',
             content:{
-                keywords:'PeterAlbus,Vue',
+                keywords:'PeterAlbus,Vue,个人博客',
                 description:'PeterAlbus的博客主页'
             }
         }
@@ -113,7 +113,7 @@ const routes: Array<RouteRecordRaw> = [
         meta:{
             title:'添加友情链接——PeterAlbus的博客',
             content:{
-                keywords:'PeterAlbus,Vue',
+                keywords:'PeterAlbus,Vue,个人博客',
                 description:'PeterAlbus的博客'
             }
         }
@@ -125,18 +125,18 @@ const router = createRouter({
     routes
 })
 
-// router.beforeEach((to, from, next)=>{
-//     if(to.meta.content) {
-//         // @ts-ignore
-//         document.querySelector('meta[name="keywords"]').setAttribute('content',to.meta.content.keywords)
-//         // @ts-ignore
-//         document.querySelector('meta[name="description"]').setAttribute('content',to.meta.content.description)
-//     }
-//     if(to.meta.title) {
-//         // @ts-ignore
-//         document.title = to.meta.title
-//     }
-//     next()
-// })
+router.beforeEach((to, from, next)=>{
+    if(to.meta.content) {
+        // @ts-ignore
+        document.querySelector('meta[name="keywords"]').setAttribute('content',to.meta.content.keywords)
+        // @ts-ignore
+        document.querySelector('meta[name="description"]').setAttribute('content',to.meta.content.description)
+    }
+    if(to.meta.title) {
+        // @ts-ignore
+        document.title = to.meta.title
+    }
+    next()
+})
 
 export default router
diff --git a/src/views/About.vue b/src/views/About.vue
index 810e2e0..db942b3 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -20,34 +20,8 @@
         </div>
       </el-col>
       <el-col :lg="{span:6}" :sm="9">
-        <div class="module">
-          <div class="content paragraph">
-            <el-avatar :size="50" src="/assets/2.png"></el-avatar>
-            <h4>PeterAlbus</h4>
-            <el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
-              <a href="mailto:wuhongdb@163.com">
-                <i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-            <el-tooltip class="item" effect="dark" content="github" placement="top">
-              <a href="https://github.com/PeterAlbus" target="_blank">
-                <i class="fa fa-fw fa-github" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-            <el-tooltip class="item" effect="dark" content="bilibili" placement="top">
-              <a href="https://space.bilibili.com/2003822" target="_blank">
-                <i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-          </div>
-        </div>
-
-        <div class="module">
-          <h2 class="title"><el-icon style="vertical-align: -10%"><link-icon /></el-icon>友情链接</h2>
-          <div class="content paragraph">
-            <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
-          </div>
-        </div>
+        <PersonalInfo></PersonalInfo>
+        <FriendLinks></FriendLinks>
       </el-col>
     </el-row>
   </div>
@@ -55,8 +29,10 @@
 
 <script>
 import {Link} from "@element-plus/icons-vue";
+import FriendLinks from "@/components/FriendLinks.vue"
+import PersonalInfo from "@/components/PersonalInfo.vue"
 export default {
-  components:{LinkIcon:Link},
+  components:{LinkIcon:Link,PersonalInfo,FriendLinks},
   name: "About",
   data(){
     return{
diff --git a/src/views/Blog.vue b/src/views/Blog.vue
index e9cfb5d..e2516df 100644
--- a/src/views/Blog.vue
+++ b/src/views/Blog.vue
@@ -18,29 +18,9 @@
         </div>
       </el-col>
       <el-col :lg="{span:6}" :sm="9">
-        <div class="module">
-          <div class="content paragraph">
-            <el-avatar :size="50" src="/assets/2.png"></el-avatar>
-            <h4>PeterAlbus</h4>
-            <el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
-              <a href="mailto:wuhongdb@163.com">
-                <i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-            <el-tooltip class="item" effect="dark" content="github" placement="top">
-              <a href="https://github.com/PeterAlbus" target="_blank">
-                <i class="fa fa-fw fa-github" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-            <el-tooltip class="item" effect="dark" content="bilibili" placement="top">
-              <a href="https://space.bilibili.com/2003822" target="_blank">
-                <i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-          </div>
-        </div>
+        <PersonalInfo></PersonalInfo>
         <div class="sticky-box">
-          <div class="module anchors" :class="{'hide-small-screen':hideCatalogue}">
+          <div class="module anchors" :class="{'hide-small-screen':hideCatalogue}" v-if="titleList.length!==0">
             <h2 class="title"><el-icon style="vertical-align: -10%"><notebook /></el-icon>目录</h2>
             <div class="content" style="padding: 10px">
               <el-scrollbar max-height="30vh">
@@ -74,7 +54,7 @@
     </el-row>
   </div>
   <div class="fixed-buttons hide-big-screen">
-    <el-button type="success" :icon="Notebook" circle @click="hideCatalogue=!hideCatalogue" />
+    <el-button type="success" :icon="Notebook" circle @click="hideCatalogue=!hideCatalogue" v-if="titleList.length!==0"/>
   </div>
 </template>
 
@@ -84,6 +64,7 @@ import {useRoute} from "vue-router";
 import {ArrowRight,Notebook,Share as shareIcon} from "@element-plus/icons-vue";
 import axios from "axios";
 import qs from "qs";
+import PersonalInfo from '@/components/PersonalInfo.vue'
 import type {vMdEditor} from "@kangc/v-md-editor"
 
 const route=useRoute()
@@ -229,6 +210,7 @@ onMounted(()=>{
 
 .anchor:hover{
   transform: translateX(+5px);
+  background-color: #f1f1f1;
 }
 
 .fixed-buttons{
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7873669..b7ab155 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -85,34 +85,8 @@
     </el-col>
     <el-col :lg="{span:6}" :sm="9">
       <div class="sticky-box">
-        <div class="module">
-          <div class="content paragraph">
-            <el-avatar :size="50" src="/assets/2.png"></el-avatar>
-            <h4>PeterAlbus</h4>
-            <el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
-              <a href="mailto:wuhongdb@163.com">
-                <i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-            <el-tooltip class="item" effect="dark" content="github" placement="top">
-              <a href="https://github.com/PeterAlbus" target="_blank">
-                <i class="fa fa-fw fa-github" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-            <el-tooltip class="item" effect="dark" content="bilibili" placement="top">
-              <a href="https://space.bilibili.com/2003822" target="_blank">
-                <i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-          </div>
-        </div>
-
-        <div class="module">
-          <h2 class="title"><el-icon style="vertical-align: -10%"><link-icon /></el-icon>友情链接</h2>
-          <div class="content paragraph">
-            <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
-          </div>
-        </div>
+        <PersonalInfo></PersonalInfo>
+        <FriendLinks></FriendLinks>
       </div>
     </el-col>
   </el-row>
@@ -120,10 +94,12 @@
 
 <script setup lang="ts">
 import {computed, onMounted, ref} from "vue";
-import {Avatar,StarFilled,Clock,Link as LinkIcon} from "@element-plus/icons-vue";
+import {Avatar,StarFilled,Clock} from "@element-plus/icons-vue";
 import { toClipboard } from '@soerenmartius/vue3-clipboard'
 import axios from "axios";
 import {ElMessage} from "element-plus";
+import FriendLinks from "@/components/FriendLinks.vue"
+import PersonalInfo from "@/components/PersonalInfo.vue"
 
 let blogList = ref([
   {
@@ -141,14 +117,6 @@ let blogList = ref([
   }
 ])
 
-let friendLinkList=ref([
-  {
-    linkId: 1,
-    linkName: 'loading',
-    linkUrl: '#'
-  }
-])
-
 let famousQuotes= ref({
   id: 0,
   uuid: "",
@@ -184,7 +152,10 @@ const copyQuotes=()=>{
 let backgrounds=[
     'https://file.peteralbus.com/assets/blog/static/background/background-lumine.jpg',
     'https://file.peteralbus.com/assets/blog/static/background/background-kazuha.jpg',
-    'https://file.peteralbus.com/assets/blog/static/background/background-blueeyes.jpg'
+    'https://file.peteralbus.com/assets/blog/static/background/background-blueeyes.jpg',
+    'https://file.peteralbus.com/assets/blog/static/background/background-girl1.jpg',
+    'https://file.peteralbus.com/assets/blog/static/background/background-mountain1.jpg',
+    'https://file.peteralbus.com/assets/blog/static/background/background-nogamenolife.jpg',
 ]
 
 let randomIndex=Math.floor(Math.random()*backgrounds.length)
@@ -196,16 +167,8 @@ const getBlogList=function () {
       })
 }
 
-const getFriendLinkList=function () {
-  axios.get('friendLink/getFriendLinkList')
-      .then(res => {
-        friendLinkList.value = res.data;
-      })
-}
-
 onMounted(()=>{
   getBlogList()
-  getFriendLinkList()
   getQuotes()
 })
 
diff --git a/src/views/Photo.vue b/src/views/Photo.vue
index d78a786..853ca51 100644
--- a/src/views/Photo.vue
+++ b/src/views/Photo.vue
@@ -10,81 +10,57 @@
   <div class="main-container">
     <el-row>
       <el-col :lg="{span:11,offset:3}" :sm="15">
-        <el-row>
-          <el-col :span="7">
-            <el-card class="photo" v-for="item in photoLeft" shadow="hover" :body-style="{ padding: '0px' }">
-              <a :href="item.imgSrc" target="_blank">
-                <el-image :src="item.imgThumb" style="width: 100%" fit="cover" lazy>
-                  <template #placeholder>
-                    <div class="image-slot">
-                      加载中<span class="dot">...</span>
-                    </div>
-                  </template>
-                </el-image>
-                <span class="paragraph">{{item.imgName}}</span>
-              </a>
-            </el-card>
-          </el-col>
-          <el-col :span="7" :offset="1">
-            <el-card class="photo" v-for="item in photoMid" shadow="hover" :body-style="{ padding: '0px' }">
-              <a :href="item.imgSrc" target="_blank">
-                <el-image :src="item.imgThumb" style="width: 100%" fit="cover" lazy>
-                  <template #placeholder>
-                    <div class="image-slot">
-                      加载中<span class="dot">...</span>
-                    </div>
-                  </template>
-                </el-image>
-                <span class="paragraph">{{item.imgName}}</span>
-              </a>
-            </el-card>
-          </el-col>
-          <el-col :span="7" :offset="1">
-            <el-card class="photo" v-for="item in photoRight" shadow="hover" :body-style="{ padding: '0px' }">
-              <a :href="item.imgSrc" target="_blank">
-                <el-image :src="item.imgThumb" style="width: 100%" fit="cover" lazy>
-                  <template #placeholder>
-                    <div class="image-slot">
-                      加载中<span class="dot">...</span>
-                    </div>
-                  </template>
-                </el-image>
-                <span class="paragraph">{{item.imgName}}</span>
-              </a>
-            </el-card>
-          </el-col>
-        </el-row>
-      </el-col>
-      <el-col :lg="{span:6}" :sm="9">
-        <div class="sticky-box">
-          <div class="module">
-            <div class="content paragraph">
-              <el-avatar :size="50" src="/assets/2.png"></el-avatar>
-              <h4>PeterAlbus</h4>
-              <p>若有侵权，深表歉意。可联系删除</p>
-              <el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
-                <a href="mailto:wuhongdb@163.com">
-                  <i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
+        <div style="margin: 0 auto;width: 90%;">
+          <el-row>
+            <el-col :span="7">
+              <el-card class="photo" v-for="item in photoLeft" shadow="hover" :body-style="{ padding: '0px' }">
+                <a :href="item.imgSrc" target="_blank">
+                  <el-image :src="item.imgThumb" style="width: 100%" fit="cover" lazy>
+                    <template #placeholder>
+                      <div class="image-slot">
+                        加载中<span class="dot">...</span>
+                      </div>
+                    </template>
+                  </el-image>
+                  <span class="paragraph">{{item.imgName}}</span>
                 </a>
-              </el-tooltip>
-              <el-tooltip class="item" effect="dark" content="github" placement="top">
-                <a href="https://github.com/PeterAlbus" target="_blank">
-                  <i class="fa fa-fw fa-github" style="font-size:20px"></i>
+              </el-card>
+            </el-col>
+            <el-col :span="7" :offset="1">
+              <el-card class="photo" v-for="item in photoMid" shadow="hover" :body-style="{ padding: '0px' }">
+                <a :href="item.imgSrc" target="_blank">
+                  <el-image :src="item.imgThumb" style="width: 100%" fit="cover" lazy>
+                    <template #placeholder>
+                      <div class="image-slot">
+                        加载中<span class="dot">...</span>
+                      </div>
+                    </template>
+                  </el-image>
+                  <span class="paragraph">{{item.imgName}}</span>
                 </a>
-              </el-tooltip>
-              <el-tooltip class="item" effect="dark" content="bilibili" placement="top">
-                <a href="https://space.bilibili.com/2003822" target="_blank">
-                  <i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
+              </el-card>
+            </el-col>
+            <el-col :span="7" :offset="1">
+              <el-card class="photo" v-for="item in photoRight" shadow="hover" :body-style="{ padding: '0px' }">
+                <a :href="item.imgSrc" target="_blank">
+                  <el-image :src="item.imgThumb" style="width: 100%" fit="cover" lazy>
+                    <template #placeholder>
+                      <div class="image-slot">
+                        加载中<span class="dot">...</span>
+                      </div>
+                    </template>
+                  </el-image>
+                  <span class="paragraph">{{item.imgName}}</span>
                 </a>
-              </el-tooltip>
-            </div>
-          </div>
-          <div class="module">
-            <h2 class="title"><el-icon style="vertical-align: -10%"><link-icon /></el-icon>友情链接</h2>
-            <div class="content paragraph">
-              <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
-            </div>
-          </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+      <el-col :lg="{span:6}" :sm="9">
+        <div class="sticky-box">
+          <PersonalInfo info="若有侵权，深表歉意。可联系删除"></PersonalInfo>
+          <FriendLinks></FriendLinks>
         </div>
       </el-col>
     </el-row>
@@ -93,8 +69,10 @@
 
 <script>
 import {Link} from "@element-plus/icons-vue";
+import FriendLinks from "@/components/FriendLinks.vue"
+import PersonalInfo from "@/components/PersonalInfo.vue"
 export default {
-  components:{LinkIcon:Link},
+  components:{LinkIcon:Link,FriendLinks,PersonalInfo},
   name: "Photo",
   data(){
     return {
diff --git a/src/views/Types.vue b/src/views/Types.vue
index bfe3768..78039a7 100644
--- a/src/views/Types.vue
+++ b/src/views/Types.vue
@@ -70,33 +70,8 @@
     </el-col>
     <el-col :lg="{span:6}" :sm="9">
       <div class="sticky-box">
-        <div class="module">
-          <div class="content paragraph">
-            <el-avatar :size="50" src="/assets/2.png"></el-avatar>
-            <h4>PeterAlbus</h4>
-            <el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
-              <a href="mailto:wuhongdb@163.com">
-                <i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-            <el-tooltip class="item" effect="dark" content="github" placement="top">
-              <a href="https://github.com/PeterAlbus" target="_blank">
-                <i class="fa fa-fw fa-github" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-            <el-tooltip class="item" effect="dark" content="bilibili" placement="top">
-              <a href="https://space.bilibili.com/2003822" target="_blank">
-                <i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-          </div>
-        </div>
-        <div class="module">
-          <h2 class="title"><el-icon style="vertical-align: -10%"><link-icon /></el-icon>友情链接</h2>
-          <div class="content paragraph">
-            <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
-          </div>
-        </div>
+        <PersonalInfo></PersonalInfo>
+        <FriendLinks></FriendLinks>
       </div>
     </el-col>
   </el-row>
@@ -104,8 +79,10 @@
 
 <script>
 import {Avatar,StarFilled,Clock,Link} from "@element-plus/icons-vue";
+import FriendLinks from "@/components/FriendLinks.vue"
+import PersonalInfo from "@/components/PersonalInfo.vue"
 export default {
-  components:{Avatar,StarFilled,Clock,LinkIcon:Link},
+  components:{Avatar,StarFilled,Clock,LinkIcon:Link,FriendLinks,PersonalInfo},
   name: "Types",
   data(){
     return {
diff --git a/src/views/UploadPhoto.vue b/src/views/UploadPhoto.vue
index fc8a0af..bb934f0 100644
--- a/src/views/UploadPhoto.vue
+++ b/src/views/UploadPhoto.vue
@@ -78,15 +78,15 @@ const onFileChange = (file: UploadFile, fileList: UploadFile[])=>{
 
 const beforeAvatarUpload = (file: UploadRawFile) => {
   const isIMG = file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/gif'
-  const isLt2M = file.size / 1024 / 1024 < 2
+  const isLt10M = file.size / 1024 / 1024 < 10
 
   if (!isIMG) {
     ElMessage.error('选择的文件不是图片！')
   }
-  if (!isLt2M) {
-    ElMessage.error('图片大小不能超过2M！')
+  if (!isLt10M) {
+    ElMessage.error('图片大小不能超过10M！')
   }
-  return isIMG && isLt2M
+  return isIMG && isLt10M
 }
 
 const upData=computed(()=>{