1

app/server.py

@@ -65,19 +65,20 @@ def parse_json_body(handler: BaseHTTPRequestHandler) -> dict[str, Any]:
     return value
 
 
-def target_select_options(
+def target_checkbox_options(
     targets: list[dict[str, Any]],
     selected_ids: list[int] | None = None,
-    placeholder: bool = False,
 ) -> str:
     selected_ids = selected_ids or []
-    options = ['<option value="">请选择飞书 Webhook</option>'] if placeholder else []
+    if not targets:
+        return '<p class="warning">还没有可用的飞书 Webhook，请先到飞书 Webhook 页面创建。</p>'
+    options = []
     for target in targets:
-        selected = "selected" if target["id"] in selected_ids else ""
+        checked = "checked" if target["id"] in selected_ids else ""
         disabled = "" if target["enabled"] else "disabled"
         suffix = "" if target["enabled"] else " (停用)"
         options.append(
-            f'<option value="{target["id"]}" {selected} {disabled}>{html.escape(target["name"])}{suffix}</option>'
+            f'<label class="target-choice"><input type="checkbox" name="target_ids" value="{target["id"]}" {checked} {disabled}> <span>{html.escape(target["name"])}{suffix}</span></label>'
         )
     return "".join(options)
 
@@ -436,7 +437,7 @@ class Handler(BaseHTTPRequestHandler):
             "target_ids": [],
             "enabled": 1,
         }
-        selected_targets = target_select_options(targets, rule.get("target_ids", []))
+        selected_targets = target_checkbox_options(targets, rule.get("target_ids", []))
         hidden_id = f'<input type="hidden" name="id" value="{rule["id"]}">' if rule.get("id") else ""
         button_text = "保存修改" if rule.get("id") else "创建规则"
         sample_payload = sample_payload or json.dumps(
@@ -456,7 +457,7 @@ class Handler(BaseHTTPRequestHandler):
 </div>
 <label>卡片标题模板<input name="card_title_template" value="{html.escape(str(rule['card_title_template']))}" required></label>
 <label>卡片正文模板<textarea name="card_body_template" rows="6">{html.escape(str(rule['card_body_template']))}</textarea></label>
-<label class="field-target">发送到<select class="select-target multi" name="target_ids" multiple required size="5">{selected_targets}</select></label>
+<div class="field-target"><span class="field-label">发送到</span><div class="target-choices">{selected_targets}</div></div>
 <label class="check"><input name="enabled" type="checkbox" {'checked' if rule.get('enabled') else ''}> 启用</label>
 <h2>规则命中与卡片预览</h2>
 <input type="hidden" name="source_action" value="{html.escape(action)}">

app/static/styles.css

@@ -189,16 +189,42 @@ td textarea {
 }
 
 .field-target {
-  width: fit-content;
   max-width: 100%;
 }
 
-.select-target {
+.field-label {
-  width: clamp(220px, 34vw, 360px);
+  display: block;
+  color: var(--muted);
+  font: 600 13px ui-sans-serif, system-ui, sans-serif;
+  margin-bottom: 8px;
 }
 
-.select-target.multi {
+.target-choices {
-  min-height: 138px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.target-choice {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0;
+  padding: 11px 12px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #fff;
+  color: var(--ink);
+}
+
+.target-choice input {
+  width: auto;
+}
+
+.target-choice:has(input:checked) {
+  border-color: var(--accent);
+  background: #eef8f5;
 }
 
 .check {