feat(sns): 前端新增朋友圈页面并接入候选匹配

- 新增 /sns 页面：时间线列表、账号切换、隐私模式、复制动态 JSON

- 图片预览支持候选匹配切换并保存（localStorage + /api/sns/media_picks）

- 聊天页侧边栏增加头像/朋友圈入口，隐私模式开关持久化（chat/sns 共用）

- app.vue 增加 --dpr 与 sidebar rail CSS 变量，并在 resize 时刷新

- useApi 补充 sns 相关接口封装

frontend/app.vue

@@ -14,12 +14,23 @@
 // So we detect desktop onMounted and update reactively.
 const isDesktop = ref(false)
 
+const updateDprVar = () => {
+  const dpr = window.devicePixelRatio || 1
+  document.documentElement.style.setProperty('--dpr', String(dpr))
+}
+
 onMounted(() => {
   isDesktop.value = !!window?.wechatDesktop
+  updateDprVar()
+  window.addEventListener('resize', updateDprVar)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateDprVar)
 })
 
 const route = useRoute()
-const isChatRoute = computed(() => route.path?.startsWith('/chat'))
+const isChatRoute = computed(() => route.path?.startsWith('/chat') || route.path?.startsWith('/sns'))
 
 const rootClass = computed(() => {
   const base = 'bg-gradient-to-br from-green-50 via-emerald-50 to-green-100'
@@ -34,6 +45,14 @@ const contentClass = computed(() =>
 </script>
 
 <style>
+:root {
+  --dpr: 1;
+  /* Left sidebar rail (chat/sns): icon size + spacing */
+  --sidebar-rail-step: 48px;
+  --sidebar-rail-btn: 32px;
+  --sidebar-rail-icon: 24px;
+}
+
 /* Electron 桌面端使用自绘标题栏（frame: false）。
  * 页面里如果继续用 Tailwind 的 h-screen/min-h-screen（100vh），会把标题栏高度叠加进去，从而出现外层滚动条。
  * 这里把 “screen” 在桌面端视为内容区高度（100%），让标题栏高度自然内嵌在布局里。 */