From 3b9e362bc90e1979180db5924771f40e58374d6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 14 Nov 2025 00:20:35 +0800
Subject: [PATCH] =?UTF-8?q?```=20feat(sidepanel):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=88=B3=E5=B7=A5=E5=85=B7=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E4=B8=8E=E5=93=8D=E5=BA=94=E5=BC=8F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 datetime-box 和 input-group 容器类，用于优化时间戳转换和日期时间转换功能的
界面结构。调整 input-text、select-box 和 convert-button 的宽度及响应式行为，使其在
移动端设备上能够自适应显示。同时更新 HTML 结构以匹配新的 CSS 类名和布局方式，提升
用户体验与界面可读性。
```
---
 sidepanel/index.css  | 60 ++++++++++++++++++++++++++++++----
 sidepanel/index.html | 76 +++++++++++++++++++++++++++++++++-----------
 2 files changed, 111 insertions(+), 25 deletions(-)

diff --git a/sidepanel/index.css b/sidepanel/index.css
index dd1b290..0aee4fb 100644
--- a/sidepanel/index.css
+++ b/sidepanel/index.css
@@ -35,8 +35,51 @@
   margin-left: auto;
 }
 
+.datetime-box {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+@media screen and (max-width: 768px) {
+  .datetime-box {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.input-group {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin: 0.5rem 0;
+  min-width: 200px;
+}
+
+@media screen and (max-width: 768px) {
+  .input-group {
+    min-width: unset;
+    width: 100%;
+  }
+}
+
 .input-text {
-  width: 100%;
+  width: 200px;
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 768px) {
+  .input-text {
+    width: 100%;
+    flex: 1;
+  }
+}
+
+.select-box {
+  width: 150px;
   padding: 0.5rem;
   margin: 0.5rem 0;
   box-sizing: border-box;
@@ -49,13 +92,16 @@
   border: none;
   border-radius: 0.25rem;
   cursor: pointer;
+  height: 2rem;
+  width: 4rem;
+  margin: 0.5rem 0;
+  align-self: flex-start;
 }
 
-.select-box {
-  width: 100%;
-  padding: 0.5rem;
-  margin: 0.5rem 0;
-  box-sizing: border-box;
+@media screen and (max-width: 768px) {
+  .convert-button {
+    width: 100%;
+  }
 }
 
 .content {
@@ -68,4 +114,4 @@
 
 .page.active {
   display: block;
-}
+}
\ No newline at end of file
diff --git a/sidepanel/index.html b/sidepanel/index.html
index 6724b47..604a350 100644
--- a/sidepanel/index.html
+++ b/sidepanel/index.html
@@ -18,7 +18,6 @@
 
       <!-- 页面内容容器 -->
       <div class="content">
-
         <!-- 时间戳工具页面 -->
         <div id="page-timestamp" class="page active">
           <h2>时间戳工具</h2>
@@ -37,30 +36,71 @@
           <!-- 时间戳转日期时间 -->
           <div>
             <h2>时间戳转日期时间</h2>
-            <div>
-              <input type="text" id="input-timestamp" placeholder="请输入时间戳" class="input-text" />
-              <select class="select-box">
-                <option value="milliseconds">毫秒(ms)</option>
-                <option value="seconds">秒(s)</option>
-              </select>
-            </div>
-            <div>
-              <button id="convert-timestamp-btn" class="convert-button">转换</button>
-            </div>
-            <div>
-              <input type="text" id="timestamp-input-result" placeholder="转换结果" class="input-text"></input>
-              <select class="select-box">
-                <option>Asia/Shanghai</option>
-              </select>
+            <div class="datetime-box">
+              <div class="input-group">
+                <input
+                  type="text"
+                  id="input-timestamp"
+                  placeholder="请输入时间戳"
+                  class="input-text"
+                />
+                <select class="select-box">
+                  <option value="milliseconds">毫秒(ms)</option>
+                  <option value="seconds">秒(s)</option>
+                </select>
+              </div>
+
+              <div class="input-group">
+                <button id="convert-timestamp-btn" class="convert-button">转换</button>
+              </div>
+
+              <div class="input-group">
+                <input
+                  type="text"
+                  id="timestamp-input-result"
+                  placeholder="转换结果"
+                  class="input-text"
+                />
+                <select class="select-box">
+                  <option>Asia/Shanghai</option>
+                </select>
+              </div>
             </div>
           </div>
 
           <!-- 日期时间转时间戳 -->
           <div>
             <h2>日期时间转时间戳</h2>
+            <div class="datetime-box">
+              <div class="input-group">
+                <input
+                  type="text"
+                  id="input-datetime"
+                  placeholder="输入日期时间"
+                  class="input-text"
+                />
+                <select class="select-box">
+                  <option>Asia/Shanghai</option>
+                </select>
+              </div>
 
-            <button id="convert-datetime-btn">转换</button>
-            <p id="converted-timestamp"></p>
+              <div class="input-group">
+                <button id="convert-datetime-btn" class="convert-button">转换</button>
+              </div>
+
+              <div class="input-group">
+                <input
+                  type="text"
+                  id="datetime-input-result"
+                  placeholder="转换结果"
+                  class="input-text"
+                />
+                <select class="select-box">
+                  <option value="milliseconds">毫秒(ms)</option>
+                  <option value="seconds">秒(s)</option>
+                </select>
+              </div>
+            </div>
           </div>
         </div>