优化：增加部分选中后的取消功能

2022-08-11 14:35:56 +08:00
parent 95f95d5796
commit d0b1020be4
3 changed files with 70 additions and 20 deletions
--- a/repos/.vitepress/theme/components/ArticleMetadata.vue
+++ b/repos/.vitepress/theme/components/ArticleMetadata.vue
@@ -20,9 +20,9 @@
      </span>
      <span id="pv" class="meta-content"></span>
    </div>
-    <div class="meta-item">
+    <div class="meta-item" v-if="showCategory">
      <span class="meta-icon category">
-        <svg role="img" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>所属分类</title><path d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256z m635.3 512H159l103.3-256h612.4L771.3 768z"></path></svg>
+        <svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>所属分类</title><path d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256z m635.3 512H159l103.3-256h612.4L771.3 768z"></path></svg>
      </span>
      <span class="meta-content">
        <span v-for="(category, index) in categories" :key="index">
@@ -33,11 +33,11 @@
    </div>
    <div class="meta-item">
      <span class="meta-icon tag">
-        <svg role="img" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>标签列表</title><path d="M483.2 790.3L861.4 412c1.7-1.7 2.5-4 2.3-6.3l-25.5-301.4c-0.7-7.8-6.8-13.9-14.6-14.6L522.2 64.3c-2.3-0.2-4.7 0.6-6.3 2.3L137.7 444.8a8.03 8.03 0 0 0 0 11.3l334.2 334.2c3.1 3.2 8.2 3.2 11.3 0z m62.6-651.7l224.6 19 19 224.6L477.5 694 233.9 450.5l311.9-311.9z m60.16 186.23a48 48 0 1 0 67.88-67.89 48 48 0 1 0-67.88 67.89zM889.7 539.8l-39.6-39.5a8.03 8.03 0 0 0-11.3 0l-362 361.3-237.6-237a8.03 8.03 0 0 0-11.3 0l-39.6 39.5a8.03 8.03 0 0 0 0 11.3l243.2 242.8 39.6 39.5c3.1 3.1 8.2 3.1 11.3 0l407.3-406.6c3.1-3.1 3.1-8.2 0-11.3z"></path></svg>
+        <svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>标签列表</title><path d="M483.2 790.3L861.4 412c1.7-1.7 2.5-4 2.3-6.3l-25.5-301.4c-0.7-7.8-6.8-13.9-14.6-14.6L522.2 64.3c-2.3-0.2-4.7 0.6-6.3 2.3L137.7 444.8a8.03 8.03 0 0 0 0 11.3l334.2 334.2c3.1 3.2 8.2 3.2 11.3 0z m62.6-651.7l224.6 19 19 224.6L477.5 694 233.9 450.5l311.9-311.9z m60.16 186.23a48 48 0 1 0 67.88-67.89 48 48 0 1 0-67.88 67.89zM889.7 539.8l-39.6-39.5a8.03 8.03 0 0 0-11.3 0l-362 361.3-237.6-237a8.03 8.03 0 0 0-11.3 0l-39.6 39.5a8.03 8.03 0 0 0 0 11.3l243.2 242.8 39.6 39.5c3.1 3.1 8.2 3.1 11.3 0l407.3-406.6c3.1-3.1 3.1-8.2 0-11.3z"></path></svg>
      </span>
      <span class="meta-content">
        <span v-for="(tag, index) in tags" :key="index">
-          <a :href="'/tags.html?tag=' + tag" target="_self">{{ tag }}</a>
+          <a :href="'/archives.html?tag=' + tag" target="_self">{{ tag }}</a>
          <span v-if="index != tags.length - 1">, </span>
        </span>
      </span>
@@ -57,7 +57,11 @@ dayjs.locale('zh-cn')

 // 定义文章属性
 const props = defineProps({
-  article: Object
+  article: Object,
+  showCategory: {
+    type: Boolean,
+    default: true
+  }
 })

 // 初始化文章元数据信息
@@ -67,9 +71,10 @@ const data = reactive({
  authorLink: props.article?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
  date: new Date(props.article.date),
  categories: props.article?.categories ?? [],
-  tags: props.article?.tags ?? []
+  tags: props.article?.tags ?? [],
+  showCategory: props.showCategory
 })
-const { author, authorLink, date, toDate, categories, tags } = toRefs(data)
+const { author, authorLink, date, toDate, categories, tags, showCategory } = toRefs(data)
 </script>

 <style scoped>
--- a/repos/.vitepress/theme/components/dynamic/Archive.vue
+++ b/repos/.vitepress/theme/components/dynamic/Archive.vue
@@ -1,8 +1,28 @@
 <template>
  <div class="timeline-wrap">
    <div class="timeline-header" v-if="category">
-      <svg role="img" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>所属分类</title><path d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256z m635.3 512H159l103.3-256h612.4L771.3 768z"></path></svg>
-      <span>{{ category }}</span>
+      <a-tag
+        class="content"
+        closable
+        @close="handleUncheck('/archives.html')"
+      >
+        <template #icon>
+          <svg class="icon" role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>所属分类</title><path d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256z m635.3 512H159l103.3-256h612.4L771.3 768z"></path></svg>
+        </template>
+        {{ category }} (共{{ $articleData.length }}篇)
+      </a-tag>
+    </div>
+    <div class="timeline-header" v-else-if="tag">
+      <a-tag
+        class="content"
+        closable
+        @close="handleUncheck('/archives.html')"
+      >
+        <template #icon>
+          <svg class="icon" role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>标签列表</title><path d="M483.2 790.3L861.4 412c1.7-1.7 2.5-4 2.3-6.3l-25.5-301.4c-0.7-7.8-6.8-13.9-14.6-14.6L522.2 64.3c-2.3-0.2-4.7 0.6-6.3 2.3L137.7 444.8a8.03 8.03 0 0 0 0 11.3l334.2 334.2c3.1 3.2 8.2 3.2 11.3 0z m62.6-651.7l224.6 19 19 224.6L477.5 694 233.9 450.5l311.9-311.9z m60.16 186.23a48 48 0 1 0 67.88-67.89 48 48 0 1 0-67.88 67.89zM889.7 539.8l-39.6-39.5a8.03 8.03 0 0 0-11.3 0l-362 361.3-237.6-237a8.03 8.03 0 0 0-11.3 0l-39.6 39.5a8.03 8.03 0 0 0 0 11.3l243.2 242.8 39.6 39.5c3.1 3.1 8.2 3.1 11.3 0l407.3-406.6c3.1-3.1 3.1-8.2 0-11.3z"></path></svg>
+        </template>
+        {{ tag }} (共{{ $articleData.length }}篇)
+      </a-tag>
    </div>
    <div class="timeline-item" v-for="(item, year) in archiveData">
      <div class="year">
@@ -22,11 +42,13 @@
              <svg v-else role="img" viewBox="0 0 48 48" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" class="arco-icon arco-icon-bookmark" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter" style="color: #00b42a;"><path d="M16 16h16M16 24h8"></path><path d="M24 41H8V6h32v17"></path><path d="M30 29h11v13l-5.5-3.5L30 42V29Z"></path></svg>
              <a :href="article.path" class="title" target="_blank">{{ article.title }}</a>
              <br>
-              <span>{{ formatDate(article.date) }}</span>
+              <!-- <span>{{ formatDate(article.date) }}</span> -->
+              <ArticleMetadata :article="article" :showCategory="false" />
            </span>
          </div>
        </div>
      </div>
+      <div id="main"></div>
    </div>
  </div>
 </template>
@@ -38,8 +60,11 @@ import { formatDate, getQueryParam } from '../../utils.ts'

 const $articleData = []

-// 如果URL路径有category参数, 默认筛选出指定category, 例如: /archives.html?category=Bug万象集
+// 如果URL路径有category或tag参数, 默认筛选出指定category或tag
+// 例如: /archives.html?category=Bug万象集
+// 例如: /archives.html?tag=JVM
 let category = getQueryParam('category')
+let tag = getQueryParam('tag')
 if (category && category.trim() != '') {
  for (let i = 0; i < articleData.length; i++) {
    let article = articleData[i]
@@ -47,10 +72,18 @@ if (category && category.trim() != '') {
      $articleData.push(article)
    }
  }
+} else if (tag && tag.trim() != '') {
+  for (let i = 0; i < articleData.length; i++) {
+    let article = articleData[i]
+    if (article.tags && article.tags.includes(tag)) {
+      $articleData.push(article)
+    }
+  }
 } else {
  $articleData.push(...articleData)
 }

+
 // 对文章数据进行降序排序
 $articleData.sort((a, b) => b.date.localeCompare(a.date))

@@ -101,9 +134,21 @@ function getChineseZodiac(year) {
      return 'goat'
  }
 }
+
+
+/**
+ * 取消选中
+ */
+const handleUncheck = (url) => {
+  location.href = url
+}
 </script>

 <style scoped>
+:deep(.arco-tag) {
+  background-color: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+}
 :deep(.arco-icon) {
  width: 1em;
  height: 1em;
@@ -118,20 +163,16 @@ function getChineseZodiac(year) {
  padding-bottom: 20px;
 }

-.timeline-wrap .timeline-header svg {
-  position: absolute;
-  left: -10px;
-  top: 3px;
+.timeline-wrap .timeline-header .icon {
  fill: var(--vp-c-text-2);
  height: 18px;
  width: 18px;
 }

-.timeline-wrap .timeline-header span {
-  font-size: 20px;
-  font-weight: bold;
+.timeline-wrap .timeline-header .content {
  position: relative;
-  left: 12px;
+  left: -17px;
+  font-size: 16px;
 }

 .timeline-wrap .timeline-item {
--- a/repos/.vitepress/theme/components/dynamic/Tag.vue
+++ b/repos/.vitepress/theme/components/dynamic/Tag.vue
@@ -68,7 +68,11 @@ const tags = computed(() => initTags(articleData))
 // 点击指定Tag后进行选中
 let selectTag = ref('')
 const toggleTag = (tagTitle: string) => {
-  selectTag.value = tagTitle
+  if (selectTag.value && selectTag.value == tagTitle) {
+    selectTag.value = null
+  } else {
+    selectTag.value = tagTitle
+  }
 }

 // 如果URL路径有tag参数, 默认选中指定Tag, 例如: /tags?tag=Git