use local md file

2025-03-10 19:07:09 +08:00
parent 544a046365
commit a2d0f42ae6
7 changed files with 481 additions and 6 deletions
--- a/public/tutorial/1/README.md
+++ b/public/tutorial/1/README.md
@@ -0,0 +1,126 @@
+# 标题和段落
+
+> [!NOTE]
+> 这是测试的版本
+
+## 标题
+
+`h1` 到 `h6`，一共六级标题。
+
+```html
+<h1>标题 1</h1>
+<h2>标题 2</h2>
+<h3>标题 3</h3>
+<h4>标题 4</h4>
+<h5>标题 5</h5>
+<h6>标题 6</h6>
+```
+
+给六个标题字体颜色换一下，注意：`color` 表示**字体颜色**。
+
+```css
+h1 {
+    color: red;
+}
+
+h2 {
+    color: orange;
+}
+
+h3 {
+    color: yellow;
+}
+
+h4 {
+    color: green;
+}
+
+h5 {
+    color: blue;
+}
+
+h6 {
+    color: purple;
+}
+```
+
+颜色的表示可以是英文，也可以是十六进制（注意前面有个井号），也可以是 RGB。
+
+比如
+
+```css
+h1 {
+    color: #333333;
+}
+h2 {
+    color: rgb(163, 174, 46);
+}
+```
+
+## 段落
+
+`p` 表示段落
+
+```html
+<p>
+  月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
+</p>
+```
+
+用 `font-size` 改变字体大小，`line-height` 改变行高。注意单位是 px（像素）
+
+```css
+p {
+    font-size: 24px;
+    line-height: 48px;
+    text-indent: 2em;
+}
+```
+
+`text-indent: 2em;` 表示首行缩进 2 个字符（单位不是 px，而是 em）
+
+## 任务
+
+标题和段落的简单美化。
+
+### 要求
+
+完成下面《白鹭》散文（节选）的排版：
+
+- 标题：使用 `h1` 标签，设置字号 32px，颜色黑色;
+- 每个段落：设置字号 28px，颜色（#333），行间距 40px，首行缩进两字符；
+
+### 文字材料
+
+白鹭
+
+白鹭是一首精巧的诗。
+
+色素的配合，身段的大小，一切都很适宜。
+
+白鹤太大而嫌生硬，即如粉红的朱鹭或灰色的苍鹭，也觉得大了一些，而且太不寻常了。
+
+然而白鹭却因为它的常见，而被人忘却了它的美。
+
+那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。
+
+### 效果
+```html preview
+<h1 style="font-size: 32px; color: black;">白鹭</h1>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">白鹭是一首精巧的诗。</p>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">色素的配合，身段的大小，一切都很适宜。</p>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">白鹤太大而嫌生硬，即如粉红的朱鹭或灰色的苍鹭，也觉得大了一些，而且太不寻常了。</p>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">然而白鹭却因为它的常见，而被人忘却了它的美。</p>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。</p>
+```
+
+## 总结
+### HTML
+标题：h1 到 h6  
+段落：p
+
+### CSS
+color 字体颜色  
+font-size 字体大小  
+line-height 行间距  
+text-indent: 2em; 表示首行缩进2字符  
--- a/public/tutorial/2/README.md
+++ b/public/tutorial/2/README.md
@@ -0,0 +1,77 @@
+# 盒模型（1）
+
+> [!NOTE]
+> 这是测试的版本
+
+## div 标签
+
+HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块级元素，可以嵌套使用。div 标签不像 `h1` `p` 有默认的样式， div 标签没有自带样式，这点很好。比如：
+
+```html
+<div>Web前端开发工程师</div>
+```
+
+嵌套使用：
+
+```html
+<div>
+    <div>Web前端开发工程师</div>
+    <div>岗位要求</div>
+    <div>1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；</div>
+    <div>2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；</div>
+    <div>3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等； </div>
+</div>
+```
+
+注意标签的闭合和层级，可以看到每个 div 标签都是占一行，这就是块级元素的意思。
+
+## class 类名
+
+我们在 HTML 标签上可以写 `class` 类名来命名每个标签，方便写 CSS，比如：
+
+```html
+<div class="main">
+    <div class="title">Web前端开发工程师</div>
+    <div class="subtitle">岗位要求</div>
+    <div class="item">1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；</div>
+    <div class="item">2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；</div>
+    <div class="item">3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等； </div>
+</div>
+```
+
+最外层的 div 叫做 `main`，内层的分别是 `title` `subtitle` `item`
+
+这样，我们就可以在 CSS 中指定 class 类名，写相应的样式，比如：
+
+```css
+.title {
+    font-size: 32px;
+    font-weight: bold; /* 字体加粗 */
+    line-height: 64px;
+    color: #000099;
+}
+
+.subtitle {
+    font-size: 24px;
+    line-height: 48px;
+}
+
+.item {
+    font-size: 20px;
+    text-indent: 2em;
+    line-height: 40px;
+}
+```
+
+> [!IMPORTANT]
+> 注意 class 类名要有意义，不要随便起名，不然数量多了之后容易混淆
+
+## 任务
+### HTML
+上网搜索 🔍 或询问 AI 🤖，找到【初级网络工程师】的岗位要求，通过 Div 嵌套，写上合适的 class 类名，完成 HTML 内容的排版。
+
+### CSS
+自由调整合适的字体大小、行间距、字体颜色、字重、缩进等样式，美化排版内容。
+
+### 例子
+[初级网络工程师岗位要求](/tutorial/2/demo.html)
--- a/public/tutorial/2/demo.html
+++ b/public/tutorial/2/demo.html
--- a/public/tutorial/3/README.md
+++ b/public/tutorial/3/README.md
@@ -0,0 +1,263 @@
+# 盒模型（2）
+
+> [!NOTE]
+> 以下是 AI 生成的，不代表 xuyue 的观点
+
+## 1. 盒模型简介
+
+在 HTML 和 CSS 中，每个元素都可以看作是一个矩形的盒子。这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解盒模型是掌握网页布局的关键。
+
+
+![box](/tutorial/3/box.svg)
+
+## 2. 盒模型的组成部分
+
+### 2.1 内容（Content）
+内容区域是盒子的核心部分，显示元素的实际内容，如文本、图片等。内容的大小可以通过 `width` 和 `height` 属性来设置。
+
+```html
+<div>DeepSeek V3</div>
+```
+
+```css
+div {
+    background-color: lightblue;
+    width: 200px;
+    height: 100px;
+}
+```
+
+### 2.2 内边距（Padding）
+内边距是内容区域与边框之间的空间。它可以通过 `padding` 属性来设置。内边距会增加元素的总宽度和高度。
+
+```css
+div {
+    background-color: lightblue;
+    width: 200px;
+    height: 100px;
+
+    padding: 10px; /* 上下左右的内边距都为10px */
+}
+```
+
+你也可以分别设置四个方向的内边距：
+
+```css
+div {
+    background-color: lightblue;
+    width: 200px;
+    height: 100px;
+
+    padding-top: 10px;
+    padding-right: 15px;
+    padding-bottom: 20px;
+    padding-left: 25px;
+}
+```
+
+### 2.3 边框（Border）
+边框是围绕内容和内边距的线条。你可以通过 `border` 属性来设置边框的宽度、样式和颜色。
+
+```css
+div {
+    background-color: lightblue;
+    width: 200px;
+    height: 100px;
+
+    border: 2px solid black; /* 2px宽的黑色实线边框 */
+}
+```
+
+你也可以分别设置边框的宽度、样式和颜色：
+
+```css
+div {
+    background-color: lightblue;
+    width: 200px;
+    height: 100px;
+
+    border-width: 2px;
+    border-style: solid;
+    border-color: black;
+}
+```
+
+### 2.4 外边距（Margin）
+外边距是元素与其他元素之间的空间。它可以通过 `margin` 属性来设置。外边距不会影响元素的总宽度和高度，但会影响元素在页面中的位置。
+
+```css
+div {
+    background-color: lightblue;
+    width: 200px;
+    height: 100px;
+
+    margin: 10px; /* 上下左右的外边距都为10px */
+}
+```
+
+你也可以分别设置四个方向的外边距：
+
+```css
+div {
+    background-color: lightblue;
+    width: 200px;
+    height: 100px;
+
+    margin-top: 10px;
+    margin-right: 15px;
+    margin-bottom: 20px;
+    margin-left: 25px;
+}
+```
+
+## 3. 盒模型的计算
+
+盒模型的总宽度和高度可以通过以下公式计算：
+
+- **总宽度** = `width` + `padding-left` + `padding-right` + `border-left` + `border-right` + `margin-left` + `margin-right`
+- **总高度** = `height` + `padding-top` + `padding-bottom` + `border-top` + `border-bottom` + `margin-top` + `margin-bottom`
+
+### 3.1 示例
+
+```css
+div {
+    background-color: lightblue;
+    width: 200px;
+    height: 100px;
+    padding: 10px;
+    border: 2px solid black;
+    margin: 20px;
+}
+```
+
+- **总宽度** = 200px (width) + 10px (padding-left) + 10px (padding-right) + 2px (border-left) + 2px (border-right) + 20px (margin-left) + 20px (margin-right) = 264px
+- **总高度** = 100px (height) + 10px (padding-top) + 10px (padding-bottom) + 2px (border-top) + 2px (border-bottom) + 20px (margin-top) + 20px (margin-bottom) = 164px
+
+## 4. `box-sizing` 属性
+
+默认情况下，CSS 使用标准盒模型（`content-box`），即元素的宽度和高度只包括内容区域。如果你希望元素的宽度和高度包括内边距和边框，可以使用 `box-sizing: border-box;`。
+
+```css
+div {
+    background-color: lightblue;
+    width: 200px;
+    height: 100px;
+
+    box-sizing: border-box;
+    padding: 10px;
+    border: 2px solid black;
+    margin: 20px;
+}
+```
+
+在这种情况下，元素的总宽度和高度将包括内容、内边距和边框，而外边距仍然在外部。
+
+## 5. 总结
+
+- **内容（Content）**：元素的实际内容。
+- **内边距（Padding）**：内容与边框之间的空间。
+- **边框（Border）**：围绕内容和内边距的线条。
+- **外边距（Margin）**：元素与其他元素之间的空间。
+
+理解盒模型是掌握网页布局的基础。通过合理设置 `padding`、`border` 和 `margin`，你可以更好地控制元素的外观和位置。
+
+## 任务
+
+### 任务目标
+
+使用 `padding`、`margin` 和 `border` 来调整盒子的布局，完成一个拼图式的页面。你需要通过合理设置这三个属性，让多个盒子按照要求排列组合，最终形成一个完整的图案。
+
+### 任务要求
+
+#### 1. 基础盒子
+- 创建 6 个 `div` 元素，每个元素的 `width` 和 `height` 都为 `100px`。
+- 每个盒子的背景色可以不同，方便区分。
+
+#### 2. 使用 `padding`、`margin` 和 `border`
+- 每个盒子必须设置 `padding`、`margin` 和 `border`，且值不能为 `0`。
+- 通过调整这三个属性，让盒子按照以下规则排列：
+  - 盒子之间不能有重叠。
+  - 盒子之间的间距必须完全由 `margin` 控制。
+  - 盒子的内容区域必须清晰可见（通过 `padding` 控制内容与边框的距离）。
+  - 边框必须清晰可见，且每个盒子的边框颜色可以不同。
+
+#### 3. 排列规则
+- 将 6 个盒子排列成一个 **2x3 的网格**。
+- 网格的行间距和列间距必须完全由 `margin` 控制。
+- 每个盒子的 `padding` 和 `border` 必须清晰可见。
+
+### 4. 最终效果
+- 页面中应该有一个清晰的 2x3 网格，每个盒子之间有均匀的间距。
+- 每个盒子的内容区域、内边距和边框都应该清晰可见。
+
+## 初始代码
+```html
+<div class="container">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+    <div class="box">4</div>
+    <div class="box">5</div>
+    <div class="box">6</div>
+</div>
+```
+
+```css
+/* 容器样式 */
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    width: 400px; /* 容器宽度 */
+    margin: 0 auto; /* 居中 */
+}
+
+/* 基础盒子样式 */
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: lightblue;
+    padding: 10px; /* 内边距 */
+    border: 5px solid black; /* 边框 */
+    margin: 15px; /* 外边距 */
+    text-align: center;
+    line-height: 100px; /* 文字垂直居中 */
+}
+```
+
+### 任务提示
+
+1. **`padding`**
+   - 控制内容与边框之间的距离。
+   - 尝试为不同的盒子设置不同的 `padding` 值，观察内容区域的变化。
+
+2. **`border`**
+   - 控制边框的宽度、样式和颜色。
+   - 尝试为不同的盒子设置不同的边框样式（如 `dashed`、`dotted`）。
+
+3. **`margin`**
+   - 控制盒子之间的间距。
+   - 尝试为不同的盒子设置不同的 `margin` 值，观察盒子之间的间距变化。
+
+4. **布局调整**
+   - 使用 `display: flex` 和 `flex-wrap: wrap` 来实现 2x3 的网格布局。
+   - 调整 `margin` 的值，确保盒子之间的间距均匀。
+
+### 任务扩展（可选）
+
+1. **动态效果**
+   - 使用 `:hover` 伪类，当鼠标悬停在盒子上时，改变盒子的 `padding`、`margin` 或 `border`。
+   - 例如：
+     ```css
+     .box:hover {
+         padding: 20px;
+         margin: 10px;
+         border: 10px solid red;
+     }
+     ```
+
+2. **颜色变化**
+   - 为每个盒子设置不同的背景色、边框颜色和内边距颜色，让拼图更生动。
+
+### 最终效果
+
+完成后的页面应该是一个整齐的 2x3 网格，每个盒子之间有均匀的间距，且内容区域、内边距和边框都清晰可见。通过调整 `padding`、`margin` 和 `border`，你可以直观地感受到它们对布局的影响。
--- a/public/tutorial/3/box.svg
+++ b/public/tutorial/3/box.svg
--- a/public/tutorial/README.md
+++ b/public/tutorial/README.md
@@ -0,0 +1,3 @@
+1 标题和段落
+2 盒模型（1）
+3 盒模型（2）
--- a/src/api.ts
+++ b/src/api.ts
@@ -63,10 +63,10 @@ export const Account = {
    return res.data
  },

-  async batchCreate(payload: {classname: string, names: string[]}) {
+  async batchCreate(payload: { classname: string; names: string[] }) {
    const res = await http.post("/account/batch", payload)
    return res.data
-  }
+  },
 }

 export const Tutorial = {
@@ -90,12 +90,18 @@ export const Tutorial = {
  },

  async get(display: number) {
-    const res = await http.get(`/tutorial/${display}`)
-    return res.data
+    // const res = await http.get(`/tutorial/${display}`)
+    // return res.data
+    const res = await fetch(`/tutorial/${display}/README.md`)
+    const content = await res.text()
+    return { content }
  },

  async listDisplay() {
-    const res = await http.get("/tutorial/display")
-    return res.data
+    // const res = await http.get("/tutorial/display")
+    // return res.data
+    const res = await fetch("/tutorial/README.md")
+    const text = await res.text()
+    return text.split("\n").map((item) => Number(item.split(" ")[0]))
  },
 }