!414 feat: 新增字体大小设置与界面整体缩放，修复放大后设置页溢出

Merge pull request !414 from xiyidaiwa/Erotica
2026-09-21 06:00:11 +08:00 · 2026-08-18 05:49:52 +00:00
parent 791b196256 d0e6dc1b79
commit 55247a72da
13 changed files with 244 additions and 29 deletions
@@ -52,10 +52,10 @@ const emit = defineEmits<{
  display: flex;
  width: 100%;
  align-items: center;
-  gap: 0.75rem;
+  gap: 12px;
  min-width: 0;
-  border-radius: 0.75rem;
-  padding: 0.625rem 0.75rem;
+  border-radius: 12px;
+  padding: 10px 12px;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
@@ -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";
 });

@@ -161,10 +161,10 @@ const emitSidebarAction = (action: "list" | "update" | "submit") => {
  display: flex;
  width: 100%;
  align-items: center;
-  gap: 0.75rem;
+  gap: 12px;
  border: 1px solid transparent;
-  border-radius: 0.75rem;
-  padding: 0.625rem 0.875rem;
+  border-radius: 12px;
+  padding: 10px 0.875rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
@@ -71,7 +71,7 @@ const selectCategory = (category: string) => {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
-  padding: 0.75rem 0;
+  padding: 12px 0;
 }

 .category-pill {
@@ -81,7 +81,7 @@ const selectCategory = (category: string) => {
  white-space: nowrap;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
-  font-size: 0.8125rem;
+  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  background: #f1f5f9;
@@ -126,7 +126,7 @@ const selectCategory = (category: string) => {
 }

 .category-pill-count {
-  font-size: 0.6875rem;
+  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
 }
@@ -192,7 +192,7 @@ const onLinkClick = (link: HomeLink) => {
@media (max-width: 640px) {
  .auto-fit-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: 0.75rem;
+    gap: 12px;
  }
 }
 </style>
@@ -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`;
 });

@@ -13,7 +13,7 @@
      @click.self="closeModal"
    >
      <div
-        class="relative w-full max-w-md overflow-hidden rounded-3xl border border-white/10 bg-white/95 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
+        class="relative flex max-h-[calc(100vh-2rem)] w-full max-w-md flex-col overflow-hidden rounded-3xl border border-white/10 bg-white/95 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
      >
        <!-- 标题栏 -->
        <div
@@ -35,8 +35,8 @@
          </button>
        </div>

-        <!-- 设置内容 -->
-        <div class="p-6 space-y-4">
+        <!-- 设置内容（可滚动，标题/底部固定） -->
+        <div class="flex-1 overflow-y-auto p-6 space-y-4">
          <!-- 更新检测开关 -->
          <div
            class="flex items-center justify-between rounded-2xl border border-slate-200/60 bg-slate-50/50 px-4 py-4 dark:border-slate-800/60 dark:bg-slate-800/50"
@@ -163,6 +163,51 @@
              </div>
            </div>
          </div>
+
+          <!-- 界面缩放（整体缩放：图标 / 间距 / 布局等比变化） -->
+          <div
+            class="rounded-2xl border border-slate-200/60 bg-slate-50/50 px-4 py-4 dark:border-slate-800/60 dark:bg-slate-800/50"
+          >
+            <div class="flex items-start gap-3">
+              <div
+                class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-teal-100 text-teal-600 dark:bg-teal-900/30 dark:text-teal-400"
+              >
+                <i class="fas fa-search-plus"></i>
+              </div>
+              <div class="min-w-0 flex-1">
+                <p
+                  class="text-sm font-medium text-slate-800 dark:text-slate-200"
+                >
+                  界面缩放
+                </p>
+                <p class="text-xs text-slate-500 dark:text-slate-400">
+                  整体放大或缩小界面（图标、间距、布局等比变化）
+                </p>
+                <div
+                  class="mt-3 inline-flex w-full overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700"
+                  role="radiogroup"
+                  aria-label="界面缩放"
+                >
+                  <button
+                    v-for="opt in uiScaleOptions"
+                    :key="opt.value"
+                    type="button"
+                    role="radio"
+                    :aria-checked="uiScale === opt.value"
+                    class="flex-1 px-2 py-1.5 text-xs font-medium transition-colors"
+                    :class="
+                      uiScale === opt.value
+                        ? 'bg-brand text-white'
+                        : 'bg-white text-slate-500 hover:bg-slate-100 dark:bg-slate-700 dark:text-slate-400 dark:hover:bg-slate-600'
+                    "
+                    @click="selectUiScale(opt.value)"
+                  >
+                    {{ opt.label }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
        </div>

        <!-- 底部提示 -->
@@ -185,6 +230,13 @@ import {
  setTagPriorityStrategy,
  type TagPriorityStrategy,
 } from "../global/tagPriority";
+import {
+  getUiScale,
+  setUiScale,
+  uiScaleToFactor,
+  UI_SCALE_OPTIONS,
+  type UiScaleOption,
+} from "../global/displaySettings";

 const props = defineProps<{
  show: boolean;
@@ -206,6 +258,9 @@ const strategyOptions: Array<{ value: TagPriorityStrategy; label: string }> = [
  { value: "apm", label: "APM 优先" },
 ];

+// 界面缩放档位选项（90% / 100% / 110% / 125% / 150%）
+const uiScaleOptions = UI_SCALE_OPTIONS;
+
 const tagPriorityStrategy = ref<TagPriorityStrategy>("auto");

 // 加载标签优先显示策略（从持久化读取）
@@ -219,6 +274,24 @@ const selectStrategy = (value: TagPriorityStrategy) => {
  setTagPriorityStrategy(value);
 };

+// 界面整体缩放档位（Electron setZoomFactor，连图标/间距/布局等比变化）
+const uiScale = ref<UiScaleOption>("100");
+
+const loadUiScale = () => {
+  uiScale.value = getUiScale();
+};
+
+// 选择并保存界面缩放档位（立即经 IPC 应用到主窗口）
+const selectUiScale = async (value: UiScaleOption) => {
+  uiScale.value = value;
+  setUiScale(value);
+  try {
+    await window.ipcRenderer.invoke("set-zoom-factor", uiScaleToFactor(value));
+  } catch (error) {
+    console.error("应用界面缩放失败:", error);
+  }
+};
+
 const settings = ref<Settings>({
  enableUpdateCheck: true,
  enableCreateDesktop: true,
@@ -279,6 +352,7 @@ watch(
    if (newVal) {
      loadSettings();
      loadTagPriority();
+      loadUiScale();
    }
  },
 );
@@ -83,15 +83,13 @@
      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-[11px] font-semibold text-brand dark:text-amber-300"
+        >{{ timeLabel }}</span
+      >
      <span class="text-[10px] text-slate-400">{{ sizeLabel }}</span>
    </div>
-    <div
-      v-else-if="!task"
-      class="flex shrink-0 flex-col items-end gap-0.5"
-    >
+    <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">{{
        timeLabel
      }}</span>
@@ -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 => {