From ba3786821cef383a4e2227e0897f667ff9aceb05 Mon Sep 17 00:00:00 2001
From: cyciling <1377899390@qq.com>
Date: Fri, 20 Sep 2024 01:22:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A1=B5=E9=9D=A2=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/components/ArticleMetadataCN.vue    | 80 ++++++++++++-------
 1 file changed, 51 insertions(+), 29 deletions(-)

diff --git a/.vitepress/theme/components/ArticleMetadataCN.vue b/.vitepress/theme/components/ArticleMetadataCN.vue
index 47517749..4f8101b6 100644
--- a/.vitepress/theme/components/ArticleMetadataCN.vue
+++ b/.vitepress/theme/components/ArticleMetadataCN.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-    import { useData } from 'vitepress'
+    import { dataSymbol, useData } from 'vitepress'
     import { computed, ref, onMounted } from 'vue'
     import { countWord } from '../../utils/functions'
 
     const { page, frontmatter, lang } = useData()
-    const date = computed(
-    () => new Date(page.value.lastUpdated!)
+
+    const update = computed(
+        () => new Date(page.value.lastUpdated!).toLocaleDateString()
     )
 
     const wordCount = ref(0)
@@ -46,57 +47,78 @@
         analyze()
     })
 
-    const metadata = computed(() => {
+    const isMetadata = computed(() => {
             return frontmatter.value?.metadata ?? true;
     });
 
-    const text = {
+    const metadata = {
         "zh-CN": {
-            update: `最后更新于：`,
-            wordCount: `字数：`,
-            word: `字`,
-            time: `时长：`,
-            min: `分钟`,
+            update: (text: string)=> `最后更新于：${text}`,
+            wordCount: (text: number) => `字数：${text}字`,
+            readTime: (text: number) => `时长：${text}分钟`,
         },
         "en-US": {
-            update: `Last updated on: `,
-            wordCount: `Word count: `,
-            word: ` word`,
-            time: `Reading time: `,
-            min: ` minutes`,
+            update: (text: string)=> `Last updated on: ${text}`,
+            wordCount: (text: number) => `Word count: ${text} word`,
+            readTime: (text: number) => `Reading time: ${text} minutes`,
+        },
+        icon: {
+            update: "mdi-refresh",
+            wordCount: "mdi-text-shadow",
+            readTime: "mdi-timer-outline"
         }
     }
 
-    const matedataText = computed(() => {
+    const icon = (key: number) => {
+        return metadata.icon[key]
+    };
+
+    const data = ref([update, wordCount, readTime])
+
+    const matadataText = computed(() => {
         return (
-            text[lang.value] ||
-            text["en-US"]
+            metadata[lang.value] ||
+            metadata["en-US"]
         );
     });
 </script>
 
 
 <template>
-    <div v-if="metadata" class="word">
+    <div v-if="isMetadata" class="word">
         <p>
-            <svg t="1724572866572" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18131" width="16" height="16"><path d="M168.021333 504.192A343.253333 343.253333 0 0 1 268.629333 268.8a342.229333 342.229333 0 0 1 243.285334-100.778667A341.504 341.504 0 0 1 755.029333 268.8c9.856 9.898667 19.2 20.394667 27.733334 31.402667l-60.16 46.976a8.021333 8.021333 0 0 0 2.986666 14.122666l175.701334 43.008a8.021333 8.021333 0 0 0 9.898666-7.68l0.810667-180.906666a7.936 7.936 0 0 0-12.885333-6.314667L842.666667 253.44a418.858667 418.858667 0 0 0-330.922667-161.493333c-229.12 0-415.488 183.594667-419.797333 411.818666a8.021333 8.021333 0 0 0 8.021333 8.192H160a7.978667 7.978667 0 0 0 8.021333-7.808zM923.946667 512H864a7.978667 7.978667 0 0 0-8.021333 7.808 341.632 341.632 0 0 1-26.88 125.994667 342.186667 342.186667 0 0 1-73.685334 109.397333 342.442667 342.442667 0 0 1-243.328 100.821333 342.229333 342.229333 0 0 1-270.976-132.224l60.16-46.976a8.021333 8.021333 0 0 0-2.986666-14.122666l-175.701334-43.008a8.021333 8.021333 0 0 0-9.898666 7.68l-0.682667 181.034666c0 6.698667 7.68 10.496 12.885333 6.314667L181.333333 770.56a419.072 419.072 0 0 0 330.922667 161.408c229.205333 0 415.488-183.722667 419.797333-411.818667a8.021333 8.021333 0 0 0-8.021333-8.192z" fill="#8a8a8a" p-id="18132"></path></svg>
-            {{matedataText.update}}{{ date.toLocaleDateString() }}
-            <svg t="1724571760788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6125" width="16" height="16"><path d="M204.8 0h477.866667l273.066666 273.066667v614.4c0 75.093333-61.44 136.533333-136.533333 136.533333H204.8c-75.093333 0-136.533333-61.44-136.533333-136.533333V136.533333C68.266667 61.44 129.706667 0 204.8 0z m307.2 607.573333l68.266667 191.146667c13.653333 27.306667 54.613333 27.306667 61.44 0l102.4-273.066667c6.826667-20.48 0-34.133333-20.48-40.96s-34.133333 0-40.96 13.653334l-68.266667 191.146666-68.266667-191.146666c-13.653333-27.306667-54.613333-27.306667-68.266666 0l-68.266667 191.146666-68.266667-191.146666c-6.826667-13.653333-27.306667-27.306667-47.786666-20.48s-27.306667 27.306667-20.48 47.786666l102.4 273.066667c13.653333 27.306667 54.613333 27.306667 61.44 0l75.093333-191.146667z" fill="#777777" p-id="6126"></path><path d="M682.666667 0l273.066666 273.066667h-204.8c-40.96 0-68.266667-27.306667-68.266666-68.266667V0z" fill="#E0E0E0" opacity=".619" p-id="6127"></path></svg>
-            {{matedataText.wordCount}}{{ wordCount }}{{matedataText.word}}
-            <svg t="1724572797268" class="icon" viewBox="0 0 1060 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15031" width="16" height="16"><path d="M556.726857 0.256A493.933714 493.933714 0 0 0 121.929143 258.998857L0 135.021714v350.390857h344.649143L196.205714 334.482286a406.820571 406.820571 0 1 1-15.908571 312.649143H68.937143A505.819429 505.819429 0 1 0 556.726857 0.256z m-79.542857 269.531429v274.907428l249.197714 150.966857 42.422857-70.070857-212.114285-129.389714V269.787429h-79.542857z" fill="#8a8a8a" p-id="15032"></path></svg>
-            {{matedataText.time}}{{ readTime }}{{matedataText.min}}
+            <v-btn
+                v-for="(value, key, index) in matadataText" 
+                class="mx-0 btn"
+                rounded="lg"
+                variant="text"
+                density="comfortable"
+                :key="index"
+                :prepend-icon="icon(key)"
+                >
+                    {{ value(data[index].value) }}
+            </v-btn>
         </p>
     </div>
 </template>
 
 <style>
-.word {
+.word, .btn {
   color: var(--vp-c-text-2);
   font-size: 15px;
+  /* margin-left: -5px; */
 }
 
-.icon {
-    display: inline-block;
-    transform: translate(0px , 2px);
+.btn {
+    padding-left: 12px;
+    padding-right: 8px;
+    font-weight: 300;
+}
+
+.v-icon, .v-btn__prepend {
+    margin-inline: calc(var(--v-btn-height) / -9) 0px;
+    color: var(--vp-c-text-2);
+    opacity: 85%;
+
 }
 </style>
\ No newline at end of file