From ce347a77c13081c48c26877d21b095b211cf4743 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Mon, 20 Jan 2025 10:03:22 +0800
Subject: [PATCH] tijiao

---
 src/assets/img/deleteComment.png              |  Bin 0 -> 2287 bytes
 src/assets/img/selectComment.png              |  Bin 0 -> 1180 bytes
 src/assets/img/solveComment.png               |  Bin 0 -> 2243 bytes
 src/components/common/Header.vue              |  722 ++++++------
 src/components/common/Header2.vue             |  403 +++++++
 src/components/common/Home.vue                |   50 +-
 src/components/common/Sidebar.vue             |    7 +-
 src/components/common/langs/en.js             |    4 +
 src/components/common/langs/zh.js             |    4 +
 src/components/page/GenerateCharts.vue        |  400 ++++---
 .../page/components/table/comment.vue         | 1022 +++++++++++++++++
 src/components/page/components/table/word.vue |  662 ++++++++---
 .../components/table/wordHtmlTypesetting.vue  |   19 +-
 src/main.js                                   |    2 +
 src/router/index.js                           |    3 +-
 15 files changed, 2565 insertions(+), 733 deletions(-)
 create mode 100644 src/assets/img/deleteComment.png
 create mode 100644 src/assets/img/selectComment.png
 create mode 100644 src/assets/img/solveComment.png
 create mode 100644 src/components/common/Header2.vue
 create mode 100644 src/components/page/components/table/comment.vue

diff --git a/src/assets/img/deleteComment.png b/src/assets/img/deleteComment.png
new file mode 100644
index 0000000000000000000000000000000000000000..a68d0957999af144f139cae3a1754764e306ab0f
GIT binary patch
literal 2287
zcmV<L2oU#)P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il00001b5ch_0Itp)
z=>Px-sYygZRCr$PT}zS_HxN}1zJO!!+OTILyzCvrP2eQplK>|H?|SKoVei?S37-Jk
zyq*?O(^HaON-3#IofSb4(E8-(DL+!GYUAuVYYA-5ntNm382|<Y!GGI7o_%xQuAlC1
zK7cj+8-M@0`}=l|RRh340D!W;yKny-S-So1_HQ<B^LFFhvkUj+)f@;601E)X-S)-X
z3-`;%&?;p}JSzW_bMCO>XPyt2yPG$s|8D?bq^sQKZhQ6Kx&6^3Z(bjjc6+(Id7eAf
z*X`A(jdRzL{<Gs70CFXs*)OK3y>oB8@0JWtDBpc|`&Ym1zI-+dAdzf^ws+gBy>ykv
z$bkEBZu2hICZv4yF$+*Z$#I260f4TvzItxVf448LFWd%xKl1F~UGBd88ERkvXb*t*
z&N=w~&~qD#*ry#B<?o&Q{B(EoD#oG#pfLa##igvkNxByV5))J!02%`T(-A@2A%~v}
z+K6=Tz){TaPgynqbN~PoxP`0$0UqaE-0vFzIw*ZQC2PV@V*y6_jNdl^bOr$F1|DPt
zjPid3m*UMNa{-;e@O69jdgB~2g4lCVDCsh2zi$?xlhQNXfP+a-Z1IYMzEjrC0(1le
zY1WezO8vfBfTT#<G$7qTiWsrqHvptW+UR#O8;DZF=KG;R%mp-3c4(RsH&Cj4&}0DU
z3;=R#c#cZ?&?v@Y4gheF@$xt*s!u`{D4j)HJUt3FaDM&~`E~JVfdO*dKuOS-n*~70
zZxg3jwPe(LTqqx<RF8@&v<SPe5Q?4<KA1|w^!ouB3m_s+ODGE)2Oz+)Y86W$bOS|E
zzr+Gy)kFEQI<tl8sVX_Bx(OCml*}vy05*rRO2_7C3|Rmu-<KDc@HSFkxPWMJMGmt$
zF+k3qza$Mb<<Cp23IKA`KrJgUX93LT&jUc+1>`FKNS;b8a0&oh{b4(fntin(kUimx
zxfP9U;1mG1`sXE%H1KfOPUDdVeUUkft-urjw)!7S8cN4TklG$VX3!VJK&cg&0s!e=
zqQ?9u9WaGRi69s?v#7DUmOe(I-+#nj>8{`u0NCk^-Z1gO$B$K!eTQx73aUw;K>3He
z0h61)QL;*`Kn?)Zqv4uDU&`2$pwBB*P%n^uFq8uTY=)@$#HA>xCLO|{@24`4FMD`T
zl!OKE5v2Gs0Hh?O@cZ5N3cIS*sp;kJ=0RpA2pY4jfB`^3!LcC(em_{%OS+G&l+XZB
z5dZ=oeyIKpUF2l1gGp`#dA1Dzl>i_x-3JOT+>__ASHzHUgxCrg04f1MV*1&Y%M^}C
z4~Yx_6#$@R`cFw?tcr9`zyMGI0FtO*s;~sO#F>BrKp6mxnVw83Rv7xuyBGdS_>^S>
zfFc0MK+Vr64%mFhIaeUHB$fpzD&7wz3H)*u=I1)u8^{KeSpX#<)C&A!<lTb+DP;az
zMhyT;0FVTJshnSlBx)D~041h)BjM^-E9q7s{lVQpwjO{v4Mb@fb@-vd#BmH?prSY=
zHxwKBmlkhu)W}-ZumJSQmyA@ZwQAueHRF9+#=Pz&>lH364Y}>K0nody5H);{UWuM7
z9JU_^fV@1Nr6ISSHUK1bg}F4x`c=8Sks_2x|FYAx)ZC@N8vsfr=$uQP*O%t}3M2-H
zFaRh>H*rXlwcV>g7Bz$cfD%)>QNRkcHvM>c2g>yQpCsW1fTW1{2KT|>{&(~!*`4EO
zJhTj5<EL&jX#)TR^-KfLtz<owbtUCd0{}2X*i>r05!59G6s}h7=FDBr=-x;T0C*-_
z0^nS)r^UWM<n<7B1vLSnjdmOFp#)Oq-?xrhMgzclVa0B`835L+<0$0@fI$_@vSk2Z
zB{gU}1Hhn)W!W+Su#y_IodIA_#j<P}09Z*4+RgwlsA5^R3;?X825q-!08BqBF`E2w
z?ojn35~RQu3xJ--!KCa|nla_^DiZ|;StJ111B#l0X*G85<L5;JfF-Jxl4{P=r2=`v
z5G(7Zhe0e+H5JopYy-fIqzwSA;CKHiALiZ8W&tYc#4LbW0R3+W3BbBY3jq4hB@Ikg
z+zOPL({!-_@E@3LSrnQhz>+?_%|B>gEC9S<NB!O)ee0$KVMO1>1AyScniNRD08k*j
z5xN=xM$lpb4+ek&;f>JM05F0U3wSU96bNsGt_FY+v{=A{0iZy5BXl(YjG)B=9t;2l
z!W*Hh0bm3z7VuyIC=lKVT@3&uXt96?13-cBM(An)7(t5#JQx59gf~K0bpYTx7v4LU
zdU}^arRY1C-<fv=LKabdP2Up60>BTtg!^&lqU<T3SotWsV=Jy`0ALbnK__bCa$nMj
zet$_`Y%J8azo5zrN;rI%<~eni^qWG#5iT0^5E%7hV^ZYO6+#ZX%4S$(06_4Wx&Sni
zxB+d6l!74i)@*G$*EC)-UONRqPb&bl;>vZ7OJTowwkGA3(wbcTm|zY7SV?dNIsT@U
zXz5qKdcB#vl+PCZsrMJm0RY6okM{WXAL|Cp+{YnADL-TZ{Lno>kn~wcU}ELlGcN&J
z`6&S4_tq;d1^_enamd5x!-66;r=O4uI31u>YBdLdR&&!rTUbLV9-qy{djP}_3xKIx
zczKKwe2}OaES>^@-R=}KzTys0I953}(MmSr4kC~OAXjee{(=Vp+n%8ZD+4PeC%t6G
zUv-;S0ATZU@4qy5BQaLDFN&`P6-xtvmfYBMQft1|jx!nndcV7GbwC&e0A}tpp|^Gb
zWaYk@vKq46ngPJ<8V;#6O{Q7_Kr^3*xkr#^X`KQR)&u}E_X-L>9bzp2u(Ym%@>}i%
z=DGk&>nbVU58KKDNVj$^t*fl~)&RhK%%{%H&o@$h4*;aj11zm;to)WSfM;#)J;IjO
zbx?c{3*hI(Ngrwo@c1+Bjv_eksapks=Pl(0b8i4xuyR_E_CGTwj;>CtX;%OM002ov
JPDHLkV1kIM0+;{*

literal 0
HcmV?d00001

diff --git a/src/assets/img/selectComment.png b/src/assets/img/selectComment.png
new file mode 100644
index 0000000000000000000000000000000000000000..042bd7f5b05d1bac90794f5bfa2dbde756f803c9
GIT binary patch
literal 1180
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSjKx9jP7LeL$-HD>U<vbdaSW-5
zdpq}F;cWu}SI6b-)is-~6F3XiJyqMZI;}T)C9ntj$?a_Kkc=vG6H}E`5P!h*yQGcb
z&Hd&36+F0lA16mO9xM66@}A*<1q;yhW1<Ffc6{X1$*fWP|Gu5G+jyOC?!$bm`r>+-
zE1v8O4Y!K^i}5pr%)Itt0fR!!YOQD{hpCyo{9Fu&wyxTwic2Duhe7}T>L~{*0_N_I
zWq->eb^T<>k2^d@Q{NSCAj7d>$32ZnesXp}T}8m7=Rq=Ww(|Xa6E=7M-IgsqnTKaP
zu8S=H_e;^u<m9%s_rE3nefy44!Dr=(Fa`smGuL)E0<E0VaGvJ@!^F@Ox8iFI#z!Xq
z)KYB_a^PIRa$<*PjsBE|inA^I9XTbYH(dP|7?Ha7?$@*P&&Av8nmSJ9+b~5!>^Lh!
zccguXBm;xP{k;s2El*0>@l6QLt8Hd%*f%F-t{_9o)ad&O3=8ztBhy(JBA;F}mtc5t
z+Vh$uqeIxvue@vwzltW6x-npC(PGT_`+9Tn-ihYTcd8zmH-EXy^JwLR8oz~C7<J}K
z9aBzJzEj8`bKt_xMhgbM1J#W4B^R&+FljK(lz5<}F!{ps_C($TQVpgDK1x0Kdi;_7
znH=FCyDdwn`K@~xI;|n*;B_;<*YWS>{1&Tx5GMaaJ<#`vd}OQh+51O0gI7G}%K9$w
zDvLpZ@4y45@bl+(rsgd(Jy+guzWTxj28EE79c6Dnl$E}(ITF5P);t@TPeIQa6jc8P
z+P~j^Mfo~&vAXd8_$CH}@XyBg@9T3IPiyjc{eOlTg9=l^i)~*I3+@R&tY!bPD&bd}
z7=sGS1Ky@DuNz<Ns+TZgP+?1W&%!CcVP?kPDGfZG|0R^}RweBE%Ix6AAT+fp@)|$G
zOvVZA3N_pNYa3W6)#iCD{CZ&WmBnv#n2ZlA7G!E9{f(d2@b}QsW9mmeWu{M=U7o3t
z{8yY&VAD#c7c=)ynkV!^r8hn9)7)9=>1?_sX%||&odaJVXZ-hHW?EsxkJU_(uh|(`
z8CaYr9QeiPz{$WEebjS}JVOX$!OLrfQb0LZhB>;doNMJ7rZ5&P5>eS&#}L4IAW^fU
zeoywPI+ouI+;5rZ><#}=7vq0s^4?&f|E<h7ZnDX>oY*UBqn>!_{?oJxTNbr`WoKwr
z^{Lv$ps+S0@h_u8BIo3JdJG=gQ4#eF0TG9mEazsp)FpOJo<U@q!ONFS4b;%`mpLua
WfBp$>u3lh*XYh3Ob6Mw<&;$V7pWGq<

literal 0
HcmV?d00001

diff --git a/src/assets/img/solveComment.png b/src/assets/img/solveComment.png
new file mode 100644
index 0000000000000000000000000000000000000000..39261757756a5597cc9fc53abfc4c31fec047ca5
GIT binary patch
literal 2243
zcmaJ@X*ARgAN|i53=L*1*<~!LXKHL&vy3u@va}H?CVO@*#$b%m!<0fM+n5mENRuQn
z4}-CbkYtx;7?P~<WasgId(U~_^M3gK?z#8FJ--jXbI*O?V0TtTSWXxK01;~|%ZvL+
z`u9Ku_IHyRt`h*D53MaNF5~I*&#qC_oMhW#+<M?ol>cZw$1c-@SbUQ9D##A-M9HW)
zH)LYi{MH1o28a}dT13&cfIDkOzz5`Ys0ox*OTPF_mSOD~s;%RBeS{{;uoezocNb4#
zru^8AGVITy<;>D9_22zbvPo>hRhQU3Te<rzCU?t-KOQF&kGq4&igM^Tp7)h>dS>*n
ze1!$UDJY^&is|hRM~4y5)O4RrFG^DXWdKe`5a2Dy_R^v7#s%b~f=n-a7$Hl=P4W4+
zh~3#Xw`}_SMij1KIZBTAh;3@hG$S@ZKHZc=^Alkv!mdY2%Ko9|eMZT>N<k1iPy^5M
zvYM&Hnx_#4^@Pgy5I?s~xx{|3F4PHf`ICrA5hT45M-#=E{+oqUz-tW1=taAml~okB
z?oE46v!Db91?LHZ%>~ic%qZdY5k}-|sIL~8b!eSG#Bjsd98_0$vMo{zbRt8Qt;#-`
zicaDpvGvTpo#vbc)iRa5=k3xESuNFNexe}ZXQ9T0g8C1k3KE!=b>pRX&eHtd2MDKE
zBb+MDqhXGa6Y<3o--(<`N%J>HqE5N<PL_LseFcI+O8kEj(-V|t^fx~QuCJ+GvoBe-
z^#EUu8lUdCBl;pju1T9?lxvy1FFE8N+k5EcDZva&HwU%ORGnGs{1AHZJdoJ=P&o#I
zwqGe+k_oXNw_->+!2C_|DZCt}i2@KoixxkG_mi*vA>x|E{W-zP;-lbwl%icVAk5wu
z?6uZ-ZHNGqwx&hoa{3JFHk?xqfx{`;aVxk_*|GIKh+rV>AoF9>ViBQiey%+s7y$=f
zF`E~KLGX#Xl~B6OgsbQ;<qHM@m%U@k61M&Bj|*)7ah8r!w&$j;6Ev0vl~%ka&DKi!
zuH8W`PePbJ@aAqs2_DvZCeDdjkzg_wN0pt-^4wZnS=xdx6+Gf<q#h;#LxnX$hctko
zT!kZJ!YtIhfW^WB(jExTozieTTrbaa=F}=xx&k}&1anPqA!YW?Y*W6<EfAO21g*t#
z2mNviRJid<VRoF!Wq&GqSpB{_FV)NQ633M2J<~Ne|GCFD6#%<V$iJL9&JH#)QG)Ye
zAwJuM62P&B#aOY8yI*GwV!xLUXW69!j){-*u(01bpL+oN^|7(IOXu3{Cxu=wQS7Ef
zkJ9<-xIYH7{XmebS>}mbRQsP7IAS?C`V7)1676)AFQ@~)=cBv+w|BLyZ~d-kl5W2=
z+yh2XZ1>~PDlqwk1`CT_0am|3SZs}jPm8(qvVt<3xYHK^3}W~Ch6GH>F&lLCWjFY0
z4fUZ10&Qm^2#tE&xFfgFl9t#6TYH}s_{rZQ2V&;pnzy-;-)N(PCaLO1&wE1|lEF48
zyyB`>5WEPA7!zb&#Te>-(3N9es6ZT_ys1VmA|-!Bba&>3r<uBD7s+qj;W}0%Czcv=
zdT!remU5?iJ=N^-%@YyKID1(k1l?9^Pd0O{u&~YqI;Qd)-_O#b$DxG$c9$3z6dU58
z1K#5ojl*{#9PsY2?`;@obds&mt9U0#(Fd=3-JVP=KGxox(%#U(d$vFv6yF?mRSiiW
z_Sn_P;Pn4X_;I;Pp39Akh7cA#WIiVETj_|h1jep)Zf+uN;puWvIF3i7yjkd;{@cto
z`uRl$wB7n*HsPSo)FrOlLt=nz#2L;r;ZfD9xU*B4z_fBO_P9&=PEX+KC!JqnoMENy
zB1|7k8}!9ejl80|IwQ`y;p7|uZf{s|G8dJsteFi?gsL4_zHa$id?@rhpjgCEaVH?L
zQs)mB%g7!%4P5*3?uJ&g?PXa<g!8p~PMXzFXmR-4V%u9?R<ht?YV~BWf}_x!;bBse
zhoXgE3QjkPu^O7jdBFD>#W+lwmf+C7a=&a$;y-fGE&w0>7n$7DB_5Lj&8$t0R5T?0
zJhXgMs@}PUYsOtwE$GPXrB4q;*ZU%hZv{Ci|D4-%C0DF>9s%pCNI!-DJ{B+4`rc~Q
zbo+jxB)``HC|*52aD9)Rl%fLo3+QL$Q7{at6smZ3SlUe^Oq(|7&VCgAH_*$C$(!qo
z#seqf)mWDKFDv{UL(&*r{S<{S{;k^;f%|N%u0ErsDDWNmm0IyANu|uj{XcBz`TSaW
z>hm6A0(a#dAYME`zQPT{r*ppQhG)kNwAvsHCxp`kpLS7O()kV%wSkQufxd#=`=6)$
zKatJ^(D?Db0d+Uqrf^(`*8I&JA*6rr-T))nUj`X;si%y>eo<B3QC%90AtGS0eNPQq
zN|HNYH;OlwCMvg?qDqV(<ywt$1E{lA_$%A@SgY!c<;Y{SQF86*$cx@Ly+gzjuPq68
zA@g}hWHwN|j0}1b(=c_*R$sGxlx9L_fT6`cRl({tz^2|v^$ePBQfN|>mY`=kRF`o#
z{cEI#8BYTEqDsCZRx^OAeCda#6Wv!>Z<O;!++1kD=GA+-)0LUMyyFvpN+J89NNeCq
z%h$_QEoN9BL@-R&675-ZTb)wMA6YBiYTWW0Q4xzoAGhnv>mQ0Pp91Q3qsNSo5BF$j
zs@J`1&%UxP?oXX4-?AO)7olgDxXI~>;ViiLTHPMsZ&4(XF<|gat@nw9N~k+&^sg0s
z*S!--SQNNir&)b7?}jez9Q8Iy&z=9=_L(xf(5`A*<8el(4b=tY2YWkL7ed?ro`JOH
z{6Ua@nfG<nj7Kg0{afhu299~T)PSd(zq2H0&OoWmc+1g4=^z&1h({doAGl&e17`7p
tg!b-V<sULDFQ`O{n|k3WIGO7cdt0Xhq*`7pdG41Jz#403S$fKy{10jN58VI&

literal 0
HcmV?d00001

diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue
index 0b06c6b..822e75a 100644
--- a/src/components/common/Header.vue
+++ b/src/components/common/Header.vue
@@ -1,45 +1,47 @@
 <template>
-	<div class="header">
-		<!-- 折叠按钮 -->
-		<div class="collapse-btn" @click="collapseChage">
-			<i v-if="!collapse" class="el-icon-s-fold"></i>
-			<i v-else class="el-icon-s-unfold"></i>
-		</div>
-		<div class="logo">
-			<div>
-				<img src="../../assets/img/logo.png" />
-				<p>{{ $t('system.title_1') }}</p>
-			</div>
-			<div>
-				{{ $t('system.title_2') }}
-			</div>
-			<!-- {{ $t('system.title') }} -->
-		</div>
-		<div class="header-right">
-			<div class="header-user-con">
-				<div class="changelang">
-					<el-dropdown trigger="click" @command="chengelang">
-						<span class="el-dropdown-link">
-							language
-							<i class="el-icon-arrow-down el-icon--right"></i>
-						</span>
-						<el-dropdown-menu slot="dropdown">
-							<el-dropdown-item command="en">english</el-dropdown-item>
-							<el-dropdown-item command="zh">中文简体</el-dropdown-item>
-						</el-dropdown-menu>
-					</el-dropdown>
-				</div>
-				<!-- 全屏显示 -->
-				<div class="btn-fullscreen" @click="handleFullScreen">
-					<el-tooltip effect="dark" :content="fullscreen ? $t('system.noscreen') : $t('system.screen')" placement="bottom">
-						<i class="el-icon-rank"></i>
-					</el-tooltip>
-				</div>
-				<!-- 消息中心 -->
+    <div class="header">
+        <!-- 折叠按钮 -->
+        <div class="collapse-btn" @click="collapseChage" v-if="!home">
+            <i v-if="!collapse" class="el-icon-s-fold"></i>
+            <i v-else class="el-icon-s-unfold"></i>
+        </div>
+        <div class="collapse-btn" @click="goHome" v-if="home">
+            <i class="el-icon-s-home"></i>
+        </div>
+        <div class="logo">
+            <div>
+                <img src="../../assets/img/logo.png" />
+                <p>{{ $t('system.title_1') }}</p>
+            </div>
+            <div>
+                {{ $t('system.title_2') }}
+            </div>
+            <!-- {{ $t('system.title') }} -->
+        </div>
+        <div class="header-right">
+            <div class="header-user-con">
+                <div class="changelang">
+                    <el-dropdown trigger="click" @command="chengelang">
+                        <span class="el-dropdown-link">
+                            language
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                        <el-dropdown-menu slot="dropdown">
+                            <el-dropdown-item command="en">english</el-dropdown-item>
+                            <el-dropdown-item command="zh">中文简体</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </div>
+                <!-- 全屏显示 -->
+                <div class="btn-fullscreen" @click="handleFullScreen">
+                    <el-tooltip effect="dark" :content="fullscreen ? $t('system.noscreen') : $t('system.screen')" placement="bottom">
+                        <i class="el-icon-rank"></i>
+                    </el-tooltip>
+                </div>
+                <!-- 消息中心 -->
 
-
-				<!-- 身份切换 -->
-				<!-- 			<span style="font-size: 14px;margin-right: 8px;" v-if="this.user_cap.includes('author')">View as :</span>
+                <!-- 身份切换 -->
+                <!-- 			<span style="font-size: 14px;margin-right: 8px;" v-if="this.user_cap.includes('author')">View as :</span>
 				<el-dropdown class="link_role" trigger="click" v-if="this.user_cap.includes('author')">
 					<span style="color: #fff;cursor: pointer;">
 						Author<i class="el-icon-arrow-down el-icon--right"></i>
@@ -63,350 +65,346 @@
 					</el-dropdown-menu>
 				</el-dropdown> -->
 
-
-				<!-- 用户头像 -->
-				<div class="user-avator" @click="skip_link()" v-if="hasorcie">
-					<el-tooltip class="item" effect="light" content="Link to Orcid" placement="bottom-end">
-						<img src="../../assets/img/orcid.png" />
-					</el-tooltip>
-				</div>
-				<div class="user-avator" @click="skip_check()" v-else>
-					<el-tooltip class="item" effect="light" content="Connect to ORCID" placement="bottom-end">
-						<img src="../../assets/img/orcno.png" />
-					</el-tooltip>
-				</div>
-				<!-- 用户名下拉菜单 -->
-				<el-dropdown class="user-name" trigger="click" @command="handleCommand">
-					<span class="el-dropdown-link">
-						{{ username }}
-						<i class="el-icon-caret-bottom"></i>
-					</span>
-					<el-dropdown-menu slot="dropdown">
-						<!-- <el-dropdown-item divided command="personcenter">Personal Center</el-dropdown-item> -->
-						<el-dropdown-item divided command="loginout">{{ $t('system.loyout') }}</el-dropdown-item>
-					</el-dropdown-menu>
-				</el-dropdown>
-			</div>
-		</div>
-	</div>
+                <!-- 用户头像 -->
+                <div class="user-avator" @click="skip_link()" v-if="hasorcie">
+                    <el-tooltip class="item" effect="light" content="Link to Orcid" placement="bottom-end">
+                        <img src="../../assets/img/orcid.png" />
+                    </el-tooltip>
+                </div>
+                <div class="user-avator" @click="skip_check()" v-else>
+                    <el-tooltip class="item" effect="light" content="Connect to ORCID" placement="bottom-end">
+                        <img src="../../assets/img/orcno.png" />
+                    </el-tooltip>
+                </div>
+                <!-- 用户名下拉菜单 -->
+                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
+                    <span class="el-dropdown-link">
+                        {{ username }}
+                        <i class="el-icon-caret-bottom"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                        <!-- <el-dropdown-item divided command="personcenter">Personal Center</el-dropdown-item> -->
+                        <el-dropdown-item divided command="loginout">{{ $t('system.loyout') }}</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </div>
+        </div>
+    </div>
 </template>
 <script>
-	import bus from '../common/bus';
-	export default {
-		data() {
-			return {
-				collapse: false,
-				fullscreen: false,
-				name: 'unknown user',
-				message: 2,
-				hasorcie: false,
-				link_path: '',
-				user_id: localStorage.getItem('U_id'),
-				user_cap: localStorage.getItem('U_role'),
-				orcid: '',
-				orcidLink: 'https://orcid.org/oauth/authorize?client_id=APP-PKF0BGRP6DWM6FUB&response_type=code&scope=/authenticate&redirect_uri=https://submission.tmrjournals.com/orcidBind',
-				langArr: [{
-						value: 'zh',
-						label: '中文'
-					},
-					{
-						value: 'en',
-						label: 'English'
-					}
-				],
-				curStartTime: '2019-07-31 08:00:00',
-				daojishi: '',
-				day: '0',
-				hour: '00',
-				min: '00',
-				second: '00',
-			};
-		},
-		created() {
-			if(!this.$route.meta.hideSidebar){
-				this.collapse=true
-				
-			}else{
-                this.collapse=false
+import bus from '../common/bus';
+export default {
+    props: ['home'],
+    data() {
+        return {
+            collapse: false,
+            fullscreen: false,
+            name: 'unknown user',
+            message: 2,
+            hasorcie: false,
+            link_path: '',
+            user_id: localStorage.getItem('U_id'),
+            user_cap: localStorage.getItem('U_role'),
+            orcid: '',
+            orcidLink:
+                'https://orcid.org/oauth/authorize?client_id=APP-PKF0BGRP6DWM6FUB&response_type=code&scope=/authenticate&redirect_uri=https://submission.tmrjournals.com/orcidBind',
+            langArr: [
+                {
+                    value: 'zh',
+                    label: '中文'
+                },
+                {
+                    value: 'en',
+                    label: 'English'
+                }
+            ],
+            curStartTime: '2019-07-31 08:00:00',
+            daojishi: '',
+            day: '0',
+            hour: '00',
+            min: '00',
+            second: '00'
+        };
+    },
+    created() {
+        this.initORCID();
+        if (this.user_id == 24) {
+            this.daojishi = '2021.9.3 - 2021.9.30';
+            this.curStartTime = '2021-10-01 00:00:00';
+            this.countTime();
+        }
+        if (this.user_id == 25) {
+            this.daojishi = '2021.9.6 - 2021.12.31';
+            this.curStartTime = '2022-01-01 00:00:00';
+            this.countTime();
+        }
+    },
+    computed: {
+        username() {
+            let username = localStorage.getItem('U_name');
+            return username ? username : this.name;
+        },
+        onRoutes() {
+            0;
+            return this.$route.path.replace('/', '');
+        },
+        userrole() {
+            let userrole = localStorage.getItem('U_status');
+            if (userrole == 1) {
+                return this.$t('total.author');
+            } else if (userrole == 2) {
+                return this.$t('total.editor');
+            } else if (userrole == 'admin') {
+                return this.$t('total.admin');
+            } else {
+                return this.$t('total.reviewers');
             }
-			this.initORCID();
-			if (this.user_id == 24) {
-				this.daojishi = '2021.9.3 - 2021.9.30'
-				this.curStartTime = '2021-10-01 00:00:00'
-				this.countTime();
-			}
-			if (this.user_id == 25) {
-				this.daojishi = '2021.9.6 - 2021.12.31'
-				this.curStartTime = '2022-01-01 00:00:00'
-				this.countTime();
-			}
-		},
-		computed: {
-			username() {
-				let username = localStorage.getItem('U_name');
-				return username ? username : this.name;
-			},
-			onRoutes() {
-				0
-				return this.$route.path.replace('/', '');
-			},
-			userrole() {
-				let userrole = localStorage.getItem('U_status');
-				if (userrole == 1) {
-					return this.$t('total.author');
-				} else if (userrole == 2) {
-					return this.$t('total.editor');
-				} else if (userrole == 'admin') {
-					return this.$t('total.admin');
-				} else {
-					return this.$t('total.reviewers');
-				}
-			}
-		},
-		methods: {
-			// 用户名下拉菜单选择事件
-			handleCommand(command) {
-				// 个人中心
-				if (command == 'personcenter') {
-					this.$router.push('/percenter');
-				}
-				// 退出系统
-				if (command == 'loginout') {
-					localStorage.removeItem('U_role');
-					localStorage.removeItem('U_id');
-					localStorage.removeItem('U_name');
-					localStorage.removeItem('U_status');
-					localStorage.removeItem('ms_journal_alias');
-					this.$router.push('/login');
-				}
-			},
-			// 侧边栏折叠
-			collapseChage() {
-				this.collapse = !this.collapse;
-				bus.$emit('collapse', this.collapse);
-			},
-			//判断orcid
-			initORCID() {
-				this.$api
-					.post('api/user/checkOrcid', {
-						account: localStorage.getItem('U_name')
-					})
-					.then((res) => {
-						this.hasorcie = res.userinfo.orcid == '' ? false : true;
-						this.orcid = res.userinfo.orcid;
-					})
-					.catch((err) => {
-						console.log(err);
-					});
-			},
-			// 全屏事件
-			handleFullScreen() {
-				let element = document.documentElement;
-				if (this.fullscreen) {
-					if (document.exitFullscreen) {
-						document.exitFullscreen();
-					} else if (document.webkitCancelFullScreen) {
-						document.webkitCancelFullScreen();
-					} else if (document.mozCancelFullScreen) {
-						document.mozCancelFullScreen();
-					} else if (document.msExitFullscreen) {
-						document.msExitFullscreen();
-					}
-				} else {
-					if (element.requestFullscreen) {
-						element.requestFullscreen();
-					} else if (element.webkitRequestFullScreen) {
-						element.webkitRequestFullScreen();
-					} else if (element.mozRequestFullScreen) {
-						element.mozRequestFullScreen();
-					} else if (element.msRequestFullscreen) {
-						// IE11
-						element.msRequestFullscreen();
-					}
-				}
-				this.fullscreen = !this.fullscreen;
-			},
-			//切换语言
-			chengelang(commond) {
-				localStorage.setItem('langs', commond);
-				this.$router.go(0);
-			},
-			skip_link() {
-				location.href = 'https://orcid.org/' + this.orcid;
-			},
-			skip_check() {
-				location.href = this.orcidLink;
-			},
+        }
+    },
+    methods: {
+        goHome() {
+            this.$router.push('/');
+        },
+        // 用户名下拉菜单选择事件
+        handleCommand(command) {
+            // 个人中心
+            if (command == 'personcenter') {
+                this.$router.push('/percenter');
+            }
+            // 退出系统
+            if (command == 'loginout') {
+                localStorage.removeItem('U_role');
+                localStorage.removeItem('U_id');
+                localStorage.removeItem('U_name');
+                localStorage.removeItem('U_status');
+                localStorage.removeItem('ms_journal_alias');
+                this.$router.push('/login');
+            }
+        },
+        // 侧边栏折叠
+        collapseChage() {
+            this.collapse = !this.collapse;
+            bus.$emit('collapse', this.collapse);
+        },
+        //判断orcid
+        initORCID() {
+            this.$api
+                .post('api/user/checkOrcid', {
+                    account: localStorage.getItem('U_name')
+                })
+                .then((res) => {
+                    this.hasorcie = res.userinfo.orcid == '' ? false : true;
+                    this.orcid = res.userinfo.orcid;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        // 全屏事件
+        handleFullScreen() {
+            let element = document.documentElement;
+            if (this.fullscreen) {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.webkitCancelFullScreen) {
+                    document.webkitCancelFullScreen();
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                }
+            } else {
+                if (element.requestFullscreen) {
+                    element.requestFullscreen();
+                } else if (element.webkitRequestFullScreen) {
+                    element.webkitRequestFullScreen();
+                } else if (element.mozRequestFullScreen) {
+                    element.mozRequestFullScreen();
+                } else if (element.msRequestFullscreen) {
+                    // IE11
+                    element.msRequestFullscreen();
+                }
+            }
+            this.fullscreen = !this.fullscreen;
+        },
+        //切换语言
+        chengelang(commond) {
+            localStorage.setItem('langs', commond);
+            this.$router.go(0);
+        },
+        skip_link() {
+            location.href = 'https://orcid.org/' + this.orcid;
+        },
+        skip_check() {
+            location.href = this.orcidLink;
+        },
 
-
-			// 倒计时
-			countTime() {
-				// 获取当前时间
-				let date = new Date()
-				let now = date.getTime()
-				// 设置截止时间
-				let endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期
-				let end = endDate.getTime()
-				// 时间差
-				let leftTime = end - now
-				// 定义变量 d,h,m,s保存倒计时的时间
-				if (leftTime >= 0) {
-					// 天
-					this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
-					// 时
-					let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
-					this.hour = h < 10 ? '0' + h : h
-					// 分
-					let m = Math.floor(leftTime / 1000 / 60 % 60)
-					this.min = m < 10 ? '0' + m : m
-					// 秒
-					let s = Math.floor(leftTime / 1000 % 60)
-					this.second = s < 10 ? '0' + s : s
-				} else {
-					this.day = 0
-					this.hour = '00'
-					this.min = '00'
-					this.second = '00'
-				}
-				// 等于0的时候不调用
-				if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
-					return
-				} else {
-					// 递归每秒调用countTime方法，显示动态时间效果,
-					setTimeout(this.countTime, 1000)
-				}
-			},
-		},
-		mounted() {
-			
-			if (document.body.clientWidth < 1000) {
-				this.collapseChage();
-			}
-		},
-		watch: {
-			$route: {
-				handler: function(route) {
-					this.link_path = route.path
-				},
-				immediate: true
-			}
-		}
-	};
+        // 倒计时
+        countTime() {
+            // 获取当前时间
+            let date = new Date();
+            let now = date.getTime();
+            // 设置截止时间
+            let endDate = new Date(this.curStartTime); // this.curStartTime需要倒计时的日期
+            let end = endDate.getTime();
+            // 时间差
+            let leftTime = end - now;
+            // 定义变量 d,h,m,s保存倒计时的时间
+            if (leftTime >= 0) {
+                // 天
+                this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
+                // 时
+                let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
+                this.hour = h < 10 ? '0' + h : h;
+                // 分
+                let m = Math.floor((leftTime / 1000 / 60) % 60);
+                this.min = m < 10 ? '0' + m : m;
+                // 秒
+                let s = Math.floor((leftTime / 1000) % 60);
+                this.second = s < 10 ? '0' + s : s;
+            } else {
+                this.day = 0;
+                this.hour = '00';
+                this.min = '00';
+                this.second = '00';
+            }
+            // 等于0的时候不调用
+            if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
+                return;
+            } else {
+                // 递归每秒调用countTime方法，显示动态时间效果,
+                setTimeout(this.countTime, 1000);
+            }
+        }
+    },
+    mounted() {
+        if (document.body.clientWidth < 1000) {
+            this.collapseChage();
+        }
+    },
+    watch: {
+        $route: {
+            handler: function (route) {
+                this.link_path = route.path;
+            },
+            immediate: true
+        }
+    }
+};
 </script>
 <style scoped>
-	.header {
-		position: relative;
-		box-sizing: border-box;
-		width: 100%;
-		height: 70px;
-		font-size: 22px;
-		color: #fff;
-	}
+.header {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 70px;
+    font-size: 22px;
+    color: #fff;
+}
 
-	.collapse-btn {
-		float: left;
-		padding: 0 15px 0 21px;
-		cursor: pointer;
-		line-height: 70px;
-	}
+.collapse-btn {
+    float: left;
+    padding: 0 15px 0 21px;
+    cursor: pointer;
+    line-height: 70px;
+}
 
-	.header .logo {
-		float: left;
-		padding-top: 19px;
-		vertical-align: middle;
-		font-size: 20px;
-	}
+.header .logo {
+    float: left;
+    padding-top: 19px;
+    vertical-align: middle;
+    font-size: 20px;
+}
 
-	.header .logo img {
-		width: 84px;
-		height: 20px;
-		margin-top: -4px;
-		margin-right: 15px;
-		padding-left: 12px;
-	}
+.header .logo img {
+    width: 84px;
+    height: 20px;
+    margin-top: -4px;
+    margin-right: 15px;
+    padding-left: 12px;
+}
 
-	.header .logo>div {
-		float: left;
-		height: 40px;
-	}
+.header .logo > div {
+    float: left;
+    height: 40px;
+}
 
-	.header .logo p {
-		font-size: 12px;
-		text-align: center;
-	}
+.header .logo p {
+    font-size: 12px;
+    text-align: center;
+}
 
-	.header-right {
-		float: right;
-		padding-right: 50px;
-	}
+.header-right {
+    float: right;
+    padding-right: 50px;
+}
 
-	.header-user-con {
-		display: flex;
-		height: 70px;
-		align-items: center;
-	}
+.header-user-con {
+    display: flex;
+    height: 70px;
+    align-items: center;
+}
 
-	.btn-fullscreen {
-		transform: rotate(45deg);
-		margin-right: 5px;
-		font-size: 24px;
-	}
+.btn-fullscreen {
+    transform: rotate(45deg);
+    margin-right: 5px;
+    font-size: 24px;
+}
 
-	.changelang {
-		position: relative;
-		width: 90px;
-		height: 30px;
-	}
+.changelang {
+    position: relative;
+    width: 90px;
+    height: 30px;
+}
 
-	.btn-fullscreen {
-		position: relative;
-		width: 30px;
-		height: 30px;
-		text-align: center;
-		border-radius: 15px;
-		cursor: pointer;
-	}
+.btn-fullscreen {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    border-radius: 15px;
+    cursor: pointer;
+}
 
-	.btn-bell-badge {
-		position: absolute;
-		right: 0;
-		top: -2px;
-		width: 8px;
-		height: 8px;
-		border-radius: 4px;
-		background: #f56c6c;
-		color: #fff;
-	}
+.btn-bell-badge {
+    position: absolute;
+    right: 0;
+    top: -2px;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    background: #f56c6c;
+    color: #fff;
+}
 
-	.btn-bell .el-icon-bell {
-		color: #fff;
-	}
+.btn-bell .el-icon-bell {
+    color: #fff;
+}
 
-	.user-name {
-		margin-left: 10px;
-	}
+.user-name {
+    margin-left: 10px;
+}
 
-	.user-avator {
-		margin-left: 20px;
-	}
+.user-avator {
+    margin-left: 20px;
+}
 
-	.user-avator img {
-		display: block;
-		width: 20px;
-		height: 20px;
-	}
+.user-avator img {
+    display: block;
+    width: 20px;
+    height: 20px;
+}
 
-	.el-dropdown-link {
-		color: #fff;
-		cursor: pointer;
-	}
+.el-dropdown-link {
+    color: #fff;
+    cursor: pointer;
+}
 
-	.el-dropdown-menu__item {
-		text-align: center;
-	}
-
-	#colgreen {
-		color: rgb(142, 150, 74);
-	}
+.el-dropdown-menu__item {
+    text-align: center;
+}
 
+#colgreen {
+    color: rgb(142, 150, 74);
+}
 </style>
diff --git a/src/components/common/Header2.vue b/src/components/common/Header2.vue
new file mode 100644
index 0000000..d4e1f53
--- /dev/null
+++ b/src/components/common/Header2.vue
@@ -0,0 +1,403 @@
+<template>
+    <div class="header">
+        <!-- 折叠按钮 -->
+       
+        <div class="" @click="goHome" >
+            <i class="el-icon-s-home" style="font-size: 24px;line-height: 60px;color: #006699d1;"></i>
+        </div>
+       
+        <div class="header-right">
+            <div class="header-user-con">
+                <div class="changelang">
+                    <el-dropdown trigger="click" @command="chengelang">
+                        <span class="el-dropdown-link">
+                            language
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                        <el-dropdown-menu slot="dropdown">
+                            <el-dropdown-item command="en">english</el-dropdown-item>
+                            <el-dropdown-item command="zh">中文简体</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </div>
+                <!-- 全屏显示 -->
+                <div class="btn-fullscreen" @click="handleFullScreen">
+                    <el-tooltip effect="dark" :content="fullscreen ? $t('system.noscreen') : $t('system.screen')" placement="bottom">
+                        <i class="el-icon-rank"></i>
+                    </el-tooltip>
+                </div>
+                <!-- 消息中心 -->
+
+                <!-- 身份切换 -->
+                <!-- 			<span style="font-size: 14px;margin-right: 8px;" v-if="this.user_cap.includes('author')">View as :</span>
+				<el-dropdown class="link_role" trigger="click" v-if="this.user_cap.includes('author')">
+					<span style="color: #fff;cursor: pointer;">
+						Author<i class="el-icon-arrow-down el-icon--right"></i>
+					</span>
+					<el-dropdown-menu :default-active="onRoutes" router slot="dropdown" style="cursor: pointer;">
+						<router-link :to="{path:'/dashboard'}">
+							<el-dropdown-item>Author</el-dropdown-item>
+						</router-link>
+						<router-link :to="{path:'/managing'}" v-if="this.user_cap.includes('chief')">
+							<el-dropdown-item>Editor-in-Chief</el-dropdown-item>
+						</router-link>
+						<router-link :to="{path:'/editorial'}" v-if="this.user_cap.includes(',board')">
+							<el-dropdown-item>Editorial board member</el-dropdown-item>
+						</router-link>
+						<router-link :to="{path:'/peerewer'}" v-if="this.user_cap.includes('reviewer')">
+							<el-dropdown-item>Reviewer</el-dropdown-item>
+						</router-link>
+						<router-link :to="{path:'/youthed'}" v-if="this.user_cap.includes('yboard')">
+							<el-dropdown-item>Young scientist member</el-dropdown-item>
+						</router-link>
+					</el-dropdown-menu>
+				</el-dropdown> -->
+
+                <!-- 用户头像 -->
+                <div class="user-avator" @click="skip_link()" v-if="hasorcie">
+                    <el-tooltip class="item" effect="light" content="Link to Orcid" placement="bottom-end">
+                        <img src="../../assets/img/orcid.png" />
+                    </el-tooltip>
+                </div>
+                <div class="user-avator" @click="skip_check()" v-else>
+                    <el-tooltip class="item" effect="light" content="Connect to ORCID" placement="bottom-end">
+                        <img src="../../assets/img/orcno.png" />
+                    </el-tooltip>
+                </div>
+                <!-- 用户名下拉菜单 -->
+                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
+                    <span class="el-dropdown-link">
+                        {{ username }}
+                        <i class="el-icon-caret-bottom"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                        <!-- <el-dropdown-item divided command="personcenter">Personal Center</el-dropdown-item> -->
+                        <el-dropdown-item divided command="loginout">{{ $t('system.loyout') }}</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import bus from '../common/bus';
+export default {
+    props: ['home'],
+    data() {
+        return {
+            collapse: false,
+            fullscreen: false,
+            name: 'unknown user',
+            message: 2,
+            hasorcie: false,
+            link_path: '',
+            user_id: localStorage.getItem('U_id'),
+            user_cap: localStorage.getItem('U_role'),
+            orcid: '',
+            orcidLink:
+                'https://orcid.org/oauth/authorize?client_id=APP-PKF0BGRP6DWM6FUB&response_type=code&scope=/authenticate&redirect_uri=https://submission.tmrjournals.com/orcidBind',
+            langArr: [
+                {
+                    value: 'zh',
+                    label: '中文'
+                },
+                {
+                    value: 'en',
+                    label: 'English'
+                }
+            ],
+            curStartTime: '2019-07-31 08:00:00',
+            daojishi: '',
+            day: '0',
+            hour: '00',
+            min: '00',
+            second: '00'
+        };
+    },
+    created() {
+        this.initORCID();
+        if (this.user_id == 24) {
+            this.daojishi = '2021.9.3 - 2021.9.30';
+            this.curStartTime = '2021-10-01 00:00:00';
+            this.countTime();
+        }
+        if (this.user_id == 25) {
+            this.daojishi = '2021.9.6 - 2021.12.31';
+            this.curStartTime = '2022-01-01 00:00:00';
+            this.countTime();
+        }
+    },
+    computed: {
+        username() {
+            let username = localStorage.getItem('U_name');
+            return username ? username : this.name;
+        },
+        onRoutes() {
+            0;
+            return this.$route.path.replace('/', '');
+        },
+        userrole() {
+            let userrole = localStorage.getItem('U_status');
+            if (userrole == 1) {
+                return this.$t('total.author');
+            } else if (userrole == 2) {
+                return this.$t('total.editor');
+            } else if (userrole == 'admin') {
+                return this.$t('total.admin');
+            } else {
+                return this.$t('total.reviewers');
+            }
+        }
+    },
+    methods: {
+        goHome() {
+            this.$router.push('/');
+        },
+        // 用户名下拉菜单选择事件
+        handleCommand(command) {
+            // 个人中心
+            if (command == 'personcenter') {
+                this.$router.push('/percenter');
+            }
+            // 退出系统
+            if (command == 'loginout') {
+                localStorage.removeItem('U_role');
+                localStorage.removeItem('U_id');
+                localStorage.removeItem('U_name');
+                localStorage.removeItem('U_status');
+                localStorage.removeItem('ms_journal_alias');
+                this.$router.push('/login');
+            }
+        },
+        // 侧边栏折叠
+        collapseChage() {
+            this.collapse = !this.collapse;
+            bus.$emit('collapse', this.collapse);
+        },
+        //判断orcid
+        initORCID() {
+            this.$api
+                .post('api/user/checkOrcid', {
+                    account: localStorage.getItem('U_name')
+                })
+                .then((res) => {
+                    this.hasorcie = res.userinfo.orcid == '' ? false : true;
+                    this.orcid = res.userinfo.orcid;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        // 全屏事件
+        handleFullScreen() {
+            let element = document.documentElement;
+            if (this.fullscreen) {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.webkitCancelFullScreen) {
+                    document.webkitCancelFullScreen();
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                }
+            } else {
+                if (element.requestFullscreen) {
+                    element.requestFullscreen();
+                } else if (element.webkitRequestFullScreen) {
+                    element.webkitRequestFullScreen();
+                } else if (element.mozRequestFullScreen) {
+                    element.mozRequestFullScreen();
+                } else if (element.msRequestFullscreen) {
+                    // IE11
+                    element.msRequestFullscreen();
+                }
+            }
+            this.fullscreen = !this.fullscreen;
+        },
+        //切换语言
+        chengelang(commond) {
+            localStorage.setItem('langs', commond);
+            this.$router.go(0);
+        },
+        skip_link() {
+            location.href = 'https://orcid.org/' + this.orcid;
+        },
+        skip_check() {
+            location.href = this.orcidLink;
+        },
+
+        // 倒计时
+        countTime() {
+            // 获取当前时间
+            let date = new Date();
+            let now = date.getTime();
+            // 设置截止时间
+            let endDate = new Date(this.curStartTime); // this.curStartTime需要倒计时的日期
+            let end = endDate.getTime();
+            // 时间差
+            let leftTime = end - now;
+            // 定义变量 d,h,m,s保存倒计时的时间
+            if (leftTime >= 0) {
+                // 天
+                this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
+                // 时
+                let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
+                this.hour = h < 10 ? '0' + h : h;
+                // 分
+                let m = Math.floor((leftTime / 1000 / 60) % 60);
+                this.min = m < 10 ? '0' + m : m;
+                // 秒
+                let s = Math.floor((leftTime / 1000) % 60);
+                this.second = s < 10 ? '0' + s : s;
+            } else {
+                this.day = 0;
+                this.hour = '00';
+                this.min = '00';
+                this.second = '00';
+            }
+            // 等于0的时候不调用
+            if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
+                return;
+            } else {
+                // 递归每秒调用countTime方法，显示动态时间效果,
+                setTimeout(this.countTime, 1000);
+            }
+        }
+    },
+    mounted() {
+        if (document.body.clientWidth < 1000) {
+            this.collapseChage();
+        }
+    },
+    watch: {
+        $route: {
+            handler: function (route) {
+                this.link_path = route.path;
+            },
+            immediate: true
+        }
+    }
+};
+</script>
+<style scoped>
+.header {
+    background-color: #fff;
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    height: 60px;
+    padding: 0 20px;
+    color: #333639;
+    box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
+    border-bottom:1px solid #f0f0f0;
+}
+
+.collapse-btn {
+    float: left;
+    padding: 0 15px 0 21px;
+    cursor: pointer;
+    line-height: 60px;
+}
+
+.header .logo {
+    float: left;
+    padding-top: 19px;
+    vertical-align: middle;
+    font-size: 20px;
+}
+
+.header .logo img {
+    width: 84px;
+    height: 20px;
+    margin-top: -4px;
+    margin-right: 15px;
+    padding-left: 12px;
+}
+
+.header .logo > div {
+    float: left;
+    height: 40px;
+}
+
+.header .logo p {
+    font-size: 12px;
+    text-align: center;
+}
+
+.header-right {
+    float: right;
+    padding-right: 50px;
+}
+
+.header-user-con {
+    display: flex;
+    height: 60px;
+    align-items: center;
+}
+
+.btn-fullscreen {
+    transform: rotate(45deg);
+    margin-right: 5px;
+    font-size: 24px;
+}
+
+.changelang {
+    position: relative;
+    width: 90px;
+    height: 30px;
+}
+
+.btn-fullscreen {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    border-radius: 15px;
+    cursor: pointer;
+}
+
+.btn-bell-badge {
+    position: absolute;
+    right: 0;
+    top: -2px;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    background: #f56c6c;
+    color: #333639;
+}
+
+.btn-bell .el-icon-bell {
+    color: #333639;
+}
+
+.user-name {
+    margin-left: 10px;
+}
+
+.user-avator {
+    margin-left: 20px;
+}
+
+.user-avator img {
+    display: block;
+    width: 20px;
+    height: 20px;
+}
+
+.el-dropdown-link {
+    color: #333639;
+    cursor: pointer;
+}
+
+.el-dropdown-menu__item {
+    text-align: center;
+}
+
+#colgreen {
+    color: rgb(142, 150, 74);
+}
+</style>
diff --git a/src/components/common/Home.vue b/src/components/common/Home.vue
index 6731694..272242f 100644
--- a/src/components/common/Home.vue
+++ b/src/components/common/Home.vue
@@ -1,24 +1,41 @@
 <template>
     <div class="wrapper">
-        <v-head></v-head>
-       
-        <v-sidebar ></v-sidebar>
-        <div class="content-box" :class="{ 'content-collapse': collapse }">
-            <v-tags></v-tags>
-            <div class="content">
-                <transition name="move" mode="out-in">
-                    <keep-alive :include="tagsList">
-                        <router-view ></router-view>
-                    </keep-alive>
-                </transition>
-                <el-backtop target=".content"></el-backtop>
+        <template v-if="!this.$route.meta.hideSidebar">
+            <v-head></v-head>
+
+            <v-sidebar></v-sidebar>
+            <div class="content-box" :class="{ 'content-collapse': collapse }">
+                <v-tags></v-tags>
+                <div class="content">
+                    <transition name="move" mode="out-in">
+                        <keep-alive :include="tagsList">
+                            <router-view></router-view>
+                        </keep-alive>
+                    </transition>
+                    <el-backtop target=".content"></el-backtop>
+                </div>
             </div>
-        </div>
+        </template>
+        <template v-else>
+            <v-head2 :home="true"></v-head2>
+            <div style="width: 100%;height: calc(100% - 62px);overflow: hidden;">
+                
+                <div class="content" style="padding: 0;overflow: hidden;">
+                    <transition name="move" mode="out-in">
+                        <keep-alive :include="tagsList">
+                            <router-view></router-view>
+                        </keep-alive>
+                    </transition>
+                    <el-backtop target=".content"></el-backtop>
+                </div>
+            </div>
+        </template>
     </div>
 </template>
 
 <script>
 import vHead from './Header.vue';
+import vHead2 from './Header2.vue';
 import vSidebar from './Sidebar.vue';
 import vTags from './Tags.vue';
 import bus from './bus';
@@ -31,16 +48,11 @@ export default {
     },
     components: {
         vHead,
+        vHead2,
         vSidebar,
         vTags
     },
     created() {
-        if(!this.$route.meta.hideSidebar){
-				this.collapse=true
-				
-			}else{
-                this.collapse=false
-            }
         bus.$on('collapse-content', (msg) => {
             this.collapse = msg;
             localStorage.setItem('collapse', this.collapse);
diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index 67c7620..dc7d510 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -636,12 +636,7 @@ export default {
         }
     },
     created() {
-        if(!this.$route.meta.hideSidebar){
-				this.collapse=true
-				
-			}else{
-                this.collapse=false
-            }
+       
         localStorage.setItem('collapse', this.collapse);
         if (this.userrole == 2) {
             //其余的身份（显示作者）
diff --git a/src/components/common/langs/en.js b/src/components/common/langs/en.js
index d5c9db7..b6c4ef3 100644
--- a/src/components/common/langs/en.js
+++ b/src/components/common/langs/en.js
@@ -355,6 +355,10 @@ const en = {
 	},
 	commonTable: {
 		add: 'Add',
+		delete: 'Delete',
+		reply: 'Reply',
+		solve: 'Solve',
+		Resolved: 'Resolved',
 		preview: 'Preview',
 		link: 'Positioning',
 		Typed: 'Typed',
diff --git a/src/components/common/langs/zh.js b/src/components/common/langs/zh.js
index dd34bdb..f8681aa 100644
--- a/src/components/common/langs/zh.js
+++ b/src/components/common/langs/zh.js
@@ -348,6 +348,10 @@ const zh = {
 	},
 	commonTable: {
 		add: '新增',
+		delete: '删除',
+		reply: '答复',
+		solve: '解决',
+		Resolved: '已解决',
 		preview: '预览',
 		positioning: '定位',
 		edit: '编辑',
diff --git a/src/components/page/GenerateCharts.vue b/src/components/page/GenerateCharts.vue
index 2d59230..c687420 100644
--- a/src/components/page/GenerateCharts.vue
+++ b/src/components/page/GenerateCharts.vue
@@ -1,11 +1,5 @@
 <template>
-    <div style="height:100%">
-        <!-- <div class="crumbs">
-            <el-breadcrumb separator="/">
-                <el-breadcrumb-item> <i class="el-icon-document-copy"></i> Text Proofread </el-breadcrumb-item>
-            </el-breadcrumb>
-        </div> -->
-
+    <div style="height: 100%">
         <div
             class="container"
             style="
@@ -58,7 +52,6 @@
 
                 <div class="unfetteredBox" style="height: 100%">
                     <common-word-html-type-setting
-                     
                         :urlList="{
                             img: 'api/Preaccept/getMainImages',
                             table: 'api/Preaccept/getMainTables'
@@ -79,11 +72,8 @@
                     </common-word-html-type-setting>
                 </div>
             </div>
-            <div
-                v-if="htmlContent"
-                style="width: 100%; width: calc(100% - 295px); float: right; height: calc(100%); background-color: #f8f8f9"
-            >
-                <div class="toolbar">
+            <div style="width: 100%; width: calc(100% - 285px); float: right; height: calc(100%); background-color: #e4e9ed">
+                <!-- <div class="toolbar">
                     <div class="toolbar_item" @click="handleImageAdd('img')">
                         <img src="@/assets/img/upload.png" style="object-fit: contain" />
                         <span>Add Figure </span>
@@ -92,16 +82,19 @@
                         <img src="@/assets/img/uploadTable.png" style="object-fit: contain" />
                         <span>Add Table </span>
                     </div>
-                </div>
+                </div> -->
 
-                <!---->
                 <common-word
                     v-if="htmlContent"
                     ref="commonWord"
                     :value="htmlContent"
                     :contentList="Main_List"
+                    :comments="comments"
                     :wordStyle="wordStyle"
                     @onDrop="onDrop"
+                    @saveContent="saveContent"
+                    @deleteComment="deleteComment"
+                    @editComment="editComment"
                     @loaded="loadedWord"
                     @onEdit="onEdit"
                     @onDelete="onDelete"
@@ -109,9 +102,15 @@
                     @onAddComment="onAddComment"
                     @onEditTitle="onEditTitle"
                     @changeComment="changeComment"
-                    style="width: calc(100%); height: calc(100% - 50px); margin-top: -1px"
+                    style="width: calc(100%); height: calc(100%)"
                     :style="`100%`"
-                ></common-word>
+                >
+                    <template slot="comment">
+                      <div style="" class="commentList annotations">
+                           
+                        </div> 
+                    </template>
+                </common-word>
             </div>
 
             <!-- <div style="height: 20px" v-if="Art_Doi == undefined"></div> -->
@@ -222,10 +221,10 @@
             :close-on-click-modal="false"
         >
             <el-form ref="editMes" :model="commentForm" label-width="115px">
-                
                 <el-form-item label="Select Content:" v-if="commentForm.commentLabel">
-                   <p style="background: #eef0f4;line-height: 20px;padding: 10px;box-sizing: border-box;">{{ commentForm.commentLabel }}</p>
-                   
+                    <p style="background: #eef0f4; line-height: 20px; padding: 10px; box-sizing: border-box">
+                        {{ commentForm.commentLabel }}
+                    </p>
                 </el-form-item>
                 <el-form-item label="Word">
                     <span slot="label">
@@ -297,6 +296,8 @@ import bottomTinymce from '@/components/page/components/Tinymce';
 export default {
     data() {
         return {
+            isEditComment: false,
+            comments: [],
             remarkImageUrl: 'https://submission.tmrjournals.com/public/usericon/20241222/4e77ba3f29ce3cf798b36f24dc411b76.png',
             isFirstComponentLoaded: false,
             isWordComponentLoaded: false,
@@ -428,20 +429,30 @@ export default {
         }
     },
     created() {
-        bus.$on('collapse', (msg) => {
-            this.collapse = msg;
-            localStorage.setItem('collapse', this.collapse);
-            bus.$emit('collapse-content', msg);
-        });
+        this.isShowEditComment();
         this.getDate();
+        this.getCommentList();
         // this.loadDictionary().catch(console.error);
     },
 
     activated() {
+        this.isShowEditComment();
         this.getDate();
+        this.getCommentList();
     },
 
     methods: {
+        isShowEditComment() {
+            if (localStorage.getItem('U_role')) {
+                var identity = localStorage.getItem('U_role');
+                if (identity.includes('editor')) {
+                    this.isEditComment = true;
+                } else {
+                    this.isEditComment = false;
+                }
+            }
+        },
+    
         loadedWord() {
             this.isWordComponentLoaded = true;
         },
@@ -516,8 +527,29 @@ export default {
                 this.addComment(content);
             }
         },
-
-        async saveContent(content) {
+        deleteComment(comment, index) {
+            console.log('comment at line 480:', comment);
+            if (this.isEditComment) {
+                this.$confirm(this.$t('commonTable.removeAnnotations'), 'Prompt', {
+                    confirmButtonText: 'Submit',
+                    cancelButtonText: 'Cancel',
+                    type: 'warning'
+                })
+                    .then(() => {
+                        this.$api
+                            .post('api/Preaccept/clearMainsRemark', {
+                                am_id: comment.am_id
+                            })
+                            .then((res) => {
+                                this.getDate()
+                                this.getCommentList();
+                            });
+                        // this.comments.splice(index, 1); // 删除评论
+                    })
+                    .catch(() => {});
+            }
+        },
+        async saveContent(content,am_id) {
             var that = this;
             var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : '';
             if (str == '') {
@@ -528,7 +560,7 @@ export default {
             }
             await that.$api
                 .post(that.urlList.editContent, {
-                    am_id: this.currentId,
+                    am_id: am_id,
                     content: str
                 })
                 .then(async (res) => {
@@ -684,7 +716,6 @@ export default {
         },
         async addComment(content) {
             console.log('content at line 603:', this.commentForm);
-
             var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : '';
             if (str == '') {
                 this.$message({
@@ -702,6 +733,7 @@ export default {
                         this.$forceUpdate();
                         this.commentVisible = false;
                         this.getDate();
+                        this.getCommentList();
                         this.$nextTick(() => {});
                     } else {
                         this.$message.error(res.msg);
@@ -724,51 +756,48 @@ export default {
                     }
                 );
             }
-            console.log('data at line 575:', data);
+        },
+        editComment(comment) {
+            this.commentForm = {
+                ...comment
+            };
+            this.commentVisible = true;
         },
         async onAddComment(data) {
-           
+            console.log('data at line 858:', data);
             var form = this.Main_List.find((item) => item.am_id == data.mainId);
             this.commentForm = {
-                commentLabel:data.label,
+                commentLabel: data.label ? data.label : '',
                 ...form
             };
             this.commentVisible = true;
-           
         },
         async onEditTitle(data) {
             var url;
-            switch (data.value){
+            switch (data.value) {
                 case 1:
                     url = 'api/Preaccept/changeH1';
                     break;
                 case 2:
-                url = 'api/Preaccept/changeH2';
+                    url = 'api/Preaccept/changeH2';
                     break;
                 case 3:
-                url = 'api/Preaccept/changeH3';
+                    url = 'api/Preaccept/changeH3';
                     break;
             }
-          
-        console.log('data at line 739:', data)
-        await this.$api
-                        .post(url, {
-                            am_id: data.mainId,
-                            
-                        })
-                        .then(async (res) => {
-                            this.getDate();
-                        })
-                        .catch((err) => {
-                            this.$message.error(err.msg);
-                        });
-            // var form = this.Main_List.find((item) => item.am_id == data.mainId);
-            // this.commentForm = {
-            //     commentLabel:data.label,
-            //     ...form
-            // };
-            // this.commentVisible = true;
-           
+
+            console.log('data at line 739:', data);
+            await this.$api
+                .post(url, {
+                    am_id: data.mainId
+                })
+                .then(async (res) => {
+                    this.getDate();
+                    this.getCommentList();
+                })
+                .catch((err) => {
+                    this.$message.error(err.msg);
+                });
         },
         clearButton() {
             var deleteButtons = document.querySelectorAll('.wordButtonContainer');
@@ -915,120 +944,123 @@ export default {
                 })
                 .then((res) => {
                     this.comments = res.data.list;
-                    console.log('this.comments at line 537:', this.comments);
+                    // this.positionAnnotations();
                 });
         },
         getWord() {
-            var htmlContent = `<h3 class="man_Title"  contenteditable="false">${this.detailTitle} </h3>`;
-            htmlContent += this.Main_List.map((item) => {
-                //批注
-                let contentHtml = '';
-                var isRemark = ``;
-                if (item.remark && item.remark != '') {
-                    // isRemark = `<img class="isRemark" main-id="${item.am_id}"  src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
-                    isRemark = `<span class="isRemark"  main-id="${item.am_id}"><img  class="isRemarkIcon"  main-id="${item.am_id}" src="${
-                        this.remarkImageUrl
-                    }" alt="" style="width: 20px; height: 20px" />
+//             var htmlContent = `<h3 class="man_Title"  contenteditable="false">${this.detailTitle} </h3>`;
+//             htmlContent += this.Main_List.map((item) => {
+//                 //批注
+//                 let contentHtml = '';
+//                 var isRemark = ``;
+//                 if (item.remark && item.remark != '') {
+//                     // isRemark = `<img class="isRemark" main-id="${item.am_id}"  src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
+//                     isRemark = `<span class="isRemark"  main-id="${item.am_id}"><img  class="isRemarkIcon"  main-id="${item.am_id}" src="${
+//                         this.remarkImageUrl
+//                     }" alt="" style="width: 20px; height: 20px" />
                        
-                         <span class="isRemarkIcon"  main-id="${item.am_id}" > (${item.am_id})</span>
-                        ${item.state == 0 ? `<span class="Resolved"  main-id="${item.am_id}">Resolved</span>` : ''} 
-                </span>
+//                          <span class="isRemarkIcon"  main-id="${item.am_id}" > (${item.am_id})</span>
+//                         ${item.state == 0 ? `<span class="Resolved"  main-id="${item.am_id}">Resolved</span>` : ''} 
+//                 </span>
                     
-                `;
-                }
-                // 判断是否是图片
-                if (item.type == 1) {
-                    var extension = item.image.url.split('.').pop().toLowerCase();
-                    if (extension == 'tif') {
-                        contentHtml = `
-                        <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
-                            item.am_id
-                        }">
-            <img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
-            <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
-        </p>
-                            `;
-                    } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
-                        contentHtml = `
-                                <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
-                            item.ami_id
-                        }" main-id="${item.am_id}">
-                                    ${isRemark}
-                                    <img src="${this.mediaUrl + item.image.url}" style="width: ${
-                            item.width ? `${item.width}px` : '100%'
-                        }"  />
-                                   <font  class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
-                            item.image.note ? item.image.note : ''
-                        }</font>
-                                </p>
-                            `;
-                    } else {
-                        contentHtml = `
-                                <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
-                            item.ami_id
-                        }" main-id="${item.am_id}">
-                                   ${isRemark}
-                                    <span
-                                            style="
-                                                text-align: center;
-                                                font-size: 30px;
-                                                display: flex;
-                                                align-items: center;
-                                                justify-content: center;
-                                            "
-                                        >
-                                        Figures ( .${item.image.url.split('.').pop().toUpperCase()})
-                                              </span>
+//                 `;
+//                 }
+//                 // 判断是否是图片
+//                 if (item.type == 1) {
+//                     var extension = item.image.url.split('.').pop().toLowerCase();
+//                     if (extension == 'tif') {
+//                         contentHtml = `
+//                         <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
+//                             item.am_id
+//                         }">
+//             <img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
+//             <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
+//         </p>
+//                             `;
+//                     } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
+//                         contentHtml = `
+//                                 <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
+//                             item.ami_id
+//                         }" main-id="${item.am_id}">
+//                                     ${isRemark}
+//                                     <img src="${this.mediaUrl + item.image.url}" style="width: ${
+//                             item.width ? `${item.width}px` : '100%'
+//                         }"  />
+//                                    <font  class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
+//                             item.image.note ? item.image.note : ''
+//                         }</font>
+//                                 </p>
+//                             `;
+//                     } else {
+//                         contentHtml = `
+//                                 <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
+//                             item.ami_id
+//                         }" main-id="${item.am_id}">
+//                                    ${isRemark}
+//                                     <span
+//                                             style="
+//                                                 text-align: center;
+//                                                 font-size: 30px;
+//                                                 display: flex;
+//                                                 align-items: center;
+//                                                 justify-content: center;
+//                                             "
+//                                         >
+//                                         Figures ( .${item.image.url.split('.').pop().toUpperCase()})
+//                                               </span>
 
-                                   <font  class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
-                            item.image.note ? item.image.note : ''
-                        }</font>
-                                </p>
-                            `;
-                    }
-                } else if (item.type == 2) {
-                    var tableList = JSON.parse(item.table.table_data);
+//                                    <font  class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
+//                             item.image.note ? item.image.note : ''
+//                         }</font>
+//                                 </p>
+//                             `;
+//                     }
+//                 } else if (item.type == 2) {
+//                     var tableList = JSON.parse(item.table.table_data);
 
-                    contentHtml = `
-    <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
-                        item.am_id
-                    }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
-        ${isRemark}
-        <font  class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
-                    <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
-            ${tableList
-                .map((row) => {
-                    return `
-                    <tr>
-                        ${row
-                            .map((cell) => {
-                                return `
-                                <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
-                                    <span>${cell.text || ''}</span>
-                                </td>
-                            `;
-                            })
-                            .join('')} <!-- join the cells in the row -->
-                    </tr>
-                `;
-                })
-                .join('')} <!-- join the rows -->
-        </table>
-        <font  class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
-    </div>
-`;
-                } else {
-                    contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
-                }
+//                     contentHtml = `
+//     <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
+//                         item.am_id
+//                     }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
+//         ${isRemark}
+//         <font  class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
+//                     <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
+//             ${tableList
+//                 .map((row) => {
+//                     return `
+//                     <tr>
+//                         ${row
+//                             .map((cell) => {
+//                                 return `
+//                                 <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
+//                                     <span>${cell.text || ''}</span>
+//                                 </td>
+//                             `;
+//                             })
+//                             .join('')} <!-- join the cells in the row -->
+//                     </tr>
+//                 `;
+//                 })
+//                 .join('')} <!-- join the rows -->
+//         </table>
+//         <font  class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
+//     </div>
+// `;
+//                 } else {
+//                     contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
+//                 }
 
-                // 判断是否是表格类型
+//                 // 判断是否是表格类型
 
-                return contentHtml;
-            }).join('');
-            this.htmlContent = htmlContent;
+//                 return contentHtml;
+//             }).join('');
+            // this.htmlContent = htmlContent;
+            this.htmlContent = 'true';
+            
         },
         // 获取数据
         async getDate() {
+           
             // this.isFirstComponentLoaded = false;
             // this.isWordComponentLoaded = false;
             this.imagesList = [];
@@ -1374,6 +1406,20 @@ export default {
                 this.$message.error(this.$t('commonTable.uploadImageInfo'));
             }
             return isValidFormat; // 返回false将阻止文件上传
+        },
+        positionAnnotations() {
+            this.$nextTick(() => {
+                this.comments.forEach((item) => {
+                   
+                    const contentElement = document.querySelector('[remark-main-id="' + item.am_id + '"]');
+                    const annotationElement = document.querySelector('[data-target="main-' + item.am_id + '"]');
+                    if (contentElement && annotationElement) {
+                        const rect = contentElement.getBoundingClientRect();
+                        annotationElement.style.position = 'absolute';
+                        annotationElement.style.top = `${rect.top}px`;
+                    }
+                });
+            });
         }
     }
 };
@@ -1688,4 +1734,42 @@ export default {
 .editFormPizhu img {
     margin-right: 10px;
 }
+.go-content-box {
+    background-color: #f2f3f5;
+}
+.commentList {
+    width: 350px !important;
+    
+    padding: 15px;
+    position: relative;
+    box-sizing: border-box;
+    /* background-color: #fafafa; */
+    background-color: #fafafa;
+    box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
+}
+
+/* 为整个页面的滚动条设置样式 */
+::-webkit-scrollbar {
+    width: 8px; /* 垂直滚动条的宽度 */
+    height: 8px; /* 水平滚动条的高度 */
+}
+
+/* 滚动条轨道样式 */
+::-webkit-scrollbar-track {
+    background: #f1f1f1; /* 滚动条轨道颜色 */
+    border-radius: 10px; /* 轨道圆角 */
+}
+
+/* 滚动条滑块样式 */
+::-webkit-scrollbar-thumb {
+    background: #888; /* 滚动条滑块颜色 */
+    border-radius: 10px; /* 滑块圆角 */
+}
+
+/* 滑块在悬停时的样式 */
+::-webkit-scrollbar-thumb:hover {
+    background: #555; /* 滑块悬停时的颜色 */
+}
+
+
 </style>
diff --git a/src/components/page/components/table/comment.vue b/src/components/page/components/table/comment.vue
new file mode 100644
index 0000000..8e84e92
--- /dev/null
+++ b/src/components/page/components/table/comment.vue
@@ -0,0 +1,1022 @@
+<template>
+    
+        <!-- myeditablediv -->
+        <div style="" class="commentList annotations">
+            <li
+                v-for="(comment, index) in comments"
+                :key="index"
+                class="comment-item annotation"
+                :data-target="`main-${comment.am_id}`"
+                style="width: calc(100% - 30px); padding: 6px 0"
+            >
+                <div>
+                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px">
+                        <el-link class="pizhu">
+                            <span style="color: #fc625d; display: flex; align-items: center">
+                                <img
+                                    class="isRemark"
+                                    src="@/assets/img/isRemark.png"
+                                    alt=""
+                                    style="width: 15px; height: 15px; margin-right: 6px"
+                                />
+                                {{ comment.am_id }}</span
+                            ></el-link
+                        >
+                        <div>
+                        <span style="color: #b8b7b7; font-size: 14px">{{ getTime(comment.ctime) }}</span><span style="color: #aaa; font-size: 14px;margin:0 4px;">|</span>    
+                        </div>
+                        
+                    </div>
+                    <div style="display: flex; align-items: center; justify-content: space-between">
+                        <p
+                            class="myeditabledivComment"
+                            :style="isEditComment ? 'width: calc(100% - 40px)' : 'width: calc(100%)'"
+                            style="line-height: 18px; min-height: 20px; width: calc(100%); white-space: normal"
+                            v-html="comment.remark"
+                        >
+                            <span @click="editComment(index)" style="cursor: pointer; color: #007bff; margin-left: 10px">Edit</span>
+                        </p>
+                        <!-- <i
+                            class="el-icon-edit"
+                            v-if="isEditComment"
+                            @click="onAddComment(comment, index)"
+                            style="color: #006699; margin-right: 10px"
+                        ></i> -->
+                        <i
+                            class="el-icon-delete"
+                            v-if="isEditComment"
+                            @click="deleteComment(comment, index)"
+                            style="color: rgb(252, 98, 93)"
+                        ></i>
+                    </div>
+                </div>
+            </li>
+        </div>
+    
+</template>
+<script>
+import { mediaUrl } from '@/common/js/commonJS.js'; // 引入通用逻辑
+import { string } from 'html-docx-js/dist/html-docx';
+import htmlDocx from 'html-docx-js/dist/html-docx.js';
+import { Document, Packer, PageOrientation, Paragraph, TextRun } from 'docx'; // 引入 docx.js
+import html2canvas from 'html2canvas';
+const toolbar = 'addImageButton ';
+const tableStyle = ` `;
+
+export default {
+    name: 'tinymce',
+    components: {},
+    props: {
+        id: {
+            type: String
+        },
+        readonly: {
+            type: Boolean,
+            default() {
+                return false;
+            }
+        },
+        value: {
+            type: String,
+            default: ''
+        },
+        isEdit: {},
+        toolbar: {
+            type: Array,
+            required: false,
+            default() {
+                return [];
+            }
+        },
+        comments: {
+            type: Array,
+            required: false,
+            default() {
+                return [];
+            }
+        },
+        contentList: {
+            type: Array,
+
+            default() {
+                return [];
+            }
+        },
+        menubar: {
+            default: 'file edit insert view format table '
+        },
+        height: {
+            type: Number,
+            required: false,
+            default: 360
+        },
+        width: {
+            type: String,
+            required: false,
+            default: '100%'
+        },
+        isShowArtWorkButton: {
+            default: false
+        },
+        wordStyle: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            mediaUrl: mediaUrl, //
+            lastTag: null,
+            isEditComment: false,
+            typesettingType: 1,
+            typesettingTypeOptions: [
+                {
+                    label: this.$t('commonTable.typesettingType1'),
+                    value: 1,
+                    orientation: 'portrait',
+                    pageSize: {
+                        width: 11906,
+                        height: 16976
+                    },
+                    pageMargins: {
+                        top: 1440,
+                        bottom: 1440,
+                        left: 1084,
+                        right: 1084
+                    }
+                },
+                //  1 cm = 144 Twip 上边距（2.54 cm） = 2.54 × 144 = 365.76 Twip
+                {
+                    label: this.$t('commonTable.typesettingType2'),
+                    value: 2,
+                    orientation: 'landscape',
+                    pageSize: {
+                        width: 16976,
+                        height: 11906
+                    },
+                    pageMargins: {
+                        top: 1440,
+                        bottom: 1440,
+                        left: 1084,
+                        right: 1084
+                    }
+                }
+            ],
+            uploadReset: false,
+            dialogVisible: false,
+            form: {
+                name: '',
+                region: '',
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            },
+            formLabelWidth: '120px',
+            hasChange: false,
+            hasInit: false,
+
+            tinymceId: this.id || 'vue-tinymce-' + +new Date()
+        };
+    },
+    // this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(newVal));
+    watch: {
+        value(newVal) {
+            this.$nextTick(() => {
+                window.tinymce.get(this.tinymceId).setContent(newVal);
+                this.$emit('loaded');
+            });
+        }
+    },
+    mounted() {
+        // this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
+
+        this.isShowEditComment();
+        this.typesettingType = 1;
+        this.initTinymce();
+    },
+    activated() {
+        this.isShowEditComment();
+        this.typesettingType = 1;
+        this.initTinymce();
+    },
+    deactivated() {
+        this.destroyTinymce();
+    },
+    methods: {
+        getTime(timestamp) {
+            // 创建一个新的 Date 对象
+
+            // 转换为 Date 对象（乘以 1000，因为 JavaScript 使用毫秒）
+            const date = new Date(timestamp * 1000);
+
+            // 获取年、月、日、时、分、秒
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的，所以加 1
+            const day = String(date.getDate()).padStart(2, '0');
+            const hours = String(date.getHours()).padStart(2, '0');
+            const minutes = String(date.getMinutes()).padStart(2, '0');
+            const seconds = String(date.getSeconds()).padStart(2, '0');
+
+            // 格式化为 年-月-日 时:分:秒
+            const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
+
+            console.log(formattedDate); // 输出: 2025-10-20 15:30:03
+
+            return formattedDate;
+        },
+        divOnScroll() {
+            console.log('111 at line 358:', 111);
+            var deleteButtons = document.querySelectorAll('.tox-tinymce-inline');
+            if (deleteButtons) {
+                deleteButtons.forEach(function (button) {
+                    button.remove(); // 移除每个 wordButtonContainer 按钮
+                });
+            }
+        },
+        isShowEditComment() {
+            if (localStorage.getItem('U_role')) {
+                var identity = localStorage.getItem('U_role');
+
+                if (identity.includes('editor')) {
+                    this.isEditComment = true;
+                } else {
+                    this.isEditComment = false;
+                }
+            }
+        },
+        // 查看评论详情
+
+        handleSubmit() {
+            this.$refs.uploadImage.handleSubmit();
+        },
+        getDetail(val) {
+            if (this.hasInit == true) {
+                this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val));
+            }
+        },
+        //将字符串添加到富文本编辑器中
+        addArtWork(str) {
+            window.tinymce.get(this.tinymceId).insertContent(str);
+        },
+        onClick(e) {
+            this.$emit('onClick', e, tinymce);
+        },
+
+        changeTable() {
+            // 获取所有表格
+            const tables = window.tinymce.get(this.tinymceId).getBody().querySelectorAll('table');
+            console.log('tables at line 110:', tables);
+
+            // 遍历并设置样式
+            tables.forEach((table) => {
+                console.log('table at line 360:', table);
+                const editor = window.tinymce.get(this.tinymceId);
+                editor.dom.setStyles(table, {
+                    width: this.typesettingType == 1 ? '17.18cm' : '25.88cm'
+                });
+            });
+
+            this.$forceUpdate();
+        },
+        goToComment(mainId) {
+            var ed = window.tinymce.get(this.tinymceId);
+            const editorDoc = ed.getDoc(); // 获取 TinyMCE 内部的 document
+            console.log('Looking for element with main-id:', mainId); // 调试输出
+
+            // 在 iframe 内部的 document 中查找带有 main-id 的元素
+            const commentElement = editorDoc.querySelector(`[main-id="${mainId}"]`);
+
+            if (commentElement) {
+                commentElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            } else {
+                console.log('没有找到对应的批注元素', mainId); // 调试输出
+            }
+        },
+        initTinymce() {
+            var _this = this;
+            _this.$emit('positionAnnotations');
+            // non-breaking
+            window.tinymce.init({
+                selector: '.myeditabledivComment',
+                inline: true,
+                license_key: 'gpl', // 使用开源 GPL 许可证
+                content_css: false,
+                table_resize_bars: true,
+                valid_elements: '*[*]',
+                plugins: 'forecolor code paste table image resize searchreplace',
+                content_style: `${tableStyle + this.wordStyle}
+                
+                                      
+                                      
+                                      
+                                      .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1){
+                                           font-weight:bold !important;
+                                            color: #007bff; /* 设置字体颜色 */
+                                       }
+                                    
+                                      .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(2){
+                                            font-weight:bold !important;
+                                            color: #007bff; /* 设置字体颜色 */
+                                            text-decoration: line-through;
+                                       }
+                                      
+                                      `,
+                menubar: false,
+                toolbar: [
+                    
+                    ' bold italic |  subscript superscript | customBlue removeBlue   '
+                ],
+                end_container_on_empty_block: true,
+                content_css: 'default ',
+                setup(ed) {
+                 
+                   
+                   
+
+                    // 定义自定义按钮
+                    ed.ui.registry.addButton('clearButton', {
+                        text: 'Empty',
+
+                        onAction: () => {
+                            // 插入自定义表格到编辑器中
+                            ed.setContent('');
+                        }
+                    });
+
+                    ed.ui.registry.addButton('customBlue', {
+                        text: 'Blue', // 按钮文本
+                        onAction: function () {
+                            // 在选中的文本周围包裹 <blue> 标签
+                            var selectedText = ed.selection.getContent();
+                            console.log('selectedText at line 529:', selectedText);
+                            if (selectedText) {
+                                var wrappedText = `<blue>${selectedText}</blue>`;
+                                ed.selection.setContent(wrappedText);
+                            } else {
+                                this.$message.error('请选择要添加蓝色的文本');
+                            }
+                        }
+                    });
+                    ed.ui.registry.addButton('removeBlue', {
+                        text: 'Blue', // 按钮文本
+                        onAction: function () {
+                            const range = ed.selection.getRng(); // 获取选区范围
+                            let startNode = range.startContainer; // 获取选区起始节点
+                            let closestBlue = null;
+
+                            // 向上查找最近的 <blue> 标签
+                            while (startNode) {
+                                if (startNode.nodeName && startNode.nodeName.toLowerCase() === 'blue') {
+                                    closestBlue = startNode;
+                                    break;
+                                }
+                                startNode = startNode.parentNode;
+                            }
+
+                            if (closestBlue) {
+                                // 如果找到最近的 <blue> 标签，移除它的外层标签，但保留内容
+                                const parent = closestBlue.parentNode;
+                                while (closestBlue.firstChild) {
+                                    parent.insertBefore(closestBlue.firstChild, closestBlue);
+                                }
+                                parent.removeChild(closestBlue);
+                            } else {
+                                // 未找到 <blue> 标签，仅移除选中的 <blue> 标签内容
+                                const selectedContent = ed.selection.getContent({ format: 'html' });
+
+                                // 使用正则表达式移除选区中的 <blue> 标签
+                                const cleanedContent = selectedContent
+                                    .replace(/<blue[^>]*>/g, '') // 删除起始标签 <blue>
+                                    .replace(/<\/blue>/g, ''); // 删除结束标签 </blue>
+
+                                // 更新选中的内容
+                                ed.selection.setContent(cleanedContent);
+                            }
+                        }
+                    });
+                },
+                init_instance_callback: (editor) => {
+                    // if (_this.value) {
+                    //     editor.setContent(_this.value);
+                    //     _this.$emit('loaded');
+                    // }
+                    // _this.hasInit = true;
+                    // editor.on('NodeChange Change KeyUp SetContent', () => {
+                    //     this.hasChange = true;
+                    //     this.$emit('input', editor.getContent());
+                    // });
+                    // const iframeDocument = editor.getDoc(); // 使用 ed.getDoc() 获取编辑器的 document
+                    // if (iframeDocument) {
+                    //     iframeDocument.addEventListener('scroll', function () {
+                    //         if (wordButtonContainer) {
+                    //             wordButtonContainer.remove();
+                    //             wordButtonContainer = null;
+                    //         }
+                    //         if (_this.lastTag) {
+                    //             _this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
+                    //             _this.lastTag.style.border = '';
+                    //         }
+                    //     });
+                    // }
+                }
+            });
+        },
+        //     initTinymce() {
+        //         var deleteButtons = document.querySelectorAll('.wordButtonContainer');
+        //         if (deleteButtons) {
+        //             deleteButtons.forEach(function (button) {
+        //                 button.remove(); // 移除每个 wordButtonContainer 按钮
+        //             });
+        //         }
+
+        //         let isDeleting = false;
+        //         let currentParagraph = null; // 用来存储当前选中的 <p> 元素
+        //         let wordButtonContainer = null; // 用来存储删除按钮
+        //         const _this = this;
+        //         window.tinymce.init({
+        //             height: '100%',
+        //             resize: true,
+        //             readonly: true, // 设置为只读模式
+        //             selector: `#${this.tinymceId}`,
+        //             content_css: false,
+        //             table_resize_bars: true,
+        //             valid_elements: '*[*]',
+        //             paste_preprocess: function (plugin, args) {
+        //                 let content = args.content;
+        //                 const container = document.createElement('div');
+        //                 container.innerHTML = content;
+        //                 _this.updateTableStyles(container);
+        //                 args.content = container.innerHTML;
+        //             },
+        //             content_style: `${tableStyle + this.wordStyle}.tox .tox-edit-area::before{
+        //                 border:none;
+        //             }
+        //             .isRemark {
+        //                 display:flex;
+
+        // align-items:center;
+        //                 position:absolute;
+        //                 top:-12px;
+        //                 left:-12px;
+        //                 z-index:2;
+        //                 cursor: pointer;
+
+        //             }
+        //             .isRemark img{
+        //                 width:15px;
+        //                 height:15px;
+        //                 margin-right:4px;
+
+        //             }
+        //             .isRemark span{
+        //                 background-color: #fef0f0;
+        // border-color: #fde2e2;
+        // padding: 0 5px;
+        // line-height: 19px;
+        // color: #f56c6c;
+        // font-size: 12px;display:inline-block;
+
+        //             }
+        //             .isRemark .Resolved{
+        //                 background-color: #f0f9eb;
+        //                 margin-left:10px;
+        // border-color: #67c23a;
+        // color:#67c23a;
+        // font-weight:bold;
+        // border-radius:2px;
+
+        //             }
+
+        //             img{
+        //                 max-width:580px;
+        //             }blue {
+        //                     color: rgb(0, 130, 170) !important;
+        //                 }
+        //             `,
+        //             formats: {
+        //                 bold: { inline: 'b' },
+        //                 italic: { inline: 'i' }
+        //             },
+        //             body_class: 'panel-body ',
+        //             object_resizing: false,
+        //             toolbar: [],
+        //             menubar: false,
+        //             statusbar: false,
+        //             custom_colors: false,
+        //             color_map: ['000000', 'Black', '0082AA', 'TMR Blue'],
+        //             plugins: 'forecolor code paste table image resize',
+        //             end_container_on_empty_block: true,
+        //             content_css: 'default ',
+
+        //             setup(ed) {
+        //                 ed.ui.registry.addButton('customBlue', {
+        //                     text: 'Blue', // 按钮文本
+        //                     onAction: function () {
+        //                         // 在选中的文本周围包裹 <blue> 标签
+        //                         var selectedText = ed.selection.getContent();
+        //                         var wrappedText = `<blue>${selectedText}</blue>`;
+        //                         ed.selection.setContent(wrappedText);
+        //                     }
+        //                 });
+        //                 ed.ui.registry.addButton('removeBlue', {
+        //   text: 'Remove Blue', // 按钮文本
+        //   onAction: function () {
+        //     var content = ed.selection.getContent(); // 获取选中的文本内容
+
+        //     // 如果选中内容中有 <blue> 标签，去掉它们
+        //     var cleanedContent = content.replace(/<\/?blue>/g, ''); // 删除所有 <blue> 和 </blue> 标签
+
+        //     // 更新编辑器中的内容
+        //     ed.selection.setContent(cleanedContent);
+        //   }
+        // });
+        //                 if (!_this.readonly) {
+        //                     ed.on('click', function (e) {
+        //                         // 判断点击的是否是目标元素
+        //                         const target = e.target;
+        //                         console.log('target at line 351:', target);
+
+        //                         if (target.classList.contains('isRemarkIcon')||target.classList.contains('Resolved')) {
+        //                             _this.$emit('onComment', target.getAttribute('main-id'));
+        //                         }
+        //                     });
+        //                     // // 添加批注按钮
+        //                     ed.ui.registry.addButton('addImageButton', {
+        //                         text: 'Add Figure',
+        //                         icon: 'comment',
+        //                         onAction: function () {
+        //                             _this.$emit('add', img);
+        //                             // const selection = ed.selection;
+        //                             // const selectedNode = selection.getNode(); // 获取选中的节点
+        //                             // console.log('selectedNode at line 333:', selectedNode);
+        //                             // if (selectedNode) {
+        //                             //     const comment = prompt('Enter your comment:');
+        //                             //     if (comment) {
+        //                             //         const dataId = selectedNode.getAttribute('main-id');
+        //                             //         _this.comments.push({ text: comment, time: new Date().getTime(), mId: dataId });
+        //                             //     }
+        //                             // } else {
+        //                             //     alert('Please select some text to comment on.');
+        //                             // }
+        //                         }
+        //                     });
+        //                     ed.on('dragstart', (e) => {
+        //                         // 阻止拖动事件
+        //                         e.preventDefault();
+        //                     });
+        //                     // 监听焦点变化并高亮当前选中的元素
+        //                     ed.on('focus', function () {
+        //                         if (!isDeleting) {
+        //                             // 处理正常的焦点逻辑
+        //                             ed.getBody().style.outline = 'none'; // 当编辑器获取焦点时，移除焦点框
+        //                             _this.updateCurrentTag(ed);
+        //                         }
+        //                     });
+        //                     // 监听焦点变化并高亮当前选中的元素
+        //                     ed.on('selectionChange', function () {
+        //                         _this.updateCurrentTag(ed);
+        //                     });
+
+        //                     ed.on('mouseup', function () {
+        //                         _this.updateCurrentTag(ed);
+        //                     });
+        //                     ed.on('blur', function () {
+        //                         console.log('_this.lastPTag at line 367:', _this.lastTag);
+        //                         if (_this.lastTag) {
+        //                             _this.lastTag.style.backgroundColor = ''; // 清除之前的高亮
+        //                             _this.lastTag.style.border = '';
+        //                             _this.lastTag = null;
+        //                         }
+        //                         if (wordButtonContainer) {
+        //                             wordButtonContainer.remove();
+        //                             wordButtonContainer = null;
+        //                         }
+        //                     });
+        //                     ed.on('drop', (event, index) => {
+        //                         console.log('event at line 375:', event);
+
+        //                         const selection = ed.selection;
+        //                         const selectedNode = selection.getNode(); // 获取选中的节点
+        //                         console.log('1899', selectedNode); // 查看光标位置的节点类型
+
+        //                         // 向上遍历直到找到带有 main-id 属性的节点
+        //                         const findParentWithMainId = (node) => {
+        //                             while (node) {
+        //                                 if (node.hasAttribute && node.classList.contains('pMain')) {
+        //                                     return node; // 找到并返回该节点
+        //                                 }
+        //                                 node = node.parentNode; // 向上遍历父节点
+        //                             }
+        //                             return null; // 如果没有找到，返回 null
+        //                         };
+
+        //                         // 查找选中节点的父节点，直到找到带有 main-id 属性的节点
+        //                         const nodeWithMainId = findParentWithMainId(selectedNode);
+        //                         console.log('at line 395:', nodeWithMainId);
+        //                         const dataId = nodeWithMainId.getAttribute('main-id');
+        //                         event.preventDefault();
+        //                         hideDeleteButton();
+        //                         // 获取拖动的数据
+        //                         _this.$emit('onDrop', event, dataId); // 阻止默认的行为
+        //                         // 在编辑器中插入数据
+        //                         // const content = <div class="dropped-item">${itemData}</div>;
+        //                         // ed.insertContent(content); // 插入文本或HTML
+        //                     });
+        //                     // 方法：更新当前选中的 p 标签的样式
+        //                     _this.updateCurrentTag = function (ed) {
+        //                         var selection = ed.selection;
+        //                         var node = selection.getNode();
+
+        //                         // 向上查找包含的节点直到找到合适的标签
+        //                         if (node && !node.classList.contains('pMain')) {
+        //                             node = node.closest('.pMain'); // 向上找到最近的包含 'aa' 类的标签
+        //                         }
+
+        //                         if (node && node.classList.contains('pMain')) {
+        //                             // 清除上一个高亮的节点样式
+        //                             if (_this.lastTag && _this.lastTag !== node) {
+        //                                 _this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
+        //                                 _this.lastTag.style.border = '';
+        //                             }
+
+        //                             // 设置当前节点的背景色和边框
+        //                             node.style.backgroundColor = 'rgb(0 102 153 / 10%)';
+        //                             node.style.border = '2px dashed rgb(0 102 153 / 50%)';
+
+        //                             // 更新选中的节点
+        //                             var currentNode = node;
+
+        //                             // 显示删除按钮
+        //                             showDeleteButton(currentNode);
+
+        //                             // 更新 lastTag
+        //                             _this.lastTag = node;
+        //                         } else {
+        //                             // 如果没有找到包含 'aa' 类的节点，隐藏删除按钮
+        //                             hideDeleteButton();
+        //                         }
+        //                     };
+        //                     function hideDeleteButton() {
+        //                         if (wordButtonContainer) {
+        //                             wordButtonContainer.remove(); // 移除删除按钮
+        //                             wordButtonContainer = null; // 清空按钮引用
+        //                         }
+        //                     }
+        //                     function showDeleteButton(paragraph) {
+        //                         if (wordButtonContainer) {
+        //                             wordButtonContainer.remove(); // 如果已有按钮容器，移除
+        //                         }
+
+        //                         // 获取 <p> 标签的位置信息
+        //                         const paragraphRect = paragraph.getBoundingClientRect();
+        //                         const iframe = ed.getDoc().defaultView.frameElement;
+        //                         const iframeRect = iframe.getBoundingClientRect();
+        //                         var left = 0;
+        //                         if (_this.isEditComment) {
+        //                             left = 100;
+        //                         } else {
+        //                             left = 80;
+        //                         }
+        //                         // 创建按钮容器 div
+        //                         wordButtonContainer = document.createElement('div');
+        //                         wordButtonContainer.style.position = 'absolute';
+        //                         wordButtonContainer.style.top = `${iframeRect.top + paragraphRect.top + window.scrollY - 20}px`; // 确保按钮容器位于 <p> 标签旁边
+        //                         wordButtonContainer.style.left = `${iframeRect.left + paragraphRect.left + paragraphRect.width - left}px`;
+        //                         wordButtonContainer.style.zIndex = '9999'; // 设置更高的值
+        //                         wordButtonContainer.style.display = 'flex'; // 使用 flex 布局将按钮水平排列
+        //                         wordButtonContainer.style.alignItems = 'center'; // 垂直居中
+
+        //                         // 创建删除按钮
+        //                         const deleteButton = document.createElement('button');
+        //                         deleteButton.style.backgroundColor = 'red';
+        //                         deleteButton.style.color = 'white';
+        //                         deleteButton.style.border = 'none';
+        //                         deleteButton.style.borderRadius = '50%';
+        //                         deleteButton.style.padding = '5px';
+        //                         deleteButton.style.cursor = 'pointer';
+        //                         deleteButton.style.marginLeft = '10px'; // 给批注按钮添加间距
+        //                         const deleteIcon = document.createElement('i');
+        //                         deleteIcon.classList.add('el-icon-delete'); // 使用 Element UI 删除图标
+        //                         deleteIcon.style.fontSize = '20px';
+        //                         deleteIcon.style.color = '#fff'; // 设置图标颜色
+        //                         deleteButton.appendChild(deleteIcon);
+        //                         deleteButton.addEventListener('mousedown', function (e) {
+        //                             e.stopImmediatePropagation();
+        //                             e.preventDefault();
+
+        //                             _this.$emit('onDelete', paragraph.getAttribute('main-id'));
+        //                         });
+
+        //                         // 创建批注按钮
+        //                         const editButton = document.createElement('button');
+        //                         editButton.style.backgroundColor = 'rgb(19, 188, 32)';
+        //                         editButton.style.color = 'white';
+        //                         editButton.style.border = 'none';
+        //                         editButton.style.borderRadius = '50%';
+        //                         editButton.style.padding = '5px';
+        //                         editButton.style.marginLeft = '10px'; // 给批注按钮添加间距
+        //                         editButton.style.cursor = 'pointer';
+
+        //                         const editIcon = document.createElement('i');
+        //                         editIcon.classList.add('el-icon-edit'); // 使用 Element UI 批注图标
+        //                         editIcon.style.fontSize = '20px';
+        //                         editIcon.style.color = '#fff'; // 设置图标颜色
+
+        //                         editButton.appendChild(editIcon);
+        //                         editButton.addEventListener('mousedown', function (e) {
+        //                             e.stopImmediatePropagation();
+        //                             e.preventDefault();
+        //                             // 触发批注事件
+        //                             _this.$emit('onEdit', paragraph.getAttribute('main-id'));
+        //                         });
+
+        //                         // 将按钮添加到容器中
+        //                         wordButtonContainer.appendChild(editButton);
+        //                         wordButtonContainer.appendChild(deleteButton);
+
+        //                         if (_this.isEditComment) {
+        //                             // 创建批注按钮
+        //                             const commentButton = document.createElement('button');
+        //                             commentButton.style.backgroundColor = '#2b81ef';
+        //                             commentButton.style.color = 'white';
+        //                             commentButton.style.border = 'none';
+        //                             commentButton.style.borderRadius = '50%';
+        //                             commentButton.style.padding = '5px';
+        //                             commentButton.style.marginLeft = '10px'; // 给批注按钮添加间距
+        //                             commentButton.style.cursor = 'pointer';
+
+        //                             const commentIcon = document.createElement('i');
+        //                             commentIcon.classList.add('el-icon-chat-dot-square'); // 使用 Element UI 批注图标
+        //                             commentIcon.style.fontSize = '20px';
+        //                             commentIcon.style.color = '#fff'; // 设置图标颜色
+
+        //                             commentButton.appendChild(commentIcon);
+        //                             commentButton.addEventListener('mousedown', function (e) {
+        //                                 e.stopImmediatePropagation();
+        //                                 e.preventDefault();
+        //                                 // 触发批注事件
+        //                                 _this.$emit('onAddComment', paragraph.getAttribute('main-id'));
+        //                                 if (wordButtonContainer) {
+        //                                     wordButtonContainer.remove(); // 移除删除按钮
+        //                                     wordButtonContainer = null; // 清空按钮引用
+        //                                 }
+        //                             });
+
+        //                             wordButtonContainer.appendChild(commentButton);
+        //                         }
+
+        //                         wordButtonContainer.classList.add('wordButtonContainer'); // 给按钮
+        //                         // 将容器添加到页面中
+        //                         document.body.appendChild(wordButtonContainer);
+        //                     }
+        //                     ed.on('mousedown', function (e) {
+        //                         // 检查点击的位置是否是删除按钮或选中的 <p> 标签
+        //                         if (!currentParagraph || (e.target !== wordButtonContainer && !currentParagraph.contains(e.target))) {
+        //                             if (wordButtonContainer) {
+        //                                 wordButtonContainer.remove(); // 移除删除按钮
+        //                                 wordButtonContainer = null; // 清空按钮引用
+        //                             }
+        //                         }
+        //                     });
+        //                 }
+        //             },
+
+        //             init_instance_callback: (editor) => {
+        //                 if (_this.value) {
+        //                     editor.setContent(_this.value);
+        //                     _this.$emit('loaded');
+        //                 }
+        //                 _this.hasInit = true;
+        //                 editor.on('NodeChange Change KeyUp SetContent', () => {
+        //                     this.hasChange = true;
+        //                     this.$emit('input', editor.getContent());
+        //                 });
+
+        //                 const iframeDocument = editor.getDoc(); // 使用 ed.getDoc() 获取编辑器的 document
+        //                 if (iframeDocument) {
+        //                     iframeDocument.addEventListener('scroll', function () {
+        //                         if (wordButtonContainer) {
+        //                             wordButtonContainer.remove();
+        //                             wordButtonContainer = null;
+        //                         }
+
+        //                         if (_this.lastTag) {
+        //                             _this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
+        //                             _this.lastTag.style.border = '';
+        //                         }
+        //                     });
+        //                 }
+        //             }
+        //         });
+        //     },
+
+        // 显示选中的批注内容
+        viewCommentDetail(comment) {
+            this.selectedComment = comment.text;
+        },
+
+        // 关闭批注详情
+        closeCommentDetails() {
+            this.selectedComment = null;
+        },
+        replacePlaceholderImage(ami_id, realImgSrc) {
+            console.log('realImgSrc at line 638:', ami_id, realImgSrc);
+            const iframeDocument = window.tinymce.get(this.tinymceId).getDoc();
+            console.log('iframeDocument at line 639:', iframeDocument);
+            const placeholderImg = iframeDocument.querySelector(`img[data-img-id="${ami_id}"]`);
+            console.log('placeholderImg at line 640:', placeholderImg);
+
+            if (placeholderImg) {
+                placeholderImg.src = realImgSrc; // 替换图片 URL
+                placeholderImg.removeAttribute('data-img-id'); // 删除标识属性
+            }
+        },
+        // 提取 Word 文件中的表格
+
+        updateTableStyles(container) {
+            var html = this.$commonJS.updateTableStyles(container, this.typesettingType);
+            var editor = window.tinymce.activeEditor; // 将外部 DOM 内容更新到编辑器
+            const container1 = document.createElement('div');
+            container1.innerHTML = html; // html 是更新后的 HTML 内容
+            editor.setContent(container1.innerHTML); // 更新编辑器内容
+            editor.focus(); // 聚焦到编辑器// 触发编辑器内容变化后，如果需要，可能还要设置编辑器的样式
+        },
+        //销毁富文本
+        destroyTinymce() {
+            if (window.tinymce.get(this.tinymceId)) {
+                window.tinymce.get(this.tinymceId).destroy();
+            }
+        },
+        //设置内容
+        setContent(value) {
+            window.tinymce.get(this.tinymceId).setContent(value);
+        },
+        //获取内容
+        getContent(type) {
+            this.$emit('getContent', type, window.tinymce.get(this.tinymceId).getContent());
+        },
+
+        async export(type, data) {
+            if (type == 'table') {
+                var tableHtml = `<html xmlns:w="urn:schemas-microsoft-com:office:word">
+                                    <head>
+                                        <style>
+
+                                        ${tableStyle}
+                                        </style>
+                                    </head>
+                                    <body>
+                                        ${data}
+                                    </body>
+                                </html>`;
+
+                const converted = htmlDocx.asBlob(tableHtml, {
+                    orientation: this.typesettingTypeOptions[this.typesettingType - 1].orientation,
+                    pageSize: {
+                        ...this.typesettingTypeOptions[this.typesettingType - 1].pageSize
+                    },
+                    pageMargins: {
+                        ...this.typesettingTypeOptions[this.typesettingType - 1].pageMargins
+                    }
+                });
+                // const converted = htmlDocx.asBlob(tableHtml); // 将 HTML 转换为 Word Blob
+                // 触发文件下载
+                const link = document.createElement('a');
+                link.href = URL.createObjectURL(converted);
+                link.download = 'table.docx';
+                link.click();
+            } else if (type == 'image') {
+                const hiddenContainer = document.createElement('div');
+                hiddenContainer.style.position = 'absolute';
+                hiddenContainer.style.left = '-9999ppx';
+                hiddenContainer.style.top = '0';
+                hiddenContainer.innerHTML = data;
+                const style = document.createElement('style');
+                style.innerHTML = `${tableStyle}`;
+                document.head.appendChild(style);
+                document.body.appendChild(hiddenContainer);
+                // 使用 html2canvas 捕获表格内容
+                const table = hiddenContainer.querySelector('table'); // 找到表格
+                table.style.border = 'none';
+                // 使用 html2canvas 将内容转为图片
+                html2canvas(hiddenContainer, {
+                    scale: 2, // 提高图片的分辨率，默认为1，设置为2可以使图片更清晰
+                    logging: false, // 禁用日志输出
+                    useCORS: true, // 允许跨域图像
+                    allowTaint: true // 允许污染 canvas，解决图片链接不可用问题
+                })
+                    // 清空现有内容，显示图片
+                    .then((canvas) => {
+                        const imgData = canvas.toDataURL('image/png'); // 创建一个图片对象
+                        const link = document.createElement('a'); // 创建一个链接并下载图片
+                        link.href = imgData;
+                        link.download = 'image.png';
+                        link.click();
+                    });
+            }
+        },
+        inlineStyles(element) {
+            const styles = window.getComputedStyle(element);
+            for (let style in styles) {
+                if (styles.hasOwnProperty(style)) {
+                    element.style[style] = styles[style];
+                }
+            }
+        },
+
+        //获取上传图片后的地址，并设置图片样式
+        tableSuccessCBK(arr) {
+            console.log(arr, '222');
+            const _this = this;
+            window.tinymce.get(_this.tinymceId).insertContent(arr);
+        }
+    },
+    destroyed() {
+        this.destroyTinymce();
+    }
+};
+</script>
+<style scoped>
+::v-deep .tox-tinymce-aux {
+    z-index: 9999 !important;
+}
+::v-deep .tox .tox-menu {
+    z-index: 9999 !important;
+}
+/* 自定义按钮样式 */
+.custom-btn {
+    background-color: #28a745 !important;
+    color: #fff !important;
+    border-radius: 4px;
+    padding: 5px 10px;
+    font-weight: bold;
+}
+.custom-btn:hover {
+    background-color: #218838 !important;
+}
+/* 批注的样式 */
+.comment {
+    position: relative;
+    background-color: #ffeb3b;
+    color: black;
+    padding: 2px 5px;
+    border-radius: 5px;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.comment::after {
+    content: attr(title);
+    position: absolute;
+    top: -20px;
+    left: 0;
+    background-color: #f1f1f1;
+    padding: 5px;
+    border-radius: 5px;
+    font-size: 12px;
+    display: none;
+    white-space: nowrap;
+    max-width: 150px;
+    word-wrap: break-word;
+}
+
+.comment:hover::after {
+    display: block;
+}
+.myeditabledivComment p {
+    position: relative;
+    padding: 8px 15px;
+    min-height: 22px;
+    border: 0px dashed #fff;
+    border-radius: 5px;
+    color: #606266;
+}
+.myeditabledivComment p {
+    font-size: 14px;
+    line-height: 22px;
+}
+
+
+
+
+::v-deep .tox.tox-tinymce-inline {
+    z-index: 9999 !important;
+}
+.commentList {
+    width: 400px;
+    min-width: 300px;
+    max-width: 400px;
+    padding: 15px;
+    position: relative;
+    box-sizing: border-box;
+    /* background-color: #fafafa; */
+    background-color: #fafafa;
+    box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
+}
+.commentList li {
+    list-style: none;
+}
+</style>
diff --git a/src/components/page/components/table/word.vue b/src/components/page/components/table/word.vue
index cc98f5d..be1a242 100644
--- a/src/components/page/components/table/word.vue
+++ b/src/components/page/components/table/word.vue
@@ -1,59 +1,160 @@
 <template>
-    <div
-        class="tinymce-container editor-container word-container"
-        style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; position: relative; overflow: auto"
-        ref="scrollDiv"
-    >
+    <div class="tinymce-container editor-container word-container" style="" ref="scrollDiv">
+        <div
+            style="
+                box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
+                margin: 10px 0;
+                box-sizing: border-box;
+                display: flex;
+                align-items: stretch; /* 使子元素拉伸，匹配父元素的高度 */
+            "
+        >
+            <div
+                class=""
+                style="
+                    padding: 20px;
+                    box-sizing: border-box;
+                    width: calc(100% - 300px);
+                    float: left;
+                    background-color: #fff;
+                    border-right: 1px solid #cecfd3;
+                    position: relative;
+                    flex: 1;
+                "
+            >
+                <template v-for="(item, index) in contentList">
+                    <li
+                        v-if="item.remark && item.remark != ''"
+                        class="comment-item annotation"
+                        :data-target="`main-${item.am_id}`"
+                        style="width: calc(350px - 20px); padding: 6px 0;margin-top: 10px;"
+                    >
+                        <div>
+                            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px">
+                                <div class="pizhu" style="display: flex; align-items: center">
+                                    <span style="color: #fc625d; display: flex; align-items: center">
+                                        <img
+                                            class="isRemark"
+                                            src="@/assets/img/isRemark.png"
+                                            alt=""
+                                            style="width: 15px; height: 15px; margin-right: 6px"
+                                        />
+                                        {{ item.am_id
+                                        }}<span v-if="item.state == 0" class="Resolved">{{ $t('commonTable.Resolved') }}</span></span
+                                    >
+                                    </div>
+                                <div style="display: flex; align-items: center; justify-content: center">
+                                    <span style="color: #b8b7b7; font-size: 14px">{{ getTime(item.ctime) }}</span
+                                    ><span style="color: #aaa; font-size: 14px; margin: 0 4px">|</span>
+                                    <el-dropdown class="commentOperate">
+                                        <span class="el-dropdown-link">
+                                            <img src="@/assets/img/selectComment.png" alt="" style="width: 18px; height: 18px" />
+                                        </span>
+                                        <el-dropdown-menu slot="dropdown">
+                                            <!-- <el-dropdown-item>答复</el-dropdown-item> -->
+                                            <el-dropdown-item>
+                                                <p class="commentOperateItem">
+                                                    <img src="@/assets/img/solveComment.png" alt="" />
+                                                    <span style="color: #34c749">{{ $t('commonTable.solve') }}</span>
+                                                </p>
+                                            </el-dropdown-item>
+                                            <el-dropdown-item>
+                                                <p class="commentOperateItem" v-if="isEditComment" @click="deleteComment(item, index)">
+                                                    <img src="@/assets/img/deleteComment.png" alt="" />
+                                                    <span style="color: #ed382d"> {{ $t('commonTable.delete') }}</span>
+                                                </p>
+                                            </el-dropdown-item>
+                                        </el-dropdown-menu>
+                                    </el-dropdown>
+                                </div>
+                            </div>
+                            <div style="display: flex; align-items: center; justify-content: space-between">
+                                <p
+                                    :style="isEditComment ? 'width: calc(100% - 40px)' : 'width: calc(100%)'"
+                                    style="line-height: 18px; min-height: 20px; width: calc(100%); white-space: normal;padding-top: 10px;padding-left:20px ;"
+                                    v-html="getCommentRemark(item)"
+                                ></p>
+                                <i
+                                    class="el-icon-edit"
+                                    v-if="isEditComment"
+                                    @click="editComment(item, index)"
+                                    style="color: #006699;"
+                                ></i>
+                            </div>
+                        </div>
+                    </li>
+                    <span class="isRemark" :remark-main-id="item.am_id" v-if="item.remark && item.remark != ''"
+                        ><img
+                            class="isRemark"
+                            src="@/assets/img/isRemark.png"
+                            alt=""
+                            style="width: 15px; height: 15px; margin-right: 6px;margin-left: -14px;"
+                        />
+
+                       
+                    </span>
+
+                    <div
+                        class="MaxPicture pMain myeditabledivImage"
+                        @click="initializeEditor(item.am_id)"
+                        :class="item.remark && item.remark != '' ? 'remarkbg' : ''"
+                        v-if="item.type == 1"
+                        :main-state="item.state"
+                        :contenteditable="!readonly"
+                        :data-id="item.ami_id"
+                        :main-id="item.am_id"
+                        :id="'editor' + item.am_id"
+                    >
+                        <img :src="`${mediaUrl + item.image.url}`" :style="`width: ${item.width ? `${item.width}px` : '500px'}`" />
+                        <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
+                            item.image.note ? item.image.note : ''
+                        }}</font>
+                    </div>
+                    <div
+                        :class="item.remark && item.remark != '' ? 'remarkbg' : ''"
+                        @click="initializeEditor(item.am_id)"
+                        class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable"
+                        v-else-if="item.type == 2"
+                        :main-state="item.state"
+                        :contenteditable="!readonly"
+                        :data-id="item.amt_id"
+                        :id="'editor' + item.am_id"
+                        :main-id="item.am_id"
+                    >
+                        <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
+                            item.table.title ? item.table.title : ''
+                        }}</font>
+
+                        <table border="1" style="width: auto; border-collapse: collapse; text-align: center">
+                            <tr v-for="(row, i) in JSON.parse(item.table.table_data)">
+                                <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}" v-for="(cell, i1) in row">
+                                    <span v-html="cell.text"></span>
+                                </td>
+                            </tr>
+                        </table>
+
+                        <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
+                            item.table.note ? item.table.note : ''
+                        }}</font>
+                    </div>
+
+                    <div
+                        @click="initializeEditor(item.am_id)"
+                        class="pMain myeditablediv"
+                        :class="item.remark && item.remark != '' ? 'remarkbg' : ''"
+                        v-else
+                        :main-state="item.state"
+                        :contenteditable="!readonly"
+                        :data-id="item.am_id"
+                        :main-id="item.am_id"
+                        :id="'editor' + item.am_id"
+                        v-html="item.content"
+                    ></div>
+                </template>
+            </div>
+            <slot name="comment" />
+        </div>
         <!-- <form method="post"> -->
-        <template class="" v-for="(item, index) in contentList">
-            <div
-                class="MaxPicture pMain myeditabledivImage"
-                v-if="item.type == 1"
-                :main-state="item.state"
-                :contenteditable="!readonly"
-                :data-id="item.ami_id"
-                :main-id="item.am_id"
-            >
-                <img :src="`${mediaUrl + item.image.url}`" :style="`width: ${item.width ? `${item.width}px` : '500px'}`" />
-                <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
-                    item.image.note ? item.image.note : ''
-                }}</font>
-            </div>
-            <div
-                class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable"
-                v-else-if="item.type == 2"
-                :main-state="item.state"
-                :contenteditable="!readonly"
-                :data-id="item.amt_id"
-                :main-id="item.am_id"
-            >
-                <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
-                    item.table.title ? item.table.title : ''
-                }}</font>
-
-                <table border="1" style="width: auto; border-collapse: collapse; text-align: center">
-                    <tr v-for="(row, i) in JSON.parse(item.table.table_data)">
-                        <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}" v-for="(cell, i1) in row">
-                            <span v-html="cell.text"></span>
-                        </td>
-                    </tr>
-                </table>
-
-                <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
-                    item.table.note ? item.table.note : ''
-                }}</font>
-            </div>
-
-            <div
-                class="pMain myeditablediv"
-                v-else
-                :main-state="item.state"
-                :contenteditable="!readonly"
-                :data-id="item.am_id"
-                :main-id="item.am_id"
-                v-html="item.content"
-            ></div>
-        </template>
 
         <!-- </form> -->
 
@@ -70,41 +171,6 @@ const toolbar = 'addImageButton ';
 const tableStyle = `
 .tox .tox-edit-area::before{
                         border:none;
-                    }       
-                                 .isRemark {
-                        display:flex;
-
-        align-items:center;
-                        position:absolute;
-                        top:-12px;
-                        left:-12px;
-                        z-index:2;
-                        cursor: pointer;
-
-                    }
-                    .isRemark img{
-                        width:15px;
-                        height:15px;
-                        margin-right:4px;
-
-                    }
-                    .isRemark span{
-                        background-color: #fef0f0;
-        border-color: #fde2e2;
-        padding: 0 5px;
-        line-height: 19px;
-        color: #f56c6c;
-        font-size: 12px;display:inline-block;
-
-                    }
-                    .isRemark .Resolved{
-                        background-color: #f0f9eb;
-                        margin-left:10px;
-        border-color: #67c23a;
-        color:#67c23a;
-        font-weight:bold;
-        border-radius:2px;
-
                     }
 
                     img{
@@ -251,6 +317,13 @@ export default {
                 return [];
             }
         },
+        comments: {
+            type: Array,
+
+            default() {
+                return [];
+            }
+        },
         menubar: {
             default: 'file edit insert view format table '
         },
@@ -274,6 +347,8 @@ export default {
     },
     data() {
         return {
+            editors: {}, // 用于存储每个编辑器的实例
+            editorsInitialized: {}, // 用于存储每个编辑器实例
             mediaUrl: mediaUrl, //
             lastTag: null,
             isEditComment: false,
@@ -340,11 +415,11 @@ export default {
         }
     },
     mounted() {
-        // this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
+        this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
 
         this.isShowEditComment();
         this.typesettingType = 1;
-        this.initTinymce();
+        // this.initTinymce();
     },
     activated() {
         this.isShowEditComment();
@@ -355,79 +430,25 @@ export default {
         this.destroyTinymce();
     },
     methods: {
-        divOnScroll() {
-            console.log('111 at line 358:', 111);
-            var deleteButtons = document.querySelectorAll('.tox-tinymce-inline');
-            if (deleteButtons) {
-                deleteButtons.forEach(function (button) {
-                    button.remove(); // 移除每个 wordButtonContainer 按钮
-                });
-            }
-        },
-        isShowEditComment() {
-            if (localStorage.getItem('U_role')) {
-                var identity = localStorage.getItem('U_role');
+        initializeEditor(index) {
+            const editorId = `editor${index}`;
 
-                if (identity.includes('editor')) {
-                    this.isEditComment = true;
-                } else {
-                    this.isEditComment = false;
+            // 检查当前编辑器是否已经初始化
+            if (this.editors[editorId]) return;
+
+            // 销毁所有已初始化的编辑器实例
+            for (const key in this.editors) {
+                if (this.editors[key]) {
+                    // 确保销毁所有编辑器实例
+                    tinymce.remove(this.editors[key]);
+                    this.editors[key] = null; // 清除引用
                 }
             }
-        },
-        // 查看评论详情
-
-        handleSubmit() {
-            this.$refs.uploadImage.handleSubmit();
-        },
-        getDetail(val) {
-            if (this.hasInit == true) {
-                this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val));
-            }
-        },
-        //将字符串添加到富文本编辑器中
-        addArtWork(str) {
-            window.tinymce.get(this.tinymceId).insertContent(str);
-        },
-        onClick(e) {
-            this.$emit('onClick', e, tinymce);
-        },
-
-        changeTable() {
-            // 获取所有表格
-            const tables = window.tinymce.get(this.tinymceId).getBody().querySelectorAll('table');
-            console.log('tables at line 110:', tables);
-
-            // 遍历并设置样式
-            tables.forEach((table) => {
-                console.log('table at line 360:', table);
-                const editor = window.tinymce.get(this.tinymceId);
-                editor.dom.setStyles(table, {
-                    width: this.typesettingType == 1 ? '17.18cm' : '25.88cm'
-                });
-            });
-
-            this.$forceUpdate();
-        },
-        goToComment(mainId) {
-            var ed = window.tinymce.get(this.tinymceId);
-            const editorDoc = ed.getDoc(); // 获取 TinyMCE 内部的 document
-            console.log('Looking for element with main-id:', mainId); // 调试输出
-
-            // 在 iframe 内部的 document 中查找带有 main-id 的元素
-            const commentElement = editorDoc.querySelector(`[main-id="${mainId}"]`);
-
-            if (commentElement) {
-                commentElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            } else {
-                console.log('没有找到对应的批注元素', mainId); // 调试输出
-            }
-        },
-        initTinymce() {
             var _this = this;
+            // _this.$emit('positionAnnotations');
             // non-breaking
-            window.tinymce.init({
-                selector: '.myeditablediv',
+            tinymce.init({
+                selector: `#${editorId}`,
                 inline: true,
                 license_key: 'gpl', // 使用开源 GPL 许可证
                 content_css: false,
@@ -439,28 +460,28 @@ export default {
                                       .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1){
                                         font-weight:bold !important;
                                             background-color:#fef0f0;
-                                            color: #f56c6c; 
+                                            color: #f56c6c;
                                             fill:rgb(19, 188, 32);
                                        }
                                        /* 成功 */
                                       .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1){
                                         font-weight:bold !important;
                                             background-color: rgb(19, 188, 32);
-                                            color: #fff; 
+                                            color: #fff;
                                             fill:rgb(19, 188, 32);
                                        }
                                        /* 删除 */
                                       .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1){
                                         font-weight:bold !important;
                                             background-color: red;
-                                            color: #fff; 
-                                            
+                                            color: #fff;
+
                                        }
                                       .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1) svg{
                                         font-weight:bold !important;
                                             background-color:#fef0f0;
                                             color: #f56c6c; /* 设置字体颜色 */
-                                          
+
                                             fill:#f56c6c !important;
                                             font-size:16px!important;
                                        }
@@ -482,13 +503,13 @@ export default {
                                            font-weight:bold !important;
                                             color: #007bff; /* 设置字体颜色 */
                                        }
-                                    
+
                                       .tox-toolbar-overlord .tox-toolbar:nth-child(2) .tox-toolbar__group:nth-child(4) button.tox-tbtn:nth-child(2){
                                             font-weight:bold !important;
                                             color: #007bff; /* 设置字体颜色 */
                                             text-decoration: line-through;
                                        }
-                                      
+
                                       `,
                 menubar: false,
                 toolbar: [
@@ -498,6 +519,29 @@ export default {
                 end_container_on_empty_block: true,
                 content_css: 'default ',
                 setup(ed) {
+                    var previousContent = ed.getContent();
+                    ed.on('blur', function () {
+                        var edSelection = ed.selection;
+                        const selectedNode = edSelection.getNode(); // 获取选中的节点
+                        if (selectedNode) {
+                            // 向上查找最外层的 div
+                            let outerDiv = selectedNode;
+                            while (outerDiv && outerDiv.tagName !== 'DIV') {
+                                outerDiv = outerDiv.parentNode;
+                            }
+
+                            // 如果找到的 div 节点存在
+                            if (outerDiv) {
+                                const dataId = outerDiv.getAttribute('main-id');
+                                // console.log('previousContent at line 617:', outerDiv.innerHTML.replace(/^<p>/, '').replace(/<\/p>$/, ''))
+                                if (previousContent == _this.contentList.find((e) => e.am_id == dataId).content) {
+                                    console.log('at line 618:', '内容没有发生变化');
+                                } else {
+                                    console.log('at line 618:', '内容发生变化');
+                                }
+                            }
+                        }
+                    });
                     ed.ui.registry.addMenuButton('customDropdown', {
                         text: 'Set Title', // 下拉框标题
                         fetch: function (callback) {
@@ -529,11 +573,9 @@ export default {
                                         while (outerDiv && outerDiv.tagName !== 'DIV') {
                                             outerDiv = outerDiv.parentNode;
                                         }
-
                                         // 如果找到的 div 节点存在
                                         if (outerDiv) {
                                             const dataId = outerDiv.getAttribute('main-id');
-                                            
                                             _this.$emit('onEditTitle', {
                                                 mainId: dataId,
                                                 value: item.value
@@ -550,7 +592,61 @@ export default {
                         icon: 'checkmark',
                         text: 'Save',
                         onAction: function () {
-                            _this.getContent('content');
+                            var deleteButtons = document.querySelectorAll('.tox-tinymce-inline');
+                            // if (deleteButtons) {
+                            //     deleteButtons.forEach(function (button) {
+                            //         button.remove(); // 移除每个 wordButtonContainer 按钮
+                            //     });
+                            // }
+                            var edSelection = ed.selection;
+                            const selectedNode = edSelection.getNode(); // 获取选中的节点
+                            let outerDiv = selectedNode;
+                            while (outerDiv && outerDiv.tagName !== 'DIV') {
+                                outerDiv = outerDiv.parentNode;
+                            }
+
+                            // 如果找到的 div 节点存在
+                            if (outerDiv) {
+                                const dataId = outerDiv.getAttribute('main-id');
+                                var content;
+                                console.log('outerDiv at line 663:', outerDiv.innerHTML);
+                                content = outerDiv.innerHTML.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, '');
+
+                                // 2. 移除所有 style 属性
+                                content = content.replace(/\s*style="[^"]*"/g, '');
+
+                                // 3. 将 <strong> 转换为 <b>，<em> 转换为 <i>
+
+                                var div = document.createElement('div');
+                                div.innerHTML = content; // 将 HTML 字符串加载到 div 中
+
+                                // 替换所有 <strong> 为 <b>
+                                var strongTags = div.getElementsByTagName('strong');
+                                for (var i = 0; i < strongTags.length; i++) {
+                                    var bTag = document.createElement('b');
+                                    bTag.innerHTML = strongTags[i].innerHTML; // 保留内容
+                                    strongTags[i].parentNode.replaceChild(bTag, strongTags[i]);
+                                }
+
+                                // 替换所有 <em> 为 <i>
+                                var emTags = div.getElementsByTagName('em');
+                                for (var i = 0; i < emTags.length; i++) {
+                                    var iTag = document.createElement('i');
+                                    iTag.innerHTML = emTags[i].innerHTML; // 保留内容
+                                    emTags[i].parentNode.replaceChild(iTag, emTags[i]);
+                                }
+
+                                // 获取最终修改后的 HTML
+                                content = div.innerHTML;
+                                console.log('content at line 486:', content);
+                                _this.$emit('saveContent', content, dataId);
+                                // const dataId = outerDiv.getAttribute('main-id');
+                                // let selectedText = edSelection.getContent({ format: 'text' });
+                                // _this.$emit('onAddComment', {
+                                //     mainId: dataId,
+                                //     label: selectedText ? selectedText : ''
+                                // });
+                            }
                         }
                     });
                     ed.ui.registry.addButton('commentAdd', {
@@ -673,7 +769,138 @@ export default {
                     // }
                 }
             });
+
+            // 初始化当前编辑器
+            // tinymce.init({
+            //     selector: `#${editorId}`,
+            //     inline: true, // 使用内联模式
+            //     menubar: false, // 禁用菜单栏
+            //     toolbar: 'undo redo | bold italic | alignleft aligncenter alignright', // 工具栏
+            //     setup: (editor) => {
+            //         editor.on('blur', () => {
+            //             console.log('内容更新:', editor.getContent());
+            //         });
+            //     }
+            // });
+
+            // 保存当前编辑器实例
+            this.$set(this.editors, editorId, tinymce.get(`editor${index}`));
         },
+        deleteComment(data) {
+            this.$emit('deleteComment', data);
+        },
+        editComment(data) {
+            this.$emit('editComment', data);
+        },
+        getCommentRemark(data) {
+            console.log('data at line 426:', data);
+            var info = this.comments.find((e) => e.am_id == data.am_id);
+            if (info && info.remark) {
+                return info.remark;
+            }
+        },
+        getTime(timestamp) {
+            // 创建一个新的 Date 对象
+
+            // 转换为 Date 对象（乘以 1000，因为 JavaScript 使用毫秒）
+            const date = new Date(timestamp * 1000);
+
+            // 获取年、月、日、时、分、秒
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的，所以加 1
+            const day = String(date.getDate()).padStart(2, '0');
+            const hours = String(date.getHours()).padStart(2, '0');
+            const minutes = String(date.getMinutes()).padStart(2, '0');
+            const seconds = String(date.getSeconds()).padStart(2, '0');
+
+            // 格式化为 年-月-日 时:分:秒
+            const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
+
+            console.log(formattedDate); // 输出: 2025-10-20 15:30:03
+
+            return formattedDate;
+        },
+        divOnScroll() {
+            // 检查每个编辑器是否在可视区域内
+            for (const key in this.editors) {
+                const editorElement = document.getElementById(key);
+                const editor = this.editors[key];
+
+                if (editorElement) {
+                    const rect = editorElement.getBoundingClientRect();
+                    const isVisible =
+                        rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;
+
+                    if (!isVisible) {
+                        // 如果编辑器不可见，销毁该编辑器实例
+                        if (editor) {
+                            tinymce.remove(editor);
+                            this.$set(this.editors, key, null); // 清除该编辑器的引用
+                        }
+                    }
+                }
+            }
+        },
+        isShowEditComment() {
+            if (localStorage.getItem('U_role')) {
+                var identity = localStorage.getItem('U_role');
+
+                if (identity.includes('editor')) {
+                    this.isEditComment = true;
+                } else {
+                    this.isEditComment = false;
+                }
+            }
+        },
+        // 查看评论详情
+
+        handleSubmit() {
+            this.$refs.uploadImage.handleSubmit();
+        },
+        getDetail(val) {
+            if (this.hasInit == true) {
+                this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val));
+            }
+        },
+        //将字符串添加到富文本编辑器中
+        addArtWork(str) {
+            window.tinymce.get(this.tinymceId).insertContent(str);
+        },
+        onClick(e) {
+            this.$emit('onClick', e, tinymce);
+        },
+
+        changeTable() {
+            // 获取所有表格
+            const tables = window.tinymce.get(this.tinymceId).getBody().querySelectorAll('table');
+            console.log('tables at line 110:', tables);
+
+            // 遍历并设置样式
+            tables.forEach((table) => {
+                console.log('table at line 360:', table);
+                const editor = window.tinymce.get(this.tinymceId);
+                editor.dom.setStyles(table, {
+                    width: this.typesettingType == 1 ? '17.18cm' : '25.88cm'
+                });
+            });
+
+            this.$forceUpdate();
+        },
+        goToComment(mainId) {
+            var ed = window.tinymce.get(this.tinymceId);
+            const editorDoc = ed.getDoc(); // 获取 TinyMCE 内部的 document
+            console.log('Looking for element with main-id:', mainId); // 调试输出
+
+            // 在 iframe 内部的 document 中查找带有 main-id 的元素
+            const commentElement = editorDoc.querySelector(`[main-id="${mainId}"]`);
+
+            if (commentElement) {
+                commentElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            } else {
+                console.log('没有找到对应的批注元素', mainId); // 调试输出
+            }
+        },
+        initTinymce() {},
         //     initTinymce() {
         //         var deleteButtons = document.querySelectorAll('.wordButtonContainer');
         //         if (deleteButtons) {
@@ -1384,11 +1611,100 @@ export default {
 .word-container table span blue {
     color: rgb(0, 130, 170) !important;
 }
+.word-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: auto;
+    /* background: #f2f3f5 !important; */
+    padding: 20px 20px;
+    box-sizing: border-box;
+}
 .pMain {
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
-::v-deep .tox.tox-tinymce-inline{
-z-index: 9999 !important;
+::v-deep .tox.tox-tinymce-inline {
+    z-index: 9999 !important;
 }
+.remarkbg {
+    background-color: #f3d5d5c2;
+    border-right: 2px solid #cd5454;
+}
+.isRemark {
+    display: flex;
+
+    align-items: center;
+    /* position:absolute; */
+    top: -12px;
+    left: -12px;
+    z-index: 2;
+    cursor: pointer;
+}
+.isRemark img {
+    width: 15px;
+    height: 15px;
+    margin-right: 4px;
+}
+.isRemark span {
+    background-color: #fef0f0;
+    border-color: #fde2e2;
+    padding: 0 5px;
+    line-height: 19px;
+    color: #f56c6c;
+    font-size: 12px;
+    display: inline-block;
+}
+.commentList li {
+    list-style: none;
+}
+.comment-item {
+    z-index: 10;
+    list-style: none;
+    width: 320px;
+    position: absolute;
+    right: -340px;
+}
+.comment-item::before {
+    content: '';
+    position: absolute;
+    top: 24px; /* 调整线段开始的超出位置 */
+    left: -32px; /* 调整线段开始的超出位置 */
+    width: 34px; /* 设置斜线的长度 */
+    height: 0; /* 设置高度为 0，使用 border 来创建线条 */
+    border-top: 2px dashed #cd5454; /* 设置斜线为虚线，设置颜色和宽度 */
+    
+    background-color: #cd5454; /* 设置斜线的颜色 */
+    transform: rotate(-15deg); /* 设置斜线的角度 */
+}
+.commentOperateItem {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: bold;
+}
+.commentOperateItem img {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+}
+
+.Resolved {
+    background-color: #dedede;
+    margin-left: 10px;
+    border-color: #dedede;
+    color: #8888a6;
+    font-weight: bold;
+    padding: 2px 4px;
+    border-radius: 2px;
+    font-size: 14px
+}
+/* .Resolved {
+    background-color: #f0f9eb;
+    margin-left: 10px;
+    border-color: #67c23a;
+    color: #67c23a;
+    font-weight: bold;
+    border-radius: 2px;
+} */
 </style>
diff --git a/src/components/page/components/table/wordHtmlTypesetting.vue b/src/components/page/components/table/wordHtmlTypesetting.vue
index 7a72a5d..8c5bff4 100644
--- a/src/components/page/components/table/wordHtmlTypesetting.vue
+++ b/src/components/page/components/table/wordHtmlTypesetting.vue
@@ -54,7 +54,7 @@
         </ul> -->
         <div style="width: 200px; float: right; padding: 10px; height: 100%; box-sizing: border-box; overflow-y: auto" class="arrlist">
             <ul style="width: 100%; height: auto">
-                <li v-show="currentMenu == 1">
+                <!-- <li v-show="currentMenu == 1">
                     <div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: start">
                         <li v-for="(comment, index) in comments" :key="index" class="comment-item" style="width: 100%; padding: 6px 0">
                             <div @click.prevent="goToComment(comment.am_id)">
@@ -74,18 +74,9 @@
                                     <span style="color: #b8b7b7;font-size: 12px">{{ getTime(comment.ctime) }}</span>
                                 </p>
 
-                                <!-- 当 isEditing 为 true 时，显示可编辑的输入框 -->
-                                <!-- <div v-if="isEditing === index">
-                                    <el-input
-                                        v-focus
-                                        type="textarea"
-                                        v-model="comment.remark"
-                                        @blur.stop="saveComment(index,comment)"
-                                        style="width: 100%; box-sizing: border-box; padding: 5px"
-                                    ></el-input>
-                                </div> -->
+                             
 
-                                <!-- 当 isEditing 为 false 时，显示评论文本 -->
+                               
                                 <div  style="display: flex; align-items: center; justify-content: space-between">
                                     <p :style="isEditComment?'width: calc(100% - 40px)':'width: calc(100%)'"  style="line-height:18px;min-height: 20px; width: calc(100%);white-space: normal;" v-html="comment.remark">
                                     
@@ -106,11 +97,11 @@
                                     ></i>
                                 </div>
 
-                                <!-- 删除按钮 -->
+                                
                             </div>
                         </li>
                     </div>
-                </li>
+                </li> -->
                 <li v-show="currentMenu == 2">
                     <div style="" class="go-content-charts-item-box">
                         <div class="item_box" style="width: 100%; height: auto; position: relative">
diff --git a/src/main.js b/src/main.js
index 3ca2231..a6f78ad 100644
--- a/src/main.js
+++ b/src/main.js
@@ -80,6 +80,8 @@ Vue.component('common-tiff', commonTiff);
 import commonContent from '@/components/page/components/table/content.vue'
 Vue.component('common-content', commonContent);
 import commonWord from '@/components/page/components/table/word.vue'
+Vue.component('common-comment', commonComment);
+import commonComment from '@/components/page/components/table/comment.vue'
 Vue.component('common-word', commonWord);
 import commonAnnotations from '@/components/page/components/table/annotations.vue'
 Vue.component('common-annotations', commonAnnotations);
diff --git a/src/router/index.js b/src/router/index.js
index 1bad823..5f55d22 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -988,7 +988,8 @@ export default new Router({
 			path: '/GenerateCharts', //用户端预收录-引用编辑
 			component: () => import('../components/page/GenerateCharts'),
 			meta: {
-				title: 'Text Proofread'
+				title: 'Text Proofread',
+				hideSidebar: true
 			}
 		},
 		{