study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-28 11:52:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
fofolee 2025-01-20 10:50:55 +08:00
parent 5b13f5c2a1
commit bd678e75bf
6 changed files with 631 additions and 560 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
plugin/lib/dialog/controller.js
View File

@ -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;
filterInput.addEventListener("input", (e) => {
if (filterTimeout) {
clearTimeout(filterTimeout);
}
filterTimeout = setTimeout(() => {
updateList(e.target.value);
}, 100);
});
if (config.enableSearch) {
let filterTimeout = null;
filterInput.addEventListener("input", (e) => {
if (filterTimeout) {
clearTimeout(filterTimeout);
}
filterTimeout = setTimeout(() => {
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());

21
plugin/lib/dialog/service.js
View File

@ -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 = {
title: "",
};
const finalOptions = { ...defaultOptions, ...options };
const {
title = "请选择",
placeholder = "",
enableSearch = true,
optionType = "plaintext",
} = options;
return await createDialog({
type: "select",
title: finalOptions.title,
items: items,
title,
placeholder,
enableSearch,
items,
optionType,
});
};

461
plugin/lib/dialog/style.css Normal file
View File

@ -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;
}

449
plugin/lib/dialog/view.html
View File

@ -3,454 +3,7 @@
<head>
<meta charset="UTF-8" />
<title>对话框</title>
<style>
: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>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">

196
src/components/composer/ui/SelectListEditor.vue
View File

@ -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="[
{ label: '纯文本', value: 'plaintext', icon: 'text_fields' },
{ label: 'HTML', value: 'html', icon: 'code' },
{ label: 'JSON', value: 'json', icon: 'data_object' },
]"
:options="optionTypes"
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 ArrayEditor from "../common/ArrayEditor.vue";
import OperationCard from "../common/OperationCard.vue";
import VariableInput from "components/composer/common/VariableInput.vue";
import ArrayEditor from "components/composer/common/ArrayEditor.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 }),
...(closeOnSelect !== true && { closeOnSelect }),
...(showCancelButton &&
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) {

28
src/plugins/monaco/types/quickcommand.api.d.ts vendored
View File

@ -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；
* enableSearch：启用搜索，默认 true；showCancelButton：显示关闭按钮，默认 false；closeOnSelect：
* 点击后关闭，默认 true
* @param options 配置选项
* @param options.placeholder 搜索框占位符，默认为空
* @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 options 列表的选项。placeholder: 搜索框占位符；optionType: 选项的格式，默认为plaintext；
* @param selects 每一个列表选项，可以为文本或对象
* @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 }>;