{"id":13632893,"url":"https://github.com/liyupi/yuindex","last_synced_at":"2025-04-14T06:52:40.151Z","repository":{"id":48724829,"uuid":"514613203","full_name":"liyupi/yuindex","owner":"liyupi","description":"✨ 鱼皮的新项目 - 极客范儿的浏览器主页 💻 Vue 3 + Node.js 全栈项目，自实现 web 终端 + 命令系统，很适合想进阶前端的朋友学习","archived":false,"fork":false,"pushed_at":"2024-03-23T15:05:47.000Z","size":2654,"stargazers_count":2056,"open_issues_count":68,"forks_count":704,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-07T01:05:45.864Z","etag":null,"topics":["backend","css","frontend","html","javascript","node-js","typescript","vue","web-terminal"],"latest_commit_sha":null,"homepage":"http://yuindex.yupi.icu","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/liyupi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-16T15:19:31.000Z","updated_at":"2025-04-03T17:00:45.000Z","dependencies_parsed_at":"2024-01-14T07:18:16.202Z","dependency_job_id":"8db64824-21ff-48a5-a7c3-cf88902f9517","html_url":"https://github.com/liyupi/yuindex","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liyupi%2Fyuindex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liyupi%2Fyuindex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liyupi%2Fyuindex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liyupi%2Fyuindex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liyupi","download_url":"https://codeload.github.com/liyupi/yuindex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248837275,"owners_count":21169373,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backend","css","frontend","html","javascript","node-js","typescript","vue","web-terminal"],"created_at":"2024-08-01T22:03:22.342Z","updated_at":"2025-04-14T06:52:40.131Z","avatar_url":"https://github.com/liyupi.png","language":"TypeScript","funding_links":[],"categories":["置顶","TypeScript"],"sub_categories":["9、效率工具集合"],"readme":"# YuIndex - 极客范儿的浏览器主页\n\n\u003e Coolest browser index for geeks! \n\u003e \n\u003e 前后端全栈项目 By [程序员鱼皮](https://docs.qq.com/doc/DUFFRVWladXVjeUxW)\n\n\n\n在线体验：[http://yuindex.yupi.icu](http://yuindex.yupi.icu)\n\n视频演示：[https://www.bilibili.com/video/BV19B4y1Y7m8/](https://www.bilibili.com/video/BV19B4y1Y7m8/)\n\n![YuIndex 定制你的最强主页](./doc/assets/docpic1.png)\n\n![YuIndex 用命令来控制网页](./doc/assets/docpic2.png)\n\n⭐️ 我在自己的 [编程知识星球](https://yupi.icu) 内花 4 个小时直播给大家详细解读了这个项目的创作思路 + 技术选型 + 系统设计 + 源码解读 + 思路扩展 + 简历亮点分享，如果你希望把这个项目写到简历上、或者深入学习，[欢迎加入我的星球观看](https://yupi.icu/%E6%98%9F%E7%90%83%E9%A1%B9%E7%9B%AE/Web%20%E7%BB%88%E7%AB%AF%E9%A1%B9%E7%9B%AE.html) 。\n\n\n## YuIndex 是什么？\n\n一个很特别的浏览器主页，支持使用输入命令的方式来操作，目标是帮你在一个 web 终端中高效完成所有的事情！（all in one）\n\n此外，它也是一个功能强大的 web 终端组件。开发者可以在它的基础上定制自己的 web 终端，并且可以在终端中集成任何内容！\n\n\u003e 如果你是一名程序员，相信你会爱上它~\n\n\n\n你可以将音乐、游戏，甚至可以将自己的偶像封装到主页~\n\n![](./doc/assets/docpic3.png)\n\n![](./doc/assets/docpic4.png)\n\n\n\n### 1 分钟上手使用\n\n请打开网站：https://yuindex.com\n\n然后在网站内依次输入以下命令：\n\n```bash\nbaidu 程序员鱼皮\ngithub yuindex\ngoto yupi.icu\ntodo\nmusic 坤坤\nmoyu\n按键 Ctrl + O 触发折叠, 再按可展开\nhistory\n按键 Ctrl + L 清屏\n```\n\n使用  `help 命令英文名` 可以查询某命令的具体用法，如：`help search` 。\n\n使用 `shortcut` 可以查看所有的快捷键。\n\n\u003e 完整命令用法请见：[命令手册](./doc/commands.md)\n\n尽情探索吧~\n\n\n\n\n## 项目优势\n\n### 用户\n\n- 无需鼠标，即可快速完成操作（比如从不同平台搜索内容）\n- 极简炫酷，极客范儿，Linux 的味道儿~\n- 支持快捷键、帮助和输入提示，降低使用成本\n- 支持定制背景等，打造你的个性主页\n- 帮助你熟悉 Linux 命令，感受到编程的乐趣\n\n\n\n### 开发者\n\n- 可以独立使用功能丰富的 web 终端组件，或二次开发\n- 可以开发自己的命令并接入系统\n\n\n\n### 学习者\n\n- 可以学到 web 终端的开发方式\n- 可以学到系统设计知识，理解抽象和复用\n- 可以学到较为规范的代码目录和格式\n\n\n\n## 功能和特性\n\n### web 终端\n\n- 命令历史记录、快速执行历史命令\n- 快捷键\n- 清屏\n- 命令输入提示\n- Tab 键补全命令\n- 多种格式输出\n- 内置 5 种输出状态\n- 命令折叠 / 展开\n- 帮助手册自动生成\n- 自定义配置（比如更换背景、提示开关等）\n- 支持子命令\n\n\n\n### 已支持命令\n\n\u003e 完整命令用法请见：[命令手册](./doc/commands.md)\n\n- 多平台搜索 search\n- 网页快速跳转 goto\n- 空间管理（类似收藏夹，可以存储网页信息）\n- 查看日期 date\n- 翻译 fanyi\n- 待办事项 todo\n- 网络检测 ping\n- 定时器 timing\n- 更换背景 background\n- 听音乐 music\n- 摸鱼小游戏 moyu\n- 坤坤 ikun\n- 其他。。。\n\n\n\n## 技术栈\n\n### 前端\n\n主要技术：\n\n- Vue 3\n- Vite 2\n- Ant Design Vue 3 组件库\n- Pinia 2 状态管理\n- TypeScript 类型控制\n- Eslint 代码规范控制\n- Prettier 美化代码\n\n依赖库：\n\n- axios 网络请求\n- dayjs 时间处理\n- lodash 工具库\n- getopts 命令参数解析\n\n库：getopts\n\n\n\n\n### 后端\n\n主要技术：\n\n- Node.js\n- Express、express-session\n- MySQL\n- Sequelize（ORM 框架）\n- Redis\n\n依赖库：\n\n- Axios\n- NeteaseCloudMusicApi\n\n依赖服务：\n\n- 百度翻译 API\n- 新浪壁纸 API\n\n[点击了解后端详情](server/README.md)\n\n\n\n## 目录结构\n\n- public 公共静态资源\n- server 后端\n- src\n  - assets 静态资源\n  - components 组件\n    - yu-terminal 终端组件\n  - configs 配置\n    - routes 路由\n  - core 核心\n    - commands 命令集\n    - commandRegister 命令注册\n    - commandExecutor 命令执行器\n  - pages 页面\n    - IndexPage.vue 主页\n  - plugins 第三方依赖\n  - utils 工具\n  - App.vue 主页面\n  - env.d.ts 环境定义\n  - main.ts Vue 主文件\n- .eslintrc.js 代码规范\n- components.d.ts 自动生成的组件动态引入\n- Dockerfile 镜像构建\n- index.html 静态主页\n- package.json 项目管理\n- tsconfig.json TS 配置\n- vite.config.ts 打包工具配置\n\n\n\n## 系统设计\n\n### 设计理念\n\n1. 开放：采用类插件化设计，便于开发者自定义新命令，且能够通过配置自动生成帮助提示\n2. 重前端轻后端：考虑到扩展性、安全性以及实现的方便，除了核心模块外，尽量不请求后端\n\n\n\n### 核心\n\n系统分为 3 个核心模块，各模块职责分明：\n\n- 微终端：UI 展示和终端交互逻辑\n- 命令系统：连接微终端和命令集（中介者），负责匹配、解析和执行命令，并通过终端提供的操作接口给予其反馈\n- 命令集：各种不同功能的命令定义和实现\n\n\n\n前端架构图：\n\n![](./doc/assets/docpic5.png)\n\n\n\n### 微终端\n\n从 0 开始实现的 web 终端控制台，包含以下模块：\n\n- 终端输入：常驻 Input 框，负责接收用户命令\n- 终端输出：负责展示用户的命令及执行结果等，支持以下三种类型的输出\n  - 命令类型：输入命令 + 结果列表\n  - 文本类型：单行文本展示，内置 5 种不同的展示状态（成功、错误、警告、信息、系统等）\n  - 自定义组件类型：可以自由定制要展示的内容\n- 快捷键：更方便地操作终端，使用 `document.onkeydown` 全局按键事件实现\n- 开放接口：提供一组操作终端的 API，供命令系统调用，比如清屏、立即输出等\n- 命令历史：记录用户输入的命令结果，使用 Vue 3 Composition API 封装部分逻辑\n- 命令提示：根据用户的输入给出提示，使用 Vue 3 Composition API 独立封装\n\n\n\n\n### 命令系统\n\n一套独立于终端的命令解析执行引擎，包含以下模块：\n\n- 注册器：用于注册和管理可被匹配的命令集\n- 匹配器：根据输入文本匹配到对应的命令\n- 解析器：从输入文本中解析出参数和选项\n- 执行器：执行命令，完成操作\n- 子命令机制：支持递归解析子命令\n\n\n\n### 命令集\n\n一组可用命令的集合（类似插件），通过 TS 明确命令的定义，支持配置别名、选项、子命令等，便于开发者扩展和定制。\n\n核心命令包括：\n\n- 空间系统：自实现的类文件系统，可以管理网页链接等内容\n- 用户系统：管理用户、同步个人定制化内容\n- 终端控制：定制或控制终端，比如更换背景、输出帮助等\n- 搜索：可以快速从不同搜索引擎检索内容\n- 其他模块。。。\n\n\n\n### 为什么要自己写终端？\n\n1. 本来打算使用现成的 xterm.js，但实际使用中发现它的文档比较少、问题难解决（比如中文字符），解决问题消耗的时间足够自己写一套新的 web 终端了。而且它更适用于和后端服务器强交互的场景，与本项目的定位不符。\n2. 开源的 web 终端很少，给开源贡献一份力。\n3. 帮助自己复习 Vue，突破个人系统开发设计能力的边界。\n\n\n\n### 更多讲解\n\n如果你希望获取该项目的完整详细讲解，欢迎加入 [鱼皮的编程知识星球](https://yupi.icu/) ，这是鱼皮的编程学习圈子，我会在圈子内带大家从 0 到 1 分析解读这个项目，让你也能独立做一个，项目经历 + 1。\n\n\n\n## 贡献指南\n\n欢迎各位朋友贡献代码，还请先阅读以下指南。\n\n\n\n### 开发新命令\n\n1. 在 commands 下新建目录，目录名称为命令英文名称，所有该命令相关的代码都必须放在该目录中\n2. 编写命令定义文件 xxxCommand.ts（xxx 为命令英文名称），可以参考其他命令，如 music、goto 等\n3. 若命令包含子命令，需要将子命令相关文件放到 subCommands 目录中，可以参考 user 命令\n4. 在 commandRegister 的 commandList 中补充新命令\n5. 测试验证通过后，可以发起 PR 等鱼皮合并\n\n\n\n## 致谢\n\n摸鱼命令的实现依赖于 https://haiyong.site/moyu ，感谢大佬的开源分享。\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliyupi%2Fyuindex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliyupi%2Fyuindex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliyupi%2Fyuindex/lists"}