From 47e9e57c80fef5800dcac239066ea00b8dce5afa Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Fri, 30 Aug 2024 23:56:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BF=A1=E6=A0=87=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/iconfont.css                           |   6 +-
 public/iconfont.woff2                         | Bin 6296 -> 6344 bytes
 src/App.vue                                   |   6 +-
 src/components/{render => pivot}/cursor.js    |  46 +++-
 src/components/{render => pivot}/index.vue    |  69 +++++-
 src/components/pivot/moving-pivot.vue         | 165 +++++++++++++
 src/components/pivot/pivot-view.js            | 138 +++++++++++
 src/components/pivot/pivot-view.vue           |  27 ++
 .../cursor.vue => pivot/system-pivot.vue}     |  47 ++--
 src/components/pivot/user-context-menu.js     |  17 ++
 src/components/pivot/user-context-menu.vue    |  76 ++++++
 src/components/pivot/user-pivot.vue           | 232 ++++++++++++++++++
 src/components/render/time-scale.vue          | 135 ----------
 src/components/setting/index.vue              | 127 +++++++++-
 .../sidebar/signal-context-menu.vue           |   4 -
 src/components/toolbar/cursor-location.js     |  21 +-
 src/components/toolbar/cursor-location.vue    |   5 +-
 src/components/toolbar/pivot-view.js          |   1 -
 src/components/toolbar/value-search.js        |  14 +-
 src/hook/sidebar-select-wire.js               |   8 +
 src/hook/wave-view/dom-container.js           |  26 --
 src/hook/wave-view/render-cursor.js           |  59 -----
 src/hook/wave-view/render-wave.js             |   4 +-
 src/hook/wave-view/wheel-event.js             |  11 +-
 src/i18n/en.json                              |  13 +
 src/i18n/zh.json                              |  13 +
 26 files changed, 974 insertions(+), 296 deletions(-)
 rename src/components/{render => pivot}/cursor.js (57%)
 rename src/components/{render => pivot}/index.vue (56%)
 create mode 100644 src/components/pivot/moving-pivot.vue
 create mode 100644 src/components/pivot/pivot-view.js
 create mode 100644 src/components/pivot/pivot-view.vue
 rename src/components/{render/cursor.vue => pivot/system-pivot.vue} (75%)
 create mode 100644 src/components/pivot/user-context-menu.js
 create mode 100644 src/components/pivot/user-context-menu.vue
 create mode 100644 src/components/pivot/user-pivot.vue
 delete mode 100644 src/components/render/time-scale.vue
 delete mode 100644 src/components/toolbar/pivot-view.js
 delete mode 100644 src/hook/wave-view/render-cursor.js

diff --git a/public/iconfont.css b/public/iconfont.css
index 3872182..1552658 100644
--- a/public/iconfont.css
+++ b/public/iconfont.css
@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4440655 */
-  src: url('iconfont.woff2?t=1723382481292') format('woff2');
+  src: url('iconfont.woff2?t=1725033317914') format('woff2');
 }
 
 .iconfont {
@@ -11,6 +11,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-axis:before {
+  content: "\ed1f";
+}
+
 .icon-add-line:before {
   content: "\e7b0";
 }
diff --git a/public/iconfont.woff2 b/public/iconfont.woff2
index 11a952b051ede330ea343213b019f6ce9f20e965..1e1f7fe0a99b98899ca6ba0869f83094aac0bae5 100644
GIT binary patch
literal 6344
zcmV;(7&qs4Pew8T0RR9102s&s3jhEB056CD02q1z0RR9100000000000000000000
z0000SR0d!GiCPN9Y`FjdHUcCAfkX>r00bZfgl7kYK^yZYGm^7f<WZC*O_TlC2etuI
z8|!y4gtcB(4P}UxX|)E2)@i(|M3^)XnI6x_mx!Skm68zOea78|{ddDMY#-R#FEo@A
zo@lQ3&1M65Ii!3n04M@QsB0NjD}jWqWua@-l!Zcq@5k1HCx%SRq9>|Jr;FBbDO|FL
zmGFn>x7mXa#+1%a8KhMoE07_e&PWhXPjP{3Si6XJ<!-Km-RUCrdQmR27|f|jZI7g^
z{TNC#K>QusabQ5~kF=-!rNG7s7cm(^k{bTIT>CeBIhff^E+0@4>R&)v`ze<a(Ar&F
z0Mu`M%j3V$HKGWUYrViCPXtoPm-%YdtqmK)f|J~s_1a!{ng1v@AWrBzb_M|a|KFOG
z?JN-Y+lL?&kkTtuLFiXa!V8to5L6aBv(%GC0AacZ)4K=h0|a-cfRs6BPRMiiczQj#
zsh02o=;Y_*k_k=+LNmnaoLbC|We+Wg3sHlynJ25Zo;g&e*!9ux1Obu7HZt{Qe^KRf
z@8(*KbvadFt}2&jCwt2480*qi1VK;qIrEF;F&E}7+YdZ4{&<<NG!uZ~=D577eaDSM
zU&^mx?nWYTzPTCQMyTHa7dT*k#^UDPy;L4KbkTf{i1*{NnS-#_h}8)%N>Pqx^rMLB
zSQiJQDr&<OljC8$icj%Ve}9odGFUNqGrT;)k7|>6^7+>=B^1qq^{hs(`Tpi3ruDM<
zrB=a?xah@NTePn|XU#WXZoWFL_2!$Cwf_?y7MX9tthSzz%QMehb6Aep&`3pJS;qp2
z5??MAS!l{YVMbL~W|A=$m{wEQ(A2V+K#Jg<0L(0T7DG{B5maD4)W8JPfmx`9Hq?b4
z)PoS34Q?r6K+1r5&??M@)?f~_4i?$~2ik-f+Jhmq4<l#+73lPUtizCW_5(W51F!&k
z5EAGKC_zty4?PPx^c<wnI}kx1!b0dvn1a570rV3T(4Q~^{S8%o5$NJe0vW!nD3c^_
z00v(#m9de_fB@gJGL6)*I6s0?M?#ba5}`Da7^Q`L1}w&};WfqWB_F5ZHR4ZXD=xP@
z5GThl6Wk_O)$%ya?ahX8UAV{5Ji&nk<cVE#2t$s6G?-$uSIbj2DT;1)S(X>$B(ZMR
zDCK#xSId)nJ}d*zv(+$6+U060b)DTDwpkuk*`(c;$W~91HPc<2=X*M2TTE}cA@Y4k
zmhE&h4TU{K6j3c)Sn2b1)a&_<et_Q|%$pMyolcx4x8-fSo~EtV{2|x#{=nMhc42s3
zFc~N52BwTGsU@7UEK~5CI=}}!xNV54HaXi1K#=<u2(>a%&(+-SosWa5*;Jtq7TjN)
z#(S#J9sn31KuAl1UGiNmPlYA;K%|)3<PaV-5zbigST2=_&4#G{dn`lv#Yni52#^)|
z5s7E;q#lW8lW9@0sCqrSJ;A2nR)MzCX>Agi6JO@P1IHe&ODH!s-=5T_;WiQN<0&=)
z4j%uz?kza_Xnj(p6;=Y7TP=|2J{^Zl+DM6%wYeOu7EUib6#<arb83~lb|dR`aK%?)
zsi@#fs_MArdscCoU267aQ0Fxdxj!xOUckH@nv+-t7*eluwfBS=w47UyJ~)em7Kei;
z?H6aY{0Y<U0wmMOb4^(KFYSIj9Z{~64RRDfN~o3!1a7+GTf+Uk!8fOgme_<Ny2C}f
z6Kp}M(G-vgsx}KOnGu9SEf|XURIPj*08JB_os3yb7yEbVeTAt20<NG;5bGhmm`ur8
z0ck(&yH_i&>m}lO!V$;uDQ){cn=xqCG1pK)n|+d_`LtPQNk*-euP=ciuf9Et{CJZ$
z9J=9hohG9sl1RnMsThr?m3eFnCr)Wu?~r*0xx<^u<5N|2;cdtr0%m?2w$6|Q(VQz8
z>|vq|uq2BEl!lDRE=*9A9BZiH+(D^X7p3({-q<MDM6zx5A+qE2(G<_?L;bE>96Whv
zqz%7wn%8*w%>D7~qf7c&?y-30^u1U-pHA|p48o~ws;?d|Aw3iRhpBv1NxPhhZ4Io`
z{g7h<nb{pyz@(lBldeleDE6|K7bJ+)hMm`63BToi-qYtI+gi@<UI)_x%pk5|i1dmG
z>UI$#JXcVo^lxhB4h2)UkLA+*sRHv;AJf969E;YHigV`>601gCm)Z8<q%=aD2;&Ap
zGLr-{z;3#bRwgCnEj)KoLMww)xN-=B&f!y9Nr7Zyr^};)iet=QjEJk0spiQ}aX~7$
z-bR&3_CJ(bX_;eB{t8Obkx*SQ7P<-Xi<g`}<(kY%*};9#5~MXo7kII82isXP->|Cj
zi+eVG%w$`p+}0tww%^-2ja$y<MY?VZf|=6CC!~<9OO%=)l9oq{v!6C57h37OXvv8&
zA=d`+jw!-T%6$vd<g~^E-VilQ6!GC1{NlujQcd>_zT?T#^!R*(ZzejrCz$BnqD(zF
zQ-yY)W&qE@@+vc7#TLGHUrH9WjIU{PTIG)JnWW&&vF=1B0-j{~<oxx?$;pOjJsFtk
z9@#LmWopUNxY^xa{Nc?{F4PvL^G|3_NG;fqnwn~iz35+>Uzo<aespoLn#|`f>(ld-
zy?(O+1fMT4QyiOERCS2x&R8sAYN3s0fRwS?w^Xk%O$Y?s6fXv^b$-2}3rG?fF49oY
zW3Ad#0_UQSTqvNs6$og#5ldcp9-btC;qPAYeBX}R_9Q}Dpbm-sve`LD4Qb-w=`I*`
z`&?270D|9JYyB6bxGgRnifM0(*ILCET1)CA%K%2o1|V=Q<Zhb*G8Q)Qd~UxZKm5lA
zSO5kogv(W}9w(EK*wnm{Bolt$?vR4P(U*+OyE!2`_XS$iX32~%`K^R+Qr{F#RLDb1
za-R{($3>X|z=&<TmpBgg)d6-h^6}UYO#02>J4a@alLDu<;zCdd5#G*%Gj+xNCyHpT
zPP>iYaMpuB2wEQG*WWFI@TVg6*2l{1Zh(g@=*}+Ij*etl?p#DA4|zv)Jgi<G^}qhh
zWzyGOHj!Wb>1fK2y`Iuww6Wt<sRhL1qgV|{9if<OX{i=9O*~mK{k?(_;lPt3*7-_5
z6t>jvxLmt#;21~)k5vrgXb3U#MgYVXm@s(xUb{tMV~UrwbesyIakGZ&?n9DksHwI!
z8>?xHkqjXV3y0VWvP&>w6E976Nn{*M#ilr|3v8y@KkU_+CBF5I|FSntY+&vhWe{tT
z78bAs=T{KUA;_qv15}a<1e;l`3pEIgMp+I*TCiy_j~@70fc&E=A}x5<Cu8VK05=?2
z{_zdmu$kM6UOHIQ$u7MWAaj4jPlK!?m`En-6X2$hBr04TU6O_hGXn``?X*4QBP?jV
z4%<l~rW_xU7GcGOFmvh3er<U#vG-_AaoQMT^%2q#l_3E_YiS?e*XaIlxE#fGyb9aF
zRGxQmrgzW#5L$3}P<TnI{FN+|dTfN^uJHHKl}f)?uR_Xww@&(Xk(42e<?OfBe=Jq<
zbji_IxJ!uRD0A^gbV2m`?Nv*Vy!^WEDEt1pHALV1IOda?`T&`oe@rVjg=s-bkm0tT
zKxl?Q5YEUrGap`<kEn@#?mn6rXyAj<$@yT+Z4Ev4-fTQE?tHuB%Y1`?JYXNjD-Q2&
zqXyq&#X#d|ioor`Ph%>FN~wMshE)ce-@33X16eCD8`8A!<h@Lyi2a*352fY7koy<-
z`@g7pvkwaEFa4gzLSxeJC)WSpq+7J1qwwH=_xJQO^i%qMxd^OSST8;U9Y){QKH=5i
zqpqig|23<XOuxCcK1Z~k-3XqE-J2`%mBn5CeOvnaw@NvHbUY|qTL%<g#lXPGH*W^0
z>!{t$OPy77)<B1&L_B3`$I~K^BCg$a-jI9ce-6x|4!n6Y%M)8iU?c{Vil$D>uJz~`
zxIji>WFZ4&0TjrF67_Ndo_+3qS2LodJlZgDN6Wy003LZB%kiUrf3#Tx^#M|x^rJ|D
zNb-il200^(JN-P-KQ6h3EN?J0$mud}N54KgzroPXcRuaBF+MtRAx+^j*cFUS-i-75
zD4>8m$c3r|Zw#cYD^a-*yF=agv<&w#H|+ib;`f{bQ}9`0lbqnE0HRfBA&QAMB4^dP
z=yR($6kQ*JMQF7xCt3;DXwD`i8fkLUt`Y14JK-9<VmBw6vwH=+&N#nXjgR0(;I)H^
zxRV*Uu*hTed^%<^d&SA}7ybC{UOS_cVc$FP_8#Uwm?Y_vkl=mHJ<k1|b=!QaCOY$$
z;+7+Bm5*<EP~7mYtS7an>|I0ggT-ASx=zgE&i#scUwpr?^`o$#$pO2WR=OK-n5J=N
z=aC~!f{MV@FMX|g%{-ccC}DM{OfQw{Wk7kVUMiCx9=>ss$S3Mla&#R(h(j?^xP!qY
zCJAUwv`~0G8@42SJxrg6t%|st<_-;x-^kb)A8a&G?e+x4?`7<b50V~w%S`Sdhmujj
z{1?)k9I2t@`t=(J4`xe9)s5@f*A}<|^a$e#7J^H59k3T57!M*?igeLm(wmU#y*=_m
z0TOx@NtZYNGGTzUZ5+T9vsr-<a@ot}rP3KQq@}WoexZ8u88b?y<??>c*SFrD-+ENo
zzj}>V+%ERIJ?g^kq^Tr8m)$USVg77sZE0CH(m`H4b^6?S1M&e7G2cUPw=3=K;aWlO
zJ^CFZ9>F+DS3`J%%Xwo@S;W4^N_m-V)+||>yz)PxLM_W=mGVXpW_0oj@2<EO0=>aC
zf3$`Pd3h5G%jIU7an`spaU~426D+@Bbyn4(>0|Yo04$L^B-6;2h#{(TfT%7MpDR^G
z6p=gN4subJTR-DaiAuNAh3b<mgZtg?_OPUF2S>K|kx&70_oBeno*|YYlP4c}`sCr$
z?LgF1X{nqvx$AO0HHIFjw3beq)bsS>_oCg<Qt<NqPhjQ?wRBlj2Bp$aE>x_XGL_ZG
zP~N_)1e#WEgGrer*kXZ6TJycLSu3Xbx-L;4d@f?x?J9l2z&C!>FHw$&tn!>n)ic2`
zzB9kXP<peh-G6vMeVij<@>#qKKTO&pZL^p&v%CeiZc9GjC>$`ExK2(p(JJcfbaJ2c
zU%9Q^O`Y63w!aLM=|-WjfN#$Gk|JS~>>@jflmMUGQB&<^&u;clyV<k%{13<6Z&L3l
zM`C?KLVcp+tx%yx=kDKbGjbPn1P8zY!P>z=-iQAg5M_Mk7rFi32C7kacV2SFGg6}{
zI5oZZZR9^@0igh{pQk%mAG+_tT^&`b{0{BDY`(O6bjeqtM)&6F`Xgy~8i_%DV<nfu
zkZD-fG+ZObg%ymfSJwZF`rZ3FxSu*jq(LNH!p`y7a=5z7FY5Lg<rUk8#lK?A7-#K&
z_<x4Ex^J?-eogv%swdDJXjKYFR09f#jB5d`#7BO%V7LSxfvq+#S#<fnR3XLGA0?nG
zKC`0MSQqdXZXF~jJ#wC_`DecIceU7tooC;A@N3=Sp-0oU{41||%!=BPxn4cF%P&Qo
zw(Xf%p2%Hh>G`_x&&<_e-l*&g4Woi?Cf*_?be+G=`6>bP&jyb7ek>3D)EYx-UHr3u
zIO@iYC{HZkU#2LkUh2<^5p$;7K-Ne$J(G|9-x-A8Do!$?g|_gz5G=Mzy4L+m`r8RF
zn5K|4Mk?3Wvw7AF+=f&cBD*<FHGrJ7aU%+|{9MV!Rl1lYdqRResd`Mzo;g1h7UINg
zF-{m6QCuA104k@E)nTDIIiX>)RMGkR%z$A={g`ZEkcEU-nKGpyDZy?}7#%#@y561?
zVT`t_IJx*I^0RoNUOq+$mgoEW8NKCN*U+)L{qnmffS^2%&bcv1_al}(oiu2y_(GSF
z2a%Th-8Q58eDz>Z`%1}5M<CBtn-hS}862INogin~SBO^FSzM()IZGe!w+zgkE7!}U
zh(W3^Fi=IWAX0XkK~T>wC~WCZsQuJNTA!ki)=2HA*cg8kxI#;m{UM)Ym|+z%P#i1<
zRM%?s=hQyhbHU>0v_6V(jCPl_xl5awv+yjD=D%Q#$nB}N55Y$31DfN1;`yf+wVe?C
zCOXl!=rkYiOjF3yLwq5Mj10LRPM7}}xysVgLoVR4BJpox5xvp!IDwtP_OUJTL9ryB
zA^s&Ov`50y8@HEi&$X6VbNx&Fffg<nZwP@EN_~OgzLalLP@vQ+;E)X&8(46dE^UmQ
zv;&<lZ&vF=Vb+FB2b)l}zFCgW-$9a((WQk+RpZ=rpAyPX>0W~M&8OAFe_pSmzf!^!
z=uji`rAXm>M7m73zAuy_%b1ipuQWWrLoLh?-(#r4p*iR7_iXhCvtRpn_!AY6@x_41
z1$dHw8kCI@jhZhqMu6nmFm~&l#w{>69hZ8FT~L&P&!14^kKKrlf~r8t4s@h2{aU+p
z*R=E*)QG+3gAEanUO=k;xR5y#EP{!|qN`3*b>M#}m_48F@QSVejm@>G(N%T2dEd(;
zfOkaw2}LjM&&y_ZZnz}Agk%*=$ua<+yKG^7tZg`wcPBheB2Bd@Ob-WF?i~`FI%mtT
z&&~x0lA{;TD-;J>^k}2gi5C4Y&8Sl3Mp|~on^K~U0z<s8G1KuTIP<I~edxILL%@^+
zv8hlxCNYYjR5>R7O4Pu}SA~CyqENolPRCYLQPf$nj$bZh&I{^~zsrRWYr_vX4Kdsz
zQDmGIR_Vi|_4*8aI=&3U7b9V|G<l7&swvxA**rKaCL@J>2cO1EzuKg+jsjFNB-}vZ
z99$?!&J_<_#ZeMuhB|q*!a!3EphL)QPC5rj>TR4Dha}f|*3sQlYyq5@W3cb*qNx0N
z2NqUz?w=Q(e}Ob{bMs~o?9?1g+^CL8+!z@;?O)xah?toeRkTQpjbq&>Ph8Txq~p-e
zw#Op=L)twVp%ulUJP5b%3~9FCWlN}yi>r;dJr^p}Nn65mo08BnVYv~nDa$EE!DX5S
z`6^`vC5^I8vQ08s0d)Tz9euI8r8`IJsf>#G7_++`c1`|Z^*!lF={@zkke|!9O_;+q
zzkF9hX{Iur`?Nc@`)RE9;^1<K6OsH^Mgdt8<$i4zIM&^ii14;>K?ZO1u?!#=3%q}%
z)LE>lX{6tR{((vbbY4puvtpd#a-`|N>!Vmxq*YmitWS-&VosPyOn)DmU{<6PQ$Sa!
z)w{H{4fUT<s!edAKwuJ}Z_a`XTjnloGsn6WNbn#U{&N1I-dHWj>`dfgE1cdwaJzlJ
zp7#WhzMF@B1ps**#Ps<9$OH7da{`6Fy}u|o8bTSPB#+me>K5OWs@?vBOzKnHA-cN3
zO{j9wT6drtG+(mZIR~K_pG!{x$OE;*N3K+#15ja<rG<hfBoW_%HoA{Rds=v+*=JFB
z5lI)55@Ei#L9{_oM^FXesJplWP@5QpN2BQ8fG$|{C;AZpAX!k?SPwNX+GZhCETS3F
zy<qu8A0vIs@B9PDvLsHR=OEmRfZ*mM{(&S#S~B1y1ZOR%NdmjI>Ft32{~Yy!+mb?T
z6(R9MK+xYlDt<n#l>5NI#Ua_oC?#N?2>~RrS$^0l?>6^ujWSr0|M}UY9OnP*He-8;
zcgy~NTN3y`c0e*)ND5q*7HH@a4|!=obUg_E-BDO^v)G~Puem}5jC(cA@O6hd0)@-A
zoIA`FTRO}W*f1<IPsa1ds+^ulJ_M#sl7@-gwqZu*EjYZEXTYN6<zcRdN8q95k71Gh
znN4o7=}g^M0VxJ^x|`&<dIi;Z++PS|CUL6z2k8kF=3S++F8zrL3B#se!xvR=yl^o;
zmah&uvuVO-I6X$y_VKE=^Bf-?mxr$e5CsFH)?J&jk;5v#du9K6zd$g`hzPp=3DF6W
zAK%bY(FnMH@+!31j2MTx3ceUF3(qJZ@{+>HTnosDMa*#W<r%nxcH{^kn-A*i?(Cxc
zn0%o0I8M9U;^o;(GH7wciYuP@5=i*twnZYTWKxpcN9|t#3Mv{p1|}9Z4lW)(0U;4F
zn1qy!oI;3DVZte?sA*{F!tC8rpVKhdoGK0^!k<>zHo-OV*f%z_ikmJ@2&q=dFhw17
zwhCahR4H@V<S^zz7}z%PH&nRVA%&!rrvow+6O^X+DQ=DGFn63YwT?*;9^2Ycb;x$-
z7ImZksf)}VdyT2u)L2UjQP(a~4X{y2mgSjU=yB(jd*0G4$nXpQ5b-)kVr;WC;%wwT
zDXETqg8w7s7pIaZJtnV{G7=rjfbOug+1So+;UyxsMI)gCg}f;B%Zq2Z%qs28q3Ya^
z)oJ4TBA`4=RS_W5uClS3pM=~6+UHW5&`E6*I`OEp4%IRxmBQiIQC}4lmb-N^wbdtG
KVS5To1P>3LCqWbd

literal 6296
zcmV;J7-#2qPew8T0RR9102r763jhEB0513d02oLB0RR9100000000000000000000
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
Om9A)N2D2G=0001djtjW}

diff --git a/src/App.vue b/src/App.vue
index 9c40918..7fbf1a9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,8 +2,8 @@
     <!-- 上方的 toolbar -->
     <ToolBar></ToolBar>
     
-    <!-- 主渲染区 -->
-    <MainRender></MainRender>
+    <!-- 信标区域 -->
+    <Pivot></Pivot>
 
     <!-- 左上角的 sidebar，用于显示 -->
     <Sidebar></Sidebar>
@@ -27,7 +27,7 @@ import { getCrossOriginWorkerURL } from '@/hook/network';
 import ToolBar from '@/components/toolbar';
 import Sidebar from '@/components/sidebar';
 import RightNav from '@/components/right-nav.vue';
-import MainRender from '@/components/render';
+import Pivot from '@/components/pivot';
 
 const { t } = useI18n();
 
diff --git a/src/components/render/cursor.js b/src/components/pivot/cursor.js
similarity index 57%
rename from src/components/render/cursor.js
rename to src/components/pivot/cursor.js
index 3889446..f49e923 100644
--- a/src/components/render/cursor.js
+++ b/src/components/pivot/cursor.js
@@ -2,30 +2,53 @@ import { globalLookup } from '@/hook/global';
 import formatTime from '@/hook/wave-view/format-time';
 import { reactive } from 'vue';
 
-export const StaticCursor = reactive({
+/**
+ * @typedef {(event: MouseEvent) => void} MousemoveFn
+ */
+
+export const MovingPivot = reactive({
+    color: '#CB81DA',
+    label: '',
+    left: 0,
+    currentTime: 0,
+    show: true,
+
+    /**
+     * @type {import('./pivot-view').UserPivot | undefined}
+     */
+    currentTakenPivot: undefined,
+    dragEnable: false
+});
+
+export const SystemPivot = reactive({
     label: '',
     show: false,
     currentTime: 0,
     left: 0,
+    color: '#CB81DA',
     updateLabel(timescale) {
         this.label = formatTime(this.currentTime, timescale);
-        this.show = true;
     },
     updateLeft() {
         this.left = calcCursorLeft(this.currentTime);
-        this.show = true;
     }
 });
 
-export function changeCursorLocation() {    
-    StaticCursor.show = true;
+/**
+ * @description 左击改变系统信标的位置
+ */
+export function changeCursorLocation() {
+    if (MovingPivot.dragEnable) {
+        return;
+    }
+    SystemPivot.show = true;
     const pstate = globalLookup.pstate;
     if (pstate) {
         const { xCursor, xOffset, xScale, tgcd, timescale } = pstate;
         const currentTime = Math.round((xCursor - xOffset) / xScale) * tgcd;
-        StaticCursor.currentTime = currentTime;
-        StaticCursor.updateLabel(timescale);
-        StaticCursor.updateLeft();
+        SystemPivot.currentTime = currentTime;
+        SystemPivot.updateLabel(timescale);
+        SystemPivot.updateLeft();
     }
 }
 
@@ -44,6 +67,7 @@ export function calcCursorLeft(currentTime) {
     return 0;
 }
 
-export const MovingCursor = reactive({
-
-});
\ No newline at end of file
+/**
+ * @type {Map<number, MousemoveFn>}
+ */
+export const mousemoveEventPipes = new Map();
\ No newline at end of file
diff --git a/src/components/render/index.vue b/src/components/pivot/index.vue
similarity index 56%
rename from src/components/render/index.vue
rename to src/components/pivot/index.vue
index b3c54c5..15c698b 100644
--- a/src/components/render/index.vue
+++ b/src/components/pivot/index.vue
@@ -1,18 +1,47 @@
 <template>
     <!-- <VerticalCursor></VerticalCursor> -->
     <!-- <TimeScale></TimeScale> -->
-    <div class="vcd-render-wrapper" @click="onRenderClick()">
-        <VerticalCursor></VerticalCursor>
+    <div
+        class="vcd-render-wrapper"
+        @mousedown="onRenderClick()"
+        @mouseenter="onEnter()"
+        :ref="el => pivotWrapper = el"
+    >
+        <Pivot
+            v-show="SystemPivot.show"
+            :color="SystemPivot.color"
+            :label="SystemPivot.label"
+            :x="SystemPivot.left"
+        />
+
+        <PivotView />
+        <transition name="main-fade">
+            <MovingPivotVue
+                v-show="MovingPivot.show"
+            />
+        </transition>
+
+        <transition name="collapse-from-top">
+            <UserContextMenu
+                v-show="pivotcontextmenu.show"
+            />
+        </transition>
     </div>
 </template>
 
-
 <script setup>
-import { defineComponent, reactive, ref } from 'vue';
-import { emitter, globalLookup, globalSetting } from '@/hook/global';
+import { defineComponent, onMounted, ref } from 'vue';
 import { updateWireCurrentValue } from '@/hook/utils';
-import VerticalCursor from '@/components/render/cursor.vue';
-import { changeCursorLocation } from './cursor';
+import { changeCursorLocation, SystemPivot, MovingPivot, mousemoveEventPipes } from './cursor';
+import { eventHandler, registerWheelEvent } from '@/hook/wave-view';
+
+import PivotView from './pivot-view.vue';
+import Pivot from '@/components/pivot/system-pivot.vue';
+import { globalLookup } from '@/hook/global';
+import MovingPivotVue from './moving-pivot.vue';
+import { pivotcontextmenu } from './user-context-menu';
+import UserContextMenu from './user-context-menu.vue';
+
 
 defineComponent({ name: 'main-render' });
 
@@ -24,10 +53,34 @@ function onRenderClick() {
     changeCursorLocation();
 }
 
+function onEnter() {
+    MovingPivot.show = true;
+    MovingPivot.currentTakenPivot = undefined;
+}
+
+const pivotWrapper = ref(null);
+
+onMounted(() => {
+    const pivotContainer = pivotWrapper.value;
+    if (pivotContainer instanceof HTMLElement) {
+        pivotContainer.addEventListener('wheel',
+            registerWheelEvent(null, globalLookup.pstate, globalLookup, eventHandler)
+        );
+
+        pivotContainer.addEventListener('mousemove', event => {
+            for (const pipeId of mousemoveEventPipes.keys()) {
+                const fn = mousemoveEventPipes.get(pipeId);
+                fn(event);
+            }
+        });
+    }
+});
+
 </script>
 
 <style>
 .vcd-render-wrapper {
+    user-select: none;
     height: 98vh;
     width: 98vw;
     cursor: crosshair;
@@ -81,7 +134,7 @@ function onRenderClick() {
 .vcd-cursor {
     position: absolute;
     pointer-events: none;
-    z-index: 60;
+    z-index: 80;
 }
 
 .vcd-values text {
diff --git a/src/components/pivot/moving-pivot.vue b/src/components/pivot/moving-pivot.vue
new file mode 100644
index 0000000..ab87bfd
--- /dev/null
+++ b/src/components/pivot/moving-pivot.vue
@@ -0,0 +1,165 @@
+<template>
+    <div :ref="el => element = el">
+        <div
+            class="vertical-cursor-wrapper"
+            :style="cursorStyle"
+        >
+            <div class="current-display-cursor-up">
+                <div class="current-time-value" :style="colorStyle">{{ MovingPivot.label }}</div>
+                <div class="cursor-down-arrow" :style="borderStyle"></div>
+            </div>
+            <div class="vertical-line" :style="verticalLineStyle"></div>
+            <div class="current-display-cursor-down">
+                <div class="current-time-value" :style="colorStyle">{{ MovingPivot.label }}</div>
+                <div class="cursor-up-arrow" :style="borderStyle"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { emitter, globalLookup } from '@/hook/global';
+import { eventHandler, registerWheelEvent } from '@/hook/wave-view';
+import { computed, defineComponent, ref, onMounted } from 'vue';
+import { calcCursorLeft, MovingPivot } from './cursor';
+import formatTime from '@/hook/wave-view/format-time';
+import { getNearestUserPivot } from './pivot-view';
+
+defineComponent({ name: 'user-pivot' });
+const element = ref(null);
+
+const colorStyle = computed(() => ({
+    backgroundColor: MovingPivot.color
+}));
+
+const verticalLineStyle = computed(() => ({
+    border: '2px dashed ' + MovingPivot.color
+}));
+
+const borderStyle = computed(() => ({
+    borderLeft: '5px solid ' +  MovingPivot.color,
+    borderTop: '5px solid ' +  MovingPivot.color
+}));
+
+const boxShift = 30;
+const cursorStyle = computed(() => ({
+    left: MovingPivot.left - boxShift + 'px'
+}));
+
+
+/**
+ * @param {MouseEvent} event 
+ */
+function onMousemove(event) {
+    const pstate = globalLookup.pstate;
+    const x = event.clientX || event.x;
+    pstate.xCursor = x;
+    const { xScale, xOffset, tgcd, timescale, xCursor } = pstate;
+    const currentT = Math.round((xCursor - xOffset) / xScale) * tgcd;
+    globalLookup.currentTime = currentT;
+    MovingPivot.currentTime = currentT;
+    MovingPivot.label = formatTime(currentT, timescale);
+    MovingPivot.left = calcCursorLeft(currentT);
+
+    if (MovingPivot.currentTakenPivot !== undefined) {
+        return;
+    }
+    // 通过计算距离最近的用户信标，来决定是否要消失，给与用户信标空间来执行额外操作
+    const userPivot = getNearestUserPivot(currentT);
+    
+    if (userPivot) {
+        const marginX = Math.abs(x - userPivot.x);
+        if (marginX < 25) {
+            // 此时距离用户信标比较近，隐藏主信标
+            MovingPivot.show = false;
+            MovingPivot.currentTakenPivot = userPivot;
+        }
+    }
+}
+
+emitter.on('meta-ready', () => {
+    const pivot = element.value;
+    if (pivot instanceof HTMLElement) {
+        document.addEventListener('mousemove', onMousemove);
+        
+        // 添加光标初始位置
+        const validWidth = globalLookup.pstate.width || window.innerWidth;
+        onMousemove({ clientX: validWidth / 2 })
+    }
+});
+
+
+</script>
+
+<style scoped>
+.vertical-cursor-wrapper {
+    position: absolute;
+    top: 0;
+    padding: 0;
+    cursor: crosshair;
+    z-index: 55;
+    display: flex;  
+    flex-direction: column;  
+    align-items: center; /* 沿着横轴（水平方向）对齐 */  
+    justify-content: center; /* 沿着纵轴（垂直方向）对齐 */
+    transform: translateY(var(--toolbar-height));
+}
+
+.current-display-cursor-up {
+    height: var(--time-scale-height);
+    width: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    color: var(--sidebar-item-text);
+    font-size: 14px;
+    position: relative;
+}
+
+.current-display-cursor-down {
+    height: var(--time-scale-height);
+    width: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    color: var(--sidebar-item-text);
+    font-size: 14px;
+    position: relative;
+}
+
+.current-time-value {
+    border-radius: .4em;
+    color: var(--sidebar);
+    padding: 5px;
+    width: fit-content;
+    font-size: 1.05rem;
+    font-family: var(--vcd-value-font-family);
+    white-space: nowrap;
+    z-index: 60;
+}
+
+.cursor-down-arrow {
+    transform: rotate(225deg);
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    /* 30px - 10 * 2 / \sqrt{2} */
+    left: 19.93px;
+    bottom: -3px;
+    z-index: 50;
+}
+
+.vertical-line {
+    height: calc(100vh - 2 * var(--time-scale-height) - 65px);
+}
+
+.cursor-up-arrow {
+    transform: rotate(45deg);
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    left: 19.93px;
+    top: -3px;
+    z-index: 50;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/pivot/pivot-view.js b/src/components/pivot/pivot-view.js
new file mode 100644
index 0000000..f9fd09a
--- /dev/null
+++ b/src/components/pivot/pivot-view.js
@@ -0,0 +1,138 @@
+import { reactive, ref } from "vue";
+import { calcCursorLeft, SystemPivot } from "./cursor";
+import { globalLookup } from "@/hook/global";
+import formatTime from "@/hook/wave-view/format-time";
+
+/**
+ * @description 每一个动态信标
+ * @typedef {Object} UserPivot
+ * @property {number} id
+ * @property {string} label
+ * @property {number} x
+ * @property {number} time
+ * @property {boolean} show
+ */
+
+
+/**
+ * @description 该数据结构描述了所有通过 makePivot 创建的 用户信标
+ * @type {Map<number, UserPivot>}
+ */
+export const UserPivots = reactive(new Map());
+export const orderedTimes = [];
+
+export const UserPivotColor = ref('#1e90ff');
+
+/**
+ * @description 创建一个信标
+ * @param {number} time 需要创建的轴的时间点
+ */
+export function createPivot(time) {
+    if (UserPivots.has(time)) {
+        return;
+    }
+
+    const id = Date.now();
+    const x = calcCursorLeft(time);
+    const timescale = globalLookup.timescale;
+    const label = formatTime(time, timescale);
+    const show = true;
+
+    UserPivots.set(time, { time, x, id, label, show });
+    orderedTimes.push(time);
+    orderedTimes.sort((a, b) => a < b);
+}
+
+export function searchOrderedTimeIndex(time) {
+    for (let i = 0; i < orderedTimes.length; ++ i) {
+        if (orderedTimes[i] === time) {
+            return i;
+        }
+    }
+    return undefined;
+}
+
+export function deletePivot(time) {
+    if (!UserPivots.has(time)) {
+        return;
+    }
+
+    UserPivots.delete(time);
+    const i = searchOrderedTimeIndex(time);
+    if (i !== undefined) {
+        orderedTimes.splice(i, 1);
+    }
+}
+
+export function updateAllPivots() {
+    // 更新系统信标
+    SystemPivot.updateLeft();
+
+    // 更新所有用户信标
+    for (const time of UserPivots.keys()) {
+        const pivot = UserPivots.get(time);
+        pivot.x = calcCursorLeft(time);
+    }
+}
+
+/**
+ * 
+ * @param {number[]} times 
+ * @param {number} target 目标时间 
+ * @returns 
+ */
+function bisearch(times, target) {
+    let i = 0, j = times.length - 1;
+    while (i < j) {
+        if (times[i] === target) {
+            break;
+        }
+        if (times[j] <= target) {
+            i = j;
+            break;
+        }
+        if (j - i === 1) {
+            break;
+        }
+        const mid = (i + j) >> 1;
+        if (times[mid] > target) {
+            j = mid;
+        } else {
+            i = mid;
+        }
+    }
+
+    return i;
+}
+
+/**
+ * @description 高效获取距离 time 最近的时间点 t，时间复杂度 O(logn)
+ * @param {number} time
+ * @returns {UserPivot | undefined}
+ */
+export function getNearestUserPivot(time) {
+    const pivotNum = UserPivots.size;
+    if (pivotNum === 0) {
+        return undefined;
+    }
+
+    if (pivotNum === 1) {
+        for (const [time, pivot] of UserPivots) {
+            return pivot;
+        }
+    }
+
+    const i = bisearch(orderedTimes, time);
+    // console.log(i, orderedTimes, time);
+    
+    if (i === pivotNum - 1) {
+        return UserPivots.get(orderedTimes[i]);
+    }
+    
+    const prevT = orderedTimes[i];
+    const nextT = orderedTimes[i + 1];
+    if (nextT - time > time - prevT) {
+        return UserPivots.get(prevT);
+    }
+    return UserPivots.get(nextT);
+}
diff --git a/src/components/pivot/pivot-view.vue b/src/components/pivot/pivot-view.vue
new file mode 100644
index 0000000..db85156
--- /dev/null
+++ b/src/components/pivot/pivot-view.vue
@@ -0,0 +1,27 @@
+<template>
+    <div
+        v-for="(pivot, index) in UserPivots"
+        :key="pivot[1].id"
+    >
+        <UserPivot
+            v-show="pivot[1].show"
+            :color="UserPivotColor"
+            :label="pivot[1].label"
+            :x="pivot[1].x"
+            :time="pivot[1].time"
+        />
+    </div>
+</template>
+
+<script setup>
+/**
+ * @description 该模块为创建新的信标采用的视图，可以看 makePivot 这个函数
+ */
+
+import { defineComponent } from 'vue';
+import { UserPivotColor, UserPivots } from './pivot-view';
+import UserPivot from './user-pivot.vue';
+
+defineComponent({ name: 'pivot-view' });
+
+</script>
\ No newline at end of file
diff --git a/src/components/render/cursor.vue b/src/components/pivot/system-pivot.vue
similarity index 75%
rename from src/components/render/cursor.vue
rename to src/components/pivot/system-pivot.vue
index 9089329..7ae627e 100644
--- a/src/components/render/cursor.vue
+++ b/src/components/pivot/system-pivot.vue
@@ -1,48 +1,65 @@
 <template>
-    <div v-show="StaticCursor.show">
-        <div class="vertical-cursor-wrapper"
+    <div v-if="renderPivot">
+        <div
+            class="vertical-cursor-wrapper"
             :style="cursorStyle"
         >
             <div class="current-display-cursor-up">
-                <div class="current-time-value" :style="colorStyle">{{ StaticCursor.label }}</div>
+                <div class="current-time-value" :style="colorStyle">{{ props.label }}</div>
                 <div class="cursor-down-arrow" :style="borderStyle"></div>
             </div>
             <div class="vertical-line" :style="colorStyle"></div>
             <div class="current-display-cursor-down">
-                <div class="current-time-value" :style="colorStyle">{{ StaticCursor.label }}</div>
+                <div class="current-time-value" :style="colorStyle">{{ props.label }}</div>
                 <div class="cursor-up-arrow" :style="borderStyle"></div>
             </div>
         </div>
-
     </div>
 </template>
 
 <script setup>
+import { globalLookup } from '@/hook/global';
 import { computed, defineComponent } from 'vue';
-import { StaticCursor } from './cursor';
 
-defineComponent({ name: 'vertical-cursor' });
+defineComponent({ name: 'system-pivot' });
+
 
 const props = defineProps({
     color: {
         type: String,
         default: 'var(--main-color)'
+    },
+    label: {
+        type: String
+    },
+    x: {
+        type: Number
     }
 });
 
-const colorStyle = {
+const colorStyle = computed(() => ({
     backgroundColor: props.color
-};
+}));
 
-const borderStyle = {
+const borderStyle = computed(() => ({
     borderLeft: '5px solid ' + props.color,
     borderTop: '5px solid ' + props.color
-};
+}));
 
 const boxShift = 25;
 const cursorStyle = computed(() => ({
-    left: StaticCursor.left - boxShift + 'px'
+    left: props.x - boxShift + 'px'
 }));
+
+const renderPivot = computed(() => {
+    const x = props.x - boxShift;
+    if (x > 0 && x < (globalLookup.pstate.width || window.innerWidth)) {
+        return true;
+    }
+
+    return false;
+})
+
 </script>
 
 <style scoped>
@@ -50,12 +67,11 @@ const cursorStyle = computed(() => ({
     position: absolute;
     top: 0;
     padding: 0;
-    cursor: crosshair;
     z-index: 55;
     display: flex;  
     flex-direction: column;  
-    align-items: center; /* 沿着横轴（水平方向）对齐 */  
-    justify-content: center; /* 沿着纵轴（垂直方向）对齐 */
+    align-items: center;
+    justify-content: center;
     transform: translateY(var(--toolbar-height));
 }
 
@@ -86,6 +102,7 @@ const cursorStyle = computed(() => ({
     color: var(--sidebar-item-text);
     padding: 5px;
     width: fit-content;
+    font-family: var(--vcd-value-font-family);
     white-space: nowrap;
 }
 
diff --git a/src/components/pivot/user-context-menu.js b/src/components/pivot/user-context-menu.js
new file mode 100644
index 0000000..2874e3b
--- /dev/null
+++ b/src/components/pivot/user-context-menu.js
@@ -0,0 +1,17 @@
+import { reactive } from "vue";
+import { getNearestUserPivot } from "./pivot-view";
+import { globalLookup } from "@/hook/global";
+
+
+export const pivotcontextmenu = reactive({
+    show: false,
+    x: 0,
+    y: 0
+});
+
+export function handleUserContextMenu(event) {
+    const x = event.x;
+    pivotcontextmenu.x = event.x;
+    pivotcontextmenu.y = event.y;
+    pivotcontextmenu.show = true;
+}
\ No newline at end of file
diff --git a/src/components/pivot/user-context-menu.vue b/src/components/pivot/user-context-menu.vue
new file mode 100644
index 0000000..31afa5b
--- /dev/null
+++ b/src/components/pivot/user-context-menu.vue
@@ -0,0 +1,76 @@
+<template>
+    <div
+        class="user-context-menu"
+        :style="contextStyle"
+    >
+        <div class="menu-container">
+            <div
+                class="menu-item-container"
+                @click="deleteUserPivot()"
+            >
+                <span class="menu-item-icon iconfont icon-delete"></span>
+                <span class="menu-item-name">{{ t('pivot.context.delete') }}</span>
+            </div>
+            <div
+                class="menu-item-container"
+                @click="displayRelativeAxis()"
+            >
+                <span class="menu-item-icon iconfont icon-axis"></span>
+                <span class="menu-item-name">{{ t('pivot.context.display-axis') }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed, defineComponent } from 'vue';
+import { MovingPivot } from './cursor';
+import { useI18n } from 'vue-i18n';
+import { pivotcontextmenu } from './user-context-menu';
+import { globalLookup } from '@/hook/global';
+import { getNearestUserPivot, orderedTimes, searchOrderedTimeIndex, UserPivots } from './pivot-view';
+
+defineComponent({ name: 'user-context-menu' });
+
+const { t } = useI18n();
+
+const contextStyle = computed(() => ({
+    top: pivotcontextmenu.y + ' px',
+    left: pivotcontextmenu.x + 20 + 'px'
+}));
+
+function deleteUserPivot() {
+    const x = pivotcontextmenu.x;
+    const pstate = globalLookup.pstate;
+    if (pstate) {
+        const { xOffset, xScale, tgcd } = pstate;
+        const currentTime = Math.round((x - xOffset) / xScale) * tgcd;
+        const pivot = getNearestUserPivot(currentTime);
+        if (pivot) {
+            const i = searchOrderedTimeIndex(pivot.time);
+            orderedTimes.splice(i, 1);
+            UserPivots.delete(pivot.time);
+            pivotcontextmenu.show = false;
+        }
+    }
+}
+
+function displayRelativeAxis() {
+
+}
+
+</script>
+
+<style scoped>
+
+.user-context-menu {
+    z-index: 200;
+    border-radius: .5em;
+    padding: 10px;
+    position: fixed;
+    box-shadow: 0 0 10px 1px rgb(16, 16, 16);
+    background-color: var(--sidebar);
+    border: solid 1px var(--sidebar-border);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/pivot/user-pivot.vue b/src/components/pivot/user-pivot.vue
new file mode 100644
index 0000000..0d9691d
--- /dev/null
+++ b/src/components/pivot/user-pivot.vue
@@ -0,0 +1,232 @@
+<template>
+    <div
+        v-if="renderPivot" 
+        @mouseenter="onEnter()"
+        @mouseleave="onLeave()"
+        @contextmenu.prevent="handleUserContextMenu($event)"
+        class="user-pivot"
+    >
+        <div
+            class="vertical-cursor-wrapper"
+            :style="cursorStyle"
+        >
+            <div class="current-display-cursor-up">
+                <div class="current-time-value" :style="colorStyle">{{ props.label }}</div>
+                <div class="cursor-down-arrow" :style="borderStyle"></div>
+            </div>
+            <div
+                class="vertical-line"
+                :style="colorStyle"
+                :ref="el => vline.element = el"
+                @mousedown.stop="onVLineMousedown()"
+                @mouseup.stop="onVLineMouseup()"
+            ></div>
+            <div class="current-display-cursor-down">
+                <div class="current-time-value" :style="colorStyle">{{ props.label }}</div>
+                <div class="cursor-up-arrow" :style="borderStyle"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { globalLookup } from '@/hook/global';
+import { eventHandler, registerWheelEvent } from '@/hook/wave-view';
+import { computed, defineComponent, ref, onMounted, reactive, nextTick } from 'vue';
+import { calcCursorLeft, mousemoveEventPipes, MovingPivot } from './cursor';
+import { orderedTimes, searchOrderedTimeIndex, UserPivots } from './pivot-view';
+import formatTime from '@/hook/wave-view/format-time';
+import { handleUserContextMenu } from './user-context-menu';
+
+defineComponent({ name: 'user-pivot' });
+
+const props = defineProps({
+    color: {
+        type: String,
+        default: 'var(--main-color)'
+    },
+    label: {
+        type: String
+    },
+    x: {
+        type: Number
+    },
+    time: {
+        type: Number
+    }
+});
+
+const colorStyle = computed(() => ({
+    backgroundColor: props.color
+}));
+
+const borderStyle = computed(() => ({
+    borderLeft: '5px solid ' + props.color,
+    borderTop: '5px solid ' + props.color
+}));
+
+const boxShift = 25;
+const cursorStyle = computed(() => ({
+    left: props.x - boxShift + 'px'
+}));
+
+const renderPivot = computed(() => {
+    const x = props.x - boxShift;
+    if (x > 0 && x < (globalLookup.pstate.width || window.innerWidth)) {
+        return true;
+    }
+
+    return false;
+})
+
+
+function onEnter() {
+}
+
+function onLeave() {
+    MovingPivot.show = true;
+    MovingPivot.currentTakenPivot = undefined;
+}
+
+const vline = reactive({
+    dragEnable: false,
+    element: undefined,
+    originTime: 0
+});
+
+
+function onVLineMousedown() {
+    const div = vline.element;
+    if (!(div instanceof HTMLElement)) {
+        return;
+    }
+
+    vline.dragEnable = true;
+    MovingPivot.dragEnable = true;
+
+    vline.originTime = props.time;
+    const pivot = UserPivots.get(vline.originTime);
+    if (pivot === undefined) {
+        return;
+    }
+
+    // 先从 orderTimes 里面拿走
+    const i = searchOrderedTimeIndex(vline.originTime);
+    if (i !== undefined) {
+        orderedTimes.splice(i, 1);
+    }
+
+    // 开启拖拽
+    console.log('begin to drag');
+
+    mousemoveEventPipes.set(pivot.id, event => {
+        const x = event.clientX || event.x;
+        pivot.x = x;
+        const pstate = globalLookup.pstate;
+        if (pstate) {
+            const { xOffset, xScale, tgcd, timescale } = pstate;
+            const t = Math.round((x - xOffset) / xScale) * tgcd;
+            pivot.time = t;
+            pivot.label = formatTime(t, timescale);
+        } 
+    });
+}
+
+function onVLineMouseup() {
+    const div = vline.element;
+    if (!(div instanceof HTMLElement)) {
+        return;
+    }
+    const pivot = UserPivots.get(vline.originTime);
+    
+    if (pivot) {
+        mousemoveEventPipes.delete(pivot.id);
+        UserPivots.delete(vline.originTime);
+        UserPivots.set(pivot.time, pivot);
+        orderedTimes.push(pivot.time);
+        orderedTimes.sort((a, b) => a < b);
+    }
+
+    vline.originTime = 0;
+    vline.dragEnable = false;
+    MovingPivot.currentTakenPivot = pivot;
+    MovingPivot.show = false;
+    MovingPivot.dragEnable = false;
+}
+
+</script>
+
+<style scoped>
+
+.user-pivot {
+    cursor: pointer;
+}
+
+.vertical-cursor-wrapper {
+    position: absolute;
+    top: 0;
+    padding: 0;
+    z-index: 55;
+    display: flex;  
+    flex-direction: column;  
+    align-items: center; /* 沿着横轴（水平方向）对齐 */  
+    justify-content: center; /* 沿着纵轴（垂直方向）对齐 */
+    transform: translateY(var(--toolbar-height));
+}
+
+.current-display-cursor-up {
+    height: var(--time-scale-height);
+    width: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    color: var(--sidebar-item-text);
+    font-size: 14px;
+    position: relative;
+}
+
+.current-display-cursor-down {
+    height: var(--time-scale-height);
+    width: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    color: var(--sidebar-item-text);
+    font-size: 14px;
+    position: relative;
+}
+
+.current-time-value {
+    border-radius: .4em;
+    color: var(--sidebar-item-text);
+    padding: 5px;
+    width: fit-content;
+    font-family: var(--vcd-value-font-family);
+    white-space: nowrap;
+}
+
+.cursor-down-arrow {
+    transform: rotate(225deg);
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    /* 25px - 10 * 2 / \sqrt{2} */
+    left: 17.93px;
+    bottom: 0;
+}
+
+.vertical-line {
+    cursor: ew-resize;
+    width: 2px;
+    height: calc(100vh - 2 * var(--time-scale-height) - 60px);
+}
+
+.cursor-up-arrow {
+    transform: rotate(45deg);
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    left: 17.93px;
+    top: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/render/time-scale.vue b/src/components/render/time-scale.vue
deleted file mode 100644
index 229f79d..0000000
--- a/src/components/render/time-scale.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-    <div class="time-scale-up-wrapper">
-
-    </div>
-
-    <div class="time-scale-wrapper" :style="`left: ${currentX}px; width: ${300}px;`">
-        <div class="current-display-cursor-up">
-            <div class="time-scale-value">{{ currentX }} {{ timeScaleManage.unit }}</div>
-            <div class="time-scale-down"></div>
-        </div>
-        <div class="time-scale-line"></div>
-        <div class="current-display-cursor-down">
-            <div class="time-scale-value">{{ currentX }} {{ timeScaleManage.unit }}</div>
-            <div class="time-scale-up"></div>
-        </div>
-    </div>
-
-    <div class="time-scale-down-wrapper">
-
-    </div>
-</template>
-
-<script>
-import { onMounted, reactive } from 'vue';
-import { globalLookup, emitter } from '@/hook/global';
-import { wheelScale } from '@/hook/wheel';
-
-export default {
-    name: 'time-scale',
-
-    setup() {
-        // see --sidebar-width
-        const left = 280 + 20;
-
-        // see --right-nav-width
-        const right = document.body.clientWidth - 60;
-
-        const timeScaleManage = reactive({
-            scale: 1,
-            unit: 'ns'
-        });
-
-        // 此时有关波形的元信息已经加载完毕
-        emitter.on('meta-ready', () => {
-        });
-
-        // document.addEventListener('wheel', event => {
-        //     if ((event.wheelDelta && event.ctrlKey) || event.detail) {
-        //         event.preventDefault();
-        //     }
-            
-        //     if (event.ctrlKey) {
-        //         // console.log(event.wheelDelta);
-        //         wheelScale(event);
-        //     } else if (event.shiftKey) {
-        //         // console.log(event.wheelDelta);
-        //         console.log('deltaX', event.deltaX);
-        //         console.log('deltaY', event.deltaY);
-        //     }
-        // }, { capture: false, passive: false });
-
-
-        const currentX = 300;
-
-        return {
-            currentX,
-            timeScaleManage
-        }
-    }
-}
-</script>
-
-<style>
-.time-scale-up-wrapper {
-    position: absolute;
-    top: 0;
-    left: calc(var(--sidebar-width) + 20px);
-    width: calc(100vw - var(--sidebar-width) - var(--right-nav-width) - 20px);
-    height: var(--time-scale-height);
-    background-color: var(--sidebar);
-    z-index: 50;
-    cursor: crosshair;
-}
-
-.time-scale-down-wrapper {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: calc(100vw - var(--right-nav-width));
-    height: var(--time-scale-height);
-    background-color: var(--sidebar);
-    z-index: 50;
-    cursor: crosshair;
-}
-
-.time-scale-down {
-    position: absolute;
-    bottom: 0;
-    width: 1px;
-    height: 10px;
-    border: 1px solid var(--scrollbar-hover);
-    background-color: var(--scrollbar-hover);
-}
-
-.time-scale-up {
-    position: absolute;
-    top: 0;
-    width: 1px;
-    height: 10px;
-    border: 1px solid var(--scrollbar-hover);
-    background-color: var(--scrollbar-hover);
-}
-
-.time-scale-wrapper {
-    position: absolute;
-    height: 100vh;
-    padding: 0;
-    top: 0;
-    cursor: crosshair;
-    z-index: 55;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    /* 沿着横轴（水平方向）对齐 */
-    justify-content: center;
-    /* 沿着纵轴（垂直方向）对齐 */
-}
-
-
-.time-scale-line {
-    width: 1px;
-    background-color: var(--scrollbar-hover);
-    height: calc(100vh - 2 * var(--time-scale-height));
-}
-</style>
\ No newline at end of file
diff --git a/src/components/setting/index.vue b/src/components/setting/index.vue
index 57e6067..9255d50 100644
--- a/src/components/setting/index.vue
+++ b/src/components/setting/index.vue
@@ -10,6 +10,7 @@
                             name="language-setting"
                             class="language-setting"
                             v-model="locale"
+                            @change="onlanguagechange"
                         >
                             <el-option
                                 v-for="option in languageSetting.options"
@@ -19,6 +20,22 @@
                             </el-option>
                         </el-select>
                     </div>
+
+                    <el-dialog
+                        v-model="languageDialogShow"
+                        class="language-dialog"
+                        :title="t('tips')"
+                        width="500"
+                    >
+                        <span>{{ t('setting.language.change-dialog') }}</span>
+                        <template #footer>
+                        <div class="dialog-footer">
+                            <el-button type="primary" @click="confirmLanguageDialog()">
+                                {{ t('confirm') }}
+                            </el-button>
+                        </div>
+                        </template>
+                    </el-dialog>
                 </div>
                 <br>
                 <!-- <div class="setting-option">
@@ -98,14 +115,14 @@
                     <span class="option-title" style="width: 100px;">{{ t('wavecolor') }}</span>
                     <div style="width: 120px">
                         <el-select
-                        v-model="wavecolor.currentOptionIndex"
-                        collapse-tags
-                        collapse-tags-tooltip
-                        placeholder="Select"
-                    >
-                        <el-option v-for="option in wavecolor.options" :key="option.value"
-                            :label="option.label" :value="option.value" />
-                    </el-select>
+                            v-model="wavecolor.currentOptionIndex"
+                            collapse-tags
+                            collapse-tags-tooltip
+                            placeholder="Select"
+                        >
+                            <el-option v-for="option in wavecolor.options" :key="option.value"
+                                :label="option.label" :value="option.value" />
+                        </el-select>
                     </div>
                     <div style="height: 20px; width: 20px;"></div>
                     <el-color-picker
@@ -115,6 +132,30 @@
                         size="large"
                     />
                 </div>
+
+                <br>
+
+                <div class="setting-option">
+                    <span class="option-title" style="width: 100px;">{{ t('setting.appearance.pivot-color') }}</span>
+                    <div style="width: 120px">
+                        <el-select
+                            v-model="pivotColor.currentOptionIndex"
+                            collapse-tags
+                            collapse-tags-tooltip
+                            placeholder="Select"
+                        >
+                            <el-option v-for="option in pivotColor.options" :key="option.value"
+                                :label="option.label" :value="option.value" />
+                        </el-select>
+                    </div>
+                    <div style="height: 20px; width: 20px;"></div>
+                    <el-color-picker
+                        v-model="pivotColor.colors[pivotColor.currentOptionIndex]"
+                        show-alpha
+                        :predefine="predefinedColors"
+                        size="large"
+                    />
+                </div>
             </div>
 
             <hr>
@@ -159,13 +200,14 @@
 </template>
 
 <script setup>
-import { reactive, defineComponent, watch } from 'vue';
+import { reactive, defineComponent, watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { globalSetting, globalLookup } from '@/hook/global';
 import { debounceWrapper, scopes, variables, predefinedColors, webglColor2rgba, rgba2WebglColor } from '@/hook/utils';
 import { gl_Colors } from '@/hook/wave-view/render-utils';
-
 import HelpIcon from '../help-icon.vue';
+import { UserPivotColor } from '../pivot/pivot-view';
+import { MovingPivot, SystemPivot } from '../pivot/cursor';
 
 defineComponent({ name: "dide-setting" });
 
@@ -180,6 +222,16 @@ watch(
     }
 );
 
+const languageDialogShow = ref(false);
+
+function confirmLanguageDialog() {
+    languageDialogShow.value = false;
+}
+
+function onlanguagechange() {
+    languageDialogShow.value = true;
+}
+
 const wavecolor = reactive({
     options: [
         {
@@ -210,10 +262,31 @@ const wavecolor = reactive({
     reset() {}
 });
 
-watch(() => wavecolor.currentOptionIndex, () => {
-    console.log(wavecolor.currentOptionIndex);
+const pivotColor = reactive({
+    options: [
+        {
+            value: 0,
+            label: t('setting.appearance.moving-pivot')
+        },
+        {
+            value: 1,
+            label: t('setting.appearance.user-pivot')
+        },
+        {
+            value: 2,
+            label: t('setting.appearance.system-pivot')
+        }
+    ],
+    currentOptionIndex: 0,
+    colors: [
+        MovingPivot.color,
+        UserPivotColor.value,
+        SystemPivot.color
+    ]
 });
 
+
+
 // 更新默认波形颜色
 watch(() => wavecolor.colors, () => {
     const colorString = wavecolor.colors[wavecolor.currentOptionIndex];
@@ -231,6 +304,23 @@ watch(() => wavecolor.colors, () => {
     }
 }, { deep: true });
 
+// 更新信标颜色
+watch(() => pivotColor.colors, () => {
+    const colorString = pivotColor.colors[pivotColor.currentOptionIndex];
+    switch (pivotColor.currentOptionIndex) {
+        case 0:
+            MovingPivot.color = colorString;
+            break;
+        case 1:
+            UserPivotColor.value = colorString;
+            break;
+        case 2:
+            SystemPivot.color = colorString;
+            break;
+        default:
+            break;
+    }
+}, { deep: true });
 
 const languageSetting = reactive({
     options: [
@@ -252,6 +342,9 @@ function modifySignalTrackHeight() {
 }
 
 const safeModifySignalTrackHeight = debounceWrapper(modifySignalTrackHeight, 200);
+
+
+
 </script>
 
 <style>
@@ -313,4 +406,14 @@ const safeModifySignalTrackHeight = debounceWrapper(modifySignalTrackHeight, 200
     transition: var(--animation-3s);
     -webkit-transition: var(--animation-3s);
 }
+
+.language-dialog {
+    color: var(--sidebar-item-text);
+    background-color: var(--sidebar) !important;
+}
+
+.el-dialog__title {
+    color: var(--sidebar-item-text) !important;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/sidebar/signal-context-menu.vue b/src/components/sidebar/signal-context-menu.vue
index 172589d..b856b66 100644
--- a/src/components/sidebar/signal-context-menu.vue
+++ b/src/components/sidebar/signal-context-menu.vue
@@ -220,8 +220,4 @@ function makeSignalIconClass(signal) {
     box-shadow: 0 0 10px 1px rgb(16, 16, 16);
 }
 
-.el-color-picker__panel button {
-    display: none;
-}
-
 </style>
\ No newline at end of file
diff --git a/src/components/toolbar/cursor-location.js b/src/components/toolbar/cursor-location.js
index 54644a7..d40d470 100644
--- a/src/components/toolbar/cursor-location.js
+++ b/src/components/toolbar/cursor-location.js
@@ -1,7 +1,8 @@
 import { globalLookup } from "@/hook/global";
-import { calcCursorLeft, StaticCursor } from "../render/cursor";
+import { calcCursorLeft, SystemPivot } from "../pivot/cursor";
 import { sidebarSelectedWires } from "@/hook/sidebar-select-wire";
 import { updateWireCurrentValue } from "@/hook/utils";
+import { createPivot } from "../pivot/pivot-view";
 
 
 /**
@@ -11,8 +12,8 @@ import { updateWireCurrentValue } from "@/hook/utils";
  * @param {Pstate} pstate
  */
 export function moveto(time, leftMargin, pstate) {
-    StaticCursor.show = true;
-    StaticCursor.currentTime = time;
+    SystemPivot.show = true;
+    SystemPivot.currentTime = time;
 
     const { width, xOffset, xScale, tgcd, timescale } = pstate;
     let nextOffsetX =  leftMargin - (time / tgcd) * xScale;
@@ -26,8 +27,8 @@ export function moveto(time, leftMargin, pstate) {
     pstate.xOffset = nextOffsetX;
     
     // 改变静态信标
-    StaticCursor.updateLeft();
-    StaticCursor.updateLabel(pstate.timescale);
+    SystemPivot.updateLeft();
+    SystemPivot.updateLabel(pstate.timescale);
 
     // 更新所有轨道的数字
     updateWireCurrentValue(time);
@@ -76,7 +77,7 @@ export function toPrevChange() {
         if (wave.length === 1) {
             toBegin();
         } else {
-            const currentT = StaticCursor.currentTime;
+            const currentT = SystemPivot.currentTime;
             let pivot = bisearch(wave, currentT);
 
             const pwave = wave[pivot];
@@ -109,7 +110,7 @@ export function toNextChange() {
         if (wave.length === 1) {
             toEnd();
         } else {
-            const currentT = StaticCursor.currentTime;
+            const currentT = SystemPivot.currentTime;
             let pivot = bisearch(wave, currentT);
             let targetT;
             if (pivot === wave.length - 1) {
@@ -135,10 +136,10 @@ const locationManager = {
 };
 
 
-export function makeLocation() {
-    const currentT = StaticCursor.currentTime;
+export function makePivot() {
+    const currentT = SystemPivot.currentTime;
     // 在 currentT 创建新的信标
-
+    createPivot(currentT);
 }
 
 /**
diff --git a/src/components/toolbar/cursor-location.vue b/src/components/toolbar/cursor-location.vue
index de06212..64b3fb2 100644
--- a/src/components/toolbar/cursor-location.vue
+++ b/src/components/toolbar/cursor-location.vue
@@ -64,6 +64,8 @@
         >
             <div
                 class="item iconfont icon-add-line"
+                :class="{ 'disable' : !SystemPivot.show }"
+                @click="makePivot()"
             />
         </el-tooltip>
         
@@ -73,8 +75,9 @@
 <script setup>
 import { defineComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { toBegin, toEnd, toNextChange, toPrevChange } from './cursor-location';
+import { makePivot, toBegin, toEnd, toNextChange, toPrevChange } from './cursor-location';
 import { globalLookup } from '@/hook/global';
+import { SystemPivot } from '../pivot/cursor';
 
 defineComponent({ name: 'cursor-location' });
 
diff --git a/src/components/toolbar/pivot-view.js b/src/components/toolbar/pivot-view.js
deleted file mode 100644
index 991aa1a..0000000
--- a/src/components/toolbar/pivot-view.js
+++ /dev/null
@@ -1 +0,0 @@
-    
\ No newline at end of file
diff --git a/src/components/toolbar/value-search.js b/src/components/toolbar/value-search.js
index 5efff4a..337c6e5 100644
--- a/src/components/toolbar/value-search.js
+++ b/src/components/toolbar/value-search.js
@@ -13,7 +13,7 @@ import { globalLookup } from "@/hook/global";
 import { sidebarSelectedWires } from "@/hook/sidebar-select-wire";
 import { reactive, ref } from "vue";
 import { bisearch, moveto } from "./cursor-location";
-import { StaticCursor } from "../render/cursor";
+import { SystemPivot } from "../pivot/cursor";
 import { FormatValueRender, JSValueRender } from "@/hook/wave-view/toolbar/renderFormat";
 import { ElMessage } from "element-plus";
 import i18n from '@/i18n/index';
@@ -49,9 +49,9 @@ function toPrevValue() {
     // TODO: 空间换时间，提升性能
     const prevTimes = [];
 
-    const currentT = StaticCursor.currentTime;
-    // StaticCursor.updateLabel(currentT);
-    // StaticCursor.updateLeft();
+    const currentT = SystemPivot.currentTime;
+    // SystemPivot.updateLabel(currentT);
+    // SystemPivot.updateLeft();
 
     const searchContent = toolbarValueSearch.content.trim();
 
@@ -93,9 +93,9 @@ function toPrevValue() {
 function toNextValue() {
     const prevTimes = [];
     
-    const currentT = StaticCursor.currentTime;
-    // StaticCursor.updateLabel(currentT);
-    // StaticCursor.updateLeft();
+    const currentT = SystemPivot.currentTime;
+    // SystemPivot.updateLabel(currentT);
+    // SystemPivot.updateLeft();
 
     const searchContent = toolbarValueSearch.content.trim();
 
diff --git a/src/hook/sidebar-select-wire.js b/src/hook/sidebar-select-wire.js
index 89cfa08..f276763 100644
--- a/src/hook/sidebar-select-wire.js
+++ b/src/hook/sidebar-select-wire.js
@@ -47,6 +47,14 @@ export const sidebarSelectedWires = {
 
     clear() {
         this.lastLink = undefined;
+        for (const link of globalLookup.sidebarSelectedWireLinks) {
+            globalLookup.setRenderOption(link, 'highlight', 0);
+        }
+
+        if (globalLookup.sidebarSelectedWireLinks.size > 0) {
+            globalLookup.render({ type: 'wave-only' });
+        }
+
         globalLookup.sidebarSelectedWireLinks.clear();
         this.togglePipe();
     }
diff --git a/src/hook/wave-view/dom-container.js b/src/hook/wave-view/dom-container.js
index 67df750..64e1516 100644
--- a/src/hook/wave-view/dom-container.js
+++ b/src/hook/wave-view/dom-container.js
@@ -1,7 +1,6 @@
 import { globalLookup } from '../global';
 import WebGL2WaveRender from './render-wave';
 
-import renderCursor from './render-cursor';
 import genResizeHandler from './gen-resize-handler';
 import mTree from './mount-tree';
 
@@ -15,29 +14,6 @@ const setTime = (pstate, str) => {
     }
 };
 
-const mouseMoveHandler = (cursor, content, pstate /* , render */) => {
-    // 这是上面展示当前 time 的圆角矩形框框的宽度
-    const xmargin = 160;
-    // 这是上面展示当前 time 的圆角矩形内的字体大小
-    const fontHeight = 20;
-    const fontWidth = fontHeight / 2;
-    const sidebarWidth = pstate.sidebarWidth;
-
-    const handler = event => {
-        const x = pstate.xCursor = event.clientX;
-        const left = x - xmargin;
-        // 不能进入左侧，也不能进入右侧
-        if (left > sidebarWidth - 195) {
-            cursor.style.left = (x - xmargin) + 'px';
-            cursor.innerHTML = renderCursor({ xmargin, fontWidth, fontHeight }, pstate);
-        }
-    };
-    // 添加初始鼠标位置
-    handler({ clientX: pstate.width / 2 });
-    document.addEventListener('mousemove', handler);
-};
-
-
 const getFullView = desc => {
     // console.log(desc);
     if (desc.waveql) {
@@ -100,7 +76,6 @@ class DomContainer {
         const elementInfos = this.elementInfos;
         for (const elName of Reflect.ownKeys(elementInfos)) {
             const elementInfo = elementInfos[elName];
-            
         }
     }
 }
@@ -201,7 +176,6 @@ const domContainer = (obj) => {
             resizeObserver.observe(document.body);
 
             resizeHandler(elo.container.clientWidth, elo.container.clientHeight);
-            mouseMoveHandler(elo.cursor, elo.container, pstate, deso.render);
             deso.render();
         }
     };
diff --git a/src/hook/wave-view/render-cursor.js b/src/hook/wave-view/render-cursor.js
deleted file mode 100644
index 2e817dd..0000000
--- a/src/hook/wave-view/render-cursor.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import genSVG from 'onml/gen-svg.js';
-import stringify from 'onml/stringify.js';
-
-import formatTime from './format-time';
-import { globalLookup } from '../global';
-
-const renderCursor = (cfg, pstate) => {
-    const { xmargin, fontWidth, fontHeight } = cfg;
-    const { height, xScale, xOffset, tgcd, timescale, xCursor } = pstate;
-
-    const xx = Math.round((xCursor - xOffset) / xScale) * tgcd;
-    globalLookup.currentTime = xx;
-    const label = formatTime(xx, timescale);
-    const lWidth = (label.length + 1) * fontWidth;
-
-    const body = [
-        // vertical line
-        ['line', {
-            class: 'wd-cursor-line',
-            x1: xmargin + 0.5,
-            x2: xmargin + 0.5,
-            y1: 0,
-            y2: height
-        }],
-        // top time label
-        ['rect', {
-            class: 'wd-cursor-time',
-            x: xmargin - lWidth / 2,
-            y: 0,
-            rx: 9,
-            ry: 9,
-            width: lWidth,
-            height: fontHeight * 1.25
-        }],
-        ['text', {
-            class: 'wd-cursor-time',
-            x: xmargin,
-            y: fontHeight
-        }, label],
-        // bottom time label
-        ['rect', {
-            class: 'wd-cursor-time',
-            x: xmargin - lWidth / 2,
-            y: height - fontHeight * 1.25,
-            rx: 9,
-            ry: 9,
-            width: lWidth,
-            height: fontHeight * 1.25
-        }],
-        ['text', {
-            class: 'wd-cursor-time',
-            x: xmargin,
-            y: height - fontHeight * .25
-        }, label]
-    ];
-    return stringify(genSVG(2 * xmargin, height).concat(body));
-};
-
-export default renderCursor;
\ No newline at end of file
diff --git a/src/hook/wave-view/render-wave.js b/src/hook/wave-view/render-wave.js
index 607ea82..b954343 100644
--- a/src/hook/wave-view/render-wave.js
+++ b/src/hook/wave-view/render-wave.js
@@ -3,7 +3,7 @@ import { globalLookup, globalSetting, globalStyle } from '../global';
 import { gl_Colors, gl_Shifts, gl_Shifts_for_bar, gl_WidthShifts, barShift, getRatio, screenHeightPixel, maskColorIndexOffset, posYFactor, glslInputLength, prettyPrint, ladderAnalog_GL_WidthShifts, lineAnlog_GL_WidthShifts } from './render-utils.js';
 import { vertexShader, fragmentShader } from './render-shader.js';
 import { renderAsBit, renderAsCommonDigital, renderAsLadderAnalog, renderAsLineAnalog } from './toolbar/renderModal';
-import { StaticCursor } from '@/components/render/cursor';
+import { updateAllPivots } from '@/components/pivot/pivot-view';
 
 /**
  * @description
@@ -404,7 +404,7 @@ class WebGL2WaveRender {
         }
 
         // 更新静态 cursor
-        StaticCursor.updateLeft();
+        updateAllPivots();
 
         function linearAnimation(delta, oldVal, newVal) {
             return (1 - delta) * oldVal + delta * newVal;
diff --git a/src/hook/wave-view/wheel-event.js b/src/hook/wave-view/wheel-event.js
index 59e686f..16d8463 100644
--- a/src/hook/wave-view/wheel-event.js
+++ b/src/hook/wave-view/wheel-event.js
@@ -9,12 +9,15 @@
  * @param {WheelEvent} event 
  */
 function windowsWheel(element, pstate, deso, eventHandler, event) {
+    if (pstate === undefined)  {
+        pstate = deso.pstate;
+    }
     const { deltaX, deltaY } = event;
     if (event.ctrlKey) {
         const key = (deltaY < 0)
             ? 'scaleUp'
             : ((deltaY > 0) ? 'scaleDown' : 'nop');
-        
+                
         if (eventHandler[key].fn(pstate)) {
             deso.render({ type: 'action' });
         }
@@ -50,6 +53,9 @@ function windowsWheel(element, pstate, deso, eventHandler, event) {
  * @param {WheelEvent} event 
  */
 function macOsWheel(element, pstate, deso, eventHandler, event) {
+    if (pstate === undefined)  {
+        pstate = deso.pstate;
+    }
     let { deltaX, deltaY } = event;
     if (event.ctrlKey) {
         const key = (deltaY < 0)
@@ -90,6 +96,9 @@ function macOsWheel(element, pstate, deso, eventHandler, event) {
  * @param {WheelEvent} event 
  */
 function linuxWheel(element, pstate, deso, eventHandler, event) {
+    if (pstate === undefined)  {
+        pstate = deso.pstate;
+    }
     const { deltaX, deltaY } = event;
     if (event.ctrlKey) {
         const key = (deltaY < 0)
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 00103af..542fbd0 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -100,6 +100,19 @@
     "toolbar.search.value.already-to-tail": "already to tail",
     "toolbar.search.value.searching": "searching",
 
+    "pivot.context.delete": "delete pivot",
+    "pivot.context.display-axis": "create relative axis",
+
+    "setting.appearance.pivot-color": "pivot color",
+    "setting.appearance.moving-pivot": "moving pivot",
+    "setting.appearance.user-pivot": "user pivot",
+    "setting.appearance.system-pivot": "system pivot",
+
+    "setting.language.change-dialog": "You've switched language to English, we recommend you reload Wave Viewer",
+    "confirm": "confirm",
+    "cancel": "cancel",
+    "tips": "Tips",
+
     "current-version": "current version",
     "copyright": "The copyright of this software belongs to <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a> project team. Welcome to <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>."
 }
\ No newline at end of file
diff --git a/src/i18n/zh.json b/src/i18n/zh.json
index e030970..00ee4dc 100644
--- a/src/i18n/zh.json
+++ b/src/i18n/zh.json
@@ -98,6 +98,19 @@
     "toolbar.search.value.already-to-tail": "已经到结尾了",
     "toolbar.search.value.searching": "搜索中",
 
+    "pivot.context.delete": "删除信标",
+    "pivot.context.display-axis": "创建相对坐标轴",
+
+    "setting.appearance.pivot-color": "信标颜色",
+    "setting.appearance.moving-pivot": "移动信标",
+    "setting.appearance.user-pivot": "用户信标",
+    "setting.appearance.system-pivot": "系统信标",
+
+    "setting.language.change-dialog": "您已经更换语言为简体中文，我们建议您重启 Wave Viewer",
+    "confirm": "确定",
+    "cancel": "取消",
+    "tips": "提示",
+
     "current-version": "当前版本",
     "copyright": "本软件版权归 <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a> 项目组所有，欢迎 <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>。"
 }
\ No newline at end of file