diff --git a/docs-site/docusaurus.config.ts b/docs-site/docusaurus.config.ts index 9add720d..25eb6a67 100644 --- a/docs-site/docusaurus.config.ts +++ b/docs-site/docusaurus.config.ts @@ -5,7 +5,7 @@ import type * as Preset from '@docusaurus/preset-classic'; const config: Config = { title: 'Dragonfly', tagline: '现代高性能 SSH 客户端', - favicon: 'img/favicon.ico', + favicon: 'img/logo.svg', url: 'https://dragonfly.coderkang.top', baseUrl: '/', @@ -14,7 +14,12 @@ const config: Config = { projectName: 'dragonfly', onBrokenLinks: 'throw', - onBrokenMarkdownLinks: 'warn', + + markdown: { + hooks: { + onBrokenMarkdownLinks: 'warn', + }, + }, i18n: { defaultLocale: 'zh-CN', diff --git a/docs-site/i18n/en/code.json b/docs-site/i18n/en/code.json new file mode 100644 index 00000000..0754c321 --- /dev/null +++ b/docs-site/i18n/en/code.json @@ -0,0 +1,41 @@ +{ + "安全高效的 SSH 连接": { + "message": "Secure & Fast SSH" + }, + "基于 Rust russh 库构建，提供安全、高性能的 SSH 连接。支持密码和密钥认证、代理转发、TOFU 主机密钥验证。": { + "message": "Built on Rust's russh library for secure, high-performance SSH connections. Supports password and key authentication, proxy forwarding, and TOFU host key verification." + }, + "集成 SFTP 文件管理": { + "message": "Integrated SFTP File Manager" + }, + "内置文件浏览器，直接在侧边栏管理远程文件。支持上传、下载、重命名、权限修改等操作，传输进度实时可见。": { + "message": "Built-in file explorer to manage remote files directly from the sidebar. Supports upload, download, rename, permission changes, and real-time transfer progress." + }, + "多标签终端界面": { + "message": "Multi-Tab Terminal" + }, + "同时管理多个 SSH 和本地终端会话。支持 WebGL 硬件加速渲染、自定义字体、关键词高亮、命令历史模糊搜索。": { + "message": "Manage multiple SSH and local terminal sessions simultaneously. WebGL hardware-accelerated rendering, custom fonts, keyword highlighting, and fuzzy command history search." + }, + "高度可定制": { + "message": "Highly Customizable" + }, + "深色/浅色主题切换、可调整面板布局、快捷命令管理、多语言翻译、快捷键自定义，打造专属工作流。": { + "message": "Dark/light theme switching, resizable panel layouts, quick command management, multi-language translation, customizable shortcuts — build your own workflow." + }, + "现代高性能 SSH 客户端": { + "message": "Modern, High-Performance SSH Client" + }, + "基于 Tauri 和 React 构建，跨平台、安全、快速": { + "message": "Built with Tauri and React — cross-platform, secure, and fast" + }, + "快速开始": { + "message": "Get Started" + }, + "首页": { + "message": "Home" + }, + "现代高性能 SSH 客户端，基于 Tauri 和 React 构建": { + "message": "A modern, high-performance SSH client built with Tauri and React" + } +} diff --git a/docs-site/i18n/en/docusaurus-theme-classic/footer.json b/docs-site/i18n/en/docusaurus-theme-classic/footer.json new file mode 100644 index 00000000..d38cf8b5 --- /dev/null +++ b/docs-site/i18n/en/docusaurus-theme-classic/footer.json @@ -0,0 +1,32 @@ +{ + "link.title.文档": { + "message": "Docs" + }, + "link.title.开发": { + "message": "Development" + }, + "link.title.更多": { + "message": "More" + }, + "link.item.label.快速开始": { + "message": "Quick Start" + }, + "link.item.label.使用指南": { + "message": "User Guide" + }, + "link.item.label.架构说明": { + "message": "Architecture" + }, + "link.item.label.贡献指南": { + "message": "Contributing" + }, + "link.item.label.GitHub": { + "message": "GitHub" + }, + "link.item.label.问题反馈": { + "message": "Issues" + }, + "copyright": { + "message": "Copyright © {year} CoderKang. Built with Docusaurus." + } +} diff --git a/docs-site/i18n/en/docusaurus-theme-classic/navbar.json b/docs-site/i18n/en/docusaurus-theme-classic/navbar.json index 1b6d9597..08d7f4b7 100644 --- a/docs-site/i18n/en/docusaurus-theme-classic/navbar.json +++ b/docs-site/i18n/en/docusaurus-theme-classic/navbar.json @@ -2,13 +2,13 @@ "title": { "message": "Dragonfly" }, - "tagline": { - "message": "Modern, High-Performance SSH Client" + "logo.alt": { + "message": "Dragonfly Logo" }, - "theme.docs.sidebar.collapseButtonTitle": { - "message": "Collapse sidebar" + "item.label.文档": { + "message": "Docs" }, - "theme.docs.sidebar.expandButtonTitle": { - "message": "Expand sidebar" + "item.label.GitHub": { + "message": "GitHub" } } diff --git a/docs-site/src/css/custom.css b/docs-site/src/css/custom.css index 0243ccce..e94c4c9c 100644 --- a/docs-site/src/css/custom.css +++ b/docs-site/src/css/custom.css @@ -7,7 +7,14 @@ --ifm-color-primary-lighter: #60a5fa; --ifm-color-primary-lightest: #93bbfd; --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + --ifm-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif; + --ifm-heading-font-weight: 700; + --ifm-footer-background-color: #f8fafc; + --ifm-footer-color: #64748b; + --ifm-footer-link-color: #334155; + --ifm-footer-title-color: #0f172a; + --docusaurus-highlighted-code-line-bg: rgba(37, 99, 235, 0.08); } [data-theme='dark'] { @@ -18,5 +25,37 @@ --ifm-color-primary-light: #93bbfd; --ifm-color-primary-lighter: #bfdbfe; --ifm-color-primary-lightest: #dbeafe; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --ifm-background-color: #0b1120; + --ifm-background-surface-color: #0f172a; + --ifm-footer-background-color: #070d1a; + --ifm-footer-color: #64748b; + --ifm-footer-link-color: #94a3b8; + --ifm-footer-title-color: #e2e8f0; + --docusaurus-highlighted-code-line-bg: rgba(96, 165, 250, 0.1); +} + +/* Smooth transitions for theme switch */ +html { + transition: background-color 0.2s ease, color 0.2s ease; +} + +/* Navbar refinement */ +.navbar { + backdrop-filter: blur(12px); + box-shadow: none; + border-bottom: 1px solid var(--ifm-toc-border-color); +} + +[data-theme='dark'] .navbar { + background: rgba(11, 17, 32, 0.85); +} + +/* Sidebar refinement */ +.theme-doc-sidebar-container { + border-right-color: var(--ifm-toc-border-color) !important; +} + +/* Footer refinement */ +.footer--dark { + --ifm-footer-background-color: #070d1a; } diff --git a/docs-site/src/pages/index.module.css b/docs-site/src/pages/index.module.css index c6ed5cfb..7f4b0638 100644 --- a/docs-site/src/pages/index.module.css +++ b/docs-site/src/pages/index.module.css @@ -1,31 +1,299 @@ +/* ── Hero ── */ + .heroBanner { - padding: 4rem 0; - text-align: center; position: relative; overflow: hidden; + padding: 6rem 2rem 4rem; + text-align: center; + background: linear-gradient(168deg, #f0f5ff 0%, #e8f0fe 40%, #f8faff 100%); +} + +[data-theme='dark'] .heroBanner { + background: linear-gradient(168deg, #0a1628 0%, #101d33 40%, #0d1520 100%); +} + +.heroGlow { + position: absolute; + top: -40%; + left: 50%; + transform: translateX(-50%); + width: 600px; + height: 600px; + border-radius: 50%; + background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%); + pointer-events: none; +} + +[data-theme='dark'] .heroGlow { + background: radial-gradient(circle, rgba(96, 165, 250, 0.06) 0%, transparent 70%); +} + +.heroInner { + position: relative; + z-index: 1; + max-width: 720px; + margin: 0 auto; +} + +.heroLogoWrapper { + display: flex; + justify-content: center; + margin-bottom: 1.5rem; +} + +.heroLogo { + width: 88px; + height: 88px; + border-radius: 22px; + filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.18)); + transition: transform 0.3s ease; +} + +.heroLogo:hover { + transform: scale(1.06) translateY(-2px); +} + +[data-theme='dark'] .heroLogo { + filter: drop-shadow(0 8px 24px rgba(96, 165, 250, 0.2)); +} + +.heroTitle { + font-size: 3.2rem; + font-weight: 800; + letter-spacing: -0.03em; + margin-bottom: 0.5rem; + color: #0f172a; + line-height: 1.15; +} + +[data-theme='dark'] .heroTitle { + color: #f1f5f9; +} + +.heroSubtitle { + font-size: 1.35rem; + font-weight: 500; + color: #475569; + margin-bottom: 0.5rem; +} + +[data-theme='dark'] .heroSubtitle { + color: #94a3b8; } .heroDescription { - font-size: 1.2rem; - opacity: 0.9; + font-size: 1.05rem; + color: #64748b; margin-bottom: 2rem; } -.buttons { +[data-theme='dark'] .heroDescription { + color: #64748b; +} + +.heroButtons { display: flex; align-items: center; justify-content: center; - gap: 1rem; + gap: 0.75rem; + margin-bottom: 2.5rem; } -.features { +.btnPrimary { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); + color: #fff !important; + border: none; + border-radius: 10px; + padding: 0.7rem 1.6rem; + font-weight: 600; + font-size: 0.95rem; + transition: all 0.2s ease; + box-shadow: 0 2px 12px rgba(37, 99, 235, 0.3); +} + +.btnPrimary:hover { + background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%); + box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4); + transform: translateY(-1px); + color: #fff !important; + text-decoration: none; +} + +.btnIcon { + width: 16px; + height: 16px; +} + +.btnSecondary { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: transparent; + color: #334155 !important; + border: 1.5px solid #cbd5e1; + border-radius: 10px; + padding: 0.7rem 1.6rem; + font-weight: 600; + font-size: 0.95rem; + transition: all 0.2s ease; +} + +.btnSecondary:hover { + border-color: #94a3b8; + background: rgba(0, 0, 0, 0.02); + transform: translateY(-1px); + color: #1e293b !important; + text-decoration: none; +} + +[data-theme='dark'] .btnSecondary { + color: #cbd5e1 !important; + border-color: #334155; +} + +[data-theme='dark'] .btnSecondary:hover { + border-color: #475569; + background: rgba(255, 255, 255, 0.04); + color: #e2e8f0 !important; +} + +.btnGithubIcon { + width: 18px; + height: 18px; +} + +/* ── Tech badges ── */ + +.techBadges { display: flex; align-items: center; - padding: 2rem 0; - width: 100%; + justify-content: center; + flex-wrap: wrap; + gap: 0.5rem; } -.featureIcon { - font-size: 3rem; - margin-bottom: 1rem; +.techBadge { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.3rem 0.75rem; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 500; + color: #475569; + background: rgba(255, 255, 255, 0.7); + border: 1px solid #e2e8f0; + backdrop-filter: blur(4px); +} + +[data-theme='dark'] .techBadge { + color: #94a3b8; + background: rgba(255, 255, 255, 0.05); + border-color: #1e293b; +} + +.techDot { + width: 7px; + height: 7px; + border-radius: 50%; + flex-shrink: 0; +} + + +/* ── Features ── */ + +.features { + padding: 4rem 0 5rem; +} + +.featureGrid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; +} + +@media (max-width: 996px) { + .featureGrid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 600px) { + .featureGrid { + grid-template-columns: 1fr; + } + .heroTitle { + font-size: 2.2rem; + } +} + +.featureCard { + padding: 1.75rem 1.5rem; + border-radius: 14px; + border: 1px solid #e2e8f0; + background: #fff; + transition: all 0.25s ease; +} + +.featureCard:hover { + border-color: #bfdbfe; + box-shadow: 0 4px 24px rgba(37, 99, 235, 0.08); + transform: translateY(-2px); +} + +[data-theme='dark'] .featureCard { + background: #0f172a; + border-color: #1e293b; +} + +[data-theme='dark'] .featureCard:hover { + border-color: #1e3a5f; + box-shadow: 0 4px 24px rgba(96, 165, 250, 0.06); +} + +.featureIconWrapper { + width: 44px; + height: 44px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; + background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); + color: #2563eb; +} + +[data-theme='dark'] .featureIconWrapper { + background: linear-gradient(135deg, #172554 0%, #1e3a5f 100%); + color: #60a5fa; +} + +.featureSvg { + width: 22px; + height: 22px; +} + +.featureTitle { + font-size: 1.05rem; + font-weight: 700; + margin-bottom: 0.5rem; + color: #0f172a; +} + +[data-theme='dark'] .featureTitle { + color: #e2e8f0; +} + +.featureDescription { + font-size: 0.88rem; + line-height: 1.6; + color: #64748b; + margin: 0; +} + +[data-theme='dark'] .featureDescription { + color: #94a3b8; } diff --git a/docs-site/src/pages/index.tsx b/docs-site/src/pages/index.tsx index 935ebc9a..80ed7239 100644 --- a/docs-site/src/pages/index.tsx +++ b/docs-site/src/pages/index.tsx @@ -1,5 +1,6 @@ import clsx from 'clsx'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useBaseUrl from '@docusaurus/useBaseUrl'; import Layout from '@theme/Layout'; import Heading from '@theme/Heading'; import Link from '@docusaurus/Link'; @@ -10,7 +11,13 @@ import styles from './index.module.css'; const features = [ { title: 安全高效的 SSH 连接, - icon: '🔒', + icon: ( + + + + + + ), description: ( 基于 Rust russh 库构建，提供安全、高性能的 SSH 连接。支持密码和密钥认证、代理转发、TOFU 主机密钥验证。 @@ -19,7 +26,13 @@ const features = [ }, { title: 集成 SFTP 文件管理, - icon: '📂', + icon: ( + + + + + + ), description: ( 内置文件浏览器，直接在侧边栏管理远程文件。支持上传、下载、重命名、权限修改等操作，传输进度实时可见。 @@ -28,7 +41,12 @@ const features = [ }, { title: 多标签终端界面, - icon: '📑', + icon: ( + + + + + ), description: ( 同时管理多个 SSH 和本地终端会话。支持 WebGL 硬件加速渲染、自定义字体、关键词高亮、命令历史模糊搜索。 @@ -37,7 +55,12 @@ const features = [ }, { title: 高度可定制, - icon: '🎨', + icon: ( + + + + + ), description: ( 深色/浅色主题切换、可调整面板布局、快捷命令管理、多语言翻译、快捷键自定义，打造专属工作流。 @@ -46,15 +69,31 @@ const features = [ }, ]; +const techStack = [ + { name: 'Tauri 2', color: '#FFC131' }, + { name: 'React 19', color: '#61DAFB' }, + { name: 'Rust', color: '#DEA584' }, + { name: 'TypeScript', color: '#3178C6' }, + { name: 'xterm.js', color: '#0EAD69' }, +]; + function HomepageHeader() { const {siteConfig} = useDocusaurusContext(); + const logoUrl = useBaseUrl('/img/logo.svg'); return ( -
-
- +
+
+
+ Dragonfly Logo +
+ {siteConfig.title} -

+

现代高性能 SSH 客户端

@@ -62,32 +101,47 @@ function HomepageHeader() { 基于 Tauri 和 React 构建，跨平台、安全、快速

-
+
快速开始 + + + + + className={clsx('button button--lg', styles.btnSecondary)} + href="https://git.coderkang.top/Tauri/dragonfly"> + + + GitHub
+
+ {techStack.map((tech) => ( + + + {tech.name} + + ))} +
+
); } -function Feature({title, icon, description}: {title: React.ReactNode; icon: string; description: React.ReactNode}) { +function Feature({title, icon, description}: {title: React.ReactNode; icon: React.ReactNode; description: React.ReactNode}) { return ( -
-
-
{icon}
- {title} -

{description}

+
+
+ {icon}
+ {title} +

{description}

); } @@ -96,7 +150,7 @@ function HomepageFeatures() { return (
-
+
{features.map((props, idx) => ( ))} @@ -106,8 +160,8 @@ function HomepageFeatures() { ); } + export default function Home(): React.ReactElement { - const {siteConfig} = useDocusaurusContext(); return ( - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file