From 5890891b0065822edfadc10da0152c73871abaaa Mon Sep 17 00:00:00 2001
From: Helloworld <1326521+LYZhelloworld@users.noreply.github.com>
Date: Mon, 30 May 2022 10:01:47 +0800
Subject: [PATCH 1/4] Add autocomplete for operator names

---
 tools/CopilotDesinger/index.js                | 12 ++++++++++--
 tools/CopilotDesinger/自动战斗作业生成器.html |  1 +
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/tools/CopilotDesinger/index.js b/tools/CopilotDesinger/index.js
index 9764f3ecef..c103cf783d 100644
--- a/tools/CopilotDesinger/index.js
+++ b/tools/CopilotDesinger/index.js
@@ -6,6 +6,10 @@ const input_text = () => {
     return $('<input type="text" class="form-control">');
 };
 
+const input_oper_name = () => {
+    return $('<input type="text" class="form-control" placeholder="干员名字" list="oper_names">');
+}
+
 const skill_usage = () => {
     return $('<select id="skill_usage" class="form-control" style="width:auto">' +
         '<option value=0>不自动使用</option>' +
@@ -43,7 +47,7 @@ const direction = () => {
 const oper = (oper_data, delete_func) => {
     const tr = $('<tr>');
     // 干员名字
-    const name_input = input_text()
+    const name_input = input_oper_name()
         .val(oper_data.name ?? "")
         .change(function () { oper_data.name = $(this).val(); });
     tr.append($('<td>').append(name_input));
@@ -83,7 +87,7 @@ const action = (action_data) => {
         .change(function () { action_data.cost_changes = $(this).val !== "" ? Number($(this).val()) : undefined; });
     tr.append($('<td>').append(cost_changes));
     // 干员
-    const name_input = input_text()
+    const name_input = input_oper_name()
         .val(action_data.name ?? "")
         .change(function () { action_data.name = $(this).val(); });
     tr.append($('<td>').append(name_input));
@@ -254,5 +258,9 @@ $(document).ready(() => {
         reader.readAsText(f);
     });
 
+    // 干员名字自动填充
+    charName.sort();
+    charName.forEach(c => $('#oper_names').append($('<option>').text(c)));
+
     loadData();
 });
\ No newline at end of file
diff --git a/tools/CopilotDesinger/自动战斗作业生成器.html b/tools/CopilotDesinger/自动战斗作业生成器.html
index 976603d87b..10dd807d6f 100644
--- a/tools/CopilotDesinger/自动战斗作业生成器.html
+++ b/tools/CopilotDesinger/自动战斗作业生成器.html
@@ -80,6 +80,7 @@
       </div>
     </div>
   </div>
+  <datalist id="oper_names"></datalist>
 </body>
 
 </html>
\ No newline at end of file

From ee7af7e408ce3a16aecbd6955077b93ab7fe0dbf Mon Sep 17 00:00:00 2001
From: Helloworld <1326521+LYZhelloworld@users.noreply.github.com>
Date: Mon, 30 May 2022 10:32:56 +0800
Subject: [PATCH 2/4] Use array manipulation

---
 tools/CopilotDesinger/index.js | 36 ++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/tools/CopilotDesinger/index.js b/tools/CopilotDesinger/index.js
index c103cf783d..f830494b1b 100644
--- a/tools/CopilotDesinger/index.js
+++ b/tools/CopilotDesinger/index.js
@@ -42,9 +42,9 @@ const direction = () => {
         '<option value="左">左</option>' +
         '<option value="右">右</option>' +
         '</select>');
-}
+};
 
-const oper = (oper_data, delete_func) => {
+const oper = (oper_data, arr, delete_callback) => {
     const tr = $('<tr>');
     // 干员名字
     const name_input = input_oper_name()
@@ -63,7 +63,10 @@ const oper = (oper_data, delete_func) => {
         .change(function () { oper_data.skill_usage = Number($(this).val()); });
     tr.append($('<td>').append(skill_usage_input));
     // 删除
-    tr.append($('<td>').append(delete_icon().click(delete_func)));
+    tr.append($('<td>').append(delete_icon().click(() => {
+        arr = arr.filter(o => o !== oper_data);
+        delete_callback(arr);
+    })));
     return tr;
 }
 
@@ -144,7 +147,7 @@ const action = (action_data) => {
     return tr;
 };
 
-const group = (group_data, delete_func) => {
+const group = (group_data, arr, delete_callback) => {
     // 群组名
     const name_div_row = $('<div class="row">');
     const name_div_col = $('<div class="col-11">');
@@ -153,7 +156,10 @@ const group = (group_data, delete_func) => {
         .change(function () { group_data.name = $(this).val(); });
     name_div_col.append(name_input);
     const delete_col = $('<div class="col-1">');
-    delete_col.append(delete_icon().click(delete_func));
+    delete_col.append(delete_icon().click(() => {
+        arr = arr.filter(o => o !== group_data);
+        delete_callback(arr);
+    }));
     name_div_row.append(name_div_col).append(delete_col);
 
     // 群组干员列表
@@ -195,16 +201,20 @@ const loadData = () => {
     // TODO: requirements
 
     $('#opers tbody').html('');
-    (data.opers ?? []).forEach(oper_data => $('#opers tbody').append(oper(oper_data, () => {
-        data.opers = data.opers.filter(o => o !== oper_data);
-        loadData();
-    })));
+    (data.opers ?? []).forEach(oper_data => $('#opers tbody').append(
+        oper(oper_data, data.opers, (new_arr) => {
+            data.opers = new_arr;
+            loadData();
+        })
+    ));
 
     $('#groups').html('');
-    (data.groups ?? []).forEach(group_data => $('#groups').append(group(group_data, () => {
-        data.groups = data.groups.filter(g => g !== group_data);
-        loadData();
-    })));
+    (data.groups ?? []).forEach(group_data => $('#groups').append(
+        group(group_data, data.groups, (new_arr) => {
+            data.groups = new_arr;
+            loadData();
+        })
+    ));
 
     $('#actions tbody').html('');
     (data.actions ?? []).forEach(action_data => $('#actions tbody').append(action(action_data)));

From 3229e39c14e68302cf0f1a487747f7c2ecb77ef0 Mon Sep 17 00:00:00 2001
From: Helloworld <1326521+LYZhelloworld@users.noreply.github.com>
Date: Mon, 30 May 2022 10:56:03 +0800
Subject: [PATCH 3/4] Implement moving

---
 tools/CopilotDesinger/index.js | 72 ++++++++++++++++++++++------------
 1 file changed, 46 insertions(+), 26 deletions(-)

diff --git a/tools/CopilotDesinger/index.js b/tools/CopilotDesinger/index.js
index f830494b1b..b2d77adb5b 100644
--- a/tools/CopilotDesinger/index.js
+++ b/tools/CopilotDesinger/index.js
@@ -19,8 +19,36 @@ const skill_usage = () => {
         '</select>');
 };
 
-const delete_icon = () => {
-    return $('<button type="button" class="btn btn-default"><span class="ui-icon ui-icon-closethick"></span></button>')
+const move_up_icon = (data, arr) => {
+    return $('<button type="button" class="btn btn-primary"><span class="ui-icon ui-icon-triangle-1-n"></span></button>')
+        .click(() => {
+            const index = arr.indexOf(data);
+            if (index > 0) {
+                arr.splice(index, 1);
+                arr.splice(index - 1, 0, data);
+                loadData();
+            }
+        });
+}
+
+const move_down_icon = (data, arr) => {
+    return $('<button type="button" class="btn btn-primary"><span class="ui-icon ui-icon-triangle-1-s"></span></button>')
+        .click(() => {
+            const index = arr.indexOf(data);
+            if (index < arr.length - 1) {
+                arr.splice(index, 1);
+                arr.splice(index + 1, 0, data);
+                loadData();
+            }
+        });
+}
+
+const delete_icon = (data, arr) => {
+    return $('<button type="button" class="btn btn-danger"><span class="ui-icon ui-icon-closethick"></span></button>')
+        .click(() => {
+            arr.splice(arr.indexOf(data), 1);
+            loadData();
+        });
 };
 
 const action_type = () => {
@@ -44,7 +72,7 @@ const direction = () => {
         '</select>');
 };
 
-const oper = (oper_data, arr, delete_callback) => {
+const oper = (oper_data, arr) => {
     const tr = $('<tr>');
     // 干员名字
     const name_input = input_oper_name()
@@ -63,14 +91,14 @@ const oper = (oper_data, arr, delete_callback) => {
         .change(function () { oper_data.skill_usage = Number($(this).val()); });
     tr.append($('<td>').append(skill_usage_input));
     // 删除
-    tr.append($('<td>').append(delete_icon().click(() => {
-        arr = arr.filter(o => o !== oper_data);
-        delete_callback(arr);
-    })));
+    tr.append($('<td>')
+        .append(move_up_icon(oper_data, arr))
+        .append(move_down_icon(oper_data, arr))
+        .append(delete_icon(oper_data, arr)));
     return tr;
 }
 
-const action = (action_data) => {
+const action = (action_data, arr) => {
     const tr = $('<tr>');
     // 类别
     const type_input = action_type()
@@ -140,14 +168,13 @@ const action = (action_data) => {
         .change(function () { action_data.doc_color = $(this).val(); });
     tr.append($('<td>').append(doc_color_input));
     // 删除
-    tr.append($('<td>').append(delete_icon().click(() => {
-        data.actions = data.actions.filter(a => a !== action_data);
-        loadData();
-    })));
+    tr.append($('<td>').append(move_up_icon(action_data, arr))
+        .append(move_down_icon(action_data, arr))
+        .append(delete_icon(action_data, arr)));
     return tr;
 };
 
-const group = (group_data, arr, delete_callback) => {
+const group = (group_data, arr) => {
     // 群组名
     const name_div_row = $('<div class="row">');
     const name_div_col = $('<div class="col-11">');
@@ -156,10 +183,9 @@ const group = (group_data, arr, delete_callback) => {
         .change(function () { group_data.name = $(this).val(); });
     name_div_col.append(name_input);
     const delete_col = $('<div class="col-1">');
-    delete_col.append(delete_icon().click(() => {
-        arr = arr.filter(o => o !== group_data);
-        delete_callback(arr);
-    }));
+    delete_col.append(move_up_icon(group_data, arr))
+        .append(move_down_icon(group_data, arr))
+        .append(delete_icon(group_data, arr));
     name_div_row.append(name_div_col).append(delete_col);
 
     // 群组干员列表
@@ -202,22 +228,16 @@ const loadData = () => {
 
     $('#opers tbody').html('');
     (data.opers ?? []).forEach(oper_data => $('#opers tbody').append(
-        oper(oper_data, data.opers, (new_arr) => {
-            data.opers = new_arr;
-            loadData();
-        })
+        oper(oper_data, data.opers)
     ));
 
     $('#groups').html('');
     (data.groups ?? []).forEach(group_data => $('#groups').append(
-        group(group_data, data.groups, (new_arr) => {
-            data.groups = new_arr;
-            loadData();
-        })
+        group(group_data, data.groups)
     ));
 
     $('#actions tbody').html('');
-    (data.actions ?? []).forEach(action_data => $('#actions tbody').append(action(action_data)));
+    (data.actions ?? []).forEach(action_data => $('#actions tbody').append(action(action_data, data.actions)));
 };
 
 $(document).ready(() => {

From d39170ca7b8916eb7403f25a0fa2c49714afd64e Mon Sep 17 00:00:00 2001
From: Helloworld <1326521+LYZhelloworld@users.noreply.github.com>
Date: Mon, 30 May 2022 11:00:47 +0800
Subject: [PATCH 4/4] UI changes

---
 tools/CopilotDesinger/index.js                | 17 +++++++++--------
 tools/CopilotDesinger/自动战斗作业生成器.html |  6 +++---
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/tools/CopilotDesinger/index.js b/tools/CopilotDesinger/index.js
index b2d77adb5b..9e422ac2ce 100644
--- a/tools/CopilotDesinger/index.js
+++ b/tools/CopilotDesinger/index.js
@@ -90,8 +90,8 @@ const oper = (oper_data, arr) => {
         .val(String(oper_data.skill_usage ?? 0))
         .change(function () { oper_data.skill_usage = Number($(this).val()); });
     tr.append($('<td>').append(skill_usage_input));
-    // 删除
-    tr.append($('<td>')
+    // 移动删除
+    tr.append($('<td style="white-space:nowrap;">')
         .append(move_up_icon(oper_data, arr))
         .append(move_down_icon(oper_data, arr))
         .append(delete_icon(oper_data, arr)));
@@ -167,8 +167,9 @@ const action = (action_data, arr) => {
         .val(action_data.doc_color ?? "")
         .change(function () { action_data.doc_color = $(this).val(); });
     tr.append($('<td>').append(doc_color_input));
-    // 删除
-    tr.append($('<td>').append(move_up_icon(action_data, arr))
+    // 移动删除
+    tr.append($('<td style="white-space:nowrap;">')
+        .append(move_up_icon(action_data, arr))
         .append(move_down_icon(action_data, arr))
         .append(delete_icon(action_data, arr)));
     return tr;
@@ -182,11 +183,11 @@ const group = (group_data, arr) => {
         .val(group_data.name ?? "")
         .change(function () { group_data.name = $(this).val(); });
     name_div_col.append(name_input);
-    const delete_col = $('<div class="col-1">');
-    delete_col.append(move_up_icon(group_data, arr))
+    const move_delete_col = $('<div class="col-1">');
+    move_delete_col.append(move_up_icon(group_data, arr))
         .append(move_down_icon(group_data, arr))
         .append(delete_icon(group_data, arr));
-    name_div_row.append(name_div_col).append(delete_col);
+    name_div_row.append(name_div_col).append(move_delete_col);
 
     // 群组干员列表
     const table = $('<table class="table table-bordered table-condensed table-striped">' +
@@ -195,7 +196,7 @@ const group = (group_data, arr) => {
         '<th>干员名字</th>' +
         '<th>技能</th>' +
         '<th>技能用法</th>' +
-        '<th>删除</th>' +
+        '<th></th>' +
         '</tr>' +
         '</thead>' +
         '<tbody></tbody>' +
diff --git a/tools/CopilotDesinger/自动战斗作业生成器.html b/tools/CopilotDesinger/自动战斗作业生成器.html
index 10dd807d6f..428b910d53 100644
--- a/tools/CopilotDesinger/自动战斗作业生成器.html
+++ b/tools/CopilotDesinger/自动战斗作业生成器.html
@@ -13,7 +13,7 @@
 </head>
 
 <body>
-  <div class="container">
+  <div class="container-fluid">
     <div class="row">
       <div class="col-12">
         <button id="download_json" class="btn btn-primary">下载JSON</button>
@@ -48,7 +48,7 @@
               <th>干员名字</th>
               <th>技能</th>
               <th>技能用法</th>
-              <th>删除</th>
+              <th></th>
             </tr>
           </thead>
           <tbody></tbody>
@@ -71,7 +71,7 @@
               <th>后延迟</th>
               <th>文本</th>
               <th>文本颜色</th>
-              <th>删除</th>
+              <th></th>
             </tr>
           </thead>
           <tbody></tbody>