From 8f172d47a72aa8b498acbf48835e866354b8043e Mon Sep 17 00:00:00 2001
From: ice breaker <1324318532@qq.com>
Date: Thu, 19 Sep 2024 15:50:26 +0800
Subject: [PATCH] chore: remove some trash code

---
 blog-archived/client/assets/scss/global.scss  | 84 +++++++++++++----
 .../client/assets/sprite/svg/.gitkeep         |  0
 .../client/assets/sprite/svg/github-file.svg  |  4 -
 .../assets/sprite/svg/github-folder.svg       |  4 -
 .../client/components/global/SomImage.vue     | 17 ----
 .../components/home/ArticlePagedList/Body.vue | 43 ---------
 .../home/ArticlePagedList/BodySkeleton.vue    | 20 ----
 .../home/ArticlePagedList/Header.vue          | 29 ------
 .../ArticlePagedList/PaginationSkeleton.vue   |  5 -
 .../home/ArticlePagedList/index.vue           | 93 -------------------
 .../client/components/layout/CommonSlot.vue   |  2 +-
 .../components/layout/DarkModeToggle.vue      |  2 -
 .../client/components/layout/Header.vue       |  6 +-
 .../client/components/layout/NotFound.vue     |  0
 .../client/components/sitemap/index.vue       |  2 -
 .../client/components/theme/ThemeSwitch.vue   |  6 +-
 .../client/components/utils/LinkCard.vue      | 18 ++--
 17 files changed, 84 insertions(+), 251 deletions(-)
 delete mode 100644 blog-archived/client/assets/sprite/svg/.gitkeep
 delete mode 100644 blog-archived/client/assets/sprite/svg/github-file.svg
 delete mode 100644 blog-archived/client/assets/sprite/svg/github-folder.svg
 delete mode 100644 blog-archived/client/components/home/ArticlePagedList/Body.vue
 delete mode 100644 blog-archived/client/components/home/ArticlePagedList/BodySkeleton.vue
 delete mode 100644 blog-archived/client/components/home/ArticlePagedList/Header.vue
 delete mode 100644 blog-archived/client/components/home/ArticlePagedList/PaginationSkeleton.vue
 delete mode 100644 blog-archived/client/components/home/ArticlePagedList/index.vue
 delete mode 100644 blog-archived/client/components/layout/NotFound.vue

diff --git a/blog-archived/client/assets/scss/global.scss b/blog-archived/client/assets/scss/global.scss
index 45d6895b..16eae6d1 100644
--- a/blog-archived/client/assets/scss/global.scss
+++ b/blog-archived/client/assets/scss/global.scss
@@ -1,10 +1,12 @@
 @use './constants.scss' as C;
 @use './util.scss' as Util;
 @use './theme/light.scss' as Light;
+
 // @use '../font/index.scss' as *;
-@import '../font/index.scss';
+@import '../font/index';
+
 // @import './theme.scss';
-@import './prose.scss';
+@import './prose';
 
 :root {
   @each $var, $color in C.$root-vars {
@@ -16,16 +18,29 @@
   @each $var, $color in Light.$light-vars {
     #{$var}: Util.getRgbaString($color);
   }
+
+  .hover-scroll-bar {
+    &:hover {
+      &::-webkit-scrollbar-thumb {
+        @apply bg-border-muted;
+      }
+    }
+
+    // 滚动条上的滚动滑块
+  }
 }
+
 body,
 html {
   transition: background-color 0.3s ease;
 }
+
 @mixin better-scrollbar {
   // 滚动条高宽及背景
   &::-webkit-scrollbar {
     width: 12px;
   }
+
   // 滚动条上的滚动滑块
   &::-webkit-scrollbar-thumb {
     @apply bg-header-bg;
@@ -37,35 +52,72 @@ html {
   // }
 }
 
-.better-scroll-bar {
-  @include better-scrollbar;
-}
-
 .hover-scroll-bar {
   &::-webkit-scrollbar {
     width: 12px;
   }
+
   &::-webkit-scrollbar-thumb {
     @apply transition-colors;
   }
+
   &:hover {
     &::-webkit-scrollbar-thumb {
       @apply bg-header-bg;
     }
   }
+
   // 滚动条上的滚动滑块
 }
 
-[data-color-mode='light'] {
-  .hover-scroll-bar {
-    &:hover {
-      &::-webkit-scrollbar-thumb {
-        @apply bg-border-muted;
-      }
-    }
-    // 滚动条上的滚动滑块
-  }
+/* 隐藏 Chrome、Edge、Safari 浏览器的滚动条 */
+body::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
+}
+
+/* 自定义滚动条的轨道 */
+body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* 自定义滚动条的滑块 */
+body::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 10px;
+  transition:
+    background-color 0.3s,
+    width 0.3s;
+}
+
+/* 滚动的时候显示滚动条 */
+body:active::-webkit-scrollbar-thumb {
+  background-color: rgb(0 0 0 / 40%);
+}
+
+/* 鼠标悬停时，滚动条变宽和颜色加深 */
+body::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(0 0 0 / 80%);
+  width: 8px;
 }
+
+/* 滚动条不占用空间 (Chrome, Edge, Safari) */
 html {
-  @include better-scrollbar;
+  scrollbar-gutter: stable;
+}
+
+/* 针对 Firefox 的放大效果 */
+@media (hover: hover) {
+  body {
+    scrollbar-color: transparent transparent;
+  }
+
+  body:active {
+    scrollbar-color: rgb(0 0 0 / 40%) transparent;
+  }
+
+  body:hover {
+    scrollbar-color: rgb(0 0 0 / 80%) transparent;
+    scrollbar-width: thin; /* 确保宽度变化的效果 */
+  }
 }
diff --git a/blog-archived/client/assets/sprite/svg/.gitkeep b/blog-archived/client/assets/sprite/svg/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/blog-archived/client/assets/sprite/svg/github-file.svg b/blog-archived/client/assets/sprite/svg/github-file.svg
deleted file mode 100644
index 469594d3..00000000
--- a/blog-archived/client/assets/sprite/svg/github-file.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg aria-label="File"
-  xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" version="1.1" width="16" role="img">
-  <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
-</svg>
diff --git a/blog-archived/client/assets/sprite/svg/github-folder.svg b/blog-archived/client/assets/sprite/svg/github-folder.svg
deleted file mode 100644
index af20cb82..00000000
--- a/blog-archived/client/assets/sprite/svg/github-folder.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg aria-label="Directory"
-  xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" version="1.1" width="16" role="img">
-  <path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z"></path>
-</svg>
diff --git a/blog-archived/client/components/global/SomImage.vue b/blog-archived/client/components/global/SomImage.vue
index 82933a2d..0a5fed74 100644
--- a/blog-archived/client/components/global/SomImage.vue
+++ b/blog-archived/client/components/global/SomImage.vue
@@ -1,20 +1,6 @@
 <script>
 import { mapActions } from 'vuex'
-import { isCloudbaseUrl } from '@/utils/validate'
 
-const watch = {}
-if (process.client) {
-  watch.src = {
-    async handler(src) {
-      let tSrc = src
-      if (isCloudbaseUrl(tSrc)) {
-        tSrc = await this.getSingleUrl(tSrc)
-      }
-      this.innerSrc = tSrc
-    },
-    immediate: true,
-  }
-}
 export default {
   name: 'SomImage',
   props: {
@@ -59,7 +45,6 @@ export default {
       return obj
     },
   },
-  watch,
   methods: {
     ...mapActions('user', ['getSingleUrl']),
   },
@@ -83,5 +68,3 @@ export default {
     </template>
   </el-image>
 </template>
-
-<style></style>
diff --git a/blog-archived/client/components/home/ArticlePagedList/Body.vue b/blog-archived/client/components/home/ArticlePagedList/Body.vue
deleted file mode 100644
index 233ebcce..00000000
--- a/blog-archived/client/components/home/ArticlePagedList/Body.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script>
-export default {
-  props: {
-    articles: {
-      type: [Array],
-      default: () => [],
-    },
-  },
-}
-</script>
-
-<template>
-  <div>
-    <div
-      v-for="article in articles"
-      :key="article.path"
-      class="flex text-sm px-4 py-2 border-t border-solid border-gray-300 hover:bg-gray-50"
-    >
-      <div class="w-1/6 flex-auto flex items-center">
-        <div class="mr-3">
-          <FontAwesomeIcon :icon="['far', 'file']" style="color: #6a737d" />
-        </div>
-        <nuxt-link
-          class="truncate text-gray-800 hover:underline hover:text-blue-600"
-          :to="article.path"
-        >
-          {{ article.title }}
-        </nuxt-link>
-      </div>
-
-      <div class="w-5/12 hidden flex-auto text-gray-600 sm:block">
-        <span
-          class="cursor-pointer hover:underline hover:text-blue-600"
-          @click.stop="$router.push(article.path)"
-        >
-          {{ article.description }}</span>
-      </div>
-      <div style="flex-basis: 100px" class="text-right text-gray-600">
-        {{ article.date | timespanFilter }}
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/blog-archived/client/components/home/ArticlePagedList/BodySkeleton.vue b/blog-archived/client/components/home/ArticlePagedList/BodySkeleton.vue
deleted file mode 100644
index 68173637..00000000
--- a/blog-archived/client/components/home/ArticlePagedList/BodySkeleton.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div>
-    <div
-      v-for="i in 10"
-      :key="i"
-      class="flex text-sm px-4 py-3 border-t border-solid border-gray-300"
-    >
-      <div class="w-1/6 flex-auto">
-        <div class="w-1/2 bg-gray-200 h-3 animate-pulse" />
-      </div>
-      <div class="w-5/12 flex-auto hidden sm:block">
-        <div class="w-1/2 bg-gray-200 h-3 animate-pulse" />
-      </div>
-      <div
-        class="bg-gray-200 h-3 animate-pulse"
-        style="flex-basis: 100px"
-      />
-    </div>
-  </div>
-</template>
diff --git a/blog-archived/client/components/home/ArticlePagedList/Header.vue b/blog-archived/client/components/home/ArticlePagedList/Header.vue
deleted file mode 100644
index ae45e0a6..00000000
--- a/blog-archived/client/components/home/ArticlePagedList/Header.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-export default {
-  name: 'ArticlePagedListHeader',
-  props: {
-    total: {
-      type: [Number, String],
-      default: 0,
-    },
-  },
-}
-</script>
-
-<template>
-  <div class="bg-[rgb(241,248,255)] flex justify-between px-4 py-3 text-sm">
-    <div class="flex text-gray-900 items-center">
-      icebreaker的随笔
-    </div>
-    <div class="flex text-gray-900 items-baseline">
-      <div class="text-xs mr-2" />
-      <div class="mr-2" />
-      <div>
-        <strong>{{ total }}</strong>
-        <span>commits</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style></style>
diff --git a/blog-archived/client/components/home/ArticlePagedList/PaginationSkeleton.vue b/blog-archived/client/components/home/ArticlePagedList/PaginationSkeleton.vue
deleted file mode 100644
index 8d0cd341..00000000
--- a/blog-archived/client/components/home/ArticlePagedList/PaginationSkeleton.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="flex justify-center py-2">
-    <div class="w-1/4 bg-gray-200 h-4 animate-pulse" />
-  </div>
-</template>
diff --git a/blog-archived/client/components/home/ArticlePagedList/index.vue b/blog-archived/client/components/home/ArticlePagedList/index.vue
deleted file mode 100644
index 3229641a..00000000
--- a/blog-archived/client/components/home/ArticlePagedList/index.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script>
-// #f6f8fa
-import PaginationSkeleton from './PaginationSkeleton'
-import TableHeader from './Header'
-import BodySkeleton from './BodySkeleton'
-import TableBody from './Body'
-import { getPageList } from '@/api/article'
-
-export default {
-  name: 'ArticlePagedList',
-  components: {
-    TableHeader,
-    PaginationSkeleton,
-    BodySkeleton,
-    TableBody,
-  },
-  // props: {
-  //   init: {
-  //     type: [Object],
-  //     default: () => {},
-  //   },
-  // },
-  data() {
-    return {
-      listLoading: true,
-      articles: [],
-      query: {
-        page: 1,
-        perPage: 10,
-      },
-      total: 0,
-      paginationSkeletonVisible: true,
-    }
-  },
-  watch: {
-    'query.page': function () {
-      this.getList()
-    },
-  },
-  async mounted() {
-    await this.getList()
-    this.paginationSkeletonVisible = false
-  },
-  // created() {
-  //   const { query, total, articles } = this.init
-  //   Object.assign(this.$data, { query, total, articles })
-  // },
-  methods: {
-    async getList() {
-      try {
-        this.listLoading = true
-        const [total, articles] = await getPageList(this.$content, this.query)
-        this.total = total
-        this.articles = articles
-      }
-      catch (error) {
-        console.debug(error)
-      }
-      finally {
-        this.listLoading = false
-      }
-    },
-  },
-}
-</script>
-
-<template>
-  <div>
-    <div class="border border-gray-300 overflow-auto rounded-md">
-      <TableHeader :total="total" />
-      <BodySkeleton v-show="listLoading" />
-      <TableBody v-show="!listLoading" :articles="articles" />
-    </div>
-    <PaginationSkeleton
-      :class="paginationSkeletonVisible ? 'block' : 'hidden'"
-    />
-    <div
-      :class="paginationSkeletonVisible ? 'hidden' : 'flex'"
-      class="justify-center"
-    >
-      <el-pagination
-        v-model:page-size="query.perPage"
-        v-model:current-page="query.page"
-        hide-on-single-page
-        layout="prev, pager, next"
-        :total="total"
-        :disabled="listLoading"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped></style>
diff --git a/blog-archived/client/components/layout/CommonSlot.vue b/blog-archived/client/components/layout/CommonSlot.vue
index 1e97bd80..bd471bf1 100644
--- a/blog-archived/client/components/layout/CommonSlot.vue
+++ b/blog-archived/client/components/layout/CommonSlot.vue
@@ -1,6 +1,6 @@
 <script>
-import AppHeader from '@/components/layout/Header'
 import AppFooter from '@/components/layout/Footer'
+import AppHeader from '@/components/layout/Header'
 
 export default {
   name: 'CommonSlot',
diff --git a/blog-archived/client/components/layout/DarkModeToggle.vue b/blog-archived/client/components/layout/DarkModeToggle.vue
index d018548b..fe7830bc 100644
--- a/blog-archived/client/components/layout/DarkModeToggle.vue
+++ b/blog-archived/client/components/layout/DarkModeToggle.vue
@@ -63,5 +63,3 @@ export default {
     />
   </div>
 </template>
-
-<style></style>
diff --git a/blog-archived/client/components/layout/Header.vue b/blog-archived/client/components/layout/Header.vue
index f80b701d..22ae0765 100644
--- a/blog-archived/client/components/layout/Header.vue
+++ b/blog-archived/client/components/layout/Header.vue
@@ -139,15 +139,19 @@ export default {
 <style lang="scss" scoped>
 .site-header {
   height: 64px;
+
   @apply sticky top-0 z-50 flex items-center bg-header-bg px-4 py-4 text-sm text-header-text/70 md:px-6 lg:px-8;
+
   border-bottom: 1px;
   border-style: solid;
   border-color: theme('colors.border-muted');
+
   @apply dark:border-transparent;
+
   .header-middle-area {
     .nav {
       .link {
-        //https://tailwindcss.com/docs/upgrading-to-v2#update-renamed-utility-classes
+        // https://tailwindcss.com/docs/upgrading-to-v2#update-renamed-utility-classes
         @apply mr-4 cursor-pointer whitespace-nowrap font-semibold text-header-text;
 
         &:hover,
diff --git a/blog-archived/client/components/layout/NotFound.vue b/blog-archived/client/components/layout/NotFound.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/blog-archived/client/components/sitemap/index.vue b/blog-archived/client/components/sitemap/index.vue
index c8b5dc73..f9a700d1 100644
--- a/blog-archived/client/components/sitemap/index.vue
+++ b/blog-archived/client/components/sitemap/index.vue
@@ -34,5 +34,3 @@ export default {
     </slot>
   </div>
 </template>
-
-<style></style>
diff --git a/blog-archived/client/components/theme/ThemeSwitch.vue b/blog-archived/client/components/theme/ThemeSwitch.vue
index 9aa04837..4dc57b98 100644
--- a/blog-archived/client/components/theme/ThemeSwitch.vue
+++ b/blog-archived/client/components/theme/ThemeSwitch.vue
@@ -41,7 +41,7 @@ export default {
       if (
         localStorage.theme === 'dark'
         || (!('theme' in localStorage)
-        && window.matchMedia('(prefers-color-scheme: dark)').matches)
+          && window.matchMedia('(prefers-color-scheme: dark)').matches)
       ) {
         document.documentElement.classList.add('dark')
       }
@@ -55,9 +55,7 @@ export default {
 
 <template>
   <span class="flex items-center">
-    <span class="text-sm mr-4 font-semibold">Dark Mode</span>
+    <span class="mr-4 text-sm font-semibold">Dark Mode</span>
     <el-switch v-model="theme" />
   </span>
 </template>
-
-<style></style>
diff --git a/blog-archived/client/components/utils/LinkCard.vue b/blog-archived/client/components/utils/LinkCard.vue
index 92a4842f..50799e7c 100644
--- a/blog-archived/client/components/utils/LinkCard.vue
+++ b/blog-archived/client/components/utils/LinkCard.vue
@@ -25,30 +25,28 @@ export default {
 <template>
   <OutSideLink
     v-if="outSide"
-    class="rounded-md border border-border-default"
+    class="border-border-default rounded-md border"
     raw
     :href="to"
   >
-    <div class="px-4 py-4 shadow">
-      <div class="mb-3 text-2xl font-thin text-accent-fg hover:underline">
+    <div class="p-4 shadow">
+      <div class="text-accent-fg mb-3 text-2xl font-thin hover:underline">
         {{ title }}
       </div>
-      <div class="text-sm text-fg-muted">
+      <div class="text-fg-muted text-sm">
         {{ desc }}
       </div>
     </div>
   </OutSideLink>
 
-  <nuxt-link v-else :to="to" class="rounded-md border border-border-default">
-    <div class="px-4 py-4 shadow">
-      <div class="mb-3 text-2xl font-thin text-accent-fg hover:underline">
+  <nuxt-link v-else :to="to" class="border-border-default rounded-md border">
+    <div class="p-4 shadow">
+      <div class="text-accent-fg mb-3 text-2xl font-thin hover:underline">
         {{ title }}
       </div>
-      <div class="text-sm text-fg-muted">
+      <div class="text-fg-muted text-sm">
         {{ desc }}
       </div>
     </div>
   </nuxt-link>
 </template>
-
-<style lang="scss" scoped></style>