thzxx
03a71bdf94
- 工具栏右侧新增 Gitee 图标按钮，点击跳转项目主页 - 工具栏右侧新增关于按钮，点击打开关于弹框 - 关于弹框展示：应用图标、版本号、功能特性、技术栈、版权信息 - 点击弹框外部或关闭按钮可关闭弹框 - 版本号从 v2.0.0 改为 v0.1.0
217 lines
8.9 KiB
TypeScript
217 lines
8.9 KiB
TypeScript
import React from 'react'
|
|
|
|
// 统一图标 Props
|
|
interface IconProps {
|
|
size?: number
|
|
className?: string
|
|
style?: React.CSSProperties
|
|
}
|
|
|
|
const defaultProps: Partial<IconProps> = { size: 18 }
|
|
|
|
// ===== 应用图标（现代化简洁风格） =====
|
|
export function AppIcon({ size = 80 }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="app-bg" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="#4F8EF7"/>
|
|
<stop offset="100%" stopColor="#2563EB"/>
|
|
</linearGradient>
|
|
<linearGradient id="app-highlight" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stopColor="white" stopOpacity="0.15"/>
|
|
<stop offset="50%" stopColor="white" stopOpacity="0"/>
|
|
</linearGradient>
|
|
</defs>
|
|
{/* 圆角矩形背景 */}
|
|
<rect x="4" y="4" width="72" height="72" rx="16" fill="url(#app-bg)"/>
|
|
{/* 左上角高光 */}
|
|
<rect x="4" y="4" width="72" height="72" rx="16" fill="url(#app-highlight)"/>
|
|
{/* MD 文字 */}
|
|
<text x="40" y="46" textAnchor="middle" dominantBaseline="central"
|
|
fontFamily="Georgia, 'Times New Roman', serif" fontWeight="bold" fontSize="24"
|
|
fill="white" letterSpacing="1.5">MD</text>
|
|
{/* 底部装饰线 */}
|
|
<rect x="20" y="58" width="40" height="2.5" rx="1.25" fill="white" fillOpacity="0.25"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
// ===== 工具栏图标 =====
|
|
export function FolderOpen({ size = defaultProps.size }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M5 19a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v1"/>
|
|
<path d="M20.5 15H5a2 2 0 0 0-2 2l1.5 7h18l2-7a2 2 0 0 0-2-2h-2.5z" fill="none"/>
|
|
<path d="M12 11h4" strokeDasharray="2 2"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function Save({ size = defaultProps.size }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
|
<polyline points="17 21 17 13 7 13 7 21"/>
|
|
<polyline points="7 3 7 8 15 8"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function EditMode({ size = defaultProps.size }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
|
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
|
<circle cx="18" cy="6" r="1" fill="currentColor"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function PreviewMode({ size = defaultProps.size }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
|
<circle cx="12" cy="12" r="3"/>
|
|
<circle cx="12" cy="12" r="1" fill="currentColor"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function Moon({ size = defaultProps.size }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
<circle cx="19" cy="5" r="1" fill="currentColor" opacity="0.5"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function Sun({ size = defaultProps.size }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.3"/>
|
|
<line x1="12" y1="1" x2="12" y2="3"/>
|
|
<line x1="12" y1="21" x2="12" y2="23"/>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
|
<line x1="1" y1="12" x2="3" y2="12"/>
|
|
<line x1="21" y1="12" x2="23" y2="12"/>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
// ===== 工具栏右侧图标 =====
|
|
export function Gitee({ size = defaultProps.size }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M11.984 0C5.372 0 0 5.372 0 11.984c0 6.612 5.372 11.984 11.984 11.984s11.984-5.372 11.984-11.984C23.968 5.372 18.596 0 11.984 0zm6.78 18.272c-.224.448-.832.672-1.344.448l-3.584-1.792c-.448-.224-.672-.448-.672-.896v-4.704c0-.448.448-.896.896-.896h4.704c.448 0 .896.448.896.896v4.704c0 .896-.448 1.568-1.344 1.792l.448.64zm-6.112-2.688c-.896 0-1.568-.672-1.568-1.568s.672-1.568 1.568-1.568 1.568.672 1.568 1.568-.672 1.568-1.568 1.568z"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function Info({ size = defaultProps.size }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<line x1="12" y1="16" x2="12" y2="12"/>
|
|
<line x1="12" y1="8" x2="12.01" y2="8"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
// ===== 标签栏图标 =====
|
|
export function Close({ size = 10 }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"/>
|
|
<line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function Plus({ size = 14 }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
<line x1="12" y1="5" x2="12" y2="19"/>
|
|
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
// ===== 侧边栏图标 =====
|
|
export function Folder({ size = 14 }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
|
<line x1="9" y1="13" x2="15" y2="13" opacity="0.4"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function File({ size = 14 }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
|
<polyline points="14 2 14 8 20 8"/>
|
|
<line x1="8" y1="13" x2="16" y2="13" opacity="0.4"/>
|
|
<line x1="8" y1="17" x2="13" y2="17" opacity="0.3"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function ChevronRight({ size = 10 }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="9 18 15 12 9 6"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function FolderPlus({ size = 14 }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
|
<line x1="12" y1="11" x2="12" y2="17"/>
|
|
<line x1="9" y1="14" x2="15" y2="14"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
// ===== 拖拽覆盖层图标 =====
|
|
export function UploadCloud({ size = 64 }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/>
|
|
<polyline points="12 16 12 8"/>
|
|
<polyline points="8 12 12 8 16 12"/>
|
|
<line x1="12" y1="16" x2="12" y2="22"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
// ===== 欢迎屏幕图标 =====
|
|
export function WelcomeFile({ size = 20 }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
|
<line x1="12" y1="11" x2="12" y2="17"/>
|
|
<line x1="9" y1="14" x2="15" y2="14"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function WelcomeNew({ size = 20 }: IconProps) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
|
<polyline points="14 2 14 8 20 8"/>
|
|
<line x1="12" y1="18" x2="12" y2="12"/>
|
|
<line x1="9" y1="15" x2="15" y2="15"/>
|
|
</svg>
|
|
)
|
|
}
|