fix: 优化文章卡片样式与布局设置联动

1. 修复双列布局下卡片样式仅允许image_top的逻辑
2. 增加卡片样式选项禁用状态与点击拦截
3. 调整设置项样式类与交互逻辑

src/components/uh-article-card/uh-article-card.vue

@@ -111,7 +111,7 @@
 				: 'image_top'
 		}
 		const narrow = isGrid.value || (props.from === 'home' && _layout.home.listLayout === 'double')
-		if (narrow && (raw === 'image_left' || raw === 'image_right')) {
+		if (narrow && raw !== 'image_top') {
 			return 'image_top'
 		}
 		return raw

src/components/uh-settings-popup/uh-settings-popup.vue

@@ -3,10 +3,6 @@
 	import { useSettingStore } from '@/store/setting'
 	import { usePreferenceRows } from '@/hooks/usePreferenceRows'
 	import { useSettingsPopup } from '@/hooks/useSettingsPopup' 
-	import { useDialog } from '@wot-ui/ui'
-
-	const dialog = useDialog()
-
 	const settingStore = useSettingStore()
 
 	const {
@@ -18,6 +14,7 @@
 		handleRevert,
 		handleBoolChange,
 		handleChoose,
+		isCardTypeOptionDisabled,
 	} = usePreferenceRows()
 
 	const { settingsPopupVisible } = useSettingsPopup()
@@ -117,14 +114,17 @@
 									<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'"
+											:class="currentValueOf(row.path) === null ? 'bg-secondary font-bold' : 'border-gray-100 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)">
+											:class="[
+												currentValueOf(row.path) === opt.value ? 'bg-secondary font-bold' : 'border-gray-100 text-gray-500',
+												isCardTypeOptionDisabled(row.path, opt.value) ? 'opacity-40' : ''
+											]"
+											@click="isCardTypeOptionDisabled(row.path, opt.value) ? null : handleInlineChoose(row.path, opt.value)">
 											{{ opt.label }}
 										</view>
 									</view>
@@ -160,19 +160,19 @@
 										<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="row.following ? 'bg-secondary font-bold' : 'text-gray-500'"
+												:class="row.following ? 'bg-secondary font-bold' : 'border-gray-100 text-gray-500'"
 												@click="handleRevert(row.path)">
 												默认
 											</view>
 											<view
 												class="rounded-full px-3 py-1 text-xs uh-global-card-glass shadow-none border"
-												:class="!row.following && row.boolValue ? 'bg-secondary font-bold' : 'text-gray-500'"
+												:class="!row.following && row.boolValue ? 'bg-secondary font-bold' : 'border-gray-100 text-gray-500'"
 												@click="handleBoolChange(row.path, true)">
 												开
 											</view>
 											<view
 												class="rounded-full px-3 py-1 text-xs uh-global-card-glass shadow-none border"
-												:class="!row.following && !row.boolValue ? 'bg-secondary font-bold' : 'text-gray-500'"
+												:class="!row.following && !row.boolValue ? 'bg-secondary font-bold' : 'border-gray-100 text-gray-500'"
 												@click="handleBoolChange(row.path, false)">
 												关
 											</view>

src/hooks/usePreferenceRows.ts

@@ -150,11 +150,31 @@ export function usePreferenceRows() {
 		settingStore.savePreference(buildPatch(path, next));
 	}
 
+	/** 给定页面分组下字段路径,判断该页面列表布局是否为双列 */
+	function isDoubleColumn(path: string[]): boolean {
+		if (path.length >= 2 && path[0] === 'layout') {
+			return prefValueOf(['layout', path[1], 'listLayout']) === 'double';
+		}
+		return false;
+	}
+
+	/** 卡片样式选项是否因双列约束被禁用(双列仅允许 image_top) */
+	function isCardTypeOptionDisabled(path: string[], value: string): boolean {
+		return path[2] === 'cardType' && isDoubleColumn(path) && value !== 'image_top';
+	}
+
 	function handleChoose(path: string[], value: string | null): void {
 		if (value === null) {
 			handleRevert(path);
 		} else {
 			settingStore.savePreference(buildPatch(path, value));
+			// 双列约束:列表布局改为双列时,卡片样式强制为 image_top
+			if (path[0] === 'layout' && path[2] === 'listLayout' && value === 'double') {
+				const cardTypePath = ['layout', path[1], 'cardType'];
+				if (prefValueOf(cardTypePath) !== 'image_top') {
+					settingStore.savePreference(buildPatch(cardTypePath, 'image_top'));
+				}
+			}
 		}
 	}
 
@@ -175,6 +195,8 @@ export function usePreferenceRows() {
 		isFollowing,
 		handleRevert,
 		handleBoolChange,
-		handleChoose
+		handleChoose,
+		isDoubleColumn,
+		isCardTypeOptionDisabled
 	};
 }

src/pages-blog/setting/setting.vue

@@ -27,6 +27,7 @@
 		handleRevert,
 		handleBoolChange,
 		handleChoose,
+		isCardTypeOptionDisabled,
 	} = usePreferenceRows()
 
 	/** 确保启动合并已执行(入口页未跑或 H5 直达时兜底) */
@@ -65,13 +66,14 @@
 	}
 
 	/* ---------------- wd-picker-view 弹层数据 ---------------- */
-	/** 枚举弹层列(首项「跟随站点默认」,空串哨兵映射 null) */
+	/** 枚举弹层列(首项「跟随站点默认」,空串哨兵映射 null;双列约束下卡片样式仅保留 image_top) */
 	const enumColumns = computed(() => {
 		const def = enumSheet.value.def
 		if (!def) { return [] }
+		const options = (def.options || []).filter(opt => !isCardTypeOptionDisabled(def.path, opt.value))
 		return [
 			{ label: '跟随站点默认', value: '' },
-			...(def.options || []).map(opt => ({ label: opt.label, value: opt.value })),
+			...options.map(opt => ({ label: opt.label, value: opt.value })),
 		]
 	})