doc: lint

Author: camera-2018

.vitepress/components/sweep.vue

@@ -135,7 +135,7 @@ watchEffect(() => {
     border-color: var(--vp-c-brand-light);
     transition: all 0.1s ease-in-out;
   }
-  .btn:dark {
+  .btn.dark {
     background-color: var(--vp-c-brand-dark);
     border-color: var(--vp-c-brand-light);
     transition: all 0.1s ease-in-out;

… Vite+React+TypeScript+AntD 快速构建一个小应用.md … Vite、React、TypeScript、AntD 快速构建一个小应用.md4.WEB模块/4.2 Float的前端速通/4.2.3 现代前端技术栈/4.2.3.6 简单实操:使用 Vite+React+TypeScript+AntD 快速构建一个小应用.md renamed to 4.WEB模块/4.2 Float的前端速通/4.2.3 现代前端技术栈/4.2.3.6 简单实操：使用 Vite、React、TypeScript、AntD 快速构建一个小应用.md 4.WEB模块/4.2 Float的前端速通/4.2.3 现代前端技术栈/4.2.3.6 简单实操:使用 Vite+React+TypeScript+AntD 快速构建一个小应用.md renamed to 4.WEB模块/4.2 Float的前端速通/4.2.3 现代前端技术栈/4.2.3.6 简单实操：使用 Vite、React、TypeScript、AntD 快速构建一个小应用.md

@@ -6,7 +6,7 @@ Visual Studio Code（简称 VSCode）是由微软开发的一款现代化、轻
 
 VSCode 可以在 Windows、macOS 和 Linux 操作系统上运行，为开发者提供了一个统一的开发环境。
 
-[官网地址](https://code.visualstudio.com/) 
+[官网地址](https://code.visualstudio.com/)
 
 ## Node.js 运行环境
 
@@ -20,9 +20,9 @@ Node.js 提供了一个独立于浏览器的运行环境 (runtime environment)
 首先找个你想创建项目的文件夹，运行下面的命令，输入项目名称，选择 React 然后是 TypeScript。
 
 ``` bash
-$ npm create vite@latest
-```
+npm create vite@latest
 
+```
 
 ## Ant Design 组件资源
 
@@ -35,41 +35,52 @@ Ant Design 还提供了不少图标资源可以使用。
 安装：
 
 ``` bash
-$ npm install antd
+npm install antd
+
 ```
 
 ## 实操开始
 
 **项目简介**：点击按钮次数加1，并可以用输入框改变标题。
 
 **步骤**：
+
 1. **引入AntD组件**：
 
 将import的代码放在App.tsx的最上面
 
-``` App.tsx
+::: code-group
+
+``` tsx [App.tsx]
 import { Button } from "antd";
 import { Input } from "antd";
 import { Space } from 'antd';
 ```
 
+:::
+
 2. **选择自己喜欢的按钮样式**：
 
 具体例子如下，可自行前往AntD官网学习。
 
-``` App.tsx
- <Button color="primary" variant="solid">
- 按钮一枚
- </Button>
+::: code-group
+
+``` tsx [App.tsx]
+<Button color="primary" variant="solid">
+  按钮一枚
+</Button>
 ```
 
+:::
+
 3. **使用useState**：
 
 引入count和setCount并在按钮组件中使用onClick
 
-``` App.tsx
+::: code-group
 
- function App() {
+``` tsx [App.tsx]
+function App() {
   const [count, setCount] = useState(0)
 
   return (
@@ -85,22 +96,30 @@ import { Space } from 'antd';
 }
 ```
 
+:::
+
 4. **加入输入框**：
 
 将Input和Button放入Space之中，这三个都是AntD的组件。
 
-``` App.tsx
- <Space.Compact style={{ width: '100%' }}>
-        <Input placeholder="这是一个输入框"/>
-        <Button color="primary" variant="solid"}>提交</Button>
-      </Space.Compact>
+::: code-group
+
+``` tsx [App.tsx]
+<Space.Compact style={{ width: '100%' }}>
+  <Input placeholder="这是一个输入框" />
+  <Button color="primary" variant="solid"> 提交 </Button>
+</Space.Compact>
+
 ```
 
+:::
 5. **实现改标题功能**：
 
 下面是完整的代码
 
-``` App.tsx
+::: code-group
+
+``` tsx [App.tsx]
 import { useState } from 'react'
 import './App.css'
 import { Button } from "antd";
@@ -124,7 +143,6 @@ function App() {
         <Input placeholder="改标题" onChange={(e) => setNewTitle(e.target.value)}/>
         <Button color="primary" variant="solid" onClick={() => setBT((bt) => newTitle)}>提交</Button>
       </Space.Compact>
-      
     </>
   )
 }
@@ -133,13 +151,11 @@ export default App
 
 ```
 
+:::
+
 在终端里输入下面指令试试
 
 ``` bash
-$ npm run dev
-```
-
-
-
-
+npm run dev
 
+```