Skip to content

Commit 11cc1cc

Browse files
Oli51467Oli51467
committed
perf:input style
1 parent 4a195e3 commit 11cc1cc

File tree

2 files changed

+86
-54
lines changed

2 files changed

+86
-54
lines changed

‎electron/index.html‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -277,26 +277,32 @@ <h1 class="splash-title">LoFS</h1>
277277
</div>
278278
<div id="chat-input-area">
279279
<div id="chat-status-text"></div>
280-
<div id="chat-image-preview" class="chat-image-preview" hidden>
281-
<div id="chat-image-preview-list" class="chat-image-preview-list"></div>
282-
</div>
283280
<div class="chat-input-wrapper">
284-
<button id="chat-upload-btn" class="chat-upload-btn" type="button" aria-label="上传图片">
285-
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
286-
<path d="M4 7h16v12H4z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" fill="none" />
287-
<path d="M4 16l3.5-3.5a2 2 0 0 1 2.9 0L16 18" stroke="currentColor" stroke-width="1.5"
288-
stroke-linecap="round" stroke-linejoin="round" fill="none" />
289-
<circle cx="15.5" cy="11" r="1.75" fill="currentColor" />
290-
</svg>
291-
</button>
292-
<input id="chat-upload-input" type="file" accept="image/*" multiple aria-hidden="true">
293-
<textarea id="chat-input" rows="1" placeholder="询问任何问题" autocomplete="off" spellcheck="false"></textarea>
294-
<button id="chat-send-btn" type="button" aria-label="发送消息">
295-
<svg class="icon-arrow" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
296-
<path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
297-
stroke-linejoin="round" fill="none" />
298-
</svg>
299-
</button>
281+
<div class="chat-input-body">
282+
<div id="chat-image-preview" class="chat-image-preview" hidden>
283+
<div id="chat-image-preview-list" class="chat-image-preview-list"></div>
284+
</div>
285+
<textarea id="chat-input" rows="1" placeholder="询问任何问题" autocomplete="off" spellcheck="false"></textarea>
286+
</div>
287+
<div class="chat-input-actions">
288+
<div class="chat-input-action-left">
289+
<button id="chat-upload-btn" class="chat-upload-btn" type="button" aria-label="上传图片">
290+
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
291+
<path d="M4 7h16v12H4z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" fill="none" />
292+
<path d="M4 16l3.5-3.5a2 2 0 0 1 2.9 0L16 18" stroke="currentColor" stroke-width="1.5"
293+
stroke-linecap="round" stroke-linejoin="round" fill="none" />
294+
<circle cx="15.5" cy="11" r="1.75" fill="currentColor" />
295+
</svg>
296+
</button>
297+
<input id="chat-upload-input" type="file" accept="image/*" multiple aria-hidden="true">
298+
</div>
299+
<button id="chat-send-btn" type="button" aria-label="发送消息">
300+
<svg class="icon-arrow" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
301+
<path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
302+
stroke-linejoin="round" fill="none" />
303+
</svg>
304+
</button>
305+
</div>
300306
</div>
301307
</div>
302308
</div>

‎electron/src/styles/chat.css‎

Lines changed: 61 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1516,64 +1516,77 @@
15161516
max-width: 720px;
15171517
margin: 0 auto;
15181518
display: flex;
1519-
align-items: center;
1519+
flex-direction: column;
1520+
align-items: stretch;
1521+
gap: 0px;
15201522
box-sizing: border-box;
1521-
/* 使最大宽度包含边框和内边距，保证与消息列对齐 */
15221523
border: 1px solid rgba(148, 163, 184, 0.35);
15231524
border-radius: 12px;
15241525
background: var(--bg-color);
15251526
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
1526-
padding: 12px 50px 12px 56px;
1527-
/* 略增上下内边距，稳定整体高度 */
1528-
min-height: 56px;
1529-
/* 稍增最小高度，确保按钮始终可居中 */
1527+
padding: 10px 14px 12px;
1528+
min-height: 58px;
15301529
transition: border-color 0.2s ease, box-shadow 0.2s ease;
15311530
}
15321531

1533-
.dark-mode .chat-input-wrapper {
1534-
border-color: rgba(148, 163, 184, 0.25);
1535-
background: var(--bg-color);
1536-
box-shadow: 0 18px 40px rgba(8, 47, 73, 0.4);
1532+
.chat-input-body {
1533+
display: flex;
1534+
flex-direction: column;
1535+
gap: 3px;
1536+
}
1537+
1538+
.chat-input-actions {
1539+
display: flex;
1540+
align-items: flex-end;
1541+
justify-content: space-between;
1542+
gap: 8px;
1543+
margin-top: -1px;
1544+
}
1545+
1546+
.chat-input-action-left {
1547+
display: flex;
1548+
align-items: center;
1549+
gap: 4px;
15371550
}
15381551

15391552
#chat-upload-input {
15401553
display: none;
15411554
}
15421555

15431556
.chat-upload-btn {
1544-
position: absolute;
1545-
left: 12px;
1546-
top: 50%;
1547-
transform: translateY(-50%);
1548-
width: 32px;
1549-
height: 32px;
1550-
border-radius: 8px;
1557+
width: 30px;
1558+
height: 30px;
1559+
border-radius: 50%;
15511560
border: none;
15521561
background: transparent;
15531562
color: var(--text-muted);
15541563
display: inline-flex;
15551564
align-items: center;
15561565
justify-content: center;
15571566
cursor: pointer;
1558-
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
1567+
padding: 0;
1568+
line-height: 1;
1569+
vertical-align: middle;
15591570
}
15601571

15611572
.chat-upload-btn:hover,
15621573
.chat-upload-btn:focus {
1563-
background: rgba(148, 163, 184, 0.2);
1564-
color: var(--text-color);
15651574
outline: none;
15661575
}
15671576

15681577
.chat-upload-btn:active {
1569-
transform: translateY(-50%) scale(0.95);
1578+
transform: scale(0.95);
15701579
}
15711580

15721581
.chat-upload-btn[disabled] {
15731582
opacity: 0.6;
15741583
cursor: not-allowed;
15751584
background: transparent;
1576-
transform: translateY(-50%);
1585+
transform: none;
1586+
}
1587+
1588+
.dark-mode .chat-upload-btn {
1589+
color: rgba(226, 232, 240, 0.76);
15771590
}
15781591

15791592
.dark-mode .chat-upload-btn:hover,
@@ -1583,13 +1596,11 @@
15831596
}
15841597

15851598
#chat-input {
1586-
flex: 1;
15871599
width: 100%;
15881600
max-height: 320px;
15891601
margin: 0;
1590-
padding: 0;
1591-
/* 保持无额外内边距，避免高度跳变 */
1592-
min-height: 22px;
1602+
padding: 2px 2px 0;
1603+
min-height: 18px;
15931604
border: none;
15941605
font-size: 14px;
15951606
font-family: inherit;
@@ -1598,7 +1609,6 @@
15981609
resize: none;
15991610
overflow-y: hidden;
16001611
line-height: 1.5;
1601-
/* 固定行高，与容器高度配合 */
16021612
}
16031613

16041614
#chat-input::placeholder {
@@ -1614,16 +1624,18 @@
16141624
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
16151625
}
16161626

1627+
.dark-mode .chat-input-wrapper {
1628+
border-color: rgba(148, 163, 184, 0.25);
1629+
background: var(--bg-color);
1630+
box-shadow: 0 18px 40px rgba(8, 47, 73, 0.4);
1631+
}
1632+
16171633
.dark-mode .chat-input-wrapper:focus-within {
16181634
border-color: rgba(148, 163, 184, 0.25);
16191635
box-shadow: 0 20px 48px rgba(8, 47, 73, 0.58);
16201636
}
16211637

16221638
#chat-send-btn {
1623-
position: absolute;
1624-
right: 10px;
1625-
top: 50%;
1626-
transform: translateY(-50%);
16271639
width: 30px;
16281640
height: 30px;
16291641
border-radius: 50%;
@@ -1636,29 +1648,32 @@
16361648
cursor: pointer;
16371649
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
16381650
box-shadow: 0 12px 24px rgba(3, 102, 214, 0.28);
1651+
padding: 0;
1652+
line-height: 1;
1653+
vertical-align: middle;
16391654
}
16401655

16411656
#chat-send-btn:hover:not([disabled]) {
16421657
background: var(--accent-hover);
16431658
box-shadow: 0 16px 34px rgba(3, 102, 214, 0.3);
1644-
transform: translateY(calc(-50% - 1px));
1659+
transform: translateY(-1px);
16451660
}
16461661

16471662
#chat-send-btn:active:not([disabled]) {
1648-
transform: translateY(-50%) scale(0.98);
1663+
transform: scale(0.95);
16491664
}
16501665

16511666
#chat-send-btn:focus,
16521667
#chat-send-btn:focus-visible {
16531668
outline: none;
1654-
transform: translateY(-50%);
1669+
box-shadow: 0 18px 36px rgba(3, 102, 214, 0.36);
16551670
}
16561671

16571672
#chat-send-btn[disabled] {
16581673
opacity: 0.6;
16591674
cursor: not-allowed;
16601675
box-shadow: none;
1661-
transform: translateY(-50%);
1676+
transform: none;
16621677
}
16631678

16641679
#chat-send-btn .icon-arrow {
@@ -1673,6 +1688,17 @@
16731688
pointer-events: none;
16741689
}
16751690

1691+
.chat-upload-btn svg,
1692+
#chat-send-btn svg {
1693+
display: block;
1694+
}
1695+
1696+
.chat-upload-btn svg {
1697+
width: 21px;
1698+
height: 21px;
1699+
transform: translate(-3px, 4px);
1700+
}
1701+
16761702
#chat-image-preview[hidden] {
16771703
display: none;
16781704
}

0 commit comments

Comments
 (0)