From 2224ebd533f4a99adb8547be44b55680e811bba5 Mon Sep 17 00:00:00 2001
From: dagongren <53748875+wang-liang0615@users.noreply.github.com>
Date: Thu, 28 Mar 2024 18:38:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:ui=20=E5=85=A8=E9=9D=A2=E5=8D=87=E7=BA=A7?=
 =?UTF-8?q?=20(#444)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cmdb-ui/src/api/auth.js                       |   4 +-
 cmdb-ui/src/assets/data_empty.png             | Bin 15416 -> 7042 bytes
 .../components/CMDBFilterComp/expression.vue  |   2 +-
 .../components/CustomIconSelect/constants.js  |  46 ++
 cmdb-ui/src/components/Menu/SideMenu.vue      |   8 +-
 cmdb-ui/src/components/OpsTable/index.vue     | 142 ++-----
 .../src/components/SplitPane/SplitPane.vue    |   2 +-
 .../TwoColumnLayout/TwoColumnLayout.vue       |   8 +-
 cmdb-ui/src/components/tools/TopMenu.vue      |  53 ++-
 cmdb-ui/src/layouts/BasicLayout.vue           |  20 +-
 cmdb-ui/src/modules/acl/views/history.vue     |   4 +-
 .../acl/views/module/roleHistoryTable.vue     |   1 -
 .../acl/views/module/triggerHistoryTable.vue  |   1 -
 .../acl/views/operation_history/index.vue     |   4 +-
 .../src/modules/acl/views/resource_types.vue  |   4 +-
 cmdb-ui/src/modules/acl/views/resources.vue   |   4 +-
 cmdb-ui/src/modules/acl/views/roles.vue       |   4 +-
 cmdb-ui/src/modules/acl/views/secretKey.vue   |   4 +-
 cmdb-ui/src/modules/acl/views/trigger.vue     |   4 +-
 cmdb-ui/src/modules/acl/views/users.vue       |   4 +-
 cmdb-ui/src/modules/cmdb/api/preference.js    |   8 +
 .../src/modules/cmdb/assets/unique_card.png   | Bin 0 -> 1668 bytes
 .../cmdb/components/cmdbGrant/grantComp.vue   | Bin 9824 -> 1668 bytes
 .../cmdb/components/cmdbGrant/index.vue       |   8 +-
 .../preferenceSearch/preferenceSearch.vue     |   8 +-
 .../cmdb/components/searchForm/SearchForm.vue |  37 +-
 cmdb-ui/src/modules/cmdb/lang/en.js           |  37 +-
 cmdb-ui/src/modules/cmdb/lang/zh.js           |  43 +-
 cmdb-ui/src/modules/cmdb/router/index.js      |   4 +-
 cmdb-ui/src/modules/cmdb/utils/helper.js      |  38 +-
 .../src/modules/cmdb/views/batch/index.vue    |  89 ++--
 .../cmdb/views/batch/modules/CiTypeChoice.vue |  18 +-
 .../views/batch/modules/CiUploadTable.vue     |  32 +-
 .../views/batch/modules/UploadFileForm.vue    |  82 +++-
 .../cmdb/views/batch/modules/UploadResult.vue |  20 +-
 cmdb-ui/src/modules/cmdb/views/ci/index.vue   |  90 ++--
 .../views/ci/modules/CreateInstanceForm.vue   |   8 +-
 .../views/ci/modules/editAttrsPopover.vue     |   8 +-
 .../modules/cmdb/views/ci_types/attrAD.vue    |   4 +-
 .../cmdb/views/ci_types/attrADTabpane.vue     |   2 +-
 .../cmdb/views/ci_types/attributeCard.vue     | 220 ++++++----
 .../cmdb/views/ci_types/attributeStore.vue    |   3 -
 .../cmdb/views/ci_types/attributesTable.vue   | 123 ++++--
 .../cmdb/views/ci_types/ciTypedetail.vue      |  17 +-
 .../src/modules/cmdb/views/ci_types/index.vue | 121 +++---
 .../cmdb/views/ci_types/relationAD.vue        |   4 +-
 .../cmdb/views/ci_types/relationTable.vue     |  13 +-
 .../cmdb/views/ci_types/triggerTable.vue      |   2 +-
 .../cmdb/views/custom_dashboard/chartForm.vue |   3 +-
 .../views/custom_dashboard/customLayout.vue   |  13 +-
 .../modules/cmdb/views/discovery/index.vue    |   3 +
 .../modules/cmdb/views/discoveryCI/index.vue  |  18 +-
 cmdb-ui/src/modules/cmdb/views/index.less     |  10 +-
 .../cmdb/views/model_relation/index.vue       |   4 +-
 .../modules/cmdb/views/preference/index.vue   |  69 ++-
 .../cmdb/views/preference_relation/index.vue  | 111 +++--
 .../preference_relation/serviceTreeModal.vue  | 110 +++++
 .../cmdb/views/relation_views/index.vue       | 394 +++++++++++-------
 .../relation_views/modules/ContextMenu.vue    | 224 +++++++---
 .../cmdb/views/resource_search/index.vue      | 376 +++++++++--------
 .../modules/cmdb/views/tree_views/index.vue   |  99 ++---
 .../tree_views/modules/treeViewsNode.vue      |  70 +++-
 cmdb-ui/src/style/global.less                 | 144 ++++---
 cmdb-ui/src/style/static.less                 |  49 ++-
 cmdb-ui/src/views/setting/auth/index.vue      |  54 +--
 cmdb-ui/src/views/user/Login.vue              |  52 ++-
 66 files changed, 2012 insertions(+), 1149 deletions(-)
 create mode 100644 cmdb-ui/src/modules/cmdb/assets/unique_card.png
 create mode 100644 cmdb-ui/src/modules/cmdb/views/preference_relation/serviceTreeModal.vue

diff --git a/cmdb-ui/src/api/auth.js b/cmdb-ui/src/api/auth.js
index 4ac0a24..31aab7e 100644
--- a/cmdb-ui/src/api/auth.js
+++ b/cmdb-ui/src/api/auth.js
@@ -30,9 +30,9 @@ export function getAuthDataEnable() {
     })
 }
 
-export function testLDAP(test_type, data) {
+export function testLDAP(data) {
     return axios({
-        url: `/common-setting/v1/auth_config/LDAP/test?test_type=${test_type}`,
+        url: `/common-setting/v1/auth_config/LDAP/test`,
         method: 'post',
         data,
     })
diff --git a/cmdb-ui/src/assets/data_empty.png b/cmdb-ui/src/assets/data_empty.png
index a6529f898111bc27bb3949ddb2f5063113c325f6..562d85b10cf1ea75dc93c938a9d4693bfc27c7fe 100644
GIT binary patch
literal 7042
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
F{|AR)f*$|?

literal 15416
zcmY+rby(Eh^8gCcwJhBTsH6fbuyi9OC80=nF0wR8?=CDLAc%x?NrQBWz|ts7BPG%;
zf{1k75AXMPpXc5`c-&pjnVB<nX6DR9>*=UbkTR3v;NVbbsH^DX;NWHge@J3N;Fr6Y
zB0u0C61e(HFB}{)n%h5Iob*ga;7439eKjSVs$te`;0wN^qP8LqPR(1gOKSog9BHhE
zilU)E?p~HT%zQeas6$!*{*!3xCxeB&gQV*c8uRs0k~)yI+)m!D*ra-q64@}aHGW^g
z$5}eKPuZ+qLl{zoyhKvMNs2@mC%?LRS})RSkK)3tHf&;w5=72iuPg5E_Mbm^pt<r^
z{dd&~OmI6vYV%jau|?pghU1XCVbylexSp_8`GqcCRPMWxILqv3YIFO(X-kP}D+xI_
zdupe6b-Lh_DBk{fT1p57UI|M{P#vfLKoRhODM4OeUiRmv`G}rBF{fbel4xwl*~QxF
zXhK_2h`*T;geJ0MukCeS=GnAYr8o+#<f(*l#sPl_w>~StH5A?8nuz;b%jw>B5VRW$
zR*HH+o0&eo{EapB`ca)sHCC0lCK6$A?_m(ri(Bx0dT^J{#hj<{i>B{CRaSm`LtyF<
zV3iREw!tUhu@PL*YH#H9G<j!e$6giv!;H4Y%Q6Tq_cArf@;qqQoD-EGs0Zg-|1o9f
z3s)cZxey!a>V~p#77Ea2s<-%y1eh8@KOF_;1U}`O{#|&-P;4i{XD55WR0!KZ573Q5
z&^%&rzyH@}Yx+k(E`RoC3l#bq#JNTV?0$wwnrZ8B4^?ZJZ65$YVj~eWe2s{L@B_0K
zZjHSU{@`A*DKV21@aP|s#`oD~xG8?w((%#;abl6c!Y2f3cw^zGql=uV_Y}YyGZN6j
zul=@9bFfdfSXK3_yd{;Gr<gGXf5AoSmm$1zxgE;tSl~xZCPcv>N!2ekobJJAXWyMU
zQIjB2ox=Bg63kJcpE3%e=mcgZO!Rwxd?Gl2tA`Gtv{Vx=Dp1aq`YO;g$;%{orioVu
z)pLuqjGmQZdJU{}2<)J>MBs5ioA#rJ7HRHgT3RN(=s5gbc@hDpz6J3IfPXHH0<-W+
zBvK=moMakj8IcO=DgbXE+{cXF9^>ftSe&FFEAl&>g$%$R5+k@MIJ^8W7v=LFq9Z?I
z5->n0N>GBij{~eE3M`0z0xV#Q)pv)fPXQ3_gKvRnEaBu_$DiALDX;&1e;$T9y#)&)
zjVJ8#`csqxamnjYjuO9JShwUPp{lK3mkTh34WFpOy->jOmZn?QX`17!b&E-&Chr0$
zC$-_C%}vM)=~zXM!VrMsk5z~Q0F3(8?bZbXqSJUqf8N9KyTc7~fHu+qz{m0bJ5wP$
zIWcE=ovpf^L(c0Atxz+_C-Rugi}||2T_s{Ze1S}LXZ?sew)&Y-mjVEu*)8lr1fERO
ztel=(W9p2<y`Ed)h?>Ji0o?c50mw?2*_aWC%Rg=JNC+{?P8nc4sgB<*-Oa%62*d;n
zz#VFCfIE3hcHNBlN?i!x{IslI&D`h&VSr##f_~5<gm|zu^KyLCbf1)y;#TiyGlOo$
zef{5pV#bpcm8yk5^hmg7@Qk~Gzxu@gHc|jmD7~df5B_7h1>47nKhF3cO&*k}%~qGX
zM}pCmTl)!f-Trr!po&MB<*QqkJv3fcAr;6x3~$1Fd#nAg{)dDaAUaC=zwM>;#3Spb
zT;C{r0XeHb`X4e%x&9Jy=vt+a{G!w&6hJqRKCeVb_|~aOl5!}z=YQX?m(y95e*L$B
zhxPgMCxQzOfcm`rj}<iRW=YEGq5okZp^1v4XQ%xC=w$*9AZGvwY-=BUc>h0s^@Q&;
zq5`?xzlctofR*lq{l}Lbg+Q3CvfaL5Vj|l+GC+s*;Q0{<1Bz+-aVHn-Pe>wO;Nhc_
zBQ|929L&-#BkmNid4QcR&Hl=3n6F7Uck_`=GQx!6qI7*U;CFcS{UKK#bNqD=!WdC?
z0C(i9B53$3;APf<Pb*pOb#tkaMiJS9)eZiSN25B*rdU+eRo017#-35*torPKM>Akc
zef4n_%dG&bKUl*BG@E;RE#dX8-L@gT+$Do!*qzoxncbOpS;|hl7j*Cse0rxDR+5PN
zI1;38SIHod$iJyC8n5MpdG-Czk;t2!pp)o^kl20N4|AqNi`L|KO34784BnIYav7Dc
zyQ<CQzD`xs0k}R7!ds6-4Eny6^ZDn+v<D;mY|afdIBCEjfR@fT2SU7)D^V%;%aoQ~
zA0N<^wSVvsj|b)x<8QhC2POQ|?j*{kDNa)m(8&L!2)H+FQb6MT(Jhi^^;q8vi(|ID
zcYq%lB)G*z3L+$eE6bIC1>6LL2UubUM_z-XNdV}yEofV>56=vapuq+MES>a!8UHCK
zre4FV{)L0z;R2guEH2HS7x%22PBn(7t5Ag&4=fRyz?>S49?9(Vo{pz(m;e?K3@|&U
zTpKUo*ne3s^T(rF_of8$L&EAO5~^Qvv#r|)G|~S#C&3r<v;oY;9k!~sfYLK%QjN&q
z7GF>sX~LSXG5&YP>Ek~HbLGhJK6V-V>U`I!X+m80b4NaIe$bIZI<t%N7$d4c*N7P@
zEZxY-gGykp?uvf@IMwgGS$pw5fUYG<F|5N@DlaXGz-XP-Hd(n9LyDHcMd3}wy9p2}
zMQHa2WcOvL{KSF&I8kg!YRd2F*sS5Z;Q#iH<hf)aLj~YG%KYzGHf?91-eTh3r6L5|
zgs10tP_SDMXtcR}dW$EB{FN2z+(aYplTV^hh<$tp@xb#L{d=mN@(LN)MhX;<Uw!z2
z=oidDbGA3=)l5+E8}e7b1U%}$G;ofPaL(s0fd!80llK$}Fp_?8*E;mz46d&Dm|j)?
zBBOaPn95hH=ftyw1ZZO<5==w~Qf0w2k&j!oT4VGHJp{eV)pn3>e%6Qh9*#RJa7&l6
zXTiKeqwXpIW#YN^9UDEB8EwJf{4Tx#&$t9AZDyp0yW~RN#$ole?rOlC0x{|@Z5}Iy
z$qZy1Ch*I6+~v?6>qb>bDj_||0oI0ZZ>;95b_&%phf1G%^+oO#Rl-T0y(RF{)(JgY
zirnipYr8=jJusfwA*t&(<1b@vBQ*AS_t-jOg5x>6+}RBr-qKbvE9oZIK5==n4FzWp
z1Z@4|8Ci<FK0me<-`7ffm$xJug<;oi%96c#mH!^y*0jAWIl4H=J+egjeEaCHw<<a!
zK_6H|TyIBse)(oKtbfas=^8X=k4OIr`h~mS0Oct<1A2Aj>Jwj!(b0@VObByR%n4_u
zikT-mzGYCMJkdOS_4F0B$;`8VM>OpIl3y5?oE0=9g=!+h+dH-~`gUR=;z2)(+?h{L
z_85@W7Qc&}l+J<Jh!KhBjH=-~ukJssE$?pM0c@$jV5Z5PiV@3Xt{p|jD?x#e9{uIr
zQ2yt0ICS)vp%|bg>W(-p*I2)Ot%xYF<tR6d*MGd1rh3mMD7aYJJzS8KUoiNlZ{s??
zs_o!x75vEguJNPJ>6DX<9|wn}cK$nILsjzcr%e6UzWV7lJda@P_D86DFzGJYiiHRX
zHwOA-Lx|-@1<<S>8xbwv%k^n2LL`}FP7y;DvI*P6H}a49UkF+z18zbDP(Rbx*HGCI
zb9*bJ_;M%<KONww5>AtDvbD5>6hj<8&x9r0OV+!;4cd^uZtCe`aud8&_8}bT{1hMa
zv=O1)^<LnypU2mdwsahU%*xB{rgsawPd&Y@(2RRS#+Ip5=3E`G|BjeGRcie&wxO2)
z+XGJZm|<`}vsOuSgNpD<@XZy^8mD>;D%Nr~ZS8xbABl}8<(L0qNbMy7ytENc&PLCT
zx&!y|SNC-~mQm(}E287U{iPA=T7u^iiTY0>CP@17g%&{FLuzj*Dxn!81gYjV_Ia_@
zHLas-q(tmPJIVpCofHUrIi2eE7*hlm&+EQF;-t+qE;WIR23)bR9wn`QnO>cz9=9_$
zcgkPtEOvh2S)%^LwyRJ1r9P!bhs*1XIKYhC@rjnK#=C5lUtWXyO0?fSl2-KYnzT5V
z&JxvtFHQVf6hMz&zaw>S?NFvf8y7?rM0KosYR9*0yWe9sp3)614)8t~HF`tQ+26zH
zV{pX=5WiB_H9IWp<8S#Hh`NzwWY@!yz3(&|XZ3e1mNWfDKKLgLOdyfeDu=o>S8TT)
zoh~!*Tj@ToQ13tMoc=|=?xEt2q_?f4I!1EZ7Lg{k2Y=koN=V$Gw@ay5D~fK`lPhm@
z?^X*6xkh@<ta@SI=~fLw3SJ>5T-mfsL@|qb=n0P2UbO-)kCuQIFYV#xv8!LSd;4Z>
zR668J+0HW5gl;)S{Zi?AW7j%a(`&b0Q-%)odz@psh(Y3gVzS7Ju*ie=Vv;4l;h{XJ
z!B)Le<p|{Q>|6{hS#R+m*=1HuN|5)tovWe?5b*0CzLw}{e&<$#w%h1loOJ}hannpp
z$#I2%;?f9;w*V}qrvGs|fS}(&o>`^1${|EO$tMq7u++0LvG$P-dC;+b?$<GIk{Wdz
zC|Y0?T}jX}&L5xoiF6EXpjs;jqqX5+mg@G0XtPfRB*{{-&kO)%9gt=H@f9uU-W|0Q
zb@v1LYW1z2G)n1wKf6zlsfnW~VF72KeLnolI1kIzcjX|K%*bk#u7<#u&K=}HJF|Qj
znz$RGFOz%%pgdM!<OFQ$fXAJ?ZZJKlsMH2e7#!|4xflgE#U&`t<Cvu(s&IP)Tpggm
zdA)iIauBU$lI>@;N`?Sia6O}C`IOAFw9ECu?`O&OEv=25&jOjA%s34)w-es{U2Lk-
zw9|t#gFu0(_p|KB5@sF)tyPb!8L-g5gnNq9$uHO;uU=TBRBGCcSYAEZ{kq(JXrKkx
z=ys|c{5Mau-haxhjvDO-t~KA%<<9ns_K4KGb64%7LqR~uSp%Z&k@)DlBRzP~|6+Y&
zCnr$FWoRz_Vb!NWqX(jIs3AbW!RHm=$eSwm=Z}Y9e`D~A?{-<GjJEPW>O_94eB!rh
zM<eIYzG~%^W*n5bA104cv>2w6<-$r6dA4ADv$<Dnscwzi(Qq5Eu#@%5zSY_f-<3F8
zyn?PKhc(9oXd$6f4q<4qlpD)!%w^O|L(9aJt#1R7;~yseczEX}gVP@frw-&<>U!25
zbbfuOd&&&geP_wK#dGKFZc|Uv|87w$>fP}@VNl?0&`u^vh+DA97#0=X>h|XPTs-N|
z^0PCQhi;9nr=qvXLChzd#x!h@US!9FcI+6bcMDz>=}tPDrnLjm&(Sb57bP%@EUOIx
z$R+mKJbMwi)NA@{ONFF^N9=nlWY{BeDMITLog#E3A?Oe(a`<LltVIwvFPJ%2QvAWc
zBsw4&0z=FTzlJ$Q2&*nkRyVwwZ0Op)Pa8_KSJ$ok?M&+YKO!`V5d|dJp%EHnXIbHG
z_BZ9=>NbE}H)=6-%qhBi8|4W|oTN;|;9F=Cr;3$B|6YuFFFU_ma;o+)d2U|@TUNY)
z1wWI!w!Hc1qs>e%n@Je%gm^0cgg*6a^t12R@z^XTL#|WSuf|Dumc72(pi8z?S5Nhs
z%k@wvb99HnMmp=4_@ZqaJRl9w%qA^<@lf%l_}@>98ogLTavX(+JB&!Mly(JND!jvM
zyEe$PKTP6G$Ei$rg7SYJBz8Z0SESfLHP(~&8dN6zV-cb)JtbO-{qBt!qy6Vs9q-`t
zQc!fNc$?_|Z`}o5@PM3;fd4azRYoG}l0SutNQyq@@B1Kf;LI*K7-uXl`2trqGZNwq
z_xC%Ot_lld%ZQOC#65}H+7~4v?mvpX9Ozk$mWAf>-%|dQl&JCn>rzp&D&Trkf+B@g
z&F#FDVyW=2tRf~dEFi?%#%in7|BFc{T>W$JHfx94)n+>YS&RX%#H>>&k$jZ_Ou^_j
z$J^@FU2El7jBvQNJtWm-viXHa8qZYX8<KC)x_Gtv+}5`0?`=l?B7+b<S}<Ns#m-t`
z;&1j05H*j;#=)FL;#ab#(zX!@<*$*-coanW)`2hU9)bM2A%Dl%y`499aipTq*iD2c
zw$VsKJ!$D{*TCt7`-9KZ&(~)1%kcYrW5}ia?MBg8;U0e(?Q`8X7EP%?%<UF^L}?PB
zzqlobpY&&ZW5hRn_*rd_U+C2Kv~3rvr*IoZB>ulw|Er3@)1};jt7JpQYEWo#f$zKc
zXN|JIYP50O1+UmHU)pwWFR&Scini$U1VVY<GOl|0ez;OrH_u(dAO0r9gGApXYgIn{
zmKWzn|A5?2CZM2eraZe3&35IwlG|tcJoeBRJ}PhQ6F5^)84)d-!LR(n;`E1kFUL&O
zpT3Qbr!ZXDe`OD=>Oo&~k~r!NOvpaba!Vx$lU2qwBfC+AC9H?9$^I&SZyftp(^`rM
z55_O#hWK37rq$#BVZM$y;0~!y*zF}-mj5#O4=33lV-xMgQHS}Dpz{=DO1#`J9zR*8
zf*+J^i|ZNdtjA6@d2aTr`ws;_$0-g_ucBGg9;}h@O5l!dPtbk{P<`X(+*{dEVEf)y
z?5_{G64SMgID~zX50&7i2fw3mA$oFmp#IRAuopM$dU%c9&kgFf;kpd@s3iiVT~cfg
zN=!*USvIlD(PL~{ln)A7Xjw<BjQYB#8g)fv47)0MiAUlHnyz&=AKie5f_^NJ*w@A@
zDXY8lN@V-5O;i-y4%_3o6W#lA;Oi^xa<avbhs2%!jk4XC@8M|9uDFLf0;*vUr<}bT
zgiKb&U<l7==ZBq-Gk448THuc=eL<3QHw3udrtG1`E+QQ)S;-6$=!C=EB}0{B-3jId
zQkQg|*%?~aFkfmDH??AYnxE_TSiPa3Q)wuK*u<ax;pexC96(OYulT8e?^`j%-e>;N
zS%Xg^<)<RI#(TOgEhRGnGnO4mq!}dV)o8utlh22KF*@HBark6V&Eboh4?GV$xTRm9
z*PXw__le`l_WW*toqw~w?*0Dc1Cu!9t3)B?ev|w!h}&}@IDxp#GvZGtGjM975e9dh
za@c|t9a4-gwC=RxL`{i<vtC8ETJ#@wQ$8s=Y5D6HlYVyKXJ%-THY~8S&pNxW8cX8L
zPs`fB<s<4!c|R<DL*uxF-yv_rnoP0z_0u(a&<x)8Yi0&OZ9Y9JR9c@~929x!_uE7g
zGK~@?2$`2qx)7~2>X6f>5A==xVg9vBbm^pX5tD#f#`}H6w&)O&I4HH?V2h8->8l4P
zt(ApxcvqVcivN<&77q;lF@Ww6$wTeTV1$Q)q81DL2c>{g8#s_xLUNmd1uRvt6DC_P
zUup53T+Yu>xrt%oIcrFc8?}SbVfvZ>P2jin*k_x6{6-I@9}fbh!j}i8_lb&Xa5<5<
zcl<@kGSE$>2WG8#pvzwG>duIc)vlrGF@h(9EXeBGbe->chv~j+0aW^Gyb|<laTLTK
zq8Cb2^CJ53W1n>|ws`P-=~%7(+L;q!p9#Gl?qyl898{biI`UFnZ#WcQ*i$7ApeBvS
zJ#aqOZk!&|G6Z}%X{2G6ua!H$TysT>3%G!se#-jt@7r<Y^>*<O*5eXErD#Q<8nDcs
zXpyK)JWEPYOqsRoM4041?^vYZ55FNq-Z^m9nui@AgjIvL!agV8%nhOC5nnOyA5X8D
zwI>TIVDIGA35?w<)X{^#*7Joa3~VJ@*U!?E=lr5V9*q4H-I-fYXZ7bwQzzpjwDz5=
zI2=!PG7q94E~TN(bTedQ0Y3&p>ey$t^7CWcM+p0802A%|IgT<aOfBe?2B5qW8K<!n
z#7ukpOI;;cMzPDR9CKbrZ4gixFpXeE9thVy3s5S{{ez%Uf+>)1L0n8jiCjHj{nS8{
za+nDQQPh_Kf#!Qgl*WU;)K~6wogQkOeyGW4RWcpk8eB*?J&Rzx%Q6I)2+~*b37blT
z41>66p+AHOR@s78Bk$^d=Zv@ZCTgMtkH@K!>NwTl)`UY%sX~c#Z${WX9XD2gKIMfF
z(=sc)p5Vohh(S4?*LR3O)2rGcZgqLB5*MzC$g-|9lKX_=(qqJYIeo-BTQ#^w;XHx$
z-3f1y5t+)McIGtp?u^O~ul4T^!&*2H;@7e1U8{uuI1ayNeO$ZznFZ9;6SQ4I#VF*k
z=kHkAW;h#aJuI(kFBKlns;dZEES}$RLn%%<)gF`A)Hv5U_w|qW<_hjt)ldI4?%{As
zPY)>QA21L5dh%iWm~w<Cx~<0DZ#Oof&%hKDK+94sxT>!V6o`IDdcS$#6!`eFzHT2K
zn7w{h3mX(xMkanF4_QC1Zu;jZDrgI~$-R%!a2~uEjA?6ix7=+@=+pn~{&5)M_yEdE
zvSpRqf1kYvm+0}FwXwFyFAh~Eu1M$yw+xDVli)I`J`T}zmH4K}^&eRmgCF9IjQ;5P
zGiy{vhS$V9tdJc_50o&iWTo?Tnx}`$-K>Bk1Trl8(hKrP4Yd!P^b{!=+vmK=yW~Uc
zc)(Yq5MoBlpP#>7o;U+?xE6?fs;%K}_~L}_fy_QuUR{USnYF>G)TgQ-F*2d}BO&a#
z0JHd^S|YQKcV)jhMsYNE%8>?{TUys);PSLm`pA!2^$|bo1L(co-Nz5_C&|($6ZR~R
zW9uJn+>up{i|Kbz$4w^So~!!V$Pi_*#fU#&13OiecyDfGLE+dq^{xr1_3fRV**#a^
zE1eqcobLF*%FL9^<ct#_z&d&xS~&G%l9)VaN`?;o4r)}@vM<xBut8C2SjGmzyB#{$
z@n}*<GR+_z_lg12Bfp)el`@$f=Wo6zZ!?`e1JYa65q`O|)z|r`{v8vOz4z<;-Uw3i
zR1LqkJ~yn^8@4}~rXtCX(lgtxhg)`k^MB$lm~-WsyB_|sM#tGu*l0V((~<Pctd&2<
zFjSGq`DFQ7Vb``wAU~Ar4po?O^ReHY$M8<aJ?S~!&#K<449)oijQ{Ej$SULx%$H%S
zZLi@$K8yal!JG|w#|-k2mZHn753M9`1u(b)*r3!CKRq9737imZUWax!@;hM%)=j3d
z_}mh1lP8b*OI%g<{O*VDj+iuoh6jXFrq@~%s=U+BpnmY9E4GQu%vYT(=|7TmdaS)?
zBR+I2^NteJkx?tV&B4+_Ru#gfq5UNz3okV-a&mOJs_v3F8Sb2y?%(geYnh^4i90Kl
zxLVsa8;`Ze>Ud{hdsvhNhpV!jA3F&h^u&?kB}Y=&r=6Xe2?{vEXO{#)G9`|VKkRM{
zHKOQ-p%SWWl5y0m+P~ZyLr($^-H(5#80bHS`uU1-yEQIkDB11+Q3988#EPvpsEsu>
zaJh`*4rVM<_xbu8SY5B$JpwhFjDyQ-`J~O94~g!)23KbnDIrfSVos$Q&DnQLtVZSL
zKhH{iQ??N4AP*(VQS125B*#66fKVka)#r84+>N7W1uJLljTXj+Zu_l|7?JHP?%cdc
zUUCwq&+0E%6srr>J%|3<>Kw7%XktMA)`{q++pF1PcP@Z{D0{diG9H%fFHFQLMj`vi
zZl6ic?tNfmCUukrp*Bu4gNzy++RNs2P31n75vbX&?&sP^zR6(p>Qj8HJz5nMS0?0Y
z(=nfao-VKFF5p^<b3zuNT*lYeK*YuTE!q$+dgR9yhNz3vn}a#!1fNG`>hBd-WzYnX
zfWl^+mbZHc;8Ht3wkO`(Z=94pJ`X3wM<h%+Oc*#a(hF--EnIsDuS21%*VhdL1UwNC
zVnt=lHtzQ|a?m%!DbwPPgN(!N5xILeBy!pvCx7`Q(qCPJ+A^{Vu7a6!9Iky^&!na3
ze3ljE5^K(kIiHbXW>MEVX?pN;y^pu~*S@^aqMmNIrC7iX7+(#E$2<l4eK1q;jqlqK
zy2JJ!?dhp*DW2!F`fIeBtR3tu@L^@qN^A3b(y?wtd9V^)wiL-Q_hwQ`TZ4OrkBK^1
z4^HkxHez(<{nD*bUQW=`i0G$y<AvxI@e}ycpcOTR?XX|!ukzU1p&*)2$9^j*jmS~S
z3@Qg=N<xMNwt8c$Bwwd41LfOiBNBYlc!H{{tcO5$#z{P^^Ur8Tq;aa4#QE=IIfjR4
zzqrHFIJ#Al`SYKiT?L(b@GG3wJmPfAtg2b6x6Z)I)3QFbxYl_r5u#J{ribJ5m}hOY
z<J2uc_FM5bS{H-y7lBHiuz2+?`&`8b6Ii)y%#UvG|1#XTa(vs`@t&k6d`ltdkXV;^
zN@syU4R}Bb)q{J!>t7tR9Zp(3q~MF9#9%mZeoy_XFWFaWsc5N^$$GFZ7QB-%ua&dc
zx!dA@ZxIvMApoWQ#ZD(A`UDOINW!DdL<C)B44xj81aXyPQ~Hay)shht+Y|Mk?KZ&O
zd>f_R>&`&p8tsWsR6<W>8Wo((Uz-$(YTZ5nroKN2;wbdym5AR0Tvb&8725ED#FObU
z@0D+hicgSVG5wFViFLA}rWY$)b`3dR$^^v}S6ME(OA`2QjbwKRkG2xDFvVw^9S=gQ
z=5+f%;(w)QrODwIx*EC+S#z$lCVlnVy~VBm;o);>`yVfM)RG9)3QX3Do4Jc+0Gx^r
z{oN^-n}OdB9lwh3x@qgYMA%ZZEX8mQraLu!VC}hJCFp6v$+r#6eZeP1o2fRs$VWmN
zubj|ZB@;hAMd|p*%Ph*Q=O+Z+G$m$F9Pb7TBeUADZT$wVA1cH~mJ!mpbB33Gxtm?*
zT4VG80Kjv~@zUrTG!Gjt30`re8xrE~XJEg-Uy3|;o26w5qgvb^oWx@yJr!7hPV(qu
zoQ*Dt@3<3pg-b)AgXw#0E=?17wbSekvf+l%tj>&p>sfD^`S)#))b-Og=bQ^plA4S*
zZJw)J8!yx1?A3)^2hc#8U+%x*Is1IFm#TH#^&|q>&2A%MmZ)ZRr(Mpt@8#qoNloiE
zJ{^dkEhA9V{)JQp{M^&xOxkg4pB9NoLN<=Zesu*N6ZI?=%QJn5NA{j18X-$oLTIU2
zWj9!3n#SVVuH)ksC4?=0pvMJZ^}GuA^*$&JE!|u0UnOXdY_9v8^k$pjrNLKPHqv;i
zBR^6FObz~?$iKq6k3K2r{A(Qx%&gc>u}=ySYgqGVr1BymYv0Xb-Puiib8}0uE_1ts
ztE;n?A`h4?iqZs8K<`$o!yyHwft_BkW%$ZJ*2dK2KG^3L@O*b2&qm9tY-se?%vI&*
z`<}hDzY9dA{xemWCc4bW{h8nTj;}$2{&Id=72Eb(e$VNy_=O(H1PGSR#pp0a=hLzV
z`iJ&|KooXi$Fo^PgBf3CWOhwpI4PDo+J!_>6h*pC2hMZ0J%KBLkdW*l<bq1+_3x^$
zX6advZw|_TPuOPt1h;WTX*Ox&l=Orglpndx9_DX4g611G^*Aj}!7EIsO*=4uN}4jI
z$9YRfiX>RqN;XfOe=uG3==vv$0U#nCZ1HSu{u@qpC%k11ultVWJfcU|Z!2-HQ2pOu
zgrgCp1*XFkaym_8yCF$F;Ox*-pLD813u)C(hV#oh-<*q}c;9<`5ihk$1b^rbV;8k8
zXvb+tbr|Mshfk8~cB&=Zq-pi=i7ER^IOSe;O}I~yr?~!JWO@6-mW&@--`vV}EYa)+
zax>(T|1xtieX%Dxkvv^f%0mFo!87r`J5r3~;$HH)`2qQy=xit{KtQAyCE{R;JOuTZ
z1Oi?gN9f&ga5`>)?$wdxAN)C2-BKj1ZRBGg2E)^f|45{M7!IcVerfsq?s3Uusrkgl
zDT+DED{2|-YZ=3YQ<>32*B8lb4EhjSgfCm$T^bH(b8%g_4c*8`Q)hiX5+oKn-y;2V
zaF;f_QV(u7QT$8@G$khh6o2tdY!3WJ9d<YN6<m)(gxiEvxE%n~cT>J8?Z1wXTT&oC
zUpVd0u@@mBOq8sZr_0=Xq)U!|$Ow{E@RkcUjvY(2(lEZy;u&*2{G3@x;%yM~zm<~O
zV27AvKMwBsd02t6Gac#?u5^}NLf@NXzhl#ie>cLmT;Kl5KB%8rV)$?>h31~<c#F-^
zmgiAtzmPtmb~jJbbE;SZa!{iS(EyBrdvS+Io3fqeRnU#UY;by8+WB4X#L)uj9?1h!
zttXpI->7z3{93NLtvF;HGk))j>cHpZuvcqYjk+}I7ej>g(?!Q0{j>?iBl<UYu11Bk
z4n<o2KGsJpg-wZhjVZD=mgXQon;Da-bbXvyOe7p<#LTWtM5)NOHh;;-7+fi=W)%3Q
z)#toQF@~hYfUe!-9X+DyPP}GJ$nMr3h|j}5sUw|wAY!5N0aOg)%Kw~W?%;M!NIdB$
zk5$U(!Bc=&f1LI18lsOHuI&AFqHMZHLvKnjYO*?MLhBT|2{V|3HOS?&_Yy|6-6QbJ
zi2%(BepdVDir3qft9UW!pzP%c6iZIbIfA$+To1gouK4P|SJgDo)5Jw9mV8{2F;Sx_
z)iuB;1{Ib2io#?}Y-^K#S4Av2amZ{|eOy^>#S-EUQ7fK$16vi1Huy=AhDeJf1IN%}
zUql@cQ?$o(+rj<tb-NjbolJm`F3Qq0^~Vy2T7zwdUOGWp=0i?pSBll~qULK>jR!;D
zXBSJc9`!Bp+%p%Va*T7ZI*$@7fyOstpToOZyH>{+F*zR|q!}MNOEpB2Zd#B$TPviV
zyVhBlgN@x)p8q~JL>h3Xep+u&G!N_WPUxswA);=5WcJ8!*xYZzp?gy<XL)mpbA{;*
zS>6v`Hu1N8C9YgDW28E2u+EmEGtq!ix5mZ}gVjLk#ug<(<CogyYz$~=&-hyIt?IA+
z-eEXO#^2wwmBzRBaH#M}81)iPCN>_#PBvjTTv!>WtQ<k{B+WO7`q6w2giLvZgNTBH
zP%%{HE)qPIxGDh6jbGxJvYqsy&K6SxJUJe*&L>8cMW;C5>rQ3Sx-x2Va9Y(D>tqAz
z{5Zv^l@gK%zzzlY&f0zjlRqDHuVk1Je`3L<X`k*>y)bu{&wjr{%ck3_yCrP%HsE}J
z97+?oQY=Nuy{v1UUsLge19jWKTh>8;5C=m#8NFuRYOS`6Pev(IjX*)%KfjgoWI%`=
zZ4dkqvK9xuWRd`?dfU=_cMDYQ6Q`bwRKi=0o=OoeE2xqq-i)~#N}P!FrMs1}zLsp*
zsOg}AXFO`QT_2NT{?}VDdYU(}7@de_sx0Ar6Zr5;*wRw<{`!71^OyGB>aUnZw8vzF
zBXkY2V}(y-$r_ZH-W<<uXk(s~<Wuq+LjL@7&KP3+dKmCw9jdGGUGsXCEft>hUKRg1
z|I}>nXHvLn$NOQnkDL#lP*c;+EzXKD>t?u#6|@R#AEFp+^{HaXi_vnIY?reoA)~Lo
zA~ce1`Qd_u%<7_As7CJoT`K*PnJ}sF>L%k$wj|S=BBJ`ZG0=ZbhBejlo}uJZrX2Kk
zyjWBTS!lG%lbwCu@-Dv&?6<M8!kMtvyy-P^q8|?3G(pepZFT}t;|P->r*cKOmbg0H
zKQ|9p+tguDx+Ds4PbU`(m11q|sLSM(fYRv@KjI~JlBeqB=!vyXMt-80cfqcYrDqap
ztY?_;)3EjtPEzjeqh=hwmBEXSV<3XRC!0CSD;>`LluYBg@!}jClLs=4E~G!+r2!-=
z|2kIc{&M)z(Y#t@3`b)lbJ526Ro1}?lUSSWQCJPZ{g2~}sPTBBK0?vAqc-5$S}WM^
zPt7`KLwIvmFC#m)4?4LB(B215+VQnAUuoGl5r3VAKGfjG-7jQBJy1i75Zj;Ge_zPe
zP^Nlf8dv^mz}G6^Jri=t5DvJE++bB^ZDI)VOE<BgS4BoTyeBVeuXUcgiIIY~hgZcU
zzfx17B_v6Y(nM_W27INa*Gd>X*6kXmV6n&GNFt8c<xG3B6CE@JXgguDr#&A#4AkL`
zr=qZ&L^;4~Rpz>c_7_$<%$<|j_jZ&!i^Z$a(3tgctWg6TN{~5?QiKPDK6uYjmmEv#
z_+wOFd5XSE7(W`10YdzJ@px|rr>cOHphSugWAp?^srlpE6qD}*C%>tmpMbdtY{9V|
z3r#(Q@SzV9IC~A|_tyJ4(tcP*KdO@a)(^S5fPZ2h)Tm-aX<?k3Mi^NXH18nsf$CIe
zadU=8z=T8ZO#{KrPqmb#w0Je4x{s=)RxHR-1GrRBx>qa(hrNL>dDj<mOiiihQt%H8
z+D~>*gwuY<6rhz^tyqzx|4do-M9xKfi0pega=AR%rhomd)_H7Gzr33Eqd(l=Q$J2Z
zsh^{5q8!_}Zff#n!plreSt&P`5kJ)fyR_5h->vfNxcV!nocdZXkVBZ>%7NT#=mQG5
z%ZQ)UyfMN~XDhrcw!i%<Uc<<y)q|s4R!yCqy_dtgewL8EvcMXKLqeMh$jk^N*C#?>
z*}#%*;>wK>c}4Y6TU|qjy`Vj#P2vE9_B`L<3TCF3d#ydZ6@S@P=a4|~H@a9KsF|Vv
zt<SGS+*kI7U4u~X2mAj%4m?J*LBmXE?uKNx+ebX7qQ28D9Rr;1>tL&d^MpyaIeo0=
z3+(I2rL@M$?|c%4_vxoj<|s#^&D!$VkH1Sr5(@iFTu1EEvQx`txq3!Ev;}MZUbphc
zNsi|`@GP_VEtytBKIJEa?<_c)kP}?^Q_yWHiHDiyZaGgwXd7)GDWy_v*g@=ilw#+X
z%nF`Bf5{>@KKPza1EuTB`6e{4M4`=SZF`WwBa7CCs?Q;BcAzXFGzCr?<THH$jV;L@
z0W?I%oADoBkRB)rE|fV$S#=8USWhYmlkg!9o!4$c(@1rM&gE#7{6m5gfvzT^3`YF6
zqPi6_;ca`72Ev*a|GJ<t>wij0xN;P8j&3>J1+G?;sL^X3`E{=Qv@jcRbw0Q2-0qfv
zZ-@?EzQ`7w4Eas|jVO^!_0^&0&V-$Ih)acqORKmV&@vaML5|RHr3gB&Hjh=D&0qB#
z+t%yN^S}S9UiWVj8Q0$w<m2xn(7DC4KLkLh8LJ(@<x1a04hF)4@uE~d#Si%+JHq4E
zqob5u_`QTELPTAPZKj+bB(8zI#20A$V;qQ4G;U6nZ74z$!?>sGx0<inAqx=4cYfWN
zJMSWnonx|3B0e|i$;3XJSmcBN&$Y4oevPwQrmm-7M&w<Eq&BNs=08WiUGOwaUUC)g
zBt;+L7?G>=^#O@1&1Z1T?GaR@BLgxzkkfw<in=Cm;<W=QtXMEp^S!1pC(86{JN<?C
znT?t&Di@-RUcLcE(pkD=*TX`efS%wLg?^4LC`<N=)+KAy@McZ}%YB@vV%0Z~+_l6|
zp2c}f4-Mezpiw!2m5HN*_h+>ApaWm4w*$*p>yF=P^zj!Qx_9f%*Gr~<A6OmVPdoNL
zNcgw=wwKXRqQo0s%Di|FO5+&#u#7*6)UnAvS#^gj=!|T7p?>)FvmJ%|nvkGFFk6r<
z74>5ie-7fN_ggXz{lDT#1tYus(FbX)hs=hO{`1lf+%nChG2#ZbAW%JZKY95BeM`Mw
zvzFvnq`Vp9JO@4*6zfcaqqFz<saNn=FL}S#EP2@s4du#<erRv}W71*6^ddKc2z~R@
ze5a#ZH-@sTR5oQwJ!L7juGLuv{6XNsEj6>rpN=ah1z>fF{tCTFDAL&|e23W2r~Y8Z
zP#Wj%E~Y3H6+<HZ;~@BPm5RGV&XrU~MX5yNL^@eeI+=L+V)Dx~Hrx8ygQ9sDU{H_!
z4^2%V;ybuyY;D^v{m=bz$U`#;z#qDke)kg6O*TIXjGx3?@Zg^)-tO;g9Vm|;2q<N&
zp8@(lZLEA`>DWw{_AY<A&${#Cl)RGjlE^~Uwfrp@blDv<aH9ua41%I4L{)=XzKs3W
zxxvobJwHPiPwKXFvnwS3EoGYeyg|c2lD4e)S<_Lv#QW6`jdIFM{|j-sIj5x06FW{a
zYSm^uHz&nk1OyDlbAHw0vUF2JCw#9Ys$Y=&u1~<}RF*}El^;4c*5u0lVzJD2&Fa%_
zoXG=c=cTlLxPO@MA9f8QVKZbGbU#Nn_%wOomAne^tU38)>t8(Y%}h{i(OIl0m-OlQ
z19f`SBwFs@xY_PAoWN;!mIpGQN@6yB{=KPN!38?1iAks)epV4<-_cA9nWA9ddEGF<
zEAdakJ>-wmi?&Zcb=rle&#f+mj;>P9u4jRQ#q=a4Poa(8`T>BRE(%+P^Q73)2br?)
z%W!}3DJGhwey9pt>@GLwc;GyV4*n<LRe2KlMR(EF%`)9JOMmJ*^Bmd!hz_XRP(L<4
z4sdTtmvCm0`^CxFycTd2mXLnOvbw@Yl<;ARJ6hb3$h|6O24{7%4vRsY1U1Y8Hmrw{
zs|8!6mgva+GRQkRd?i`|U+HerEs*fCY#5OWP7g5_#}7J}J}t_Aj{SnXKqcfJEZBSw
z;aT|pld^GgM>%=d>GgqJUuGSD`rg|4vHw2oah}W|&5n47AUn{4uGFj6fP9*Nv%je+
z{Jn0GffDxR`_pIe6&yE_Pjc8u>hw)h$NNMP+5JI_i`E%&DB?0!;*t26V}H9iMZY^j
zo3kH&Co=*)yQ6X!2kGLvEOJ=W9RmrsIl0})B*HN2?A0BgODNDb&n{Bf&ZinVag&0j
z46)DVopTjUN6>J$Pmih3$#oyi2Jl5q#MilpqTQg>T;R;*JWm1kC<>K+d_&3pqU_5c
zUI}Zea-aiYlb&Y|hGg+nBAh$%<0tAuGDtyxQBzYp*;2R>eolV&Z^ls4IIHf;Q;dLz
zwJe@urZ2@uRFKcDC=%#%{t|x5@q^+HDh5w}|H$ZFPe?GR5$Hx*KERog<JQLfdHZPw
z2fGoRt|X@|uX%Tc+*%uG=^_%?DxlG)HRFB4JskPE=Z8p2QTSYf4?{5xK%bg2=8sxd
zP<n`=uj^8vBTekH4ppFG9|k|YM{oW5(?T~jeYj0(x^uFK$eHmZuf!Bhw-j@#;cM+j
zC`QzxL>H7Lny7vjR_87F6MS}NUw0Cb;|-I#k^tJ3|FE%yK^!ZDl1Tq}3bo1_a~w9F
zFMIsKxniTH`K<bDl?+ZbSub1AU&tph1-1eD82lG}b|)4UGw%EZ0sYEbR{3tJ_7c|F
z5a%UL_`#Q{ZOTMp8$7eOlJnF(o<2ZN`gl%_^+liz)OP&9<3JWzB<E9dLYh@Xh0rZP
zZLHlLYWPVvf)Dvjr$pX0B4<N>ha`0!y<JjIkt6GJ-R@_Yv56^@u=XeFRYe}ZBnI9-
zqbP{;yS7n47rZyor@?36rq_i8-<UO9AGep}#%x^V8eL`Rp1f6by2IH+2x}Y}eyV`a
z^WW@1Eu9(uf*Vt~l{9x2gVuOn8K$~Z54qnq<-r#B6hX(@33SajBC=r8=)I7)SbIGd
zy<P>oq7yMwJ5f1XJX*3{7SG4-00;0NNibIpa;`xF`U;<|Ka@Oh8hxxxC(`off>g{W
zilQWj7hmn~Ro&p59eMZjLqCvCp{^G#`$|%6e_<0|A|{=!?V9iLTj#HUh*TcjQkGC;
zaGWNZD>T6-yAeyDPHFh$Z}>T_PUOzS(LGHJE@#Cc(3kzEw{rt09INU)&%Y`D_Tb-_
ztkyn4!zcCsjU=RN&f1Qbz=c<|(t+pn2V-RMz?49tb8ahBQ-vq2zc9mMy|WmDz@A;K
zyx9WuXi^m}YMfMX{a5T<x{xH6_pW1o55&2xNZwD2S#81wuPomefd}~Obo@5f`5{(V
z5|k~ePuVaj<%dlRH{qS2c*z%REP8Yew5(VM@-FEe^hh)j;6?ZcM7V=j;|GW~hki2H
z9RCpc=gu%u%$H;GKYD(zwUE1raK}kYs1+Bc<k}PF6b%ATm}A74F<2i5Fo#ge7Vu8d
zt-o-2eX`WV5vK4@R1+TN9!kWp4c6)fTF@yXiBum7A+Oi+2a@L<_Dzc+&Q%3}lve?M
zPdg@UPM&Ps&T9B@j--ha5?%k^#4;s?RC9SQOWEQDjTvLcZc)(Kzt!kBSr>+KkOP$+
zt2*p)jBY5A8?@*?HG={zOvDS;S7=-A3FM5dyb^4;JMaKGFRylvKsZzQ(Q?}UdhpgI
zX+p)OSzej@LiX_*=nx@v4eqiMW*ZN%8Uf@CxA{t%ca)o0A0dj8fCmZwz82)7YByB-
zL`gjxvVHT{AkiLAh$#D>peXuIaJoe9662j^CYQks4KAS=fQ?|&!&r?Bor;KB%eY;q
z6$HXo1IUMfnFg&I>=4AQ{49hm63mkOzdJ-B3TU6p1m+BS6kJ7^CcU+o?~U(Y@m^fX
z`3#IO%G=_tM0!|DV$R|Jx-Rlx<A#{>tLiRao+6qOb*V|p2p&Ea*w}wN*jVwVpnE6W
z@hv(W*U(bFB>_a>4`zv#?8uYy_oB_XtnTu_xwZCKKB`%3355hP2|XWa?Ct$fAmzsc
zG{c|~tKdc3NfUqK*?4W&J@>$7>gEH<FS>TM`OlfB$0mWEE)sx96mgHki^wh5UFNWX
z&T`3W@dYbA0>x8N7EPyY_bjRvV5UXmcA0w0mem(*L&Q-$w%vSc@n%IT{k1ZNj|s39
zFcZ6`C5?%{uo>KsPxc@f20mb8$!#a!uli_uXPAtSf>h@TAT<)Iiq7zky6nPy1F<9L
zbOM56rMU^%tw&!I`*V91bvT>$-`pktFu+g-bKU%wi(CpGy<vdvPmC7-!6E3s_dl~M
zCG8^w=8tfK_F<k%SITXG-<_lavOs219S#&2dBCD(ya#Uj(Uu`NTd1pyL%<^ponC9J
z1g6<;XR4aRYH)$Ro=gS6fTO8SMUAVXzxL7WliA`SA`mnZ8Lpnfs<NDPz+6k3Qch%=
z0wx+~@p^bhJv|ig+1rH2pUm4ZKBD(oNOe?Tq$7cV4k!T-d+14ZP^T72BC?5se)qAc
zT_<%5phxTQ=d7KL(HcH*xMVAi&Q#q3W8=kyq*#h522!21TTQ+LoP_}xi$ef6rl$YT
z<Mn;kO!Wy4KAC@rU8kt0yb@wa2yqX=k+V7zuu2`!x)H4ll0&XuAi?7!Bh`rmrk`L|
zz-NFUJmUY|TSO>);$UWdVAzWg1Iz`HOphg$0j==lfa_n9hT_-`-v%hu<GesCI`EQ*
zMFHgV01f`D6N}-+c<yKj@j6nIkS=ay1}9#Uh7{yn$As(@lN7s$pQB2G9h6UV{UT8K
zM-M)5FX%#gRr*P`<N!27pgBGg1xy>r;M#&$xKT4<*yGs%&O$t(L_h-k0vtwtOAoGY
z33M0|0e8PJGz?%Zrz%`qCvCKt6QYRWd>(WIJIp^H$%s`vAOlEd%v(w@6DGt^z8+#4
z%#hQg!x8}jhDJ{0S~xJQK+~0;$=%BV!07=IplJ!aL?+*fC#hJ_Qcf-`E=w`%Gw@3E
zFmd*9Ogd|Wf|x4`K6D7R=jtkFDq%Q>G3l)Taz2eM4ieeoshb0M^sUI1<f_eR@Nnh&
zGnrTvz9JCHn)V`u%WVI;H+%4EPNe|>(Bv*9XaWoUfJ#9+J^|X0)E2CN`<WQ{9Pb|L
zxcDluK=;hG&V!BOw!3L1u0t+EM!fJctEh)V#+a%FzL29^&_4WsX2Hpxy9C~!4AutO
z;t^{AL~zW&>b|VpUgQ*e&{Q}Z1?OAf*W8k)<adIZm9kL?Wkio3IpS5_EGZ?hWt)Nk
zjj#RiS_h{F7pNT|(7^xmpu{9|(y5qO_O5r2oQWa8SVul*JtIC~9l-b+DEfBX%s8p8
zc1Ikl@FgqA`gS;nnu?Z{`VpY_76$T}34{tck+&RGiE|Gv=91XZa=|4)Pa?FJ14dqC
zRH_V@3@>PqQk3G+vg!)};s@Qb8kig_OgW8J<W-t4p4C(OdpioM4>a-@HmYpw1JZ2(
zNOO4$40Jub<<=bnv}hy{%$$oBJ_9tOKq12ouB<blaB&?k1SpXxHK1|#+b`MHC)yNq
zB1P$ducCCoj3SEyGbI5U+<P+2%~Q?Y-*E7M90J!yuR>V>4mAQwWXH0Hxs%v5MfvtA
z2-u<S$18z4;y`!&Z3i?ZAzKelJjfwH7%oS_=>U9&<f1#eeMC{lfGYMN;u%pVfb65#
bZty=&*>jEsxd#A)zBn3BbX2O8tPuYX1+ou_

diff --git a/cmdb-ui/src/components/CMDBFilterComp/expression.vue b/cmdb-ui/src/components/CMDBFilterComp/expression.vue
index 2b0fbef..5b43f41 100644
--- a/cmdb-ui/src/components/CMDBFilterComp/expression.vue
+++ b/cmdb-ui/src/components/CMDBFilterComp/expression.vue
@@ -178,7 +178,7 @@
       <div v-else :style="{ width: '175px' }"></div>
       <template v-if="!disabled">
         <a-tooltip :title="$t('copy')">
-          <a class="operation" @click="handleCopyRule(item)"><ops-icon type="icon-xianxing-copy"/></a>
+          <a class="operation" @click="handleCopyRule(item)"><ops-icon type="veops-copy"/></a>
         </a-tooltip>
         <a-tooltip :title="$t('delete')">
           <a class="operation" @click="handleDeleteRule(item)"><ops-icon type="icon-xianxing-delete"/></a>
diff --git a/cmdb-ui/src/components/CustomIconSelect/constants.js b/cmdb-ui/src/components/CustomIconSelect/constants.js
index cb49c52..9af14b9 100644
--- a/cmdb-ui/src/components/CustomIconSelect/constants.js
+++ b/cmdb-ui/src/components/CustomIconSelect/constants.js
@@ -759,6 +759,52 @@ export const multicolorIconList = [
       value: 'caise-redis',
       label: 'redis'
     }]
+  }, {
+    value: 'cloud',
+    label: '云',
+    list: [{
+      value: 'AWS',
+      label: 'AWS'
+    }, {
+      value: 'Azure',
+      label: 'Azure'
+    }, {
+      value: 'Google_Cloud_Platform',
+      label: 'Google Cloud Platform'
+    }, {
+      value: 'Alibaba_Cloud',
+      label: '阿里云'
+    }, {
+      value: 'Huawei_Cloud',
+      label: '华为云'
+    }, {
+      value: 'Tencent_Cloud',
+      label: '腾讯云'
+    }, {
+      value: 'UCloud',
+      label: 'UCloud'
+    }, {
+      value: 'Ctyun',
+      label: '天翼云'
+    }, {
+      value: 'ECloud',
+      label: '移动云'
+    }, {
+      value: 'JDCloud',
+      label: '京东云'
+    }, {
+      value: 'Bytecloud',
+      label: '字节云'
+    }, {
+      value: 'OpenStack',
+      label: 'OpenStack'
+    }, {
+      value: 'ZStack',
+      label: 'ZStack'
+    }, {
+      value: 'Nutanix',
+      label: 'Nutanix'
+    }]
   }, {
     value: 'system',
     label: '操作系统',
diff --git a/cmdb-ui/src/components/Menu/SideMenu.vue b/cmdb-ui/src/components/Menu/SideMenu.vue
index c05ef73..032bdf2 100644
--- a/cmdb-ui/src/components/Menu/SideMenu.vue
+++ b/cmdb-ui/src/components/Menu/SideMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <a-layout-sider
     :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null]"
-    width="200px"
+    width="220px"
     :collapsible="collapsible"
     v-model="collapsed"
     :trigger="null"
@@ -15,6 +15,7 @@
       @select="onSelect"
       style="padding: 16px 0px;"
     ></s-menu>
+    <!-- <OpsDocs :collapsed="collapsed" /> -->
   </a-layout-sider>
 </template>
 
@@ -22,10 +23,13 @@
 import Logo from '@/components/tools/Logo'
 import SMenu from './index'
 import { mixin, mixinDevice } from '@/utils/mixin'
+// import OpsDocs from '@/modules/docs/index.vue'
 
 export default {
   name: 'SideMenu',
-  components: { Logo, SMenu },
+  components: { Logo, SMenu,
+    // OpsDocs
+  },
   mixins: [mixin, mixinDevice],
   props: {
     mode: {
diff --git a/cmdb-ui/src/components/OpsTable/index.vue b/cmdb-ui/src/components/OpsTable/index.vue
index ee359c3..11fa56e 100644
--- a/cmdb-ui/src/components/OpsTable/index.vue
+++ b/cmdb-ui/src/components/OpsTable/index.vue
@@ -1,121 +1,49 @@
 <template>
-  <vxe-table v-bind="$attrs" v-on="new$listeners" ref="xTable">
-    <slot></slot>
-    <template #empty>
-      <slot name="empty">
-        <div :style="{ paddingTop: '10px' }">
-          <img :style="{ width: '100px', height: '90px' }" :src="require('@/assets/data_empty.png')" />
-          <div>{{ $t('noData') }}</div>
-        </div>
-      </slot>
-    </template>
-    <template #loading>
-      <slot name="loading"></slot>
-    </template>
-  </vxe-table>
+  <span>
+    <ops-icon :type="getPropertyIcon(attr)" />
+  </span>
 </template>
 
 <script>
-import _ from 'lodash'
-// 该组件使用方法与vxe-table一致，但调用它的方法时，需先调用getVxetableRef()获取到vxe-table实体
 export default {
-  name: 'OpsTable',
-  data() {
-    return {
-      // isShifting: false,
-      // lastIndex: -1,
-      lastSelected: [],
-      currentSelected: [],
-    }
-  },
-  computed: {
-    new$listeners() {
-      if (!Object.keys(this.$listeners).length) {
-        return this.$listeners
-      }
-      return Object.assign(this.$listeners, {
-        // 在这里覆盖原有的change事件
-        // 'checkbox-change': this.selectChangeEvent,
-        'checkbox-range-change': this.checkboxRangeChange,
-        'checkbox-range-start': this.checkboxRangeStart,
-        'checkbox-range-end': this.checkboxRangeEnd,
-      })
+  name: 'ValueTypeIcon',
+  props: {
+    attr: {
+      type: Object,
+      default: () => {},
     },
   },
-  mounted() {
-    // window.onkeydown = (e) => {
-    //   if (e.key === 'Shift') {
-    //     this.isShifting = true
-    //   }
-    // }
-    // window.onkeyup = (e) => {
-    //   if (e.key === 'Shift') {
-    //     this.isShifting = false
-    //     this.lastIndex = -1
-    //   }
-    // }
-  },
-  beforeDestroy() {
-    // window.onkeydown = ''
-    // window.onkeyup = ''
-  },
   methods: {
-    getVxetableRef() {
-      return this.$refs.xTable
-    },
-    // selectChangeEvent(e) {
-    //   const xTable = this.$refs.xTable
-    //   const { lastIndex } = this
-    //   const currentIndex = e.rowIndex
-    //   const { tableData } = xTable.getTableData()
-    //   if (lastIndex > -1 && this.isShifting) {
-    //     let start = lastIndex
-    //     let end = currentIndex
-    //     if (lastIndex > currentIndex) {
-    //       start = currentIndex
-    //       end = lastIndex
-    //     }
-    //     const rangeData = tableData.slice(start, end + 1)
-    //     xTable.setCheckboxRow(rangeData, true)
-    //   }
-    //   this.lastIndex = currentIndex
-    //   this.$emit('checkbox-change', { ...e, records: xTable.getCheckboxRecords() })
-    // },
-    checkboxRangeStart(e) {
-      const xTable = this.$refs.xTable
-      const lastSelected = xTable.getCheckboxRecords()
-      const selectedReserve = xTable.getCheckboxReserveRecords()
-      this.lastSelected = [...lastSelected, ...selectedReserve]
-      this.$emit('checkbox-range-start', e)
-    },
-    checkboxRangeChange(e) {
-      const xTable = this.$refs.xTable
-      xTable.setCheckboxRow(this.lastSelected, true)
-      this.currentSelected = e.records
-      // this.lastSelected = [...new Set([...this.lastSelected, ...e.records])]
-      this.$emit('checkbox-range-change', {
-        ...e,
-        records: [...xTable.getCheckboxRecords(), ...xTable.getCheckboxReserveRecords()],
-      })
-    },
-    checkboxRangeEnd(e) {
-      const xTable = this.$refs.xTable
-      const isAllSelected = this.currentSelected.every((item) => {
-        const _idx = this.lastSelected.findIndex((ele) => _.isEqual(ele, item))
-        return _idx > -1
-      })
-      if (isAllSelected) {
-        xTable.setCheckboxRow(this.currentSelected, false)
+    getPropertyIcon(attr) {
+      switch (attr.value_type) {
+        case '0':
+          return 'duose-shishu'
+        case '1':
+          return 'duose-fudianshu'
+        case '2':
+          if (attr.is_password) {
+            return 'duose-password'
+          }
+          if (attr.is_link) {
+            return 'duose-link'
+          }
+          return 'duose-wenben'
+        case '3':
+          return 'duose-datetime'
+        case '4':
+          return 'duose-date'
+        case '5':
+          return 'duose-time'
+        case '6':
+          return 'duose-json'
+          case '7':
+            return 'duose-password'
+            case '8':
+            return 'duose-link'
       }
-      this.currentSelected = []
-      this.lastSelected = []
-      this.$emit('checkbox-range-end', {
-        ...e,
-        records: [...xTable.getCheckboxRecords(), ...xTable.getCheckboxReserveRecords()],
-      })
     },
   },
 }
 </script>
 
-<style lang="less"></style>
+<style></style>
diff --git a/cmdb-ui/src/components/SplitPane/SplitPane.vue b/cmdb-ui/src/components/SplitPane/SplitPane.vue
index 8a7a21d..62a9a4e 100644
--- a/cmdb-ui/src/components/SplitPane/SplitPane.vue
+++ b/cmdb-ui/src/components/SplitPane/SplitPane.vue
@@ -64,7 +64,7 @@ export default {
     },
     triggerColor: {
       type: String,
-      default: '#f0f2f5',
+      default: '#f7f8fa',
     },
   },
   data() {
diff --git a/cmdb-ui/src/components/TwoColumnLayout/TwoColumnLayout.vue b/cmdb-ui/src/components/TwoColumnLayout/TwoColumnLayout.vue
index 351e83e..8dd4f9b 100644
--- a/cmdb-ui/src/components/TwoColumnLayout/TwoColumnLayout.vue
+++ b/cmdb-ui/src/components/TwoColumnLayout/TwoColumnLayout.vue
@@ -35,7 +35,7 @@ export default {
     },
     triggerColor: {
       type: String,
-      default: '#F0F5FF',
+      default: '#f7f8fa',
     },
   },
   data() {
@@ -52,22 +52,22 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .two-column-layout {
   margin-bottom: -24px;
   width: 100%;
   .two-column-layout-sidebar {
     height: 100%;
-    padding: 15px 7px;
     border-radius: 15px;
     overflow-y: auto;
-    background-color: #fff;
   }
   .two-column-layout-main {
     height: 100%;
     padding: 12px;
     background-color: #fff;
     overflow-y: auto;
-    border-radius: 15px;
+    border-radius: @border-radius-box;
   }
 }
 </style>
diff --git a/cmdb-ui/src/components/tools/TopMenu.vue b/cmdb-ui/src/components/tools/TopMenu.vue
index 52a66be..a84f580 100644
--- a/cmdb-ui/src/components/tools/TopMenu.vue
+++ b/cmdb-ui/src/components/tools/TopMenu.vue
@@ -11,9 +11,9 @@
       :key="route.name"
       @click="() => handleClick(route)"
     >
-      {{ route.meta.title }}
+      {{ $t(route.meta.title) }}
     </span>
-    <!-- <a-popover v-model="visible" placement="bottom" trigger="click" overlayClassName="top-menu-dropdown">
+    <a-popover v-model="visible" placement="bottom" trigger="click" overlayClassName="top-menu-dropdown">
       <template slot="content">
         <div class="title">
           更多应用
@@ -36,20 +36,31 @@
         </div>
       </template>
       <span class="top-menu-icon"><gridSvg /></span>
-    </a-popover> -->
+    </a-popover>
   </div>
 </template>
 
 <script>
 import store from '@/store'
 import { gridSvg, top_agent, top_acl } from '@/core/icons'
+import { getPreference } from '@/modules/cmdb/api/preference'
 export default {
   name: 'TopMenu',
   components: { gridSvg, top_agent, top_acl },
   data() {
     return {
-      defaultShowRouteName: ['cmdb', 'acl'],
-      defaultUnShowRouteName: [],
+      defaultShowRouteName: [
+        'dag',
+        'cmdb',
+        'itsm',
+        'ticket',
+        'monitor',
+        'calendar',
+        'datainsight',
+        'fullscreen',
+        'oneterm',
+      ],
+      defaultUnShowRouteName: ['acl', 'agent'],
       routes: store.getters.appRoutes.filter((i) => !(i.meta || {}).hiddenInTopMenu),
       current: store.getters.appRoutes[0].name,
       visible: false,
@@ -78,10 +89,20 @@ export default {
     this.current = this.$route.matched[0].name
   },
   methods: {
-    handleClick(route) {
+    async handleClick(route) {
       this.visible = false
       if (route.name !== this.current) {
-        this.$router.push(route.redirect)
+        if (route.name === 'cmdb') {
+          const preference = await getPreference()
+          const lastTypeId = window.localStorage.getItem('ops_ci_typeid') || undefined
+          if (lastTypeId && preference.some((item) => item.id === Number(lastTypeId))) {
+            this.$router.push(`/cmdb/instances/types/${lastTypeId}`)
+          } else {
+            this.$router.push('/cmdb/dashboard')
+          }
+        } else {
+          this.$router.push(route.redirect)
+        }
         // this.current = route.name
       }
     },
@@ -110,33 +131,21 @@ export default {
     line-height: @layout-header-icon-height;
     border-radius: 4px !important;
     display: inline-flex;
-    align-items: flex-end;
+    align-items: center;
   }
   > span {
     cursor: pointer;
     padding: 4px 10px;
     margin: 0 5px;
-    border-radius: 4px;
     color: @layout-header-font-color;
     height: @layout-header-height;
     display: inline-flex;
     align-items: center;
-    &:hover {
-      background: linear-gradient(0deg, rgba(0, 80, 201, 0.2) 0%, rgba(174, 207, 255, 0.06) 86.76%);
-      color: @layout-header-font-selected-color;
-      border-radius: 3px 3px 0px 0px;
-    }
   }
+  > span:hover,
   .top-menu-selected {
-    background: linear-gradient(0deg, rgba(0, 80, 201, 0.2) 0%, rgba(174, 207, 255, 0.06) 86.76%);
+    font-weight: bold;
     color: @layout-header-font-selected-color;
-    border-radius: 3px 3px 0px 0px;
-    border-bottom: 3px solid @layout-header-font-selected-color;
-    &:hover {
-      background: linear-gradient(0deg, rgba(0, 80, 201, 0.2) 0%, rgba(174, 207, 255, 0.06) 86.76%);
-      color: @layout-header-font-selected-color;
-      border-radius: 3px 3px 0px 0px;
-    }
   }
 }
 
diff --git a/cmdb-ui/src/layouts/BasicLayout.vue b/cmdb-ui/src/layouts/BasicLayout.vue
index 53fd34c..42b005e 100644
--- a/cmdb-ui/src/layouts/BasicLayout.vue
+++ b/cmdb-ui/src/layouts/BasicLayout.vue
@@ -87,21 +87,21 @@ export default {
   computed: {
     ...mapState({
       // 动态主路由
-      mainMenu: state => state.routes.appRoutes,
+      mainMenu: (state) => state.routes.appRoutes,
     }),
     contentPaddingLeft() {
       if (!this.fixSidebar || this.isMobile()) {
         return '0'
       }
       if (this.sidebarOpened) {
-        return '200px'
+        return '220px'
       }
       return '80px'
     },
     sideBarMenu() {
-      const sideMenus = this.mainMenu.filter(item => this.$route.path.startsWith(item.path))
+      const sideMenus = this.mainMenu.filter((item) => this.$route.path.startsWith(item.path))
       if (sideMenus.length > 1) {
-        return sideMenus.find(item => item.path !== '/').children
+        return sideMenus.find((item) => item.path !== '/').children
       } else {
         return sideMenus[0].children
       }
@@ -110,6 +110,9 @@ export default {
   provide() {
     return {
       reloadBoard: this.reload,
+      collapsed: () => {
+        return this.collapsed
+      },
     }
   },
   watch: {
@@ -146,15 +149,6 @@ export default {
         this.alive = true
       })
     },
-    paddingCalc() {
-      let left = ''
-      if (this.sidebarOpened) {
-        left = this.isDesktop() ? '200px' : '80px'
-      } else {
-        left = (this.isMobile() && '0') || (this.fixSidebar && '80px') || '0'
-      }
-      return left
-    },
     menuSelect() {
       if (!this.isDesktop()) {
         this.collapsed = false
diff --git a/cmdb-ui/src/modules/acl/views/history.vue b/cmdb-ui/src/modules/acl/views/history.vue
index be77b2e..386e50a 100644
--- a/cmdb-ui/src/modules/acl/views/history.vue
+++ b/cmdb-ui/src/modules/acl/views/history.vue
@@ -233,8 +233,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .acl-history {
-  border-radius: 15px;
+  border-radius: @border-radius-box;
   height: calc(100vh - 64px);
   margin-bottom: -24px;
   padding: 24px;
diff --git a/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
index 8e7e10b..5d03ce0 100644
--- a/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
@@ -290,7 +290,6 @@ export default {
                 const str = ` 【 ${key} : -> ${newVal} 】 `
                 item.description += str
               } else {
-                const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
                 item.description += ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
               }
             }
diff --git a/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
index 53a9fc6..644f61f 100644
--- a/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
@@ -241,7 +241,6 @@ export default {
                 const str = ` 【 ${key} : -> ${newVal} 】 `
                 item.changeDescription += str
               } else {
-                const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
                 item.changeDescription += ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
               }
             }
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/index.vue b/cmdb-ui/src/modules/acl/views/operation_history/index.vue
index 342a14c..4b6b4f2 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/index.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/index.vue
@@ -32,8 +32,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .acl-operation-history {
-  border-radius: 15px;
+  border-radius: @border-radius-box;
   height: calc(100vh - 64px);
   margin-bottom: -24px;
   padding: 24px;
diff --git a/cmdb-ui/src/modules/acl/views/resource_types.vue b/cmdb-ui/src/modules/acl/views/resource_types.vue
index 15f0321..2fda663 100644
--- a/cmdb-ui/src/modules/acl/views/resource_types.vue
+++ b/cmdb-ui/src/modules/acl/views/resource_types.vue
@@ -189,8 +189,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .acl-resource-types {
-  border-radius: 15px;
+  border-radius: @border-radius-box;
   background-color: #fff;
   height: calc(100vh - 64px);
   margin-bottom: -24px;
diff --git a/cmdb-ui/src/modules/acl/views/resources.vue b/cmdb-ui/src/modules/acl/views/resources.vue
index 8ecd4fa..bf1a090 100644
--- a/cmdb-ui/src/modules/acl/views/resources.vue
+++ b/cmdb-ui/src/modules/acl/views/resources.vue
@@ -352,8 +352,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .acl-resources {
-  border-radius: 15px;
+  border-radius: @border-radius-box;
   background-color: #fff;
   height: calc(100vh - 64px);
   margin-bottom: -24px;
diff --git a/cmdb-ui/src/modules/acl/views/roles.vue b/cmdb-ui/src/modules/acl/views/roles.vue
index abf18f7..11ed56e 100644
--- a/cmdb-ui/src/modules/acl/views/roles.vue
+++ b/cmdb-ui/src/modules/acl/views/roles.vue
@@ -285,8 +285,10 @@ export default {
 </script>
 
 <style lang="less">
+@import '~@/style/static.less';
+
 .acl-roles {
-  border-radius: 15px;
+  border-radius: @border-radius-box;
   background-color: #fff;
   height: calc(100vh - 64px);
   margin-bottom: -24px;
diff --git a/cmdb-ui/src/modules/acl/views/secretKey.vue b/cmdb-ui/src/modules/acl/views/secretKey.vue
index 548ead3..3d6b622 100644
--- a/cmdb-ui/src/modules/acl/views/secretKey.vue
+++ b/cmdb-ui/src/modules/acl/views/secretKey.vue
@@ -88,10 +88,12 @@ export default {
 </script>
 
 <style lang="less">
+@import '~@/style/static.less';
+
 .acl-secret-key {
   background-color: #fff;
   padding: 24px;
-  border-radius: 15px;
+  border-radius: @border-radius-box;
   height: calc(100% + 24px);
   .ant-input[disabled] {
     color: rgba(0, 0, 0, 0.5);
diff --git a/cmdb-ui/src/modules/acl/views/trigger.vue b/cmdb-ui/src/modules/acl/views/trigger.vue
index 8724ff3..af5b698 100644
--- a/cmdb-ui/src/modules/acl/views/trigger.vue
+++ b/cmdb-ui/src/modules/acl/views/trigger.vue
@@ -320,8 +320,10 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .acl-trigger {
-  border-radius: 15px;
+  border-radius: @border-radius-box;
   background-color: #fff;
   height: calc(100vh - 64px);
   margin-bottom: -24px;
diff --git a/cmdb-ui/src/modules/acl/views/users.vue b/cmdb-ui/src/modules/acl/views/users.vue
index 9e688af..f70baa3 100644
--- a/cmdb-ui/src/modules/acl/views/users.vue
+++ b/cmdb-ui/src/modules/acl/views/users.vue
@@ -188,8 +188,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .acl-users {
-  border-radius: 15px;
+  border-radius: @border-radius-box;
   background-color: #fff;
   height: calc(100vh - 64px);
   margin-bottom: -24px;
diff --git a/cmdb-ui/src/modules/cmdb/api/preference.js b/cmdb-ui/src/modules/cmdb/api/preference.js
index 4dcfc2b..10c7dd6 100644
--- a/cmdb-ui/src/modules/cmdb/api/preference.js
+++ b/cmdb-ui/src/modules/cmdb/api/preference.js
@@ -71,6 +71,14 @@ export function subscribeRelationView(payload) {
   })
 }
 
+export function putRelationView(id, data) {
+  return axios({
+    url: `/v0.1/preference/relation/view/${id}`,
+    method: 'put',
+    data
+  })
+}
+
 // 用户保存条件过滤选项
 export function getPreferenceSearch(payload) {
   // 参数有prv_id: 关系视图的id， ptv_id: 层级视图的id, type_id: 模型id
diff --git a/cmdb-ui/src/modules/cmdb/assets/unique_card.png b/cmdb-ui/src/modules/cmdb/assets/unique_card.png
new file mode 100644
index 0000000000000000000000000000000000000000..124fba2b05fe05f95240e23169b2026b2a38cb7a
GIT binary patch
literal 1668
zcmXX{dpOit7(PQT(IAy;NuJh@ux9NO^|0<5vu(1fo#=v+(Tx@rR;3b2a?6^oF16`l
zj48$L%#(^m8*;5l+t@_zJ7kPxqW#YK^~cQjd(Zj4_j|whocT?vpD&B9Wuk=;qO*Ox
z{1H;2!SnB$>hN7R`Hc|5{6jtg(FkcT!XFyCeANgRY0>^H4<vZDbO^vauKNaegzjW$
ze+p4UNZpw2<-R$V_MdcP#3BxAc<<<|Ws_q%ttqWMyNWePAE(#Q{UZD#-n=gO-o418
z)0Q<ZxZ)$^Zw?;j>@!ize)+6P>6qVAbGM=51IIP}lW07DuEn*VhIr>|?Z&Q88jeWf
z5V8z0K#6R98e(p+UWiamXMQR|yz5(zeu}YDLBUZo71OIA2F~rEy*0%N6LD&1y%74b
zA#aH}E;F9}sMu(M(5;aBb6r6@ADTn9zNk?)o$_2^jn{id`_-VZdE_@oPNL5|<feR9
zefTGc9n}w1yddM%kt6>YLcDxfsig<q!zEoig3du~mweVfl%t6fEsw1ckLh5NRO?3-
zjY=6bZoT?2=wNgn>{jwcz4^zb{p%oM!_e3<gJ4f!cY0y{sN-FwV;T_EPg%RIR6zxF
zr!tg<`9>>A=iw?j>3F+aMkPd)Dq247d3hRgN)!VhmMxCKGjF+KTYDX5-dws(CZ-DS
zOH@yqg65J*A+f=)Sc9S-c1|GvbPhbGC|A|;Nzamm_$BI5Mkw)zm^|tGjL2Fy8yfOU
z*FEj5EnETGbRxyQ+`JGsOxmhDW%DQ*L`;;4dW##GOb}5wqVZ+2u5|%43s~_s<&stx
z_ur#5@ZbMT48F8(2bD0~Qu_pSU*z7OOWm2A1>Q1zof+Z0-cw^1(9-#ai{2l&H$!S)
zM~q;s&!(u($585*{!LLXY!{Fz>{n9Me=2&aI!TIom8{opg(~O?s5_yNaKzYNkA^az
zr}VX`95{>66K?K)qB69DyN#%d<8u;=8#D1a*i2BYlXuGrd*1{V@15I9QrWq8h~4c0
zWhdh8JXgRhD?9QB)-VPgz^3d=ww~^Ism*qMAj#jmSnl=)`_`6QMGEUVugP3S5~bc;
z{BkY01i{-`Jsmd;3$fAl4kNzGqlT<PCI(eIRn6=?LV)omQ@fa~wevo3A`J@7VcUQ0
z;JH9myeU8SS*Bn!lAzB`ouFh7n9`@j)oKqN55C=ae<E!3J>80PL$gkhRqwggZg3|Z
z;v@)+>iTQ-n_Xu13$af*2S`4D##^vE*&Ct0siC&C%#%RzI!wCv0x3JrTKfXmef31B
z4$T;z6J*&+znlibo@T}19)8(Lgz4_mGZ`7jb>`#5X7{|l@+4rr$n6fAb(t}NA7_D=
z#=qC7yWsB}HmzVA;gi_4?83|eEPPkGnDlrROW2Cis|f5~L*U!=3Jh=8^vKDj+%jl5
zD^80u%7n_m1qn?;9GgS~o@U?KKr1trrvOXbXFuYbLd@&jBP7}ns#B1gNnpA<v8!|F
zF=-RnEYg_G#boi#%2LNP;ny(zYNx>|m$0p1qqJX1@yDn9T88;cB>AI6Sa^+$5Lk{@
zW1Zpk5d?;fRucGhiojdg|LW#zP<dG%T1pf|&(t|IEWj^|HiIvb@AM!NJKK8ehLZSS
zCgKt-a3aTOE8b0D<u(G##N-CFRx3=#V}FqsfqE<6nT~Qh8rsAhEAO@u1OXXyiAKeM
z#1&p|yz{Y5<0CoEc($CV>36&k{4ntuA5w6X3prcM0Xc!$I{1aiyV<Re&?beheyE-9
Ux9?O-;ZFmxy?wm|9>J&n2VPTEw*UYD

literal 0
HcmV?d00001

diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
index 848ebaefdf10847ef145ef84053c751ba5e57940..124fba2b05fe05f95240e23169b2026b2a38cb7a 100644
GIT binary patch
literal 1668
zcmXX{dpOit7(PQT(IAy;NuJh@ux9NO^|0<5vu(1fo#=v+(Tx@rR;3b2a?6^oF16`l
zj48$L%#(^m8*;5l+t@_zJ7kPxqW#YK^~cQjd(Zj4_j|whocT?vpD&B9Wuk=;qO*Ox
z{1H;2!SnB$>hN7R`Hc|5{6jtg(FkcT!XFyCeANgRY0>^H4<vZDbO^vauKNaegzjW$
ze+p4UNZpw2<-R$V_MdcP#3BxAc<<<|Ws_q%ttqWMyNWePAE(#Q{UZD#-n=gO-o418
z)0Q<ZxZ)$^Zw?;j>@!ize)+6P>6qVAbGM=51IIP}lW07DuEn*VhIr>|?Z&Q88jeWf
z5V8z0K#6R98e(p+UWiamXMQR|yz5(zeu}YDLBUZo71OIA2F~rEy*0%N6LD&1y%74b
zA#aH}E;F9}sMu(M(5;aBb6r6@ADTn9zNk?)o$_2^jn{id`_-VZdE_@oPNL5|<feR9
zefTGc9n}w1yddM%kt6>YLcDxfsig<q!zEoig3du~mweVfl%t6fEsw1ckLh5NRO?3-
zjY=6bZoT?2=wNgn>{jwcz4^zb{p%oM!_e3<gJ4f!cY0y{sN-FwV;T_EPg%RIR6zxF
zr!tg<`9>>A=iw?j>3F+aMkPd)Dq247d3hRgN)!VhmMxCKGjF+KTYDX5-dws(CZ-DS
zOH@yqg65J*A+f=)Sc9S-c1|GvbPhbGC|A|;Nzamm_$BI5Mkw)zm^|tGjL2Fy8yfOU
z*FEj5EnETGbRxyQ+`JGsOxmhDW%DQ*L`;;4dW##GOb}5wqVZ+2u5|%43s~_s<&stx
z_ur#5@ZbMT48F8(2bD0~Qu_pSU*z7OOWm2A1>Q1zof+Z0-cw^1(9-#ai{2l&H$!S)
zM~q;s&!(u($585*{!LLXY!{Fz>{n9Me=2&aI!TIom8{opg(~O?s5_yNaKzYNkA^az
zr}VX`95{>66K?K)qB69DyN#%d<8u;=8#D1a*i2BYlXuGrd*1{V@15I9QrWq8h~4c0
zWhdh8JXgRhD?9QB)-VPgz^3d=ww~^Ism*qMAj#jmSnl=)`_`6QMGEUVugP3S5~bc;
z{BkY01i{-`Jsmd;3$fAl4kNzGqlT<PCI(eIRn6=?LV)omQ@fa~wevo3A`J@7VcUQ0
z;JH9myeU8SS*Bn!lAzB`ouFh7n9`@j)oKqN55C=ae<E!3J>80PL$gkhRqwggZg3|Z
z;v@)+>iTQ-n_Xu13$af*2S`4D##^vE*&Ct0siC&C%#%RzI!wCv0x3JrTKfXmef31B
z4$T;z6J*&+znlibo@T}19)8(Lgz4_mGZ`7jb>`#5X7{|l@+4rr$n6fAb(t}NA7_D=
z#=qC7yWsB}HmzVA;gi_4?83|eEPPkGnDlrROW2Cis|f5~L*U!=3Jh=8^vKDj+%jl5
zD^80u%7n_m1qn?;9GgS~o@U?KKr1trrvOXbXFuYbLd@&jBP7}ns#B1gNnpA<v8!|F
zF=-RnEYg_G#boi#%2LNP;ny(zYNx>|m$0p1qqJX1@yDn9T88;cB>AI6Sa^+$5Lk{@
zW1Zpk5d?;fRucGhiojdg|LW#zP<dG%T1pf|&(t|IEWj^|HiIvb@AM!NJKK8ehLZSS
zCgKt-a3aTOE8b0D<u(G##N-CFRx3=#V}FqsfqE<6nT~Qh8rsAhEAO@u1OXXyiAKeM
z#1&p|yz{Y5<0CoEc($CV>36&k{4ntuA5w6X3prcM0Xc!$I{1aiyV<Re&?beheyE-9
Ux9?O-;ZFmxy?wm|9>J&n2VPTEw*UYD

literal 9824
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
B`6vJY

diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/index.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/index.vue
index c279817..6f4c10c 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/index.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/index.vue
@@ -1,5 +1,11 @@
 <template>
-  <a-modal width="800px" :visible="visible" @ok="handleOk" @cancel="handleCancel" :bodyStyle="{ padding: 0 }">
+  <a-modal
+    width="800px"
+    :visible="visible"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    :bodyStyle="{ padding: 0, paddingTop: '20px' }"
+  >
     <GrantComp
       :resourceType="resourceType"
       :app_id="app_id"
diff --git a/cmdb-ui/src/modules/cmdb/components/preferenceSearch/preferenceSearch.vue b/cmdb-ui/src/modules/cmdb/components/preferenceSearch/preferenceSearch.vue
index b1f439e..205fd99 100644
--- a/cmdb-ui/src/modules/cmdb/components/preferenceSearch/preferenceSearch.vue
+++ b/cmdb-ui/src/modules/cmdb/components/preferenceSearch/preferenceSearch.vue
@@ -11,7 +11,7 @@
         @blur="handleInputConfirm"
         @keyup.enter="handleInputConfirm"
       />
-      <a-button v-else type="primary" size="small" ghost @click="showInput">{{ $t('cmdb.components.saveQuery') }}</a-button>
+      <a v-else @click="showInput"> {{ $t('cmdb.components.saveQuery') }}</a>
     </span>
     <template v-for="(item, index) in preferenceSearchList.slice(0, 3)">
       <span
@@ -178,10 +178,10 @@ export default {
 <style lang="less" scoped>
 .preference-search-tag {
   cursor: pointer;
-  border-radius: 5px;
-  border: none;
+  border-radius: 2px;
+  border: 1px solid #d9d9d9;
   display: inline-block;
-  padding: 0 7px;
+  padding: 2px 7px;
   margin-right: 8px;
   > span {
     margin-right: 4px;
diff --git a/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue b/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
index 9394345..c0545b9 100644
--- a/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
+++ b/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
@@ -5,8 +5,15 @@
         <a-space>
           <treeselect
             v-if="type === 'resourceSearch'"
-            class="custom-treeselect"
-            :style="{ width: '250px', marginRight: '10px', '--custom-height': '32px' }"
+            class="custom-treeselect custom-treeselect-bgcAndBorder"
+            :style="{
+              width: '200px',
+              marginRight: '10px',
+              '--custom-height': '32px',
+              '--custom-bg-color': '#fff',
+              '--custom-border': '1px solid #d9d9d9',
+              '--custom-multiple-lineHeight': '16px',
+            }"
             v-model="currenCiType"
             :multiple="true"
             :clearable="true"
@@ -41,15 +48,14 @@
           </treeselect>
           <a-input
             v-model="fuzzySearch"
-            :style="{ display: 'inline-block', width: '244px' }"
+            :style="{ display: 'inline-block', width: '200px' }"
             :placeholder="$t('cmdb.components.pleaseSearch')"
             @pressEnter="emitRefresh"
-            class="ops-input ops-input-radius"
           >
             <a-icon
               type="search"
               slot="suffix"
-              :style="{ color: fuzzySearch ? '#2f54eb' : '', cursor: 'pointer' }"
+              :style="{ color: fuzzySearch ? '#2f54eb' : '#d9d9d9', cursor: 'pointer' }"
               @click="emitRefresh"
             />
             <a-tooltip slot="prefix" placement="bottom" :overlayStyle="{ maxWidth: '550px', whiteSpace: 'pre-line' }">
@@ -59,6 +65,9 @@
               <a><a-icon type="question-circle"/></a>
             </a-tooltip>
           </a-input>
+          <a-tooltip :title="$t('reset')">
+            <a-button @click="reset">重置</a-button>
+          </a-tooltip>
           <FilterComp
             ref="filterComp"
             :canSearchPreferenceAttrList="canSearchPreferenceAttrList"
@@ -69,7 +78,7 @@
             <div slot="popover_item" class="search-form-bar-filter">
               <a-icon class="search-form-bar-filter-icon" type="filter" />
               {{ $t('cmdb.components.conditionFilter') }}
-              <a-icon class="search-form-bar-filter-icon" type="down" />
+              <a-icon class="search-form-bar-filter-icon" type="down" :style="{ color: '#d9d9d9' }" />
             </div>
           </FilterComp>
           <a-input
@@ -91,14 +100,13 @@
             :placeholder="placeholder"
             @keyup.enter="emitRefresh"
           >
-            <a-icon slot="suffix" type="copy" @click="handleCopyExpression" />
+            <ops-icon slot="suffix" type="veops-copy" @click="handleCopyExpression" />
           </a-input>
           <slot></slot>
         </a-space>
       </div>
       <a-space>
         <slot name="extraContent"></slot>
-        <a-button @click="reset" size="small">{{ $t('reset') }}</a-button>
         <a-tooltip :title="$t('cmdb.components.attributeDesc')" v-if="type === 'relationView'">
           <a
             @click="
@@ -237,7 +245,6 @@ export default {
       }
     },
     inputCiTypeGroup(value) {
-      console.log(value)
       if (!value || !value.length) {
         this.$emit('updateAllAttributesList', value)
       }
@@ -257,6 +264,7 @@ export default {
 }
 </script>
 <style lang="less">
+@import '~@/style/static.less';
 @import '../../views/index.less';
 .ci-searchform-expression {
   > input {
@@ -266,14 +274,14 @@ export default {
     border-right: none;
     &:hover,
     &:focus {
-      border-bottom: 2px solid #2f54eb;
+      border-bottom: 2px solid @primary-color;
     }
     &:focus {
       box-shadow: 0 2px 2px -2px #1f78d133;
     }
   }
   .ant-input-suffix {
-    color: #2f54eb;
+    color: #d9d9d9;
     cursor: pointer;
   }
 }
@@ -290,14 +298,15 @@ export default {
 @import '~@/style/static.less';
 
 .search-form-bar {
-  margin-bottom: 10px;
+  margin-bottom: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 32px;
   .search-form-bar-filter {
-    .ops_display_wrapper();
+    .ops_display_wrapper(transparent);
     .search-form-bar-filter-icon {
-      color: #custom_colors[color_1];
+      color: @primary-color;
       font-size: 12px;
     }
   }
diff --git a/cmdb-ui/src/modules/cmdb/lang/en.js b/cmdb-ui/src/modules/cmdb/lang/en.js
index 820ef4a..d7616a4 100644
--- a/cmdb-ui/src/modules/cmdb/lang/en.js
+++ b/cmdb-ui/src/modules/cmdb/lang/en.js
@@ -1,6 +1,7 @@
 const cmdb_en = {
     relation: 'Relation',
     attribute: 'Attributes',
+    configTable: 'Config Table',
     menu: {
         views: 'Views',
         config: 'Configuration',
@@ -182,7 +183,11 @@ const cmdb_en = {
         inheritType: 'Inherit Type',
         inheritTypePlaceholder: 'Please select inherit types',
         inheritFrom: 'inherit from {name}',
-        groupInheritFrom: 'Please go to the {name} for modification'
+        groupInheritFrom: 'Please go to the {name} for modification',
+        downloadType: 'Download CIType',
+        deleteCIType: 'Delete CIType',
+        otherGroupTips: 'Non sortable within the other group',
+        filterTips: 'click to show {name}'
     },
     components: {
         unselectAttributes: 'Unselected',
@@ -245,8 +250,10 @@ const cmdb_en = {
         unselectCIType: 'No CIType selected yet',
         pleaseUploadFile: 'Please upload files',
         batchUploadCanceled: 'Batch upload canceled',
-        selectCITypeTips: 'Please select CIType',
+        selectCIType: 'Select CIType',
+        selectCITypeTips: 'Please select a CIType and then download',
         downloadTemplate: 'Download Template',
+        clickDownload: 'Click to Download',
         drawTips: 'Click or drag files here to upload!',
         supportFileTypes: 'Supported file types: xls, xlsx',
         uploadResult: 'Upload results',
@@ -257,6 +264,16 @@ const cmdb_en = {
         errorTips: 'Error message',
         requestFailedTips: 'An error occurred with the request, please try again later',
         requestSuccessTips: 'Upload completed',
+        uploadFile: 'Upload File',
+        drawTips1: 'Please <span class="cmdb-batch-upload-tips">select a CIType</span>, and then <span class="cmdb-batch-upload-tips">download</span> ,',
+        drawTips2: '<span class="cmdb-batch-upload-tips">click or drag file</span> to upload',
+        dataPreview: 'Preview data and upload',
+        tips1: 'Kind Reminder :',
+        tips2: '1. Click to download the template, and users can customize the header of the template file, including model properties and model associations',
+        // eslint-disable-next-line no-template-curly-in-string
+        tips3: '2. The red color in the template file represents the model relationship, such as the $Product. Product Name (${Model Name}. {Attribute Name}) column, which establishes the relationship between the physical machine and the product.',
+        tips4: '3. In the download template Excel file, the predefined values of attributes will be set as dropdown options. Please note that due to the limitations of Excel itself, a single dropdown box is limited to a maximum of 255 characters. If it exceeds 255 characters, we will not set the dropdown options for this attribute',
+        tips5: '4. When using Excel templates, please ensure that a single file does not exceed 5000 lines.',
     },
     preference: {
         mySub: 'My Subscription',
@@ -274,6 +291,7 @@ const cmdb_en = {
         monthsAgo: 'month ago',
         yearsAgo: 'years ago',
         just: 'just now',
+        searchPlaceholder: 'Please search CIType',
     },
     custom_dashboard: {
         charts: 'Chart',
@@ -313,14 +331,23 @@ const cmdb_en = {
         noCustomDashboard: 'The administrator has not customized the dashboard yet',
     },
     preference_relation: {
-        newServiceTree: 'Add ServiceTree',
+        newServiceTree: 'Add Service Tree',
+        editServiceTree: 'Edit Service Tree',
         serviceTreeName: 'Name',
+        serviceTreeNamePlaceholder: 'Please enter the service tree name',
         public: 'Public',
         saveLayout: 'Save Layout',
         childNodesNotFound: 'There are no child nodes and no business relationship can be formed. Please select again!',
         tips1: 'Cannot form a view with the currently selected node, please select again!',
         tips2: 'Please enter the new serviceTree name!',
         tips3: 'Please select at least two nodes!',
+        tips4: 'Select at least one in leaf node or tree node',
+        tips5: 'Select the tree directory node and display the service tree sub nodes as a Table',
+        showLeafNode: 'Show Leaf Node',
+        showTreeNode: 'Show Tree Node',
+        sort: 'Sort',
+        sort1: 'Leaf node information comes first',
+        sort2: 'Tree node information comes first'
     },
     history: {
         ciChange: 'CI',
@@ -478,13 +505,15 @@ const cmdb_en = {
         noPermission: 'No Permission'
     },
     serviceTree: {
-        deleteNode: 'Delete Node',
+        deleteNode: 'Delete {name}',
         tips1: 'For example: q=os_version:centos&sort=os_version',
         tips2: 'Expression search',
         alert1: 'The administrator has not configured the ServiceTree(relation view), or you do not have permission to access it!',
         copyFailed: 'Copy failed',
         deleteRelationConfirm: 'Confirm to remove selected {name} from current relationship?',
         batch: 'Batch',
+        editNode: 'Edit Node',
+        editNodeName: 'Edit Node Name',
         grantTitle: 'Grant(read)',
         userPlaceholder: 'Please select users',
         rolePlaceholder: 'Please select roles',
diff --git a/cmdb-ui/src/modules/cmdb/lang/zh.js b/cmdb-ui/src/modules/cmdb/lang/zh.js
index e278f58..b336e4d 100644
--- a/cmdb-ui/src/modules/cmdb/lang/zh.js
+++ b/cmdb-ui/src/modules/cmdb/lang/zh.js
@@ -1,6 +1,7 @@
 const cmdb_zh = {
     relation: '关系',
     attribute: '属性',
+    configTable: '配置表格',
     menu: {
         views: '视图',
         config: '配置',
@@ -35,7 +36,7 @@ const cmdb_zh = {
         attributeLibray: '属性库',
         addCITypeInGroup: '在该组中新增CI模型',
         addCIType: '新增CI模型',
-        editGroupName: '编辑组名称',
+        editGroupName: '重命名分组',
         deleteGroup: '删除该组',
         CITypeName: '模型名(英文)',
         English: '英文',
@@ -182,7 +183,11 @@ const cmdb_zh = {
         inheritType: '继承模型',
         inheritTypePlaceholder: '请选择继承模型（多选）',
         inheritFrom: '属性继承自{name}',
-        groupInheritFrom: '请至{name}进行修改'
+        groupInheritFrom: '请至{name}进行修改',
+        downloadType: '下载模型',
+        deleteCIType: '删除模型',
+        otherGroupTips: '其他分组属性不可排序',
+        filterTips: '点击可仅查看{name}属性'
     },
     components: {
         unselectAttributes: '未选属性',
@@ -220,7 +225,7 @@ const cmdb_zh = {
         beforeChange: '变更前',
         afterChange: '变更后',
         noticeContentTips: '请输入通知内容',
-        saveQuery: '保存筛选条件',
+        saveQuery: '保存条件',
         pleaseSearch: '请查找',
         conditionFilter: '条件过滤',
         attributeDesc: '属性说明',
@@ -245,9 +250,10 @@ const cmdb_zh = {
         unselectCIType: '尚未选择模板类型',
         pleaseUploadFile: '请上传文件',
         batchUploadCanceled: '批量上传已取消',
-        selectCITypeTips: '请选择模板类型',
+        selectCIType: '选择模型',
+        selectCITypeTips: '请选择模型后下载模板',
         downloadTemplate: '下载模板',
-        drawTips: '点击或拖拽文件至此上传！',
+        clickDownload: '点击下载',
         supportFileTypes: '支持文件类型：xls，xlsx',
         uploadResult: '上传结果',
         total: '共',
@@ -257,6 +263,16 @@ const cmdb_zh = {
         errorTips: '错误信息',
         requestFailedTips: '请求出现错误，请稍后再试',
         requestSuccessTips: '批量上传已完成',
+        uploadFile: '文件上传',
+        drawTips1: '请先<span class="cmdb-batch-upload-tips">选择模型</span>，<span class="cmdb-batch-upload-tips">下载模板</span>后',
+        drawTips2: '<span class="cmdb-batch-upload-tips">点击或拖拽文件</span>至此上传',
+        dataPreview: '数据预览并导入',
+        tips1: '温馨提示：',
+        tips2: '1. 点击下载模板，用户可以自定义模板文件的表头，包括模型属性、模型关联',
+        // eslint-disable-next-line no-template-curly-in-string
+        tips3: '2. 模板文件中红色为模型关系，如$产品.产品名(${模型名}.{属性名})这一列就可建立物理机和产品之间的关系',
+        tips4: '3. 下载模板excel文件中会将属性的预定义值置为下拉选项，请注意，受excel本身的限制，单个下拉框限制了最多255个字符，如果超过255个字符，我们不会设置该属性的下拉选项',
+        tips5: '4. 在使用excel模板时，请确保单个文件不超过5000行',
     },
     preference: {
         mySub: '我的订阅',
@@ -274,6 +290,7 @@ const cmdb_zh = {
         monthsAgo: '月前',
         yearsAgo: '年前',
         just: '刚刚',
+        searchPlaceholder: '请搜索模型',
     },
     custom_dashboard: {
         charts: '图表',
@@ -314,13 +331,23 @@ const cmdb_zh = {
     },
     preference_relation: {
         newServiceTree: '新增服务树',
+        editServiceTree: '编辑服务树',
         serviceTreeName: '服务树名',
+        serviceTreeNamePlaceholder: '请输入服务树名',
         public: '公开',
         saveLayout: '保存布局',
         childNodesNotFound: '不存在子节点，不能形成业务关系，请重新选择！',
         tips1: '不能与当前选中节点形成视图，请重新选择！',
         tips2: '请输入新增服务树名！',
         tips3: '请选择至少两个节点！',
+        tips4: '叶子节点/树节点信息至少展示一个',
+        tips5: '选中树目录节点，服务树子节点展示成Table',
+        showLeafNode: '树的子节点展示成Table',
+        showTreeNode: '展示树节点信息',
+        sort: '顺序',
+        sort1: '树子节点信息在前',
+        sort2: '树节点信息在前'
+
     },
     history: {
         ciChange: 'CI变更',
@@ -443,7 +470,7 @@ const cmdb_zh = {
         disk: '硬盘',
     },
     ci: {
-        attributeDesc: '属性说明',
+        attributeDesc: '查看属性配置',
         selectRows: '选取：{rows} 项',
         addRelation: '添加关系',
         all: '全部',
@@ -477,13 +504,15 @@ const cmdb_zh = {
         noPermission: '暂无权限'
     },
     serviceTree: {
-        deleteNode: '删除节点',
+        deleteNode: '移除 {name}',
         tips1: '例：q=os_version:centos&sort=os_version',
         tips2: '表达式搜索',
         alert1: '管理员 还未配置业务关系, 或者你无权限访问!',
         copyFailed: '复制失败',
         deleteRelationConfirm: '确认将选中的 {name} 从当前关系中删除？',
         batch: '批量操作',
+        editNode: '编辑节点',
+        editNodeName: '修改节点名',
         grantTitle: '授权（查看权限）',
         userPlaceholder: '请选择用户',
         rolePlaceholder: '请选择角色',
diff --git a/cmdb-ui/src/modules/cmdb/router/index.js b/cmdb-ui/src/modules/cmdb/router/index.js
index 54663a9..da8909e 100644
--- a/cmdb-ui/src/modules/cmdb/router/index.js
+++ b/cmdb-ui/src/modules/cmdb/router/index.js
@@ -156,8 +156,8 @@ const genCmdbRoutes = async () => {
   const lastTypeId = window.localStorage.getItem('ops_ci_typeid') || undefined
   if (lastTypeId && preference.some(item => item.id === Number(lastTypeId))) {
     routes.redirect = `/cmdb/instances/types/${lastTypeId}`
-  } else if (routes.children[2].children.length > 0) {
-    routes.redirect = routes.children[2].children.find(item => !item.hidden).path
+  } else if (routes.children[3]?.children?.length > 0) {
+    routes.redirect = routes.children[3]?.children.find(item => !item.hidden)?.path
   } else {
     routes.redirect = '/cmdb/dashboard'
   }
diff --git a/cmdb-ui/src/modules/cmdb/utils/helper.js b/cmdb-ui/src/modules/cmdb/utils/helper.js
index f81fa2b..f4edca6 100644
--- a/cmdb-ui/src/modules/cmdb/utils/helper.js
+++ b/cmdb-ui/src/modules/cmdb/utils/helper.js
@@ -49,7 +49,6 @@ export function getCITableColumns(data, attrList, width = 1600, height) {
     const _attrList = _.orderBy(attrList, ['is_fixed'], ['desc'])
     const columns = []
     for (let attr of _attrList) {
-
         const editRender = { name: 'input' }
         switch (attr.value_type) {
             case '0':
@@ -85,7 +84,7 @@ export function getCITableColumns(data, attrList, width = 1600, height) {
 
         }
         columns.push({
-            attr_id:attr.id,
+            attr_id: attr.id,
             editRender,
             title: attr.alias || attr.name,
             field: attr.name,
@@ -135,6 +134,35 @@ export const getPropertyStyle = (attr) => {
     }
 }
 
+export const getPropertyIcon = (attr) => {
+    switch (attr.value_type) {
+        case '0':
+            return 'duose-shishu'
+        case '1':
+            return 'duose-fudianshu'
+        case '2':
+            if (attr.is_password) {
+                return 'duose-password'
+            }
+            if (attr.is_link) {
+                return 'duose-link'
+            }
+            return 'duose-wenben'
+        case '3':
+            return 'duose-datetime'
+        case '4':
+            return 'duose-date'
+        case '5':
+            return 'duose-time'
+        case '6':
+            return 'duose-json'
+        case '7':
+            return 'duose-password'
+        case '8':
+            return 'duose-link'
+    }
+}
+
 export const getLastLayout = (data, x1 = 0, y1 = 0, w1 = 0) => {
     const _tempData = _.orderBy(data, ['y', 'x'], ['asc', 'asc'])
     if (!_tempData.length) {
@@ -185,7 +213,7 @@ export const getAllParentNodesLabel = (node, label) => {
         return getAllParentNodesLabel(node.parentNode, `${node.parentNode.label}-${label}`)
     }
     return label
-  }
-  export const getTreeSelectLabel = (node) => {
+}
+export const getTreeSelectLabel = (node) => {
     return `${getAllParentNodesLabel(node, node.label)}`
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/index.vue b/cmdb-ui/src/modules/cmdb/views/batch/index.vue
index 17eb136..131a8b5 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/index.vue
@@ -1,39 +1,41 @@
 <template>
   <div class="cmdb-batch-upload" :style="{ height: `${windowHeight - 64}px` }">
-    <div id="title">
-      <ci-type-choice ref="ciTypeChoice" @getCiTypeAttr="showCiType" />
+    <div class="cmdb-views-header">
+      <span>
+        <span class="cmdb-views-header-title">{{ $t('cmdb.menu.batchUpload') }}</span>
+      </span>
     </div>
-    <a-row>
-      <a-col :span="12">
-        <upload-file-form
-          :isUploading="isUploading"
-          :ciType="ciType"
-          ref="uploadFileForm"
-          @uploadDone="uploadDone"
-        ></upload-file-form>
-      </a-col>
-      <a-col :span="24" v-if="ciType && uploadData.length">
-        <CiUploadTable :ciTypeAttrs="ciTypeAttrs" ref="ciUploadTable" :uploadData="uploadData"></CiUploadTable>
-        <div class="cmdb-batch-upload-action">
-          <a-space size="large">
-            <a-button type="primary" ghost @click="handleCancel">{{ $t('cancel') }}</a-button>
-            <a-button @click="handleUpload" type="primary">{{ $t('upload') }}</a-button>
-            <a-button v-if="hasError && !isUploading" @click="downloadError" type="primary">{{ $t('cmdb.batch.downloadFailed') }}</a-button>
-          </a-space>
-        </div>
-      </a-col>
-      <a-col :span="24" v-if="ciType">
-        <upload-result
-          ref="uploadResult"
-          :upLoadData="uploadData"
-          :ciType="ciType"
-          :unique-field="uniqueField"
-          :isUploading="isUploading"
-          @uploadResultDone="uploadResultDone"
-          @uploadResultError="uploadResultError"
-        ></upload-result>
-      </a-col>
-    </a-row>
+    <CiTypeChoice ref="ciTypeChoice" @getCiTypeAttr="showCiType" />
+    <p class="cmdb-batch-upload-label"><span>*</span>3. {{ $t('cmdb.batch.uploadFile') }}</p>
+    <UploadFileForm
+      :isUploading="isUploading"
+      :ciType="ciType"
+      ref="uploadFileForm"
+      @uploadDone="uploadDone"
+    ></UploadFileForm>
+    <p class="cmdb-batch-upload-label">4. {{ $t('cmdb.batch.dataPreview') }}</p>
+    <CiUploadTable :ciTypeAttrs="ciTypeAttrs" ref="ciUploadTable" :uploadData="uploadData"></CiUploadTable>
+    <div class="cmdb-batch-upload-action">
+      <a-space size="large">
+        <a-button :disabled="!(ciType && uploadData.length)" @click="handleUpload" type="primary">{{
+          $t('upload')
+        }}</a-button>
+        <a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
+        <a-button v-if="hasError && !isUploading" @click="downloadError" type="primary">{{
+          $t('cmdb.batch.downloadFailed')
+        }}</a-button>
+      </a-space>
+    </div>
+    <UploadResult
+      v-if="ciType"
+      ref="uploadResult"
+      :upLoadData="uploadData"
+      :ciType="ciType"
+      :unique-field="uniqueField"
+      :isUploading="isUploading"
+      @uploadResultDone="uploadResultDone"
+      @uploadResultError="uploadResultError"
+    ></UploadResult>
   </div>
 </template>
 
@@ -124,7 +126,7 @@ export default {
     handleCancel() {
       if (!this.isUploading) {
         this.showCiType(null)
-        this.$refs.ciTypeChoice.selectNum = null
+        this.$refs.ciTypeChoice.selectNum = undefined
         this.hasError = false
       } else {
         this.$message.warning(this.$t('cmdb.batch.batchUploadCanceled'))
@@ -144,16 +146,29 @@ export default {
   },
 }
 </script>
+<style lang="less">
+@import '~@/style/static.less';
+@import '../index.less';
+.cmdb-batch-upload-label {
+  color: @text-color_1;
+  font-weight: bold;
+  white-space: pre;
+  > span {
+    color: red;
+  }
+}
+</style>
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .cmdb-batch-upload {
   margin-bottom: -24px;
-  padding: 24px;
+  padding: 20px;
   background-color: #fff;
-  border-radius: 20px;
+  border-radius: @border-radius-box;
   overflow: auto;
   .cmdb-batch-upload-action {
     width: 50%;
-    text-align: center;
     margin: 12px 0;
   }
 }
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue b/cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue
index 59c837c..0636534 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue
@@ -1,11 +1,11 @@
 <template>
-  <a-space>
-    <span>{{ $t('cmdb.ciType.ciType') }}: </span>
+  <div>
+    <p class="cmdb-batch-upload-label"><span>*</span>1. {{ $t('cmdb.batch.selectCIType') }}</p>
     <a-select
       showSearch
       :placeholder="$t('cmdb.batch.selectCITypeTips')"
       @change="selectCiType"
-      :style="{ width: '300px' }"
+      :style="{ width: '50%', marginBottom: '1em' }"
       class="ops-select"
       :filter-option="filterOption"
       v-model="selectNum"
@@ -14,13 +14,16 @@
         ciType.alias
       }}</a-select-option>
     </a-select>
+    <p class="cmdb-batch-upload-label">&nbsp;&nbsp;2. {{ $t('cmdb.batch.downloadTemplate') }}</p>
     <a-button
+      :style="{ marginBottom: '1em' }"
       @click="openModal"
       :disabled="!selectNum"
       type="primary"
-      class="ops-button-primary"
+      ghost
+      class="ops-button-ghost"
       icon="download"
-    >{{ $t('cmdb.batch.downloadTemplate') }}</a-button
+    >{{ $t('cmdb.batch.clickDownload') }}</a-button
     >
     <a-modal
       :bodyStyle="{ paddingTop: 0 }"
@@ -88,7 +91,7 @@
         </a-row>
       </template>
     </a-modal>
-  </a-space>
+  </div>
 </template>
 
 <script>
@@ -107,7 +110,7 @@ export default {
     return {
       ciTypeList: [],
       ciTypeName: '',
-      selectNum: null,
+      selectNum: undefined,
       selectCiTypeAttrList: [],
       visible: false,
       checkedAttrs: [],
@@ -238,6 +241,7 @@ export default {
       for (let row = 2; row < 5000; row++) {
         Object.keys(choice_value_obj).forEach((key) => {
           const formulae = `"${choice_value_obj[key].choice_value.map((value) => value[0]).join(',')}"`
+          console.log(formulae)
           if (formulae.length <= 255) {
             ws.getCell(row, choice_value_obj[key].columnIdx).dataValidation = {
               type: 'list',
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/modules/CiUploadTable.vue b/cmdb-ui/src/modules/cmdb/views/batch/modules/CiUploadTable.vue
index ec97359..a3670a3 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/modules/CiUploadTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/modules/CiUploadTable.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="cmdb-batch-upload-table">
     <vxe-table
+      v-if="uploadData && uploadData.length"
       ref="xTable"
       stripe
       show-header-overflow
       show-overflow=""
       size="small"
       class="ops-stripe-table"
-      :max-height="200"
+      height="auto"
       :data="dataSource"
       resizable
       :row-style="rowStyle"
@@ -21,6 +22,19 @@
         :min-width="100"
       ></vxe-column>
     </vxe-table>
+    <a-empty
+      v-else
+      :image-style="{
+        height: '80px',
+        marginTop: '10px',
+      }"
+    >
+      <img slot="image" :src="require('@/assets/data_empty.png')" />
+      <template slot="description">
+        <p>{{ $t('noData') }}</p>
+        <p>{{ $t('cmdb.batch.pleaseUploadFile') }}</p>
+      </template>
+    </a-empty>
   </div>
 </template>
 
@@ -99,7 +113,21 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .cmdb-batch-upload-table {
-  overflow: auto;
+  height: 200px;
+  padding: 20px;
+  background: linear-gradient(90deg, @text-color_5 50%, transparent 0) repeat-x,
+    linear-gradient(90deg, @text-color_5 50%, transparent 0) repeat-x,
+    linear-gradient(0deg, @text-color_5 50%, transparent 0) repeat-y,
+    linear-gradient(0deg, @text-color_5 50%, transparent 0) repeat-y;
+  background-size: 15px 1px, 15px 1px, 1px 15px, 1px 15px;
+  background-position: 0 0, 0 100%, 0 0, 100% 0;
+  .ant-empty-description {
+    p:last-child {
+      color: @primary-color;
+    }
+  }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
index d18a048..600b52f 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
@@ -9,13 +9,21 @@
       :fileList="fileList"
       :disabled="!ciType || isUploading"
     >
-      <img :style="{ width: '80px', height: '80px' }" src="@/assets/file_upload.png" />
-      <p class="ant-upload-text">{{ $t('cmdb.batch.drawTips') }}</p>
+      <ops-icon type="itsm-folder" />
       <p class="ant-upload-hint">{{ $t('cmdb.batch.supportFileTypes') }}</p>
+      <p v-html="$t('cmdb.batch.drawTips1')"></p>
+      <p v-html="$t('cmdb.batch.drawTips2')"></p>
+      <div v-for="item in fileList" :key="item.name" class="cmdb-batch-upload-dragger-file">
+        <span><a-icon type="file" :style="{ color: '#2F54EB', marginRight: '5px' }" />{{ item.name }}</span>
+        <a-progress :status="progressStatus" :percent="percent" />
+      </div>
     </a-upload-dragger>
-    <div v-for="item in fileList" :key="item.name" class="cmdb-batch-upload-dragger-file">
-      <span><a-icon type="file" :style="{ color: '#2F54EB', marginRight: '5px' }" />{{ item.name }}</span>
-      <a-progress :status="progressStatus" :percent="percent" />
+    <div class="cmdb-batch-upload-tips">
+      <p>{{ $t('cmdb.batch.tips1') }}</p>
+      <div>{{ $t('cmdb.batch.tips2') }}</div>
+      <div>{{ $t('cmdb.batch.tips3') }}</div>
+      <div>{{ $t('cmdb.batch.tips4') }}</div>
+      <div>{{ $t('cmdb.batch.tips5') }}</div>
     </div>
   </div>
 </template>
@@ -46,15 +54,13 @@ export default {
   },
   watch: {
     ciType: {
-      handler(newValue) {
-        if (!newValue) {
-          this.ciItemNum = 0
-          this.fileList = []
-          this.dataList = []
-          this.progressStatus = 'active'
-          this.percent = 0
-          this.$emit('uploadDone', this.dataList)
-        }
+      handler() {
+        this.ciItemNum = 0
+        this.fileList = []
+        this.dataList = []
+        this.progressStatus = 'active'
+        this.percent = 0
+        this.$emit('uploadDone', this.dataList)
       },
     },
   },
@@ -77,12 +83,28 @@ export default {
 </script>
 
 <style lang="less">
+@import '~@/style/static.less';
+
 .cmdb-batch-upload-dragger {
-  height: 220px;
+  height: auto;
   margin: 16px 0;
+  .ant-upload p {
+    margin-bottom: 5px;
+  }
   .ant-upload.ant-upload-drag {
-    background: rgba(240, 245, 255, 0.35);
     border: none;
+    background: linear-gradient(90deg, @text-color_5 50%, transparent 0) repeat-x,
+      linear-gradient(90deg, @text-color_5 50%, transparent 0) repeat-x,
+      linear-gradient(0deg, @text-color_5 50%, transparent 0) repeat-y,
+      linear-gradient(0deg, @text-color_5 50%, transparent 0) repeat-y;
+    background-size: 15px 1px, 15px 1px, 1px 15px, 1px 15px;
+    background-position: 0 0, 0 100%, 0 0, 100% 0;
+    .ant-upload-drag-container > i {
+      font-size: 60px;
+    }
+    .cmdb-batch-upload-tips {
+      color: @primary-color;
+    }
   }
   .ant-upload.ant-upload-drag .ant-upload-drag-container {
     vertical-align: baseline;
@@ -90,23 +112,37 @@ export default {
 }
 </style>
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .cmdb-batch-upload-dragger {
   position: relative;
+  display: flex;
+  > span {
+    display: inline-block;
+    width: 50%;
+  }
   .cmdb-batch-upload-dragger-file {
-    background-color: #fff;
-    box-shadow: 0px 2px 5px rgba(78, 94, 160, 0.2);
-    border-radius: 4px;
-    position: absolute;
+    background-color: @primary-color_7;
+    border-radius: 2px;
     width: 80%;
-    left: 50%;
-    bottom: 24px;
     padding: 2px 8px;
-    transform: translate(-50%);
     display: inline-flex;
     > span {
       white-space: nowrap;
       margin-right: 10px;
     }
   }
+  .cmdb-batch-upload-tips {
+    width: 50%;
+    padding-left: 20px;
+    color: @text-color_3;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    p:first-child {
+      color: @text-color_1;
+    }
+  }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadResult.vue b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadResult.vue
index 1ccab2c..f6028a2 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadResult.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadResult.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="cmdb-batch-upload-result" v-if="visible">
-    <h3 class="cmdb-batch-upload-result-title">{{ $t('cmdb.batch.uploadResult') }}</h3>
+    <p class="cmdb-batch-upload-label">5. {{ $t('cmdb.batch.uploadResult') }}</p>
     <div class="cmdb-batch-upload-result-content">
       <h4>
-        {{ $t('cmdb.batch.total') }}&nbsp;<span style="color: blue">{{ total }}</span> {{ $t('cmdb.batch.successItems') }}
-        <span style="color: lightgreen">{{ success }}</span> {{ $t('cmdb.batch.failedItems') }} <span style="color: red">{{ errorNum }} </span>{{ $t('cmdb.batch.items') }}
+        {{ $t('cmdb.batch.total') }}&nbsp;<span style="color: blue">{{ total }}</span>
+        {{ $t('cmdb.batch.successItems') }} <span style="color: lightgreen">{{ success }}</span>
+        {{ $t('cmdb.batch.failedItems') }} <span style="color: red">{{ errorNum }} </span>{{ $t('cmdb.batch.items') }}
       </h4>
       <div>
         <span>{{ $t('cmdb.batch.errorTips') }}: </span>
@@ -39,7 +40,7 @@ export default {
       default: false,
     },
   },
-  data: function() {
+  data() {
     return {
       visible: false,
       complete: 0,
@@ -54,6 +55,13 @@ export default {
       return this.upLoadData.length || 0
     },
   },
+  watch: {
+    ciType: {
+      handler() {
+        this.visible = false
+      },
+    },
+  },
   methods: {
     async upload2Server() {
       this.visible = true
@@ -96,10 +104,6 @@ export default {
 @import '~@/style/static.less';
 
 .cmdb-batch-upload-result {
-  .cmdb-batch-upload-result-title {
-    border-left: 4px solid #custom_colors[color_1];
-    padding-left: 10px;
-  }
   .cmdb-batch-upload-result-content {
     background-color: rgba(240, 245, 255, 0.35);
     border-radius: 5px;
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/index.vue b/cmdb-ui/src/modules/cmdb/views/ci/index.vue
index cab9c07..cd0d519 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/index.vue
@@ -15,21 +15,35 @@
         </span>
       </span>
       <a-space>
-        <a-button size="small" icon="plus" type="primary" @click="$refs.create.handleOpen(true, 'create')">
+        <a-button
+          type="primary"
+          class="ops-button-ghost"
+          ghost
+          @click="$refs.create.handleOpen(true, 'create')"
+        ><ops-icon type="veops-increase" />
           {{ $t('create') }}
         </a-button>
-        <a-button size="small" icon="user-add" type="primary" ghost @click="handlePerm">{{ $t('grant') }}</a-button>
-        <a-popconfirm
-          :title="
-            $t('cmdb.preference.confirmcancelSub2', { name: `${this.$route.meta.title || this.$route.meta.name}` })
-          "
-          :ok-text="$t('confirm')"
-          :cancel-text="$t('cancel')"
-          @confirm="unsubscribe"
-          placement="bottomRight"
-        >
-          <a-button size="small" icon="star" type="primary" ghost>{{ $t('cmdb.preference.cancelSub') }}</a-button>
-        </a-popconfirm>
+        <EditAttrsPopover :typeId="typeId" class="operation-icon" @refresh="refreshAfterEditAttrs">
+          <a-button
+            type="primary"
+            ghost
+            class="ops-button-ghost"
+          ><ops-icon type="veops-configuration_table" />{{ $t('cmdb.configTable') }}</a-button
+          >
+        </EditAttrsPopover>
+        <a-dropdown v-model="visible">
+          <a-button type="primary" ghost class="ops-button-ghost">···</a-button>
+          <a-menu slot="overlay" @click="handleMenuClick">
+            <a-menu-item @click="handlePerm" key="grant">
+              <a-icon type="user-add" />
+              {{ $t('grant') }}
+            </a-menu-item>
+            <a-menu-item key="cancelSub" @click="unsubscribe">
+              <a-icon type="star" />
+              {{ $t('cmdb.preference.cancelSub') }}
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
       </a-space>
     </div>
     <div class="cmdb-ci-main">
@@ -86,7 +100,6 @@
           :scroll-y="{ enabled: true, gt: 20 }"
           :scroll-x="{ enabled: true, gt: 0 }"
           class="ops-unstripe-table"
-          :style="{ margin: '0 -12px' }"
           :custom-config="{ storage: true }"
         >
           <vxe-column align="center" type="checkbox" width="60" :fixed="isCheckboxFixed ? 'left' : ''"></vxe-column>
@@ -219,11 +232,9 @@
               </template>
             </template>
           </vxe-table-column>
-          <vxe-column align="left" field="operate" fixed="right" width="120">
+          <vxe-column align="left" field="operate" fixed="right" width="80">
             <template #header>
               <span>{{ $t('operation') }}</span>
-              <EditAttrsPopover :typeId="typeId" class="operation-icon" @refresh="refreshAfterEditAttrs" />
-              <!-- <a-icon class="operation-icon" type="control" /> -->
             </template>
             <template #default="{ row }">
               <a-space>
@@ -342,7 +353,7 @@ export default {
       // if (this.selectedRowKeys && this.selectedRowKeys.length) {
       //   return this.windowHeight - 246
       // }
-      return this.windowHeight - 210
+      return this.windowHeight - 240
     },
   },
   data() {
@@ -377,6 +388,7 @@ export default {
       passwordValue: {},
       lastEditCiId: null,
       isContinueCloseEdit: true,
+      visible: false,
     }
   },
   watch: {
@@ -916,15 +928,24 @@ export default {
         })
     },
     unsubscribe(ciType, type = 'all') {
-      const promises = [subscribeCIType(this.typeId, ''), subscribeTreeView(this.typeId, '')]
-      Promise.all(promises).then(() => {
-        const lastTypeId = window.localStorage.getItem('ops_ci_typeid') || undefined
-        if (Number(ciType) === Number(lastTypeId)) {
-          localStorage.setItem('ops_ci_typeid', '')
-        }
-        this.$message.success(this.$t('cmdb.preference.cancelSubSuccess'))
-        this.resetRoute()
-        this.$router.push('/cmdb/preference')
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('cmdb.preference.confirmcancelSub2', {
+          name: `${that.$route.meta.title || that.$route.meta.name}`,
+        }),
+        onOk() {
+          const promises = [subscribeCIType(that.typeId, ''), subscribeTreeView(that.typeId, '')]
+          Promise.all(promises).then(() => {
+            const lastTypeId = window.localStorage.getItem('ops_ci_typeid') || undefined
+            if (Number(ciType) === Number(lastTypeId)) {
+              localStorage.setItem('ops_ci_typeid', '')
+            }
+            that.$message.success(that.$t('cmdb.preference.cancelSubSuccess'))
+            that.resetRoute()
+            that.$router.push('/cmdb/preference')
+          })
+        },
       })
     },
     resetRoute() {
@@ -957,6 +978,11 @@ export default {
         }
       })
     },
+    handleMenuClick(e) {
+      if (e.key === 'grant') {
+        this.visible = false
+      }
+    },
   },
 }
 </script>
@@ -968,11 +994,11 @@ export default {
 <style lang="less" scoped>
 @import '~@/style/static.less';
 .cmdb-ci {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: @border-radius-box;
+  height: calc(100vh - 64px);
+  overflow: auto;
   margin-bottom: -24px;
-  .cmdb-ci-main {
-    background-color: #fff;
-    border-radius: 15px;
-    padding: 12px;
-  }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/CreateInstanceForm.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/CreateInstanceForm.vue
index 53f24e8..1bbbc87 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/CreateInstanceForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/CreateInstanceForm.vue
@@ -106,9 +106,9 @@
               <a-date-picker
                 v-decorator="[list.name, { rules: [{ required: false }] }]"
                 style="width: 100%"
-                :format="getFieldType(list.name) == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
-                v-if="getFieldType(list.name) === 'date' || getFieldType(list.name) === 'datetime'"
-                :showTime="getFieldType(list.name) === 'date' ? false : { format: 'HH:mm:ss' }"
+                :format="getFieldType(list.name) == '4' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
+                v-if="getFieldType(list.name) === '4' || getFieldType(list.name) === '3'"
+                :showTime="getFieldType(list.name) === '4' ? false : { format: 'HH:mm:ss' }"
               />
               <a-input
                 v-if="getFieldType(list.name) === 'input'"
@@ -373,7 +373,7 @@ export default {
         } else if (_find.value_type === '0' || _find.value_type === '1') {
           return 'input_number'
         } else if (_find.value_type === '4' || _find.value_type === '3') {
-          return this.valueTypeMap[_find.value_type]
+          return _find.value_type
         } else {
           return 'input'
         }
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/editAttrsPopover.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/editAttrsPopover.vue
index 4766add..9255db8 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/editAttrsPopover.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/editAttrsPopover.vue
@@ -11,9 +11,11 @@
         @setFixedList="setFixedList"
       />
     </template>
-    <div :style="{ height: '100%', width: '30px', float: 'right', borderLeft: '1px solid #e8eaec' }">
-      <a-icon :style="{ margin: '13px 0 0 10px ' }" type="control" />
-    </div>
+    <slot>
+      <div :style="{ height: '100%', width: '30px', float: 'right', borderLeft: '1px solid #e8eaec' }">
+        <a-icon :style="{ margin: '13px 0 0 10px ' }" type="control" />
+      </div>
+    </slot>
   </a-popover>
 </template>
 
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD.vue
index ea79501..03a6563 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="attr-ad" :style="{ height: `${windowHeight - 104}px` }">
+  <div class="attr-ad" :style="{ height: `${windowHeight - 130}px` }">
     <div v-if="adCITypeList && adCITypeList.length">
       <a-tabs size="small" v-model="currentTab">
         <a-tab-pane v-for="item in adCITypeList" :key="item.id">
@@ -207,7 +207,7 @@ export default {
 @import '~@/style/static.less';
 .attr-ad {
   position: relative;
-  padding: 0 12px;
+  padding: 0 20px;
   .attr-ad-header {
     width: 100%;
     display: inline-flex;
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue
index 3fa87c6..30bf11a 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{ height: `${windowHeight - 156}px`, overflow: 'auto', position: 'relative' }">
+  <div :style="{ height: `${windowHeight - 187}px`, overflow: 'auto', position: 'relative' }">
     <a
       v-if="!adrIsInner"
       :style="{ position: 'absolute', right: 0, top: 0 }"
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue
index 8a390be..10f1d35 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue
@@ -1,71 +1,83 @@
 <template>
-  <div :class="{ 'attribute-card': true, 'attribute-card-inherited': inherited }">
-    <a-tooltip :title="inherited ? $t('cmdb.ciType.inheritFrom', { name: property.inherited_from }) : ''">
-      <div class="attribute-card-content">
-        <div
-          :class="{ 'attribute-card-value-type-icon': true, handle: !inherited }"
-          :style="{ ...getPropertyStyle(property) }"
-        >
-          <ValueTypeIcon :attr="property" />
-        </div>
-        <div :class="{ 'attribute-card-content-inner': true, 'attribute-card-name-required': property.is_required }">
-          <div :class="{ 'attribute-card-name': true, 'attribute-card-name-default-show': property.default_show }">
-            {{ property.alias || property.name }}
+  <div
+    @click="
+      () => {
+        if (isAdd) {
+          $emit('add')
+        }
+      }
+    "
+    :class="{ 'attribute-card': true, 'attribute-card-add': isAdd, 'attribute-card-inherited': inherited }"
+  >
+    <div class="attribute-card-uniqueKey" v-if="isUnique">{{ $t('cmdb.ciType.uniqueKey') }}</div>
+    <template v-if="!isAdd">
+      <a-tooltip :title="inherited ? $t('cmdb.ciType.inheritFrom', { name: property.inherited_from }) : ''">
+        <div class="attribute-card-content">
+          <div :class="{ 'attribute-card-value-type-icon': true, handle: !inherited }">
+            <ValueTypeIcon :attr="property" />
+          </div>
+          <div :class="{ 'attribute-card-content-inner': true, 'attribute-card-name-required': property.is_required }">
+            <div :class="{ 'attribute-card-name': true, 'attribute-card-name-default-show': property.default_show }">
+              {{ property.alias || property.name }}
+            </div>
+            <div v-if="property.is_password" class="attribute-card_value-type">{{ $t('cmdb.ciType.password') }}</div>
+            <div v-else-if="property.is_link" class="attribute-card_value-type">{{ $t('cmdb.ciType.link') }}</div>
+            <div v-else class="attribute-card_value-type">{{ valueTypeMap[property.value_type] }}</div>
+          </div>
+          <div
+            class="attribute-card-trigger"
+            v-if="(property.value_type === '3' || property.value_type === '4') && !isStore"
+          >
+            <a @click="openTrigger"><ops-icon type="ops-trigger"/></a>
           </div>
-          <div v-if="property.is_password" class="attribute-card_value-type">{{ $t('cmdb.ciType.password') }}</div>
-          <div v-else-if="property.is_link" class="attribute-card_value-type">{{ $t('cmdb.ciType.link') }}</div>
-          <div v-else class="attribute-card_value-type">{{ valueTypeMap[property.value_type] }}</div>
         </div>
-        <div
-          class="attribute-card-trigger"
-          v-if="(property.value_type === '3' || property.value_type === '4') && !isStore"
+      </a-tooltip>
+
+      <div class="attribute-card-footer">
+        <a-popover
+          trigger="click"
+          :arrowPointAtCenter="true"
+          placement="bottom"
+          overlayClassName="attribute-card-footer-popover"
         >
-          <a @click="openTrigger"><ops-icon type="ops-trigger"/></a>
-        </div>
-      </div>
-    </a-tooltip>
+          <div slot="content">
+            <h3 :style="{ textAlign: 'center', paddingTop: '0.5em' }">
+              <span>{{ property.alias }}({{ property.name }})</span>
+            </h3>
+            <a-descriptions layout="horizontal" bordered size="small" :column="2">
+              <a-descriptions-item v-for="item in propertyList" :key="item.property" :label="item.label">
+                <ops-icon
+                  :style="{ color: property[item.property] ? '#7f97fa' : '', fontSize: '10px' }"
+                  :type="`ops-${item.property}-disabled`"
+                />
+              </a-descriptions-item>
+              <a-descriptions-item label></a-descriptions-item>
+            </a-descriptions>
+          </div>
+          <a-space :style="{ cursor: 'pointer' }">
+            <ops-icon
+              v-for="item in propertyList.filter((p) => property[p.property])"
+              :key="item.property"
+              :style="{ color: '#7f97fa', fontSize: '10px' }"
+              :type="`ops-${item.property}-disabled`"
+            />
+          </a-space>
+        </a-popover>
 
-    <div class="attribute-card-footer">
-      <a-popover
-        trigger="click"
-        :arrowPointAtCenter="true"
-        placement="bottom"
-        overlayClassName="attribute-card-footer-popover"
-      >
-        <div slot="content">
-          <h3 :style="{ textAlign: 'center', paddingTop: '0.5em' }">
-            <span>{{ property.alias }}({{ property.name }})</span>
-          </h3>
-          <a-descriptions layout="horizontal" bordered size="small" :column="2">
-            <a-descriptions-item v-for="item in propertyList" :key="item.property" :label="item.label">
-              <components
-                :is="`ops_${item.property}`"
-                v-if="property[item.property]"
-                :style="{ width: '1em', height: '1em' }"
-              />
-              <ops-icon v-else :type="`ops-${item.property}-disabled`" />
-            </a-descriptions-item>
-            <a-descriptions-item label></a-descriptions-item>
-          </a-descriptions>
-        </div>
-        <a-space :style="{ cursor: 'pointer' }">
-          <components
-            v-for="item in propertyList.filter((p) => property[p.property])"
-            :key="item.property"
-            :is="`ops_${item.property}`"
-          />
+        <a-space class="attribute-card-operation" v-if="!inherited">
+          <a v-if="!isStore"><a-icon type="edit" @click="handleEdit"/></a>
+          <a-tooltip :title="$t('cmdb.ciType.computeForAllCITips')">
+            <a v-if="!isStore && property.is_computed"><a-icon type="redo" @click="handleCalcComputed"/></a>
+          </a-tooltip>
+          <a v-if="!isUnique" style="color:red;"><a-icon type="delete" @click="handleDelete"/></a>
         </a-space>
-      </a-popover>
-
-      <a-space class="attribute-card-operation" v-if="!inherited">
-        <a v-if="!isStore"><a-icon type="edit" @click="handleEdit"/></a>
-        <a-tooltip :title="$t('cmdb.ciType.computeForAllCITips')">
-          <a v-if="!isStore && property.is_computed"><a-icon type="redo" @click="handleCalcComputed"/></a>
-        </a-tooltip>
-        <a style="color:red;"><a-icon type="delete" @click="handleDelete"/></a>
-      </a-space>
-    </div>
-    <TriggerForm ref="triggerForm" :CITypeId="CITypeId" />
+      </div>
+      <TriggerForm ref="triggerForm" :CITypeId="CITypeId" />
+    </template>
+    <template v-else>
+      <a><a-icon type="plus"/></a>
+      <div>{{ $t('cmdb.ciType.addAttribute') }}</div>
+    </template>
   </div>
 </template>
 
@@ -82,10 +94,15 @@ import {
   ops_is_unique,
 } from '@/core/icons'
 import { valueTypeMap } from '../../utils/const'
-import { getPropertyStyle } from '../../utils/helper'
 import TriggerForm from './triggerForm.vue'
 export default {
   name: 'AttributeCard',
+  inject: {
+    unique: {
+      from: 'unique',
+      default: () => undefined,
+    },
+  },
   components: {
     ValueTypeIcon,
     TriggerForm,
@@ -114,11 +131,21 @@ export default {
       type: Array,
       default: () => [],
     },
+    isAdd: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {}
   },
   computed: {
+    isUnique() {
+      if (this.unique) {
+        return this.property?.name === this.unique()
+      }
+      return false
+    },
     valueTypeMap() {
       return valueTypeMap()
     },
@@ -147,11 +174,10 @@ export default {
       ]
     },
     inherited() {
-      return this.property.inherited || false
+      return this.property?.inherited || false
     },
   },
   methods: {
-    getPropertyStyle,
     handleEdit() {
       this.$emit('edit')
     },
@@ -196,11 +222,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '~@/style/static.less';
 .attribute-card {
   width: 182px;
   height: 80px;
-  background: #f8faff;
-  border-radius: 5px;
+  background: @primary-color_6;
+  border-radius: 2px;
   position: relative;
   margin-bottom: 16px;
   transition: all 0.3s;
@@ -219,7 +246,7 @@ export default {
     .attribute-card-value-type-icon {
       width: 32px;
       height: 32px;
-      font-size: 12px;
+      font-size: 16px;
       background: #ffffff !important;
       box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
       border-radius: 2px;
@@ -243,7 +270,7 @@ export default {
         white-space: nowrap;
       }
       .attribute-card-name-default-show {
-        color: #2f54eb;
+        color: @primary-color;
       }
       .attribute-card_value-type {
         font-size: 10px;
@@ -270,20 +297,67 @@ export default {
     position: absolute;
     bottom: 0;
     left: 0;
-    background: linear-gradient(180deg, #96abd6 0%, #ecf2ff 0.01%, #ffffff 143.33%);
-    border-radius: 0px 0px 5px 5px;
+    background: @primary-color_5;
+    border-radius: 0px 0px 2px 2px;
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
+    border-top: 1px solid @primary-color_3;
     .attribute-card-operation {
       visibility: hidden;
     }
   }
+  .attribute-card-uniqueKey {
+    position: absolute;
+    right: -12px;
+    top: 0;
+    color: @func-color_2;
+    background: url('../../assets/unique_card.png');
+    font-size: 10px;
+    z-index: 1;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    min-width: 55px;
+    padding: 2px 0 2px 5px;
+  }
 }
 .attribute-card-inherited {
-  background: #f3f4f7;
+  background: @primary-color_7;
   .attribute-card-footer {
-    background: #eaedf3;
+    background: @text-color_7;
+  }
+}
+
+.attribute-card-add {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+  background-color: inherit;
+  &:hover {
+    box-shadow: none;
+    background-color: @primary-color_6;
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background: linear-gradient(90deg, @text-color_5 50%, transparent 0) repeat-x,
+      linear-gradient(90deg, @text-color_5 50%, transparent 0) repeat-x,
+      linear-gradient(0deg, @text-color_5 50%, transparent 0) repeat-y,
+      linear-gradient(0deg, @text-color_5 50%, transparent 0) repeat-y;
+    background-size: 15px 1px, 15px 1px, 1px 15px, 1px 15px;
+    background-position: 0 0, 0 100%, 0 0, 100% 0;
+  }
+  div {
+    color: @text-color_4;
+    font-size: 12px;
   }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeStore.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attributeStore.vue
index f8b2876..4b19024 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeStore.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attributeStore.vue
@@ -172,8 +172,6 @@ export default {
   margin-right: 60px;
   .ant-input-group.ant-input-group-compact > *:first-child,
   .ant-input-group.ant-input-group-compact > .ant-select:first-child > .ant-select-selection {
-    border-top-left-radius: 20px !important;
-    border-bottom-left-radius: 20px !important;
     background-color: #custom_colors[color_1];
     color: #fff;
     border: none;
@@ -202,7 +200,6 @@ export default {
     .ant-input {
       background-color: #f0f5ff;
       border: none;
-      border-radius: 20px;
       &:focus {
         box-shadow: none;
       }
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue
index 4c55133..9a1a749 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue
@@ -12,14 +12,28 @@
         </a-form-item>
       </span>
     </a-modal>
-    <div class="ci-types-attributes" :style="{ maxHeight: `${windowHeight - 104}px` }">
+    <div class="ci-types-attributes" :style="{ height: `${windowHeight - 130}px` }">
       <a-space style="margin-bottom: 10px">
-        <a-button type="primary" @click="handleAddGroup" size="small" class="ops-button-primary" icon="plus">{{
-          $t('cmdb.ciType.group')
-        }}</a-button>
-        <a-button type="primary" @click="handleOpenUniqueConstraint" size="small" class="ops-button-primary">{{
-          $t('cmdb.ciType.uniqueConstraint')
-        }}</a-button>
+        <a-button @click="handleAddGroup" size="small" icon="plus">{{ $t('cmdb.ciType.group') }}</a-button>
+        <a-button @click="handleOpenUniqueConstraint" size="small">{{ $t('cmdb.ciType.uniqueConstraint') }}</a-button>
+        <div>
+          <a-tooltip
+            v-for="type in Object.keys(valueTypeMap)"
+            :key="type"
+            :title="$t('cmdb.ciType.filterTips', { name: valueTypeMap[type] })"
+          >
+            <span
+              @click="handleFilterType(type)"
+              :class="{
+                'ci-types-attributes-filter': true,
+                'ci-types-attributes-filter-selected': attrTypeFilter.includes(type),
+              }"
+            >
+              <ops-icon :type="getPropertyIcon({ value_type: type })" />
+              {{ valueTypeMap[type] }}
+            </span>
+          </a-tooltip>
+        </div>
       </a-space>
       <div :key="CITypeGroup.id" v-for="(CITypeGroup, index) in CITypeGroups">
         <div>
@@ -29,13 +43,6 @@
           >
             <span style="font-weight:700">{{ CITypeGroup.name }}</span>
             <span style="color: #c3cdd7;margin:0 5px;">({{ CITypeGroup.attributes.length }})</span>
-
-            <a v-if="!CITypeGroup.inherited" @click="handleEditGroupName(index, CITypeGroup)">
-              <a-icon type="edit" />
-            </a>
-            <a v-else :style="{ cursor: 'not-allowed', color: 'gray' }">
-              <a-icon type="edit" />
-            </a>
           </div>
           <template v-else>
             <span>
@@ -64,21 +71,24 @@
                 @click="handleMoveGroup(index, index + 1)"
               /></a>
             </a-tooltip>
-
-            <a-tooltip>
-              <template slot="title">{{ $t('cmdb.ciType.selectAttribute') }}</template>
-              <a><a-icon type="plus" @click="handleAddGroupAttr(index)"/></a>
-            </a-tooltip>
-            <a-tooltip>
-              <template slot="title">{{ $t('cmdb.ciType.deleteGroup') }}</template>
-              <a
-                :style="{ color: CITypeGroup.inherited ? 'gray' : 'red' }"
-                :disabled="CITypeGroup.inherited"
-              ><a-icon
-                type="delete"
-                @click="handleDeleteGroup(CITypeGroup)"
-              /></a>
-            </a-tooltip>
+            <a-dropdown>
+              <a><ops-icon type="veops-more"/></a>
+              <a-menu slot="overlay">
+                <a-menu-item @click="handleAddGroupAttr(index)">
+                  <template slot="title"></template>
+                  <a-icon type="plus" />
+                  {{ $t('cmdb.ciType.addAttribute') }}
+                </a-menu-item>
+                <a-menu-item @click="handleEditGroupName(index, CITypeGroup)" :disabled="CITypeGroup.inherited">
+                  <a-icon type="edit" />
+                  {{ $t('cmdb.ciType.editGroupName') }}
+                </a-menu-item>
+                <a-menu-item @click="handleDeleteGroup(CITypeGroup)" :disabled="CITypeGroup.inherited">
+                  <a-icon type="delete" />
+                  {{ $t('cmdb.ciType.deleteGroup') }}
+                </a-menu-item>
+              </a-menu>
+            </a-dropdown>
           </a-space>
         </div>
         <div class="ci-types-attributes-wrapper">
@@ -98,7 +108,9 @@
             handle=".handle"
           >
             <AttributeCard
-              v-for="item in CITypeGroup.attributes"
+              v-for="item in CITypeGroup.attributes.filter(
+                (attr) => !attrTypeFilter.length || (attrTypeFilter.length && attrTypeFilter.includes(attr.value_type))
+              )"
               :key="item.id"
               @edit="handleEditProperty(item)"
               :property="item"
@@ -106,6 +118,7 @@
               :CITypeId="CITypeId"
               :attributes="attributes"
             />
+            <AttributeCard isAdd @add="handleAddGroupAttr(index)" />
             <i></i> <i></i> <i></i> <i></i> <i></i>
           </draggable>
         </div>
@@ -114,10 +127,11 @@
         <div :style="{ height: '32px', lineHeight: '32px', display: 'inline-block', fontSize: '14px' }">
           <span style="font-weight:700">{{ $t('other') }}</span>
           <span style="color: #c3cdd7;margin-left:5px;">({{ otherGroupAttributes.length }})</span>
+          <span style="color: #c3cdd7;margin-left:5px;font-size:10px;">{{ $t('cmdb.ciType.otherGroupTips') }}</span>
         </div>
         <div style="float: right">
           <a-tooltip>
-            <template slot="title">{{ $t('cmdb.ciType.selectAttribute') }}</template>
+            <template slot="title">{{ $t('cmdb.ciType.addAttribute') }}</template>
             <a @click="handleAddGroupAttr(undefined)"><a-icon type="plus"/></a>
           </a-tooltip>
         </div>
@@ -138,7 +152,9 @@
           handle=".handle"
         >
           <AttributeCard
-            v-for="item in otherGroupAttributes"
+            v-for="item in otherGroupAttributes.filter(
+              (attr) => !attrTypeFilter.length || (attrTypeFilter.length && attrTypeFilter.includes(attr.value_type))
+            )"
             :key="item.id"
             @edit="handleEditProperty(item)"
             :property="item"
@@ -146,6 +162,7 @@
             :CITypeId="CITypeId"
             :attributes="attributes"
           />
+          <AttributeCard isAdd @add="handleAddGroupAttr(undefined)" />
           <i></i> <i></i> <i></i> <i></i> <i></i>
         </draggable>
       </div>
@@ -185,6 +202,8 @@ import AttributeCard from './attributeCard.vue'
 import AttributeEditForm from './attributeEditForm.vue'
 import NewCiTypeAttrModal from './newCiTypeAttrModal.vue'
 import UniqueConstraint from './uniqueConstraint.vue'
+import { valueTypeMap } from '../../utils/const'
+import { getPropertyIcon } from '../../utils/helper'
 
 export default {
   name: 'AttributesTable',
@@ -214,6 +233,8 @@ export default {
       otherGroupAttributes: [],
       addGroupModal: false,
       newGroupName: '',
+      attrTypeFilter: [],
+      unique: '',
     }
   },
   computed: {
@@ -223,9 +244,17 @@ export default {
     windowHeight() {
       return this.$store.state.windowHeight
     },
+    valueTypeMap() {
+      return valueTypeMap()
+    },
   },
   provide() {
-    return { refresh: this.getCITypeGroupData }
+    return {
+      refresh: this.getCITypeGroupData,
+      unique: () => {
+        return this.unique
+      },
+    }
   },
   beforeCreate() {},
   created() {},
@@ -233,6 +262,7 @@ export default {
     this.getCITypeGroupData()
   },
   methods: {
+    getPropertyIcon,
     handleEditProperty(property) {
       this.$refs.attributeEditForm.handleEdit(property, this.attributes)
     },
@@ -260,6 +290,7 @@ export default {
         group.editable = false
         group.originOrder = group.order
         group.originName = group.name
+        // group.attributes = group.attributes.sort((a, b) => a.order - b.order)
       })
 
       this.otherGroupAttributes = this.attributes
@@ -282,6 +313,7 @@ export default {
       Promise.all(promises).then((values) => {
         console.log(values)
         this.attributes = values[0].attributes
+        this.unique = values[0].unique
         const temp = {}
         this.attributes.forEach((attr) => {
           temp[attr.id] = attr
@@ -387,6 +419,7 @@ export default {
               group.attributes = group.attributes.filter((x) => !values.checkedAttributes.includes(x.id))
             }
           })
+          // this.CITypeGroups = this.CITypeGroups
 
           this.otherGroupAttributes.forEach((attributes) => {
             if (values.groupId === null) {
@@ -523,20 +556,40 @@ export default {
     handleOpenUniqueConstraint() {
       this.$refs.uniqueConstraint.open(this.attributes)
     },
+    handleFilterType(type) {
+      const _idx = this.attrTypeFilter.findIndex((item) => item === type)
+      if (_idx > -1) {
+        this.attrTypeFilter.splice(_idx, 1)
+      } else {
+        this.attrTypeFilter.push(type)
+      }
+    },
   },
-  watch: {},
 }
 </script>
 
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .fold {
   width: calc(100% - 216px);
   display: inline-block;
 }
 
 .ci-types-attributes {
-  padding: 16px 24px 24px;
+  padding: 0 20px;
   overflow-y: auto;
+  .ci-types-attributes-filter {
+    color: @text-color_4;
+    cursor: pointer;
+    padding: 3px 8px;
+    white-space: nowrap;
+    margin-right: 5px;
+  }
+  .ci-types-attributes-filter:hover,
+  .ci-types-attributes-filter-selected {
+    background-color: @primary-color_5;
+  }
   .property-item-empty {
     color: #40a9ff;
     width: calc(100% - 20px);
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/ciTypedetail.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/ciTypedetail.vue
index 9d52aad..be8f020 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/ciTypedetail.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/ciTypedetail.vue
@@ -1,6 +1,6 @@
 <template>
   <a-card :bordered="false" :bodyStyle="{ padding: '0' }">
-    <a-tabs :activeKey="activeKey" @change="changeTab" class="ops-tab" type="card">
+    <a-tabs :activeKey="activeKey" @change="changeTab" class="ops-tab">
       <a-tab-pane key="1" :tab="$t('cmdb.ciType.attributes')">
         <AttributesTable ref="attributesTable" :CITypeId="CITypeId" :CITypeName="CITypeName"></AttributesTable>
       </a-tab-pane>
@@ -16,8 +16,10 @@
       <a-tab-pane key="5" :tab="$t('cmdb.ciType.relationAD')">
         <RelationAD :CITypeId="CITypeId"></RelationAD>
       </a-tab-pane>
-      <a-tab-pane key="6" :tab="$t('cmdb.ciType.grant')">
+      <a-tab-pane key="6" :tab="$t('cmdb.components.relationGrant')">
         <GrantComp :CITypeId="CITypeId" resourceType="CIType" :resourceTypeName="CITypeName"></GrantComp>
+        <div class="citype-detail-title">{{ $t('cmdb.ciType.relation') }}</div>
+        <RelationTable isInGrantComp :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
       </a-tab-pane>
     </a-tabs>
   </a-card>
@@ -74,4 +76,13 @@ export default {
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+@import '~@/style/static.less';
+
+.citype-detail-title {
+  border-left: 4px solid @primary-color;
+  padding-left: 10px;
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
index 48bd5c4..832779c 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
@@ -8,11 +8,10 @@
     </div>
     <SplitPane
       v-else
-      :min="280"
+      :min="220"
       :max="500"
       :paneLengthPixel.sync="paneLengthPixel"
       appName="cmdb-ci-types"
-      triggerColor="#F0F5FF"
       :triggerLength="18"
     >
       <template #one>
@@ -22,22 +21,23 @@
               :disabled="!permissions.includes('admin') && !permissions.includes('cmdb_admin')"
               type="primary"
               size="small"
-              icon="plus"
+              ghost
               @click="handleClickAddGroup"
-              class="ops-button-primary"
-            >{{ $t('cmdb.ciType.group') }}</a-button
+              class="ops-button-ghost"
+            ><ops-icon type="veops-increase" />{{ $t('cmdb.ciType.group') }}</a-button
             >
             <a-space>
-              <a
+              <span
+                :style="{ cursor: 'pointer' }"
                 @click="
                   () => {
                     $refs.attributeStore.open()
                   }
                 "
-              >{{ $t('cmdb.ciType.attributeLibray') }}</a
-              >
+              >{{ $t('cmdb.ciType.attributeLibray') }}
+              </span>
               <a-dropdown v-if="permissions.includes('admin') || permissions.includes('cmdb_admin')">
-                <a><ops-icon type="ops-menu"/></a>
+                <ops-icon type="ops-menu" :style="{ cursor: 'pointer' }" />
                 <a-menu slot="overlay">
                   <a-menu-item key="0">
                     <a-upload
@@ -83,7 +83,7 @@
                 <a-space>
                   <a-tooltip>
                     <template slot="title">{{ $t('cmdb.ciType.addCITypeInGroup') }}</template>
-                    <a><a-icon type="plus" @click="handleCreate(g)"/></a>
+                    <a><ops-icon type="veops-increase" @click="handleCreate(g)"/></a>
                   </a-tooltip>
                   <template v-if="g.id !== -1">
                     <a-tooltip>
@@ -113,7 +113,7 @@
                 >
                   <div>
                     <OpsMoveIcon
-                      style="width: 17px; height: 17px; display: none; position: absolute; left: 15px; top: 5px"
+                      style="width: 17px; height: 17px; display: none; position: absolute; left: -1px; top: 8px"
                     />
                     <span class="ci-types-left-detail-icon">
                       <template v-if="ci.icon">
@@ -134,18 +134,33 @@
                     </span>
                   </div>
                   <span class="ci-types-left-detail-title">{{ ci.alias || ci.name }}</span>
-                  <a-space class="ci-types-left-detail-action">
-                    <a><a-icon type="user-add" @click="(e) => handlePerm(e, ci)"/></a>
-                    <a><a-icon type="edit" @click="(e) => handleEdit(e, ci)"/></a>
-                    <a
-                      v-if="permissions.includes('admin') || permissions.includes('cmdb_admin')"
-                      :disabled="ci.inherited"
-                      @click="(e) => handleDownloadCiType(e, ci)"
-                    >
-                      <a-icon type="download" />
+                  <a-dropdown :getPopupContainer="(trigger) => trigger">
+                    <a class="ci-types-left-detail-action">
+                      <ops-icon type="veops-more" />
                     </a>
-                    <a style="color: red" @click="(e) => handleDelete(e, ci)"><a-icon type="delete"/></a>
-                  </a-space>
+                    <a-menu slot="overlay">
+                      <a-menu-item @click="(e) => handlePerm(e, ci)">
+                        <a-icon type="user-add" />
+                        {{ $t('grant') }}
+                      </a-menu-item>
+                      <a-menu-item @click="(e) => handleEdit(e, ci)">
+                        <a-icon type="edit" />
+                        {{ $t('cmdb.ciType.editCIType') }}
+                      </a-menu-item>
+                      <a-menu-item
+                        v-if="permissions.includes('admin') || permissions.includes('cmdb_admin')"
+                        :disabled="ci.inherited"
+                        @click="(e) => handleDownloadCiType(e, ci)"
+                      >
+                        <a-icon type="download" />
+                        {{ $t('cmdb.ciType.downloadType') }}
+                      </a-menu-item>
+                      <a-menu-item @click="(e) => handleDelete(e, ci)">
+                        <a-icon type="delete" />
+                        {{ $t('cmdb.ciType.deleteCIType') }}
+                      </a-menu-item>
+                    </a-menu>
+                  </a-dropdown>
                 </div>
               </draggable>
             </div>
@@ -270,17 +285,7 @@
             </div>
           </el-select>
         </a-form-item>
-        <a-form-item>
-          <template slot="label">
-            <a-tooltip :title="$t('cmdb.ciType.uniqueKeyTips')">
-              <a-icon
-                style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
-                type="question-circle"
-                theme="filled"
-              />
-            </a-tooltip>
-            <span>{{ $t('cmdb.ciType.uniqueKey') }}</span>
-          </template>
+        <a-form-item :help="$t('cmdb.ciType.uniqueKeyTips')" :label="$t('cmdb.ciType.uniqueKey')">
           <el-select
             size="small"
             filterable
@@ -456,7 +461,6 @@ export default {
     },
     currentCName() {
       if (this.currentId) {
-        console.log(this.currentId)
         if (this.currentId.split('%')[2] !== 'null') {
           return this.currentId.split('%')[2]
         }
@@ -817,8 +821,8 @@ export default {
         })
     },
     handleDelete(e, record) {
-      e.preventDefault()
-      e.stopPropagation()
+      e.domEvent.preventDefault()
+      e.domEvent.stopPropagation()
       const that = this
       this.$confirm({
         title: that.$t('warning'),
@@ -833,8 +837,8 @@ export default {
       })
     },
     handleDownloadCiType(e, ci) {
-      e.preventDefault()
-      e.stopPropagation()
+      e.domEvent.preventDefault()
+      e.domEvent.stopPropagation()
       const x = new XMLHttpRequest()
       x.open('GET', `/api/v0.1/ci_types/${ci.id}/template/export`, true)
       x.responseType = 'blob'
@@ -855,8 +859,8 @@ export default {
       })
     },
     async handleEdit(e, record) {
-      e.preventDefault()
-      e.stopPropagation()
+      e.domEvent.preventDefault()
+      e.domEvent.stopPropagation()
       this.drawerTitle = this.$t('cmdb.ciType.editCIType')
       this.drawerVisible = true
       await getCITypeAttributesById(record.id).then((res) => {
@@ -909,8 +913,8 @@ export default {
       }
     },
     handlePerm(e, ci) {
-      e.preventDefault()
-      e.stopPropagation()
+      e.domEvent.preventDefault()
+      e.domEvent.stopPropagation()
       roleHasPermissionToGrant({
         app_id: 'cmdb',
         resource_type_name: 'CIType',
@@ -942,6 +946,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .ci-types-wrap {
   margin: 0 0 -24px 0;
   .ci-types-empty {
@@ -955,21 +961,24 @@ export default {
     width: 100%;
     overflow: auto;
     float: left;
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
+
     .ci-types-left-content {
       max-height: calc(100% - 45px);
-      overflow: auto;
+      overflow: hidden;
+      &:hover {
+        overflow: auto;
+      }
     }
     .ci-types-left-title {
-      padding: 10px 15px;
+      padding: 10px 0;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      color: @text-color_3;
     }
     .ci-types-left-group {
       position: relative;
-      padding: 8px 15px;
+      padding: 8px 0 8px 14px;
       color: rgb(99, 99, 99);
       cursor: pointer;
       font-size: 14px;
@@ -982,7 +991,7 @@ export default {
         display: none;
       }
       &:hover {
-        background-color: #e1efff;
+        background-color: @primary-color_3;
         > div:nth-child(2) {
           display: inline-flex;
         }
@@ -992,17 +1001,25 @@ export default {
       }
     }
     .ci-types-left-detail {
-      padding: 3px 14px 3px 36px;
+      padding: 3px 14px;
       cursor: pointer;
       position: relative;
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
+      align-items: center;
       margin-bottom: 4px;
+      height: 32px;
+      line-height: 32px;
       .ci-types-left-detail-action {
         display: none;
         margin-left: auto;
       }
+      .ci-types-left-detail-title {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
       .ci-types-left-detail-icon {
         display: flex;
         align-items: center;
@@ -1019,7 +1036,7 @@ export default {
         }
       }
       &:hover {
-        background-color: #e1efff;
+        background-color: @primary-color_3;
         svg {
           display: inline !important;
         }
@@ -1029,7 +1046,7 @@ export default {
       }
     }
     .selected {
-      background-color: #e1efff;
+      background-color: @primary-color_3;
       .ci-types-left-detail-title {
         font-weight: 700;
       }
@@ -1038,6 +1055,7 @@ export default {
   .ci-types-right {
     width: 100%;
     position: relative;
+    background-color: #fff;
     .ci-types-right-empty {
       position: absolute;
       text-align: center;
@@ -1049,7 +1067,6 @@ export default {
   .ci-types-left,
   .ci-types-right {
     height: 100%;
-    background-color: #fff;
   }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/relationAD.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/relationAD.vue
index becf5ae..24cb511 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/relationAD.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/relationAD.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relation-ad" :style="{ height: `${windowHeight - 104}px` }">
+  <div class="relation-ad" :style="{ height: `${windowHeight - 130}px` }">
     <div class="relation-ad-item" v-for="item in relationList" :key="item.id">
       <treeselect
         class="custom-treeselect"
@@ -253,7 +253,7 @@ export default {
 <style lang="less" scoped>
 .relation-ad {
   overflow: auto;
-  padding: 24px;
+  padding: 0 20px;
   .relation-ad-item {
     display: inline-flex;
     justify-content: flex-start;
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue
index 205aa16..5bbd1df 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue
@@ -1,6 +1,7 @@
 <template>
-  <div :style="{ padding: '16px 24px 24px' }">
+  <div :style="{ padding: '0 20px 20px' }">
     <a-button
+      v-if="!isInGrantComp"
       style="margin-bottom: 10px"
       @click="handleCreate"
       type="primary"
@@ -43,7 +44,7 @@
         <template #default="{row}">
           <a-space v-if="!row.isParent && row.source_ci_type_id">
             <a @click="handleOpenGrant(row)"><a-icon type="user-add"/></a>
-            <a-popconfirm :title="$t('cmdb.ciType.confirmDelete2')" @confirm="handleDelete(row)">
+            <a-popconfirm v-if="!isInGrantComp" :title="$t('cmdb.ciType.confirmDelete2')" @confirm="handleDelete(row)">
               <a style="color: red;"><a-icon type="delete"/></a>
             </a-popconfirm>
           </a-space>
@@ -148,6 +149,10 @@ export default {
       type: String,
       default: '',
     },
+    isInGrantComp: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -178,7 +183,9 @@ export default {
   async mounted() {
     this.getCITypes()
     this.getRelationTypes()
-    await this.getCITypeParent()
+    if (!this.isInGrantComp) {
+      await this.getCITypeParent()
+    }
     this.getData()
   },
   methods: {
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/triggerTable.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/triggerTable.vue
index 501270b..6231930 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/triggerTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/triggerTable.vue
@@ -134,6 +134,6 @@ export default {
 
 <style lang="less" scoped>
 .ci-types-triggers {
-  padding: 16px 24px 24px;
+  padding: 0 20px 20px;
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
index 18f2276..0923545 100644
--- a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
@@ -165,7 +165,7 @@
                       : '#fafafa',
                 }"
               >
-                <div :style="{ color: fontColor }">{{ form.name }}</div>
+                <div v-if="chartType === 'count'" :style="{ color: fontColor }">{{ form.name }}</div>
                 <Chart
                   :ref="`chart_${item.id}`"
                   :chartId="item.id"
@@ -613,6 +613,7 @@ export default {
       } else {
         this.form.category = 1
       }
+      console.log(this.chartType)
     },
     showPreview() {
       this.$refs.chartForm.validate(async (valid) => {
diff --git a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/customLayout.vue b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/customLayout.vue
index 58b2237..861290e 100644
--- a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/customLayout.vue
+++ b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/customLayout.vue
@@ -15,7 +15,8 @@
           @click="openChartForm('add', { options: { w: 3 } })"
           type="primary"
           icon="plus-circle"
-          class="ops-button-primary"
+          ghost
+          class="ops-button-ghost"
         >{{ $t('cmdb.custom_dashboard.newChart') }}</a-button
         >
       </div>
@@ -44,7 +45,7 @@
                 ? Array.isArray(item.options.bgColor)
                   ? `linear-gradient(to bottom, ${item.options.bgColor[0]} 0%, ${item.options.bgColor[1]} 100%)`
                   : item.options.bgColor
-                : '#fafafa',
+                : '#fff',
           }"
         >
           <div class="cmdb-dashboard-grid-item-title">
@@ -78,7 +79,10 @@
             ></a>
             <a-menu slot="overlay">
               <a-menu-item>
-                <a @click="() => openChartForm('edit', item)"><a-icon style="margin-right:5px" type="edit" />{{ $t('edit') }}</a>
+                <a
+                  @click="() => openChartForm('edit', item)"
+                ><a-icon style="margin-right:5px" type="edit" />{{ $t('edit') }}</a
+                >
               </a-menu-item>
               <a-menu-item>
                 <a @click="deleteChart(item)"><a-icon style="margin-right:5px" type="delete" />{{ $t('delete') }}</a>
@@ -261,7 +265,7 @@ export default {
   text-align: center;
 }
 .cmdb-dashboard-grid-item {
-  border-radius: 8px;
+  border-radius: 2px;
   padding: 6px 12px;
   .cmdb-dashboard-grid-item-title {
     overflow: hidden;
@@ -299,6 +303,7 @@ export default {
     display: inline-block;
     width: 16px;
     height: 16px;
+    line-height: 16px;
     font-size: 16px;
     text-align: center;
     margin-right: 5px;
diff --git a/cmdb-ui/src/modules/cmdb/views/discovery/index.vue b/cmdb-ui/src/modules/cmdb/views/discovery/index.vue
index f34b1fa..03952da 100644
--- a/cmdb-ui/src/modules/cmdb/views/discovery/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/discovery/index.vue
@@ -144,6 +144,9 @@ export default {
 <style lang="less" scoped>
 @import '~@/style/static.less';
 .setting-discovery {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: @border-radius-box;
   .type-header {
     width: 100%;
     display: inline-flex;
diff --git a/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue b/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue
index 184c98e..f2fd987 100644
--- a/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue
@@ -1,11 +1,11 @@
 <template>
   <TwoColumnLayout appName="cmdb-adc">
     <template #one>
-      <div v-for="group in ci_types_list" :key="group.id">
-        <div>
+      <div class="cmdb-adc-group" v-for="group in ci_types_list" :key="group.id">
+        <p>
           <strong>{{ group.name || $t('other') }}</strong
           ><span :style="{ color: 'rgb(195, 205, 215)' }">({{ group.ci_types.length }})</span>
-        </div>
+        </p>
         <div
           :class="{ 'cmdb-adc-side-item': true, 'cmdb-adc-side-item-selected': currentType === type.id }"
           v-for="type in group.ci_types"
@@ -34,7 +34,6 @@
       <div id="discovery-ci">
         <a-input-search
           :placeholder="$t('cmdb.components.pleaseSearch')"
-          class="ops-input ops-input-radius"
           :style="{ width: '200px', marginRight: '20px', marginBottom: '10px' }"
           @search="handleSearch"
           allowClear
@@ -102,7 +101,11 @@
             sortable
             v-bind="columns.length ? { width: '130px' } : { minWidth: '130px' }"
           ></vxe-column>
-          <vxe-column :title="$t('operation')" v-bind="columns.length ? { width: '60px' } : { minWidth: '60px' }" align="center">
+          <vxe-column
+            :title="$t('operation')"
+            v-bind="columns.length ? { width: '60px' } : { minWidth: '60px' }"
+            align="center"
+          >
             <template #default="{row}">
               <a-space>
                 <a-tooltip :title="$t('cmdb.ad.accept')">
@@ -312,6 +315,9 @@ export default {
 <style lang="less" scoped>
 @import '~@/style/static.less';
 .cmdb-adc {
+  .cmdb-adc-group {
+    margin-bottom: 20px;
+  }
   .cmdb-adc-side-item {
     .ops_popover_item();
     height: 32px;
@@ -343,7 +349,7 @@ export default {
   }
   .cmdb-adc-side-item-selected {
     .ops_popover_item_selected();
-    background-color: #custom_colors[color_2];
+    background-color: @primary-color_3;
   }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/index.less b/cmdb-ui/src/modules/cmdb/views/index.less
index 4182c87..36a5fa0 100644
--- a/cmdb-ui/src/modules/cmdb/views/index.less
+++ b/cmdb-ui/src/modules/cmdb/views/index.less
@@ -77,7 +77,7 @@
 }
 
 .cmdb-views-header {
-  border-left: 4px solid #custom_colors[color_1];
+  border-left: 4px solid @primary-color;
   height: 32px;
   display: flex;
   align-items: center;
@@ -85,17 +85,17 @@
   margin-bottom: 18px;
   .cmdb-views-header-title {
     font-size: 16px;
-    font-weight: 400;
-    color: rgba(0, 0, 0, 0.75);
+    font-weight: bold;
+    color: @text-color_1;
     margin-left: 10px;
   }
   .cmdb-views-header-metadata {
     cursor: pointer;
     font-size: 12px;
-    color: rgba(0, 0, 0, 0.55);
+    color: @text-color_3;
     margin-left: 20px;
     &:hover {
-      color: #custom_colors[color_1];
+      color: @primary-color;
     }
   }
 }
diff --git a/cmdb-ui/src/modules/cmdb/views/model_relation/index.vue b/cmdb-ui/src/modules/cmdb/views/model_relation/index.vue
index 4275634..d4bd8b1 100644
--- a/cmdb-ui/src/modules/cmdb/views/model_relation/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/model_relation/index.vue
@@ -242,9 +242,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .model-relation {
   background-color: #fff;
-  border-radius: 15px;
+  border-radius: @border-radius-box;
   padding: 24px;
   height: calc(100vh - 64px);
   margin-bottom: -24px;
diff --git a/cmdb-ui/src/modules/cmdb/views/preference/index.vue b/cmdb-ui/src/modules/cmdb/views/preference/index.vue
index e42206c..bd48787 100644
--- a/cmdb-ui/src/modules/cmdb/views/preference/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/preference/index.vue
@@ -51,7 +51,6 @@
               :class="{
                 'cmdb-preference-avatar': true,
                 'cmdb-preference-avatar-noicon': !ciType.icon,
-                'cmdb-preference-avatar-noicon-is_subscribed': !ciType.icon && ciType.is_subscribed,
               }"
               :style="{ width: '30px', height: '30px', marginRight: '10px' }"
             >
@@ -94,7 +93,12 @@
       </div>
     </div>
     <div class="cmdb-preference-right">
-      <div v-for="group in citypeData" :key="group.id">
+      <a-input-search
+        v-model="searchValue"
+        :style="{ width: '300px', marginBottom: '20px' }"
+        :placeholder="$t('cmdb.preference.searchPlaceholder')"
+      />
+      <div v-for="group in filterCiTypeData" :key="group.id">
         <p @click="changeGroupExpand(group)" :style="{ display: 'inline-block', cursor: 'pointer' }">
           <a-icon :type="expandKeys.includes(group.id) ? 'caret-down' : 'caret-right'" />{{ group.name }}({{
             group.ci_types ? group.ci_types.length : 0
@@ -108,7 +112,6 @@
                   :class="{
                     'cmdb-preference-avatar': true,
                     'cmdb-preference-avatar-noicon': !item.icon,
-                    'cmdb-preference-avatar-noicon-is_subscribed': !item.icon && item.is_subscribed,
                   }"
                 >
                   <template v-if="item.icon">
@@ -188,6 +191,7 @@
 </template>
 
 <script>
+import _ from 'lodash'
 import router, { resetRouter } from '@/router'
 import store from '@/store'
 import { mapState } from 'vuex'
@@ -219,12 +223,29 @@ export default {
       },
       type_id2users: {},
       myPreferences: [],
+      searchValue: '',
     }
   },
   computed: {
     ...mapState({
       windowHeight: (state) => state.windowHeight,
     }),
+    filterCiTypeData() {
+      if (this.searchValue) {
+        const _citypeData = _.cloneDeep(this.citypeData)
+        _citypeData.forEach((group) => {
+          if (group.ci_types) {
+            group.ci_types = group.ci_types.filter(
+              (item) =>
+                item.name.toLowerCase().includes(this.searchValue.toLowerCase()) ||
+                item.alias.toLowerCase().includes(this.searchValue.toLowerCase())
+            )
+          }
+        })
+        return _citypeData
+      }
+      return this.citypeData
+    },
   },
   mounted() {
     this.getCITypes(true)
@@ -376,7 +397,6 @@ export default {
 .cmdb-preference {
   margin: -24px;
   overflow: auto;
-  background: url('../../assets/preference_background.png');
   position: relative;
   display: flex;
   flex-direction: row;
@@ -392,7 +412,7 @@ export default {
   .cmdb-preference-left {
     width: 300px;
     height: 100%;
-    padding: 12px 18px;
+    padding: 24px 18px;
     .cmdb-preference-left-card {
       background: url('../../assets/preference_card.png');
       background-repeat: no-repeat;
@@ -426,17 +446,19 @@ export default {
       .cmdb-preference-group-title {
         text-align: center;
         margin-bottom: 5px;
+        i {
+          color: @primary-color;
+        }
         > span {
           display: inline-block;
-          color: #fff;
-          background: linear-gradient(90deg, #305bec, #78cfff);
+          color: @text-color_2;
           border-radius: 16px;
           font-weight: 600;
           padding: 6px 12px;
         }
       }
       .cmdb-preference-group-content {
-        color: rgba(0, 0, 0, 0.75);
+        color: @text-color_1;
         font-weight: 400;
         display: flex;
         align-items: center;
@@ -447,7 +469,11 @@ export default {
         &:hover {
           background: #ffffff;
           box-shadow: 0px 2px 8px rgba(149, 160, 208, 0.25);
-          border-radius: 8px;
+          border-radius: @border-radius-box;
+          .cmdb-preference-avatar {
+            box-shadow: none;
+            background-color: @primary-color_5;
+          }
           .cmdb-preference-group-content-action {
             display: inline;
             white-space: nowrap;
@@ -479,7 +505,7 @@ export default {
   .cmdb-preference-right {
     flex: 1;
     height: 100%;
-    padding-top: 18px;
+    padding-top: 24px;
     .cmdb-preference-content {
       display: flex;
       flex-direction: row;
@@ -494,11 +520,11 @@ export default {
         display: inline-block;
         width: 195px;
         height: 155px;
-        border-radius: 8px;
+        border-radius: @border-radius-box;
         background-color: #fff;
         box-shadow: 0px 2px 8px rgba(149, 160, 208, 0.25);
         margin: 0 20px 20px 0;
-        padding: 8px;
+        padding: 12px;
         &:hover {
           box-shadow: 4px 25px 30px rgba(50, 89, 134, 0.25);
           transform: scale(1.1);
@@ -550,7 +576,7 @@ export default {
           .cmdb-preference-progress-gray {
             height: 5px;
             border-radius: 5px;
-            background-color: #d9d9d9;
+            background-color: @text-color_6;
             margin-top: 5px;
             width: 100%;
             position: relative;
@@ -560,7 +586,7 @@ export default {
               top: 0;
               left: 0;
               border-radius: 5px;
-              background: linear-gradient(90deg, #305bec, #78cfff);
+              background: @primary-color_8;
             }
           }
         }
@@ -592,20 +618,17 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: 34px;
+    height: 34px;
     box-shadow: 0px 4px 4px rgba(129, 140, 186, 0.25);
-    border-radius: 5px;
+    border-radius: 1px;
+    background-color: #fff;
   }
   .cmdb-preference-avatar-noicon {
-    background-color: #7f97fa;
     > span {
-      font-size: 24px;
-      color: #fff;
+      font-size: 18px;
+      color: @text-color_4;
     }
   }
-  .cmdb-preference-avatar-noicon-is_subscribed {
-    background-color: #47a964;
-  }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/preference_relation/index.vue b/cmdb-ui/src/modules/cmdb/views/preference_relation/index.vue
index f0b246b..a6ecfe2 100644
--- a/cmdb-ui/src/modules/cmdb/views/preference_relation/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/preference_relation/index.vue
@@ -15,9 +15,7 @@
           >{{ $t('cmdb.preference_relation.newServiceTree') }}</a-button
           >
           <template v-else>
-            <a-input v-model="newRelationViewName" :placeholder="$t('cmdb.preference_relation.serviceTreeName')"></a-input>
-            <a-checkbox v-model="is_public">{{ $t('cmdb.preference_relation.public') }}</a-checkbox>
-            <a-button type="primary" size="small" @click="handleSaveRelationViews">{{ $t('save') }}</a-button>
+            <a-button type="primary" size="small" @click="openServiceTreeModal({}, 'add')">{{ $t('save') }}</a-button>
             <a-button
               type="primary"
               size="small"
@@ -26,13 +24,13 @@
                 () => {
                   isEdit = false
                   checkedNodes = []
-                  newRelationViewName = ''
                 }
               "
             >{{ $t('cancel') }}</a-button
             >
           </template>
-          <a-button type="primary" size="small" @click="handleSave">{{ $t('cmdb.preference_relation.saveLayout') }}</a-button>
+          <a-button size="small" @click="handleSave">{{ $t('cmdb.preference_relation.saveLayout') }}</a-button>
+          <span>{{ $t('cmdb.preference_relation.tips5') }}</span>
         </a-space>
       </div>
       <SeeksRelationGraph v-if="isPullConfig" ref="ciTypeRelationGraph" :options="graphOptions">
@@ -46,7 +44,7 @@
         </div>
       </SeeksRelationGraph>
     </div>
-    <template v-if="relationViews.views">
+    <template v-if="relationViews.views && !loading">
       <a-row :gutter="4">
         <a-col
           :xl="12"
@@ -54,11 +52,17 @@
           :md="12"
           :sm="24"
           :xs="24"
-          :key="`${view}${idx}`"
-          v-for="(view, idx) in Object.keys(relationViews.views)"
+          :key="`${view}`"
+          v-for="view in Object.keys(relationViews.views)"
         >
           <div class="relation-views">
             <h3 :style="{ padding: '10px 0 0 20px' }">{{ view }}</h3>
+            <a
+              class="relation-views-edit"
+              @click="openServiceTreeModal({ name: view }, 'edit')"
+            ><ops-icon
+              type="icon-xianxing-edit"
+            /></a>
             <a-popconfirm :title="$t('cmdb.ciType.confirmDelete', { name: `${view}` })" @confirm="confirmDelete(view)">
               <a class="relation-views-close"><a-icon type="close"/></a>
             </a-popconfirm>
@@ -69,6 +73,7 @@
         </a-col>
       </a-row>
     </template>
+    <ServiceTreeModal ref="serviceTreeModal" @submitServiceTree="submitServiceTree" />
   </div>
 </template>
 
@@ -78,11 +83,17 @@ import router, { resetRouter } from '@/router'
 import store from '@/store'
 import SeeksRelationGraph from '@/modules/cmdb/3rd/relation-graph'
 import { getCITypeRelations } from '@/modules/cmdb/api/CITypeRelation'
-import { getRelationView, deleteRelationView, subscribeRelationView } from '@/modules/cmdb/api/preference'
+import {
+  getRelationView,
+  deleteRelationView,
+  subscribeRelationView,
+  putRelationView,
+} from '@/modules/cmdb/api/preference'
 import { getSystemConfig, saveSystemConfig } from '../../api/system_config'
+import ServiceTreeModal from './serviceTreeModal.vue'
 export default {
   name: 'PreferenceRelation',
-  components: { SeeksRelationGraph },
+  components: { SeeksRelationGraph, ServiceTreeModal },
   data() {
     const defaultOptions = {
       allowShowMiniToolBar: false,
@@ -103,6 +114,7 @@ export default {
     }
     const relationViewOptions = {
       ...defaultOptions,
+      disableZoom: true,
       layouts: [
         {
           layoutName: 'tree',
@@ -116,11 +128,10 @@ export default {
       relationViewOptions,
       isEdit: false,
       relationViews: {},
-      newRelationViewName: '',
       graphJsonData: {},
       checkedNodes: [],
-      is_public: true,
       isPullConfig: false,
+      loading: false,
     }
   },
   async created() {
@@ -210,6 +221,7 @@ export default {
       return maxEle
     },
     async getViewsData() {
+      this.loading = true
       const data = await getRelationView()
       this.relationViews = data
       const { views } = data
@@ -240,6 +252,7 @@ export default {
         this.$nextTick(() => {
           this.$refs.relationViewsGraph[index].setJsonData(_graphJsonData)
         })
+        this.loading = false
       })
     },
     checked(e, node) {
@@ -288,32 +301,59 @@ export default {
         this.checkedNodes.push(node.id)
       }
     },
-    async handleSaveRelationViews() {
-      if (!this.newRelationViewName) {
-        this.$message.warning(this.$t('cmdb.preference_relation.tips2'))
-        return
-      }
-      if (this.checkedNodes.length < 2) {
+    openServiceTreeModal(treeData, type) {
+      if (type === 'add' && this.checkedNodes.length < 2) {
         this.$message.warning(this.$t('cmdb.preference_relation.tips3'))
         return
       }
-      // eslint-disable-next-line camelcase
-      const cr_ids = []
-      this.checkedNodes.forEach((item, idx) => {
-        if (idx !== this.checkedNodes.length - 1) {
-          cr_ids.push({ parent_id: Number(item), child_id: Number(this.checkedNodes[idx + 1]) })
+      let _treeData = { ...treeData }
+      if (type === 'edit') {
+        const { name } = _treeData
+        _treeData = {
+          ...treeData,
+          ...(this.relationViews?.views[name]?.option ?? {}),
+          is_public: this.relationViews?.views[name]?.is_public ?? true,
         }
-      })
-      await subscribeRelationView({
-        cr_ids,
-        name: this.newRelationViewName,
-        is_public: this.is_public,
-      })
+      }
+      this.$refs.serviceTreeModal.open(_treeData, type)
+    },
+    async submitServiceTree(treeData, type, originName) {
+      const { name, is_public, is_show_leaf_node, is_show_tree_node, sort } = treeData
+      if (type === 'add') {
+        const cr_ids = []
+        this.checkedNodes.forEach((item, idx) => {
+          if (idx !== this.checkedNodes.length - 1) {
+            cr_ids.push({ parent_id: Number(item), child_id: Number(this.checkedNodes[idx + 1]) })
+          }
+        })
+        await subscribeRelationView({
+          cr_ids,
+          name,
+          is_public,
+          option: { is_show_leaf_node, is_show_tree_node, sort, is_public },
+        })
+      } else {
+        const _name = name === originName ? name : originName
+        const topo_flatten = this.relationViews?.views[_name]?.topo_flatten ?? []
+        const name2id = this.relationViews?.name2id.find((item) => item[0] === _name)
+        const cr_ids = []
+        topo_flatten.forEach((item, idx) => {
+          if (idx !== topo_flatten.length - 1) {
+            cr_ids.push({ parent_id: Number(item), child_id: Number(topo_flatten[idx + 1]) })
+          }
+        })
+        console.log(originName, name, cr_ids, name2id)
+        await putRelationView(name2id[1], {
+          cr_ids,
+          name,
+          is_public,
+          option: { is_show_leaf_node, is_show_tree_node, sort, is_public },
+        })
+      }
       this.resetRoute()
       this.getViewsData()
       this.isEdit = false
       this.checkedNodes = []
-      this.newRelationViewName = ''
     },
     async confirmDelete(viewName) {
       await deleteRelationView(viewName)
@@ -359,7 +399,7 @@ export default {
     width: 100%;
     .ci-type-relation-header {
       position: absolute;
-      top: 10px;
+      top: 20px;
       left: 20px;
       z-index: 10;
     }
@@ -368,12 +408,19 @@ export default {
     background-color: #fff;
     margin-top: 5px;
     position: relative;
+    .relation-views-edit,
     .relation-views-close {
       position: absolute;
       z-index: 10;
-      right: 20px;
+      right: 60px;
       top: 10px;
     }
+    .relation-views-edit {
+      right: 46px;
+    }
+    .relation-views-close {
+      right: 20px;
+    }
   }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/preference_relation/serviceTreeModal.vue b/cmdb-ui/src/modules/cmdb/views/preference_relation/serviceTreeModal.vue
new file mode 100644
index 0000000..583206a
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/views/preference_relation/serviceTreeModal.vue
@@ -0,0 +1,110 @@
+<template>
+  <a-modal width="700px" :title="title" :visible="visible" @cancel="handleCancel" @ok="handleOK">
+    <a-form-model ref="form" :model="form" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
+      <a-form-model-item :label="$t('cmdb.preference_relation.serviceTreeName')" prop="name">
+        <a-input v-model="form.name" :placeholder="$t('cmdb.preference_relation.serviceTreeNamePlaceholder')" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cmdb.preference_relation.public')" prop="is_public">
+        <a-checkbox v-model="form.is_public"> </a-checkbox>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cmdb.preference_relation.showLeafNode')" prop="is_show_leaf_node">
+        <a-checkbox :checked="form.is_show_leaf_node" @change="changeLeaf"> </a-checkbox>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cmdb.preference_relation.showTreeNode')" prop="is_show_tree_node">
+        <a-checkbox :checked="form.is_show_tree_node" @change="changeNode"> </a-checkbox>
+      </a-form-model-item>
+      <a-form-model-item
+        v-if="form.is_show_leaf_node && form.is_show_tree_node"
+        :label="$t('cmdb.preference_relation.sort')"
+        prop="sort"
+      >
+        <a-radio-group v-model="form.sort">
+          <a-radio :value="1">
+            {{ $t('cmdb.preference_relation.sort1') }}
+          </a-radio>
+          <a-radio :value="2">
+            {{ $t('cmdb.preference_relation.sort2') }}
+          </a-radio>
+        </a-radio-group>
+      </a-form-model-item>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'ServiceTreeModal',
+  data() {
+    return {
+      visible: false,
+      type: 'add',
+      originTreeData: {},
+      form: {
+        name: '',
+        is_public: true,
+        is_show_leaf_node: true,
+        is_show_tree_node: false,
+        sort: 1,
+      },
+      rules: {
+        name: [{ required: true, message: this.$t('cmdb.preference_relation.serviceTreeNamePlaceholder') }],
+        is_public: [{ required: false }],
+        is_show_leaf_node: [{ required: false }],
+        is_show_tree_node: [{ required: false }],
+      },
+    }
+  },
+  computed: {
+    title() {
+      if (this.type === 'edit') {
+        return this.$t('cmdb.preference_relation.editServiceTree')
+      }
+      return this.$t('cmdb.preference_relation.newServiceTree')
+    },
+  },
+  methods: {
+    open(treeData = {}, type) {
+      this.visible = true
+      this.type = type
+      this.originTreeData = { ...treeData }
+      this.form = { name: '', is_public: true, is_show_leaf_node: true, is_show_tree_node: false, sort: 1, ...treeData }
+    },
+    handleCancel() {
+      this.$refs.form.resetFields()
+      this.visible = false
+    },
+    handleOK() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit('submitServiceTree', this.form, this.type, this.originTreeData?.name ?? undefined)
+          this.handleCancel()
+        }
+      })
+    },
+    changeLeaf(e) {
+      const checked = e.target.checked
+      if (!checked && !this.form.is_show_tree_node) {
+        this.$message.warning(this.$t('cmdb.preference_relation.tips4'))
+        return
+      }
+      this.form = {
+        ...this.form,
+        is_show_leaf_node: checked,
+      }
+    },
+    changeNode(e) {
+      const checked = e.target.checked
+      if (!checked && !this.form.is_show_leaf_node) {
+        this.$message.warning(this.$t('cmdb.preference_relation.tips4'))
+        return
+      }
+      this.form = {
+        ...this.form,
+        is_show_tree_node: checked,
+      }
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue b/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
index 3afcc72..4facb88 100644
--- a/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
@@ -1,61 +1,51 @@
 <template>
   <div :style="{ marginBottom: '-24px', overflow: 'hidden' }">
     <div v-if="relationViews.name2id && relationViews.name2id.length" class="relation-views-wrapper">
-      <div class="cmdb-views-header">
-        <span
-          class="cmdb-views-header-title"
-        >{{ $route.meta.name }}
-          <div
-            class="ops-list-batch-action"
-            :style="{ backgroundColor: '#c0ceeb' }"
-            v-if="showBatchLevel !== null && batchTreeKey && batchTreeKey.length"
-          >
-            <span
-              @click="
-                () => {
-                  $refs.grantModal.open('depart')
-                }
-              "
-            >{{ $t('grant') }}</span
-            >
-            <a-divider type="vertical" />
-            <span
-              @click="
-                () => {
-                  $refs.revokeModal.open()
-                }
-              "
-            >{{ $t('revoke') }}</span
-            >
-            <template v-if="showBatchLevel > 0">
-              <a-divider type="vertical" />
-              <span @click="batchDeleteCIRelationFromTree">{{ $t('delete') }}</span>
-            </template>
-            <a-divider type="vertical" />
-            <span
-              @click="
-                () => {
-                  showBatchLevel = null
-                  batchTreeKey = []
-                }
-              "
-            >{{ $t('cancel') }}</span
-            >
-            <span>{{ $t('selectRows', { rows: batchTreeKey.length }) }}</span>
-          </div>
-        </span>
-        <a-button size="small" icon="user-add" type="primary" ghost @click="handlePerm">{{ $t('grant') }}</a-button>
-      </div>
       <SplitPane
         :min="200"
         :max="500"
         :paneLengthPixel.sync="paneLengthPixel"
         :appName="`cmdb-relation-views-${viewId}`"
-        triggerColor="#F0F5FF"
         :triggerLength="18"
       >
         <template #one>
           <div class="relation-views-left" :style="{ height: `${windowHeight - 115}px` }">
+            <div class="relation-views-left-header" :title="$route.meta.name">{{ $route.meta.name }}</div>
+            <div
+              class="ops-list-batch-action"
+              :style="{ marginBottom: '10px' }"
+              v-if="showBatchLevel !== null && batchTreeKey && batchTreeKey.length"
+            >
+              <span
+                @click="
+                  () => {
+                    $refs.grantModal.open('depart')
+                  }
+                "
+              >{{ $t('grant') }}</span
+              >
+              <span
+                @click="
+                  () => {
+                    $refs.revokeModal.open()
+                  }
+                "
+              >{{ $t('revoke') }}</span
+              >
+              <template v-if="showBatchLevel > 0">
+                <span @click="batchDeleteCIRelationFromTree">{{ $t('delete') }}</span>
+              </template>
+              <span
+                @click="
+                  () => {
+                    showBatchLevel = null
+                    batchTreeKey = []
+                  }
+                "
+              >{{ $t('cancel') }}</span
+              >
+              <span>{{ $t('selectRows', { rows: batchTreeKey.length }) }}</span>
+            </div>
             <a-tree
               :selectedKeys="selectedKeys"
               :loadData="onLoadData"
@@ -65,9 +55,10 @@
               @drop="onDrop"
               :expandedKeys="expandedKeys"
             >
-              <template #title="{ key: treeKey, title, isLeaf }">
+              <template #title="{ key: treeKey, title,number, isLeaf }">
                 <ContextMenu
                   :title="title"
+                  :number="number"
                   :treeKey="treeKey"
                   :levels="levels"
                   :isLeaf="isLeaf"
@@ -79,51 +70,69 @@
                   :showBatchLevel="showBatchLevel"
                   :batchTreeKey="batchTreeKey"
                   @clickCheckbox="clickCheckbox"
+                  @updateTreeData="updateTreeData"
                 />
               </template>
             </a-tree>
           </div>
         </template>
         <template #two>
-          <div id="relation-views-right" class="relation-views-right" :style="{ height: `${windowHeight - 115}px` }">
-            <a-tabs :activeKey="String(currentTypeId[0])" type="card" @change="changeCIType" class="ops-tab">
-              <a-tab-pane v-for="item in showTypes" :key="`${item.id}`" :tab="item.alias || item.name"> </a-tab-pane>
+          <div id="relation-views-right" class="relation-views-right" :style="{ height: `${windowHeight - 64}px` }">
+            <a-tabs :activeKey="currentTypeId[0]" class="ops-tab" @change="changeCIType" size="small">
+              <a-tab-pane v-for="item in showTypes" :key="item.id" :tab="item.alias || item.name"> </a-tab-pane>
+              <a-space slot="tabBarExtraContent">
+                <a-button
+                  v-if="isLeaf"
+                  type="primary"
+                  class="ops-button-ghost"
+                  ghost
+                  @click="$refs.create.handleOpen(true, 'create')"
+                ><ops-icon type="veops-increase" />{{ $t('create') }}</a-button
+                >
+                <a-button icon="user-add" type="primary" ghost @click="handlePerm" class="ops-button-ghost">{{
+                  $t('grant')
+                }}</a-button>
+                <EditAttrsPopover
+                  :typeId="Number(currentTypeId[0])"
+                  class="operation-icon"
+                  @refresh="refreshAfterEditAttrs"
+                >
+                  <a-button
+                    type="primary"
+                    ghost
+                    class="ops-button-ghost"
+                  ><ops-icon type="veops-configuration_table" />{{ $t('cmdb.configTable') }}</a-button
+                  >
+                </EditAttrsPopover>
+              </a-space>
             </a-tabs>
             <SearchForm
               ref="search"
               @refresh="refreshTable"
               :preferenceAttrList="preferenceAttrList"
-              :isShowExpression="true"
+              :isShowExpression="!(isLeaf && isShowBatchIcon)"
               :typeId="Number(currentTypeId[0])"
               @copyExpression="copyExpression"
               type="relationView"
-              :style="{ padding: '0 12px', marginTop: '16px' }"
-            />
-            <div class="relation-views-right-bar">
-              <a-space>
-                <a-button v-if="isLeaf" type="primary" size="small" @click="$refs.create.handleOpen(true, 'create')">{{
-                  $t('create')
-                }}</a-button>
-
+            >
+              <PreferenceSearch
+                v-if="!(isLeaf && isShowBatchIcon)"
+                ref="preferenceSearch"
+                @getQAndSort="getQAndSort"
+                @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
+              />
+              <a-space slot="extraContent">
                 <div class="ops-list-batch-action" v-if="isLeaf && isShowBatchIcon">
                   <template v-if="selectedRowKeys.length">
                     <span @click="$refs.create.handleOpen(true, 'update')">{{ $t('update') }}</span>
-                    <a-divider type="vertical" />
                     <span @click="openBatchDownload">{{ $t('download') }}</span>
-                    <a-divider type="vertical" />
                     <span @click="batchDelete">{{ $t('cmdb.ciType.deleteInstance') }}</span>
-                    <a-divider type="vertical" />
                     <span @click="batchDeleteCIRelation">{{ $t('cmdb.history.deleteRelation') }}</span>
                     <span>{{ $t('cmdb.ci.selectRows', { rows: selectedRowKeys.length }) }}</span>
                   </template>
                 </div>
-                <PreferenceSearch
-                  ref="preferenceSearch"
-                  @getQAndSort="getQAndSort"
-                  @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
-                />
               </a-space>
-            </div>
+            </SearchForm>
             <vxe-table
               :id="`cmdb-relation-${viewId}-${currentTypeId}`"
               border
@@ -283,14 +292,9 @@
                   </template>
                 </template>
               </vxe-table-column>
-              <vxe-column align="left" field="operate" fixed="right" width="120">
+              <vxe-column align="left" field="operate" fixed="right" width="80">
                 <template #header>
                   <span>{{ $t('operation') }}</span>
-                  <EditAttrsPopover
-                    :typeId="Number(currentTypeId[0])"
-                    class="operation-icon"
-                    @refresh="refreshAfterEditAttrs"
-                  />
                 </template>
                 <template #default="{ row }">
                   <a-space>
@@ -482,6 +486,9 @@ export default {
       contextMenuKey: null,
       showBatchLevel: null,
       batchTreeKey: [],
+
+      statisticsObj: {},
+      viewOption: {},
     }
   },
 
@@ -490,7 +497,7 @@ export default {
       return this.$store.state.windowHeight
     },
     tableHeight() {
-      return this.windowHeight - 295
+      return this.windowHeight - 244
     },
     selectedKeys() {
       if (this.treeKeys.length <= 1) {
@@ -519,6 +526,15 @@ export default {
         .map((item) => item.split('%')[0])
         .join(',')
     },
+    is_show_leaf_node() {
+      return this.viewOption?.is_show_leaf_node ?? true
+    },
+    is_show_tree_node() {
+      return this.viewOption?.is_show_tree_node ?? false
+    },
+    leaf_tree_sort() {
+      return this.viewOption?.sort ?? 1
+    },
   },
   provide() {
     return {
@@ -638,6 +654,7 @@ export default {
       if (q && q[0] === ',') {
         q = q.slice(1)
       }
+
       if (this.treeKeys.length === 0) {
         // await this.judgeCITypes(q)
         if (!refreshType) {
@@ -684,8 +701,10 @@ export default {
             .map((item) => item.split('%')[0])
             .join(',')}`
         }
-        const typeId = parseInt(this.treeKeys[this.treeKeys.length - 1].split('%')[1])
 
+        await this.judgeCITypes()
+
+        const typeId = parseInt(this.treeKeys[this.treeKeys.length - 1].split('%')[1])
         let level = []
         if (!this.leaf.includes(typeId)) {
           let startIdx = 0
@@ -705,8 +724,8 @@ export default {
         } else {
           level = [1]
         }
-        q += `&level=${level.join(',')}`
-        await this.judgeCITypes(q)
+
+        q += `&level=${this.topo_flatten.includes(this.currentTypeId[0]) ? 1 : level.join(',')}`
         if (!refreshType) {
           this.loadNoRoot(this.treeKeys[this.treeKeys.length - 1], level)
         }
@@ -793,69 +812,106 @@ export default {
       this.selectedRowKeys = []
       this.currentTypeId = [typeId]
       this.loadColumns()
-      this.$nextTick(() => {
-        this.refreshTable()
-      })
+      // this.$nextTick(() => {
+      //   this.refreshTable()
+      // })
     },
 
-    async judgeCITypes(q) {
-      const showTypeIds = []
-      let _showTypes = []
+    async judgeCITypes() {
       let _showTypeIds = []
-
+      let _showTypes = []
       if (this.treeKeys.length) {
-        const typeId = parseInt(this.treeKeys[this.treeKeys.length - 1].split('%')[1])
-
-        _showTypes = this.node2ShowTypes[typeId + '']
-        _showTypes.forEach((item) => {
-          _showTypeIds.push(item.id)
-        })
-      } else {
-        _showTypeIds = JSON.parse(JSON.stringify(this.origShowTypeIds))
-        _showTypes = JSON.parse(JSON.stringify(this.origShowTypes))
-      }
-      const promises = _showTypeIds.map((typeId) => {
-        let _q = (`q=_type:${typeId},` + q).replace(/count=\d*/, 'count=1')
-        if (Object.values(this.level2constraint).includes('2')) {
-          _q = _q + `&has_m2m=1`
+        if (this.is_show_leaf_node) {
+          const typeId = parseInt(this.treeKeys[this.treeKeys.length - 1].split('%')[1])
+          _showTypeIds = _.cloneDeep(this.origShowTypeIds)
+          _showTypes = _.cloneDeep(this.node2ShowTypes[typeId])
         }
-        if (this.root_parent_path) {
-          _q = _q + `&root_parent_path=${this.root_parent_path}`
-        }
-        // if (this.treeKeys.length === 0) {
-        //   return searchCI2(_q).then((res) => {
-        //     if (res.numfound !== 0) {
-        //       showTypeIds.push(typeId)
-        //     }
-        //   })
-        // } else {
-        _q = _q + `&descendant_ids=${this.descendant_ids}`
-        return searchCIRelation(_q).then((res) => {
-          if (res.numfound !== 0) {
-            showTypeIds.push(typeId)
-          }
-        })
-        // }
-      })
-      await Promise.all(promises).then(async () => {
-        if (showTypeIds.length && showTypeIds.sort().join(',') !== this.showTypeIds.sort().join(',')) {
-          const showTypes = []
-          _showTypes.forEach((item) => {
-            if (showTypeIds.includes(item.id)) {
-              showTypes.push(item)
+        if (this.is_show_tree_node) {
+          const treeKeyTypeId = Number(this.treeKeys.slice(-1)[0].split('%')[1])
+          const _idx = this.topo_flatten.findIndex((item) => item === treeKeyTypeId)
+          if (_idx > -1 && _idx < this.topo_flatten.length - 1) {
+            const _showTreeTypeId = this.topo_flatten[_idx + 1]
+            const _showTreeTypes = this.relationViews.id2type[_showTreeTypeId]
+            if (this.leaf_tree_sort === 1) {
+              _showTypeIds.push(_showTreeTypeId)
+              _showTypes.push(_showTreeTypes)
+            } else {
+              _showTypeIds.unshift(_showTreeTypeId)
+              _showTypes.unshift(_showTreeTypes)
             }
-          })
-          this.showTypes = showTypes
-          this.showTypeIds = showTypeIds
-          if (
-            !this.currentTypeId.length ||
-            (this.currentTypeId.length && !this.showTypeIds.includes(this.currentTypeId[0]))
-          ) {
-            this.currentTypeId = [this.showTypeIds[0]]
-            await this.loadColumns()
           }
         }
-      })
+        this.showTypeIds = _showTypeIds
+        this.showTypes = _showTypes
+      } else {
+        this.showTypeIds = _.cloneDeep(this.origShowTypeIds)
+        this.showTypes = JSON.parse(JSON.stringify(this.origShowTypes))
+      }
+      if (
+        !this.currentTypeId.length ||
+        (this.currentTypeId.length && !this.showTypeIds.includes(this.currentTypeId[0]))
+      ) {
+        this.currentTypeId = [this.showTypeIds[0]]
+        await this.loadColumns()
+      }
+      // const showTypeIds = []
+      // let _showTypes = []
+      // let _showTypeIds = []
+
+      // if (this.treeKeys.length) {
+      //   const typeId = parseInt(this.treeKeys[this.treeKeys.length - 1].split('%')[1])
+
+      //   _showTypes = this.node2ShowTypes[typeId + '']
+      //   _showTypes.forEach((item) => {
+      //     _showTypeIds.push(item.id)
+      //   })
+      // } else {
+      //   _showTypeIds = JSON.parse(JSON.stringify(this.origShowTypeIds))
+      //   _showTypes = JSON.parse(JSON.stringify(this.origShowTypes))
+      // }
+      // const promises = _showTypeIds.map((typeId) => {
+      //   let _q = (`q=_type:${typeId},` + q).replace(/count=\d*/, 'count=1')
+      //   if (Object.values(this.level2constraint).includes('2')) {
+      //     _q = _q + `&has_m2m=1`
+      //   }
+      //   if (this.root_parent_path) {
+      //     _q = _q + `&root_parent_path=${this.root_parent_path}`
+      //   }
+      //   // if (this.treeKeys.length === 0) {
+      //   //   return searchCI2(_q).then((res) => {
+      //   //     if (res.numfound !== 0) {
+      //   //       showTypeIds.push(typeId)
+      //   //     }
+      //   //   })
+      //   // } else {
+      //   _q = _q + `&descendant_ids=${this.descendant_ids}`
+      //   return searchCIRelation(_q).then((res) => {
+      //     if (res.numfound !== 0) {
+      //       showTypeIds.push(typeId)
+      //     }
+      //   })
+      //   // }
+      // })
+      // await Promise.all(promises).then(async () => {
+      //   if (showTypeIds.length && showTypeIds.sort().join(',') !== this.showTypeIds.sort().join(',')) {
+      //     const showTypes = []
+      //     _showTypes.forEach((item) => {
+      //       if (showTypeIds.includes(item.id)) {
+      //         showTypes.push(item)
+      //       }
+      //     })
+      //     console.log(showTypes)
+      //     this.showTypes = showTypes
+      //     this.showTypeIds = showTypeIds
+      //     if (
+      //       !this.currentTypeId.length ||
+      //       (this.currentTypeId.length && !this.showTypeIds.includes(this.currentTypeId[0]))
+      //     ) {
+      //       this.currentTypeId = [this.showTypeIds[0]]
+      //       await this.loadColumns()
+      //     }
+      //   }
+      // })
     },
 
     async loadRoot() {
@@ -980,7 +1036,8 @@ export default {
       const treeData = []
       facet.forEach((item) => {
         treeData.push({
-          title: `${item[0]} (${item[1]})`,
+          title: item[0],
+          number: item[1],
           key: this.treeKeys.join('@^@') + '@^@' + item[2] + '%' + item[3] + '%' + `{"${item[4]}":"${item[0]}"}`,
           isLeaf: this.leaf.includes(item[3]),
           id: item[2],
@@ -1041,16 +1098,19 @@ export default {
           this.leaf = this.relationViews.views[this.viewName].leaf
           this.currentView = `${this.viewId}`
           this.typeId = this.levels[0][0]
+          this.viewOption = this.relationViews.views[this.viewName].option ?? {}
           this.refreshTable()
         }
       })
     },
 
     async loadColumns() {
-      this.getAttributeList()
-      const res = await getSubscribeAttributes(this.currentTypeId[0])
-      this.preferenceAttrList = res.attributes
-      this.calcColumns()
+      if (this.currentTypeId[0]) {
+        this.getAttributeList()
+        const res = await getSubscribeAttributes(this.currentTypeId[0])
+        this.preferenceAttrList = res.attributes
+        this.calcColumns()
+      }
     },
 
     calcColumns() {
@@ -1183,7 +1243,6 @@ export default {
         const dragId = _splitDragKey[_splitDragKey.length - 1].split('%')[0]
         // const targetObj = JSON.parse(_splitTargetKey[_splitTargetKey.length - 1].split('%')[2])
         const targetId = _splitTargetKey[_splitTargetKey.length - 1].split('%')[0]
-        console.log(_splitDragKey)
         // TODO 拖拽这里不造咋弄 等等再说吧
         batchUpdateCIRelationChildren([dragId], [targetId]).then((res) => {
           this.reload()
@@ -1354,6 +1413,9 @@ export default {
               ...data,
             }
             this.initialInstanceList = _initialInstanceList
+            this.$nextTick(() => {
+              this.refreshTable()
+            })
           })
           .catch((err) => {
             console.log(err)
@@ -1579,7 +1641,6 @@ export default {
         .split('@^@')
         .filter((item) => !!item)
         .reverse()
-      console.log(needGrantNodes)
 
       const needGrantRids = [...department, ...user]
       const floor = Math.ceil(needGrantRids.length / 6)
@@ -1687,6 +1748,29 @@ export default {
       this.showBatchLevel = null
       this.batchTreeKey = []
     },
+    findNode(node, target) {
+      for (let i = 0; i < node.length; i++) {
+        if (node[i].id === target) {
+          return node[i]
+        }
+        if (node[i].children && node[i].children.length) {
+          for (let i = 0; i < node[i].children.length; i++) {
+            const found = this.findNode(node[i].children, target)
+            if (found) {
+              return found
+            }
+          }
+        }
+      }
+      return null
+    },
+    updateTreeData(ciId, value) {
+      const _find = this.findNode(this.treeData, ciId)
+      if (_find) {
+        this.$set(_find, 'title', value)
+      }
+      this.refreshTable()
+    },
   },
 }
 </script>
@@ -1701,15 +1785,24 @@ export default {
     width: 100%;
     float: left;
     position: relative;
-    // transition: all 0.3s;
-    background-color: #fff;
     overflow: hidden;
-    padding: 12px;
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
+    padding: 0;
     &:hover {
       overflow: auto;
     }
+    .relation-views-left-header {
+      border-left: 4px solid @primary-color;
+      height: 32px;
+      line-height: 32px;
+      padding-left: 12px;
+      margin-bottom: 12px;
+      color: @text-color_1;
+      font-weight: bold;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: default;
+    }
     .ant-tree li {
       padding: 2px 0;
     }
@@ -1732,15 +1825,8 @@ export default {
     width: 100%;
     overflow: auto;
     background-color: #fff;
-    .relation-views-right-bar {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-      margin-bottom: 5px;
-      height: 32px;
-      padding: 0 12px;
-    }
+    padding: 20px;
+    border-radius: @border-radius-box;
   }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/relation_views/modules/ContextMenu.vue b/cmdb-ui/src/modules/cmdb/views/relation_views/modules/ContextMenu.vue
index c22ec7b..5d8f36e 100644
--- a/cmdb-ui/src/modules/cmdb/views/relation_views/modules/ContextMenu.vue
+++ b/cmdb-ui/src/modules/cmdb/views/relation_views/modules/ContextMenu.vue
@@ -6,7 +6,10 @@
     }"
     @click="clickNode"
   >
-    <span>
+    <span class="relation-views-node-switch">
+      <a-icon v-if="childLength && !isLeaf" :type="switchIcon"></a-icon>
+    </span>
+    <span class="relation-views-node-content">
       <a-checkbox @click.stop="clickCheckbox" class="relation-views-node-checkbox" v-if="showCheckbox" />
       <template v-if="icon">
         <img
@@ -24,61 +27,82 @@
         />
         <span class="relation-views-node-icon" v-else>{{ icon ? icon[0].toUpperCase() : 'i' }}</span>
       </template>
-      <span class="relation-views-node-title">{{ this.title }}</span>
-    </span>
-    <a-dropdown>
-      <a-menu slot="overlay" @click="({ key: menuKey }) => this.onContextMenuClick(this.treeKey, menuKey)">
-        <template v-if="showBatchLevel === null">
-          <a-menu-item
-            v-for="item in menuList"
-            :key="item.id"
-          ><a-icon type="plus-circle" />{{ $t('new') }} {{ item.alias }}</a-menu-item
-          >
-          <a-menu-item
-            v-if="showDelete"
-            key="delete"
-          ><ops-icon type="icon-xianxing-delete" />{{ $t('cmdb.serviceTree.deleteNode') }}</a-menu-item
-          >
-          <a-menu-divider />
-          <a-menu-item key="grant"><a-icon type="user-add" />{{ $t('grant') }}</a-menu-item>
-          <a-menu-item key="revoke"><a-icon type="user-delete" />{{ $t('revoke') }}</a-menu-item>
-          <a-menu-item key="view"><a-icon type="eye" />{{ $t('cmdb.serviceTree.view') }}</a-menu-item>
-          <a-menu-divider />
-          <a-menu-item
-            key="batch"
-          ><ops-icon type="icon-xianxing-copy" />{{ $t('cmdb.serviceTree.batch') }}</a-menu-item
-          >
-        </template>
-        <template v-else>
-          <a-menu-item
-            :disabled="!batchTreeKey || !batchTreeKey.length"
-            key="batchGrant"
-          ><a-icon type="user-add" />{{ $t('grant') }}</a-menu-item
-          >
-          <a-menu-item
-            :disabled="!batchTreeKey || !batchTreeKey.length"
-            key="batchRevoke"
-          ><a-icon type="user-delete" />{{ $t('revoke') }}</a-menu-item
-          >
-          <a-menu-divider />
-          <template v-if="showBatchLevel > 0">
+      <span class="relation-views-node-title" v-if="!isEditNodeName" :title="title">{{ title }}</span>
+      <a-input
+        ref="input"
+        @blur="changeNodeName"
+        @pressEnter="
+          () => {
+            $refs.input.blur()
+          }
+        "
+        size="small"
+        v-else
+        v-model="editNodeName"
+        :style="{ marginLeft: '5px' }"
+      />
+      <span class="relation-views-node-number">{{ number }}</span>
+      <a-dropdown overlayClassName="relation-views-node-dropdown" :overlayStyle="{ width: '200px' }">
+        <a-menu slot="overlay" @click="({ key: menuKey }) => onContextMenuClick(this.treeKey, menuKey)">
+          <template v-if="showBatchLevel === null">
+            <a-divider orientation="left">{{ $t('cmdb.relation') }}</a-divider>
+            <a-menu-item
+              v-for="item in menuList"
+              :key="item.id"
+            ><a-icon type="plus-circle" />{{ $t('add') }} {{ item.alias }}</a-menu-item
+            >
+            <a-menu-item
+              v-if="showDelete"
+              key="delete"
+            ><ops-icon type="icon-xianxing-delete" />{{
+              $t('cmdb.serviceTree.deleteNode', { name: title })
+            }}</a-menu-item
+            >
+            <a-divider orientation="left">{{ $t('cmdb.components.perm') }}</a-divider>
+            <a-menu-item key="grant"><a-icon type="user-add" />{{ $t('grant') }}</a-menu-item>
+            <a-menu-item key="revoke"><a-icon type="user-delete" />{{ $t('revoke') }}</a-menu-item>
+            <a-menu-item key="view"><a-icon type="eye" />{{ $t('cmdb.serviceTree.view') }}</a-menu-item>
+            <a-menu-divider />
+            <a-menu-item
+              key="editNodeName"
+            ><ops-icon type="icon-xianxing-edit" />{{ $t('cmdb.serviceTree.editNodeName') }}</a-menu-item
+            >
+            <a-menu-item
+              key="batch"
+            ><ops-icon type="veops-copy" />{{ $t('cmdb.serviceTree.batch') }}</a-menu-item
+            >
+          </template>
+          <template v-else>
             <a-menu-item
               :disabled="!batchTreeKey || !batchTreeKey.length"
-              key="batchDelete"
-            ><ops-icon type="icon-xianxing-delete" />{{ $t('delete') }}</a-menu-item
+              key="batchGrant"
+            ><a-icon type="user-add" />{{ $t('grant') }}</a-menu-item
+            >
+            <a-menu-item
+              :disabled="!batchTreeKey || !batchTreeKey.length"
+              key="batchRevoke"
+            ><a-icon type="user-delete" />{{ $t('revoke') }}</a-menu-item
             >
             <a-menu-divider />
+            <template v-if="showBatchLevel > 0">
+              <a-menu-item
+                :disabled="!batchTreeKey || !batchTreeKey.length"
+                key="batchDelete"
+              ><ops-icon type="icon-xianxing-delete" />{{ $t('delete') }}</a-menu-item
+              >
+              <a-menu-divider />
+            </template>
+            <a-menu-item key="batchCancel"><a-icon type="close-circle" />{{ $t('cancel') }}</a-menu-item>
           </template>
-          <a-menu-item key="batchCancel"><a-icon type="close-circle" />{{ $t('cancel') }}</a-menu-item>
-        </template>
-      </a-menu>
-      <a-icon class="relation-views-node-operation" type="ellipsis" />
-    </a-dropdown>
-    <a-icon :style="{ fontSize: '10px' }" v-if="childLength && !isLeaf" :type="switchIcon"></a-icon>
+        </a-menu>
+        <a-icon class="relation-views-node-operation" type="ellipsis" />
+      </a-dropdown>
+    </span>
   </div>
 </template>
 
 <script>
+import { updateCI } from '../../../api/ci.js'
 export default {
   name: 'ContextMenu',
   props: {
@@ -86,6 +110,10 @@ export default {
       type: String,
       default: '',
     },
+    number: {
+      type: Number,
+      default: 0,
+    },
     treeKey: {
       type: String,
       default: '',
@@ -121,13 +149,14 @@ export default {
   },
   data() {
     return {
-      switchIcon: 'down',
+      switchIcon: 'caret-right',
+      isEditNodeName: false,
+      editNodeName: '',
     }
   },
   computed: {
     childLength() {
-      const reg = /(?<=\()\S+(?=\))/g
-      return Number(this.title.match(reg)[0])
+      return this.number
     },
     splitTreeKey() {
       return this.treeKey.split('@^@')
@@ -175,26 +204,63 @@ export default {
   },
   methods: {
     onContextMenuClick(treeKey, menuKey) {
+      if (menuKey === 'editNodeName') {
+        this.isEditNodeName = true
+        this.editNodeName = this.title
+        this.$nextTick(() => {
+          this.$refs.input.focus()
+        })
+        return
+      }
       this.$emit('onContextMenuClick', treeKey, menuKey)
     },
     clickNode() {
       this.$emit('onNodeClick', this.treeKey)
-      this.switchIcon = this.switchIcon === 'down' ? 'up' : 'down'
+      this.switchIcon = this.switchIcon === 'caret-right' ? 'caret-down' : 'caret-right'
     },
     clickCheckbox() {
       this.$emit('clickCheckbox', this.treeKey)
     },
+    changeNodeName(e) {
+      const value = e.target.value
+      if (value !== this.title) {
+        const ci = this.treeKey
+          .split('@^@')
+          .slice(-1)[0]
+          .split('%')
+        const unique = Object.keys(JSON.parse(ci[2]))[0]
+        const ciId = Number(ci[0])
+
+        updateCI(ciId, { [unique]: value }).then((res) => {
+          this.$message.success(this.$t('updateSuccess'))
+          this.$emit('updateTreeData', ciId, value)
+        })
+      }
+      this.isEditNodeName = false
+      this.editNodeName = ''
+    },
   },
 }
 </script>
 
 <style lang="less" scoped>
+@import '~@/style/static.less';
+
 .relation-views-node {
   width: 100%;
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
-  > span {
+  .relation-views-node-switch {
+    display: inline-block;
+    width: 15px;
+    color: @text-color_5;
+    i {
+      opacity: 0;
+      font-size: 10px;
+    }
+  }
+  .relation-views-node-content {
     display: flex;
     overflow: hidden;
     align-items: center;
@@ -215,16 +281,21 @@ export default {
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
-      width: calc(100% - 16px);
+      flex: 1;
+      color: @text-color_1;
+    }
+    .relation-views-node-number {
+      color: @text-color_4;
+      font-size: 12px;
+      margin: 0 5px;
+    }
+    .relation-views-node-operation {
+      opacity: 0;
+      width: 15px;
     }
   }
-  .relation-views-node-operation {
-    display: none;
-    margin-right: 5px;
-  }
 }
-.relation-views-node-checkbox,
-.relation-views-node-moveright {
+.relation-views-node-checkbox {
   > span {
     .relation-views-node-checkbox {
       margin-right: 10px;
@@ -234,14 +305,16 @@ export default {
     }
   }
 }
+
+.relation-views-left .ant-tree:hover {
+  .relation-views-node .relation-views-node-switch i {
+    opacity: 1;
+  }
+}
 </style>
 
 <style lang="less">
-.relation-views-left .ant-tree-node-content-wrapper:hover {
-  .relation-views-node-operation {
-    display: inline-block;
-  }
-}
+@import '~@/style/static.less';
 .relation-views-left {
   ul:has(.relation-views-node-checkbox) > li > ul {
     margin-left: 26px;
@@ -249,5 +322,28 @@ export default {
   ul:has(.relation-views-node-checkbox) {
     margin-left: 0 !important;
   }
+  .ant-tree-node-content-wrapper:hover {
+    .relation-views-node-operation {
+      opacity: 1;
+    }
+  }
+  .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected,
+  .ant-tree li .ant-tree-node-content-wrapper:hover {
+    background-color: @primary-color_3;
+  }
+}
+
+.relation-views-node-dropdown {
+  .ant-divider {
+    margin: 0;
+    .ant-divider-inner-text {
+      font-size: 12px;
+      color: @text-color_3;
+    }
+  }
+  .ant-dropdown-menu-item {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/resource_search/index.vue b/cmdb-ui/src/modules/cmdb/views/resource_search/index.vue
index 0468e84..b50e22d 100644
--- a/cmdb-ui/src/modules/cmdb/views/resource_search/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/resource_search/index.vue
@@ -1,196 +1,194 @@
 <template>
-  <div id="resource_search" :style="{ height: fromCronJob ? `${windowHeight - 48}px` : `${windowHeight - 90}px` }">
+  <div
+    class="resource-search"
+    id="resource_search"
+    :style="{ height: fromCronJob ? `${windowHeight - 48}px` : `${windowHeight - 64}px` }"
+  >
     <div class="cmdb-views-header">
       <span>
         <span class="cmdb-views-header-title">{{ $t('cmdb.menu.ciSearch') }}</span>
       </span>
-    </div>
-    <div :style="{ backgroundColor: '#fff', padding: '12px', borderRadius: '15px' }">
-      <SearchForm
-        ref="search"
-        type="resourceSearch"
-        @refresh="handleSearch"
-        :preferenceAttrList="allAttributesList"
-        @updateAllAttributesList="updateAllAttributesList"
-        @copyExpression="copyExpression"
-      />
-      <div
+      <a-button
         v-if="!fromCronJob"
-        :style="{
-          display: 'flex',
-          justifyContent: 'space-between',
-          height: '32px',
-          marginBottom: '5px',
-          alignItems: 'center',
-        }"
-      >
-        <a-button icon="download" type="primary" ghost size="small" @click="handleExport">{{
-          $t('download')
-        }}</a-button>
-        <PreferenceSearch
-          ref="preferenceSearch"
-          @getQAndSort="getQAndSort"
-          @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
-        />
-      </div>
-      <vxe-table
-        :id="`cmdb-resource`"
-        border
-        keep-source
-        show-overflow
-        resizable
-        ref="xTable"
-        size="small"
-        row-id="_id"
-        :loading="loading"
-        :height="fromCronJob ? windowHeight - 180 : windowHeight - 250"
-        show-header-overflow
-        highlight-hover-row
-        :data="instanceList"
-        :sort-config="{ remote: true, trigger: 'cell' }"
-        @sort-change="handleSortCol"
-        :row-key="true"
-        :column-key="true"
-        :cell-style="getCellStyle"
-        :scroll-y="{ enabled: true, gt: 20 }"
-        :scroll-x="{ enabled: true, gt: 0 }"
-        :export-config="{
-          isColgroup: true,
-          type: 'xlsx',
-          types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
-          mode: 'current',
-          modes: ['current'],
-          isFooter: false,
-          isHeader: true,
-          isColgroup: true,
-        }"
-        class="ops-unstripe-table"
-        :style="{ margin: '0 -12px' }"
-        :custom-config="{ storage: true }"
+        icon="download"
+        type="primary"
+        class="ops-button-ghost"
+        ghost
+        @click="handleExport"
+      >{{ $t('download') }}</a-button
       >
+    </div>
+    <SearchForm
+      ref="search"
+      type="resourceSearch"
+      @refresh="handleSearch"
+      :preferenceAttrList="allAttributesList"
+      @updateAllAttributesList="updateAllAttributesList"
+      @copyExpression="copyExpression"
+    >
+      <PreferenceSearch
+        v-if="!fromCronJob"
+        ref="preferenceSearch"
+        @getQAndSort="getQAndSort"
+        @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
+      />
+    </SearchForm>
+    <vxe-table
+      :id="`cmdb-resource`"
+      border
+      keep-source
+      show-overflow
+      resizable
+      ref="xTable"
+      size="small"
+      row-id="_id"
+      :loading="loading"
+      :height="fromCronJob ? windowHeight - 180 : windowHeight - 240"
+      show-header-overflow
+      highlight-hover-row
+      :data="instanceList"
+      :sort-config="{ remote: true, trigger: 'cell' }"
+      @sort-change="handleSortCol"
+      :row-key="true"
+      :column-key="true"
+      :cell-style="getCellStyle"
+      :scroll-y="{ enabled: true, gt: 20 }"
+      :scroll-x="{ enabled: true, gt: 0 }"
+      :export-config="{
+        isColgroup: true,
+        type: 'xlsx',
+        types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
+        mode: 'current',
+        modes: ['current'],
+        isFooter: false,
+        isHeader: true,
+        isColgroup: true,
+      }"
+      class="ops-unstripe-table"
+      :custom-config="{ storage: true }"
+    >
+      <vxe-column
+        v-if="instanceList.length"
+        :title="$t('cmdb.ciType.ciType')"
+        field="ci_type_alias"
+        :width="100"
+        fixed="left"
+      ></vxe-column>
+      <vxe-colgroup v-for="colGroup in columnsGroup" :key="colGroup.value" :title="colGroup.label">
+        <template #header>
+          <span :style="{ display: 'inline-flex', alignItems: 'center' }">
+            {{ colGroup.label }}
+            <EditAttrsPopover
+              :style="{ borderLeft: 'none', width: '30px', height: '38px', cursor: 'pointer' }"
+              v-if="colGroup.isCiType"
+              :typeId="Number(colGroup.id.split('-')[1])"
+              @refresh="loadInstance"
+            />
+          </span>
+        </template>
         <vxe-column
-          v-if="instanceList.length"
-          :title="$t('cmdb.ciType.ciType')"
-          field="ci_type_alias"
-          :width="100"
-          fixed="left"
-        ></vxe-column>
-        <vxe-colgroup v-for="colGroup in columnsGroup" :key="colGroup.value" :title="colGroup.label">
-          <template #header>
-            <span :style="{ display: 'inline-flex', alignItems: 'center' }">
-              {{ colGroup.label }}
-              <EditAttrsPopover
-                :style="{ borderLeft: 'none', width: '30px', height: '38px', cursor: 'pointer' }"
-                v-if="colGroup.isCiType"
-                :typeId="Number(colGroup.id.split('-')[1])"
-                @refresh="loadInstance"
-              />
-            </span>
-          </template>
-          <vxe-column
-            v-for="(col, index) in colGroup.children"
-            :key="`${col.field}_${index}`"
-            :title="col.title"
-            :field="col.field"
-            :width="col.width"
-            :minWidth="100"
-            :cell-type="col.value_type === '2' ? 'string' : 'auto'"
-          >
-            <template v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice" #default="{row}">
-              <span v-if="col.value_type === '6' && row[col.field]">{{ JSON.stringify(row[col.field]) }}</span>
-              <a
-                v-else-if="col.is_link && row[col.field]"
-                :href="
-                  row[col.field].startsWith('http') || row[col.field].startsWith('https')
-                    ? `${row[col.field]}`
-                    : `http://${row[col.field]}`
-                "
-                target="_blank"
-              >{{ row[col.field] }}</a
-              >
-              <PasswordField
-                v-else-if="col.is_password && row[col.field]"
-                :ci_id="row._id"
-                :attr_id="col.attr_id"
-              ></PasswordField>
-              <template v-else-if="col.is_choice">
-                <template v-if="col.is_list">
-                  <span
-                    v-for="value in row[col.field]"
-                    :key="value"
-                    :style="{
-                      borderRadius: '4px',
-                      padding: '1px 5px',
-                      margin: '2px',
-                      ...getChoiceValueStyle(col, value),
-                    }"
-                  ><ops-icon
-                    :style="{ color: getChoiceValueIcon(col, value).color }"
-                    :type="getChoiceValueIcon(col, value).name"
-                  />{{ value }}</span
-                  >
-                </template>
+          v-for="(col, index) in colGroup.children"
+          :key="`${col.field}_${index}`"
+          :title="col.title"
+          :field="col.field"
+          :width="col.width"
+          :minWidth="100"
+          :cell-type="col.value_type === '2' ? 'string' : 'auto'"
+        >
+          <template v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice" #default="{row}">
+            <span v-if="col.value_type === '6' && row[col.field]">{{ JSON.stringify(row[col.field]) }}</span>
+            <a
+              v-else-if="col.is_link && row[col.field]"
+              :href="
+                row[col.field].startsWith('http') || row[col.field].startsWith('https')
+                  ? `${row[col.field]}`
+                  : `http://${row[col.field]}`
+              "
+              target="_blank"
+            >{{ row[col.field] }}</a
+            >
+            <PasswordField
+              v-else-if="col.is_password && row[col.field]"
+              :ci_id="row._id"
+              :attr_id="col.attr_id"
+            ></PasswordField>
+            <template v-else-if="col.is_choice">
+              <template v-if="col.is_list">
                 <span
-                  v-else
+                  v-for="value in row[col.field]"
+                  :key="value"
                   :style="{
                     borderRadius: '4px',
                     padding: '1px 5px',
-                    margin: '2px 0',
-                    ...getChoiceValueStyle(col, row[col.field]),
+                    margin: '2px',
+                    ...getChoiceValueStyle(col, value),
                   }"
-                >
-                  <ops-icon
-                    :style="{ color: getChoiceValueIcon(col, row[col.field]).color }"
-                    :type="getChoiceValueIcon(col, row[col.field]).name"
-                  />
-                  {{ row[col.field] }}</span
+                ><ops-icon
+                  :style="{ color: getChoiceValueIcon(col, value).color }"
+                  :type="getChoiceValueIcon(col, value).name"
+                />{{ value }}</span
                 >
               </template>
+              <span
+                v-else
+                :style="{
+                  borderRadius: '4px',
+                  padding: '1px 5px',
+                  margin: '2px 0',
+                  ...getChoiceValueStyle(col, row[col.field]),
+                }"
+              >
+                <ops-icon
+                  :style="{ color: getChoiceValueIcon(col, row[col.field]).color }"
+                  :type="getChoiceValueIcon(col, row[col.field]).name"
+                />
+                {{ row[col.field] }}</span
+              >
             </template>
-          </vxe-column>
-        </vxe-colgroup>
-
-        <template #empty>
-          <div>
-            <img :style="{ width: '200px' }" :src="require('@/assets/data_empty.png')" />
-            <div>{{ $t('noData') }}</div>
-          </div>
-        </template>
-        <template #loading>
-          <div style="height: 200px; line-height: 200px">{{ $t('loading') }}</div>
-        </template>
-      </vxe-table>
-      <div :style="{ textAlign: 'right', marginTop: '4px' }">
-        <a-pagination
-          :showSizeChanger="true"
-          :current="currentPage"
-          size="small"
-          :total="totalNumber"
-          show-quick-jumper
-          :page-size="pageSize"
-          :page-size-options="pageSizeOptions"
-          @showSizeChange="onShowSizeChange"
-          :show-total="
-            (total, range) =>
-              $t('pagination.total', {
-                range0: range[0],
-                range1: range[1],
-                total,
-              })
-          "
-          @change="
-            (page) => {
-              currentPage = page
-              loadInstance(sortByTable)
-            }
-          "
-        >
-          <template slot="buildOptionText" slot-scope="props">
-            <span v-if="props.value !== '100000'">{{ props.value }}{{ $t('itemsPerPage') }}</span>
-            <span v-if="props.value === '100000'">{{ $t('all') }}</span>
           </template>
-        </a-pagination>
-      </div>
+        </vxe-column>
+      </vxe-colgroup>
+
+      <template #empty>
+        <div>
+          <img :style="{ width: '140px' }" :src="require('@/assets/data_empty.png')" />
+          <div>{{ $t('noData') }}</div>
+        </div>
+      </template>
+      <template #loading>
+        <div style="height: 200px; line-height: 200px">{{ $t('loading') }}</div>
+      </template>
+    </vxe-table>
+    <div :style="{ textAlign: 'right', marginTop: '4px' }">
+      <a-pagination
+        :showSizeChanger="true"
+        :current="currentPage"
+        size="small"
+        :total="totalNumber"
+        show-quick-jumper
+        :page-size="pageSize"
+        :page-size-options="pageSizeOptions"
+        @showSizeChange="onShowSizeChange"
+        :show-total="
+          (total, range) =>
+            $t('pagination.total', {
+              range0: range[0],
+              range1: range[1],
+              total,
+            })
+        "
+        @change="
+          (page) => {
+            currentPage = page
+            loadInstance(sortByTable)
+          }
+        "
+      >
+        <template slot="buildOptionText" slot-scope="props">
+          <span v-if="props.value !== '100000'">{{ props.value }}{{ $t('itemsPerPage') }}</span>
+          <span v-if="props.value === '100000'">{{ $t('all') }}</span>
+        </template>
+      </a-pagination>
     </div>
 
     <BatchDownload
@@ -227,6 +225,7 @@ export default {
   data() {
     return {
       ciTypes: [],
+      originAllAttributesList: [],
       allAttributesList: [], // 当前选择的模型的全部attributes  默认全部
       currentPage: 1,
       pageSizeOptions: ['50', '100', '200', '100000'],
@@ -260,18 +259,19 @@ export default {
         this.ciTypes = res.ci_types
       })
     },
-    getAllAttr() {
-      searchAttributes({ page_size: 9999 }).then((res) => {
+    async getAllAttr() {
+      await searchAttributes({ page_size: 9999 }).then((res) => {
         this.allAttributesList = res.attributes
+        this.originAllAttributesList = res.attributes
       })
     },
-    updateAllAttributesList(value) {
+    async updateAllAttributesList(value) {
       if (value && value.length) {
-        getCITypeAttributesByTypeIds({ type_ids: value.join(',') }).then((res) => {
+        await getCITypeAttributesByTypeIds({ type_ids: value.join(',') }).then((res) => {
           this.allAttributesList = res.attributes
         })
       } else {
-        this.getAllAttr()
+        this.allAttributesList = this.originAllAttributesList
       }
     },
     async loadInstance(sortByTable = undefined) {
@@ -373,7 +373,6 @@ export default {
               }
             }
           })
-
           const _commonColumnsGroup = Object.keys(commonObject).map((key) => {
             return {
               id: `parent-${key}`,
@@ -411,7 +410,7 @@ export default {
         return { ...item, id: item.field, label: item.title }
       })
     },
-    handleSearch() {
+    async handleSearch() {
       this.currentPage = 1
       this.loadInstance()
     },
@@ -534,3 +533,14 @@ export default {
   },
 }
 </script>
+
+<style lang="less" scoped>
+@import '~@/style/static.less';
+
+.resource-search {
+  margin-bottom: -24px;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: @border-radius-box;
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue b/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
index 9ffa723..4c27f2c 100644
--- a/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
@@ -4,34 +4,15 @@
       <a-alert :message="$t('cmdb.tree.tips1')" banner></a-alert>
     </div>
     <div class="tree-views" v-else>
-      <div class="cmdb-views-header">
-        <span>
-          <span class="cmdb-views-header-title">{{ currentCiTypeName }}</span>
-          <span
-            @click="
-              () => {
-                $refs.metadataDrawer.open(typeId)
-              }
-            "
-            class="cmdb-views-header-metadata"
-          ><a-icon type="info-circle" />
-            {{ $t('cmdb.components.attributeDesc') }}
-          </span>
-        </span>
-        <a-button size="small" icon="plus" type="primary" @click="$refs.create.handleOpen(true, 'create')">{{
-          $t('create')
-        }}</a-button>
-      </div>
       <SplitPane
         :min="200"
         :max="500"
         :paneLengthPixel.sync="paneLengthPixel"
         appName="cmdb-tree-views"
-        triggerColor="#F0F5FF"
         :triggerLength="18"
       >
         <template #one>
-          <div class="tree-views-left" :style="{ height: `${windowHeight - 115}px` }">
+          <div class="tree-views-left" :style="{ height: `${windowHeight - 64}px` }">
             <draggable
               v-model="subscribeTreeViewCiTypes"
               :animation="300"
@@ -89,12 +70,12 @@
                   :expandedKeys="expandedKeys"
                   v-if="Number(ciType.type_id) === Number(typeId)"
                 >
-                  <a-icon slot="switcherIcon" type="down" />
-                  <template #title="{ key: treeKey, title, isLeaf }">
+                  <template #title="{ key: treeKey, title, isLeaf, childLength}">
                     <TreeViewsNode
                       :title="title"
                       :treeKey="treeKey"
                       :levels="levels"
+                      :childLength="childLength"
                       :isLeaf="isLeaf"
                       @onNodeClick="onNodeClick"
                     />
@@ -105,16 +86,49 @@
           </div>
         </template>
         <template #two>
-          <div class="tree-views-right" id="tree-views-right" :style="{ height: `${windowHeight - 115}px` }">
+          <div class="tree-views-right" id="tree-views-right" :style="{ height: `${windowHeight - 64}px` }">
+            <div class="cmdb-views-header">
+              <span>
+                <span class="cmdb-views-header-title">{{ currentCiTypeName }}</span>
+                <span
+                  @click="
+                    () => {
+                      $refs.metadataDrawer.open(typeId)
+                    }
+                  "
+                  class="cmdb-views-header-metadata"
+                ><a-icon type="info-circle" />
+                  {{ $t('cmdb.ci.attributeDesc') }}
+                </span>
+              </span>
+              <a-space>
+                <a-button
+                  type="primary"
+                  class="ops-button-ghost"
+                  ghost
+                  @click="$refs.create.handleOpen(true, 'create')"
+                ><ops-icon type="veops-increase" />
+                  {{ $t('create') }}
+                </a-button>
+                <EditAttrsPopover :typeId="Number(typeId)" class="operation-icon" @refresh="refreshAfterEditAttrs">
+                  <a-button
+                    type="primary"
+                    ghost
+                    class="ops-button-ghost"
+                  ><ops-icon type="veops-configuration_table" />{{ $t('cmdb.configTable') }}</a-button
+                  >
+                </EditAttrsPopover>
+              </a-space>
+            </div>
             <SearchForm
               ref="search"
               @refresh="reloadData"
               :preferenceAttrList="currentAttrList"
               :typeId="Number(typeId)"
               @copyExpression="copyExpression"
-            />
-            <div class="tree-views-right-bar">
+            >
               <PreferenceSearch
+                v-show="!selectedRowKeys.length"
                 ref="preferenceSearch"
                 @getQAndSort="getQAndSort"
                 @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
@@ -129,7 +143,7 @@
                   <span>{{ $t('cmdb.ci.selectRows', { rows: selectedRowKeys.length }) }}</span>
                 </template>
               </div>
-            </div>
+            </SearchForm>
             <ops-table
               :id="`cmdb-tree-${typeId}`"
               border
@@ -150,7 +164,7 @@
               :cell-style="getCellStyle"
               :scroll-y="{ enabled: true, gt: 20 }"
               :scroll-x="{ enabled: true, gt: 0 }"
-              :height="`${windowHeight - 252}px`"
+              :height="`${windowHeight - 240}px`"
               @checkbox-change="onSelectChange"
               @checkbox-all="onSelectChange"
               @checkbox-range-end="onSelectRangeEnd"
@@ -159,7 +173,6 @@
               @edit-actived="handleEditActived"
               :edit-config="{ trigger: 'dblclick', mode: 'row', showIcon: false }"
               class="ops-unstripe-table"
-              :style="{ margin: '0 -12px' }"
               :custom-config="{ storage: true }"
             >
               <vxe-column align="center" type="checkbox" width="60" :fixed="isCheckboxFixed ? 'left' : ''"></vxe-column>
@@ -294,7 +307,6 @@
               <vxe-table-column align="left" field="operate" fixed="right" width="120">
                 <template #header>
                   <span>{{ $t('operation') }}</span>
-                  <EditAttrsPopover :typeId="Number(typeId)" class="operation-icon" @refresh="refreshAfterEditAttrs" />
                 </template>
                 <template #default="{ row }">
                   <a-space>
@@ -693,7 +705,8 @@ export default {
       console.log('facet', facet)
       const _treeData = Object.values(facet)[0].map((item) => {
         return {
-          title: `${item[0]} (${item[1]})`,
+          title: item[0],
+          childLength: item[1],
           key: this.treeKeys.join(this.keySplit) + this.keySplit + item[0],
           isLeaf: this.levels.length - 1 === this.treeKeys.length,
         }
@@ -1228,12 +1241,8 @@ export default {
   .tree-views-left {
     float: left;
     position: relative;
-    background-color: #fff;
     overflow: hidden;
     width: 100%;
-    padding: 12px;
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
     &:hover {
       overflow: auto;
     }
@@ -1249,7 +1258,7 @@ export default {
       border-radius: 2px;
       position: relative;
       &:hover {
-        background-color: #f0f5ff;
+        background-color: @primary-color_3;
         > .actions,
         > .move-icon {
           display: inherit;
@@ -1270,9 +1279,7 @@ export default {
         width: 20px;
         height: 20px;
         border-radius: 2px;
-        box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
         margin-right: 6px;
-        background-color: #fff;
       }
       .tree-views-left-header-name {
         flex: 1;
@@ -1281,6 +1288,7 @@ export default {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        color: @text-color_1;
       }
       .actions {
         display: none;
@@ -1298,7 +1306,7 @@ export default {
       }
     }
     .custom-header-selected {
-      background-color: #d3e3fd !important;
+      background-color: @primary-color_3 !important;
     }
     .ant-tree li {
       padding: 2px 0;
@@ -1317,23 +1325,18 @@ export default {
         padding: 0 6px;
       }
     }
+    .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+      background-color: @primary-color_3;
+    }
   }
   .tree-views-right {
     background-color: #fff;
     display: flex;
     flex-direction: column;
-    padding: 12px;
+    padding: 20px;
     overflow: auto;
     width: 100%;
-    border-radius: 15px;
-    .tree-views-right-bar {
-      display: inline-flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-      margin-bottom: 10px;
-      height: 36px;
-    }
+    border-radius: @border-radius-box;
   }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/tree_views/modules/treeViewsNode.vue b/cmdb-ui/src/modules/cmdb/views/tree_views/modules/treeViewsNode.vue
index 4749b86..bba2f36 100644
--- a/cmdb-ui/src/modules/cmdb/views/tree_views/modules/treeViewsNode.vue
+++ b/cmdb-ui/src/modules/cmdb/views/tree_views/modules/treeViewsNode.vue
@@ -1,15 +1,11 @@
 <template>
-  <div
-    :style="{
-      width: '100%',
-      display: 'inline-flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-    }"
-    @click="clickNode"
-  >
-    <span :style="{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">{{ this.title }}</span>
-    <a-icon :style="{ fontSize: '10px', color: '#0C3CFF' }" v-if="childLength && !isLeaf" :type="switchIcon"></a-icon>
+  <div @click="clickNode" class="tree-views-node">
+    <a-icon v-if="childLength && !isLeaf" :type="switchIcon"></a-icon>
+    <div v-else></div>
+    <div class="tree-views-node-content">
+      <span>{{ this.title }}</span>
+      <span>{{ childLength }}</span>
+    </div>
   </div>
 </template>
 
@@ -18,7 +14,7 @@ export default {
   name: 'TreeViewsNode',
   props: {
     title: {
-      type: String,
+      type: [String, Number],
       default: '',
     },
     treeKey: {
@@ -33,25 +29,57 @@ export default {
       type: Boolean,
       default: () => false,
     },
+    childLength: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
-      switchIcon: 'down',
+      switchIcon: 'caret-right',
     }
   },
-  computed: {
-    childLength() {
-      const reg = /(?<=\()\S+(?=\))/g
-      return Number(this.title.match(reg)[0])
-    },
-  },
+  computed: {},
   methods: {
     clickNode() {
       this.$emit('onNodeClick', this.treeKey)
-      this.switchIcon = this.switchIcon === 'down' ? 'up' : 'down'
+      this.switchIcon = this.switchIcon === 'caret-right' ? 'caret-down' : 'caret-right'
     },
   },
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+@import '~@/style/static.less';
+.tree-views-node {
+  width: 100%;
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  > div:first-child {
+    width: 10px;
+  }
+  i {
+    font-size: 10px;
+    color: @text-color_5;
+  }
+  .tree-views-node-content {
+    flex: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 5px;
+    width: calc(100% - 10px);
+    > span:first-child {
+      width: calc(100% - 30px);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: @text-color_1;
+    }
+    > span:last-child {
+      color: @text-color_4;
+    }
+  }
+}
+</style>
diff --git a/cmdb-ui/src/style/global.less b/cmdb-ui/src/style/global.less
index dcb0552..790f2e4 100644
--- a/cmdb-ui/src/style/global.less
+++ b/cmdb-ui/src/style/global.less
@@ -50,7 +50,7 @@ body {
 }
 
 .ant-layout {
-  background-color: #f7f8fa;
+  background-color: @layout-content-background;
 }
 
 .layout.ant-layout {
@@ -161,7 +161,7 @@ body {
       transition: width 0.2s;
 
       &.ant-header-side-opened {
-        width: calc(100% - 200px);
+        width: calc(100% - 220px);
       }
 
       &.ant-header-side-closed {
@@ -411,7 +411,6 @@ body {
 
 // 菜单样式
 .sider {
-  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
   position: relative;
   z-index: 10;
   min-height: 100vh;
@@ -431,19 +430,9 @@ body {
   &.ant-fixed-sidemenu {
     position: fixed;
     height: 100%;
-    background: @layout-background-color;
     z-index: 99;
   }
 
-  .ant-menu-dark {
-    background: @layout-background-color;
-
-    .ant-menu-inline.ant-menu-sub {
-      background: @layout-background-color-light;
-      box-shadow: none;
-    }
-  }
-
   .logo {
     position: relative;
     height: @layout-header-height;
@@ -478,21 +467,11 @@ body {
 
   &.light {
     background-color: #fff;
-    box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05);
 
     .logo {
       background: @layout-header-background;
-      box-shadow: 1px 1px 0px 0px #e8e8e8;
+      box-shadow: 0 1px 3px 0px #9eabbe25;
     }
-
-    // .ant-menu-light {
-    //   .ant-menu-item {
-    //     margin: 0;
-    //   }
-    //   .ant-menu-item-selected {
-    //     background: #0000000a;
-    //   }
-    // }
   }
 }
 
@@ -506,6 +485,9 @@ body {
 // 从此处开始
 .ops-side-bar.ant-menu {
   transition: none;
+  .ant-menu-item {
+    text-overflow: initial !important;
+  }
 }
 .ops-side-bar.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
   background: @layout-sidebar-selected-color;
@@ -525,7 +507,7 @@ body {
 }
 
 .ops-side-bar.ant-menu-light {
-  border-right-color: transparent;
+  border-right-color: #e8e8e8;
   background: @layout-sidebar-color;
   background-repeat: no-repeat !important;
   background-size: cover;
@@ -538,6 +520,9 @@ body {
       display: inline-flex;
       align-items: center;
       color: @layout-sidebar-font-color;
+      i {
+        color: @text-color_5;
+      }
     }
     &:hover {
       .scroll {
@@ -590,8 +575,11 @@ body {
   .ant-menu-item-selected {
     a,
     a:hover {
-      color: @layout-sidebar-font-color;
+      color: @layout-sidebar-selected-font-color;
       font-weight: 600;
+      i {
+        color: @layout-sidebar-selected-font-color;
+      }
     }
   }
   .ant-menu-item::after,
@@ -601,6 +589,9 @@ body {
 
   .ant-menu-submenu {
     color: @layout-sidebar-font-color;
+    i {
+      color: @text-color_5;
+    }
   }
   .ant-menu-submenu-title:hover {
     color: @layout-sidebar-font-color;
@@ -613,8 +604,11 @@ body {
   }
   .ant-menu-submenu-selected {
     > .ant-menu-submenu-title {
-      color: @layout-sidebar-font-color;
+      color: @layout-sidebar-selected-font-color;
       font-weight: 800;
+      i {
+        color: @layout-sidebar-selected-font-color;
+      }
     }
   }
   .ant-menu-submenu-content .ant-menu-submenu-active .ant-menu-submenu-title {
@@ -852,7 +846,7 @@ body {
   .ant-layout-sider {
     box-shadow: none;
     .ant-layout-sider-children {
-      background: @primary-color_5;
+      background: @primary-color_7;
       .ant-menu {
         display: none;
       }
@@ -883,7 +877,7 @@ body {
   }
 }
 
-.custom-vue-treeselect__control(@bgColor:@primary-color_5,@border:none) {
+.custom-vue-treeselect__control(@bgColor:@primary-color_7,@border:none) {
   background-color: @bgColor;
   border: @border;
 }
@@ -956,13 +950,13 @@ body {
 //非斑马纹
 .ops-unstripe-table {
   .vxe-table--border-line {
-    border: none !important;
+    // border: none !important;
   }
   .vxe-table--header-wrapper {
-    background-color: @primary-color_5 !important;
+    background-color: @primary-color_6 !important;
   }
   .vxe-header--row .vxe-header--column:hover {
-    background: #2f54eb1f !important;
+    background: @primary-color_3;
   }
 }
 .ops-unstripe-table.vxe-table--render-default.border--full {
@@ -983,7 +977,7 @@ body {
     border: none !important;
   }
   .vxe-table--header-wrapper {
-    background-color: @primary-color_5 !important;
+    background-color: @primary-color_6 !important;
   }
   // .vxe-table--header-wrapper.body--wrapper {
   //   border-radius: 8px !important;
@@ -1010,19 +1004,19 @@ body {
     }
   }
   .vxe-header--row .vxe-header--column:hover {
-    background: #2f54eb1f !important;
+    background: @primary-color_3;
   }
 }
 
 .ops-input {
   .ant-input,
   .ant-time-picker-input {
-    background-color: @primary-color_5;
+    background-color: @primary-color_7;
     border: none;
   }
 }
 .ops-input.ant-input {
-  background-color: @primary-color_5;
+  background-color: @primary-color_7;
   border: none;
 }
 .ops-input.ant-input[disabled] {
@@ -1030,14 +1024,6 @@ body {
   color: #333;
   cursor: default;
 }
-.ops-input-radius {
-  .ant-input {
-    border-radius: 20px;
-  }
-}
-.ops-input-radius.ant-input {
-  border-radius: 20px;
-}
 
 // vxe-table checkbox 选中 highlight
 .vxe-table--render-default .vxe-body--row.row--checked,
@@ -1110,12 +1096,12 @@ body {
 //批量操作
 .ops-list-batch-action {
   display: inline-block;
-  background-color: @primary-color_5;
+  background-color: @primary-color_6;
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.55);
+  color: @text-color_3;
   > span {
     display: inline-block;
-    padding: 4px 8px;
+    padding: 7px 8px;
     cursor: pointer;
     &:hover {
       color: @primary-color;
@@ -1127,7 +1113,7 @@ body {
   }
 }
 
-//tab
+// card tab
 .ops-tab.ant-tabs.ant-tabs-card {
   .ant-tabs-card-bar {
     margin: 0;
@@ -1147,15 +1133,53 @@ body {
   }
 }
 
-//button
+// line tab
+.ops-tab.ant-tabs {
+  .ant-tabs-bar {
+    margin-bottom: 20px;
+    border-bottom: none;
+    .ant-tabs-nav.ant-tabs-nav-animated,
+    .ant-tabs-nav.ant-tabs-nav-animated > div:first-child {
+      border-bottom: 1px solid @border-color-base;
+    }
+    .ant-tabs-tab {
+      color: @text-color_4;
+    }
+    .ant-tabs-tab-active {
+      color: @primary-color;
+    }
+  }
+}
+
+// button
 .ops-button-primary {
   background-color: @primary-color_4;
   border-color: @primary-color_4;
   color: @primary-color;
   box-shadow: none;
 }
+// button
+.ops-button-ghost.ant-btn-background-ghost.ant-btn-primary {
+  background-color: @primary-color_5!important;
+  border-color: @primary-color_8;
+}
+.ops-button-ghost.ant-btn-background-ghost.ant-btn-primary[disabled] {
+  border-color: #d9d9d9;
+  background-color: @primary-color_7!important;
+}
 
-//select
+// button
+.ant-btn.ant-btn-icon-only {
+  &:hover > i {
+    color: @primary-color;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+  > i {
+    color: #d9d9d9;
+  }
+}
+
+// select
 .ops-select {
   &.white {
     .ant-select-selection {
@@ -1173,10 +1197,6 @@ body {
       }
     }
   }
-  .ant-select-selection {
-    background-color: @primary-color_5;
-    border-color: @primary-color_5;
-  }
 }
 
 //dropdown
@@ -1190,9 +1210,7 @@ body {
 
 //modal
 .ant-modal-content {
-  border-radius: 15px;
   .ant-modal-header {
-    border-radius: 15px;
     border-bottom: none;
     .ant-modal-title {
       padding-left: 10px;
@@ -1328,12 +1346,8 @@ body {
     border-bottom-color: @primary-color;
   }
 }
-// .ant-menu.ant-menu-light {
-//   &.ops-menu {
-//     background-color: white;
-//     background: none;
-//     .ant-menu-submenu {
-//       color: rgba(0, 0, 0, 0.65);
-//     }
-//   }
-// }
+
+.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected,
+.ant-tree li .ant-tree-node-content-wrapper:hover {
+  background-color: @primary-color_3;
+}
diff --git a/cmdb-ui/src/style/static.less b/cmdb-ui/src/style/static.less
index 096a500..0e3b422 100644
--- a/cmdb-ui/src/style/static.less
+++ b/cmdb-ui/src/style/static.less
@@ -1,41 +1,48 @@
 @border-radius-base: 2px; // 组件/浮层圆角
 @border-radius-box: 4px; // big box radius
 
-@primary-color: #2f54eb; // 全局主色 六大品牌色
+// primary color
+@primary-color: #2f54eb;
 @primary-color_2: #7f97fa;
-@primary-color_3: #d3e3fd;
+@primary-color_3: #ebeff8;
 @primary-color_4: #e1efff;
 @primary-color_5: #f0f5ff;
 @primary-color_6: #f9fbff;
+@primary-color_7: #f7f8fa;
+@primary-color_8: #b1c9ff;
 
-@text-color_1: #1d2119;
+// Neutral color
+@text-color_1: #1d2129;
 @text-color_2: #4e5969;
 @text-color_3: #86909c;
 @text-color_4: #a5a9bc;
+@text-color_5: #cacdd9;
+@text-color_6: #e4e7ed;
+@text-color_7: #f0f1f5;
 
-@border-color: #e4e7ed;
+@func-color_1: #fd4c6a;
+@func-color_2: #ff7d00;
+@func-color_3: #00b42a;
+@func-color_4: #fad337;
+
+@border-color-base: @text-color_6; // 边框色
 
 @scrollbar-color: rgba(47, 122, 235, 0.2);
 
+@layout-content-background: @primary-color_7;
 @layout-header-background: #fff;
 @layout-header-height: 40px;
 @layout-header-icon-height: 34px;
 @layout-header-font-color: #020000;
-@layout-header-font-selected-color: #2857bc;
+@layout-header-font-selected-color: @primary-color;
 
-//dark
-@layout-background-color: #182132;
-@layout-background-color-light: #262f40;
-//light
-@layout-background-light-color: #fafafa;
-@layout-background-light-color-light: #f0f0f0;
-
-@layout-sidebar-color: #1d264c; //bg
-@layout-sidebar-sub-color: #000c37; //bg
-@layout-sidebar-selected-color: #3e4a71; //selected bg
-@layout-sidebar-arrow-color: rgba(255, 255, 255, 0.6);
-@layout-sidebar-font-color: #fff;
-@layout-sidebar-disabled-font-color: rgba(255, 255, 255, 0.6);
+@layout-sidebar-color: #ffffff; //bg
+@layout-sidebar-sub-color: @primary-color_7; //bg
+@layout-sidebar-selected-color: @primary-color_5; //selected bg
+@layout-sidebar-arrow-color: @text-color_4;
+@layout-sidebar-font-color: @text-color_2;
+@layout-sidebar-selected-font-color: @primary-color;
+@layout-sidebar-disabled-font-color: @text-color_4;
 
 #custom_colors() {
   color_1: #2f54eb; //primary color
@@ -47,7 +54,7 @@
   cursor: pointer;
   padding: 5px 8px;
   background-color: @backgroundColor;
-  border-radius: 5px;
+  border-radius: @border-radius-box;
   height: 30px;
   color: rgba(0, 0, 0, 0.6);
   white-space: nowrap;
@@ -57,10 +64,10 @@
   cursor: pointer;
   padding: 5px 10px;
   &:hover {
-    background-color: @primary-color_5;
+    background-color: @primary-color_3;
   }
 }
 .ops_popover_item_selected() {
-  background-color: @primary-color_5;
+  background-color: @primary-color_3;
   color: @primary-color;
 }
diff --git a/cmdb-ui/src/views/setting/auth/index.vue b/cmdb-ui/src/views/setting/auth/index.vue
index 1bfd111..65a2b59 100644
--- a/cmdb-ui/src/views/setting/auth/index.vue
+++ b/cmdb-ui/src/views/setting/auth/index.vue
@@ -17,8 +17,12 @@
             <a-space>
               <a-button :loading="loading" type="primary" @click="handleSave">{{ $t('save') }}</a-button>
               <template v-if="item.value === 'LDAP'">
-                <a-button :loading="loading" ghost type="primary" @click="handleTest('connect')">{{ $t('cs.auth.testConnect') }}</a-button>
-                <a-button :loading="loading" ghost type="primary" @click="handleTest('login')">{{ $t('cs.auth.testLogin') }}</a-button>
+                <a-button :loading="loading" ghost type="primary" @click="handleTest('connect')">{{
+                  $t('cs.auth.testConnect')
+                }}</a-button>
+                <a-button :loading="loading" ghost type="primary" @click="handleTest('login')">{{
+                  $t('cs.auth.testLogin')
+                }}</a-button>
               </template>
               <a-button :loading="loading" @click="handleReset">{{ $t('reset') }}</a-button>
             </a-space>
@@ -56,28 +60,28 @@ export default {
   computed: {
     authList() {
       return [
-      {
-        value: 'LDAP',
-        label: 'LDAP',
-      },
-      {
-        value: 'CAS',
-        label: 'CAS',
-      },
-      {
-        value: 'OAUTH2',
-        label: 'OAUTH2',
-      },
-      {
-        value: 'OIDC',
-        label: 'OIDC',
-      },
-      {
-        value: 'AuthCommonConfig',
-        label: this.$t('cs.auth.common'),
-      },
-    ]
-    }
+        {
+          value: 'LDAP',
+          label: 'LDAP',
+        },
+        {
+          value: 'CAS',
+          label: 'CAS',
+        },
+        {
+          value: 'OAUTH2',
+          label: 'OAUTH2',
+        },
+        {
+          value: 'OIDC',
+          label: 'OIDC',
+        },
+        {
+          value: 'AuthCommonConfig',
+          label: this.$t('cs.auth.common'),
+        },
+      ]
+    },
   },
   methods: {
     getAuthDataEnable() {
@@ -129,7 +133,7 @@ export default {
               ...values,
             }
           }
-          testLDAP(type, { data: _data })
+          testLDAP({ data: _data, test_type: type })
             .then((res) => {
               this.$message.success(this.$t('cs.auth.testSuccess'))
             })
diff --git a/cmdb-ui/src/views/user/Login.vue b/cmdb-ui/src/views/user/Login.vue
index a0d60aa..9353633 100644
--- a/cmdb-ui/src/views/user/Login.vue
+++ b/cmdb-ui/src/views/user/Login.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="ops-login">
     <div class="ops-login-left">
-      <span>维易科技<br />让运维更简单</span>
+      <span>OneOps统一运维平台</span>
+      <img src="../../assets/login_img.png" />
     </div>
     <div class="ops-login-right">
-      <img src="../../assets/logo_VECMDB.png" />
+      <img src="../../assets/OneOps.png" />
+      <div class="ops-login-right-welcome"><span>欢迎登录</span></div>
       <a-form
         id="formLogin"
         ref="formLogin"
@@ -43,7 +45,7 @@
           <a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">自动登录</a-checkbox>
         </a-form-item>
 
-        <a-form-item style="margin-top: 24px">
+        <a-form-item style="margin-top:24px">
           <a-button
             size="large"
             type="primary"
@@ -53,13 +55,18 @@
             :disabled="state.loginBtn"
           >登录</a-button
           >
+          <a-checkbox
+            v-if="enable_list && enable_list.length === 1 && enable_list[0].auth_type === 'LDAP'"
+            v-model="auth_with_ldap"
+          >LDAP</a-checkbox
+          >
         </a-form-item>
       </a-form>
       <template v-if="_enable_list && _enable_list.length >= 1">
         <a-divider style="font-size:14px">其他登录方式</a-divider>
         <div style="text-align:center">
           <span v-for="(item, index) in _enable_list" :key="item.auth_type">
-            <ops-icon :type="item.auth_type"/>
+            <ops-icon :type="item.auth_type" />
             <a @click="otherLogin(item.auth_type)">{{ item.auth_type }}</a>
             <a-divider v-if="index < _enable_list.length - 1" type="vertical" />
           </span>
@@ -93,6 +100,7 @@ export default {
         loginType: 0,
         smsSendBtn: false,
       },
+      auth_with_ldap: false,
     }
   },
   computed: {
@@ -104,6 +112,18 @@ export default {
       return this.enable_list.filter((en) => en.auth_type !== 'LDAP')
     },
   },
+  watch: {
+    enable_list: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal && newVal.length === 1 && newVal[0].auth_type === 'LDAP') {
+          this.auth_with_ldap = true
+        } else {
+          this.auth_with_ldap = false
+        }
+      },
+    },
+  },
   created() {},
   async mounted() {
     await this.GetAuthDataEnable()
@@ -124,10 +144,12 @@ export default {
     handleSubmit(e) {
       e.preventDefault()
       const {
+        enable_list,
         form: { validateFields },
         state,
         customActiveKey,
         Login,
+        auth_with_ldap,
       } = this
 
       state.loginBtn = true
@@ -136,11 +158,15 @@ export default {
 
       validateFields(validateFieldsKey, { force: true }, (err, values) => {
         if (!err) {
-          console.log('login form', values)
           const loginParams = { ...values }
           delete loginParams.username
           loginParams.username = values.username
           loginParams.password = appConfig.useEncryption ? md5(values.password) : values.password
+          loginParams.auth_with_ldap =
+            enable_list && enable_list.length === 1 && enable_list[0].auth_type === 'LDAP'
+              ? Number(auth_with_ldap)
+              : undefined
+
           localStorage.setItem('ops_auth_type', '')
           Login({ userInfo: loginParams })
             .then((res) => this.loginSuccess(res))
@@ -184,6 +210,13 @@ export default {
     background: url('../../assets/login_bg.png') no-repeat;
     background-position: center;
     background-size: cover;
+    > img {
+      width: 80%;
+      position: absolute;
+      top: 60%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
     > span {
       color: white;
       position: absolute;
@@ -191,7 +224,6 @@ export default {
       left: 50%;
       transform: translateX(-50%);
       font-size: 1.75vw;
-      text-align: center;
     }
   }
   .ops-login-right {
@@ -202,6 +234,14 @@ export default {
       width: 70%;
       margin-left: 15%;
     }
+    .ops-login-right-welcome {
+      text-align: center;
+      color: rgba(29, 57, 196, 1);
+      font-family: 'Inter';
+      font-style: normal;
+      font-weight: 600;
+      font-size: 1.25vw;
+    }
     .login-button {
       width: 100%;
     }