From 81c055655912ce91a3a5f3b49e23154bea776235 Mon Sep 17 00:00:00 2001
From: yuk255 <yuk255@qq.com>
Date: Thu, 4 Sep 2025 20:38:53 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=B7=BB=E5=8A=A0=E5=AD=A6?=
 =?UTF-8?q?=E9=99=A2=E4=B8=AD=E5=BF=83=E4=B8=8B=E7=8F=AD=E7=BA=A7=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=E5=92=8C=E7=8F=AD=E7=BA=A7=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E4=B8=8B=E7=9A=84=E7=BB=9F=E8=AE=A1=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E3=80=81=E5=AD=A6=E4=B9=A0=E8=BF=9B=E5=BA=A6=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/analysis/icon/分组 106.png             |  Bin 0 -> 625 bytes
 public/analysis/icon/分组 86.png              |  Bin 0 -> 806 bytes
 public/analysis/icon/分组 93.png              |  Bin 0 -> 821 bytes
 public/analysis/icon/切片 21.png              |  Bin 0 -> 562 bytes
 public/analysis/icon/路径 10.png              |  Bin 0 -> 775 bytes
 public/analysis/icon/路径 11.png              |  Bin 0 -> 585 bytes
 public/analysis/icon/路径 18.png              |  Bin 0 -> 917 bytes
 public/analysis/icon/路径 19.png              |  Bin 0 -> 834 bytes
 public/analysis/切片 28.png                   |  Bin 0 -> 1831 bytes
 public/analysis/切片 29.png                   |  Bin 0 -> 1849 bytes
 public/analysis/切片 30.png                   |  Bin 0 -> 1731 bytes
 public/analysis/切片 31.png                   |  Bin 0 -> 1648 bytes
 public/analysis/切片 32.png                   |  Bin 0 -> 1712 bytes
 public/analysis/切片 33.png                   |  Bin 0 -> 1771 bytes
 public/analysis/切片 34.png                   |  Bin 0 -> 1860 bytes
 public/analysis/切片 35.png                   |  Bin 0 -> 1617 bytes
 src/components/teacher/ClassManagement.vue    |  427 ++--
 src/router/index.ts                           |   14 +
 src/views/teacher/student/ClassManagement.vue |  178 +-
 .../teacher/student/StatisticsAnalysis.vue    | 1751 +++++++++++++++++
 src/views/teacher/student/StudentLibrary.vue  |    3 +-
 src/views/teacher/student/StudentProgress.vue |  645 ++++++
 22 files changed, 2874 insertions(+), 144 deletions(-)
 create mode 100644 public/analysis/icon/分组 106.png
 create mode 100644 public/analysis/icon/分组 86.png
 create mode 100644 public/analysis/icon/分组 93.png
 create mode 100644 public/analysis/icon/切片 21.png
 create mode 100644 public/analysis/icon/路径 10.png
 create mode 100644 public/analysis/icon/路径 11.png
 create mode 100644 public/analysis/icon/路径 18.png
 create mode 100644 public/analysis/icon/路径 19.png
 create mode 100644 public/analysis/切片 28.png
 create mode 100644 public/analysis/切片 29.png
 create mode 100644 public/analysis/切片 30.png
 create mode 100644 public/analysis/切片 31.png
 create mode 100644 public/analysis/切片 32.png
 create mode 100644 public/analysis/切片 33.png
 create mode 100644 public/analysis/切片 34.png
 create mode 100644 public/analysis/切片 35.png
 create mode 100644 src/views/teacher/student/StatisticsAnalysis.vue
 create mode 100644 src/views/teacher/student/StudentProgress.vue

diff --git a/public/analysis/icon/分组 106.png b/public/analysis/icon/分组 106.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a4c4703a804ba7b0491427d75d4ca9eef9ff5fb
GIT binary patch
literal 625
zcmV-%0*?KOP)<h;3K|Lk000e1NJLTq000mG000sQ1^@s6QafI10006eNkl<ZcmbqS
zJ&O}j6us|dXR_N!zzC~_SozV}*$5(wxGLI-SSS{fQVWYU(ISP7g0+7@MbK3{?JPtE
z308}RY`L>o$ugN_?tQcKuJ_L5Eg>lQ@yOx4+<VS>A9=ALqca#p{k65Y-)Gxrws$v&
zN4guS?`@>4=qBl#4s#?@=nS~licY`VUXs3UFCKKRwV&wv@QO=@kG$uv20%Vg4a2b9
zPKK_#nI7J~n69hVCD~{tNzYsF;Q}*&Le=cyF*D!f8HnIU8BwCT8a!{jS+YdNAQ=z_
zM7TI6dv=VCy|Wl$V;^lT^hDPZK<xoz5e+EvitRZ^a66!wnui*q-BoLiEDEp_pdp&7
zT&*C1L8!F~vQy=qer_Z{iveQNkjfZp(~O3v`$Sd()bvMy&s5AElhwcLE);n_dxYNw
zIr|A|;Z!#E?L4<FH7oL8>|k9QtAgrcD<=CPb@A!ZxIA8<d4&k`I9Z4&>_E>c#T@Ok
zcV&Eu$UH%<k$KPC(Q>gxCkn?e#n_zGL0NVqcOb%WX=1!{H1oGUev7V>Ypjg6qccC!
z@}w*0ULZmfWsv~&<l?nDk>3_-mPdtr|Ii-a{c^4GfHGKe1&G-+>%OgY^<3V8ULr{<
z$yt<9SuRE%&AkH;%cl<cIprpv?W<OSqP3n4crOU-0kp<oE_;U9hkD>izp67p^>>E<
z7#bis|CqqQ78q8={?{R5$h@_0e*ypi|NnF-w)6l100v1!K~w_(@4E)LVwJba00000
LNkvXXu0mjfPv0X2

literal 0
HcmV?d00001

diff --git a/public/analysis/icon/分组 86.png b/public/analysis/icon/分组 86.png
new file mode 100644
index 0000000000000000000000000000000000000000..99735826a8124b081155b714b76f48799966e578
GIT binary patch
literal 806
zcmV+>1KIqEP)<h;3K|Lk000e1NJLTq000yK000sQ1^@s6ThRUx0008pNkl<Zcma%5
zPe@cj82`R;^I|F*{gI_8l<FoClz0%cNF?l3Aaw80Nm0pNI|N;|qDvWd2|5Y=5u&0X
zD6oVMl6C2z<nET4gs!?X-|TyD`exqlYuzwh<~Q&AzTa<tGw;pJ3Ml*%KUQ}p)2rjj
zbapwB&Q1@dmpcm7hR5Yhwl$Gj`IyXPS6DkSoLY*P3L-=FgZlvH9Fw&O&@4baN&Z@I
z;5=$W-<Int3``*6Q7}-$M7P1phy0A1GrVeyFa|q~Vava$4rI_4DLF6#TUfJ$0YwA`
z+6ER(71OSThKPY8_)dgSgyL9hlX9v;r*%cTlrO};M|MN5AOUA+6HU-736)d`7NqgP
z^`@Fh%N22>ar=xUxNUjGI)=v+_W~lnSEz~%vtIS<oHQd!i3JutU(3R1DB0MrN^y-8
zK4W-N!Od7@)p)5w*reyJJn5~;SxpsJ6u};zxhwCB>7I9Tto@CNS&c={q(0&kevyP{
z7%@d+U};fKUHD+^23ZM+?w52}=kY0<>|#I(kThJZ^<}hDlKvg$>lmfF=Jhoic5d8>
zya&U)^r|vZG(c-{sq=+tI5m;m$C_h|h>K#v^X%oC;BV1YLi{V17~_>4_wun0#XBEq
z!%cB|QgERCvD|MR1&it#j&Nc-sEFbq8PpO%`=&hWwcK_hG*p1n4&<U6U}Hv9b9KQJ
zijK{AtIa8JS5??VDdEmu@fp^TO$ujHVUtv_cQfABm4a}E{3`E>aE5qQiU5cN*w{jn
z;M*gnlos_iSLHm9v30U_h4J{PIVk4(Vy#Bu*}xzKfdznz!~E`CpJ?%Y_~dG3ys;V!
zuKNLcB7jPFu<ghEALjdU%xG+6gVW_YzH=E5@DLe{rv~x!mJF@Qd;(|Z2k;de%-FmL
zH0DvJAHV(_#6??khIs)VCjo=?{7(lV_{!(GwxOX3ZgD{~tZKzK;+~5O-5&q|0RR6W
kVuBa|000I_L_t&o03FLCF=m|V)&Kwi07*qoM6N<$g6`aUCIA2c

literal 0
HcmV?d00001

diff --git a/public/analysis/icon/分组 93.png b/public/analysis/icon/分组 93.png
new file mode 100644
index 0000000000000000000000000000000000000000..eeda095d2c822512391b7ae602ce72b8ba5dabeb
GIT binary patch
literal 821
zcmV-51Iqk~P)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B0008&Nkl<ZcmaG;
zO-NNi7(Fxh`OIrpRECn#k0p^oi+&)9S_BoiDG+o~g0(Bk7C~<MS(GjMS+=sGHX1~=
z2;&uKnHAz9jI>2QG&9YfKP5ij&%Jl1IajYe3zRv`=Q-aw-^`sS@&BKwejGV|rt@>8
z_CqvY*FUZZ)~5|e%~*uNyfrWAXyene+OFuAqFuZ1EG}GqAU8kXmZ6X!Smzmz8hhBA
znKTzv)7(~3u%oQaUY=j9HLwuaQ?O%q8$CgoA5?MoSy|rN%}q+=SgDi%k<8eGntT9H
z*cLtXGK@iD@y5~zj<&5tQXoLm)R_qQY)`^+1gN>jL$3)Evb-TuBkWbh6gZhXr*fy6
zdw^|r2v;`QxLRUkZI<N^rMJA{WsMB4+)(KUn5z_867{8vP`@Py*GgxwZ+RA|FM&kg
zZ;kh(9<roBX>Q2psfAartCVRkyeF90_X}u@dIm0<qBH3Dp^!F1PHqh2!q#kb#uRRS
za`1XcA@HT$@E+-fSL6hQlNQL*1`wD`0g<l?{S(09q7X`!O5}zF&TcU$Oat99Js0F<
zugH<fq?{v`nX4TtvOw%Fw0wTOZK0|-WWMLj>KRvP9rzm(974v&#uL0JiS7}g`nii^
z%`VQp@&H$$Zo7pL-`3<LT#d_b72*l=YUaB15b?2zgiKC5?f&az2o%Yk+Gb%*o-h$J
z>qdu0?<o9}Quhx)pUIGk;em&|o-dedawk0Vy^fU39>wIe^lLPJg#YB!IgDV<4B2~q
z-@U|mESlmE(0t%jN`m#&w7}q`NiZuG2hK;#NiuZy_#tDXQD$(Yc80pDy>!x3N<b+<
znU^CjwP@5l(Kv8lgJJ3)T^Wxv+*NI6X$E2F_Q7{vtfxvl3G;;wJ-b@_0AeCJOJr>9
zrH5Y9eh`cAH+MdA2io_l_|GW+UkL1BFFiruTo4JSf4f+)$?1P{LQM|7P*Wq*TDh8F
zO^zCS*h^1<KL7v#|Nlj!q}Tue00v1!K~w_(EkyJ#Kd%ty00000NkvXXu0mjfF`<AY

literal 0
HcmV?d00001

diff --git a/public/analysis/icon/切片 21.png b/public/analysis/icon/切片 21.png
new file mode 100644
index 0000000000000000000000000000000000000000..9227ed2c435165e1aef15cf75a52b1f28e592f51
GIT binary patch
literal 562
zcmV-20?qx2P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%0005!Nkl<Zcmb@G
zO)q;v6vm&qP5u8ZN+KE|x?*7~v9OW&48DR$?39St#0QXA+uGYmB;8<Thlq^`A*7T>
zDwMh})jQ6N+jFmIr8jYNpE=K*ne&^O+er=i$BzN;IV(J4;rIfJ*%vI`y@t~A!Kp_9
z7`TyrgpurmFgV4N!Wh50BMB*?RW6m_<Zc^Q)GYCu478mHEL))T{En&47*>Y{8rI6l
z&`+Rc3241b#G9f#A*|sYY8XMwkpyNApOD@;M|zhOjO2IEvftL2&m1GYeZ)B*NXJ!2
zRx+a<$j5t;kCB3re8Hj*&E>$GXhsn&obiFQyXr1~i>}MH+BlAYlI~Cw8d#|axO5#Z
z?+a88IAsOYRyVbQ>iBhbe3gI2#8wXD`~R`Fca5S+K!R!-HQ#|jkn&Yk;ndF*`*CU}
zVShAXGv9-UND2<+iKSm3NJ&!_QVf1W&QYGdn&(O7)Uh><8V0HX%Q6s*UtZ|@`Q>Ym
z*ZfgzTG6%v6)hEQLwnU%Fcs^K*95v!z;#L0NY_K>s4q#{*Bz&`dM_VYN+Nj4ut5mF
zf`RQH4}LbJ8%)Kyf`RK}t!OLf=<loXoyv-Xf!ICfMq@vL!+i;y%=O@ACW7l}(U5Lt
z{~<HkjZ`whz)t`G0RR8`!}5p#000I_L_t&o0CC^>=!l!{Bme*a07*qoM6N<$g1<)v
ARsaA1

literal 0
HcmV?d00001

diff --git a/public/analysis/icon/路径 10.png b/public/analysis/icon/路径 10.png
new file mode 100644
index 0000000000000000000000000000000000000000..040c25f1353587d8432e50fdbd4f568cc0615357
GIT binary patch
literal 775
zcmV+i1Ni)jP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%0008KNkl<ZcmbSL
zJxml~5S{rh{KSOB!a^*iAe1H)lwyb$79KI$&_h9|U<lWcXkk2KZD%7U8VT6gL1L*v
zD}zuF6F8x;A$M^1&FmhZZ<gIV7BA7T*_WAlGw<!(m%Vk=;hGGgYp!x|uk@?-dcIQK
z1ga@EjkBK3bdb_thNa!=_@zqiha>kcgfIcoAkdd$&^YVajLm}2-7Uj~5ZwH3^;uwA
zBBp`dRHp(nHftKwW+N@b+RxfkjcHaRVu0FUQYC8FxtulTS<~hWr#GtO8o3z}N8*`8
zQY1N%DENd!Ot^es)y+(ARmaWLO|FNoC@Pf26N{KQ9Zn3g9DGtEYQ{17gkvl~9Qi`o
zyj-K%D0-m*Nt^yu^blKZ=+u{7p9aj!Mao6N&oGg}gjuva!I{3O+mwikD!hNXkNS>-
zc-WqlG}7%_x$+kkdI$r_IE7g=>K(1=h0hIP923qJn_Ay14?86NFeQ&Ikdx&WMcuc9
zs=u{7cHxBzPvBQH!Ee>0=8fO=BMNn01Ap1$+`TZF9`zM$h=T@UTUrAmLj112`zBHE
z#p~~-^znAj5?+sqL*Fwh)euO!*1XV=H(ds7X|;pVo|&}a_UpcTtR7RZ`ogM4{AA>f
zlvay9Z&m16n%%b9P<x)Kl`HKzY0%defv4G1#5YIuC|(7B6`)89kFULoU&a!DLfzR6
zTJdh(HPo$`Nd^(>k0M&}%7Y%~dcqT{(v)!m;R(mo?jr}^5c=RYsIY>eZJ@n6nn{gw
zNn%!?jrsnzc{!Tm$j5FriZ}ptP6YEXujJ!UdBDr~EIqgX;(1_N^Du2<Xvxl@n?s|F
zJOKZDLlVlS%>*q&THxcInZlzc^Ig1Y+w_miW^C3p1TCdk+b|_;^_@N*3Uqv*h!-i)
z77^7FBsniy&t_~EeD3}O00960EDC_100006Nkl<Z0|4=XmQhnUC*=SD002ovPDHLk
FV1k_iaFqZ6

literal 0
HcmV?d00001

diff --git a/public/analysis/icon/路径 11.png b/public/analysis/icon/路径 11.png
new file mode 100644
index 0000000000000000000000000000000000000000..967d7d1113c4d4ca79d9b2ea29e7155596c9b5d0
GIT binary patch
literal 585
zcmV-P0=E5$P)<h;3K|Lk000e1NJLTq000mG000sQ1^@s6QafI100060Nkl<ZcmbSJ
zO=}cE5UuJpkZe{34?$7!=EZ{xBJPS11^+@kil`v&NdiI?ufdOlpdxq^f+L9DyoY!Y
zk`TzjfIq;+sOV)0J5@cq)4uMV8Jz60NQQn>Rj*&YnW-K_W3GGc&iws$Ck0%Ng>Rjk
z|F(=ZAm>g%%s{c&(4nG0GS<LB;E3Cf=yeWC-6zn+8f#$198uw)e}3%0_3+q%>jB3P
zt`*%#MjFg*{i?OT?7S1@xmf5-WwN{6+S)k`{m>dRxVqLkS(EA2SoumUOcFpBP;XpY
z?KXBh3>hT7iH~^lDOK*;#5_oPd<Xe&7#-C<Et7Mlo>Jl6RcIPw|Kz7pb87KTqx!5H
z^Fqc=U0k73PpR+*`D@29rM~vCN@-@`%MykRa-rDD{Okw0JNw?YVyQd|yq126U}Tz+
zz0rv5dNWEkn~~kb8_Zw^_ynq1HBYRim!dQi4E#X1dmCQYc$<7~M9F1?jpw3#R+Q?Z
zT*tsBz!8iHbwH8B05dubzAi%NfklJksfw6ELl#2=#1O6nE272?xPfkvGpU-YQ3zFu
zd=wwmgxm^0{(5`gIpC7DrnP&2P&1j-F{LSxN6g-Hz0@pGcF80yc`oR(eP8$cR6f&8
z9|AjyLxS7)Z4!i$%O7Jha_2utW=dedFQDCvN!K}k^%npD|NpTTPR{@U00v1!K~w_(
XG<H8x-Q`;(00000NkvXXu0mjfkK+yn

literal 0
HcmV?d00001

diff --git a/public/analysis/icon/路径 18.png b/public/analysis/icon/路径 18.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b750263995e0b38f05113e50d2e97c73442ad9f
GIT binary patch
literal 917
zcmV;G18V$<P)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B0009@Nkl<Zcma%4
zTSyd97(P4APD}3QW@=h#7s6<ZAhNBj(2VH8NW0=oJyu3ZWD$iGJwy>i_>dVyc6&)8
zsK^H;BEwcgvyvq3B6+tOU7gvPbLQIlPtG!e4-I_t|L6a{|2yaW!*Iy;oQSknp6UK$
zme#%5=_*f3kJm?bfre@;+ypb)fB$~MsSjW4d>IQ$Y{QTZUF~*@+_^`?J+^6Lsx3X$
z*7f{YZS8d6xuZ4D7NuuzY366o*=ox2*RhVaF!~i8I??jwbXnVvS0_JwA2|8(#~_W3
zW$(YAmtvBrer{iH#N<9cIc>Wyb4BBknwm6@Uz**d3p1B1Lt?{lq&dt5<`oFx{2n_v
z?}{Br$us?_>1IMon&nT;v1g`U46NMn&6+*;u-FpWsEXt74d1NQeAb304oBrCwWs%H
z#fy8Jh0IX3mAd#Ev3*{QJ;)7}t^wGX&KbeX5`Iy*X1KXwo6<k{M3dA(t|~XHuqr=v
z<iP4Zm-OKLB4{S$p9wS)G1^5&V|`G^6LsJ<At@{@Tw8rBH*0s*rX}myu#0ckuhN5=
zryVgEuqN6lb-c}2x;~b&H9ZwXhu0F)wiiE$>|n!&7fA_~V9o1cMj&><8`TwEHOW*Q
zCLAJxj8gDmC(<;uYf2$C97BnSnA0ZB%dI6SAvbQMpu{9b(yOpY4V-8Y#bX)zH*Gv7
z!nK^b6IF8tUvT;HVs;{eJ+?zIF&F~Ca8~GeZCOE=+1aqf`aSp%V`RrQz*FcZuQMZE
zj>Q;Bi+BRgK*s}1&t=~jYP6>L(_bH2xL=p#yP#1)M>iviX4RD!^)e$u&<jRj4nYKf
z7y!BKNy!m|IiEt;qqkJeyBBJ}0Zd71iO)zF`+0|8gfKyfz?Y!A5ejI4NH;=??&DPy
zIH;I@KcO4|cw329#*JDotf?22p<2uGAj?9?vT3BSDOe75$RWCTFA-Zml`p#&H-aR2
zytUY?kA8;yf501ZU$Wd@=xEuDV9|KBP!f7xuJft=PmxWxh2oU3k&g_&P9Aub9l5ln
z-;u<PpwLmdPwp(wC`uCF<q7&|wLpI~&cqgHX_lakNM3F9QQ}DJj?S~`dCe7t!_ed4
rF8}}l|Nnv}w2uG)00v1!K~w_(fI}*H7*gBn00000NkvXXu0mjfQa!N@

literal 0
HcmV?d00001

diff --git a/public/analysis/icon/路径 19.png b/public/analysis/icon/路径 19.png
new file mode 100644
index 0000000000000000000000000000000000000000..4884b44394eb3dd5bee5d76e684e93259abcb2a1
GIT binary patch
literal 834
zcmV-I1HJr-P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%0008_Nkl<ZcmbS~
zO-L0{6vxlGlV)wAMM2Q2MOg&VrYMS{AcBGxk=DjOrG;gti62S!u!NEnEL%ksLK+dZ
zh@uaoG$aEJL3pV|sOh2>Y3iGM&V9byxs!>G`idU&pL6DX{O-AP-zfNpUvcly;*zh!
z6{Y<@2TKP=UL<SzEAaflNT%{s7Xp?6!ZNUS#eV}!`iCRd+6DnE5e1jE_$+YdxXn3X
z!RO&KCXN@_ATk56`K@u2sGoxsgl7ew>>OFc#;YQYKm<Un#3C@O=+zaAJ_Ma}+-3#Z
zI35#F3XuakK>+kM)Su|^w`RAGT|fSDwDLsT$m%e6R-jBWPYX;lLSV%wQlv?-A^V2o
zaLO1gG2>oGR%`6^RH({q@}Flm#kw-y#%>&FifwSon1%-e7^eV);I__;SC}wc6DU0q
z*90lVP@B>0m%BbEMU1OOE7@R<VQk&^(vSKYx3R`T0Y-^cmrRu3uw_9xIlu(WEkc2>
zKo%<B_bQed05#!V5$NCmWE#fwxWUUlW2GNcjgNPxr9axSu*MZjW1XuFK=L}A)pBSe
zBvQ3oo(wHkqc*jgG<=sSK?f`1goQMjEVBKf&T}xQr+d<>W$O`5O1oMon&=U`G{r19
ztKRL!A7n6Bwq_*=VKJ*52itUSJa2OYM`b7bHAAssRVG7pO{@3eNN~z62j@4+loc)+
zT2&T+`1(60!knm)e7fY<%KN=GHU_U-4yLAS4V#G7P096${S*M*1Z_uB%E_oR@}7(|
z1>4pd6FzyjBv$k%CXFuVaa?7%zV@T3@7oT~%aQ(-qFs|fm+Z{;YANomGmJHcu+Ffz
zoeAa(#0kVsiW%arC#-2em+Z;GX!mI^zdP4E)t!sY0?(2^F@$6|rf$3Xux0?K7A&u_
z8v$X})R^;a0?+jpVbu9yB?Wqz$O<)B3pUbMh_#{k<YQ7GAnu;51o)N!Jk(d<U7Qk|
z;U)(He36d9gteEfd_nyMcwe5AUcUeU0RR6o^TxaY000I_L_t&o08$9q3m#osApigX
M07*qoM6N<$g5-;RL;wH)

literal 0
HcmV?d00001

diff --git a/public/analysis/切片 28.png b/public/analysis/切片 28.png
new file mode 100644
index 0000000000000000000000000000000000000000..2bb64e358630f3de05b0facc4c47f815d50c4cfd
GIT binary patch
literal 1831
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
VjfWbg?wJ4p002ovPDHLkV1h%UY8n6l

literal 0
HcmV?d00001

diff --git a/public/analysis/切片 29.png b/public/analysis/切片 29.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f13004fdd718d7631fbe9716f10993691e42378
GIT binary patch
literal 1849
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

literal 0
HcmV?d00001

diff --git a/public/analysis/切片 30.png b/public/analysis/切片 30.png
new file mode 100644
index 0000000000000000000000000000000000000000..e39887b1948961f05b30d2351827d79b33171e4a
GIT binary patch
literal 1731
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
Z0{~gqhKH7<A-w<q002ovPDHLkV1h;cJ(U0e

literal 0
HcmV?d00001

diff --git a/public/analysis/切片 31.png b/public/analysis/切片 31.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae6efcee450381397b1b368c0e742982d90cec85
GIT binary patch
literal 1648
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

literal 0
HcmV?d00001

diff --git a/public/analysis/切片 32.png b/public/analysis/切片 32.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d538235d18faf3f0eaf8a46d8a78e16ed5a28ba
GIT binary patch
literal 1712
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
GLSTYr+%wex

literal 0
HcmV?d00001

diff --git a/public/analysis/切片 33.png b/public/analysis/切片 33.png
new file mode 100644
index 0000000000000000000000000000000000000000..95eb38b3359b6915ed8ccc713faa496d5cc1b217
GIT binary patch
literal 1771
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
N002ovPDHLkV1m2GP%!`i

literal 0
HcmV?d00001

diff --git a/public/analysis/切片 34.png b/public/analysis/切片 34.png
new file mode 100644
index 0000000000000000000000000000000000000000..78dd406255147c072047473c6e9faa7421fad9f0
GIT binary patch
literal 1860
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

literal 0
HcmV?d00001

diff --git a/public/analysis/切片 35.png b/public/analysis/切片 35.png
new file mode 100644
index 0000000000000000000000000000000000000000..eac686433bd3dc5eb8b15638db1dbe07c292ffbe
GIT binary patch
literal 1617
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
P00000NkvXXu0mjfI426V

literal 0
HcmV?d00001

diff --git a/src/components/teacher/ClassManagement.vue b/src/components/teacher/ClassManagement.vue
index 06e14fd..36e723d 100644
--- a/src/components/teacher/ClassManagement.vue
+++ b/src/components/teacher/ClassManagement.vue
@@ -38,7 +38,7 @@
                     </template>
                     管理班级
                 </n-button>
-                <n-button type="primary" ghost @click="showInviteModal = true">
+                <n-button type="primary" ghost @click="openInviteModal(selectedDepartment || props.classId?.toString() || '1')">
                     <template #icon>
                         <NIcon>
                             <QrCode />
@@ -65,7 +65,7 @@
                 <n-button type="primary" @click="openAddModal" v-else-if="props.type === 'student'">
                     添加学员
                 </n-button>
-                <n-button type="primary" ghost v-if="props.type === 'student'">
+                <n-button type="primary" ghost v-if="props.type === 'student'" @click="handleStatisticsAnalysis">
                     统计分析
                 </n-button>
                 <n-button type="primary" ghost @click="showImportModal = true">
@@ -145,50 +145,6 @@
             </n-card>
         </n-modal>
 
-        <!-- 删除确认弹窗 -->
-        <n-modal v-model:show="showDeleteConfirmModal" title="确认删除">
-            <n-card style="width: 400px" title="确认删除" :bordered="false" size="huge" role="dialog" aria-modal="true">
-                <div class="delete-confirm-content">
-                    <p>确定要删除班级“{{ currentDeleteClass?.className }}”吗？</p>
-                    <p class="delete-warning">删除后将无法恢复！</p>
-                </div>
-                <template #footer>
-                    <div class="modal-footer">
-                        <n-button @click="showDeleteConfirmModal = false">取消</n-button>
-                        <n-button type="error" @click="confirmDeleteClass">确认删除</n-button>
-                    </div>
-                </template>
-            </n-card>
-        </n-modal>
-
-        <!-- 批量删除确认弹窗 -->
-        <n-modal v-model:show="showBatchDeleteModal" title="批量移除确认">
-            <n-card style="width: 450px" title="批量移除确认" :bordered="false" size="huge" role="dialog" aria-modal="true">
-                <div class="batch-delete-content">
-                    <p>确定要移除选中的 <strong>{{ selectedRowKeys.length }}</strong> 名学员吗？</p>
-                    <div class="selected-students">
-                        <div class="student-list">
-                            <div 
-                                v-for="student in selectedStudents" 
-                                :key="student.id" 
-                                class="student-item"
-                            >
-                                <span class="student-name">{{ student.studentName }}</span>
-                                <span class="student-account">({{ student.accountNumber }})</span>
-                            </div>
-                        </div>
-                    </div>
-                    <p class="batch-warning">移除后这些学员将无法访问班级资源！</p>
-                </div>
-                <template #footer>
-                    <div class="modal-footer">
-                        <n-button @click="showBatchDeleteModal = false">取消</n-button>
-                        <n-button type="error" @click="confirmBatchDelete">确认移除</n-button>
-                    </div>
-                </template>
-            </n-card>
-        </n-modal>
-
         <!-- 批量调班确认弹窗 -->
         <n-modal v-model:show="showBatchTransferModal" title="批量调班">
             <n-card style="width: 550px" title="批量调班" :bordered="false" size="huge" role="dialog" aria-modal="true">
@@ -329,7 +285,10 @@
             <n-card style="width: 400px" title="邀请码" :bordered="false" size="huge" role="dialog" aria-modal="true">
                 <div class="invite-content">
                     <div class="invite-code-display">
-                        <div class="invite-title">邀请码</div>
+                        <div class="invite-title">班级邀请码</div>
+                        <div class="invite-note" v-if="currentInviteClassId">
+                            班级：{{ masterClassList.find(item => item.id === currentInviteClassId)?.className || '未知班级' }}
+                        </div>
                         <div class="invite-code">{{ inviteCode }}</div>
                         <n-button ghost type="primary" @click="copyInviteCode">复制</n-button>
                     </div>
@@ -354,7 +313,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, h, computed } from 'vue'
+import { ref, onMounted, h, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { AddCircleOutline, SettingsOutline, QrCode } from '@vicons/ionicons5'
 import {
     NDataTable,
@@ -371,6 +331,7 @@ import {
     NCheckbox,
     NDropdown,
     useMessage,
+    useDialog,
     type FormInst,
     type FormRules
 } from 'naive-ui'
@@ -380,11 +341,13 @@ import ImportModal from '@/components/common/ImportModal.vue'
 // 定义 props 类型
 interface Props {
     type: 'course' | 'student'
+    classId?: number | null // 新增班级ID参数
 }
 
 // 接收 props
 const props = withDefaults(defineProps<Props>(), {
-    type: 'student'
+    type: 'student',
+    classId: null
 })
 
 // 定义数据类型
@@ -418,8 +381,11 @@ interface FormData {
 
 const totalStudents = ref(1333)
 const inviteCode = ref('56685222')
+const currentInviteClassId = ref<string | null>(null) // 当前邀请码对应的班级ID
 
 const message = useMessage()
+const dialog = useDialog()
+const router = useRouter()
 
 // 响应式数据
 const selectedDepartment = ref('')
@@ -429,7 +395,6 @@ const showInviteModal = ref(false)
 const showTransferModal = ref(false)
 const showAddClassModal = ref(false)
 const showManageClassModal = ref(false)
-const showDeleteConfirmModal = ref(false)
 const showImportModal = ref(false)
 const selectedTargetClass = ref('')
 const currentTransferStudent = ref<StudentItem | null>(null)
@@ -438,8 +403,6 @@ const classFormRef = ref<FormInst | null>(null)
 const isEditMode = ref(false)
 const currentEditId = ref('')
 const isRenameMode = ref(false)
-const currentDeleteClass = ref<any>(null)
-const showBatchDeleteModal = ref(false)
 const showBatchTransferModal = ref(false)
 const selectedRowKeys = ref<string[]>([]) // 多选行的keys
 
@@ -466,7 +429,7 @@ const rules: FormRules = {
         { required: true, message: '请输入学员学号', trigger: 'blur' }
     ],
     loginPassword: [
-        { required: true, message: '请输入登录密码', trigger: 'blur' },
+        // { required: true, message: '请输入登录密码', trigger: 'blur' },
         { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
     ],
     college: [
@@ -728,12 +691,12 @@ const pagination = ref({
     pageSizes: [10, 20, 50],
     onChange: (page: number) => {
         pagination.value.page = page
-        loadData()
+        loadData(props.classId)
     },
     onUpdatePageSize: (pageSize: number) => {
         pagination.value.pageSize = pageSize
         pagination.value.page = 1
-        loadData()
+        loadData(props.classId)
     }
 })
 
@@ -742,6 +705,11 @@ const handleTransfer = (row: StudentItem) => {
     currentTransferStudent.value = row
     selectedTargetClass.value = ''
     showTransferModal.value = true
+    
+    console.log('打开调班弹窗:', {
+        学员信息: row,
+        可选班级: classOptions.value
+    })
 }
 
 const handleEdit = (row: StudentItem) => {
@@ -764,7 +732,37 @@ const handleBatchDelete = () => {
         message.warning('请先选择要移除的学员')
         return
     }
-    showBatchDeleteModal.value = true
+    
+    const selectedStudentsList = selectedStudents.value
+    const studentNames = selectedStudentsList.map(s => s.studentName).join('、')
+    
+    dialog.info({
+        title: '批量移除确认',
+        content: `确定要移除选中的 ${selectedRowKeys.value.length} 名学员吗？\n\n学员名单：${studentNames}\n\n移除后这些学员将无法访问班级资源！`,
+        positiveText: '确认移除',
+        negativeText: '取消',
+        onPositiveClick: async () => {
+            try {
+                // 这里模拟 API 调用
+                await new Promise(resolve => setTimeout(resolve, 1000))
+                
+                const removedCount = selectedRowKeys.value.length
+                
+                // 从数据中移除选中的学员
+                data.value = data.value.filter(student => !selectedRowKeys.value.includes(student.id))
+                
+                // 清空选中状态
+                selectedRowKeys.value = []
+                
+                message.success(`成功移除 ${removedCount} 名学员`)
+                
+                // 重新加载数据
+                loadData(props.classId)
+            } catch (error) {
+                message.error('批量移除失败，请重试')
+            }
+        }
+    })
 }
 
 // 批量调班处理
@@ -777,32 +775,6 @@ const handleBatchTransfer = () => {
     showBatchTransferModal.value = true
 }
 
-// 确认批量删除
-const confirmBatchDelete = async () => {
-    try {
-        // 这里模拟 API 调用
-        await new Promise(resolve => setTimeout(resolve, 1000))
-        
-        const removedCount = selectedRowKeys.value.length
-        
-        // 从数据中移除选中的学员
-        data.value = data.value.filter(student => !selectedRowKeys.value.includes(student.id))
-        
-        // 清空选中状态
-        selectedRowKeys.value = []
-        
-        // 关闭弹窗
-        showBatchDeleteModal.value = false
-        
-        message.success(`成功移除 ${removedCount} 名学员`)
-        
-        // 重新加载数据
-        loadData()
-    } catch (error) {
-        message.error('批量移除失败，请重试')
-    }
-}
-
 // 确认批量调班
 const confirmBatchTransfer = async () => {
     if (!selectedTargetClass.value) {
@@ -830,7 +802,7 @@ const confirmBatchTransfer = async () => {
         selectedRowKeys.value = []
         
         // 重新加载数据
-        loadData()
+        loadData(props.classId)
     } catch (error) {
         message.error('批量调班失败，请重试')
     }
@@ -842,16 +814,56 @@ const handleDelete = (row: StudentItem) => {
 
 // 查看学习进度处理函数（student 模式）
 const handleViewProgress = (row: StudentItem) => {
-    message.info(`查看 ${row.studentName} 的学习进度`)
-    // TODO: 实现查看学习进度的具体逻辑
-    console.log('查看学习进度:', row)
+    // 跳转到学习进度页面，传递学员信息作为查询参数
+    router.push({
+        name: 'StudentProgress',
+        query: {
+            studentId: row.id,
+            studentName: row.studentName,
+            accountNumber: row.accountNumber,
+            className: row.className
+        }
+    })
+}
+
+// 统计分析处理函数（student 模式）
+const handleStatisticsAnalysis = () => {
+    // 跳转到统计分析页面
+    router.push({
+        name: 'StatisticsAnalysis'
+    })
 }
 
 // 删除学员处理函数（student 模式）
 const handleDeleteStudent = (row: StudentItem) => {
-    message.warning(`删除学员：${row.studentName}`)
-    // TODO: 实现删除学员的具体逻辑
-    console.log('删除学员:', row)
+    dialog.info({
+        title: '确认删除',
+        content: `确定要删除学员"${row.studentName}"吗？\n\n删除后将无法恢复！`,
+        positiveText: '确认删除',
+        negativeText: '取消',
+        onPositiveClick: async () => {
+            try {
+                // 这里模拟 API 调用
+                await new Promise(resolve => setTimeout(resolve, 500))
+                
+                const studentName = row.studentName
+                const studentId = row.id
+                
+                // 从数据中移除学员
+                data.value = data.value.filter(student => student.id !== studentId)
+                
+                // 更新学员总数
+                totalStudents.value = data.value.length
+                
+                message.success(`已删除学员：${studentName}`)
+                
+                // 重新加载数据以确保数据同步
+                loadData(props.classId)
+            } catch (error) {
+                message.error('删除失败，请重试')
+            }
+        }
+    })
 }
 
 const handleConfirmTransfer = async () => {
@@ -884,7 +896,7 @@ const handleConfirmTransfer = async () => {
         selectedTargetClass.value = ''
         
         // 重新加载数据
-        loadData()
+        loadData(props.classId)
     } catch (error) {
         message.error('调班失败，请重试')
     }
@@ -892,14 +904,46 @@ const handleConfirmTransfer = async () => {
 
 // 判断是否为当前班级
 const isCurrentClass = (classValue: string) => {
-    if (!currentTransferStudent.value) return false
+    if (!currentTransferStudent.value) {
+        console.log('调班判断: 未选中学员')
+        return false
+    }
     
     // 根据学员的className匹配班级value
     const studentClassName = currentTransferStudent.value.className
     const classOption = masterClassList.value.find(item => item.className === studentClassName)
+    
+    console.log('调班判断:', {
+        学员姓名: currentTransferStudent.value.studentName,
+        学员班级: studentClassName,
+        待匹配班级ID: classValue,
+        找到的班级: classOption,
+        是否匹配: classOption?.id === classValue
+    })
+    
     return classOption?.id === classValue
 }
 
+// 根据班级ID生成邀请码
+const generateInviteCode = (classId: string) => {
+    // 模拟根据班级ID生成不同的邀请码
+    const baseCode = 56685222
+    const numericClassId = parseInt(classId) || 1
+    return (baseCode + numericClassId * 1000).toString()
+}
+
+// 打开邀请码弹窗
+const openInviteModal = (classId: string) => {
+    currentInviteClassId.value = classId
+    inviteCode.value = generateInviteCode(classId)
+    showInviteModal.value = true
+    
+    console.log('打开邀请码弹窗:', {
+        班级ID: classId,
+        邀请码: inviteCode.value
+    })
+}
+
 const copyInviteCode = () => {
     navigator.clipboard.writeText(inviteCode.value).then(() => {
         message.success('邀请码已复制到剪贴板')
@@ -925,7 +969,7 @@ const handleSubmit = async () => {
         resetForm()
         
         // 重新加载数据
-        loadData()
+        loadData(props.classId)
     } catch (error) {
         message.error('请检查表单信息')
     }
@@ -1040,52 +1084,120 @@ const handleRenameClass = (classItem: any) => {
 
 // 删除班级确认
 const handleDeleteClass = (classItem: any) => {
-    currentDeleteClass.value = classItem
-    showDeleteConfirmModal.value = true
-}
-
-// 确认删除班级
-const confirmDeleteClass = async () => {
-    try {
-        // 这里模拟 API 调用
-        await new Promise(resolve => setTimeout(resolve, 500))
-        
-        message.success(`已删除班级：${currentDeleteClass.value.className}`)
-        
-        // 从主数据源中移除
-        const index = masterClassList.value.findIndex(item => item.id === currentDeleteClass.value.id)
-        if (index > -1) {
-            masterClassList.value.splice(index, 1)
+    dialog.info({
+        title: '确认删除',
+        content: `确定要删除班级"${classItem.className}"吗？\n\n删除后将无法恢复！`,
+        positiveText: '确认删除',
+        negativeText: '取消',
+        onPositiveClick: async () => {
+            try {
+                // 这里模拟 API 调用
+                await new Promise(resolve => setTimeout(resolve, 500))
+                
+                message.success(`已删除班级：${classItem.className}`)
+                
+                // 从主数据源中移除
+                const index = masterClassList.value.findIndex(item => item.id === classItem.id)
+                if (index > -1) {
+                    masterClassList.value.splice(index, 1)
+                }
+                
+            } catch (error) {
+                message.error('删除失败，请重试')
+            }
         }
-        
-        // 关闭确认弹窗
-        showDeleteConfirmModal.value = false
-        currentDeleteClass.value = null
-        
-    } catch (error) {
-        message.error('删除失败，请重试')
-    }
+    })
 }
 
 // 模拟数据加载
-const loadData = async () => {
+const loadData = async (classId?: number | null) => {
     loading.value = true
     try {
         await new Promise(resolve => setTimeout(resolve, 500))
 
-        const mockData: StudentItem[] = Array.from({ length: 3 }, (_, index) => ({
-            id: `student_${index + 1}`,
-            studentName: ['张华', '李明', '王丽'][index],
-            accountNumber: [`${(1660340 + index + 1).toString()}`, `${(1660340 + index + 2).toString()}`, `${(1660340 + index + 3).toString()}`][index],
-            className: '计算机1',
-            college: '清华大学经管学院',
-            loginName: [`${(1660340 + index + 1).toString()}`, `${(1660340 + index + 2).toString()}`, `${(1660340 + index + 3).toString()}`][index],
-            joinTime: '2025.07.25 08:20'
-        }))
+        // 根据班级ID模拟不同的数据
+        let mockData: StudentItem[] = []
+        
+        if (classId === null || classId === undefined) {
+            // 未选择班级时显示空数据或默认数据
+            mockData = []
+        } else {
+            // 根据不同班级ID返回不同的模拟数据
+            const classDataMap: Record<number, StudentItem[]> = {
+                1: [
+                    {
+                        id: 'student_1_1',
+                        studentName: '张华',
+                        accountNumber: '1660341',
+                        className: '软件工程1班',
+                        college: '计算机学院',
+                        loginName: '1660341',
+                        joinTime: '2025.07.25 08:20'
+                    },
+                    {
+                        id: 'student_1_2',
+                        studentName: '李明',
+                        accountNumber: '1660342',
+                        className: '软件工程1班',
+                        college: '计算机学院',
+                        loginName: '1660342',
+                        joinTime: '2025.07.25 09:15'
+                    }
+                ],
+                2: [
+                    {
+                        id: 'student_2_1',
+                        studentName: '王丽',
+                        accountNumber: '1660343',
+                        className: '软件工程2班',
+                        college: '软件学院',
+                        loginName: '1660343',
+                        joinTime: '2025.07.26 10:30'
+                    },
+                    {
+                        id: 'student_2_2',
+                        studentName: '赵强',
+                        accountNumber: '1660344',
+                        className: '软件工程2班',
+                        college: '软件学院',
+                        loginName: '1660344',
+                        joinTime: '2025.07.26 11:45'
+                    },
+                    {
+                        id: 'student_2_3',
+                        studentName: '孙美',
+                        accountNumber: '1660345',
+                        className: '软件工程2班',
+                        college: '软件学院',
+                        loginName: '1660345',
+                        joinTime: '2025.07.26 14:20'
+                    }
+                ],
+                3: [
+                    {
+                        id: 'student_3_1',
+                        studentName: '周杰',
+                        accountNumber: '1660346',
+                        className: '计算机科学1班',
+                        college: '数学学院',
+                        loginName: '1660346',
+                        joinTime: '2025.07.27 08:50'
+                    }
+                ]
+            }
+            
+            mockData = classDataMap[classId] || []
+        }
 
         data.value = mockData
+        
+        // 更新学员总数
+        totalStudents.value = mockData.length
+        
+        console.log(`加载班级 ${classId} 的数据，共 ${mockData.length} 名学员`)
     } catch (error) {
         console.error('加载数据失败:', error)
+        message.error('加载数据失败，请重试')
     } finally {
         loading.value = false
     }
@@ -1097,7 +1209,7 @@ const handleImportSuccess = (result: any) => {
     message.success(`导入完成！成功：${result.details?.success || 0} 条，失败：${result.details?.failed || 0} 条`)
     
     // 重新加载数据
-    loadData()
+    loadData(props.classId)
 }
 
 // 模板下载处理
@@ -1107,8 +1219,46 @@ const handleTemplateDownload = (type?: string) => {
     // TODO: 实现模板下载逻辑
 }
 
+// 监听班级ID变化，重新加载数据
+watch(
+    () => props.classId,
+    (newClassId, oldClassId) => {
+        console.log(`班级ID从 ${oldClassId} 变更为 ${newClassId}`)
+        if (newClassId !== oldClassId) {
+            // 同步更新选择器的状态
+            selectedDepartment.value = newClassId ? newClassId.toString() : ''
+            loadData(newClassId)
+        }
+    },
+    { immediate: false } // 不立即执行，避免与onMounted重复
+)
+
+// 监听部门/班级选择器变化，重新加载数据
+watch(
+    () => selectedDepartment.value,
+    (newDepartmentId, oldDepartmentId) => {
+        console.log(`选择的班级从 ${oldDepartmentId} 变更为 ${newDepartmentId}`)
+        if (newDepartmentId !== oldDepartmentId) {
+            // 当选择器有值时，使用选择器的值；否则使用传入的classId
+            const targetClassId = newDepartmentId ? Number(newDepartmentId) : props.classId
+            loadData(targetClassId)
+        }
+    },
+    { immediate: false }
+)
+
 onMounted(() => {
-    loadData()
+    // 初始加载时，优先使用使用传入的classId，其次使用选择器的值
+    const initialClassId = props.classId ? props.classId : Number(selectedDepartment.value)
+    loadData(initialClassId)
+})
+
+// 暴露方法给父组件
+defineExpose({
+    openAddClassModal,
+    handleRenameClass,
+    handleDeleteClass,
+    openInviteModal
 })
 </script>
 
@@ -1118,7 +1268,7 @@ onMounted(() => {
 }
 
 .toolbar {
-    /* margin: 16px 0; */
+    padding-bottom: 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -1341,7 +1491,6 @@ onMounted(() => {
 
 .batch-delete-content {
     text-align: center;
-    padding: 20px 0;
 }
 
 .batch-delete-content p {
@@ -1443,9 +1592,15 @@ onMounted(() => {
     margin-top: 16px;
 }
 
+.delete-warning {
+    color: #ff4d4f;
+    font-weight: 500;
+    margin-top: 8px;
+}
+
 .delete-confirm-content {
     text-align: center;
-    padding: 20px 0;
+    padding: 5px 0;
 }
 
 .delete-confirm-content p {
@@ -1453,16 +1608,6 @@ onMounted(() => {
     font-size: 14px;
 }
 
-.delete-warning {
-    color: #ff4d4f;
-    font-weight: 500;
-}
-
-/* 批量调班样式 */
-.batch-transfer-content {
-    padding: 20px 0;
-}
-
 .batch-transfer-content p {
     margin: 8px 0;
     font-size: 14px;
diff --git a/src/router/index.ts b/src/router/index.ts
index 54fbc7d..a83efc7 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -66,6 +66,8 @@ import HomeworkTemplateImport from '@/views/teacher/course/HomeworkTemplateImpor
 // 学员管理组件
 import StudentLibrary from '@/views/teacher/student/StudentLibrary.vue'
 import ClassManagement from '@/views/teacher/student/ClassManagement.vue'
+import StudentProgress from '@/views/teacher/student/StudentProgress.vue'
+import StatisticsAnalysis from '@/views/teacher/student/StatisticsAnalysis.vue'
 import ExamManagement from '@/views/teacher/ExamPages/ExamPage.vue'
 import ExamQuestionBankManagement from '@/views/teacher/ExamPages/QuestionBankManagement.vue'
 import QuestionManagement from '@/views/teacher/ExamPages/QuestionManagement.vue'
@@ -310,6 +312,18 @@ const routes: RouteRecordRaw[] = [
             name: 'ClassManagement',
             component: ClassManagement,
             meta: { title: '班级管理' }
+          },
+          {
+            path: 'student-progress',
+            name: 'StudentProgress',
+            component: StudentProgress,
+            meta: { title: '学习进度' }
+          },
+          {
+            path: 'statistics-analysis',
+            name: 'StatisticsAnalysis',
+            component: StatisticsAnalysis,
+            meta: { title: '统计分析' }
           }
         ]
       },
diff --git a/src/views/teacher/student/ClassManagement.vue b/src/views/teacher/student/ClassManagement.vue
index e922c94..da5bdc3 100644
--- a/src/views/teacher/student/ClassManagement.vue
+++ b/src/views/teacher/student/ClassManagement.vue
@@ -1,11 +1,185 @@
 <template>
-  <div>
-    课程管理开发中
+  <div class="class-management">
+    <div class="class-left">
+      <span class="class-title">班级管理</span>
+      <n-collapse :default-expanded-names="['1']">
+        <template #header-extra>
+          <n-popselect
+            trigger="hover"
+            placement="bottom-start"
+            :options="classMenuOptions"
+            @update:value="handleClassMenuSelect"
+          >
+            <n-icon style="cursor: pointer;">
+              <EllipsisVertical />
+            </n-icon>
+          </n-popselect>
+        </template>
+        <template #arrow>
+          <n-icon>
+            <CaretForward />
+          </n-icon>
+        </template>
+        <n-collapse-item title="班级管理" name="1">
+          <div 
+            class="class-item" 
+            :class="{ active: activeClassId === value.id }"
+            v-for="value in classList" 
+            :key="value.id"
+            @click="handleClassClick(value.id)"
+          >
+            <div>{{ value.name }}</div>
+            <n-popselect
+              trigger="hover"
+              placement="bottom-start"
+              :options="getClassItemOptions()"
+              @update:value="(selectedValue: string) => handleClassItemMenuSelect(selectedValue, value.id)"
+            >
+              <n-icon style="cursor: pointer;">
+                <EllipsisVertical />
+              </n-icon>
+            </n-popselect>
+          </div>
+        </n-collapse-item>
+      </n-collapse>
+    </div>
+    <div class="class-right">
+      <ClassManagement ref="classManagementRef" :class-id="activeClassId" :class-name="classList.find(item => item.id === activeClassId)?.name" />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import ClassManagement from '@/components/teacher/ClassManagement.vue'
+import { CaretForward, EllipsisVertical } from '@vicons/ionicons5'
+import { ref } from "vue"
+
+const classList = ref([
+  { id: 1, name: "班级一" },
+  { id: 2, name: "班级二" },
+  { id: 3, name: "班级三" },
+])
+
+// 当前激活的班级ID
+const activeClassId = ref<number | null>(1)
+
+// 引用ClassManagement组件
+const classManagementRef = ref<InstanceType<typeof ClassManagement> | null>(null)
+
+// 班级菜单选项
+const classMenuOptions = [
+  {
+    label: '添加班级',
+    value: 'add-class'
+  }
+]
+
+// 获取班级项菜单选项
+const getClassItemOptions = () => [
+  {
+    label: '编辑名称',
+    value: 'edit-name'
+  },
+  {
+    label: '邀请码',
+    value: 'invite-code'
+  },
+  {
+    label: '删除',
+    value: 'delete'
+  }
+]
+
+// 点击班级项的处理函数
+const handleClassClick = (classId: number) => {
+  activeClassId.value = classId
+}
+
+// 处理班级菜单选择
+const handleClassMenuSelect = (value: string) => {
+  if (value === 'add-class') {
+    // 调用ClassManagement组件内的添加班级弹窗
+    if (classManagementRef.value) {
+      classManagementRef.value.openAddClassModal?.()
+    }
+  }
+}
+
+// 处理班级项菜单选择
+const handleClassItemMenuSelect = (value: string, classId: number) => {
+  if (!classManagementRef.value) return
+  
+  const selectedClass = classList.value.find(item => item.id === classId)
+  if (!selectedClass) return
+  
+  switch (value) {
+    case 'edit-name':
+      // 调用组件内部管理班级下的重命名方法
+      classManagementRef.value.handleRenameClass?.({
+        id: classId.toString(),
+        className: selectedClass.name,
+        studentCount: 0,
+        creator: '王建国',
+        createTime: '2025.09.02 09:11'
+      })
+      break
+    case 'invite-code':
+      // 调用组件内部邀请码弹窗
+      classManagementRef.value.openInviteModal?.(classId.toString())
+      break
+    case 'delete':
+      // 调用组件内部管理班级下的删除方法
+      classManagementRef.value.handleDeleteClass?.({
+        id: classId.toString(),
+        className: selectedClass.name,
+        studentCount: 0,
+        creator: '王建国',
+        createTime: '2025.09.02 09:11'
+      })
+      break
+  }
+}
+
 </script>
 
 <style scoped>
+.class-management {
+  background-color: #fff;
+  border-radius: 4px;
+  display: flex;
+  min-height: 1000px;
+}
+
+.class-left {
+  width: 240px;
+  padding-right: 16px;
+  border-right: 1px solid #eee;
+  padding: 16px;
+}
+
+.class-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  display: block;
+}
+
+.class-right {
+  padding: 16px;
+  flex: 1;
+}
+
+.class-item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 13px 8px;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.active{
+  background-color: #F5F9FC;
+  color: #0288D1;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/teacher/student/StatisticsAnalysis.vue b/src/views/teacher/student/StatisticsAnalysis.vue
new file mode 100644
index 0000000..d814c8f
--- /dev/null
+++ b/src/views/teacher/student/StatisticsAnalysis.vue
@@ -0,0 +1,1751 @@
+<template>
+    <div class="statistics-analysis">
+        <!-- 页面头部 -->
+        <div class="page-header">
+            <div class="header-left">
+                <n-button quaternary circle size="large" @click="goBack" class="back-button">
+                    <template #icon>
+                        <n-icon>
+                            <ArrowBackOutline />
+                        </n-icon>
+                    </template>
+                </n-button>
+                <h1 class="page-title">学员统计分析</h1>
+            </div>
+            <div class="header-right">
+                <!-- <span class="update-time">数据更新时间：2024-09-04 15:30:00</span> -->
+            </div>
+        </div>
+
+        <!-- 统计分析内容区域 -->
+        <div class="content-area">
+            <!-- 第一行 -->
+            <div class="row-container">
+                <!-- 第一个区块：数据概况 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/路径 10.png" />
+                                    </div>
+                                    <span class="title-text">数据概况</span>
+                                </div>
+                            </div>
+                        </template>
+                        <!-- 数据概况卡片 -->
+                        <div class="overview-content">
+                            <div class="data-card">
+                                <div class="data-info">
+                                    <div class="data-label">班级数量（个）</div>
+                                    <div class="data-number">{{ overviewData.classCount }}</div>
+                                </div>
+                                <div class="data-icon">
+                                    <n-image width="50" src="/analysis/切片 28.png" />
+                                </div>
+                            </div>
+                            <div class="data-card">
+                                <div class="data-info">
+                                    <div class="data-label">学员总数（人）</div>
+                                    <div class="data-number">{{ overviewData.studentCount }}</div>
+                                </div>
+                                <div class="data-icon">
+                                    <n-image width="50" src="/analysis/切片 29.png" />
+                                </div>
+                            </div>
+                            <div class="data-card">
+                                <div class="data-info">
+                                    <div class="data-label">今日新增（人）</div>
+                                    <div class="data-number">{{ overviewData.todayNew }}</div>
+                                </div>
+                                <div class="data-icon">
+                                    <n-image width="50" src="/analysis/切片 30.png" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 学员增长趋势 -->
+                        <div class="trend-section">
+                            <div class="trend-header">
+                                <div class="trend-title">
+                                    <span>学员增长趋势</span>
+                                </div>
+                                <div class="time-filter">
+                                    <n-button-group size="small">
+                                        <n-button :type="timeFilter === 'week' ? 'primary' : 'default'"
+                                            @click="changeTimeFilter('week')">
+                                            周
+                                        </n-button>
+                                        <n-button :type="timeFilter === 'month' ? 'primary' : 'default'"
+                                            @click="changeTimeFilter('month')">
+                                            月
+                                        </n-button>
+                                        <n-button :type="timeFilter === 'year' ? 'primary' : 'default'"
+                                            @click="changeTimeFilter('year')">
+                                            年
+                                        </n-button>
+                                    </n-button-group>
+                                </div>
+                            </div>
+                            <div class="chart-container">
+                                <v-chart ref="growthChart" class="chart" :option="growthChartOption" autoresize />
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+
+                <!-- 第二个区块：课程概况 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/切片 21.png" />
+                                    </div>
+                                    <span class="title-text">课程概况</span>
+                                </div>
+                            </div>
+                        </template>
+                        <!-- 课程数据卡片 -->
+                        <div class="overview-content">
+                            <div class="data-card">
+                                <div class="data-info">
+                                    <div class="data-label">已完成课程（节）</div>
+                                    <div class="data-number">{{ courseData.completedCourses }}</div>
+                                </div>
+                                <div class="data-icon">
+                                    <n-image width="50" src="/analysis/切片 31.png" />
+                                </div>
+                            </div>
+                            <div class="data-card">
+                                <div class="data-info">
+                                    <div class="data-label">已完成课程（%）</div>
+                                    <div class="data-number">{{ courseData.completionRate }}</div>
+                                </div>
+                                <div class="data-icon">
+                                    <n-image width="50" src="/analysis/切片 32.png" />
+                                </div>
+                            </div>
+                            <div class="data-card">
+                                <div class="data-info">
+                                    <div class="data-label">已获得证书（个）</div>
+                                    <div class="data-number">{{ courseData.certificates }}</div>
+                                </div>
+                                <div class="data-icon">
+                                    <n-image width="50" src="/analysis/切片 33.png" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 课程报名Top排行榜 -->
+                        <div class="ranking-section">
+                            <div class="ranking-header">
+                                <div class="ranking-title">
+                                    <span>课程报名Top排行榜</span>
+                                </div>
+                            </div>
+                            <div class="ranking-list">
+                                <div 
+                                    v-for="(course, index) in topCourses" 
+                                    :key="index" 
+                                    class="ranking-item"
+                                >
+                                    <div class="course-name">{{ course.name }}</div>
+                                    <div class="progress-container">
+                                        <n-progress 
+                                            type="line" 
+                                            :percentage="course.progress" 
+                                            :show-indicator="false"
+                                            :height="10"
+                                            color="linear-gradient(90deg, #3AE8E8 0%, #0288D1 100%)"
+                                            rail-color="#f0f0f0"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+            </div>
+
+            <!-- 第二行 -->
+            <div class="row-container">
+                <!-- 第三个区块：男女占比 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/分组 86.png" />
+                                    </div>
+                                    <span class="title-text">男女占比</span>
+                                </div>
+                            </div>
+                        </template>
+                        
+                        <div class="gender-content">
+                            <!-- 左侧数据卡片 -->
+                            <div class="gender-data">
+                                <div class="gender-card">
+                                    <div class="gender-info">
+                                        <div class="gender-label">男生人数（人）</div>
+                                        <div class="gender-number">{{ genderData.maleCount }}</div>
+                                    </div>
+                                    <div class="gender-icon">
+                                        <n-image width="40" src="/analysis/切片 34.png" />
+                                    </div>
+                                </div>
+                                <div class="gender-card">
+                                    <div class="gender-info">
+                                        <div class="gender-label">女生人数（人）</div>
+                                        <div class="gender-number">{{ genderData.femaleCount }}</div>
+                                    </div>
+                                    <div class="gender-icon">
+                                        <n-image width="40" src="/analysis/切片 35.png" />
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- 右侧饼图 -->
+                            <div class="gender-chart">
+                                <v-chart 
+                                    ref="genderChart"
+                                    class="pie-chart"
+                                    :option="genderChartOption"
+                                    autoresize
+                                />
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+                <!-- 第四个区块：学校分布 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/路径 11.png" />
+                                    </div>
+                                    <span class="title-text">学校分布</span>
+                                </div>
+                            </div>
+                        </template>
+                        
+                        <div class="school-content">
+                            <div class="school-chart">
+                                <v-chart 
+                                    ref="schoolChart"
+                                    class="school-pie-chart"
+                                    :option="schoolChartOption"
+                                    autoresize
+                                />
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+            </div>
+
+            <!-- 第三行 -->
+            <div class="row-container">
+                <!-- 第五个区块：每日学习时长分析 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/路径 18.png" />
+                                    </div>
+                                    <span class="title-text">每日学习时长分析</span>
+                                </div>
+                            </div>
+                        </template>
+                        
+                        <div class="daily-study-content">
+                            <div class="chart-legend">
+                                <div class="legend-item">
+                                    <div class="legend-dot" style="background-color: #3AE8E8;"></div>
+                                    <span class="legend-text">课程</span>
+                                </div>
+                                <div class="legend-item">
+                                    <div class="legend-dot" style="background-color: #FF9066;"></div>
+                                    <span class="legend-text">学习</span>
+                                </div>
+                            </div>
+                            <div class="daily-chart-container">
+                                <v-chart 
+                                    ref="dailyStudyChart"
+                                    class="daily-line-chart"
+                                    :option="dailyStudyChartOption"
+                                    autoresize
+                                />
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+                <!-- 第六个区块：学员学习时段分布 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/分组 93.png" />
+                                    </div>
+                                    <span class="title-text">学员学习时段分布</span>
+                                </div>
+                            </div>
+                        </template>
+                        
+                        <div class="time-period-content">
+                            <div class="chart-container">
+                                <v-chart 
+                                    ref="timePeriodChart"
+                                    class="period-bar-chart"
+                                    :option="timePeriodChartOption"
+                                    autoresize
+                                />
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+            </div>
+
+            <!-- 第四行 -->
+            <div class="row-container">
+                <!-- 第七个区块：课程完成情况 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/分组 106.png" />
+                                    </div>
+                                    <span class="title-text">课程完成情况</span>
+                                </div>
+                            </div>
+                        </template>
+                        
+                        <div class="completion-content">
+                            <div class="completion-chart">
+                                <v-chart 
+                                    ref="completionChart"
+                                    class="funnel-chart"
+                                    :option="completionChartOption"
+                                    autoresize
+                                />
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+                <!-- 第八个区块：实时动态 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/路径 19.png" />
+                                    </div>
+                                    <span class="title-text">实时动态</span>
+                                </div>
+                            </div>
+                        </template>
+                        <div class="activity-content">
+                            <div class="activity-list">
+                                <div 
+                                    v-for="(activity, index) in activityData.slice(0,6)" 
+                                    :key="index" 
+                                    class="activity-item"
+                                >
+                                    <div class="activity-text">
+                                        <span class="student-name">学员 [张三]刚刚完成了《{{ activity.courseName }}》{{ activity.chapterName }}</span>
+                                    </div>
+                                    <div class="activity-time">{{ activity.time }}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart, PieChart, LineChart, FunnelChart } from 'echarts/charts'
+import { NImage } from 'naive-ui'
+import {
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    GridComponent
+} from 'echarts/components'
+import {
+    ArrowBackOutline,
+} from '@vicons/ionicons5'
+
+// 注册 ECharts 组件
+use([
+    CanvasRenderer,
+    BarChart,
+    PieChart,
+    LineChart,
+    FunnelChart,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    GridComponent
+])
+
+const router = useRouter()
+
+// 数据概况
+const overviewData = ref({
+    classCount: 70,
+    studentCount: 70,
+    todayNew: 70
+})
+
+// 课程概况数据
+const courseData = ref({
+    completedCourses: 70,
+    completionRate: 70,
+    certificates: 70
+})
+
+// 课程排行榜数据
+const topCourses = ref([
+    { name: '课程名称一', progress: 85 },
+    { name: '课程名称二课程名称', progress: 75 },
+    { name: '课程名称一', progress: 65 },
+    { name: '课程名称二课程名称', progress: 60 },
+    { name: '课程名称二课程名称', progress: 55 }
+])
+
+// 男女占比数据
+const genderData = ref({
+    maleCount: 6650,
+    femaleCount: 6650
+})
+
+// 学校分布数据
+const schoolData = ref([
+    { name: '云南师范大学', value: 20, color: ['#FF9066', '#FF6B35'] },
+    { name: '云南师范大学', value: 20, color: ['#9C88FF', '#8B7CF6'] },
+    { name: '云南师范大学', value: 20, color: ['#34D399', '#10B981'] },
+    { name: '云南师范大学', value: 20, color: ['#60A5FA', '#3B82F6'] },
+    { name: '云南师范大学', value: 20, color: ['#A78BFA', '#8B5CF6'] }
+])
+
+// 每日学习时长数据
+const dailyStudyData = ref({
+    categories: ['2.13', '2.14', '2.15', '2.16', '2.17', '2.18', '2.19'],
+    courseData: [120, 150, 180, 250, 200, 180, 220],
+    studyData: [100, 180, 160, 200, 150, 120, 190]
+})
+
+// 学员学习时段分布数据
+const timePeriodData = ref({
+    categories: ['6-9点', '9-12点', '12-15点', '15-18点', '18-21点', '21-24点', '24-6点'],
+    data: [280, 320, 180, 280, 250, 160, 350]
+})
+
+// 课程完成情况数据
+// const completionData = ref([
+//     { name: '报名课程的总人数', value: 5555454, color: '#1890FF' },
+//     { name: '学习了至少一个章节的人数', value: 665995, color: '#3AE8E8' },
+//     { name: '完成所有学习的人数', value: 6656, color: '#FF9066' }
+// ])
+
+// 实时动态数据
+const activityData = ref([
+    { courseName: '数据分析入门', chapterName: '第一章', time: '09:22' },
+    { courseName: '数据分析入门', chapterName: '第一章', time: '09:22' },
+    { courseName: '数据分析入门', chapterName: '第一章', time: '09:22' },
+    { courseName: '数据分析入门', chapterName: '第二章', time: '09:20' },
+    { courseName: 'Python基础教程', chapterName: '第三章', time: '09:18' },
+    { courseName: '机器学习实战', chapterName: '第一章', time: '09:15' }
+])
+
+// 时间筛选类型
+type TimeFilterType = 'week' | 'month' | 'year'
+
+// 时间筛选
+const timeFilter = ref<TimeFilterType>('week')
+
+// 模拟增长趋势数据
+const growthData = ref<Record<TimeFilterType, { categories: string[], data: number[] }>>({
+    week: {
+        categories: ['9.1', '9.2', '9.3', '9.4', '9.5', '9.6', '9.7'],
+        data: [280, 0, 0, 180, 280, 0, 140]
+    },
+    month: {
+        categories: ['8月', '9月', '10月', '11月', '12月'],
+        data: [350, 390, 280, 350, 240]
+    },
+    year: {
+        categories: ['2020', '2021', '2022', '2023', '2024'],
+        data: [1200, 1500, 1800, 2100, 2400]
+    }
+})
+
+// 图表配置
+const growthChartOption = computed(() => {
+    const currentData = growthData.value[timeFilter.value]
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            formatter: '{b}<br/>{a}: {c}人'
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: currentData.categories,
+            axisLine: {
+                lineStyle: {
+                    color: '#e8e8e8'
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#8c8c8c',
+                fontSize: 12
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#8c8c8c',
+                fontSize: 12
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f0f0f0',
+                    type: 'dashed'
+                }
+            }
+        },
+        series: [{
+            name: '新增学员',
+            type: 'bar',
+            data: currentData.data,
+            itemStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0,
+                        color: '#3AE8E8'
+                    }, {
+                        offset: 1,
+                        color: '#0288D1'
+                    }]
+                },
+                borderRadius: [4, 4, 0, 0]
+            },
+            barWidth: '10px'
+        }]
+    }
+})
+
+// 男女占比饼图配置
+const genderChartOption = computed(() => {
+    // const total = genderData.value.maleCount + genderData.value.femaleCount
+    // const malePercentage = total > 0 ? Math.round((genderData.value.maleCount / total) * 100) : 0
+    // const femalePercentage = total > 0 ? Math.round((genderData.value.femaleCount / total) * 100) : 0
+    
+    return {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+            orient: 'vertical',
+            right: '10%',
+            top: 'center',
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                fontSize: 12,
+                color: '#595959'
+            },
+            formatter: function(name: any) {
+                const total = genderData.value.maleCount + genderData.value.femaleCount
+                const value = name === '男生' ? genderData.value.maleCount : genderData.value.femaleCount
+                const percentage = total > 0 ? Math.round((value / total) * 100) : 0
+                return name + ' ' + percentage + '%'
+            },
+            data: [
+                {
+                    name: '男生',
+                    icon: 'circle'
+                },
+                {
+                    name: '女生',
+                    icon: 'circle'
+                }
+            ]
+        },
+        series: [{
+            name: '男女占比',
+            type: 'pie',
+            radius: ['55%', '70%'],
+            center: ['35%', '50%'],
+            avoidLabelOverlap: false,
+            label: {
+                show: false
+            },
+            emphasis: {
+                label: {
+                    show: false
+                }
+            },
+            labelLine: {
+                show: false
+            },
+            data: [
+                {
+                    value: genderData.value.maleCount,
+                    name: '男生',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: '#3AE8E8'
+                            }, {
+                                offset: 1,
+                                color: '#0288D1'
+                            }]
+                        }
+                    }
+                },
+                {
+                    value: genderData.value.femaleCount,
+                    name: '女生',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: '#FF9066'
+                            }, {
+                                offset: 1,
+                                color: '#FF6B35'
+                            }]
+                        }
+                    }
+                }
+            ]
+        }]
+    }
+})
+
+// 学校分布饼图配置
+const schoolChartOption = computed(() => {
+    return {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c}%'
+        },
+        series: [{
+            name: '学校分布',
+            type: 'pie',
+            radius: ['45%', '65%'],
+            center: ['50%', '50%'],
+            avoidLabelOverlap: false,
+            label: {
+                show: true,
+                position: 'outside',
+                formatter: '{b}    {c}%',
+                fontSize: 12,
+                color: '#595959',
+                alignTo: 'none',
+                margin: 8
+            },
+            labelLine: {
+                show: true,
+                length: 15,
+                length2: 10,
+                smooth: false,
+                lineStyle: {
+                    width: 1,
+                    color: '#ccc'
+                }
+            },
+            emphasis: {
+                label: {
+                    show: true,
+                    fontSize: 12,
+                    fontWeight: 'bold'
+                }
+            },
+            data: schoolData.value.map((item) => ({
+                value: item.value,
+                name: item.name,
+                itemStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0,
+                            color: item.color[0]
+                        }, {
+                            offset: 1,
+                            color: item.color[1]
+                        }]
+                    }
+                }
+            }))
+        }]
+    }
+})
+
+// 每日学习时长折线图配置
+const dailyStudyChartOption = computed(() => {
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+            },
+            formatter: function(params: any) {
+                let result = params[0].name + '<br/>'
+                params.forEach(function(param: any) {
+                    result += param.marker + param.seriesName + ': ' + param.value + '分钟<br/>'
+                })
+                return result
+            }
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '8%',
+            top: '10%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: dailyStudyData.value.categories,
+            axisLine: {
+                lineStyle: {
+                    color: '#e8e8e8',
+                    width: 1
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#8c8c8c',
+                fontSize: 12,
+                margin: 12
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#8c8c8c',
+                fontSize: 12,
+                formatter: '{value}分钟'
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f0f0f0',
+                    type: 'dashed',
+                    width: 1
+                }
+            }
+        },
+        series: [
+            {
+                name: '课程',
+                type: 'line',
+                smooth: 0.4,
+                symbol: 'circle',
+                symbolSize: 8,
+                showSymbol: true,
+                lineStyle: {
+                    color: '#3AE8E8',
+                    width: 4,
+                    shadowColor: 'rgba(58, 232, 232, 0.3)',
+                    shadowBlur: 10,
+                    shadowOffsetY: 3
+                },
+                itemStyle: {
+                    color: '#3AE8E8',
+                    borderColor: '#fff',
+                    borderWidth: 2,
+                    shadowColor: 'rgba(58, 232, 232, 0.5)',
+                    shadowBlur: 8
+                },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0,
+                            color: 'rgba(58, 232, 232, 0.4)'
+                        }, {
+                            offset: 0.7,
+                            color: 'rgba(58, 232, 232, 0.1)'
+                        }, {
+                            offset: 1,
+                            color: 'rgba(58, 232, 232, 0.02)'
+                        }]
+                    }
+                },
+                emphasis: {
+                    focus: 'series',
+                    lineStyle: {
+                        width: 5
+                    }
+                },
+                data: dailyStudyData.value.courseData
+            },
+            {
+                name: '学习',
+                type: 'line',
+                smooth: 0.4,
+                symbol: 'circle',
+                symbolSize: 8,
+                showSymbol: true,
+                lineStyle: {
+                    color: '#FF9066',
+                    width: 4,
+                    shadowColor: 'rgba(255, 144, 102, 0.3)',
+                    shadowBlur: 10,
+                    shadowOffsetY: 3
+                },
+                itemStyle: {
+                    color: '#FF9066',
+                    borderColor: '#fff',
+                    borderWidth: 2,
+                    shadowColor: 'rgba(255, 144, 102, 0.5)',
+                    shadowBlur: 8
+                },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0,
+                            color: 'rgba(255, 144, 102, 0.4)'
+                        }, {
+                            offset: 0.7,
+                            color: 'rgba(255, 144, 102, 0.1)'
+                        }, {
+                            offset: 1,
+                            color: 'rgba(255, 144, 102, 0.02)'
+                        }]
+                    }
+                },
+                emphasis: {
+                    focus: 'series',
+                    lineStyle: {
+                        width: 5
+                    }
+                },
+                data: dailyStudyData.value.studyData
+            }
+        ]
+    }
+})
+
+// 学员学习时段分布柱状图配置
+const timePeriodChartOption = computed(() => {
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            formatter: function(params: any) {
+                return params[0].name + '<br/>' + params[0].marker + '学员数量: ' + params[0].value + '人'
+            }
+        },
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '10%',
+            top: '5%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: timePeriodData.value.categories,
+            axisLine: {
+                lineStyle: {
+                    color: '#e8e8e8',
+                    width: 1
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#8c8c8c',
+                fontSize: 12,
+                margin: 12
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#8c8c8c',
+                fontSize: 12,
+                formatter: '{value}'
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f0f0f0',
+                    type: 'dashed',
+                    width: 1
+                }
+            }
+        },
+        series: [{
+            name: '学员数量',
+            type: 'bar',
+            data: timePeriodData.value.data,
+            itemStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0,
+                        color: '#3AE8E8'
+                    }, {
+                        offset: 1,
+                        color: '#0288D1'
+                    }]
+                },
+                borderRadius: [6, 6, 0, 0],
+                shadowColor: 'rgba(58, 232, 232, 0.3)',
+                shadowBlur: 8,
+                shadowOffsetY: 4
+            },
+            barWidth: '10px',
+            emphasis: {
+                itemStyle: {
+                    shadowColor: 'rgba(58, 232, 232, 0.5)',
+                    shadowBlur: 12,
+                    shadowOffsetY: 6
+                }
+            }
+        }]
+    }
+})
+
+// 课程完成情况漏斗图配置
+const completionChartOption = computed(() => {
+    return {
+        tooltip: {
+            trigger: 'item',
+            formatter: function(params: any) {
+                let actualValue = ''
+                if (params.name === '报名课程的总人数') {
+                    actualValue = '5,555,454'
+                } else if (params.name === '学习了至少一个章节的人数') {
+                    actualValue = '665,995'
+                } else if (params.name === '完成所有学习的人数') {
+                    actualValue = '6,656'
+                }
+                return params.name + '<br/>' + params.marker + '人数: ' + actualValue + '人'
+            }
+        },
+        legend: {
+            orient: 'vertical',
+            left: '5%',
+            top: 'center',
+            itemWidth: 12,
+            itemHeight: 12,
+            textStyle: {
+                fontSize: 13,
+                color: '#595959'
+            },
+            formatter: function(name: any) {
+                // 显示实际人数数据
+                // if (name === '报名课程的总人数') {
+                //     return name + '\n5,555,454人'
+                // } else if (name === '学习了至少一个章节的人数') {
+                //     return name + '\n665,995人'
+                // } else if (name === '完成所有学习的人数') {
+                //     return name + '\n6,656人'
+                // }
+                return name
+            },
+            data: [
+                { name: '报名课程的总人数', icon: 'circle' },
+                { name: '学习了至少一个章节的人数', icon: 'circle' },
+                { name: '完成所有学习的人数', icon: 'circle' }
+            ]
+        },
+        series: [{
+            name: '课程完成情况',
+            type: 'funnel',
+            left: '50%',
+            top: '10%',
+            width: '40%',
+            height: '80%',
+            min: 0,
+            max: 100,
+            minSize: '1%',
+            maxSize: '90%',
+            sort: 'none',
+            gap: 4,
+            funnelAlign: 'center',
+            label: {
+                show: true,
+                position: 'right',
+                formatter: function(params: any) {
+                    if (params.name === '报名课程的总人数') {
+                        return '5,555,454人'
+                    } else if (params.name === '学习了至少一个章节的人数') {
+                        return '665,995人'
+                    } else if (params.name === '完成所有学习的人数') {
+                        return '6,656人'
+                    }
+                    return params.value.toLocaleString() + '人'
+                },
+                fontSize: 14,
+                color: '#262626',
+                fontWeight: 500
+            },
+            labelLine: {
+                length: 20,
+                lineStyle: {
+                    width: 1,
+                    type: 'solid',
+                    color: '#ccc'
+                }
+            },
+            itemStyle: {
+                borderColor: '#fff',
+                borderWidth: 2,
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 8,
+                shadowOffsetY: 4
+            },
+            emphasis: {
+                label: {
+                    fontSize: 16,
+                    fontWeight: 'bold'
+                },
+                itemStyle: {
+                    shadowColor: 'rgba(0, 0, 0, 0.2)',
+                    shadowBlur: 12,
+                    shadowOffsetY: 6
+                }
+            },
+            data: [
+                {
+                    value: 100,
+                    name: '报名课程的总人数',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: '#1890FF'
+                            }, {
+                                offset: 1,
+                                color: '#0d4ed4'
+                            }]
+                        }
+                    }
+                },
+                {
+                    value: 66,
+                    name: '学习了至少一个章节的人数',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: '#3AE8E8'
+                            }, {
+                                offset: 1,
+                                color: '#0288D1'
+                            }]
+                        }
+                    }
+                },
+                {
+                    value: 33,
+                    name: '完成所有学习的人数',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: '#FF9066'
+                            }, {
+                                offset: 1,
+                                color: '#ff6b35'
+                            }]
+                        }
+                    }
+                }
+            ]
+        }]
+    }
+})
+
+// 切换时间筛选
+const changeTimeFilter = (filter: TimeFilterType) => {
+    timeFilter.value = filter
+}
+
+// 返回上一页
+const goBack = () => {
+    router.go(-1)
+}
+</script>
+
+<style scoped>
+.statistics-analysis {
+    padding: 20px;
+    background-color: #fff;
+    min-height: 100vh;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    padding: 0 4px;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.page-title {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: #262626;
+}
+
+.header-right {
+    color: #8c8c8c;
+    font-size: 14px;
+}
+
+.content-area {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.row-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    min-width: 0; /* 允许网格项目缩小 */
+}
+
+.block-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 0; /* 防止内容溢出 */
+}
+
+.data-block {
+    height: 100%;
+    background: linear-gradient(180deg, #F5F8FB 0%, #FCFEFF 100%);
+    border: 0px;
+    min-width: 0; /* 防止内容溢出 */
+}
+
+.data-block :deep(.n-card) {
+    height: 100%;
+    border-radius: 12px;
+    min-width: 0;
+}
+
+.data-block :deep(.n-card__content) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+/* 数据概况区域 */
+.section-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.title-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.title-text {
+    font-size: 16px;
+    font-weight: 600;
+    color: #262626;
+}
+
+.overview-content {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.data-card {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: #fff;
+    position: relative;
+}
+
+.data-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.data-label {
+    font-size: 14px;
+    color: #595959;
+    font-weight: 400;
+}
+
+.data-number {
+    font-size: 32px;
+    font-weight: 600;
+    color: #262626;
+    line-height: 1;
+}
+
+.data-icon {
+    opacity: 0.8;
+}
+
+/* 学员增长趋势区域 */
+.trend-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.trend-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.trend-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #262626;
+}
+
+.time-filter :deep(.n-button-group) {
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.time-filter :deep(.n-button) {
+    border: none;
+    border-radius: 0;
+    font-size: 12px;
+    padding: 4px 12px;
+    height: 28px;
+}
+
+.time-filter :deep(.n-button--primary-type) {
+    background-color: #1890ff;
+    color: white;
+}
+
+.time-filter :deep(.n-button--default-type) {
+    background-color: white;
+    color: #595959;
+}
+
+.chart-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 240px;
+    width: 100%;
+    overflow: hidden;
+}
+
+.chart {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+}
+
+/* 课程排行榜区域 */
+.ranking-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.ranking-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.ranking-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #262626;
+}
+
+.ranking-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    flex: 1;
+    justify-content: space-around;
+}
+
+.ranking-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.course-name {
+    font-size: 12px;
+    color: #595959;
+    min-width: 120px;
+    flex-shrink: 0;
+    text-align: left;
+}
+
+.progress-container {
+    flex: 1;
+}
+
+.progress-container :deep(.n-progress-graph-line-rail) {
+    border-radius: 4px;
+}
+
+.progress-container :deep(.n-progress-graph-line-fill) {
+    border-radius: 4px;
+}
+
+/* 男女占比区域 */
+.gender-content {
+    display: flex;
+    gap: 20px;
+    height: 100%;
+    align-items: center;
+    padding: 0 20px;
+}
+
+.gender-data {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.gender-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: #fff;
+}
+
+.gender-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.gender-label {
+    font-size: 14px;
+    color: #595959;
+    font-weight: 400;
+}
+
+.gender-number {
+    font-size: 24px;
+    font-weight: 600;
+    color: #262626;
+    line-height: 1;
+}
+
+.gender-icon {
+    opacity: 0.8;
+}
+
+.gender-chart {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+}
+
+.pie-chart {
+    width: 100%;
+    height: 200px;
+    min-width: 0;
+}
+
+/* 学校分布区域 */
+.school-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.school-chart {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+}
+
+.school-pie-chart {
+    width: 100%;
+    height: 300px;
+    min-width: 0;
+}
+
+/* 每日学习时长分析区域 */
+.daily-study-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 16px 20px;
+}
+
+.chart-legend {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 32px;
+    margin-bottom: 20px;
+    padding: 12px 0;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.legend-text {
+    font-size: 14px;
+    color: #595959;
+    font-weight: 500;
+}
+
+.daily-chart-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 320px;
+    border-radius: 8px;
+}
+
+.daily-line-chart {
+    width: 100%;
+    height: 320px;
+    min-width: 0;
+}
+
+/* 学员学习时段分布区域 */
+.time-period-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 20px;
+}
+
+.period-bar-chart {
+    width: 100%;
+    height: 350px;
+    min-width: 0;
+}
+
+/* 课程完成情况区域 */
+.completion-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 15px;
+}
+
+.completion-chart {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+    overflow: hidden;
+}
+
+.funnel-chart {
+    width: 100%;
+    height: 400px;
+    min-width: 0;
+}
+
+/* 实时动态区域 */
+.activity-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 20px;
+}
+
+.activity-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.activity-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.activity-item:last-child {
+    border-bottom: none;
+}
+
+.activity-text {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: 1;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.student-name {
+    color: #4e4e4e;
+    font-weight: 500;
+}
+
+.activity-desc {
+    color: #8c8c8c;
+}
+
+.chapter-name {
+    color: #262626;
+}
+
+.activity-time {
+    color: #8c8c8c;
+    font-size: 14px;
+    font-weight: 400;
+    min-width: 60px;
+    text-align: right;
+}
+
+/* 占位元素 */
+.placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+    color: #8c8c8c;
+    font-size: 16px;
+    background: #fafafa;
+    border-radius: 8px;
+    border: 2px dashed #d9d9d9;
+}
+
+/* 响应式设计 */
+@media (max-width: 900px) {
+    .row-container {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+}
+
+@media (max-width: 768px) {
+    .statistics-analysis {
+        padding: 16px;
+    }
+
+    .page-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+        margin-bottom: 20px;
+    }
+
+    .content-area {
+        gap: 16px;
+    }
+
+    .overview-content {
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .data-card {
+        padding: 12px 16px;
+    }
+
+    .data-number {
+        font-size: 28px;
+    }
+
+    .chart-container {
+        min-height: 200px;
+    }
+
+    .placeholder {
+        min-height: 300px;
+        font-size: 14px;
+    }
+
+    .gender-content {
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .daily-chart-container {
+        min-height: 250px;
+    }
+
+    .period-bar-chart {
+        height: 250px;
+    }
+
+    .completion-chart {
+        min-height: 300px;
+    }
+
+    .funnel-chart {
+        height: 300px;
+    }
+}
+</style>
diff --git a/src/views/teacher/student/StudentLibrary.vue b/src/views/teacher/student/StudentLibrary.vue
index bec7eef..e7fb1f9 100644
--- a/src/views/teacher/student/StudentLibrary.vue
+++ b/src/views/teacher/student/StudentLibrary.vue
@@ -33,7 +33,8 @@
         </div>
     </div>
     <div class="student-library" v-else>
-        <ClassManagement type="student"></ClassManagement>
+        <!-- TODO: 暂时传id为1，来显示模拟数据，对接接口需要去掉 -->
+        <ClassManagement type="student" :class-id="1"></ClassManagement>
     </div>
 </template>
 
diff --git a/src/views/teacher/student/StudentProgress.vue b/src/views/teacher/student/StudentProgress.vue
new file mode 100644
index 0000000..881ef04
--- /dev/null
+++ b/src/views/teacher/student/StudentProgress.vue
@@ -0,0 +1,645 @@
+<template>
+    <div class="student-progress">
+        <!-- 页面头部 -->
+        <div class="page-header">
+            <div class="header-left">
+                <n-button quaternary circle size="large" @click="goBack" class="back-button">
+                    <template #icon>
+                        <n-icon>
+                            <ArrowBackOutline />
+                        </n-icon>
+                    </template>
+                </n-button>
+                <h1 class="page-title">{{ studentInfo.name }}的学习进度明细</h1>
+            </div>
+            <div class="header-right">
+                <!-- <span class="student-info">学号：{{ studentInfo.studentId }} | 班级：{{ studentInfo.className }}</span> -->
+            </div>
+        </div>
+
+        <!-- 统计图表区域 -->
+        <div class="statistics-section">
+            <!-- 图表容器 -->
+            <v-chart class="chart" :option="chartOption" autoresize />
+        </div>
+
+        <!-- 课程进度详情 -->
+        <div class="course-progress-section">
+            <n-card>
+                <template #header>
+                    <div class="section-header">
+                        <div class="header-course-name">课程名称</div>
+                        <div class="header-items">
+                            <span class="header-duration">总时长</span>
+                            <span class="header-status">课程进度</span>
+                            <span class="header-start-time">第一次学习时间</span>
+                            <span class="header-complete-time">学习完成时间</span>
+                            <span class="header-progress">学习进度</span>
+                        </div>
+                    </div>
+                </template>
+
+                <!-- 课程进度列表 -->
+                <div class="course-list">
+                    <div v-for="course in courseProgressData" :key="course.id" class="course-item">
+                        <div class="course-info">
+                            <div class="course-thumbnail">
+                                <n-image width="60" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
+                            </div>
+                            <div class="course-details">
+                                <h4 class="course-title">{{ course.courseName }}</h4>
+                                <!-- <p class="course-subtitle">提升您的编程思维和算法能力，高效率学习指南</p> -->
+                            </div>
+                        </div>
+                        <div class="course-stats">
+                            <span class="duration">{{ Math.floor(course.studyTime) }}小时{{ Math.floor((course.studyTime %
+                                1) *
+                                60) }}分钟</span>
+                            <span class="status">{{ course.progress === 100 ? '已完成课时' : '已完成课时' }} {{
+                                course.completedLessons
+                                }}/{{ course.totalLessons }}</span>
+                            <span class="start-time">{{ course.progress > 0 ? '2022.04.01 20：22' : '-' }}</span>
+                            <span class="complete-time">{{ course.progress === 100 ? '2022.04.18 14：00' : '-' }}</span>
+                            <div class="progress-bar-wrapper">
+                                <n-progress :percentage="course.progress" :show-indicator="false" :height="6"
+                                    :color="course.progress === 100 ? '#1890ff' : '#1890ff'" />
+                                <span class="progress-text">进度{{ course.progress }}%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </n-card>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ArrowBackOutline } from '@vicons/ionicons5'
+import {
+    NCard,
+    NButton,
+    NIcon,
+    NProgress,
+    NImage
+} from 'naive-ui'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import {
+    CanvasRenderer
+} from 'echarts/renderers'
+import {
+    LineChart
+} from 'echarts/charts'
+import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent
+} from 'echarts/components'
+
+use([
+    CanvasRenderer,
+    LineChart,
+    TitleComponent,
+    TooltipComponent,
+    GridComponent
+])
+
+const route = useRoute()
+const router = useRouter()
+
+// 学员信息
+const studentInfo = ref({
+    id: route.query.studentId as string || '1',
+    name: route.query.studentName as string || '张三',
+    studentId: route.query.accountNumber as string || 'ST001',
+    className: route.query.className as string || '软件工程1班'
+})
+
+// 模拟课程进度数据
+const courseProgressData = ref([
+    {
+        id: 1,
+        courseName: 'Python程序设计基础',
+        courseType: '必修课',
+        progress: 100,
+        completedLessons: 15,
+        totalLessons: 15,
+        studyTime: 28.5,
+        lastStudyTime: '2024-09-03 14:30',
+        homeworkProgress: 100,
+        examProgress: 85
+    },
+    {
+        id: 2,
+        courseName: '数据结构与算法',
+        courseType: '必修课',
+        progress: 87,
+        completedLessons: 13,
+        totalLessons: 15,
+        studyTime: 32.2,
+        lastStudyTime: '2024-09-03 10:15',
+        homeworkProgress: 80,
+        examProgress: 90
+    },
+    {
+        id: 3,
+        courseName: 'Web前端开发技术',
+        courseType: '选修课',
+        progress: 73,
+        completedLessons: 11,
+        totalLessons: 15,
+        studyTime: 25.8,
+        lastStudyTime: '2024-09-02 16:45',
+        homeworkProgress: 75,
+        examProgress: 0
+    },
+    {
+        id: 4,
+        courseName: '数据库系统原理',
+        courseType: '必修课',
+        progress: 60,
+        completedLessons: 9,
+        totalLessons: 15,
+        studyTime: 18.5,
+        lastStudyTime: '2024-09-01 09:20',
+        homeworkProgress: 60,
+        examProgress: 78
+    },
+    {
+        id: 5,
+        courseName: '软件工程导论',
+        courseType: '必修课',
+        progress: 40,
+        completedLessons: 6,
+        totalLessons: 15,
+        studyTime: 12.3,
+        lastStudyTime: '2024-08-30 11:10',
+        homeworkProgress: 40,
+        examProgress: 0
+    },
+    {
+        id: 6,
+        courseName: '计算机网络',
+        courseType: '必修课',
+        progress: 27,
+        completedLessons: 4,
+        totalLessons: 15,
+        studyTime: 8.7,
+        lastStudyTime: '2024-08-28 15:30',
+        homeworkProgress: 20,
+        examProgress: 0
+    },
+    {
+        id: 7,
+        courseName: '操作系统原理',
+        courseType: '必修课',
+        progress: 13,
+        completedLessons: 2,
+        totalLessons: 15,
+        studyTime: 4.2,
+        lastStudyTime: '2024-08-25 14:20',
+        homeworkProgress: 10,
+        examProgress: 0
+    },
+    {
+        id: 8,
+        courseName: '人工智能基础',
+        courseType: '选修课',
+        progress: 0,
+        completedLessons: 0,
+        totalLessons: 15,
+        studyTime: 0,
+        lastStudyTime: '未开始',
+        homeworkProgress: 0,
+        examProgress: 0
+    }
+])
+
+// 图表配置
+const chartOption = computed(() => {
+    // 模拟时间序列数据
+    const dateRange = [
+        '2022.04.01', '2022.04.02', '2022.04.03', '2022.04.04', '2022.04.05',
+        '2022.04.06', '2022.04.07', '2022.04.08', '2022.04.09', '2022.04.10', '2022.04.11'
+    ]
+
+    // 模拟学习进度数据（按照图片中的趋势）
+    const progressData = [
+        2000, 3500, 5200, 7800, 9500, 11200, 12000, 11800, 10500, 11600, 8000
+    ]
+
+    return {
+        title: {
+            text: `${studentInfo.value.name}的学习进度明细`,
+            left: 20,
+            top: 20,
+            textStyle: {
+                fontSize: 16,
+                fontWeight: '500',
+                color: '#333'
+            }
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'line',
+                lineStyle: {
+                    color: '#999',
+                    type: 'dashed'
+                }
+            },
+            backgroundColor: '#fff',
+            borderColor: '#ccc',
+            borderWidth: 1,
+            textStyle: {
+                color: '#333'
+            },
+            formatter: function (params: any) {
+                const param = params[0]
+                return `${param.axisValue}<br/>
+                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span>
+                学习进度: ${param.value} 分钟`
+            }
+        },
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '8%',
+            top: '15%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: dateRange,
+            axisLabel: {
+                fontSize: 12,
+                color: '#666',
+                interval: 0,
+                rotate: 0
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#e8e8e8'
+                }
+            },
+            axisTick: {
+                show: false
+            }
+        },
+        yAxis: {
+            type: 'value',
+            min: 0,
+            max: 14000,
+            interval: 2000,
+            axisLabel: {
+                formatter: '{value}',
+                fontSize: 12,
+                color: '#666'
+            },
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f0f0f0'
+                }
+            }
+        },
+        series: [
+            {
+                name: '学习进度',
+                type: 'line',
+                data: progressData,
+                smooth: true,
+                symbol: 'circle',
+                symbolSize: 6,
+                lineStyle: {
+                    color: '#1890ff',
+                    width: 3
+                },
+                itemStyle: {
+                    color: '#1890ff',
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(24, 144, 255, 0.3)'
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(24, 144, 255, 0.05)'
+                            }
+                        ]
+                    }
+                },
+                emphasis: {
+                    focus: 'series',
+                    itemStyle: {
+                        color: '#1890ff',
+                        borderColor: '#fff',
+                        borderWidth: 3,
+                        shadowBlur: 10,
+                        shadowColor: 'rgba(24, 144, 255, 0.3)'
+                    }
+                }
+            }
+        ]
+    }
+})
+
+// 返回上一页
+const goBack = () => {
+    router.go(-1)
+}
+</script>
+
+<style scoped>
+.student-progress {
+    padding: 10px;
+    background-color: #fff;
+    min-height: 100vh;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 0 20px;
+    border-radius: 8px;
+    height: 70px;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.back-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #1890ff;
+    font-size: 14px;
+}
+
+.page-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: #333;
+}
+
+.header-right {
+    color: #666;
+    font-size: 14px;
+}
+
+.statistics-section {
+    margin-bottom: 20px;
+}
+
+.chart-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+}
+
+.chart {
+    width: 100%;
+    height: 500px;
+    border-radius: 8px;
+    padding: 20px 0;
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 0 16px;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 1px solid #f0f0f0;
+    padding-bottom: 12px;
+}
+
+.header-course-name {
+    flex: 1;
+    font-size: 16px;
+}
+
+.header-items {
+    display: flex;
+    font-size: 14px;
+    color: #666;
+}
+
+.header-duration {
+    width: 120px;
+    text-align: center;
+}
+
+.header-status {
+    width: 140px;
+    text-align: center;
+}
+
+.header-start-time {
+    width: 150px;
+    text-align: center;
+}
+
+.header-complete-time {
+    width: 150px;
+    text-align: center;
+}
+
+.header-progress {
+    width: 140px;
+    text-align: center;
+}
+
+.course-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.course-item {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    background: #fff;
+    border: 1px solid #f0f0f0;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+}
+
+.course-info {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    gap: 12px;
+}
+
+.course-thumbnail {
+    width: 60px;
+    height: 40px;
+    border-radius: 4px;
+}
+
+.course-icon {
+    color: white;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.course-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.course-details {
+    flex: 1;
+}
+
+.course-title {
+    margin: 0 0 4px 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+}
+
+.course-subtitle {
+    margin: 0;
+    font-size: 12px;
+    color: #999;
+}
+
+.course-stats {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #666;
+}
+
+.duration {
+    width: 120px;
+    text-align: center;
+}
+
+.status {
+    width: 140px;
+    text-align: center;
+}
+
+.start-time {
+    width: 150px;
+    text-align: center;
+}
+
+.complete-time {
+    width: 150px;
+    text-align: center;
+}
+
+.progress-bar-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 140px;
+}
+
+.progress-bar-wrapper .n-progress {
+    width: 80px;
+}
+
+.progress-text {
+    font-size: 12px;
+    color: #1890ff;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .student-progress {
+        padding: 10px;
+    }
+
+    .page-header {
+        flex-direction: column;
+        height: auto;
+        padding: 15px;
+        gap: 10px;
+    }
+
+    .header-left {
+        width: 100%;
+        justify-content: flex-start;
+    }
+
+    .header-right {
+        width: 100%;
+        text-align: left;
+    }
+
+    .chart-header h3 {
+        font-size: 14px;
+    }
+
+    .section-header {
+        flex-direction: column;
+        gap: 10px;
+        align-items: flex-start;
+        padding: 0 8px;
+    }
+
+    .header-items {
+        display: none;
+        /* 在移动端隐藏表头 */
+    }
+
+    .header-course-name {
+        font-size: 14px;
+    }
+
+    .course-item {
+        flex-direction: column;
+        gap: 12px;
+        padding: 12px;
+    }
+
+    .course-stats {
+        flex-direction: column;
+        gap: 8px;
+        align-items: flex-start;
+        width: 100%;
+    }
+
+    .course-stats>* {
+        width: 100% !important;
+        text-align: left !important;
+    }
+
+    .progress-bar-wrapper {
+        justify-content: flex-start !important;
+    }
+}
+</style>