Skip to content

Commit 86b1a15

Browse files
author
catlog22
committed
feat(frontend): optimize help page layout and add i18n support
- Add Chinese and English translations for help page - Fix button overlapping issues with responsive layouts - Improve icon and button positioning with flexbox - Add proper spacing and breakpoints for mobile/tablet/desktop - Make cards consistent with flexbox layout - Ensure all buttons have proper whitespace-nowrap - Use flex-shrink-0 for icons to prevent squashing
1 parent 39b80b3 commit 86b1a15

5 files changed

Lines changed: 158 additions & 81 deletions

File tree

‎ccw/frontend/src/locales/en/help.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"title": "Help Center",
3+
"description": "Get complete documentation, guides, and support resources for CCW platform",
4+
"fullDocs": "Full Docs",
5+
"commandsOverview": {
6+
"title": "Commands Overview",
7+
"description": "Master the visual workflow editor with drag-and-drop flows"
8+
},
9+
"workflowsOverview": {
10+
"title": "Workflows Overview",
11+
"description": "Browse 40+ commands across workflow, issue, CLI, and memory categories"
12+
},
13+
"quickStart": {
14+
"title": "Quick Start",
15+
"description": "Get up and running with CCW in minutes",
16+
"guide": "Getting Started Guide",
17+
"faq": "Frequently Asked Questions"
18+
},
19+
"getStarted": "Get Started",
20+
"viewAll": "View All",
21+
"searchDocs": {
22+
"title": "Search Documentation",
23+
"description": "Find detailed documentation and examples for specific topics or commands",
24+
"button": "Search Docs"
25+
},
26+
"support": {
27+
"title": "Need Help?",
28+
"description": "Access our documentation, tutorials, and community support resources",
29+
"documentation": "Documentation",
30+
"tutorials": "Tutorials"
31+
}
32+
}

‎ccw/frontend/src/locales/en/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import graph from './graph.json';
3636
import notification from './notification.json';
3737
import notifications from './notifications.json';
3838
import workspace from './workspace.json';
39+
import help from './help.json';
3940

4041
/**
4142
* Flattens nested JSON object to dot-separated keys
@@ -95,4 +96,5 @@ export default {
9596
...flattenMessages(notification, 'notificationPanel'),
9697
...flattenMessages(notifications, 'notifications'),
9798
...flattenMessages(workspace, 'workspace'),
99+
...flattenMessages(help, 'help'),
98100
} as Record<string, string>;

‎ccw/frontend/src/locales/zh/help.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"title": "帮助中心",
3+
"description": "获取 CCW 平台的完整文档、指南和支持资源",
4+
"fullDocs": "完整文档",
5+
"commandsOverview": {
6+
"title": "命令概览",
7+
"description": "了解可视化拖放式工作流编辑器"
8+
},
9+
"workflowsOverview": {
10+
"title": "工作流概览",
11+
"description": "浏览 40+ 命令，适用于工作流、问题、CLI 和内存"
12+
},
13+
"quickStart": {
14+
"title": "快速开始",
15+
"description": "在几分钟内上手 CCW",
16+
"guide": "入门指南",
17+
"faq": "常见问题"
18+
},
19+
"getStarted": "开始使用",
20+
"viewAll": "查看全部",
21+
"searchDocs": {
22+
"title": "搜索文档",
23+
"description": "查找特定主题或命令的详细文档和示例",
24+
"button": "搜索文档"
25+
},
26+
"support": {
27+
"title": "需要帮助？",
28+
"description": "访问我们的文档、教程和社区支持资源",
29+
"documentation": "文档",
30+
"tutorials": "教程"
31+
}
32+
}

‎ccw/frontend/src/locales/zh/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import graph from './graph.json';
3636
import notification from './notification.json';
3737
import notifications from './notifications.json';
3838
import workspace from './workspace.json';
39+
import help from './help.json';
3940

4041
/**
4142
* Flattens nested JSON object to dot-separated keys
@@ -95,4 +96,5 @@ export default {
9596
...flattenMessages(notification, 'notificationPanel'),
9697
...flattenMessages(notifications, 'notifications'),
9798
...flattenMessages(workspace, 'workspace'),
99+
...flattenMessages(help, 'help'),
98100
} as Record<string, string>;

‎ccw/frontend/src/pages/HelpPage.tsx‎

Lines changed: 90 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -90,27 +90,30 @@ export function HelpPage() {
9090
return (
9191
<div className="max-w-6xl mx-auto space-y-8">
9292
{/* Page Header with CTA */}
93-
<div className="flex items-start justify-between">
94-
<div className="flex-1">
95-
<h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
96-
<HelpCircle className="w-8 h-8 text-primary" />
97-
{formatMessage({ id: 'help.title' })}
98-
</h1>
99-
<p className="text-muted-foreground mt-2 text-lg">
100-
{formatMessage({ id: 'help.description' })}
101-
</p>
93+
<div className="space-y-4">
94+
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
95+
<div className="flex-1 min-w-0">
96+
<h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
97+
<HelpCircle className="w-8 h-8 text-primary flex-shrink-0" />
98+
<span>{formatMessage({ id: 'help.title' })}</span>
99+
</h1>
100+
<p className="text-muted-foreground mt-2 text-base">
101+
{formatMessage({ id: 'help.description' })}
102+
</p>
103+
</div>
104+
<Button
105+
variant="default"
106+
size="sm"
107+
className="gap-2 flex-shrink-0"
108+
asChild
109+
>
110+
<a href="/docs" target="_blank" rel="noopener noreferrer" className="whitespace-nowrap">
111+
<FileText className="w-4 h-4" />
112+
{formatMessage({ id: 'help.fullDocs' })}
113+
<ExternalLink className="w-3 h-3" />
114+
</a>
115+
</Button>
102116
</div>
103-
<Button
104-
variant="default"
105-
className="gap-2"
106-
asChild
107-
>
108-
<a href="/docs" target="_blank" rel="noopener noreferrer">
109-
<FileText className="w-4 h-4" />
110-
{formatMessage({ id: 'help.fullDocs' })}
111-
<ExternalLink className="w-4 h-4" />
112-
</a>
113-
</Button>
114117
</div>
115118

116119
{/* Quick Links */}
@@ -119,27 +122,33 @@ export function HelpPage() {
119122
const Icon = section.icon;
120123
const isDocsLink = section.link?.startsWith('/docs');
121124
const content = (
122-
<Card className="p-5 h-full hover:shadow-lg hover:border-primary/50 transition-all cursor-pointer group relative">
123-
{section.badge && (
124-
<div className="absolute top-3 right-3 px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full">
125-
{section.badge}
126-
</div>
127-
)}
128-
<div className="flex items-start gap-3">
129-
<div className="p-2.5 rounded-lg bg-primary/10 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
130-
<Icon className="w-5 h-5" />
131-
</div>
132-
<div className="flex-1 min-w-0">
133-
<h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
134-
{formatMessage({ id: section.i18nKey })}
135-
</h3>
136-
<p className="text-sm text-muted-foreground mt-1.5 line-clamp-2">
137-
{formatMessage({ id: section.descriptionI18nKey })}
138-
</p>
125+
<Card className="p-5 h-full hover:shadow-lg hover:border-primary/50 transition-all cursor-pointer group">
126+
<div className="flex flex-col h-full gap-3">
127+
<div className="flex items-start gap-3">
128+
<div className="p-2.5 rounded-lg bg-primary/10 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors flex-shrink-0">
129+
<Icon className="w-5 h-5" />
130+
</div>
131+
<div className="flex-1 min-w-0">
132+
<div className="flex items-start justify-between gap-2">
133+
<h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
134+
{formatMessage({ id: section.i18nKey })}
135+
</h3>
136+
{section.badge && (
137+
<span className="px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full flex-shrink-0">
138+
{section.badge}
139+
</span>
140+
)}
141+
</div>
142+
<p className="text-sm text-muted-foreground mt-1.5 line-clamp-2">
143+
{formatMessage({ id: section.descriptionI18nKey })}
144+
</p>
145+
</div>
139146
</div>
140-
{isDocsLink || section.isExternal ? (
141-
<ExternalLink className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors flex-shrink-0 mt-1" />
142-
) : null}
147+
{(isDocsLink || section.isExternal) && (
148+
<div className="flex justify-end mt-auto">
149+
<ExternalLink className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" />
150+
</div>
151+
)}
143152
</div>
144153
</Card>
145154
);
@@ -171,104 +180,104 @@ export function HelpPage() {
171180
{/* Documentation Overview Cards */}
172181
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
173182
{/* Commands Card */}
174-
<Card className="p-6 hover:shadow-md transition-shadow">
183+
<Card className="p-6 hover:shadow-md transition-shadow flex flex-col">
175184
<div className="flex items-center gap-3 mb-4">
176-
<div className="p-2 rounded-lg bg-blue-500/10 text-blue-500">
185+
<div className="p-2 rounded-lg bg-blue-500/10 text-blue-500 flex-shrink-0">
177186
<Terminal className="w-5 h-5" />
178187
</div>
179188
<h3 className="font-semibold text-foreground">
180189
{formatMessage({ id: 'help.commandsOverview.title' })}
181190
</h3>
182191
</div>
183-
<p className="text-sm text-muted-foreground mb-4">
192+
<p className="text-sm text-muted-foreground mb-4 flex-1">
184193
{formatMessage({ id: 'help.commandsOverview.description' })}
185194
</p>
186-
<div className="space-y-2">
195+
<div className="space-y-2 mb-4">
187196
<div className="flex items-center gap-2 text-sm">
188-
<Layers className="w-4 h-4 text-muted-foreground" />
197+
<Layers className="w-4 h-4 text-muted-foreground flex-shrink-0" />
189198
<span className="text-muted-foreground">Workflow Commands</span>
190199
</div>
191200
<div className="flex items-center gap-2 text-sm">
192-
<Layers className="w-4 h-4 text-muted-foreground" />
201+
<Layers className="w-4 h-4 text-muted-foreground flex-shrink-0" />
193202
<span className="text-muted-foreground">Issue Commands</span>
194203
</div>
195204
<div className="flex items-center gap-2 text-sm">
196-
<Layers className="w-4 h-4 text-muted-foreground" />
205+
<Layers className="w-4 h-4 text-muted-foreground flex-shrink-0" />
197206
<span className="text-muted-foreground">CLI & Memory Commands</span>
198207
</div>
199208
</div>
200-
<Button variant="ghost" size="sm" className="w-full mt-4" asChild>
201-
<a href="/docs/commands">
209+
<Button variant="ghost" size="sm" className="w-full mt-auto" asChild>
210+
<a href="/docs/commands" className="whitespace-nowrap">
202211
{formatMessage({ id: 'help.viewAll' })}
203212
<ArrowRight className="w-4 h-4 ml-1" />
204213
</a>
205214
</Button>
206215
</Card>
207216

208217
{/* Workflows Card */}
209-
<Card className="p-6 hover:shadow-md transition-shadow">
218+
<Card className="p-6 hover:shadow-md transition-shadow flex flex-col">
210219
<div className="flex items-center gap-3 mb-4">
211-
<div className="p-2 rounded-lg bg-green-500/10 text-green-500">
220+
<div className="p-2 rounded-lg bg-green-500/10 text-green-500 flex-shrink-0">
212221
<Workflow className="w-5 h-5" />
213222
</div>
214223
<h3 className="font-semibold text-foreground">
215224
{formatMessage({ id: 'help.workflowsOverview.title' })}
216225
</h3>
217226
</div>
218-
<p className="text-sm text-muted-foreground mb-4">
227+
<p className="text-sm text-muted-foreground mb-4 flex-1">
219228
{formatMessage({ id: 'help.workflowsOverview.description' })}
220229
</p>
221-
<div className="space-y-2">
230+
<div className="space-y-2 mb-4">
222231
<div className="flex items-center gap-2 text-sm">
223-
<Code className="w-4 h-4 text-muted-foreground" />
232+
<Code className="w-4 h-4 text-muted-foreground flex-shrink-0" />
224233
<span className="text-muted-foreground">Level 1-5 Workflows</span>
225234
</div>
226235
<div className="flex items-center gap-2 text-sm">
227-
<Search className="w-4 h-4 text-muted-foreground" />
236+
<Search className="w-4 h-4 text-muted-foreground flex-shrink-0" />
228237
<span className="text-muted-foreground">Interactive Diagrams</span>
229238
</div>
230239
<div className="flex items-center gap-2 text-sm">
231-
<FileText className="w-4 h-4 text-muted-foreground" />
240+
<FileText className="w-4 h-4 text-muted-foreground flex-shrink-0" />
232241
<span className="text-muted-foreground">Best Practices</span>
233242
</div>
234243
</div>
235-
<Button variant="ghost" size="sm" className="w-full mt-4" asChild>
236-
<a href="/docs/workflows">
244+
<Button variant="ghost" size="sm" className="w-full mt-auto" asChild>
245+
<a href="/docs/workflows" className="whitespace-nowrap">
237246
{formatMessage({ id: 'help.viewAll' })}
238247
<ArrowRight className="w-4 h-4 ml-1" />
239248
</a>
240249
</Button>
241250
</Card>
242251

243252
{/* Quick Start Card */}
244-
<Card className="p-6 hover:shadow-md transition-shadow">
253+
<Card className="p-6 hover:shadow-md transition-shadow flex flex-col">
245254
<div className="flex items-center gap-3 mb-4">
246-
<div className="p-2 rounded-lg bg-purple-500/10 text-purple-500">
255+
<div className="p-2 rounded-lg bg-purple-500/10 text-purple-500 flex-shrink-0">
247256
<Book className="w-5 h-5" />
248257
</div>
249258
<h3 className="font-semibold text-foreground">
250259
{formatMessage({ id: 'help.quickStart.title' })}
251260
</h3>
252261
</div>
253-
<p className="text-sm text-muted-foreground mb-4">
262+
<p className="text-sm text-muted-foreground mb-4 flex-1">
254263
{formatMessage({ id: 'help.quickStart.description' })}
255264
</p>
256-
<div className="space-y-2">
265+
<div className="space-y-2 mb-4">
257266
<div className="flex items-center gap-2 text-sm">
258-
<ExternalLink className="w-4 h-4 text-muted-foreground" />
267+
<ExternalLink className="w-4 h-4 text-muted-foreground flex-shrink-0" />
259268
<a href="/docs/overview" className="text-muted-foreground hover:text-foreground transition-colors">
260269
{formatMessage({ id: 'help.quickStart.guide' })}
261270
</a>
262271
</div>
263272
<div className="flex items-center gap-2 text-sm">
264-
<MessageCircle className="w-4 h-4 text-muted-foreground" />
273+
<MessageCircle className="w-4 h-4 text-muted-foreground flex-shrink-0" />
265274
<a href="/docs/faq" className="text-muted-foreground hover:text-foreground transition-colors">
266275
{formatMessage({ id: 'help.quickStart.faq' })}
267276
</a>
268277
</div>
269278
</div>
270-
<Button variant="ghost" size="sm" className="w-full mt-4" asChild>
271-
<a href="/docs/overview">
279+
<Button variant="ghost" size="sm" className="w-full mt-auto" asChild>
280+
<a href="/docs/overview" className="whitespace-nowrap">
272281
{formatMessage({ id: 'help.getStarted' })}
273282
<ArrowRight className="w-4 h-4 ml-1" />
274283
</a>
@@ -277,23 +286,23 @@ export function HelpPage() {
277286
</div>
278287

279288
{/* Search Documentation CTA */}
280-
<Card className="p-8 bg-gradient-to-r from-primary/5 to-primary/10 border-primary/20">
281-
<div className="flex items-center justify-between">
282-
<div className="flex items-center gap-4">
283-
<div className="p-3 rounded-lg bg-primary/20">
289+
<Card className="p-6 sm:p-8 bg-gradient-to-r from-primary/5 to-primary/10 border-primary/20">
290+
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:justify-between">
291+
<div className="flex items-start gap-4 flex-1 min-w-0">
292+
<div className="p-3 rounded-lg bg-primary/20 flex-shrink-0">
284293
<Search className="w-6 h-6 text-primary" />
285294
</div>
286-
<div>
295+
<div className="flex-1 min-w-0">
287296
<h3 className="text-lg font-semibold text-foreground">
288297
{formatMessage({ id: 'help.searchDocs.title' })}
289298
</h3>
290-
<p className="text-muted-foreground">
299+
<p className="text-sm text-muted-foreground mt-1">
291300
{formatMessage({ id: 'help.searchDocs.description' })}
292301
</p>
293302
</div>
294303
</div>
295-
<Button variant="default" className="gap-2" asChild>
296-
<a href="/docs">
304+
<Button variant="default" size="sm" className="gap-2 flex-shrink-0 w-full sm:w-auto" asChild>
305+
<a href="/docs" className="whitespace-nowrap">
297306
{formatMessage({ id: 'help.searchDocs.button' })}
298307
<ArrowRight className="w-4 h-4" />
299308
</a>
@@ -303,26 +312,26 @@ export function HelpPage() {
303312

304313
{/* Support Section */}
305314
<Card className="p-6 bg-primary/5 border-primary/20">
306-
<div className="flex items-start gap-4">
307-
<div className="p-3 rounded-lg bg-primary/10">
315+
<div className="flex flex-col sm:flex-row sm:items-start gap-4">
316+
<div className="p-3 rounded-lg bg-primary/10 flex-shrink-0">
308317
<MessageCircle className="w-6 h-6 text-primary" />
309318
</div>
310-
<div className="flex-1">
319+
<div className="flex-1 min-w-0">
311320
<h3 className="text-lg font-semibold text-foreground">
312321
{formatMessage({ id: 'help.support.title' })}
313322
</h3>
314-
<p className="text-muted-foreground mt-1 mb-4">
323+
<p className="text-muted-foreground text-sm mt-2">
315324
{formatMessage({ id: 'help.support.description' })}
316325
</p>
317-
<div className="flex gap-3">
326+
<div className="flex flex-col sm:flex-row gap-3 mt-4">
318327
<Button variant="outline" size="sm" asChild>
319-
<a href="/docs/faq">
328+
<a href="/docs/faq" className="whitespace-nowrap">
320329
<Book className="w-4 h-4 mr-2" />
321330
{formatMessage({ id: 'help.support.documentation' })}
322331
</a>
323332
</Button>
324333
<Button variant="outline" size="sm" asChild>
325-
<a href="https://github.com/catlog22/Claude-Code-Workflow/issues" target="_blank" rel="noopener noreferrer">
334+
<a href="https://github.com/catlog22/Claude-Code-Workflow/issues" target="_blank" rel="noopener noreferrer" className="whitespace-nowrap">
326335
<Video className="w-4 h-4 mr-2" />
327336
{formatMessage({ id: 'help.support.tutorials' })}
328337
</a>

0 commit comments

Comments
 (0)