From 03a71bdf94fbaa772435e8c7554bfb533c6397fd Mon Sep 17 00:00:00 2001 From: thzxx Date: Thu, 28 May 2026 15:38:29 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20Gitee=20=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E3=80=81=E5=85=B3=E4=BA=8E=E5=BC=B9=E6=A1=86=EF=BC=8C?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=8F=B7=E6=94=B9=E4=B8=BA=20v0.1.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 工具栏右侧新增 Gitee 图标按钮，点击跳转项目主页 - 工具栏右侧新增关于按钮，点击打开关于弹框 - 关于弹框展示：应用图标、版本号、功能特性、技术栈、版权信息 - 点击弹框外部或关闭按钮可关闭弹框 - 版本号从 v2.0.0 改为 v0.1.0 --- package.json | 2 +- src/renderer/App.tsx | 36 +++++++ src/renderer/components/Icons.tsx | 19 ++++ src/renderer/components/Toolbar/Toolbar.tsx | 19 +++- src/renderer/styles/global.css | 107 ++++++++++++++++++++ 5 files changed, 180 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 72cd50c..44896ac 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "marklite", - "version": "2.0.0", + "version": "0.1.0", "description": "Lightweight Markdown Editor for Windows", "main": "./dist/main/index.js", "scripts": { diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index b3e4936..2a05021 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -19,6 +19,9 @@ import { WelcomeScreen } from './components/WelcomeScreen/WelcomeScreen' import { Toast } from './components/Toast/Toast' import { ModifiedBanner } from './components/ModifiedBanner/ModifiedBanner' import { DropOverlay } from './components/DropOverlay/DropOverlay' +import { AppIcon } from './components/Icons' + +const APP_VERSION = 'v0.1.0' export default function App() { const tabs = useTabStore(s => s.tabs) @@ -38,6 +41,7 @@ export default function App() { const [showModifiedBanner, setShowModifiedBanner] = useState(false) const [modifiedFilePath, setModifiedFilePath] = useState(null) const [toastMessage, setToastMessage] = useState(null) + const [showAbout, setShowAbout] = useState(false) const toastTimer = useRef(0) // 启动时从 IndexedDB 加载标签页和 sidebar 设置 @@ -184,6 +188,7 @@ export default function App() { onViewModeChange={handleViewModeChange} darkMode={darkMode} onToggleDark={toggleDarkMode} + onShowAbout={() => setShowAbout(true)} />
@@ -239,6 +244,37 @@ export default function App() { {toastMessage && } + + {/* 关于弹框 */} + {showAbout && ( +
setShowAbout(false)}> +
e.stopPropagation()}> +
+ +

MarkLite

+ {APP_VERSION} +
+
+

一款轻量级的 Windows 本地 Markdown 编辑器

+
+ 多标签页 + 实时预览 + 代码高亮 + 暗色主题 + 拖拽打开 + 搜索替换 + 文件树 + 状态持久化 +
+
+
+

基于 Electron + React + TypeScript 构建

+

© 2026 thzxx

+
+ +
+
+ )}
) } diff --git a/src/renderer/components/Icons.tsx b/src/renderer/components/Icons.tsx index a0fffeb..53e28af 100644 --- a/src/renderer/components/Icons.tsx +++ b/src/renderer/components/Icons.tsx @@ -104,6 +104,25 @@ export function Sun({ size = defaultProps.size }: IconProps) { ) } +// ===== 工具栏右侧图标 ===== +export function Gitee({ size = defaultProps.size }: IconProps) { + return ( + + + + ) +} + +export function Info({ size = defaultProps.size }: IconProps) { + return ( + + + + + + ) +} + // ===== 标签栏图标 ===== export function Close({ size = 10 }: IconProps) { return ( diff --git a/src/renderer/components/Toolbar/Toolbar.tsx b/src/renderer/components/Toolbar/Toolbar.tsx index ec3b262..f85652b 100644 --- a/src/renderer/components/Toolbar/Toolbar.tsx +++ b/src/renderer/components/Toolbar/Toolbar.tsx @@ -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 (
@@ -36,6 +45,12 @@ export function Toolbar({ onOpen, onSave, viewMode, onViewModeChange, darkMode, + +
) diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css index 9658290..6ac7fd5 100644 --- a/src/renderer/styles/global.css +++ b/src/renderer/styles/global.css @@ -1081,3 +1081,110 @@ html, body { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } + +/* About Dialog */ +.about-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 10000; + animation: fadeIn 0.2s ease; +} + +.about-dialog { + background: var(--bg); + border-radius: 12px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); + padding: 32px; + width: 360px; + max-width: 90vw; + text-align: center; + animation: fadeIn 0.2s ease; +} + +.about-header { + margin-bottom: 20px; +} + +.about-header h2 { + margin: 12px 0 4px; + font-size: 24px; + font-weight: 600; + color: var(--text); +} + +.about-version { + display: inline-block; + background: var(--primary-light); + color: var(--primary); + padding: 2px 10px; + border-radius: 12px; + font-size: 13px; + font-weight: 500; +} + +.about-body { + margin-bottom: 20px; +} + +.about-body > p { + color: var(--text-secondary); + font-size: 14px; + margin-bottom: 16px; +} + +.about-features { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; +} + +.about-features span { + background: var(--bg-secondary); + color: var(--text-secondary); + padding: 4px 12px; + border-radius: 6px; + font-size: 12px; + border: 1px solid var(--border-light); +} + +.about-footer { + padding-top: 16px; + border-top: 1px solid var(--border-light); + margin-bottom: 20px; +} + +.about-footer p { + color: var(--text-tertiary); + font-size: 12px; + margin: 4px 0; +} + +.about-copyright { + font-weight: 500; +} + +.about-close-btn { + width: 100%; + padding: 10px; + background: var(--primary); + color: white; + border: none; + border-radius: 8px; + font-size: 14px; + font-family: var(--font-ui); + font-weight: 500; + cursor: pointer; + transition: background 0.15s ease; +} + +.about-close-btn:hover { + background: var(--primary-dark); +}