From 81408be21fad078f303ef42fdc5dbca86ddcd3c8 Mon Sep 17 00:00:00 2001 From: npmrun <1549469775@qq.com> Date: Sat, 8 Aug 2026 00:32:35 +0800 Subject: [PATCH] feat: enhance mobile responsiveness and UI adjustments across agent components --- app/components/agent/AgentInput.vue | 8 +- app/components/agent/AgentModelSelector.vue | 17 ++++ app/components/agent/AgentSidebar.vue | 123 +++++++++++++++++++++++++++- app/components/agent/AgentToolbar.vue | 39 ++++++++- app/composables/useAgentChat.ts | 15 ++-- app/pages/index.vue | 22 +++-- packages/drizzle-pkg/db.sqlite | Bin 1634304 -> 1634304 bytes 7 files changed, 207 insertions(+), 17 deletions(-) diff --git a/app/components/agent/AgentInput.vue b/app/components/agent/AgentInput.vue index 34e5fe6..2731057 100644 --- a/app/components/agent/AgentInput.vue +++ b/app/components/agent/AgentInput.vue @@ -361,14 +361,14 @@ defineExpose({ } .btn-stop { - width: 36px; height: 36px; background: var(--color-surface-dark); color: var(--color-on-dark); - font-size: 12px; + font-size: 13px; border-radius: 18px; - padding: 0 12px; - gap: 4px; + padding: 0 14px; + gap: 5px; + white-space: nowrap; } .btn-stop:hover { diff --git a/app/components/agent/AgentModelSelector.vue b/app/components/agent/AgentModelSelector.vue index af2102b..870d735 100644 --- a/app/components/agent/AgentModelSelector.vue +++ b/app/components/agent/AgentModelSelector.vue @@ -166,4 +166,21 @@ onUnmounted(() => { font-size: 13px; color: var(--color-muted); } + +/* ── Mobile ── */ + +@media (max-width: 767.98px) { + .selector-trigger { + padding: 6px 8px; + gap: 4px; + } + + .trigger-label { + max-width: 90px; + } + + .selector-dropdown { + min-width: 200px; + } +} diff --git a/app/components/agent/AgentSidebar.vue b/app/components/agent/AgentSidebar.vue index b7688ec..32c8b35 100644 --- a/app/components/agent/AgentSidebar.vue +++ b/app/components/agent/AgentSidebar.vue @@ -7,6 +7,7 @@ const props = defineProps<{ loggedIn: boolean; user: { name?: string | null; email?: string | null; role?: string | null } | null; collapsed: boolean; + mobile?: boolean; }>(); const emit = defineEmits<{ @@ -16,13 +17,15 @@ const emit = defineEmits<{ delete: [id: string]; login: []; toggle: []; + close: []; }>(); const isAdmin = computed(() => props.user?.role === "admin"); + + + + + +
+ + + + + + diff --git a/app/components/agent/AgentToolbar.vue b/app/components/agent/AgentToolbar.vue index 7775a0c..a308477 100644 --- a/app/components/agent/AgentToolbar.vue +++ b/app/components/agent/AgentToolbar.vue @@ -38,7 +38,7 @@ const emit = defineEmits<{
-
+
本对话 {{ rateLimitInfo.sessionRemaining }}/20 @@ -129,14 +129,51 @@ const emit = defineEmits<{ border-radius: 8px; font-size: 12px; color: var(--color-muted); + white-space: nowrap; + flex-shrink: 0; } .rl-icon { font-size: 13px; color: var(--color-accent-amber); + flex-shrink: 0; } .rl-sep { margin: 0 2px; } + +/* ── Mobile ── */ + +@media (max-width: 767.98px) { + .agent-toolbar { + padding: 10px 12px; + } + + .toolbar-left, + .toolbar-right { + gap: 6px; + min-width: 0; + } + + .toolbar-left { + flex: 1; + min-width: 0; + } + + .rate-limit-info { + padding: 4px 8px; + font-size: 11px; + } + + .rate-limit-info .rl-sep, + .rate-limit-info > span:not(.rl-icon) { + display: none; + } + + .rate-limit-info::after { + content: attr(data-short); + font-size: 11px; + } +} diff --git a/app/composables/useAgentChat.ts b/app/composables/useAgentChat.ts index e98c75e..d23ad50 100644 --- a/app/composables/useAgentChat.ts +++ b/app/composables/useAgentChat.ts @@ -513,12 +513,15 @@ export function useAgentChat(options: UseAgentChatOptions) { const msg = messages.value.find((m) => m.id === messageId); const newFeedback = msg?.feedback === feedback ? null : feedback; try { - await $fetch("/api/agent/feedback", { - method: "POST", - body: { messageId, feedback: newFeedback }, - }); - if (msg) { - msg.feedback = newFeedback; + const res = await $fetch<{ code: number; data: { messageId: string; feedback: "like" | "dislike" | null } }>( + "/api/agent/feedback", + { + method: "POST", + body: { messageId, feedback: newFeedback }, + }, + ); + if (res?.code === 0 && msg) { + msg.feedback = res.data?.feedback ?? newFeedback; } } catch { } diff --git a/app/pages/index.vue b/app/pages/index.vue index db13e09..8b16f01 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -9,7 +9,9 @@ definePageMeta({ const auth = useAuthSession(); const sessions = useAgentSessions(); +const isMobile = useMediaQuery('(max-width: 767.98px)'); const sidebarCollapsed = ref(false); +const mobileSidebarOpen = ref(false); const showPromptModal = ref(false); const systemPromptText = ref(""); const preferredModelId = ref(null); @@ -154,6 +156,14 @@ watch( }, ); +watch(isMobile, (mobile) => { + if (mobile) { + mobileSidebarOpen.value = false; + } else { + sidebarCollapsed.value = false; + } +}, { immediate: true }); + async function handleSend(content: string) { if (!sessions.currentSessionId.value) { await sessions.newSession(); @@ -214,13 +224,15 @@ onMounted(async () => { :current-session-id="sessions.currentSessionId.value" :logged-in="auth.loggedIn.value" :user="auth.user.value" - :collapsed="sidebarCollapsed" - @new-session="sessions.newSession()" - @select="sessions.selectSession($event)" + :collapsed="isMobile ? !mobileSidebarOpen : sidebarCollapsed" + :mobile="isMobile" + @new-session="sessions.newSession(); if (isMobile) mobileSidebarOpen = false" + @select="sessions.selectSession($event); if (isMobile) mobileSidebarOpen = false" @rename="sessions.renameSession" @delete="sessions.deleteSession" @login="handleLogin" - @toggle="sidebarCollapsed = !sidebarCollapsed" + @toggle="isMobile ? (mobileSidebarOpen = !mobileSidebarOpen) : (sidebarCollapsed = !sidebarCollapsed)" + @close="mobileSidebarOpen = false" /> { @feedback="handleFeedback" @edit="handleEdit" @regenerate="handleRegenerate" - @toggle-sidebar="sidebarCollapsed = !sidebarCollapsed" + @toggle-sidebar="isMobile ? (mobileSidebarOpen = !mobileSidebarOpen) : (sidebarCollapsed = !sidebarCollapsed)" @show-prompt="showPromptModal = true" @example="handleExample" /> diff --git a/packages/drizzle-pkg/db.sqlite b/packages/drizzle-pkg/db.sqlite index b63750714ca2b69111076709907e08e7bc22db3b..60cafb6fd9865bfe8554e2dea813c3983a1e0b8b 100644 GIT binary patch delta 13329 zcmd5?3sf7|nFb_*HP*v6U@(s`hQtPpu_O>eN&U*Z>1p$*vuSEiMBy;Cba>6^Dmc^cX$y^dslY2G~LJIZ0@8_Lr`m0#Md z%mBd~PPm-2!DZMAm%+_wv|IX=$SdBD(r%{z27S~c)dfp>r41rqwn&>y*$sAgy|$^c zs==_Og3?&+)@rX%pkb^AYn6@CwpMCA0)f*;nGGtZO6P60Gj5@vervU%x@ikdn;FU_ z6qr?NgVUqeG_*EZo3cf|_|u)H>MDb$-l6kWXgrO=E>&CV4J}QT)z+p;qccIEZZ^27 z7K_(yZ*&L*_UdY{fuXlhRJB887Yel16^1SD`bKrLslkQ?zSz6h+pM&qTIW(ZZLM_; zf-dz|r`1qRx0<~=bxXZKU@D%hNen=wZ+n+rKTiUpwc%OwpK9O zN~%g%D-h_Nrg}qTm0MTc*sL=M1@@M$2EESKRB6?;Y!3cgpEO%4@`~O?X~(5ws?^d{ zrQ|co&n4fKR7>(DDUu1vNlBN)A&!ba5HA${hv*lgcf}XP2gNUmjp8T7W$2^h(&fP= z1JW}oz8tYOIhk^E>Z&)Ywi=8YtJkQpIa9rJiX@&nMPm1yB9TidvR76%8=6f%y^Yp6 zn^T)+k?|r)x$eHiHPEQ^l@%3L z)kYOXQ+oJsqEs5Kwo+T6QCAst`YLUe(WtAYD)qF9*6XyC(P*inE6wUkz=TSjIbq(S z>_K=~<3lgNHDxot!ksp8jzXK%CND^qN+psc^pz3mJfGIs>fUNFSK2h5swS&mS5d8_ zO&YDG+EQI@)aXrBdNs_#SY^@aER`CQ+N3pBYV~HLUZ<(3q;*=O#X_rSW2MHZx2UuU zlSs+@9X#0i>8E%S+;_OPiI>ba31d^Gp~>B1@;0|rf2os59>~X&csUoY{CBvviL-B? zgcQAgN&4cFYhs@ZT3X)fOYZ;W@Bab8cev9g&caKU8B_Ai;}r1%iZi$`J~Lx?7Sh3cm4y z^ur%bqK8YA|n|$t?$6a%|YYul^ z5{&%2G(Q<$Z#kqV(vn5;3(AFxA1l_%|4aFTqC;+n`|EB>Hw61`N_%DKgW@-d(zIUNe62R~C1{%@mBbPnyD-&>#mxi*L2cKGHNI=o z4Zjm7~xUVOC z;l$*&*Vt3N;RC~LCkh|wVs{*moY}*Uj6~10vD*)YFC4gWWp`NJ*&7-e4UHcUclU&@ zz8V@i85(&#($yJ0^5%^zhY6ynh*X!8(TVe+vDf(9=$R~eri6UD*inMiS&BT=^C__i zwPq@c(Bfi3A=%CDxj-WAEkyw;_*6#9LL+;k?c?x}=*50C@s@lU`eCX3Sv{!gytjU) z+7i;e*Ppm{*!$K5gGKedk%z;o{A1##2V}D1wH#f(d@_|bY%zORu6l%lRbGjG`cI? z-hmqp?PpJK;}p1(EG@-raQ<|3a3C^>N=xB3dvZ_s=r(w2bl`0C>Q(ki_pkkJ?2d70 z$hW$2rIWon7&$YcxHhW0A3a@FjXCz;?b8Ip0MPpoz$?&t%6Q_T-Mx=yu+G*ui6w z{b$+WDYhdBFT%eOd+03t%5L)c=fCZ0GRg5r6b_TjcGl zk%2+J3+RVEG8#TK#2a?x)r;Z1r=r8{F!-R;SlyCK-pvj(>4o9xk<`_4JB?tWu%>Uco?Sxnvf={kuowi#>3EV z=xnli&5Wat^jK-q<8<2GFtU|urpdfw6J;}bZIs99D&sX$M>}X2{#}9=uE z?~aC9|CFmk{pj22^7L?@EJEZO5LG7I z&jRQG;_!p89hX95eSA#84hx{McNpLz(tmF9;5+QZ8OaEpFEd+zb_^AGMx%`EGs_0&VwWU zLYyE?o2ro1n$1+bZrWvKBzOe!!5!anbN0S+r&Jj169}-xL3}(tG1K6|@}pPxu^p$t z>L{;^b@VT(&vWoMb^Z$0Ku>Ys4*+axJet+K-*eLiuANLI!ULCtYeHu+Qqo75FtHa z*Em9g*H9!7k1L@OjRR(**8?Gub0^LX>~zcza0Alqw9_6d_9NQnrg5Z2r)s21pUFnK z7z<;fxJcUQgb)hPF2hfS7)-kwUEs2er(8Hu!2}$Pslh?nY23cv>-Lb?G0pH|l#QQK zIr%URx4|7LcLVR()3YltL>Vt+W}$U|o2ft_yq7T#$KAMnOsnP|EQEu6fsJska%UsC z%|>t!-xswKfoI;$Oz=$OhH{&o_--?l8{@}tR7%w(Z4-kp&R_KXM_t&Pmn3+zQ%E=` zIwJ3f*qeE06X8*04{Tf6ggv_LYumDf5zI*n8S2HU-yxiD9_|MB33pwE7mvk1)RvuHgdYDDvB>wOj*As1 z`On1|1&Qe2Kh=o!_CTWEgseNfZ51vAB)l$GT=?w)9O@2W$ijd~gd#XK5G6gAl+vEE zKIyrAOI43nx7(bYM%@8>f<}e>{j3W8>185)-c+iBK7KDF^GQCU^H2mkNr>Mw;STGP z&)Ub%M8?jCt{h}{_hEexK1*un`xJu$A=b3!>8Mppx%0g3Y~vGdm;MQ z_cCO$ROGLp_*6C~c~^zap7_z?b&i=q%vmKUfneP}Kil$I8Eo^!_g_1_)s9yPX^%c8 zjA9A(l3764&iq)#vc#STA z^;C96qw1*uV!6_rG7Z7s(?R3O_zW%lBZ6JTx*l0A8bk9~Nv zxc@AsAo9~(v+KGowJaL@T@k@A7*N9d;{GoQhY z$vs?C!oSeUl`9DX0{%O@0GrTHzL%Bd%g0s#wnlS%*K=){iO(sv#cV0#a3ZO%H&rlXEcYyl-owRKU_7pAMybor#zywDe1VNCN;0QG)#yVD3VBH9M3i7i0YOtPLI(8 zgZ}WvHUJThP+psZxaF9CZq&n}%NSf^*)vd~K%bs&D-4b8 zg*eP!@v~=k6=IkMBHvQ1E?KQEgHH{7@_a4Z{W`|w;r8$W-^I|#uJG|4&=l|+v$88m zAge>8dnb<`gC_#C!xKpd5Bh-h5FtplN~PjQdZyK51xkh8-Vqregofb*7cp1PM*=Q9 z04oh!aA1Ym(bMo|q4DkUoCiu2Y{m8tSbBEPalACg+F(Bnjo`&6Pxk>7$L7P4SFovz zy(aqUlk)7s!l-{Yp5vYap%MS&z-8#iKNpl2J{|-L3|(6xFPa}qSwQ)2bp2yRnH_&C zry3h+hq)Mk-?&n}iO(zGt7cOPXRokf^}4wH$G!1E$0pwPr-K>iLp)Cq>ADQ7%k$iz zfw&d&`8WFREh1M0%8JK0DMw)=Ygkc;zV&;8MEXl|8G8S;Y$0mxJc{>L`?#AX*kCmXqEblb50opODug-5&@g zYUq~9W`&haSLB=YF+33l&3na^eC7SKKmFl3F$E%6I@G8C1T7N1WZA)oNDTYbNQhZNX@gxco zco&QCkl-CA0ndgqVH!MAY#84DwK}|gZ`XD*LV_jXT;a^Ie2gtlLbLli;SYjM;}FJsqfER?VCJtR7fC0tfAaqpkSv+9gfPar@3kgNpAsi z2aYem=F3XE8Gd87ifUfHuD%j(+&^85wni$MliC)ghp69#EB6582JuD-J4dFU+zh^8YzMHs^K763y z&MS$h@E5HmSAcx79y69=-KXm<*mKeoJZJi>Yz-WiooVijjiY)`9K}SXSe??IL(9Nv zHU;36#&n@F;b1L4Na6`O^iTJttCH8EpK9gm23SZp7y*!lHYce8lc4G-#=%u0+%#?H z%N5)sss!N)B#%exh$uM<0ccT1+mrV z2um(ILQShPR-pF_(hGfSxlK>F3KNB*?30g~vDR`Ev}QI7&I`}>zF29o_rqkNC}V58 z&V&{BLdVhs#R<sv$h7>J{avrbsDG zDJPMSk!Lb$_q@(SZ?E}WLJzWKT;dilK!I2u%t zuE)=Rz;|pt4ihQAfB8{kTsQH6U>2T?zO!yH_NRQV>mVr(h?j3q&`sh&YVPbEA6a}; zr$^(u3GcrItQ64yGvkYf{MC^Tf=F=g^REHm34;*Z-8%`Oxw9XbFO13~eztQ*7@CcY z;4MgJFHmG4;ve(tN_<{LSgioa$Bm(&4QwNKUk(P6NY#N+&73{BG+E4nL>YK4m=pYARGhLPQjJ#CEAqa*N_caYfI3yN@q}1{MdhPG;ZyAC2JJ{{R30 delta 1767 zcmZ{kdu&rx9LLXXyLRWUk3D*~j@LGYgb_k+-yI4f;0BV&OiYj{xwq@uuCMjdcI!i< zTXGv?G_axBNd&VYIAkVdQ`jXe8i+&^3;`mEN;a(cm?)1Spc@MM>kAWu|D1lm_w)VT zdrtbz>B+cyGOoV)nk5KPI}t+r;FsxNYNwX;@@bw*^RhHAPxFd2Uy|mPXSQ1 z#0JnUAj=7>)mJ+}RTeT~M<~iQ#Viii%-YaRgy`8Kv23?+?pVO(bK6~L2FNAy3QPw< zoh)Y9xPvoCt%0Pc&4#W687Yv?RNTsST0Op~)1N}ufb zJtA;XYs%7*>~N!BfxI}N%WaolTa0)eM$W~$gN{Hlg04VhX@U4{ogG|fS9{bh1TE-i zAX@TFej48{WPH(7fHRs+QIpf(gnmK@Uo4Uc5Sud`YB$@%=tm&OiSe^)eLeaC^l%~N zaX2EJBbGFEr(!Jn9>|;I9DHLDs7N8>Hnl~##P(2vO~pd!J0Q;!=iAkKCCY$aO$16` zT@Gq-A@5B11Wvj-fDITru%4)fpaXkxEz#}8^#3kW&0c&^W)4ODtS#lTaN&gDvAdEn z8M=>L+Zp?iQT$obt>1_det}^{-YK(9!&k^97^ntyrnptVInmC|Q&=gA zj7eB8Z5zf1u-u^BMO35MNLoiRL%30_{CAPS_Q^@GnRz7pC)^;*T9{2)HAHqbGcFaV zCJL=1A8cS2l3N>?71;w#lVl6y%BmicX<@cyRULV91H*&D6J*IoW~01UVIb^L_~6Jm z-da03dx21cQ=YK_YA~-SXQ!;aike(TGD`SWN-;UR<-BzGC~j5B4Vr`5>j(CH9IDSB z#|EkV1YV$Ch>+|;u1!9NL+EsJf~_qPG#VpWFhOqqrPgm=0P?+DrlZ^Fuq3zy>kdTS zsjm3|UeANBZd)qBwF`;3;I($l10WPYByI_FMyE9%V&lGAgWO6Q-p7n|;tXC_NgK4& z3f*1pHSIJpWN?D;8B9xk8Qi2@^ek0I4Sq8>_fB1%t`4osxg%@EMPO`HnKXSJFQnuK zZJMZNaAT>iLi>eo3%J%9+)VfxIN!hw?pKo?lUl9P3i~-tk&17%Ym^qyVnLfhuP$g4 z-1xHvZ3O)hMT9A>iG=Rqr=-*O@v4RrJ>2t$By~OAqM!~+&n>1$Uw|U5M5^0pBc9F zMkX~@mVBj={@zUA)u~QVgJ0YHr^ZKVc{z1R($tsT(vg?m(BW}`p3|w$0e(EWdptuc v%9Ru~g{Y~I8`v)?Y3e-vs8%c!)uKk!iaN1etPm^3Dp4;oVzpSa-!StJcNH%l