From feeb257c9c95886f5462eea24947b301758270f2 Mon Sep 17 00:00:00 2001
From: imsyy <one@imsyy.top>
Date: Tue, 5 Dec 2023 17:47:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=AD=97=E4=BD=93?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E8=B0=83=E8=8A=82=20#12?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HotList.vue | 37 +++++++++++++++++++++++++++------
 src/store/index.js         |  3 +++
 src/views/Setting.vue      | 42 ++++++++++++++++++++++++++++++++++++--
 3 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/src/components/HotList.vue b/src/components/HotList.vue
index 6227abd..4e5724f 100644
--- a/src/components/HotList.vue
+++ b/src/components/HotList.vue
@@ -1,6 +1,12 @@
 <template>
-  <n-card hoverable class="hot-list" :header-style="{ padding: '16px' }" :content-style="{ padding: '0 16px' }"
-    :footer-style="{ padding: '16px' }" @click="toList">
+  <n-card
+    hoverable
+    class="hot-list"
+    :header-style="{ padding: '16px' }"
+    :content-style="{ padding: '0 16px' }"
+    :footer-style="{ padding: '16px' }"
+    @click="toList"
+  >
     <template #header>
       <n-space class="title" justify="space-between">
         <div class="name">
@@ -50,8 +56,15 @@
                     : index === 2
                     ? 'three'
                     : null
-                " :depth="2">{{ index + 1 }}</n-text>
-              <n-text class="text" @click.stop="jumpLink(item)">
+                "
+                :depth="2"
+                >{{ index + 1 }}</n-text
+              >
+              <n-text
+                :style="{ fontSize: store.listFontSize + 'px' }"
+                class="text"
+                @click.stop="jumpLink(item)"
+              >
                 {{ item.title }}
               </n-text>
             </div>
@@ -75,7 +88,13 @@
             <n-space class="controls">
               <n-popover v-if="hotListData.data.length > 15">
                 <template #trigger>
-                  <n-button size="tiny" secondary strong round @click.stop="toList">
+                  <n-button
+                    size="tiny"
+                    secondary
+                    strong
+                    round
+                    @click.stop="toList"
+                  >
                     <template #icon>
                       <n-icon :component="More" />
                     </template>
@@ -85,7 +104,13 @@
               </n-popover>
               <n-popover>
                 <template #trigger>
-                  <n-button size="tiny" secondary strong round @click.stop="getNewData">
+                  <n-button
+                    size="tiny"
+                    secondary
+                    strong
+                    round
+                    @click.stop="getNewData"
+                  >
                     <template #icon>
                       <n-icon :component="Refresh" />
                     </template>
diff --git a/src/store/index.js b/src/store/index.js
index d3e647a..84e93be 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -130,6 +130,8 @@ export const mainStore = defineStore("mainData", {
       headerFixed: true,
       // 时间数据
       timeData: null,
+      // 字体大小
+      listFontSize: 14,
     };
   },
   getters: {},
@@ -176,6 +178,7 @@ export const mainStore = defineStore("mainData", {
         "newsArr",
         "linkOpenType",
         "headerFixed",
+        "listFontSize",
       ],
     },
   ],
diff --git a/src/views/Setting.vue b/src/views/Setting.vue
index 6206154..1747b3d 100644
--- a/src/views/Setting.vue
+++ b/src/views/Setting.vue
@@ -50,6 +50,37 @@
         <n-switch v-model:value="headerFixed" :round="false" />
       </div>
     </n-card>
+    <n-card class="set-item">
+      <div class="top" style="flex-direction: column; align-items: flex-start">
+        <div class="name">
+          <n-text class="text">歌词文本大小</n-text>
+          <n-card
+            class="tip"
+            :style="{
+              backgroundColor: 'var(--n-border-color)',
+              margin: '12px 0',
+            }"
+          >
+            <n-text :style="{ fontSize: listFontSize + 'px' }">
+              我是将要显示的文字的大小
+            </n-text>
+          </n-card>
+        </div>
+
+        <n-slider
+          v-model:value="listFontSize"
+          :tooltip="false"
+          :max="20"
+          :min="14"
+          :step="0.01"
+          :marks="{
+            14: '默认',
+            16: '大一点',
+            20: '最大',
+          }"
+        />
+      </div>
+    </n-card>
     <n-card class="set-item">
       <div class="top">
         <div class="name">
@@ -120,8 +151,14 @@ import draggable from "vuedraggable";
 
 const store = mainStore();
 const osThemeRef = useOsTheme();
-const { siteTheme, siteThemeAuto, newsArr, linkOpenType, headerFixed } =
-  storeToRefs(store);
+const {
+  siteTheme,
+  siteThemeAuto,
+  newsArr,
+  linkOpenType,
+  headerFixed,
+  listFontSize,
+} = storeToRefs(store);
 
 // 深浅模式
 const themeOptions = ref([
@@ -208,6 +245,7 @@ const reset = () => {
 
         .tip {
           font-size: 12px;
+          border-radius: 8px;
         }
       }