diff --git a/src/Add-on/Template/ShowTemplate.tsx b/src/Add-on/Template/ShowTemplate.tsx
new file mode 100644
index 000000000..b29ddff81
--- /dev/null
+++ b/src/Add-on/Template/ShowTemplate.tsx
@@ -0,0 +1,12 @@
+import { Command } from "../../Editor/CommandMachine";
+import { app } from "../../ApplicationServices/Application";
+import { ModalPosition } from "../../UI/Components/Modal/ModalsManage";
+import { TemplateManage } from "../../UI/Components/Template/TemplateComponent";
+
+export class ShowTemplate implements Command
+{
+    async exec()
+    {
+        app.Editor.ModalManage.RenderModal(TemplateManage, ModalPosition.Center, {});
+    }
+}
diff --git a/src/Common/Request.ts b/src/Common/Request.ts
index 8353e61bc..1902633b1 100644
--- a/src/Common/Request.ts
+++ b/src/Common/Request.ts
@@ -10,6 +10,7 @@ export enum DirectoryId
     MaterialDir = "2", //材质根目录
     ImgDir = "3", //图片根目录
     ToplineDir = "4", //材质根目录
+    TemplateDir = "5", //材质根目录
 }
 
 export enum RequestStatus
diff --git a/src/Editor/CommandRegister.ts b/src/Editor/CommandRegister.ts
index aad5ab099..f3ea18bd3 100644
--- a/src/Editor/CommandRegister.ts
+++ b/src/Editor/CommandRegister.ts
@@ -120,6 +120,7 @@ import { AutoTempateSizeAction } from '../DatabaseServices/Template/TemplateTest
 import { ICommand } from '../UI/Components/CommandPanel/CommandList';
 import { commandMachine } from './CommandMachine';
 import { BatchModify } from '../Add-on/Batch/BatchModifySealOrDrill';
+import { ShowTemplate } from '../Add-on/Template/ShowTemplate';
 
 
 export function registerCommand()
@@ -337,6 +338,7 @@ export function registerCommand()
     //批量修改封边排钻
     commandMachine.RegisterCommand("batchmodify", new BatchModify());
 
+    commandMachine.RegisterCommand("template", new ShowTemplate());
 
     RegistCustomCommand();
 }
diff --git a/src/UI/Components/Modal/ModalStyle/Modal.less b/src/UI/Components/Modal/ModalStyle/Modal.less
index eb1048fa2..31bec9dea 100644
--- a/src/UI/Components/Modal/ModalStyle/Modal.less
+++ b/src/UI/Components/Modal/ModalStyle/Modal.less
@@ -149,5 +149,6 @@
 @import (less) "./WineRack.less";
 @import (less) "../../Template/Topline.less";
 @import (less) "./LookOverBoardInfos.less";
+@import (less) "../../Template/Template.less";
 
 
diff --git a/src/UI/Components/Template/GetRoomCabName.tsx b/src/UI/Components/Template/GetRoomCabName.tsx
new file mode 100644
index 000000000..41ecc0726
--- /dev/null
+++ b/src/UI/Components/Template/GetRoomCabName.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Label, Classes, Button, Intent } from '@blueprintjs/core';
+import { app } from '../../../ApplicationServices/Application';
+import { Board } from '../../../DatabaseServices/Entity/Board';
+import { PromptStatus } from '../../../Editor/PromptResult';
+import { EBoardKeyList } from '../../../Common/BoardKeyList';
+
+export interface IGetRoomCabNameProps
+{
+    option: { roomName: string, cabName: string }
+}
+
+export default class GetRoomCabName extends React.Component<IGetRoomCabNameProps> {
+    private getOption = async () =>
+    {
+        app.Editor.ModalManage.ToggleShow();
+        app.Editor.MaskManage.Clear();
+
+        let enRes = await app.Editor.GetEntity({
+            Msg: "选择要拾取的板件",
+            Filter: { filterTypes: [Board] }
+        });
+
+        if (enRes.Status === PromptStatus.OK && enRes.Entity)
+        {
+            let option = (enRes.Entity as Board).BoardProcessOption;
+            this.props.option.roomName = option[EBoardKeyList.RoomName];
+            this.props.option.cabName = option[EBoardKeyList.CabinetName];
+        }
+        app.Editor.ModalManage.ToggleShow();
+        app.Editor.MaskManage.ShowMask();
+    }
+    public render()
+    {
+        return (
+            <div className="flex get-name">
+                <div>
+                    <Label className={Classes.INLINE}>
+                        <span>房名</span>
+                        <input
+                            type="text"
+                            className={Classes.INPUT}
+                            value={this.props.option.roomName}
+                            onChange={e => this.props.option.roomName = e.target.value}
+                        />
+                    </Label>
+                    <Label className={Classes.INLINE}>
+                        <span>柜名</span>
+                        <input
+                            className={Classes.INPUT}
+                            value={this.props.option.cabName}
+                            onChange={e => this.props.option.cabName = e.target.value}
+                        />
+                    </Label>
+                </div>
+                <Button text="拾取" intent={Intent.SUCCESS} onClick={this.getOption} />
+                {/* <Checkbox label="智能拾取" inline /> */}
+            </div>
+        );
+    }
+}
diff --git a/src/UI/Components/Template/Template.less b/src/UI/Components/Template/Template.less
new file mode 100644
index 000000000..f842fe6a0
--- /dev/null
+++ b/src/UI/Components/Template/Template.less
@@ -0,0 +1,69 @@
+#commonModal{
+    .get-name{
+        align-items: center;
+        button{
+            align-self: stretch;
+        }
+    }
+}
+
+#commonModal .template{
+    max-width: 900px;
+    width: 60vw;
+    min-height: 80vh;
+    .bp3-dialog-body>div:first-child{
+        min-width: 200px;
+    }
+    .bp3-tree{
+        height: 100%;
+    }
+    .template-right{
+        .template-list{
+            padding: 0;
+            list-style: none;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            width: 60%;
+            box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
+        }
+        .template-detail{
+            width: 40%;
+            &>div{
+                input{
+                    height: 30px;
+                }
+                align-items: flex-start;
+            }
+            &>ul{
+                list-style: none;
+                padding: 0;
+                text-align: center;
+                &>li{
+                    display: flex;
+                    justify-content: space-between;
+                    height: 25px;
+                    align-items: center;
+                    &>span{
+                        width: 25%;
+                    }
+                }
+                &>li:first-child{
+                    span{
+                        background: #ccc;
+                    }
+                }
+                &>li:not(:first-child){
+                    box-shadow: 0 1px 0 0 rgba(16, 22, 26, 0.15);
+                    span{
+                        box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
+                    }
+                    input{
+                        height: 25px;
+                    }
+                }
+            }
+        }
+    }
+  
+}
diff --git a/src/UI/Components/Template/TemplateComponent.tsx b/src/UI/Components/Template/TemplateComponent.tsx
index 3e9343cd8..0c0c1ba0a 100644
--- a/src/UI/Components/Template/TemplateComponent.tsx
+++ b/src/UI/Components/Template/TemplateComponent.tsx
@@ -2,12 +2,25 @@ import * as React from 'react';
 import { Button, Classes, Icon } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
 import { app } from '../../../ApplicationServices/Application';
+import { CommonPanel } from '../SourceManage/CommonPanel';
+import { DirectoryId } from '../../../Common/Request';
+import { ToplineUrls } from '../../../Common/HostUrl';
+import { TemplateList } from './TemplateList';
+import { hot } from 'react-hot-loader/root';
+import GetRoomCabName from './GetRoomCabName';
+import { observable } from 'mobx';
+
 export interface ITemplateComponentProps
 {
 }
 
+@hot
 @observer
-export class TemplateComponent extends React.Component<ITemplateComponentProps, any> {
+export class TemplateManage extends React.Component<ITemplateComponentProps, any> {
+    @observable private option = {
+        roomName: "",
+        cabName: "",
+    }
     public render()
     {
         return (
@@ -15,7 +28,7 @@ export class TemplateComponent extends React.Component<ITemplateComponentProps,
                 className={Classes.DIALOG_CONTAINER}
                 id="commonModal"
             >
-                <div className={Classes.DIALOG}>
+                <div className={Classes.DIALOG + " template"}>
                     <div
                         className={Classes.DIALOG_HEADER}
                         data-id="dragArea"
@@ -33,11 +46,21 @@ export class TemplateComponent extends React.Component<ITemplateComponentProps,
                     <div
                         className={Classes.DIALOG_BODY}
                     >
-
-                        <div>content</div>
-                        <div>editor</div>
+                        <CommonPanel
+                            defaultDirId={DirectoryId.TemplateDir}
+                            renderNav={() => null}
+                            renderMenuItems={() => null}
+                            canDelete={true}
+                            getUrl={ToplineUrls.get}
+                            deleteUrl={ToplineUrls.delete}
+                        >
+                            <TemplateList />
+                        </CommonPanel>
                     </div>
                     <div className={Classes.DIALOG_FOOTER} >
+                        <GetRoomCabName
+                            option={this.option}
+                        />
                         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
                             <Button
                                 className={Classes.INTENT_SUCCESS}
diff --git a/src/UI/Components/Template/TemplateDetail.tsx b/src/UI/Components/Template/TemplateDetail.tsx
new file mode 100644
index 000000000..6f5aaf1a0
--- /dev/null
+++ b/src/UI/Components/Template/TemplateDetail.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Classes, Button } from '@blueprintjs/core';
+
+export interface ITemplateDetailProps
+{
+}
+
+
+export class TemplateDetail extends React.Component<ITemplateDetailProps> {
+    public render()
+    {
+        return (
+            <div className="template-detail">
+                <div className="flex">
+                    <input type="text" className="flex" />
+                    <div>
+                        <Button text="附加到标签" />
+                        <Button text="移出标签" />
+                    </div>
+                </div>
+                <ul>
+                    <li>
+                        <span>参数名</span>
+                        <span>参数值</span>
+                        <span>备注</span>
+                        <span>表达式</span>
+                    </li>
+                    <li>
+                        <span>L</span>
+                        <span>600</span>
+                        <span>宽</span>
+                        <input type="text"
+                            className={Classes.INPUT}
+                        />
+                    </li>
+                    <li>
+                        <span>L</span>
+                        <span>600</span>
+                        <span>宽</span>
+                        <input type="text"
+                            className={Classes.INPUT}
+                        />
+                    </li>
+                </ul>
+            </div>
+        );
+    }
+}
diff --git a/src/UI/Components/Template/TemplateList.tsx b/src/UI/Components/Template/TemplateList.tsx
new file mode 100644
index 000000000..5d9bf9e02
--- /dev/null
+++ b/src/UI/Components/Template/TemplateList.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { TemplateDetail } from './TemplateDetail';
+
+export interface ITemplateListProps
+{
+}
+const TestImg = "https://chenfeng.tech:7779/CAD/images/default.svg";
+export class TemplateList extends React.Component<ITemplateListProps> {
+    public render()
+    {
+        return (
+            <div className="flex template-right">
+                <ul className="template-list">
+                    {
+                        Array(8).fill(TestImg).map(i =>
+                        {
+                            return (
+                                <li>
+                                    <img src={i} alt="" />
+                                </li>
+                            )
+                        })
+                    }
+                </ul>
+                <TemplateDetail />
+            </div>
+        );
+    }
+}
+
diff --git a/src/UI/Components/Template/Topline.less b/src/UI/Components/Template/Topline.less
index c91c0a3a3..751072c78 100644
--- a/src/UI/Components/Template/Topline.less
+++ b/src/UI/Components/Template/Topline.less
@@ -24,12 +24,4 @@
             margin-right: 20px;
         }
     }
-    .bp3-dialog-footer{
-        &>div:first-child{
-            align-items: center;
-            button{
-               align-self: stretch;
-            }
-        }
-    }
 }
diff --git a/src/UI/Components/Template/ToplineManage.tsx b/src/UI/Components/Template/ToplineManage.tsx
index 8e5cf6092..8609bab40 100644
--- a/src/UI/Components/Template/ToplineManage.tsx
+++ b/src/UI/Components/Template/ToplineManage.tsx
@@ -1,15 +1,13 @@
-import { Button, Classes, Icon, Intent, Label, MenuItem } from '@blueprintjs/core';
+import { Button, Classes, Icon, Intent, MenuItem } from '@blueprintjs/core';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Matrix4 } from 'three';
 import { buildTopline } from '../../../Add-on/DrawTopline';
 import { app } from '../../../ApplicationServices/Application';
-import { EBoardKeyList } from '../../../Common/BoardKeyList';
 import { ToplineUrls } from '../../../Common/HostUrl';
 import { DirectoryId, PostJson, RequestStatus } from '../../../Common/Request';
 import { deflate, getPolylineSVG, inflate, toplineFileIn } from '../../../Common/SerializeMaterial';
-import { Board } from '../../../DatabaseServices/Entity/Board';
 import { CADFiler } from '../../../DatabaseServices/CADFiler';
 import { Polyline } from '../../../DatabaseServices/Entity/Polyline';
 import { commandMachine } from '../../../Editor/CommandMachine';
@@ -18,6 +16,7 @@ import { MoveMatrix } from '../../../Geometry/GeUtils';
 import { CommonPanel, IDirectoryProps } from '../SourceManage/CommonPanel';
 import { HandleDirComponent } from '../SourceManage/HandleDirComponent';
 import { AppToaster } from '../Toaster';
+import GetRoomCabName from './GetRoomCabName';
 import { ToplineList } from './ToplineList';
 
 interface ITopllineManageProps
@@ -184,25 +183,6 @@ export class TopllineManage extends React.Component<ITopllineManageProps, ITopll
             commandMachine.CommandEnd();
         }
     }
-    private getOption = async () =>
-    {
-        app.Editor.ModalManage.ToggleShow();
-        app.Editor.MaskManage.Clear();
-
-        let enRes = await app.Editor.GetEntity({
-            Msg: "选择要拾取的板件",
-            Filter: { filterTypes: [Board] }
-        });
-
-        if (enRes.Status === PromptStatus.OK && enRes.Entity)
-        {
-            let option = (enRes.Entity as Board).BoardProcessOption;
-            this.option.roomName = option[EBoardKeyList.RoomName];
-            this.option.cabName = option[EBoardKeyList.CabinetName];
-        }
-        app.Editor.ModalManage.ToggleShow();
-        app.Editor.MaskManage.ShowMask();
-    }
     private startCreateTopline = () =>
     {
         this.selectedTpId.set("");
@@ -287,29 +267,9 @@ export class TopllineManage extends React.Component<ITopllineManageProps, ITopll
                         </CommonPanel>
                     </div>
                     <div className={Classes.DIALOG_FOOTER} >
-                        <div className="flex">
-                            <div>
-                                <Label className={Classes.INLINE}>
-                                    <span>房名</span>
-                                    <input
-                                        type="text"
-                                        className={Classes.INPUT}
-                                        value={this.option.roomName}
-                                        onChange={e => this.option.roomName = e.target.value}
-                                    />
-                                </Label>
-                                <Label className={Classes.INLINE}>
-                                    <span>柜名</span>
-                                    <input
-                                        className={Classes.INPUT}
-                                        value={this.option.cabName}
-                                        onChange={e => this.option.cabName = e.target.value}
-                                    />
-                                </Label>
-                            </div>
-                            <Button text="拾取" intent={Intent.SUCCESS} onClick={this.getOption} />
-                            {/* <Checkbox label="智能拾取" inline /> */}
-                        </div>
+                        <GetRoomCabName
+                            option={this.option}
+                        />
                         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
                             <Button
                                 className={Classes.INTENT_SUCCESS}