From e51eb35ca5fdb7594906f5f833bcf6991a26eb06 Mon Sep 17 00:00:00 2001
From: maxmon <541182180@qq.com>
Date: Wed, 21 Apr 2021 03:21:34 +0800
Subject: [PATCH 1/2] =?UTF-8?q?v1.2.3=201=E3=80=81=E6=94=B9=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E9=A2=9C=E8=89=B2=E9=80=89=E6=8B=A9=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=9B=202=E3=80=81=E5=8A=A0=E7=BF=BB=E9=A1=B5=EF=BC=9B=203?=
 =?UTF-8?q?=E3=80=81=E5=8A=A0=E6=A0=87=E9=A2=98=E6=B7=BB=E5=8A=A0=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=EF=BC=9B=204=E3=80=81=E5=8A=A0=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=EF=BC=9B=205=E3=80=81=E6=94=B9=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E6=A0=B7=E5=BC=8F=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/config/index.js               |   2 +-
 fe/src/components/NER/index.vue  | 135 +++++++++++++++++++++++--------
 fe/src/components/home/index.vue |  15 ++--
 3 files changed, 113 insertions(+), 39 deletions(-)

diff --git a/fe/config/index.js b/fe/config/index.js
index ea26f50..6c25a32 100644
--- a/fe/config/index.js
+++ b/fe/config/index.js
@@ -54,7 +54,7 @@ module.exports = {
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/dw-tool-ner/v1.2.2/',
+    assetsPublicPath: '/dw-tool-ner/v1.2.3/',
 
     /**
      * Source Maps
diff --git a/fe/src/components/NER/index.vue b/fe/src/components/NER/index.vue
index ea60cb4..382d4dd 100644
--- a/fe/src/components/NER/index.vue
+++ b/fe/src/components/NER/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div class="layout">
     <span class="home" @click="goHome">whaleAnno</span>
     <h1 class="out-title">{{projectName}}（{{projectType}}）</h1>
-    <div class="layout" @dragover="stopPrev" @drop="setFiles($event)">
+    <div class="container" @dragover="stopPrev" @drop="setFiles($event)">
       <div class="left">
         <div class="file-list">
           <div v-for="file in files" :key="file" @click="setNowText(file)"
@@ -11,11 +11,16 @@
             {{ file }}
           </div>
         </div>
+        <div class="page-ctl">
+          <span class="page-ctl-last" :style="{opacity: pageNumber === 1 ? 0 : 1}" @click="lastPage">上页</span>
+          <span class="page-number">{{pageNumber}}</span>
+          <span class="page-ctl-next" :style="{opacity: files.length < pageSize ? 0 : 1}" @click="nextPage">下页</span>
+        </div>
         <div class="out-btn" @click="outAllNers">导出json结果</div>
       </div>
       <div class="right">
         <div class="title">
-          <span>{{ nowFile }}</span>
+          <span>选择标签：</span>
           <div class="type-box">
             <span v-for="type in typeList" :key="type" @click="setType(type)" @contextmenu="delType(type, $event)" :class="nowType===type?'type selected':'type'"
               :style="{
@@ -24,10 +29,15 @@
               @mouseover="setFocus(type)"
               @mouseleave="setFocus('')"
             >
-              <input class="color-input" :value="types[type].color" type="color" @change="changeColor(type, $event)" @click.stop/>
+              <svg t="1618942541356" @click.stop="clickColor(type, $event)" class="color-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1686" width="18" height="18"><path d="M204.4 524.9c-14.5 1.5-26.2 13.2-27.7 27.7-2.1 19.9 14.6 36.7 34.6 34.6 14.5-1.5 26.2-13.2 27.8-27.8 2-19.9-14.8-36.6-34.7-34.5zM265.4 473.7c21.8-1.9 39.4-19.5 41.4-41.4 2.5-28.5-21.2-52.3-49.7-49.7-21.8 1.9-39.4 19.5-41.4 41.4-2.6 28.4 21.2 52.2 49.7 49.7zM415.8 266.9c-28.5 1.8-51.6 24.9-53.4 53.4-2.2 34.5 26.4 63.1 60.9 60.9 28.5-1.8 51.6-24.9 53.4-53.4 2.1-34.6-26.4-63.1-60.9-60.9zM621.9 253.8c-35.1 2.2-63.4 30.6-65.6 65.6-2.7 42.4 32.4 77.6 74.8 74.8 35.1-2.2 63.4-30.6 65.6-65.6 2.8-42.4-32.3-77.5-74.8-74.8zM966.5 276.4c-0.5-7.6-4-14.6-9.8-19.6l-0.7-0.6c-5.2-4.5-11.9-7-18.8-7-8.3 0-16.2 3.6-21.6 9.9L574 652.4l-43.5 85.5 1.1 0.9-4.9 11.3 11.1-5.9 1.5 1.3 78-54.3 342.3-394c5-5.8 7.4-13.2 6.9-20.8z" p-id="1687" fill="#2c3e50"></path><path d="M897.8 476.3c-13.8-1.4-26.7 7.4-30.4 20.7-6.9 24.6-19.3 64.5-35.1 97.8C809.5 643 767.4 710.1 696.7 756c-72.2 46.9-142.7 56.7-189.2 56.7-37 0-72.2-6.1-101.7-17.7-26.9-10.5-46.4-24.6-54.9-39.7-3.4-6.1-7.2-12.9-11.2-20.2-17.2-31.1-36.6-66.5-49.7-77.4-15.9-13.2-39.1-15-59.8-15-8.1 0-40.8 1.3-48.5 1.3-33.1 0-49.4-6.5-56.1-22.4-17.8-42.3-7.3-114.3 26.8-183.4C205.2 331.4 300 253.3 412.6 224c40-10.6 81.2-18.9 121.3-18.9 85.6 0 187.8 32.8 252.5 77.2 11.4 7.8 26.9 5.8 35.7-4.9 10.4-12.6 7.1-31.4-6.8-39.8-23.3-14-57.9-34-86.3-47.1-60.3-27.9-123.7-41.9-189.2-41.9-68.1 0-148.8 16.4-217.2 47.2-78.1 35-135.2 85-179.4 147.5-36.4 51.4-67.8 111.1-80.1 168.7-7.5 35.1-6.8 57.4-2.4 87.8 4.2 29.2 13.4 52.5 26.9 67.5 22.4 25.1 51.5 37.4 89 37.4 13.9 0 56.3-5 63.1-5 7.4 0 12.2 1.2 14.4 3.8 6.4 7.4 14.4 22.4 23.7 39.9 7.5 14.1 15.9 30.1 25.4 45.3 12.1 19.5 36.9 40.4 66.5 55.9 27 14.1 71.9 31 132.2 31 72 0 148.3-23.6 226.7-70.1 74.9-44.4 123-118.9 150.2-173.6 19-38.3 34.7-87.2 43.8-119.1 4.8-17.3-7-34.7-24.8-36.5z" p-id="1688" fill="#2c3e50"></path></svg>
+              <input :id="type" class="color-input" :value="types[type].color" type="color" @change="changeColor(type, $event)" @click.stop/>
               {{ type }} {{ fastTypeKey[type] ? `【${fastTypeKey[type]}】` : '' }}
+              <svg t="1618943942999" class="close-icon" @click="checkDelType(type, $event)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3793" width="18" height="18"><path d="M512 421.504l274.752-274.752 90.496 90.496L602.496 512l274.752 274.752-90.496 90.496L512 602.496l-274.752 274.752-90.496-90.496L421.504 512 146.752 237.248l90.496-90.496z" p-id="3794" fill="#ff0000"></path></svg>
+            </span>
+            <span class="type-input-box">
+              <input class="type-input" id="type-input" placeholder="新增标签" @keypress="typeInput" @change="typeInput"/>
+              <button class="page-btn" @click="addType">提交</button>
             </span>
-            <input class="type-input" placeholder="新增标签" @blur="addType" @keypress="typeInput"/>
           </div>
         </div>
         <div id="ner-box" class="ner-box" @mouseup="setMode('')" @mouseleave="setMode('');setFocus('')" @keydown="setTypeByFastKey" @mouseover="setFocus('ner-box')">
@@ -69,8 +79,8 @@
           </span>
         </div>
         <div class="page-btn-box">
-          <button class="page-btn" @click="changePage(-1)" @mouseover="setFocus('page-up')" @mouseleave="setFocus('')">上一页 {{ fastTypeKey['page-up'] ? `【${fastTypeKey['page-up']}】` : '' }}</button>
-          <button class="page-btn" @click="changePage(+1)" @mouseover="setFocus('page-down')" @mouseleave="setFocus('')">下一页 {{ fastTypeKey['page-down'] ? `【${fastTypeKey['page-down']}】` : '' }}</button>
+          <button class="page-btn" @click="changeIdx(-1)" @mouseover="setFocus('page-up')" @mouseleave="setFocus('')">上一个 {{ fastTypeKey['page-up'] ? `【${fastTypeKey['page-up']}】` : '' }}</button>
+          <button class="page-btn" @click="changeIdx(+1)" @mouseover="setFocus('page-down')" @mouseleave="setFocus('')">下一个 {{ fastTypeKey['page-down'] ? `【${fastTypeKey['page-down']}】` : '' }}</button>
           <button class="page-btn"
             :disabled="!nersCache[nowFile] || JSON.stringify(nersCache[nowFile]) === JSON.stringify(ners)"
             @click="save" @mouseover="setFocus('save')" @mouseleave="setFocus('')"
@@ -144,6 +154,9 @@ export default {
   name: 'NER',
   data () {
     return {
+      pageNumber: 1,
+      pageSize: 20,
+      inputType: '',
       projectName: '', // 项目名称
       projectType: '', // 项目类型
       columnWordCount: 10, // 每列的字数，会自动计算
@@ -193,6 +206,24 @@ export default {
     }
   },
   methods: {
+    lastPage () {
+      const that = this
+      if (that.pageNumber > 1) {
+        that.pageNumber = that.pageNumber - 1
+        get(`/v1/files/query?projectName=${that.projectName}&pageNumber=${that.pageNumber}&pageSize=${that.pageSize}`, function (info) {
+          that.$set(that, 'files', info)
+        })
+      }
+    },
+    nextPage () {
+      const that = this
+      if (that.files.length === that.pageSize) {
+        that.pageNumber = that.pageNumber + 1
+        get(`/v1/files/query?projectName=${that.projectName}&pageNumber=${that.pageNumber}&pageSize=${that.pageSize}`, function (info) {
+          that.$set(that, 'files', info)
+        })
+      }
+    },
     goHome: function () {
       this.$router.push({path: '/'})
     },
@@ -230,7 +261,7 @@ export default {
         that.nowText = that.textDic[newFile]
       })
     },
-    changePage: function (d) {
+    changeIdx: function (d) {
       const nowIdx = this.files.indexOf(this.nowFile)
       let newIdx = nowIdx + d
       if (newIdx < 0) newIdx = 0
@@ -261,7 +292,7 @@ export default {
     },
     delType: function (type, ev) {
       const that = this
-      ev.preventDefault() // 取消默认的右键菜单事件
+      ev && ev.preventDefault() // 取消默认的右键菜单事件
       // 右键删除对应的类型
       const newTypes = {}
       const newTypeList = []
@@ -278,14 +309,22 @@ export default {
       that.flushWordsType()
       updateType2Server(that.projectName, that.typeList, that.types)
     },
+    checkDelType: function (type, ev) {
+      ev && ev.stopPropagation()
+      const isDel = window.confirm(`确定删除标签【${type}】么？`)
+      if (isDel) {
+        this.delType(type)
+      }
+    },
     /**
      * 增加类型
      * @param 类型
      */
-    addType: function (ev) {
+    addType: function () {
       const that = this
-      const newType = ev.target.value
-      ev.target.value = ''
+      const newType = that.inputType
+      document.getElementById('type-input').value = ''
+      that.inputType = ''
       if (!newType) return false
       if (that.types[newType]) return false
       that.$set(that.types, newType, {
@@ -295,6 +334,7 @@ export default {
       updateType2Server(that.projectName, that.typeList, that.types)
     },
     typeInput: function (ev) {
+      this.inputType = ev.target.value
       if (ev.code === 'Enter' || ev.code === 'NumpadEnter') {
         this.addType(ev)
       }
@@ -445,6 +485,9 @@ export default {
     setFocus (tar) {
       this.nowFocus = tar
     },
+    clickColor (type) {
+      document.getElementById(type).click()
+    },
     // 切换颜色
     changeColor (tarType, ev) {
       const that = this
@@ -487,7 +530,7 @@ export default {
         return entityType.type
       })
       that.types = types
-      get(`/v1/files/query?projectName=${projectName}&pageNumber=1&pageSize=99999999`, function (info) {
+      get(`/v1/files/query?projectName=${projectName}&pageNumber=${that.pageNumber}&pageSize=${that.pageSize}`, function (info) {
         that.$set(that, 'files', info)
       })
     }
@@ -509,11 +552,11 @@ export default {
           const type = that.fastKeyType[key]
           if (type) {
             if (type === 'page-up') {
-              // 快捷上一页
-              that.changePage(-1)
+              // 快捷上一个
+              that.changeIdx(-1)
             } else if (type === 'page-down') {
-              // 快捷下一页
-              that.changePage(+1)
+              // 快捷下一个
+              that.changeIdx(+1)
             } else if (type === 'save') {
               // 保存
               that.save()
@@ -551,12 +594,14 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  padding: 5px 10px;
+  height: 92px;
+  padding: 0 10px;
+  line-height: 92px;
+  font-size: 28px;
   color: #fff;
   cursor: pointer;
-}
-.home:hover {
-  opacity: .6;
+  font-weight: 700;
+  vertical-align: center;
 }
 .out-title {
   display: inline-block;
@@ -566,12 +611,17 @@ export default {
   width: 100%;
   height: 92px;
   line-height: 92px;
-  border-bottom: 2px solid #ccc;
+  font-size: 28px;
   box-sizing: border-box;
   vertical-align: middle;
 }
 .layout {
   display: flex;
+  flex-direction: column;
+}
+.container {
+  display: flex;
+  flex: 1 1;
   flex-direction: row;
   height: calc(100% - 92px);
 }
@@ -598,9 +648,10 @@ export default {
 }
 .left .file-list {
   overflow: auto;
-  height: calc(100% - 41px);
+  height: calc(100% - 82px);
 }
-.left .out-btn {
+.left .out-btn,
+.left .page-ctl {
   position: absolute;
   display: inline-block;
   bottom: 0;
@@ -612,7 +663,17 @@ export default {
   margin: auto;
   cursor: pointer;
   background: #054ba8;
+  user-select: none;
 }
+.left .page-ctl {
+  bottom: 41px;
+  cursor: default;
+}
+.left .page-ctl .page-number {
+  min-width: 2em;
+}
+.left .page-ctl-last:hover,
+.left .page-ctl-next:hover,
 .left .out-btn:hover {
   opacity: .6;
 }
@@ -643,6 +704,9 @@ export default {
   vertical-align: middle;
   outline:none;
 }
+.type-input-box {
+  display: inline-block;
+}
 .page-btn {
   cursor: pointer;
   opacity: 1;
@@ -656,6 +720,7 @@ export default {
   background: white;
 }
 .type {
+  position: relative;
   box-sizing: content-box;
   /* box-shadow: 2px 2px 0px #ccc; */
   border: 1px solid #ccc;
@@ -746,13 +811,19 @@ export default {
 }
 
 .color-input {
-  margin: 0;
-  outline: none;
-  border: 0px;
-  padding: 0;
-  width: 18px;
-  height: 22px;
-  line-height: 32px;
-  background-color: #0000;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.color-icon {
+  float: right;
+  display: inline-block;
+  margin-top: 6px;
+}
+.close-icon {
+  position: absolute;
+  top: -9px;
+  right: -9px;
 }
 </style>
diff --git a/fe/src/components/home/index.vue b/fe/src/components/home/index.vue
index 0ed6e0f..cc60e28 100644
--- a/fe/src/components/home/index.vue
+++ b/fe/src/components/home/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="layout">
     <h1 class="out-title"><span class="home" @click="goHome">whaleAnno</span></h1>
-    <div class="layout">
+    <div class="container">
       <div v-if="page==='list'" class="project-box">
         <div class="project-box-titile">
           <h3 class="inner-title">我的项目</h3>
@@ -143,15 +143,18 @@ export default {
   vertical-align: middle;
 }
 .home {
+  font-size: 28px;
   cursor: pointer;
 }
-.home:hover {
-  opacity: 0.6;
-}
 .layout {
   display: flex;
+  flex-direction: column;
+}
+.container {
+  display: flex;
+  flex: 1 1;
   flex-direction: row;
-  height: calc(100% - 92px);
+  /* height: calc(100% - 92px); */
 }
 .button {
   color: #fff;

From fd45194e188c01eda9539f7b1cc33ab8243d31ec Mon Sep 17 00:00:00 2001
From: maxmon <541182180@qq.com>
Date: Sat, 24 Apr 2021 10:35:44 +0800
Subject: [PATCH 2/2] =?UTF-8?q?v1.2.4=201=E3=80=81=E5=A2=9E=E5=8A=A0/?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=A0=87=E6=B3=A8=E5=AE=9E=E6=97=B6=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=EF=BC=9B=202=E3=80=81=E5=AE=9E=E4=BD=93=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E6=9B=B4=E6=96=B0=E6=8D=A2=E5=88=B0=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B5=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/config/index.js               |   2 +-
 fe/src/components/NER/index.vue  |  20 ++-
 fe/src/components/home/index.vue | 204 +++++++++++++++++++++++++++----
 3 files changed, 192 insertions(+), 34 deletions(-)

diff --git a/fe/config/index.js b/fe/config/index.js
index 6c25a32..86e3578 100644
--- a/fe/config/index.js
+++ b/fe/config/index.js
@@ -54,7 +54,7 @@ module.exports = {
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/dw-tool-ner/v1.2.3/',
+    assetsPublicPath: '/dw-tool-ner/v1.2.4/',
 
     /**
      * Source Maps
diff --git a/fe/src/components/NER/index.vue b/fe/src/components/NER/index.vue
index 382d4dd..a4f252b 100644
--- a/fe/src/components/NER/index.vue
+++ b/fe/src/components/NER/index.vue
@@ -29,12 +29,12 @@
               @mouseover="setFocus(type)"
               @mouseleave="setFocus('')"
             >
-              <svg t="1618942541356" @click.stop="clickColor(type, $event)" class="color-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1686" width="18" height="18"><path d="M204.4 524.9c-14.5 1.5-26.2 13.2-27.7 27.7-2.1 19.9 14.6 36.7 34.6 34.6 14.5-1.5 26.2-13.2 27.8-27.8 2-19.9-14.8-36.6-34.7-34.5zM265.4 473.7c21.8-1.9 39.4-19.5 41.4-41.4 2.5-28.5-21.2-52.3-49.7-49.7-21.8 1.9-39.4 19.5-41.4 41.4-2.6 28.4 21.2 52.2 49.7 49.7zM415.8 266.9c-28.5 1.8-51.6 24.9-53.4 53.4-2.2 34.5 26.4 63.1 60.9 60.9 28.5-1.8 51.6-24.9 53.4-53.4 2.1-34.6-26.4-63.1-60.9-60.9zM621.9 253.8c-35.1 2.2-63.4 30.6-65.6 65.6-2.7 42.4 32.4 77.6 74.8 74.8 35.1-2.2 63.4-30.6 65.6-65.6 2.8-42.4-32.3-77.5-74.8-74.8zM966.5 276.4c-0.5-7.6-4-14.6-9.8-19.6l-0.7-0.6c-5.2-4.5-11.9-7-18.8-7-8.3 0-16.2 3.6-21.6 9.9L574 652.4l-43.5 85.5 1.1 0.9-4.9 11.3 11.1-5.9 1.5 1.3 78-54.3 342.3-394c5-5.8 7.4-13.2 6.9-20.8z" p-id="1687" fill="#2c3e50"></path><path d="M897.8 476.3c-13.8-1.4-26.7 7.4-30.4 20.7-6.9 24.6-19.3 64.5-35.1 97.8C809.5 643 767.4 710.1 696.7 756c-72.2 46.9-142.7 56.7-189.2 56.7-37 0-72.2-6.1-101.7-17.7-26.9-10.5-46.4-24.6-54.9-39.7-3.4-6.1-7.2-12.9-11.2-20.2-17.2-31.1-36.6-66.5-49.7-77.4-15.9-13.2-39.1-15-59.8-15-8.1 0-40.8 1.3-48.5 1.3-33.1 0-49.4-6.5-56.1-22.4-17.8-42.3-7.3-114.3 26.8-183.4C205.2 331.4 300 253.3 412.6 224c40-10.6 81.2-18.9 121.3-18.9 85.6 0 187.8 32.8 252.5 77.2 11.4 7.8 26.9 5.8 35.7-4.9 10.4-12.6 7.1-31.4-6.8-39.8-23.3-14-57.9-34-86.3-47.1-60.3-27.9-123.7-41.9-189.2-41.9-68.1 0-148.8 16.4-217.2 47.2-78.1 35-135.2 85-179.4 147.5-36.4 51.4-67.8 111.1-80.1 168.7-7.5 35.1-6.8 57.4-2.4 87.8 4.2 29.2 13.4 52.5 26.9 67.5 22.4 25.1 51.5 37.4 89 37.4 13.9 0 56.3-5 63.1-5 7.4 0 12.2 1.2 14.4 3.8 6.4 7.4 14.4 22.4 23.7 39.9 7.5 14.1 15.9 30.1 25.4 45.3 12.1 19.5 36.9 40.4 66.5 55.9 27 14.1 71.9 31 132.2 31 72 0 148.3-23.6 226.7-70.1 74.9-44.4 123-118.9 150.2-173.6 19-38.3 34.7-87.2 43.8-119.1 4.8-17.3-7-34.7-24.8-36.5z" p-id="1688" fill="#2c3e50"></path></svg>
+              <svg v-if="configCanCtlType" t="1618942541356" @click.stop="clickColor(type, $event)" class="color-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1686" width="18" height="18"><path d="M204.4 524.9c-14.5 1.5-26.2 13.2-27.7 27.7-2.1 19.9 14.6 36.7 34.6 34.6 14.5-1.5 26.2-13.2 27.8-27.8 2-19.9-14.8-36.6-34.7-34.5zM265.4 473.7c21.8-1.9 39.4-19.5 41.4-41.4 2.5-28.5-21.2-52.3-49.7-49.7-21.8 1.9-39.4 19.5-41.4 41.4-2.6 28.4 21.2 52.2 49.7 49.7zM415.8 266.9c-28.5 1.8-51.6 24.9-53.4 53.4-2.2 34.5 26.4 63.1 60.9 60.9 28.5-1.8 51.6-24.9 53.4-53.4 2.1-34.6-26.4-63.1-60.9-60.9zM621.9 253.8c-35.1 2.2-63.4 30.6-65.6 65.6-2.7 42.4 32.4 77.6 74.8 74.8 35.1-2.2 63.4-30.6 65.6-65.6 2.8-42.4-32.3-77.5-74.8-74.8zM966.5 276.4c-0.5-7.6-4-14.6-9.8-19.6l-0.7-0.6c-5.2-4.5-11.9-7-18.8-7-8.3 0-16.2 3.6-21.6 9.9L574 652.4l-43.5 85.5 1.1 0.9-4.9 11.3 11.1-5.9 1.5 1.3 78-54.3 342.3-394c5-5.8 7.4-13.2 6.9-20.8z" p-id="1687" fill="#2c3e50"></path><path d="M897.8 476.3c-13.8-1.4-26.7 7.4-30.4 20.7-6.9 24.6-19.3 64.5-35.1 97.8C809.5 643 767.4 710.1 696.7 756c-72.2 46.9-142.7 56.7-189.2 56.7-37 0-72.2-6.1-101.7-17.7-26.9-10.5-46.4-24.6-54.9-39.7-3.4-6.1-7.2-12.9-11.2-20.2-17.2-31.1-36.6-66.5-49.7-77.4-15.9-13.2-39.1-15-59.8-15-8.1 0-40.8 1.3-48.5 1.3-33.1 0-49.4-6.5-56.1-22.4-17.8-42.3-7.3-114.3 26.8-183.4C205.2 331.4 300 253.3 412.6 224c40-10.6 81.2-18.9 121.3-18.9 85.6 0 187.8 32.8 252.5 77.2 11.4 7.8 26.9 5.8 35.7-4.9 10.4-12.6 7.1-31.4-6.8-39.8-23.3-14-57.9-34-86.3-47.1-60.3-27.9-123.7-41.9-189.2-41.9-68.1 0-148.8 16.4-217.2 47.2-78.1 35-135.2 85-179.4 147.5-36.4 51.4-67.8 111.1-80.1 168.7-7.5 35.1-6.8 57.4-2.4 87.8 4.2 29.2 13.4 52.5 26.9 67.5 22.4 25.1 51.5 37.4 89 37.4 13.9 0 56.3-5 63.1-5 7.4 0 12.2 1.2 14.4 3.8 6.4 7.4 14.4 22.4 23.7 39.9 7.5 14.1 15.9 30.1 25.4 45.3 12.1 19.5 36.9 40.4 66.5 55.9 27 14.1 71.9 31 132.2 31 72 0 148.3-23.6 226.7-70.1 74.9-44.4 123-118.9 150.2-173.6 19-38.3 34.7-87.2 43.8-119.1 4.8-17.3-7-34.7-24.8-36.5z" p-id="1688" fill="#2c3e50"></path></svg>
               <input :id="type" class="color-input" :value="types[type].color" type="color" @change="changeColor(type, $event)" @click.stop/>
               {{ type }} {{ fastTypeKey[type] ? `【${fastTypeKey[type]}】` : '' }}
-              <svg t="1618943942999" class="close-icon" @click="checkDelType(type, $event)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3793" width="18" height="18"><path d="M512 421.504l274.752-274.752 90.496 90.496L602.496 512l274.752 274.752-90.496 90.496L512 602.496l-274.752 274.752-90.496-90.496L421.504 512 146.752 237.248l90.496-90.496z" p-id="3794" fill="#ff0000"></path></svg>
+              <svg v-if="configCanCtlType" t="1618943942999" class="close-icon" @click="checkDelType(type, $event)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3793" width="18" height="18"><path d="M512 421.504l274.752-274.752 90.496 90.496L602.496 512l274.752 274.752-90.496 90.496L512 602.496l-274.752 274.752-90.496-90.496L421.504 512 146.752 237.248l90.496-90.496z" p-id="3794" fill="#ff0000"></path></svg>
             </span>
-            <span class="type-input-box">
+            <span v-if="configCanCtlType" class="type-input-box">
               <input class="type-input" id="type-input" placeholder="新增标签" @keypress="typeInput" @change="typeInput"/>
               <button class="page-btn" @click="addType">提交</button>
             </span>
@@ -81,10 +81,6 @@
         <div class="page-btn-box">
           <button class="page-btn" @click="changeIdx(-1)" @mouseover="setFocus('page-up')" @mouseleave="setFocus('')">上一个 {{ fastTypeKey['page-up'] ? `【${fastTypeKey['page-up']}】` : '' }}</button>
           <button class="page-btn" @click="changeIdx(+1)" @mouseover="setFocus('page-down')" @mouseleave="setFocus('')">下一个 {{ fastTypeKey['page-down'] ? `【${fastTypeKey['page-down']}】` : '' }}</button>
-          <button class="page-btn"
-            :disabled="!nersCache[nowFile] || JSON.stringify(nersCache[nowFile]) === JSON.stringify(ners)"
-            @click="save" @mouseover="setFocus('save')" @mouseleave="setFocus('')"
-          >保存 {{ fastTypeKey['save'] ? `【${fastTypeKey['save']}】` : '' }}</button>
         </div>
       </div>
       <div class="result-box">
@@ -154,6 +150,7 @@ export default {
   name: 'NER',
   data () {
     return {
+      configCanCtlType: false, // 是否支持实体类型的调整
       pageNumber: 1,
       pageSize: 20,
       inputType: '',
@@ -291,6 +288,7 @@ export default {
       this.$set(this, 'nowType', type)
     },
     delType: function (type, ev) {
+      if (!this.configCanCtlType) return false
       const that = this
       ev && ev.preventDefault() // 取消默认的右键菜单事件
       // 右键删除对应的类型
@@ -310,6 +308,7 @@ export default {
       updateType2Server(that.projectName, that.typeList, that.types)
     },
     checkDelType: function (type, ev) {
+      if (!this.configCanCtlType) return false
       ev && ev.stopPropagation()
       const isDel = window.confirm(`确定删除标签【${type}】么？`)
       if (isDel) {
@@ -387,6 +386,7 @@ export default {
             ners.splice(i, 1)
             this.$set(this, 'ners', ners)
             this.flushWordsType()
+            this.save() // 删除时实时保存
             return true
           }
         }
@@ -419,6 +419,7 @@ export default {
       this.$set(this, 'nowNer', undefined)
       this.flushWordsType()
       this.startIdx = -1
+      this.save() // 添加时实时保存
     },
     stopPrev: function (event) {
       event.preventDefault()
@@ -557,9 +558,6 @@ export default {
             } else if (type === 'page-down') {
               // 快捷下一个
               that.changeIdx(+1)
-            } else if (type === 'save') {
-              // 保存
-              that.save()
             } else {
               // 快捷选择类型
               const type = that.fastKeyType[key]
@@ -817,8 +815,8 @@ export default {
   pointer-events: none;
 }
 .color-icon {
+  display: block;
   float: right;
-  display: inline-block;
   margin-top: 6px;
 }
 .close-icon {
diff --git a/fe/src/components/home/index.vue b/fe/src/components/home/index.vue
index cc60e28..6355f05 100644
--- a/fe/src/components/home/index.vue
+++ b/fe/src/components/home/index.vue
@@ -12,8 +12,8 @@
         <div class="list-box">
           <div v-if="projects.length === 0" class="project" style="border:none;color:#ccc;">暂无</div>
           <div class="project" v-for="project in projects" :key="project.projectName">
-            <p class="name">{{project.projectName}}</p>
-            <p class="type">{{project.projectType}}</p>
+            <p class="projectName">{{project.projectName}}</p>
+            <p class="projectType">{{project.projectType}}</p>
             <div class="btn-area">
               <button class="button" @click="toNerAnno(project)">开始标注</button>
               <button class="button" @click="toEdit(project)">配置</button>
@@ -22,12 +22,32 @@
         </div>
       </div>
       <div v-if="page==='edit' || page==='create'" class="edit-box">
-        <p>名称：<input class="name-input" type="text" name="name" @change="setName" :value="name" :disabled="page==='edit'"/></p>
+        <p>名称：<input class="name-input" type="text" name="name" @change="setName" :value="projectName" :disabled="page==='edit'"/></p>
         <p>类型：
-          <select class="type-input" name="type" @change="setType" :value="type">
+          <select class="type-input" name="type" @change="setType" :value="projectType">
             <option value ="命名实体识别">命名实体识别</option>
           </select>
         </p>
+        <div class="title">
+          <span>选择标签：</span>
+          <br/>
+          <div class="type-box">
+            <span v-for="type in typeList" :key="type" @contextmenu="delType(type, $event)" class="type"
+              :style="{
+                backgroundColor: types[type] ? types[type].color : '#fff'
+              }"
+            >
+              <svg t="1618942541356" @click.stop="clickColor(type, $event)" class="color-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1686" width="18" height="18"><path d="M204.4 524.9c-14.5 1.5-26.2 13.2-27.7 27.7-2.1 19.9 14.6 36.7 34.6 34.6 14.5-1.5 26.2-13.2 27.8-27.8 2-19.9-14.8-36.6-34.7-34.5zM265.4 473.7c21.8-1.9 39.4-19.5 41.4-41.4 2.5-28.5-21.2-52.3-49.7-49.7-21.8 1.9-39.4 19.5-41.4 41.4-2.6 28.4 21.2 52.2 49.7 49.7zM415.8 266.9c-28.5 1.8-51.6 24.9-53.4 53.4-2.2 34.5 26.4 63.1 60.9 60.9 28.5-1.8 51.6-24.9 53.4-53.4 2.1-34.6-26.4-63.1-60.9-60.9zM621.9 253.8c-35.1 2.2-63.4 30.6-65.6 65.6-2.7 42.4 32.4 77.6 74.8 74.8 35.1-2.2 63.4-30.6 65.6-65.6 2.8-42.4-32.3-77.5-74.8-74.8zM966.5 276.4c-0.5-7.6-4-14.6-9.8-19.6l-0.7-0.6c-5.2-4.5-11.9-7-18.8-7-8.3 0-16.2 3.6-21.6 9.9L574 652.4l-43.5 85.5 1.1 0.9-4.9 11.3 11.1-5.9 1.5 1.3 78-54.3 342.3-394c5-5.8 7.4-13.2 6.9-20.8z" p-id="1687" fill="#2c3e50"></path><path d="M897.8 476.3c-13.8-1.4-26.7 7.4-30.4 20.7-6.9 24.6-19.3 64.5-35.1 97.8C809.5 643 767.4 710.1 696.7 756c-72.2 46.9-142.7 56.7-189.2 56.7-37 0-72.2-6.1-101.7-17.7-26.9-10.5-46.4-24.6-54.9-39.7-3.4-6.1-7.2-12.9-11.2-20.2-17.2-31.1-36.6-66.5-49.7-77.4-15.9-13.2-39.1-15-59.8-15-8.1 0-40.8 1.3-48.5 1.3-33.1 0-49.4-6.5-56.1-22.4-17.8-42.3-7.3-114.3 26.8-183.4C205.2 331.4 300 253.3 412.6 224c40-10.6 81.2-18.9 121.3-18.9 85.6 0 187.8 32.8 252.5 77.2 11.4 7.8 26.9 5.8 35.7-4.9 10.4-12.6 7.1-31.4-6.8-39.8-23.3-14-57.9-34-86.3-47.1-60.3-27.9-123.7-41.9-189.2-41.9-68.1 0-148.8 16.4-217.2 47.2-78.1 35-135.2 85-179.4 147.5-36.4 51.4-67.8 111.1-80.1 168.7-7.5 35.1-6.8 57.4-2.4 87.8 4.2 29.2 13.4 52.5 26.9 67.5 22.4 25.1 51.5 37.4 89 37.4 13.9 0 56.3-5 63.1-5 7.4 0 12.2 1.2 14.4 3.8 6.4 7.4 14.4 22.4 23.7 39.9 7.5 14.1 15.9 30.1 25.4 45.3 12.1 19.5 36.9 40.4 66.5 55.9 27 14.1 71.9 31 132.2 31 72 0 148.3-23.6 226.7-70.1 74.9-44.4 123-118.9 150.2-173.6 19-38.3 34.7-87.2 43.8-119.1 4.8-17.3-7-34.7-24.8-36.5z" p-id="1688" fill="#2c3e50"></path></svg>
+              <input :id="type" class="color-input" :value="types[type].color" type="color" @change="changeColor(type, $event)" @click.stop/>
+              {{ type }}
+              <svg t="1618943942999" class="close-icon" @click="checkDelType(type, $event)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3793" width="18" height="18"><path d="M512 421.504l274.752-274.752 90.496 90.496L602.496 512l274.752 274.752-90.496 90.496L512 602.496l-274.752 274.752-90.496-90.496L421.504 512 146.752 237.248l90.496-90.496z" p-id="3794" fill="#ff0000"></path></svg>
+            </span>
+            <span class="type-input-box">
+              <input class="type-input" id="type-input" placeholder="新增标签" @keypress="typeInput" @change="typeInput"/>
+              <button class="page-btn" @click="addType">提交</button>
+            </span>
+          </div>
+        </div>
         <p class="edit-box-btn-area">
           <button class="button" @click="submit">提交</button>
           <button class="button" @click="toList">取消</button>
@@ -38,9 +58,29 @@
 </template>
 
 <script>
+function getColor () {
+  const idxs = '0123456789abcdef'
+  let color = '#'
+  for (let i = 0; i < 6; i += 1) {
+    color += idxs[Math.random() * idxs.length | 0]
+  }
+  return color
+}
 function get (url, cb) {
   query('GET', url, '', cb)
 }
+function updateType2Server (projectName, typeList, types) {
+  const entityTypes = typeList.map((type) => {
+    return {
+      type,
+      color: types[type].color
+    }
+  })
+  post('/v1/project/update_entity_types', {
+    projectName: projectName,
+    entityTypes: JSON.stringify(entityTypes)
+  })
+}
 function post (url, data, cb) {
   query('POST', url, data, cb)
 }
@@ -66,39 +106,47 @@ export default {
   data () {
     return {
       projects: [],
-      name: '',
-      type: '',
-      page: 'list'
+      projectName: '',
+      projectType: '',
+      page: 'list',
+      types: {},
+      typeList: []
     }
   },
   computed: {
   },
   watch: {
-    name: console.log
+    projectName: console.log
   },
   methods: {
     goHome () {
       this.page = 'list'
     },
     setName (ev) {
-      this.name = ev.target.value
+      this.projectName = ev.target.value
     },
     setType (ev) {
-      this.type = ev.target.value
+      this.projectType = ev.target.value
     },
     submit () {
       const that = this
+      const newEntityTypes = that.typeList.map((type) => {
+        return {
+          type,
+          color: that.types[type].color
+        }
+      })
       post('/v1/project/create', {
-        projectName: that.name,
-        projectType: that.type,
-        entityTypes: ''
+        projectName: that.projectName,
+        projectType: that.projectType,
+        entityTypes: JSON.stringify(newEntityTypes)
       }, function () {
         that.type = ''
-        that.name = ''
+        that.projectName = ''
         get('/v1/index', function (info) {
           that.$set(that, 'projects', info)
-          that.name = ''
-          that.type = ''
+          that.projectName = ''
+          that.projectType = ''
           that.page = 'list'
         })
       })
@@ -109,13 +157,82 @@ export default {
     },
     toEdit (project = {}) {
       console.log('project', project)
-      this.name = project.projectName || ''
-      this.type = project.projectType || ''
+      this.projectName = project.projectName || ''
+      this.projectType = project.projectType || ''
       this.page = project.projectName ? 'edit' : 'create'
-      console.log(this.name, 'this.name')
+      // 配置对应的实体类型配置
+      const that = this
+      const entityTypes = project.entityTypes ? JSON.parse(project.entityTypes) : []
+      const types = {}
+      that.typeList = entityTypes.map((entityType) => {
+        types[entityType.type] = {
+          color: entityType.color
+        }
+        return entityType.type
+      })
+      that.types = types
     },
     toList () {
       this.page = 'list'
+    },
+    /**
+     * 增加类型
+     * @param 类型
+     */
+    addType: function () {
+      const that = this
+      const newType = that.inputType
+      document.getElementById('type-input').value = ''
+      that.inputType = ''
+      if (!newType) return false
+      if (that.types[newType]) return false
+      that.$set(that.types, newType, {
+        color: getColor()
+      })
+      that.typeList.push(newType)
+      console.log(that.typeList)
+      updateType2Server(that.projectName, that.typeList, that.types)
+    },
+    delType: function (type, ev) {
+      const that = this
+      ev && ev.preventDefault() // 取消默认的右键菜单事件
+      // 右键删除对应的类型
+      const newTypes = {}
+      const newTypeList = []
+      const { typeList, types } = that
+      for (let i = 0; i < typeList.length; i++) {
+        const srcType = typeList[i]
+        if (type !== srcType) {
+          newTypeList.push(srcType)
+          newTypes[srcType] = types[srcType]
+        }
+      }
+      that.typeList = newTypeList
+      that.types = newTypes
+      updateType2Server(that.projectName, that.typeList, that.types)
+    },
+    checkDelType: function (type, ev) {
+      ev && ev.stopPropagation()
+      const isDel = window.confirm(`确定删除标签【${type}】么？`)
+      if (isDel) {
+        this.delType(type)
+      }
+    },
+    typeInput: function (ev) {
+      this.inputType = ev.target.value
+      if (ev.code === 'Enter' || ev.code === 'NumpadEnter') {
+        this.addType(ev)
+      }
+    },
+    clickColor (type) {
+      document.getElementById(type).click()
+    },
+    // 切换颜色
+    changeColor (tarType, ev) {
+      const that = this
+      console.log(tarType, ev.target.value)
+      that.$set(that.types[tarType], 'color', ev.target.value)
+      updateType2Server(that.projectName, that.typeList, that.types)
     }
   },
   mounted () {
@@ -195,8 +312,8 @@ export default {
   text-align: left;
   border: 1px solid #ccc;
 }
-.project .name,
-.project .type {
+.project .projectName,
+.project .projectType {
   margin: 0;
 }
 .edit-box {
@@ -217,7 +334,7 @@ export default {
   justify-content: space-evenly;
   margin-top: 20px;
 }
-.project .type {
+.project .projectType {
   margin-top: 5px;
   font-size: 12px;
 }
@@ -230,4 +347,47 @@ export default {
   line-height: 60px;
   top: 0;
 }
+
+.type-box {
+  display: inline;
+  line-height: 40px;
+}
+.type {
+  display: block;
+  position: relative;
+  padding: 0px 10px;
+  box-sizing: content-box;
+  border: 1px solid #ccc;
+  border-bottom: 3px solid #ccc;
+}
+
+.type {
+  display: inline-block;
+  margin-left: 10px;
+  padding: 0 4px;
+  min-width: 100px;
+  height: 32px;
+  font-size: 18px;
+  line-height: 30px;
+  border-radius: 4px;
+  background: #eee;
+  vertical-align: middle;
+  outline:none;
+}
+.color-input {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.color-icon {
+  display: block;
+  float: left;
+  margin-top: 6px;
+}
+.close-icon {
+  position: absolute;
+  top: -9px;
+  right: -9px;
+}
 </style>