Skip to content

Commit 5119001

Browse files
StdioAStdioA
committed
Set max-witdh & list auto-scroll
1 parent 322702c commit 5119001

File tree

6 files changed

+33
-19
lines changed

6 files changed

+33
-19
lines changed

frontend/dist/assets/index-BEN40OWR.css renamed to frontend/dist/assets/index-DElZssqo.css

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

frontend/dist/assets/index-DaYPQUb7.js renamed to frontend/dist/assets/index-Pi7C6stw.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.

‎frontend/dist/index.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@
1313
<script>
1414

1515
</script>
16-
<script type="module" crossorigin src="/assets/index-DaYPQUb7.js"></script>
17-
<link rel="stylesheet" crossorigin href="/assets/index-BEN40OWR.css">
16+
<script type="module" crossorigin src="/assets/index-Pi7C6stw.js"></script>
17+
<link rel="stylesheet" crossorigin href="/assets/index-DElZssqo.css">
1818
<link rel="manifest" href="/manifest.webmanifest"></head>
1919
<body class="bg-gray-50">
20-
<div id="app" class="flex flex-col h-dvh">
20+
<div id="app" class="flex flex-col h-dvh max-w-4xl mx-auto">
2121
<!-- 选项卡导航 -->
22-
<div class="flex-shrink-0 bg-white z-10 border-b-gray-700">
22+
<div class="flex-grow-0 flex-shrink-0 bg-white border-b-gray-700">
2323
<div class="flex">
2424
<button data-tab-button="history" class="flex-1 py-3 px-4 bg-blue-500 text-white" data-i18n="history">
2525
History
@@ -31,13 +31,17 @@
3131
</div>
3232

3333
<!-- 历史记录 -->
34-
<div id="message-history" data-tab="history" class="flex-1 p-4 space-y-3 overflow-y-scroll"></div>
34+
<div id="message-history" data-tab="history" class="flex-1 overflow-y-scroll">
35+
<div class="flex flex-col items-center p-4 space-y-3"></div>
36+
</div>
3537
<!-- 收藏夹 -->
36-
<div id="message-favorites" data-tab="favorites" class="flex-1 hidden p-4 space-y-3 overflow-y-scroll"></div>
38+
<div id="message-favorites" data-tab="favorites" class="flex-1 hidden overflow-y-scroll">
39+
<div class="flex flex-col items-center p-4 space-y-3"></div>
40+
</div>
3741

3842
<!-- 底部输入栏 -->
39-
<div class="flex-shrink-0 left-0 right-0 bg-white border-t-gray-400">
40-
<div class="container max-w-3xl mx-auto px-4 py-4">
43+
<div class="flex-grow-0 flex-shrink-0 bg-white border-t-gray-400">
44+
<div class="container max-w-4xl mx-auto px-4 py-4">
4145
<!-- 生成结果预览 -->
4246
<div id="transaction-dialog" class="hidden mb-4 border rounded-lg p-2 bg-gray-50">
4347
<pre id="transaction-text" class="text-sm mb-3 overflow-x-scroll"></pre>

‎frontend/dist/sw.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.

‎frontend/index.html‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
</script>
1717
</head>
1818
<body class="bg-gray-50">
19-
<div id="app" class="flex flex-col h-dvh">
19+
<div id="app" class="flex flex-col h-dvh max-w-4xl mx-auto">
2020
<!-- 选项卡导航 -->
21-
<div class="flex-shrink-0 bg-white z-10 border-b-gray-700">
21+
<div class="flex-grow-0 flex-shrink-0 bg-white border-b-gray-700">
2222
<div class="flex">
2323
<button data-tab-button="history" class="flex-1 py-3 px-4 bg-blue-500 text-white" data-i18n="history">
2424
History
@@ -30,13 +30,17 @@
3030
</div>
3131

3232
<!-- 历史记录 -->
33-
<div id="message-history" data-tab="history" class="flex-1 p-4 space-y-3 overflow-y-scroll"></div>
33+
<div id="message-history" data-tab="history" class="flex-1 overflow-y-scroll">
34+
<div class="flex flex-col items-center p-4 space-y-3"></div>
35+
</div>
3436
<!-- 收藏夹 -->
35-
<div id="message-favorites" data-tab="favorites" class="flex-1 hidden p-4 space-y-3 overflow-y-scroll"></div>
37+
<div id="message-favorites" data-tab="favorites" class="flex-1 hidden overflow-y-scroll">
38+
<div class="flex flex-col items-center p-4 space-y-3"></div>
39+
</div>
3640

3741
<!-- 底部输入栏 -->
38-
<div class="flex-shrink-0 left-0 right-0 bg-white border-t-gray-400">
39-
<div class="container max-w-3xl mx-auto px-4 py-4">
42+
<div class="flex-grow-0 flex-shrink-0 bg-white border-t-gray-400">
43+
<div class="container max-w-4xl mx-auto px-4 py-4">
4044
<!-- 生成结果预览 -->
4145
<div id="transaction-dialog" class="hidden mb-4 border rounded-lg p-2 bg-gray-50">
4246
<pre id="transaction-text" class="text-sm mb-3 overflow-x-scroll"></pre>

‎frontend/src/main.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ async function sendMessage() {
8787
const data: Message = await response.json();
8888
messageInput.value = '';
8989
appendMessage(messageHistory, data);
90+
switchTab('history');
9091
showTransactionDialog(data.id);
9192
} catch (error) {
9293
console.error('Error sending message:', error);
@@ -184,7 +185,7 @@ function createElement<T extends HTMLElement>(
184185

185186
const STYLES = {
186187
messageContainer: (status: MessageStatus) => [
187-
'flex', 'container', 'justify-between', 'items-center', 'p-2',
188+
'flex', 'container', 'max-w-4xl', 'justify-between', 'items-center', 'p-2',
188189
'bg-white', 'rounded-lg', 'shadow-sm',
189190
status === 'submitted' ? 'bg-green-200' : 'bg-gray-200'
190191
],
@@ -257,11 +258,12 @@ function appendMessage(listElement: HTMLElement, msg: Message): HTMLElement {
257258
}
258259

259260
// 插入列表并滚动
260-
listElement.appendChild(messageDiv);
261+
listElement.firstElementChild.appendChild(messageDiv);
261262
listElement.scrollTop = listElement.scrollHeight;
262263

263264
return messageDiv;
264265
}
266+
265267
function showTransactionDialog(msgId: number): void {
266268
const { transaction_text: txText, status: msgStatus } = messageStorage.get(msgId)!;
267269

@@ -272,6 +274,10 @@ function showTransactionDialog(msgId: number): void {
272274
submitTransactionButton.classList.toggle('hidden', isSubmitted);
273275
cloneTransactionButton.classList.toggle('hidden', !isSubmitted);
274276
transactionDialog.classList.remove('hidden');
277+
278+
[messageHistory, messageFavorites].forEach((list: HTMLElement) => {
279+
list.scrollTop = list.scrollHeight;
280+
})
275281
}
276282

277283
async function markButtonSuccess(button: HTMLButtonElement): Promise<void> {

0 commit comments

Comments
 (0)