From c2624624e48bcb1c95d9bfeae99788eaaa8304ae Mon Sep 17 00:00:00 2001
From: hacxy <hacxy.js@outlook.com>
Date: Tue, 24 Dec 2024 23:26:18 +0800
Subject: [PATCH] fix: mobile end style anomaly

---
 packages/demo/docs/.vitepress/config.ts       |  6 ++
 packages/demo/docs/src/demo.md                | 23 -----
 packages/demo/docs/src/demo2.md               |  2 +
 packages/demo/docs/src/demo3.md               |  2 +
 packages/demo/docs/src/tags.md                |  3 +
 packages/theme/index.ts                       |  2 +
 .../theme/src/components/ArticlesList.vue     | 43 ++-------
 packages/theme/src/components/BlogPage.vue    |  6 +-
 packages/theme/src/components/Layout.vue      |  2 -
 packages/theme/src/components/Tags.vue        | 96 +++++++++++++++++++
 packages/theme/src/constants/index.ts         |  1 +
 packages/theme/src/datas/articles.data.ts     |  5 +-
 packages/theme/src/hooks/useArticleData.ts    |  2 +-
 packages/theme/src/styles/index.scss          | 25 +++++
 packages/theme/src/utils/client/tags.ts       | 23 +++++
 15 files changed, 174 insertions(+), 67 deletions(-)
 delete mode 100644 packages/demo/docs/src/demo.md
 create mode 100644 packages/demo/docs/src/tags.md
 create mode 100644 packages/theme/src/components/Tags.vue
 create mode 100644 packages/theme/src/constants/index.ts
 create mode 100644 packages/theme/src/utils/client/tags.ts

diff --git a/packages/demo/docs/.vitepress/config.ts b/packages/demo/docs/.vitepress/config.ts
index 702aebe..c666051 100644
--- a/packages/demo/docs/.vitepress/config.ts
+++ b/packages/demo/docs/.vitepress/config.ts
@@ -7,6 +7,12 @@ export default defineConfig({
   extends: defineThemeConfig(),
   lastUpdated: true,
   themeConfig: {
+    nav: [
+      {
+        text: 'Tags',
+        link: '/src/tags'
+      }
+    ],
     // logo: "logo.png",
     // 展示 2,3 级标题在目录中
     outline: {
diff --git a/packages/demo/docs/src/demo.md b/packages/demo/docs/src/demo.md
deleted file mode 100644
index e8d00b3..0000000
--- a/packages/demo/docs/src/demo.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-date: 2024-12-18
-category: 服务器
----
-
-# demo1
-
-可以在 Markdown 文件、主题中的 \*.vue 组件、样式和普通的 .css 文件中引用静态资源，可以使用绝对路径 (基于项目根目录) 或者相对路径 (基于文件系统)。后者类似于 Vite、Vue CLI 或者 webpack 的 file-loader 的行为。
-
-常见的图像，媒体和字体文件会被自动检测并视作资源。
-
-通过链接引用的文件不会视作资源
-
-在 Markdown 内，通过链接引用的 PDF 或者其他文档不会被自动视作资源。要使这些文件可用，你必须手动将其放在项目的 public 目录内。
-
-所有引用的资源，包括那些使用绝对路径的，都会在生产构建过程中被复制到输出目录，并使用哈希文件名。从未使用过的资源将不会被复制。小于 4kb 的图像资源将会采用 base64 内联——这可以通过 vite 配置选项进行配置。
-
-所有静态路径引用，包括绝对路径，都应基于你的工作目录的结构。
-
-
-```ts twoslash
-console.log('hello')
-```
\ No newline at end of file
diff --git a/packages/demo/docs/src/demo2.md b/packages/demo/docs/src/demo2.md
index 611565d..23851ad 100644
--- a/packages/demo/docs/src/demo2.md
+++ b/packages/demo/docs/src/demo2.md
@@ -1,5 +1,7 @@
 ---
 category: 服务器
+tags:
+  - demo
 ---
 
 # demo
diff --git a/packages/demo/docs/src/demo3.md b/packages/demo/docs/src/demo3.md
index 50d7e66..9f125f0 100644
--- a/packages/demo/docs/src/demo3.md
+++ b/packages/demo/docs/src/demo3.md
@@ -1,5 +1,7 @@
 ---
 category: 服务器
+tags:
+  - demo
 ---
 # demo
 
diff --git a/packages/demo/docs/src/tags.md b/packages/demo/docs/src/tags.md
new file mode 100644
index 0000000..bce87b2
--- /dev/null
+++ b/packages/demo/docs/src/tags.md
@@ -0,0 +1,3 @@
+---
+layout: tags
+---
diff --git a/packages/theme/index.ts b/packages/theme/index.ts
index 7989839..ac6fe54 100644
--- a/packages/theme/index.ts
+++ b/packages/theme/index.ts
@@ -5,6 +5,7 @@ import { MotionPlugin } from '@vueuse/motion';
 import DefaultTheme from 'vitepress/theme';
 import BlogPage from './src/components/BlogPage.vue';
 import Layout from './src/components/Layout.vue';
+import Tags from './src/components/Tags.vue';
 import NProgress from './src/utils/client/nprogress';
 import '@shikijs/vitepress-twoslash/style.css';
 import './src/styles/index.scss';
@@ -31,6 +32,7 @@ const MildTheme: Theme = {
     app.use(MotionPlugin);
     app.use(TwoslashFloatingVue);
     app.component('blog', BlogPage);
+    app.component('tags', Tags);
   }
 };
 
diff --git a/packages/theme/src/components/ArticlesList.vue b/packages/theme/src/components/ArticlesList.vue
index 60b737c..74295fd 100644
--- a/packages/theme/src/components/ArticlesList.vue
+++ b/packages/theme/src/components/ArticlesList.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import type { ArticlesData } from '../datas/articles.data.js';
 import { useUrlSearchParams } from '@vueuse/core';
-import { NPagination } from 'naive-ui';
+import { NEllipsis, NPagination } from 'naive-ui';
 import { useRouter } from 'vitepress';
 import { computed, ref, watch, watchEffect } from 'vue';
 import { useArticleData } from '../hooks/useArticleData.js';
+import { handleTagsData } from '../utils/client/tags.js';
 import IconCalendar from './icons/IconCalendar.vue';
 import IconClock from './icons/IconClock.vue';
 import IconWords from './icons/IconWords.vue';
@@ -14,7 +15,7 @@ const params = useUrlSearchParams();
 const currentPage = ref(Number(params.pageNum) || 1);
 const pageSize = ref(4);
 const { articleData } = useArticleData();
-
+handleTagsData(articleData.value);
 function paginate(data: ArticlesData[], pageSize: number, currentPage: number) {
   // 参数校验，如果数据不是数组或者没有数据，直接返回空数组
   if (!Array.isArray(data) || data?.length === 0) {
@@ -41,11 +42,6 @@ const posts = computed(() => {
   return paginate(articleData.value, pageSize.value, currentPage.value);
 });
 
-// function handleChangePage(i: number) {
-//   currentPage.value = i;
-//   params.pageNum = String(i);
-//   window.scrollTo({ top: 0, behavior: 'auto' });
-// }
 function handleClick(path: string) {
   router.go(path);
 }
@@ -63,7 +59,7 @@ watch(currentPage, () => {
 </script>
 
 <template>
-  <div class="post">
+  <div class="VSContent post">
     <div
       v-for="(article, index) in posts"
       :key="article.path + article.title"
@@ -86,16 +82,9 @@ watch(currentPage, () => {
           <a> {{ article?.title }}</a>
         </div>
       </div>
-      <div
-        class="describe"
-        :ellipsis="{
-          rows: 1,
-          showTooltip: false,
-        }"
-      >
+      <n-ellipsis class="describe" :tooltip="{ show: false }">
         {{ article.description }}
-        <!-- <p class="describe" v-html="article.description" /> -->
-      </div>
+      </n-ellipsis>
       <div class="post-info">
         <div class="text">
           <icon-calendar />
@@ -144,7 +133,8 @@ watch(currentPage, () => {
 .post {
   padding-bottom: 75px;
   position: relative;
-  min-height: 665px;
+  min-height: 700px;
+  max-width: 800px;
 
   .post-item {
     padding: 14px 14px;
@@ -192,18 +182,6 @@ watch(currentPage, () => {
   }
 }
 
-@media (min-width: 601px) and (max-width: 1024) {
-  .post {
-    width: 600px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .post {
-    width: 800px;
-  }
-}
-
 .post-item a,
 .pagination a {
   color: var(--vp-c-text-1);
@@ -221,11 +199,8 @@ watch(currentPage, () => {
   font-weight: 500;
   margin: 0.1rem 0;
 }
-.describe {
+:deep(.n-ellipsis) {
   font-size: 0.9375rem;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  line-clamp: 3;
   overflow: hidden;
   color: var(--vp-c-text-2);
   margin: 10px 0;
diff --git a/packages/theme/src/components/BlogPage.vue b/packages/theme/src/components/BlogPage.vue
index 657573a..23d091a 100644
--- a/packages/theme/src/components/BlogPage.vue
+++ b/packages/theme/src/components/BlogPage.vue
@@ -3,17 +3,13 @@ import ArticlesList from './ArticlesList.vue';
 </script>
 
 <template>
-  <div class="articles-list-wrapper">
+  <div class="VSPage">
     <articles-list />
   </div>
 </template>
 
 <style lang="scss" scoped>
 .articles-list-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
   @media (max-width: 600px) {
     padding: 0 32px 15px;
   }
diff --git a/packages/theme/src/components/Layout.vue b/packages/theme/src/components/Layout.vue
index 569d828..6fc8c38 100644
--- a/packages/theme/src/components/Layout.vue
+++ b/packages/theme/src/components/Layout.vue
@@ -1,5 +1,3 @@
-<!-- .vitepress/theme/Layout.vue -->
-
 <script setup lang="ts">
 import { useData } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
diff --git a/packages/theme/src/components/Tags.vue b/packages/theme/src/components/Tags.vue
new file mode 100644
index 0000000..ee6f5b9
--- /dev/null
+++ b/packages/theme/src/components/Tags.vue
@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import { useUrlSearchParams } from '@vueuse/core';
+import { computed, ref } from 'vue';
+import { useArticleData } from '../hooks/useArticleData';
+import { handleTagsData } from '../utils/client/tags';
+
+const { articleData } = useArticleData();
+const tagsData = computed(() => {
+  return handleTagsData(articleData.value);
+});
+const params = useUrlSearchParams();
+const selectTag = ref(params.tag);
+
+function toggleTag(tag: string) {
+  selectTag.value = tag;
+  params.tag = tag;
+}
+</script>
+
+<template>
+  <div class="VSPage">
+    <div class="VSContent">
+      <div class="tags-wrapper">
+        <span
+          v-for="(tag) in tagsData"
+          :key="tag.name"
+          class="tag"
+          @click="() => toggleTag(tag.name)"
+        >
+          {{ tag.name }} <strong>({{ tag.count }})</strong>
+        </span>
+      </div>
+      <div class="tag-header">
+        {{ selectTag }}
+      </div>
+    </div>
+  </div>
+  <!-- <a
+    v-for="(article, index) in selectTag ? data[selectTag] : []"
+    :key="index"
+    :href="withBase(article.path)"
+    class="posts"
+  >
+    <div class="post-container">
+      <div class="post-dot" />
+      {{ article.title }}
+    </div>
+    <div class="date">{{ article.date }}</div>
+  </a> -->
+</template>
+
+<style scoped lang="scss">
+.tags-wrapper {
+  margin-top: 14px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.tag {
+  display: inline-block;
+  padding: 4px 16px;
+  margin: 6px 8px;
+  font-size: 0.875rem;
+  line-height: 25px;
+  background-color: var(--vp-c-bg-alt);
+  transition: 0.4s;
+  border-radius: 2px;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+  border: 1px #00000000 solid;
+}
+.tag:hover {
+  border: 1px var(--vp-c-text-3) solid;
+}
+
+.tag strong {
+  color: var(--vp-c-text-2);
+}
+
+.tag-header {
+  font-size: 1.5rem;
+  font-weight: 500;
+  margin: 1rem 0;
+  text-align: left;
+}
+
+@media screen and (max-width: 768px) {
+  .tag-header {
+    font-size: 1.5rem;
+  }
+
+  .date {
+    font-size: 0.75rem;
+  }
+}
+</style>
diff --git a/packages/theme/src/constants/index.ts b/packages/theme/src/constants/index.ts
new file mode 100644
index 0000000..cec42a6
--- /dev/null
+++ b/packages/theme/src/constants/index.ts
@@ -0,0 +1 @@
+export const NOT_ARTICLE_LAYOUTS = ['blog', 'tags', 'categorys', 'projects', 'home', 'page'];
diff --git a/packages/theme/src/datas/articles.data.ts b/packages/theme/src/datas/articles.data.ts
index d25f80d..66eacf6 100644
--- a/packages/theme/src/datas/articles.data.ts
+++ b/packages/theme/src/datas/articles.data.ts
@@ -1,5 +1,6 @@
 import matter from 'gray-matter';
 import { readingTime } from 'reading-time-estimator';
+import { NOT_ARTICLE_LAYOUTS } from '../constants';
 import { createArticlesListLoader } from '../utils/node/articles';
 import { formatDate } from '../utils/node/date';
 
@@ -24,7 +25,7 @@ function getTextDescription(text: string, count = 100) {
     ?.trim()
     ?.slice(0, count);
 
-  return finalText;
+  return `${finalText}...`;
 }
 
 export default createArticlesListLoader({
@@ -32,7 +33,7 @@ export default createArticlesListLoader({
   render: true,
   excerpt: true,
   transform(rawData) {
-    const data = rawData.filter(item => !['blog', 'home'].includes(item.frontmatter.layout)).map(item => {
+    const data = rawData.filter(item => !NOT_ARTICLE_LAYOUTS.includes(item.frontmatter.layout)).map(item => {
       const content = matter(item.src || '').content;
       const { words, minutes } = readingTime(content, 200);
       const match = content.match(/^(#+)\s+(.+)/m);
diff --git a/packages/theme/src/hooks/useArticleData.ts b/packages/theme/src/hooks/useArticleData.ts
index db2c8bf..846d1a3 100644
--- a/packages/theme/src/hooks/useArticleData.ts
+++ b/packages/theme/src/hooks/useArticleData.ts
@@ -2,7 +2,7 @@ import { onMounted, ref } from 'vue';
 import { data } from '../datas/articles.data';
 
 export function useArticleData() {
-  const articleData = ref(data);
+  const articleData = ref(data || []);
 
   onMounted(() => {
     articleData.value = data;
diff --git a/packages/theme/src/styles/index.scss b/packages/theme/src/styles/index.scss
index 4334ee3..65bc3f4 100644
--- a/packages/theme/src/styles/index.scss
+++ b/packages/theme/src/styles/index.scss
@@ -56,3 +56,28 @@
 .VPSwitchAppearance .check {
   transform: none !important;
 }
+
+.VSPage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  @media (max-width: 600px) {
+    padding: 0 32px 15px;
+  }
+
+  @media (min-width: 601px) and (max-width: 1024px) {
+    padding: 0 64px 15px;
+  }
+
+  .VSContent {
+    @media (max-width: 600px) {
+      width: 100%;
+    }
+    @media (min-width: 601px) and (max-width: 1024px) {
+      width: 100%;
+    }
+    @media (min-width: 1025px) {
+      width: 800px;
+    }
+  }
+}
diff --git a/packages/theme/src/utils/client/tags.ts b/packages/theme/src/utils/client/tags.ts
new file mode 100644
index 0000000..d5fe310
--- /dev/null
+++ b/packages/theme/src/utils/client/tags.ts
@@ -0,0 +1,23 @@
+import type { ArticlesData } from '../../datas/articles.data';
+
+export function handleTagsData(data: ArticlesData[]) {
+  const tagsMap = new Map<string, number>();
+  data.forEach(item => {
+    item?.tags?.forEach(tag => {
+      if (!tagsMap.has(tag)) {
+        tagsMap.set(tag, 1);
+      }
+      else {
+        tagsMap.set(tag, (tagsMap.get(tag) || 0) + 1);
+      }
+    });
+  });
+
+  const tagsData = Array.from(tagsMap, ([key, value]) => {
+    return {
+      name: key,
+      count: value
+    };
+  });
+  return tagsData;
+}