diff --git a/src/UI/Components/SourceManage/CommonPanel.tsx b/src/UI/Components/SourceManage/CommonPanel.tsx
index ce5487f70..8f997dab8 100644
--- a/src/UI/Components/SourceManage/CommonPanel.tsx
+++ b/src/UI/Components/SourceManage/CommonPanel.tsx
@@ -101,6 +101,7 @@ export class CommonPanelEventBus
 export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanelState>
 {
     private tree: HTMLElement; //目录数元素
+    private ColResizeEl = React.createRef<HTMLDivElement>();
     startHandleDir = observable.box(false); //开始操作目录,重命名or新建
     private timeId = null; //搜索时的定时器
     dataList = observable([]);
@@ -132,6 +133,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
     private event: Function[] = [];
     private copyIds = new Set();
     @observable searchedDirs: IDirectoryProps[] = [];
+    private isDragging: boolean = false; //防止两种拖拽事件冲突
 
     constructor(props)
     {
@@ -365,32 +367,46 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
                             }
                         </Navbar.Group>
                     </Navbar>
-                    <Card style={{ position: "relative" }}>
-                        {
-                            this.props.isTemplateTag &&
-                            <TemplateTag
-                                FindNode={this.FindNode}
-                                currentTag={this.props.currentTag}
-                            />
-                        }
+                    <Card>
                         <div
-                            className="bp3-card img-tree"
-                            ref={c => this.tree = c}
-                            onDragStart={this.handleDirDragStart}
-                            onClick={() =>
+                            className='navigation-left'
+                            ref={this.ColResizeEl}>
                             {
-                                if (this.props.clickTree)
-                                    this.props.clickTree();
-                            }}
-                        >
-                            <Tree
-                                contents={this.state.nodes}
-                                onNodeClick={this.handleNodeClick}
-                                onNodeCollapse={(node) => this.handleNodeCollapse(node, true)}
-                                onNodeExpand={(node) => this.handleNodeCollapse(node, false)}
-                                onNodeContextMenu={this.showContextMenu}
-                                className={Classes.ELEVATION_0}
-                            />
+                                this.props.isTemplateTag &&
+                                <div className='com-tag'>
+                                    <TemplateTag
+                                        FindNode={this.FindNode}
+                                        currentTag={this.props.currentTag}
+                                    />
+                                </div>
+                            }
+                            <div
+                                className="bp3-card img-tree"
+                                ref={c => this.tree = c}
+                                onDragStart={this.handleDirDragStart}
+                                onClick={() =>
+                                {
+                                    if (this.props.clickTree)
+                                        this.props.clickTree();
+                                }}
+                            >
+                                <Tree
+                                    contents={this.state.nodes}
+                                    onNodeClick={this.handleNodeClick}
+                                    onNodeCollapse={(node) => this.handleNodeCollapse(node, true)}
+                                    onNodeExpand={(node) => this.handleNodeCollapse(node, false)}
+                                    onNodeContextMenu={this.showContextMenu}
+                                    className={Classes.ELEVATION_0}
+                                />
+                            </div>
+                            {
+                                //模板添加拽托条,改变目宽度大小
+                                this.props.isTemplateTag &&
+                                <div
+                                    className='seekBar'
+                                    onPointerDown={(e) => { this.handleResize(e); }}
+                                ></div>
+                            }
                         </div>
                         <div
                             className="bp3-card img-lib"
@@ -448,6 +464,31 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
         );
     }
 
+    //拖拽调整模板目录宽度大小
+    private handleResize = (e: React.PointerEvent<HTMLDivElement>) =>
+    {
+        this.isDragging = true;
+        const target = e.target as HTMLDivElement;
+        target.setPointerCapture(e.pointerId);
+        const clientX = e.clientX;
+        const originalWidth = this.ColResizeEl.current.offsetWidth;
+
+        target.onmousemove = (ev) =>
+        {
+            let currentWidth = ev.clientX - clientX + originalWidth;
+            if (currentWidth > 200 && currentWidth < 500)
+                this.ColResizeEl.current.style.width = currentWidth + "px";
+        };
+
+        target.onmouseup = () =>
+        {
+            target.releasePointerCapture(e.pointerId);
+            target.onmousemove = null;
+            target.onmouseup = null;
+            this.isDragging = false;
+        };
+    };
+
     private handleSelectAll = (e: React.FormEvent<HTMLInputElement>) =>
     {
         this.setState({ isSelectAll: e.currentTarget.checked });
@@ -498,7 +539,8 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
     //查找标签对应的节点
     FindNode = async (IDir: string) =>
     {
-        if (!IDir) return;
+        //没有节点树就不查找
+        if (!IDir || !this.tree) return;
         await new Promise(res =>
         {
             let timer = setInterval(() =>
@@ -1139,6 +1181,12 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
     private _moveElement: HTMLElement;
     private handleDirDragStart = (e: React.DragEvent<Element>) =>
     {
+        if (this.isDragging)
+        {
+            e.preventDefault();
+            return;
+        }
+
         let el = e.target as HTMLElement;
         while (true)
         {
diff --git a/src/UI/Components/SourceManage/TexturePanel.less b/src/UI/Components/SourceManage/TexturePanel.less
index 0e40a2891..90f64b57e 100644
--- a/src/UI/Components/SourceManage/TexturePanel.less
+++ b/src/UI/Components/SourceManage/TexturePanel.less
@@ -1,9 +1,9 @@
 .texturePanel {
-    height : 100%;
+    height: 100%;
     padding: 0;
 
-    &>div:first-child {
-        display        : flex;
+    & > div:first-child {
+        display: flex;
         justify-content: space-between;
 
         .bp3-align-right {
@@ -11,134 +11,181 @@
         }
     }
 
-    &>div:last-child {
-        height         : calc(~"100% - 50px");
-        display        : flex;
+    & > div:last-child {
+        position: relative;
+        height: calc(~"100% - 50px");
+        display: flex;
         justify-content: space-between;
-        padding        : 0;
+        padding: 0;
 
-        .img-tree {
-            width   : 25%;
-            padding : 0;
-            overflow: auto;
+        .navigation-left {
+            position: relative;
+            display: flex;
+            width: 25%;
+
+            .com-tag {
+                width: 50%;
+
+                .tag-name-list {
+                    list-style: none;
+                    text-align: left;
+                    padding: 0;
+                    max-height: 100%;
+                    overflow: auto;
+                    border-right: 1px solid #ccc;
+                    padding-right: 5px;
+                    width: 100%;
+
+                    li {
+                        border-bottom: 1px solid #ccc;
+                        padding: 5px;
+                        cursor: pointer;
+                    }
 
-            .bp3-tree {
-                height    : 100%;
-                box-shadow: none;
-                min-width: fill-available;
-                min-width: -webkit-fill-available;
-                width: fit-content;
+                    li:hover {
+                        background-color: #ccc;
+                    }
 
-                &>ul {
-                    max-height: 95%;
-                    overflow  : auto;
+                    li.active {
+                        background-color: rgba(19, 124, 189);
+                        color: #fff;
+                    }
                 }
+            }
 
-                .bp3-tree-node-content-1 {
-                    padding-left: 10px;
+            .img-tree {
+                flex: 1;
+                padding: 0;
+                overflow: auto;
+
+                .bp3-tree {
+                    height: 100%;
+                    box-shadow: none;
+                    min-width: fill-available;
+                    min-width: -webkit-fill-available;
+                    width: fit-content;
+
+                    & > ul {
+                        max-height: 95%;
+                        overflow: auto;
+                    }
+
+                    .bp3-tree-node-content-1 {
+                        padding-left: 10px;
+                    }
                 }
             }
+
+            .seekBar {
+                cursor: col-resize;
+                position: absolute;
+                z-index: 10;
+                right: -3px;
+                padding: 0 3px;
+                height: 100%;
+            }
         }
 
         .img-lib {
-            width         : 75%;
-            padding       : 0 10px;
-            overflow      : visible;
-            position      : relative;
-            display       : flex;
+            // width: 75%;
+            flex: 1;
+            padding: 0 10px;
+            overflow: visible;
+            position: relative;
+            display: flex;
             flex-direction: column;
 
-            &>.bp3-control {
+            & > .bp3-control {
                 margin: 0;
             }
 
-            &>ul:first-child {
-                list-style   : none;
-                display      : flex;
-                flex-wrap    : wrap;
-                padding      : 0;
-                flex         : 1;
+            & > ul:first-child {
+                list-style: none;
+                display: flex;
+                flex-wrap: wrap;
+                padding: 0;
+                flex: 1;
                 align-content: start;
-                margin       : 0;
-                overflow     : visible;
+                margin: 0;
+                overflow: visible;
 
-                &>li {
-                    width    : 20%;
-                    padding  : 5px;
-                    position : relative;
+                & > li {
+                    width: 20%;
+                    padding: 5px;
+                    position: relative;
                     // height: 32%;
 
                     .bp3-transition-container {
                         z-index: 31;
                     }
 
-                    &>.look-img .bp3-popover-target,
+                    & > .look-img .bp3-popover-target,
                     .look-mat {
-                        width         : 100%;
-                        height        : 0px;
+                        width: 100%;
+                        height: 0px;
                         padding-bottom: 100%;
-                        overflow      : hidden;
-                        margin        : 0;
-                        position      : relative;
+                        overflow: hidden;
+                        margin: 0;
+                        position: relative;
 
                         div {
                             position: absolute;
-                            left    : 0;
-                            width   : 100%;
-                            height  : 100%;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
                         }
 
                         img {
                             position: absolute;
-                            left    : 0;
+                            left: 0;
                         }
 
                         .apply-img-hint:hover:before {
-                            content : "双击应用图片";
+                            content: "双击应用图片";
                             position: absolute;
-                            left    : 0;
-                            right   : 0;
-                            bottom  : 0;
-                            top     : 0;
-                            margin  : auto;
-                            width   : max-content;
-                            height  : 20px;
-                            opacity : 0.5;
+                            left: 0;
+                            right: 0;
+                            bottom: 0;
+                            top: 0;
+                            margin: auto;
+                            width: max-content;
+                            height: 20px;
+                            opacity: 0.5;
                         }
                     }
 
-                    &>p {
-                        width        : 70%;
-                        overflow     : hidden;
-                        padding      : 0;
-                        margin       : 0;
-                        white-space  : nowrap;
-                        text-overflow: ellipsis
+                    & > p {
+                        width: 70%;
+                        overflow: hidden;
+                        padding: 0;
+                        margin: 0;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
                     }
 
-                    &>.bp3-control {
-                        display    : none;
-                        position   : absolute;
-                        top        : 5px;
-                        margin     : 0;
-                        padding    : 0;
-                        height     : 16px;
+                    & > .bp3-control {
+                        display: none;
+                        position: absolute;
+                        top: 5px;
+                        margin: 0;
+                        padding: 0;
+                        height: 16px;
                         line-height: 16px;
 
                         .bp3-control-indicator {
-                            margin        : 0;
+                            margin: 0;
                             vertical-align: baseline;
                         }
                     }
 
-                    &>.selected {
+                    & > .selected {
                         display: block;
                     }
 
-                    &>.bp3-popover-wrapper:not(:first-child) {
+                    & > .bp3-popover-wrapper:not(:first-child) {
                         position: absolute;
-                        top     : 0;
-                        right   : 0px;
+                        top: 0;
+                        right: 0px;
 
                         .bp3-button {
                             display: none;
@@ -149,20 +196,20 @@
                         }
                     }
 
-                    &:hover>.bp3-control {
+                    &:hover > .bp3-control {
                         display: block;
                     }
 
-                    &:hover>.bp3-popover-wrapper .bp3-button {
+                    &:hover > .bp3-popover-wrapper .bp3-button {
                         display: flex;
                     }
 
-                    &>.bp3-popover-wrapper .bp3-active {
+                    & > .bp3-popover-wrapper .bp3-active {
                         display: flex;
                     }
                 }
 
-                &>.bp3-card>p {
+                & > .bp3-card > p {
                     position: static;
                 }
             }
@@ -176,9 +223,7 @@
                     user-select: none;
                 }
 
-
-
-                &>li {
+                & > li {
                     text-align: center;
 
                     // &>.bp3-popover-wrapper {
@@ -187,13 +232,13 @@
                     //     right: 0px;
                     // }
 
-                    &>.bp3-control {
+                    & > .bp3-control {
                         left: 10px;
-                        top : 10;
+                        top: 10;
                     }
 
-                    &>p {
-                        width : 100%;
+                    & > p {
+                        width: 100%;
                         bottom: -10px;
                     }
                 }
@@ -201,47 +246,46 @@
 
             .bp3-dialog-container {
                 position: fixed;
-                left    : 0;
-                top     : 0;
-                z-index : 30;
+                left: 0;
+                top: 0;
+                z-index: 30;
 
                 .bp3-dialog {
-                    width  : unset;
-                    margin : 0;
+                    width: unset;
+                    margin: 0;
                     padding: 0;
                 }
             }
         }
-
     }
 }
 
 .upload {
     .thumbnail {
         min-height: 200px;
-        position  : relative;
-        padding   : 20px;
+        position: relative;
+        padding: 20px;
 
         .thumbnail-list {
-            list-style     : none;
-            display        : flex;
-            flex-wrap      : wrap;
+            list-style: none;
+            display: flex;
+            flex-wrap: wrap;
             justify-content: flex-start;
-            margin-right   : 10px;
-            margin-bottom  : 10px;
-            max-height     : 400px;
-            overflow       : auto;
+            margin-right: 10px;
+            margin-bottom: 10px;
+            max-height: 400px;
+            overflow: auto;
 
             li {
-                width   : 110px;
-                height  : 110px;
-                padding : 10px;
+                width: 110px;
+                height: 110px;
+                padding: 10px;
                 position: relative;
 
                 button {
                     position: absolute;
-                    right   : 0;
-                    top     : 0;
+                    right: 0;
+                    top: 0;
 
                     svg {
                         color: #ff7373;
@@ -251,84 +295,84 @@
         }
     }
 
-    .thumbnail>div.border {
+    .thumbnail > div.border {
         display: block;
-        width  : 100%;
-        height : 180px;
-        border : 2px dashed #ccc;
+        width: 100%;
+        height: 180px;
+        border: 2px dashed #ccc;
     }
 
     .uploadBtn {
-        width        : 100px;
-        height       : 50px;
-        line-height  : 50px;
+        width: 100px;
+        height: 50px;
+        line-height: 50px;
         border-radius: 5px;
-        text-align   : center;
-        position     : absolute;
-        left         : 0;
-        right        : 0;
-        top          : 0;
-        bottom       : 0;
-        margin       : auto;
-        background   : #137cbd;
+        text-align: center;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        background: #137cbd;
     }
 
     .bp3-dialog-footer-actions {
         justify-content: space-between;
 
-        &>div:first-child {
+        & > div:first-child {
             line-height: 30px;
         }
     }
 
     .bp3-dialog-body {
         h5 {
-            padding-left : 20px;
-            padding-top  : 20px;
-            overflow     : hidden;
+            padding-left: 20px;
+            padding-top: 20px;
+            overflow: hidden;
             text-overflow: ellipsis;
-            white-space  : nowrap;
+            white-space: nowrap;
         }
     }
 }
 
 .newDir {
     position: fixed;
-    top     : 10%;
-    left    : 33%;
-    z-index : 25;
+    top: 10%;
+    left: 33%;
+    z-index: 25;
 
     label.bp3-label {
-        margin-bottom: 0
+        margin-bottom: 0;
     }
 }
 
 .pagination {
-    display        : flex;
+    display: flex;
     justify-content: center;
-    align-items    : center;
-    width          : 100%;
-    padding        : 10px 0;
-    height         : 60px;
+    align-items: center;
+    width: 100%;
+    padding: 10px 0;
+    height: 60px;
 
     ul {
-        margin         : 0;
-        list-style     : none;
-        display        : flex;
+        margin: 0;
+        list-style: none;
+        display: flex;
         // width: calc(~"100% - 20px");
         justify-content: center;
-        padding-left   : 0;
-        flex-wrap      : wrap;
+        padding-left: 0;
+        flex-wrap: wrap;
 
         li {
-            border       : 1px solid #137cbd;
+            border: 1px solid #137cbd;
             border-radius: 5px;
-            height       : 36px;
-            width        : 36px;
-            cursor       : pointer;
-            text-align   : center;
-            line-height  : 36px;
-            margin-right : 5px;
+            height: 36px;
+            width: 36px;
+            cursor: pointer;
+            text-align: center;
+            line-height: 36px;
+            margin-right: 5px;
         }
 
         li.active {
@@ -336,20 +380,20 @@
         }
 
         li.disabled {
-            cursor      : not-allowed;
-            color       : #ccc;
+            cursor: not-allowed;
+            color: #ccc;
             border-color: #ccc;
         }
     }
 
     .bp3-label {
-        display        : flex;
+        display: flex;
         justify-content: center;
-        align-items    : center;
-        margin         : 0;
+        align-items: center;
+        margin: 0;
 
         input {
-            width : 35px;
+            width: 35px;
             margin: 0 5px;
         }
     }
@@ -357,10 +401,10 @@
 
 .new-mat {
     position: fixed;
-    outline : none;
+    outline: none;
 
     .link-shop {
-        &>div {
+        & > div {
             position: relative;
 
             .bp3-input-action {
@@ -368,11 +412,11 @@
             }
 
             ul {
-                font-size : 16px;
-                position  : absolute;
-                top       : 36px;
-                left      : 0;
-                width     : 100%;
+                font-size: 16px;
+                position: absolute;
+                top: 36px;
+                left: 0;
+                width: 100%;
                 background: rgb(48, 64, 77);
 
                 li:hover {
@@ -382,8 +426,8 @@
         }
     }
 
-    &>div:last-child {
-        display        : flex;
+    & > div:last-child {
+        display: flex;
         justify-content: flex-end;
 
         .bp3-button {
@@ -394,7 +438,7 @@
 
 .search-dir {
     max-height: 300px;
-    overflow  : auto;
+    overflow: auto;
 
     li {
         padding: 5px 0;
@@ -402,10 +446,10 @@
 
     li:hover {
         background-color: #ccc;
-        color           : #fff
+        color: #fff;
     }
 }
 
 .texturePanel > div:last-child .img-lib .HistoryList .mat-list:first-child li {
-    cursor:default;
+    cursor: default;
 }
diff --git a/src/UI/Components/Template/Template.less b/src/UI/Components/Template/Template.less
index 7413af6ce..e87721e77 100644
--- a/src/UI/Components/Template/Template.less
+++ b/src/UI/Components/Template/Template.less
@@ -10,20 +10,20 @@
 
 #commonModal .template,
 #commonModal .template-select {
-    max-width : 1300px;
-    width     : 90vw;
-    height    : 850px;
+    max-width: 1500px;
+    width: 90vw;
+    height: 850px;
 
     .bp3-dialog-body {
-        height : 700px;
+        height: 700px;
     }
 
-    .bp3-dialog-footer{
+    .bp3-dialog-footer {
         justify-content: space-between;
-        height : 110px;
+        height: 110px;
     }
 
-    .bp3-dialog-body>div:first-child {
+    .bp3-dialog-body > div:first-child {
         min-width: 200px;
     }
 
@@ -32,34 +32,34 @@
     }
 
     .template-right {
-        flex    : 1;
+        flex: 1;
         overflow: auto;
 
         .template-list {
-            padding      : 0;
-            list-style   : none;
-            display      : flex;
-            flex-wrap    : wrap;
-            width        : 60%;
-            box-shadow   : 1px 0 0 0 rgba(16, 22, 26, 0.15);
+            padding: 0;
+            list-style: none;
+            display: flex;
+            flex-wrap: wrap;
+            width: 60%;
+            box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
             align-content: flex-start;
-            text-align   : center;
+            text-align: center;
 
-            &>li {
+            & > li {
                 padding: 5px 10px 0 10px;
 
-                &>div {
-                    width : 80%;
+                & > div {
+                    width: 80%;
                     margin: 0 auto;
                 }
 
-                &>p {
-                    width           : 100px;
+                & > p {
+                    width: 100px;
                     // overflow: hidden;
                     // white-space: nowrap;
                     // text-overflow: ellipsis;
-                    margin          : 0;
-                    line-height     : 1;
+                    margin: 0;
+                    line-height: 1;
                 }
             }
         }
@@ -68,7 +68,7 @@
             width: 320px;
             overflow: auto;
 
-            &>div {
+            & > div {
                 input {
                     height: 30px;
                 }
@@ -76,45 +76,44 @@
                 align-items: flex-start;
             }
 
-            &>ul {
+            & > ul {
                 width: 300px;
                 list-style: none;
-                padding   : 0;
+                padding: 0;
                 text-align: center;
                 box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
                 max-height: 40%;
-                overflow  : auto;
+                overflow: auto;
 
-                &>li {
-                    display        : flex;
+                & > li {
+                    display: flex;
                     justify-content: space-between;
-                    height         : 25px;
-                    align-items    : center;
-                    white-space    : nowrap;
+                    height: 25px;
+                    align-items: center;
+                    white-space: nowrap;
 
-                    &>span {
-                        width        : 25%;
-                        overflow     : hidden;
+                    & > span {
+                        width: 25%;
+                        overflow: hidden;
                         text-overflow: ellipsis;
                     }
                 }
             }
-
         }
     }
 
     .kugan {
         margin-top: 20px;
 
-        &>div {
-            &>label {
-                display    : flex;
+        & > div {
+            & > label {
+                display: flex;
                 align-items: center;
-                text-align : left;
-                flex       : 1;
+                text-align: left;
+                flex: 1;
             }
 
-            &>label:first-child {
+            & > label:first-child {
                 span {
                     width: 60px;
                 }
@@ -131,30 +130,30 @@
     .delete-selete {
         position: relative;
 
-        &>.bp3-control {
-            display    : none;
-            position   : absolute;
-            top        : 5px;
-            left       : 10px;
-            margin     : 0;
-            padding    : 0;
-            height     : 16px;
+        & > .bp3-control {
+            display: none;
+            position: absolute;
+            top: 5px;
+            left: 10px;
+            margin: 0;
+            padding: 0;
+            height: 16px;
             line-height: 16px;
 
             .bp3-control-indicator {
-                margin        : 0;
+                margin: 0;
                 vertical-align: baseline;
             }
         }
 
-        &>.selected {
+        & > .selected {
             display: block;
         }
 
-        &>.bp3-popover-wrapper:not(:first-child) {
+        & > .bp3-popover-wrapper:not(:first-child) {
             position: absolute;
-            top     : 0px;
-            right   : 0px;
+            top: 0px;
+            right: 0px;
 
             .bp3-button {
                 display: none;
@@ -165,80 +164,52 @@
             }
         }
 
-        &:hover>.bp3-control {
+        &:hover > .bp3-control {
             display: block;
         }
 
-        &:hover>.bp3-popover-wrapper .bp3-button {
+        &:hover > .bp3-popover-wrapper .bp3-button {
             display: flex;
         }
     }
 
     .tag-list {
-        border-right : 1px solid #ccc;
-        display      : flex;
-        width        : 75%;
-        flex-wrap    : wrap;
+        border-right: 1px solid #ccc;
+        display: flex;
+        width: 75%;
+        flex-wrap: wrap;
         align-content: start;
 
         .pagination {
             margin-top: 20px;
         }
 
-        &>.tag-img {
-            width         : 17%;
-            outline       : 1px solid #ccc;
-            height        : 0;
-            text-align    : center;
+        & > .tag-img {
+            width: 17%;
+            outline: 1px solid #ccc;
+            height: 0;
+            text-align: center;
             padding-bottom: calc(20%);
-            position      : relative;
+            position: relative;
         }
 
-        &>.tag-img:hover:after,
-        &>.tag-img.active:after {
-            content         : "";
-            position        : absolute;
-            left            : 0;
-            top             : 0;
-            width           : 100%;
-            height          : 100%;
+        & > .tag-img:hover:after,
+        & > .tag-img.active:after {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
             background-color: rgb(30, 152, 209);
-            opacity         : 0.5;
+            opacity: 0.5;
         }
     }
-
-    .tag-name-list {
-        list-style   : none;
-        width        : 100px;
-        text-align   : left;
-        padding      : 0;
-        max-height   : 100%;
-        overflow     : auto;
-        border-right : 1px solid #ccc;
-        padding-right: 5px;
-        width        : 20%;
-
-        li {
-            border-bottom: 1px solid #ccc;
-            padding      : 5px;
-            cursor       : pointer;
-        }
-
-        li:hover {
-            background-color: #ccc;
-        }
-
-        li.active {
-            background-color: rgba(19, 124, 189);
-            color           : #fff;
-        }
-    }
-
 }
 
 #commonModal .template-detail {
-    &>.add-tag {
-        display    : flex;
+    & > .add-tag {
+        display: flex;
         align-items: center;
         padding-top: 10px;
 
@@ -247,14 +218,14 @@
         }
 
         button {
-            height     : 20px;
-            min-height : 20px;
+            height: 20px;
+            min-height: 20px;
             line-height: 20px;
-            padding    : 0 5px;
+            padding: 0 5px;
         }
     }
 
-    &>div {
+    & > div {
         input {
             height: 30px;
         }
@@ -262,32 +233,32 @@
         align-items: flex-start;
     }
 
-    &>div:last-child {
+    & > div:last-child {
         text-align: right;
     }
 
-    &>ul {
+    & > ul {
         list-style: none;
-        padding   : 0;
+        padding: 0;
         text-align: center;
         box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
         max-height: 40%;
-        overflow  : auto;
+        overflow: auto;
 
-        &>li {
-            display        : flex;
+        & > li {
+            display: flex;
             justify-content: space-between;
-            height         : 25px;
-            align-items    : center;
+            height: 25px;
+            align-items: center;
 
-            &>span {
-                width        : 25%;
-                overflow     : hidden;
+            & > span {
+                width: 25%;
+                overflow: hidden;
                 text-overflow: ellipsis;
             }
         }
 
-        &>li:not(:first-child) {
+        & > li:not(:first-child) {
             box-shadow: 0 1px 0 0 rgba(16, 22, 26, 0.15);
 
             span {
@@ -304,7 +275,7 @@
 #commonModal .tag-temp-detail {
     flex: 1;
 
-    &>ul {
+    & > ul {
         max-height: 100%;
     }
 }
@@ -318,31 +289,30 @@
         margin: 0;
     }
 
-    .bp3-dialog-body .bp3-label>span {
+    .bp3-dialog-body .bp3-label > span {
         width: auto;
     }
 
-    .bp3-dialog-body>div {
+    .bp3-dialog-body > div {
         height: 100%;
 
-        &>div:first-child {
+        & > div:first-child {
             width: 60%;
         }
 
-        &>div:last-child {
+        & > div:last-child {
             width: 40%;
         }
     }
 
     .buttons {
-
-        &>button {
-            margin-right : 3px;
+        & > button {
+            margin-right: 3px;
             margin-bottom: 3px;
             border-radius: 5px;
         }
 
-        &>span {
+        & > span {
             margin-right: 3px;
 
             & button {
@@ -353,40 +323,37 @@
     }
 }
 
-@boxShadow: rgba(19, 124, 189, 0) 0px 0px 0px 0px,
-    rgba(19, 124, 189, 0) 0px 0px 0px 0px,
-    rgba(16, 22, 26, 0.15) 0px 0px 0px 1px inset,
-    rgba(16, 22, 26, 0.2) 0px 1px 1px inset;
+@boxShadow: rgba(19, 124, 189, 0) 0px 0px 0px 0px, rgba(19, 124, 189, 0) 0px 0px 0px 0px, rgba(16, 22, 26, 0.15) 0px 0px 0px 1px inset, rgba(16, 22, 26, 0.2) 0px 1px 1px inset;
 
 .params-list {
     list-style: none;
-    padding   : 0;
+    padding: 0;
     text-align: center;
     box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
-    flex      : 1;
-    overflow  : auto;
+    flex: 1;
+    overflow: auto;
 
-    &>li {
-        display        : flex;
+    & > li {
+        display: flex;
         justify-content: space-between;
-        height         : 25px;
-        align-items    : center;
+        height: 25px;
+        align-items: center;
 
-        &>span {
+        & > span {
             line-height: 25px;
-            box-shadow : @boxShadow;
+            box-shadow: @boxShadow;
         }
 
-        &>label {
+        & > label {
             box-shadow: @boxShadow;
         }
 
-        &>span,
-        &>input,
+        & > span,
+        & > input,
         label {
-            width        : 20% !important;
-            height       : 100% !important;
-            overflow     : hidden;
+            width: 20% !important;
+            height: 100% !important;
+            overflow: hidden;
             text-overflow: ellipsis;
         }
     }
@@ -394,7 +361,7 @@
 
 .action-list {
     overflow: auto;
-    flex    : 1;
+    flex: 1;
 
     .bp3-tree-node-content {
         height: 20px;
@@ -402,18 +369,16 @@
 }
 
 #modal .action-dialog {
-    left          : 0;
-    right         : 0;
-    top           : 0;
-    bottom        : 0;
-    margin        : auto;
-    width         : 280px;
-    z-index       : 35;
-    display       : flex;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    width: 280px;
+    z-index: 35;
+    display: flex;
     flex-direction: column;
-    box-shadow    : 0 0 0 1px rgba(16, 22, 26, 0.15),
-        0 0 0 rgba(16, 22, 26, 0),
-        0 0 0 rgba(16, 22, 26, 0);
+    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.15), 0 0 0 rgba(16, 22, 26, 0), 0 0 0 rgba(16, 22, 26, 0);
 
     h4 {
         font-size: 14px;
@@ -421,32 +386,32 @@
 
     .bp3-dialog-header {
         min-height: auto;
-        height    : 30px;
+        height: 30px;
     }
     .bp3-dialog-body {
         padding: 3px;
 
-        &>.bp3-label {
-            display        : flex;
-            width          : 100%;
+        & > .bp3-label {
+            display: flex;
+            width: 100%;
             justify-content: space-between;
-            font-size      : 14px;
-            padding        : 5px 10px 5px 10px;
-            &>input,
-            &>.bp3-html-select {
-                width : 65%;
+            font-size: 14px;
+            padding: 5px 10px 5px 10px;
+            & > input,
+            & > .bp3-html-select {
+                width: 65%;
                 height: 25px;
                 margin: auto;
 
-                select{
+                select {
                     height: 25px;
                 }
-                >span{
+                > span {
                     margin-top: 3px;
                 }
             }
 
-            .spanText{
+            .spanText {
                 width: 82px;
                 margin: auto;
             }
@@ -456,17 +421,17 @@
             margin: 0px 10px 0 0;
         }
 
-        .bp3-control.bp3-checkbox{
+        .bp3-control.bp3-checkbox {
             margin: 7px 0 0 5px;
             font-size: 13px;
         }
     }
 
     .bp3-dialog-footer {
-        padding        : 5px;
+        padding: 5px;
         justify-content: flex-end;
 
-        button{
+        button {
             margin: 5px;
         }
     }
@@ -474,24 +439,24 @@
 
 #commonModal .template-select {
     position: absolute;
-    z-index : 30;
+    z-index: 30;
 
     .show-temp {
-        &>h5 {
+        & > h5 {
             text-align: left;
         }
 
-        &>div>div {
-            width     : 50%;
-            outline   : 1px solid #ccc;
+        & > div > div {
+            width: 50%;
+            outline: 1px solid #ccc;
             text-align: center;
 
-            &>img {
-                width : 100px;
+            & > img {
+                width: 100px;
                 height: 100px;
             }
 
-            &>p {
+            & > p {
                 text-align: center;
             }
         }
@@ -502,15 +467,15 @@
     padding: 0;
 
     ul {
-        width     : 100px;
+        width: 100px;
         text-align: center;
-        padding   : 5px;
+        padding: 5px;
         max-height: 200px;
-        overflow  : auto;
+        overflow: auto;
 
         li {
             border-bottom: 1px solid #ccc;
-            padding      : 2px 0;
+            padding: 2px 0;
         }
 
         li:hover {
@@ -519,8 +484,8 @@
     }
 }
 
-.saveDir{
-    overflow  : auto;
-    min-width : 200px;
+.saveDir {
+    overflow: auto;
+    min-width: 200px;
     max-height: 70vh;
 }
diff --git a/src/UI/Components/Template/TemplateComponent.tsx b/src/UI/Components/Template/TemplateComponent.tsx
index f3bdec8fa..47c60e462 100644
--- a/src/UI/Components/Template/TemplateComponent.tsx
+++ b/src/UI/Components/Template/TemplateComponent.tsx
@@ -885,64 +885,63 @@ export class TemplateManage extends React.Component<ITemplateManage, {}> {
                         title={title}
                         close={() => app.Editor.ModalManage.Destory()}
                     />
-                    <div
-                        className={Classes.DIALOG_BODY}
-                    >
+                    <div className={Classes.DIALOG_BODY}>
                         {
                             this.renderBody()
                         }
                     </div>
                     <div className={Classes.DIALOG_FOOTER} >
                         {
-                            !this.props.R2bReplace &&
-                            <GetRoomCabName
-                                option={this.option}
-                                needBoardName
-                            />
-                        }
-                        {!this.props.R2bReplace && <AutoCutCheckbox isFlex={false} autoCutOption={this.autoCutOption} />}
-                        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-                            {
-                                !this.props.R2bReplace && <Button
-                                    className={Classes.INTENT_SUCCESS}
-                                    text={<span>动态插入<i>(I)</i></span>}
-                                    disabled={!this.currentTemplateInfo.id}
-                                    onClick={() => this.handleInsert(true)}
-                                />
-                            }
-                            {
-                                !this.props.R2bReplace && <Button
-                                    className={Classes.INTENT_DANGER}
-                                    text={<span>空间拾取<i>(S)</i></span>}
-                                    onClick={() => this.handleInsert(false)}
-                                    disabled={!this.currentTemplateInfo.id}
-                                />
-                            }
-                            {
-                                this.currentTemplateInfo.id && (this.currentTemplateInfo.isHandle || this.currentTemplateInfo.isHinge) && !this.props.R2bReplace &&
+                            !this.props.R2bReplace ?
+                                <>
+                                    <GetRoomCabName
+                                        option={this.option}
+                                        needBoardName
+                                    />
+                                    <AutoCutCheckbox isFlex={false} autoCutOption={this.autoCutOption} />
+                                    <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+                                        {
+                                            <Button
+                                                className={Classes.INTENT_SUCCESS}
+                                                text={<span>动态插入<i>(I)</i></span>}
+                                                disabled={!this.currentTemplateInfo.id}
+                                                onClick={() => this.handleInsert(true)}
+                                            />
+                                        }
+                                        {
+                                            <Button
+                                                className={Classes.INTENT_DANGER}
+                                                text={<span>空间拾取<i>(S)</i></span>}
+                                                onClick={() => this.handleInsert(false)}
+                                                disabled={!this.currentTemplateInfo.id}
+                                            />
+                                        }
+                                        {
+                                            this.currentTemplateInfo.id && (this.currentTemplateInfo.isHandle || this.currentTemplateInfo.isHinge) &&
+                                            <Button
+                                                className={Classes.INTENT_DANGER}
+                                                text="拾取板件"
+                                                onClick={this.handleInsertHandleOrHinge}
+                                                disabled={!this.currentTemplateInfo.id}
+                                            />
+                                        }
+                                        {
+                                            <Button
+                                                className={Classes.INTENT_PRIMARY}
+                                                text={<span>模块替换<i>(T)</i></span>}
+                                                onClick={this.handleReplace}
+                                                disabled={!this.currentTemplateInfo.id || this.currentTemplateInfo.isKuGan}
+                                            />
+                                        }
+                                    </div>
+                                </>
+                                :
                                 <Button
-                                    className={Classes.INTENT_DANGER}
-                                    text="拾取板件"
-                                    onClick={this.handleInsertHandleOrHinge}
-                                    disabled={!this.currentTemplateInfo.id}
-                                />
-                            }
-                            {
-                                !this.props.R2bReplace && <Button
                                     className={Classes.INTENT_PRIMARY}
-                                    text={<span>模块替换<i>(T)</i></span>}
-                                    onClick={this.handleReplace}
+                                    text="确定"
+                                    onClick={this.handleR2bRepalce}
                                     disabled={!this.currentTemplateInfo.id || this.currentTemplateInfo.isKuGan}
                                 />
-                            }
-                        </div>
-                        {
-                            this.props.R2bReplace && <Button
-                                className={Classes.INTENT_PRIMARY}
-                                text="确定"
-                                onClick={this.handleR2bRepalce}
-                                disabled={!this.currentTemplateInfo.id || this.currentTemplateInfo.isKuGan}
-                            />
                         }
                     </div>
                 </div>
diff --git a/src/UI/Css/dataList.less b/src/UI/Css/dataList.less
index 6cc9251c5..33a1e91b6 100644
--- a/src/UI/Css/dataList.less
+++ b/src/UI/Css/dataList.less
@@ -1,59 +1,56 @@
 #data-list ul {
     list-style: none;
-    padding   : 0;
+    padding: 0;
 
-    &>li {
+    & > li {
         outline: 1px solid #ccc;
-
     }
 
-    &>li.selected {
+    & > li.selected {
         background-color: #52aee7;
-        color           : #000;
+        color: #000;
     }
 
     .look-mat {
-        width         : 100%;
-        height        : 0px;
+        width: 100%;
+        height: 0px;
         padding-bottom: 100%;
-        overflow      : hidden;
-        margin        : 0;
-        position      : relative;
+        overflow: hidden;
+        margin: 0;
+        position: relative;
     }
 
-    &>li.actived {
+    & > li.actived {
         border: 2px inset #1061ae;
     }
 }
 
 #data-list .fileList {
-    display      : flex;
-    flex-wrap    : wrap;
-    padding      : 0;
-    flex         : 1;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    flex: 1;
     align-content: start;
-    margin       : 0;
-    overflow     : visible;
+    margin: 0;
+    overflow: visible;
 
-    &>li {
-        display       : flex;
+    & > li {
+        display: flex;
         flex-direction: column;
-
-
     }
 
-    &>li {
-        outline : 1px solid #ccc;
-        width   : 20%;
-        padding : 5px;
+    & > li {
+        outline: 1px solid #ccc;
+        width: 20%;
+        padding: 5px;
         position: relative;
 
         .look-mat img {
             position: absolute;
-            left    : 0;
+            left: 0;
         }
 
-        p{
+        p {
             margin-bottom: 15px;
         }
     }
@@ -64,47 +61,29 @@
         display: flex;
         padding: 5px 0;
 
-        :nth-child(1) {
-            flex: 1;
-        }
-
-        :nth-child(2) {
-            width: 160px;
-        }
-
-        :nth-child(3) {
-            width: 100px;
+        :nth-child(-n + 2) {
+            flex: 3 3 0%;
         }
 
-        :nth-child(4) {
-            width: 100px;
+        :nth-child(n + 3) {
+            flex: 2 2 0%;
         }
     }
 
     overflow: scroll;
-    height  : 100%;
+    height: 100%;
 
     .data-list-info {
-
-
-        &>li {
-            display    : flex;
+        & > li {
+            display: flex;
             align-items: center;
 
-            :nth-child(1) {
-                flex: 1;
-            }
-
-            :nth-child(2) {
-                width: 160px;
+            :nth-child(-n + 2) {
+                flex: 3 3 0%;
             }
 
-            :nth-child(3) {
-                width: 100px;
-            }
-
-            :nth-child(4) {
-                width: 100px;
+            :nth-child(n + 3) {
+                flex: 2 2 0%;
             }
 
             // &>div {
@@ -116,8 +95,8 @@
             // }
 
             img {
-                height        : 40px;
-                width         : 40px;
+                height: 40px;
+                width: 40px;
                 vertical-align: middle;
             }
 
@@ -125,7 +104,6 @@
                 vertical-align: middle;
             }
         }
-
     }
 
     .apply-img-hint {
@@ -133,34 +111,34 @@
     }
 
     .apply-img-hint:hover:before {
-        content    : "双击应用图片";
-        position   : absolute;
-        left       : 0;
-        right      : 0;
-        bottom     : 0;
-        top        : 0;
-        margin     : auto;
-        width      : max-content;
-        height     : 20px;
-        opacity    : 1;
+        content: "双击应用图片";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        margin: auto;
+        width: max-content;
+        height: 20px;
+        opacity: 1;
         font-weight: bold;
     }
 
     .hint:hover::before {
-        content : "双击编辑材质 拖至绘图区应用";
+        content: "双击编辑材质 拖至绘图区应用";
         position: absolute;
-        left    : 20%;
-        top     : 10px;
-        margin  : auto;
-        width   : 55%;
-        height  : 30px;
-        opacity : 1;
-        z-index : 1;
+        left: 20%;
+        top: 10px;
+        margin: auto;
+        width: 55%;
+        height: 30px;
+        opacity: 1;
+        z-index: 1;
     }
 }
 
 .data-title {
-    overflow     : hidden;
-    white-space  : nowrap;
+    overflow: hidden;
+    white-space: nowrap;
     text-overflow: ellipsis;
 }