```

feat(sidepanel): 优化时间戳工具页面布局与响应式样式

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

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 {
+@media screen and (max-width: 768px) {
-  width: 100%;
+  .convert-button {
-  padding: 0.5rem;
+    width: 100%;
-  margin: 0.5rem 0;
+  }
-  box-sizing: border-box;
 }
 
 .content {
@@ -68,4 +114,4 @@
 
 .page.active {
   display: block;
-}
+}

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>
+            <div class="datetime-box">
-              <input type="text" id="input-timestamp" placeholder="请输入时间戳" class="input-text" />
+              <div class="input-group">
-              <select class="select-box">
+                <input
-                <option value="milliseconds">毫秒(ms)</option>
+                  type="text"
-                <option value="seconds">秒(s)</option>
+                  id="input-timestamp"
-              </select>
+                  placeholder="请输入时间戳"
-            </div>
+                  class="input-text"
-            <div>
+                />
-              <button id="convert-timestamp-btn" class="convert-button">转换</button>
+                <select class="select-box">
-            </div>
+                  <option value="milliseconds">毫秒(ms)</option>
-            <div>
+                  <option value="seconds">秒(s)</option>
-              <input type="text" id="timestamp-input-result" placeholder="转换结果" class="input-text"></input>
+                </select>
-              <select class="select-box">
+              </div>
-                <option>Asia/Shanghai</option>
+
-              </select>
+              <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>
+              <div class="input-group">
-            <p id="converted-timestamp"></p>
+                <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>