feat: 添加 Gitee 按钮、关于弹框,版本号改为 v0.1.0

- 工具栏右侧新增 Gitee 图标按钮,点击跳转项目主页
- 工具栏右侧新增关于按钮,点击打开关于弹框
- 关于弹框展示:应用图标、版本号、功能特性、技术栈、版权信息
- 点击弹框外部或关闭按钮可关闭弹框
- 版本号从 v2.0.0 改为 v0.1.0
This commit is contained in:
thzxx
2026-05-28 15:38:29 +08:00
parent 3294dd585c
commit 03a71bdf94
5 changed files with 180 additions and 3 deletions
+19
View File
@@ -104,6 +104,25 @@ export function Sun({ size = defaultProps.size }: IconProps) {
)
}
// ===== 工具栏右侧图标 =====
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 (
+17 -2
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { FolderOpen, Save, EditMode, PreviewMode, Moon, Sun } from '../Icons'
import { FolderOpen, Save, EditMode, PreviewMode, Moon, Sun, Gitee, Info } from '../Icons'
interface ToolbarProps {
onOpen: () => void
@@ -8,9 +8,18 @@ interface ToolbarProps {
onViewModeChange: (mode: 'editor' | 'preview') => void
darkMode: boolean
onToggleDark: () => void
onShowAbout: () => void
}
export function Toolbar({ onOpen, onSave, viewMode, onViewModeChange, darkMode, onToggleDark }: ToolbarProps) {
export function Toolbar({ onOpen, onSave, viewMode, onViewModeChange, darkMode, onToggleDark, onShowAbout }: ToolbarProps) {
const handleOpenGitee = () => {
if (window.electronAPI?.openExternal) {
window.electronAPI.openExternal('https://gitee.com/thzxx/MarkLite')
} else {
window.open('https://gitee.com/thzxx/MarkLite', '_blank')
}
}
return (
<div id="toolbar">
<div className="toolbar-left">
@@ -36,6 +45,12 @@ export function Toolbar({ onOpen, onSave, viewMode, onViewModeChange, darkMode,
<button className="toolbar-btn" onClick={onToggleDark} title="切换暗色主题">
{darkMode ? <Sun size={18} /> : <Moon size={18} />}
</button>
<button className="toolbar-btn" onClick={handleOpenGitee} title="Gitee 项目主页">
<Gitee size={18} />
</button>
<button className="toolbar-btn" onClick={onShowAbout} title="关于">
<Info size={18} />
</button>
</div>
</div>
)