feat: 支持字体大小调节 #12

imsyy · Dec 5, 2023 · feeb257 · feeb257
1 parent 6786a41
commit feeb257
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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;
         }
       }