From 7b658e9dd1d2844f4b5b8dad87d111d2fd5503e3 Mon Sep 17 00:00:00 2001
From: xiyidaiwa <g17729830615@163.com>
Date: Mon, 17 Aug 2026 23:15:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E5=B0=86=E5=9B=BA=E5=AE=9A=20px=20?=
 =?UTF-8?q?=E5=AD=97=E5=8F=B7=E6=94=B9=E4=B8=BA=20rem=EF=BC=8C=E8=AE=A9?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E5=AD=97=E4=BD=93=E5=A4=A7=E5=B0=8F=E6=A1=A3?=
 =?UTF-8?q?=E4=BD=8D=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户反馈首页红框区域（横幅标题/副标题）没随字号档位变大。
原因是多处使用了 Tailwind 固定 px 任意值（text-[10px]/[11px]/[12px]/[13px]/[15px]），
它们不随 html font-size 缩放。统一替换为等效 rem 任意值：
  10px → 0.625rem, 11px → 0.6875rem, 12px → 0.75rem, 13px → 0.8125rem, 15px → 0.9375rem
涉及 8 个 Vue 组件，保证字号档位全局联动（仍保持 16px 基准下的原视觉大小）。
vue-tsc 通过，打包成功；HomeView.vue 原有 emit 未使用 lint 错误未动。
---
 debian/changelog                              |  2 +-
 src/components/AppCard.vue                    | 16 +++++-----
 src/components/HomeView.vue                   |  6 ++--
 src/components/InstalledAppsModal.vue         | 22 ++++++-------
 src/components/RankingAppRow.vue              |  9 +++---
 src/components/SettingsModal.vue              |  2 +-
 src/components/SourceLabel.vue                |  2 +-
 src/components/WindowTitleBar.vue             |  2 +-
 .../update-center/UpdateCenterItem.vue        | 31 +++++++++----------
 9 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/debian/changelog b/debian/changelog
index b78193f9..c79d5081 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,4 +1,4 @@
-spark-store (5.3.0.2-test) UNRELEASED; urgency=medium
+spark-store (5.3.0.3-test) UNRELEASED; urgency=medium
 
   * Initial release.
 
diff --git a/src/components/AppCard.vue b/src/components/AppCard.vue
index 82de7541..f5fdb567 100644
--- a/src/components/AppCard.vue
+++ b/src/components/AppCard.vue
@@ -39,20 +39,20 @@
         <div class="flex shrink-0 gap-1">
           <span
             v-if="showMergedBadge"
-            class="rounded-md px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider shadow-sm bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400"
+            class="rounded-md px-1.5 py-0.5 text-[0.625rem] font-bold uppercase tracking-wider shadow-sm bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400"
           >
             SPARK/APM
           </span>
           <template v-else>
             <span
               v-if="showSparkBadge"
-              class="rounded-md px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider shadow-sm bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400"
+              class="rounded-md px-1.5 py-0.5 text-[0.625rem] font-bold uppercase tracking-wider shadow-sm bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400"
             >
               Spark
             </span>
             <span
               v-if="showApmBadge"
-              class="rounded-md px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider shadow-sm bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
+              class="rounded-md px-1.5 py-0.5 text-[0.625rem] font-bold uppercase tracking-wider shadow-sm bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
             >
               APM
             </span>
@@ -60,7 +60,7 @@
         </div>
         <span
           v-if="downloadCount"
-          class="ml-auto shrink-0 text-[10px] text-slate-400 dark:text-slate-500"
+          class="ml-auto shrink-0 text-[0.625rem] text-slate-400 dark:text-slate-500"
           >{{ formatDownloads(downloadCount) }}</span
         >
       </div>
@@ -72,7 +72,7 @@
       </div>
       <div
         class="truncate leading-tight text-slate-500 dark:text-slate-400"
-        :class="compact ? 'text-[11px]' : 'text-xs'"
+        :class="compact ? 'text-[0.6875rem]' : 'text-xs'"
       >
         {{ description || "\u00A0" }}
       </div>
@@ -153,12 +153,10 @@ const formatDownloads = (n?: number): string => {
 
 // 排名徽标配色（前 3 名金/银/铜，其余灰色）
 const rankClass = computed(() => {
-  if (props.rank === 1)
-    return "bg-amber-400 text-white shadow-amber-400/40";
+  if (props.rank === 1) return "bg-amber-400 text-white shadow-amber-400/40";
   if (props.rank === 2)
     return "bg-slate-300 text-slate-700 shadow-slate-400/40";
-  if (props.rank === 3)
-    return "bg-amber-600 text-white shadow-amber-600/40";
+  if (props.rank === 3) return "bg-amber-600 text-white shadow-amber-600/40";
   return "bg-slate-500/90 text-white shadow-slate-500/30";
 });
 
diff --git a/src/components/HomeView.vue b/src/components/HomeView.vue
index 73f67d98..4909ce3c 100644
--- a/src/components/HomeView.vue
+++ b/src/components/HomeView.vue
@@ -62,7 +62,7 @@
               storeFilter === "apm" ? "星火应用商店 (Amber PM)" : "星火应用商店"
             }}
           </h1>
-          <p class="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">
+          <p class="text-[0.625rem] text-slate-500 dark:text-slate-400 mt-0.5">
             探索丰富的应用，发现更多精彩内容
           </p>
         </div>
@@ -108,12 +108,12 @@
             </div>
             <div class="mt-1.5 px-1">
               <div
-                class="text-[13px] font-semibold text-slate-900 dark:text-white group-hover:text-brand dark:group-hover:text-brand transition-colors"
+                class="text-[0.8125rem] font-semibold text-slate-900 dark:text-white group-hover:text-brand dark:group-hover:text-brand transition-colors"
               >
                 {{ link.name }}
               </div>
               <div
-                class="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-1"
+                class="text-[0.6875rem] text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-1"
               >
                 {{ link.more }}
               </div>
diff --git a/src/components/InstalledAppsModal.vue b/src/components/InstalledAppsModal.vue
index ee3c6b41..4ce65a22 100644
--- a/src/components/InstalledAppsModal.vue
+++ b/src/components/InstalledAppsModal.vue
@@ -48,15 +48,15 @@
                   <span
                     class="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm shadow-amber-500/30"
                   >
-                    <i class="fas fa-box-open text-[12px]"></i>
+                    <i class="fas fa-box-open text-[0.75rem]"></i>
                   </span>
                   <div class="flex flex-col leading-tight">
                     <span
-                      class="text-[15px] font-bold tabular-nums text-amber-700 dark:text-amber-300"
+                      class="text-[0.9375rem] font-bold tabular-nums text-amber-700 dark:text-amber-300"
                       >{{ apmCount }}</span
                     >
                     <span
-                      class="text-[10px] font-medium uppercase tracking-wider text-amber-600/80 dark:text-amber-400/80"
+                      class="text-[0.625rem] font-medium uppercase tracking-wider text-amber-600/80 dark:text-amber-400/80"
                       >APM</span
                     >
                   </div>
@@ -80,15 +80,15 @@
                   <span
                     class="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-sky-400 to-blue-500 text-white shadow-sm shadow-sky-500/30"
                   >
-                    <i class="fas fa-bolt text-[12px]"></i>
+                    <i class="fas fa-bolt text-[0.75rem]"></i>
                   </span>
                   <div class="flex flex-col leading-tight">
                     <span
-                      class="text-[15px] font-bold tabular-nums text-sky-700 dark:text-sky-300"
+                      class="text-[0.9375rem] font-bold tabular-nums text-sky-700 dark:text-sky-300"
                       >{{ sparkCount }}</span
                     >
                     <span
-                      class="text-[10px] font-medium uppercase tracking-wider text-sky-600/80 dark:text-sky-400/80"
+                      class="text-[0.625rem] font-medium uppercase tracking-wider text-sky-600/80 dark:text-sky-400/80"
                       >Spark</span
                     >
                   </div>
@@ -112,15 +112,15 @@
                   <span
                     class="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-slate-500 to-slate-700 text-white shadow-sm dark:from-slate-400 dark:to-slate-600"
                   >
-                    <i class="fas fa-cubes text-[12px]"></i>
+                    <i class="fas fa-cubes text-[0.75rem]"></i>
                   </span>
                   <div class="flex flex-col leading-tight">
                     <span
-                      class="text-[15px] font-bold tabular-nums text-slate-900 dark:text-white"
+                      class="text-[0.9375rem] font-bold tabular-nums text-slate-900 dark:text-white"
                       >{{ totalCount }}</span
                     >
                     <span
-                      class="text-[10px] font-medium uppercase tracking-wider text-slate-500 dark:text-slate-400"
+                      class="text-[0.625rem] font-medium uppercase tracking-wider text-slate-500 dark:text-slate-400"
                       >总数</span
                     >
                   </div>
@@ -259,7 +259,7 @@
                       :data-testid="
                         o === 'apm' ? 'origin-tag-apm' : 'origin-tag-spark'
                       "
-                      class="rounded-md px-2 py-0.5 text-[11px] font-semibold"
+                      class="rounded-md px-2 py-0.5 text-[0.6875rem] font-semibold"
                       :class="
                         o === 'apm'
                           ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400'
@@ -271,7 +271,7 @@
                     </span>
                     <span
                       v-if="app.isDependency"
-                      class="rounded-md bg-rose-100 px-2 py-0.5 text-[11px] font-semibold text-rose-600 dark:bg-rose-500/20 dark:text-rose-400"
+                      class="rounded-md bg-rose-100 px-2 py-0.5 text-[0.6875rem] font-semibold text-rose-600 dark:bg-rose-500/20 dark:text-rose-400"
                     >
                       依赖项
                     </span>
diff --git a/src/components/RankingAppRow.vue b/src/components/RankingAppRow.vue
index 812dc5bf..c9fd378e 100644
--- a/src/components/RankingAppRow.vue
+++ b/src/components/RankingAppRow.vue
@@ -34,17 +34,17 @@
         </div>
         <span
           v-if="app.origin === 'spark'"
-          class="rounded-md bg-orange-100 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-orange-600 dark:bg-orange-900/30 dark:text-orange-400"
+          class="rounded-md bg-orange-100 px-1.5 py-0.5 text-[0.625rem] font-bold uppercase tracking-wider text-orange-600 dark:bg-orange-900/30 dark:text-orange-400"
           >Spark</span
         >
         <span
           v-else
-          class="rounded-md bg-blue-100 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
+          class="rounded-md bg-blue-100 px-1.5 py-0.5 text-[0.625rem] font-bold uppercase tracking-wider text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
           >APM</span
         >
         <span
           v-if="showDownload && downloadCount"
-          class="ml-auto shrink-0 text-[10px] text-slate-400 dark:text-slate-500"
+          class="ml-auto shrink-0 text-[0.625rem] text-slate-400 dark:text-slate-500"
           >{{ formatDownloads(downloadCount) }}</span
         >
       </div>
@@ -77,7 +77,8 @@ const iconFailed = ref(false);
 
 const iconPath = computed(() => {
   const arch = window.apm_store.arch || "amd64";
-  const finalArch = props.app.origin === "spark" ? `${arch}-store` : `${arch}-apm`;
+  const finalArch =
+    props.app.origin === "spark" ? `${arch}-store` : `${arch}-apm`;
   return `${APM_STORE_BASE_URL}/${finalArch}/${props.app.category}/${props.app.pkgname}/icon.png`;
 });
 
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index f14110c8..c47219bf 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -206,7 +206,7 @@
                   </button>
                 </div>
                 <p
-                  class="mt-2 text-[11px] text-slate-400 dark:text-slate-500"
+                  class="mt-2 text-[0.6875rem] text-slate-400 dark:text-slate-500"
                 >
                   预览：星火应用商店 Spark Store 123
                 </p>
diff --git a/src/components/SourceLabel.vue b/src/components/SourceLabel.vue
index bbbc060d..98c67018 100644
--- a/src/components/SourceLabel.vue
+++ b/src/components/SourceLabel.vue
@@ -8,7 +8,7 @@
     "
   >
     <span
-      class="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase"
+      class="rounded px-1.5 py-0.5 text-[0.625rem] font-bold uppercase"
       :class="
         origin === 'spark'
           ? 'bg-orange-100 dark:bg-orange-900/30'
diff --git a/src/components/WindowTitleBar.vue b/src/components/WindowTitleBar.vue
index b1c90d88..9324ac09 100644
--- a/src/components/WindowTitleBar.vue
+++ b/src/components/WindowTitleBar.vue
@@ -20,7 +20,7 @@
       />
       <span class="truncate text-base font-semibold">星火应用商店</span>
       <span
-        class="rounded-full border border-orange-400 bg-orange-50 px-2 py-0.5 text-[10px] font-semibold text-orange-600 dark:border-amber-400/70 dark:bg-amber-400/10 dark:text-amber-300 dark:shadow-[0_0_8px_rgba(251,191,36,0.4)]"
+        class="rounded-full border border-orange-400 bg-orange-50 px-2 py-0.5 text-[0.625rem] font-semibold text-orange-600 dark:border-amber-400/70 dark:bg-amber-400/10 dark:text-amber-300 dark:shadow-[0_0_8px_rgba(251,191,36,0.4)]"
         >社区版</span
       >
     </div>
diff --git a/src/components/update-center/UpdateCenterItem.vue b/src/components/update-center/UpdateCenterItem.vue
index d7b81018..73bf4175 100644
--- a/src/components/update-center/UpdateCenterItem.vue
+++ b/src/components/update-center/UpdateCenterItem.vue
@@ -42,25 +42,25 @@
           {{ item.displayName }}
         </p>
         <span
-          class="shrink-0 rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-200"
+          class="shrink-0 rounded-full bg-slate-100 px-2 py-0.5 text-[0.625rem] font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-200"
         >
           {{ sourceLabel }}
         </span>
         <span
           v-if="item.ignored === true"
-          class="shrink-0 rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-semibold text-slate-500 dark:bg-slate-800 dark:text-slate-300"
+          class="shrink-0 rounded-full bg-slate-200 px-2 py-0.5 text-[0.625rem] font-semibold text-slate-500 dark:bg-slate-800 dark:text-slate-300"
         >
           已忽略
         </span>
         <span
           v-else-if="item.held === true && !forced"
-          class="shrink-0 rounded-full bg-amber-200 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-500/20 dark:text-amber-200"
+          class="shrink-0 rounded-full bg-amber-200 px-2 py-0.5 text-[0.625rem] font-semibold text-amber-700 dark:bg-amber-500/20 dark:text-amber-200"
         >
           已锁定
         </span>
         <span
           v-else-if="item.held === true && forced"
-          class="shrink-0 rounded-full bg-amber-500 px-2 py-0.5 text-[10px] font-semibold text-white dark:bg-amber-500"
+          class="shrink-0 rounded-full bg-amber-500 px-2 py-0.5 text-[0.625rem] font-semibold text-white dark:bg-amber-500"
         >
           将强制
         </span>
@@ -83,19 +83,17 @@
       v-if="item.ignored !== true && !task"
       class="flex shrink-0 flex-col items-end gap-0.5"
     >
-      <span class="text-[11px] font-semibold text-brand dark:text-amber-300">{{
-        timeLabel
-      }}</span>
-      <span class="text-[10px] text-slate-400">{{ sizeLabel }}</span>
+      <span
+        class="text-[0.6875rem] font-semibold text-brand dark:text-amber-300"
+        >{{ timeLabel }}</span
+      >
+      <span class="text-[0.625rem] text-slate-400">{{ sizeLabel }}</span>
     </div>
-    <div
-      v-else-if="!task"
-      class="flex shrink-0 flex-col items-end gap-0.5"
-    >
-      <span class="text-[11px] font-semibold text-slate-400">{{
+    <div v-else-if="!task" class="flex shrink-0 flex-col items-end gap-0.5">
+      <span class="text-[0.6875rem] font-semibold text-slate-400">{{
         timeLabel
       }}</span>
-      <span class="text-[10px] text-slate-400">{{ sizeLabel }}</span>
+      <span class="text-[0.625rem] text-slate-400">{{ sizeLabel }}</span>
     </div>
 
     <!-- 强制安装开关：仅对被系统锁定（held）的包显示 -->
@@ -118,7 +116,7 @@
           :class="forced ? 'translate-x-[16px]' : 'translate-x-[2px]'"
         ></span>
       </button>
-      <span class="text-[10px] text-slate-400">强制</span>
+      <span class="text-[0.625rem] text-slate-400">强制</span>
     </div>
 
     <button
@@ -181,7 +179,8 @@ defineEmits<{
 
 // 被锁定且未强制时，复选框禁用（与「已忽略」一样不可被选中）
 const isSelectionLocked = computed(
-  () => props.item.ignored === true || (props.item.held === true && !props.forced),
+  () =>
+    props.item.ignored === true || (props.item.held === true && !props.forced),
 );
 
 const normalizeIconSrc = (icon: string): string => {