docs: update terminal intro with macos guide and demo
This commit is contained in:
@@ -80,6 +80,7 @@ const currentStepIndex = ref(-1)
|
||||
const osList = [
|
||||
{ id: 'win-cmd', name: 'Windows CMD', icon: '🪟' },
|
||||
{ id: 'win-ps', name: 'Windows PowerShell', icon: '⚡' },
|
||||
{ id: 'mac', name: 'macOS Terminal', icon: '🍎' },
|
||||
{ id: 'linux', name: 'Linux Terminal', icon: '🐧' }
|
||||
]
|
||||
|
||||
@@ -116,6 +117,20 @@ const configs = {
|
||||
{ type: 'output', content: 'Hello World', delay: 100, explanation: '计算机乖乖地输出了 "Hello World"。' }
|
||||
]
|
||||
},
|
||||
'mac': {
|
||||
title: 'user — -zsh — 80x24',
|
||||
prompt: 'user@MacBook-Pro ~ % ',
|
||||
demo: [
|
||||
{ type: 'explanation', content: '准备输入命令...' },
|
||||
{ type: 'command', content: 'ls -G', delay: 400, explanation: '输入 `ls` (List)。这是 Mac/Linux 系统用来**列出文件**的命令。`-G` 参数让输出带颜色。' },
|
||||
{ type: 'output', content: 'Desktop Downloads Movies Music', delay: 100 },
|
||||
{ type: 'output', content: 'Documents Library Pictures Public', delay: 100, explanation: '系统列出了你的主目录下的文件夹。' },
|
||||
{ type: 'command', content: 'sw_vers', delay: 400, explanation: '输入 `sw_vers` (Software Version)。这是 macOS 特有的命令,查看**系统版本**。' },
|
||||
{ type: 'output', content: 'ProductName: macOS', delay: 50 },
|
||||
{ type: 'output', content: 'ProductVersion: 15.1', delay: 50 },
|
||||
{ type: 'output', content: 'BuildVersion: 24B83', delay: 50, explanation: '系统返回了当前的 macOS 版本信息。' }
|
||||
]
|
||||
},
|
||||
'linux': {
|
||||
title: 'user@hostname: ~',
|
||||
prompt: 'user@hostname:~$ ',
|
||||
@@ -335,6 +350,23 @@ const nextStep = async () => {
|
||||
.terminal-window.linux .window-buttons .maximize { background: #27c93f; }
|
||||
|
||||
/* Common Layout */
|
||||
.terminal-window.mac {
|
||||
background: #1e1e1e;
|
||||
color: #f0f0f0;
|
||||
font-family: 'Menlo', monospace;
|
||||
}
|
||||
.terminal-window.mac .window-bar {
|
||||
background: #3a3a3a;
|
||||
border-bottom: 1px solid #222;
|
||||
color: #ccc;
|
||||
}
|
||||
.terminal-window.mac .window-buttons .btn {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.terminal-window.mac .window-buttons .close { background: #ff5f56; }
|
||||
.terminal-window.mac .window-buttons .minimize { background: #ffbd2e; }
|
||||
.terminal-window.mac .window-buttons .maximize { background: #27c93f; }
|
||||
|
||||
.window-bar {
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
@@ -610,7 +642,8 @@ const nextStep = async () => {
|
||||
border-top-color: #ccc;
|
||||
}
|
||||
|
||||
.terminal-window.linux .explanation-bar {
|
||||
.terminal-window.linux .explanation-bar,
|
||||
.terminal-window.mac .explanation-bar {
|
||||
background: #222;
|
||||
color: #ccc;
|
||||
border-top-color: #444;
|
||||
|
||||
@@ -2,9 +2,41 @@
|
||||
|
||||
> 💡 **学习指南**:本章节旨在为零基础读者提供一个关于终端(Terminal)工作原理的系统性认知。无需具备计算机专业背景,我们将通过交互式演示,由浅入深地解析终端的运行机制。
|
||||
|
||||
## 0. 快速上手:如何打开终端?
|
||||
|
||||
在你开始学习之前,首先得找到它。终端是每个操作系统的“出厂标配”,你不需要安装任何软件就能使用它。
|
||||
|
||||
::: info 🖥️ 不同系统的打开方式
|
||||
|
||||
** macOS (苹果电脑)**
|
||||
1. 按下 `Command (⌘) + Space` 打开聚焦搜索(Spotlight)。
|
||||
2. 输入 `Terminal` 或 `终端`。
|
||||
3. 按回车键,你就会看到一个白底黑字(或黑底白字)的窗口。
|
||||
|
||||
**🪟 Windows**
|
||||
* **方法一 (CMD)**:按下 `Win + R`,输入 `cmd`,按回车。这是最古老的命令行。
|
||||
* **方法二 (PowerShell)**:按下 `Win + R`,输入 `powershell`,按回车。这是更现代、功能更强大的终端。
|
||||
* *建议:日常简单操作两者皆可,开发环境推荐使用 PowerShell 或安装 WSL (Windows Subsystem for Linux)。*
|
||||
|
||||
**🐧 Linux**
|
||||
* 通常快捷键是 `Ctrl + Alt + T`。
|
||||
* 或者在应用菜单中搜索 `Terminal`。
|
||||
|
||||
:::
|
||||
|
||||
### 0.1 我们用终端做什么?
|
||||
|
||||
你可能习惯了用鼠标双击打开文件夹、右键复制粘贴。但在开发者眼中,终端是更高效的瑞士军刀。我们主要用它做三件事:
|
||||
|
||||
1. **文件管理**:不需要打开层层叠叠的窗口,一句话就能找到藏得很深的文件,或者瞬间批量重命名一万张照片。
|
||||
2. **环境搭建与程序运行**:安装 Python、Node.js,启动一个 Web 服务器,或者运行你刚写的代码。这些操作在图形界面下往往非常繁琐甚至无法完成。
|
||||
3. **远程控制**:这是终端的**杀手锏**。你可以坐在星巴克,通过终端控制一台远在千里之外的数据中心服务器,就像它就在你面前一样。
|
||||
|
||||
现在,你已经知道了它在哪以及它能做什么,接下来让我们看看它到底长什么样。
|
||||
|
||||
## 1. 概念界定:终端是什么? (Definition)
|
||||
|
||||
*不同操作系统下的终端长相不同,**命令方式也不同**。点击下方按钮切换查看,注意观察 Windows 和 Linux 是如何用不同的命令(如 `dir` vs `ls`)做同一件事的:*
|
||||
*不同操作系统下的终端长相不同,**命令方式也不同**。点击下方按钮切换查看,注意观察 macOS, Windows 和 Linux 是如何用不同的命令(如 `dir` vs `ls`)做同一件事的:*
|
||||
|
||||
<TerminalOSDemo />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user