initial commit: MD Editor with Tauri + React
This commit is contained in:
29
src/components/Editor.css
Normal file
29
src/components/Editor.css
Normal file
@@ -0,0 +1,29 @@
|
||||
.editor-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-container .cm-editor {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.editor-container .cm-scroller,
|
||||
.editor-container .cm-content,
|
||||
.editor-container .cm-line {
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
.editor-container .cm-tooltip,
|
||||
.editor-container .cm-panel {
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
161
src/components/Editor.tsx
Normal file
161
src/components/Editor.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import {
|
||||
EditorView, keymap, lineNumbers,
|
||||
highlightActiveLine, highlightActiveLineGutter, drawSelection,
|
||||
} from "@codemirror/view";
|
||||
import { EditorState, Compartment } from "@codemirror/state";
|
||||
import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
|
||||
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
|
||||
import { languages } from "@codemirror/language-data";
|
||||
import { syntaxHighlighting, defaultHighlightStyle, bracketMatching } from "@codemirror/language";
|
||||
import { searchKeymap } from "@codemirror/search";
|
||||
import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
|
||||
import { useTheme } from "../context/ThemeContext";
|
||||
import "./Editor.css";
|
||||
|
||||
interface EditorProps {
|
||||
content: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
const UI_FONT = "var(--font-ui)";
|
||||
const CODE_FONT = "var(--font-code)";
|
||||
|
||||
const darkTheme = EditorView.theme(
|
||||
{
|
||||
"&": {
|
||||
height: "100%",
|
||||
fontSize: "15px",
|
||||
fontFamily: UI_FONT,
|
||||
background: "#1e1e1e",
|
||||
color: "#d4d4d4",
|
||||
},
|
||||
".cm-scroller": { overflow: "auto", lineHeight: "1.8", fontFamily: UI_FONT },
|
||||
".cm-content": { padding: "16px", caretColor: "#aeafad", minHeight: "100%", fontFamily: UI_FONT },
|
||||
".cm-line": { fontFamily: UI_FONT, padding: "0 4px" },
|
||||
".cm-cursor": { borderLeftColor: "#aeafad" },
|
||||
".cm-gutters": {
|
||||
background: "#1e1e1e",
|
||||
color: "#6e6e6e",
|
||||
border: "none",
|
||||
borderRight: "1px solid #3e3e42",
|
||||
paddingRight: "8px",
|
||||
fontFamily: CODE_FONT,
|
||||
fontSize: "13px",
|
||||
},
|
||||
".cm-activeLineGutter": { background: "#2a2d2e", color: "#d4d4d4" },
|
||||
".cm-activeLine": { background: "#2a2d2e" },
|
||||
".cm-selectionBackground, ::selection": { background: "#264f78 !important" },
|
||||
".cm-focused .cm-selectionBackground": { background: "#264f78" },
|
||||
".cm-matchingBracket": { background: "#3b514d", outline: "1px solid #888" },
|
||||
"&.cm-focused": { outline: "none" },
|
||||
// 代码块内用等宽字体
|
||||
".ͼ1 .tok-monospace, .cm-content code": { fontFamily: CODE_FONT },
|
||||
},
|
||||
{ dark: true }
|
||||
);
|
||||
|
||||
const lightTheme = EditorView.theme(
|
||||
{
|
||||
"&": {
|
||||
height: "100%",
|
||||
fontSize: "15px",
|
||||
fontFamily: UI_FONT,
|
||||
background: "#ffffff",
|
||||
color: "#1f1f1f",
|
||||
},
|
||||
".cm-scroller": { overflow: "auto", lineHeight: "1.8", fontFamily: UI_FONT },
|
||||
".cm-content": { padding: "16px", caretColor: "#333", minHeight: "100%", fontFamily: UI_FONT },
|
||||
".cm-line": { fontFamily: UI_FONT, padding: "0 4px" },
|
||||
".cm-cursor": { borderLeftColor: "#333" },
|
||||
".cm-gutters": {
|
||||
background: "#f8f8f8",
|
||||
color: "#aaaaaa",
|
||||
border: "none",
|
||||
borderRight: "1px solid #e0e0e0",
|
||||
paddingRight: "8px",
|
||||
fontFamily: CODE_FONT,
|
||||
fontSize: "13px",
|
||||
},
|
||||
".cm-activeLineGutter": { background: "#eff1f7", color: "#333" },
|
||||
".cm-activeLine": { background: "#eff1f7" },
|
||||
".cm-selectionBackground, ::selection": { background: "#b5d5fb !important" },
|
||||
".cm-focused .cm-selectionBackground": { background: "#b5d5fb" },
|
||||
".cm-matchingBracket": { background: "#d8f0d8", outline: "1px solid #aaa" },
|
||||
"&.cm-focused": { outline: "none" },
|
||||
".ͼ1 .tok-monospace, .cm-content code": { fontFamily: CODE_FONT },
|
||||
},
|
||||
{ dark: false }
|
||||
);
|
||||
|
||||
const themeCompartment = new Compartment();
|
||||
|
||||
export default function Editor({ content, onChange }: EditorProps) {
|
||||
const { theme } = useTheme();
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const viewRef = useRef<EditorView | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
const view = new EditorView({
|
||||
state: EditorState.create({
|
||||
doc: content,
|
||||
extensions: [
|
||||
lineNumbers(),
|
||||
highlightActiveLine(),
|
||||
highlightActiveLineGutter(),
|
||||
drawSelection(),
|
||||
bracketMatching(),
|
||||
history(),
|
||||
autocompletion(),
|
||||
markdown({ base: markdownLanguage, codeLanguages: languages }),
|
||||
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
||||
keymap.of([
|
||||
...defaultKeymap,
|
||||
...historyKeymap,
|
||||
...searchKeymap,
|
||||
...completionKeymap,
|
||||
indentWithTab,
|
||||
]),
|
||||
themeCompartment.of(darkTheme),
|
||||
EditorView.updateListener.of((update) => {
|
||||
if (update.docChanged) onChange(update.state.doc.toString());
|
||||
}),
|
||||
EditorView.lineWrapping,
|
||||
],
|
||||
}),
|
||||
parent: containerRef.current,
|
||||
});
|
||||
|
||||
viewRef.current = view;
|
||||
return () => { view.destroy(); };
|
||||
}, []);
|
||||
|
||||
// 动态切换编辑器主题
|
||||
useEffect(() => {
|
||||
const view = viewRef.current;
|
||||
if (!view) return;
|
||||
view.dispatch({
|
||||
effects: themeCompartment.reconfigure(theme === "dark" ? darkTheme : lightTheme),
|
||||
});
|
||||
}, [theme]);
|
||||
|
||||
// 同步外部内容（打开文件等）
|
||||
useEffect(() => {
|
||||
const view = viewRef.current;
|
||||
if (!view) return;
|
||||
const currentDoc = view.state.doc.toString();
|
||||
if (currentDoc !== content) {
|
||||
view.dispatch({
|
||||
changes: { from: 0, to: currentDoc.length, insert: content },
|
||||
});
|
||||
}
|
||||
}, [content]);
|
||||
|
||||
return (
|
||||
<div className="editor-wrapper">
|
||||
<div ref={containerRef} className="editor-container" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
128
src/components/Preview.css
Normal file
128
src/components/Preview.css
Normal file
@@ -0,0 +1,128 @@
|
||||
.preview-wrapper {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
transition: background 0.2s;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .preview-wrapper,
|
||||
.preview-wrapper[data-theme="dark"] {
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
[data-theme="light"] .preview-wrapper,
|
||||
.preview-wrapper[data-theme="light"] {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 40px;
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
/* ─── 深色模式覆盖 ────────────────────────────────── */
|
||||
.markdown-body[data-color-mode="dark"] {
|
||||
background-color: transparent !important;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.markdown-body[data-color-mode="dark"] pre {
|
||||
background-color: #161b22 !important;
|
||||
}
|
||||
|
||||
.markdown-body[data-color-mode="dark"] code:not(pre code) {
|
||||
background-color: rgba(110, 118, 129, 0.2) !important;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.markdown-body[data-color-mode="dark"] blockquote {
|
||||
border-left-color: #30363d;
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.markdown-body[data-color-mode="dark"] table tr {
|
||||
border-top-color: #30363d;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.markdown-body[data-color-mode="dark"] table tr:nth-child(2n) {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.markdown-body[data-color-mode="dark"] table td,
|
||||
.markdown-body[data-color-mode="dark"] table th {
|
||||
border-color: #30363d;
|
||||
}
|
||||
|
||||
.markdown-body[data-color-mode="dark"] hr {
|
||||
border-color: #21262d;
|
||||
}
|
||||
|
||||
.markdown-body[data-color-mode="dark"] h1,
|
||||
.markdown-body[data-color-mode="dark"] h2 {
|
||||
border-bottom-color: #21262d;
|
||||
}
|
||||
|
||||
.markdown-body[data-color-mode="dark"] a {
|
||||
color: #58a6ff;
|
||||
}
|
||||
|
||||
/* ─── 深色模式 highlight.js 覆盖 ─────────────────── */
|
||||
.markdown-body[data-color-mode="dark"] .hljs {
|
||||
background: #161b22;
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.markdown-body[data-color-mode="dark"] .hljs-keyword,
|
||||
.markdown-body[data-color-mode="dark"] .hljs-selector-tag { color: #ff7b72; }
|
||||
|
||||
.markdown-body[data-color-mode="dark"] .hljs-string,
|
||||
.markdown-body[data-color-mode="dark"] .hljs-attr { color: #a5d6ff; }
|
||||
|
||||
.markdown-body[data-color-mode="dark"] .hljs-comment { color: #8b949e; }
|
||||
|
||||
.markdown-body[data-color-mode="dark"] .hljs-number,
|
||||
.markdown-body[data-color-mode="dark"] .hljs-literal { color: #79c0ff; }
|
||||
|
||||
.markdown-body[data-color-mode="dark"] .hljs-title,
|
||||
.markdown-body[data-color-mode="dark"] .hljs-function { color: #d2a8ff; }
|
||||
|
||||
.markdown-body[data-color-mode="dark"] .hljs-type,
|
||||
.markdown-body[data-color-mode="dark"] .hljs-built_in { color: #ffa657; }
|
||||
|
||||
/* ─── 浅色模式 ────────────────────────────────────── */
|
||||
.markdown-body[data-color-mode="light"] {
|
||||
background-color: transparent !important;
|
||||
color: #1f2328;
|
||||
}
|
||||
|
||||
/* ─── 统一选中高亮颜色 ───────────────────────────── */
|
||||
.preview-wrapper *::selection {
|
||||
background: #3390ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .preview-wrapper *::selection,
|
||||
.preview-wrapper[data-theme="dark"] *::selection {
|
||||
background: #264f78;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* ─── 通用字体覆盖 ───────────────────────────────── */
|
||||
.markdown-body {
|
||||
font-family: var(--font-ui) !important;
|
||||
}
|
||||
|
||||
.markdown-body code,
|
||||
.markdown-body pre,
|
||||
.markdown-body pre code,
|
||||
.markdown-body .hljs,
|
||||
.markdown-body tt,
|
||||
.markdown-body kbd,
|
||||
.markdown-body samp {
|
||||
font-family: var(--font-code) !important;
|
||||
}
|
||||
33
src/components/Preview.tsx
Normal file
33
src/components/Preview.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { useEffect, useRef, useMemo } from "react";
|
||||
import { renderMarkdown } from "../lib/markdown";
|
||||
import { useTheme } from "../context/ThemeContext";
|
||||
import "github-markdown-css/github-markdown.css";
|
||||
import "highlight.js/styles/github.css";
|
||||
import "./Preview.css";
|
||||
|
||||
interface PreviewProps {
|
||||
content: string;
|
||||
syncScrollFrom?: number | null;
|
||||
}
|
||||
|
||||
export default function Preview({ content, syncScrollFrom }: PreviewProps) {
|
||||
const { theme } = useTheme();
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const html = useMemo(() => renderMarkdown(content), [content]);
|
||||
|
||||
useEffect(() => {
|
||||
if (syncScrollFrom == null || !containerRef.current) return;
|
||||
const el = containerRef.current;
|
||||
el.scrollTop = syncScrollFrom * (el.scrollHeight - el.clientHeight);
|
||||
}, [syncScrollFrom]);
|
||||
|
||||
return (
|
||||
<div className="preview-wrapper" ref={containerRef} data-theme={theme}>
|
||||
<div
|
||||
className="markdown-body preview-content"
|
||||
data-color-mode={theme}
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
src/components/StatusBar.css
Normal file
40
src/components/StatusBar.css
Normal file
@@ -0,0 +1,40 @@
|
||||
.statusbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 24px;
|
||||
background: var(--bg-statusbar);
|
||||
padding: 0 12px;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
.sb-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sb-item {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sb-path {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.sb-badge {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
padding: 1px 7px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.statusbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
22
src/components/StatusBar.tsx
Normal file
22
src/components/StatusBar.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import "./StatusBar.css";
|
||||
|
||||
interface StatusBarProps {
|
||||
charCount: number;
|
||||
lineCount: number;
|
||||
wordCount: number;
|
||||
filePath: string | null;
|
||||
}
|
||||
|
||||
export default function StatusBar({ charCount, lineCount, wordCount, filePath }: StatusBarProps) {
|
||||
return (
|
||||
<div className="statusbar">
|
||||
<span className="sb-item sb-path">{filePath ?? "未命名"}</span>
|
||||
<div className="sb-right">
|
||||
<span className="sb-item">行数：{lineCount}</span>
|
||||
<span className="sb-item">字数：{wordCount}</span>
|
||||
<span className="sb-item">字符：{charCount}</span>
|
||||
<span className="sb-item sb-badge">Markdown</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
281
src/components/Toolbar.css
Normal file
281
src/components/Toolbar.css
Normal file
@@ -0,0 +1,281 @@
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
background: var(--bg-toolbar);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 0 8px;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.toolbar-left,
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.toolbar-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.toolbar-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1px;
|
||||
padding-left: 6px;
|
||||
border-left: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.tb-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
transition: background 0.15s, color 0.15s;
|
||||
white-space: nowrap;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.tb-btn:hover {
|
||||
background: var(--dropdown-item-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tb-icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 5px;
|
||||
color: var(--text-secondary);
|
||||
transition: background 0.15s, color 0.15s;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.tb-icon-btn:hover,
|
||||
.tb-icon-btn.active {
|
||||
background: var(--dropdown-item-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 0 12px;
|
||||
-webkit-app-region: drag;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.file-name.unsaved {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ─── 视图切换 ───────────────────────────────────── */
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--view-btn-bg);
|
||||
border-radius: 6px;
|
||||
padding: 2px;
|
||||
gap: 1px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
transition: background 0.15s, color 0.15s;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
color: var(--text-secondary);
|
||||
background: var(--dropdown-item-hover);
|
||||
}
|
||||
|
||||
.view-btn.active {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ─── 更多菜单 ────────────────────────────────────── */
|
||||
.more-menu-wrap {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
min-width: 200px;
|
||||
background: var(--bg-dropdown);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
box-shadow: var(--dropdown-shadow);
|
||||
z-index: 1000;
|
||||
animation: dropdownFadeIn 0.1s ease;
|
||||
}
|
||||
|
||||
@keyframes dropdownFadeIn {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
text-align: left;
|
||||
transition: background 0.1s;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: var(--dropdown-item-hover);
|
||||
}
|
||||
|
||||
.dropdown-shortcut {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
.dropdown-separator {
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
margin: 4px 6px;
|
||||
}
|
||||
|
||||
.dropdown-version {
|
||||
padding: 5px 10px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ─── 窗口控制 ────────────────────────────────────── */
|
||||
.window-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
margin-left: 6px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.wc-btn {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
padding: 6px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-clip: content-box;
|
||||
box-sizing: content-box;
|
||||
transition: filter 0.15s, transform 0.1s;
|
||||
-webkit-app-region: no-drag;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wc-btn:hover {
|
||||
filter: brightness(1.25);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.wc-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.wc-btn.minimize { background: #f5a623; }
|
||||
.wc-btn.maximize { background: #27c93f; }
|
||||
.wc-btn.close { background: #ff5f57; }
|
||||
|
||||
/* ─── 手机响应式 ─────────────────────────────────── */
|
||||
@media (max-width: 768px) {
|
||||
.toolbar {
|
||||
height: 48px;
|
||||
padding: 0 6px;
|
||||
gap: 4px;
|
||||
-webkit-app-region: unset;
|
||||
}
|
||||
|
||||
/* 隐藏 macOS 风格窗口控制按钮 */
|
||||
.window-controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 隐藏分屏按钮（手机屏太窄） */
|
||||
.view-btn-split {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 隐藏按钮文字标签，只保留图标 */
|
||||
.tb-btn span,
|
||||
.view-btn-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 隐藏新建 / 保存 / 另存为，只保留打开（⋮ 菜单已包含全部操作） */
|
||||
.tb-btn-new,
|
||||
.tb-btn-save,
|
||||
.tb-btn-saveas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 加大触摸目标高度 */
|
||||
.tb-btn,
|
||||
.view-btn,
|
||||
.tb-icon-btn {
|
||||
min-height: 40px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 12px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
250
src/components/Toolbar.tsx
Normal file
250
src/components/Toolbar.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
import { useRef, useState, useEffect } from "react";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { useTheme } from "../context/ThemeContext";
|
||||
import "./Toolbar.css";
|
||||
|
||||
export type ViewMode = "edit" | "split" | "preview";
|
||||
|
||||
interface ToolbarProps {
|
||||
fileName: string;
|
||||
saved: boolean;
|
||||
viewMode: ViewMode;
|
||||
onViewModeChange: (mode: ViewMode) => void;
|
||||
onNew: () => void;
|
||||
onOpen: () => void;
|
||||
onSave: () => void;
|
||||
onSaveAs: () => void;
|
||||
}
|
||||
|
||||
export default function Toolbar({
|
||||
fileName,
|
||||
saved,
|
||||
viewMode,
|
||||
onViewModeChange,
|
||||
onNew,
|
||||
onOpen,
|
||||
onSave,
|
||||
onSaveAs,
|
||||
}: ToolbarProps) {
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!menuOpen) return;
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
|
||||
setMenuOpen(false);
|
||||
}
|
||||
};
|
||||
const timer = window.setTimeout(() => {
|
||||
document.addEventListener("click", handleClick);
|
||||
}, 0);
|
||||
return () => {
|
||||
window.clearTimeout(timer);
|
||||
document.removeEventListener("click", handleClick);
|
||||
};
|
||||
}, [menuOpen]);
|
||||
|
||||
const handleMenuAction = (action: () => void) => {
|
||||
setMenuOpen(false);
|
||||
action();
|
||||
};
|
||||
|
||||
const runWindowAction = (action: () => Promise<void>) => {
|
||||
action().catch((err) => console.error("窗口操作失败:", err));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="toolbar" data-tauri-drag-region>
|
||||
{/* 左区 — 无 data-tauri-drag-region，依靠 CSS no-drag 覆盖 */}
|
||||
<div className="toolbar-left">
|
||||
<div className="app-logo">
|
||||
<img src="/logo.svg" alt="MD Editor" width={18} height={18} />
|
||||
</div>
|
||||
<div className="toolbar-group">
|
||||
<button type="button" className="tb-btn tb-btn-new" onClick={onNew} title="新建 (Ctrl+N)">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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>
|
||||
<span>新建</span>
|
||||
</button>
|
||||
<button className="tb-btn" onClick={onOpen} title="打开 (Ctrl+O)">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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" />
|
||||
</svg>
|
||||
<span>打开</span>
|
||||
</button>
|
||||
<button className="tb-btn tb-btn-save" onClick={onSave} title="保存 (Ctrl+S)">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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>
|
||||
<span>保存</span>
|
||||
</button>
|
||||
<button className="tb-btn tb-btn-saveas" onClick={onSaveAs} title="另存为 (Ctrl+Shift+S)">
|
||||
<span>另存为</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="toolbar-center">
|
||||
<span
|
||||
className={`file-name ${saved ? "" : "unsaved"}`}
|
||||
data-tauri-drag-region
|
||||
>
|
||||
{saved ? "" : "● "}{fileName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="toolbar-right">
|
||||
<div className="view-toggle">
|
||||
<button className={`view-btn ${viewMode === "edit" ? "active" : ""}`} onClick={() => onViewModeChange("edit")} title="仅编辑">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="16,18 22,12 16,6" /><polyline points="8,6 2,12 8,18" />
|
||||
</svg>
|
||||
<span className="view-btn-label">编辑</span>
|
||||
</button>
|
||||
<button className={`view-btn view-btn-split ${viewMode === "split" ? "active" : ""}`} onClick={() => onViewModeChange("split")} title="分屏视图">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" /><line x1="12" y1="3" x2="12" y2="21" />
|
||||
</svg>
|
||||
<span className="view-btn-label">分屏</span>
|
||||
</button>
|
||||
<button className={`view-btn ${viewMode === "preview" ? "active" : ""}`} onClick={() => onViewModeChange("preview")} title="仅预览">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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" />
|
||||
</svg>
|
||||
<span className="view-btn-label">预览</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 三点更多菜单 */}
|
||||
<div className="more-menu-wrap" ref={menuRef}>
|
||||
<button
|
||||
type="button"
|
||||
className={`tb-icon-btn ${menuOpen ? "active" : ""}`}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setMenuOpen((v) => !v);
|
||||
}}
|
||||
title="更多选项"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<circle cx="12" cy="5" r="2" />
|
||||
<circle cx="12" cy="12" r="2" />
|
||||
<circle cx="12" cy="19" r="2" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{menuOpen && (
|
||||
<div className="dropdown-menu">
|
||||
<button className="dropdown-item" onClick={() => handleMenuAction(toggleTheme)}>
|
||||
{theme === "dark" ? (
|
||||
<>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="5" />
|
||||
<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>
|
||||
切换浅色模式
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||
</svg>
|
||||
切换深色模式
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<div className="dropdown-separator" />
|
||||
<button className="dropdown-item" onClick={() => handleMenuAction(onNew)}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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" />
|
||||
</svg>
|
||||
新建文件
|
||||
<span className="dropdown-shortcut">Ctrl+N</span>
|
||||
</button>
|
||||
<button className="dropdown-item" onClick={() => handleMenuAction(onOpen)}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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" />
|
||||
</svg>
|
||||
打开文件
|
||||
<span className="dropdown-shortcut">Ctrl+O</span>
|
||||
</button>
|
||||
<button className="dropdown-item" onClick={() => handleMenuAction(onSave)}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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>
|
||||
保存
|
||||
<span className="dropdown-shortcut">Ctrl+S</span>
|
||||
</button>
|
||||
<button className="dropdown-item" onClick={() => handleMenuAction(onSaveAs)}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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>
|
||||
另存为
|
||||
<span className="dropdown-shortcut">Ctrl+Shift+S</span>
|
||||
</button>
|
||||
<div className="dropdown-separator" />
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() =>
|
||||
handleMenuAction(() => {
|
||||
invoke<string>("register_file_associations")
|
||||
.then((msg) => alert(msg))
|
||||
.catch((e) => alert("注册失败: " + e));
|
||||
})
|
||||
}
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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>
|
||||
注册右键菜单
|
||||
</button>
|
||||
<div className="dropdown-separator" />
|
||||
<div className="dropdown-version">MD 编辑器 v0.1.0</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="window-controls">
|
||||
<button
|
||||
type="button"
|
||||
className="wc-btn minimize"
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={() => runWindowAction(() => getCurrentWindow().minimize())}
|
||||
title="最小化"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="wc-btn maximize"
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={() => runWindowAction(() => getCurrentWindow().toggleMaximize())}
|
||||
title="最大化"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="wc-btn close"
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={() => runWindowAction(() => getCurrentWindow().close())}
|
||||
title="关闭"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user