From e683c2cc00a9a089a29a7e1e29e2faa2618f2461 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Wed, 5 Aug 2026 14:35:36 +0800 Subject: [PATCH] =?UTF-8?q?style(pagination):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=88=86=E9=A1=B5=E7=BB=84=E4=BB=B6=E4=B8=8A=E4=B8=80=E9=A1=B5?= =?UTF-8?q?/=E4=B8=8B=E4=B8=80=E9=A1=B5=E6=A0=B7=E5=BC=8F=E5=8F=8A?= =?UTF-8?q?=E7=8E=AF=E5=A2=83=E9=85=8D=E7=BD=AE=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 取消分页组件中上一页、下一页按钮的额外宽度设置,使其与页码按钮等宽 - 恢复上一页、下一页的原生箭头图标显示,取消自定义文字和隐藏图标的样式规则 - 更新分页相关的注释,明确首页/尾页按钮依旧由脚本控制不注入,上一页/下一页显示原生箭头 - 修改 .env.development 配置,增加 API 代理和跨域说明,避免直接使用绝对地址引发的 CORS 问题 - 优化 VITE_APP_API 配置为 /api,配合 Vite 代理减少跨域错误,保障开发环境稳定运行 --- AI辅助编程规范与实战示例.docx | Bin 0 -> 19376 bytes AI辅助编程规范与实战示例.md | 225 ++++++++++++++++++++++++++++++++++ 2 files changed, 225 insertions(+) create mode 100644 AI辅助编程规范与实战示例.docx create mode 100644 AI辅助编程规范与实战示例.md diff --git a/AI辅助编程规范与实战示例.docx b/AI辅助编程规范与实战示例.docx new file mode 100644 index 0000000000000000000000000000000000000000..f33638ec7069977ac8d7f70e0cf3fd82ba1578da GIT binary patch literal 19376 zcmb@tV~}Ufv+vusZQGi*ZQH-LJ#F`N_q1*Iv~AnAZQJfU&vWj+vHv^nd3DZ;sHhcH z8TsNHD{@tSDpOGg6buIFpC?p)Pw=1lzaHqnFDCZJicaceLrst7? z1Plb!{C6PzcQb&41B1J*O;)UseIFBC@O8oyVcEudLEa^nbdV-?u~fO}YBZI!-tQ#} zr3B)a=kXB#%eDy9Zc0B-_6)*Me(s)=#94A_)IgG%xd!QL=>|*nTQspL*v;@Q3#wUY zy!88b9`%@^z7zBoDxwD3*)1=g{*_TaxIXgUrQXvCPAI}5$56RtYG@f!0mvBw6=4`S z3BmO%<~l94_X~wz_44fb^x%3Tg{3fTJo<5)Ug0$A+l}gA zgL}oEO?>k$$)u(19nJJeB9b;e)|VXYY&GJZ!GEep2mk6M^;bE15FjAr|E`{~y_4xb z^4Z48$@eoM1wTt}5a01T#wROlh0y|^g-c7K1*~X2H8lRlA7}sMg60_@Z#!ZmiVjFf zo`Ff;e?Gd;NHc0sS8D(}H>s3KB&QA+yw{fGW1QV|!9!F!;GGXtYYaiL?a4#tj0LDjbu$Bsd^SXyc6e%?tFta5 z%NJ?19@nsl{Xz&SmYXk2Y8NJ}IEl2OH0GJ}J<<{PT(F8iE!m08kIAkD*mDR$ zEl_*=l-Zk$wcaf?nig*ZPC5Ql_aASVN3|)7iz|_8;X7 z1HVN^`6gp3FS*yE3pNFLsY=?VrRFPV$O@&3MLxDCQ&o7~XUBtv-|u$sx5m}0%McNq z8nR}&h=?Hq7W&w-whnhr9YHaPYO0pxHgV~l9TG7r!q3YueA$BV^eAn2kk^h3uQzH$ zN5VT*8{t1S-=(a@)p)j}c}&)tQ0rKXl$CiznWN)UD_CI=3^*N*=n=1~M}~eUWNq>j zKvwIRmpmrVcl`^{KjQxXM-K46;=0*8nf#Bakx8HI z^8pJ4wB`x~g!o@3&MqD{rq2Ipf2lX=w9bjrWxv=3DpR~EVl>_zMmwcSvYxTPNqxPt z$|XW(;wX%w`=xo?(MRyicLaZA>$+`>OC%{o0u3wIL>bCQo?mzkinB?GL*%>laYG;7 z0hxW6CpkqqpYo0xL)it@cktzXcX)L+SRR&wNe8V-hT_ZbaqxN&+U)l=pRuT=&nwRR z3`8_KZS?J3M;HEJW6$`U!fW;_6L$yp)q7h(D)EOzE2oZNM z&NOM=fE59urn^Lh*d)z6p!C_f$Y4Sn2X0B>oqaq*;i!tvZw8p_k&V$7jM~)?+v08 z;7s8xhc*tawVB(vl`!Nup`8iB{A)sEOM%49aAR@xPA}f=JGj2XJtb7}?ECAf`upR{ z{?%5%KIo#;r@r{*+%L+hK(4gR-WDAv6IJ)IDV$jl(^NTA0YRQfFfY*i_L&x4<2d21 zH^l@S;^UZHq3eLxUvtTz2zutL{z#Sc5F?L961ysHF=!)K0}%xS^vhi9%>qQN*hI^TB55LnA9J?X z85#fYH2ZfFz?>ar5M8&^^{~BEDDEfLhYxk%gl49q>nGdU_UtnS+qt^I0&d~K69>9- z{YLh0-}C|7v3n)}ZdpH-0J=g5M)rpWDL~>EbC=W%+=;CL%OeIrgNXE@{0ja>4g~`( zgM@;TOhiORC&a00nfZ*|7FBR^5#8h@{>PvaWxC8*4@!wFe@DN!`{zDfJZLgd3(h4n z^2mU{c@_kgs)Hpa%tl$x@~NzO?fd%V$evG82t*c8(3#!{a26%T7D)#qYpU}J4i%iy z&M0V%;mlbr5fF%UNF*jx>8w_;FRh!n#1JNL&@1*9H2VmF_-~{-Q9xg3LF6%-d{&(o z?Tg*ekyLKth#fcw9gdoH;IE`X<>(`kaKSL_iQcGd`(VRtIX?)l`=6<(43V6TOJ7qd z?=DXFh#>f)zEW~tKdSfFkNP)@t*`MX_Q+zG(YY7N%4pu{3QovqEs&8Ox?ylafB_&0 zPWfJEZn6DTfrPL7x=fl$Ki&>n0=omS6&r_2c2v=t>Ex+HBFjG9h`wl3(F;?p)WNeMu$yftqyJr`bz$)n=(u??0)FKO2-rEqzIOErVF2G% zLdB@8Xe9EvMqi05{vQ9m%^JQOm;|(GVnqBL8CGDPF$tv>TdgZ8;f~IqM%(Lxt2ad2 zD0u%&NXaqbc0fWO5Ed+o}#^Ee;2#%ey8 z@)lD+F&ePZZw{VfNrCb)1M(FH3BX=1>J^_KoxMUEN#*A9O&9*zGm>}%_Qdqe9?%ru zH=O+aVCnrMu_u|3-BUo#H#mmAd(CWZKYxuMhLGC2xM{Npv*voEKXkd2-ZcX{TjHJZ84T*o*WN1EY#Q!HNUVeOXbR?U%u7!U^yV24Dw8*H6}#dBHF4^|rws z{0qt8ck=Xh*!1ahT-bDpyS~7)AR3D=>q*z#ZTN%ksRMB6GS5ZUeHKvDaLUN#)N{d2 z3d3|6!cUEA5a}JXKk3qphR)1J*(?Ux_ubqX<9y>Yzags^bj+IkFS}>lA=ggw=?;(+ zmk~3XiW<&!wcPl}7rVPQDwY=>&Ti1@d^T9V0imzu=9>3}Pw56KQFdRaA+NhZWyb4o zWtHDV=Y+c11l`MP#+-il0}fx>oT>{#j#-)AZ3zYAua9gDOK<$wCFomQ-dzuC<8D3ZK5<<( z#voi=FYwQoPg&sZ2z;TSU>gwl0e{LF5X@ht*%o6~VQQ2KuH;2rVU7!D*#oH88W!W< zQt=vNM4!_qFNNDNpz1n2RLK=?asnP9^E8oc1X&Ydy5-d8cRx9|Y);I%kruqZp%Np#o z&)eOi)wG;U3jXWVrf+0z4)I9y7POK~XCzcL4CkK{^dlw@JrXBCDb zKW%p3qRwaEN@njvTbqO(q>bQcFKoB)nWzI!hZ#}zI-BaF<1eCr` zor-#CSI85)-0WGw0xHm0{oV!sGg0GQBT_&E0|Kh~iy;0@NBl#$(ef18u!@q=tYELIKTbL)LO)j`ozS9NSs6vEE_C+3_&x4F|*1FZBcWa)_ z`z%y;{YE6*9y4+v6IPx|juyDf1O`w~Q>`;*EmvE#I6x=^l6M1H>s;hTxe2fRJ`Y7u zrSs8BMu8QXu#->cMw7~fmy;~zrRgL(NZ@+#G0D|y(7l=m_7pYx6I0ODU1VU(0cCu%=mkK8oC#c&1*Wv$ zjJUs2b>jD90y&d|7p=XoCDJK2LLx3~ZdtD^gQRZ~C842dA{aJMR9uU0i#0@#%L#hb z+Ba9Lia?yVtu;E2>sso%<1QH@Vq9ozPUhgi9d^aYmm5_(B5V81yNWEu<;W$dS><(2 zCUaVV9>u3}W&5YShQPNl6tklQeqQCVZ*wt1%4s6U3Ag3dU>XlE3W}Sm?Wp{k@7KRc zH_gD)08@>@BDv!!qz8kiN4{s&wY8c(<3oaDDL?TsKz6LELSt2Np9bks#l&YqhRBLT z(TkNCX2SU3wq>40~$MWay4eA-mf`Y#_7 zrc0Jmk%b7%k(9;9iR$qxar!+-s#N*?!cp z#wuGg$2x6=;uD-S31n^hc--TO1g#nZuU>duG|^k$bOTZ$q{<=K?+`hEr1W=RC);{q zU~O3vmC}@3QK-IK3XYCwCAJvzdfew^L0(pS+q0K=`YUbn$5T+XFIv|}AY%yZ&k4u650LT#(OmGy=MnPQ9RfM?I z3+??q=m?)_YqkM7OL5oktkwrZl08(olro;m0N=L>7Nqt4kJE)4r6K}L%fq@Yy9)H6 zQBUAr(f55Sw!C%7?O!kiCV_^zyn9{y(70W8E;&f^7gjL-Z))pzkHV-`V*$!$y zosHU`Q{;u7Tkjgv0`(xSJ=#~Vh9Pj9u`bw_>>SF1z-{YiU^Y=2Ch}9{Ds1M)cN)(g ziaKq~OzZX8n^|76E&4vd5Cw%+frmo$tX`ur!R;lV41;Bkr5BFK;5ER>!T@4R4jxEg z3oIsC5>;$mTHYx+N+#2TAXcMJp&Pzdf{F!Y~>|C%%Zizc+>>~Y1gx=3#c z#l7r}DP3_SewMA&>R8N)*Xk_nyYp>jnYo((V3j|^wTh9H{2j=t7={Z;Rw7F7xw{M& zp8El{mA0xkJzyO_1BJ8@I>7Tj@&3twzkAL>Kn{nGOiZn?F7#Wmy`{=51r_*Ox-oD`q)xN0s})BKXY7$=P8RHj%79X_ zqa;de91tU9*Qc&--T0UUHqRzVEiZVnIr=MvY=vgv32Q_?X#tcN6_h@a&S*IFXH+cf zswoIQUER=&N!k%FVH|x^QZL=RYcCeap=Y3iG9G=i#konK) zE{HZ|!}fGxN-VT_GtDk8(00k;4HryVUIjy?QJ+d<#S+R#Yy>|LTP#3KrN9h3Z3pSB zIU*r0SCh6U1B}Q1LXiqHq=A7-p_m!PoDJ`0et&T3_I^0*6uWV|v^7VLm2D9W*ZhFNojoYdqq(y6fd- z**;snrx~1}^@dpPx2W3)GxrX3i`m|uj=cDu5o-u@(N*LnTRi8WwoLFxb~xWd7Pgs( zFE0=GK+KL0FqkrU2ba$YHt+92)mfOy=KTTCE5|8rT~+bjrlrGQ9-MN2tPYLN_7Ir( z%jPx*OH;PD*g%iyVCJ1Wa8aixd_q)$N#jw1A9#EvC4=1%sUG**Bt&}2bEqEt^AU=Y zh_UD5H0183nk_&)($rqzUZ0HW-3Whjmfv}X;=M|qz)a9Y5~3Uh-%@1LWU7YY?fq&6 z-X5f>VsT0`6|5n1mJWP74p$ z-6Gp4-|mf+V`5eXZMdraDLgOm$4)$;y)tAx&n|aV!+^iM=563b4*Gnm1u@7oo69o(4la4{M$L_d>c%0i#|!~Q*GEu|_qQX2&XZ?uuqX>A zzEq+kw1gO|F15}+V7>Z6sJ=9YD4B~)-OJl1bos%-agJ&btDM9+lOC+We6IdZQ(fgz>y>ZF{55kFH3q&o=^>ZAXRn0mO**Q9|SX#ihVn0 z)q+8jT^1EGV_pi6=!WeGuCfd=^v1fK-%tG*LHz95$Uh`>WFmY(ZI7km%d2Wd_2N1? zMwOL%@96>><}XK-o4K^Yqt}JXTi4(ef7iP*1*oui%dw2KEqF;zkhGYQR5 zMtR(Ey7A5wRKK5U$~<+d-fS^DieU#;+R)3(brfKq)P#G?a20O(D&sUrzyF;^>&X|8 z5!zTgB?zU_2SU0@ed!O2?rfMxR|GKV8R~U_RE6ER>a(VzX-Q@O2Irdlww>0(E~ zYG02dra`9yu|I_}>vWQfqz~u=PthLNge9nEhutTNh#=@UY$YDs`GPtXsQFStW_i~M z)mIGt0BS++RlwB7N`zN^L~p+pOeebBfnt|;oxw=JF#Q~Bmglw_H1Zkc*;KwRMY9;6 zO1OrFXy3?uJ?qf#m@qs>eloHhP7c9g@oEzTSSaI}$Qn&d8(&>(dOskcbb@wc$)?4t zHv!vz0{`b}IZh>Rv6%=6Na+5*otFPz-2JpQwR8DjVBJ;&RjcXCce(95Pu;BY-87l3 zbgbOXL0#V~^T+&rbJo@C3T+5g8p5v(u-Pv(#REMDQ88d}@Ij85WOYfwFB!M8c<-}r zha6{DwRjR}G$k*n<{5CQ!n1<2%+BZ4>glh3LdIvZUoy3-+}RhG4J$l07{p7sa;}43 zjIP>UuU;>S!z2Z)aa&cAB&)dR4Z2~4^nSeeIp4RT0rPsJ7Jdp99HfT7w;oOdx-5zd zc@j=}Y#WRIY}RH=w*8?bkRzWTg-wgLs2fi2a3Cg#(t?aHWhl3(UwgypyE8ytr2%W1l;17b}|) z7EHwK{!@^&xmr3n8*CC3x1Gk~DaOJ?@DpmSg)h$C{%}a!YbL$4ZXF?AHHl>dDstJHnP-qJ=f1{AzYi0w>pwhkF_S zG(yd;m=XU(!91R?SCT>*+s)80*EpAP6Zul@xe4d0UPj$pwR42zK~y29b0tGoY>M*6 z2Gli_$U0iKdh7 zZ*3IIiv_ng7}y*Kn}%f)JZx55cmIVwSSu4JT1*~p%bjc_QTYOb6O5RoY!I5znZ|}o zj2~r;>{IFvM#t;Ww!WNE*g)L38sKLYGj!?VdEHaGYQu61}iRNYGXJ*#m zx3KSH%7uyLy`|%Y)~%erFH>Fx{dk0%->5u#6P$edBt8^RpiwS!X=wt*myS98R2WSa zN{Sr<--kp7v#r@6gsQ}_)v+S>Gz~27-GU3iEw7=rbYfHSDw1kE23|3p)FQ!~zx%jH zs(zo=Q6h{J)hZv7=11piTaHwqq#uRUvtHqV>W7hA2)@a~r^l;W2F=f+DUC2WK9p@Y zh$6r3IGl9!M)ZlQS6_^CzQ;)}SB^!VkGyx)9hsy!+V;#3 zU-XQOxKMiqm{_;EyN5{wH;ThifX5MdWy{?>5y4x^1rZ;g?WKD}rA#&fqm3!7&h+7F z)ZRytld;;?3Il=w{Q)6n3Is7(I4oisL{BrDG6<9VZofXUTTn}BY`ebao8~TC=>07^ z(&1Q^t%o^|fzp~TZHz4D6UO*6W@0V0=_h58vaJ0GtqPGeyRUEChxc8|MXa4%>P6); zJz2~=p$m6VBTDzR?vXS}(QGCK==ma>g&C*Rru1snO@^dHY5lFHQ4(OH3$ zJ*aXjMT{lvs|~U z<$UU-b>vl38U={VDwU;KXhP_Kv3kS2ys3jiVY6s?Y>wqO<_B5K z*8JbQ%w6lTdn-$$?Aw7cm6G7T=1*oJl;4m-H^EtjMqdEplzwC*o!7<8jvDn9ZD0Y6 z>nY68rf2)vsMo%uWU?HcxFU8jxu9I3+hF5d9f)6PzGZa)3(WDNs?#z9nlZA9fdHRXEy zy15s@Gq&e+yNCs)l1-pS07v88EFGgivV5InevOTqE8l&9W-C-JMKzIJ%^Z4;ZfXRO zt*v8K^-eec<@Daj3yyrNTNuB}5nM^_VHWRL({!Fpp`JvTk`&CGwPHpPa_~ICEfugl1^>umSHSwpA8%EV<=2t!q>5oAY)z{(!KZ{l z$bxd5F8q26AN%8Xl4w5fr{iC)!u+$^~U7)cul?Wzz`)u@Agyg_+@Ym1`Wuzv1yL3 z0Z^{|QNj38?$E`_{5F{O3S-NmNwu~m!MQPeYdRjET^%=V{yuJCFi0vqjDu+wNYPg26?Mp@hcaZC$9gw=sQ)i$OzuFoZ}@{C$^4K zN|k$P^J((0PVReHw`ea(;i6gyLQm?jdW$3W*OMGQl2KsR^W<98Yy;ip^Lgt`2o7#D_A^88+Vq} zIu}~`=iKR66TGf_@--G`us!`_&O36CU`Lvt0m_t}6L>w41IU%D=G_EqndjgQ`=?0p zU~hE&;*dtECrLtTrM?$`S^#DDVtK1|)ndfHL$TZ7*Mnn<-}>62AswB<NG|CQdlbq<3MZgpaQ}GN?5n}OLESx^`eQ^;$lznlX$s)+6_gDwaVIyXWR8y<;*%v zmTz3R8?$!X@9qFHR>~DB1~Ac*p~HhcqA1@shx%RBCR#29Ew3O`MfkC20D@;_2v zva2Qgdi-ubjCOt{bd!bm`j^v>5+331ZPUjJECb2jag27)@45a0B}hqknAe}{Zg{O} zc*VL3$Kdp*ZKr@t#hbBo3=sj&Sr@NLX5RB*@T zp6f2EpMOpdTOx>@kN2fa!$=~c2MA!<5v7I>&C7a*CPoh3z@~vnUoPl~Ou0-%xXWim zCj5;Vxq2k=gPf;JVFbgRkfb}!3Bh+%Ua<`(UL`g-_yfpvkDDL83*i%SJS4Vwn-so= zD~h$ZFXv~@B8jJ{Y;X!nsa2A(PvUeWUs`Q3Xy9RJi4mRcMUTU4-m*1Bk3FszOmLs_ ziinxbdn&hU45dZTFCKZG+7;rGRu$g$s@6;vIs5@$fh9T)JUuHF5X6;Bq2h1N)w?c6 zVS}$vJezzB$#u5hk>zQWnGI>HjA8m?8@v>4rFT2{XTY+wWdL1BwW5j%b(sz(a*pwb zef>yrOXe!YkwZs_n4|-70?tJ{TA4qR>{X-R=7$V)pQ+2@yWmMcxenk-G)$dTIe2Oz zyu|p0>^xi^5BSnLi7A99^+#Sptj-ezP^}<<=8>Nq^LXV2XX!!(e-0Q3t>p1(ohy9k zXsHiwJp1%%6nH7x>lcVi$fq`R7IY6%lNTv#D%L{PHwl{Qu^{B3A_nkKwL8&b;Gxus zSBGx~Zb;@Zhp)e6dE@K??Bwc4TUHnNUC!ZJWBD<^D$+zG;1~YH-aH3li&-VEe1u)* zJmsl`9yD-~qo1Coj%du3vT#wTdMkm5#cDEBBL=X1B(z_Lw~~7}w6*rwnq>f04;;aR z@J+}%%qJnIH;s-q%E`C1&tkxE>sHOw!UXehgO!Ct5=F7R|D!v6x`N?MrVGe(n=nEs z43&$ltEGQP(vz8gqR1%$JyMJ1D^|0&JZC`rr+&_#ONF zmF%5*Ub(HjfGomrt+FB&fv6zAq!q9cfsqK<@t?yp__7y49+A5xb!P-cditl(9+d~N z1No5seN060T>dFRr8bbqX&~T<+MEMi#9A=H!cwy0@$dAC+5q6k0T35|T_Yk{-1Wmv zY#`3k-uBXUI80`aUb_83HS%JJM?+>%*|Lt7ft_x3cGy<*mz5|0BbTtR!N@r`@QRF% zG2PK9z$~mv4N5<|cQCG2ygVBMJv0JRAOKNwip8ZHA`y`c82>4Zic1&BeI_99G_Q;d zeJB?JdeOHcRu z4=f+u4+<)Skn1xZn97RWx&aD2{iyC6BJyA8$>gJn=iK$x#lF48vb*lzmy@wQ=xg* zew`nungZmn_Bt7hB$Jun%yC!3M;{$ElHgV|`yke)8Phu-2)`c2%`ibhiiUkJx)4N*ZN!MUJ%3ynM$i*a&%;gnW33GllF+pd*yS z0?f3r;|F7va(p*N3y}dwtGDGFirI6-&VW=cw5-1IH`{ zH%OAU!f~p3CbRQytZK~TzkcZ$4(L=6=}xw-2jv6{bf?Tu(b!64*O=XiYV6&K0%w*A zUkU{0<7yG@KO;* z2eoi>^YhoFhCGyB^bpDrSUml~PtQz1*&vf`QIHLV5p23{6Bj5&S4U=o^ZbFLe*{7F z4^u}4XDV45Sgi^LOM49h17*G24rqAz0o}LzwOb{dM{zu)saVhwE@B!l_LTFU!#%qG zJ#v}#9qNEIy^|}?@Lej{JF>CVs`>nn*NyEiG{rNr7=c84xzScFZa6~Z&Yg{dw$9o3 z00bNzh8|;X(D-HDs($q9H8}}*=8a$OBIDVZXu$*4MdZs4NSBJ7P~RvY7-J_o#<Ve%;zy_S$FPj)kI@l9_NwGU%^Z_3RJ<_Rsz z#8n~NG4QP3K0wbv8VJqkV)@6hn$t;i?*QYI9uXai>WNpjtD2!&^;*f5zX zNe2K;g0o6>GsCoPOtl?rM=D*67K!SqI;(^AwnN0JKj|YVI^foH>h%;R%iu_us52xP z7#Lz#6&OjJ+p^Y1p>Z-FO6gi=jHhm}5>`NmNG^Hu zT})RiNr!Gm^qU{Tk^h?4Hjc`%XCQ{Pgp1cae3?BTq&yksl)k4W3L3yF=IQ8)o!p&& zT`p%eZyL2lGtB>h^LT58aOhSZ`HXn&bzg#l!&zeTd}A(*F_d5xMh@{@R~t3=bm zLQ%)7Z2ei(%`Z@tP1|L+Y~EeoTgj52!}X^}3@!zhJ3ri-ntQMbBvw!tf)UH>Eu6$f zrgoyLs5gY--~oO&!sPCn*n_y$y~x3pgh}l(V~wYMPgo1%((VJPUwa4;AjBDK`;uys zWf3kUgWtw^Tf?I2x|JCF{uZUbL{ljk73BUPbF#WSpNH&|+A$-c@X;(uZ$6~+&cs5x z)5TD8@n#NhoG4IQ>76O^*0N|4R={vqkp^IFLQ*v+-S;~eP2a<5(`*66m(MLdOfY?6 z@@O&SifU@XNJ=9{yZhDfq6biWu~1x*6w^ed=~^#6z&%43w*l}jB_jhXiX)2(xQbzJ zn!UZkzNzdf+I4Hk9~#Nx;ao=%xhn{y90k3#x&CpVl5o-p-Tis6*BWUH1^MEts%x5s z=#1vqBDg*FO{HWRb;jJXf3Fm17s! z?)k0y=_2`xUo;2 zt;o8)LqA5Q4nJ0ElYNTVo!gnqlvtu&8gPyt#(JVNR=Im;+aO6OY66=dmGsW!sb^R@ ze{CQFLAj?5alxH28P?LV)>#RF8;G26o|ZY1wMEAJQ436JOc@ZswNY#79ncTZLriCz z41Il(K|FoZfS6hmg>;B_;yr_j{>sijyi-Q2FoYN~0-H)&E&#b#OPpG&*DV|xiyGg; zM|5N9mVS)Hz8$DG$+ zjbw7llXpGwbIPn)P9BN2*H&ZO@Q>E+rG;a8O!Zq^>POEo?J^Qt`m+E;o(&qjI_hx5 zu~RAr+p&mw>8H}Zav6){+77hT`X%wx8W*Igv2j!GFbpIDGQsWSYrg()bo1?!%vRs- zmJs~KSUfSosVk_njXY0vn}me`VY}o@)mKXh!TZ0|fZ)ywEd<%JES0yHnh3~9@m83m zW3%#k@!Wh6O|i^B5L{}OJW!)5*&&D|DQb01*`@*_ydIo~rMF(v2Y{Xqr5TWqTq*2f zW(f*NlER6EVULrC2p4ZDWaHEt>%)J8>YKpQYwttISU+CG#y^5#pOC3i-QlQeO*t>S ztOa5EdWeb=FUOD4>;qCz^f3alkQJRP?*iCG93(kVI-5x&B)Gx}yM5Vk+`9C4jq;D* z$d7%OupvQ`gRHH0idA%#0>*Z3cjqWUJrNPM)v4>b&5>a(Dk+xi3L$6pbqxwi>Z4Ek zkyOr1gy8%Hu#-Q_YE!{T9d)p5Ek&4fpUx(;rmM%{u~B9Tc1b#(m59$-Mg2 zGMI03*G;zhVq^W)Ou&O5d|9yh&}eRM9USwPVPbRG2HXSyXvVd3`G^jFrIpUXXtDV$ z3b77Q!aqTCSfJ+XH_h=R9N^ClF0vGAE$>C{+>|!^U`2joW zsReJstG zGdc1+!G>LNX)pA5Pi=sF1m+K58wyP;uj0aUrvj(G)h!0@!qMX|6PU(r%da11@BMxT z?;>4ieqp*&PxTBu4bgF5vUkF~Dq7=$ba5}V=e$9vFWP`ZTzYFc(mQcNjWr{-R$c4I zpqR_YWzt8t%{A1^#`_QhjXk#4Y0t!{VEM!`ErFdc zXyhS<_ulmFMX!YWGwZp3%+&xHIR;CwuLnrNs9x4AEgWA3Tbc?2L@F?YRWPT}u;;&% zL+plKX58S!5wmN@j)@9VvEd1NDO0fFME2waZ$tYnmRKjR@49&E*-0nv3tw?edcfZk zrZ@a?m8Ux5K!&uaNx2U_bShnZkygTvgEwh(8*O(vE>bGpaK81i;;M%z}ZnMw7w-C z?^>*557BZtIb`XN@L-zFw9BA&%b&)*;~}r_-sp0*x?D1tQoV|dAneZ`SEQl~=9}bA zxf0JF{o~Gni*R$BE#t*`aR=TxTn1g+;grKBJZ3F8Wa6we_%U%%pt{eg^rOO}EQlhi zoIadPV&wd(joNrO^(2-K*x0<}g>4(eGGpzJ)SC7)y?xKVOPQW@G_<9L4#H?h0u*@+ zd-1*58b!}*zr51rZ^JeeISrDS4`;scq(l-eNx5E5A;-HX$BA44WzL<)@MPlyY1MOR z*W|?7&ZD~_Rcs}kSaF?b(a6GT(S$IQvUw*-_OY+uuJ1@?^Ow#cB6GDQs)<91v8GWC zQu6$2o9`a*Kg0tRoh{d8 z+nq!DfvF1u0qJXcVrk4iVegscl#=Z{yIrCg{fD=n7sF#InrmQ&y=;qe9GJ>Q(l5}e zeW>!A^4;`1=%6`2hM!Aj`QXLCncl_=A5HtBcB;f!(~ygzw&ZfbWqj9vJw3s}wu(%Y zp9rWkIM-c4ue4=mQ8U`3@+&#lR-I*EOuvHNtDNv;@bm$?ISvYJN?gI17LqWBgl;k$ z)T%W*!o~6lO5+%`!;TOa6V7yemD323q+M7y$Q&|@&+PmFE|DdmsO~?YDD(~_EAfM--_zUSz&IMD7wCFc z5o~3i=?Ys|@C%*DP3D}7$eBtd28#l=J85nUkB8+6ZnB0J2zi2#iMv172hJri0)5aT;znJn&h1zM z-T7G>_vB^Sb2su?Y6zb^qE}iu(aIq95*He)e;8FkrG-3xeLm>pAenvKQUJs*MA6!j zGgu%XG)!*Tm-$+cD$mE4VhnJwf+$CP3xy9c?q`bpG(E zI6Z+INygkh(`j$B;5mPT3FyJa9XF_}eGl4Ps7!SDUT>_;RyD>lg{lZc2IG-0TgWV> zN1z=gP`q3jzp7#ahUV-Cl+kaqjz7h)){3u^T5CeHv_1ttIRozM3qfBlHImzj@8LK2Ci9k1B_Rvos{Nzm1#0e{1zn{;N*U z?x(Ghsng%8;D38Jlk}qJnUIFJ<61-xp4p+>X^?E&Q0ODVk%*KKcDU_~E4xj2MxUbU z9oXdiR>J08+qEx;Wj5W-eD8A{hg#dZPRZ-NKTWM#nA14n$r7QaD z`gEnV^Z6Q2JineM)ig%LZAyTL!La5qvM9*QvgXCowUt!@E>)R~64i7#$fXOc+D(5I zWwEHeF^t#WDBy~fH1=p2t{O!^WO5c$%aI?f(U8{EtC+f$_8c|MqUKs(tb{loJ@rhP zA^(wHz|w*Xr1(QbsQeHZLN1O-|($VOEg9ltgl zZUG+Sn>EEaeHTS8a0r(S;pTt_xr2QbV5aI5yW>On@k${7$j>}YKx@W{9E0_PSFF!+ zszlU~LSkZE+j&D5D{Q%A+aS{Ffl8u&c~5JEYDAgW|e{?VYY?_2jFpw&)L@ zEoRhDX}a2e(&qCv%i_z#kzE2#oa_%0@Ofe=@<6omEL8}5&V{AJlrX>MS-dO!j@l{1 zy)F(CE)Q)r^0B~(h6)g!2#+v+`fbMh!QpAD$KL$iXrDjyhv%I|v%}l`nIV^3lhBiY zZqa&l>)8X(q;EwP`T2cCzZ*yu zIJDt!JSyyu8_q2sH_Nb%2S($J<0mTR!@7rP&sRZB)d)x5crS1v0xJOp7;LwE_}Xjm zi<}ttfR7=*C}XL=b`2u9E0(;BVB`xQ`rKK-kPsQ@zE2N-{Ex!)OX^637tp_b?|-Y( z|G$sW%-+sL6<}oZZ|nAS{6X4Pc7+b@Otp;qw~6x*W;~Fw$r*Q zN^y0hxOm{%J-H-p1cUVZUgK8kz>C6sHL{RqpY%Hf_xtp9n2>K3?wDpg3i2xrd(7m3 z@!tE#g^O(6L42A@;~w@#CM~@dg5P64Y1)@jC%06hZmq7Y7|mUVyrASXW8aBLe#xsY znRkACqIKpJ}q(UZT5ZCv#?b1Dl}~} zbwBk)tJ&!YC9t>WL8OZm)HaZBurDMjxl9rKbTeug>vS60shs5^dsS99iboyY<+3cS zZt6X=5irM+nY1`R9`tFuwlO$w$+`Qur2#sa#Gx za#S8BaM^J^iRF%9*#9!+ts)i66TMi(1{=@!-~=!%YQt73dFfcpH*4m;xdJELP_0S+ z*yr}bvUgA+4Ci39KTvJ`C@sBWO~j=7xg}Fe#i2^8s0Z{LL^hGg1WKbjj(w7QUOiWv z70ww*qBqP+&yjA`RFkWixqnN+fNSh74M8Vy2(m9TaXt9l|;_(bEb_K(+Kn<#} zLoEs?;&s;QAeI~I|JmxjSt*Y%IJ)+3n+R-w9CrO#IOW;>t0~tn&iV86+iJ0e3t3i5 zOq;~*b?wSMTRxGa8>hDSo)l(OO}ye-o}K9{kN@vq#AqdY$1$0SU4Z|QmQ;m`%8lQPdWzg%ED4HvT=B?cXH-o0 zy!&(Ttv(0VR}Aq*sX6FpXfP@%$^Qk)Jp@*2pcU#6HF_YGYbV|HVm1_Leb0Jd@l37x zZ7rosIr%Ox=6cjND9*ggd-u--pRKjk&GkDrtlRsc$SD0>P4S7U;*#cyg;R1ra7_#4 zZQ8?k?3drc&+ifoxs{Bonw>u^dEg>xcJ}GfU!81EjHXmeZ`RPW(|$4Y@!Tnq-=7$S zD^Aj%Yo^j3bLz^;j;emylcBNqPkgz|JZs|e8&a&9+3OtN_-)MjciVc)+N&k!w;rFc}C1Ser&<%t@Fd{ z8!#AkfyJ{7kOuD=f+$2@3keP1vsu9NHCo=c?rXkLt!w>v;gl0Qr#P)UTFY=W?teg} z(JkMV_xE)x`Y|2c`$Or5;H;k#Z_B>lw*J~Yan}Rh6i+U$TFF)C%-QyJ^|yxy9Jv;L zjkTZ6P36YZ@8!4sOQt;)+dL`0*0+CvE?&>v@jUe&tyu!S4C*zV(&T@JH1e{kB#61Q))3uyX@@ds0?%b56oE zAw||&=|`Eq9QAMbC6+!gKBA-RXtR#<;3sEsU7yAC&gFC_ZdPMf+ zsJ2eoop;DUr0u&`ZTpGrsS;Kpp{@xpQgb9)V3|?ND(>*%h z{{Q{w_@|6bW~rN+8gAX3!@HT$`+(Q-EwNAD)P9?EZ!^o{4PH~uIh`|W$T8ZtPwK3h zoWa7YV#V8fF4`CL6>+*HJhO?A(u^@sx|AJJp#P*jf?>Zb&$}HZW=*}BYm9GHd|_!_ zacYLm`j?-tsW^1%RNnDh6KN@YZ+cXh$FiE#t8%J$1&yL^o;kSmTZOY!kG$#?<@?NK zukWpxwLnxQSn$zmgCz&2PQLuWrby_N-*TCYC9Vrq1Kd(qH1WLB)ecy>+=C;~`FYJG z-PnfD4|CnWzS`U=>Xv>k{atQ^nW244{jLSC_HB=iy;VBb&D7gr$>ZEpYrM^zZhu=L zvwH7GjTZ*zj_mp4`o3CLrlaKIUZHJ9#T-lOKlWQpc(JHjRUk=)^-p!X+0J;yJg*=8 zjcVJ)sbKFdHS2SEVHG7vyIM+nuE=qCw*6hrJ& zN7e>CR|ws;=qKqQbf*H7Hr!I!xjN|D(GP?{Xuk_Alo8tD$HUT(t{=T8htNOE2C5&WUx%(AeRn8Ae;Y6uG4_h0YezqY2BAF`7H5bv yX&{=3iM^A+j0?6Kw#f`Nouh9vL)iKWRU=~4S%5byIM)gS_rMAOoz~?J(gXlmX3kpx literal 0 HcmV?d00001 diff --git a/AI辅助编程规范与实战示例.md b/AI辅助编程规范与实战示例.md new file mode 100644 index 0000000..11a1a1e --- /dev/null +++ b/AI辅助编程规范与实战示例.md @@ -0,0 +1,225 @@ +# AI 辅助编程规范与实战示例——以「货物类型模块」为例 + +> 文档目的:向业主说明我们团队如何用 AI 协作完成前端开发,包含协作流程、工程规范、以及一个可直接对照代码的真实模块示例,便于业主了解我们的工作方式、质量保障手段与可复用的经验。 + + + +--- + +## 一、背景:我们为什么用 AI 编程 + +本项目(Saber3 企业级后台)是一个模块多、表单多、校验规则多、样式规范严苛的大型 Vue 3 工程。传统人工开发存在两个痛点: + +1. **重复劳动多**:每个 CRUD 模块的列表、搜索、新增、编辑、导入、导出结构高度相似,但样式细节(表格线色、偶数行底色、操作列宽度、弹窗竖条等)又极易被写错。 +2. **规范易漂移**:数十个模块由不同人开发,若没有统一约束,代码风格、校验口径、审计字段展示会逐渐不一致。 + +我们引入 AI 编程的核心思路不是"让 AI 自由发挥",而是**把人类沉淀的工程规范喂给 AI,让 AI 在规范的边界内批量、稳定地产出代码,再由人工做业务与视觉复核**。这样既提效,又保住质量底线。 + +--- + +## 二、我们的 AI 协作流程(总览) + +``` +需求澄清 ──> 需求卡(单一事实来源)──> AGENTS.md(工程规范)──> AI 生成代码 + │ │ + └──────────────── 人工复核 / 验收 ──────────────────────────┘ +``` + +四个关键阶段: + +| 阶段 | 产物 | 负责人 | 说明 | +| ------- | --------------------------- | ------- | -------------------------------- | +| 1. 需求澄清 | 模块需求卡(.md) | 产品/前端 | 用 `模块需求卡生成规范.md` 统一格式,拆成 REQ 编号项 | +| 2. 规范约束 | AGENTS.md | 架构/前端 | 把技术栈、风格、样式、校验、审计等写成"对 AI 的强制条款" | +| 3. 代码生成 | view / option / api / utils | AI + 前端 | AI 按 AGENTS.md 生成,前端实时纠偏 | +| 4. 复核验收 | 可运行模块 | 前端/测试 | 校验业务规则、视觉规范、边界异常 | + +**核心原则:需求卡和 AGENTS.md 是 AI 与人对齐的"单一事实来源",不靠口头交代。** + +--- + +## 三、工程规范如何约束 AI(AGENTS.md 核心条款节选) + +我们维护了一份 `AGENTS.md`,作为 AI 每次动手前的"必读规范"。与本示例强相关的条款有: + +### 3.1 文件同构结构 + +``` +src/ +├── views/base/cargo-type.vue # 页面(模板 + 交互逻辑) +├── option/base/cargo-type.js # Avue 表格/表单配置(与 views 同构路径) +└── api/base/cargo-type.js # 接口层(按业务模块组织) +``` + +> 规范要点:Avue 配置独立存放于 `src/option/`,与 `views` 和 `api` 保持同构的模块路径映射。AI 生成时不会把配置写死在页面里。 + +### 3.2 样式规范(极易被写错,故用规范强制) + +- 表格线条颜色统一 `#EFF1F7`;偶数行背景 `#FAFAFA`,固定列须与行背景一致; +- 操作列同时展示"查看/编辑/删除"时宽度不小于 `220px`; +- `.avue-crud__header` 顶部间距 `12px`; +- `.basic-container__card` 内层 `el-card` 去卡片化(`padding: 0`); +- 主色统一 `#409eff`。 + +### 3.3 表单校验规范 + +- 金额类非负、经纬度范围、备注类 ≤200 字(前端阻止提交并提示); +- 新增、导入、编辑三处的校验口径必须一致; +- 审计字段(创建人/更新人)**禁止直接展示用户 ID**,须绑定后端返回的姓名字段(`createUserName`)。 + +### 3.4 批量导入失败明细规范(本项目重点) + +- 部分数据导入失败时,前端必须自动下载后端返回的失败 Excel; +- 失败 Excel 字段顺序须与原模板一致,最后追加"导入失败原因"列; +- 前端需根据 `content-type` 区分"JSON 成功响应"与"Excel 文件流"; +- 失败明细文件命名含业务名、导入失败明细、时间戳。 + +--- + +## 四、实例拆解:货物类型模块 + +### 4.1 模块能力一览 + +货物类型是一个**两级层级**的主数据模块:一级货物类型(2 位编码)+ 二级货物类型(4 位编码,前 2 位须与上级一致)。功能包括:列表、条件查询、新增、编辑、查看、删除、批量删除、**批量导入 + 模板下载 + 失败明细加工**、批量导出。 + +### 4.2 文件同构结构(真实存在) + +``` +src/views/base/cargo-type.vue # 589 行,页面 + 交互 +src/option/base/cargo-type.js # 189 行,Avue 列配置 + 校验器 +src/api/base/cargo-type.js # 74 行,7 个接口方法 +src/utils/import-excel.js # 109 行,通用导入弹窗(被本模块复用) +``` + +### 4.3 AI 按规范落地的关键代码点 + +下面每一条都对应前述规范条款,可直接对照源码。 + +**① 三级文件分离(对应 3.1)** + +页面只负责交互,配置与接口独立: + +```js +// src/views/base/cargo-type.vue +import { getList, getNextCode, getParentOptions, remove, submit } from '@/api/base/cargo-type'; +import { getCargoTypeOption } from '@/option/base/cargo-type'; +``` + +**② 表单校验三处一致(对应 3.3)** + +前端表单(option)与 JS 内 `validateRow` 共用同一套规则口径,避免"表单能过、导入却崩": + +```js +// src/views/base/cargo-type.vue —— 提交前的统一校验 +validateRow(row) { + const pattern = row.typeLevel === 1 ? /^\d{2}$/ : /^\d{4}$/; + if (!pattern.test(row.cargoCode)) { this.$message.warning('货物类型编码格式不正确'); return false; } + if (row.typeLevel === 2 && !row.cargoCode.startsWith(row.parentCargoCode)) { + this.$message.warning('二级编码前2位必须与上级货物类型编码一致'); return false; + } + if (row.remark.length > 200) { this.$message.warning('备注不能超过200字'); return false; } + return true; +} +``` + +```js +// src/option/base/cargo-type.js —— 弹窗表单的同源校验器 +{ validator: (rule, value, callback) => { + const form = ctx.form || {}; + const pattern = form.typeLevel === 1 ? /^\d{2}$/ : /^\d{4}$/; + // 同样的规则:格式 + 二级前缀一致性 +}, trigger: 'blur' } +``` + +**③ 审计字段用姓名不用 ID(对应 3.3)** + +```vue + + +``` + +列表直接绑定 `createUserName`,避免出现一串无意义的用户 ID。 + +**④ 导入失败明细加工(对应 3.4,本项目 AI 协作的亮点)** + +后端只返回原始失败原因文本,AI 被要求生成一个**可独立测试的小函数** `decorateCargoTypeFailDetail`,把原因按 A./B./C. 编号、追加规则说明、仅"导入失败原因"列标红、自动加宽列: + +```js +// src/views/base/cargo-type.vue +export const decorateCargoTypeFailDetail = async workbook => { + // 1. 映射表头列号 + // 2. 清理非原因列的多余红色字体 + // 3. 把每行原因拆条、编号、拼接规则说明 + // 4. 仅操作"导入失败原因"列样式(黑字、无填充、自动换行) + // 5. 按 CARGO_TYPE_FAIL_COL_WIDTH 加宽各列 +}; +``` + +该函数通过通用导入工具 `import-excel.js` 的 `failDetailDecorator` 钩子注入,做到**模块零耦合复用**: + +```js +// 复用通用导入弹窗,仅传入本模块的加工函数 +handleImport() { + openImportDialog(this, '货物类型', undefined, { + failDetailDecorator: decorateCargoTypeFailDetail, + }); +} +``` + +**⑤ 样式规范落地(对应 3.2)** + +```scss +/* src/views/base/cargo-type.vue