diff --git a/tools/CopilotDesinger/CopilotJsonConverter.html b/tools/CopilotDesinger/CopilotJsonConverter.html
index e005850ff1..7f18f1245e 100644
--- a/tools/CopilotDesinger/CopilotJsonConverter.html
+++ b/tools/CopilotDesinger/CopilotJsonConverter.html
@@ -8,8 +8,6 @@
   <title>自动战斗流程JSON生成器</title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
-  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 
 <body>
@@ -41,10 +39,9 @@
           </div>
         </div>
         <div class="col-sm-3">
-          <button type="button" id="toJson" class="btn btn-primary" onclick="toJSON();">生成JSON
-          </button>
-          <!-- <input type="file" id="selectedFile" style="display: none;" />
-          <button class="btn btn-primary" onclick="document.getElementById('selectedFile').click();">读取JSON</button> -->
+          <button type="button" id="toJson" class="btn btn-primary" onclick="toJSON()">下载JSON</button>
+          <input type="file" id="selectedFile" style="display: none;" name="files[]" size=1 />
+          <button class="btn btn-primary" onclick="document.getElementById('selectedFile').click();">载入JSON</button>
         </div>
       </div>
     </div>
@@ -123,9 +120,10 @@
               <tr>
                 <th>修改</th>
                 <th>类别</th>
-                <th>Kill</th>
+                <th>Kills</th>
                 <th>干员</th>
-                <th>坐标</th>
+                <th>x坐标</th>
+                <th>y坐标</th>
                 <th>方向</th>
                 <th>操作前延迟(毫秒)</th>
                 <th>操作后延迟(毫秒)</th>
@@ -139,61 +137,72 @@
         <div class="col-sm-11">
           <div class="panel panel-primary">
             <div class="panel-body">
-              <div class="form-group">
-                <label for="type">
-                  类别
-                </label>
-                <select id="type" class="form-control">
-                  <option value="部署">部署</option>
-                  <option value="技能">技能</option>
-                  <option value="撤退">撤退</option>
-                  <option value="子弹时间">子弹时间</option>
-                  <option value="技能用法">技能用法</option>
-                </select>
+              <div class="row">
+                <div class="form-group col-sm-3">
+                  <label for="type">
+                    类别
+                  </label>
+                  <select id="type" class="form-control">
+                    <option value="二倍速">二倍速</option>
+                    <option value="部署">部署</option>
+                    <option value="技能">技能</option>
+                    <option value="撤退">撤退</option>
+                    <option value="子弹时间">子弹时间</option>
+                    <option value="技能用法">技能用法</option>
+                  </select>
+                </div>
+                <div class="form-group col-sm-3">
+                  <label for="kill">
+                    Kill
+                  </label>
+                  <input type="number" class="form-control" id="kill" />
+                </div>
+                <div class="form-group col-sm-3">
+                  <label for="operator">
+                    干员
+                  </label>
+                  <input type="text" id="operator" class="form-control">
+                  </select>
+                </div>
+                <div class="form-group col-sm-3">
+                  <label for="xcoordinate">
+                    x坐标
+                  </label>
+                  <input type="number" class="form-control" id="xcoordinate" />
+                </div>
               </div>
-              <div class="form-group">
-                <label for="kill">
-                  Kill
-                </label>
-                <input type="number" class="form-control" id="kill" />
+              <div class="row">
+                <div class="form-group col-sm-3">
+                  <label for="direction">
+                    方向
+                  </label>
+                  <select id="direction" class="form-control">
+                    <option value=""></option>
+                    <option value="上">上</option>
+                    <option value="下">下</option>
+                    <option value="左">左</option>
+                    <option value="右">右</option>
+                  </select>
+                </div>
+                <div class="form-group col-sm-3">
+                  <label for="pre_delay">
+                    操作前延迟(毫秒)
+                  </label>
+                  <input type="number" class="form-control" id="pre_delay" />
+                </div>
+                <div class="form-group col-sm-3">
+                  <label for="rear_delay">
+                    操作后延迟（毫秒）
+                  </label>
+                  <input type="number" class="form-control" id="rear_delay" />
+                </div>
+                <div class="form-group col-sm-3">
+                  <label for="ycoordinate">
+                    y坐标
+                  </label>
+                  <input type="number" class="form-control" id="ycoordinate" />
+                </div>
               </div>
-              <div class="form-group">
-                <label for="operator">
-                  干员
-                </label>
-                <select id="operator" class="form-control">
-                </select>
-              </div>
-              <div class="form-group">
-                <label for="coordinate">
-                  坐标
-                </label>
-                <input type="text" class="form-control" id="coordinate" />
-              </div>
-              <div class="form-group">
-                <label for="direction">
-                  方向
-                </label>
-                <select id="direction" class="form-control">
-                  <option value="上">上</option>
-                  <option value="下">下</option>
-                  <option value="左">左</option>
-                  <option value="右">右</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <label for="pre_delay">
-                  操作前延迟(毫秒)
-                </label>
-                <input type="number" class="form-control" id="pre_delay" />
-              </div>
-              <div class="form-group">
-                <label for="rear_delay">
-                  操作后延迟（毫秒）
-                </label>
-                <input type="number" class="form-control" id="rear_delay" />
-              </div>
-
             </div>
             <div class="panel-footer">
               <div class="row">
@@ -210,6 +219,7 @@
     </div>
   </div>
   <script>
+    var operatorList = [];
     var editRow = null;
     var editRowName = null;
     function load() {
@@ -232,16 +242,19 @@
         $("#skill_usage").val($(cols[3]).text());
         $("#updateOperatorButton").text("Update");
         editRowName = $(ctl).context.name.substring(4)
+        document.getElementById("operatorname").scrollIntoView();
       }
       else if (type === 'action') {
         $("#type").val($(cols[1]).text())
         $("#kill").val($(cols[2]).text())
         $("#operator").val($(cols[3]).text())
-        $("#coordinate").val($(cols[4]).text())
-        $("#direction").val($(cols[5]).text())
-        $("#pre_delay").val($(cols[6]).text())
-        $("#rear_delay").val($(cols[7]).text())
+        $("#xcoordinate").val($(cols[4]).text())
+        $("#ycoordinate").val($(cols[5]).text())
+        $("#direction").val($(cols[6]).text())
+        $("#pre_delay").val($(cols[7]).text())
+        $("#rear_delay").val($(cols[8]).text())
         $("#updateActionButton").text("Update");
+        document.getElementById("type").scrollIntoView();
       }
 
     }
@@ -267,25 +280,19 @@
       }
       formClear(type);
     }
-    function addToTable(type) {
+    function addToTable(type, data = null) {
       if (type === 'operator') {
         if ($("#operatorTable tbody").length == 0) {
           $("#operatorTable").append("<tbody></tbody>");
         }
-        // Append operator to table
-        var result = buildTableRow(type);
-        if (result.html) $("#operatorTable tbody").append(result.html);
-        updateOperatorList("add", result.operatorName);
+        var result = buildTableRow(type, data);
+        if (result && result.html) $("#operatorTable tbody").append(result.html);
+        if (result && result.operatorName) updateOperatorList("add", result.operatorName);
       }
       else if (type === 'action') {
-        if ($("#actionTable tbody").length == 0) {
-          $("#actionTable").append("<tbody></tbody>");
-        }
-        $("#actionTable tbody").append(
-          buildTableRow(type));
-
+        if ($("#actionTable tbody").length == 0) $("#actionTable").append("<tbody></tbody>");
+        $("#actionTable tbody").append(buildTableRow(type, data))
       }
-
     }
 
     // Update operator in <table>
@@ -304,23 +311,35 @@
       else if (type == "action") $("#updateActionButton").text("Add");
     }
 
-    function buildTableRow(type) {
+    function buildTableRow(type, data = null) {
+      let datastring = '';
       if (type === 'operator') {
-        if ($("#operatorname").val() && $("#skill").val()) {
+        if (($("#operatorname").val() && $("#skill").val()) || data) {
+          let obj = { name: "", skill: "", skill_usage: "" };
+          if (data == null) {
+            obj.name = $("#operatorname").val();
+            obj.skill = $("#skill").val();
+            obj.skill_usage = $("#skill_usage").val();
+          }
+          else {
+            obj.name = data.name;
+            obj.skill = data.skill;
+            obj.skill_usage = (data.skill_usage ? data.skill_usage : 0);
+          }        
+          datastring = "<td>" + obj.name + "</td>" +
+            "<td>" + obj.skill + "</td>" +
+            "<td>" + (obj.skill_usage ? obj.skill_usage : 0) + "</td>";
           var ret =
             "<tr>" +
             "<td>" +
-            "<button type='button' name =\"edit" + $("#operatorname").val() + "\"" +
+            "<button type='button' name =\"edit" + (data && data.name ? data.name : $("#operatorname").val()) + "\"" +
             "onclick='display(this,\"operator\");' " +
             "class='btn btn-default'>" +
             "<span class='ui-icon ui-icon-pencil' />" +
             "</button>" +
-            "</td>" +
-            "<td>" + $("#operatorname").val() + "</td>" +
-            "<td>" + $("#skill").val() + "</td>" +
-            "<td>" + $("#skill_usage").val() + "</td>" +
+            "</td>" + datastring +
             "<td>" +
-            "<button type='button' name =\"" + $("#operatorname").val() + "\"" +
+            "<button type='button' name =\"" + (data && data.name ? data.name : $("#operatorname").val()) + "\"" +
             "onclick='itemDelete(this);' " +
             "class='btn btn-default'>" +
             "<span class='ui-icon ui-icon-closethick' />" +
@@ -332,33 +351,45 @@
         else return;
       }
       else if (type === 'action') {
-        if ($("#type").val() && $("#kill").val() && $("#operator").val() && $("#coordinate").val() && $("#direction").val() && $("#pre_delay").val() && $("#rear_delay").val()) {
-          var ret =
-            "<tr>" +
-            "<td>" +
-            "<button type='button' " +
-            "onclick='display(this,\"action\");' " +
-            "class='btn btn-default'>" +
-            "<span class='ui-icon ui-icon-pencil' />" +
-            "</button>" +
-            "</td>" +
-            "<td>" + $("#type").val() + "</td>" +
+        if (data) {
+          datastring = "<td>" + (data.type ? data.type : "") + "</td>" +
+            "<td>" + (data.kills ? data.kills : "") + "</td>" +
+            "<td>" + (data.name ? data.name : "") + "</td>" +
+            "<td>" + (data.location ? data.location[0] : "") + "</td>" +
+            "<td>" + (data.location ? data.location[1] : "") + "</td>" +
+            "<td>" + (data.direction ? data.direction : "") + "</td>" +
+            "<td>" + (data.pre_delay ? data.pre_delay : "") + "</td>" +
+            "<td>" + (data.rear_delay ? data.rear_delay : "") + "</td>";
+        }
+        else {
+          datastring = "<td>" + $("#type").val() + "</td>" +
             "<td>" + $("#kill").val() + "</td>" +
             "<td>" + $("#operator").val() + "</td>" +
-            "<td>" + $("#coordinate").val() + "</td>" +
+            "<td>" + $("#xcoordinate").val() + "</td>" +
+            "<td>" + $("#ycoordinate").val() + "</td>" +
             "<td>" + $("#direction").val() + "</td>" +
             "<td>" + $("#pre_delay").val() + "</td>" +
-            "<td>" + $("#rear_delay").val() + "</td>" +
-            "<td>" +
-            "<button type='button' " +
-            "onclick='itemDelete(this);' " +
-            "class='btn btn-default'>" +
-            "<span class='ui-icon ui-icon-closethick' />" +
-            "</button>" +
-            "</td>" +
-            "</tr>"
-          return ret;
+            "<td>" + $("#rear_delay").val() + "</td>";
         }
+
+        var ret =
+          "<tr>" +
+          "<td>" +
+          "<button type='button' " +
+          "onclick='display(this,\"action\");' " +
+          "class='btn btn-default'>" +
+          "<span class='ui-icon ui-icon-pencil' />" +
+          "</button>" +
+          "</td>" + datastring +
+          "<td>" +
+          "<button type='button' " +
+          "onclick='itemDelete(this);' " +
+          "class='btn btn-default'>" +
+          "<span class='ui-icon ui-icon-closethick' />" +
+          "</button>" +
+          "</td>" +
+          "</tr>"
+        return ret;
       }
     }
     function itemDelete(ctl) {
@@ -367,19 +398,38 @@
     }
     function updateOperatorList(action, oldname, newName = "") {
       var selectobject = document.getElementById("operator");
-      if (action == "add" && Array.apply(null, selectobject.options).findIndex(o => o.value == oldname) == -1) {
-        $('#operator').append($('<option>', { value: oldname, text: oldname }));
+      if (action == 'clean') {
+        operatorList = [];
+        operatorList.push({ label: "", value: "" })
+      }
+      else if (action == "add" && operatorList.findIndex(o => o.value == oldname) == -1) {
+        operatorList.push({ value: oldname, label: oldname });
       }
       else {
-        for (var i = 0; i < selectobject.length; i++) {
-          if (selectobject.options[i].value == oldname) {
-            selectobject.remove(i);
-            if (action == "update") $('#operator').append($('<option>', { value: newName, text: newName }));
+        var index = operatorList.findIndex(x => x.value == oldname);
+        if (index > -1) {
+          operatorList.slice(index);
+          if (action == "update") {
+            operatorList[index].label = operatorList[index].value = newName;
+            // 把现有table干员名字替换
+            var actionTable = $("#actionTable tbody");
+            actionTable.find('tr').each(function (i, el) {
+              var actionData = prepareActionData($(this))
+              if (actionData.name == oldname) {
+                actionData.name = newName;
+                $(this).replaceWith(buildTableRow("action", actionData))
+              }
+            });
+          }
+          else {
+            operatorList.slice(index);
           }
         }
       }
+      $("#operator").autocomplete({
+        source: operatorList
+      });
     }
-
     function formClear(type) {
       if (type == "operator") {
         $("#operatorname").val("");
@@ -389,15 +439,40 @@
         $("#type").val("");
         $("#kill").val("");
         $("#operator").val("");
-        $("#coordinate").val("");
+        $("#xcoordinate").val("");
+        $("#ycoordinate").val("");
         $("#direction").val("");
         $("#pre_delay").val("");
         $("#rear_delay").val("");
       }
     }
+    function prepareActionData(tr) {
+      var $tds = tr.find('td'),
+        type = $tds.eq(1).text(),
+        kills = $tds.eq(2).text(),
+        name = $tds.eq(3).text(),
+        xcoordinate = $tds.eq(4).text(),
+        ycoordinate = $tds.eq(5).text(),
+        direction = $tds.eq(6).text(),
+        pre_delay = $tds.eq(7).text(),
+        rear_delay = $tds.eq(8).text();
+      kills = parseInt(kills)
+      pre_delay = parseInt(pre_delay)
+      rear_delay = parseInt(rear_delay)
+      xcoordinate = parseInt(xcoordinate)
+      ycoordinate = parseInt(ycoordinate)
+      let location = [xcoordinate, ycoordinate]
+      var actionData = { type, kills, name, location, direction, pre_delay, rear_delay };
+      if (isNaN(actionData.kills)) delete actionData.kills;
+      if (isNaN(actionData.pre_delay)) delete actionData.pre_delay;
+      if (isNaN(actionData.rear_delay)) delete actionData.rear_delay;
+      if (actionData.direction === "") delete actionData.direction;
+      if (isNaN(actionData.location[0]) || isNaN(actionData.location[1])) delete actionData.location;
+      return actionData;
+    }
     function toJSON() {
-      var operatorTable = $("#operatorTable");
-      var actionTable = $("#actionTable");
+      var operatorTable = $("#operatorTable tbody");
+      var actionTable = $("#actionTable tbody");
       var opers = [];
       var actions = [];
       operatorTable.find('tr').each(function (i, el) {
@@ -407,34 +482,51 @@
           skill_usage = $tds.eq(3).text();
         if (name && skill && skill_usage) {
           skill_usage = parseInt(skill_usage)
+          skill = parseInt(skill)
           opers.push({ name, skill, skill_usage });
         }
       });
       actionTable.find('tr').each(function (i, el) {
-        var $tds = $(this).find('td'),
-          type = $tds.eq(1).text(),
-          kills = $tds.eq(2).text(),
-          name = $tds.eq(3).text(),
-          location = $tds.eq(4).text(),
-          direction = $tds.eq(5).text(),
-          pre_delay = $tds.eq(6).text(),
-          rear_delay = $tds.eq(7).text();
-        if (type && kills && name && location && direction && pre_delay && rear_delay) {
-          kills = parseInt(kills)
-          pre_delay = parseInt(pre_delay)
-          rear_delay = parseInt(rear_delay)
-          actions.push({ type, kills, name, location, direction, pre_delay, rear_delay });
-        }
+        var actionData = prepareActionData($(this));
+        actions.push(actionData);
       });
       var stage_name = document.getElementById("stagename").value;
       var title = document.getElementById("title").value;
       var details = document.getElementById("description").value;
-      var desc = { title, details };
-      var obj = { stage_name, opers, actions, desc };
-      console.log(obj)
-      navigator.clipboard.writeText(JSON.stringify(obj));
-      alert("已经复制JSON到剪切板")
+      var doc = { title, details };
+      var obj = { "minimum_required": "v4.0", doc, stage_name, opers, actions };
+      var file = new Blob([JSON.stringify(obj)], { type: 'text/plain' });
+      var fileName = obj.stage_name + '_' + opers.map(o => o.name).join('+') + '.json';
+      const url = window.URL.createObjectURL(file);
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', fileName);
+      document.body.appendChild(link);
+      link.click();
     }
+    function handleFileSelect(evt) {
+      let files = evt.target.files;
+      let f = files[0];
+      let reader = new FileReader();
+      reader.onload = (function (theFile) {
+        return function (e) {
+          let data = JSON.parse(e.target.result);
+          if (!data) alert("读取文件错误")
+          else {
+            document.getElementById("stagename").value = data.stage_name ? data.stage_name : "";
+            document.getElementById("title").value = data.doc.title ? data.doc.title : "";
+            document.getElementById("description").value = data.doc.details ? data.doc.details : "";
+            $("#operatorTable tbody tr").remove();
+            updateOperatorList("clean", "")
+            if (data.opers) data.opers.forEach(x => { addToTable("operator", x); updateOperatorList("add", x.name); });
+            $("#actionTable tbody tr").remove();
+            if (data.actions) data.actions.forEach(x => addToTable("action", x));
+          }
+        };
+      })(f);
+      reader.readAsText(f);
+    }
+    document.getElementById('selectedFile').addEventListener('change', handleFileSelect, false);
   </script>
 </body>
 
