refactor: impl
This commit is contained in:
parent
3e14bff1e9
commit
c2c3956a82
|
|
@ -1,6 +1,7 @@
|
|||
import type { MdCommanderCommand, MdCommanderCommandMap } from "../types";
|
||||
|
||||
export const helpCommand: MdCommanderCommand = {
|
||||
export function setupHelpCommand(commands: MdCommanderCommandMap): MdCommanderCommand {
|
||||
return {
|
||||
command: "help",
|
||||
description: "显示帮助信息或特定命令的帮助",
|
||||
parameters: [
|
||||
|
|
@ -8,30 +9,23 @@ export const helpCommand: MdCommanderCommand = {
|
|||
name: "cmd",
|
||||
description: "要查询的命令名",
|
||||
type: "enum",
|
||||
values: [], // 运行时填充
|
||||
values: Object.keys(commands).filter((k) => k !== "help"),
|
||||
required: false,
|
||||
},
|
||||
],
|
||||
handler: (args, commands) => {
|
||||
handler: (args, cmds) => {
|
||||
const cmdName = args.params.cmd;
|
||||
if (cmdName && commands?.[cmdName]) {
|
||||
if (cmdName && cmds?.[cmdName]) {
|
||||
return {
|
||||
message: `命令：${cmdName}\n描述：${commands[cmdName]?.description || "无描述"}`,
|
||||
message: `命令：${cmdName}\n描述：${cmds[cmdName]?.description || "无描述"}`,
|
||||
type: "info",
|
||||
};
|
||||
}
|
||||
const cmdList = Object.keys(commands || {}).filter(k => k !== "help").join(", ");
|
||||
const cmdList = Object.keys(cmds || {}).filter((k) => k !== "help").join(", ");
|
||||
return {
|
||||
message: `可用命令：${cmdList}`,
|
||||
type: "info",
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
export function setupHelpCommand(commands: MdCommanderCommandMap): MdCommanderCommand {
|
||||
const cmd = { ...helpCommand };
|
||||
if (cmd.parameters?.[0]) {
|
||||
cmd.parameters[0].values = Object.keys(commands).filter(k => k !== "help");
|
||||
}
|
||||
return cmd;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export { helpCommand, setupHelpCommand } from "./help";
|
||||
export { setupHelpCommand } from "./help";
|
||||
export { clearCommand } from "./clear";
|
||||
export { rollCommand } from "./roll";
|
||||
export { trackCommand, untrackCommand, listTrackCommand } from "./tracker";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,182 @@
|
|||
import type { MdCommanderCommandMap, CompletionItem } from "../types";
|
||||
|
||||
export interface ParsedCommand {
|
||||
command?: string;
|
||||
params: Record<string, string>;
|
||||
options: Record<string, string>;
|
||||
incompleteParam?: { index: number; value: string };
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析命令行输入
|
||||
*/
|
||||
export function parseInput(input: string, commands?: MdCommanderCommandMap): ParsedCommand {
|
||||
const result: ParsedCommand = { params: {}, options: {} };
|
||||
const trimmed = input.trim();
|
||||
if (!trimmed) return result;
|
||||
|
||||
const parts = trimmed.split(/\s+/);
|
||||
let i = 0;
|
||||
|
||||
// 获取命令
|
||||
if (parts[0] && !parts[0].startsWith("-")) {
|
||||
result.command = parts[0];
|
||||
i = 1;
|
||||
}
|
||||
|
||||
// 获取命令的参数定义
|
||||
const cmd = result.command ? commands?.[result.command] : undefined;
|
||||
const paramDefs = cmd?.parameters || [];
|
||||
let paramIndex = 0;
|
||||
|
||||
// 解析参数和选项
|
||||
while (i < parts.length) {
|
||||
const part = parts[i];
|
||||
|
||||
if (part.startsWith("--")) {
|
||||
const eqIndex = part.indexOf("=");
|
||||
if (eqIndex !== -1) {
|
||||
result.options[part.slice(2, eqIndex)] = part.slice(eqIndex + 1);
|
||||
} else {
|
||||
const key = part.slice(2);
|
||||
if (i + 1 < parts.length && !parts[i + 1].startsWith("-")) {
|
||||
result.options[key] = parts[i + 1];
|
||||
i++;
|
||||
}
|
||||
}
|
||||
} else if (part.startsWith("-") && part.length === 2) {
|
||||
const key = part.slice(1);
|
||||
if (i + 1 < parts.length && !parts[i + 1].startsWith("-")) {
|
||||
result.options[key] = parts[i + 1];
|
||||
i++;
|
||||
}
|
||||
} else if (paramIndex < paramDefs.length) {
|
||||
result.params[paramDefs[paramIndex].name] = part;
|
||||
paramIndex++;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
|
||||
// 检查是否有未完成的位置参数
|
||||
if (paramIndex < paramDefs.length) {
|
||||
const lastPart = parts[parts.length - 1];
|
||||
if (lastPart && !lastPart.startsWith("-") && parts.length > 1) {
|
||||
result.incompleteParam = { index: paramIndex, value: lastPart };
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取自动补全建议
|
||||
*/
|
||||
export function getCompletions(input: string, commands: MdCommanderCommandMap): CompletionItem[] {
|
||||
const trimmed = input.trim();
|
||||
|
||||
// 空输入时返回所有命令
|
||||
if (!trimmed || /^\s*$/.test(trimmed)) {
|
||||
return Object.values(commands).map((cmd) => ({
|
||||
label: cmd.command,
|
||||
type: "command",
|
||||
description: cmd.description,
|
||||
insertText: cmd.command,
|
||||
}));
|
||||
}
|
||||
|
||||
const parsed = parseInput(trimmed, commands);
|
||||
|
||||
// 命令补全
|
||||
if (!parsed.command || !commands[parsed.command]) {
|
||||
return Object.values(commands)
|
||||
.filter((cmd) => cmd.command.startsWith(parsed.command || ""))
|
||||
.map((cmd) => ({
|
||||
label: cmd.command,
|
||||
type: "command",
|
||||
description: cmd.description,
|
||||
insertText: cmd.command,
|
||||
}));
|
||||
}
|
||||
|
||||
const cmd = commands[parsed.command];
|
||||
if (!cmd) return [];
|
||||
|
||||
const paramDefs = cmd.parameters || [];
|
||||
const usedParams = Object.keys(parsed.params);
|
||||
|
||||
// 判断是否正在输入最后一个参数
|
||||
const isTypingLastParam = paramDefs.length === usedParams.length &&
|
||||
trimmed.length > 0 &&
|
||||
!trimmed.endsWith(" ") &&
|
||||
!trimmed.split(/\s+/)[trimmed.split(/\s+/).length - 1].startsWith("-");
|
||||
|
||||
// 参数补全
|
||||
if (paramDefs.length > usedParams.length || parsed.incompleteParam || isTypingLastParam) {
|
||||
let paramIndex = parsed.incompleteParam?.index ?? (isTypingLastParam ? paramDefs.length - 1 : usedParams.length);
|
||||
const paramDef = paramDefs[paramIndex];
|
||||
if (!paramDef) return [];
|
||||
|
||||
let currentValue = parsed.incompleteParam?.value || "";
|
||||
if (isTypingLastParam && !parsed.incompleteParam) {
|
||||
const parts = trimmed.split(/\s+/);
|
||||
currentValue = parts[parts.length - 1] || "";
|
||||
}
|
||||
|
||||
// 模板补全
|
||||
if (paramDef.templates) {
|
||||
return paramDef.templates
|
||||
.filter((t) => t.label.toLowerCase().includes(currentValue.toLowerCase()))
|
||||
.map((t) => ({
|
||||
label: t.label,
|
||||
type: "value",
|
||||
description: t.description,
|
||||
insertText: t.insertText,
|
||||
}));
|
||||
}
|
||||
|
||||
// 枚举补全
|
||||
if (paramDef.type === "enum" && paramDef.values) {
|
||||
return paramDef.values
|
||||
.filter((v) => v.startsWith(currentValue))
|
||||
.map((v) => ({
|
||||
label: v,
|
||||
type: "value",
|
||||
description: paramDef.description,
|
||||
insertText: v,
|
||||
}));
|
||||
}
|
||||
|
||||
// 其他类型显示提示
|
||||
return [{
|
||||
label: `<${paramDef.name}>`,
|
||||
type: "value",
|
||||
description: `${paramDef.type}${paramDef.required !== false ? " (必填)" : ""}: ${paramDef.description || ""}`,
|
||||
insertText: "",
|
||||
}];
|
||||
}
|
||||
|
||||
// 选项补全
|
||||
if (!cmd.options) return [];
|
||||
|
||||
const usedOptions = Object.keys(parsed.options);
|
||||
return Object.values(cmd.options)
|
||||
.filter((opt) => !usedOptions.includes(opt.option))
|
||||
.map((opt) => ({
|
||||
label: `--${opt.option}`,
|
||||
type: "option",
|
||||
description: opt.description,
|
||||
insertText: `--${opt.option}=${opt.type === "boolean" ? "" : ""}`,
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据结果类型获取 CSS 类名
|
||||
*/
|
||||
export function getResultClass(type?: "success" | "error" | "warning" | "info"): string {
|
||||
switch (type) {
|
||||
case "success": return "text-green-600";
|
||||
case "error": return "text-red-600";
|
||||
case "warning": return "text-yellow-600";
|
||||
default: return "text-blue-600";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,6 @@
|
|||
export { useCommander, defaultCommands, parseInput, getCompletions, getResultClass } from './useCommander';
|
||||
export type { UseCommanderReturn } from './useCommander';
|
||||
export { rollFormula, rollSimple } from './useDiceRoller';
|
||||
export * from './dice-engine';
|
||||
|
||||
// Tracker 相关导出
|
||||
export type {
|
||||
TrackerItem,
|
||||
TrackerAttribute,
|
||||
TrackerAttributeType,
|
||||
TrackerCommand,
|
||||
TrackerViewMode,
|
||||
} from '../types';
|
||||
export { useCommander, initializeCommands, defaultCommands } from "./useCommander";
|
||||
export type { UseCommanderReturn } from "./useCommander";
|
||||
export { rollSimple, rollFormula } from "./useDiceRoller";
|
||||
export type { DiceRollerResult } from "./useDiceRoller";
|
||||
export { parseInput, getCompletions, getResultClass } from "./completions";
|
||||
export type { ParsedCommand } from "./completions";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { createSignal } from "solid-js";
|
||||
import {
|
||||
import type {
|
||||
MdCommanderCommand,
|
||||
MdCommanderCommandMap,
|
||||
CommanderEntry,
|
||||
|
|
@ -9,8 +9,8 @@ import {
|
|||
TrackerCommand,
|
||||
TrackerViewMode,
|
||||
} from "../types";
|
||||
import { rollSimple } from "./useDiceRoller";
|
||||
import { helpCommand, setupHelpCommand, clearCommand, rollCommand, trackCommand, untrackCommand, listTrackCommand } from "../commands";
|
||||
import { parseInput, getCompletions } from "./completions";
|
||||
import { setupHelpCommand, clearCommand, rollCommand, trackCommand, untrackCommand, listTrackCommand } from "../commands";
|
||||
import {
|
||||
addTrackerItem as addTracker,
|
||||
removeTrackerItem as removeTracker,
|
||||
|
|
@ -26,7 +26,7 @@ import {
|
|||
// ==================== 默认命令 ====================
|
||||
|
||||
export const defaultCommands: MdCommanderCommandMap = {
|
||||
help: setupHelpCommand({}),
|
||||
help: { command: "help" }, // 占位，稍后初始化
|
||||
clear: clearCommand,
|
||||
roll: rollCommand,
|
||||
track: trackCommand,
|
||||
|
|
@ -34,228 +34,11 @@ export const defaultCommands: MdCommanderCommandMap = {
|
|||
list: listTrackCommand,
|
||||
};
|
||||
|
||||
// 初始化默认命令
|
||||
Object.keys(defaultCommands).forEach(key => {
|
||||
if (key === "help") {
|
||||
const help = setupHelpCommand(defaultCommands);
|
||||
defaultCommands.help = help;
|
||||
}
|
||||
});
|
||||
|
||||
// ==================== 工具函数 ====================
|
||||
|
||||
export function parseInput(input: string, commands?: MdCommanderCommandMap): {
|
||||
command?: string;
|
||||
params: Record<string, string>;
|
||||
options: Record<string, string>;
|
||||
incompleteParam?: { index: number; value: string };
|
||||
} {
|
||||
const result: {
|
||||
command?: string;
|
||||
params: Record<string, string>;
|
||||
options: Record<string, string>;
|
||||
incompleteParam?: { index: number; value: string };
|
||||
} = {
|
||||
params: {},
|
||||
options: {},
|
||||
};
|
||||
|
||||
const trimmed = input.trim();
|
||||
if (!trimmed) return result;
|
||||
|
||||
const parts = trimmed.split(/\s+/);
|
||||
let i = 0;
|
||||
|
||||
// 获取命令
|
||||
if (parts[0] && !parts[0].startsWith("-")) {
|
||||
result.command = parts[0];
|
||||
i = 1;
|
||||
}
|
||||
|
||||
// 获取命令的参数定义
|
||||
const cmd = result.command ? commands?.[result.command] : undefined;
|
||||
const paramDefs = cmd?.parameters || [];
|
||||
let paramIndex = 0;
|
||||
|
||||
// 解析参数和选项
|
||||
while (i < parts.length) {
|
||||
const part = parts[i];
|
||||
|
||||
if (part.startsWith("--")) {
|
||||
// 选项 --key=value 或 --key value
|
||||
const eqIndex = part.indexOf("=");
|
||||
if (eqIndex !== -1) {
|
||||
const key = part.slice(2, eqIndex);
|
||||
const value = part.slice(eqIndex + 1);
|
||||
result.options[key] = value;
|
||||
} else {
|
||||
const key = part.slice(2);
|
||||
if (i + 1 < parts.length && !parts[i + 1].startsWith("-")) {
|
||||
result.options[key] = parts[i + 1];
|
||||
i++;
|
||||
} else {
|
||||
// 未完成的选项
|
||||
}
|
||||
}
|
||||
} else if (part.startsWith("-") && part.length === 2) {
|
||||
// 短选项 -k value
|
||||
const key = part.slice(1);
|
||||
if (i + 1 < parts.length && !parts[i + 1].startsWith("-")) {
|
||||
result.options[key] = parts[i + 1];
|
||||
i++;
|
||||
}
|
||||
} else {
|
||||
// 位置参数
|
||||
if (paramIndex < paramDefs.length) {
|
||||
const paramDef = paramDefs[paramIndex];
|
||||
result.params[paramDef.name] = part;
|
||||
paramIndex++;
|
||||
}
|
||||
}
|
||||
i++;
|
||||
}
|
||||
|
||||
// 检查是否有未完成的位置参数
|
||||
if (paramIndex < paramDefs.length) {
|
||||
const lastPart = parts[parts.length - 1];
|
||||
// 只有当最后一个部分不是命令本身时，才设置为未完成参数
|
||||
if (lastPart && !lastPart.startsWith("-") && parts.length > 1) {
|
||||
result.incompleteParam = {
|
||||
index: paramIndex,
|
||||
value: lastPart,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export function getCompletions(
|
||||
input: string,
|
||||
commands: MdCommanderCommandMap,
|
||||
): CompletionItem[] {
|
||||
const trimmed = input.trim();
|
||||
|
||||
if (!trimmed || /^\s*$/.test(trimmed)) {
|
||||
return Object.values(commands).map((cmd) => ({
|
||||
label: cmd.command,
|
||||
type: "command",
|
||||
description: cmd.description,
|
||||
insertText: cmd.command,
|
||||
}));
|
||||
}
|
||||
|
||||
const parsed = parseInput(trimmed, commands);
|
||||
|
||||
if (!parsed.command || !commands[parsed.command]) {
|
||||
const commandCompletions = Object.values(commands)
|
||||
.filter((cmd) => cmd.command.startsWith(parsed.command || ""))
|
||||
.map((cmd) => ({
|
||||
label: cmd.command,
|
||||
type: "command" as "command",
|
||||
description: cmd.description,
|
||||
insertText: cmd.command,
|
||||
}));
|
||||
if (commandCompletions.length > 0) {
|
||||
return commandCompletions;
|
||||
}
|
||||
}
|
||||
|
||||
const cmd = commands[parsed.command!];
|
||||
if (!cmd) return [];
|
||||
|
||||
// 检查是否需要参数补全
|
||||
const paramDefs = cmd.parameters || [];
|
||||
const usedParams = Object.keys(parsed.params);
|
||||
|
||||
// 判断是否正在输入最后一个参数（没有尾随空格）
|
||||
const isTypingLastParam = paramDefs.length === usedParams.length &&
|
||||
trimmed.length > 0 &&
|
||||
!trimmed.endsWith(" ") &&
|
||||
!trimmed.split(/\s+/)[trimmed.split(/\s+/).length - 1].startsWith("-");
|
||||
|
||||
// 如果还有未填的参数，或者当前参数可能未完成
|
||||
if (paramDefs.length > usedParams.length || parsed.incompleteParam || isTypingLastParam) {
|
||||
// 确定当前参数的索引
|
||||
let paramIndex: number;
|
||||
if (parsed.incompleteParam !== undefined) {
|
||||
paramIndex = parsed.incompleteParam.index;
|
||||
} else if (isTypingLastParam) {
|
||||
// 正在编辑最后一个参数
|
||||
paramIndex = paramDefs.length - 1;
|
||||
} else {
|
||||
paramIndex = usedParams.length;
|
||||
}
|
||||
|
||||
const paramDef = paramDefs[paramIndex];
|
||||
if (!paramDef) return [];
|
||||
|
||||
// 获取当前输入值
|
||||
let currentValue = parsed.incompleteParam?.value || "";
|
||||
if (isTypingLastParam && !parsed.incompleteParam) {
|
||||
const parts = trimmed.split(/\s+/);
|
||||
currentValue = parts[parts.length - 1] || "";
|
||||
}
|
||||
|
||||
// 模板补全
|
||||
if (paramDef.templates) {
|
||||
return paramDef.templates
|
||||
.filter((t) => t.label.toLowerCase().includes(currentValue.toLowerCase()))
|
||||
.map((t) => ({
|
||||
label: t.label,
|
||||
type: "value" as "value",
|
||||
description: t.description,
|
||||
insertText: t.insertText,
|
||||
}));
|
||||
}
|
||||
|
||||
if (paramDef.type === "enum" && paramDef.values) {
|
||||
return paramDef.values
|
||||
.filter((v) => v.startsWith(currentValue))
|
||||
.map((v) => ({
|
||||
label: v,
|
||||
type: "value" as "value",
|
||||
description: paramDef.description,
|
||||
insertText: v,
|
||||
}));
|
||||
}
|
||||
// 其他类型的参数，显示提示
|
||||
return [{
|
||||
label: `<${paramDef.name}>`,
|
||||
type: "value" as "value",
|
||||
description: `${paramDef.type}${paramDef.required !== false ? " (必填)" : ""}: ${paramDef.description || ""}`,
|
||||
insertText: "",
|
||||
}];
|
||||
}
|
||||
|
||||
// 选项补全
|
||||
if (!cmd.options) return [];
|
||||
|
||||
const usedOptions = Object.keys(parsed.options);
|
||||
return Object.values(cmd.options)
|
||||
.filter((opt) => !usedOptions.includes(opt.option))
|
||||
.map((opt) => ({
|
||||
label: `--${opt.option}`,
|
||||
type: "option",
|
||||
description: opt.description,
|
||||
insertText: `--${opt.option}=${opt.type === "boolean" ? "" : ""}`,
|
||||
}));
|
||||
}
|
||||
|
||||
export function getResultClass(
|
||||
type?: "success" | "error" | "warning" | "info",
|
||||
): string {
|
||||
switch (type) {
|
||||
case "success":
|
||||
return "text-green-600";
|
||||
case "error":
|
||||
return "text-red-600";
|
||||
case "warning":
|
||||
return "text-yellow-600";
|
||||
case "info":
|
||||
default:
|
||||
return "text-blue-600";
|
||||
}
|
||||
// 初始化默认命令（包括 help）
|
||||
export function initializeCommands(customCommands?: MdCommanderCommandMap): MdCommanderCommandMap {
|
||||
const commands = { ...defaultCommands, ...customCommands };
|
||||
commands.help = setupHelpCommand(commands);
|
||||
return commands;
|
||||
}
|
||||
|
||||
// ==================== Commander Hook ====================
|
||||
|
|
@ -281,50 +64,37 @@ export interface UseCommanderReturn {
|
|||
commandHistory: () => string[];
|
||||
navigateHistory: (direction: 'up' | 'down') => void;
|
||||
|
||||
// Tracker 相关
|
||||
// Tracker 相关 - 直接暴露 store API
|
||||
viewMode: () => TrackerViewMode;
|
||||
setViewMode: (mode: TrackerViewMode) => void;
|
||||
trackerItems: () => TrackerItem[];
|
||||
setTrackerItems: (updater: (prev: TrackerItem[]) => TrackerItem[]) => void;
|
||||
trackerHistory: () => TrackerCommand[];
|
||||
addTrackerItem: (item: Omit<TrackerItem, 'id'>) => void;
|
||||
removeTrackerItem: (emmet: string) => boolean;
|
||||
addTrackerItem: typeof addTracker;
|
||||
removeTrackerItem: typeof removeTracker;
|
||||
removeTrackerItemByIndex: (index: number) => void;
|
||||
updateTrackerAttribute: (emmet: string, attrName: string, attr: TrackerAttribute) => boolean;
|
||||
updateTrackerAttribute: typeof updateTrackerAttr;
|
||||
updateTrackerAttributeByIndex: (index: number, attrName: string, attr: TrackerAttribute) => void;
|
||||
updateTrackerClassesByIndex: (index: number, classes: string[]) => void;
|
||||
moveTrackerItem: (emmet: string, direction: 'up' | 'down') => boolean;
|
||||
moveTrackerItem: typeof moveTracker;
|
||||
moveTrackerItemByIndex: (index: number, direction: 'up' | 'down') => void;
|
||||
removeTrackerItemClass: (emmet: string, className: string) => boolean;
|
||||
removeTrackerItemClass: typeof removeClassFromTracker;
|
||||
removeTrackerItemClassByIndex: (index: number, className: string) => void;
|
||||
recordTrackerCommand: (cmd: Omit<TrackerCommand, 'timestamp'>) => void;
|
||||
}
|
||||
|
||||
export function useCommander(
|
||||
customCommands?: MdCommanderCommandMap,
|
||||
): UseCommanderReturn {
|
||||
export function useCommander(customCommands?: MdCommanderCommandMap): UseCommanderReturn {
|
||||
const [inputValue, setInputValue] = createSignal("");
|
||||
const [entries, setEntries] = createSignal<CommanderEntry[]>([]);
|
||||
const [showCompletions, setShowCompletions] = createSignal(false);
|
||||
const [completions, setCompletions] = createSignal<CompletionItem[]>([]);
|
||||
const [selectedCompletion, setSelectedCompletionState] = createSignal(0);
|
||||
const [isFocused, setIsFocused] = createSignal(false);
|
||||
|
||||
// 命令历史
|
||||
const [commandHistory, setCommandHistory] = createSignal<string[]>([]);
|
||||
const [historyIndex, setHistoryIndex] = createSignal(-1);
|
||||
|
||||
// Tracker 相关
|
||||
const [viewMode, setViewMode] = createSignal<TrackerViewMode>("history");
|
||||
|
||||
const commands = { ...defaultCommands, ...customCommands };
|
||||
const commands = initializeCommands(customCommands);
|
||||
|
||||
// 更新 help 命令的参数值
|
||||
if (commands.help?.parameters?.[0]) {
|
||||
commands.help.parameters[0].values = Object.keys(commands).filter(
|
||||
(k) => k !== "help",
|
||||
);
|
||||
}
|
||||
// ==================== 命令执行 ====================
|
||||
|
||||
const handleCommand = () => {
|
||||
const input = inputValue().trim();
|
||||
|
|
@ -360,11 +130,8 @@ export function useCommander(
|
|||
};
|
||||
|
||||
setEntries((prev) => [...prev, newEntry]);
|
||||
|
||||
// 添加到命令历史
|
||||
setCommandHistory((prev) => [...prev, input]);
|
||||
setHistoryIndex(-1); // 重置历史索引
|
||||
|
||||
setHistoryIndex(-1);
|
||||
setInputValue("");
|
||||
setShowCompletions(false);
|
||||
|
||||
|
|
@ -373,18 +140,17 @@ export function useCommander(
|
|||
}
|
||||
};
|
||||
|
||||
// ==================== 自动补全 ====================
|
||||
|
||||
const updateCompletions = () => {
|
||||
const input = inputValue();
|
||||
const comps = getCompletions(input, commands);
|
||||
const comps = getCompletions(inputValue(), commands);
|
||||
setCompletions(comps);
|
||||
setShowCompletions(comps.length > 0 && isFocused());
|
||||
setSelectedCompletionState(0);
|
||||
};
|
||||
|
||||
const setSelectedCompletion = (v: number | ((prev: number) => number)) => {
|
||||
const comps = completions();
|
||||
const maxIdx = comps.length - 1;
|
||||
|
||||
const maxIdx = completions().length - 1;
|
||||
if (typeof v === 'function') {
|
||||
setSelectedCompletionState(prev => {
|
||||
const next = v(prev);
|
||||
|
|
@ -398,49 +164,33 @@ export function useCommander(
|
|||
const acceptCompletion = () => {
|
||||
const idx = selectedCompletion();
|
||||
const comps = completions();
|
||||
const validIdx = Math.min(idx, comps.length - 1);
|
||||
const comp = comps[validIdx];
|
||||
const comp = comps[Math.min(idx, comps.length - 1)];
|
||||
if (!comp) return;
|
||||
|
||||
const input = inputValue();
|
||||
const trimmed = input.trim();
|
||||
const parsed = parseInput(input, commands);
|
||||
|
||||
let newValue: string;
|
||||
|
||||
if (comp.type === "command") {
|
||||
newValue = comp.insertText + " ";
|
||||
} else if (comp.type === "option") {
|
||||
const base = parsed.command || "";
|
||||
const existingOptions = Object.entries(parsed.options)
|
||||
.map(([k, v]) => `--${k}=${v}`)
|
||||
.join(" ");
|
||||
newValue = `${base} ${existingOptions}${existingOptions ? " " : ""}${comp.insertText}`;
|
||||
newValue = `${parsed.command || ""} ${existingOptions}${existingOptions ? " " : ""}${comp.insertText}`;
|
||||
} else if (comp.type === "value") {
|
||||
// 参数值补全
|
||||
const cmd = parsed.command ? commands[parsed.command] : null;
|
||||
const paramDefs = cmd?.parameters || [];
|
||||
const usedParams = Object.keys(parsed.params);
|
||||
|
||||
const base = parsed.command || "";
|
||||
const existingOptions = Object.entries(parsed.options)
|
||||
.map(([k, v]) => `--${k}=${v}`)
|
||||
.join(" ");
|
||||
|
||||
// 判断是否正在编辑最后一个参数（使用原始 input 检查尾随空格）
|
||||
const isTypingLastParam = paramDefs.length === usedParams.length &&
|
||||
input.length > 0 &&
|
||||
!input.endsWith(" ");
|
||||
const isTypingLastParam = paramDefs.length === usedParams.length && !input.endsWith(" ");
|
||||
|
||||
if (isTypingLastParam) {
|
||||
// 替换最后一个参数
|
||||
const parts = trimmed.split(/\s+/);
|
||||
parts.pop(); // 移除正在输入的参数
|
||||
const existingParams = parts.slice(1).join(" "); // 跳过命令
|
||||
newValue = `${base}${existingParams ? " " + existingParams : ""} ${comp.insertText}${existingOptions ? " " + existingOptions : ""}`;
|
||||
const parts = input.trim().split(/\s+/);
|
||||
parts.pop();
|
||||
newValue = `${parsed.command || ""}${parts.length > 1 ? " " + parts.slice(1).join(" ") : ""} ${comp.insertText}`;
|
||||
} else if (paramDefs.length > usedParams.length) {
|
||||
// 当前参数的补全
|
||||
const existingParams = Object.values(parsed.params).join(" ");
|
||||
newValue = `${base} ${existingParams}${existingParams ? " " : ""}${comp.insertText}${existingOptions ? " " + existingOptions : ""}`;
|
||||
newValue = `${parsed.command || ""} ${existingParams}${existingParams ? " " : ""}${comp.insertText}`;
|
||||
} else {
|
||||
newValue = input;
|
||||
}
|
||||
|
|
@ -452,22 +202,19 @@ export function useCommander(
|
|||
setShowCompletions(false);
|
||||
};
|
||||
|
||||
// ==================== 命令历史 ====================
|
||||
|
||||
const navigateHistory = (direction: 'up' | 'down') => {
|
||||
const history = commandHistory();
|
||||
if (history.length === 0) return;
|
||||
|
||||
let newIndex = historyIndex();
|
||||
if (direction === 'up') {
|
||||
// 向上浏览历史（更早的命令）
|
||||
if (newIndex < history.length - 1) {
|
||||
newIndex++;
|
||||
}
|
||||
if (newIndex < history.length - 1) newIndex++;
|
||||
} else {
|
||||
// 向下浏览历史（更新的命令）
|
||||
if (newIndex > 0) {
|
||||
newIndex--;
|
||||
} else {
|
||||
// 回到当前输入
|
||||
setInputValue("");
|
||||
setHistoryIndex(-1);
|
||||
return;
|
||||
|
|
@ -475,92 +222,41 @@ export function useCommander(
|
|||
}
|
||||
|
||||
setHistoryIndex(newIndex);
|
||||
// 从历史末尾获取命令（最新的在前）
|
||||
setInputValue(history[history.length - 1 - newIndex]);
|
||||
};
|
||||
|
||||
// ==================== Tracker 方法 ====================
|
||||
// ==================== Tracker 操作 ====================
|
||||
|
||||
const addTrackerItem = (item: Omit<TrackerItem, 'id'>) => {
|
||||
return addTracker(item);
|
||||
};
|
||||
|
||||
const removeTrackerItem = (emmet: string) => {
|
||||
return removeTracker(emmet);
|
||||
const getEmmetFromIndex = (index: number): string | null => {
|
||||
const items = getTrackerItems();
|
||||
if (index < 0 || index >= items.length) return null;
|
||||
const item = items[index];
|
||||
return `${item.tag}${item.id ? '#' + item.id : ''}${item.classes.length > 0 ? '.' + item.classes.join('.') : ''}`;
|
||||
};
|
||||
|
||||
const removeTrackerItemByIndex = (index: number) => {
|
||||
const items = trackerItems();
|
||||
if (index >= 0 && index < items.length) {
|
||||
const item = items[index];
|
||||
const emmet = `${item.tag}${item.id ? '#' + item.id : ''}${item.classes.length > 0 ? '.' + item.classes.join('.') : ''}`;
|
||||
removeTracker(emmet);
|
||||
}
|
||||
};
|
||||
|
||||
const updateTrackerAttribute = (emmet: string, attrName: string, attr: TrackerAttribute) => {
|
||||
return updateTrackerAttr(emmet, attrName, attr);
|
||||
const emmet = getEmmetFromIndex(index);
|
||||
if (emmet) removeTracker(emmet);
|
||||
};
|
||||
|
||||
const updateTrackerAttributeByIndex = (index: number, attrName: string, attr: TrackerAttribute) => {
|
||||
const items = trackerItems();
|
||||
if (index >= 0 && index < items.length) {
|
||||
const item = items[index];
|
||||
const emmet = `${item.tag}${item.id ? '#' + item.id : ''}${item.classes.length > 0 ? '.' + item.classes.join('.') : ''}`;
|
||||
updateTrackerAttr(emmet, attrName, attr);
|
||||
}
|
||||
const emmet = getEmmetFromIndex(index);
|
||||
if (emmet) updateTrackerAttr(emmet, attrName, attr);
|
||||
};
|
||||
|
||||
const updateTrackerClassesByIndex = (index: number, classes: string[]) => {
|
||||
const items = trackerItems();
|
||||
if (index >= 0 && index < items.length) {
|
||||
const item = items[index];
|
||||
const emmet = `${item.tag}${item.id ? '#' + item.id : ''}${item.classes.length > 0 ? '.' + item.classes.join('.') : ''}`;
|
||||
updateTrackerClassesStore(emmet, classes);
|
||||
}
|
||||
};
|
||||
|
||||
const moveTrackerItem = (emmet: string, direction: 'up' | 'down') => {
|
||||
return moveTracker(emmet, direction);
|
||||
const emmet = getEmmetFromIndex(index);
|
||||
if (emmet) updateTrackerClassesStore(emmet, classes);
|
||||
};
|
||||
|
||||
const moveTrackerItemByIndex = (index: number, direction: 'up' | 'down') => {
|
||||
const items = trackerItems();
|
||||
if (index >= 0 && index < items.length) {
|
||||
const item = items[index];
|
||||
const emmet = `${item.tag}${item.id ? '#' + item.id : ''}${item.classes.length > 0 ? '.' + item.classes.join('.') : ''}`;
|
||||
moveTracker(emmet, direction);
|
||||
}
|
||||
};
|
||||
|
||||
const removeTrackerItemClass = (emmet: string, className: string) => {
|
||||
return removeClassFromTracker(emmet, className);
|
||||
const emmet = getEmmetFromIndex(index);
|
||||
if (emmet) moveTracker(emmet, direction);
|
||||
};
|
||||
|
||||
const removeTrackerItemClassByIndex = (index: number, className: string) => {
|
||||
const items = trackerItems();
|
||||
if (index >= 0 && index < items.length) {
|
||||
const item = items[index];
|
||||
const emmet = `${item.tag}${item.id ? '#' + item.id : ''}${item.classes.length > 0 ? '.' + item.classes.join('.') : ''}`;
|
||||
removeClassFromTracker(emmet, className);
|
||||
}
|
||||
};
|
||||
|
||||
const trackerItems = () => getTrackerItems();
|
||||
const trackerHistory = () => getTrackerHistory();
|
||||
|
||||
const setTrackerItems = (updater: (prev: TrackerItem[]) => TrackerItem[]) => {
|
||||
// 直接操作 store
|
||||
const current = getTrackerItems();
|
||||
const updated = updater(current);
|
||||
// 计算差异并记录
|
||||
if (updated.length !== current.length) {
|
||||
// 长度变化，可能是批量操作
|
||||
}
|
||||
};
|
||||
|
||||
const recordTrackerCommand = (cmd: Omit<TrackerCommand, 'timestamp'>) => {
|
||||
// store 已经自动记录
|
||||
const emmet = getEmmetFromIndex(index);
|
||||
if (emmet) removeClassFromTracker(emmet, className);
|
||||
};
|
||||
|
||||
return {
|
||||
|
|
@ -585,19 +281,17 @@ export function useCommander(
|
|||
navigateHistory,
|
||||
viewMode,
|
||||
setViewMode,
|
||||
trackerItems,
|
||||
setTrackerItems,
|
||||
trackerHistory,
|
||||
addTrackerItem,
|
||||
removeTrackerItem,
|
||||
trackerItems: getTrackerItems,
|
||||
trackerHistory: getTrackerHistory,
|
||||
addTrackerItem: addTracker,
|
||||
removeTrackerItem: removeTracker,
|
||||
removeTrackerItemByIndex,
|
||||
updateTrackerAttribute,
|
||||
updateTrackerAttribute: updateTrackerAttr,
|
||||
updateTrackerAttributeByIndex,
|
||||
updateTrackerClassesByIndex,
|
||||
moveTrackerItem,
|
||||
moveTrackerItem: moveTracker,
|
||||
moveTrackerItemByIndex,
|
||||
removeTrackerItemClass,
|
||||
removeTrackerItemClass: removeClassFromTracker,
|
||||
removeTrackerItemClassByIndex,
|
||||
recordTrackerCommand,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { customElement, noShadowDOM } from "solid-element";
|
||||
import { onMount, onCleanup, Show, createEffect } from "solid-js";
|
||||
import { useCommander } from "./hooks";
|
||||
import { useCommander, initializeCommands } from "./hooks";
|
||||
import { CommanderInput } from "./CommanderInput";
|
||||
import { CommanderEntries } from "./CommanderEntries";
|
||||
import { TrackerView } from "./TrackerView";
|
||||
|
|
@ -16,9 +16,11 @@ customElement<MdCommanderProps>(
|
|||
noShadowDOM();
|
||||
const { articlePath, rawSrc } = loadElementSrc(element as any);
|
||||
const commander = useCommander(props.commands);
|
||||
|
||||
createEffect(async () => {
|
||||
if (!rawSrc) return;
|
||||
await loadCommandTemplates(commander.commands, resolvePath(articlePath, rawSrc));
|
||||
const commands = initializeCommands(props.commands);
|
||||
await loadCommandTemplates(commands, resolvePath(articlePath, rawSrc));
|
||||
});
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
|
|
@ -48,7 +50,6 @@ customElement<MdCommanderProps>(
|
|||
}
|
||||
}
|
||||
|
||||
// 补全未打开时，使用上下键浏览历史
|
||||
if (e.key === "ArrowUp" && !commander.showCompletions()) {
|
||||
e.preventDefault();
|
||||
commander.navigateHistory("up");
|
||||
|
|
@ -83,13 +84,8 @@ customElement<MdCommanderProps>(
|
|||
class={`md-commander flex flex-col border border-gray-300 rounded-lg overflow-hidden ${props.class || ""}`}
|
||||
style={{ height: heightStyle() }}
|
||||
>
|
||||
{/* 标签页导航 */}
|
||||
<TabBar
|
||||
mode={commander.viewMode}
|
||||
onModeChange={commander.setViewMode}
|
||||
/>
|
||||
<TabBar mode={commander.viewMode} onModeChange={commander.setViewMode} />
|
||||
|
||||
{/* 内容区域：历史或追踪 */}
|
||||
<Show
|
||||
when={commander.viewMode() === "history"}
|
||||
fallback={
|
||||
|
|
@ -101,7 +97,9 @@ customElement<MdCommanderProps>(
|
|||
onClassesChange={(index, classes) =>
|
||||
commander.updateTrackerClassesByIndex(index, classes)
|
||||
}
|
||||
onRemoveClass={commander.removeTrackerItemClassByIndex}
|
||||
onRemoveClass={(index, className) =>
|
||||
commander.removeTrackerItemClassByIndex(index, className)
|
||||
}
|
||||
onMoveUp={(index) => commander.moveTrackerItemByIndex(index, "up")}
|
||||
onMoveDown={(index) => commander.moveTrackerItemByIndex(index, "down")}
|
||||
onRemove={(index) => commander.removeTrackerItemByIndex(index)}
|
||||
|
|
@ -114,7 +112,6 @@ customElement<MdCommanderProps>(
|
|||
/>
|
||||
</Show>
|
||||
|
||||
{/* 命令输入框 */}
|
||||
<div class="relative border-t border-gray-300">
|
||||
<CommanderInput
|
||||
placeholder={props.placeholder}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import type { Component } from "solid-js";
|
||||
|
||||
// ==================== 组件 Props ====================
|
||||
|
||||
export interface MdCommanderProps {
|
||||
placeholder?: string;
|
||||
class?: string;
|
||||
|
|
@ -8,6 +10,8 @@ export interface MdCommanderProps {
|
|||
commandTemplates?: string | string[]; // CSV 文件路径或路径数组
|
||||
}
|
||||
|
||||
// ==================== 命令定义 ====================
|
||||
|
||||
export interface MdCommanderCommandMap {
|
||||
[key: string]: MdCommanderCommand;
|
||||
}
|
||||
|
|
@ -64,6 +68,8 @@ export interface MdCommanderOption {
|
|||
EntryComponent?: Component<any>;
|
||||
}
|
||||
|
||||
// ==================== 命令执行记录 ====================
|
||||
|
||||
export interface CommanderEntry {
|
||||
id: string;
|
||||
command: string;
|
||||
|
|
@ -83,7 +89,9 @@ export interface CompletionItem {
|
|||
insertText: string;
|
||||
}
|
||||
|
||||
// ==================== Tracker 类型 ====================
|
||||
// ==================== Tracker ====================
|
||||
|
||||
export type TrackerViewMode = "history" | "tracker";
|
||||
|
||||
export type TrackerAttributeType = "progress" | "count" | "string";
|
||||
|
||||
|
|
@ -95,13 +103,11 @@ export interface TrackerAttribute {
|
|||
|
||||
export interface TrackerItem {
|
||||
tag: string;
|
||||
id?: string; // Emmet ID (#id)
|
||||
id?: string;
|
||||
classes: string[];
|
||||
attributes: Record<string, TrackerAttribute>;
|
||||
}
|
||||
|
||||
export type TrackerViewMode = "history" | "tracker";
|
||||
|
||||
export interface TrackerCommand {
|
||||
type: "add" | "remove" | "update" | "reorder";
|
||||
itemId?: string;
|
||||
|
|
|
|||
Loading…
Reference in New Issue