68 |
75 |
76 |
81 |
82 |
87 |
88 |
89 |
90 |
91 |
92 |
77 | {{ command.commandStr }}
78 |
79 |
80 | 2 | English | 中文 3 |
4 | 5 | # Vue3-Terminal 6 | 7 | ## About 8 | 9 | Hi! Here is a mini terminal built with Vue3 + TS + Pinia + TailwindCSS! 10 | 11 | Onlie: https://term.mphy.me 12 | 13 |  14 | 15 | It has some basic commands below(with the most basic usage): 16 | 17 | - `tree` - show the file and folder tree 18 | - `echo [message]` - print message 19 | - `echo [message] > [filename]` - write file 20 | - `echo [message] >> [filename]` - append context to file 21 | - `cat [filename]` - read file 22 | - `cd [dirname]` - change directory 23 | - `cd ..` - goto last directory 24 | - `ls` - list files in current directory 25 | - `pwd` - print current directory 26 | - `clear` - clear screen 27 | - `mkdir [dirname]` - create directory 28 | - `touch [filename]` - create file 29 | - `welcome` - welcome message 30 | - `help` - help message 31 | - `open [url]` - open url in new tab' 32 | - `google [keywords]` - search keywords in google 33 | - `baidu [keywords]` - search keywords in baidu 34 | - `github` - the source code of this project 35 | 36 | More commands will be added... 37 | 38 | ## Future plan 39 | 40 | - `rm` - remove file 41 | - `rd` - remove directory 42 | - `j` - jump to a directory 43 | - `mv` - move file 44 | - `mkdir` - limit name of directory（`/`） 45 | - `tree` - optimize the display of file tree 46 | - Make a visual desktop file system(?) 47 | 48 | ## Framework and library 49 | 50 | - Vue3 + TypeScript + Vite 51 | - Pinia 52 | - TailwindCSS 53 | 54 | ## Develop 55 | 56 | ```bash 57 | # Install 58 | pnpm install 59 | # Run 60 | pnpm dev 61 | # Build 62 | pnpm build 63 | ``` 64 | 65 | ## Descriptiton 66 | 67 | The data structure of the terminal system is a *N-ary tree* which simulates the diractory structure of real machine. But there is a slight difference between them, I design a pointer called previous point to its parent node. 68 | 69 | > **Note** 70 | > More about n-ary-tree: [N-ary Tree Data Structure](https://www.studytonight.com/advanced-data-structures/nary-tree) 71 | 72 | ```ts 73 | interface Directory { 74 | id: number // id 75 | name: string // current directory name 76 | files: File[] // all files below current directory 77 | directories: Directory[] // all diractories, alos a pointer which points to its children nodes 78 | previous: Directory | null // a pointer which points to its parent node 79 | } 80 | ``` 81 | 82 | This is the file data structure: 83 | ```ts 84 | interface File { 85 | name: string // file name 86 | value: string // file content 87 | } 88 | ``` -------------------------------------------------------------------------------- /README.zh-CN.md: -------------------------------------------------------------------------------- 1 |2 | English | 中文 3 |
4 | 5 | # Vue3-Terminal 6 | 7 | ## 关于本项目 8 | 9 | Vue3-Terminal 是一个基于 Vue3 的迷你终端，和其他类似的前端模拟终端不同，Vue3-Term 基于 *N叉树*，实现了一些基本的 cd、mkdir、pwd、touch、clear 等命令。 10 | 11 | 在线访问: https://term.mphy.me 12 | 13 |  14 | 15 | 一些已经实现的具有最基本功能的命令： 16 | 17 | - `tree` - 将文件和文件夹以树结构展示 18 | - `echo [message]` - 打印信息 19 | - `echo [message] > [filename]` - 文件写入 20 | - `echo [message] >> [filename]` - 文件内容追加 21 | - `cat [filename]` - 文件读取 22 | - `cd [dirname]` - 改变当前目录 23 | - `cd ..` - 返回上一级目录 24 | - `ls` - 列出当前目录下的文件和目录（文件显示白色，文件夹显示绿色） 25 | - `pwd` - 打印当前目录 26 | - `clear` - 清屏 27 | - `mkdir [dirname]` - 创建目录 28 | - `touch [filename]` - 创建文件 29 | - `welcome` - 欢迎信息 30 | - `help` - 帮助信息 31 | - `google [keywords]` - 在 Google 搜索关键词 32 | - `baidu [keywords]` - 在百度搜索关键词 33 | - `github` - 打开项目源码地址 34 | 35 | 36 | ## 未来计划 37 | 38 | - `rm` - remove file 39 | - `rd` - remove directory 40 | - `j` - jump to a directory 41 | - `mv` - move file 42 | - `mkdir` - limit name of directory（`/`） 43 | - `tree` - optimize the display of file tree 44 | - Make a visual desktop file system(?) 45 | 46 | ## 技术栈 47 | 48 | - Vue3 + TypeScript + Vite 49 | - Pinia 50 | - TailwindCSS 51 | 52 | ## 开发 53 | 54 | ```bash 55 | # Install 56 | pnpm install 57 | # Run 58 | pnpm dev 59 | # Build 60 | pnpm build 61 | ``` 62 | 63 | ## 原理 64 | 65 | 这个终端系统的数据结构是一个 *N叉树（N-ary Tree）*，它模拟了真机的目录结构，以便实现新建文件和目录等功能。但是有一点不同，我设计了一个指针属性 `previous`，指向它的父节点，以便实现 `cd ..` 命令。 66 | 67 | > **Note** 68 | > 更多关于 N 叉树的知识: [N-ary Tree Data Structure](https://www.studytonight.com/advanced-data-structures/nary-tree) 69 | 70 | 目录类型的结构： 71 | ```ts 72 | interface Directory { 73 | id: number // id 74 | name: string // 当前目录名称 75 | files: File[] // 当前目录下的文件列表 76 | directories: Directory[] // 当前目录下的子目录列表，同时也是指向子目录的指针 77 | previous: Directory | null // 指向父目录的指针 78 | } 79 | ``` 80 | 81 | 文件类型的结构： 82 | ```ts 83 | interface File { 84 | name: string // file name 85 | value: string // file content 86 | } 87 | ``` -------------------------------------------------------------------------------- /env.d.ts: -------------------------------------------------------------------------------- 1 | ///
5 | You can start with
6 | pwd,ls,cd,mkdir,touch,clear...(just the most basic usage) to play
7 | with, more commands will be added soon.
8 |
9 | Online:
10 | https://term.mphy.me
11 | Source:
12 | https://github.com/Hacker-C/vue3-terminal
17 |
18 |
19 | Type `help` for more information.
20 |
35 | Vue3 Terminal 36 |
37 |