统一showSystemSelectList和showSelect的参数，编排用户交互分类的选择列表添加系统弹窗的选项

plugin/lib/dialog/controller.js

@@ -111,6 +111,14 @@ document.addEventListener("DOMContentLoaded", () => {
         let hoverTimeout = null;
         let isKeyboardNavigation = false;
 
+        if (!config.enableSearch) {
+          filterInput.style.display = "none";
+        }
+
+        if (config.placeholder) {
+          filterInput.placeholder = config.placeholder;
+        }
+
         // 创建选项
         const createSelectItem = (item, index) => {
           const div = document.createElement("div");
@@ -129,7 +137,7 @@ document.addEventListener("DOMContentLoaded", () => {
             ipcRenderer.sendTo(parentId, "dialog-result", result);
           };
 
-          // 鼠标移入事件（带防抖）
+          // 鼠标移入事件
           div.onmouseenter = () => {
             if (isKeyboardNavigation) return;
             if (hoverTimeout) {
@@ -141,7 +149,7 @@ document.addEventListener("DOMContentLoaded", () => {
               }
               div.classList.add("selected");
               currentSelected = div;
-            }, 50);
+            }, 0);
           };
 
           // 鼠标移动事件
@@ -243,15 +251,17 @@ document.addEventListener("DOMContentLoaded", () => {
         updateList();
 
         // 添加筛选功能
-        let filterTimeout = null;
+        if (config.enableSearch) {
-        filterInput.addEventListener("input", (e) => {
+          let filterTimeout = null;
-          if (filterTimeout) {
+          filterInput.addEventListener("input", (e) => {
-            clearTimeout(filterTimeout);
+            if (filterTimeout) {
-          }
+              clearTimeout(filterTimeout);
-          filterTimeout = setTimeout(() => {
+            }
-            updateList(e.target.value);
+            filterTimeout = setTimeout(() => {
-          }, 100);
+              updateList(e.target.value);
-        });
+            }, 100);
+          });
+        }
 
         // 添加键盘导航
         const keydownHandler = (e) => {
@@ -307,7 +317,9 @@ document.addEventListener("DOMContentLoaded", () => {
         document.addEventListener("keydown", keydownHandler);
 
         // 聚焦筛选框
-        filterInput.focus();
+        if (config.enableSearch) {
+          filterInput.focus();
+        }
         break;
     }
     ipcRenderer.sendTo(parentId, "dialog-ready", calculateHeight());

plugin/lib/dialog/service.js

@@ -21,6 +21,7 @@ const createDialog = (config) => {
       skipTaskbar: true,
       alwaysOnTop: true,
       frame: false,
+      opacity: 0,
       webPreferences: {
         preload: preloadPath,
       },
@@ -49,6 +50,7 @@ const createDialog = (config) => {
         };
         // 设置新的位置和大小
         UBrowser.setBounds(newBounds);
+        UBrowser.setOpacity(1);
         ipcRenderer.removeListener("dialog-ready", dialogReadyHandler);
       };
       ipcRenderer.on("dialog-ready", dialogReadyHandler);
@@ -159,18 +161,25 @@ const showSystemTextArea = async (placeholder = "请输入", defaultText = "") =
  * @param {Array<string|{title: string, description?: string, icon?: string}>} items - 选项列表
  * @param {object} [options] - 配置选项
  * @param {string} [options.title] - 对话框标题
+ * @param {string} [options.placeholder] - 输入框占位符
+ * @param {boolean} [options.enableSearch] - 是否启用搜索
  * @returns {Promise<{id: number, text: string, data: any}>} 选择的结果
  */
 const showSystemSelectList = async (items, options = {}) => {
-  const defaultOptions = {
+  const {
-    title: "",
+    title = "请选择",
-  };
+    placeholder = "",
-  const finalOptions = { ...defaultOptions, ...options };
+    enableSearch = true,
+    optionType = "plaintext",
+  } = options;
 
   return await createDialog({
     type: "select",
-    title: finalOptions.title,
+    title,
-    items: items,
+    placeholder,
+    enableSearch,
+    items,
+    optionType,
   });
 };
 

plugin/lib/dialog/style.css

@@ -0,0 +1,461 @@
+ :root {
+   --bg-color: #fff;
+   --text-color: #333;
+   --border-color: #ddd;
+   --title-bg: #f5f5f5;
+   --input-bg: #fff;
+   --input-border: #ddd;
+   --input-focus: #0d6efd;
+   --button-bg: #0d6efd;
+   --button-hover: #0b5ed7;
+   --button-text: #fff;
+   --cancel-bg: #6c757d;
+   --cancel-border: #6c757d;
+ }
+
+ :root[data-theme="dark"] {
+   --bg-color: #282727;
+   --text-color: #e0e0e0;
+   --border-color: #404040;
+   --title-bg: #2d2d2d;
+   --input-bg: #2d2d2d;
+   --input-border: #404040;
+   --input-focus: #0d6efd;
+   --button-bg: #0d6efd;
+   --button-hover: #0b5ed7;
+   --button-text: #fff;
+   --cancel-bg: #4a4a4a;
+   --cancel-border: #4a4a4a;
+ }
+
+ body {
+   margin: 0;
+   padding: 0;
+   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+     "Helvetica Neue", Arial, sans-serif;
+   background: var(--bg-color);
+   color: var(--text-color);
+   user-select: none;
+   height: 100vh;
+   display: flex;
+   flex-direction: column;
+   overflow: hidden;
+ }
+
+ /* 自定义滚动条样式 */
+ ::-webkit-scrollbar {
+   width: 4px;
+   height: 4px;
+ }
+
+ ::-webkit-scrollbar-track {
+   background: transparent;
+ }
+
+ ::-webkit-scrollbar-thumb {
+   background: rgba(0, 0, 0, 0);
+   transition: background-color 0.3s;
+ }
+
+ :root[data-theme="dark"] ::-webkit-scrollbar-thumb {
+   background: rgba(255, 255, 255, 0);
+ }
+
+ /* 悬浮时显示滚动条 */
+ *:hover::-webkit-scrollbar-thumb {
+   background: rgba(0, 0, 0, 0.3);
+   transition: background-color 0.3s;
+ }
+
+ :root[data-theme="dark"] *:hover::-webkit-scrollbar-thumb {
+   background: rgba(255, 255, 255, 0.3);
+ }
+
+ /* 标题栏样式 */
+ .title-bar {
+   background: var(--title-bg);
+   border-bottom: 1px solid var(--border-color);
+   padding: 4px 12px;
+   -webkit-app-region: drag;
+   display: flex;
+   align-items: center;
+   flex-shrink: 0;
+ }
+
+ .title-left {
+   flex: 1;
+   display: flex;
+   align-items: center;
+ }
+
+ .logo {
+   width: 20px;
+   height: 20px;
+   margin-right: 6px;
+ }
+
+ .title-text {
+   font-size: 13px;
+   font-weight: 500;
+   color: var(--text-color);
+   margin: 0;
+ }
+
+ .close-btn {
+   -webkit-app-region: no-drag;
+   background-color: rgba(0, 0, 0, 0.05);
+   width: 16px;
+   height: 16px;
+   min-width: 16px;
+   min-height: 16px;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   border-radius: 50%;
+   cursor: pointer;
+   opacity: 0.8;
+   transition: all 0.2s;
+   margin-left: 8px;
+   position: relative;
+ }
+
+ :root[data-theme="dark"] .close-btn {
+   background-color: rgba(255, 255, 255, 0.1);
+ }
+
+ .close-btn:hover {
+   opacity: 1;
+   background-color: #ff4d4d;
+ }
+
+ .close-btn::before,
+ .close-btn::after {
+   content: "";
+   position: absolute;
+   width: 8px;
+   height: 1px;
+   background-color: var(--text-color);
+   transform-origin: center;
+ }
+
+ .close-btn::before {
+   transform: rotate(45deg);
+ }
+
+ .close-btn::after {
+   transform: rotate(-45deg);
+ }
+
+ .close-btn:hover::before,
+ .close-btn:hover::after {
+   background-color: #fff;
+ }
+
+ .container {
+   display: flex;
+   flex-direction: column;
+   height: 100vh;
+ }
+
+ .content-wrapper {
+   padding: 16px;
+   min-height: 60px;
+   max-height: 449px;
+   overflow-y: auto;
+   overflow-x: hidden;
+   flex: 1;
+ }
+
+ /* 选择列表对话框的内容区域padding和高度 */
+ .dialog-select .content-wrapper {
+   padding: 16px 8px;
+   max-height: 600px;
+ }
+
+ #content {
+   line-height: 1.4;
+   font-size: 13px;
+   user-select: text;
+ }
+
+ .button-bar {
+   display: flex;
+   justify-content: flex-end;
+   gap: 8px;
+   padding: 0 16px 16px;
+   flex-shrink: 0;
+   background: var(--bg-color);
+ }
+
+ button {
+   padding: 4px 12px;
+   border-radius: 4px;
+   border: 1px solid var(--button-bg);
+   background: linear-gradient(180deg,
+       rgba(255, 255, 255, 0.08) 0%,
+       rgba(0, 0, 0, 0.05) 100%),
+     var(--button-bg);
+   color: var(--button-text);
+   cursor: pointer;
+   font-size: 13px;
+   min-width: 70px;
+   transition: all 0.2s ease;
+   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+ }
+
+ button:hover {
+   background: linear-gradient(180deg,
+       rgba(255, 255, 255, 0.1) 0%,
+       rgba(0, 0, 0, 0.05) 100%),
+     var(--button-hover);
+ }
+
+ button:active {
+   background: linear-gradient(180deg,
+       rgba(0, 0, 0, 0.05) 0%,
+       rgba(255, 255, 255, 0.08) 100%),
+     var(--button-bg);
+   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+ }
+
+ #ok-btn {
+   padding: 0 12px;
+   height: 20px;
+ }
+
+ #cancel-btn {
+   padding: 0 12px;
+   background: linear-gradient(180deg,
+       rgba(255, 255, 255, 0.08) 0%,
+       rgba(0, 0, 0, 0.05) 100%),
+     var(--cancel-bg);
+   border: 1px solid var(--cancel-border);
+   height: 20px;
+ }
+
+ #cancel-btn:hover {
+   background: linear-gradient(180deg,
+       rgba(255, 255, 255, 0.1) 0%,
+       rgba(0, 0, 0, 0.05) 100%),
+     var(--cancel-bg);
+ }
+
+ #input-container {
+   display: flex;
+   flex-direction: column;
+   gap: 8px;
+ }
+
+ .input-group label {
+   display: block;
+   padding: 0 0 4px 2px;
+   color: var(--text-color);
+   font-size: 13px;
+ }
+
+ .input-group input {
+   width: 100%;
+   padding: 6px 8px;
+   border: 1px solid var(--input-border);
+   border-radius: 4px;
+   font-size: 13px;
+   box-sizing: border-box;
+   background: var(--input-bg);
+   color: var(--text-color);
+ }
+
+ .input-group input:focus {
+   border-color: var(--input-focus);
+   outline: none;
+   box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
+ }
+
+ /* 文本区域样式 */
+ textarea {
+   width: 100%;
+   height: 400px;
+   padding: 6px 8px;
+   border: 1px solid var(--input-border);
+   border-radius: 4px;
+   font-size: 13px;
+   resize: none;
+   box-sizing: border-box;
+   background: var(--input-bg);
+   color: var(--text-color);
+ }
+
+ textarea:focus {
+   border-color: var(--input-focus);
+   outline: none;
+   box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
+ }
+
+ /* 按钮组样式 */
+ #button-container {
+   display: flex;
+   flex-direction: column;
+   gap: 10px;
+   padding-top: 4px;
+ }
+
+ #button-container button {
+   width: 100%;
+   text-align: center;
+   padding: 6px 12px;
+ }
+
+ /* 根据对话框类型显示/隐藏取消按钮 */
+ .dialog-message #cancel-btn {
+   display: none;
+ }
+
+ .dialog-buttons .button-bar {
+   display: none;
+ }
+
+ /* 隐藏所有对话框内容 */
+ #input,
+ #confirm,
+ #buttons,
+ #textarea,
+ #select {
+   display: none;
+ }
+
+ /* 选择列表样式 */
+ .select-list {
+   display: flex;
+   flex-direction: column;
+   gap: 4px;
+   max-height: 505px;
+   overflow-y: auto;
+ }
+
+ .filter-input {
+   padding: 0 2px 8px 2px;
+ }
+
+ .filter-input input {
+   width: 100%;
+   padding: 6px 8px;
+   border: 1px solid var(--input-border);
+   border-radius: 4px;
+   font-size: 13px;
+   box-sizing: border-box;
+   background: var(--input-bg);
+   color: var(--text-color);
+ }
+
+ .filter-input input:focus {
+   border-color: var(--input-focus);
+   outline: none;
+   box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
+ }
+
+ .select-list-container {
+   display: flex;
+   flex-direction: column;
+   gap: 4px;
+   max-height: 360px;
+   overflow-y: auto;
+ }
+
+ .select-item {
+   display: flex;
+   align-items: center;
+   padding: 6px 8px;
+   border-radius: 8px;
+   cursor: pointer;
+   position: relative;
+   transform: translateY(0) scale(1);
+   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+   will-change: transform;
+ }
+
+ .select-item.selected {
+   background-color: rgba(13, 110, 253, 0.1);
+   position: relative;
+   transform: translateY(-1px) scale(0.995);
+   will-change: transform;
+ }
+
+ .select-item-icon {
+   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+   will-change: transform;
+   padding-right: 8px;
+ }
+
+ .select-item.selected .select-item-icon {
+   transform: scale(1.05);
+   filter: brightness(1.05);
+ }
+
+ :root[data-theme="dark"] .select-list:not(.keyboard-nav) .select-item:hover {
+   background-color: rgba(13, 110, 253, 0.2);
+ }
+
+ :root[data-theme="dark"] .select-item.selected {
+   background-color: rgba(13, 110, 253, 0.2);
+ }
+
+ /* 添加选择时的轻微阴影效果 */
+ .select-item.selected,
+ .select-list:not(.keyboard-nav) .select-item:hover {
+   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+ }
+
+ :root[data-theme="dark"] .select-item.selected,
+ :root[data-theme="dark"] .select-list:not(.keyboard-nav) .select-item:hover {
+   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ }
+
+ .select-item-icon {
+   width: 34px;
+   height: 34px;
+   margin-right: 8px;
+   border-radius: 4px;
+   overflow: hidden;
+ }
+
+ .select-item-icon img {
+   width: 100%;
+   height: 100%;
+   object-fit: cover;
+ }
+
+ .select-item-content {
+   flex: 1;
+   min-width: 0;
+ }
+
+ .select-item-title {
+   font-size: 13px;
+   line-height: 1.4;
+   margin: 0;
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
+ }
+
+ .select-item-description {
+   font-size: 12px;
+   color: rgba(0, 0, 0, 0.6);
+   margin: 0;
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
+ }
+
+ :root[data-theme="dark"] .select-item-description {
+   color: rgba(255, 255, 255, 0.6);
+ }
+
+ /* 搜索结果高亮样式 */
+ .highlight {
+   color: #ec3535;
+ }
+
+ /* 隐藏确定和取消按钮 */
+ .dialog-select .button-bar {
+   display: none;
+ }

plugin/lib/dialog/view.html

@@ -3,454 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>对话框</title>
-    <style>
+    <link rel="stylesheet" href="style.css" />
-      :root {
-        --bg-color: #fff;
-        --text-color: #333;
-        --border-color: #ddd;
-        --title-bg: #f5f5f5;
-        --input-bg: #fff;
-        --input-border: #ddd;
-        --input-focus: #0d6efd;
-        --button-bg: #0d6efd;
-        --button-hover: #0b5ed7;
-        --button-text: #fff;
-        --cancel-bg: #6c757d;
-        --cancel-border: #6c757d;
-      }
-
-      :root[data-theme="dark"] {
-        --bg-color: #282727;
-        --text-color: #e0e0e0;
-        --border-color: #404040;
-        --title-bg: #2d2d2d;
-        --input-bg: #2d2d2d;
-        --input-border: #404040;
-        --input-focus: #0d6efd;
-        --button-bg: #0d6efd;
-        --button-hover: #0b5ed7;
-        --button-text: #fff;
-        --cancel-bg: #4a4a4a;
-        --cancel-border: #4a4a4a;
-      }
-
-      body {
-        margin: 0;
-        padding: 0;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-          "Helvetica Neue", Arial, sans-serif;
-        background: var(--bg-color);
-        color: var(--text-color);
-        user-select: none;
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-
-      /* 标题栏样式 */
-      .title-bar {
-        background: var(--title-bg);
-        border-bottom: 1px solid var(--border-color);
-        padding: 4px 12px;
-        -webkit-app-region: drag;
-        display: flex;
-        align-items: center;
-        flex-shrink: 0;
-      }
-
-      .title-left {
-        flex: 1;
-        display: flex;
-        align-items: center;
-      }
-
-      .logo {
-        width: 20px;
-        height: 20px;
-        margin-right: 6px;
-      }
-
-      .title-text {
-        font-size: 13px;
-        font-weight: 500;
-        color: var(--text-color);
-        margin: 0;
-      }
-
-      .close-btn {
-        -webkit-app-region: no-drag;
-        background-color: rgba(0, 0, 0, 0.05);
-        width: 16px;
-        height: 16px;
-        min-width: 16px;
-        min-height: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 50%;
-        cursor: pointer;
-        opacity: 0.8;
-        transition: all 0.2s;
-        margin-left: 8px;
-        position: relative;
-      }
-
-      :root[data-theme="dark"] .close-btn {
-        background-color: rgba(255, 255, 255, 0.1);
-      }
-
-      .close-btn:hover {
-        opacity: 1;
-        background-color: #ff4d4d;
-      }
-
-      .close-btn::before,
-      .close-btn::after {
-        content: "";
-        position: absolute;
-        width: 8px;
-        height: 1px;
-        background-color: var(--text-color);
-        transform-origin: center;
-      }
-
-      .close-btn::before {
-        transform: rotate(45deg);
-      }
-
-      .close-btn::after {
-        transform: rotate(-45deg);
-      }
-
-      .close-btn:hover::before,
-      .close-btn:hover::after {
-        background-color: #fff;
-      }
-
-      .container {
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
-      }
-
-      .content-wrapper {
-        padding: 16px;
-        min-height: 60px;
-        max-height: 449px;
-        overflow-y: auto;
-        overflow-x: hidden;
-        flex: 1;
-      }
-
-      /* 选择列表对话框的内容区域padding和高度 */
-      .dialog-select .content-wrapper {
-        padding: 16px 5px;
-        max-height: 600px;
-      }
-
-      #content {
-        line-height: 1.4;
-        font-size: 13px;
-        user-select: text;
-      }
-
-      .button-bar {
-        display: flex;
-        justify-content: flex-end;
-        gap: 8px;
-        padding: 0 16px 16px;
-        flex-shrink: 0;
-        background: var(--bg-color);
-      }
-
-      button {
-        padding: 4px 12px;
-        border-radius: 4px;
-        border: 1px solid var(--button-bg);
-        background: linear-gradient(
-            180deg,
-            rgba(255, 255, 255, 0.08) 0%,
-            rgba(0, 0, 0, 0.05) 100%
-          ),
-          var(--button-bg);
-        color: var(--button-text);
-        cursor: pointer;
-        font-size: 13px;
-        min-width: 70px;
-        transition: all 0.2s ease;
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-      }
-
-      button:hover {
-        background: linear-gradient(
-            180deg,
-            rgba(255, 255, 255, 0.1) 0%,
-            rgba(0, 0, 0, 0.05) 100%
-          ),
-          var(--button-hover);
-      }
-
-      button:active {
-        background: linear-gradient(
-            180deg,
-            rgba(0, 0, 0, 0.05) 0%,
-            rgba(255, 255, 255, 0.08) 100%
-          ),
-          var(--button-bg);
-        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-      }
-
-      #ok-btn {
-        padding: 0 12px;
-        height: 20px;
-      }
-
-      #cancel-btn {
-        padding: 0 12px;
-        background: linear-gradient(
-            180deg,
-            rgba(255, 255, 255, 0.08) 0%,
-            rgba(0, 0, 0, 0.05) 100%
-          ),
-          var(--cancel-bg);
-        border: 1px solid var(--cancel-border);
-        height: 20px;
-      }
-
-      #cancel-btn:hover {
-        background: linear-gradient(
-            180deg,
-            rgba(255, 255, 255, 0.1) 0%,
-            rgba(0, 0, 0, 0.05) 100%
-          ),
-          var(--cancel-bg);
-      }
-
-      #input-container {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-
-      .input-group label {
-        display: block;
-        padding: 0 0 4px 2px;
-        color: var(--text-color);
-        font-size: 13px;
-      }
-
-      .input-group input {
-        width: 100%;
-        padding: 6px 8px;
-        border: 1px solid var(--input-border);
-        border-radius: 4px;
-        font-size: 13px;
-        box-sizing: border-box;
-        background: var(--input-bg);
-        color: var(--text-color);
-      }
-
-      .input-group input:focus {
-        border-color: var(--input-focus);
-        outline: none;
-        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
-      }
-
-      /* 文本区域样式 */
-      textarea {
-        width: 100%;
-        height: 400px;
-        padding: 6px 8px;
-        border: 1px solid var(--input-border);
-        border-radius: 4px;
-        font-size: 13px;
-        resize: none;
-        box-sizing: border-box;
-        background: var(--input-bg);
-        color: var(--text-color);
-      }
-
-      textarea:focus {
-        border-color: var(--input-focus);
-        outline: none;
-        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
-      }
-
-      /* 按钮组样式 */
-      #button-container {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        padding-top: 4px;
-      }
-
-      #button-container button {
-        width: 100%;
-        text-align: center;
-        padding: 6px 12px;
-      }
-
-      /* 根据对话框类型显示/隐藏取消按钮 */
-      .dialog-message #cancel-btn {
-        display: none;
-      }
-
-      .dialog-buttons .button-bar {
-        display: none;
-      }
-
-      /* 隐藏所有对话框内容 */
-      #input,
-      #confirm,
-      #buttons,
-      #textarea,
-      #select {
-        display: none;
-      }
-
-      /* 选择列表样式 */
-      .select-list {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        max-height: 505px;
-        overflow-y: auto;
-      }
-
-      .filter-input {
-        margin-bottom: 8px;
-        padding: 0 2px;
-      }
-
-      .filter-input input {
-        width: 100%;
-        padding: 6px 8px;
-        border: 1px solid var(--input-border);
-        border-radius: 4px;
-        font-size: 13px;
-        box-sizing: border-box;
-        background: var(--input-bg);
-        color: var(--text-color);
-      }
-
-      .filter-input input:focus {
-        border-color: var(--input-focus);
-        outline: none;
-        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
-      }
-
-      .select-list-container {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        max-height: 360px;
-        overflow-y: auto;
-      }
-
-      .select-item {
-        display: flex;
-        align-items: center;
-        padding: 6px 8px;
-        border-radius: 8px;
-        cursor: pointer;
-        position: relative;
-        transform: translateY(0) scale(1);
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        will-change: transform;
-      }
-
-      .select-item.selected {
-        background-color: rgba(13, 110, 253, 0.1);
-        position: relative;
-        transform: translateY(-1px) scale(0.995);
-        will-change: transform;
-      }
-
-      .select-item-icon {
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        will-change: transform;
-      }
-
-      .select-item.selected .select-item-icon {
-        transform: scale(1.05);
-        filter: brightness(1.05);
-      }
-
-      :root[data-theme="dark"]
-        .select-list:not(.keyboard-nav)
-        .select-item:hover {
-        background-color: rgba(13, 110, 253, 0.2);
-      }
-
-      :root[data-theme="dark"] .select-item.selected {
-        background-color: rgba(13, 110, 253, 0.2);
-      }
-
-      /* 添加选择时的轻微阴影效果 */
-      .select-item.selected,
-      .select-list:not(.keyboard-nav) .select-item:hover {
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-      }
-
-      :root[data-theme="dark"] .select-item.selected,
-      :root[data-theme="dark"]
-        .select-list:not(.keyboard-nav)
-        .select-item:hover {
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-      }
-
-      .select-item-icon {
-        width: 34px;
-        height: 34px;
-        margin-right: 8px;
-        border-radius: 4px;
-        overflow: hidden;
-      }
-
-      .select-item-icon img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      .select-item-content {
-        flex: 1;
-        min-width: 0;
-      }
-
-      .select-item-title {
-        font-size: 13px;
-        line-height: 1.4;
-        margin: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .select-item-description {
-        font-size: 12px;
-        color: rgba(0, 0, 0, 0.6);
-        margin: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      :root[data-theme="dark"] .select-item-description {
-        color: rgba(255, 255, 255, 0.6);
-      }
-
-      /* 搜索结果高亮样式 */
-      .highlight {
-        color: #ec3535;
-      }
-
-      /* 隐藏确定和取消按钮 */
-      .dialog-select .button-bar {
-        display: none;
-      }
-    </style>
   </head>
   <body>
     <div class="container">

src/components/composer/ui/SelectListEditor.vue

@@ -1,17 +1,20 @@
 <template>
   <div class="row q-col-gutter-sm">
     <!-- 控制区 -->
+    <div class="sub-command-card col-12">
+      <OperationCard
+        :model-value="argvs.subCommand"
+        :options="subCommands"
+        @update:model-value="handleSubCommandChange"
+      />
+    </div>
     <div class="col-12">
       <div class="row items-center q-gutter-sm">
         <!-- 选项类型选择 -->
         <div class="col model-type-select">
           <OperationCard
             :model-value="argvs.optionType"
-            :options="[
+            :options="optionTypes"
-              { label: '纯文本', value: 'plaintext', icon: 'text_fields' },
-              { label: 'HTML', value: 'html', icon: 'code' },
-              { label: 'JSON', value: 'json', icon: 'data_object' },
-            ]"
             square
             height="36px"
             @update:model-value="handleOptionTypeChange"
@@ -54,67 +57,9 @@
             </template>
           </q-select>
         </div>
-
-        <!-- 设置按钮 -->
-        <div class="col-auto">
-          <q-btn
-            flat
-            round
-            dense
-            icon="settings"
-            color="primary"
-            @click="showSettings = !showSettings"
-          >
-            <q-tooltip>高级设置</q-tooltip>
-          </q-btn>
-        </div>
       </div>
     </div>
 
-    <!-- 设置面板 -->
-    <q-slide-transition>
-      <div v-show="showSettings" class="row q-col-gutter-sm">
-        <!-- 搜索框占位符 -->
-        <div class="col">
-          <VariableInput
-            :disabled="!argvs.enableSearch"
-            :model-value="argvs.placeholder"
-            label="搜索框占位符"
-            icon="search"
-            dense
-            @update:model-value="updateArgvs('placeholder', $event)"
-          />
-        </div>
-
-        <!-- 开关选项 -->
-        <div class="col-auto items-center row">
-          <div class="row q-col-gutter-x-md">
-            <q-checkbox
-              :model-value="argvs.enableSearch"
-              label="启用搜索"
-              dense
-              class="toggle-option"
-              @update:model-value="updateArgvs('enableSearch', $event)"
-            />
-            <q-checkbox
-              :model-value="argvs.showCancelButton"
-              label="关闭按钮"
-              dense
-              class="toggle-option"
-              @update:model-value="updateArgvs('showCancelButton', $event)"
-            />
-            <q-checkbox
-              :model-value="argvs.closeOnSelect"
-              label="选择后关闭"
-              dense
-              class="toggle-option"
-              @update:model-value="updateArgvs('closeOnSelect', $event)"
-            />
-          </div>
-        </div>
-      </div>
-    </q-slide-transition>
-
     <!-- 变量输入模式 -->
     <div v-if="argvs.inputMode === 'variable'" class="col-12">
       <VariableInput
@@ -154,14 +99,58 @@
         </ArrayEditor>
       </template>
     </div>
+    <div class="col-12">
+      <BorderLabel label="设置" icon="settings">
+        <div class="row q-col-gutter-sm items-center">
+          <!-- 搜索框占位符 -->
+          <div class="col">
+            <VariableInput
+              :disabled="!argvs.enableSearch"
+              :model-value="argvs.placeholder"
+              :disable="!argvs.enableSearch"
+              label="搜索框占位符"
+              icon="search"
+              dense
+              @update:model-value="updateArgvs('placeholder', $event)"
+            />
+          </div>
+
+          <!-- 开关选项 -->
+          <q-toggle
+            :model-value="argvs.enableSearch"
+            label="启用搜索"
+            dense
+            class="toggle-option"
+            @update:model-value="updateArgvs('enableSearch', $event)"
+          />
+          <q-toggle
+            v-if="hasHtmlOption(argvs.subCommand)"
+            :model-value="argvs.showCancelButton"
+            label="关闭按钮"
+            dense
+            class="toggle-option"
+            @update:model-value="updateArgvs('showCancelButton', $event)"
+          />
+          <q-toggle
+            v-if="hasHtmlOption(argvs.subCommand)"
+            :model-value="argvs.closeOnSelect"
+            label="选择后关闭"
+            dense
+            class="toggle-option"
+            @update:model-value="updateArgvs('closeOnSelect', $event)"
+          />
+        </div>
+      </BorderLabel>
+    </div>
   </div>
 </template>
 
 <script>
 import { defineComponent } from "vue";
-import VariableInput from "../common/VariableInput.vue";
+import VariableInput from "components/composer/common/VariableInput.vue";
-import ArrayEditor from "../common/ArrayEditor.vue";
+import ArrayEditor from "components/composer/common/ArrayEditor.vue";
-import OperationCard from "../common/OperationCard.vue";
+import OperationCard from "components/composer/common/OperationCard.vue";
+import BorderLabel from "components/composer/common/BorderLabel.vue";
 import { parseFunction, stringifyArgv } from "js/composer/formatString";
 import { newVarInputVal, isVarInputVal } from "js/composer/varInputValManager";
 
@@ -185,6 +174,7 @@ export default defineComponent({
     VariableInput,
     ArrayEditor,
     OperationCard,
+    BorderLabel,
   },
   props: {
     modelValue: {
@@ -195,21 +185,6 @@ export default defineComponent({
   emits: ["update:modelValue"],
   data() {
     return {
-      showSettings: false,
-      optionTypes: [
-        { label: "纯文本", value: "plaintext" },
-        { label: "HTML", value: "html" },
-        { label: "JSON", value: "json" },
-      ],
-      defaultArgvs: {
-        inputMode: "manual",
-        selects: defaultSelects.json,
-        optionType: "json",
-        placeholder: newVarInputVal("str", "搜索..."),
-        enableSearch: true,
-        showCancelButton: false,
-        closeOnSelect: true,
-      },
       arrayEditorDefaultRowValue: {
         id: newVarInputVal("var"),
         title: newVarInputVal("str"),
@@ -231,6 +206,28 @@ export default defineComponent({
           width: 5,
         },
       },
+      subCommands: [
+        {
+          label: "插件内弹窗",
+          value: "quickcommand.showSelectList",
+          icon: "call_to_action",
+        },
+        {
+          label: "系统弹窗",
+          value: "quickcommand.showSystemSelectList",
+          icon: "report",
+        },
+      ],
+      defaultArgvs: {
+        subCommand: "quickcommand.showSelectList",
+        inputMode: "manual",
+        selects: defaultSelects.json,
+        optionType: "json",
+        placeholder: newVarInputVal("str", "搜索..."),
+        enableSearch: true,
+        showCancelButton: false,
+        closeOnSelect: true,
+      },
     };
   },
   computed: {
@@ -239,6 +236,15 @@ export default defineComponent({
         this.modelValue.argvs || this.parseCodeToArgvs(this.modelValue.code)
       );
     },
+    optionTypes() {
+      return [
+        { label: "纯文本", value: "plaintext", icon: "text_fields" },
+        this.hasHtmlOption(this.argvs.subCommand)
+          ? { label: "HTML", value: "html", icon: "html" }
+          : "",
+        { label: "JSON", value: "json", icon: "data_object" },
+      ].filter(Boolean);
+    },
   },
   methods: {
     /**
@@ -262,6 +268,19 @@ export default defineComponent({
       });
       this.updateModelValue(argvs);
     },
+    hasHtmlOption(subCommand) {
+      return subCommand === "quickcommand.showSelectList";
+    },
+    handleSubCommandChange(newSubCommand) {
+      const newArgvs = { ...this.argvs, subCommand: newSubCommand };
+      if (
+        !this.hasHtmlOption(newSubCommand) &&
+        this.argvs.optionType === "html"
+      ) {
+        newArgvs.optionType = "plaintext";
+      }
+      this.updateModelValue(newArgvs);
+    },
     generateCode(argvs = this.argvs) {
       const {
         selects,
@@ -270,6 +289,7 @@ export default defineComponent({
         enableSearch,
         showCancelButton,
         closeOnSelect,
+        subCommand,
       } = argvs;
 
       // 构建选项对象
@@ -277,12 +297,14 @@ export default defineComponent({
         ...(enableSearch && placeholder?.value && { placeholder: placeholder }),
         ...(optionType !== "plaintext" && { optionType }),
         ...(enableSearch !== true && { enableSearch }),
-        ...(showCancelButton && { showCancelButton }),
+        ...(showCancelButton &&
-        ...(closeOnSelect !== true && { closeOnSelect }),
+          hasHtmlOption(subCommand) && { showCancelButton }),
+        ...(closeOnSelect !== true &&
+          hasHtmlOption(subCommand) && { closeOnSelect }),
       };
 
       // 生成代码
-      return `${this.modelValue.value}(${stringifyArgv(selects)}${
+      return `${subCommand}(${stringifyArgv(selects)}${
         Object.keys(options).length ? `, ${stringifyArgv(options)}` : ""
       })`;
     },
@@ -296,16 +318,19 @@ export default defineComponent({
 
         if (!result) return this.defaultArgvs;
 
+        const subCommand = result.name;
+
         const [selects, options = {}] = result.argvs;
         const inputMode = isVarInputVal(selects) ? "variable" : "manual";
         return {
           ...this.defaultArgvs,
           inputMode,
           selects,
+          subCommand,
           ...options,
         };
       } catch (e) {
-        console.warn("选择列表参数解析失败:", code);
+        console.warn("选择列表参数解析失败:" + e, code);
         return this.defaultArgvs;
       }
     },
@@ -373,6 +398,7 @@ export default defineComponent({
 <style scoped>
 .toggle-option {
   font-size: 12px;
+  margin-left: 8px;
 }
 
 .toggle-option :deep(.q-toggle__label) {

src/plugins/monaco/types/quickcommand.api.d.ts

@@ -60,7 +60,7 @@ interface quickcommandApi {
    *        id: i,
    *        title: `选项${i}`,
    *        description: `选项${i}的描述`,
-   *        icon: `http://www.u.tools/favicon.ico`,
+   *        icon: `https://yuanliao.info/favicon.ico`,
    *        abcd: `选项${i}的自定义属性`,
    *        clickFn:function(e){console.log(e)}
    *     })
@@ -81,9 +81,12 @@ interface quickcommandApi {
    * ```
    *
    * @param selects 每一个列表选项
-   * @param options 列表的选项。placeholder: 搜索框占位符；optionType: 选项的格式，默认为plaintext；
+   * @param options 配置选项
-   * enableSearch：启用搜索，默认 true；showCancelButton：显示关闭按钮，默认 false；closeOnSelect：
+   * @param options.placeholder 搜索框占位符，默认为空
-   * 点击后关闭，默认 true
+   * @param options.optionType 选项的格式，plaintext|html|json，默认为plaintext
+   * @param options.enableSearch 启用搜索，默认 true
+   * @param options.showCancelButton 显示关闭按钮，默认 false
+   * @param options.closeOnSelect 点击后关闭，默认 true
    */
   showSelectList(
     selects: string[] | object[],
@@ -591,14 +594,12 @@ interface quickcommandApi {
    * // json
    * var opt = []
    * for (var i = 0; i < 15; i++) {
-   *     // 每一个选项为 json 格式, 使用clickFn注册选项单击事件时id属性是必需的
    *     opt.push({
    *        id: i,
    *        title: `选项${i}`,
    *        description: `选项${i}的描述`,
-   *        icon: `http://www.u.tools/favicon.ico`,
+   *        icon: `https://yuanliao.info/favicon.ico`,
    *        abcd: `选项${i}的自定义属性`,
-   *        clickFn:function(e){console.log(e)}
    *     })
    * }
    * quickcommand.showSystemSelectList(opt, {optionType: 'json'}).then(choise => {
@@ -607,13 +608,22 @@ interface quickcommandApi {
    * ​
    * ```
    *
-   * @param selects 每一个列表选项
+   * @param selects 每一个列表选项，可以为文本或对象
-   * @param options 列表的选项。placeholder: 搜索框占位符；optionType: 选项的格式，默认为plaintext；
+   * @param selects.title 选项的标题
+   * @param selects.description 选项的描述
+   * @param selects.icon 选项的图标
+   * @param options 配置选项
+   * @param options.placeholder 搜索框占位符，默认为空
+   * @param options.enableSearch 是否启用搜索，默认为 true
+   * @param options.title 对话框标题，默认为请选择
+   * @param options.optionType 选项的格式，plaintext|json，默认为plainText
    */
   showSystemSelectList(
     selects: string[] | object[],
     options?: {
       placeholder: string;
+      enableSearch: boolean;
+      title: string;
       optionType: "plaintext" | "json";
     }
   ): Promise<{ id: number; text: string | object }>;