improvement(ui): 增加年度总结快捷入口并更新首页图标

- 朋友圈页侧边栏新增年度总结入口并高亮当前路由

- 首页年度总结入口图标更新为统计面板样式
This commit is contained in:
2977094657
2026-02-03 16:32:58 +08:00
parent bdd89c681a
commit 2f09aa3dcf
2 changed files with 42 additions and 8 deletions

View File

@@ -68,6 +68,35 @@
</div>
</div>
<!-- 年度总结图标 -->
<div
class="w-full h-[var(--sidebar-rail-step)] flex items-center justify-center cursor-pointer group"
title="年度总结"
@click="goWrapped"
>
<div
class="w-[var(--sidebar-rail-btn)] h-[var(--sidebar-rail-btn)] rounded-md flex items-center justify-center transition-colors bg-transparent group-hover:bg-[#E1E1E1]"
>
<div class="w-[var(--sidebar-rail-icon)] h-[var(--sidebar-rail-icon)]" :class="isWrappedRoute ? 'text-[#07b75b]' : 'text-[#5d5d5d]'">
<svg
class="w-full h-full"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<rect x="4" y="4" width="16" height="16" rx="2" />
<path d="M8 16v-5" />
<path d="M12 16v-8" />
<path d="M16 16v-3" />
</svg>
</div>
</div>
</div>
<!-- 隐私模式按钮 -->
<div
class="w-full h-[var(--sidebar-rail-step)] flex items-center justify-center cursor-pointer group"
@@ -98,19 +127,16 @@
<div v-else-if="isLoading && posts.length === 0" class="text-sm text-gray-500 py-2">加载中</div>
<div v-else-if="posts.length === 0" class="text-sm text-gray-500 py-2">暂无朋友圈数据</div>
<!-- 图片匹配说明实验不代表最终效果 -->
<!-- 图片匹配提示实验功能 -->
<div v-if="!error" class="mb-3 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900">
<div class="font-medium">图片匹配说明实验</div>
<div class="font-medium">图片匹配实验功能</div>
<div class="mt-1 leading-5">
当前优先尝试从本地缓存`cache/YYYY-MM/Sns/Img`解密读取图片并结合动态元信息做匹配
若能拿到 totalSize文件大小会优先在候选中按尺寸一致 + 文件大小最接近时间作为次要参考挑选若缺失则回退到时间接近度 + 图片尺寸 + 同尺寸顺序(N)的启发式规则
该算法可能误判不代表最终效果若出现错图/无法查看请点击图片进入预览候选匹配里手动选择
你的选择会保存在本机下次会自动使用即使已选择仍会持续显示候选供再次切换
图片可能会出现错配或无法显示点击图片进入预览可在候选匹配手动选择你的选择会保存在本机并在下次优先使用
</div>
<label class="mt-2 flex items-start gap-2 select-none">
<input v-model="snsAvoidOtherPicked" type="checkbox" class="mt-[2px]" />
<span class="leading-5">
自动匹配时避开已被你手动指定到其他动态的图片降低重复仅对手动选择过的图片生效
自动匹配时避开已被你手动指定到其他动态的图片降低重复
</span>
</label>
</div>
@@ -385,6 +411,7 @@ const route = useRoute()
const isChatRoute = computed(() => route.path?.startsWith('/chat'))
const isSnsRoute = computed(() => route.path?.startsWith('/sns'))
const isWrappedRoute = computed(() => route.path?.startsWith('/wrapped'))
// 隐私模式(聊天/朋友圈共用本地开关)
const PRIVACY_MODE_KEY = 'ui.privacy_mode'
@@ -1024,6 +1051,10 @@ const goSns = async () => {
await navigateTo('/sns')
}
const goWrapped = async () => {
await navigateTo('/wrapped')
}
watch(
() => selectedAccount.value,
async (v, oldV) => {