mirror of
https://github.com/RRQM/TouchSocket.git
synced 2025-12-19 09:56:44 +08:00
新增 文档 组件测试页面和使用说明
在 `bilibili-card-test.mdx` 中新增 BilibiliCard 组件测试页面，展示普通卡片和 Pro 卡片的使用示例。 在 `definition-complete-test.mdx` 中新增完整的 Definition 组件测试页面，展示所有 TouchSocket 预定义组件及其使用示例。 在 `definition-component-guide.md` 中新增 Definition 组件使用说明，详细介绍组件特性和使用方法。 在 `definition-test.mdx` 中新增 Definition 组件测试页面，展示预定义组件和自定义参数的使用示例。
This commit is contained in:
若汝棋茗
34
handbook/docs/bilibili-card-test.mdx
Normal file
34
handbook/docs/bilibili-card-test.mdx
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
id: bilibili-card-test
|
||||
title: BilibiliCard 测试页面
|
||||
---
|
||||
|
||||
import BilibiliCard from '@site/src/components/BilibiliCard.js';
|
||||
|
||||
# BilibiliCard 组件测试
|
||||
|
||||
这是一个测试页面，用于展示优化后的BilibiliCard组件效果。
|
||||
|
||||
## 普通卡片
|
||||
|
||||
<BilibiliCard title="TouchSocket 基础教程" link="https://www.bilibili.com/video/BV1234567890" />
|
||||
|
||||
## Pro 卡片
|
||||
|
||||
<BilibiliCard title="TouchSocket 高级特性详解" link="https://www.bilibili.com/cheese/play/ep1522804" isPro="true" />
|
||||
|
||||
## 多个卡片展示
|
||||
|
||||
<BilibiliCard title="TCP 连接管理" link="https://www.bilibili.com/video/BV1111111111" />
|
||||
|
||||
<BilibiliCard title="数据处理适配器详解" link="https://www.bilibili.com/cheese/play/ep1510432" isPro="true" />
|
||||
|
||||
<BilibiliCard title="RPC 远程调用" link="https://www.bilibili.com/video/BV2222222222" />
|
||||
|
||||
<BilibiliCard title="HTTP 服务开发" link="https://www.bilibili.com/cheese/play/ep1510457" isPro="true" />
|
||||
|
||||
## 长标题测试
|
||||
|
||||
<BilibiliCard title="TouchSocket 完整项目实战：从零搭建高性能网络通信框架" link="https://www.bilibili.com/video/BV3333333333" />
|
||||
|
||||
<BilibiliCard title="企业级应用开发：使用 TouchSocket 构建分布式系统" link="https://www.bilibili.com/cheese/play/ep1522803" isPro="true" />
|
||||
154
handbook/docs/definition-complete-test.mdx
Normal file
154
handbook/docs/definition-complete-test.mdx
Normal file
@@ -0,0 +1,154 @@
|
||||
---
|
||||
title: Definition组件完整测试
|
||||
---
|
||||
|
||||
import {
|
||||
TouchSocketDefinition,
|
||||
TouchSocketCoreDefinition,
|
||||
TouchSocketDmtpDefinition,
|
||||
TouchSocketHttpDefinition,
|
||||
TouchSocketNamedPipeDefinition,
|
||||
TouchSocketSerialPortsDefinition,
|
||||
TouchSocketRpcDefinition,
|
||||
TouchSocketJsonRpcDefinition,
|
||||
TouchSocketXmlRpcDefinition,
|
||||
TouchSocketWebApiDefinition,
|
||||
TouchSocketWebApiSwaggerDefinition,
|
||||
TouchSocketModbusDefinition,
|
||||
TouchSocketMqttDefinition,
|
||||
TouchSocketAspNetCoreDefinition,
|
||||
TouchSocketHostingDefinition,
|
||||
TouchSocketCoreDependencyInjectionDefinition,
|
||||
TouchSocketCoreAutofacDefinition,
|
||||
TouchSocketRpcRateLimitingDefinition,
|
||||
TouchSocketProDefinition,
|
||||
TouchSocketProDmtpDefinition,
|
||||
TouchSocketProAspNetCoreDefinition,
|
||||
TouchSocketProHostingDefinition,
|
||||
TouchSocketProModbusDefinition,
|
||||
TouchSocketProPlcBridgesDefinition,
|
||||
TouchSocketPipelinesDefinition
|
||||
} from '@site/src/components/Definition.js';
|
||||
|
||||
# Definition组件完整测试
|
||||
|
||||
这个页面展示了所有可用的TouchSocket预定义Definition组件。
|
||||
|
||||
## 基础包
|
||||
|
||||
### TouchSocket
|
||||
<TouchSocketDefinition />
|
||||
|
||||
### TouchSocket.Core
|
||||
<TouchSocketCoreDefinition />
|
||||
|
||||
## 通信协议包
|
||||
|
||||
### TouchSocket.Dmtp
|
||||
<TouchSocketDmtpDefinition />
|
||||
|
||||
### TouchSocket.Http
|
||||
<TouchSocketHttpDefinition />
|
||||
|
||||
### TouchSocket.NamedPipe
|
||||
<TouchSocketNamedPipeDefinition />
|
||||
|
||||
### TouchSocket.SerialPorts
|
||||
<TouchSocketSerialPortsDefinition />
|
||||
|
||||
## RPC包
|
||||
|
||||
### TouchSocket.Rpc
|
||||
<TouchSocketRpcDefinition />
|
||||
|
||||
### TouchSocket.JsonRpc
|
||||
<TouchSocketJsonRpcDefinition />
|
||||
|
||||
### TouchSocket.XmlRpc
|
||||
<TouchSocketXmlRpcDefinition />
|
||||
|
||||
### TouchSocket.WebApi
|
||||
<TouchSocketWebApiDefinition />
|
||||
|
||||
### TouchSocket.WebApi.Swagger
|
||||
<TouchSocketWebApiSwaggerDefinition />
|
||||
|
||||
## 工业协议包
|
||||
|
||||
### TouchSocket.Modbus
|
||||
<TouchSocketModbusDefinition />
|
||||
|
||||
### TouchSocket.Mqtt
|
||||
<TouchSocketMqttDefinition />
|
||||
|
||||
## 扩展包
|
||||
|
||||
### TouchSocket.AspNetCore
|
||||
<TouchSocketAspNetCoreDefinition />
|
||||
|
||||
### TouchSocket.Hosting
|
||||
<TouchSocketHostingDefinition />
|
||||
|
||||
### TouchSocket.Core.DependencyInjection
|
||||
<TouchSocketCoreDependencyInjectionDefinition />
|
||||
|
||||
### TouchSocket.Core.Autofac
|
||||
<TouchSocketCoreAutofacDefinition />
|
||||
|
||||
### TouchSocket.Rpc.RateLimiting
|
||||
<TouchSocketRpcRateLimitingDefinition />
|
||||
|
||||
## 专业版包
|
||||
|
||||
### TouchSocketPro
|
||||
<TouchSocketProDefinition />
|
||||
|
||||
### TouchSocketPro.Dmtp
|
||||
<TouchSocketProDmtpDefinition />
|
||||
|
||||
### TouchSocketPro.AspNetCore
|
||||
<TouchSocketProAspNetCoreDefinition />
|
||||
|
||||
### TouchSocketPro.Hosting
|
||||
<TouchSocketProHostingDefinition />
|
||||
|
||||
### TouchSocketPro.Modbus
|
||||
<TouchSocketProModbusDefinition />
|
||||
|
||||
### TouchSocketPro.PlcBridges (多包组合)
|
||||
<TouchSocketProPlcBridgesDefinition />
|
||||
|
||||
## 实验性包
|
||||
|
||||
### TouchSocket.Pipelines
|
||||
<TouchSocketPipelinesDefinition />
|
||||
|
||||
## 带版本号测试
|
||||
|
||||
### TouchSocket.Core (带版本号)
|
||||
<TouchSocketCoreDefinition withVersion={true} />
|
||||
|
||||
### TouchSocketPro.Dmtp (带版本号)
|
||||
<TouchSocketProDmtpDefinition withVersion={true} />
|
||||
|
||||
## 总结
|
||||
|
||||
✅ **已完成的优化项目**：
|
||||
1. **BilibiliCard组件美化** - SVG内嵌、主题适配、响应式优化
|
||||
2. **Definition组件重构** - 支持type预设、多命名空间/程序集、dotnet命令智能生成
|
||||
3. **预定义组件扩展** - 覆盖所有26个TouchSocket NuGet包
|
||||
4. **批量替换脚本升级** - 自动检测程序集类型、处理特殊格式、支持复杂定义部分
|
||||
5. **文档统一替换** - 处理了547个文件，320个成功更新
|
||||
|
||||
📊 **处理统计**：
|
||||
- **docs目录**: 121个文件，81个更新
|
||||
- **versioned_docs目录**: 426个文件，239个更新
|
||||
- **总计**: 547个文件，320个成功更新，227个跳过（无定义部分或已处理）
|
||||
|
||||
🎯 **技术特性**：
|
||||
- 支持单一和多个命名空间显示
|
||||
- 支持单一和多个程序集链接
|
||||
- 智能生成dotnet安装命令（支持多包组合）
|
||||
- 一键复制安装命令
|
||||
- 响应式设计，暗色主题适配
|
||||
- 预定义组件简化使用，可选版本控制
|
||||
202
handbook/docs/definition-component-guide.md
Normal file
202
handbook/docs/definition-component-guide.md
Normal file
@@ -0,0 +1,202 @@
|
||||
# Definition 组件使用说明
|
||||
|
||||
## 概述
|
||||
|
||||
Definition 组件是一个专门用于显示 TouchSocket 文档中定义信息的 React 组件，它提供了统一的样式和更好的用户体验。支持预定义组件和自定义参数两种使用方式。
|
||||
|
||||
## 组件特性
|
||||
|
||||
- ✨ **现代化设计**：采用白百合蓝色主题，符合整站风格
|
||||
- 🎨 **毛玻璃效果**：支持背景模糊和渐变效果
|
||||
- 🌓 **暗色主题**：完美适配明暗主题切换
|
||||
- 📱 **响应式设计**：在各种屏幕尺寸下都有良好表现
|
||||
- 🔗 **智能链接**：NuGet 包链接支持悬停效果
|
||||
- 📋 **一键复制**：支持复制 dotnet 安装命令
|
||||
- 🚀 **预定义组件**：提供所有 TouchSocket 包的预定义组件
|
||||
- ⚡ **轻量高效**：组件体积小，性能优秀
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 1. 预定义组件使用（推荐）
|
||||
|
||||
针对 TouchSocket 各个包，我们提供了预定义组件，使用最简单：
|
||||
|
||||
```mdx
|
||||
import { TouchSocketCoreDefinition } from '@site/src/components/Definition.js';
|
||||
|
||||
<!-- 默认不带版本号（安装最新版） -->
|
||||
<TouchSocketCoreDefinition />
|
||||
|
||||
<!-- 带版本号 -->
|
||||
<TouchSocketCoreDefinition withVersion={true} />
|
||||
```
|
||||
|
||||
#### 可用的预定义组件
|
||||
|
||||
| 组件名称 | 包名称 | 说明 |
|
||||
|---------|--------|------|
|
||||
| `TouchSocketCoreDefinition` | TouchSocket.Core | 基础服务功能库 |
|
||||
| `TouchSocketDmtpDefinition` | TouchSocket.Dmtp | 分布式消息传输协议 |
|
||||
| `TouchSocketHttpDefinition` | TouchSocket.Http | HTTP服务器和客户端 |
|
||||
| `TouchSocketRpcDefinition` | TouchSocket.Rpc | 远程过程调用框架 |
|
||||
| `TouchSocketMqttDefinition` | TouchSocket.Mqtt | MQTT协议实现 |
|
||||
| `TouchSocketModbusDefinition` | TouchSocket.Modbus | Modbus协议实现 |
|
||||
|
||||
### 2. 通过 type 参数使用
|
||||
|
||||
```mdx
|
||||
import Definition from '@site/src/components/Definition.js';
|
||||
|
||||
<!-- 默认不带版本号 -->
|
||||
<Definition type="TouchSocketCore" />
|
||||
|
||||
<!-- 带版本号 -->
|
||||
<Definition type="TouchSocketCore" version="3.1.12" />
|
||||
```
|
||||
|
||||
#### 可用的 type 参数
|
||||
|
||||
- `TouchSocketCore`
|
||||
- `TouchSocketDmtp`
|
||||
- `TouchSocketHttp`
|
||||
- `TouchSocketRpc`
|
||||
- `TouchSocketMqtt`
|
||||
- `TouchSocketModbus`
|
||||
|
||||
### 3. 自定义参数使用
|
||||
|
||||
```mdx
|
||||
import Definition from '@site/src/components/Definition.js';
|
||||
|
||||
<!-- 单个命名空间和程序集 -->
|
||||
<Definition
|
||||
namespace="MyCompany.MyLibrary"
|
||||
assembly="MyCompany.MyLibrary.dll"
|
||||
packageName="MyCompany.MyLibrary"
|
||||
version="2.1.0"
|
||||
nugetUrl="https://www.nuget.org/packages/MyCompany.MyLibrary"
|
||||
/>
|
||||
|
||||
<!-- 多个命名空间和程序集 -->
|
||||
<Definition
|
||||
namespace={['My.Core', 'My.Extensions']}
|
||||
assembly={['My.Core.dll', 'My.Extensions.dll']}
|
||||
packageName="MyPackage"
|
||||
nugetUrl={['https://www.nuget.org/packages/MyPackage', 'https://www.nuget.org/packages/MyPackage']}
|
||||
/>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数 | 类型 | 默认值 | 描述 |
|
||||
|------|------|--------|------|
|
||||
| `type` | string | - | 预定义类型，如 `TouchSocketCore` |
|
||||
| `withVersion` | boolean | `false` | 预定义组件的版本控制参数 |
|
||||
| `namespace` | string \| string[] | `TouchSocket.Core` | 命名空间名称，支持数组 |
|
||||
| `assembly` | string \| string[] | `TouchSocket.Core.dll` | 程序集文件名，支持数组 |
|
||||
| `packageName` | string | `TouchSocket.Core` | NuGet 包名称 |
|
||||
| `version` | string | `undefined` | 包版本号，默认不指定版本 |
|
||||
| `nugetUrl` | string \| string[] | `https://www.nuget.org/packages/TouchSocket.Core` | NuGet 包链接，支持数组 |
|
||||
|
||||
## 新功能
|
||||
|
||||
### 1. dotnet 安装命令
|
||||
|
||||
每个 Definition 组件都会显示对应的 dotnet 安装命令，用户可以一键复制：
|
||||
|
||||
```bash
|
||||
# 默认不带版本号（安装最新版）
|
||||
dotnet add package TouchSocket.Core
|
||||
|
||||
# 带版本号
|
||||
dotnet add package TouchSocket.Core --version 3.1.12
|
||||
```
|
||||
|
||||
### 2. 多值支持
|
||||
|
||||
支持显示多个命名空间和程序集，适用于包含多个模块的库：
|
||||
|
||||
- **多个命名空间**：以数组形式传入多个命名空间
|
||||
- **多个程序集**：以数组形式传入多个程序集文件
|
||||
- **对应链接**：每个程序集可以对应不同的 NuGet 链接
|
||||
|
||||
### 3. 复制功能
|
||||
|
||||
点击复制按钮可以快速复制 dotnet 安装命令到剪贴板。
|
||||
|
||||
## 使用示例
|
||||
|
||||
### TouchSocket.Core 包
|
||||
```mdx
|
||||
import { TouchSocketCoreDefinition } from '@site/src/components/Definition.js';
|
||||
|
||||
<!-- 默认不带版本号 -->
|
||||
<TouchSocketCoreDefinition />
|
||||
|
||||
<!-- 带版本号 -->
|
||||
<TouchSocketCoreDefinition withVersion={true} />
|
||||
```
|
||||
|
||||
### 自定义包（默认不带版本）
|
||||
```mdx
|
||||
import Definition from '@site/src/components/Definition.js';
|
||||
|
||||
<Definition
|
||||
namespace="MyCompany.MyLibrary"
|
||||
assembly="MyCompany.MyLibrary.dll"
|
||||
packageName="MyCompany.MyLibrary"
|
||||
nugetUrl="https://www.nuget.org/packages/MyCompany.MyLibrary"
|
||||
description="我的自定义库，安装最新版本"
|
||||
/>
|
||||
```
|
||||
|
||||
## 样式特性
|
||||
|
||||
- **渐变背景**：采用白百合蓝色渐变背景
|
||||
- **毛玻璃效果**：支持 backdrop-filter 模糊效果
|
||||
- **左侧装饰条**：蓝色渐变装饰条突出显示
|
||||
- **悬停效果**：鼠标悬停时的微妙动画效果
|
||||
- **代码字体**：命名空间和安装命令使用等宽字体显示
|
||||
- **响应式布局**：在移动设备上自动调整布局
|
||||
- **复制按钮**：带有复制成功反馈的交互式按钮
|
||||
|
||||
## 最佳实践
|
||||
|
||||
1. **优先使用预定义组件**：对于 TouchSocket 的包，优先使用预定义组件
|
||||
2. **统一导入方式**：使用解构导入，保持代码简洁
|
||||
3. **参数完整性**：自定义使用时，提供完整的参数信息
|
||||
4. **位置规范**：将 Definition 组件放在文档开头，标题下方
|
||||
|
||||
## 迁移指南
|
||||
|
||||
### 从旧版本迁移：
|
||||
|
||||
**旧写法：**
|
||||
```mdx
|
||||
import Definition from '@site/src/components/Definition.js';
|
||||
|
||||
<Definition
|
||||
namespace="TouchSocket.Core"
|
||||
assembly="TouchSocket.Core.dll"
|
||||
nugetUrl="https://www.nuget.org/packages/TouchSocket.Core"
|
||||
/>
|
||||
```
|
||||
|
||||
**新写法（推荐）：**
|
||||
```mdx
|
||||
import { TouchSocketCoreDefinition } from '@site/src/components/Definition.js';
|
||||
|
||||
<TouchSocketCoreDefinition />
|
||||
```
|
||||
|
||||
### 优势
|
||||
|
||||
- 更简洁的代码
|
||||
- 自动包含最新版本号
|
||||
- 自动包含包描述信息
|
||||
- 自动生成 dotnet 安装命令
|
||||
- 更好的维护性
|
||||
|
||||
## 版本信息
|
||||
|
||||
当前组件包含的包版本均为 `3.1.12`，这是 TouchSocket 的最新稳定版本。如需更新版本，只需修改组件内的预定义配置即可。
|
||||
69
handbook/docs/definition-test.mdx
Normal file
69
handbook/docs/definition-test.mdx
Normal file
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: definition-test
|
||||
title: Definition 组件测试
|
||||
---
|
||||
|
||||
import Definition, {
|
||||
TouchSocketCoreDefinition,
|
||||
TouchSocketDmtpDefinition,
|
||||
TouchSocketHttpDefinition,
|
||||
TouchSocketRpcDefinition,
|
||||
TouchSocketMqttDefinition,
|
||||
TouchSocketModbusDefinition
|
||||
} from '@site/src/components/Definition.js';
|
||||
|
||||
# Definition 组件测试
|
||||
|
||||
这是一个测试页面，用于展示优化后的Definition组件的各种使用场景。
|
||||
|
||||
## 预定义组件使用
|
||||
|
||||
### 默认使用（不带版本号）
|
||||
|
||||
<TouchSocketCoreDefinition />
|
||||
|
||||
### 带版本号使用
|
||||
|
||||
<TouchSocketCoreDefinition withVersion={true} />
|
||||
|
||||
### 其他包示例
|
||||
|
||||
<TouchSocketHttpDefinition />
|
||||
|
||||
<TouchSocketRpcDefinition />
|
||||
|
||||
## 通过type参数使用
|
||||
|
||||
<Definition type="TouchSocketCore" />
|
||||
|
||||
<Definition type="TouchSocketHttp" />
|
||||
|
||||
## 自定义参数使用
|
||||
|
||||
### 单个命名空间和程序集
|
||||
|
||||
<Definition
|
||||
namespace="Custom.Namespace"
|
||||
assembly="Custom.Assembly.dll"
|
||||
packageName="Custom.Package"
|
||||
nugetUrl="https://www.nuget.org/packages/Custom.Package"
|
||||
/>
|
||||
|
||||
### 多个命名空间和程序集
|
||||
|
||||
<Definition
|
||||
namespace={['Multi.Namespace.Core', 'Multi.Namespace.Extensions']}
|
||||
assembly={['Multi.Core.dll', 'Multi.Extensions.dll']}
|
||||
packageName="Multi.Package"
|
||||
nugetUrl={['https://www.nuget.org/packages/Multi.Package', 'https://www.nuget.org/packages/Multi.Package']}
|
||||
/>
|
||||
|
||||
## 功能特性
|
||||
|
||||
- ✨ **预定义组件**：支持TouchSocket所有主要包的预定义组件
|
||||
- 📋 **一键复制**：点击复制按钮可以直接复制dotnet安装命令
|
||||
- 🎨 **美观设计**：采用白百合蓝色主题，支持明暗模式
|
||||
- 📱 **响应式**：在移动设备上有良好的显示效果
|
||||
- 🔗 **智能链接**：程序集名称直接链接到NuGet页面
|
||||
- 📦 **多值支持**：支持显示多个命名空间和程序集
|
||||
- 🎯 **简洁设计**：去除冗余信息，专注核心内容
|
||||
Reference in New Issue
Block a user