Skip to content

Commit 5a799e3

Browse files
wangdicoderwangdicoder
committed
fix: dashboard
1 parent 976167e commit 5a799e3

3 files changed

Lines changed: 224 additions & 97 deletions

File tree

‎apps/docs/src/containers/theme-studio/preview-components/cards-preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@ function ChatCard(): React.ReactElement {
345345
</Flex>
346346
<Flex className="theme-studio__cards-chat-compose">
347347
<Input size="lg" placeholder="Type your message..." />
348-
<Button variant="solid" color="primary" disabled>
348+
<Button variant="solid" color="primary" size='lg'>
349349
Send
350350
</Button>
351351
</Flex>

‎apps/docs/src/containers/theme-studio/preview-components/dashboard-preview.tsx‎

Lines changed: 137 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,27 @@ import {
3030
IconTeam,
3131
} from '@tiny-design/icons';
3232

33+
const dashboardPrimaryNavItems = [
34+
{ key: 'dashboard', label: 'Dashboard', icon: <IconHome /> },
35+
{ key: 'lifecycle', label: 'Lifecycle', icon: <IconStructure /> },
36+
{ key: 'analytics', label: 'Analytics', icon: <IconStatistics /> },
37+
{ key: 'projects', label: 'Projects', icon: <IconDocument /> },
38+
{ key: 'team', label: 'Team', icon: <IconTeam /> },
39+
] as const;
40+
41+
const dashboardDocumentNavItems = [
42+
{ key: 'data-library', label: 'Data Library' },
43+
{ key: 'reports', label: 'Reports' },
44+
{ key: 'word-assistant', label: 'Word Assistant' },
45+
{ key: 'more', label: 'More' },
46+
] as const;
47+
48+
const dashboardFooterNavItems = [
49+
{ key: 'settings', label: 'Settings', icon: <IconSetting /> },
50+
{ key: 'get-help', label: 'Get Help', icon: <IconSupport /> },
51+
{ key: 'search', label: 'Search', icon: <IconSearch /> },
52+
] as const;
53+
3354
const dashboardVisitorsData = Array.from({ length: 90 }, (_, index) => {
3455
const date = new Date(2024, 3, 1 + index);
3556
const waveA = Math.sin(index * 0.92);
@@ -252,7 +273,7 @@ type DashboardVisibleColumns = {
252273
};
253274

254275
export function DashboardPreview(): React.ReactElement {
255-
const [activeSidebarItem, setActiveSidebarItem] = React.useState('Dashboard');
276+
const [activeSidebarItem, setActiveSidebarItem] = React.useState('dashboard');
256277
const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
257278
const [visitorRange, setVisitorRange] = React.useState<DashboardVisitorRange>('last-3-months');
258279
const [activeDocTab, setActiveDocTab] = React.useState<DashboardDocTab>('outline');
@@ -445,10 +466,10 @@ export function DashboardPreview(): React.ReactElement {
445466
<div className="theme-studio__docdash-brand">
446467
<Avatar>A</Avatar>
447468
{!sidebarCollapsed ? (
448-
<div>
469+
<Flex vertical gap={2} className="theme-studio__docdash-copy">
449470
<Text strong>Acme Inc.</Text>
450471
<Text type="secondary">Workspace</Text>
451-
</div>
472+
</Flex>
452473
) : null}
453474
</div>
454475

@@ -461,76 +482,124 @@ export function DashboardPreview(): React.ReactElement {
461482
{!sidebarCollapsed ? 'Quick Create' : null}
462483
</Button>
463484

464-
<div className="theme-studio__docdash-nav-section">
465-
{[
466-
{ label: 'Dashboard', icon: <IconHome /> },
467-
{ label: 'Lifecycle', icon: <IconStructure /> },
468-
{ label: 'Analytics', icon: <IconStatistics /> },
469-
{ label: 'Projects', icon: <IconDocument /> },
470-
{ label: 'Team', icon: <IconTeam /> },
471-
].map((item) => (
472-
<button
473-
key={item.label}
474-
type="button"
475-
aria-label={item.label}
476-
title={item.label}
477-
onClick={() => setActiveSidebarItem(item.label)}
478-
className={`theme-studio__docdash-nav-item${activeSidebarItem === item.label ? ' theme-studio__docdash-nav-item_active' : ''}`}>
479-
<span>{item.icon}</span>
480-
{!sidebarCollapsed ? <span>{item.label}</span> : null}
481-
</button>
482-
))}
483-
</div>
485+
{!sidebarCollapsed ? (
486+
<>
487+
<div className="theme-studio__docdash-nav-section">
488+
<Menu
489+
mode="inline"
490+
variant="ghost"
491+
appearance="navigation"
492+
selectionStyle="mixed"
493+
size="sm"
494+
inlineIndent={16}
495+
className="theme-studio__docdash-menu"
496+
selectedKeys={[activeSidebarItem]}
497+
onSelect={(selectedKey) => setActiveSidebarItem(selectedKey)}>
498+
{dashboardPrimaryNavItems.map((item) => (
499+
<Menu.Item key={item.key} index={item.key} icon={item.icon}>
500+
{item.label}
501+
</Menu.Item>
502+
))}
503+
</Menu>
504+
</div>
484505

485-
{!sidebarCollapsed ? <div className="theme-studio__docdash-section-label">Documents</div> : null}
486-
<div className="theme-studio__docdash-nav-section">
487-
{['Data Library', 'Reports', 'Word Assistant', 'More'].map((item) => (
488-
<button
489-
key={item}
490-
type="button"
491-
aria-label={item}
492-
title={item}
493-
onClick={() => setActiveSidebarItem(item)}
494-
className={`theme-studio__docdash-nav-item${activeSidebarItem === item ? ' theme-studio__docdash-nav-item_active' : ''}`}>
495-
<span>
496-
<IconDocument />
497-
</span>
498-
{!sidebarCollapsed ? <span>{item}</span> : null}
499-
{!sidebarCollapsed ? <small>More</small> : null}
500-
</button>
501-
))}
502-
</div>
506+
<div className="theme-studio__docdash-section-label">Documents</div>
507+
<div className="theme-studio__docdash-nav-section">
508+
<Menu
509+
mode="inline"
510+
variant="ghost"
511+
appearance="navigation"
512+
selectionStyle="mixed"
513+
size="sm"
514+
inlineIndent={16}
515+
className="theme-studio__docdash-menu"
516+
selectedKeys={[activeSidebarItem]}
517+
onSelect={(selectedKey) => setActiveSidebarItem(selectedKey)}>
518+
{dashboardDocumentNavItems.map((item) => (
519+
<Menu.Item
520+
key={item.key}
521+
index={item.key}
522+
icon={<IconDocument />}>
523+
{item.label}
524+
</Menu.Item>
525+
))}
526+
</Menu>
527+
</div>
503528

504-
<div className="theme-studio__docdash-nav-section theme-studio__docdash-nav-section_footer">
505-
{[
506-
{ label: 'Settings', icon: <IconSetting /> },
507-
{ label: 'Get Help', icon: <IconSupport /> },
508-
{ label: 'Search', icon: <IconSearch /> },
509-
].map((item) => (
510-
<button
511-
key={item.label}
512-
type="button"
513-
aria-label={item.label}
514-
title={item.label}
515-
onClick={() => setActiveSidebarItem(item.label)}
516-
className={`theme-studio__docdash-nav-item${activeSidebarItem === item.label ? ' theme-studio__docdash-nav-item_active' : ''}`}>
517-
<span>{item.icon}</span>
518-
{!sidebarCollapsed ? <span>{item.label}</span> : null}
519-
</button>
520-
))}
521-
</div>
529+
<div className="theme-studio__docdash-nav-section theme-studio__docdash-nav-section_footer">
530+
<Menu
531+
mode="inline"
532+
variant="ghost"
533+
appearance="navigation"
534+
selectionStyle="mixed"
535+
size="sm"
536+
inlineIndent={16}
537+
className="theme-studio__docdash-menu"
538+
selectedKeys={[activeSidebarItem]}
539+
onSelect={(selectedKey) => setActiveSidebarItem(selectedKey)}>
540+
{dashboardFooterNavItems.map((item) => (
541+
<Menu.Item key={item.key} index={item.key} icon={item.icon}>
542+
{item.label}
543+
</Menu.Item>
544+
))}
545+
</Menu>
546+
</div>
547+
</>
548+
) : (
549+
<>
550+
<div className="theme-studio__docdash-nav-section">
551+
{dashboardPrimaryNavItems.map((item) => (
552+
<button
553+
key={item.key}
554+
type="button"
555+
aria-label={item.label}
556+
title={item.label}
557+
onClick={() => setActiveSidebarItem(item.key)}
558+
className={`theme-studio__docdash-nav-item${activeSidebarItem === item.key ? ' theme-studio__docdash-nav-item_active' : ''}`}>
559+
<span>{item.icon}</span>
560+
</button>
561+
))}
562+
</div>
522563

523-
<button type="button" className="theme-studio__docdash-locale">
524-
CN
525-
</button>
564+
<div className="theme-studio__docdash-nav-section">
565+
{dashboardDocumentNavItems.map((item) => (
566+
<button
567+
key={item.key}
568+
type="button"
569+
aria-label={item.label}
570+
title={item.label}
571+
onClick={() => setActiveSidebarItem(item.key)}
572+
className={`theme-studio__docdash-nav-item${activeSidebarItem === item.key ? ' theme-studio__docdash-nav-item_active' : ''}`}>
573+
<span>
574+
<IconDocument />
575+
</span>
576+
</button>
577+
))}
578+
</div>
579+
580+
<div className="theme-studio__docdash-nav-section theme-studio__docdash-nav-section_footer">
581+
{dashboardFooterNavItems.map((item) => (
582+
<button
583+
key={item.key}
584+
type="button"
585+
aria-label={item.label}
586+
title={item.label}
587+
onClick={() => setActiveSidebarItem(item.key)}
588+
className={`theme-studio__docdash-nav-item${activeSidebarItem === item.key ? ' theme-studio__docdash-nav-item_active' : ''}`}>
589+
<span>{item.icon}</span>
590+
</button>
591+
))}
592+
</div>
593+
</>
594+
)}
526595

527596
<div className="theme-studio__docdash-profile">
528597
<Avatar>S</Avatar>
529598
{!sidebarCollapsed ? (
530-
<div>
599+
<Flex vertical gap={2} className="theme-studio__docdash-copy">
531600
<Text strong>shadcn</Text>
532601
<Text type="secondary">m@example.com</Text>
533-
</div>
602+
</Flex>
534603
) : null}
535604
</div>
536605
</Card.Content>
@@ -648,14 +717,15 @@ export function DashboardPreview(): React.ReactElement {
648717
['personnel', 'Key Personnel', '2'],
649718
['focus', 'Focus Documents', null],
650719
].map(([key, label, value]) => (
651-
<button
720+
<Button
652721
key={key}
653-
type="button"
722+
size="sm"
723+
variant={activeDocTab === key ? 'outline' : 'ghost'}
654724
className={`theme-studio__docdash-outline-pill${activeDocTab === key ? ' theme-studio__docdash-outline-pill_active' : ''}`}
655725
onClick={() => setActiveDocTab(key as DashboardDocTab)}>
656726
<span>{label}</span>
657727
{value ? <strong>{value}</strong> : null}
658-
</button>
728+
</Button>
659729
))}
660730
</div>
661731
<div className="theme-studio__docdash-table-actions">

0 commit comments

Comments
 (0)