输入过程中会出现命令提示, 按下 Tab 键可以进行命令补全, 按下回车即可触发命令哦 ~~ (如果输入框被遮挡, 触发'clear'命令或者按下'ctrl + L'快捷键即可清屏)
14 |
379 |
380 |
381 |
382 | ---
383 |
384 |
385 |
386 |
387 |
388 | ## 项目细节
389 |
390 | ### 核心
391 |
392 | 系统分为 3 个核心模块,各模块职责分明:
393 |
394 | - 微终端:UI 展示和终端交互逻辑
395 | - 命令系统:连接微终端和命令集(中介者),负责匹配、解析和执行命令,并通过终端提供的操作接口给予其反馈
396 | - 命令集:各种不同功能的命令定义和实现
397 |
398 |
399 |
400 | > 前端架构图
401 |
402 | 
403 |
404 | ---
405 |
406 |
407 |
408 | ### 微终端
409 |
410 | 从 0 开始实现的 web 终端控制台,包含以下模块:
411 |
412 | - 终端输入:常驻 Input 框,负责接收用户命令
413 | - 终端输出:负责展示用户的命令及执行结果等,支持以下三种类型的输出
414 | - 命令类型:输入命令 + 结果列表
415 | - 文本类型:单行文本展示,内置 5 种不同的展示状态(成功、错误、警告、信息、系统等)
416 | - 自定义组件类型:可以自由定制要展示的内容
417 | - 快捷键:更方便地操作终端,使用 `document.onkeydown` 全局按键事件实现
418 | - 开放接口:提供一组操作终端的 API,供命令系统调用,比如清屏、立即输出等
419 | - 命令历史:记录用户输入的命令结果,使用 Vue 3 Composition API 封装部分逻辑
420 | - 命令提示:根据用户的输入给出提示,使用 Vue 3 Composition API 独立封装
421 |
422 | ---
423 |
424 |
425 |
426 |
427 | ### 命令系统
428 |
429 | 一套独立于终端的命令解析执行引擎,包含以下模块:
430 |
431 | - 注册器:用于注册和管理可被匹配的命令集
432 | - 匹配器:根据输入文本匹配到对应的命令
433 | - 解析器:从输入文本中解析出参数和选项
434 | - 执行器:执行命令,完成操作
435 | - 子命令机制:支持递归解析子命令
436 |
437 | ---
438 |
439 |
440 |
441 | ### 命令集
442 |
443 | 一组可用命令的集合(类似插件),通过 TS 明确命令的定义,支持配置别名、选项、子命令等,便于开发者扩展和定制。
444 |
445 | 核心命令包括:
446 |
447 | - 空间系统:自实现的类文件系统,可以管理网页链接等内容
448 | - 用户系统:管理用户、同步个人定制化内容
449 | - 终端控制:定制或控制终端,比如更换背景、输出帮助等
450 | - 搜索:可以快速从不同搜索引擎检索内容
451 | - 其他模块。。。
452 |
453 |
454 |
455 | ---
456 |
457 |
458 |
459 | ### 开发新命令
460 |
461 | 1. 在 commands 下新建目录,目录名称为命令英文名称,所有该命令相关的代码都必须放在该目录中
462 | 2. 编写命令定义文件 xxxCommand.ts(xxx 为命令英文名称),可以参考其他命令,如 music、goto 等
463 | 3. 若命令包含子命令,需要将子命令相关文件放到 subCommands 目录中,可以参考 user 命令
464 | 4. 在 commandRegister 的 commandList 中补充新命令
465 |
466 |
467 |
468 | ---
469 |
470 |
471 |
472 |
473 |
474 | 欢迎大家 star 呀 ~~ ⭐⭐
475 |
--------------------------------------------------------------------------------