feat✨: refactor home page

src/components/Background/ImageBackground.vue

@@ -34,10 +34,6 @@ const handleUpdateImg = (type) => {
     bgUrl.value = `/images/bg${bgRandom}.jpg`
   } else if (type == 1) {
     bgUrl.value = 'https://api.dujin.org/bing/1920.php'
-  } else if (type == 2) {
-    bgUrl.value = 'https://api.aixiaowai.cn/gqapi/gqapi.php'
-  } else if (type == 3) {
-    bgUrl.value = 'https://api.aixiaowai.cn/api/api.php'
   }
 }
 

src/components/Panel/backup/External.vue

@@ -1,50 +1,45 @@
 <template>
   <div class="external">
-    <div class="external-item" v-for="(item, index) in externalList" :key="index">
-      <component :is="item.icon" />
+    <div
+      class="external-item"
+      v-for="(item, index) in externalList"
+      :key="index"
+      @click="handleLink(item.link)"
+    >
+      <CustomIcon :name="item.icon" size="36" />
       {{ item.title }}
     </div>
   </div>
 </template>
 
 <script setup>
-import IconGithub from '@/components/Icon/IconGithub.vue'
-import IconJuejin from '@/components/Icon/IconJuejin.vue'
-import IconBlog from '@/components/Icon/IconBlog.vue'
-import IconExternal from '@/components/Icon/IconExternal.vue'
-
+import CustomIcon from '@/components/Icon/CustomIcon.vue'
 const externalList = [
-  {
-    title: 'Juejin',
-    icon: IconJuejin,
-  },
-  {
-    title: 'Github',
-    icon: IconGithub,
-  },
-  {
-    title: 'Blog',
-    icon: IconBlog,
-  },
-  {
-    title: 'Pages',
-    icon: IconExternal,
-  },
+  { title: 'Github', icon: 'github', link: 'https://github.com/honelone' },
+  { title: 'Juejin', icon: 'juejin', link: 'https://juejin.cn/user/3236585798371246' },
+  { title: 'Blog', icon: 'blog', link: 'https://honelone.github.io/note/' },
+  { title: 'Pages', icon: 'external', link: 'https://honelone.github.io/pages/' },
 ]
+
+const handleLink = (link) => {
+  if (link) {
+    window.open(link)
+  }
+}
 </script>
 
 <style scoped lang="less">
 .external {
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
-  padding: 24px;
+  width: 100%;
+  z-index: 9;
   .external-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
-    font-size: 1.2rem;
+    font-size: 1rem;
     color: #fff;
     cursor: pointer;
     transition: all 0.3s;

src/components/Panel/backup/Hitokoto.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="hitokoto custom-card" @click="handleUpdate">
+  <div class="hitokoto" @click="handleUpdate">
     <span class="text">{{ currentData.text }}</span>
-    <span class="from">—— {{ currentData.from }}</span>
   </div>
 </template>
 
@@ -18,10 +17,8 @@ const getData = async () => {
     const response = await fetch('https://v1.hitokoto.cn')
     const { hitokoto, from } = await response.json()
     currentData.text = hitokoto
-    currentData.from = from
   } catch (error) {
     currentData.text = '这里应该显示一句话这里应该显示一句话'
-    currentData.from = '無名'
   } finally {
     setTimeout(() => {
       isFetching.value = false
@@ -40,7 +37,8 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .hitokoto {
-  font-size: 1.5rem;
+  max-width: 18.4rem;
+  margin: 24px 0;
   .text {
     word-break: break-all;
     text-overflow: ellipsis;
@@ -49,11 +47,5 @@ onMounted(() => {
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
   }
-
-  .from {
-    margin-top: 10px;
-    font-weight: bold;
-    align-self: flex-end;
-  }
 }
 </style>

src/components/Panel/backup/Profile.vue

@@ -1,24 +1,29 @@
 <template>
-  <div class="profile custom-card">
+  <div class="profile">
     <div class="profile-img">
       <div class="profile-img-inner">
-        <img src="@/assets/avatar.png" />
+        <img src="@/assets/avatar.png" draggable="false" />
       </div>
     </div>
-    <div class="profile-back">Composition</div>
+    <div class="profile-text colorful">Composition</div>
   </div>
 </template>
 
 <script setup></script>
 
 <style scoped lang="less">
 .profile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 12px;
   .profile-img {
     position: relative;
     display: flex;
     justify-content: center;
-    width: 12.5rem;
-    height: 12.5rem;
+    width: 8rem;
+    height: 8rem;
     border: 4px solid #f6ede4;
     border-radius: 50%;
     .profile-img-inner {
@@ -28,7 +33,7 @@
       height: 100%;
       border-radius: 50%;
       overflow: hidden;
-      transition: all 0.3s;
+      transition: all 0.5s;
       &:hover {
         bottom: -1px;
         height: 110%;
@@ -40,20 +45,27 @@
       img {
         width: 100%;
         // height: 100%;
-        transition: all 0.3s;
+        transition: all 0.5s;
+        -webkit-user-drag: none;
       }
     }
   }
-  .profile-back {
-    font-size: 2em;
+  .profile-text {
+    font-size: 1.3em;
     font-weight: bold;
     pointer-events: none;
     filter: opacity(0.7);
-    background: linear-gradient(45deg, #f5576c 10%, #fee140 100%);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    // background-size: 200% 200%;
+    text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
+
+    &.colorful {
+      text-shadow: none;
+      background: -webkit-linear-gradient(315deg, #f5576c 10%, #fee140 50%, #68e8d8 90%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-size: 400% 400%;
+      animation: gradientAnimation 20s -10s ease infinite;
+    }
   }
 }
 </style>

src/components/Panel/backup/Time.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="time custom-card">
+  <div class="time">
     <div class="date">
       <span>{{ currentTime.year }}&nbsp;年&nbsp;</span>
       <span>{{ currentTime.month }}&nbsp;月&nbsp;</span>
@@ -13,18 +13,13 @@
 </template>
 
 <script setup>
-import { ref, inject, onMounted, onBeforeUnmount } from 'vue'
-import { getCurrentTime } from '@/utils/getTime'
-
-const state = inject('state')
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { getCurrentTime } from '@/utils/time'
 
 // 当前时间
 const currentTime = ref({})
 const timeInterval = ref(null)
 
-// 播放器 id
-const playerHasId = import.meta.env.VITE_SONG_ID
-
 // 更新时间
 const updateTimeData = () => {
   currentTime.value = getCurrentTime()
@@ -42,16 +37,17 @@ onBeforeUnmount(() => {
 
 <style lang="less" scoped>
 .time {
-  font-size: 2rem;
-
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
   .date {
     text-overflow: ellipsis;
     overflow-x: hidden;
     white-space: nowrap;
   }
 
   .text {
-    font-size: 3rem;
     letter-spacing: 2px;
   }
 }