Skip to content

Commit 0c2cf67

Browse files
SonyLeoSonyLeo
authored
docs: restructure documentation with improved content formatting (#260)
1 parent 61c2cb4 commit 0c2cf67

20 files changed

Lines changed: 1355 additions & 1382 deletions

‎docs/.vitepress/config.mts‎

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,48 @@ const prodAlias = {
1818
'@opentiny/tiny-robot-style': '@opentiny/tiny-robot/dist/style.css',
1919
}
2020

21+
// 定义共享的侧边栏配置
22+
const sharedSidebarItems = [
23+
{
24+
text: '指南',
25+
base: '/guide/',
26+
items: [
27+
{ text: '快速开始', link: 'quick-start' },
28+
{ text: '主题配置', link: 'theme-config' },
29+
{ text: '更新日志', link: 'update-log' },
30+
],
31+
},
32+
{
33+
text: '组件',
34+
base: '/components/',
35+
items: [
36+
{ text: 'Container 容器', link: 'container' },
37+
{ text: 'Bubble 气泡', link: 'bubble' },
38+
{ text: 'Sender 消息输入框', link: 'sender' },
39+
{ text: 'Prompts 提示集', link: 'prompts' },
40+
{ text: 'Welcome 欢迎', link: 'welcome' },
41+
{ text: 'Feedback 气泡反馈', link: 'feedback' },
42+
{ text: 'History 历史', link: 'history' },
43+
{ text: 'DropdownMenu 下拉菜单', link: 'dropdown-menu' },
44+
{ text: 'SuggestionPopover 建议弹出框', link: 'suggestion-popover' },
45+
{ text: 'SuggestionPills 建议按钮组', link: 'suggestion-pills' },
46+
{ text: 'DragOverlay 拖拽浮层', link: 'drag-overlay' },
47+
{ text: 'Attachments 附件卡片', link: 'attachments' },
48+
{ text: 'McpServerPicker 插件选择器', link: 'mcp-server-picker' },
49+
{ text: 'Theme 主题', link: 'theme' },
50+
],
51+
},
52+
{
53+
text: '工具',
54+
base: '/tools/',
55+
items: [
56+
{ text: 'AI模型交互工具类', link: 'ai-client' },
57+
{ text: '消息数据管理', link: 'message' },
58+
{ text: '会话数据管理', link: 'conversation' },
59+
],
60+
},
61+
]
62+
2163
// https://vitepress.dev/reference/site-config
2264
export default defineConfig({
2365
title: 'TinyRobot',
@@ -57,52 +99,12 @@ export default defineConfig({
5799
siteTitle: 'TinyRobot',
58100
nav: [
59101
{ text: '指南', link: '/guide/quick-start', activeMatch: '/guide/' },
60-
{ text: '组件', link: '/components/bubble', activeMatch: '/components/' },
61-
{ text: '工具', link: '/tools/ai-client', activeMatch: '/tools/' },
62102
{ text: '演示', link: '/examples/assistant', activeMatch: '/examples/' },
63-
{ text: `v${version}`, link: '/releases/update-log', activeMatch: '/releases/' },
64103
],
65104
sidebar: {
66-
'/guide/': [
67-
{
68-
text: '指南',
69-
base: '/guide/',
70-
items: [{ text: '快速开始', link: 'quick-start' }],
71-
},
72-
],
73-
'/components/': [
74-
{
75-
text: '组件',
76-
base: '/components/',
77-
items: [
78-
{ text: 'Container 容器', link: 'container' },
79-
{ text: 'Bubble 气泡', link: 'bubble' },
80-
{ text: 'Sender 消息输入框', link: 'sender' },
81-
{ text: 'Prompts 提示集', link: 'prompts' },
82-
{ text: 'Welcome 欢迎', link: 'welcome' },
83-
{ text: 'Feedback 气泡反馈', link: 'feedback' },
84-
{ text: 'History 历史', link: 'history' },
85-
{ text: 'DropdownMenu 下拉菜单', link: 'dropdown-menu' },
86-
{ text: 'SuggestionPopover 建议弹出框', link: 'suggestion-popover' },
87-
{ text: 'SuggestionPills 建议按钮组', link: 'suggestion-pills' },
88-
{ text: 'DragOverlay 拖拽浮层', link: 'drag-overlay' },
89-
{ text: 'Attachments 附件卡片', link: 'attachments' },
90-
{ text: 'McpServerPicker 插件选择器', link: 'mcp-server-picker' },
91-
{ text: 'Theme 主题', link: 'theme' },
92-
],
93-
},
94-
],
95-
'/tools/': [
96-
{
97-
text: '工具',
98-
base: '/tools/',
99-
items: [
100-
{ text: 'AI模型交互工具类', link: 'ai-client' },
101-
{ text: '消息数据管理', link: 'message' },
102-
{ text: '会话数据管理', link: 'conversation' },
103-
],
104-
},
105-
],
105+
'/guide/': sharedSidebarItems,
106+
'/components/': sharedSidebarItems,
107+
'/tools/': sharedSidebarItems,
106108
'/examples/': [
107109
{
108110
text: '演示',

‎docs/demos/sender/AutoSize.vue‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,28 @@
11
<template>
2-
<div style="display: flex; flex-direction: column; gap: 20px">
3-
<tr-sender mode="multiple" :autoSize="true" placeholder="autosize 为 true" />
2+
<div style="display: flex; flex-direction: column; gap: 16px">
3+
<div style="display: flex; align-items: center; gap: 12px">
4+
<span style="font-weight: 500">配置：</span>
5+
<label style="display: flex; align-items: center; gap: 4px; cursor: pointer">
6+
<input type="radio" value="true" v-model="config" style="cursor: pointer" />
7+
<span>自动调整</span>
8+
</label>
9+
<label style="display: flex; align-items: center; gap: 4px; cursor: pointer">
10+
<input type="radio" value="custom" v-model="config" style="cursor: pointer" />
11+
<span>限制行数 (2-4行)</span>
12+
</label>
13+
</div>
414
<tr-sender
15+
:key="config"
516
mode="multiple"
6-
:autoSize="{ minRows: 2, maxRows: 3 }"
7-
placeholder="autosize 为 {minRows: 2, maxRows: 3}"
17+
:autoSize="config === 'true' ? true : { minRows: 2, maxRows: 4 }"
18+
:placeholder="config === 'true' ? '高度随内容自动调整' : '最小2行，最大4行，输入多行文本查看效果'"
819
/>
920
</div>
1021
</template>
1122

1223
<script setup lang="ts">
24+
import { ref } from 'vue'
1325
import { TrSender } from '@opentiny/tiny-robot'
26+
27+
const config = ref<'true' | 'custom'>('true')
1428
</script>

‎docs/demos/sender/CompactMode.vue‎

Lines changed: 12 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,20 @@
11
<template>
2-
<div class="demo-container">
3-
<h3>紧凑模式配置演示</h3>
4-
<p>通过添加 <code>tr-sender-compact</code> CSS类可以启用紧凑样式，适用于空间受限的场景。</p>
5-
6-
<div class="mode-section">
7-
<h4>默认样式（宽松模式）</h4>
8-
<p>适用于独立页面或全屏对话场景，具有较大的字体（16px）、宽松的内边距、大圆角（26px）和大发送图标（36px）。</p>
9-
10-
<div class="example-group">
11-
<h5>单行模式</h5>
12-
<tr-sender mode="single" placeholder="默认单行模式..." style="margin-bottom: 10px" />
13-
14-
<h5>多行模式</h5>
2+
<div style="display: flex; gap: 24px; flex-wrap: wrap">
3+
<div style="flex: 1; min-width: 300px">
4+
<h4 style="margin: 0 0 12px 0; color: #666; font-size: 14px; font-weight: 500">默认样式（宽松模式）</h4>
5+
<div style="display: flex; flex-direction: column; gap: 12px">
6+
<tr-sender mode="single" placeholder="默认单行模式..." />
157
<tr-sender mode="multiple" placeholder="默认多行模式..." :showWordLimit="true" :maxLength="200" />
168
</div>
179
</div>
1810

19-
<div class="mode-section">
20-
<h4>紧凑模式</h4>
21-
<p>适用于侧边栏、抽屉或紧凑界面，具有较小的字体（14px）、紧凑的内边距、小圆角（24px）和小发送图标（32px）。</p>
22-
23-
<div class="example-group compact-container">
24-
<h5>单行模式</h5>
25-
<tr-sender class="tr-sender-compact" mode="single" placeholder="紧凑单行模式..." style="margin-bottom: 10px" />
26-
27-
<h5>多行模式</h5>
11+
<div style="flex: 1; min-width: 300px">
12+
<h4 style="margin: 0 0 12px 0; color: #666; font-size: 14px; font-weight: 500">
13+
紧凑模式（添加
14+
<code style="background: #f0f0f0; padding: 2px 6px; border-radius: 3px">tr-sender-compact</code> 类）
15+
</h4>
16+
<div style="display: flex; flex-direction: column; gap: 12px">
17+
<tr-sender class="tr-sender-compact" mode="single" placeholder="紧凑单行模式..." />
2818
<tr-sender
2919
class="tr-sender-compact"
3020
mode="multiple"
@@ -34,124 +24,9 @@
3424
/>
3525
</div>
3626
</div>
37-
38-
<div class="comparison-section">
39-
<h4>样式对比</h4>
40-
<div class="comparison-grid">
41-
<div class="comparison-item">
42-
<h5>默认样式</h5>
43-
<tr-sender mode="single" placeholder="默认样式示例" />
44-
</div>
45-
<div class="comparison-item">
46-
<h5>紧凑样式</h5>
47-
<tr-sender class="tr-sender-compact" mode="single" placeholder="紧凑样式示例" />
48-
</div>
49-
</div>
50-
</div>
5127
</div>
5228
</template>
5329

5430
<script setup lang="ts">
5531
import { TrSender } from '@opentiny/tiny-robot'
5632
</script>
57-
58-
<style scoped>
59-
.demo-container {
60-
padding: 20px;
61-
display: flex;
62-
flex-direction: column;
63-
gap: 24px;
64-
}
65-
66-
.mode-section {
67-
border: 1px solid #e6e6e6;
68-
border-radius: 8px;
69-
padding: 16px;
70-
background: #fafafa;
71-
}
72-
73-
.example-group {
74-
margin-top: 12px;
75-
}
76-
77-
.compact-container {
78-
max-width: 300px;
79-
background: #f5f5f5;
80-
border: 1px solid #ddd;
81-
border-radius: 8px;
82-
padding: 12px;
83-
}
84-
85-
.custom-vars-section {
86-
border: 1px solid #1476ff;
87-
border-radius: 8px;
88-
padding: 16px;
89-
background: rgba(20, 118, 255, 0.02);
90-
}
91-
92-
.custom-example {
93-
margin: 12px 0;
94-
max-width: 280px;
95-
}
96-
97-
.comparison-section {
98-
border: 1px solid #52c41a;
99-
border-radius: 8px;
100-
padding: 16px;
101-
background: rgba(82, 196, 26, 0.02);
102-
}
103-
104-
.comparison-grid {
105-
display: grid;
106-
grid-template-columns: 1fr 1fr;
107-
gap: 20px;
108-
margin-top: 12px;
109-
}
110-
111-
.comparison-item {
112-
padding: 12px;
113-
border: 1px solid #d9d9d9;
114-
border-radius: 6px;
115-
background: white;
116-
}
117-
118-
.code-example {
119-
background: #f8f8f8;
120-
border: 1px solid #e0e0e0;
121-
border-radius: 4px;
122-
padding: 12px;
123-
font-size: 12px;
124-
color: #333;
125-
overflow-x: auto;
126-
}
127-
128-
h3 {
129-
color: #333;
130-
margin-bottom: 8px;
131-
}
132-
133-
h4 {
134-
color: #1476ff;
135-
margin-bottom: 8px;
136-
}
137-
138-
h5 {
139-
color: #666;
140-
font-size: 14px;
141-
margin: 8px 0 4px 0;
142-
}
143-
144-
p {
145-
color: #666;
146-
font-size: 14px;
147-
line-height: 1.5;
148-
margin-bottom: 8px;
149-
}
150-
151-
code {
152-
background: #f0f0f0;
153-
padding: 2px 4px;
154-
border-radius: 2px;
155-
font-size: 12px;
156-
}
157-
</style>

0 commit comments

Comments
 (0)