From 252b2e318bccf1164d269a93988675a97b0bbfbc Mon Sep 17 00:00:00 2001
From: CIMYong_Work <1498365143@qq.com>
Date: Fri, 17 Oct 2025 08:28:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/style.css |  86 +++++++--
 src/assets/img/zw.jpg    | Bin 0 -> 24985 bytes
 src/components/wang.vue  | 395 ++++++++++++++++++++++++---------------
 3 files changed, 310 insertions(+), 171 deletions(-)
 create mode 100644 src/assets/img/zw.jpg

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index b1ba8dd..0ec4bbe 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -39,12 +39,13 @@
 }
 .rightDiv {
    height: calc(100% - 7px);
-    width: calc(100% - 372px);
+   width:100%;
+    /* width: calc(100% - 372px); */
     /* background: lightcoral; */
     /* height: 600px; */
     overflow: hidden;
     /* overflow: hidden auto; */
-    padding: 20px;
+    padding: 20px 0;
     padding-top: 4px;
     padding-right: 0;
     padding-bottom: 0;
@@ -536,13 +537,30 @@ button:hover {
   /* border-radius: 8px; */
   position: relative;
 }
+.tree-container {
+  width: 100% !important; /* 确保容器占满父元素宽度 */
+  overflow-x: auto !important; /* 允许容器横向滚动 */
+  padding-bottom: 10px; /* 预留横向滚动条空间 */
+}
+/* 确保树形组件不被限制宽度 */
+.elTree {
+  min-width: 100% !important; /* 至少占满容器宽度 */
+  width: auto !important; /* 允许根据内容自动扩展宽度 */
+  overflow-x: auto !important; /* 强制显示横向滚动条 */
+  padding-right: 8px;
+  padding-bottom: 8px; /* 避免内容被横向滚动条遮挡 */
+}
+
 .el-tree-node__children{
   overflow:auto;
 }
 .el-tree-node__content {
-  max-width: 280px;
+  max-width: none !important; /* 取消最大宽度限制 */
+  width: auto !important; /* 允许内容撑开宽度 */
+  overflow: visible !important;
+  /* max-width: 280px;
   height: 30px;
-  overflow: auto;
+  overflow: auto; */
 }
 .el-tree-node__content span div{
   /* overflow: auto; */
@@ -879,18 +897,49 @@ button:hover {
 }
 /* 针对树形组件容器添加横向滚动支持 */
 .tree-container {
-  /* 限制容器最大宽度（可根据实际布局调整） */
-  width: 100%;
-  height:calc(100% - 90px);
-  overflow-x: hidden; /* 横向溢出时显示滚动条 */
-  padding-bottom: 0; /* 预留底部空间，避免滚动条遮挡内容 */
+  /* 保留现有样式，添加高度限制 */
+  height: calc(100% - 40px); /* 减去标题高度（根据实际调整） */
+  overflow: hidden; /* 避免容器自身滚动 */
+}
+/* 添加以下样式 */
+.el-scrollbar {
+  /* 让滚动条占满容器剩余高度 */
+  height: calc(100% - 80px); /* 36px 为 navTitle 的大致高度 */
+  display: block; /* 确保高度生效 */
+}
+
+/* 调整树形组件高度，使其在滚动区域内 */
+.elTree {
+  max-height: 100% !important; /* 覆盖原有 max-height，使用滚动条高度 */
+  height: 100% !important;
+}
+/* 修复滚动条容器的隐藏问题 */
+.el-scrollbar__wrap {
+  overflow-x: auto !important;
+  overflow-y: auto !important;
+  margin-right: -17px; /* 补偿滚动条宽度，避免内容被截断 */
+  margin-bottom: -17px;
+}
+
+/* 确保滚动条轨道可见 */
+.el-scrollbar__track {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.el-scrollbar__thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
 }
 
 /* 确保树形组件本身不限制宽度，让内容能撑开容器 */
 .elTree {
-  min-width: 100%; /* 至少占满容器宽度 */
-  display: inline-block; /* 让树组件宽度由内容决定 */
-  white-space: nowrap; /* 防止节点内容自动换行 */
+/*   
+  min-width: 100%;  
+  display: inline-block; / 
+  white-space: nowrap;    */
+   max-height: calc(100% - 38px);
+  overflow: visible !important; /* 避免覆盖滚动条 */
+  padding-right: 8px;
 }
 
 /* 优化节点文本显示，避免过长文本被截断 */
@@ -1095,7 +1144,10 @@ button:hover {
   text-align: left !important;
 }
 .navTitle{
-  position: relative;
+    position: relative; /* 保持在文档流中 */
+  z-index: 10; /* 避免被树形组件遮挡 */
+  padding-bottom: 8px; /* 与树形组件保持间距 */
+  border-bottom: 1px solid #f0f0f0; /* 可选：添加分隔线 */
 }
 .navTitle p {
   margin: 0;
@@ -1107,10 +1159,10 @@ button:hover {
   /* 可选样式 */
 }
 .iconImgMulu{
- position: absolute;
-    right: 0;
-    /* bottom: 0; */
-    top: 7px;
+     position: absolute;
+    right: 10px;
+    bottom: 0;
+    top: 0;
     margin: auto;
     height: 20px;
     cursor: pointer;
diff --git a/src/assets/img/zw.jpg b/src/assets/img/zw.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..13776ef60594d8682813a0e177f931a6a17dc12e
GIT binary patch
literal 24985
zcmeHv2|SeR+yBFm62_V>rb5(&lv2WwtQ|=um6(dMC2dL!V+p00P^nZSDkLU_63y6`
zO7^wvvM)2%F=n3m-_-fNC#Um!JLf&;{k{Lsr|I)F&CJs?&wbt3{k^`|_qy(3H?Z3v
zK~qB$Lx_VDf;hk*i2V`LhZZhaz_WmRArBAFqD2dN`9%5o7BA+L6c#~>%1EJPWu%ra
zT_&%hxNOB5xur{$G*+!ytER55j#AvLy=k46%6j#6vlro5v}h6EVm=9eeu;I<mo8uT
zryuMbNN6GF1;iwRV+F)1#DNgvU>86raG%^9a}Vh2gM$;n#l3)M;UeC};DmHRh?4_>
z;N(JZb8~Tlv%SIR5SI|Q@NzZ11tJ!Qc~+bfUFR46V4>XB)LgM$l~nolM^5`M;$0#x
zAt|M>Qc-EuYV{2pH8yS5)Zb=cXk=_+x_gi1UaNik57^lsJ?7x(<b39=`?>QT7d!(l
z1_lLRx*QS_dHu%Cs9U%1#Kt{*^f*2t@yYWSY3Ug+UuC||%P%M_DlRE~TUA|CTUX!E
z*wo(9+4Z@*r?;=4Haa#wF*!w_X3UO@144Wm7Wn(iz~+rh2#kx9iwnWUGdnI0&hy|v
z2yt;QS6d*gXTfv$l*o#8ehWpnhCfKnT_m@D7gg-Y=}O)u^6KphwArD}jqJw;=Kq&Q
z_OF5c*SMM>J_HAtJcJO0fu<NrvA(=NkDoU9=>tD~;HMA#m=B<@WYS4(SJ0WsCpOUS
z?u$Ei>5B%tApCVkl8xBV;@}+2xLPh7@_ERHIvf$NVqf9u2X#2u(1S4K%!DEv5;0<`
zpddC>QOv_)M6#jFF#;VS9kKM6ZPu3~l(O{}mkf&S(O+qzjS0#+04c?W{0ELCEVjw%
zW`s@a!F*R&iFfbNftHL&-6f7BPFnpCl+@kep{*fnnJ!uF$A%78u%V62ta>x*_Tp-f
zB)#bEHN#S_2Xcnj88<q`+U28mEdu87WmNDaRT_vw7XSMP2TiqL6OM4HMSjPHns^^#
z%V~V_8OtW-fh(o-cv8aV1#KGLA^7A|duDHr<3+oYPHm^Qz^AL1-4}b%?mDbfg43rq
z;4G*es#`kDgX&KVIty*oxr!Vw^CszXi(34B#|4MtH|Nac+8GBvzAe>eeLCeI8pIp_
zULN%%f$35+(CyZwdO-ZX%Cjmt+@rvZDMVVt(r`9}dx9$RT}{VyexN+KG_)ZNu77?|
z>AdTU7&hcZr?ed;9+)C5#u-qHuZmf1ueoL;6zPN+?nY5X>SdF{v0~LXZcD67<rC23
zk%&Q397*9gHClWjEWL;?$|bQ$Rn~IS#&;6`W;#MUsX<G7M%Tl7&m!3*nWD(e{r1?6
zs=3!4#w>JY(+w=DH+XC8&zLd1jd#6(oNBwi2^D4f=KIFkUE{u;e??i!gmj6ra@5lo
z#zICN&QT#p>Q+)e#N6S|d0D${+sDnijfX$9Mu!<1n*Y*GM%THATJNVgrAL2EO1dGB
zO3OTQKaOXZ#SM9Lca%4Yn?6IjwI}VZaag+ecCNAB1R}_dd49lFqysDI(xRFrE>-tH
zp{VMYQ^=c}*if@x4r5~Ksgx3w%!YV8?)T)$u6j|I{Jdp*$G+U++mh{3G*k-GIVaXv
zXQFy!DBVW03I3p`kpA9f&513El48!;;*(yq#G8`Ya$YMBtgUXiiOIkF+J|cxwRfE4
z8N(T(^uK-}ujy=5(NS@^dkD2`d|>9%K>0wGjwTx_wW^^ETt_jKUCMf)*bpT|8r@7X
zs)HC@BO4`6QLtm72Vc`i+G>truW0i6b0E=Yh87e1ut#=s7>NFD2dA*8u(|96l?{cu
zQ|QJ_r=<S&D+*=rBrda|`*xqrnP-)~57UfnWo78@NiFEX`^IM3isWgXgM^cd-15k3
z|FR~(o4^6*rXb4EqYttx`!$5QE<d>TfT#Xs7qnTi!m7zfrYhyED{ocNh{da#6Gwj8
z?tb#~9mC-Z<+3-rh%cu61Mf$vhK$IuA>*tC=(R?x1UDUHq)IT5o>NlaMOkz=l3=?~
zO7)U>!CnjQ)SA1O{lkQP;$g;8mcCW>#FY+;K$8b4-|Dq;Tfup?Yox2UKAnE56THAz
zM=Ca@|FunB=#yrrm#Nd|H$GS2rFw8J=56AfO}Sa9y;&6#US_)rCl5BgeO}c39H~F(
zDTF;vcfh98jDnA+N6XD5CFHw)Fx4>JJuG0<j$K@z;ZxqC4wu&*qrU07l|f!<y~}e=
z&S?r&0d<FP0AlR;Pk3FVkG5eV&9pBn>EqVoftRSN?6+?)og>T}l5A+84%OxIUTMzj
zDs&d%OKmGCL!E4Bn+X<MUxMPIbdemflQcFID^DWLIp^%Df5(C78EG=YzH^e534MKR
z^6+#le#pEkd%<hMC7<OwO0<@wC+HJ?kJWOF%$0R4F_$EnW~ayJBGcZUi?}VAD_Xnb
zdo#KcGou7L>4K-r=t?V}4fGNk>+@R7LZ?Dh?52BG*42bF5!?;l)(Du>5%KZq@tEqT
z%7e*vLLaS*Qnv-fKDo*<ZF%R9aR5nVLym3>@Ch{cyV&NJ<l@iLL>3nt%5lj-kMLtn
z)9S{f->hR`);0BS3^5q--{KV(Q(tgjt|BFSLkF5AMfG7+?TSwI9jM*sC8)=AM68~j
z{`mCQ_lt(5vz!i~FD*4$8gkOouSAZPpcI45U@q>sg|lmyRz9MfB!A_3hZ<9u#HVw+
z%S*^c0hdJ;FTyn3U+u~}d~m-rW%UUy`OaZB)T;k^YKu3zfAx1)$3MwUroVL}bTzC4
zu*`x8zc~yWX6MaOHEl#&6!XT=Vz>n}zU{^Y3+G4O4x3H}vLQDVV}&UL{xL%LBgD4@
zUQNI1;n3clc#e?KeRf8fEFdsdQZj`&gU@kEBSqsKNy01=HkCT4dTY>btOxMBcUCAR
zj6n~~qbsZM6-v3IrB_WTZ*3~7<%<#*eyX+%UTNoxS&u#C;bjnzPnM}3_i~%qdu@$g
zYG{Fgb^i|YPOJtFqLxomLLb(4o7FY#v99S{_IBEm88kM*Nq+P%Sp06l$(EZ8rsD58
zxpcfUhCNQXUGQVdGYNE&moS$$y173n^^vv99qsNYkF4b3c1NO&uAHQ7XEKCC88{By
zG5Fw@((0sPC(`swrCM=IZol@WT&9brFE2WVO7Tx;LlQRAQX7f#Zv|w}O&=k!y0v^{
zyt%!I!1xZXE8ok*3U4BJ-a73%R2n8UXg#7);~Im!JG8ewrDMqz^uZGg)C3hqwbeej
z3=z2d>zjHmo*iJBzU}xh-NES*f2rtv*y2Nz$4|%>r8vpTR*o;!x~KR{`tx57O{)be
zPiUKW9=QI$%_BKR@x`svtJkxk`lpzZ`de1<Om8+65r<)U<}*Vt1VW+~29PIDuIe<p
zNt~69@4bv3V9+r}b*kh1yJXC_zjE;^(YSCrfh%QC;z04Ta2s=`3KE5{D8{fDgxMqj
znc7PV!?d6Dn1O>fv!Rh1JktzCeWeAyMSm$9n(D{ED}8l}W66NN1m<>*FeG}|5XFKG
z(bVyIZL}#C-x;u86W9>_4m2YhLhppdc?gtVJ0i>iX-PpPNKFEYTgTPPL242=mzoTE
zqB{xngR)>@JqW|kOrXBxCjXz@RcLF+6v4)nD17h`!$<-XTf@^q3^UH9ZGg4!BKvev
z4wYCDOo6$iah7$V<}1`-ize~C)FaFloQXRz%_G1v>O6Mcs9|}xBVyPYor^j4@$xXS
zP*tnSlnwP#)~DLBA>}tNE&nzuai%=*c6;npZ#8B9yrpU79m8=;NySky>M-T0c?VJu
z+dqXFIMMB74EHMfjUy0LQXIw+CCZP^Tid%+M`eQv#)HR#SJ1p#In67yc8q(@g+wi^
z?;|Tv1+a3px;_7u#9DiFt=-a0rl^Q6${Z(3?O_7;BCw__eB-Bn`4$tR;Y<Kb=k<A5
zA6s*(=vqN|(E|&}(xQT6*H`X#hOA7xAKn(dP}M#7_VPQ}ReTmBTb`Ml$D}x;!tQfK
zNl!RED1o<_?7)oNQ0M3!w_1!U!a$~3Q3VzpaE)*xYgdX9O+ROJV=ZmtedNq8SJdqo
zf!873cJ$!3Qfp^=yfIHLNyw<**^Rz~xg7YaZ7>@OkigTQK)p&&m9m}M_rLh;5oH)D
za}K-h6dNM!p-^vnxWPd(Xf}iZR+fSqVpG{r`x<I1i%-)EUQi4Jhu+^#VMv@MG5HA~
zvK<L2W<wWW<m1QJ_F?JLC^~TFMGiq=q7GM4s2ee~82%763KlNs2U&IgBYfL&e5Vmp
z;l4C*>|ijTISp*6$X5$9=|?>~>cTjd8GoQuJ&K-ob5rCQ^`xmyOCzl0V2-^w1eNQE
zvQZKL-S#N6%an0DLKlVTJh{7r#4o(4e*A7gcytM!<<vU={wYW8T;lf^I~{csdy{78
zY{1KHDVt+?=kK`ZjY?1P^zB+2z^(!}*pMGER48ix_x~gIvoPs2=gs$1y?oYQ@$mpX
z2v6&WnqxBoyv&>CFzh8+fs33it183rnO@TP6^@99v6-uU6g^f5BRryaD6(#!$FHfC
zB&*Rm1+WDcvZqG%&|~!FF#^LO9qPysSd^yoMj-TIv$=N7llKpEN?z?W>FRuz((?BO
z@81M?9dr5&8&WXDGbVzkrN(&2fk#qC_c*X2(ms4RY3;v{sNW&jNIdH{zT1%vy)<Vf
zV|A?nyuMInmZ2v5*id>>FYg}`r&Wt`N*|Fh^!$!;x<NL#dsk@&0|+S@bgj_*?!)5;
z$NCK*+-I6mA%+^|F$zyAwmK}D(I#nKaJp|aQw(TFQs`G{2>l7fT$I3-Q0v_^(b5~~
zR}bVEcY2*J@Ct<RIRp9VK~kWstgJNs%p>b{uCHDZhIV%y8i~A%I+<k!BXnhwzbY8A
zsx!uHs3aQbRt>uN-j}31=stXt5xlKg5za%fA%i!#%I|0MKPZ97hEvh7DLEQQM)7Q@
z(iLl6Uy9<SbS3psCf?#%OKK<He1$-Rzx5eMq)ox5SJ}|S0CIFgw-}fi6uv6~%#`gj
zHY8_z_{*rodgo^(h&EpI2t(<wJq4#_gug3w6G`oV?;B}h@~Cf2Y5#Fo8@&%wVsg_v
zd2+8?HSh9p(YqU<a`|zIk=f*>Qw+;R*&J=tY^cryYxLpFjpv~zOx+ly+&2!kcV$4k
z_Tqfx=_ZwE{_xC?Js0-p4}EBf&*+@4YyLyCiH({UQI-%zJo;Vs$s-Rx>TX&pyBJVZ
zLpDSX(#{KE@N`670U*pzHE8ZK&wx8wveoyuT}76$Ar48m1jHNMaTEE7(`Jyu*SQuy
z>tXk*?&<Oy`bG)`j{RQ#IYL+uUr~rhww4+OIG~)sZ8n5Gh3`E=9{JarLW;8<;=9bM
z@Po@R<JR?MViStR&8XdV+33gCeV*>k<L|sPBbt_k-#E9nlviMZad-9#)gT>>Tf$_?
z8biz*f!3Z7s4F357!!aMR5&7@{~Q6=7ND6e$wpL-4n&Hz(Pd<utv<0b6uM9=)>ldu
zDgGrU+FD*G^lT>ThMD*vtJ7)yE2mUE<@64`f;z|NvsOuLC|`?S4SRyPBG}3_KvBze
z)PW@N+6v|Zpev*+YhmC?VXiL^#q^}i0x*a$1r}_GZ>-aNdH_TkeLPK+<Fn|`3;kU-
zx=VR671}B1+*j2z6Qzw=yLu&kQD@Afz~soKCu93gJ0jjYk_;l-+zPl3rVvDk2HC-w
zB;H3FKw(B%_uzvS0Xx2bW*Zw~ES7>Q=wbltv1V*2Wj7!T8KmTaZp=j;ews=kZHswk
zt-A8ox@Nmu>Q%aVYjGJ%U+yrO=qBI&m%Dy9srpU`_>uFFk>BR8|2d7M-3RSa;GvPL
zA(F3BW;n8O@|ISxToe%Kuij;J*7<5lce-80w6CPSXtXYUoxi==O%}<o$V_v4@5)dj
zt$!pRVX}E;#J^&*y1MGL#MyGj3_uTku_<rd@(1{m{KxqEPgsToDeK?T=f6Yf`JY|`
z(KU|%kmeDDx%fSf^v8}`rK!$%fVd@WRX;I0FVXwMDF34p$<~wWTsqm%6(4{;7vB}_
zO3w~V`?&OD)1j`l<z>s*kO%DN@{z1TZ-s@3i|(m>uz7tmK}s#){mJojjJrdqT}GzU
zJN`8(vnBn1U}Ac*PbHE=+icG44ANg((P(_cebegC#=GglN{9!sWaCPBvqz^X@AKCD
z1Vc@QuH_Wk=cZ!Xh88DO+P%!CJLSQjfAQ{H)6Gw$&(i*_F-Wi2SNw{d7(aKLCmX_@
zmcxrnnzX#FhvD?5ef{U8?#iAcdb^$%pBnnSUwn+Kg8TJvXxu;5wD3dp5UER70J!3{
z6_7pxOGv>Rk6nfn24cXQ2l$W0@TCYc<$s1DPn<OaQzGLJVq4y?$aoq0FudGg=jvu0
zjW$zEalGrHzav_0+qS6T_@EO>sP-uWSz8J5R?DR$i74suWMqHl+o!?Dg+$;d%crbH
zyJjN1>a~9@x!DBWYim@XyFT^E=-Yod$T)e3$86BvW@sEiNYuGeTrn&8F9@0!zDXD7
zt?_SJhNbp)i}Wh>kN37t>dPdjxvohO%&0}kw{h;!4!m$8c}AbU>;1aE$$G}cfCoaC
zuEA@7Oc7SWL)s&*v3K&^$SHTNoq7`QO6Mw!Ii%YY<xQx9`u1v*7cZ(hwWVco0W>#&
zPBJ9*I-E(eM+kn4Rjmr?;8KF-)~zh@7^V`U&s>ywfm(D)mLKhtdTx`f$;X8{!=51P
z(__?~&%<AlB3@-$CG<5FH+GIK6K*Wzb=}kCbF{Sdh#pTQb0yg!nX+(T)Wfduwe9o3
zR2R)OKhNi~OMO-w#~?G65;|@uUS4^*w$q*OX}mvD|JST~US-7Al~y$~i02*Y{2<l8
z?+|LL!H%(<WI_^TJyOl42=w0Z!Phru0}*FvBO4krg{H}~VdRm2x7Yq{8Dl1V0dYlz
z#!LeP1L&NlL!r5J-xdSPr4bn;>ZfoJ&x&(NmUJiDnIc&gns&w&?Vx+7gcg_#i%Cjt
zDsHh0An0!DH^7ZyEpVLFgeomr#wS|GfTe3`_}jer#nbo7hShXsv;M|f&iCp<Jf-tF
zwe7d0d#>)wF`r=%bj<_SFCzS3D-k;kXui1_5ZCN{=V~5$yS=KMEJd&1q)ni!f@eKV
zqxd9U8nEW8p@|2((Mp8PxYJ#DcTXZtV1m|MFxq_3<djyZd{yT8bDP%`bVUxEot528
z3mge$Za?*;Svb}Eo#XlfwJ=|=DaD#Q-3fD1Cz;6S;W<!fE0<dNG<f8MeG^tvh_u&k
zaDkbfRdp*zHj;I@eXIlBkkRVwsC6y>R$CikrkB}jmd4@IQ5WtMgA<H4eMUH%ocJ=7
zCq>@YJX0&O-{rF>qqUR7j0iP?Ujt4Pw}fmwhb8>{i(x~V^)R^uNF0UUt=NT**wM9p
z#EB_!I0!w=_$B~_c&x~L8L_C+R&q~VoPeY`mlT~)WGfSyM^>pxbJ7rdd42j9e8~E@
zsF|*inV@Wu$*WZIjQ5s;N!pm?j6x-XzT+1M>XsnyLI^kY)p2<0@!U8gAiMD7M{nx#
zuGc)Z@w7vwPdmsTcnLZ6u~zR<FIq2AUSvC*ihWBD-W}Y98n4p==~eN0_{KQvTgU)P
z>8x5RHfA)m9N**d(&QP>6)(A!+KV$$rQF`C08O1KGx$OqtkYZT>65BVZgC8q<_wMf
z+OD=iYfGG22TI6^u}xCg=0o@i#1=iRmu>6tyfa~Mt7LSFTHZEt>bXf33JZihS<BOf
z?m;!y=jTloOf?NAUaxK+?NCgMu($UXT?-h!RaMPDttI~@?Ra`#apSutoHgTrcNndy
z%oTZueq!kRV#`u)M55v|(sdsdoEcuKAK%z?_UdbyxNe=eAtW2pUN}C;Q!~|BO~$+g
zh1quL%V!%X9osHYB39}gJ2M)L8Y_?2d2_1B$Np=4TfJ}j&2D>tQ746P{}oE5$Fv~r
zUQl1QYP(4zU5WL#S2Rm2m<sKG6WL#2*B9AD&fm80+6pDhozTv;P>Oy#$v>8AbTKCN
z=x+SRmD$(M++H}7Ic|}|H1`}#K$O9=#cQP+{J>KbL(Qct<ZoCQXz9WOqB@Gylt*!9
zS8Z}ip5g-;Nj`iWO!To3h%VLL<gz6(IYqEoOQo_T_{p<Pa$^ZDH9lG%E;Ay<WeHoO
zUETML<s$r+b?8mEQ`#&)&v_09-k^46<%TSoU7uh^)!ExdiMs@Jf**O89rj)jAAg{=
zDPzX#)=kIg+I^hJE|<0^j2CUHm%>u1tm6u}Pfn+Atu<e{er!2wKfX<!qyOx8CRB|2
z@^U(I$W6?d;k#K}BhqwXU(jizUY8+^NI#}gR<w3P@TBY0&o_)G78<i$+MT~*K^k+*
zLlY96u%qh8hk>k%!E$sxEn<#6EXpxqmFta|S=^p--{xGIkJ%td)!n4=w4C%_OHn~1
z7q_K?3C6KIF9pOvhj?#(!z%wO@6rmxH=***)eGybj85SReY<vaMOy%2x(}q%`9>c4
zu;1$*7CjgcgZdBf>VUzPwRLT|*wyga+@Z@7dkr9O3>)H?X-6^^3=pR}Q1BKbruzAd
zm|p1=eCs7VeF&HP|K~a9@FLm!4|keNnmlz%Jy>|6qFBN@&=Qx>;|nJ8>Q{NM-$#ZX
zR-R|8S)HCm?}=!tFKfA`<gg{~tOS=|ZLsH*8{KhaA-+Q6ASee3f^tyPw0{W1z{65o
z@=)Xa^_Y<Y4D%e}=Sf+3E{~C4XhVTz!%?nYd>con%_bjODm+6<@6VE=KPD4dciS4N
zFk{!Nb<S=9_hXDC;0rOxLx0ebz`6Nwn8*E97PcDP`z7qxYU{}q;*x0R+pl<N?1HPS
zI*(Nh-yP~VdqHf|DW;pZdD^pV_G}1U@y@2|L|WNap$*AzMZ=Nt3FC4J>Ks&Wu}b>K
zJS!hwns!mR`%Q!Cq3$BCRO0K_ikX0epCPd!HUu#jxbqui?@us@b}?LK|8&y@FG{7C
z7aPj5wP^!_l&wd8LEW7Vx0bzay!ng0fyB%QpMbGVG6O@(awab-#;@3@<SiFVetKk6
zJ(=gsuxDhyBPR=Jd9rS_df3D;jt$uy0=exKth`knVB7ev>&}>oIwVUXee_F&ar~BV
z(Dgy~6CV5v(9K^_#?`Rr=W>VNQbV5GxHHt&$)5bi;f`NE^|?(xT6TK(!+^ekEEs`Z
zS>I|UXmH+DIjvV#a%WMm=elrz%xbz@0Yjd=l&142t}LQ1GVL&drb;Ci9D>z3B4>Gs
zZ6Xy}U}Q|ASKH&P`@<!S6$xsmOYq|$8}qZeQJcIG_D1hXt5J?VKKVkvl4!VVA-soU
zDp}0jv}RfDc(k_Z$6G2fCY|L|`#3T84*o7jLu%1Kg8Hcg6I}}(lI@FoX^wlP2#mpx
zU0x3=PH8veK6~J|RdeLNdVQe;HC}dZmdj6nX+_|jC~q9u3Rlo-7)dEds+Hd%`s8n0
z&e0#sF82wILDqv%jT~g6<`Emy_J=(1?f8<oF#)_3G;!x|N^5l#=)r<lIxv?-MFJ9c
ze45F`)MY*y)LG3>5!KqN#)ee4!Tztl<%vHkPW<*fbbqU_8W-J8nmadQbgyE4418ns
zhW8n&nxv0N-*F>;`7SSbB6vIoY4`^VXO=r7%5_vd#BdJnh7omZo05H<lAmop#k7Ez
zof_tOg9{G0d!9rYD2=0Uu-94huES)>`iG~^-fSHoH7O~c(wl}K3i$h~;H0Pvslh>o
z6N6jaL-q9Ey~0%#*V;{Lms4Z{Jzc*fXgtwOcaWD`fLX2IhZ#RoUn(|1DaKAKND)}>
z0c^-n85ce${!2-TGp}kou)GUF$uMMwOct!5bRDk73=FHX_^g_LpO#pa5!0~2KBXPf
zNWrbQ!X{N$9N}T6?YPL=;|JC%>ES>CJs*%`y0MS6v*YF09q$*HcnlN0#<u3uVvvMi
z4a$gXLtet9XLFuyTq-%9`F`KX=a=t;$5b$F8~P_kNjb{6KCB?-MKf(dJi@@=V@$kz
zH)D>o*6x|lSvkgdhQt!R<BRw1<!#))MWJN;{4vGxMYb55;6m-~GgciZC?`>;A65GK
zg!`f3cL%-ac%zBvF7tKz!cpN3s}uT7deOrKq|>Sg9_P)fBBfoGBZQ5%?t#oZE|4N%
zAxGjzqR3f~+h@emh%S*0Mq|jb3_=mP_;<_bN954&or4V1S&J{Vst0{zPw>5IDY99u
zp+ZlwOD1X$wxuc4Z`on$UVZ698iXb2JMxR}uOk@MJjx7deh{&>Zt%&pMX|gP!zu%x
zzlp97`yc3Gu^~VyLam~hoU@%8JS@*LW}x?BU0J{;_&NcbSmZ*Sf>H1WBj$PnU=s>}
zP0;c5S}$%<4xq(RKj?sP8gmoWJn>*EJNNwV!p{JH{=C+I%w8xR`dAwwC|kMhp80|2
z<l2Xs=?3=uA76d&?#U=8qJmNHX9WuX5+IhjfZAUvSpQbVqI2tJ*2zHk;k91;Z1-VY
z7wH;$&@CVb87L(HA>LkNLtR!e0^L6-^&>Ut18hh>&H|Jfp5c27NfGD)d>CcabOVYp
zzyn`BFuh`qL;q<-_OX`B8dvEA`@{YV`&W(c<jL1rQ_-4li>_5a|3O(rQt<vG%|zy&
zfPJ-tt!aA$CoxMJ2GkzQ)hJJHMm!B~bAYGqQGp(1bL;$IRk~zasBQVKmz(Z@6h-HW
z9_lT*uX-e=X8fb|%&}JP_a^GD{ZBbi4@mw=11LYusmbE}Tgvt)9jcGI9Fy#EXwjeE
zhye*oU(Ih46fs-I@D_fZ?osT-Ihs0Ye5VO)dE^!Gif2p}S==RJn4>#j@U1p3PY}LH
z%=6XJdi^S5blBx~*wNcfMmi7g5_@)5ejyiLQ-h7M-DYk!XM2S|tYk2UF~$SEQf*`b
zM@j>QPyNQxj~kkzGqtDglHko5Sxw)F9lv7fUwNKJbh?2C!t-!58yer{-ZRmQlE!zD
zTqu(xpea?3gqZ_3q&b~?wr2pzn24U{W#p0Pz5de~(kA>>3~&!nr0OCv)X<$FGpJ4^
z(0uT4rXqaRl-}{>iZiITDex`=&cwi1J?S0fV!HOMqv--iGY4)f>$@f72g!rhd{K#%
zJU_jjGit>*VQ+#uUkm;&*dx{GBe8fF+{XKT;_IEN72b9xVqdieNn@x|)0*V5+Oza@
z*A-Jch%C!bNCd6%dLryjz4!THhWN`RQHwJi<sBbl4R`xv)N}=Bg+HrQ_yc34A=~bJ
z+?Eb)!`9P$6A^Pl(stOg^TvyI8>j3o9dA^vcAauM9kEHq)S(*{(zTQ4Q_XInx@}fl
zCHL72ecJtBbtjT2>){4-xje>>n*vh9eUEhpq&iV|14c<Mq$rA`x7E;n?TqT$=QlSx
z^D?$X6a%`~s4J^K%Qmgjyfw}24y0BuXG8nXYwD5<Z>df^+0aMiJc}K2yL_%*Af_;W
z>y+93+eL-U(`~bPwQG9z-kX)yTOS;`EGA@h6anq2`TKT<pqAlWXNwFeZ0I8ez7&=X
zznSO0b2Nnmv^PMMu7q6B-tYpy9J|j7XtUqE@wGE-o`(Hz6k;AEEf^#T6wtU42}qLy
z?iALJd3csskpQuh2YJI~?9wk+1s}-Heh`DN2h_QefL%I^!90|%>yD@ia3kY(6+EZ@
z%~ySsLHuLvZO+fYTuZ4Rj>GM&<y_f7;%!kR)5cIUgWBGHSPWcs2cs#Qc7-)#V$FtR
z%~|(-wSMI+$me8{0piD2{<AK@$IG~|N2BiEtGpMd)5VPmJ(u2weR1ODt@PwYt;5%|
zFZ)pBh*g?X|AkoS4(uhV)H-;X%gdRUa?P&|y)6U)=Pcf1)!?I4YZ%yWX0_*oR9&5k
zm3G6bCX9$5mQUD3{%)l1qFJM1jo>oI+5o-UiTHyX-VdC($cEe(n0I4m>mzs3L#QB4
zwF>f5$D7Bq>^F8?;OLh!zZ)>#Ovv-q?EgWa_z{6eN0<I_w*F-U>R))4kjw>^Cr?o;
z=zASuWq~p~*m*Ly{1DYJ2foxI0Df}}-b#K(iu~r~cah{*6MyenU>-&SG|ZnxLooOh
z6M%-o<V|0$`8${-Zz83_NPMYM1!e&FZ*TGJhPyv*%>V6||6{Q|7VL8%Y0_IC@$YUw
z7t?;;#Gcl?tT@iq4s7RoVHI0<E-RkjE}s#0r=hU<>9sR(RXEEL(Jr;>{nM+K*MoSt
zgs$#(oXe!h^bN^)JDhpdm5mJ~iAD;U7KoZ^c{{U!ydXU@;={1?E$idYN}kJk3Z6y}
zH><$PR>se3z}mGu&$)v*{5%Nt!B^#Ly@lg55tWV~90?jamOR!kZjtL(@AwWFER2I*
z|JHqolID}zL%(8DS@}F8qil;Gt4{zE;Q({nDtt+yS|qBZu{6V|hgUm>`#0SRd%N!h
z#<!G|S!*e}I)Qfqgm{EYox$`L@1zI0HTaC|$he@#hFr<In3Z;Pt6KH>3C;iHHOJ^Y
zha9NT0hPB>+j{&^E7*TxWQ(7>XIUb3G3X3KO$=y^icJLKzJ2-MD(mx=_mlJ4rr0E=
z2nDiDHpDt@&XTx6E1bI~csq9lyv@Tpjb}+r&<ec?R4)LqegI&J0ARJD^YbtLN3So;
zPiL{#^HbhA%FFTKo4$;J_IdTBFD-E2Y2-r*di0pXZ)x3G_TtV4-YU7hftRrrAw2_q
zt)ff;>=OFO&UzJh!t=&Yx5^{=tRKp+NbI`HccWat?ll3)TtUSKpUc)XwcSA(Z5p30
zn?_wn#fWl@rUbVm1?k~AmE&Gn=^wNT2tonFJ-iqZTVf3S;m+rl#tmgV>dm*VJK`((
zP_{UhkaLG&s&0Hu-uX$$T2Vd@^BCl&3ZI2^v_aEo1NqS=cuRc?Why5RK2-lek89&I
zBkpVyQMH6UVH<d#@aRHqyf;I>a>i8L{-;PJef!?pD^OhqX@x^p=V#QFLpym&T7@Tw
zLnD`7H}_}s7M2FB(-b9iad~g;p{4A&aVrae@O_gJlQ}b?w!<F|U>b3XiOwHhd3}5!
zMci{0$PDCr!R@w{2aEHYQ8PU4aB%#Mk1Gx&m5{^O&=!2>dzbh>4SBysqWS-x-R}3T
zN89?*UV_~(0D?~dX1PLh?2Fg~I$V9RqkDk5N7_%hMtX_{9WUR!p)^;`oCTyGJP^UZ
zLtX%|K$j?0noZs#@Vy13urF7e2fU;(^dLT<b<|WH$pE*(Q0oQzqkrs+|B-sozsniW
zB^XC<w?SE+jH>X|m5)v%ko!9GQB1F+o-7;*WQ_;mD!Tvc(;JUeyVk8i6irSyzy?O`
zvkikFP+QvyRf6cq#6EN~IImFl$!QrIvfB(cq^?YLsRI&Y@=~nFq^m*ws`vvh&~|Z@
z5)7?soMS>lLP9j{?_-R!dz1e%Ys_78zTWd}hZj0A`7wgi*j}kYr}Iw5Y#)9B=)-rW
z&?Ob=6+EBDt@39Z(g|=7zZGcc2V_tR)4qm=V)03l-~}c?x}DM%qZWg1d^sSk1prAj
zrxa5}08Q;ipkr(SXu$M~z=uNK<pwyl*{=ReAV43g#Z%Xr)8ar!zYr*Q=RRRWZT7@Y
zUDTOMEFah#(1Bq{Y``-4BAJdq@8{3ir}lRtD)CH*_UX~)q2cs<h90P(FzfiEZV8GD
zp7+kd!9Tiy>pQbUh`glh_ia7)crn}9km>a5KOvQ5VlK&Q1mtMSkP}ZGRrqwqMmeM8
z(<-jGj0<e&%tVS5stJ?NN1;@?p9M`cH=RTXwS|zEve;)ep9&w|a~x5-31P{{H!*M3
z-h#F0LJdK0vaWK}ChzMRErUE=#kzq4_y&hyLwbN+QiaW_iN!^&!52AkdI2LxPk{|3
zy@(1&5(aF>`bZsvgFycN3W$Vf@p(gZ@csHcu*pF@?KL#ci!KMH^m9zDS@#EoH3dU&
zMp3hTWbqZbAXBnJF;DnvbB2rovDk)!#PkB7E=3by4e%=wt--|cwfL?ZAXAZ!LF&eW
z4kB3GEx(*00px>DAZ-GSS^ToShs6g-#@Aa?`kQWPOLS7g@nprUS0}IOOPk0M+jp)r
z??ShGpRtTOSWlYR|0-hm{4Ii6!CfC2bT8&IRzgcH(L=<dIvevOI(nc`&~?e^V>!FA
zyU+cmPHRq)qQAz2#{m4yP=h}Flv*1#1y)_HPNGB($bW7Rbel4~a#}@T6x}6PN+(<;
zTiC_x=-BlGJ9NXz4qYpe@5{;{FMhEeFd5$%kMOP8bY=Yvfc?KUUfj24tKf;Tu*J`}
z-Tay4=oPgBZ0y_l#LSyX$dg;FCj#e2$6d*EFS^zf+gMJl<=)yVgX0nnPyD2Yh;Nkd
z0o4$b*zD)nCPePSm?Y<QOUJE`+l{Swk%D&|SzLr{9DifGcPXw<3PB%H1n1hvKEug$
z>|<ivt+mfdpMM$FTbiNhTDY~Ow7&HOUaI9U@rWPh3;!-A{&%0vi|zxn%GPf+ENJ+@
zyTY%ZkAk+`*3s=?wn?w>w@KI0{iG%VL-U}+hHIxPS21tRV#VG+z>3&)DU|s2Yk5`T
z<Rh=*^1g0BK%!W2l&<>?_=de0me>YdF4i2bY#lW}ju`}d$3pIq5B(*({*ITCV6f4B
zIS7=qJKc>+ZT)QVU{|t<K=9nIWF6D-Ki(4b>)^llOrPo8{*<_6qAFf)t%`SnPynMI
zVN+a$oL&uf4YAzKSxau@&(&bL-(Y^B)TRVxMBAOYa8mEEShktmHO;$xcL4NX6bD+v
z_-Yp-T_qaqIZdIoi8F6VU<T^ky3hl>5Iq1E#EOH6o0x)cd+i3VB+&J6SkSBc7}P-g
z`zZ7~Gd`eC=I2@e*Dc{ZlBc6kJtUv?hB}!%`vX2@+Sf0ItPk6FRlsG*9}6di^iBPM
zgN+NvFEd)k+?K+RbH`$tvz^WQ4}j=c3=<+|L)8yTCo5R74_8t9D|NX{5{u$LPMrq7
zDxy+fjY_-tih3+cpnc4lBZJYQ(KEqv>GqsU&r%Pwq2-I+82yy@RxJ}$<urfkgh$J+
zg-LWa)VJ=L6$EDMa%tz8kspyWydWyZJ|^8l4-l`mh}CHwZkN{HVvw<a*p6b-c)&nc
z&}c>EO}Q)qbWuBtsO75Ks%Z~8WMoP)rDo6tOR>Rl_=D`~&13F1lHMCj(fA>?y>hH*
z_q_PB`m<eblNJs5<+`$p242_kFZL!_Pmx!=uq?Lp1GuBM8=tRki?1l>fjNk<im#Sz
z$P|Ho>`FO95-^yY^=zmRgk`?USrVXyqA$SHUqe(+bPJ~ajw+_t0Z;%45CU;fb2I>f
zn~HCf1e>vY5xKo24>lC!2x9z$`$#4N!?ZzB%fyM}>j6vfbpTrfVvszsZ#rSgSim+s
zFjPL!>T~wzt^93PX)YhE_TVVKoLv605eX*9^5f+3x^s73Cb>EZ&6~;~k3g}(2%itK
zO3;M^8DTxF_#601{ryuYuw5yJtC$t7gXy_f3g(i0eJ4-)w~OWtC!mHwQnC-)DZzJa
z!=G$jp8awxyFfsKzbZ?>h$l#_;ZIBQvpP8s0CUk>8U-VQHx3y!HMoyMR?BTv3s!Ma
zgtCou1TkqT;zS2IhSi4usMa-6p3^7^i#VB@FOu)q4!+aFs4uCVAmo@VW~yZD^4Na+
zI#MqSQ|GI#`J=$HnDyvbQFx3#;f+>uedQkfVC~o=ulga?O)eAxYufd&_Hs;%8i92)
zd&$>28coJN)JDM4cNrsuE<hfymfxS2v{__0dtts#paEq4g9^lt$|HZ}JVZNTN!cVp
z(k1dlbGNeydE{V8@dkozDxQii*6<9iEpHsed!s@91SOZLSe1m&^QV<FXBt3Wyps*_
zLSww>YLH~;dGx^EgLtYEJ`hEX$v(q|bS5!$QB0mM@*Bkmol6#FuA*Ts;@o7Do)kJ~
zByojDF3k-ymgsoX{l#W~qFnI%YNlPslFMEl7*6NchW8Wdt<;_r$z=HJCk~7+AfE#)
zo4b=ZJ(UWu@&Txsb&FcX1CssCcrd>m33MUQ+hk^oDXP7!%8#JBE8K^Y1@`hD7$wnn
z+HPh;L@yMR7u9ZCPCb*`RPUdS!5@BF%&Ya%_N>pItXys}^XlOWo`;pcZh`st&m3c_
zL#Q*9qNbzIv<%{diyt_l08bL@v>ewcbPFV-X@t;+HRBDg2P*WIs@+!PEtXUyByK49
z)AON~NA9QAJjV0(j)wbB?#$3$cLlp{-c=Y5d6OEN4j0E=b*LO?T<o|+4!`8@4@oZf
uF**R%{~vJLzvAdW|Id%foj>jL(@sBq;HMA#^nsr~@Y4tWvp#@eH~v4UV03Q)

literal 0
HcmV?d00001

diff --git a/src/components/wang.vue b/src/components/wang.vue
index 3417cb4..a61a3ef 100644
--- a/src/components/wang.vue
+++ b/src/components/wang.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="editor-container">
-    <!-- <router-link to="/WangG2">Wang2 2页面</router-link>
-    <router-link to="/WangG3">Wang3 3页面</router-link> -->
-    <!-- <router-link to="/WangG4">Wang34 4页面</router-link> -->
-    <!-- 左侧操作框 -->
-    <!-- <div  class="leftDiv" v-if='isLoadXml' :style="{'maxHeight':leftHeight+'px','minHeight':'100px'}" >  -->
-   <!-- <a href="/#/wangG2" target="_blank">asdasda</a> -->
-    <div  class="leftDiv" v-if='isLoadXml'  > 
+  <div style="height:100%;width:100%;">
+  <el-container style="height:100%;width:100%;">
+    <el-aside 
+      :width="leftWidth + 'px'" 
+      style="position: relative; overflow: hidden;"
+    >
+    <div class="drag-handle" @mousedown="startDrag"></div>
+        <div  class="leftDiv" v-if='isLoadXml' style="width:100%;"  > 
       <div id='navMain'>
         <!-- 操作栏 -->
        <div class="operation-buttons">
           <!-- 节点搜索框 -->
-          <div style="margin:5px auto;">
+          <div style="margin:5px auto;width:100%;">
               <el-input
               placeholder="输入节点名称搜索"
               v-model="searchText"
@@ -36,7 +36,11 @@
             <p @click='clearNodeState' :title="getBookName">{{getBookName}}</p>
             <img @click='editBookName' class='iconImgMulu' title='编辑书名' src="../assets/img/bianji.png"   alt="">
           </div>
-          <!-- 目录结构树 -->
+
+          <el-scrollbar style="">
+            <!-- 滚动内容区域 -->
+            <div class="scroll-content">
+                 <!-- 目录结构树 -->
             <el-tree
               class="elTree elTreeMain gd"
               ref="tree"
@@ -88,39 +92,63 @@
                   <i class="el-icon-warning changeState" @click.stop="handleModify(data)"   v-if="showModifyBtn && hasMinorVersion01(data)" :style="'font-size: 14px; padding: 0 5px 0 5px'"/>
                   <span :title="data.id + '-' + data.name" :class="{ 'highlight': isHighlight(data) }">
                     {{ data.name }}
-                  </span>
-                  <!-- （关键）叶子节点同样条件显示【修改】 -->
-                  <!-- <span 
-                    class="modify-btn"
-                    v-if="showModifyBtn && hasMinorVersion01(data)"
-                    @click.stop="handleModify(data)"
-                  >
-                    【修改】
-                  </span> -->
+                  </span> 
                 </div>
               </template>
             </span>
           </el-tree> 
+            </div>
+          </el-scrollbar>
+         
         </div>
       </div>
       <!-- <div id='nav'>
         <nav-temp />
       </div> -->
     </div>
-    <!-- 右侧容器 -->
-    <div class="rightDiv">
+    </el-aside>
+    <el-main style="">
+        <div class="rightDiv">
         <div class="bName" :title="getBookName">{{getBookName}}</div>    
         <!-- 编辑框 -->
         <!-- :style="{height:editorHeight+'px'}" -->
+         <!-- <el-button 
+          type="primary" 
+          icon="el-icon-s-data" 
+          @click="countDomNodes"
+          style="margin: 5px;"
+        >
+          统计DOM节点数量
+        </el-button> -->
         <!-- :class="{ editor2Opacity: dialogVisibleNav||dialogVisibleNavDel|| dialogVisible||dialogVisibleImg||dialogVisibleRight||dialogVisibleTips||dialogVisibleBland||dialogVisibleHistory||dialogVisibleTips2||editBookNameDialog }" -->
         <div id="editor" v-show='currentNode' :class="{ editor2Opacity: dialogVisibleNav||dialogVisibleNavDel|| dialogVisible||dialogVisibleImg||dialogVisibleRight||dialogVisibleTips||dialogVisibleBland||dialogVisibleHistory||dialogVisibleTips2||editBookNameDialog }"  ref="editor" ></div>
          <!-- 提示信息 -->
         <!-- <div class="paAutoStyle" v-show="!currentNode && isLoadXml">请打开所要编辑的的章节目录</div>
         <div class="paAutoStyle" v-show="!isLoadXml">请加载所要编辑的文档目录</div> -->
     </div>
-
+    </el-main>
+  </el-container>
+  <div class="paAuto paAutoStyle" v-show="!isLoadMsg">请加载有需编辑的项目</div>
  
 
+  <!-- 统计结果弹窗 -->
+  <el-dialog
+    title="DOM节点统计结果"
+    :visible.sync="countDialogVisible"
+    width="40%"
+  >
+    <div class="statistics-result">
+      <p>目标容器: {{ countTarget }}</p>
+      <p>总DOM节点数量: <span class="count-number">{{ domCount }}</span></p>
+      <p>元素节点数量: <span class="count-number">{{ elementCount }}</span></p>
+      <p>文本节点数量: <span class="count-number">{{ textCount }}</span></p>
+      <p>注释节点数量: <span class="count-number">{{ commentCount }}</span></p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="countDialogVisible = false">关闭</el-button>
+    </span>
+  </el-dialog>
+
     <!-- 历史弹窗 -->
     <el-dialog
       title="历史版本"
@@ -390,7 +418,7 @@
 
   <!-- 切换目录时候未保存提示 -->
     <el-dialog
-      title="提示"
+      title="提 示"
       :visible.sync="dialogVisibleTips2"
       width="50%"
       class="custom-dialog"
@@ -509,7 +537,6 @@
         <el-button type="primary" @click="editBookFun(true)">修改</el-button>
       </span>
     </el-dialog> 
-
   </div>
 </template>
 
@@ -518,11 +545,20 @@ import WangEditor from 'wangeditor';
 import brImg from '../assets/img/br.png'; 
 import '../assets/css/style.css'
 export default {
-  name: 'RichTextEditor',
+  name: 'WangEditor',
   components: {
   },
   data() {
     return {
+      countDialogVisible: false,
+      domCount: 0,
+      elementCount: 0,
+      textCount: 0,
+      commentCount: 0,
+      countTarget: '',
+      leftWidth: 380,
+      isDragging: false,
+      isLoadMsg:false,
       minLevel:'',
       maxLevel:'',
       maxPermission:'',
@@ -903,19 +939,20 @@ export default {
       currentImage: '',//暂无用
       scale: 1,//暂无用
       rotation: 0,//暂无用
-      isDragging: false,//暂无用
       startX: 0,//暂无用
       startY: 0,//暂无用
       translateX: 0,//暂无用
       translateY: 0,//暂无用
       containerHeight: '90vh', //暂无用 动态控制高度
       //查看图片end
-      oldSelector:[//基础标签模块
-        'div','code','hr','br','h1,h2,h3,h4','p','img','table','a','ul','ol','blockquote','pre',
-      ],
-      newSelector:[//替换后的标签模块
-        'pDiv','pCode','pHr','pBr','pTitle','pDiv','pImg','pTable','pA','pUl','pOl','pBlockquote','pPre',
-      ],
+      // oldSelector:[//基础标签模块
+      //   'div','code','hr','br','h1,h2,h3,h4','p','img','table','a','ul','ol','blockquote','pre',
+      // ],
+      // newSelector:[//替换后的标签模块
+      //   'pDiv','pCode','pHr','pBr','pTitle','pDiv','pImg','pTable','pA','pUl','pOl','pBlockquote','pPre',
+      // ],
+      newSelector:[],
+      oldSelector:[],
       tempDivData:{//当前富文本str
         innerHTML:'五'
       },
@@ -1039,7 +1076,7 @@ export default {
     //接收富文本内容信息
     FrontLoadDM_g1(e) {
          console.log("加载文档数据 1111")
-      console.log('FrontLoadDM 参数接收111:',e,e.detail)
+      // console.log('FrontLoadDM 参数接收111:',e,e.detail)
       // this.editorShow = true;
 
       let xmlContent = e.detail.trim();
@@ -1054,10 +1091,10 @@ export default {
       // console.log("xmlContent",xmlContent)
       const parser = new DOMParser()
       const xmlDoc = parser.parseFromString(xmlContent, "text/xml")
-      console.log("xmlDoc",xmlDoc)
+      // console.log("xmlDoc",xmlDoc)
       const contentNodes = xmlDoc.getElementsByTagName('content')[0];
-      console.log("xmlDoc.getElementsByTagName('content')",xmlDoc.getElementsByTagName('content'))
-      console.log("contentNodes",contentNodes)
+      // console.log("xmlDoc.getElementsByTagName('content')",xmlDoc.getElementsByTagName('content'))
+      // console.log("contentNodes",contentNodes)
       
 
        const rdfDescription = xmlDoc.querySelector('rdf\\:Description, Description');
@@ -1076,7 +1113,7 @@ export default {
             qualityVerification: this.getNodeValue(rdfDescription, 'dc\\:qualityVerification, qualityVerification'),
             permission: this.getNodeValue(rdfDescription, 'dc\\:permission, permission')
           };
-          console.log('XML解析成功', this.form);
+          // console.log('XML解析成功', this.form);
         }else{
           this.form = {
               name: '',
@@ -1092,10 +1129,10 @@ export default {
             console.log("目录解析不成功 置空",this.form)
         }
       if (contentNodes) {
-        console.log("处理前",contentNodes.innerHTML)
+        // console.log("处理前",contentNodes.innerHTML)
         let htmlContent = this.convertXmlContentToHtml(contentNodes.innerHTML)
        let htmlContent2 = this.completeModel3DTags(htmlContent)
-       console.log("处理后",htmlContent2)
+      //  console.log("处理后",htmlContent2)
        const htmlContent3 = this.replaceModel3dToImg(htmlContent2);
        // this.editor.txt.html(htmlContent)
         //处理过后再导入
@@ -1481,7 +1518,7 @@ export default {
         if(src){
           const imgUrl = src?src:'http://localhost:5432/DM_Material/a1.jpg';
           console.log("地址",src,imgUrl)
-          this.editor.cmd.do('insertHTML', `<img src="${imgUrl}" style="width: 100%;" alt="图片">`)
+          this.editor.cmd.do('insertHTML', `<img src="${imgUrl}" width="50%" alt="图片">`)
         }
       } 
     },
@@ -1509,55 +1546,7 @@ export default {
       // 替换标签名，保留所有属性
       return htmlString.replace(regex, '<img$1class="$2model3d$3"$4>');
     },
-
-    
-  //  // 插入视频
-  //   insertVideo() {
-  //     // const videoUrl = 'http://youneed.top:10017/uploads/video.mp4'
-  //     const videoUrl = 'https://r1.realme.net/general/20250530/17485780109181ed6767541a64e7d90626e0a3fd1aaae.mp4?type=video/mp4';
-  //     const videoId = `video-${Date.now()}`
-      
-  //     // 创建视频HTML
-  //     const videoHtml = `
-  //       <div class="video-wrapper" data-video-id="${videoId}">
-  //         <video controls width="50%" style='margin:auto' data-video-id="${videoId}">
-  //           <source src="${videoUrl}" type="video/mp4">
-  //         </video>
-  //         <div class="video-controls" style='display:none;'>
-  //           <span class="video-delete" data-video-id="${videoId}">× 删除</span>
-  //         </div>
-  //       </div>
-  //       <p><br></p>
-  //     `
-      
-  //     // 使用编辑器命令插入
-  //     this.editor.cmd.do('insertHTML', videoHtml)
-      
-  //     // 添加删除事件监听
-
-  //      this.$nextTick(() => {
-  //       const btn = document.querySelector(`button[data-video-id="${videoId}"]`)
-  //       if (btn) {
-  //         btn.onclick = (e) => {
-  //           e.preventDefault()
-  //           this.deleteVideoById(videoId)
-  //         }
-  //       }
-  //     })
-
-
-  //   },
-    
-
-
-  //    // 根据ID删除视频（修正版）
-  //   deleteVideoById(videoId) {
-  //     const container = document.querySelector(`.video-container[data-video-id="${videoId}"]`)
-  //     if (container) {
-  //       container.remove()
-  //       this.editor.txt.html(this.editor.txt.html()) // 刷新编辑器
-  //     }
-  //   },
+ 
      dmcTable() {
       if(this.dmcHint){
         this.dmcHint = false;
@@ -2537,18 +2526,23 @@ export default {
 
        //富文本内容打标签
     dataXmlProcessing(type,saveId) { 
-        let html = this.editor.txt.html()
-        console.log('保存内容',html);
-        // 正则表达式：匹配img、audio、video标签的src属性
-        // 支持三种标签：<img ...>、<audio ...>、<video ...>
-        // 捕获组1: 标签名和src="之前的部分
-        // 捕获组2: 提取文件名（最后一个/后面的内容）
-        // 捕获组3: 保留"及之后的部分
-        const reg = /(<(img|audio|video)[^>]+src=")[^"]+\/([^"]+)("[^>]*>)/gi;
+        let html_1 = '';
+        let html = '';
+        if(this.editor){
+          html = this.editor.txt.html()
+          console.log('保存内容',html);
+          // 正则表达式：匹配img、audio、video标签的src属性
+          // 支持三种标签：<img ...>、<audio ...>、<video ...>
+          // 捕获组1: 标签名和src="之前的部分
+          // 捕获组2: 提取文件名（最后一个/后面的内容）
+          // 捕获组3: 保留"及之后的部分
+          const reg = /(<(img|audio|video)[^>]+src=")[^"]+\/([^"]+)("[^>]*>)/gi;
+          
+          // 替换为：src="文件名"
+          html_1 = html.replace(reg, '$1$3$4');
+          console.log('解析地址：',html_1)
+        }
         
-        // 替换为：src="文件名"
-        let html_1 = html.replace(reg, '$1$3$4');
-        console.log('解析地址：',html_1)
 
         // const reg2 = /(<(img|audio|video)[^>]+src=")(?!http:\/\/)([^"]+)("[^>]*>)/gi;
         // let jc = 'http://localhost:5432/';
@@ -2565,10 +2559,63 @@ export default {
         this.xh(this.oldSelector,this.newSelector,type,saveId);
     },
      
+  countDomNodes() {
+      // 重置计数
+      this.domCount = 0
+      this.elementCount = 0
+      this.textCount = 0
+      this.commentCount = 0
 
+      // 这里可以改为你需要统计的容器选择器
+      // 例如: '#editor' 或 '.tree-container' 或 'body'
+      const targetSelector = '#editor'
+      const container = document.querySelector(targetSelector)
+      
+      if (!container) {
+        this.$message.error('未找到目标容器')
+        return
+      }
+
+      this.countTarget = targetSelector
+      // 递归统计所有节点
+      this.traverseNodes(container)
+      // 显示结果弹窗
+      this.countDialogVisible = true
+    },
+
+    // 递归遍历节点并计数
+    traverseNodes(node) {
+      if (!node) return
+
+      // 总节点数+1
+      this.domCount++
+
+      // 分类计数
+      switch(node.nodeType) {
+        case 1: // 元素节点
+          this.elementCount++
+          break
+        case 3: // 文本节点
+          // 过滤空白文本节点
+          if (node.textContent.trim()) {
+            this.textCount++
+          }
+          break
+        case 8: // 注释节点
+          this.commentCount++
+          break
+      }
+
+      // 递归处理子节点
+      if (node.childNodes && node.childNodes.length) {
+        Array.from(node.childNodes).forEach(child => {
+          this.traverseNodes(child)
+        })
+      }
+    },
      // XML文件标签剔除
      restoreContentXh(html) { 
-       console.log("XML初始内容：",html)
+      //  console.log("XML初始内容：",html)
       if (html) {
         this.tempDivData = document.createElement('div')
         this.tempDivData.innerHTML = html
@@ -2581,7 +2628,7 @@ export default {
           dmTitles.forEach(dmTitle => {
             // 获取dmTitle的子节点
             const children = Array.from(dmTitle.childNodes)
-            console.log("剔除标签:",dmTitles,children)
+            // console.log("剔除标签:",dmTitles,children)
             
             // 在dmTitle之前插入所有子节点
             children.forEach(child => {
@@ -2589,12 +2636,12 @@ export default {
             })
             // 移除dmTitle
             dmTitle.parentNode.removeChild(dmTitle)
-              console.log("剔除标签移除:",dmTitle,'替换成',dmTitle)
+              // console.log("剔除标签移除:",dmTitle,'替换成',dmTitle)
 
           })
         }
         console.log('内容还原完成！dmTitle标签已被移除')
-        console.log("tempDiv.innerHTML",this.tempDivData.innerHTML)
+        // console.log("tempDiv.innerHTML",this.tempDivData.innerHTML)
         
         
         const reg2 = /(<(img|audio|video)[^>]+src=")(?!http:\/\/)([^"]+)("[^>]*>)/gi;
@@ -2613,7 +2660,7 @@ export default {
         let html_2 = this.tempDivData.innerHTML.replace(reg2, `$1${jc}$3$4`);
       //  html_2 = this.modelToImg(html_2);
        
-       console.log('还原地址：',html_2) 
+      //  console.log('还原地址：',html_2) 
         this.editor.txt.html(html_2)
         this.contentXmlStr = this.editor.txt.html();
       }else{
@@ -2631,7 +2678,7 @@ export default {
 
     // XML文件标签剔除
      restoreContentXh2(html) { 
-       console.log("XML初始内容：",html)
+      //  console.log("XML初始内容：",html)
       if (html) {
         this.tempDivData1 = document.createElement('div')
         this.tempDivData1.innerHTML = html
@@ -2644,7 +2691,7 @@ export default {
           dmTitles.forEach(dmTitle => {
             // 获取dmTitle的子节点
             const children = Array.from(dmTitle.childNodes)
-            console.log("剔除标签:",dmTitles,children)
+            // console.log("剔除标签:",dmTitles,children)
             
             // 在dmTitle之前插入所有子节点
             children.forEach(child => {
@@ -2652,12 +2699,12 @@ export default {
             })
             // 移除dmTitle
             dmTitle.parentNode.removeChild(dmTitle)
-              console.log("剔除标签移除:",dmTitle,'替换成',dmTitle)
+              // console.log("剔除标签移除:",dmTitle,'替换成',dmTitle)
 
           })
         }
         console.log('内容还原完成！dmTitle标签已被移除')
-        console.log("tempDiv.innerHTML",this.tempDivData1.innerHTML)
+        // console.log("tempDiv.innerHTML",this.tempDivData1.innerHTML)
         
         
         const reg2 = /(<(model3d|img|audio|video)[^>]+src=")(?!http:\/\/)([^"]+)("[^>]*>)/gi;
@@ -2677,8 +2724,8 @@ export default {
         // 这里假设原路径可能包含DM_Material目录，如果不需要可以去掉
         let html_2 = this.tempDivData1.innerHTML.replace(reg2, `$1${jc}$3$4`);
       //  html_2 = this.modelToImg(html_2);
-       console.log("大豪科技等哈时间",this.viewLis)
-       console.log('加载还原地址：',html_2)  
+      //  console.log("大豪科技等哈时间",this.viewLis)
+      //  console.log('加载还原地址：',html_2)  
 
       let processedL = this.hintFun(html_2)
 
@@ -2855,7 +2902,6 @@ export default {
       }else{
         return true
       }
-      
     },
     
 
@@ -3030,15 +3076,30 @@ export default {
       this.translateY = 0
     },
     //测试 开始拖动
-    startDrag(e) {
-      this.isDragging = true
-      this.startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX
-      this.startY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY
+  startDrag(e) {
+      this.isDragging = true;
+      const startX = e.clientX;
+      const startWidth = this.leftWidth;
       
-      document.addEventListener('mousemove', this.dragImage)
-      document.addEventListener('touchmove', this.dragImage)
-      document.addEventListener('mouseup', this.endDrag)
-      document.addEventListener('touchend', this.endDrag)
+      const handleMouseMove = (e) => {
+        if (!this.isDragging) return;
+        const diffX = e.clientX - startX;
+        // 限制最小宽度
+        const newWidth = Math.max(100, startWidth + diffX);
+        // 限制最大宽度
+        this.leftWidth = Math.min(500, newWidth);
+        this.getWindowSize();
+      };
+      
+      const handleMouseUp = () => {
+        this.isDragging = false;
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+      
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      e.preventDefault();
     },
     //测试 拖动图片
     dragImage(e) {
@@ -3072,35 +3133,34 @@ export default {
         `,
         cursor: this.isDragging ? 'grabbing' : 'grab'
       }
-    }, 
-    gengxin() {
-      if(this.currentNode){
-        const element = document.querySelector('.w-e-toolbar')
-        const container = document.querySelector('.w-e-text-container');
-        const rightDivHeight = document.querySelector(".rightDiv").scrollHeight;
-        container.style.height = (rightDivHeight -element.scrollHeight - 86 ) +'px' ;
-        console.log("内容高度", (rightDivHeight -element.scrollHeight - 86 ) +'px')
-      }
-      // const heightPx = (window.innerHeight - 240) + 'px';
-      // console.log("富文本框高度",heightPx)
-      //  document.getElementsByClassName('w-e-text-container')[0].style.height =heightPx;
-      //  document.getElementsByClassName('w-e-text-container')[1].style.height = (window.innerHeight - 240) + 'px' ;
-    },
+    },  
     //获取屏幕尺寸
     getWindowSize() {
       // this.windowW = window.innerWidth
       // this.windowH = window.innerHeigh
       // t
-       this.leftHeight = window.innerHeight - 200;
-       this.editorHeight = window.innerHeight - 250;
+      //  this.leftHeight = window.innerHeight - 200;
+      //  this.editorHeight = window.innerHeight - 250;
 
       if(this.currentNode){
       const element = document.querySelector('.w-e-toolbar')
        const container = document.querySelector('.w-e-text-container');
        const rightDivHeight = document.querySelector(".rightDiv").scrollHeight;
-       container.style.height = (rightDivHeight -element.scrollHeight - 86 ) +'px' ;
-       console.log("内容高度", (rightDivHeight -element.scrollHeight - 86 ) +'px')
+       container.style.height = (rightDivHeight -element.scrollHeight - 80 ) +'px' ;
+       console.log("内容高度2", (rightDivHeight -element.scrollHeight - 80 ) +'px')
       }
+
+
+
+      this.windowH = window.innerHeight;
+      this.leftHeight = window.innerHeight - 200; // 检查此值是否合理
+      this.editorHeight = window.innerHeight - 250;
+      
+      // 强制刷新滚动条
+      this.$nextTick(() => {
+        const scrollbar = this.$refs.scrollbar; // 需给 el-scrollbar 添加 ref="scrollbar"
+        if (scrollbar) scrollbar.update();
+      });
     },
     // 尺寸变化时的处理函数
     handleResize() {
@@ -3418,6 +3478,10 @@ export default {
     },
     //保存当前DMC信息
     saveNowDmc2(type) {
+         if(this.editor){
+          const html4 = this.editor.txt.html();
+         console.log("保存内容4",html4)
+        }
       console.log("保存时候点击",this.lastClick)
       if(type == 'save'){
           console.log("保存时候点击 this.currentNode",this.currentNode,this.currentNode.minorVersion)
@@ -3430,9 +3494,10 @@ export default {
           console.log("保存时候点击 treedata",this.treeData)
          this.catalogueAnalysis(this.treeData);
         
-
         this.generateXml(false,this.lastClick);
-        this.contentXmlStr = this.editor.txt.html();
+    
+       
+         this.contentXmlStr = this.editor.txt.html();
         // const targetNode = this.findNodeById(this.treeData, this.lastClick);
         //   if (targetNode) {
         //     targetNode.minorVersion = '01';
@@ -3534,18 +3599,18 @@ export default {
       return result;
     },
     //目录节点点击
-    handleNodeClick(data) {
-      this.currentNode = data;
+    handleNodeClick(data) { 
+    // this.currentNode = data; //有问题
       this.navIsAdd = ''; 
      console.log("这一次点击的节点信息",data);
       console.log("上一次点击的时候的ID",this.lastClick)
       console.log("这一次点击的时候的ID",this.nowClick)
       if(this.lastClick == this.nowClick.id){
+        this.currentNode = data;
         this.nowClick = data;
-        this.lastClick = data.id;
-        // this.generateXml(false);
-        // this.catalogueAnalysis(this.treeData);
-      }else{
+        this.lastClick = data.id; 
+      }else{ 
+     
         console.log("中中中中中",this.lastClick,this.dmcIsChange())
         if(this.lastClick&&!this.dmcIsChange()){
           this.dialogVisibleTips2 = true;
@@ -3559,7 +3624,7 @@ export default {
             this.$refs.tree.setCurrentKey(this.lastClick);
           });
         }else{
-      
+           this.currentNode = data;
           const target = this.domNameStr[3];
           // 假设需要替换的格式是 "前缀_xxx_yy"，其中xxx是3位，yy是2位
           // 先找到最后两个下划线的位置
@@ -3596,8 +3661,9 @@ export default {
         //   this.loadFWBFile(this.getDmName);
       } 
       console.log("当前节点点击",data);
-      this.getWindowSize();
-      this.gengxin();
+      setTimeout(() => {
+        this.getWindowSize();
+      }, 30); 
       // this.$sendToDotNet('GetFilePath','PMC',data.id,'');
 
     },
@@ -3666,6 +3732,7 @@ export default {
           this.catalogueAnalysis(this.treeData);
           // this.$sendToDotNet('SaveFile','PMC',newNode.id,JSON.stringify(this.currentNode));
           //创建目录时候同时创建一个空DM文件
+          console.log("创建目录时候同时创建一个空DM文件")
           this.generateXml(true);
 
          
@@ -3934,14 +4001,14 @@ export default {
 
     //解析目录节点数据
     generateTreeData(xmlContent) {
-      console.log("加载XML解析内容 初始化内容",xmlContent)
+      // console.log("加载XML解析内容 初始化内容",xmlContent)
       // 1. 解析XML
       const parser = new DOMParser();
       const xmlDoc = parser.parseFromString(xmlContent, "text/xml");
-       console.log("加载XML解析内容 初始化XML",xmlDoc)
+      //  console.log("加载XML解析内容 初始化XML",xmlDoc)
       // 2. 获取根节点（content下的所有pmEntry）
       const contentNode = xmlDoc.querySelector("content");
-      console.log("加载XML解析内容 content",contentNode)
+      // console.log("加载XML解析内容 content",contentNode)
       const rootPmEntries = contentNode ? Array.from(contentNode.children).filter(node => node.tagName === "pmEntry") : [];
       
 
@@ -5153,7 +5220,7 @@ created() {
     window.addEventListener('SendProjectName', (e) => {
       this.domNameStr[1] = this.removeQuotationMarks(e.detail);
       console.log('获取项目文件夹名子：',this.domNameStr,e,e.detail)
-
+      this.isLoadMsg = true;
     })
      
   
@@ -5208,4 +5275,24 @@ created() {
     // window.addEventListener('handleMessageFromDotNet', this.fun1)
   }, 
 }
-</script>  
\ No newline at end of file
+</script>  
+<style scoped>
+.drag-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+  /* background-color: #aaa; */
+  background-color: rgba(0,0,0,.1);
+  z-index: 2;
+}
+
+.drag-handle:hover {
+  /* background-color: #666; */
+}
+.el-main{
+  padding:0 10px ;
+}
+</style>
\ No newline at end of file