English | 中文
Hi! Here is a mini terminal built with Vue3 + TS + Pinia + TailwindCSS!
Onlie: https://term.mphy.me
It has some basic commands below(with the most basic usage):
tree
- show the file and folder treeecho [message]
- print messageecho [message] > [filename]
- write fileecho [message] >> [filename]
- append context to filecat [filename]
- read filecd [dirname]
- change directorycd ..
- goto last directoryls
- list files in current directorypwd
- print current directoryclear
- clear screenmkdir [dirname]
- create directorytouch [filename]
- create filewelcome
- welcome messagehelp
- help messageopen [url]
- open url in new tab'google [keywords]
- search keywords in googlebaidu [keywords]
- search keywords in baidugithub
- the source code of this project
More commands will be added...
rm
- remove filerd
- remove directoryj
- jump to a directorymv
- move filemkdir
- limit name of directory(/
)tree
- optimize the display of file tree- Make a visual desktop file system(?)
- Vue3 + TypeScript + Vite
- Pinia
- TailwindCSS
# Install
pnpm install
# Run
pnpm dev
# Build
pnpm build
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.
Note More about n-ary-tree: N-ary Tree Data Structure
interface Directory {
id: number // id
name: string // current directory name
files: File[] // all files below current directory
directories: Directory[] // all diractories, alos a pointer which points to its children nodes
previous: Directory | null // a pointer which points to its parent node
}
This is the file data structure:
interface File {
name: string // file name
value: string // file content
}