Skip to content

Commit 3d4bfc7

Browse files
wkylinwkylin
committed
feat: Arc Preview
1 parent 3635a87 commit 3d4bfc7

5 files changed

Lines changed: 147 additions & 25 deletions

File tree

src/assets/svg/architecture-diagram-rcba.svg renamed to src/assets/svg/architecture-diagram-rbac.svg

File renamed without changes.

‎src/locales/en/translation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const en = {
7373
motion: 'Motion',
7474
mermaid: 'Mermaid',
7575
topology: 'Topology',
76-
svgViewer: 'SVG Viewer',
76+
svgViewer: 'Arc Preview',
7777
permissionExample: 'Permission',
7878
phBar: 'PH Bar',
7979
chatgpt: 'ChatGPT',

‎src/locales/zh/translation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const zh = {
7373
motion: '动效',
7474
mermaid: 'Mermaid',
7575
topology: '拓扑图',
76-
svgViewer: 'SVG 查看器',
76+
svgViewer: '架构预览',
7777
permissionExample: '权限示例',
7878
phBar: 'PH Bar',
7979
chatgpt: 'ChatGPT',

‎src/pages/layout/proSider/index.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import { Layout } from 'antd'
3+
import { Layout, Button } from 'antd'
44
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
55
import { useStore } from '@/store'
66

@@ -17,13 +17,13 @@ const ProSider = ({ children, theme = 'light' }) => {
1717
collapsedWidth={80}
1818
theme={theme}
1919
collapsible
20-
collapsed={!isSidebarOpen}
20+
collapsed={!isMobile && !isSidebarOpen}
2121
trigger={null}
2222
className={styles.sider}
2323
style={isMobile ? { height: '100%' } : undefined}
2424
>
2525
{children}
26-
{!isMobile && (
26+
{!isMobile ? (
2727
<button
2828
type="button"
2929
className={styles.proLink}
@@ -36,6 +36,8 @@ const ProSider = ({ children, theme = 'light' }) => {
3636
<MenuUnfoldOutlined style={{ fontSize: '16px', color: '#08c', cursor: 'pointer' }} />
3737
)}
3838
</button>
39+
) : (
40+
<Button type="link">Pro React Admin</Button>
3941
)}
4042
</Layout.Sider>
4143
)

‎src/pages/svgViewer/index.jsx‎

Lines changed: 140 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,153 @@
11
import FixTabPanel from '@stateless/FixTabPanel'
22
import SvgPreview from '@stateless/SvgPreview'
3-
import DiagramSvg from '@assets/svg/architecture-diagram-rcba.svg'
4-
import { Card, Space, Typography } from 'antd'
3+
import DiagramSvgRbac from '@assets/svg/architecture-diagram-rbac.svg'
4+
import DiagramSvg from '@assets/svg/architecture-diagram.svg'
5+
import { Card, Space, Typography, Row, Col, Divider } from 'antd'
56

6-
const { Text } = Typography
7-
8-
const SVG_SOURCE = ``
7+
const { Title, Paragraph, Text } = Typography
98

109
const SvgViewer = () => {
1110
return (
1211
<FixTabPanel fill={true}>
13-
<Card
14-
title="架构图预览"
15-
extra={
16-
<Space>
17-
<Text type="secondary">提示：可以使用鼠标拖拽和方向键移动视图</Text>
18-
</Space>
19-
}
20-
style={{ flex: 1, display: 'flex', height: '100%', flexDirection: 'column' }}
21-
styles={{
22-
body: { padding: 0, flex: 1, overflow: 'hidden', display: 'flex', position: 'relative' },
12+
<div
13+
style={{
14+
padding: 24,
15+
minHeight: '100%',
16+
background: 'linear-gradient(180deg,#0f1724 0%, rgba(15,23,36,0.6) 60%)',
17+
color: '#fff',
2318
}}
2419
>
25-
<div style={{ flex: 1, position: 'relative' }}>
26-
<SvgPreview SvgComponent={DiagramSvg} downloadName="architecture-diagram.svg" />
27-
{/* <SvgPreview svgSource={SVG_SOURCE} downloadName="architecture-diagram.svg" /> */}
28-
{/* 如果需要直接作为组件渲染，可改为 <DiagramSvg/> */}
20+
<div style={{ maxWidth: 1200, margin: '0 auto' }}>
21+
<div
22+
style={{
23+
display: 'flex',
24+
justifyContent: 'space-between',
25+
alignItems: 'center',
26+
gap: 16,
27+
marginBottom: 18,
28+
}}
29+
>
30+
<div>
31+
<Title level={2} style={{ color: '#fff', margin: 0 }}>
32+
Pro React Admin — 技术架构图
33+
</Title>
34+
<Paragraph style={{ color: 'rgba(255,255,255,0.75)', margin: '6px 0 0' }}>
35+
双重架构、企业级特性与现代化构建流程的可视化展示
36+
</Paragraph>
37+
</div>
38+
</div>
39+
40+
<Row gutter={[24, 24]}>
41+
<Col xs={24} lg={8}>
42+
<Card
43+
contentStyle={{ padding: 18, maxHeight: 760, overflow: 'auto' }}
44+
style={{
45+
borderRadius: 12,
46+
boxShadow: '0 8px 30px rgba(2,6,23,0.6)',
47+
background: 'rgba(255,255,255,0.03)',
48+
color: '#fff',
49+
}}
50+
>
51+
<Title level={4} style={{ color: '#fff' }}>
52+
Pro React Admin 技术架构图:
53+
</Title>
54+
<h3 style={{ color: '#fff', marginTop: 6 }}>🏗️ 双重架构设计</h3>
55+
<ul style={{ color: 'rgba(255,255,255,0.78)', paddingLeft: 18 }}>
56+
<li>
57+
<strong>企业级应用</strong>：完整的中后台管理系统
58+
</li>
59+
<li>
60+
<strong>组件库</strong>：可独立发布的{' '}
61+
<code style={{ background: 'rgba(255,255,255,0.04)', padding: '2px 6px', borderRadius: 4 }}>
62+
@w.ui/wui-react
63+
</code>{' '}
64+
NPM 包
65+
</li>
66+
</ul>
67+
<h3 style={{ color: '#fff' }}>🚀 前沿技术栈</h3>
68+
<ul style={{ color: 'rgba(255,255,255,0.78)', paddingLeft: 18 }}>
69+
<li>
70+
<strong>React 19</strong>：利用最新的并发特性和性能优化
71+
</li>
72+
<li>
73+
<strong>双构建模式</strong>：Webpack 5 用于生产构建，Vite 7 用于快速开发
74+
</li>
75+
<li>
76+
<strong>TypeScript 5</strong>：提供强类型支持
77+
</li>
78+
</ul>
79+
<h3 style={{ color: '#fff' }}>🛡️ 企业级特性</h3>
80+
<ul style={{ color: 'rgba(255,255,255,0.78)', paddingLeft: 18 }}>
81+
<li>
82+
<strong>RBAC 权限体系</strong>：路由、菜单、按钮级细粒度控制
83+
</li>
84+
<li>
85+
<strong>多标签页系统</strong>：支持状态持久化和 KeepAlive 缓存
86+
</li>
87+
<li>
88+
<strong>健壮请求层</strong>：并发控制、自动重试、全局错误处理
89+
</li>
90+
</ul>
91+
<h3 style={{ color: '#fff' }}>🧩 丰富生态</h3>
92+
<ul style={{ color: 'rgba(255,255,255,0.78)', paddingLeft: 18 }}>
93+
<li>
94+
<strong>120+ 组件：</strong>：涵盖基础设施、业务组件和 UI 组件
95+
</li>
96+
<li>
97+
<strong>AI 集成</strong>：内置 ChatGPT、Markmap、Mermaid 等智能组件
98+
</li>
99+
<li>
100+
<strong>全链路测试</strong>：Playwright E2E 测试和质量保障体系
101+
</li>
102+
</ul>
103+
<p style={{ color: 'rgba(255,255,255,0.8)' }}>
104+
该架构图展示了 Pro React Admin 作为现代化企业级中后台解决方案的完整技术栈。核心优势在于 React 19
105+
的性能优化、双重架构设计、完善的权限体系和丰富的组件生态。构建系统支持 Webpack 和 Vite
106+
双模式，部署采用 GitHub Pages 自动化流程，监控集成 Sentry 错误追踪。
107+
</p>
108+
</Card>
109+
</Col>
110+
111+
<Col xs={24} lg={16}>
112+
<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
113+
<Card
114+
title="技术架构图"
115+
extra={
116+
<Space>
117+
<Text type="secondary">提示：可以使用鼠标拖拽和方向键移动视图</Text>
118+
</Space>
119+
}
120+
styles={{
121+
body: { padding: 0, flex: 1, overflow: 'hidden', display: 'flex', position: 'relative' },
122+
}}
123+
>
124+
<div style={{ flex: 1, position: 'relative', height: '300px' }}>
125+
<SvgPreview SvgComponent={DiagramSvg} downloadName="architecture-diagram.svg" />
126+
{/* <SvgPreview svgSource={SVG_SOURCE} downloadName="architecture-diagram.svg" /> */}
127+
{/* 如果需要直接作为组件渲染，可改为 <DiagramSvg/> */}
128+
</div>
129+
</Card>
130+
131+
<Card
132+
title="路由/权限架构图"
133+
extra={
134+
<Space>
135+
<Text type="secondary">提示：可以使用鼠标拖拽和方向键移动视图</Text>
136+
</Space>
137+
}
138+
styles={{
139+
body: { padding: 0, flex: 1, overflow: 'hidden', display: 'flex', position: 'relative' },
140+
}}
141+
>
142+
<div style={{ flex: 1, position: 'relative', height: '300px' }}>
143+
<SvgPreview SvgComponent={DiagramSvgRbac} downloadName="architecture-diagram-rbac.svg" />
144+
</div>
145+
</Card>
146+
</div>
147+
</Col>
148+
</Row>
29149
</div>
30-
</Card>
150+
</div>
31151
</FixTabPanel>
32152
)
33153
}

0 commit comments

Comments
 (0)