主题与快捷键:透明主题真透明 + 完整 Typora 快捷键

This commit is contained in:
hunter-dev
2026-08-30 23:08:01 +08:00
parent ab46ec3cce
commit 3cc36c6450
18 changed files with 587 additions and 52 deletions
+4 -4
View File
@@ -92,16 +92,16 @@ test('EditorToolbar: 格式按钮可点击生效', async () => {
// 删除线
await a.page.getByTitle('删除线 Alt+Shift+5').click(); await a.page.waitForTimeout(100);
// 行内代码
await a.page.getByTitle('行内代码 Ctrl+E').click(); await a.page.waitForTimeout(100);
await a.page.getByTitle('行内代码 Ctrl+Shift+`').click(); await a.page.waitForTimeout(100);
// 标题
await a.page.getByTitle('一级标题 Ctrl+1').click(); await a.page.waitForTimeout(100);
await a.page.getByTitle('二级标题 Ctrl+2').click(); await a.page.waitForTimeout(100);
await a.page.getByTitle('三级标题 Ctrl+3').click(); await a.page.waitForTimeout(100);
// 列表
await a.page.getByTitle('无序列表 Ctrl+L').click(); await a.page.waitForTimeout(100);
await a.page.getByTitle('有序列表 Ctrl+Shift+O').click(); await a.page.waitForTimeout(100);
await a.page.getByTitle('无序列表 Ctrl+Shift+]').click(); await a.page.waitForTimeout(100);
await a.page.getByTitle('有序列表 Ctrl+Shift+[').click(); await a.page.waitForTimeout(100);
// 代码块
await a.page.getByTitle('代码块 Ctrl+Shift+M').click(); await a.page.waitForTimeout(100);
await a.page.getByTitle('代码块 Ctrl+Shift+K').click(); await a.page.waitForTimeout(100);
// 撤销/重做
await a.page.getByTitle('撤销 Ctrl+Z').click(); await a.page.waitForTimeout(100);
await a.page.getByTitle('重做 Ctrl+Y').click(); await a.page.waitForTimeout(100);
@@ -33,7 +33,7 @@ test('FR-E5:代码块语言下拉切换生效', async () => {
const editor = a.page.locator('.ProseMirror');
await editor.click();
// 插入代码块并输入内容
await a.page.locator('button[title="代码块 Ctrl+Shift+M"]').click();
await a.page.locator('button[title="代码块 Ctrl+Shift+K"]').click();
await a.page.keyboard.type('key: value');
// 代码块顶部应渲染语言下拉
+1 -1
View File
@@ -54,7 +54,7 @@ test('FR-E3:行内代码 + 清除格式 工具栏按钮生效', async () => {
// 行内代码 -> <code>
await editor.click();
await a.page.keyboard.press('Control+A');
await a.page.locator('button[title="行内代码 Ctrl+E"]').click();
await a.page.locator('button[title="行内代码 Ctrl+Shift+`"]').click();
expect(await html()).toContain('<code>');
// 清除格式 -> 移除 <code>
+3 -3
View File
@@ -95,7 +95,7 @@ test('快捷键 Ctrl+Shift+L 大纲面板切换', async () => {
const btns = Array.from(document.querySelectorAll('button'));
return btns.some(b => b.textContent === '大纲');
});
await a.page.keyboard.press('Control+Shift+l');
await a.page.keyboard.press('Control+Shift+1');
await a.page.waitForTimeout(500);
const afterPanel = await a.page.evaluate(() => {
const btns = Array.from(document.querySelectorAll('button'));
@@ -125,7 +125,7 @@ test('快捷键 Ctrl+Shift+, 设置面板', async () => {
await fs.mkdir(ud, { recursive: true }); await fs.mkdir(v, { recursive: true });
const a = await launch(ud);
await a.invoke('vault:switch', { root: v });
await a.page.keyboard.press('Control+Shift+Comma');
await a.page.keyboard.press('Control+Comma');
await expect(a.page.getByText('设置', { exact: true }).first()).toBeVisible({ timeout: 5000 });
await a.page.keyboard.press('Escape');
await a.app.close();
@@ -155,7 +155,7 @@ test('编辑器快捷键:加粗+斜体+行内代码+删除线+清除格式', a
expect(html).toContain('em');
// 行内代码
await a.page.keyboard.press('Control+a');
await a.page.keyboard.press('Control+e');
await a.page.keyboard.press('Control+Shift+Backquote');
await a.page.waitForTimeout(100);
html = await a.page.locator('.ProseMirror').innerHTML();
expect(html).toContain('code');
@@ -0,0 +1,37 @@
import { test, expect } from '@playwright/test';
import { _electron as electron } from 'playwright';
import { promises as fs } from 'node:fs';
import nodePath from 'node:path';
import os from 'node:os';
const MAIN_JS = nodePath.join(process.cwd(), 'dist-electron/main/index.js');
// 透明主题真透明:bgPrimary=transparent 时根背景必须是 alpha=0(配合主进程 transparent:true + backgroundColor:#00000000 + backgroundMaterial:'none' 即可透出下层软件)
test('透明主题:根背景 alpha=0(真透明,可见下层软件)', async () => {
const tmp = await fs.mkdtemp(nodePath.join(os.tmpdir(), 'hn-tr-'));
const ud = nodePath.join(tmp, 'ud'); const v = nodePath.join(tmp, 'v');
await fs.mkdir(ud, { recursive: true }); await fs.mkdir(v, { recursive: true });
const app = await electron.launch({ args: ['--user-data-dir=' + ud, MAIN_JS] });
const page = await app.firstWindow();
await page.waitForLoadState('domcontentloaded');
await page.evaluate(({ root }) => (globalThis as any).dsh.invoke('vault:switch', { root }), { root: v });
// 应用透明主题的 CSS 变量(bgPrimary='transparent'),并移除背景图遮罩
await page.evaluate(() => {
const el = document.documentElement;
el.style.setProperty('--bg-primary', 'transparent');
el.style.setProperty('--bg-secondary', 'rgba(20,20,28,0.5)');
el.style.setProperty('--text-primary', '#ddd');
document.querySelectorAll('div[style*="background-image"]').forEach((n: any) => n.remove());
});
await page.waitForTimeout(400);
const rootBg = await page.evaluate(() => {
const root = document.querySelector('#root > div') as HTMLElement;
if (!root) return null;
return getComputedStyle(root).backgroundColor;
});
console.log('ROOT_BG', rootBg);
expect(rootBg).not.toBeNull();
// 透明背景应为 alpha=0(rgba(0,0,0,0) 或 transparent)
expect(rootBg).toMatch(/rgba\(0, 0, 0, 0\)|transparent/i);
await app.close();
});
@@ -0,0 +1,155 @@
import { test, expect } from '@playwright/test';
import { _electron as electron } from 'playwright';
import { promises as fs } from 'node:fs';
import nodePath from 'node:path';
import os from 'node:os';
const MAIN_JS = nodePath.join(process.cwd(), 'dist-electron/main/index.js');
async function launch(userData: string) {
const app = await electron.launch({ args: ['--user-data-dir=' + userData, MAIN_JS] });
const page = await app.firstWindow();
await page.waitForLoadState('domcontentloaded');
const invoke = (ch: string, args: any) => page.evaluate(({ ch, args }) => (globalThis as any).dsh.invoke(ch, args), { ch, args });
return { app, page, invoke };
}
async function newDoc(a: { page: any; invoke: any }, title: string) {
await a.page.getByRole('button', { name: /新建文档/ }).click();
await a.page.getByPlaceholder(/输入文档标题/).fill(title);
await a.page.getByPlaceholder(/输入文档标题/).press('Enter');
await expect(a.page.getByTestId('tabbar').getByText(title, { exact: true })).toBeVisible({ timeout: 10000 });
}
test('keymap store:完整 Typora 列表无冲突', async () => {
const tmp = await fs.mkdtemp(nodePath.join(os.tmpdir(), 'hn-ty-'));
const ud = nodePath.join(tmp, 'ud'); const v = nodePath.join(tmp, 'v');
await fs.mkdir(ud, { recursive: true }); await fs.mkdir(v, { recursive: true });
const a = await launch(ud);
await a.invoke('vault:switch', { root: v });
const r = await a.page.evaluate(() => {
const store = (window as any).__KEYMAP_STORE__;
if (!store) return { error: 'no store' };
const bs = store.getState().bindings;
const ids = bs.map((b: any) => b.id);
const want = ['newDoc','save','closeTab','reopenTab','openFile','quickOpen','newWindow','saveAs','copyMd','pastePlain','selectLine','selectWord','selectSameFormat','deleteWord','docStart','docEnd','bold','italic','underline','strike','inlineCode','link','insertImage','clearFormat','heading1','heading2','heading3','heading4','heading5','heading6','paragraph','headingUp','headingDown','blockquote','bulletList','orderedList','codeBlock','mathBlock','table','indent','outdent','moveUp','moveDown','toggleSidebar','toggleOutline','toggleInfo','focusMode','typewriter','fullscreen','focusSearch','toggleCheat','toggleSettings','find','replace'];
return { count: bs.length, conflictCount: store.getState().conflictCount(), hasAll: want.every((id: string) => ids.includes(id)) };
});
console.log('TYPORA_STORE', JSON.stringify(r));
expect(r.error).toBeUndefined();
expect(r.conflictCount).toBe(0);
expect(r.count).toBeGreaterThanOrEqual(50);
expect(r.hasAll).toBe(true);
await a.app.close();
});
// 编辑器排版快捷键:行内代码 Ctrl+Shift+`、下划线 Ctrl+U、无序/有序列表、代码块、表格、引用
test('Typora 编辑器快捷键:代码/下划线/列表/代码块/表格/引用', async () => {
const tmp = await fs.mkdtemp(nodePath.join(os.tmpdir(), 'hn-ty2-'));
const ud = nodePath.join(tmp, 'ud'); const v = nodePath.join(tmp, 'v');
await fs.mkdir(ud, { recursive: true }); await fs.mkdir(v, { recursive: true });
const a = await launch(ud);
await a.invoke('vault:switch', { root: v });
await newDoc(a, 'TyporaHK');
const ed = a.page.locator('.ProseMirror');
await ed.click();
const html = async () => (await a.page.locator('.ProseMirror').innerHTML());
// 行内代码 Ctrl+Shift+`
await a.page.keyboard.type('code sample');
await a.page.keyboard.press('Control+a');
await a.page.keyboard.press('Control+Shift+Backquote');
await a.page.waitForTimeout(120);
expect(await html()).toContain('<code>');
// 清除格式后重试下划线 Ctrl+U
await a.page.keyboard.press('Control+a');
await a.page.keyboard.press('Control+\\');
await a.page.keyboard.type('underline text');
await a.page.keyboard.press('Control+a');
await a.page.keyboard.press('Control+u');
await a.page.waitForTimeout(120);
expect(await html()).toContain('<u>');
// 无序列表 Ctrl+Shift+]
await a.page.keyboard.press('Control+a');
await a.page.keyboard.press('Control+Shift+]');
await a.page.waitForTimeout(120);
expect(await html()).toContain('<ul');
// 有序列表 Ctrl+Shift+[
await a.page.keyboard.press('Control+a');
await a.page.keyboard.press('Control+Shift+[');
await a.page.waitForTimeout(120);
expect(await html()).toContain('<ol');
// 代码块 Ctrl+Shift+K
await a.page.keyboard.press('Control+a');
await a.page.keyboard.press('Control+Shift+k');
await a.page.waitForTimeout(120);
expect(await html()).toContain('<pre');
// 表格 Ctrl+T
await a.page.keyboard.press('Control+t');
await a.page.waitForTimeout(150);
expect(await html()).toContain('<table');
// 引用 Ctrl+Shift+Q
await a.page.keyboard.press('Enter');
await a.page.keyboard.press('Control+Shift+q');
await a.page.waitForTimeout(120);
expect(await html()).toContain('<blockquote');
await a.app.close();
});
// 段落移动 Ctrl+Shift+↑/↓ + 选中行 Ctrl+L
test('Typora 段落:Ctrl+Shift+↑/↓ 移动块、Ctrl+L 选中行', async () => {
const tmp = await fs.mkdtemp(nodePath.join(os.tmpdir(), 'hn-ty3-'));
const ud = nodePath.join(tmp, 'ud'); const v = nodePath.join(tmp, 'v');
await fs.mkdir(ud, { recursive: true }); await fs.mkdir(v, { recursive: true });
const a = await launch(ud);
await a.invoke('vault:switch', { root: v });
await newDoc(a, 'BlockHK');
const ed = a.page.locator('.ProseMirror');
await ed.click();
await a.page.keyboard.type('AAAA');
await a.page.keyboard.press('Enter');
await a.page.keyboard.type('BBBB');
// 光标在第二段,Ctrl+Shift+↑ 上移(BBBB 块上移到顶部)
await a.page.keyboard.press('Control+Shift+ArrowUp');
await a.page.waitForTimeout(120);
const text = await a.page.locator('.ProseMirror').innerText();
expect(text.indexOf('BBBB')).toBeLessThan(text.indexOf('AAAA'));
// Ctrl+L 选中当前行
await a.page.keyboard.press('Control+l');
await a.page.waitForTimeout(120);
const sel = await a.page.evaluate(() => {
const s = window.getSelection();
return s ? s.toString() : '';
});
expect(sel.length).toBeGreaterThan(0);
await a.app.close();
});
// 视图快捷键:Ctrl+Shift+L 侧边栏 / Ctrl+Shift+1 大纲 / Ctrl+, 设置
test('Typora 视图:Ctrl+Shift+L 侧边栏 / Ctrl+Shift+1 大纲 / Ctrl+, 设置', async () => {
const tmp = await fs.mkdtemp(nodePath.join(os.tmpdir(), 'hn-ty4-'));
const ud = nodePath.join(tmp, 'ud'); const v = nodePath.join(tmp, 'v');
await fs.mkdir(ud, { recursive: true }); await fs.mkdir(v, { recursive: true });
const a = await launch(ud);
await a.invoke('vault:switch', { root: v });
await newDoc(a, 'ViewHK');
// Ctrl+Shift+L 隐藏侧边栏(搜索框消失)
await a.page.getByPlaceholder(/搜索/).waitFor({ timeout: 5000 });
await a.page.keyboard.press('Control+Shift+l');
await a.page.waitForTimeout(200);
await expect(a.page.getByPlaceholder(/搜索/)).not.toBeVisible({ timeout: 4000 });
// 再次 Ctrl+Shift+L 恢复
await a.page.keyboard.press('Control+Shift+l');
await a.page.waitForTimeout(200);
await expect(a.page.getByPlaceholder(/搜索/)).toBeVisible({ timeout: 4000 });
// Ctrl+Shift+1 大纲面板(右栏 大纲/信息 按钮可见性切换)
const infoBtn = a.page.getByRole('button', { name: '信息' });
const before = await infoBtn.isVisible().catch(() => false);
await a.page.keyboard.press('Control+Shift+1');
await a.page.waitForTimeout(200);
const after = await infoBtn.isVisible().catch(() => false);
expect(before).not.toBe(after);
// Ctrl+, 设置
await a.page.keyboard.press('Control+Comma');
await expect(a.page.getByText('设置', { exact: true }).first()).toBeVisible({ timeout: 5000 });
await a.page.keyboard.press('Escape');
await a.app.close();
});