From 12d89dfb35a77d230edfbad2b3a8bfa238eb3859 Mon Sep 17 00:00:00 2001
From: Simon <simon@local>
Date: Thu, 9 Jul 2026 11:49:50 +0800
Subject: [PATCH] feat(h5): confidence gate + triage + image uploader + ws
 composable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 ConfidenceGateBanner/ImageUploader/TriageCard 组件与 useConfidenceGate; useH5WebSocket 增强; 对话/API 适配。
---
 frontend-h5/.dockerignore                     |   4 +
 frontend-h5/Dockerfile.dev                    |   2 +-
 frontend-h5/components.d.ts                   |   9 +
 frontend-h5/index.html                        |   2 +-
 frontend-h5/public/duckula.png                | Bin 0 -> 9462 bytes
 frontend-h5/public/duckula.webp               | Bin 0 -> 1452 bytes
 frontend-h5/src/api/conversation.ts           |   9 +-
 frontend-h5/src/api/index.ts                  |   2 +-
 .../src/api/troubleshooting-templates.ts      |   5 +-
 .../src/components/ConfidenceGateBanner.vue   | 331 +++++++++++
 frontend-h5/src/components/ImageUploader.vue  | 413 ++++++++++++++
 frontend-h5/src/components/TriageCard.vue     | 529 ++++++++++++++++++
 .../src/components/chat/MessageBubble.vue     |  15 +-
 .../src/components/chat/MessageItem.vue       |  14 +-
 .../src/composables/useConfidenceGate.ts      | 180 ++++++
 frontend-h5/src/composables/useH5WebSocket.ts |  30 +-
 frontend-h5/src/stores/conversation.ts        | 182 +++++-
 frontend-h5/vite.config.ts                    |   5 +-
 18 files changed, 1712 insertions(+), 20 deletions(-)
 create mode 100644 frontend-h5/.dockerignore
 create mode 100644 frontend-h5/public/duckula.png
 create mode 100644 frontend-h5/public/duckula.webp
 create mode 100644 frontend-h5/src/components/ConfidenceGateBanner.vue
 create mode 100644 frontend-h5/src/components/ImageUploader.vue
 create mode 100644 frontend-h5/src/components/TriageCard.vue
 create mode 100644 frontend-h5/src/composables/useConfidenceGate.ts

diff --git a/frontend-h5/.dockerignore b/frontend-h5/.dockerignore
new file mode 100644
index 0000000..3be2309
--- /dev/null
+++ b/frontend-h5/.dockerignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+.git
+*.log
diff --git a/frontend-h5/Dockerfile.dev b/frontend-h5/Dockerfile.dev
index 34f8767..80c6878 100644
--- a/frontend-h5/Dockerfile.dev
+++ b/frontend-h5/Dockerfile.dev
@@ -16,7 +16,7 @@ WORKDIR /app
 COPY package.json pnpm-lock.yaml* ./
 
 # 安装依赖
-RUN pnpm install --frozen-lockfile
+RUN pnpm install --no-frozen-lockfile
 
 # 复制源码（后续通过 volume mount 更新）
 COPY . .
diff --git a/frontend-h5/components.d.ts b/frontend-h5/components.d.ts
index bf7df3c..9ea7d6a 100644
--- a/frontend-h5/components.d.ts
+++ b/frontend-h5/components.d.ts
@@ -14,7 +14,9 @@ declare module 'vue' {
     CallAgentModal: typeof import('./src/components/chat/CallAgentModal.vue')['default']
     ChatPanel: typeof import('./src/components/chat/ChatPanel.vue')['default']
     ComingSoon: typeof import('./src/components/assistant/ComingSoon.vue')['default']
+    ConfidenceGateBanner: typeof import('./src/components/ConfidenceGateBanner.vue')['default']
     EvaluationDialog: typeof import('./src/components/chat/EvaluationDialog.vue')['default']
+    ImageUploader: typeof import('./src/components/ImageUploader.vue')['default']
     InputBar: typeof import('./src/components/chat/InputBar.vue')['default']
     InputBox: typeof import('./src/components/chat/InputBox.vue')['default']
     MessageBubble: typeof import('./src/components/chat/MessageBubble.vue')['default']
@@ -28,16 +30,23 @@ declare module 'vue' {
     ScreenshotEditor: typeof import('./src/components/chat/ScreenshotEditor.vue')['default']
     ShakeButton: typeof import('./src/components/chat/ShakeButton.vue')['default']
     SoftwareDownloads: typeof import('./src/components/assistant/SoftwareDownloads.vue')['default']
+    TriageCard: typeof import('./src/components/TriageCard.vue')['default']
     TroubleshootFlow: typeof import('./src/components/chat/TroubleshootFlow.vue')['default']
     TroubleshootProgress: typeof import('./src/components/chat/TroubleshootProgress.vue')['default']
     VanButton: typeof import('vant/es')['Button']
+    VanCell: typeof import('vant/es')['Cell']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
     VanDialog: typeof import('vant/es')['Dialog']
     VanEmpty: typeof import('vant/es')['Empty']
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
     VanLoading: typeof import('vant/es')['Loading']
+    VanNavBar: typeof import('vant/es')['NavBar']
     VanPopup: typeof import('vant/es')['Popup']
     VanRate: typeof import('vant/es')['Rate']
+    VanStep: typeof import('vant/es')['Step']
+    VanSteps: typeof import('vant/es')['Steps']
+    VanTag: typeof import('vant/es')['Tag']
   }
 }
diff --git a/frontend-h5/index.html b/frontend-h5/index.html
index 574ae73..49959b6 100644
--- a/frontend-h5/index.html
+++ b/frontend-h5/index.html
@@ -5,7 +5,7 @@
     <!-- 移动端视口设置（适配企微 WebView） -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <!-- CSP 安全策略 -->
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://res.wx.qq.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: https: http:; connect-src 'self' https://qyapi.weixin.qq.com wss://* ws://localhost ws://127.0.0.1;" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://res.wx.qq.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: https: http:; connect-src 'self' https://qyapi.weixin.qq.com wss://* ws://localhost ws://localhost:8000 ws://127.0.0.1 ws://127.0.0.1:8000;" />
     <!-- 页面标题 -->
     <title>智能IT支持服务台</title>
     <!-- 首屏骨架屏样式 v0.5.2 强化版 -->
diff --git a/frontend-h5/public/duckula.png b/frontend-h5/public/duckula.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c90fe1036d45f079ebad277a635397dcf47864d
GIT binary patch
literal 9462
zcmV<SBnjJzP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF001PtNkl<Zc-mc?
zSFmN-S>Jzat({K3Ifu?Y-96JY)01aFBZNi~kt`bnHa6ud8x=<Qfd{+fGP2(+Y+elI
zDnJ+vSV9s?10#VfF-#7c&|!Ky-VQgP8_u~W@3fX5);{N6xvRQv-F<gj-}=J;`+xr}
z{^@`JQ{za1BPB{X2q6#%93^p;!WaVxqyQlWQc6IewYI+-gAn$(5CS1UNrlD$2B{?W
z3ha4Gfzb#g#u$5lA?>+BAQ2b=0+GE7fJUGZLW0QNMM!&7guPB0gs}IN2wastRbY>a
z?3l=oX-%RHj#3gSBtqIh3L#NaAf!Z_{TD&l1=u4Xq(lJ9Q3qZ$`zZv%*cXyQA_ZWw
z>obFbK}dlx_C7{{%#05bgEg!HBnp8wl6{WJp4ETe{<91QM=FG{XGtNjw(8#t&;}y}
zMhhGzBvOhWd08nW0)Z6Sg9eMYuP&uT7_c_829g4_u?sWCAf?F824ng!YS%A?^$HNy
z3j|=~z>wBX`-?M~m(jllFgisknR$=3i7^@_rF}2#vos*>L$hO<M@xb0fCFIcS((){
zOPl>g8)LFvvJcmpyYBA=XifGP`!7wcF`UeJ!rsVUZw!e6V^X`M%!tO=eHJ=1a&}GT
z$%ALv7%^E`f<PfK`(AA9PHPOZzw5^S{h%Qc#u^~=aHO#@D22!tm|4sEKf+jVkf#4&
zvK`F4!(?xdKxQWxEl7m6F(?Fqf}A7p1W3f-rL}<=L6{h#6k=;p9J!wdq!5|A+gu{D
zXR5w?9Wa>A+&}Y=%yY~jY_v9LV{qulcy@}A2Ywe>EM?o;w@KfU{lwPa8X*nB$Shwd
z4B!e)Q5i}~Q&8Y5aD+igYa}TpLMf!Qp=glAMi3d;i($8y(up-ffFt)8Ao}iyK`85;
z7<(u+_NA4~oTb0Eeu(yyG6F{kkV2sZHWwU7XW~G%6=W_a1VWh17}iq;Hpt>p2!TgJ
z(ZrNQf{#I^fQBd$#6s8#A{0_d9F<iIrBFhkgrKY>W1iwrQBjLvtsS!$rbrA**?W;C
z&D5B|`=UXc6eafeK3hn(u_ntE3J^GbcekZXAZ6dO*@6uFNpP@uX|r->2z!k|8-X+l
zg}6uF#JJK1W2^-_d$>)a0;OcOa|SIy2*>6JDKS!_Q$vczbrchUU@{-D6B(B3JvvE>
zhd>C&dc8Iv^`J6f1VV{HX!mo>Adz76O=>ib6mqbu2!ZL>{Jwkjy`o=h>AQG8CiZXY
zCOw>X6HG!V1&K7c!X`pT$!ymJD2c!U69W#y7|<HwI4I=-*lGmmR1<1}6q-rjVPvw%
z`@21MdkIQepYNw*nZ3JB3L?W6WaU)s$BmHv=t1^9VBiV;0FYu3Ct?r+asZTU>63%9
zB*PxE-2#)MjX_FqmBMu$97mybN)pGUag0tiTBoFGN*c$cNrFV+xegM6uOyxl*4;6v
zEb;Z?6sc409}k!*`ow9!+%kxNeQ?JS{aQT;Z*!pBg21t{YqAq0!el2)!G0mwj|<tq
zvDwcDDozkdij)c+g~VZpw3Cv$5_}gom&0)#YXGegX)^FEVa%Z77_E`6&F-$_43ebD
zvapbXR2$MH<(?6b6xi;@$gJAvG_}=17^KkI`Jkl9lDQ$P)~GC`9VrhcJGt-b!VIcF
zKmPkAm<$)BTH|5xlmot?wzffSW0_v7fk2ZFe1^(J#zsac6^j_7Nz)W`=Jry8vPiPm
z?cjSZX`14>uB~QD;wXhSnj}exdWm&s<sd}LsUeTIlayAJ($DY07_`y03Yn~cntlby
z%A_$EX-kCjBZ~v;Zdvv3qc|h91t?ik>_Z-fA@2qFp3l<z=ecwFUAoOWX%gFeDM`6l
zKx<8$!~~v~0UndpYk_tYMr({C>2%uUf*gr*K%|6W52H1mZjZ3nB~4R=kobX5u~=lN
zRNzS2=iRLi7UoL}e#{_=p-qZ06127u-<Uxz(AwZgsVvGi7A+eK%J;1`Kwf0oKf4%1
zDF_%T4{>|x21^&-puJnA+isDhDavtBo<|f#=v1>fJH=3?jPLnqono|gS8X(DlHhqB
z#u$<$r58rHo(slMuh*&V?y|PJN~6)h^?YV#rkS5#K<jaaD`iFkhwW~P=VrzoyuP;U
zG9tqVCWGvKjA#>d1}jxoqV@rXwPF?q7C&WH7AT;c%hTA~<I<}?AgWhs>~7(D9@BF(
z2;~rVyY#|{o%$Y*k~mV5<`R70$9NvD>!Q=tdWF{L)J1DU6h*j^Llnh?-7Z5zB}PY1
z(QY<*|H@U~eDe*O%?4-gy^p|km@nkm?WK_QAlAzcq9rp()+vT`-$pq7vanzB`rc`K
zCyNbiV(H&c>y%>P6L>zC-g=$1u|*n%%pE$+BTxPq#X_F2*JEp|%JT9uTid(r)SHxY
z0V7mw-R>v0K_6iDn=Pd*u1Ga!?mffe;vzvVhvPWtB;th^Uf?TV{VQ_09Qk~nu`!>b
zD{00lzL03GLC67gHb&b;8##D}ZN)WC->vt{9T^@l2MlPls8TLLp+K4@<b`3oy1||I
z-^GMof_$DM$L}EtLlPw@1_7nTMJlBtOLy+Dytc*8UIX8A2cXOJv%R!0n`F;(9E<FZ
zpFGY34?I8|$8_3Vno*N(67%R2Pta+1xOnL@NgU%ySR5&GtDWMzF4`EvUI%ToE!76J
zA?t2UW_$Zn{Q4h!(+FY9f|OaSDx@VXGG0Ilfl?0LR)d$n{Uug!TqO;=MBNVUMvWv+
zGDN1)#@P5*4t@|&E|)2mOL(~=L&GE7bL0@?qr<qaYr8fjaa|YXIQX7Vu~fuS4$W4J
zFpju(^%|EhUSxT76_uuZVswbN_x4yZ;2<cJ@{Em*F*Q9)B3)eHCm0&z<l`SCS14hO
z-p4-~RyLXEX>IyAfI;(UvL1cEBaj%Q@$v;Ozy3T|{^7ek@spqA?%i9ww{(N?sY#}1
zW;t@|EMvn%R7wQ`-$Ut$POC|Edz<$zU**=)b(W%#8<*bU`0?W$I&_$ci3x^>hVeWP
zr4)@ugE!uMgNqk0a`oDElu{fyyvQRDJ-{;`{SXV4Va|;YbE(~<+Ujuq+BIH$=@s6;
za-Hx0-{*Pop>rHLe3<Wj<EvC=j&S_`bM)FRq>>p#PHise_byW6s6GxbSl&h0HgUhf
z+)p4$6p}AjXm#3buH5D5>HB!{i6@wto?-gvDRRnC^cBN-pY@jHmFpd%lHt=oE?Ii-
zHO^nUO1Qhm%P+sgOE105*!Va@l_5OWWoUSam6c^~-n_-w_!yu0%&+kapZ<A*@+j|K
z-olSVo__2YqU`Y@4LRSZ(QGpRfBupqM^Eq<fA*)m^6JY>Oiq$3mTaca_=f?HWcu`4
zpNNq-w%Id-F3^%EYQN*lfPb1q3{B3kv$Mnc-~Kg0A<v^9_%KD^K`4h_t3gbH%(<-Y
z<oUgCUuO0Fw|V%%)9g0xWsEYzW0RbD_$)^cAL3iz`ZnEem+h@>;y5N31URnC$jC6C
z``qVv_}oL}ie>)eAN>Pw|J@7x;?F+Gm0Qa^^YlH8jTWg3h3C0Q4C`ylIIg7CZ1DZ>
ze20<A35G_;Ns~B3vu40X?f3PdwML@FfIJ+aoUCW=Q%6Eb;%<*)XCLP0|LuRk4?Kc=
z0ncb0p(*Ech^)5b`265XlbtKC;H>|E$ENmJs0glaD_l2VXM2a)**Qw35^)r>xVXT_
zKk{Mb=4XlHi23<BMn*=d?^b!`$`-G_c9Gup%Y@yV+^V&B@txa%q1WwN=qm+Z{?eDY
zdgUsm@({&JnSc4YFEBncPZUMA!kIn*H2XB1!B#mVew5tk*GDM?vd^qykWvzbA;%tg
zgpsLPFb2nSX|zMyiJ=!Kq)9@f2Wx9pRA-qWm*<ba^liTM<*y;#9C2b;+o-a1dzmz2
ze2yPp<esC4Id|{9#7RP$YPNRjgo)<P$`0x7O_Y=Hhky7deDxdOVY!~NTWe6O*Qi#v
zs8*}=!jO-A^b<HzFmv=Ii>L3W+v_5vB}p|ltZnRPOmx;MN=&*>O$(bK20S)kgr?vB
zXq}J?3d|ijNfJf4u7eSRIP7B5ggETc?sSN8ar2|(@;M5{0wOntb_0^IL)`1Ky}m)S
z-Qm9J0*AUwbkF}SAD(FQ;E^d-RySxhy6o0lw7U_dLLMO$#X=6p%hN~{yR|(wH>%ve
zeT&U%l_#EjigV{4q}T0o=*$Bs$3<(MA;JC9XUx8jXSjC&_zzHy{r?#mV&uRW0zu$9
zjLj?%#}UTya6FIg%{9=mb;+>F$dRLXkNh$e7ZH_{6iz>l=SkA;9%T|tdk4=EJUW%5
zXkzNMHqD(Ke&vJr(rh(Yy6`r8+co@BK<>ehllMj`R1V`FeT3nmJe@|3-Q68lSC{F9
zF%O+PXF-zIoWA!gQ5O3~Ys=OeOZfJ)zd>Y(P}^qcN9gDStf}Sx`?fN8j!R>Eo8gIB
z9M{DF!{gIztgW!JvP`8^#8)Aw$5Wb<kFe<#&{{G&UZS}D4yIdUwjg<RbDO6YhxzD(
zv)~16*E&4^)-4vN6V6PRxpDP8N9JY-=JQOQJjt!}Go)$Csl^$dJmk^dUZve`vAI>}
z$gvX~KX#N0m)^q&$%pPg$tnq515O6$=+o+^-^rW7o;!Wo%$S2&a?tW;t+2s!JbGJI
zwpN!p`|#tu`0Nb3+gmIgI>OZ4B5@pJgraR6-1-JbMNDZbAV`{wHZIWHxWMs};=Q#k
zsyj74@YKB=UK}S<0VhvYICN;1Kl%DAOoe+~t4nh6E_W}#%l!*oMvu*sr0~RaOs!gF
ztJWn+1hWf=nV*@WGBnKj3l~^8v`Eoc%<3*J$01H)%PNU%EMf+uo5A|jV?XnYpBMih
zA*z%b?0kO;q?>!Z|Jn=W3Pl!=o@8@vnH!hh;_!)kY1C_k-5zNiK@uUNCgrfoczB0k
z>k@2S<xC~u&Q6Qx-hPkIe&{5h{;^|tr3zlLg7kAt%}(;jxsycAHrv%*Ub(x?$4||&
zcIzfybB%={BJS={YqSs;3i$#<l_ADQhmk_^JHPV<{_&?jO>t<LcV2msk%gm##wK%v
z7|b!mfFsTNg5Uh&vqlJm5}C^jP|}hk{m^h+m+LQopSA0kdF;bK4ZzCMHJ<<0Ur;C%
zIWo7%sEUv}MoWcsJbXvt6Eo(dNF(|CYb(5Y<2Jwb$p`s`51v8`@B$Y%=OdJd5iYq>
z8OQgz_TF`V`-{)9v>oz`Kk+!o99!)e<9fKBLq5on6B;k@Xrzkoz48*3Qi0$8{C}a{
zZ1A^loM-ObQ#h`>-yvpT?%*^>8)FS%i9_2BDk<%lETfHu(0H!L&gu&F)!U2=jZoj+
zVR!8go!T}#cdpWD?J-sKI5L(;34!Cdcv8>`V>a5FORKw#<Q+cqv4?o{*bvRe4l3=E
z&-oakkjg{3KEm-SOrKzQ_7EoR@x`w_$Dcp<Iuj$KOplI`L=m3Q<b8)Q?D78U4z*sy
z@tFxe`3t|w+|i>bH0#a?8(obn62Q{zrau_Tyj`1Y!26qDeAXzr50Ipk)(Emc^t8;4
z<9W1Km#MGbrnR?6ZS6KutHwtbiipNKcWW)$sUgyaP8gGDL6kr-pXc$@$GGp%G*Rs)
zt(`TblB97=F6ZGoiYQJ|QV@8O!1o9W6($a!WctW)s`Vycf9^%zy}AaDLy{!Kv1YWK
z=iISTp1fxa*U$6p?J^5zAEw~BRAqsU)W;Lr&IB`tsLyCyxNoOX&S09rfdnxaF^Mb`
zfF!2d*dvN#beh<zKuUAt7QMzEbE6|njE^x=aw!KcyX};g$x*Bf(+NW^UU&=B*+NN)
z<2a<TM(jpet7?IY5a7B3&)H&fWrgiqmzX_%f`9$#$5~t3<K}xeiF*;g@3FWrOfTwk
z<>l8{JTXr(_bA<7520gJ;3I^WEjHWzj1(0{l4M}Wc7sL_V6UB2^arE-$Uh+!t-W2M
zUKi#0pd@jc;7X`An!I?U%2N-X;mG_vvX$U@0V-c)ZL`YW<{gr-N#64iI;CB2vDc31
zgfVfdF$R<r<QzfKcPJEcv^$#B?YkV`sd4D&3`0lGaO&~1)Yn$<R7!oX&KLju?|FEk
z%n>(-c5^7DxN_wR<+<ai$)o5r%35?A2K|Ak$VTs)1H;jNZjeG@vKfI9`%@w5cqC~|
zt-8+Cp%b`XjwTMfsmsh*g}q+FwJTQ`tCScW8>bs5bXITCYt?W}%y7<SYq!O_%e&mH
zh15b#m>N6Q$_(y1g0d@_$UB@K%X4zN%+=e_jaE6K1;YzRm|dKqvAsofXPJNV&pyIv
z9&WUYgietp>~V8#i}~q$7!v!_?18G`fX1Ou1E|M-_Ln|y2OM$`^D@&6D7lY`m6G`R
z0<C5f-?5$&hh4T>9TrL+3nK+Q32U2G97kCyEeXkq6cLBKbbXVrUfkr`Ze)j@nZ;vc
znFv=193V^#o1K(PJ6&$?w3*C1<lG!dY7i23ciNa#FfqSK!4s_SCEUoLB~dQDR8Ttg
zDEYA|bQ%r1+CIZ&`rDjgfHXCT&;IeZjmr2lk&UdCqY&A&R%WUZA;9rG(j;N!!drBA
zw`uKG+1*;jY1eq5oHF5Q+F?ws6=Iwm%A~Aq@9^%*4tMGyQ-NgIl><r&1g%t)7$_-$
zlAy9iEJ1L)lb|p>ad?CilcP+{%<$y7d1lA+G^*=d--g}Ur)c1TbYbouOi)DrC<~Ag
zJejZpJ2eJDlIko34$RQ|SYTg>AT!AdByozP9OmzTh_(056ZN_bkIm3@172_JvfxD=
zEe6b2Mya(zZr@ts^6gFTb|CLb<_j(^nnW{TZi}w63Gl%99b*{r9oojQ)=s&6dzaZ_
zo<~lUn8-!Edw!K0=>*~QS?GaD+xUmiVuAufr)a6Njn;!@_YENW@|<kZ&Op;Mn7kXb
z$%IWAJ0vq6O=d$y$MKmxbstF-vAvQ|s7P}80;`QZR_jgX@`7W<0w+%##}z4swK^B-
z2`vq$hVpd6kVG32Z8NbH0wusz0^fC*9vh+;M!fpoHiz@@YtNkFBOiX4oo1W={l*@f
z?mU&5Mbf<nXwAs+vzW>lCQ0mur3|E1QgT3er8CHH^ME!Q$7qqsV;I0ijIg7lEG)=0
z1bsd&)hWsgIP~D7NY7{O+WVwwN@-}6BrdTU_SkBMJTR1F@#skc=O)wTCKtB4Z1pt9
zMoQ#VO3@YM0)_86__-XVN`-u71k-Ks+{^Ft%+Wmm>Qhg0-?_6atylSz^C_V}OEJi?
zwZ0B+z|`q;c(X^d`GVy%`*ItD9{jXRvm<@7;fU4-@tc42tdYv@t}~dVN~Cm<s!x(+
z+8QDE=kCU!ludS<w{Eg@@m-qLb)-pglpSKCV;&ub+}<jpy@hK+?(FvHhAG3+FjrKR
z^NJwn;RZPz-$S_yEx-gtj-P#yvH3YRmzVgR=XYo(4h7F4MpB%ZW#+zzDNf8;CaO>5
zX74En%#T4x8~2iZykU$Xic_5Z1R$)tivz@g$=XTDz9yhgk_thZ+8CQTc7oBFSypde
zWA(~q8e1EfIK=3bH@6j!6-ty%hmsrcvBRVIo<cenai&_}`ySF!C@&xwo+Lj!K~Nb-
zcedDBy1<v;?Xt7iqf{)Sh9{UjdWNw>$B?c^5=Ha}ynXg6wNsFNA(w_UQ;Z>GU(sc;
z-e<q~tZ}4G6DrdPN~Nq7)dBINaI6O%)DW2;ReU(EOWX_DT3un|)(v)7Z_{oz@kzMH
zY%oKeqLWe#B*P_-V%{Mr<S@qa`>q>+3NR+6*RIi%IbPZs;btcwKQ=>t?ihu!X_OaW
z(g>pu$mc|+7L#@ch>-*EV~jp9h3Z!YL!6{I133))<FGz)sI^8Zn^CpUV5}f56Y6Cb
zT4N<?icWht%3=1%5$28`XJ>Vd3(tR--L>1i-gOxkC8lJD2`{12=ui$Mfzu+@R><H6
z4pC~@YR2q}5{)3h^%^YPe-`)Dk7MEpoyMe5?|`r~8+Dk>gV}F;Ed^i(W4D2dB0~kH
zj|BTrSPz7W*=#LiQx48bO@H2&!AaG>T1bpZ(K<zk5g;h$0#2Md!&cs*SKnf{w#~(@
z5GPF;EtLtnhCm4`o=7$IR*wY9%)$w#rl*)68Dep627hFRcRNi|Z8CA>K5|X7c(n=7
zfKi#y)Aktq32=Ym`y8RM&5)sABIIByl+g&bOi5`CAq;7nsZL}@CklhsNv0i8Bx#E0
z`zXgHY}5%H!OZL&ol=2fG0*hqFl)=VX>~e?N`-EkAT$Jij$Ap%2S4~UM~)t*RH`sG
zF@YcC=!6M3R}=Pn2|7)Xs;?U9tI|vs*4DMPN$oIDn1SlFZzKjv)C>ohJ|`;V0rgj=
z7&{=yGYEvyHcX7l9$>MO5eA_(QaC8bWA*MG!sZ@}ljDG7eSMuY?BFU7<K!5doM(IW
z7D=~FrBY#dsDf0IQ)lkw%-IJRs#NIpdc678c}B*@c<9`NB=7u?rpYrpK1mXW0}=GT
z{E@+wx$pJ^VVKEu4<<88HWM(KtQ!>jbl5=3Yz~sey5A~gLMoF{&VAi*Rw5)^yZjz6
zeErXunVRCnFaIhRmRI@u|M~-z(Tt5xFgY{LaJfurcpNwFFgiL+p-`YaG|bui?<a~=
zzWViV@q_38f!bb^haP%}AYb5UG2!dK_q#mybN_<zBd3U?(1v6->cWTvV;w!vF{Vb_
zyrA{KP-Y<UFquB!z~aroVvy=gg(YoWl`@N>G!slID{m1}(e1Rkdf^hwOG_lZ9@V=y
zXf#?ZU45Ul*G2gr8>=g<tu8Y(G{n^8I7j9t*{(IXv%1MAKJjs$f8iCr@$7e4SzRZe
zFHkO(*xugdhi|^cCqDiRPSoV;_rAu&M?b~b(finFc2UwQzZh`*nKHzxm<HZ$t)&Mj
zkPH<%{h^r^7}@bQStDdG$dX~^Y>sq6LXt$pQH&epNVR6;&RtfQZW49c80oNb^CFku
zewpUpZq`{ksGL=PC2_*W<~Da%)=ATZ`Pmu1^3CUX=biHuiX{s9JYf{Fy&Vzc^Q^9|
zbN%X7Qf&x4hpTVCz=tNsspqEf(vX~jb_$J94`eSoTa!d^Krqa{X5JdX8AQ0)2R`Be
zC2r`KLxB*AZoA3e<_4|Z9X4*?pfWSZu?HTdUE3wx+aO9H2|M(<9d4d~jihIjsOz~n
zO4050NaKWF7~=T>rDBPxscE7(K`Mu^*Q2X-){RQqttNYWb>4aFO%PBl71?VvXl$*5
zAG3P#C4TB-&)^OZu@@_r_7XO`sU>;)dEe-POxhTO988VLa6lh0h)f-pB@B}R2My>X
zp}Db6ZFPlqZHHE^N^NzC+WKv(%eToFDijMPTANj*kSNcmwpAs@%>)yQAP7jcM&)t<
zbh}-I5Zqk4MGypxj*c=iJdE%ARJW=~sqlTDy}dnZfrBv;-}j+h=Fsdk&%f{@-~Pte
zc;M7APMp4v>A+<=?{lk}a$&n?#TvqD1<A<JJ{1N6qd}%<TO0<TuVi^ZFqo|wt?BLT
z(5Y?`wVQP6TlDsJP$psJ>IHuIov#qJ>cpvKlZ{R=+R$n=FllTtg4SrQDHaM;DiwU+
zM+gYRkXEb7&dv_?dY$Ul7I6|YGBU#G=m^SDc&<aE*+M!FrD74!52$YMaQfs4+MO=1
zzWNHCR+A{z#7V-5isI3UT&4}mYJO@ksm5TNAfs(HaE#tZQ}O@;6snIlG%AjX+b#BX
zs<d~jB%LNwCkT@gMIoN=qmzhkt3%kV(`)RY9P7@0zG#yrkfxeMYkFaqLe67hev-w7
z1%`))xcvSVlGIS$+U4rC>y(Qn@`W6p7a)b;&dLh2GYeEILwJ6UyDQ5)boMM0<KtYr
zvBY+Dlf%QKq}tF9V-|{vXd=%W8(mysGrmsyqAAM^3k*(wPA2-3;RACtgTcoTHX3ZN
z-l5m1p`$L+#00KD1U_k!;`&YonPc{<cX5;;2y*mVO`@=e5P~oaNz;V0XHN3KeWw{2
zu3&`VvBw@~ZhnF1{`y&7dF@q3hRdw3Z&9x|X|>xZB{_A^5qiCt<HwFMHa5=QUX5<M
zO=Wn5iODHemT$9s_cjYhj^TI#iP5yen8QVfYT09{9^xv2F)2oitUhRj5ID91WHq$k
zTnKxDV>DsC#@6Z`dd)f}4v{873MdxyY&2^qr6?8(m?S121bDeTBoRs~eBYznZZS4K
zMj>$cz>|;g!4G_Zk<l@Vr3xDx>jb$1LOOi-BOhgIYKnK>eV5VURo2%xK|1{UZ+w=&
z`J2DSaXl6fA4UqeUafNU$Po&K0zdZD6a3kqFR^rUiF?je8JnE8%2RFVMG^N5xvaJX
zabmJYNLvh-!9geM9Ib@3FD1{ERY|=@V{?^Gqh=ScLmUM{I^=VKmB2<3Ns^+ZmAnN(
zp0H)5vO$nT8^h7XS^m+dKE~|aJh?&<KbOY~@(8KOWwKYL6z3j(oa6VL;qIMVRI61U
zJogaelhb_u^Z%KrpZ*|@QtZ}t>GgV?K6M(SHMRO4n>#gDH#b>bzKa*+K?tit6M~!v
z^LfRUT8JwTz~Br?I{hSvP|*KWP6$L867Fmgwwt8A4pK*!SU?bX0XmHd!yc29<9PX^
z)ssmmSIVr_w`|O7jpMlFb5_b`5J>6ZxE@kk9^m~eSGaijIzRcLr_lyRM#q_$ng$^l
z9UbGpec`{N4IDdm6vuJ6abt<Yi-#E*9;VUQ<J8IHJo3Q3+_}5L%E}63lhZh!Pm;uV
zzE2uM*|A@hIGU`o+1#d6gVb5}*IDw@#*n57-Mw9Uofh5J9y;zJOp2$hrr-Bmc6WEV
zb7z@$yF;l|wx6q+lybR3zEH|ajTI@}U0J2NwT<t2_Bm;4T{H~&!teeM{{83v6L;>e
zkP8C)V%o;%-8;AW?%#cnd+)uMk>O$1*Vox=)OqBQhiSE1#8Jf5<P=Gw+1TD?b8~~8
zttxRG(d&goQAjro@k~Tf8R9e@gooB96G>$_KxYp|2-4aPch0{-*lm;cItY{CD)3zg
z-?h`U&CM-b$Dz~f;pYl?o<}|iaHU{uViMQ)(3z}uuhHh+OIOf3MPLow3%lH0TH^5G
zMLzb-PcS|{Mihls8Xw1aj^dl&{3eZNi<8HXQQzC+wKv}2@y8z{m&?)VcIkGz__;i#
z$`HoD<!jejS-DH6)gnn^dfguFUPwtMJT>hjg&;Myh1N!+jYd82iGT8WA@)CwGrbO`
zwncrrO1HL2-ggl?!I4%(?m3FPcb7ST{vt^dQyCg!dUhUdpj0dpxN?BJn#~4|5JXW#
zYT)pp1;)lk(b!Q~yVK!APe091|MaJDU5_}4ZCpAI)r}2)@Av;F^K<izjgE5h(tAuy
zjPucFo}t-nlEg7_98oG)*x9b~!ymrQ`qnO<BN-nXrCcf_grw1E(C&7b87b3C4C~#*
zen@F-S#~fCzTOlFl12^P>k>A1Sh;nblP6B%Do~E3*=*535=9|l)I)2STdWY|a*%|?
zVV9v&0Z$3iBqj<&>f4(*z@58yIe+PW=I3Sz3MGV;RLW(7T#insi|^ZBJ=K~*KF?o$
z;~VVk);V?R3|FpQLn(((e&XXaTP;kgsn>RKU5{?J!|d!V&32F3=}FqnCNIA9GBdMx
z866$P^F7iuVRmYg*#NE@Lztuk?m!-7icB1#+YRDwo4nGDPfoJ3a+l>hceuH9i?xj^
zQVI%%JQL&N_=OU~BO`=yf}hJ{k{(JxF`r{*Vw|bT35t~=QUh@q^ZJ`_b9Z&aeg&eT
z7lvr93H-o*=BhQW>vHYdHNN|I-{;WcB5P~wY;A4xb3gktILdx@)9ZHVb~;EY>2`a}
z&dzbqi6hKSjo>(vIF8w<RuNKg>Yh_nH>)(;9VW{;PL7ude3ymsA*2vEY4$mZK$5oh
zh&yf4P95J>EY8lNqY;|TCR(Qq4OP%uvsJAUMiJ#=o?I?ZoTMNmzU!ck##M@;atTLC
zq%ho!LR<mW>Nc;w_9llG=BW$~W3*v&V}oY1#fcLqh@ylvP5JU)eg(&|Wo)-r=U4vu
zFEKhYLZ{tEIS#em8oqDKu+}O0e4evsPIL46RaDX8zWdH{>hu|cT#m8v2~M3kO?|Jy
z%;W?MWl1g0F<i{Ew%b7VTVb>&Zq!M_9%*-vZWyDaBnW)wW~Z5*nL;T=uh*l~3+eTG
zR4QeJ;|#`Gsn(>a9tck>#Uh92=UJGW!w5l=#Jv9ITU@zz6DbAdQi(tM<3Hs${@rh}
zbn7<xLV*hxF7VPTuhH%HSXo`;Q$O`_rl+T=*Y}9ym|nL_r`xe2$gHtRwP9g#kvP#f
zUO;uL%H_+KxOVLdSFc<~0&l$jD(f2?i1seEdV`C1)=4z{KaS`93lZ%xZU6uP07*qo
IM6N<$g7|B32LJ#7

literal 0
HcmV?d00001

diff --git a/frontend-h5/public/duckula.webp b/frontend-h5/public/duckula.webp
new file mode 100644
index 0000000000000000000000000000000000000000..17d8a1f92d4534abe9f33b672396243e1476c985
GIT binary patch
literal 1452
zcmV;d1ylM`Nk&Gb1pok7MM6+kP&go%1pok$833IDDnI~006tM5j6@@%Ar=LgI0Xc=
z08^%*slOJ#Bj(3ae&K+VIW4#zV!YzC)qMauRcF`pBk9!z`;YxEn4TK#XZ`zrWB`3m
z|6%zv%<pm^`JOf!0Dfivi|QqwXQjP?f0+Mn|DV`r(E)+~)Ix>4l90*Pe=`pJwIrbN
zA#VaYM`ksjTo|4>QqufGa9o~!vCiFRL5}qrYZTC)Q9J~|c)qs12PIpJ8ETfQOs_S4
zFD#1hBy&LJrJZHlc4(<=6=+G!SWVwcAY(`8oXkf60QeNetr|*&t3Fq25>-+DH-{+{
zlJC#V@$Y7>nW$6<h^IP;@w{|G`LJNcWjPHIvSSGJ&4vfH{6I39#&rZ&;$x}Que!6D
zFN(ECRAiEnCxEE3QjSH+EB{%n8J`vf=K&zMVo?gvV+|~qDZV5$Wf-A8aOs3=Gew^@
z&P{0y40#E(6iM@kFUw#$Jk~DrRwjf0EwFIAi9WX$(3*AXq?$Ix@~`}|!4>Mc1rq(c
zZa0dZF3Ua~7iu@=<NvEvhNMuqz_`oJ0=pnvP7k2x^V?jV8d~NSi3rsOCakj%6YBqr
zU&}X<iF~@9YK_R`Vww}#yoY-T(zd@J+^^5kGI^}stimHRjcY;qhh9mx0bE^>hxe~n
zEEnn@R;W9qcm;eH9~^$10&rv-L5~{B1!Cgem(=h88WT#ndfsMUuXP?eNX2=q4Ws3s
z*v`S`FPc6}bLX{h=?zQker5R(W#QaAXSH=MKp#%i`D}SH^WmGy>`ZEr{Pqw;cyFHr
zp!|xYyMGTuYNz}%s}Yyd?%B;-0b1Us$2~uMCw~9P|L#LP*0v{(r4D#uo}n!~ehj;b
zyjOFDzX*8Bk^5RF^Jk^0{iK8beKErK*TgQ}*Ft>ea0|$8?Cd8BnVNF6hG=ag5}oS0
zxKf?qVX13I07_?V-v{}A_?1oy6P&518b5=rvF>-C5x<Il<G_iYT5M6_F$c2E^qw(&
z{D;{uuI-Nbeol+evgK#@!iXkCHJN0vP!!z6=Zz*Ei0fBsE3w-we+y}UAmJpI-*a|N
z4ncmSj4ZC3%nGPC2rHwXlq&>Xjk!&YoOnA}cqyb&jEiTk-a-8<A1hJhd92tvP;!hd
z{JZ=5yked3STx{ejPlp^Nh}sz^Y8(ug%6$EbiGT7G*kJDz3A7SR9#CvN1XDhB^$AI
zw}!LU3E)VSa&NNW_Hvn9B|RC~2jkX34(dsMZTSU~V{J-k)mp{Eg1%TjV{P54^4+BT
z4G9k>A{Yd*i38l71Ww$Srw~74be4;tO+R=60G5kkESiFyl59vwRD@nfl|`XMN_ePV
zAIFZ>zTQ`A!Hmnr;#?Fg%9wI6gdSE;7WnTCP{9QG$;_lp)?`v_+8iIAMnx}#!yNyN
zs3fWFIbX&c@HRVyK^58w1axnmAku!#AW#nugB&u>Uo_$w_3<u|ET`PtL#57c`7{P+
zu9TM?bfWykzSjMk&?9NENi)p;W_?}~rQYcuY<~IY?q1Guj1QG~qVkt%$PI`e<x+bl
z^?>eElMj~I6Md@;!hj|mS>?Mp${=heH&AtrNX^g*N!oq}MRM6oYcmDAsZ#`~5q!L!
zGHJYYJ0n5#c@=j&)D#HC%U@NTH2=E+k2wf?M7v-TgfdTB)PD#5KRJw!Eiuk^o@J+|
zBbWKN{|zS81IuBne#5rhXnCF$CADwA6+D2RM5yY;@7+mZY*UXG)RN1X@TY&l+g|8y
zx`;SJB4Fbpt=}xa>_Z!_p!>$!Stm6Qb*A_KiAR5m7{oNZV0MGrevD2Iwy}gYefWSi
z39sO%koIwsae6&MN4V-%U0tpgpM@x}YjVg-FWNg?*}GgpG5U>PWZ7)6B9HO;Lf^eL
GU;qIB+{T~)

literal 0
HcmV?d00001

diff --git a/frontend-h5/src/api/conversation.ts b/frontend-h5/src/api/conversation.ts
index b2fab56..ab4d59e 100644
--- a/frontend-h5/src/api/conversation.ts
+++ b/frontend-h5/src/api/conversation.ts
@@ -173,8 +173,13 @@ export interface SoftwareDownload {
 export interface SendMessageResponse {
   /** 用户发送的消息 */
   user_message: Message
-  /** AI 自动回复消息 */
-  ai_reply: Message
+  /**
+   * AI 自动回复消息
+   * 注意：改造方案 A 后，HTTP 接口不再同步返回 AI 回复（恒为 null），
+   *       AI 回复由后台任务经 WebSocket 流式推回（ai_reply_chunk / ai_reply）。
+   *       此处可能为 null，调用方（store）需改为依赖 WS 事件。
+   */
+  ai_reply: Message | null
   /** 是否为引导类回复（打招呼/呼叫人工），不计入实质回复 */
   is_guidance: boolean
   /** 当前 AI 实质性回复计数 */
diff --git a/frontend-h5/src/api/index.ts b/frontend-h5/src/api/index.ts
index 3843bc8..e1a2c6b 100644
--- a/frontend-h5/src/api/index.ts
+++ b/frontend-h5/src/api/index.ts
@@ -77,7 +77,7 @@ apiClient.interceptors.response.use(
     }
 
     // 业务成功：Scheme A — 直接返回 inner data（三端统一契约）
-    return res.data
+    return res.data as any
   },
   async (error) => {
     // 网络错误或服务器错误：统一 reject {code, message}（CTRT-03）
diff --git a/frontend-h5/src/api/troubleshooting-templates.ts b/frontend-h5/src/api/troubleshooting-templates.ts
index d18d5c8..6f15430 100644
--- a/frontend-h5/src/api/troubleshooting-templates.ts
+++ b/frontend-h5/src/api/troubleshooting-templates.ts
@@ -7,7 +7,6 @@
 // =============================================================================
 
 import apiClient from './index'
-import type { AxiosResponse } from 'axios'
 
 // --------------------------------------------------------------------------
 // TypeScript 类型定义 — 与后端 Schema 保持一致
@@ -96,7 +95,7 @@ export interface TroubleshootingTemplateQuery {
 export async function getTroubleshootingTemplates(
   params?: TroubleshootingTemplateQuery,
 ): Promise<TroubleshootingTemplateListData> {
-  const response: AxiosResponse = await apiClient.get('/troubleshooting-templates', {
+  const response = await apiClient.get('/troubleshooting-templates', {
     params: {
       category: params?.category || undefined,
       page: params?.page || 1,
@@ -115,6 +114,6 @@ export async function getTroubleshootingTemplates(
 export async function getTroubleshootingTemplate(
   id: string,
 ): Promise<TroubleshootingTemplate> {
-  const response: AxiosResponse = await apiClient.get(`/troubleshooting-templates/${id}`)
+  const response = await apiClient.get(`/troubleshooting-templates/${id}`)
   return response
 }
diff --git a/frontend-h5/src/components/ConfidenceGateBanner.vue b/frontend-h5/src/components/ConfidenceGateBanner.vue
new file mode 100644
index 0000000..a749fd1
--- /dev/null
+++ b/frontend-h5/src/components/ConfidenceGateBanner.vue
@@ -0,0 +1,331 @@
+<!-- =============================================================================
+  企微IT智能服务台 — H5员工端 置信门控横幅（Tier1 / P0-3 / D3）
+  =============================================================================
+  说明：当 AI 回复的 confidence 低于全局阈值 0.7 时，
+    在前端渲染"转人工"入口并附已收集的上下文快照。
+  
+  D3 硬约束：
+    - confidence < 0.7 → 渲染"转人工"卡片 + 已收集上下文
+    - 阈值可配置（通过 settings.confidence_gate_threshold）
+    - 转人工动作携带上下文快照
+    - 概率展示为百分比（不显示原始 confidence）
+  ============================================================================= -->
+
+<template>
+  <div v-if="visible" class="confidence-gate-banner" :class="severityClass">
+    <!-- 主提示 -->
+    <div class="confidence-gate-banner__main">
+      <span class="confidence-gate-banner__icon">{{ severityIcon }}</span>
+      <span class="confidence-gate-banner__text">{{ severityText }}</span>
+    </div>
+
+    <!-- 推荐概率 -->
+    <div class="confidence-gate-banner__confidence">
+      <span class="confidence-gate-banner__confidence-label">AI 把握度：</span>
+      <span class="confidence-gate-banner__confidence-value">
+        {{ displayProbability }}%
+      </span>
+    </div>
+
+    <!-- 已收集上下文快照 -->
+    <div v-if="contextSnapshot.length > 0" class="confidence-gate-banner__context">
+      <div class="confidence-gate-banner__context-label">📋 已收集的信息：</div>
+      <div class="confidence-gate-banner__context-list">
+        <span
+          v-for="(item, idx) in contextSnapshot"
+          :key="idx"
+          class="confidence-gate-banner__context-item"
+        >
+          {{ item }}
+        </span>
+      </div>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="confidence-gate-banner__actions">
+      <van-button
+        round
+        type="danger"
+        size="small"
+        :loading="transferring"
+        @click="handleTransferToHuman"
+      >
+        转人工处理
+      </van-button>
+      <van-button
+        round
+        type="default"
+        size="small"
+        @click="handleContinueAI"
+      >
+        继续询问 AI
+      </van-button>
+    </div>
+
+    <!-- 可选：拒绝理由选择 -->
+    <div v-if="showRejectOptions" class="confidence-gate-banner__reject">
+      <div class="confidence-gate-banner__reject-label">AI 回复不准确？帮助我们改进：</div>
+      <div class="confidence-gate-banner__reject-tags">
+        <van-tag
+          v-for="reason in rejectReasons"
+          :key="reason"
+          :type="selectedRejectReason === reason ? 'danger' : 'default'"
+          size="medium"
+          plain
+          @click="selectRejectReason(reason)"
+        >
+          {{ reason }}
+        </van-tag>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+/** 组件属性 */
+const props = withDefaults(defineProps<{
+  /** 是否可见（confidence < threshold 时展示） */
+  visible: boolean
+  /** AI 原始置信度（0.0-1.0，内部使用） */
+  confidence?: number
+  /** 已收集的上下文快照 */
+  contextSnapshot?: string[]
+  /** 门控触发原因 */
+  reason?: string
+}>(), {
+  visible: false,
+  confidence: 0,
+  contextSnapshot: () => [],
+  reason: '',
+})
+
+/** 组件事件 */
+const emit = defineEmits<{
+  /** 点击转人工 */
+  (e: 'transfer-human', context: string[]): void
+  /** 继续询问 AI */
+  (e: 'continue-ai'): void
+  /** 提交拒绝理由 */
+  (e: 'feedback', reason: string): void
+}>()
+
+// ===========================================================================
+// 常量
+// ===========================================================================
+
+/** 预设拒绝理由选项 */
+const rejectReasons = [
+  '答非所问',
+  '信息不完整',
+  '回答不准确',
+  '过于笼统',
+  '其他',
+]
+
+// ===========================================================================
+// 状态
+// ===========================================================================
+
+/** 是否正在转人工 */
+const transferring = ref(false)
+
+/** 是否展示拒绝理由 */
+const showRejectOptions = ref(false)
+
+/** 选中的拒绝理由 */
+const selectedRejectReason = ref('')
+
+// ===========================================================================
+// 计算属性
+// ===========================================================================
+
+/** 展示用概率（百分比，整数，不披露原始confidence） */
+const displayProbability = computed(() => {
+  const conf = props.confidence ?? 0
+  return Math.round(conf * 100)
+})
+
+/** 严重程度级别 */
+const severityClass = computed(() => {
+  const conf = props.confidence ?? 0
+  if (conf < 0.3) return 'confidence-gate-banner--critical'
+  if (conf < 0.5) return 'confidence-gate-banner--warning'
+  return 'confidence-gate-banner--caution'
+})
+
+/** 严重程度图标 */
+const severityIcon = computed(() => {
+  const conf = props.confidence ?? 0
+  if (conf < 0.3) return '🚨'
+  if (conf < 0.5) return '⚠️'
+  return '💡'
+})
+
+/** 严重程度文本 */
+const severityText = computed(() => {
+  const conf = props.confidence ?? 0
+  if (conf < 0.3) return 'AI 非常不确定此回复，建议转人工处理'
+  if (conf < 0.5) return 'AI 对此回复把握较低，可能需要人工协助'
+  return 'AI 对此回复不太确定，你可选择转人工确认'
+})
+
+// ===========================================================================
+// 方法
+// ===========================================================================
+
+/** 转人工处理 */
+async function handleTransferToHuman() {
+  transferring.value = true
+  try {
+    emit('transfer-human', props.contextSnapshot ?? [])
+    // 展示反馈选项
+    showRejectOptions.value = true
+  } finally {
+    transferring.value = false
+  }
+}
+
+/** 继续询问 AI */
+function handleContinueAI() {
+  emit('continue-ai')
+  showRejectOptions.value = false
+}
+
+/** 选择拒绝理由 */
+function selectRejectReason(reason: string) {
+  selectedRejectReason.value = reason
+  emit('feedback', reason)
+}
+</script>
+
+<style scoped>
+/* =========================================================================
+   置信门控横幅 — 置顶悬浮，醒目样式
+   ========================================================================= */
+.confidence-gate-banner {
+  margin: 8px 12px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border-left: 4px solid;
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 严重程度配色 */
+.confidence-gate-banner--critical {
+  background: #fff0f0;
+  border-color: #ee0a24;
+}
+
+.confidence-gate-banner--warning {
+  background: #fff7f0;
+  border-color: #ff976a;
+}
+
+.confidence-gate-banner--caution {
+  background: #f0f7ff;
+  border-color: #1989fa;
+}
+
+/* 主提示 */
+.confidence-gate-banner__main {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.confidence-gate-banner__icon {
+  font-size: 16px;
+}
+
+.confidence-gate-banner__text {
+  font-size: 13px;
+  font-weight: 500;
+  color: #323233;
+  line-height: 1.4;
+}
+
+/* AI 把握度 */
+.confidence-gate-banner__confidence {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 8px;
+  font-size: 12px;
+}
+
+.confidence-gate-banner__confidence-label {
+  color: #969799;
+}
+
+.confidence-gate-banner__confidence-value {
+  font-weight: 700;
+  color: #ee0a24;
+}
+
+/* 上下文快照 */
+.confidence-gate-banner__context {
+  margin-bottom: 10px;
+  padding: 8px 10px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 6px;
+}
+
+.confidence-gate-banner__context-label {
+  font-size: 11px;
+  color: #969799;
+  margin-bottom: 4px;
+}
+
+.confidence-gate-banner__context-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.confidence-gate-banner__context-item {
+  font-size: 11px;
+  padding: 1px 6px;
+  background: #e8e8e8;
+  border-radius: 3px;
+  color: #646566;
+}
+
+/* 操作按钮 */
+.confidence-gate-banner__actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* 拒绝理由 */
+.confidence-gate-banner__reject {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.confidence-gate-banner__reject-label {
+  font-size: 11px;
+  color: #969799;
+  margin-bottom: 6px;
+}
+
+.confidence-gate-banner__reject-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+</style>
diff --git a/frontend-h5/src/components/ImageUploader.vue b/frontend-h5/src/components/ImageUploader.vue
new file mode 100644
index 0000000..f3c21dd
--- /dev/null
+++ b/frontend-h5/src/components/ImageUploader.vue
@@ -0,0 +1,413 @@
+<!-- =============================================================================
+  企微IT智能服务台 — H5员工端 截图上传组件（Tier1 / P1-3 / D5）
+  =============================================================================
+  说明：员工截图上传和中途补图组件，调用 /api/vision/analyze 获取
+    Qwen-VL 视觉模型的结构化描述，并将结果注入对话上下文。
+  
+  D5 硬约束：
+    - 截图理解经 Dify 后端调用本地 Qwen-VL
+    - 支持中途补图（会话中追加图片）
+    - 展示"AI 已理解截图内容"反馈
+  ============================================================================= -->
+
+<template>
+  <div class="image-uploader">
+    <!-- 上传触发按钮 -->
+    <div v-if="!selectedFile" class="image-uploader__trigger" @click="openFilePicker">
+      <span class="image-uploader__trigger-icon">📷</span>
+      <span class="image-uploader__trigger-text">发截图</span>
+    </div>
+
+    <!-- 已选图片预览 -->
+    <div v-else class="image-uploader__preview">
+      <div class="image-uploader__preview-wrapper">
+        <img
+          :src="previewUrl"
+          alt="截图预览"
+          class="image-uploader__preview-img"
+        />
+        <div class="image-uploader__preview-remove" @click="removeFile">
+          ✕
+        </div>
+      </div>
+
+      <!-- 追加描述文字 -->
+      <div class="image-uploader__desc-section">
+        <textarea
+          v-model="description"
+          class="image-uploader__desc-input"
+          placeholder="补充描述（可选）：描述你遇到的问题..."
+          rows="2"
+          maxlength="200"
+        />
+        <span class="image-uploader__desc-count">{{ description.length }}/200</span>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="image-uploader__actions">
+        <van-button
+          round
+          type="default"
+          size="small"
+          @click="removeFile"
+        >
+          取消
+        </van-button>
+        <van-button
+          round
+          type="primary"
+          size="small"
+          :loading="analyzing"
+          @click="sendImage"
+        >
+          {{ analyzing ? 'AI 分析中...' : '发送' }}
+        </van-button>
+      </div>
+    </div>
+
+    <!-- 视觉理解结果展示 -->
+    <div v-if="visionResult" class="image-uploader__result">
+      <div class="image-uploader__result-header">
+        <span class="image-uploader__result-icon">🔍</span>
+        <span class="image-uploader__result-title">AI 已理解截图内容：</span>
+        <span class="image-uploader__result-confidence">
+          把握度 {{ visionConfidence }}%
+        </span>
+      </div>
+      <div class="image-uploader__result-body">
+        {{ visionResult }}
+      </div>
+    </div>
+
+    <!-- 错误提示 -->
+    <div v-if="errorMessage" class="image-uploader__error">
+      ⚠️ {{ errorMessage }}
+    </div>
+
+    <!-- 隐藏的文件选择器 -->
+    <input
+      ref="fileInput"
+      type="file"
+      accept="image/*"
+      class="image-uploader__file-input"
+      @change="onFileSelected"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+/** 支持的文件类型 */
+const ALLOWED_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp']
+
+/** 文件大小上限（10MB） */
+const MAX_SIZE = 10 * 1024 * 1024
+
+/** 组件属性 */
+const props = defineProps<{
+  /** 会话 ID */
+  conversationId: string
+}>()
+
+/** 组件事件 */
+const emit = defineEmits<{
+  /** 图片发送成功（含视觉描述） */
+  (e: 'sent', data: { imageBase64: string; description: string; visionResult: any }): void
+  /** 发送出错 */
+  (e: 'error', message: string): void
+}>()
+
+// ===========================================================================
+// 状态
+// ===========================================================================
+
+/** 文件选择器引用 */
+const fileInput = ref<HTMLInputElement>()
+
+/** 选中的文件 */
+const selectedFile = ref<File | null>(null)
+
+/** 预览 URL */
+const previewUrl = ref('')
+
+/** 补充描述文字 */
+const description = ref('')
+
+/** 是否正在分析 */
+const analyzing = ref(false)
+
+/** 视觉理解结果文本 */
+const visionResult = ref('')
+
+/** 视觉理解置信度 */
+const visionConfidence = ref(0)
+
+/** 错误消息 */
+const errorMessage = ref('')
+
+// ===========================================================================
+// 方法
+// ===========================================================================
+
+/** 打开文件选择器 */
+function openFilePicker() {
+  fileInput.value?.click()
+}
+
+/** 文件选择回调 */
+function onFileSelected(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+
+  // 校验类型
+  if (!ALLOWED_TYPES.includes(file.type)) {
+    errorMessage.value = '不支持的图片格式，请选择 PNG/JPG/GIF/WebP'
+    return
+  }
+
+  // 校验大小
+  if (file.size > MAX_SIZE) {
+    errorMessage.value = `图片过大（${(file.size / 1024 / 1024).toFixed(1)}MB），最大 10MB`
+    return
+  }
+
+  errorMessage.value = ''
+  selectedFile.value = file
+
+  // 生成预览 URL
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    previewUrl.value = e.target?.result as string
+  }
+  reader.readAsDataURL(file)
+}
+
+/** 移除选中文件 */
+function removeFile() {
+  selectedFile.value = null
+  previewUrl.value = ''
+  description.value = ''
+  visionResult.value = ''
+  visionConfidence.value = 0
+  errorMessage.value = ''
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
+}
+
+/** 发送图片并获取视觉理解结果 */
+async function sendImage() {
+  if (!selectedFile.value) return
+
+  analyzing.value = true
+  errorMessage.value = ''
+
+  try {
+    // 构建 FormData
+    const formData = new FormData()
+    formData.append('image', selectedFile.value)
+    formData.append('conversation_id', props.conversationId)
+    if (description.value) {
+      formData.append('description_hint', description.value)
+    }
+
+    // 调用视觉理解 API
+    const response = await fetch('/api/vision/analyze', {
+      method: 'POST',
+      body: formData,
+      headers: {
+        // 不要设置 Content-Type，让浏览器自动处理 multipart/form-data
+      },
+    })
+
+    const result = await response.json()
+
+    if (result.code === 0 && result.data) {
+      visionResult.value = result.data.description || ''
+      visionConfidence.value = Math.round((result.data.confidence || 0) * 100)
+
+      // 触发发送事件
+      emit('sent', {
+        imageBase64: previewUrl.value,
+        description: result.data.description || description.value,
+        visionResult: result.data,
+      })
+    } else {
+      errorMessage.value = result.message || '视觉分析失败，请重试'
+      emit('error', errorMessage.value)
+    }
+  } catch (err: any) {
+    errorMessage.value = '网络异常，视觉分析请求失败'
+    emit('error', errorMessage.value)
+  } finally {
+    analyzing.value = false
+  }
+}
+</script>
+
+<style scoped>
+/* =========================================================================
+   截图上传组件 — H5 移动端适配
+   ========================================================================= */
+.image-uploader {
+  margin: 4px 0;
+}
+
+/* 触发按钮 */
+.image-uploader__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  background: #f7f8fa;
+  border: 1px dashed #c8c9cc;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.image-uploader__trigger:hover {
+  background: #ecf5ff;
+  border-color: #1989fa;
+}
+
+.image-uploader__trigger-icon {
+  font-size: 16px;
+}
+
+.image-uploader__trigger-text {
+  font-size: 13px;
+  color: #646566;
+}
+
+/* 预览区域 */
+.image-uploader__preview {
+  background: #f7f8fa;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.image-uploader__preview-wrapper {
+  position: relative;
+  display: inline-block;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.image-uploader__preview-img {
+  max-width: 200px;
+  max-height: 200px;
+  display: block;
+  border-radius: 8px;
+  object-fit: contain;
+  border: 1px solid #ebedf0;
+}
+
+.image-uploader__preview-remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 20px;
+  height: 20px;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+/* 描述输入 */
+.image-uploader__desc-section {
+  position: relative;
+  margin-bottom: 8px;
+}
+
+.image-uploader__desc-input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ebedf0;
+  border-radius: 6px;
+  font-size: 13px;
+  resize: none;
+  outline: none;
+  font-family: inherit;
+}
+
+.image-uploader__desc-input:focus {
+  border-color: #1989fa;
+}
+
+.image-uploader__desc-count {
+  position: absolute;
+  bottom: 4px;
+  right: 8px;
+  font-size: 10px;
+  color: #c8c9cc;
+}
+
+/* 操作按钮 */
+.image-uploader__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* 分析结果 */
+.image-uploader__result {
+  margin-top: 8px;
+  padding: 10px 12px;
+  background: #f0f7ff;
+  border-radius: 8px;
+  border-left: 3px solid #1989fa;
+}
+
+.image-uploader__result-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.image-uploader__result-icon {
+  font-size: 14px;
+}
+
+.image-uploader__result-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #1989fa;
+}
+
+.image-uploader__result-confidence {
+  font-size: 11px;
+  color: #07c160;
+  margin-left: auto;
+}
+
+.image-uploader__result-body {
+  font-size: 13px;
+  color: #323233;
+  line-height: 1.5;
+}
+
+/* 错误提示 */
+.image-uploader__error {
+  margin-top: 8px;
+  padding: 6px 10px;
+  background: #fff0f0;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #ee0a24;
+}
+
+/* 隐藏的文件选择器 */
+.image-uploader__file-input {
+  display: none;
+}
+</style>
diff --git a/frontend-h5/src/components/TriageCard.vue b/frontend-h5/src/components/TriageCard.vue
new file mode 100644
index 0000000..c2f8029
--- /dev/null
+++ b/frontend-h5/src/components/TriageCard.vue
@@ -0,0 +1,529 @@
+<!-- =============================================================================
+  企微IT智能服务台 — H5员工端 分诊置顶卡片（Tier1 / P1-1 / D4）
+  =============================================================================
+  说明：AI 分诊式回复卡片，将复杂问题拆分为分步选择题（是/否/含概率推荐），
+    卡片置顶悬浮展示，支持专家模式切换。
+  
+  D4 硬约束：
+    - 一次给几步由 AI 判复杂度自适应
+    - 概率展示为百分比（不披露原始 confidence 给员工）
+    - 专家模式默认关（分步），老手可开一把梭
+    - 卡片置顶/悬浮
+  ============================================================================= -->
+
+<template>
+  <div v-if="visible" class="triage-card" :class="{ 'triage-card--collapsed': collapsed }">
+    <!-- 标题栏：步骤进度 + 折叠按钮 -->
+    <div class="triage-card__header" @click="toggleCollapse">
+      <div class="triage-card__step-badge">
+        <span class="triage-card__step-icon">🤖</span>
+        <span class="triage-card__step-text">
+          AI 分诊（第 {{ currentStep }}/{{ totalSteps }} 步）
+        </span>
+      </div>
+      <div class="triage-card__header-right">
+        <!-- 专家模式开关 -->
+        <van-switch
+          v-model="expertMode"
+          size="20px"
+          active-color="#1989fa"
+          @click.stop
+          @change="onExpertModeChange"
+        />
+        <span class="triage-card__expert-label">专家模式</span>
+        <span class="triage-card__collapse-arrow">
+          {{ collapsed ? '展开' : '收起' }}
+        </span>
+      </div>
+    </div>
+
+    <!-- 题目区域 -->
+    <div v-show="!collapsed" class="triage-card__body">
+      <!-- 问题文本 -->
+      <div class="triage-card__question">
+        Q: {{ currentQuestion }}
+      </div>
+
+      <!-- 选项列表 -->
+      <div class="triage-card__options">
+        <div
+          v-for="(option, idx) in currentOptions"
+          :key="idx"
+          class="triage-card__option"
+          :class="{
+            'triage-card__option--selected': option.selected,
+            'triage-card__option--recommended': option.recommended && !option.selected,
+            'triage-card__option--excluded': option.excluded,
+          }"
+          @click="selectOption(idx)"
+        >
+          <div class="triage-card__option-radio">
+            <span v-if="option.selected" class="triage-card__option-dot" />
+          </div>
+          <span class="triage-card__option-label">{{ option.label }}</span>
+          <!-- 概率推荐标签（仅百分比，不披露原始confidence） -->
+          <span
+            v-if="option.probability !== undefined"
+            class="triage-card__option-probability"
+            :class="{ 'triage-card__option-probability--high': option.probability >= 70 }"
+          >
+            {{ option.probability }}%
+          </span>
+          <!-- 推荐标记 -->
+          <span v-if="option.recommended" class="triage-card__option-recommend">⭐推荐</span>
+          <!-- 排除标记 -->
+          <span v-if="option.excluded" class="triage-card__option-excluded">已排除</span>
+        </div>
+      </div>
+
+      <!-- 已收集上下文（P0-3 转人工时附带） -->
+      <div v-if="collectedContext.length > 0" class="triage-card__context">
+        <div class="triage-card__context-title">✅ 已收集上下文：</div>
+        <div class="triage-card__context-tags">
+          <span
+            v-for="(ctx, idx) in collectedContext"
+            :key="idx"
+            class="triage-card__context-tag"
+          >
+            {{ ctx }}
+          </span>
+        </div>
+      </div>
+
+      <!-- 专家模式下一步展示 -->
+      <div v-if="expertMode && nextSteps.length > 0" class="triage-card__expert-steps">
+        <div class="triage-card__expert-steps-title">📋 后续步骤预览：</div>
+        <div
+          v-for="(step, idx) in nextSteps"
+          :key="idx"
+          class="triage-card__expert-step-item"
+        >
+          <span class="triage-card__expert-step-num">{{ idx + 1 + currentStep }}</span>
+          {{ step.question }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部操作栏 -->
+    <div v-show="!collapsed" class="triage-card__footer">
+      <van-button
+        round
+        type="default"
+        size="small"
+        @click="handleSkip"
+      >
+        跳过
+      </van-button>
+      <van-button
+        round
+        type="primary"
+        size="small"
+        :disabled="!hasSelection"
+        @click="handleConfirm"
+      >
+        {{ isLastStep ? '完成' : '下一步' }}
+      </van-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+/** 单个选项结构 */
+interface TriageOption {
+  /** 选项标签 */
+  label: string
+  /** 是否被用户选中 */
+  selected: boolean
+  /** AI 推荐概率（百分比 0-100，不披露原始confidence） */
+  probability?: number
+  /** 坐席推荐标记 */
+  recommended?: boolean
+  /** 坐席排除标记 */
+  excluded?: boolean
+}
+
+/** 单个分诊步骤 */
+interface TriageStep {
+  /** 问题文本 */
+  question: string
+  /** 选项列表 */
+  options: TriageOption[]
+  /** 该步骤已收集的上下文 */
+  collectedContext: string[]
+}
+
+/** 组件属性 */
+const props = defineProps<{
+  /** 是否可见 */
+  visible: boolean
+  /** 当前步骤序号（1-based） */
+  step: number
+  /** 总步骤数 */
+  total: number
+  /** 所有步骤数据 */
+  steps: TriageStep[]
+  /** AI 置信度（内部使用，不展示给员工） */
+  confidence?: number
+}>()
+
+/** 组件事件 */
+const emit = defineEmits<{
+  /** 确认当前步骤 */
+  (e: 'confirm', stepIndex: number, selectedLabel: string): void
+  /** 跳过当前步骤 */
+  (e: 'skip', stepIndex: number): void
+  /** 专家模式切换 */
+  (e: 'expert-mode-change', enabled: boolean): void
+  /** 转人工 */
+  (e: 'transfer-human', context: string[]): void
+}>()
+
+// ===========================================================================
+// 状态
+// ===========================================================================
+
+/** 是否折叠卡片 */
+const collapsed = ref(false)
+
+/** 专家模式开关（默认关） */
+const expertMode = ref(false)
+
+/** 当前步骤序号（0-based） */
+const currentStepIndex = computed(() => Math.max(0, Math.min(props.step - 1, props.steps.length - 1)))
+
+/** 当前步骤数据 */
+const currentStepData = computed(() => props.steps[currentStepIndex.value] ?? null)
+
+/** 当前问题文本 */
+const currentQuestion = computed(() => currentStepData.value?.question ?? '')
+
+/** 当前选项列表 */
+const currentOptions = computed(() => currentStepData.value?.options ?? [])
+
+/** 已收集上下文（所有步骤的上下文汇总） */
+const collectedContext = computed(() => {
+  const ctx: string[] = []
+  for (let i = 0; i <= currentStepIndex.value; i++) {
+    const step = props.steps[i]
+    if (step?.collectedContext) {
+      ctx.push(...step.collectedContext)
+    }
+  }
+  return ctx
+})
+
+/** 总步骤数 */
+const totalSteps = computed(() => props.total || props.steps.length)
+
+/** 当前步骤（1-based 展示用） */
+const currentStep = computed(() => currentStepIndex.value + 1)
+
+/** 是否有选中项 */
+const hasSelection = computed(() => currentOptions.value.some(o => o.selected))
+
+/** 是否为最后一步 */
+const isLastStep = computed(() => currentStep.value >= totalSteps.value)
+
+/** 后续步骤预览（专家模式） */
+const nextSteps = computed(() => {
+  if (!expertMode.value || isLastStep.value) return []
+  return props.steps.slice(currentStepIndex.value + 1)
+})
+
+// ===========================================================================
+// 方法
+// ===========================================================================
+
+/** 折叠/展开卡片 */
+function toggleCollapse() {
+  collapsed.value = !collapsed.value
+}
+
+/** 选择选项 */
+function selectOption(idx: number) {
+  // 被排除的选项不可选
+  const option = currentOptions.value[idx]
+  if (option?.excluded) return
+
+  // 单选模式：取消其他，选中当前
+  currentOptions.value.forEach((o, i) => {
+    o.selected = i === idx && !o.selected
+  })
+}
+
+/** 确认当前步骤 */
+function handleConfirm() {
+  const selected = currentOptions.value.find(o => o.selected)
+  if (selected) {
+    emit('confirm', currentStepIndex.value, selected.label)
+  }
+}
+
+/** 跳过当前步骤 */
+function handleSkip() {
+  emit('skip', currentStepIndex.value)
+}
+
+/** 专家模式切换 */
+function onExpertModeChange(enabled: boolean) {
+  emit('expert-mode-change', enabled)
+}
+
+/** 暴露方法供父组件调用 */
+defineExpose({
+  /** 设置坐席排除项 */
+  setExcludedOptions(labels: string[]) {
+    currentOptions.value.forEach(o => {
+      if (labels.includes(o.label)) {
+        o.excluded = true
+        o.selected = false
+      }
+    })
+  },
+  /** 设置坐席推荐项 */
+  setRecommendedOption(label: string) {
+    currentOptions.value.forEach(o => {
+      o.recommended = o.label === label
+    })
+  },
+})
+</script>
+
+<style scoped>
+/* =========================================================================
+   分诊卡片 — 置顶悬浮、Vant 风格
+   ========================================================================= */
+.triage-card {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  margin: 8px 12px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.triage-card--collapsed {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+
+/* 标题栏 */
+.triage-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
+  cursor: pointer;
+  user-select: none;
+}
+
+.triage-card__step-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.triage-card__step-icon {
+  font-size: 16px;
+}
+
+.triage-card__step-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1989fa;
+}
+
+.triage-card__header-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: #969799;
+}
+
+.triage-card__expert-label {
+  margin-right: 8px;
+}
+
+.triage-card__collapse-arrow {
+  font-size: 12px;
+  color: #1989fa;
+}
+
+/* 内容区 */
+.triage-card__body {
+  padding: 12px 14px;
+}
+
+.triage-card__question {
+  font-size: 15px;
+  font-weight: 500;
+  color: #323233;
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+/* 选项列表 */
+.triage-card__options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.triage-card__option {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  border: 1px solid #ebedf0;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  gap: 8px;
+}
+
+.triage-card__option:hover {
+  background: #f7f8fa;
+}
+
+.triage-card__option--selected {
+  border-color: #1989fa;
+  background: #ecf5ff;
+}
+
+.triage-card__option--recommended {
+  border-color: #ff976a;
+  background: #fff7f0;
+}
+
+.triage-card__option--excluded {
+  border-color: #ebedf0;
+  background: #f5f5f5;
+  opacity: 0.5;
+  cursor: not-allowed;
+  text-decoration: line-through;
+}
+
+.triage-card__option-radio {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid #c8c9cc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.triage-card__option--selected .triage-card__option-radio {
+  border-color: #1989fa;
+}
+
+.triage-card__option-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #1989fa;
+}
+
+.triage-card__option-label {
+  flex: 1;
+  font-size: 14px;
+  color: #323233;
+}
+
+.triage-card__option-probability {
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: #f0f0f0;
+  color: #969799;
+}
+
+.triage-card__option-probability--high {
+  background: #e8f8e8;
+  color: #07c160;
+}
+
+.triage-card__option-recommend {
+  font-size: 12px;
+  color: #ff976a;
+}
+
+.triage-card__option-excluded {
+  font-size: 12px;
+  color: #c8c9cc;
+}
+
+/* 已收集上下文 */
+.triage-card__context {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px dashed #ebedf0;
+}
+
+.triage-card__context-title {
+  font-size: 12px;
+  color: #969799;
+  margin-bottom: 6px;
+}
+
+.triage-card__context-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.triage-card__context-tag {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: #f0f7ff;
+  color: #1989fa;
+}
+
+/* 专家模式预览 */
+.triage-card__expert-steps {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px dashed #ebedf0;
+}
+
+.triage-card__expert-steps-title {
+  font-size: 12px;
+  color: #ff976a;
+  margin-bottom: 6px;
+}
+
+.triage-card__expert-step-item {
+  font-size: 12px;
+  color: #969799;
+  line-height: 1.6;
+  padding: 2px 0;
+}
+
+.triage-card__expert-step-num {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 50%;
+  background: #f0f0f0;
+  text-align: center;
+  font-size: 10px;
+  margin-right: 4px;
+}
+
+/* 底部操作栏 */
+.triage-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: 1px solid #f5f5f5;
+}
+</style>
diff --git a/frontend-h5/src/components/chat/MessageBubble.vue b/frontend-h5/src/components/chat/MessageBubble.vue
index 710e5cc..ae65987 100644
--- a/frontend-h5/src/components/chat/MessageBubble.vue
+++ b/frontend-h5/src/components/chat/MessageBubble.vue
@@ -29,8 +29,8 @@
   >
     <!-- 发送者名称（坐席和 AI 消息显示在左侧） -->
     <div v-if="msg.message_type !== 'employee'" class="message-bubble__sender">
-      <!-- AI 消息显示 [AI回复] 标签 -->
-      <span v-if="msg.message_type === 'ai'" class="message-bubble__ai-tag">[AI回复]</span>
+      <!-- AI 消息显示达寇拉头像和名称 -->
+      <img v-if="msg.message_type === 'ai'" src="/duckula.webp" class="message-bubble__ai-avatar" alt="Duckula" />
       <span class="message-bubble__sender-name">{{ senderName }}</span>
     </div>
 
@@ -220,7 +220,7 @@ const senderName = computed(() => {
     return props.msg.sender_name || 'IT坐席'
   }
   if (props.msg.message_type === 'ai') {
-    return 'AI助手'
+    return 'Duckula（达寇拉）'
   }
   return props.msg.sender_name
 })
@@ -366,6 +366,15 @@ function previewImage(): void {
   padding-left: 4px;
 }
 
+/* AI 头像 */
+.message-bubble__ai-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
 /* AI 标签 */
 .message-bubble__ai-tag {
   display: inline-block;
diff --git a/frontend-h5/src/components/chat/MessageItem.vue b/frontend-h5/src/components/chat/MessageItem.vue
index 5786f55..da18641 100644
--- a/frontend-h5/src/components/chat/MessageItem.vue
+++ b/frontend-h5/src/components/chat/MessageItem.vue
@@ -25,7 +25,8 @@
   >
     <!-- 发送者名称（坐席和 AI 消息显示在左侧） -->
     <div v-if="msg.message_type !== 'employee'" class="message-item__sender">
-      <span v-if="msg.message_type === 'ai'" class="message-item__ai-tag">[AI回复]</span>
+      <!-- AI 消息显示达寇拉头像和名称 -->
+      <img v-if="msg.message_type === 'ai'" src="/duckula.webp" class="message-item__ai-avatar" alt="Duckula" />
       <span class="message-item__sender-name">{{ senderName }}</span>
     </div>
 
@@ -199,7 +200,7 @@ const senderName = computed(() => {
     return props.msg.sender_name || 'IT坐席'
   }
   if (props.msg.message_type === 'ai') {
-    return 'AI助手'
+    return 'Duckula（达寇拉）'
   }
   return props.msg.sender_name
 })
@@ -413,6 +414,15 @@ function previewImage(): void {
   padding-left: 4px;
 }
 
+/* AI 头像 */
+.message-item__ai-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
 .message-item__ai-tag {
   display: inline-block;
   font-size: 10px;
diff --git a/frontend-h5/src/composables/useConfidenceGate.ts b/frontend-h5/src/composables/useConfidenceGate.ts
new file mode 100644
index 0000000..9612ebf
--- /dev/null
+++ b/frontend-h5/src/composables/useConfidenceGate.ts
@@ -0,0 +1,180 @@
+// =============================================================================
+// 企微IT智能服务台 — H5员工端 置信门控逻辑 Composables（Tier1 / P0-3 / D3）
+// =============================================================================
+// 说明：置信门控逻辑复用 composable，封装 confidence 阈值判定、
+//   转人工上下文组装、阈值读取等核心逻辑。
+//
+// D3 硬约束：
+//   - 全局阈值 0.7（可通过 settings.confidence_gate_threshold 配置）
+//   - confidence < 0.7 → 触发门控
+//   - 转人工携带上下文快照
+// =============================================================================
+
+import { ref, computed, readonly } from 'vue'
+
+/** 默认置信门控阈值 */
+const DEFAULT_CONFIDENCE_GATE_THRESHOLD = 0.7
+
+/** 置信门控结果 */
+interface ConfidenceGateResult {
+  /** 是否触发门控（confidence < threshold） */
+  triggered: boolean
+  /** 展示给用户的概率（百分比，0-100） */
+  displayProbability: number
+  /** 门控级别：critical(<0.3) / warning(<0.5) / caution */
+  severity: 'critical' | 'warning' | 'caution' | 'normal'
+  /** 是否应该展示转人工入口 */
+  shouldShowTransfer: boolean
+}
+
+/** useConfidenceGate Composable */
+export function useConfidenceGate(threshold?: number) {
+  // =========================================================================
+  // 状态
+  // =========================================================================
+
+  /** 当前置信门控阈值 */
+  const gateThreshold = ref(threshold ?? DEFAULT_CONFIDENCE_GATE_THRESHOLD)
+
+  /** 最近一次 AI 回复的 confidence */
+  const lastConfidence = ref<number | null>(null)
+
+  /** 已收集的上下文快照 */
+  const contextSnapshot = ref<string[]>([])
+
+  /** 门控是否已被用户处理（继续对话/转人工） */
+  const dismissed = ref(false)
+
+  // =========================================================================
+  // 计算属性
+  // =========================================================================
+
+  /** 当前门控结果 */
+  const gateResult = computed<ConfidenceGateResult>(() => {
+    const conf = lastConfidence.value
+    if (conf === null || conf === undefined) {
+      return {
+        triggered: false,
+        displayProbability: 0,
+        severity: 'normal',
+        shouldShowTransfer: false,
+      }
+    }
+
+    const triggered = conf < gateThreshold.value
+    const displayProbability = Math.round(conf * 100)
+
+    let severity: ConfidenceGateResult['severity'] = 'normal'
+    if (conf < 0.3) severity = 'critical'
+    else if (conf < 0.5) severity = 'warning'
+    else if (conf < gateThreshold.value) severity = 'caution'
+
+    return {
+      triggered,
+      displayProbability,
+      severity,
+      shouldShowTransfer: triggered && !dismissed.value,
+    }
+  })
+
+  /** 是否应该展示置信门控横幅 */
+  const showGateBanner = computed(() => gateResult.value.shouldShowTransfer)
+
+  /** 门控触发状态（只读） */
+  const isGateTriggered = computed(() => gateResult.value.triggered)
+
+  // =========================================================================
+  // 方法
+  // =========================================================================
+
+  /**
+   * 评估 AI 回复的置信度
+   * @param confidence AI 回复的 confidence 值（0.0-1.0）
+   * @param context 附加上下文信息（已填写的表单数据等）
+   */
+  function evaluateConfidence(confidence: number | null | undefined, context?: string[]) {
+    lastConfidence.value = confidence ?? null
+    dismissed.value = false
+
+    if (context && context.length > 0) {
+      // 合并上下文（去重）
+      const merged = new Set([...contextSnapshot.value, ...context])
+      contextSnapshot.value = [...merged]
+    }
+  }
+
+  /**
+   * 添加上下文快照条目
+   * @param items 上下文条目
+   */
+  function addContext(...items: string[]) {
+    const merged = new Set([...contextSnapshot.value, ...items])
+    contextSnapshot.value = [...merged]
+  }
+
+  /**
+   * 清除上下文快照
+   */
+  function clearContext() {
+    contextSnapshot.value = []
+  }
+
+  /**
+   * 用户选择"继续询问 AI" — 关闭门控横幅
+   */
+  function dismissGate() {
+    dismissed.value = true
+  }
+
+  /**
+   * 用户选择"转人工" — 组装上下文并触发转人工
+   * @returns 上下文快照数组（用于转人工请求）
+   */
+  function prepareTransferToHuman(): string[] {
+    const snapshot = [...contextSnapshot.value]
+    dismissed.value = true
+    return snapshot
+  }
+
+  /**
+   * 重置所有状态（新会话开始时调用）
+   */
+  function reset() {
+    lastConfidence.value = null
+    contextSnapshot.value = []
+    dismissed.value = false
+  }
+
+  /**
+   * 动态更新门控阈值
+   * @param newThreshold 新阈值（0.0-1.0）
+   */
+  function updateThreshold(newThreshold: number) {
+    if (newThreshold >= 0 && newThreshold <= 1) {
+      gateThreshold.value = newThreshold
+    }
+  }
+
+  // =========================================================================
+  // 导出
+  // =========================================================================
+
+  return {
+    // 只读状态
+    gateThreshold: readonly(gateThreshold),
+    lastConfidence: readonly(lastConfidence),
+    contextSnapshot: readonly(contextSnapshot),
+    gateResult,
+    showGateBanner,
+    isGateTriggered,
+
+    // 方法
+    evaluateConfidence,
+    addContext,
+    clearContext,
+    dismissGate,
+    prepareTransferToHuman,
+    reset,
+    updateThreshold,
+  }
+}
diff --git a/frontend-h5/src/composables/useH5WebSocket.ts b/frontend-h5/src/composables/useH5WebSocket.ts
index 8755f62..a9518bf 100644
--- a/frontend-h5/src/composables/useH5WebSocket.ts
+++ b/frontend-h5/src/composables/useH5WebSocket.ts
@@ -151,9 +151,13 @@ export function useH5WebSocket() {
 
       // 如果不是主动断开，启动降级和重连
       if (!intentionalDisconnect) {
+        // WS 断连：清理未完成的打字机占位气泡，避免半成品气泡残留
+        // 为什么：流式推送中途断连时，占位气泡无法收到 ai_reply 终态，
+        //       交由 3 秒轮询兜底重新拉取完整 AI 消息
+        const store = useConversationStore()
+        store.cancelStreamingBubble()
         // WS 断连，启动轮询 fallback
         // 为什么：WS 不可用时，仍需通过轮询获取最新数据
-        const store = useConversationStore()
         store.startPolling()
         // 尝试重连
         scheduleReconnect()
@@ -353,6 +357,30 @@ export function useH5WebSocket() {
         }
         break
 
+      // ==================================================================
+      // AI 回复流式推送（改造方案 A：发送瞬时返回，AI 经 WS 推回）
+      // ==================================================================
+      case 'ai_reply_chunk':
+        // 打字机：逐 chunk 累积到临时 AI 气泡
+        if (msg.data) {
+          store.handleAiReplyChunk(msg.data)
+        }
+        break
+
+      case 'ai_reply':
+        // AI 终态：用真实消息替换打字机气泡
+        if (msg.data) {
+          store.handleAiReply(msg.data)
+        }
+        break
+
+      case 'ai_reply_failed':
+        // AI 异常：占位气泡替换为错误提示
+        if (msg.data) {
+          store.handleAiReplyFailed(msg.data)
+        }
+        break
+
       case 'pong':
         // 心跳响应，不需要处理
         break
diff --git a/frontend-h5/src/stores/conversation.ts b/frontend-h5/src/stores/conversation.ts
index 44a0cc4..3e01dd4 100644
--- a/frontend-h5/src/stores/conversation.ts
+++ b/frontend-h5/src/stores/conversation.ts
@@ -185,6 +185,18 @@ export const useConversationStore = defineStore('conversation', () => {
   /** 参与者面板是否展开 */
   const participantPanelVisible = ref<boolean>(false)
 
+  // ==========================================================================
+  // 流式 AI 回复（打字机）临时状态 — 改造方案 A
+  // ==========================================================================
+
+  /**
+   * 当前正在流式接收的 AI 消息临时气泡 ID
+   * 做什么：记录打字机占位气泡的 message_id，流式 chunk 累积到该气泡，
+   *       收到 ai_reply 终态后替换为真实消息
+   * 为什么：员工端同时只有一个活跃会话，无需用 Map 存多会话
+   */
+  const streamingAiMessageId = ref<string | null>(null)
+
   // ==========================================================================
   // 消息去重相关状态（与 agent 端一致，WS-06 修复）
   // ==========================================================================
@@ -518,11 +530,9 @@ export const useConversationStore = defineStore('conversation', () => {
         messages.value.push({ ...resp.user_message, status: 'sent' })
       }
 
-      // 将 AI 回复追加到本地列表（如果存在）
-      if (resp.ai_reply) {
-        messages.value.push(resp.ai_reply)
-        lastMessageId.value = resp.ai_reply.message_id
-      }
+      // 注意：AI 回复不再经 HTTP 同步返回（后端已改为 ai_reply: null），
+      // 而是由后台任务经 WebSocket 推回（ai_reply_chunk / ai_reply 事件）。
+      // 前端收到 WS ai_reply 终态后，在 handleAiReply 中追加真实 AI 消息。
 
       // 更新「是否可呼叫坐席」标志
       canCallAgent.value = resp.can_call_agent ?? false
@@ -961,6 +971,162 @@ export const useConversationStore = defineStore('conversation', () => {
     stopPolling()
   }
 
+  /**
+   * 处理 WS 流式 AI 回复 chunk（打字机效果）
+   * 做什么：首个 chunk 时创建临时 AI 气泡，后续 chunk 累积到该气泡 content
+   * 为什么：后端 AI 推理（Dify）流式返回，逐字推送以获得打字机体验，
+   *       避免整段等待（原同步方案卡"发送中"3~15s）
+   *
+   * @param data - { conversation_id, chunk }
+   */
+  function handleAiReplyChunk(data: { conversation_id: string; chunk: string }): void {
+    // 仅处理当前会话，避免串台
+    if (currentConversation.value?.conversation_id !== data.conversation_id) return
+    if (!data.chunk) return
+
+    // 首个 chunk：创建占位气泡（不设置 status，避免误显示"发送中"）
+    if (!streamingAiMessageId.value) {
+      const tempId = `ai_stream_${data.conversation_id}_${Date.now()}`
+      streamingAiMessageId.value = tempId
+      messages.value.push({
+        message_id: tempId,
+        conversation_id: data.conversation_id,
+        message_type: 'ai',
+        msg_type: 'text',
+        content: '',
+        sender_name: 'Duckula（达寇拉）',
+        created_at: new Date().toISOString(),
+      })
+    }
+
+    // 累积 chunk（Vue3 ref 深层响应式，直接改属性即可触发重渲染 → 打字机）
+    const idx = messages.value.findIndex(m => m.message_id === streamingAiMessageId.value)
+    if (idx !== -1) {
+      messages.value[idx].content += data.chunk
+    }
+  }
+
+  /**
+   * 处理 WS AI 回复终态
+   * 做什么：用真实 AI 消息（含 DB message_id）替换打字机占位气泡，
+   *       登记 message_id 去重，同步计数 / 可呼叫坐席 / 会话状态
+   * 为什么：打字机结束后需落定为真实消息，且防止轮询兜底重复添加同一消息
+   *
+   * @param data - 后端 _persist_and_push 推送的 ai_reply 数据
+   */
+  function handleAiReply(data: {
+    message_id: string
+    conversation_id: string
+    sender_type: string
+    sender_id: string
+    sender_name: string
+    content: string
+    msg_type: string
+    is_guidance: boolean
+    ai_reply_count: number
+    can_call_agent: boolean
+    conversation_status: string
+  }): void {
+    if (currentConversation.value?.conversation_id !== data.conversation_id) return
+
+    const finalMessage: Message = {
+      message_id: data.message_id,
+      conversation_id: data.conversation_id,
+      message_type: (data.sender_type || 'ai') as MessageType,
+      msg_type: (data.msg_type || 'text') as MsgContentType,
+      content: data.content,
+      sender_name: data.sender_name || 'Duckula（达寇拉）',
+      created_at: new Date().toISOString(),
+      status: 'sent',
+    }
+
+    // 用真实消息替换占位气泡（若存在）
+    const idx = streamingAiMessageId.value
+      ? messages.value.findIndex(m => m.message_id === streamingAiMessageId.value)
+      : -1
+    if (idx !== -1) {
+      messages.value[idx] = finalMessage
+    } else {
+      // 没有占位气泡（如 WS 重连后首条 ai_reply），直接追加
+      messages.value.push(finalMessage)
+    }
+    streamingAiMessageId.value = null
+
+    // 去重登记：防止轮询兜底重复添加同一 AI 消息
+    trackProcessedMessageId(data.message_id)
+    lastMessageId.value = data.message_id
+
+    // 同步计数与可呼叫坐席状态
+    canCallAgent.value = data.can_call_agent ?? false
+    if (currentConversation.value) {
+      currentConversation.value.can_call_agent = data.can_call_agent ?? false
+      currentConversation.value.ai_substantive_reply_count = data.ai_reply_count ?? 0
+      // 后端状态值（ai_handling/queued/serving/resolved）映射到 H5 识别的子集
+      // H5 ConversationInfo.status 仅接受 waiting/serving/resolved，
+      // ai_handling/queued 均表示"进行中未结单"，映射为 waiting
+      const statusMap: Record<string, 'waiting' | 'serving' | 'resolved'> = {
+        ai_handling: 'waiting',
+        queued: 'waiting',
+        serving: 'serving',
+        resolved: 'resolved',
+      }
+      currentConversation.value.status =
+        statusMap[data.conversation_status] || currentConversation.value.status
+    }
+
+    // 持久化缓存
+    const convId = currentConversation.value?.conversation_id
+    if (convId) saveMessagesToCache(convId, messages.value)
+  }
+
+  /**
+   * 处理 WS AI 回复失败（兜底）
+   * 做什么：将占位气泡（或新气泡）替换为错误提示，引导用户转人工
+   * 为什么：Dify 异常时不应让用户一直看到空白打字气泡
+   *
+   * @param data - { conversation_id, message }
+   */
+  function handleAiReplyFailed(data: { conversation_id: string; message: string }): void {
+    if (currentConversation.value?.conversation_id !== data.conversation_id) return
+
+    const errorMsg: Message = {
+      message_id: `ai_failed_${data.conversation_id}_${Date.now()}`,
+      conversation_id: data.conversation_id,
+      message_type: 'ai',
+      msg_type: 'text',
+      content: data.message || '⚠️ AI 服务异常，请输入「IT」转人工或稍后重试。',
+      sender_name: 'Duckula（达寇拉）',
+      created_at: new Date().toISOString(),
+      status: 'sent',
+    }
+
+    // 若仍有占位气泡，替换之；否则直接追加
+    const idx = streamingAiMessageId.value
+      ? messages.value.findIndex(m => m.message_id === streamingAiMessageId.value)
+      : -1
+    if (idx !== -1) {
+      messages.value[idx] = errorMsg
+    } else {
+      messages.value.push(errorMsg)
+    }
+    streamingAiMessageId.value = null
+  }
+
+  /**
+   * 取消流式气泡（WS 断连时调用）
+   * 做什么：若 WS 在流式推送中途断开，移除未完成的占位气泡，
+   *       交由 3 秒轮询兜底重新拉取完整 AI 消息
+   * 为什么：避免断连后留下半成品打字气泡
+   */
+  function cancelStreamingBubble(): void {
+    if (!streamingAiMessageId.value) return
+    const idx = messages.value.findIndex(m => m.message_id === streamingAiMessageId.value)
+    if (idx !== -1) {
+      messages.value.splice(idx, 1)
+    }
+    streamingAiMessageId.value = null
+  }
+
   /**
    * 初始化应用
    * 1. 获取用户信息
@@ -1129,5 +1295,11 @@ export const useConversationStore = defineStore('conversation', () => {
 
     // WS-06 消息去重（与 agent 端对齐，WebSocket 接入时使用）
     handleNewMessage,
+
+    // 流式 AI 回复（改造方案 A：打字机）
+    handleAiReplyChunk,
+    handleAiReply,
+    handleAiReplyFailed,
+    cancelStreamingBubble,
   }
 })
diff --git a/frontend-h5/vite.config.ts b/frontend-h5/vite.config.ts
index 034df20..f27c32c 100644
--- a/frontend-h5/vite.config.ts
+++ b/frontend-h5/vite.config.ts
@@ -35,7 +35,10 @@ export default defineConfig({
     // API 代理：将 /api 请求转发到后端
     proxy: {
       '/api': {
-        target: 'http://localhost:8000',
+        // 开发代理目标：默认 localhost:8000（宿主机本地直跑后端）；
+        // Docker 化 dev 栈中前端容器内的 localhost 不是后端，需用 compose 服务名 backend:8000。
+        // 通过 VITE_PROXY_TARGET 注入，避免写死导致容器内 502/ECONNREFUSED。
+        target: process.env.VITE_PROXY_TARGET || 'http://localhost:8000',
         changeOrigin: true,
         // 本地开发剥离 /api 前缀，因为后端路由不包含 /api（生产 nginx 负责剥离）
         rewrite: (path) => path.replace(/^\/api/, ''),