feat: 实现全站布局偏好系统，支持多页面独立配置

本次提交完成了完整的偏好设置体系重构：
1. 新增preferences.md文档说明布局偏好设计与映射规则
2. 重构布局配置结构，按页面分组管理列表布局与卡片样式
3. 实现后端preferences字段到本地配置的自动映射转换
4. 完成首页、文章列表、归档页的布局动态切换逻辑
5. 重构投票组件样式绑定，改用unocss类名实现样式分离
6. 新增偏好设置页面，支持按页面配置布局参数
7. 兼容旧版布局参数的自动归一化转换
8. 补充完整的单元测试用例覆盖新旧数据迁移场景

src/utils/vote.ts

@@ -25,11 +25,11 @@ export const VOTE_STATES: { NOT_VOTED: VoteState; VOTING: VoteState; VOTED: Vote
 	VOTE_ENDED: 'vote-ended'
 };
 
-/** 投票展示状态(与旧项目 VOTE_STATES 一致:中文 + 颜色) */
-export const VOTE_STATE_LABELS: Record<string, { state: string; color: string }> = {
-	未开始: { state: '未开始', color: 'orange' },
-	进行中: { state: '进行中', color: 'green' },
-	已结束: { state: '已结束', color: 'red' }
+/** 投票展示状态(与旧项目 VOTE_STATES 一致:中文 + unocss 文字/背景色类) */
+export const VOTE_STATE_LABELS: Record<string, { state: string; color: string; bgColor: string }> = {
+	未开始: { state: '未开始', color: 'text-orange-400', bgColor: 'bg-orange-100' },
+	进行中: { state: '进行中', color: 'text-green-400', bgColor: 'bg-green-100' },
+	已结束: { state: '已结束', color: 'text-red-400', bgColor: 'bg-red-100' }
 };
 
 /**
@@ -48,11 +48,12 @@ export function getOrCreateVoteUid(): string {
  * 计算投票展示状态(与旧项目 calcVoteState 一致)
  * 非 custom 期限(permanent 等)直接看 hasEnded;custom 按起止时间判断
  * @param vote 投票对象(含 spec.timeLimit/hasEnded/startDate/endDate)
- * @returns { state: '未开始' | '进行中' | '已结束', color: 'orange' | 'green' | 'red' }
+ * @returns { state: '未开始' | '进行中' | '已结束', color: unocss 文字色类, bgColor: unocss 背景色类 }
  */
 export function calcVoteState(vote: { spec?: { timeLimit?: string; hasEnded?: boolean; startDate?: string; endDate?: string; [key: string]: unknown } }): {
 	state: string;
 	color: string;
+	bgColor: string;
 } {
 	if (vote.spec?.timeLimit !== 'custom') {
 		return vote.spec?.hasEnded ? VOTE_STATE_LABELS['已结束'] : VOTE_STATE_LABELS['进行中'];