From 13fbbe8840e6d1e8550f92c101c62b3876c1a8a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=8E=AB=E5=94=90=E5=B0=BC?=
 <tzxiaomo@outlook.com>
Date: Wed, 9 Sep 2026 16:09:41 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E5=81=8F?=
 =?UTF-8?q?=E5=A5=BD=E8=AE=BE=E7=BD=AE=E6=A8=A1=E5=9D=97=EF=BC=8C=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=85=A8=E5=B1=80=E8=AE=BE=E7=BD=AE=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E4=B8=8E=E9=80=9A=E7=94=A8hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  抽离usePreferenceRows通用hook，统一管理偏好设置的字段定义、状态读写与交互逻辑
2.  新增全局操作组件与全局设置弹窗，替换原有的滚动到顶部组件
3.  重构页面端偏好设置页面，复用通用hook减少重复代码
4.  修复并优化了原有组件的页面适配逻辑
---
 src/App.ku.vue                                |  56 ++--
 src/App.vue                                   |   1 +
 .../uh-glass-popup/uh-glass-popup.vue         |   2 +
 .../uh-global-actions/uh-global-actions.vue   |  10 +
 .../uh-scrolltop-button.vue}                  |  23 +-
 .../uh-settings-button/uh-settings-button.vue |  29 ++
 .../uh-settings-popup/uh-settings-popup.vue   | 222 ++++++++++++++
 src/hooks/usePreferenceRows.ts                | 185 ++++++++++++
 src/hooks/useSettingsPopup.ts                 |  16 +
 src/pages-blog/setting/setting.vue            | 276 +++++-------------
 10 files changed, 574 insertions(+), 246 deletions(-)
 create mode 100644 src/components/uh-global-actions/uh-global-actions.vue
 rename src/components/{uh-scroll-top/uh-scroll-top.vue => uh-scrolltop-button/uh-scrolltop-button.vue} (61%)
 create mode 100644 src/components/uh-settings-button/uh-settings-button.vue
 create mode 100644 src/components/uh-settings-popup/uh-settings-popup.vue
 create mode 100644 src/hooks/usePreferenceRows.ts
 create mode 100644 src/hooks/useSettingsPopup.ts

diff --git a/src/App.ku.vue b/src/App.ku.vue
index b7975fb..83aa4d9 100644
--- a/src/App.ku.vue
+++ b/src/App.ku.vue
@@ -1,37 +1,33 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import FgTabbar from '@/tabbar/index.vue'
-import { isPageTabbar } from './tabbar/store'
-import { currRoute } from './utils'
+	import { ref } from 'vue'
+	import { isPageTabbar } from './tabbar/store'
+	import { currRoute } from './utils'
+	import CustomTabbar from '@/tabbar/index.vue'
 
-const isCurrentPageTabbar = ref(true)
-onShow(() => {
-  const { path } = currRoute()
-  // “蜡笔小开心”提到本地是 '/pages/index/index'，线上是 '/' 导致线上 tabbar 不见了
-  // 所以这里需要判断一下，如果是 '/' 就当做首页，也要显示 tabbar
-  if (path === '/') {
-    isCurrentPageTabbar.value = true
-  }
-  else {
-    isCurrentPageTabbar.value = isPageTabbar(path)
-  }
-})
-
-const helloKuRoot = ref('Hello AppKuVue')
-
-const exposeRef = ref('this is form app.Ku.vue')
-
-defineExpose({
-  exposeRef,
-})
+	const isCurrentPageTabbar = ref(true)
+	const globalSettingsVisible = ref(false)
+	onShow(() => {
+		const { path } = currRoute()
+		if (path === '/') {
+			isCurrentPageTabbar.value = true
+		}
+		else {
+			isCurrentPageTabbar.value = isPageTabbar(path)
+		}
+	})
 </script>
 
 <template>
-  <view>
-   <uh-scroll-top />
+	<view>
+		<uh-global-actions>
+			<uh-scrolltop-button :fixed="false"/>
+			<uh-settings-button :fixed="false" @click="globalSettingsVisible = !globalSettingsVisible"/>
+		</uh-global-actions>
+		
+		<uh-settings-popup v-model="globalSettingsVisible" @close="globalSettingsVisible = false" />
 
-    <KuRootView />
+		<KuRootView />
 
-    <FgTabbar v-if="isCurrentPageTabbar" />
-  </view>
-</template>
+		<CustomTabbar v-if="isCurrentPageTabbar" />
+	</view>
+</template>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index a18ce98..6d7eff8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,4 @@
+ 
 <script setup lang="ts">
 	import { onHide, onLaunch, onShow } from '@dcloudio/uni-app'
 	import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
diff --git a/src/components/uh-glass-popup/uh-glass-popup.vue b/src/components/uh-glass-popup/uh-glass-popup.vue
index 2b51b95..c69626f 100644
--- a/src/components/uh-glass-popup/uh-glass-popup.vue
+++ b/src/components/uh-glass-popup/uh-glass-popup.vue
@@ -33,6 +33,7 @@
 	interface IEmits {
 		(e : 'update:modelValue', value : boolean) : void
 		(e : 'close') : void
+		(e : 'open') : void
 		(e : 'click-modal') : void
 	}
 
@@ -78,6 +79,7 @@
 		:lazy-render="lazyRender"
 		@update:model-value="(value: boolean) => emit('update:modelValue', value)"
 		@close="emit('close')"
+		@enter="emit('open')"
 		@click-modal="emit('click-modal')"
 	>
 		<slot></slot>
diff --git a/src/components/uh-global-actions/uh-global-actions.vue b/src/components/uh-global-actions/uh-global-actions.vue
new file mode 100644
index 0000000..868a09b
--- /dev/null
+++ b/src/components/uh-global-actions/uh-global-actions.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+	 
+</script>
+
+<template>
+	<view class="fixed right-3 bottom-22 z-50 flex flex-col gap-y-3 pb-safe">
+		<slot></slot>
+	</view>
+</template>
+
diff --git a/src/components/uh-scroll-top/uh-scroll-top.vue b/src/components/uh-scrolltop-button/uh-scrolltop-button.vue
similarity index 61%
rename from src/components/uh-scroll-top/uh-scroll-top.vue
rename to src/components/uh-scrolltop-button/uh-scrolltop-button.vue
index 4d4e017..5f9048f 100644
--- a/src/components/uh-scroll-top/uh-scroll-top.vue
+++ b/src/components/uh-scrolltop-button/uh-scrolltop-button.vue
@@ -1,32 +1,39 @@
 <script setup lang="ts">
 	interface IProps {
-		customClass?: string;
+		customClass ?: string;
+		fixed ?: boolean;
 	}
-	
+
 	const props = withDefaults(defineProps<IProps>(), {
-		customClass: ''
+		customClass: '',
+		fixed: true,
 	})
 
 	function handleScrollTop() {
 		uni.pageScrollTo({ scrollTop: 0, duration: 500 })
 	}
 
-	// 获取当前页面，并且设置黑名单模式，因为有的页面可能不需要滚动到顶部
-	const balckList = ['pages/maintenance/maintenance', 'pages-blog/setting/setting', 'pages-blog/love/love']
+	// 黑名单模式
+	const balckList = [
+		'pages/maintenance/maintenance',
+		'pages-blog/setting/setting',
+		'pages-blog/love/love',
+		'pages/tabbar/about/about'
+	]
 	const pages = getCurrentPages()
 	const currentPage = pages[pages.length - 1]
 	const visible = computed(() => {
 		return !balckList.includes(currentPage.route)
 	})
-	
+
 	const _customClass = computed(() => {
-		const colorClass = currentPage.route.includes('/love/')?'text-love':'text-primary'
+		const colorClass = currentPage.route.includes('/love/') ? 'text-love' : 'text-primary'
 		return `${props.customClass} ${colorClass}`
 	})
 </script>
 
 <template>
-	<view v-if="visible" class="fixed bottom-22 right-3 z-50 pb-safe">
+	<view v-if="visible" :class="[props.fixed?'fixed bottom-22 right-3 z-50 pb-safe':'']">
 		<view class="uh-global-card-glass border h-11 w-11 flex items-center justify-center rounded-full"
 			:class="_customClass" @click="handleScrollTop">
 			<wd-icon name="arrow-up" size="42rpx" />
diff --git a/src/components/uh-settings-button/uh-settings-button.vue b/src/components/uh-settings-button/uh-settings-button.vue
new file mode 100644
index 0000000..7276852
--- /dev/null
+++ b/src/components/uh-settings-button/uh-settings-button.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+	interface IProps {
+		containerClass ?: string;
+		customClass ?: string;
+		fixed ?: boolean;
+	}
+
+	const props = withDefaults(defineProps<IProps>(), {
+		customClass: '',
+		fixed: true,
+	})
+
+	// 白名单模式
+	const whiteList = ['pages/tabbar/home/home', 'pages-blog/articles/articles', 'pages-blog/archives/archives']
+	const pages = getCurrentPages()
+	const currentPage = pages[pages.length - 1]
+	const visible = computed(() => {
+		return whiteList.includes(currentPage.route)
+	})
+</script>
+
+<template>
+	<view v-if="visible" :class="[props.fixed?'fixed bottom-22 right-3 z-50 pb-safe':'',props.containerClass]">
+		<view class="uh-global-card-glass border h-11 w-11 flex items-center justify-center rounded-full text-primary"
+			:class="props.customClass">
+			<wd-icon name="settings" size="42rpx" />
+		</view>
+	</view>
+</template>
\ No newline at end of file
diff --git a/src/components/uh-settings-popup/uh-settings-popup.vue b/src/components/uh-settings-popup/uh-settings-popup.vue
new file mode 100644
index 0000000..c7d7a40
--- /dev/null
+++ b/src/components/uh-settings-popup/uh-settings-popup.vue
@@ -0,0 +1,222 @@
+<script lang="ts" setup>
+	import { ref } from 'vue'
+	import { useSettingStore } from '@/store/setting'
+	import { usePreferenceRows } from '@/hooks/usePreferenceRows'
+	import { useSettingsPopup } from '@/hooks/useSettingsPopup'
+
+	const settingStore = useSettingStore()
+
+	const {
+		SETTING_TABS,
+		layoutGroups,
+		featureRows,
+		prefValueOf,
+		isFollowing,
+		handleRevert,
+		handleBoolChange,
+		handleChoose,
+	} = usePreferenceRows()
+
+	const { settingsPopupVisible } = useSettingsPopup()
+
+	const emits = defineEmits(['close', 'open'])
+
+	const activeTab = ref<'layout' | 'feature'>('layout')
+
+	// 进行过滤，只保留当前页面的布局和功能
+	const pages = getCurrentPages()
+	const currentPage = pages[pages.length - 1]
+	const filterLayoutGroups = computed(() => {
+		return layoutGroups.value.filter((group) => {
+			return currentPage.route.split('/').pop() === group.key
+		})
+	})
+
+	/* ---------------- 交互 ---------------- */
+	function handleSwitchChange(def : { path : string[] }, detail : { value ?: unknown }) {
+		handleBoolChange(def.path, detail.value === true)
+	}
+
+	function currentValueOf(path : string[]) : string | null {
+		return isFollowing(path) ? null : String(prefValueOf(path) ?? '')
+	}
+
+	function handleInlineChoose(path : string[], value : string | null) : void {
+		handleChoose(path, value)
+	}
+
+	/* ---------------- 重置全部 ---------------- */
+	function handleResetAll() {
+		uni.showModal({
+			title: '提示',
+			content: '确定将所有偏好恢复为站点默认吗？本地自定义的偏好将被清除，未配置站点默认的项将恢复为内置默认。',
+			showCancel: true,
+			cancelText: '取消',
+			confirmText: '确定',
+			confirmColor: '#03a9f4',
+			success: (res) => {
+				if (res.confirm) {
+					settingStore.resetPreferences()
+					uni.showToast({ icon: 'none', title: '已恢复为站点默认' })
+				}
+			},
+		})
+	}
+
+	function onClose() {
+		emits('close')
+	}
+	function onOpen() {
+		emits('open')
+	}
+	
+</script>
+
+<template>
+	<uh-glass-popup v-model="settingsPopupVisible" position="bottom" custom-class="rounded-xl !border"
+		safe-area-inset-bottom :z-index="99999" hide-when-close @close="onClose" @open="onOpen">
+		<view class="box-border px-3 pt-3">
+			<view class="mb-3 flex items-center justify-between">
+				<text class="text-md font-bold">偏好设置</text>
+				<view
+					class="uh-global-card-glass shadow-none !bg-white/5 border flex h-6 w-6 items-center justify-center rounded-lg text-gray-500"
+					@click="onClose()">
+					<wd-icon name="close" size="16px" />
+				</view>
+			</view>
+
+			<!-- 分段器:布局 / 功能 -->
+			<view class="uh-global-card-glass shadow-none flex rounded-xl p-1">
+				<view v-for="tab in SETTING_TABS" :key="tab.key"
+					class="box-border flex-1 rounded-lg py-1.5 text-center text-sm"
+					:class="activeTab === tab.key ? 'bg-primary font-bold' : 'text-gray-500'"
+					@click="activeTab = tab.key">
+					{{ tab.label }}
+				</view>
+			</view>
+
+			<!-- 内容区(弹层内滚动) -->
+			<scroll-view scroll-y :show-scrollbar="false" class="mt-4 max-h-[60vh]">
+				<view class="box-border flex flex-col gap-y-6 pb-1">
+					<!-- 布局:按页面分组(枚举项内联分段器) -->
+					<template v-if="activeTab === 'layout'">
+						<view v-for="group in filterLayoutGroups" :key="group.key" class="flex flex-col gap-y-3">
+							<uh-section-title>{{ group.label }}</uh-section-title>
+							<view class="uh-global-card-glass shadow-none overflow-hidden rounded-xl">
+								<view v-for="(row) in group.rows" :key="row.key" class="box-border p-3">
+									<!-- 左 label / 右 说明 -->
+									<view class="flex items-center justify-between">
+										<text class="row-label text-sm text-gray-900 font-bold">{{ row.label }}</text>
+										<view class="flex items-center gap-2">
+											<text v-if="row.following" class="row-sub text-2xs text-gray-400">默认</text>
+											<view v-else
+												class="rounded-full bg-secondary px-2 py-1 text-xs text-gray-900 leading-none">
+												已自定义
+											</view>
+										</view>
+									</view>
+									<!-- 下方横向选项(分段器风格:默认 + options) -->
+									<view class="mt-3 flex flex-wrap gap-2">
+										<view
+											class="rounded-full px-3 py-1 text-xs uh-global-card-glass shadow-none border"
+											:class="currentValueOf(row.path) === null ? 'bg-secondary font-bold' : 'text-gray-500'"
+											@click="handleInlineChoose(row.path, null)">
+											默认
+										</view>
+										<view v-for="opt in row.options" :key="opt.value"
+											class="rounded-full px-3 py-1 text-xs uh-global-card-glass shadow-none border"
+											:class="currentValueOf(row.path) === opt.value ? 'bg-secondary font-bold' : ' border-gray-100 text-gray-500'"
+											@click="handleInlineChoose(row.path, opt.value)">
+											{{ opt.label }}
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</template>
+
+					<!-- 功能 -->
+					<template v-else>
+						<view class="flex flex-col gap-y-3">
+							<uh-section-title>
+								功能
+								<template #right>
+									<text class="text-2xs text-gray-400">一些常用的功能性设置</text>
+								</template>
+							</uh-section-title>
+							<view class="setting-sheet uh-global-card-glass overflow-hidden rounded-2xl">
+								<template v-for="(row, index) in featureRows" :key="row.key">
+									<!-- 布尔开关 -->
+									<view v-if="row.kind === 'bool'"
+										class="switch-row flex items-center justify-between px-4 py-4"
+										:class="index < featureRows.length - 1 ? 'border-b border-black/5' : ''">
+										<view class="row-left flex flex-col gap-1">
+											<text
+												class="row-label text-[28rpx] text-gray-900 font-bold">{{ row.label }}</text>
+											<view class="flex items-center gap-2">
+												<text v-if="row.following"
+													class="row-sub text-2xs text-gray-400">跟随站点默认</text>
+												<template v-else>
+													<view
+														class="rounded-full bg-secondary px-2 py-0.5 text-[20rpx] text-[#4d7c0f] leading-none">
+														已自定义
+													</view>
+													<text class="revert-text text-2xs text-gray-400 underline"
+														@click.stop="handleRevert(row.path)">
+														恢复默认
+													</text>
+												</template>
+											</view>
+										</view>
+										<wd-switch :model-value="row.boolValue"
+											@change="handleSwitchChange(row, $event)" />
+									</view>
+									<!-- 枚举项:内联分段器(与布局项一致) -->
+									<view v-else class="px-4 py-4"
+										:class="index < featureRows.length - 1 ? 'border-b border-black/5' : ''">
+										<view class="flex items-center justify-between">
+											<text
+												class="row-label text-[28rpx] text-gray-900 font-bold">{{ row.label }}</text>
+											<view class="flex items-center gap-2">
+												<text v-if="row.following"
+													class="row-sub text-2xs text-gray-400">跟随站点默认</text>
+												<view v-else
+													class="rounded-full bg-secondary px-2 py-0.5 text-[20rpx] text-[#4d7c0f] leading-none">
+													已自定义
+												</view>
+											</view>
+										</view>
+										<view class="mt-3 flex flex-wrap gap-2">
+											<view class="rounded-full px-3 py-1 text-xs"
+												:class="currentValueOf(row.path) === null ? 'bg-primary font-bold' : 'uh-global-card-glass !bg-white/60 text-gray-500'"
+												@click="handleInlineChoose(row.path, null)">
+												默认
+											</view>
+											<view v-for="opt in row.options" :key="opt.value"
+												class="rounded-full px-3 py-1 text-xs"
+												:class="currentValueOf(row.path) === opt.value ? 'bg-primary font-bold' : 'uh-global-card-glass !bg-white/60 text-gray-500'"
+												@click="handleInlineChoose(row.path, opt.value)">
+												{{ opt.label }}
+											</view>
+										</view>
+									</view>
+								</template>
+							</view>
+						</view>
+					</template>
+				</view>
+			</scroll-view>
+
+			<!-- 底部操作栏 -->
+			<view class="box-border w-full pb-4 pt-3 flex items-center gap-x-2">
+				<uh-button custom-class="flex-1 uh-global-card-glass bg-white/90 border py-2 !rounded-xl"
+					@click="onClose()">
+					关闭
+				</uh-button>
+				<uh-button custom-class="flex-1 uh-global-card-glass border py-2 !rounded-xl" @click="handleResetAll">
+					恢复默认
+				</uh-button>
+			</view>
+		</view>
+	</uh-glass-popup>
+</template>
\ No newline at end of file
diff --git a/src/hooks/usePreferenceRows.ts b/src/hooks/usePreferenceRows.ts
new file mode 100644
index 0000000..e7d5fab
--- /dev/null
+++ b/src/hooks/usePreferenceRows.ts
@@ -0,0 +1,185 @@
+/**
+ * 偏好设置展示行与交互(页面 setting.vue 与全局弹窗 uh-settings-popup 共用)
+ * 收敛:字段定义(PrefDef/页面分组/布局/功能)、三态(跟随站点默认/已自定义/恢复默认)、
+ * 行构建、选值交互。两个消费方不再各自重复定义。
+ */
+import { computed } from 'vue';
+import { DefaultAppSettings } from '@/config/appSettings';
+import { useSettingStore } from '@/store/setting';
+import { isLocalOverride, readLocalPrefs } from '@/utils/preference';
+import type { LocalPrefs } from '@/utils/preference';
+
+/** 偏好字段定义 */
+export interface PrefDef {
+	key: string;
+	label: string;
+	kind: 'bool' | 'enum';
+	path: string[];
+	options?: { label: string; value: string }[];
+	siteLabelOf?: (value: string) => string;
+}
+
+/** 布局设置按页面分组(每组:列表布局 + 卡片样式) */
+export const PAGE_GROUPS = [
+	{ key: 'home', label: '首页' },
+	{ key: 'articles', label: '文章页面' },
+	{ key: 'archives', label: '归档页面' }
+];
+
+/** 布局偏好字段(页面分组 × 列表布局/卡片样式) */
+export const LAYOUT_PREFS: PrefDef[] = PAGE_GROUPS.flatMap((group) => [
+	{
+		key: `${group.key}ListLayout`,
+		label: '列表布局',
+		kind: 'enum',
+		path: ['layout', group.key, 'listLayout'],
+		options: [
+			{ label: '单列', value: 'single' },
+			{ label: '双列', value: 'double' }
+		]
+	},
+	{
+		key: `${group.key}CardType`,
+		label: '卡片样式',
+		kind: 'enum',
+		path: ['layout', group.key, 'cardType'],
+		options: [
+			{ label: '上图下文', value: 'image_top' },
+			{ label: '左文右图', value: 'image_right' },
+			{ label: '上文下图', value: 'image_bottom' },
+			{ label: '左图右文', value: 'image_left' }
+		]
+	}
+]);
+
+/** 功能偏好字段 */
+export const FEATURE_PREFS: PrefDef[] = [{ key: 'isAvatarRadius', label: '是否圆形头像', kind: 'bool', path: ['isAvatarRadius'] }];
+
+/** 顶部分段器(布局 / 功能) */
+export const SETTING_TABS: { key: 'layout' | 'feature'; label: string }[] = [
+	{ key: 'layout', label: '布局' },
+	{ key: 'feature', label: '功能' }
+];
+
+export function usePreferenceRows() {
+	const settingStore = useSettingStore();
+
+	/* ---------------- 路径取值工具 ---------------- */
+	function getByPath(obj: unknown, path: string[]): unknown {
+		let cursor: unknown = obj;
+		for (const key of path) {
+			if (cursor === null || cursor === undefined) {
+				return undefined;
+			}
+			cursor = (cursor as Record<string, unknown>)[key];
+		}
+		return cursor;
+	}
+
+	/** 按路径构造差异 patch(null 表示删除该键=跟随站点默认) */
+	function buildPatch(path: string[], value: unknown): LocalPrefs {
+		const [head, ...rest] = path;
+		if (rest.length === 0) return { [head]: value } as LocalPrefs;
+		return { [head]: buildPatch(rest, value) } as LocalPrefs;
+	}
+
+	/* ---------------- 状态读取 ---------------- */
+	function prefValueOf(path: string[]): unknown {
+		return getByPath(settingStore.settings, path);
+	}
+
+	/** 站点默认值(未配置时回退内置默认) */
+	function siteDefaultOf(path: string[]): unknown {
+		const site = getByPath(settingStore.siteDefaults, path);
+		if (site !== undefined && site !== null) return site;
+		return getByPath(DefaultAppSettings, path);
+	}
+
+	function isOverridden(path: string[]): boolean {
+		return isLocalOverride(readLocalPrefs(), path);
+	}
+
+	function enumLabelOf(def: PrefDef, value: unknown): string {
+		const hit = def.options?.find((opt) => opt.value === value);
+		if (hit) return hit.label;
+		if (def.siteLabelOf && typeof value === 'string') return def.siteLabelOf(value);
+		return value === undefined || value === null ? '—' : String(value);
+	}
+
+	/* ---------------- 展示行(预计算,避免模板渲染期函数调用) ---------------- */
+	interface PrefRow extends PrefDef {
+		displayValue: string;
+		following: boolean;
+		/** 仅 kind==='bool' 使用 */
+		boolValue: boolean;
+	}
+
+	function buildRows(defs: PrefDef[]): PrefRow[] {
+		return defs.map((def) => ({
+			...def,
+			displayValue: enumLabelOf(def, prefValueOf(def.path)),
+			following: isFollowing(def.path),
+			boolValue: def.kind === 'bool' ? prefValueOf(def.path) === true : false
+		}));
+	}
+
+	const layoutRows = computed(() => buildRows(LAYOUT_PREFS));
+	const featureRows = computed(() => buildRows(FEATURE_PREFS));
+
+	/** 布局设置按页面分组的展示行 */
+	const layoutGroups = computed(() =>
+		PAGE_GROUPS.map((group) => ({
+			key: group.key,
+			label: group.label,
+			rows: layoutRows.value.filter((row) => row.path[1] === group.key)
+		}))
+	);
+
+	/** 当前项是否处于「跟随站点默认」(本地未覆盖) */
+	function isFollowing(path: string[]): boolean {
+		return !isOverridden(path);
+	}
+
+	/** 单项还原为跟随站点默认 */
+	function handleRevert(path: string[]): void {
+		settingStore.savePreference(buildPatch(path, null));
+	}
+
+	/** 开关类:选值等于站点默认则还原为跟随(只存差异) */
+	function handleBoolChange(path: string[], next: boolean): void {
+		if (next === siteDefaultOf(path)) {
+			settingStore.savePreference(buildPatch(path, null));
+		} else {
+			settingStore.savePreference(buildPatch(path, next));
+		}
+	}
+
+	/** 枚举选值:null 或等于站点默认则还原为跟随,否则写入差异(内联分段器与弹层共用) */
+	function handleChoose(path: string[], value: string | null): void {
+		if (value === null || value === siteDefaultOf(path)) {
+			handleRevert(path);
+		} else {
+			settingStore.savePreference(buildPatch(path, value));
+		}
+	}
+
+	return {
+		settingStore,
+		PAGE_GROUPS,
+		SETTING_TABS,
+		getByPath,
+		buildPatch,
+		prefValueOf,
+		siteDefaultOf,
+		isOverridden,
+		enumLabelOf,
+		buildRows,
+		layoutRows,
+		featureRows,
+		layoutGroups,
+		isFollowing,
+		handleRevert,
+		handleBoolChange,
+		handleChoose
+	};
+}
diff --git a/src/hooks/useSettingsPopup.ts b/src/hooks/useSettingsPopup.ts
new file mode 100644
index 0000000..490a7c4
--- /dev/null
+++ b/src/hooks/useSettingsPopup.ts
@@ -0,0 +1,16 @@
+import { ref } from 'vue';
+
+export function useSettingsPopup() {
+	const settingsPopupVisible = ref(false);
+
+	function openSettingsPopup() {
+		settingsPopupVisible.value = true;
+	}
+
+	function closeSettingsPopup() {
+		settingsPopupVisible.value = false;
+		console.log('Settings popup closed', settingsPopupVisible.value);
+	}
+
+	return { settingsPopupVisible, openSettingsPopup, closeSettingsPopup };
+}
diff --git a/src/pages-blog/setting/setting.vue b/src/pages-blog/setting/setting.vue
index 3cc1120..733a3aa 100644
--- a/src/pages-blog/setting/setting.vue
+++ b/src/pages-blog/setting/setting.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 	import { computed, ref } from 'vue'
 	import { onLoad } from '@dcloudio/uni-app'
-	import { DefaultAppSettings } from '@/config/appSettings'
 	import { useAppConfigStore } from '@/store/appConfig'
 	import { useSettingStore } from '@/store/setting'
-	import { collectSiteDefaults, isLocalOverride, readLocalPrefs } from '@/utils/preference'
-	import type { LocalPrefs } from '@/utils/preference'
+	import { collectSiteDefaults } from '@/utils/preference'
+	import { usePreferenceRows } from '@/hooks/usePreferenceRows'
+	import type { PrefDef } from '@/hooks/usePreferenceRows'
 
 	definePage({
 		style: {
@@ -17,6 +17,18 @@
 	const settingStore = useSettingStore()
 	const appConfigStore = useAppConfigStore()
 
+	/** 公共:字段定义/三态/行构建/选值(与全局弹窗 uh-settings-popup 共用 usePreferenceRows) */
+	const {
+		SETTING_TABS,
+		layoutGroups,
+		featureRows,
+		prefValueOf,
+		isFollowing,
+		handleRevert,
+		handleBoolChange,
+		handleChoose,
+	} = usePreferenceRows()
+
 	/** 确保启动合并已执行(入口页未跑或 H5 直达时兜底) */
 	onLoad(() => {
 		if (!settingStore.siteDefaults) {
@@ -25,138 +37,24 @@
 		uni.setNavigationBarTitle({ title: '偏好设置' })
 	})
 
-	/* ---------------- 路径取值工具 ---------------- */
-	type Path = string[]
-
-	function getByPath(obj : unknown, path : Path) : unknown {
-		let cursor : unknown = obj
-		for (const key of path) {
-			if (cursor === null || cursor === undefined)
-				return undefined
-			cursor = (cursor as Record<string, unknown>)[key]
-		}
-		return cursor
-	}
-
-	/** 按路径构造差异 patch(null 表示删除该键=跟随站点默认) */
-	function buildPatch(path : Path, value : unknown) : LocalPrefs {
-		const [head, ...rest] = path
-		if (rest.length === 0)
-			return { [head]: value } as LocalPrefs
-		return { [head]: buildPatch(rest, value) } as LocalPrefs
-	}
-
-	/** 偏好字段定义(现页已有项;弹幕已下线、友链分组二期再开) */
-	interface PrefDef {
-		key : string
-		label : string
-		kind : 'bool' | 'enum'
-		path : Path
-		options ?: { label : string, value : string }[]
-		siteLabelOf ?: (value : string) => string
-	}
-
-	/** 布局设置按页面分组(每组:列表布局 + 卡片样式) */
-	const PAGE_GROUPS = [
-		{ key: 'home', label: '首页' },
-		{ key: 'articles', label: '文章列表' },
-		{ key: 'archives', label: '文章归档' },
-	]
-
-	const layoutPrefs : PrefDef[] = PAGE_GROUPS.flatMap(group => [
-		{
-			key: `${group.key}ListLayout`,
-			label: '列表布局',
-			kind: 'enum',
-			path: ['layout', group.key, 'listLayout'],
-			options: [
-				{ label: '单列', value: 'single' },
-				{ label: '双列', value: 'double' },
-			],
-		},
-		{
-			key: `${group.key}CardType`,
-			label: '卡片样式',
-			kind: 'enum',
-			path: ['layout', group.key, 'cardType'],
-			options: [
-				{ label: '上图下文', value: 'image_top' },
-				{ label: '左文右图', value: 'image_right' },
-				{ label: '上文下图', value: 'image_bottom' },
-				{ label: '左图右文', value: 'image_left' },
-			],
-		},
-	])
-
-	const featurePrefs : PrefDef[] = [
-		{ key: 'isAvatarRadius', label: '是否圆形头像', kind: 'bool', path: ['isAvatarRadius'] },
-	]
-
 	/* ---------------- 顶部分段器(布局 / 功能) ---------------- */
-	const settingTabs : { key : 'layout' | 'feature', label : string }[] = [
-		{ key: 'layout', label: '布局' },
-		{ key: 'feature', label: '功能' },
-	]
 	const activeTab = ref<'layout' | 'feature'>('layout')
 
-	/* ---------------- 状态读取 ---------------- */
-	function prefValueOf(path : Path) : unknown {
-		return getByPath(settingStore.settings, path)
-	}
-
-	/** 站点默认值(未配置时回退内置默认) */
-	function siteDefaultOf(path : Path) : unknown {
-		const site = getByPath(settingStore.siteDefaults, path)
-		if (site !== undefined && site !== null)
-			return site
-		return getByPath(DefaultAppSettings, path)
-	}
-
-	function isOverridden(path : Path) : boolean {
-		return isLocalOverride(readLocalPrefs(), path)
-	}
-
-	function enumLabelOf(def : PrefDef, value : unknown) : string {
-		const hit = def.options?.find(opt => opt.value === value)
-		if (hit)
-			return hit.label
-		if (def.siteLabelOf && typeof value === 'string')
-			return def.siteLabelOf(value)
-		return value === undefined || value === null ? '—' : String(value)
-	}
-
 	/* ---------------- 交互 ---------------- */
 	/** 开关事件(模板透传 $event) */
 	function handleSwitchChange(def : PrefDef, detail : { value ?: unknown }) {
 		handleBoolChange(def.path, detail.value === true)
 	}
 
-	/** 开关类:选值等于站点默认则还原为跟随(只存差异) */
-	function handleBoolChange(path : Path, next : boolean) {
-		if (next === siteDefaultOf(path)) {
-			settingStore.savePreference(buildPatch(path, null))
-		}
-		else {
-			settingStore.savePreference(buildPatch(path, next))
-		}
-	}
-
-	/** 单项还原为跟随站点默认 */
-	function handleRevert(path : Path) {
-		settingStore.savePreference(buildPatch(path, null))
-	}
-
 	/* ---------------- 枚举底部弹层(uh-glass-popup + wd-picker-view) ---------------- */
 	const enumSheet = ref<{ show : boolean, def : PrefDef | null }>({ show: false, def: null })
 	/** 弹层内滚动中的临时选中值(单列;确认时才落库,取消不生效) */
 	const pickerValue = ref<(string | number)[]>([''])
 
 	function handleOpenEnum(def : PrefDef) {
-		console.log('handleOpenEnum', def)
 		enumSheet.value = { show: true, def }
 		// 打开时同步当前值(跟随站点默认 → 空串哨兵)
-		pickerValue.value = [isFollowing(def) ? '' : String(prefValueOf(def.path) ?? '')]
-		console.log('pickerValue', pickerValue.value)
+		pickerValue.value = [isFollowing(def.path) ? '' : String(prefValueOf(def.path) ?? '')]
 	}
 
 	function handleCloseEnum() {
@@ -166,12 +64,7 @@
 	function handleChooseEnum(value : string | null) {
 		const def = enumSheet.value.def
 		if (def) {
-			if (value === null || value === siteDefaultOf(def.path)) {
-				handleRevert(def.path)
-			}
-			else {
-				settingStore.savePreference(buildPatch(def.path, value))
-			}
+			handleChoose(def.path, value)
 		}
 		handleCloseEnum()
 	}
@@ -203,39 +96,6 @@
 		handleCloseEnum()
 	}
 
-	/** 当前枚举项是否处于「跟随站点默认」 */
-	function isFollowing(def : PrefDef) : boolean {
-		return !isOverridden(def.path)
-	}
-
-	/* ---------------- 展示行(预计算,避免模板渲染期函数调用) ---------------- */
-	/** 偏好展示行:展示文本/跟随态/开关值在数据层算好,模板只做属性访问 */
-	interface PrefRow extends PrefDef {
-		displayValue : string
-		following : boolean
-		/** 仅 kind==='bool' 使用 */
-		boolValue : boolean
-	}
-
-	function buildRows(defs : PrefDef[]) : PrefRow[] {
-		return defs.map(def => ({
-			...def,
-			displayValue: enumLabelOf(def, prefValueOf(def.path)),
-			following: isFollowing(def),
-			boolValue: def.kind === 'bool' ? prefValueOf(def.path) === true : false,
-		}))
-	}
-
-	const layoutRows = computed(() => buildRows(layoutPrefs))
-	const featureRows = computed(() => buildRows(featurePrefs))
-
-	/** 布局设置按页面分组的展示行 */
-	const layoutGroups = computed(() => PAGE_GROUPS.map(group => ({
-		key: group.key,
-		label: group.label,
-		rows: layoutRows.value.filter(row => row.path[1] === group.key),
-	})))
-
 	/* ---------------- 重置全部 ---------------- */
 	function handleResetAll() {
 		uni.showModal({
@@ -265,7 +125,7 @@
 		<view class="box-border flex flex-col gap-y-6 p-3">
 			<!-- 顶部分段器:布局 / 功能 -->
 			<view class="uh-global-card-glass flex rounded-full p-1">
-				<view v-for="tab in settingTabs" :key="tab.key"
+				<view v-for="tab in SETTING_TABS" :key="tab.key"
 					class="flex-1 rounded-full py-1.5 text-center text-sm"
 					:class="activeTab === tab.key ? 'bg-primary font-bold' : 'text-gray-500'"
 					@click="activeTab = tab.key">
@@ -311,58 +171,58 @@
 						</template>
 					</uh-section-title>
 					<view class="setting-sheet uh-global-card-glass overflow-hidden rounded-2xl">
-					<template v-for="(row, index) in featureRows" :key="row.key">
-						<!-- 布尔开关 -->
-						<view v-if="row.kind === 'bool'" class="switch-row flex items-center justify-between px-4 py-4"
-							:class="index < featureRows.length - 1 ? 'border-b border-black/5' : ''">
-							<view class="row-left flex flex-col gap-1">
-								<text class="row-label text-[28rpx] text-gray-900 font-bold">{{ row.label }}</text>
-								<view class="flex items-center gap-2">
-									<text v-if="row.following" class="row-sub text-2xs text-gray-400">跟随站点默认</text>
-									<template v-else>
-										<view
-											class="rounded-full bg-secondary px-2 py-0.5 text-[20rpx] text-[#4d7c0f] leading-none">
-											已自定义
-										</view>
-										<text class="revert-text text-2xs text-gray-400 underline"
-											@click.stop="handleRevert(row.path)">
-											恢复默认
-										</text>
-									</template>
+						<template v-for="(row, index) in featureRows" :key="row.key">
+							<!-- 布尔开关 -->
+							<view v-if="row.kind === 'bool'" class="switch-row flex items-center justify-between px-4 py-4"
+								:class="index < featureRows.length - 1 ? 'border-b border-black/5' : ''">
+								<view class="row-left flex flex-col gap-1">
+									<text class="row-label text-[28rpx] text-gray-900 font-bold">{{ row.label }}</text>
+									<view class="flex items-center gap-2">
+										<text v-if="row.following" class="row-sub text-2xs text-gray-400">跟随站点默认</text>
+										<template v-else>
+											<view
+												class="rounded-full bg-secondary px-2 py-0.5 text-[20rpx] text-[#4d7c0f] leading-none">
+												已自定义
+											</view>
+											<text class="revert-text text-2xs text-gray-400 underline"
+												@click.stop="handleRevert(row.path)">
+												恢复默认
+											</text>
+										</template>
+									</view>
+								</view>
+								<wd-switch :model-value="row.boolValue" @change="handleSwitchChange(row, $event)" />
+							</view>
+							<!-- 枚举选择 -->
+							<view v-else class="pick-row flex items-center justify-between px-4 py-4"
+								:class="index < featureRows.length - 1 ? 'border-b border-black/5' : ''"
+								@click="handleOpenEnum(row)">
+								<view class="row-left flex flex-col gap-1">
+									<text class="row-label text-[28rpx] text-gray-900 font-bold">{{ row.label }}</text>
+									<view class="flex items-center gap-2">
+										<text v-if="row.following" class="row-sub text-2xs text-gray-400">跟随站点默认</text>
+										<template v-else>
+											<view
+												class="rounded-full bg-secondary px-2 py-0.5 text-[20rpx] text-[#4d7c0f] leading-none">
+												已自定义
+											</view>
+											<text class="revert-text text-2xs text-gray-400 underline"
+												@click.stop="handleRevert(row.path)">
+												恢复默认
+											</text>
+										</template>
+									</view>
+								</view>
+								<view class="row-value flex items-center gap-2">
+									<text class="value-text text-[26rpx] text-gray-400">{{ row.displayValue }}</text>
+									<wd-icon name="arrow-right" size="12px" color="#c8c2b4" />
 								</view>
 							</view>
-							<wd-switch :model-value="row.boolValue" @change="handleSwitchChange(row, $event)" />
-						</view>
-						<!-- 枚举选择(指示器位置) -->
-						<view v-else class="pick-row flex items-center justify-between px-4 py-4"
-							:class="index < featureRows.length - 1 ? 'border-b border-black/5' : ''"
-							@click="handleOpenEnum(row)">
-							<view class="row-left flex flex-col gap-1">
-								<text class="row-label text-[28rpx] text-gray-900 font-bold">{{ row.label }}</text>
-								<view class="flex items-center gap-2">
-									<text v-if="row.following" class="row-sub text-2xs text-gray-400">跟随站点默认</text>
-									<template v-else>
-										<view
-											class="rounded-full bg-secondary px-2 py-0.5 text-[20rpx] text-[#4d7c0f] leading-none">
-											已自定义
-										</view>
-										<text class="revert-text text-2xs text-gray-400 underline"
-											@click.stop="handleRevert(row.path)">
-											恢复默认
-										</text>
-									</template>
-								</view>
-							</view>
-							<view class="row-value flex items-center gap-2">
-								<text class="value-text text-[26rpx] text-gray-400">{{ row.displayValue }}</text>
-								<wd-icon name="arrow-right" size="12px" color="#c8c2b4" />
-							</view>
-						</view>
-					</template>
+						</template>
+					</view>
 				</view>
-			</view>
-		</template>
-		<!-- 底部操作栏-->
+			</template>
+			<!-- 底部操作栏-->
 			<view class="box-border w-full">
 				<uh-button custom-class="uh-global-card-glass py-2 !rounded-xl" @click="handleResetAll">
 					恢复默认
@@ -395,4 +255,4 @@
 			</view>
 		</uh-glass-popup>
 	</view>
-</template>
\ No newline at end of file
+</template>