Skip to content

Commit 8a389b9

Browse files
zclucaszclucas
authored
Merge pull request #105 from T8numen/codex/Dev_UI-rmt2-webview-Chinese-fo-ahk-error
[codex] refine WebView UI layout
2 parents 2775662 + 0adf246 commit 8a389b9

16 files changed

Lines changed: 153 additions & 63 deletions

‎AGENTS.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Project Instructions
2+
3+
## Project Overview
4+
5+
- RMT is an AutoHotkey v2 macro tool with a React/TypeScript WebView2 UI.
6+
- Key entry points are `RMT.ahk`, `Main\UIUtil.ahk`, `Main\WebView2UI.ahk`, `WebViewApp\src`, `Web\JS\SingleHtml.js`, and `PackRMT.ps1`.
7+
- Treat `WebViewApp` as the source for the new UI. Treat root `index.html` and release folders as generated packaging output unless a task explicitly targets packaged artifacts.
8+
9+
## Build, Test, And Run
10+
11+
- Build the WebView UI with `npm run build` from `WebViewApp`.
12+
- Run the repository verification script with `powershell -ExecutionPolicy Bypass -File .\scripts\verify.ps1 -AhkExe .\.tools\AutoHotkey\v2\AutoHotkey64.exe`.
13+
- Package releases with `powershell -ExecutionPolicy Bypass -File .\PackRMT.ps1 -ReleaseType both -Distribution both -OutputDir C:\tmp\RMTRelease -NoWait` when release validation is required.
14+
- Validate release layout with `powershell -ExecutionPolicy Bypass -File .\scripts\verify-release-layout.ps1 -ReleaseRoot C:\tmp\RMTRelease\RMTv2.0`.
15+
16+
## Coding Conventions
17+
18+
- Keep edits scoped to the requested behavior and follow the existing AutoHotkey, React, TypeScript, and CSS patterns.
19+
- Preserve Simplified Chinese UI copy unless the task explicitly asks for another language.
20+
- Avoid treating `ReleaseX32`, `ReleaseX64`, or other generated staging folders as source of truth.
21+
- Do not fetch, push, tag, publish, or create release artifacts unless the user explicitly asks.
22+
23+
## UI Workflow
24+
25+
- For UI changes, update `WebViewApp\src` first, then build so generated WebView assets stay in sync.
26+
- For live UI development without rebuilding after every edit, run the Vite dev server and start RMT with `RMT_WEBVIEW_DEV=1`; see `docs\development.md`.
27+
- Keep UI compact and practical; use color for state and emphasis, not as unrelated decoration.
28+
- When changing colors or buttons, prefer existing theme/color utilities so controls react consistently to color method changes.
29+
- Verify that button labels fit, especially in macro item rows and settings controls.
30+
31+
## Version And History
32+
33+
- Record maintenance-significant changes in `history.md`.
34+
- Follow existing version and release documentation before bumping versions or archiving packages.
35+
- Do not commit local handoff or temporary planning files unless the user explicitly asks.

‎WebViewApp/dist/assets/main-6EIFqRhE.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

WebViewApp/dist/assets/main-p_kL_GN5.js renamed to WebViewApp/dist/assets/main-9vTrqAc6.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎WebViewApp/dist/assets/main-DcxjBwCV.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎WebViewApp/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>RMT</title>
7-
<script type="module" crossorigin src="./assets/main-p_kL_GN5.js"></script>
8-
<link rel="stylesheet" crossorigin href="./assets/main-DcxjBwCV.css">
7+
<script type="module" crossorigin src="./assets/main-9vTrqAc6.js"></script>
8+
<link rel="stylesheet" crossorigin href="./assets/main-6EIFqRhE.css">
99
</head>
1010
<body>
1111
<div id="root"></div>

‎WebViewApp/src/App.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1307,6 +1307,9 @@ function SettingsPanel({
13071307
<button className="legacy-command" onClick={() => runAction("editCmdTip")} type="button">
13081308
{uiCopy.tool.commandDisplay}
13091309
</button>
1310+
<button className="legacy-command" onClick={() => runAction("openToolRecordSetting")} type="button">
1311+
{uiCopy.tool.recordOptions}
1312+
</button>
13101313
<label className="legacy-check">
13111314
<input type="checkbox" checked={settings.fixedMenuWheel} onChange={(event) => { patchLocalSettings("fixedMenuWheel", event.target.checked); updateSetting("fixedMenuWheel", event.target.checked); }} />
13121315
{uiCopy.settings.fixedMenuWheel}
@@ -1315,9 +1318,6 @@ function SettingsPanel({
13151318
<input type="checkbox" checked={settings.noVariableTip} onChange={(event) => { patchLocalSettings("noVariableTip", event.target.checked); updateSetting("noVariableTip", event.target.checked); }} />
13161319
{uiCopy.settings.noVariableTip}
13171320
</label>
1318-
<button className="legacy-command" onClick={() => runAction("openToolRecordSetting")} type="button">
1319-
{uiCopy.tool.recordOptions}
1320-
</button>
13211321
<label className="legacy-check">
13221322
<input type="checkbox" checked={settings.modalSubGui} onChange={(event) => { patchLocalSettings("modalSubGui", event.target.checked); updateSetting("modalSubGui", event.target.checked); }} />
13231323
{uiCopy.settings.modalSubGui}

‎WebViewApp/src/styles.css‎

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -877,16 +877,18 @@ h2 {
877877
.legacy-switch-grid {
878878
display: grid;
879879
align-items: center;
880-
gap: 12px 28px;
881-
grid-template-columns: repeat(4, max-content);
880+
gap: 10px 22px;
881+
grid-template-columns: repeat(4, minmax(88px, max-content));
882882
}
883883

884884
.legacy-switch-grid .legacy-check,
885885
.legacy-switch-grid .legacy-command {
886+
font-size: 15px;
886887
margin: 0;
888+
min-height: 34px;
887889
min-width: 0;
888-
padding-left: 10px;
889-
padding-right: 10px;
890+
padding-left: 8px;
891+
padding-right: 8px;
890892
}
891893

892894
.legacy-interface-grid {
@@ -931,8 +933,8 @@ h2 {
931933
.help-legacy-page,
932934
.reward-panel,
933935
.thanks-panel {
934-
font-size: 16px;
935-
line-height: 1.65;
936+
font-size: 17px;
937+
line-height: 1.7;
936938
max-width: none;
937939
}
938940

@@ -949,7 +951,7 @@ h2 {
949951
}
950952

951953
.help-supplement {
952-
font-size: 16px;
954+
font-size: 17px;
953955
font-weight: 600;
954956
margin: 0;
955957
text-align: center;
@@ -995,7 +997,7 @@ h2 {
995997
border: 0;
996998
color: var(--rmt-info);
997999
display: inline-flex;
998-
font-size: 16px;
1000+
font-size: 17px;
9991001
gap: 4px;
10001002
margin: 0;
10011003
min-height: 0;
@@ -1432,23 +1434,23 @@ h2 {
14321434

14331435
.classic-app .titlebar {
14341436
background: var(--rmt-title-bg);
1435-
border-bottom: 2px solid var(--rmt-title-bottom);
1437+
border-bottom: 1px solid var(--rmt-title-bottom);
14361438
color: var(--rmt-title-text);
1437-
height: 40px;
1439+
height: 34px;
14381440
}
14391441

14401442
.classic-app .drag-region {
1441-
font-size: 17px;
1443+
font-size: 15px;
14421444
font-weight: 700;
1443-
gap: 8px;
1444-
padding: 0 9px;
1445+
gap: 7px;
1446+
padding: 0 8px;
14451447
}
14461448

14471449
.classic-app .app-icon {
14481450
flex: 0 0 auto;
1449-
height: 28px;
1451+
height: 24px;
14501452
object-fit: contain;
1451-
width: 28px;
1453+
width: 24px;
14521454
}
14531455

14541456
.classic-app .version-label {
@@ -1458,8 +1460,8 @@ h2 {
14581460
.classic-app .window-actions button {
14591461
border-left: 1px solid rgba(0, 0, 0, 0.08);
14601462
color: var(--rmt-title-text);
1461-
height: 40px;
1462-
min-height: 40px;
1463+
height: 34px;
1464+
min-height: 34px;
14631465
}
14641466

14651467
.classic-app .window-actions button:hover {
@@ -1474,7 +1476,7 @@ h2 {
14741476
.classic-body {
14751477
display: grid;
14761478
flex: 1;
1477-
grid-template-columns: 218px minmax(0, 1fr);
1479+
grid-template-columns: 198px minmax(0, 1fr);
14781480
min-height: 0;
14791481
}
14801482

@@ -1483,23 +1485,23 @@ h2 {
14831485
border-right: 1px solid var(--rmt-border);
14841486
display: flex;
14851487
flex-direction: column;
1486-
gap: 12px;
1488+
gap: 10px;
14871489
min-height: 0;
14881490
overflow: hidden;
1489-
padding: 12px 14px 12px;
1491+
padding: 10px 12px;
14901492
z-index: 2;
14911493
}
14921494

14931495
.sidebar-section {
14941496
border-bottom: 1px solid var(--rmt-border);
14951497
display: grid;
1496-
gap: 9px;
1497-
padding-bottom: 14px;
1498+
gap: 8px;
1499+
padding-bottom: 12px;
14981500
}
14991501

15001502
.sidebar-section.global-actions {
15011503
border-bottom: 0;
1502-
gap: 9px;
1504+
gap: 8px;
15031505
}
15041506

15051507
.side-label {
@@ -1509,10 +1511,10 @@ h2 {
15091511

15101512
.config-select-button {
15111513
justify-content: flex-start;
1512-
font-size: 15px;
1513-
min-height: 50px;
1514+
font-size: 14px;
1515+
min-height: 42px;
15141516
overflow: hidden;
1515-
padding: 7px 12px;
1517+
padding: 6px 10px;
15161518
text-overflow: ellipsis;
15171519
width: 100%;
15181520
}
@@ -1521,7 +1523,7 @@ h2 {
15211523
.side-card {
15221524
border-radius: 5px;
15231525
justify-content: center;
1524-
min-height: 38px;
1526+
min-height: 34px;
15251527
width: 100%;
15261528
}
15271529

@@ -1536,37 +1538,34 @@ h2 {
15361538
}
15371539

15381540
.side-button.red {
1539-
background: var(--rmt-danger-soft);
1540-
border-color: var(--rmt-danger);
1541-
color: var(--rmt-danger);
1541+
background: var(--rmt-button-bg);
1542+
border-color: var(--rmt-button-border);
1543+
color: var(--rmt-button-text);
15421544
}
15431545

15441546
.side-button.green:hover,
15451547
.side-button.gray:hover,
1546-
.side-button.blue:hover {
1548+
.side-button.blue:hover,
1549+
.side-button.red:hover {
15471550
background: var(--rmt-button-hover);
15481551
color: var(--rmt-button-hover-text);
15491552
}
15501553

1551-
.side-button.red:hover {
1552-
background: var(--rmt-danger);
1553-
color: #ffffff;
1554-
}
1555-
15561554
.side-card {
15571555
align-items: stretch;
15581556
background: var(--rmt-surface);
15591557
display: grid;
1560-
gap: 7px;
1558+
gap: 5px;
15611559
justify-content: stretch;
1562-
min-height: 76px;
1563-
padding: 9px 12px;
1560+
min-height: 62px;
1561+
padding: 7px 10px;
15641562
text-align: left;
15651563
}
15661564

15671565
.side-card.is-active {
1568-
border-color: var(--rmt-danger);
1569-
color: var(--rmt-danger);
1566+
background: var(--rmt-primary-soft);
1567+
border-color: var(--rmt-primary);
1568+
color: var(--rmt-text);
15701569
}
15711570

15721571
.side-card span {
@@ -1584,22 +1583,22 @@ h2 {
15841583
color: var(--rmt-text);
15851584
display: block;
15861585
font-family: "Cascadia Code", Consolas, monospace;
1587-
font-size: 14px;
1586+
font-size: 13px;
15881587
font-weight: 600;
1589-
padding: 4px 8px;
1588+
padding: 3px 7px;
15901589
text-align: right;
15911590
}
15921591

15931592
.shortcut-line {
1594-
margin-top: -8px;
1593+
margin-top: -6px;
15951594
}
15961595

15971596
.sidebar-save {
15981597
margin-top: auto;
15991598
}
16001599

16011600
.sidebar-save .side-button {
1602-
min-height: 40px;
1601+
min-height: 36px;
16031602
}
16041603

16051604
.classic-main {
@@ -1857,16 +1856,16 @@ h2 {
18571856
.module-macro-row {
18581857
align-items: center;
18591858
display: grid;
1860-
gap: 6px;
1859+
gap: 5px;
18611860
grid-template-columns:
18621861
42px
1863-
minmax(142px, 0.72fr)
1864-
132px
1865-
84px
1866-
68px
1862+
minmax(118px, 0.52fr)
1863+
126px
1864+
80px
1865+
64px
18671866
82px
1868-
84px
1869-
214px;
1867+
78px
1868+
220px;
18701869
min-width: 0;
18711870
}
18721871

@@ -1882,7 +1881,7 @@ h2 {
18821881
}
18831882

18841883
.module-macro-header span:nth-child(2) {
1885-
padding-left: 14px;
1884+
padding-left: 10px;
18861885
text-align: left;
18871886
}
18881887

@@ -2065,12 +2064,13 @@ h2 {
20652064

20662065
.row-actions {
20672066
display: grid;
2068-
gap: 4px;
2069-
grid-template-columns: 62px 78px 62px;
2067+
gap: 3px;
2068+
grid-template-columns: 68px 78px 68px;
20702069
}
20712070

20722071
.row-actions button,
20732072
.row-actions .row-disabled {
2073+
gap: 3px;
20742074
min-width: 0;
20752075
padding-left: 4px;
20762076
padding-right: 4px;

0 commit comments

Comments
 (0)