Merge branch 'main' into dev

.gitignore

@@ -2,4 +2,4 @@ node_modules
 dist
 cache
 .temp
-.DS_Store
+.DS_Store

docs/.vitepress/components/ImgSlider.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="img-slider">
-    <Carousel :autoplay="2000" :wrap-around="true">
+    <Swiper :modules="modules" autoplay loop>
-      <Slide v-for="{ src, alt } of imgSliderList" :key="src">
+      <template v-for="{ src, alt } of imgSliderList" :key="src">
-        <img class="carousel__item" :src="src" :alt="alt" />
+        <SwiperSlide>
-      </Slide>
+          <img :src="src" :alt="alt" />
-    </Carousel>
+        </SwiperSlide>
+      </template>
+    </Swiper>
   </div>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
+import { Autoplay } from 'swiper'
+import { Swiper, SwiperSlide } from 'swiper/vue'
 import type { ImgSliderList } from '../types'
-
+import 'swiper/css'
-import 'vue3-carousel/dist/carousel.css'
-import { Carousel, Slide } from 'vue3-carousel'
 
 defineProps({
   imgSliderList: {
@@ -21,10 +23,6 @@ defineProps({
     required: true
   }
 })
-</script>
 
-<style scoped>
+const modules = [Autoplay]
-.carousel__item {
+</script>
-  width: 90%;
-}
-</style>

docs/.vitepress/components/Title.vue

@@ -29,4 +29,8 @@ const props = defineProps({
 })
 </script>
 
-<style scoped></style>
+<style scoped>
+.title {
+  text-align: center;
+}
+</style>

docs/.vitepress/config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vitepress'
 import generateSideBar from './scripts/generateSideBar'
+import { projects, works, notes, JUEJIN } from './const'
 
 export default defineConfig({
   title: 'ZiuChen',
@@ -16,27 +17,15 @@ export default defineConfig({
       { text: '首页', link: '/' },
       {
         text: '我的项目',
-        items: [
+        items: projects
-          { text: '超级剪贴板', link: '/project/ClipboardManager/' },
-          { text: '超级分词', link: '/project/SmartWordBreak/' }
-        ]
       },
       {
         text: '开源作品',
-        items: [
+        items: works
-          { text: '个人作品', link: '/works/opensource' },
-          { text: '社区贡献', link: '/works/contribution' }
-        ]
       },
       {
         text: '学习笔记',
-        items: [
+        items: notes
-          { text: 'JavaScript基础', link: '/note/JavaScript' },
-          { text: 'CSS基础', link: '/note/CSS' },
-          { text: 'JavaScript进阶', link: '/note/JavaScriptEnhanced' },
-          { text: '前端工程化', link: '/note/Front-end Engineering' },
-          { text: '服务端渲染', link: '/note/SSR' }
-        ]
       },
       {
         text: '个人介绍',
@@ -46,43 +35,28 @@ export default defineConfig({
     sidebar: [
       {
         text: '我的项目',
-        collapsible: true,
+        items: projects
-        items: [
-          { text: '超级剪贴板', link: '/project/ClipboardManager/' },
-          { text: '超级分词', link: '/project/SmartWordBreak/' }
-        ]
       },
       {
         text: '开源作品',
-        collapsible: true,
+        collapsed: true,
-        items: [
+        items: works
-          { text: '个人作品', link: '/works/opensource' },
-          { text: '社区贡献', link: '/works/contribution' }
-        ]
       },
       {
         text: '文章归档',
-        collapsible: true,
+        collapsed: true,
         items: [...generateSideBar()]
       },
       {
         text: '学习笔记',
-        collapsible: true,
+        collapsed: true,
-        items: [
+        items: notes
-          { text: 'JavaScript基础', link: '/note/JavaScript' },
-          { text: 'CSS基础', link: '/note/CSS' },
-          { text: 'JavaScript进阶', link: '/note/JavaScriptEnhanced' },
-          { text: '前端工程化', link: '/note/Front-end Engineering' },
-          { text: '服务端渲染', link: '/note/SSR' }
-        ]
       }
     ],
     socialLinks: [
       { icon: 'github', link: 'https://github.com/ZiuChen' },
       {
-        icon: {
+        icon: { svg: JUEJIN },
-          svg: '<svg width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z" fill="#1E80FF"/></svg>'
-        },
         link: 'https://juejin.cn/user/1887205216238477'
       }
     ],
@@ -95,10 +69,13 @@ export default defineConfig({
       copyright: 'Copyright © 2019-present Ziu Chen'
     },
     lastUpdatedText: 'Updated Date',
-    algolia: {
+    search: {
-      apiKey: 'b4fd296ea5e467b3ac4a582160ff3122',
+      provider: 'algolia',
-      indexName: 'ziuchenio',
+      options: {
-      appId: 'LFZ2CPWWUG'
+        appId: 'LFZ2CPWWUG',
+        apiKey: 'b4fd296ea5e467b3ac4a582160ff3122',
+        indexName: 'ziuchenio'
+      }
     }
   }
 })

docs/.vitepress/const/icons.ts

@@ -0,0 +1 @@
+export const JUEJIN = `<svg width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z" fill="#1E80FF"/></svg>`

docs/.vitepress/const/index.ts

@@ -0,0 +1,2 @@
+export * from './links'
+export * from './icons'

docs/.vitepress/const/links.ts

@@ -0,0 +1,24 @@
+export const projects = [
+  { text: '超级剪贴板', link: '/project/ClipboardManager/' },
+  { text: '超级Markdown', link: '/project/Markdown/' },
+  { text: '超级JavaScript', link: '/project/JSRunner/' },
+  { text: '超级分词', link: '/project/SmartWordBreak/' }
+]
+
+export const works = [
+  { text: '个人作品', link: '/works/opensource' },
+  { text: '社区贡献', link: '/works/contribution' }
+]
+
+export const notes = [
+  { text: 'JavaScript基础', link: '/note/JavaScript' },
+  { text: 'CSS基础', link: '/note/CSS' },
+  { text: 'JavaScript进阶', link: '/note/JavaScriptEnhanced' },
+  { text: '前端工程化', link: '/note/Front-end Engineering' },
+  { text: '服务端渲染', link: '/note/SSR' },
+  { text: 'React基础', link: '/note/React' },
+  { text: 'React Hooks', link: '/note/React Hooks' },
+  { text: 'Redux', link: '/note/Redux' },
+  { text: 'React Router', link: '/note/React Router' },
+  { text: 'MySQL', link: '/note/MySQL' }
+]

docs/.vitepress/type.d.ts

@@ -1,5 +1,5 @@
 declare module '*.vue' {
-  import { ComponentOptions } from 'vue'
+  import { defineComponent } from 'vue'
-  const componentOptions: ComponentOptions
+  const component: ReturnType<typeof defineComponent>
-  export default componentOptions
+  export default component
 }

docs/index.md

@@ -13,13 +13,22 @@ hero:
     text: View on GitHub
     link: https://github.com/ZiuChen
 features:
-  - icon: 🎓
+  - icon: 📋
-    title: Electronic Information Major
+    title: Clipboard Manager
-    details: 电子信息工程
+    details: A Powerful clipboard management tool
-  - icon: 🎯
+  - icon: ✍🏻
-    title: JavaScript & TypeScript
+    title: Super Markdown
-    details: 自学前端 热爱技术
+    details: Powerful Markdown editor
-  - icon: 👆
+  - icon: 🚗
-    title: See more information
+    title: JS Runner
-    details: 访问导航栏查看更多信息
+    details: Run JavaScript dynamicly in Browser/Node.js
+  - icon: 🔑
+    title: Bytemd Plugin
+    details: Bytemd Plugin Library
+  - icon: 🍬
+    title: ASOUL Browser Pet
+    details: Keep an A-SOUL member as a pet in your browser
+  - icon: 🔧
+    title: Typein
+    details: Typein text, quickly perform browser operations
 ---

docs/note/CSS.md

@@ -4,6 +4,8 @@ editLink: false
 
 # CSS基础
 
+## 书写CSS代码的方式
+
 CSS提供了三种方法，可以将CSS样式应用到元素上：
 
 - 内联样式
@@ -730,6 +732,8 @@ HTML中的每个元素都可以看做是一个盒子，可以具备以下四个
 - 定位的参照对象是视口（viewpoint）
 - 当画布滚动时，固定不动
 
+**当元素祖先的 transform  属性非 none 时，容器由视口改为该祖先。**
+
 - 视口（ViewPort）：文档的可视区域
 - 画布（Canvas）：渲染文档的区域 文档内容超出视口范围 则可以滚动查看
 - 画布 >= 视口

docs/note/Front-end Engineering.md

@@ -35,7 +35,7 @@ Node.js是一个基于**V8 JavaScript引擎**的**JavaScript运行时环境**
   - JavaScript代码 -> V8 -> Node.js Bindings -> LibUV
   - LibUV是使用**C语言编写的库**，提供了**事件循环、文件系统读写、网络IO、线程池**等等内容
 
-![The Node.js System](Front-end Engineering.assets/The Node.js System.jpeg)
+![The Node.js System](Front-end-Engineering.assets/the-node.js-system.jpeg)
 
 ### Node.js的应用场景
 
@@ -635,7 +635,7 @@ ESModule的解析过程可以分为三个阶段：
   - 运行代码，计算值，并且将值填充到内存地址中
   - 将导入导出的**值**赋给对应的变量`name = 'Ziu'`
 
-![ESModule解析过程](Front-end Engineering.assets/esmodule-phases.png)
+![ESModule解析过程](Front-end-Engineering.assets/esmodule-phases.png)
 
 文章推荐：[ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)
 
@@ -1001,7 +1001,7 @@ PNPM（performant npm）有以下优点：
   - 符号链接 是一类特殊的文件
   - 其包含有一条以绝对路径或者相对路径的形式**指向其他文件或者目录的引用**
 
-![hard-link and soft-link](Front-end Engineering.assets/hard-link-and-soft-link.jpg)
+![hard-link and soft-link](Front-end-Engineering.assets/hard-link-and-soft-link.jpg)
 
 操作系统使用不同的**文件系统**，**对真实的硬盘读写操作做了一层抽象**，借由文件系统，我们得以方便地操作和访问文件的真实数据
 
@@ -1055,7 +1055,7 @@ PNPM（performant npm）有以下优点：
   - 在`node_modules/.pnpm`中，包含了附加版本信息的真实文件（硬链接到硬盘数据的文件）
   - 所有间接依赖，都通过软链接的方式，链接到被铺平在`.pnpm`文件夹中对应版本的硬链接文件上
 
-![how pnpm works](Front-end Engineering.assets/how-pnpm-works.jpg)
+![how pnpm works](Front-end-Engineering.assets/how-pnpm-works.jpg)
 
 #### 常用命令
 

docs/note/MySQL.md

@@ -0,0 +1,296 @@
+# MySQL
+
+## MySQL基础篇
+
+### MySQL简单使用
+
+在命令行窗口输入
+
+```sh
+mysql -uroot -p1234 -hlocalhost -P3306
+```
+
+指定用户名为 `root` 密码为 `1234` 连接host为 `localhost` 端口号为 `3306`
+
+除了以明文方式输入密码，也可以通过另一种方式登录：
+
+```sh
+mysql -u root -p
+1234
+```
+
+进入mysql命令行工具后，查看所有表：
+
+```sql
+show databases;
+```
+
+MySQL默认为我们创建了四个表` information_schema` `mysql` `performance_schema` `sys`
+
+创建一个新的数据库：
+
+```sql
+create database dbtest1;
+```
+
+使用数据库：
+
+```sql
+use dbtest1;
+```
+
+创建一张表，初始化`id`与`name`字段：
+
+```sql
+create table employees(id int, name varchar(15));
+```
+
+查看表中数据：
+
+```sql
+select * from emoloyees;
+```
+
+插入一条数据：
+
+```sql
+insert into employees values(1001, 'Tom');
+insert into employees values(1002, 'Jack');
+```
+
+当我们向表中插入中文数据时，`5.7`版本的MySQL会报错，而`8.0`版本则不会：
+
+```sql
+insert into employees values(1003, '杰瑞');
+```
+
+检查一下表的信息：
+
+```sql
+show create table employees;
+```
+
+可以发现，表的默认字符集是 `CHARSET=latin1` 拉丁字符集，不包含汉字。
+
+查看编码与比较规则：
+
+百分号`%`表示一个到多个字符
+
+```sql
+show variables like 'character_%';
+show variables like 'collation_%';
+```
+
+若是`5.7`版本，默认的编码字符集为`latin1`，而最新的`8.0`为`utf8`。配置文件可以在`my.ini`中修改
+
+删除一个数据库
+
+```sql
+drop database dbtest1;
+```
+
+### 基本的SELECT语句
+
+#### SQL分类
+
+* DDL `DataDefinitionLanguage` 用于定义数据库对象（数据库 表 字段）
+  * 主要语句关键字包括`CREATE` `DROP` `ALERT`等
+* DML `DataManipulationLanguage` 用于对数据库表中的数据进行增删改查
+  * 主要语句关键字包括`INSERT` `DELETE` `UPDATE` `SELECT`等
+  * `SELECT`是SQL语言的基础，最为重要
+* DQL `DataQueryLanguage` 用来查询数据库中表的记录
+  * 由于查询语句使用的非常频繁，将查询语句单拎出来自成一类
+* DCL `DataControlLanguage` 用来创建数据库用户、控制数据库的访问权限
+  * 主要的语句关键字包括`GRANT` `REVOKE` `COMMIT` `ROLLBACK` `SAVEPOINT`等
+
+### SQL规则和规范
+
+- SQL语句可以单行或多行书写，为了提高可读性，各子句分行写，必要时使用缩进，**以分号结尾**
+- 每条命令以 `;` 或 `\g` 或 `\G` 结束
+- 关键字不能被缩写也不能分行
+- 关于标点符号
+  - 必须保证所有的()、单引号、双引号是成对结束的
+  - 必须使用英文状态下的半角输入方式
+  - 字符串型和日期时间类型的数据可以使用单引号（' '）表示
+  - 列的别名，尽量使用双引号（" "），而且不建议省略as
+
+#### SQL大小写规则
+
+- MySQL 在 Windows 环境下是大小写不敏感的
+- MySQL 在 Linux 环境下是大小写敏感的
+  - 数据库名、表名、表的别名、变量名是严格区分大小写的
+  - 关键字、函数名、列名(或字段名)、列的别名(字段的别名) 是忽略大小写的。
+- 推荐采用统一的书写规范：
+  - 数据库名、表名、表别名、字段名、字段别名等都小写
+  - SQL 关键字、函数名、绑定变量等都大写
+
+#### 注释书写方法
+
+- 单行注释：`--注释内容` 或 `# 注释内容` （MySQL独有）
+- 多行注释: /* 注释内容 */
+
+#### DDL - 数据库操作
+
+* 查询
+  * 查询所有数据库 `SHOW DATABASES;`
+  * 查询当前数据库 `SELECT DATABASE();`
+* 创建
+  * `CREATE DATABASE [IF NOT EXISTS] 数据库名  [DEFAULT CHARSET 字符集] [COLLATE 排序规则];`
+* 删除
+  * `DROP DATABSE [IF EXISTS] 数据库名`
+* 使用
+  * `USE 数据库名`
+
+```shell
+mysql -u root -p # 进入mysql
+```
+
+```sql
+SHOW DATABASES; # 展示所有数据库
+CREATE DATABASE custom; # 创建一个名为custom的数据库
+USE custom; # 使用custom数据库
+SELECT DATABASE(); # 当前使用的是custom数据库
+```
+
+#### DDL - 表操作
+
+##### 创建表
+
+**在命令行下，可以在多行内编写一个SQL语句**
+
+```sql
+SHOW TABLES; # 查询当前数据库所有表
+DESC 表名; # 查询	表结构
+SHOW CREATE TABLE 表名; # 查询指定表的建表语句
+```
+
+```sql
+# 创建表
+CREATE TABLE custom(
+  param1 type1 [comment ''],
+  param2 type2 [comment ''],
+  param3 type3 [comment ''],
+  param4 type4 [comment '']
+)[comment '']
+```
+
+```sql
+# 创建一个tb_user表
+create table tb_user(
+    id int comment '编号',
+    name varchar(50) comment '姓名',
+    age int comment '年龄',
+    gender varchar(1) comment '性别'
+    ) comment '用户表';
+# 展示数据库中所有表
+show tables;
+# 查询表内所有字段
+desc tb_user;
+# 展示表的所有信息（包含字段注释、存储引擎、默认字符集、排序规则等信息）
+show create table tb_user;
+```
+
+案例 - 员工信息表
+
+```sql
+create table emp (
+  id int comment '编号',
+  workno varchar(10) comment '工号',
+  name varchar(10) comment '姓名',
+  gender char(1) comment '性别',
+  age tinyint unsigned comment '年龄',
+  idcard char(18) comment '身份证号',
+  entrydate date comment '入职时间'
+) comment '员工表';
+```
+
+创建成功后，输入`desc emp`查看
+
+```shell
+mysql> desc emp;
++-----------+------------------+------+-----+---------+-------+
+| Field     | Type             | Null | Key | Default | Extra |
++-----------+------------------+------+-----+---------+-------+
+| id        | int              | YES  |     | NULL    |       |
+| workno    | varchar(10)      | YES  |     | NULL    |       |
+| name      | varchar(10)      | YES  |     | NULL    |       |
+| gender    | char(1)          | YES  |     | NULL    |       |
+| age       | tinyint unsigned | YES  |     | NULL    |       |
+| idcard    | char(18)         | YES  |     | NULL    |       |
+| entrydate | date             | YES  |     | NULL    |       |
++-----------+------------------+------+-----+---------+-------+
+7 rows in set (0.00 sec)
+```
+
+##### 修改表
+
+```sql
+# 添加一个字段
+alter table 表名 add 字段名 类型(长度) [comment '']
+# 修改一个字段
+alter table 表名 modify 旧字段名 新字段名 类型(长度) [comment '']
+# 删除一个字段
+alter table 表名 drop 字段名
+# 修改表名
+alter table 表名 rename to 新表名
+```
+
+```sql
+alter table emp add nickname varchar(20) comment '昵称'
+alter table emp modify nickname username varchar(30)
+alter table emp drop username
+alter table emp rename to employee
+```
+
+### MySQL数据类型
+
+#### 数值类型
+
+在定义字段时，通过关键字`UNSIGNED`确定其`无符号 / 有符号`
+
+| 类型         | 大小                                     | 范围（有符号）                                               | 范围（无符号）                                               | 用途            |
+| :----------- | :--------------------------------------- | :----------------------------------------------------------- | :----------------------------------------------------------- | :-------------- |
+| TINYINT      | 1 Bytes                                  | (-128，127)                                                  | (0，255)                                                     | 小整数值        |
+| SMALLINT     | 2 Bytes                                  | (-32 768，32 767)                                            | (0，65 535)                                                  | 大整数值        |
+| MEDIUMINT    | 3 Bytes                                  | (-8 388 608，8 388 607)                                      | (0，16 777 215)                                              | 大整数值        |
+| INT或INTEGER | 4 Bytes                                  | (-2 147 483 648，2 147 483 647)                              | (0，4 294 967 295)                                           | 大整数值        |
+| BIGINT       | 8 Bytes                                  | (-9,223,372,036,854,775,808，9 223 372 036 854 775 807)      | (0，18 446 744 073 709 551 615)                              | 极大整数值      |
+| FLOAT        | 4 Bytes                                  | (-3.402 823 466 E+38，-1.175 494 351 E-38)，0，(1.175 494 351 E-38，3.402 823 466 351 E+38) | 0，(1.175 494 351 E-38，3.402 823 466 E+38)                  | 单精度 浮点数值 |
+| DOUBLE       | 8 Bytes                                  | (-1.797 693 134 862 315 7 E+308，-2.225 073 858 507 201 4 E-308)，0，(2.225 073 858 507 201 4 E-308，1.797 693 134 862 315 7 E+308) | 0，(2.225 073 858 507 201 4 E-308，1.797 693 134 862 315 7 E+308) | 双精度 浮点数值 |
+| DECIMAL      | 对DECIMAL(M,D) ，如果M>D，为M+2否则为D+2 | 依赖于M和D的值                                               | 依赖于M和D的值                                               | 小数值          |
+
+#### 字符串类型
+
+| 类型       | 大小                  | 用途                            |
+| :--------- | :-------------------- | :------------------------------ |
+| CHAR       | 0-255 bytes           | 定长字符串                      |
+| VARCHAR    | 0-65535 bytes         | 变长字符串                      |
+| TINYBLOB   | 0-255 bytes           | 不超过 255 个字符的二进制字符串 |
+| TINYTEXT   | 0-255 bytes           | 短文本字符串                    |
+| BLOB       | 0-65 535 bytes        | 二进制形式的长文本数据          |
+| TEXT       | 0-65 535 bytes        | 长文本数据                      |
+| MEDIUMBLOB | 0-16 777 215 bytes    | 二进制形式的中等长度文本数据    |
+| MEDIUMTEXT | 0-16 777 215 bytes    | 中等长度文本数据                |
+| LONGBLOB   | 0-4 294 967 295 bytes | 二进制形式的极大文本数据        |
+| LONGTEXT   | 0-4 294 967 295 bytes | 极大文本数据                    |
+
+**注意**：char(n) 和 varchar(n) 中括号中 n 代表字符的个数，并不代表字节个数，比如 CHAR(30) 就可以存储 30 个字符。
+
+CHAR 和 VARCHAR 类型类似，但它们保存和检索的方式不同。它们的最大长度和是否尾部空格被保留等方面也不同。在存储或检索过程中不进行大小写转换。**CHAR性能更优**
+
+BINARY 和 VARBINARY 类似于 CHAR 和 VARCHAR，不同的是它们包含二进制字符串而不要非二进制字符串。也就是说，它们包含字节字符串而不是字符字符串。这说明它们没有字符集，并且排序和比较基于列值字节的数值值。
+
+BLOB 是一个二进制大对象，可以容纳可变数量的数据。有 4 种 BLOB 类型：TINYBLOB、BLOB、MEDIUMBLOB 和 LONGBLOB。它们区别在于可容纳存储范围不同。
+
+有 4 种 TEXT 类型：TINYTEXT、TEXT、MEDIUMTEXT 和 LONGTEXT。对应的这 4 种 BLOB 类型，可存储的最大长度不同，可根据实际情况选择。
+
+#### 日期时间类型
+
+| 类型      | 大小 ( bytes) | 范围                                                         | 格式                | 用途                     |
+| :-------- | :------------ | :----------------------------------------------------------- | :------------------ | :----------------------- |
+| DATE      | 3             | 1000-01-01/9999-12-31                                        | YYYY-MM-DD          | 日期值                   |
+| TIME      | 3             | '-838:59:59'/'838:59:59'                                     | HH:MM:SS            | 时间值或持续时间         |
+| YEAR      | 1             | 1901/2155                                                    | YYYY                | 年份值                   |
+| DATETIME  | 8             | 1000-01-01 00:00:00/9999-12-31 23:59:59                      | YYYY-MM-DD HH:MM:SS | 混合日期和时间值         |
+| TIMESTAMP | 4             | 1970-01-01 00:00:00/2038结束时间是第 **2147483647** 秒，北京时间 **2038-1-19 11:14:07**，格林尼治时间 2038年1月19日 凌晨 03:14:07 | YYYYMMDD HHMMSS     | 混合日期和时间值，时间戳 |
+

docs/note/React Router.md

@@ -0,0 +1,484 @@
+# React Router
+
+## 了解ReactRouter
+
+三大框架都有各自的路由实现
+
+- Angular ngRouter
+- React ReactRouter
+- Vue VueRouter
+
+React Router在最近两年的版本更新较快，并且在最新的React Router6发生了较大的变化
+
+- Web开发只需要安装`react-router-dom`
+- `react-router`包含一些ReactNative的内容
+
+```bash
+npm i react-router-dom
+```
+
+从`react-router-dom`中导出`BrowserRouter` 或 `HashRouter`，二者分别对应history模式与哈希模式
+
+将App用二者之一包裹，即可启用路由：
+
+```tsx {5,10,12}
+// index.js
+import React, { StrictMode } from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import { HashRouter } from 'react-router-dom'
+
+const root = ReactDOM.createRoot(document.getElementById('root'))
+root.render(
+  <StrictMode>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </StrictMode>
+)
+```
+
+路由的本质是路径与组件的映射关系（`path <==> component`）
+
+ReactRouter不像VueRouter，它的路由映射关系是书写在组件中的：
+
+下面的例子中使用到了几个**组件**：`Routes` `Route` `Navigate` `NavLink`
+
+- `Routes` `Route`用来描述路径与组件的映射关系
+  - 通过为`path`和`element`传入路径和相对应的组件，将其包裹在`Routes`内即可完成路由的描述
+- `Navigate` 导航组件（在react-router5版本中是Redirect）
+  - 可以帮我们完成重定向操作，将想要重定向的路径传递给组件的`to`属性
+  - **当组件出现时，就会自动执行跳转**，属于功能性组件
+  - 当访问根路径`/`时就会自动跳转到`/home`页
+- `NavLink`用来实现路由的跳转
+  - 特殊组件，其`className` `style`这些属性都可以传递一个函数
+  - 可以从函数参数中解构出`isActive`属性来动态绑定样式（实际场景应用较少）
+
+```tsx
+// App.js
+import React, { PureComponent } from 'react'
+import { Routes, Route, Navigate, NavLink } from 'react-router-dom'
+import Home from './views/Home'
+import About from './views/About'
+import NotFound from './views/NotFound'
+
+export default class App extends PureComponent {
+  render() {
+    return (
+      <div>
+        <h1>App</h1>
+        <NavLink to="/home" className={({ isActive }) => (isActive ? 'link-active' : '')}>
+          Home
+        </NavLink>
+        <NavLink to="/about" style={({ isActive }) => ({ color: isActive ? 'red' : '' })}>
+          About
+        </NavLink>
+        <Routes>
+          <Route path="/" element={<Navigate to="/home" />}></Route>
+          <Route path="/home" element={<Home />}></Route>
+          <Route path="/about" element={<About />}></Route>
+          <Route path="*" element={<NotFound />}></Route>
+        </Routes>
+      </div>
+    )
+  }
+}
+```
+
+另外，这里还有一个小技巧，在最末一个路由指定一个path为`*`的路由匹配规则，可以为路由匹配添加fallback策略，当未匹配到其之前的任何域名时，会展示NotFound页面
+
+## 嵌套路由
+
+嵌套路由可以通过在`Route`组件内部嵌套新的`Route`组件来实现
+
+再通过`Outlet`组件来指定嵌套路由的占位元素（类似于VueRouter中的router-view）
+
+我们在之前的例子的基础上，为Home页面添加两个子页面HomeRanking和HomeRecommand
+
+同时，我们也应该为Home组件添加默认跳转，就像根路径默认重定向到Home组件那样，进入到Home组件后也应该默认重定向一个子页面中，这里我们仍然使用到了Navigate组件
+
+::: code-group
+```tsx [App.jsx ]
+// App.jsx
+import React, { PureComponent } from 'react'
+import { Routes, Route, Navigate, NavLink } from 'react-router-dom'
+import Home from './views/Home'
+import HomeRanking from './views/HomeRanking'
+import HomeRecommand from './views/HomeRecommand'
+
+export default class App extends PureComponent {
+  render() {
+    return (
+      <div>
+        <Routes>
+          <Route path="/home" element={<Home />}>
+            <Route path="/home" element={<Navigate to="/home/ranking" />}></Route>
+            <Route path="/home/ranking" element={<HomeRanking />}></Route>
+            <Route path="/home/recommand" element={<HomeRecommand />}></Route>
+          </Route>
+        </Routes>
+      </div>
+    )
+  }
+}
+```
+```tsx [Home.jsx]
+// Home.jsx
+import React, { PureComponent } from 'react'
+import { NavLink, Outlet } from 'react-router-dom'
+
+export default class Home extends PureComponent {
+  render() {
+    return (
+      <div>
+        <div>Home</div>
+        <NavLink to="/home/ranking">Ranking</NavLink>
+        <Outlet></Outlet>
+      </div>
+    )
+  }
+}
+```
+:::
+
+## 编程式导航（高阶组件）
+
+之前使用的ReactRouter提供的路由跳转的组件，无论是`Link`还是`NavLink`可定制化能力都比较差，无法实现“点击按钮后跳转路由”这样的需求，那么我们就需要通过编程式导航，使用JS来完成路由的跳转
+
+ReactRouter提供了编程式导航的API：`useNavigate`
+
+自ReactRouter6起，编程式导航的API不再支持ClassComponent，全面拥抱Hooks。
+
+我们将在后续的学习中开启Hooks的写法，那么目前如何在类组件中也能使用Hooks呢？答案是高阶组件
+
+封装一个高阶组件`withRouter`，经过高阶组件处理的类组件的props将会携带router对象，上面包含一些我们需要的属性和方法：
+
+::: code-group
+```tsx [withRouter.js]
+// withRouter.js
+import { useNavigate } from 'react-router-dom'
+
+export function withRouter(WrapperComponent) {
+  return (props) => {
+    const navigate = useNavigate()
+    const router = { navigate }
+    return <WrapperComponent {...props} router={router} />
+  }
+}
+```
+```tsx [Home.jsx]
+// Home.jsx
+import React, { PureComponent } from 'react'
+import { Outlet } from 'react-router-dom'
+import { withRouter } from '../hoc/withRouter'
+
+export default withRouter(
+  class Home extends PureComponent {
+    render() {
+      return (
+        <div>
+          <div>Home</div>
+          <button onClick={() => this.props.router.navigate('/home/ranking')}>Ranking</button>
+          <button onClick={() => this.props.router.navigate('/home/recommand')}>Recommand</button>
+          <Outlet></Outlet>
+        </div>
+      )
+    }
+  }
+)
+```
+:::
+
+我们使用`withRouter`高阶组件对Home组件进行了增强，可以通过编程式导航来实现二级路由跳转
+
+这里只是展示了编程式导航的用法和高阶组件的能力，目前还是尽可能使用Hooks写法编写新项目
+
+## 动态路由（路由传参）
+
+传递参数由两种方式：
+
+- 动态路由的方式
+- 查询字符串传递参数
+
+动态路由是指：路由中的**路径**信息并不会固定
+
+- 比如匹配规则为`/detail/:id`时，`/detail/123` `detail/888`都会被匹配上，并将`123/888`作为id参数传递
+- 其中`/detail/:id`这个匹配规则被称为动态路由
+
+动态路由常见于嵌套路由跳转，比如：从歌曲列表页面点击后跳转到歌曲详情页，可以通过路由传递歌曲的ID，访问到不同歌曲的详情页
+
+我们在之前的HomeRanking榜单中加入列表和点击跳转功能，并编写一个新的组件Detail来接收来自路由的参数
+
+同样地，`react-router-dom`为我们提供了从路由获取参数的API：`useParams`，它是一个Hooks，我们将它应用到之前编写的高级组件`withRouter`中
+
+- 在使用了`withRouter`的组件中，就可以通过`this.props.router.params.xxx`获取到当前路由中传递的参数
+- 使用动态匹配路由时，传递给Route组件的`path`属性为`:xxx`，这里是`/detail/:id`
+
+::: code-group
+```tsx [withRouter.js]
+// withRouter.js
+import { useNavigate, useParams } from 'react-router-dom'
+
+export function withRouter(WrapperComponent) {
+  return (props) => {
+    const navigate = useNavigate()
+    const params = useParams()
+    const router = { navigate, params }
+    return <WrapperComponent {...props} router={router} />
+  }
+}
+```
+```tsx [HomeRanking.jsx]
+// HomeRanking.jsx
+import React, { PureComponent } from 'react'
+import { withRouter } from '../hoc/withRouter'
+
+export default withRouter(
+  class HomeRanking extends PureComponent {
+    render() {
+      const list = Array.from(Array(10), (x, i) => ({
+        id: ++i,
+        name: `Music ${i}`
+      }))
+      return (
+        <div>
+          <div>HomeRanking</div>
+          <ul>
+            {list.map((item, index) => (
+              <li key={index} onClick={() => this.props.router.navigate(`/detail/${item.id}`)}>
+                {item.name}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )
+    }
+  }
+)
+```
+```tsx [Detail.jsx]
+// Detail.jsx
+import React, { PureComponent } from 'react'
+import { withRouter } from '../hoc/withRouter'
+
+export default withRouter(
+  class Detail extends PureComponent {
+    render() {
+      return (
+        <div>
+          <div>Detail</div>
+          Current Music ID: {this.props.router.params.id}
+        </div>
+      )
+    }
+  }
+)
+```
+:::
+
+## 查询字符串的参数
+
+之前传递的是路径参数，那么查询字符串参数应该如何获取？
+
+可以通过`useLocation`这个Hooks拿到当前地址详细信息：
+
+```tsx
+const location = useLocation()
+location.search // ?name=ziu&age=18
+```
+
+需要自行完成数据的解析，不太方便
+
+还有一个Hooks：`useSearchParams`，可以在获取到查询字符串信息的同时帮我们解析成`URLSearchParams`对象
+
+要从`URLSearchParams`类型的对象中取值，需要通过标准方法`get`
+
+```tsx
+const [ searchParams, setSearchParams ] = useSearchParams()
+searchParams.get('name') // 'ziu'
+searchParams.get('age') // 18
+```
+
+当然，我们在实际使用中也可以通过`Object.fromEntries`将它转为普通对象，这样我们使用`useSearchParams`来对之前编写的高阶组件`withRouter`做一次增强：
+
+```tsx {8,9}
+// withRouter.js
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
+
+export function withRouter(WrapperComponent) {
+  return (props) => {
+    const navigate = useNavigate()
+    const params = useParams()
+    const [searchParams] = useSearchParams()
+    const query = Object.fromEntries(searchParams)
+    const router = { navigate, params, query }
+    return <WrapperComponent {...props} router={router} />
+  }
+}
+```
+
+::: tip
+需要注意的是，这里的`useSearchParams`是一个Hooks的常见形态
+
+它返回一个数组，数组的首位为值，数组的次位为改变值的方法
+
+与对象解构不同的是，数组结构是对位解构：保证位置一致则值一致，命名随意
+
+而对象解构恰恰相反，不必保证位置，而需要保证命名一致
+:::
+
+## 路由的配置方式
+
+至此为止，路由的配置是耦合在`App.jsx`中的，我们可以将Routes这部分代码抽离出单独的组件，也可以通过配置的方式来完成路由映射关系的编写
+
+- 在ReactRouter5版本中，我们可以将路由的映射规则写为JS对象，需要引入第三方库`react-router-config`
+- 在ReactRouter6版本中，允许我们将其写为配置文件，不需要安装其他内容
+
+6版本为我们提供了一个API：`useRoutes`，将我们编写的配置文件传入此函数，可以将其转化为之前编写的组件结构，本质上也是一种语法糖
+
+需要注意的是，Hooks只能在函数式组件中使用，这里我们将App组件改用FunctionComponent书写了
+
+::: code-group
+```tsx [index.js]
+// router/index.js
+import { Navigate } from 'react-router-dom'
+import Home from '../views/Home'
+import HomeRanking from '../views/HomeRanking'
+import HomeRecommand from '../views/HomeRecommand'
+import About from '../views/About'
+import Detail from '../views/Detail'
+import NotFound from '../views/NotFound'
+
+export const routes = [
+  {
+    path: '/',
+    element: <Navigate to="/home" />
+  },
+  {
+    path: '/home',
+    element: <Home />,
+    children: [
+      {
+        path: '',
+        element: <Navigate to="/home/ranking" />
+      },
+      {
+        path: 'ranking',
+        element: <HomeRanking />
+      },
+      {
+        path: 'recommand',
+        element: <HomeRecommand />
+      }
+    ]
+  },
+  {
+    path: '/about',
+    element: <About />
+  },
+  {
+    path: '/detail/:id',
+    element: <Detail />
+  },
+  {
+    path: '*',
+    element: <NotFound />
+  }
+]
+```
+```tsx [App.jsx]
+import React from 'react'
+import { NavLink, useRoutes } from 'react-router-dom'
+import { routes } from './router'
+
+export default function App() {
+  return (
+    <div>
+      <h1>App</h1>
+      <NavLink to="/home" className={({ isActive }) => (isActive ? 'link-active' : '')}>
+        Home
+      </NavLink>
+      <NavLink to="/about" style={({ isActive }) => ({ color: isActive ? 'red' : '' })}>
+        About
+      </NavLink>
+      {useRoutes(routes)}
+    </div>
+  )
+}
+```
+:::
+
+## 懒加载
+
+针对某些场景的首屏优化，我们可以根据路由对代码进行分包，只有需要访问到某些页面时才从服务器请求对应的JS代码块
+
+可以使用`React.lazy(() => import( ... ))`对某些代码进行懒加载
+
+结合之前使用到的配置式路由映射规则，我们使用懒加载对代码进行分包
+
+```tsx {6,7,18,24}
+// router/index.js
+import { lazy } from 'react'
+// import HomeRecommand from '../views/HomeRecommand'
+// import About from '../views/About'
+
+const HomeRecommand = lazy(() => import('../views/HomeRecommand'))
+const About = lazy(() => import('../views/About'))
+
+export const routes = [
+  ...
+  {
+    path: '/home',
+    element: <Home />,
+    children: [
+      ...
+      {
+        path: 'recommand',
+        element: <HomeRecommand />
+      }
+    ]
+  },
+  {
+    path: '/about',
+    element: <About />
+  },
+  ...
+]
+```
+
+这时在终端执行`pnpm build`可以发现，构建产物为我们执行了分包，`About`和`HomeRecommand`这两个次级页面被打进了两个单独的包中
+
+> 在Vue中默认为我们完成了代码分包，第三方包的代码都被打包到了`vendors`中，业务代码放到了单独的JS文件中
+
+> 只有当我们访问到这些页面时，才会发起网络请求，请求这些次级页面的JS代码
+
+然而如果你在react-app的构建产物`index.html`开启本地预览服务器，会发现切换到对应页面后项目会crash（本地开发也会crash）
+
+```bash
+# 使用 serve 开启本地预览服务器
+pnpm add serve -g
+serve -s build # 将 build 作为根目录
+```
+
+这是因为React默认没有为异步组件做额外处理，我们需要使用`Suspense`组件来额外处理懒加载的组件
+
+```tsx
+// index.js
+import React, { StrictMode, Suspense } from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import { HashRouter } from 'react-router-dom'
+
+const root = ReactDOM.createRoot(document.getElementById('root'))
+root.render(
+  <StrictMode>
+    <HashRouter>
+      <Suspense fallback={<h2>Loading...</h2>}>
+        <App />
+      </Suspense>
+    </HashRouter>
+  </StrictMode>
+)
+```
+
+当根组件内部有组件处于异步加载状态时，都会在页面上展示`Loading...`而不是崩溃掉

docs/note/SSR.md

@@ -1,11 +1,4 @@
-# 服务端渲染(SSR)
+# 服务端渲染
-
-- 邂逅SPA和SSR
-- Node服务搭建
-- Vue3 + SSR搭建
-- SSR + Hydration 水合
-- Vue SSR + Router
-- Vue SSR + Pinia
 
 ## 邂逅SPA和SSR
 

docs/project/ClipboardManager/guide/index.md

@@ -2,7 +2,7 @@
 
 ## 快捷键一览
 
-- `Shift`进入多选模式 按下`空格`连续向下选择 支持**跨标签**合并复制/粘贴
+- 按下`空格`进入多选模式，连续向下选择 支持**跨标签**合并复制/粘贴
 - `鼠标左键`复制并粘贴 `鼠标右键`仅复制
 - `↑` `↓`选中历史记录 按下`↵`直接粘贴 `Ctrl+C`仅复制
 - `←` `→`切换分类 `Tab`键连续切换分类
@@ -30,10 +30,7 @@
 
 ### 2. 找到剪贴板数据文件所在目录
 
-进入插件设置页（右上角💡按钮），打开插件数据文件所在路径：
+进入设置页（顶部导航栏/齿轮图标），点击数据库路径这一项右侧的打开按钮
-
-![](../assets/gi1.png)
-![](../assets/gi2.png)
 
 ### 3. 将监听程序拷贝到目录中
 
@@ -53,7 +50,9 @@
 
 #### MacOS需要特殊配置
 
-`MacOS`拷贝完成后需要对插件进行签名&授权才能正常使用具体步骤如下
+针对`MacOS`系统，在将剪贴板监听程序拷贝到指定目录后，请在重启插件后，**进入设置页，检查监听程序是否生效**
+
+如果监听程序未生效，请尝试以下操作，对监听程序进行签名与授权：
 
 **1. 签名**
 

docs/project/ClipboardManager/index.md

@@ -5,13 +5,13 @@ navbar: false
 
 <script setup>
   import url from './assets/logo.png'
-  import img1 from './assets/11.png'
+  import img1 from './assets/img1.png'
-  import img2 from './assets/22.png'
+  import img2 from './assets/img2.png'
-  import img3 from './assets/33.png'
+  import img3 from './assets/img3.png'
-  import img4 from './assets/44.png'
+  import img4 from './assets/img4.png'
-  import img5 from './assets/55.png'
+  import img5 from './assets/img5.png'
-  import img6 from './assets/66.png'
+  import img6 from './assets/img6.png'
-  import img7 from './assets/77.png'
+  import img7 from './assets/img7.png'
   const titleInfo = {
     subTitle: '✨ 强大的剪贴板管理工具。',
     logo: url,
@@ -36,6 +36,10 @@ navbar: false
 
 <Title v-bind="titleInfo" />
 
+<br />
+
+<ImgSlider :imgSliderList="imgSliders" />
+
 ## 🔰 开始使用
 
 **首次安装需要设置“跟随主程序同时启动”**
@@ -44,19 +48,15 @@ navbar: false
 - ✅ 快速`收藏`/`转存`/`分词`/`复制`/`删除`/`打开文件&目标文件夹`
 - ✅ 功能按钮 定义**无限可能** `OCR识别` `百度搜索` `百度识图` `统计文本字数` `颜色管理` `识别图片中二维码` `上传到图床` `翻译`
 - ✅ `鼠标左键` 复制并粘贴 `鼠标右键` 仅复制
-- ✅ 按下`Shift`或`空格`进入**多选模式** 连续选择多条内容合并复制 支持**跨标签**合并复制/粘贴
+- ✅ 按下`空格`进入**多选模式** 连续选择多条内容合并复制 支持**跨标签**合并复制/粘贴
 - ✅ 键盘 `↑` `↓` 选中历史记录，按下回车直接粘贴
 - ✅ 键盘 `←` `→`切换分类 `Tab`键连续切换分类
 - ✅ 使用 `Ctrl/Alt+数字键` 快速粘贴
 - ✅ 插件内`输入任意字母或数字`自动聚焦搜索框 支持使用`空格`同时检索**多个关键词**
-- ✅ **智慧分词** 快速拖选指定内容 **超级粘贴** 直接转存为文件
+- ✅ **超级Markdown**合并剪贴板内容导出图文 **超级粘贴** 直接转存为文件 **智慧分词** 快速拖选指定内容
 - ✅ 优雅的界面动效与交互 跟随系统的深色模式
 - ✅ 优秀的剪贴板监听性能 强大的自定义功能按钮 自搭建多端同步 ···
 
-<ImgSlider :imgSliderList="imgSliders" />
-
---------
-
 ## 📚 安装方式
 
 - 官方插件市场安装

docs/project/ClipboardManager/log/index.md

@@ -1,5 +1,85 @@
 # 更新日志
 
+## v2.1.4
+
+`2023-05-08`
+
+- fix: 多选模式下不再隐藏导航栏
+- fix: 移除Shift进入多选模式的快捷键
+- chore: 更新依赖版本
+
+## v2.1.3
+
+`2023-04-12`
+
+- fix: 修正合并粘贴功能
+- fix: 合并图文导出时过滤掉文件内容
+- fix: 调整使用记录的存储组织方式
+- fix: 调整合并图文导出的插件关键字
+
+## v2.1.2
+
+`2023-04-09`
+
+- feat: 支持多选后批量删除
+- feat: 支持合并图文保存到超级Markdown
+- fix: 优化深色模式下多选条目背景色
+- fix: 修复图片过宽时溢出容器的问题
+
+## v2.1.1
+
+`2023-04-05`
+
+- feat: 支持在设置页一键清理所有图片
+- fix: 修正本地数据版本较新时被云端覆盖的问题
+
+## v2.1.0
+
+`2023-03-29`
+
+- feat: 收藏功能增强 支持为收藏内容添加备注
+- feat: 优化界面动效
+
+## v2.0.11
+
+`2023-03-01`
+
+- fix: 优化导航栏展示/隐藏逻辑
+- fix: 修复某些场景下ESC无法退出插件的问题
+
+## v2.0.10
+
+`2023-02-27`
+
+- fix: 修复轮询监听器执行错误导致插件白屏的问题
+
+## v2.0.9
+
+`2023-02-27`
+
+- feat: 添加键盘操作模式 屏蔽鼠标滑动 高效快捷
+- feat: 添加极简模式 隐藏页面不必要组件
+- feat: 顶部导航栏添加展示/隐藏动效
+- feat: 移除部分动画效果 让动作简洁有力
+- feat: 添加底部横幅提醒监听器状态
+- fix: 优化轮询监听器性能
+- fix: 修复某些情况下导致的白屏问题
+- fix: 优化代码执行细节 提升插件稳定性
+
+## v2.0.8
+
+`2023-02-24`
+
+- feat: 添加插件会员用户彩蛋
+- fix: 修复某些情况导致的插件白屏问题
+
+## v2.0.7
+
+`2023-02-24`
+
+- fix: 修复某些情况下插件主页渲染被阻塞导致的白屏问题
+- fix: 修复初始化时重复执行Webdav上传的问题
+
 ## v2.0.6
 
 `2023-02-22`

docs/project/ClipboardManager/statement/index.md

@@ -4,6 +4,43 @@ navbar: false
 
 # Q&A
 
+## 插件启动时报错/白屏
+
+请依次尝试以下方法：
+
+1. 完全退出插件后重新启动插件
+2. 重新启动 uTools
+3. 删除本地数据库文件（位于C盘用户根目录下 文件名为`_utools_clipboard_manager_storage`）
+4. 格式化 uTools 内的插件数据 (账号与数据/查看存储的文档数据)
+
+如果上述方法都无法解决你的问题，欢迎论坛回帖或加入QQ群 769115389 交流具体情况
+
+## 自动粘贴（自动上屏）功能失灵了
+
+目前已知：自动粘贴功能在 `Windows微信` 的聊天输入框内是不可用的。在其他场景下，此功能都能够正常使用
+
+## 插件内操作延迟、卡顿
+
+插件内复制/收藏/删除操作卡顿，可能是因为数据文件过大。
+
+当插件内的操作有明显延迟卡顿时，请尝试清理无用的图片记录，可以帮你显著地降低数据文件体积，提高插件响应速度
+
+## 剪贴板记录丢失
+
+一般是由于插件退出后台运行导致的, 插件需要保持后台运行才能记录剪贴板, 请检查:
+- 是否正确设置了插件`跟随主程序启动`
+- 是否手动清理或关闭了后台插件
+  - 在分离模式下关闭插件（由uTools的机制决定，分离模式下关闭窗口则退出插件）
+  - 使用了 `clear` 命令
+  - 在插件列表主动退出了插件
+- 插件在高频复制的场景下，可能会漏掉某些记录
+
+## 如何设置快捷键快速打开插件?
+
+uTools偏好设置 / 全局快捷键 / 将`Clipboard`设置为你想要的快捷键
+
+后续通过快捷键即可快速唤出插件
+
 ## 为什么偶尔CPU占用特别高? 为什么预览图片时插件卡顿?
 
 这是由`超级剪贴板`监听剪贴板内容更新的机制决定的，为了不漏数据，`超级剪贴板`的监听策略为每`300ms`读取一次剪贴板内容并与上一次读取到的内容作比较。如果剪贴板当前位置是一张大图片，那么插件会反复读取这张图片，导致大量计算被用在了无意义的读取与对比上。
@@ -24,23 +61,6 @@ navbar: false
 
 官方的剪贴板内容更新事件监听函数也是从一个二进制文件引出的，这个二进制文件跟随主程序启动，不受剪贴板插件的打开或关闭的影响。
 
-## 启动报错, 读取剪切板出错
-
-请尝试以下方法：
-
-1. 清空本地数据库文件
-2. 格式化uTools内的插件数据
-3. 完全退出插件后重启插件
-
-如果上述方法都无法解决你的问题，欢迎论坛回帖或加入QQ群交流具体情况
-
-## 为什么剪贴板记录会丢失?
-
-一般是由于插件退出后台运行导致的, 插件需要保持后台运行才能记录剪贴板, 请检查:
-- 是否正确设置了插件`跟随主程序启动`
-- 是否手动清理或关闭了后台插件 (在分离模式下关闭插件 使用clear命令 在插件列表退出插件)
-- 是否存在高频复制的操作 (高频复制可能会漏掉记录)
-
 ## 我对这个插件的安全性有担忧, 插件偷窃我的隐私怎么办?
 
 首先, 我写这个插件不是为了获取你的隐私的, 我对你的隐私没有兴趣, 这一点你完全可以放心;
@@ -49,10 +69,6 @@ navbar: false
 
 再其次, uTools大部分用户是程序员, 如果我真的在代码里藏了"毒", 那他们也有办法发现, 如果你真的对你的隐私十分关心, 可以选择从[开源仓库](https://githubcom/ZiuChen/ClipboardManager)下载代码自行构建
 
-## 我不懂代码, 我也不会构建, 但是我担心你的插件会窃取我的隐私
-
-我在贡献教程中详细说明了如何构建, JavaScript也并不是一门很高深的语言, 祝你能早日入门, 构建出安全的版本供自己使用, 学习的过程中遇到任何问题, 也欢迎随时与我交流 :D
-
 ## 开源版本和插件市场版本的区别?
 
 开源版本后续将只提供必要的BUG修复, 不再添加新功能

docs/project/ClipboardManager/vip/index.md

@@ -12,9 +12,9 @@
   - `WebDav数据多端同步` <Badge type="tip" text="已上线" />
   - `支持保存2000条历史记录` <Badge type="tip" text="已上线" />
   - `不限制历史记录过期时间` <Badge type="tip" text="已上线" />
-  - `文本内容增强, 按住Ctrl/Command点击文本/链接 可以直接预览/跳转` <Badge type="tip" text="已上线" />
+  - `文本/图片/文件预览增强, 按住Ctrl/Command点击 解锁更多操作` <Badge type="tip" text="已上线" />
-  - `图片预览增强, 按住Ctrl/Command点击图片 可以直接预览` <Badge type="tip" text="已上线" />
+  - `键盘操作模式 屏蔽鼠标 高效快捷` <Badge type="tip" text="已上线" />
-  - `文件预览增强, 按住Ctrl/Command点击文件 可以打开其所在文件夹` <Badge type="tip" text="已上线" />
+  - `简洁模式 隐藏页面中不必要的组件与元素` <Badge type="tip" text="已上线" />
   - `自定义分类排序` <Badge type="tip" text="已上线" />
   - `预览页代码高亮` <Badge type="tip" text="已上线" />
   - `关闭剪贴板图片记录` <Badge type="tip" text="已上线" />
@@ -29,10 +29,10 @@
 - **插件会员为大版本买断制，购买后即可享用当前版本(2.x)后续所有更新的会员内容**
 - 插件会员为虚拟商品，购买后不支持退款
 - 插件会员的价格是浮动的，随着功能和权益的增加，不排除涨价的可能
-- 购买插件会员后如果出现相关问题，欢迎[加入QQ群](https://jq.qq.com/?_wv=1027&k=fURjGVJr)反馈
+- 购买插件会员后若未能及时到账，请[加入QQ群](https://jq.qq.com/?_wv=1027&k=fURjGVJr)反馈
 :::
 
-插件会员定价`8元`，登录uTools账号后点击插件工具栏中个人中心图标进入购买页面
+插件会员定价`10元`，登录uTools账号后，点击插件导航栏中个人中心图标进入购买页面
 
 购买后可使用会员功能，不购买不影响基本功能的使用，希望大家多多理解，按需购买
 
@@ -63,7 +63,7 @@
 
 相关链接：
 
-- [Teracloud](https://teracloud.jp/en/) （国内可用 无限制）
+- [Infini Cloud](https://infini-cloud.net/en/) （国内可用 无限制）
 - [坚果云 WebDav](https://help.jianguoyun.com/?tag=webdav)（国内可用 限制调用次数）
 - [2022年还有哪些支持WebDAV的网盘？](https://www.zhihu.com/question/347182171)
 

docs/project/JSRunner/index.md

@@ -0,0 +1,42 @@
+---
+title: 超级JavaScript
+navbar: false
+---
+
+<script setup>
+  import url from './assets/logo.png'
+  import img1 from './assets/img1.png'
+  import img2 from './assets/img2.png'
+  import img3 from './assets/img3.png'
+  import img4 from './assets/img4.png'
+  const titleInfo = {
+    subTitle: '✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑',
+    logo: url,
+    linkList: [
+      { content: '🕶️ 在线体验', target: 'https://ziuchen.github.io/JSRunner' },
+      { content: '👨🏻‍💻 开源地址', target: 'https://github.com/ZiuChen/JSRunner' },
+      { content: '🚚 更新日志', target: './log/' },
+    ]
+  }
+  const imgSliders = [
+    { src: img1 },
+    { src: img2 },
+    { src: img3 },
+    { src: img4 },
+  ]
+</script>
+
+<Title v-bind="titleInfo" />
+
+<br />
+
+<ImgSlider :imgSliderList="imgSliders" />
+
+## 🔰 开始使用
+
+- 运行JavaScript代码 快速验证代码逻辑
+- 支持切换NodeJS/浏览器运行环境
+- `Ctrl/Command+R` 快速运行代码
+- 支持代码回溯 实时记录代码运行历史
+- 支持手动触发代码运行/实时运行代码
+- 支持顶层await 适配深色模式

docs/project/JSRunner/log/index.md

@@ -0,0 +1,38 @@
+# 更新日志
+
+## v1.0.4
+
+`2023-05-08`
+
+- feat: 支持顶层await调用
+- fix: 修正控制台日志循环引用输出
+- refactor: 调整NodeJS下代码执行实现
+- chore: 更新依赖版本
+
+## v1.0.3
+
+`2023-04-28`
+
+- feat: 开源仓库链接增加小红点
+- fix: 控制台支持展示`undefined/null/Symbol`
+- fix: 修复无法设置手动触发模式的bug
+
+## v1.0.2
+
+`2023-04-24`
+
+- fix: 修复NodeJS环境下无法导入第三方模块的问题
+
+## v1.0.1
+
+`2023-04-23`
+
+- feat: 关于页添加项目开源地址
+- fix: 即时执行模式下代码为空时忽略警告
+- fix: 调整历史回溯的数量限制
+
+## v1.0.0
+
+`2023-04-19`
+
+- 插件发布

docs/project/Markdown/index.md

@@ -0,0 +1,44 @@
+---
+title: 超级Markdown
+navbar: false
+---
+
+<script setup>
+  import url from './assets/logo.png'
+  import img1 from './assets/img1.png'
+  import img2 from './assets/img2.png'
+  import img3 from './assets/img3.png'
+  const titleInfo = {
+    subTitle: '✨ 强大的Markdown编辑器',
+    logo: url,
+    linkList: [
+      { content: '🕶️ 在线体验', target: 'https://ziuchen.github.io/SuperMarkdown' },
+      { content: '👨🏻‍💻 开源地址', target: 'https://github.com/ZiuChen/SuperMarkdown' },
+      { content: '🚀 快捷键一览', target: './shortcut/' },
+      { content: '🚚 更新日志', target: './log/' },
+    ]
+  }
+  const imgSliders = [
+    { src: img1 },
+    { src: img2 },
+    { src: img3 },
+  ]
+</script>
+
+<Title v-bind="titleInfo" />
+
+<br />
+
+<ImgSlider :imgSliderList="imgSliders" />
+
+## 🔰 开始使用
+
+- 由ByteMD强力驱动，功能丰富、性能强劲
+- 支持GFM扩展语法、脚注、Gemoji、KaTeX数学公式、Mermaid图表
+- 支持通过Frontmatter设置多种主题、代码高亮样式
+- 支持多级目录，目录支持无限嵌套
+- 支持通过粘贴/拖拽的方式批量上传图片、支持截取屏幕截图
+- 支持Markdown文件的批量导入、批量导出
+- 支持插件多开，同时编辑/参考多个文章
+- 支持实时同步预览、自动保存
+

docs/project/Markdown/log/index.md

@@ -0,0 +1,58 @@
+# 更新日志
+
+## v1.1.4
+
+`2023-04-23`
+
+- feat: 关于页增加插件开源地址
+
+## v1.1.3
+
+`2023-04-17`
+
+- feat: 优化侧栏操作逻辑
+- fix: 修正XML标签代码高亮异常的问题
+- fix: 修正侧栏滚动条样式
+
+## v1.1.2
+
+`2023-04-12`
+
+- feat: 调整合并图文导出关键字定义
+- feat: 新建文章自动在标题跟随日期
+- fix: 优化不同场景下编辑器聚焦行为
+
+## v1.1.1
+
+`2023-04-10`
+
+- fix: 调整插件描述
+- fix: 修复关键字跳转问题
+- fix: 移除页面切换动效
+
+## v1.1.0
+
+`2023-04-09`
+
+- feat: 支持通过关键字创建文章
+- feat: 支持从超级剪贴板多选合并创建文章
+- feat: 支持从文本/图片快速创建文章
+- feat: 支持批量导入Markdown文档
+- feat: 支持点击设置页关键字跳转
+- fix: 修复脚标点击跳转问题
+- fix: 修复部分场景下滚动条样式问题
+- fix: 修复部分场景下工具栏展示问题
+
+## v1.0.1
+
+`2023-04-05`
+
+- feat: 支持插件多开 同时编辑/参考多个文档
+- fix: 修复图片被滚动条遮挡的问题
+- fix: 修复部分场景下标题栏与侧栏的bug
+
+## v1.0.0
+
+`2023-04-01`
+
+- 插件发布

docs/project/Markdown/shortcut/index.md

@@ -0,0 +1,55 @@
+# 快捷键一览
+
+粗体 `Cmd-B`
+
+斜体 `Cmd-I`
+
+链接 `Cmd-K`
+
+图片 `Shift-Cmd-I`
+
+代码 `Shift-Cmd-K`
+
+代码块 `Shift-Cmd-C`
+
+无序列表 `Shift-Cmd-U`
+
+有序列表 `Shift-Cmd-O`
+
+## Markdown 语法
+
+一级标题 `# 标题`
+
+二级标题 `## 标题`
+
+三级标题 `### 标题`
+
+粗体 `**粗体文本**`
+
+斜体 `*斜体文本*`
+
+引用 `> 引用文本`
+
+链接 `[链接描述](url)`
+
+图片 `![alt](url "图片描述")`
+
+代码 ``代码``
+
+代码块 ` ```编程语言↵`
+
+无序列表 `- 项目`
+
+有序列表 `1. 项目`
+
+分割线 `---`
+
+删除线 `~~文本~~`
+
+任务列表 `- [ ] 待办事项`
+
+行内公式 `$公式$`
+
+块级公式 `$$↵公式↵$$`
+
+Mermaid图表 ` ```mermaid`

package.json

@@ -6,11 +6,11 @@
   },
   "devDependencies": {
     "@types/node": "^18.11.19",
-    "vitepress": "1.0.0-alpha.43",
+    "vitepress": "1.0.0-alpha.71",
     "vue": "^3.2.45"
   },
   "dependencies": {
     "medium-zoom": "^1.0.8",
-    "vue3-carousel": "^0.2.9"
+    "swiper": "^9.1.1"
   }
 }