From 4997c14bda1f3e1991726d28cb6b004f65b2f1b5 Mon Sep 17 00:00:00 2001
From: eddy <ghuang@kns.com>
Date: Sat, 1 Aug 2026 14:45:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=94=B9=E5=96=84=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E5=B8=83=E5=B1=80=E4=B8=8E=E6=97=A0?=
 =?UTF-8?q?=E9=9A=9C=E7=A2=8D=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整任务编辑器的字号和文本框高度，使其更适合笔记本视口
- 将表单标签与控件正确关联，并应用 Bootstrap 标签样式
- 使用语义化表单元素优化复选框、进度显示和导入模式结构
---
 src/css/styles.css |  19 ++++++++
 src/index.html     | 107 ++++++++++++++++++++++++++++-----------------
 2 files changed, 86 insertions(+), 40 deletions(-)

diff --git a/src/css/styles.css b/src/css/styles.css
index 386388c..598c2ca 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -273,6 +273,25 @@ body {
   overflow-wrap: anywhere;
 }
 
+/* Task editor */
+/* Compact type scale, scoped to the editor: at the board's default 1rem the form runs
+   past a laptop viewport and every textarea loses a visible line of text. */
+#taskModal .modal-title {
+  font-size: 1.1rem;
+}
+#taskModal .form-label,
+#taskModal .form-control,
+#taskModal .form-select,
+#taskModal .form-check-label,
+#taskModal .modal-footer .btn {
+  font-size: 0.85rem;
+}
+/* Height comes from each textarea's rows attribute; this only stops horizontal
+   dragging, which would otherwise break the modal grid. */
+#taskModal .task-editor-textarea {
+  resize: vertical;
+}
+
 /* Timeline */
 .timeline-toggle {
   cursor: pointer;
diff --git a/src/index.html b/src/index.html
index e2106f5..6fb6bee 100644
--- a/src/index.html
+++ b/src/index.html
@@ -128,11 +128,11 @@
               <input type="hidden" id="taskId" />
               <div class="row g-3">
                 <div class="col-md-8">
-                  <label data-key="taskTitleLabel"></label
+                  <label for="taskTitle" class="form-label" data-key="taskTitleLabel"></label
                   ><input id="taskTitle" class="form-control" required />
                 </div>
                 <div class="col-md-4">
-                  <label data-key="statusLabel"></label
+                  <label for="taskStatus" class="form-label" data-key="statusLabel"></label
                   ><select id="taskStatus" class="form-select">
                     <option value="todo" data-key="todo"></option>
                     <option value="inProgress" data-key="inProgress"></option>
@@ -140,25 +140,33 @@
                   </select>
                 </div>
                 <div class="col-12">
-                  <label data-key="progressNotesLabel"></label
+                  <label
+                    for="taskProgressNotes"
+                    class="form-label"
+                    data-key="progressNotesLabel"
+                  ></label
                   ><textarea
                     id="taskProgressNotes"
-                    class="form-control"
-                    rows="3"
+                    class="form-control task-editor-textarea"
+                    rows="4"
                     data-key-placeholder="progressNotesPlaceholder"
                   ></textarea>
                 </div>
                 <div class="col-12">
-                  <label data-key="descriptionLabel"></label
+                  <label
+                    for="taskDescription"
+                    class="form-label"
+                    data-key="descriptionLabel"
+                  ></label
                   ><textarea
                     id="taskDescription"
-                    class="form-control"
-                    rows="4"
+                    class="form-control task-editor-textarea"
+                    rows="6"
                     data-key-placeholder="descriptionPlaceholder"
                   ></textarea>
                 </div>
                 <div class="col-md-3">
-                  <label data-key="priorityLabel"></label
+                  <label for="taskPriority" class="form-label" data-key="priorityLabel"></label
                   ><select id="taskPriority" class="form-select">
                     <option value="low" data-key="lowPriority"></option>
                     <option value="medium" data-key="mediumPriority"></option>
@@ -166,14 +174,14 @@
                   </select>
                 </div>
                 <div class="col-md-3">
-                  <label data-key="languageLabel"></label
+                  <label for="taskLanguage" class="form-label" data-key="languageLabel"></label
                   ><select id="taskLanguage" class="form-select">
                     <option value="zh">中文</option>
                     <option value="en">English</option>
                   </select>
                 </div>
                 <div class="col-md-3">
-                  <label data-key="assigneeLabel"></label
+                  <label for="taskAssignee" class="form-label" data-key="assigneeLabel"></label
                   ><input
                     id="taskAssignee"
                     class="form-control"
@@ -181,11 +189,15 @@
                   />
                 </div>
                 <div class="col-md-3">
-                  <label data-key="dueDateLabel"></label
+                  <label for="taskDueDate" class="form-label" data-key="dueDateLabel"></label
                   ><input id="taskDueDate" type="date" class="form-control" />
                 </div>
                 <div class="col-md-6">
-                  <label data-key="collaboratorsLabel"></label
+                  <label
+                    for="taskCollaborators"
+                    class="form-label"
+                    data-key="collaboratorsLabel"
+                  ></label
                   ><input
                     id="taskCollaborators"
                     class="form-control"
@@ -193,7 +205,7 @@
                   />
                 </div>
                 <div class="col-md-6">
-                  <label data-key="progressLabel"></label
+                  <label for="taskProgress" class="form-label" data-key="progressLabel"></label
                   ><input
                     id="taskProgress"
                     type="range"
@@ -202,13 +214,18 @@
                     value="0"
                     class="form-range"
                   />
-                  <div id="progressDisplay" class="text-center">0%</div>
+                  <div class="text-center">
+                    <small id="progressDisplay">0%</small>
+                  </div>
                 </div>
-                <div class="col-12 form-check ms-2">
-                  <input id="taskHidden" type="checkbox" class="form-check-input" /><label
-                    for="taskHidden"
-                    data-key="hiddenTaskLabel"
-                  ></label>
+                <div class="col-12">
+                  <div class="form-check">
+                    <input id="taskHidden" type="checkbox" class="form-check-input" /><label
+                      for="taskHidden"
+                      class="form-check-label"
+                      data-key="hiddenTaskLabel"
+                    ></label>
+                  </div>
                 </div>
               </div>
             </form>
@@ -229,26 +246,36 @@
           </div>
           <div class="modal-body">
             <div id="importInfo"></div>
-            <label data-key="importMode"></label>
-            <div class="form-check">
-              <input
-                id="importModeReplace"
-                name="importMode"
-                type="radio"
-                value="replace"
-                checked
-                class="form-check-input"
-              /><label for="importModeReplace" data-key="replaceMode"></label>
-            </div>
-            <div class="form-check">
-              <input
-                id="importModeMerge"
-                name="importMode"
-                type="radio"
-                value="merge"
-                class="form-check-input"
-              /><label for="importModeMerge" data-key="mergeMode"></label>
-            </div>
+            <fieldset>
+              <legend class="form-label fs-6" data-key="importMode"></legend>
+              <div class="form-check">
+                <input
+                  id="importModeReplace"
+                  name="importMode"
+                  type="radio"
+                  value="replace"
+                  checked
+                  class="form-check-input"
+                /><label
+                  for="importModeReplace"
+                  class="form-check-label"
+                  data-key="replaceMode"
+                ></label>
+              </div>
+              <div class="form-check">
+                <input
+                  id="importModeMerge"
+                  name="importMode"
+                  type="radio"
+                  value="merge"
+                  class="form-check-input"
+                /><label
+                  for="importModeMerge"
+                  class="form-check-label"
+                  data-key="mergeMode"
+                ></label>
+              </div>
+            </fieldset>
           </div>
           <div class="modal-footer">
             <button class="btn btn-secondary" data-bs-dismiss="modal" data-key="cancel"></button