mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-20 06:40:49 +08:00
improvement(ui): 增加年度总结快捷入口并更新首页图标
- 朋友圈页侧边栏新增年度总结入口并高亮当前路由 - 首页年度总结入口图标更新为统计面板样式
This commit is contained in:
@@ -53,7 +53,10 @@
|
|||||||
<NuxtLink to="/wrapped"
|
<NuxtLink to="/wrapped"
|
||||||
class="group inline-flex items-center px-12 py-4 bg-white text-[#B37800] border border-[#F2AA00] rounded-lg text-lg font-medium hover:bg-[#F7F7F7] transform hover:scale-105 transition-all duration-200">
|
class="group inline-flex items-center px-12 py-4 bg-white text-[#B37800] border border-[#F2AA00] rounded-lg text-lg font-medium hover:bg-[#F7F7F7] transform hover:scale-105 transition-all duration-200">
|
||||||
<svg class="w-6 h-6 mr-3 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-6 h-6 mr-3 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 3v18m9-9H3"/>
|
<rect x="4" y="4" width="16" height="16" rx="2" stroke-width="2.5" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M8 16v-5" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 16v-8" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M16 16v-3" />
|
||||||
</svg>
|
</svg>
|
||||||
<span>年度总结</span>
|
<span>年度总结</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|||||||
@@ -68,6 +68,35 @@
|
|||||||
</div>
|
</div>
|
||||||
</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
|
<div
|
||||||
class="w-full h-[var(--sidebar-rail-step)] flex items-center justify-center cursor-pointer group"
|
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="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-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 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">
|
<div class="mt-1 leading-5">
|
||||||
当前优先尝试从本地缓存(`cache/YYYY-MM/Sns/Img`)中解密读取图片,并结合动态元信息做匹配:
|
图片可能会出现错配或无法显示。点击图片进入预览,可在“候选匹配”中手动选择;你的选择会保存在本机并在下次优先使用。
|
||||||
若能拿到 totalSize(文件大小)会优先在候选中按“尺寸一致 + 文件大小最接近(时间作为次要参考)”挑选;若缺失,则回退到“时间接近度 + 图片尺寸 + 同尺寸顺序(N)”的启发式规则。
|
|
||||||
该算法可能误判,不代表最终效果;若出现错图/无法查看,请点击图片进入预览,在“候选匹配”里手动选择。
|
|
||||||
你的选择会保存在本机,下次会自动使用;即使已选择,仍会持续显示候选供再次切换。
|
|
||||||
</div>
|
</div>
|
||||||
<label class="mt-2 flex items-start gap-2 select-none">
|
<label class="mt-2 flex items-start gap-2 select-none">
|
||||||
<input v-model="snsAvoidOtherPicked" type="checkbox" class="mt-[2px]" />
|
<input v-model="snsAvoidOtherPicked" type="checkbox" class="mt-[2px]" />
|
||||||
<span class="leading-5">
|
<span class="leading-5">
|
||||||
自动匹配时,避开已被你手动指定到其他动态的图片(降低重复率;仅对“手动选择过”的图片生效)
|
自动匹配时,避开已被你手动指定到其他动态的图片(降低重复)
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@@ -385,6 +411,7 @@ const route = useRoute()
|
|||||||
|
|
||||||
const isChatRoute = computed(() => route.path?.startsWith('/chat'))
|
const isChatRoute = computed(() => route.path?.startsWith('/chat'))
|
||||||
const isSnsRoute = computed(() => route.path?.startsWith('/sns'))
|
const isSnsRoute = computed(() => route.path?.startsWith('/sns'))
|
||||||
|
const isWrappedRoute = computed(() => route.path?.startsWith('/wrapped'))
|
||||||
|
|
||||||
// 隐私模式(聊天/朋友圈共用本地开关)
|
// 隐私模式(聊天/朋友圈共用本地开关)
|
||||||
const PRIVACY_MODE_KEY = 'ui.privacy_mode'
|
const PRIVACY_MODE_KEY = 'ui.privacy_mode'
|
||||||
@@ -1024,6 +1051,10 @@ const goSns = async () => {
|
|||||||
await navigateTo('/sns')
|
await navigateTo('/sns')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const goWrapped = async () => {
|
||||||
|
await navigateTo('/wrapped')
|
||||||
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => selectedAccount.value,
|
() => selectedAccount.value,
|
||||||
async (v, oldV) => {
|
async (v, oldV) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user