From 41a2b546b812ba6d20713247dc12e13e66e48789 Mon Sep 17 00:00:00 2001
From: 2977094657 <2977094657@qq.com>
Date: Sun, 21 Dec 2025 20:54:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(chat):=20=E8=81=8A=E5=A4=A9=E9=A1=B5?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=8F=AF=E9=80=89=20username=20=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将聊天页迁移为 pages/chat/[[username]].vue（/chat 与 /chat/:username）

- 选中会话时同步 URL，支持路由直达指定会话

- 文件消息卡片补充文件类型图标与 WeChat PC 标识资源
---
 .../images/wechat/WeChat-Icon-Logo.wine.svg   |   1 +
 frontend/assets/images/wechat/excel.png       | Bin 0 -> 1101 bytes
 frontend/assets/images/wechat/pdf.png         | Bin 0 -> 1010 bytes
 frontend/assets/images/wechat/word.png        | Bin 0 -> 1330 bytes
 frontend/assets/images/wechat/zip.png         | Bin 0 -> 829 bytes
 .../pages/{chat.vue => chat/[[username]].vue} | 334 +++++++++++++++---
 6 files changed, 283 insertions(+), 52 deletions(-)
 create mode 100644 frontend/assets/images/wechat/WeChat-Icon-Logo.wine.svg
 create mode 100644 frontend/assets/images/wechat/excel.png
 create mode 100644 frontend/assets/images/wechat/pdf.png
 create mode 100644 frontend/assets/images/wechat/word.png
 create mode 100644 frontend/assets/images/wechat/zip.png
 rename frontend/pages/{chat.vue => chat/[[username]].vue} (89%)

diff --git a/frontend/assets/images/wechat/WeChat-Icon-Logo.wine.svg b/frontend/assets/images/wechat/WeChat-Icon-Logo.wine.svg
new file mode 100644
index 0000000..d260f0e
--- /dev/null
+++ b/frontend/assets/images/wechat/WeChat-Icon-Logo.wine.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 52 43"><defs><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="scale(1.06228 .94137)" id="a" y2=".1504" x2="17.2422" y1="32.4312" x1="17.2422"><stop offset="0%" stop-color="#78D431"/><stop offset="100%" stop-color="#9EEE69"/><stop offset="100%" stop-color="#9EEE69"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="scale(1.05667 .94637)" id="b" y2="14.6966" x2="33.4727" y1="41.634" x1="33.4727"><stop offset="0%" stop-color="#E4E6E6"/><stop offset="100%" stop-color="#F5F5FF"/></linearGradient></defs><g fill="none"><path fill="url(#a)" d="M0 15.3063c0 4.5919 2.4846 8.787 6.3245 11.5648.3388.2267.5082.5669.5082 1.0204 0 .1134-.0565.2835-.0565.3968-.2823 1.1338-.7906 3.0046-.847 3.0613-.0565.17-.113.2834-.113.4535 0 .3402.2824.6236.6212.6236.113 0 .2259-.0567.3388-.1134l4.0093-2.3243c.2823-.17.6211-.2834.96-.2834.1693 0 .3952 0 .5646.0567 1.8635.5669 3.8963.8503 5.9857.8503 10.1078 0 18.2957-6.8595 18.2957-15.3063S28.4035 0 18.2958 0C8.1879 0 0 6.8595 0 15.3063"/><path fill="url(#b)" d="M35.3424 39.6205c1.7463 0 3.4363-.2284 4.9572-.6854.1127-.057.2817-.057.4507-.057.2817 0 .5633.1142.7887.2284l3.3236 1.942c.1126.057.169.1142.2816.1142.2817 0 .507-.2285.507-.514 0-.1143-.0563-.2285-.0563-.3999 0-.0571-.4507-1.5992-.676-2.5702-.0563-.1142-.0563-.2285-.0563-.3427 0-.3427.169-.6283.4506-.8568 3.211-2.3417 5.239-5.8258 5.239-9.7097 0-7.0824-6.8163-12.851-15.2098-12.851s-15.2097 5.7115-15.2097 12.851c0 7.0824 6.8162 12.8511 15.2097 12.8511z"/><path fill="#187E28" d="M14.5484 10.3647c0 1.3223-1.0389 2.369-2.3512 2.369-1.3124 0-2.3513-1.0467-2.3513-2.369 0-1.3223 1.039-2.369 2.3513-2.369 1.3123 0 2.3512 1.0467 2.3512 2.369m12.1972 0c0 1.3223-1.039 2.369-2.3513 2.369-1.3123 0-2.3512-1.0467-2.3512-2.369 0-1.3223 1.039-2.369 2.3512-2.369 1.3124 0 2.3513 1.0467 2.3513 2.369"/><path fill="#858C8C" d="M38.502 22.8023c0 1.1517.9143 2.073 2.0573 2.073 1.143 0 2.0573-.9213 2.0573-2.073 0-1.1516-.9144-2.0729-2.0573-2.0729-1.143 0-2.0574.9213-2.0574 2.073m-10.1398 0c0 1.1516.9144 2.0729 2.0573 2.0729 1.143 0 2.0574-.9213 2.0574-2.073 0-1.1516-.9144-2.0729-2.0574-2.0729-1.143 0-2.0573.9213-2.0573 2.073"/></g></svg>
\ No newline at end of file
diff --git a/frontend/assets/images/wechat/excel.png b/frontend/assets/images/wechat/excel.png
new file mode 100644
index 0000000000000000000000000000000000000000..acf6fa1bd6bf112622846e25d8454746d8fc0ba5
GIT binary patch
literal 1101
zcmV-T1hV^yP)<h;3K|Lk000e1NJLTq001Ze001`#1^@s6etrle00001b5ch_0Itp)
z=>Px(2T4RhRA@u(nQ2TDK^TVLZE58cq96zYDptb}8*h!lL@^#9Q9;2A55%M3fr2UZ
zKtaVoL<FN&5yW^SiW(FpXcKRVXG}a2uf%wQcoap%W6ccG*nqO_Zd+oyzna<kzVGQX
zGdnw3hGkh6E%;&x;OgUQ<X<>u5=<`_H>6ESK!B{LQTdq)Z57)uWs*_BT!LELI-rxA
z7gQm$F~CpGB}A_ebN}TNHfV#w;6Sbc1klIT6JkaLRmd!ZA(?wG9<#xjF<k2z+^+$U
z1lov1NE#D^UcUaE^OzN|9#V{?(F*kH$PLo$fDMo-Ve=vHAZym7MF0tvRBVG)W9LEc
z{clK%0TReoHWI8Ew*da_JO9<BMF9zwokWV1(E0H9Y#P$yfDMqT;fo+^=hMh!ivT24
z4pKWh+%k84Nao(l$87Kh(>({JVhLm(zF-)p*%j;1$_{J7^dU{Ylhm(R37qX60W=Tk
z=H!Bt@oL?lF}cBJwKdV<j4~H~?Y!w7lg~k8080|ox<`){&}z^a1AJqwbI@v#uK~XC
z|Mwh}h;0xXI8nFx=bb-->e`w{((I+Sm@_z>wtxLz2eqbvvsm5+$?<XS@8So`Phn|c
zR-@vp#>Qesz!=(|RJ0j;FBh8+kXS5J?tpJwPg*o=QygwRd!Pg8;nNL83$m%@>rd|@
zd`moMIMR`~L6Su7-4#a{W<$h?@TBrNf-)4S`|%B8kqBkVTy%2vLQP#QhOeKE7w;>~
z4@fF1gJ&WpZ~`r!UA7llrF#%JEE0=GOr>qh4`*Zl)e?i?1T#nyk)bY$SEGx&55E8W
zfjRlf$caj(hx5yiZez-}M1$c31tiJHk?}<Q7CO`o7a7_iX;G-qzOy_aAxIn*4aJZM
z9gMOd6NT4Gje-;0AW4`Py&8f3{dGX9!i^{>Kix6_gXDv-b=nF&n9pCoU}$<Y-e{|g
zf)wO2Ln=Gj+C!tthpVFtUVnUxb;UW@6uFE-U3z#6k=s?41<ahJL}>4!6oRZ+vU1ha
zlQ6P-0Bu{mKOM(zY7B-H#Nfa#J+M!aPKy`aID>=(>*;S|Q={4mCtC+p*M6p}x$4tL
zgCKbWk{5xqiFxpFcE#II9}t)prT4-R(QgFOBkH#|&HZvj=dCm^VCwidOdb$Si^lF=
zi&J+lGy*snn}PnFyZ^J#->7*R{PQ*HLyZ=@E*@{PPKP$`7~f|&y;oWN9{aAG;B1i>
zAm=JPI$8mF$fKcFgI0rl4e*WEn}ZKtJ!MB`%;lR?(D>3NIq2%)OLH=n+IMW<l!<~C
z;G67v@*%W!bgl;^AGA}8bC7%P2;aPd#FNAR(vVrYToh1{%qB`=1>`HX#T)zuC-X6S
T^{EQX00000NkvXXu0mjf{e=81

literal 0
HcmV?d00001

diff --git a/frontend/assets/images/wechat/pdf.png b/frontend/assets/images/wechat/pdf.png
new file mode 100644
index 0000000000000000000000000000000000000000..35dcd4a1f25040cae2a59e013778ef863a5f50ea
GIT binary patch
literal 1010
zcmV<O0}cF%P)<h;3K|Lk000e1NJLTq001Ze001@!1^@s6wIbVw00001b5ch_0Itp)
z=>Px&tVu*cRA@u(nOjWLU=+vyU0cRL*8v$L1_3cqG#YO&yy%P3_+;?Py9lTO!Mh+{
zo-{^djF)H>Q4?dLf<9<?Q69V`DvG{%2?`^csKK!+8#uRat?37rv4Ja;!V=rZ_B*G)
z{?GrM_S+~)k|f0OLCJugvuDtIr$HA?Q@R7Tox5OOxM)=QsgT<(b*^7Cs$exiRPrP+
znVGPblp<l?d^I71)=+}8U2+u{jW|$k00Epb1)xo^7LOc~6584%SLsHz_Z#s#1yGKp
zX>eQ0z|NknI?wn5%2*5y>*g{fsDvDUz<x+uc?FmmGh-?_F@Q1_%YrK_2O9%&;s60q
zYy!B-N-(+8hgEVy0ST4a3~p-$*kK?i9<U!WW!nzW+1XJ_#s{EW?j#Git=qsvKvF_`
zo8&6dZw|`Mz-H$F6cxK;Ef#PUgCTW)lMpJFg=x}cAT}dRwp7?JTvQ%Le+6Ue7QMh;
zcNI)l7P+9i2S>pN`-NI%^caAKf}>GDYmDJRLqV+yXpJ{KXeg*v0j=?>J;+SUg=O&)
z<$h8i0O8{Y_+P&QL=h${hvb4)gLp!&@A%d900;!gd6UhC<dp?c%%abS-di_@d=}M!
zmZi&JtEz_Z?kyxCNRlzxSrEIs(N$3nIyDvYr%|w@1ER+R+Tj45k%7>+ui*DpA^7<-
zn4D>_*VZA};e_b%DnMe77e5Z}9~;2V!nF|H?mk6QQsKDO0MFUe@V{z-{n8ciHP!Gx
zdrGd$fGITx014<S-=YBW)qCM@ey*zeBUVuUaY^KPC3(i(M)clpfUoI3Q7{}(UX(Cr
zF49h(Lf7U}NP<8V<g50;|DstRz#oSWK=gWH;y5HNUjcJ|KKR``5pua;zZ?xnC0dYi
zuMt0w9EQ-|He`wYEich?{o2@+Sjp1gBs~rF`2FZ1n5kL+20V5YLTf7l^ff&|=*t%+
zmEdg0?<bGP1~A-%;Th#EVx$L2iRUjs+VK-`Z?7cHLrOfJ9{dX_Z*0OnNT)jpoVBP3
z;x8Xu#T&q6PSxLokxdc_7+EJWW@@St{Pby{i}h#{lP!hp^aF3-0KvXF7=BP@GuXUY
zQRf5i-zkHdN=yVhGY_)oB=5i+{8u}x9y6+Df)0xeK&_%03K|M(RX}UJ;lck*L8nua
zU+VF6*lRC?$;lx|REX!L&ULHfi4TtYJ7lv(0LdTP=g*<H{$^Z2Ca*7qwPcgRLIC4}
gY#0awP-}Jm0F#Z0eOaP4=Kufz07*qoM6N<$f_yE=+5i9m

literal 0
HcmV?d00001

diff --git a/frontend/assets/images/wechat/word.png b/frontend/assets/images/wechat/word.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ef83dc6a2481a9ad70dd9e6bd22824eeda2878a
GIT binary patch
literal 1330
zcmV-21<m@2P)<h;3K|Lk000e1NJLTq001ih001`#1^@s6l}WQ800001b5ch_0Itp)
z=>Px(>`6pHRA@u(nt4#vWf;f5%L2ku5TN7^At4@v2x>`OD^`O9ib;W33UW)giU<jW
zWKN?59+iwzBd~&H0U4rMM1|UL=wu~RifEuU(h!G~p^QZHyv%O<lXWllfM(yncAocm
zKJRy*_j!+9-q6s{5XMR2ja%4l#q}urtXU^I3+=72<@ts1@o?05e5ta3^!DSi<Wh|X
zQr7WafjOLoHb{x`hSw~ivgUH@rLZkmx)HvyLZd-c=|r$j_gjN+!ozwEfu*n)+Pe^u
zR;h|#joL_HsWYE%g7jEl%$e?>)>sCCB|=j^4{5P}Y5^MzRsx)nAcFhUi7F{<P*@@~
zGd01ccz>0E4Gv4d=4O0kC5kZ9*-oLtV*-{4EzJ3#kWd6XW?&`2*~tNLb-Yh;p4DgS
zQuJL5EX<IVB$5mK-=@&sjqo(xZ3?uIra9Sy2cFWEFR(OYF?^@OdfUMyE8p5`0(i=K
zVQ*uJ^4xIF#Pp`DQaR-`sM@g{E;8|}w*{sNY(;K3X2_&7BdjJW%IjlPR$EHmIgU|T
zqp|>uVK64cV8#?X*xWOLv3+;G1B3r?A9Jj&%rVp1p4B&B>O}vo+njmOnbl+3@FlUc
z=Wn!KyRLAaqY8u6XdlFcdN2noGY{ijYbVE9)Z*DlkMU);jk{`by#6w${&6p7>`o10
zw*1mY6d(Cfcd-6*9>Cs=5a!@5aRbCh&vBgXc{LaT^PHHi@~aEjyzd03enXTuVwZX{
z8y!bm+PifJOJ~w1aXh<5*EY3bU4D(!89iP!iR0LPib_Y<4J>-$AP1&&>oRur?z-NO
zN7pES{TWplkmvo`q407SqW8~RSdb`|!pwIQq9`Yn1Gi-DAzbO`V>X&ZV@VvFX!Xff
zY<l-=g{o5Js9}?ynu}MS@nVi-VP1-ykL2)qIP=prOtKZQcda+xKZTEKer9bScAJdi
zoTcn@X2Cb8s=KIrSa;V+`0&jz<|wP64xiSwu+L>%m%($o19l#4f`hF9t3qaTLM1V5
zF4jIfJjsPg2hiPjQ}?js;oJQ&pfpucdmcH3CqeI6WTWc}J?>4k6<}XR2uod$tS(|u
zd(xjkz(Z4T>DL~FZ75d?s+BOHLGsrJBFM)Dzx>vVCsRH~ptlQlrUWvzNHtSFEyOtX
z+9FAD4aKprvNS{Kv1V*9sn;Lu@<2CaCyAItQG%GoaO5I4PP&q$v3CxgVc~E%KZ3P?
zaocg6ID1upu#@erP*bpS*!lL)@mit?WLuY4gWA(=%)TOM7P1oj*@8QIsui2pEWqu-
zA^61=kJ#DnMn39nAQ|}B+bh`PFzr&ozEj!O>l0Iin*)Qa2`#ePy{j1DmyMSZ?B~kB
z<6f^;NmZ@IEDc0z(pN7j@<5L4io}CL8)+K~iNeaW`iGS)Dv9SEWlbom`hf$Iw%P~L
zONP%9ROFo}6p?E!3}n+4Iea>`92c+laD4lEI-)RhF|+mE7=V9#iOQ;KH4JF5Ezbq8
zxc#et059i$F#?2A7{OBh{l4XQ?Ec`i;b7JBtU+U~g@FdX)$U@1Ra-I@I~bK!Q7E;W
z{XdkYgieWlER|34BG~T`k|KRfR`n96&&kxi7Y#dWi;=Ko$ve=1l4|btTAy&TzUazM
oS9jSme*bo2C>2%pJFb-d7reSHiQEEXy8r+H07*qoM6N<$g7R*Q>;M1&

literal 0
HcmV?d00001

diff --git a/frontend/assets/images/wechat/zip.png b/frontend/assets/images/wechat/zip.png
new file mode 100644
index 0000000000000000000000000000000000000000..4375d45459cd233677372c0da4ea9c7d05d3f97b
GIT binary patch
literal 829
zcmV-D1H$}?P)<h;3K|Lk000e1NJLTq001Ze001@!1^@s6wIbVw00001b5ch_0Itp)
z=>Px%_en%SRA@tE{Qv*|e}+K}822t{`+six5{jHyxa0x@GYc!jukT+N7FL8Xe0=#B
zY#y($B!fprGlRUYCE4aPc86<G9D+qlFEB7Mvw|J5x;2I2;pO9CHaizDgP^25gMD-{
zgRGVrS&pQ+0|mro8JL)u8SJ8q$Z{k_4wO>WXJBS!V+bgj%<$^L4ThiJJ~Ql?Uc>O?
z>qmG9f*c3}jLggoPVp5CQmO_dg(TSy)Ufhm@X6~2TlV(pU55F^ei#;mq8R2tkR%f`
z3xi{PIZ2Kr+kyJ7;S8?HbtE|u=1AwH8U_g^ZK6VwYzOK(1v9v(H9;Ks<SxVf62c(}
za}hHO8-r6~6;X~P+kv3yGjNRnr$K$^P=<?pSA)~w`JKxc{{8)fkp|I&i<y<3!8N&-
zK~!EHZ%C5uKx9*4<se9GMPod}lj~;)IuN9Qg^h#3C8-9lBdOv*eB~f=Cczd|AV<2T
zH82QED`O2wsyGl=O@f|_am6JY2RDODN-b7LlI=iQEmMY&s@dQw4p$}t$qCD<FfcMO
z63nrzoZR3vi5`+<JCK-S2IMM`BiXt685jw>k%5a}gdx6jEsAGo?m&V;ho&H@cQb>K
zv=UsDYzKlG0nUll44^WNPehVo$BY_qF$1ddC;{=E>riqv*$zZ@1adB3TouOf^4?Xl
z-AHo>A~(0laV1S0h+I&wY)W8weC;$jZUgI~i32SH)4?qj^s0^=SJK3R<TwPEo{{4~
z<eCH)8t9!Sazd7BA&6X)AUkBx<l<2WLZgN3nq)KtsS$$uPN58oDnsCTByavHhK+ss
z@R5Z9&&8t-1dT|LJ9q@jB!fBxk%vBz)7qeH50aA^MjH#%3^io4sMc5*bs(iR$!G|U
zh9H?~U^Ew#8E|lIqaipNf|P~;rTPbb8cgWk$RHxC0{17`Eow?b3YY$@S%(?8_=FG+
z+`p*n|Cy}|Xk{Ns=9>B@GT29#py**7^h*Lp9Y|6nV=4v!mI=6SvuTwa00000NkvXX
Hu0mjfk9=Y9

literal 0
HcmV?d00001

diff --git a/frontend/pages/chat.vue b/frontend/pages/chat/[[username]].vue
similarity index 89%
rename from frontend/pages/chat.vue
rename to frontend/pages/chat/[[username]].vue
index 0b18b5b..741547f 100644
--- a/frontend/pages/chat.vue
+++ b/frontend/pages/chat/[[username]].vue
@@ -201,16 +201,20 @@
                     :from="message.from"
                   />
                   <div v-else-if="message.renderType === 'file'"
-                    class="max-w-80 py-2.5 pr-2 pl-4 flex items-start bg-white space-x-2.5 msg-radius cursor-pointer border border-neutral-200 hover:bg-gray-50 transition-colors"
+                    class="wechat-redpacket-card wechat-special-card wechat-file-card msg-radius"
+                    :class="message.isSent ? 'wechat-special-sent-side' : ''"
                     @click="onFileClick(message)"
                     @contextmenu="openMediaContextMenu($event, message, 'file')">
-                    <div class="flex-1 min-w-0">
-                      <h4 class="break-words font-medium text-sm text-gray-900">{{ message.title || message.content }}</h4>
-                      <small class="text-neutral-500 text-xs" v-if="message.fileSize">{{ formatFileSize(message.fileSize) }}</small>
+                    <div class="wechat-redpacket-content">
+                      <div class="wechat-redpacket-info wechat-file-info">
+                        <span class="wechat-file-name">{{ message.title || message.content || '文件' }}</span>
+                        <span class="wechat-file-size" v-if="message.fileSize">{{ formatFileSize(message.fileSize) }}</span>
+                      </div>
+                      <img :src="getFileIconUrl(message.title)" alt="" class="wechat-file-icon" />
                     </div>
-                    <div class="shrink-0 w-10 h-10 flex items-center justify-center">
-                      <!-- 根据文件类型显示图标 -->
-                      <component :is="getFileIcon(message.title || message.content)" class="w-8 h-8" />
+                    <div class="wechat-redpacket-bottom wechat-file-bottom">
+                      <img :src="wechatPcLogoUrl" alt="" class="wechat-file-logo" />
+                      <span>微信电脑版</span>
                     </div>
                   </div>
                   <div v-else-if="message.renderType === 'image'"
@@ -333,13 +337,13 @@
                     </div>
                   </div>
                   <!-- 红包消息 - 微信风格橙色卡片 -->
-                  <div v-else-if="message.renderType === 'redPacket'" class="wechat-redpacket-card msg-radius"
-                    :class="{ 'wechat-redpacket-received': message.redPacketReceived }">
+                  <div v-else-if="message.renderType === 'redPacket'" class="wechat-redpacket-card wechat-special-card msg-radius"
+                    :class="[{ 'wechat-redpacket-received': message.redPacketReceived }, message.isSent ? 'wechat-special-sent-side' : '']">
                     <div class="wechat-redpacket-content">
                       <img src="/assets/images/wechat/wechat-trans-icon3.png" v-if="!message.redPacketReceived" class="wechat-redpacket-icon" alt="">
                       <img src="/assets/images/wechat/wechat-trans-icon4.png" v-else class="wechat-redpacket-icon" alt="">
                       <div class="wechat-redpacket-info">
-                        <span class="wechat-redpacket-text">{{ message.content || '恭喜发财，大吉大利' }}</span>
+                        <span class="wechat-redpacket-text">{{ getRedPacketText(message) }}</span>
                         <span class="wechat-redpacket-status" v-if="message.redPacketReceived">已领取</span>
                       </div>
                     </div>
@@ -419,16 +423,60 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick, defineComponent, h } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, nextTick, defineComponent, h } from 'vue'
+
+definePageMeta({
+  key: 'chat'
+})
 
 import { useApi } from '~/composables/useApi'
 import { parseTextWithEmoji } from '~/utils/wechat-emojis'
+import wechatPcLogoUrl from '~/assets/images/wechat/WeChat-Icon-Logo.wine.svg'
+import zipIconUrl from '~/assets/images/wechat/zip.png'
+import pdfIconUrl from '~/assets/images/wechat/pdf.png'
+import wordIconUrl from '~/assets/images/wechat/word.png'
+import excelIconUrl from '~/assets/images/wechat/excel.png'
+
+// 根据文件名获取对应的图标URL
+const getFileIconUrl = (fileName) => {
+  if (!fileName) return zipIconUrl
+  const ext = String(fileName).split('.').pop()?.toLowerCase() || ''
+  switch (ext) {
+    case 'pdf':
+      return pdfIconUrl
+    case 'doc':
+    case 'docx':
+      return wordIconUrl
+    case 'xls':
+    case 'xlsx':
+    case 'csv':
+      return excelIconUrl
+    case 'zip':
+    case 'rar':
+    case '7z':
+    case 'tar':
+    case 'gz':
+    default:
+      return zipIconUrl
+  }
+}
 
 // 设置页面标题
 useHead({
   title: '聊天记录查看器 - 微信数据分析助手'
 })
 
+const route = useRoute()
+
+const routeUsername = computed(() => {
+  const raw = route.params.username
+  return (Array.isArray(raw) ? raw[0] : raw) || ''
+})
+
+const buildChatPath = (username) => {
+  return username ? `/chat/${encodeURIComponent(username)}` : '/chat'
+}
+
 // 响应式数据
 const selectedContact = ref(null)
 
@@ -611,23 +659,55 @@ const messages = computed(() => {
   return allMessages.value[selectedContact.value.username] || []
 })
 
-const formatTimeDivider = (ts) => {
+// 智能时间格式化：今天显示时间，昨天显示"昨天 HH:MM"，本周显示"星期X HH:MM"，本年显示"MM月DD日 HH:MM"，跨年显示"YYYY年MM月DD日 HH:MM"
+const formatSmartTime = (ts) => {
   if (!ts) return ''
   try {
     const d = new Date(Number(ts) * 1000)
     const now = new Date()
     const hh = String(d.getHours()).padStart(2, '0')
     const mm = String(d.getMinutes()).padStart(2, '0')
-    const sameDay = d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && d.getDate() === now.getDate()
-    if (sameDay) return `${hh}:${mm}`
-    const m = String(d.getMonth() + 1).padStart(2, '0')
-    const dd = String(d.getDate()).padStart(2, '0')
-    return `${m}-${dd} ${hh}:${mm}`
+    const timeStr = `${hh}:${mm}`
+
+    // 计算日期差异（基于日历日期，而非24小时）
+    const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const targetStart = new Date(d.getFullYear(), d.getMonth(), d.getDate())
+    const dayDiff = Math.floor((todayStart - targetStart) / (1000 * 60 * 60 * 24))
+
+    // 今天
+    if (dayDiff === 0) {
+      return timeStr
+    }
+
+    // 昨天
+    if (dayDiff === 1) {
+      return `昨天 ${timeStr}`
+    }
+
+    // 本周内（2-6天前，显示星期）
+    if (dayDiff >= 2 && dayDiff <= 6) {
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      return `${weekDays[d.getDay()]} ${timeStr}`
+    }
+
+    // 本年内
+    const month = d.getMonth() + 1
+    const day = d.getDate()
+    if (d.getFullYear() === now.getFullYear()) {
+      return `${month}月${day}日 ${timeStr}`
+    }
+
+    // 跨年
+    return `${d.getFullYear()}年${month}月${day}日 ${timeStr}`
   } catch {
     return ''
   }
 }
 
+const formatTimeDivider = (ts) => {
+  return formatSmartTime(ts)
+}
+
 const formatMessageTime = (ts) => {
   if (!ts) return ''
   try {
@@ -672,6 +752,12 @@ const formatTransferAmount = (amount) => {
   return s.replace(/[￥¥]/g, '').trim()
 }
 
+const getRedPacketText = (message) => {
+  const text = String(message?.content ?? '').trim()
+  if (!text || text === '[Red Packet]') return '恭喜发财，大吉大利'
+  return text
+}
+
 // 文件类型图标组件
 const FileIconPdf = defineComponent({
   render() {
@@ -845,9 +931,38 @@ const hasMoreMessages = computed(() => {
 // 已移除切换标签逻辑
 
 // 选择联系人
-const selectContact = (contact) => {
+const selectContact = async (contact, options = {}) => {
+  if (!contact) return
   selectedContact.value = contact
-  loadMessages({ username: contact.username, reset: true })
+  const username = contact?.username || ''
+  if (!username) return
+  if (options.syncRoute !== false && username) {
+    const current = routeUsername.value || ''
+    if (current !== username) {
+      await navigateTo(buildChatPath(username), { replace: options.replaceRoute !== false })
+    }
+  }
+  loadMessages({ username, reset: true })
+}
+
+const applyRouteSelection = async () => {
+  if (!contacts.value || contacts.value.length === 0) {
+    selectedContact.value = null
+    return
+  }
+
+  const requested = routeUsername.value || ''
+  if (requested) {
+    const matched = contacts.value.find((c) => c.username === requested)
+    if (matched) {
+      if (selectedContact.value?.username !== matched.username) {
+        await selectContact(matched, { syncRoute: false })
+      }
+      return
+    }
+  }
+
+  await selectContact(contacts.value[0], { syncRoute: true, replaceRoute: true })
 }
 
 // 已移除样式选择逻辑
@@ -918,9 +1033,7 @@ const loadSessionsForSelectedAccount = async () => {
   messagesError.value = ''
   selectedContact.value = null
 
-  if (contacts.value.length > 0) {
-    selectContact(contacts.value[0])
-  }
+  await applyRouteSelection()
 }
 
 const onAccountChange = async () => {
@@ -1163,6 +1276,15 @@ const refreshSelectedMessages = async () => {
   await loadMessages({ username: selectedContact.value.username, reset: true })
 }
 
+watch(
+  routeUsername,
+  async () => {
+    if (isLoadingContacts.value) return
+    await applyRouteSelection()
+  },
+  { immediate: true }
+)
+
 const autoLoadReady = ref(true)
 
 const onMessageScroll = async () => {
@@ -1516,9 +1638,32 @@ const LinkCard = defineComponent({
   color: #1a1a1a;
 }
 
+/* 统一特殊消息尾巴（红包 / 文件等） */
+.wechat-special-card {
+  position: relative;
+  overflow: visible;
+}
+
+.wechat-special-card::after {
+  content: '';
+  position: absolute;
+  top: 16px;
+  left: -4px;
+  width: 10px;
+  height: 10px;
+  background-color: inherit;
+  transform: rotate(45deg);
+  border-radius: 2px;
+}
+
+.wechat-special-sent-side::after {
+  left: auto;
+  right: -4px;
+}
+
 /* 转账消息样式 - 微信风格 */
 .wechat-transfer-card {
-  width: 240px;
+  width: 210px;
   background: #f79c46;
   border-radius: var(--message-radius);
   overflow: visible;
@@ -1545,8 +1690,8 @@ const LinkCard = defineComponent({
 .wechat-transfer-content {
   display: flex;
   align-items: center;
-  padding: 12px 14px;
-  min-height: 56px;
+  padding: 10px 12px;
+  min-height: 58px;
 }
 
 .wechat-transfer-icon {
@@ -1583,11 +1728,22 @@ const LinkCard = defineComponent({
 }
 
 .wechat-transfer-bottom {
-  height: 24px;
+  height: 27px;
   display: flex;
   align-items: center;
-  padding: 0 14px;
-  border-top: 1px solid rgba(255,255,255,0.2);
+  padding: 0 12px;
+  border-top: none;
+  position: relative;
+}
+
+.wechat-transfer-bottom::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 13px;
+  right: 13px;
+  height: 1px;
+  background: rgba(255,255,255,0.2);
 }
 
 .wechat-transfer-bottom span {
@@ -1633,30 +1789,18 @@ const LinkCard = defineComponent({
 
 /* 红包消息样式 - 微信风格 */
 .wechat-redpacket-card {
-  width: 240px;
+  width: 210px;
   background: #fa9d3b;
   border-radius: var(--message-radius);
-  overflow: hidden;
+  overflow: visible;
   position: relative;
 }
 
-.wechat-redpacket-card::after {
-  content: '';
-  position: absolute;
-  top: 16px;
-  left: -4px;
-  width: 10px;
-  height: 10px;
-  background: #fa9d3b;
-  transform: rotate(45deg);
-  border-radius: 2px;
-}
-
 .wechat-redpacket-content {
   display: flex;
   align-items: center;
-  padding: 12px 14px;
-  min-height: 56px;
+  padding: 10px 12px;
+  min-height: 58px;
 }
 
 .wechat-redpacket-icon {
@@ -1689,11 +1833,22 @@ const LinkCard = defineComponent({
 }
 
 .wechat-redpacket-bottom {
-  height: 24px;
+  height: 27px;
   display: flex;
   align-items: center;
-  padding: 0 14px;
-  border-top: 1px solid rgba(255,255,255,0.2);
+  padding: 0 12px;
+  border-top: none;
+  position: relative;
+}
+
+.wechat-redpacket-bottom::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 13px;
+  right: 13px;
+  height: 1px;
+  background: rgba(255,255,255,0.2);
 }
 
 .wechat-redpacket-bottom span {
@@ -1706,10 +1861,6 @@ const LinkCard = defineComponent({
   background: #f8e2c6;
 }
 
-.wechat-redpacket-received::after {
-  background: #f8e2c6;
-}
-
 .wechat-redpacket-received .wechat-redpacket-text,
 .wechat-redpacket-received .wechat-redpacket-status {
   color: #b88550;
@@ -1719,6 +1870,85 @@ const LinkCard = defineComponent({
   color: #c9a67a;
 }
 
+/* 文件消息样式 - 基于红包样式覆盖 */
+.wechat-file-card {
+  width: 210px;
+  background: #fff;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.wechat-file-card .wechat-redpacket-content {
+  padding: 10px 12px;
+  min-height: 58px;
+}
+
+.wechat-file-card .wechat-redpacket-bottom {
+  height: 27px;
+  padding: 0 12px;
+  border-top: none;
+  position: relative;
+}
+
+.wechat-file-card .wechat-redpacket-bottom::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 13px;
+  right: 13px;
+  height: 1.5px;
+  background: #e8e8e8;
+}
+
+.wechat-file-card:hover {
+  background: #f5f5f5;
+}
+
+.wechat-file-card .wechat-file-info {
+  margin-left: 0;
+  margin-right: 10px;
+}
+
+.wechat-file-name {
+  font-size: 14px;
+  color: #1a1a1a;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+.wechat-file-size {
+  font-size: 12px;
+  color: #b2b2b2;
+  margin-top: 4px;
+}
+
+.wechat-file-icon {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+
+.wechat-file-bottom {
+  border-top: 1px solid #e8e8e8;
+}
+
+.wechat-file-bottom span {
+  font-size: 12px;
+  color: #b2b2b2;
+}
+
+.wechat-file-logo {
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+  margin-right: 4px;
+}
+
 /* 隐私模式模糊效果 */
 .privacy-blur {
   filter: blur(9px);
@@ -1728,4 +1958,4 @@ const LinkCard = defineComponent({
 .privacy-blur:hover {
   filter: blur(4px);
 }
-</style>
\ No newline at end of file
+</style>