Skip to content

style: format code with Prettier and StandardJS #921

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
deepsource-autofix wants to merge 1 commit into from
Closed

style: format code with Prettier and StandardJS #921

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 20 additions & 18 deletions src/components/stateless/SvgPreview/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ import {
SyncOutlined,
DownloadOutlined,
FullscreenOutlined,
FullscreenExitOutlined,
FullscreenExitOutlined
} from '@ant-design/icons'

const defaultBg = '#1e1e1e'

function SvgPreview({
function SvgPreview ({
svgSource = '',
svgUrl = '',
SvgComponent = null,
downloadName = 'diagram.svg',
background = defaultBg,
background = defaultBg
}) {
const containerRef = useRef(null)
const innerRef = useRef(null)
Expand Down Expand Up @@ -352,15 +352,15 @@ function SvgPreview({
<div style={{ height: '100%', position: 'relative' }}>
<div
ref={containerRef}
role="application"
aria-label="SVG viewer"
role='application'
aria-label='SVG viewer'
style={{
width: '100%',
height: '100%',
backgroundColor: background,
overflow: 'hidden',
cursor: isDragging ? 'grabbing' : 'grab',
position: 'relative',
position: 'relative'
}}
>
<div
Expand All @@ -369,14 +369,16 @@ function SvgPreview({
transformOrigin: '0 0',
transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
transition: isDragging ? 'none' : 'transform 0.1s ease-out',
willChange: 'transform',
willChange: 'transform'
}}
>
{SvgComponent ? (
<SvgComponent style={{ width: '100%', height: '100%' }} />
) : (
<div dangerouslySetInnerHTML={{ __html: content ? content.replace(/<br>/g, '<br/>') : '' }} />
)}
{SvgComponent
? (
<SvgComponent style={{ width: '100%', height: '100%' }} />
)
: (
<div dangerouslySetInnerHTML={{ __html: content ? content.replace(/<br>/g, '<br/>') : '' }} />
)}
</div>
</div>

Expand All @@ -394,22 +396,22 @@ function SvgPreview({
display: 'flex',
alignItems: 'center',
gap: 8,
boxShadow: '0 6px 18px rgba(0,0,0,0.35)',
boxShadow: '0 6px 18px rgba(0,0,0,0.35)'
}}
>
<Button icon={<ZoomOutOutlined />} onClick={handleZoomOut} type="text" style={{ color: '#fff' }} />
<Button icon={<ZoomOutOutlined />} onClick={handleZoomOut} type='text' style={{ color: '#fff' }} />
<div style={{ color: '#fff', minWidth: 56, textAlign: 'center', fontWeight: 500 }}>
{Math.round(scale * 100)}%
</div>
<Button icon={<ZoomInOutlined />} onClick={handleZoomIn} type="text" style={{ color: '#fff' }} />
<Button icon={<SyncOutlined />} onClick={handleReset} type="text" style={{ color: '#fff' }} />
<Button icon={<ZoomInOutlined />} onClick={handleZoomIn} type='text' style={{ color: '#fff' }} />
<Button icon={<SyncOutlined />} onClick={handleReset} type='text' style={{ color: '#fff' }} />
<Button
icon={isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
onClick={toggleFullscreen}
type="text"
type='text'
style={{ color: '#fff' }}
/>
<Button icon={<DownloadOutlined />} onClick={handleDownload} type="primary" size="small">
<Button icon={<DownloadOutlined />} onClick={handleDownload} type='primary' size='small'>
下载
</Button>
</div>
Expand Down
24 changes: 12 additions & 12 deletions src/pages/svgViewer/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ const { Title, Paragraph, Text } = Typography

const SvgViewer = () => {
return (
<FixTabPanel fill={true}>
<FixTabPanel fill>
<div
style={{
padding: 24,
minHeight: '100%',
background: 'linear-gradient(180deg,#0f1724 0%, rgba(15,23,36,0.6) 60%)',
color: '#fff',
color: '#fff'
}}
>
<div style={{ maxWidth: 1200, margin: '0 auto' }}>
Expand All @@ -24,7 +24,7 @@ const SvgViewer = () => {
justifyContent: 'space-between',
alignItems: 'center',
gap: 16,
marginBottom: 18,
marginBottom: 18
}}
>
<div>
Expand All @@ -45,7 +45,7 @@ const SvgViewer = () => {
borderRadius: 12,
boxShadow: '0 8px 30px rgba(2,6,23,0.6)',
background: 'rgba(255,255,255,0.03)',
color: '#fff',
color: '#fff'
}}
>
<Title level={4} style={{ color: '#fff' }}>
Expand Down Expand Up @@ -111,36 +111,36 @@ const SvgViewer = () => {
<Col xs={24} lg={16}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
<Card
title="技术架构图"
title='技术架构图'
extra={
<Space>
<Text type="secondary">提示：可以使用鼠标拖拽和方向键移动视图</Text>
<Text type='secondary'>提示：可以使用鼠标拖拽和方向键移动视图</Text>
</Space>
}
styles={{
body: { padding: 0, flex: 1, overflow: 'hidden', display: 'flex', position: 'relative' },
body: { padding: 0, flex: 1, overflow: 'hidden', display: 'flex', position: 'relative' }
}}
>
<div style={{ flex: 1, position: 'relative', height: '300px' }}>
<SvgPreview SvgComponent={DiagramSvg} downloadName="architecture-diagram.svg" />
<SvgPreview SvgComponent={DiagramSvg} downloadName='architecture-diagram.svg' />
{/* <SvgPreview svgSource={SVG_SOURCE} downloadName="architecture-diagram.svg" /> */}
{/* 如果需要直接作为组件渲染，可改为 <DiagramSvg/> */}
</div>
</Card>

<Card
title="路由/权限架构图"
title='路由/权限架构图'
extra={
<Space>
<Text type="secondary">提示：可以使用鼠标拖拽和方向键移动视图</Text>
<Text type='secondary'>提示：可以使用鼠标拖拽和方向键移动视图</Text>
</Space>
}
styles={{
body: { padding: 0, flex: 1, overflow: 'hidden', display: 'flex', position: 'relative' },
body: { padding: 0, flex: 1, overflow: 'hidden', display: 'flex', position: 'relative' }
}}
>
<div style={{ flex: 1, position: 'relative', height: '300px' }}>
<SvgPreview SvgComponent={DiagramSvgRbac} downloadName="architecture-diagram-rbac.svg" />
<SvgPreview SvgComponent={DiagramSvgRbac} downloadName='architecture-diagram-rbac.svg' />
</div>
</Card>
</div>
Expand Down
Loading