Compare commits
7
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
41b1cb1b25 | ||
|
|
c01d3eb365 | ||
|
|
8442103343 | ||
|
|
481f54ed59 | ||
|
|
c94e0fbac7 | ||
|
|
f128c3e8be | ||
|
|
258e5fac0c |
No files matched your search
@@ -0,0 +1,31 @@
|
||||
name: Deploy website to GitHub Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
paths: ['website/**']
|
||||
workflow_dispatch:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
concurrency:
|
||||
group: pages
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: actions/configure-pages@v5
|
||||
- uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: website
|
||||
- id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
@@ -1,5 +1,17 @@
|
||||
# OpenTerminal Changelog
|
||||
|
||||
## v1.0.15 - 2026-09-20
|
||||
|
||||
- **Custom terminal background image**: Settings → Theme → Background image lets you use any local image as the terminal background, with 10%–100% image opacity control; removing the image restores the solid background
|
||||
- **Duplicate-name warning in the theme editor**: creating or renaming a theme that collides with a builtin or another custom theme now shows a hint (saving is still allowed)
|
||||
- Theme editor seed colors are normalized; invalid color values can no longer enter custom themes
|
||||
- Corrupted custom theme colors are auto-repaired to defaults with a warning logged
|
||||
|
||||
- The selected item in the settings dialog's left navigation is now white, matching the contrast of unselected items (fixes unreadable blue text on dark backgrounds)
|
||||
- New background-image and opacity controls ship with localized strings in all four languages (zh-CN / zh-TW / en / ja)
|
||||
|
||||
- Added freeze-duration probes for the renderer and main process to help diagnose future "not responding" reports
|
||||
|
||||
## v1.0.14 - 2026-09-20
|
||||
|
||||
- Fixed silent corruption of uploaded files **larger than ~250KB** (size looked correct but the content had scrambled bytes)
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
# OpenTerminal 更新履歴
|
||||
|
||||
## v1.0.15 - 2026-09-20
|
||||
|
||||
- **ターミナルの背景画像をカスタマイズ**:設定 → テーマ → 背景画像で、任意のローカル画像をターミナルの背景に指定でき、画像の不透明度(10%~100%)も調整可能。画像を削除すると単色背景に戻ります
|
||||
- **テーマエディターの名前重複警告**:新規作成・編集時に内蔵テーマや他のテーマと名前が重複すると黄色のヒントを表示(保存は可能)
|
||||
- テーマエディターのシードカラーを自動正規化し、無効なカラー値がカスタムテーマに入らないように
|
||||
- 破損したカスタムテーマのカラーはデフォルト色に自動修復され、警告ログを記録
|
||||
|
||||
- 設定ダイアログ左側ナビの選択中項目の文字を白色に変更し、未選択項目と同じコントラストに(濃い背景で青い文字が見えにくい問題を修正)
|
||||
- 背景画像・不透明度などの新規コントロールと4言語(簡体字/繁体字/英語/日本語)の文言を同時リリース
|
||||
|
||||
- レンダラーとメインプロセスにフリーズ時間の検出ログを追加し、「応答なし」問題の今後の診断に役立てます
|
||||
|
||||
## v1.0.14 - 2026-09-20
|
||||
|
||||
- **約 250KB を超える**アップロードファイルが静かに破損する問題を修正(サイズは正しいのに内容のバイトが乱れる)
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
# OpenTerminal 更新日志
|
||||
|
||||
## v1.0.15 - 2026-09-20
|
||||
|
||||
- **自定义终端背景图片**:设置 → 主题 → 背景图片,可为终端指定任意本地图片作为背景,并支持 10%–100% 的图片不透明度调节;移除图片后恢复纯色背景
|
||||
- **主题编辑器重名提醒**:新建/编辑主题与内置或其他主题重名时给出黄色提示(仍可保存)
|
||||
- 主题编辑器种子颜色自动规范化,非法颜色值不再能进入自定义主题
|
||||
- 自定义主题颜色数据损坏时自动修复为默认色,并记录告警日志
|
||||
|
||||
- 设置弹窗左侧导航选中项文字改为白色,与未选中项对比度一致(修复蓝色文字在深色背景上看不清的问题)
|
||||
- 设置弹窗背景图片、透明度等新增控件与四语言(简/繁/英/日)文案同步上线
|
||||
|
||||
- 渲染进程与主进程新增冻结时长探测日志,便于后续诊断"卡死无响应"类问题
|
||||
|
||||
## v1.0.14 - 2026-09-20
|
||||
|
||||
- 修复上传 **大于约 250KB** 的文件会被静默损坏的问题(文件大小正确但内容出现字节错乱)
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
# OpenTerminal 更新日誌
|
||||
|
||||
## v1.0.15 - 2026-09-20
|
||||
|
||||
- **自訂終端機背景圖片**:設定 → 主題 → 背景圖片,可為終端機指定任意本機圖片作為背景,並支援 10%–100% 的圖片不透明度調整;移除圖片後恢復純色背景
|
||||
- **主題編輯器重名提醒**:新增/編輯主題與內建或其他主題重名時顯示黃色提示(仍可儲存)
|
||||
- 主題編輯器種子顏色自動規範化,非法顏色值不再能進入自訂主題
|
||||
- 自訂主題顏色資料損壞時自動修復為預設色,並記錄警告日誌
|
||||
|
||||
- 設定彈窗左側導覽選取項文字改為白色,與未選取項對比一致(修復藍色文字在深色背景上看不清的問題)
|
||||
- 背景圖片、透明度等新控件與四種語言(簡/繁/英/日)文案同步上線
|
||||
|
||||
- 渲染程序與主程序新增凍結時長探測日誌,便於後續診斷「卡死無反應」類問題
|
||||
|
||||
## v1.0.14 - 2026-09-20
|
||||
|
||||
- 修復上傳 **大於約 250KB** 的檔案會被靜默損壞的問題(檔案大小正確但內容出現位元組錯亂)
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
开源的现代化终端应用:本地终端 + SSH 远程会话 + 分屏管理 + 主题/字体定制。Electron + React + TypeScript,从 0 到 1 独立开发。
|
||||
|
||||
> 产品官网(GitHub Pages):<https://billowliu2.github.io/OpenTerminal/>,源码在 [`website/`](website/)。
|
||||
|
||||
## 快速开始
|
||||
|
||||
```bash
|
||||
|
||||
+2
-2
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "open-terminal",
|
||||
"productName": "OpenTerminal",
|
||||
"version": "1.0.14",
|
||||
"version": "1.0.15",
|
||||
"description": "Open-source terminal with SSH, split panes, themes and fonts",
|
||||
"main": "out/main/index.js",
|
||||
"author": "Bill",
|
||||
"author": "CodingPlan.Site",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
+26
-12
@@ -200,21 +200,35 @@ async function giteaChannel() {
|
||||
for (const [f, name] of ordered) {
|
||||
const stat = fs.statSync(f)
|
||||
const url = `${base}/${encodeURIComponent(name)}`
|
||||
const resp = await fetch(url, {
|
||||
method: 'PUT',
|
||||
headers: { Authorization: `token ${env.GIT_TOKEN}`, 'Content-Type': 'application/octet-stream', 'Content-Length': String(stat.size) },
|
||||
body: fs.createReadStream(f),
|
||||
duplex: 'half'
|
||||
})
|
||||
const put = async () =>
|
||||
fetch(url, {
|
||||
method: 'PUT',
|
||||
headers: { Authorization: `token ${env.GIT_TOKEN}`, 'Content-Type': 'application/octet-stream', 'Content-Length': String(stat.size) },
|
||||
body: fs.createReadStream(f),
|
||||
duplex: 'half'
|
||||
})
|
||||
let resp = await put()
|
||||
console.log(` put ${name}: HTTP ${resp.status}`)
|
||||
if (!resp.ok && (resp.status === 409 || resp.status === 422)) {
|
||||
if (/\d+\.\d+\.\d+/.test(name)) {
|
||||
// Version-named payloads are immutable per release: accept a stored
|
||||
// copy only when it has exactly the same size.
|
||||
if ((await channelFileSize(url)) === stat.size) {
|
||||
console.log(` ${name} is already published with the same size, kept`)
|
||||
continue
|
||||
}
|
||||
} else {
|
||||
// latest.yml / release-notes.md change every release and the atomic
|
||||
// flow no longer wipes the channel up front, so replace them in place.
|
||||
// The swap window is one small file (sub-second), not the whole channel.
|
||||
const del = await fetch(url, { method: 'DELETE', headers: { Authorization: `token ${env.GIT_TOKEN}` } })
|
||||
console.log(` delete old ${name}: HTTP ${del.status}`)
|
||||
resp = await put()
|
||||
console.log(` put ${name}: HTTP ${resp.status}`)
|
||||
}
|
||||
}
|
||||
if (!resp.ok) {
|
||||
const detail = (await resp.text()).slice(0, 200)
|
||||
// Re-publishing the same version can hit an already-stored file; accept it
|
||||
// only when the stored copy has exactly the same size.
|
||||
if ((resp.status === 409 || resp.status === 422) && (await channelFileSize(url)) === stat.size) {
|
||||
console.log(` ${name} is already published with the same size, kept`)
|
||||
continue
|
||||
}
|
||||
throw new Error(`channel put failed (${resp.status}) for ${name}: ${detail}`)
|
||||
}
|
||||
}
|
||||
|
||||
+35
-1
@@ -1,6 +1,7 @@
|
||||
import { app, BrowserWindow, globalShortcut, nativeImage, shell } from 'electron'
|
||||
import { app, BrowserWindow, globalShortcut, net, nativeImage, protocol, shell } from 'electron'
|
||||
import { existsSync } from 'fs'
|
||||
import { join } from 'path'
|
||||
import { pathToFileURL } from 'url'
|
||||
import { isTrustedRendererUrl, registerIpc } from './ipc'
|
||||
import { killAllPtys, killPtysByOwner } from './pty'
|
||||
import { applyStartupSystemSettings, loadSettings } from './settingsStore'
|
||||
@@ -45,6 +46,14 @@ if (!app.isPackaged) {
|
||||
app.setPath('userData', join(app.getPath('appData'), 'OpenTerminal-dev'))
|
||||
}
|
||||
|
||||
// Custom background image (设置 → 主题): the renderer page cannot load file:
|
||||
// subresources directly (Chromium blocks them from non-file origins), so it
|
||||
// references them through this scheme instead. The handler serves exactly one
|
||||
// file — the configured background image — nothing else.
|
||||
protocol.registerSchemesAsPrivileged([
|
||||
{ scheme: 'otimg', privileges: { secure: true, supportFetchAPI: false, corsEnabled: false } }
|
||||
])
|
||||
|
||||
// Single instance: a second launch just surfaces the existing window (pulls
|
||||
// it out of the tray if hidden there) instead of starting another process.
|
||||
// The refused instance skips the whole startup path: `app.quit()` only asks
|
||||
@@ -57,6 +66,19 @@ if (!gotSingleInstanceLock) {
|
||||
app.on('second-instance', () => showOrCreate())
|
||||
|
||||
app.whenReady().then(() => {
|
||||
// Serve the configured background image (path lives in settings; anything
|
||||
// else — including a path that is no longer configured — is refused, so the
|
||||
// protocol cannot be used to read arbitrary files).
|
||||
protocol.handle('otimg', (request) => {
|
||||
const url = new URL(request.url)
|
||||
const requested = decodeURIComponent(url.pathname.replace(/^\//, ''))
|
||||
const allowed = loadSettings().terminal.backgroundImage
|
||||
if (allowed === '' || requested !== allowed || !existsSync(requested)) {
|
||||
return new Response('', { status: 403 })
|
||||
}
|
||||
return net.fetch(pathToFileURL(requested).toString())
|
||||
})
|
||||
|
||||
registerIpc()
|
||||
registerUpdateIpc()
|
||||
// Before the window exists: a renderer-triggered check must not run against
|
||||
@@ -167,6 +189,18 @@ process.on('uncaughtException', (err) => {
|
||||
console.error('[main] uncaughtException:', err)
|
||||
})
|
||||
|
||||
// Diagnostics for "app froze then recovered" reports: WER logs an
|
||||
// AppHangTransient but keeps no stack. A stall of THIS (UI) thread is what
|
||||
// Windows flags as a hang, so measure event-loop lag and say so loudly when
|
||||
// it happens — that distinguishes a main-process block from a renderer one.
|
||||
let lastTick = Date.now()
|
||||
setInterval(() => {
|
||||
const now = Date.now()
|
||||
const lag = now - lastTick - 1000
|
||||
if (lag > 2000) console.error(`[main] event loop stalled ~${lag}ms`)
|
||||
lastTick = now
|
||||
}, 1000).unref()
|
||||
|
||||
app.on('before-quit', () => {
|
||||
// Let window 'close' events pass through so teardown completes.
|
||||
markQuitting()
|
||||
|
||||
@@ -138,11 +138,15 @@ function sanitizeThemes(value: unknown, warnings: Warnings): TerminalTheme[] {
|
||||
: null
|
||||
const colors: ThemeColors = { ...DEFAULT_DARK.colors }
|
||||
const target = colors as unknown as Record<string, string>
|
||||
const HEX_COLOR = /^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i
|
||||
for (const key of THEME_COLOR_KEYS) {
|
||||
const color = candidate?.[key]
|
||||
if (typeof color === 'string' && color !== '') target[key] = color
|
||||
else if (color !== undefined) {
|
||||
warnings.push(`customThemes[${index}].colors.${key} repaired → built-in default`)
|
||||
// Only well-formed hex colours survive: xterm would render anything else
|
||||
// as black, and the theme editor's native colour input needs #rrggbb.
|
||||
if (typeof color === 'string' && HEX_COLOR.test(color.trim())) {
|
||||
target[key] = color.trim()
|
||||
} else if (color !== undefined) {
|
||||
warnings.push(`customThemes[${index}].colors.${key}: not a hex color — repaired`)
|
||||
}
|
||||
}
|
||||
themes.push({
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<title>OpenTerminal</title>
|
||||
<meta
|
||||
http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self' data:"
|
||||
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' file: data: otimg:"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -11,6 +11,19 @@ import { useSettingsStore } from './settings/store'
|
||||
import { mix } from './theme/chrome'
|
||||
import './global.css'
|
||||
|
||||
// Diagnostics: report renderer main-thread freezes after recovery. console.error
|
||||
// is surfaced into the dev terminal by the main process's console-message hook,
|
||||
// so a "卡死又恢复" report tells us which process stalled and for how long.
|
||||
{
|
||||
let lastTick = performance.now()
|
||||
setInterval(() => {
|
||||
const now = performance.now()
|
||||
const lag = now - lastTick - 2000
|
||||
if (lag > 3000) console.error(`[renderer] main thread stalled ~${Math.round(lag)}ms`)
|
||||
lastTick = now
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
// Dev convenience: allow opening the renderer in a plain browser (vite page)
|
||||
// so layout/UX work doesn't require the electron shell. No-op under electron.
|
||||
if (typeof window !== 'undefined' && !window.api) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useMemo } from 'react'
|
||||
import { Button, ColorPicker, Popconfirm } from 'antd'
|
||||
import { Button, ColorPicker, Popconfirm, Slider } from 'antd'
|
||||
import { t } from '@shared/i18n'
|
||||
import type { TerminalSettings } from '@shared/settings'
|
||||
import { DEFAULT_SETTINGS } from '@shared/settings'
|
||||
@@ -46,8 +46,45 @@ export function ThemeSettingsTab({
|
||||
await setCustomThemes(next)
|
||||
}
|
||||
|
||||
const pickImage = async (): Promise<void> => {
|
||||
const files = await window.api.pickFiles()
|
||||
const image = files.find((f) => /\.(png|jpe?g|bmp|gif|webp|avif)$/i.test(f))
|
||||
if (image) await updateTerminal({ backgroundImage: image })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="theme-pane">
|
||||
<div className="theme-accent-row">
|
||||
<div>
|
||||
<div className="settings-block-label">{t('settings.theme.backgroundImage')}</div>
|
||||
<div className="settings-block-hint">{t('settings.theme.backgroundImageDesc')}</div>
|
||||
</div>
|
||||
<div className="theme-accent-controls">
|
||||
<Button size="small" onClick={() => void pickImage()}>
|
||||
{t('settings.theme.chooseImage')}
|
||||
</Button>
|
||||
{settings.terminal.backgroundImage !== '' && (
|
||||
<Button size="small" onClick={() => void updateTerminal({ backgroundImage: '' })}>
|
||||
{t('settings.theme.clearImage')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{settings.terminal.backgroundImage !== '' && (
|
||||
<div className="theme-accent-row">
|
||||
<div>
|
||||
<div className="settings-block-label">{t('settings.theme.imageOpacity')}</div>
|
||||
</div>
|
||||
<Slider
|
||||
style={{ width: 200 }}
|
||||
min={10}
|
||||
max={100}
|
||||
step={5}
|
||||
value={settings.terminal.backgroundImageOpacity}
|
||||
onChange={(v) => void updateTerminal({ backgroundImageOpacity: v })}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="theme-accent-row">
|
||||
<div>
|
||||
<div className="settings-block-label">{t('settings.theme.accent')}</div>
|
||||
|
||||
@@ -44,6 +44,13 @@
|
||||
background: color-mix(in srgb, var(--tab-accent, #3fb950) 16%, transparent);
|
||||
}
|
||||
|
||||
/* antd paints the active tab label in the primary blue, which is hard to read
|
||||
on the accent-tinted row; keep it identical to the inactive labels. The
|
||||
extra .ant-tabs-tab class out-specifies antd's runtime-injected rule. */
|
||||
.settings-body .ant-tabs-left > .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.settings-body .ant-tabs-left > .ant-tabs-nav .ant-tabs-ink-bar {
|
||||
background: var(--tab-accent, #3fb950);
|
||||
}
|
||||
@@ -575,3 +582,11 @@
|
||||
.shortcut-input.is-recording .ant-input {
|
||||
border-color: var(--tab-accent, #3fb950);
|
||||
}
|
||||
|
||||
/* theme editor: duplicate-name notice under the name field */
|
||||
.theme-editor-hint {
|
||||
margin: -4px 0 10px;
|
||||
padding-left: 2px;
|
||||
font-size: 12px;
|
||||
color: #d29922;
|
||||
}
|
||||
@@ -67,8 +67,20 @@ const SEARCH_DECORATIONS: NonNullable<NonNullable<Parameters<SearchAddon['findNe
|
||||
// xterm's default overviewRulerBorder (#7f7f7f) renders as a light vertical line
|
||||
// on the dark surface once scrollback exists. Force it transparent; search-match
|
||||
// marks in the ruler keep their own colors.
|
||||
function withChromeColors(colors: ITheme): ITheme {
|
||||
return { ...colors, overviewRulerBorder: '#00000000' }
|
||||
function withChromeColors(colors: ITheme, transparentBackground: boolean): ITheme {
|
||||
return {
|
||||
...colors,
|
||||
overviewRulerBorder: '#00000000',
|
||||
// While a custom background image is set the xterm surface goes fully
|
||||
// transparent so the image layer behind the host is what shows through.
|
||||
...(transparentBackground ? { background: '#00000000' } : {})
|
||||
}
|
||||
}
|
||||
|
||||
/** URL for a background image, served by the main process's otimg:// handler
|
||||
* (the page itself cannot reference file: paths from non-file origins). */
|
||||
function toFileUrl(path: string): string {
|
||||
return `otimg://bg/${encodeURIComponent(path)}`
|
||||
}
|
||||
|
||||
export interface TerminalHandle {
|
||||
@@ -673,8 +685,9 @@ export const TerminalView: ForwardRefExoticComponent<TerminalViewProps & { ref?:
|
||||
cursorBlink: tSettings.cursorBlink,
|
||||
cursorStyle: tSettings.cursorStyle,
|
||||
cursorInactiveStyle: tSettings.cursorInactiveStyle,
|
||||
theme: withChromeColors(getThemeById(tSettings.themeId, settings.customThemes).colors as ITheme),
|
||||
theme: withChromeColors(getThemeById(tSettings.themeId, settings.customThemes).colors as ITheme, Boolean(tSettings.backgroundImage)),
|
||||
allowProposedApi: true,
|
||||
allowTransparency: true,
|
||||
overviewRuler: { width: 9, showTopBorder: false, showBottomBorder: false },
|
||||
drawBoldTextInBrightColors: true,
|
||||
minContrastRatio: 1,
|
||||
@@ -1009,7 +1022,7 @@ export const TerminalView: ForwardRefExoticComponent<TerminalViewProps & { ref?:
|
||||
// Live-appliable in xterm 6: without this the setting only took effect for
|
||||
// terminals opened after the change, which reads as "the setting is broken".
|
||||
term.options.scrollback = tSettings.scrollback
|
||||
term.options.theme = withChromeColors(getThemeById(tSettings.themeId, settings.customThemes).colors as ITheme)
|
||||
term.options.theme = withChromeColors(getThemeById(tSettings.themeId, settings.customThemes).colors as ITheme, Boolean(tSettings.backgroundImage))
|
||||
scheduleFit()
|
||||
}, [tSettings, settings.customThemes, scheduleFit])
|
||||
|
||||
@@ -1048,7 +1061,13 @@ export const TerminalView: ForwardRefExoticComponent<TerminalViewProps & { ref?:
|
||||
[sessionId]
|
||||
)
|
||||
|
||||
const terminalClassName = useMemo(() => ['terminal-view', className].filter(Boolean).join(' '), [className])
|
||||
const terminalClassName = useMemo(
|
||||
() =>
|
||||
['terminal-view', settings.terminal.backgroundImage !== '' && 'has-bg-image', className]
|
||||
.filter(Boolean)
|
||||
.join(' '),
|
||||
[className, settings.terminal.backgroundImage]
|
||||
)
|
||||
|
||||
/**
|
||||
* [M5] Compute and store the floating popup position so it hugs the text
|
||||
@@ -1277,6 +1296,15 @@ export const TerminalView: ForwardRefExoticComponent<TerminalViewProps & { ref?:
|
||||
</div>
|
||||
)}
|
||||
<div className="terminal-view-dock" ref={hostRef}>
|
||||
{settings.terminal.backgroundImage !== '' && (
|
||||
<div
|
||||
className="term-bg-image"
|
||||
style={{
|
||||
backgroundImage: `url("${toFileUrl(settings.terminal.backgroundImage)}")`,
|
||||
opacity: Math.min(100, Math.max(10, settings.terminal.backgroundImageOpacity)) / 100
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{dead && (
|
||||
<div className="term-dead-mask">
|
||||
<div>{t('terminal.dead.message', { code: exitCode })}</div>
|
||||
|
||||
@@ -15,11 +15,17 @@
|
||||
|
||||
/* xterm.css defaults .xterm-viewport to #000; when the pane height isn't a
|
||||
multiple of the cell height the leftover bottom strip shows that black.
|
||||
Pin it to the (theme-derived) chrome background so the gap is invisible. */
|
||||
.terminal-view .xterm .xterm-viewport {
|
||||
Pin it to the (theme-derived) chrome background so the gap is invisible.
|
||||
With a custom background image the viewport must stay transparent — this
|
||||
opaque layer would cover the .term-bg-image behind the xterm surface. */
|
||||
.terminal-view:not(.has-bg-image) .xterm .xterm-viewport {
|
||||
background-color: var(--chrome-bg);
|
||||
}
|
||||
|
||||
.terminal-view.has-bg-image .xterm .xterm-viewport {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Slim slate scrollbar for the xterm viewport — the native Windows one renders
|
||||
light track + arrow buttons that look broken on the dark surface. The thumb
|
||||
sits inset inside a wider grab lane (transparent border + padding-box clip)
|
||||
@@ -353,6 +359,24 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ---- custom background image (设置 → 主题) ----
|
||||
Sits behind the xterm screen; while an image is set the theme background is
|
||||
transparent (allowTransparency), so this layer is what shows through. */
|
||||
.term-bg-image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.terminal-view-dock > .xterm {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ---- dead process overlay ---- */
|
||||
.term-dead-mask {
|
||||
position: absolute;
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react'
|
||||
import { Input, Modal } from 'antd'
|
||||
import { t } from '@shared/i18n'
|
||||
import type { ThemeColors, TerminalTheme } from '@shared/theme'
|
||||
import { DEFAULT_DARK, getThemeById } from '@shared/theme'
|
||||
import { BUILTIN_THEMES, DEFAULT_DARK, getThemeById } from '@shared/theme'
|
||||
import { useSettingsStore } from '../../settings/store'
|
||||
|
||||
export interface ThemeEditorProps {
|
||||
@@ -49,6 +49,17 @@ const ANSI_KEYS: FieldSpec[] = [
|
||||
{ key: 'brightWhite', label: 'Bright White' }
|
||||
]
|
||||
|
||||
/** The native colour input only accepts #rrggbb: clamp every seeded value so a
|
||||
* hand-edited or migrated theme can't render the picker as solid black. */
|
||||
function normalizeThemeColors(colors: ThemeColors, fallback: ThemeColors): ThemeColors {
|
||||
const out = { ...fallback }
|
||||
for (const key of Object.keys(fallback) as (keyof ThemeColors)[]) {
|
||||
const value = colors[key] ?? ''
|
||||
out[key] = /^#[0-9a-f]{6}$/i.test(value) ? value : (fallback[key] ?? '')
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
export function ThemeEditor({ open, onClose, themeId }: ThemeEditorProps): React.JSX.Element {
|
||||
const settings = useSettingsStore((s) => s.settings)
|
||||
const updateTerminal = useSettingsStore((s) => s.updateTerminal)
|
||||
@@ -64,6 +75,11 @@ export function ThemeEditor({ open, onClose, themeId }: ThemeEditorProps): React
|
||||
const [name, setName] = useState('')
|
||||
const [colors, setColors] = useState<ThemeColors>(DEFAULT_DARK.colors)
|
||||
const [saving, setSaving] = useState(false)
|
||||
/** another theme (builtin or custom) already uses this name (allowed, but the user should know) */
|
||||
const duplicateName =
|
||||
name.trim() !== '' &&
|
||||
(BUILTIN_THEMES.some((th) => th.name === name.trim()) ||
|
||||
settings.customThemes.some((th) => th.id !== themeId && th.name === name.trim()))
|
||||
|
||||
// (re)initialize the form each time the modal opens
|
||||
useEffect(() => {
|
||||
@@ -75,12 +91,12 @@ export function ThemeEditor({ open, onClose, themeId }: ThemeEditorProps): React
|
||||
return
|
||||
}
|
||||
setName(editingTheme.name)
|
||||
setColors({ ...editingTheme.colors })
|
||||
setColors(normalizeThemeColors(editingTheme.colors, DEFAULT_DARK.colors))
|
||||
} else {
|
||||
/** create mode: seed a fresh copy based on the currently active theme */
|
||||
const active = getThemeById(settings.terminal.themeId, settings.customThemes)
|
||||
setName(active.name + t('settings.themeEditor.copySuffix'))
|
||||
setColors({ ...active.colors })
|
||||
setColors(normalizeThemeColors(active.colors, DEFAULT_DARK.colors))
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [open])
|
||||
@@ -141,6 +157,7 @@ export function ThemeEditor({ open, onClose, themeId }: ThemeEditorProps): React
|
||||
maxLength={60}
|
||||
/>
|
||||
</div>
|
||||
{duplicateName && <div className="theme-editor-hint">{t('settings.themeEditor.duplicateName')}</div>}
|
||||
|
||||
<div className="theme-editor-colors">
|
||||
{headerKeys().map((spec) => (
|
||||
|
||||
@@ -139,12 +139,18 @@ const settings: Record<string, string> = {
|
||||
'settings.highlight.builtin.url': 'Web links',
|
||||
'settings.theme.accent': 'Tab accent color',
|
||||
'settings.theme.accentDesc': 'Accent color for the active tab border, the sidebar indicator, and SSH badges',
|
||||
'settings.theme.backgroundImage': 'Background image',
|
||||
'settings.theme.backgroundImageDesc': 'Show an image behind the terminal; remove it to go back to a solid background',
|
||||
'settings.theme.chooseImage': 'Choose image',
|
||||
'settings.theme.clearImage': 'Remove',
|
||||
'settings.theme.imageOpacity': 'Image opacity',
|
||||
'settings.theme.customBadge': 'Custom',
|
||||
'settings.theme.deleteTitle': 'Delete custom theme',
|
||||
'settings.theme.create': 'New theme',
|
||||
'settings.theme.editTitle': 'Edit theme',
|
||||
'settings.themeEditor.name': 'Name',
|
||||
'settings.themeEditor.namePlaceholder': 'Theme name',
|
||||
'settings.themeEditor.duplicateName': 'Same name as another theme (saving is still allowed)',
|
||||
'settings.themeEditor.copySuffix': ' (copy)',
|
||||
'settings.about.currentVersion': 'Current version',
|
||||
'settings.about.statusIdle': 'Click to check for updates',
|
||||
|
||||
@@ -136,12 +136,18 @@ const settings: Record<string, string> = {
|
||||
'settings.highlight.builtin.url': 'ウェブリンク',
|
||||
'settings.theme.accent': 'タブのアクセントカラー',
|
||||
'settings.theme.accentDesc': 'アクティブなタブの枠線、サイドバーのインジケーター、SSH バッジのアクセントカラー',
|
||||
'settings.theme.backgroundImage': '背景画像',
|
||||
'settings.theme.backgroundImageDesc': 'ターミナルの背後に画像を表示します。削除すると無地の背景に戻ります',
|
||||
'settings.theme.chooseImage': '画像を選択',
|
||||
'settings.theme.clearImage': '削除',
|
||||
'settings.theme.imageOpacity': '画像の不透明度',
|
||||
'settings.theme.customBadge': 'カスタム',
|
||||
'settings.theme.deleteTitle': 'カスタムテーマを削除',
|
||||
'settings.theme.create': '新しいテーマ',
|
||||
'settings.theme.editTitle': 'テーマを編集',
|
||||
'settings.themeEditor.name': '名前',
|
||||
'settings.themeEditor.namePlaceholder': 'テーマ名',
|
||||
'settings.themeEditor.duplicateName': '他のテーマと同名です(保存は可能)',
|
||||
'settings.themeEditor.copySuffix': '(コピー)',
|
||||
'settings.about.currentVersion': '現在のバージョン',
|
||||
'settings.about.statusIdle': 'クリックして更新を確認',
|
||||
|
||||
@@ -133,12 +133,18 @@ const settings: Record<string, string> = {
|
||||
'settings.highlight.builtin.url': '网址链接',
|
||||
'settings.theme.accent': '标签强调色',
|
||||
'settings.theme.accentDesc': '活动标签边框、侧栏指示条与 SSH 徽章的强调颜色',
|
||||
'settings.theme.backgroundImage': '背景图片',
|
||||
'settings.theme.backgroundImageDesc': '为终端设置一张背景图片;移除后恢复纯色背景',
|
||||
'settings.theme.chooseImage': '选择图片',
|
||||
'settings.theme.clearImage': '移除图片',
|
||||
'settings.theme.imageOpacity': '图片不透明度',
|
||||
'settings.theme.customBadge': '自定义',
|
||||
'settings.theme.deleteTitle': '删除自定义主题',
|
||||
'settings.theme.create': '新建主题',
|
||||
'settings.theme.editTitle': '编辑主题',
|
||||
'settings.themeEditor.name': '名称',
|
||||
'settings.themeEditor.namePlaceholder': '主题名称',
|
||||
'settings.themeEditor.duplicateName': '与其他主题重名,仍可保存',
|
||||
'settings.themeEditor.copySuffix': '(副本)',
|
||||
'settings.about.currentVersion': '当前版本',
|
||||
'settings.about.statusIdle': '点击检查更新',
|
||||
|
||||
@@ -133,12 +133,18 @@ const settings: Record<string, string> = {
|
||||
'settings.highlight.builtin.url': '網址連結',
|
||||
'settings.theme.accent': '標籤強調色',
|
||||
'settings.theme.accentDesc': '作用中標籤的邊框、側邊欄指示條與 SSH 徽章的強調顏色',
|
||||
'settings.theme.backgroundImage': '背景圖片',
|
||||
'settings.theme.backgroundImageDesc': '為終端設定一張背景圖片;移除後恢復純色背景',
|
||||
'settings.theme.chooseImage': '選擇圖片',
|
||||
'settings.theme.clearImage': '移除圖片',
|
||||
'settings.theme.imageOpacity': '圖片不透明度',
|
||||
'settings.theme.customBadge': '自訂',
|
||||
'settings.theme.deleteTitle': '刪除自訂主題',
|
||||
'settings.theme.create': '新增主題',
|
||||
'settings.theme.editTitle': '編輯主題',
|
||||
'settings.themeEditor.name': '名稱',
|
||||
'settings.themeEditor.namePlaceholder': '主題名稱',
|
||||
'settings.themeEditor.duplicateName': '與其他主題同名,仍可儲存',
|
||||
'settings.themeEditor.copySuffix': '(副本)',
|
||||
'settings.about.currentVersion': '目前版本',
|
||||
'settings.about.statusIdle': '點擊檢查更新',
|
||||
|
||||
@@ -49,6 +49,10 @@ export interface TerminalSettings {
|
||||
showOpenCwdButton: boolean
|
||||
/** accent color for the active tab outline, rail indicator and SSH badges */
|
||||
tabAccentColor: string
|
||||
/** absolute path to an image rendered behind the terminal; '' = none */
|
||||
backgroundImage: string
|
||||
/** background image layer opacity, 10..100 (%) */
|
||||
backgroundImageOpacity: number
|
||||
}
|
||||
|
||||
export interface SystemSettings {
|
||||
@@ -132,7 +136,9 @@ export const DEFAULT_SETTINGS: AppSettings = {
|
||||
showRecButton: false,
|
||||
showOpenLogsButton: false,
|
||||
showOpenCwdButton: true,
|
||||
tabAccentColor: '#3fb950'
|
||||
tabAccentColor: '#3fb950',
|
||||
backgroundImage: '',
|
||||
backgroundImageOpacity: 60
|
||||
},
|
||||
customThemes: [],
|
||||
highlightRules: DEFAULT_HIGHLIGHT_RULES,
|
||||
|
||||
Whitespace-only changes.
@@ -0,0 +1,67 @@
|
||||
# OpenTerminal 官网
|
||||
|
||||
OpenTerminal 的产品介绍站点,部署在 GitHub Pages。
|
||||
纯静态 HTML + CSS,**无构建步骤、无第三方依赖**,改完即可发布。
|
||||
|
||||
## 线上地址
|
||||
|
||||
- GitHub Pages: `https://billowliu2.github.io/OpenTerminal/`
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
website/
|
||||
├── index.html # 单页站点:功能介绍 / 下载 / 更新日志
|
||||
├── .nojekyll # 让 GitHub Pages 原样托管(跳过 Jekyll 处理)
|
||||
└── assets/
|
||||
├── style.css # 全部样式(企业风浅色主题,单一强调色)
|
||||
├── shot-terminal.png # 主界面截图(四路分屏)
|
||||
├── shot-themes.png # 主题设置页截图
|
||||
└── icon.png # 应用图标(来自仓库 build/icon.png)
|
||||
```
|
||||
|
||||
## 发新版本时需要更新的地方
|
||||
|
||||
`index.html` 中搜索 `1.0.15`,共 3 处下载链接(hero 主按钮、下载表格 exe、msi)。
|
||||
下载链接使用 GitHub Releases 原生地址:
|
||||
|
||||
```
|
||||
https://github.com/billowliu2/OpenTerminal/releases/download/v<版本>/OpenTerminal-<版本>-setup.exe
|
||||
https://github.com/billowliu2/OpenTerminal/releases/download/v<版本>/OpenTerminal-<版本>-setup.msi
|
||||
```
|
||||
|
||||
注意:发布新版本时需同时把安装包资产上传到 GitHub release
|
||||
(`HTTPS_PROXY=http://127.0.0.1:7897 node scripts/release.cjs <版本> --skip-gitea`),
|
||||
否则直链 404。
|
||||
|
||||
同时更新「近期更新」小节(与 RELEASE_NOTES.md 内容保持一致)和下载表格里的文件大小。
|
||||
|
||||
## 部署方式
|
||||
|
||||
GitHub Actions 工作流 `.github/workflows/deploy-website.yml`:
|
||||
push 到 `main` 且 `website/` 下有改动时,自动把 `website/` 目录发布到 GitHub Pages。
|
||||
Gitea(git.codingplan.site)只同步代码,Pages 由 GitHub 侧托管。
|
||||
|
||||
首次部署需要在 GitHub 仓库设置里确认:Settings → Pages → Source 选择
|
||||
"GitHub Actions"(工作流已声明 `pages: write` 与 `id-token: write` 权限)。
|
||||
|
||||
## 本地预览
|
||||
|
||||
无构建步骤,任选其一:
|
||||
|
||||
```bash
|
||||
# Python
|
||||
python -m http.server 8080 --directory website
|
||||
|
||||
# Node
|
||||
npx serve website
|
||||
```
|
||||
|
||||
然后访问 `http://localhost:8080`。直接双击 `index.html` 也可以(无跨域资源)。
|
||||
|
||||
## 设计约定
|
||||
|
||||
- 浅色企业风,避免营销站常见的霓虹/渐变装饰
|
||||
- 强调色仅一个:`#1a7f37`(应用品牌绿 #3fb950 的深色化,保证浅底对比度 ≥ 4.5:1)
|
||||
- 截图来自真实运行界面,与应用内设置一致
|
||||
- 中文为主要语言;字体使用系统栈(Segoe UI / 微软雅黑),不加载外部字体
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
@@ -0,0 +1,364 @@
|
||||
/* OpenTerminal 官网 - 企业风浅色主题
|
||||
单一强调色: 品牌绿 #1a7f37 (深化的 #3fb950, 保证浅底对比度)
|
||||
无渐变 / 无发光 / 无装饰性动画, 仅保留 hover 与 focus 反馈 */
|
||||
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--bg-soft: #f7f8f8;
|
||||
--text: #1c2128;
|
||||
--text-2: #57606a;
|
||||
--border: #d9dee3;
|
||||
--accent: #1a7f37;
|
||||
--accent-hover: #116329;
|
||||
--radius: 8px;
|
||||
--mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.mono { font-family: var(--mono); font-size: 0.92em; }
|
||||
|
||||
/* ---- nav ---- */
|
||||
.site-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-links { display: flex; gap: 28px; }
|
||||
|
||||
.nav-links a {
|
||||
color: var(--text-2);
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.nav-links a:hover { color: var(--text); }
|
||||
|
||||
/* ---- hero ---- */
|
||||
.hero {
|
||||
padding: 72px 0 0;
|
||||
background: var(--bg-soft);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.2fr;
|
||||
gap: 48px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-kicker {
|
||||
font-size: 14px;
|
||||
color: var(--text-2);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 36px;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
margin-top: 20px;
|
||||
max-width: 46ch;
|
||||
color: var(--text-2);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 22px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.btn:active { transform: translateY(1px); }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
|
||||
.btn-ghost {
|
||||
color: var(--text);
|
||||
border-color: var(--border);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.btn-ghost:hover { border-color: var(--text-2); }
|
||||
|
||||
.hero-note {
|
||||
margin-top: 14px;
|
||||
font-size: 13px;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.hero-shot {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hero-shot img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 8px 24px rgba(28, 33, 40, 0.10);
|
||||
}
|
||||
|
||||
.hero-shot figcaption {
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
color: var(--text-2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-strip {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
font-size: 14px;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.spec-strip strong { color: var(--text); font-weight: 600; }
|
||||
|
||||
/* ---- features ---- */
|
||||
.features { padding: 72px 0; }
|
||||
|
||||
.features h2, .download h2, .changelog h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.section-sub {
|
||||
margin-top: 10px;
|
||||
color: var(--text-2);
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
.feature-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 64px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.media-row {
|
||||
grid-template-columns: 7fr 5fr;
|
||||
align-items: center;
|
||||
gap: 56px;
|
||||
}
|
||||
|
||||
.feature-copy h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 650;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feature-copy ul {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.feature-copy li {
|
||||
padding-left: 18px;
|
||||
position: relative;
|
||||
color: var(--text-2);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.feature-copy li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.62em;
|
||||
width: 6px;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.feature-shot img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 6px 18px rgba(28, 33, 40, 0.08);
|
||||
}
|
||||
|
||||
/* ---- download ---- */
|
||||
.download {
|
||||
padding: 72px 0;
|
||||
background: var(--bg-soft);
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.dl-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 40px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
font-size: 14.5px;
|
||||
}
|
||||
|
||||
.dl-table th, .dl-table td {
|
||||
text-align: left;
|
||||
padding: 14px 18px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.dl-table thead th {
|
||||
background: var(--bg-soft);
|
||||
color: var(--text-2);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dl-table tbody tr + tr td { border-top: 1px solid var(--border); }
|
||||
|
||||
.dl-table a { color: var(--accent); text-decoration: none; font-weight: 600; }
|
||||
.dl-table a:hover { text-decoration: underline; }
|
||||
|
||||
.dl-table .sep { color: var(--border); margin: 0 8px; }
|
||||
|
||||
.update-note { margin-top: 40px; max-width: 72ch; }
|
||||
|
||||
.update-note h3 { font-size: 16px; margin-bottom: 8px; }
|
||||
|
||||
.update-note p { color: var(--text-2); font-size: 14.5px; }
|
||||
|
||||
/* ---- changelog ---- */
|
||||
.changelog { padding: 72px 0; }
|
||||
|
||||
.changelog-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 48px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.changelog-list article h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.changelog-list article h3 .mono {
|
||||
color: var(--text);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.changelog-list ul {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.changelog-list li {
|
||||
font-size: 14px;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.changelog-more {
|
||||
margin-top: 40px;
|
||||
font-size: 14px;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.changelog-more a { color: var(--accent); }
|
||||
|
||||
/* ---- footer ---- */
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 28px 0;
|
||||
font-size: 13.5px;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ---- responsive ---- */
|
||||
@media (max-width: 960px) {
|
||||
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
|
||||
.hero { padding-top: 48px; }
|
||||
.feature-row, .media-row { grid-template-columns: 1fr; gap: 32px; }
|
||||
.media-row .feature-shot { order: -1; }
|
||||
.changelog-list { grid-template-columns: 1fr; gap: 32px; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.nav-links { gap: 16px; }
|
||||
.nav-links a { font-size: 14px; }
|
||||
.hero h1 { font-size: 30px; }
|
||||
.dl-table { display: block; overflow-x: auto; white-space: nowrap; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>OpenTerminal - 本地终端 / SSH / SFTP 桌面终端,开源 Windows 终端工具</title>
|
||||
<meta name="description" content="OpenTerminal 是开源的 Windows 桌面终端:本地终端、SSH 远程会话、SFTP 文件管理、分屏与广播输入、主题定制。MIT 协议,支持自动更新。" />
|
||||
<link rel="icon" type="image/png" href="assets/icon.png" />
|
||||
<link rel="stylesheet" href="assets/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-nav">
|
||||
<div class="container nav-inner">
|
||||
<a class="brand" href="#top">
|
||||
<img src="assets/icon.png" alt="OpenTerminal 图标" width="24" height="24" />
|
||||
<span>OpenTerminal</span>
|
||||
</a>
|
||||
<nav class="nav-links">
|
||||
<a href="#features">功能</a>
|
||||
<a href="#download">下载</a>
|
||||
<a href="#changelog">更新日志</a>
|
||||
<a href="https://github.com/billowliu2/OpenTerminal" target="_blank" rel="noopener">GitHub</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="top">
|
||||
|
||||
<section class="hero">
|
||||
<div class="container hero-grid">
|
||||
<div class="hero-copy">
|
||||
<p class="hero-kicker">开源桌面终端 · MIT 协议</p>
|
||||
<h1>本地终端、SSH 与 SFTP<br />装进同一个桌面应用</h1>
|
||||
<p class="hero-sub">
|
||||
OpenTerminal 面向开发和运维场景:WebGL 加速的终端渲染、可分屏的 SSH 会话、
|
||||
内置 SFTP 文件管理与广播输入。安装即用,支持自动更新。
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-primary" id="dl-exe" href="https://github.com/billowliu2/OpenTerminal/releases/download/v1.0.15/OpenTerminal-1.0.15-setup.exe">
|
||||
下载 Windows 安装包
|
||||
</a>
|
||||
<a class="btn btn-ghost" href="https://github.com/billowliu2/OpenTerminal" target="_blank" rel="noopener">
|
||||
查看源码
|
||||
</a>
|
||||
</div>
|
||||
<p class="hero-note">当前版本 v1.0.15 · 提供 exe 与 msi 安装包。</p>
|
||||
</div>
|
||||
<figure class="hero-shot">
|
||||
<img src="assets/shot-terminal.png" alt="OpenTerminal 主界面:四个分屏终端会话" width="1282" height="801" />
|
||||
<figcaption>四路分屏会话,每路独立连接本地或远程主机</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="container spec-strip">
|
||||
<span>当前版本 <strong class="mono">1.0.15</strong></span>
|
||||
<span>Windows 10 / 11 · x64</span>
|
||||
<span>MIT 开源协议</span>
|
||||
<span>exe 支持应用内自动更新</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features" id="features">
|
||||
<div class="container">
|
||||
<h2>核心能力</h2>
|
||||
<p class="section-sub">按使用场景划分的三组功能,全部能力见仓库 README。</p>
|
||||
|
||||
<div class="feature-row">
|
||||
<div class="feature-copy">
|
||||
<h3>终端核心</h3>
|
||||
<ul>
|
||||
<li>node-pty 本地会话,自动探测 PowerShell / zsh / bash</li>
|
||||
<li>xterm.js WebGL 渲染,声明 256 色与真彩能力,异常时自动降级</li>
|
||||
<li>内嵌搜索(Ctrl+F)、命令历史、粘贴风险确认</li>
|
||||
<li>关键词高亮:内置 11 条规则(错误状态、路径、IP、URL 等),支持自定义正则</li>
|
||||
<li>字体、字重、字距、行高、光标样式实时生效</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-copy">
|
||||
<h3>SSH 与 SFTP</h3>
|
||||
<ul>
|
||||
<li>ssh2 实现:密码、私钥(文件或粘贴内容)、SSH Agent 三种认证</li>
|
||||
<li>多路分屏与广播输入,一次操作下发到多台主机</li>
|
||||
<li>SFTP 文件面板:上传下载、同名覆盖确认、chmod / chown 权限编辑</li>
|
||||
<li>ZMODEM 传输支持;主机指纹校验与首次连接确认</li>
|
||||
<li>目录记忆:OSC 7 上报工作目录,新会话按上次位置恢复</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-row media-row">
|
||||
<figure class="feature-shot">
|
||||
<img src="assets/shot-themes.png" alt="OpenTerminal 主题设置:主题画廊与背景图片配置" width="1282" height="801" />
|
||||
</figure>
|
||||
<div class="feature-copy">
|
||||
<h3>定制与效率</h3>
|
||||
<ul>
|
||||
<li>主题编辑器:22 个颜色位逐项调整,实时预览;支持自定义背景图片与不透明度</li>
|
||||
<li>内置 13 套主题,跟随系统明暗自动切换</li>
|
||||
<li>命令库:保存常用命令片段,跨会话发送到指定终端</li>
|
||||
<li>启动恢复上次会话布局;界面缩放 50% 至 150%</li>
|
||||
<li>四语言界面:简体中文、繁体中文、English、日本語</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="download" id="download">
|
||||
<div class="container">
|
||||
<h2>下载</h2>
|
||||
<p class="section-sub">
|
||||
从 GitHub Releases 下载;全部历史版本在同一页面。
|
||||
<!-- 发新版本时更新下方两条直链与 hero 的 id=dl-exe 链接 -->
|
||||
</p>
|
||||
<table class="dl-table">
|
||||
<thead>
|
||||
<tr><th>安装包</th><th>适用场景</th><th>大小</th><th>链接</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="mono">OpenTerminal-1.0.15-setup.exe</td>
|
||||
<td>常规安装,支持应用内自动更新(推荐)</td>
|
||||
<td class="mono">122 MB</td>
|
||||
<td>
|
||||
<a href="https://github.com/billowliu2/OpenTerminal/releases/download/v1.0.15/OpenTerminal-1.0.15-setup.exe">下载</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mono">OpenTerminal-1.0.15-setup.msi</td>
|
||||
<td>企业批量部署(MSI 无自动更新,需手动升级)</td>
|
||||
<td class="mono">135 MB</td>
|
||||
<td>
|
||||
<a href="https://github.com/billowliu2/OpenTerminal/releases/download/v1.0.15/OpenTerminal-1.0.15-setup.msi">下载</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mono">历史版本</td>
|
||||
<td>全部发布记录与更新说明</td>
|
||||
<td class="mono">-</td>
|
||||
<td>
|
||||
<a href="https://github.com/billowliu2/OpenTerminal/releases" target="_blank" rel="noopener">releases 列表</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="update-note">
|
||||
<h3>自动更新说明</h3>
|
||||
<p>
|
||||
应用内检查更新优先访问 git.codingplan.site 更新通道,失败时回退 GitHub Releases。
|
||||
更新包经 SHA-512 校验后安装。更新说明文字从发布通道的 release-notes.md 读取,与每次发布同步更新。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="changelog" id="changelog">
|
||||
<div class="container">
|
||||
<h2>近期更新</h2>
|
||||
<div class="changelog-list">
|
||||
<article>
|
||||
<h3><span class="mono">1.0.15</span> 2026-09-20</h3>
|
||||
<ul>
|
||||
<li>新增自定义终端背景图片与图片不透明度设置</li>
|
||||
<li>主题编辑器重名提醒与颜色值校验</li>
|
||||
<li>设置导航选中项文字对比度修复</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<h3><span class="mono">1.0.14</span> 2026-09-20</h3>
|
||||
<ul>
|
||||
<li>修复大文件(约 250KB 以上)上传损坏与 SFTP 句柄泄漏</li>
|
||||
<li>SSH 中文乱码、命令历史错乱等终端修复</li>
|
||||
<li>权限编辑、连接错误提示等 20 余项修复</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<h3><span class="mono">1.0.13</span> 2026-09-20</h3>
|
||||
<ul>
|
||||
<li>命令片段库与广播输入改进</li>
|
||||
<li>监控面板历史曲线实时重绘</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<p class="changelog-more">
|
||||
完整日志见仓库 <a href="https://github.com/billowliu2/OpenTerminal/blob/main/CHANGELOG.md" target="_blank" rel="noopener">CHANGELOG.md</a>。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-inner">
|
||||
<span>© 2026 CodingPlan.Site · OpenTerminal 以 MIT 协议开源</span>
|
||||
<span class="mono">更新通道:git.codingplan.site</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user