English | 中文

Vue3-Terminal

About

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 tree
echo [message] - print message
echo [message] > [filename] - write file
echo [message] >> [filename] - append context to file
cat [filename] - read file
cd [dirname] - change directory
cd .. - goto last directory
ls - list files in current directory
pwd - print current directory
clear - clear screen
mkdir [dirname] - create directory
touch [filename] - create file
welcome - welcome message
help - help message
open [url] - open url in new tab'
google [keywords] - search keywords in google
baidu [keywords] - search keywords in baidu
github - the source code of this project

More commands will be added...

Future plan

rm - remove file
rd - remove directory
j - jump to a directory
mv - move file
mkdir - limit name of directory（/）
tree - optimize the display of file tree
Make a visual desktop file system(?)

Framework and library

Vue3 + TypeScript + Vite
Pinia
TailwindCSS

Develop

# Install
pnpm install
# Run
pnpm dev
# Build
pnpm build

Descriptiton

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
}