```

feat(dev): 添加开发服务器与热重载支持

- 新增 `npm run dev` 命令，启动带热重载的开发服务器
- 集成 rollup watch 模式与 LiveReload 实现自动刷新
- 添加开发指南 DEVELOPMENT.md，说明项目结构、预览方式及构建流程
- 新增开发预览页面 index.html，用于嵌入展示 sidepanel 内容
- 更新 package.json 和 package-lock.json，引入相关开发依赖
```

sidepanel/index.css

@@ -2,7 +2,7 @@
 #app {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
 }
 
 .navbar {

sidepanel/index.html

@@ -61,8 +61,7 @@
                   placeholder="转换结果"
                   class="input-text"
                 />
-                <select class="select-box">
-                  <option>Asia/Shanghai</option>
+                <select class="select-box" id="timezone-result">
                 </select>
               </div>
             </div>
@@ -79,8 +78,7 @@
                   placeholder="输入日期时间"
                   class="input-text"
                 />
-                <select class="select-box">
-                  <option>Asia/Shanghai</option>
+                <select class="select-box" id="timezone-input">
                 </select>
               </div>
 

sidepanel/index.js

@@ -12,7 +12,9 @@ import {
   handleConvertTimestamp, 
   handleConvertDateToTimestamp,
   handleCopyTimestamp,
-  handleClosePanel
+  handleClosePanel,
+  handleTimezoneResult,
+  handleTimezoneInput
 } from './modules/eventHandlers.js';
 import { addEventListenerById } from './utils/domUtils.js';
 
@@ -43,3 +45,7 @@ addEventListenerById('convert-date-to-timestamp-btn', 'click', handleConvertDate
 addEventListenerById('copy-timestamp-btn', 'click', handleCopyTimestamp);
 // 绑定关闭面板按钮事件
 addEventListenerById('close-panel-btn', 'click', handleClosePanel);
+// 绑定切换时区事件
+addEventListenerById('timezone-result', 'change', handleTimezoneResult)
+// 绑定输入时区事件
+addEventListenerById('timezone-input', 'change', handleTimezoneInput)

sidepanel/modules/eventHandlers.js

@@ -1,10 +1,18 @@
-import { updateTimestamp, convertTimestampToDate } from '../utils/timestampUtils.js';
+import {
+  updateTimestamp,
+  convertTimestampToDate,
+  convertDateToTimestamp,
+} from '../utils/timestampUtils.js';
 import { getElementById } from '../utils/domUtils.js';
 
 // 定义一个全局变量来保存是否显示毫秒
 let showMilliseconds = true;
 // 定义一个全局变量来保存计时器
 let timestampInterval;
+// 定义时区列表
+const timeZoneList = Intl.supportedValuesOf('timeZone');
+// 获取本地时区
+const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
 
 /**
  * 初始化时间戳显示
@@ -12,6 +20,36 @@ let timestampInterval;
 export function initTimestampDisplay() {
   updateTimestamp(showMilliseconds); // 初始化时更新一次时间戳
   timestampInterval = setInterval(() => updateTimestamp(showMilliseconds), 100);
+  initTimeZoneList();
+  initTimestampAndDate();
+}
+
+/**
+ * 初始化时区列表
+ */
+export function initTimeZoneList() {
+  const timezoneResultSelect = getElementById('timezone-result');
+  const timezoneInputSelect = getElementById('timezone-input');
+
+  // 获取本地时区在列表中的索引
+  const localTimeZoneIndex = timeZoneList.indexOf(localTimeZone);
+
+  for (let i = 0; i < timeZoneList.length; i++) {
+    if (i === localTimeZoneIndex) {
+      timezoneResultSelect.add(new Option(timeZoneList[i], i, true, true));
+      timezoneInputSelect.add(new Option(timeZoneList[i], i, true, true));
+    }
+    timezoneResultSelect.add(new Option(timeZoneList[i], i));
+    timezoneInputSelect.add(new Option(timeZoneList[i], i));
+  }
+}
+
+export function initTimestampAndDate() {
+  const timestampInput = getElementById('timestamp-input');
+  const dateInput = getElementById('datetime-input');
+
+  timestampInput.value = Date.now();
+  dateInput.value = new Date().toLocaleString('sv-SE'); // 使用适合<input type="datetime-local">的格式
 }
 
 /**
@@ -53,6 +91,7 @@ export function handleConvertTimestamp() {
   const timestampUnitSelect = document.querySelector(
     '#page-timestamp #timestamp-input-unit-select'
   );
+  const timezoneResultSelect = getElementById('timezone-result'); // 获取时区选择器
 
   const timestamp = inputTimestamp.value.trim();
   console.log('输入时间戳：', timestamp);
@@ -70,7 +109,12 @@ export function handleConvertTimestamp() {
   // 获取选择的时间戳单位（秒或毫秒）
   const isSeconds = timestampUnitSelect.value === 'seconds';
 
-  const result = convertTimestampToDate(timestamp, isSeconds);
+  // 获取选择的时区
+  const selectedTimezone = timeZoneList[timezoneResultSelect.value];
+
+  console.log('选择的时区：', selectedTimezone);
+
+  const result = convertTimestampToDate(timestamp, isSeconds, selectedTimezone);
   timestampInputResult.value = result;
 
   // 添加成功反馈动画
@@ -95,6 +139,7 @@ export function handleConvertDateToTimestamp() {
   const inputDate = getElementById('datetime-input');
   const dateInputResult = getElementById('date-conversion-result');
   const timestampUnitSelect = document.querySelector('#page-timestamp #date-result-unit-select');
+  const timezoneInputSelect = getElementById('timezone-input'); // 获取时区选择器
 
   const dateStr = inputDate.value.trim();
   console.log('输入日期字符串：', dateStr);
@@ -109,14 +154,23 @@ export function handleConvertDateToTimestamp() {
     return;
   }
 
+  // 获取选择的时区
+  const selectedTimezone = timeZoneList[timezoneInputSelect.value];
+
+  console.log('选择的时区：', selectedTimezone);
   const date = new Date(dateStr);
-  if (isNaN(date.getTime())) {
+
+  // 转换为时间戳
+  const timestamp = convertDateToTimestamp(date, selectedTimezone);
+
+  console.log('转换后的时间戳：', timestamp);
+
+  if (isNaN(timestamp)) {
     dateInputResult.value = '无效的日期字符串';
     dateInputResult.style.borderColor = '#dc3545';
     return;
   }
 
-  const timestamp = date.getTime();
   // 根据选择的单位决定显示秒还是毫秒
   const isSeconds = timestampUnitSelect.value === 'seconds';
   const finalTimestamp = isSeconds ? Math.floor(timestamp / 1000) : timestamp;
@@ -174,3 +228,55 @@ export function handleClosePanel() {
   // 向父页面发送消息请求关闭
   window.parent.postMessage({ action: 'closeSidebar' }, '*');
 }
+
+/**
+ * 时间区域选择事件处理器
+ */
+export function handleTimezoneResult() {
+  const timezoneResult = getElementById('timezone-result');
+  console.log(timeZoneList[timezoneResult.value]);
+
+  // 获取当前时间戳输入框的值
+  const inputTimestamp = getElementById('timestamp-input').value.trim();
+  const timestampInputResult = getElementById('timestamp-conversion-result');
+  const timestampUnitSelect = document.querySelector(
+    '#page-timestamp #timestamp-input-unit-select'
+  );
+
+  // 如果有输入时间戳，则重新计算结果
+  if (inputTimestamp) {
+    const isSeconds = timestampUnitSelect.value === 'seconds';
+    const selectedTimezone = timeZoneList[timezoneResult.value];
+    const result = convertTimestampToDate(inputTimestamp, isSeconds, selectedTimezone);
+    timestampInputResult.value = result;
+  }
+}
+
+/**
+ * 处理时区输入事件
+ * 该函数获取时区输入元素的值，并在控制台输出对应的时区信息
+ */
+export function handleTimezoneInput() {
+  const timezoneInput = getElementById('timezone-input');
+  const selectedTimezone = timeZoneList[timezoneInput.value];
+  console.log('选择的时区：', selectedTimezone);
+
+  // 获取当前日期输入框的值
+  const inputDate = getElementById('datetime-input').value.trim();
+  const dateInputResult = getElementById('date-conversion-result');
+  const timestampUnitSelect = document.querySelector('#page-timestamp #date-result-unit-select');
+
+  // 如果有输入日期，则重新计算结果
+  if (inputDate) {
+    console.log('输入的日期：', inputDate);
+    const date = new Date(inputDate);
+    // 转换为时间戳
+    const timestamp = convertDateToTimestamp(date, selectedTimezone);
+    if (!isNaN(timestamp)) {
+      const timestamp = date.getTime();
+      const isSeconds = timestampUnitSelect.value === 'seconds';
+      const finalTimestamp = isSeconds ? Math.floor(timestamp / 1000) : timestamp;
+      dateInputResult.value = finalTimestamp;
+    }
+  }
+}

sidepanel/utils/timestampUtils.js

@@ -19,9 +19,14 @@ export function updateTimestamp(showMilliseconds = true) {
  * 转换时间戳为日期格式
  * @param {string} timestamp - 输入的时间戳
  * @param {boolean} isSeconds - 是否为秒格式
+ * @param {string} timeZone - 时区，默认为本地时区
  * @returns {string} 格式化后的日期字符串
  */
-export function convertTimestampToDate(timestamp, isSeconds) {
+export function convertTimestampToDate(
+  timestamp,
+  isSeconds,
+  timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+) {
   // 转换为数字
   let timestampNum = Number(timestamp);
 
@@ -43,22 +48,34 @@ export function convertTimestampToDate(timestamp, isSeconds) {
     return '无效的日期';
   }
 
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const hours = date.getHours();
-  const minutes = date.getMinutes();
-  const seconds = date.getSeconds();
+  // 使用Intl.DateTimeFormat来根据时区格式化日期
+  const formatter = new Intl.DateTimeFormat('zh-CN', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    timeZone: timeZone,
+  });
 
-  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  return formatter.format(date);
 }
 
 /**
  * 转换日期格式为时间戳
  * @param {string} date - 输入的日期字符串
+ * @param {string} timeZone - 时区，默认为本地时区
  * @returns {number|string} 时间戳或错误信息
  */
-export function convertDateToTimestamp(date) {
-  const timestamp = Date.parse(date);
-  return isNaN(timestamp) ? '无效的日期' : timestamp;
+export function convertDateToTimestamp(
+  date,
+  timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+) {
+  return new Date(
+    Intl.DateTimeFormat('en-US', {
+      timeZone: timeZone,
+      hour12: false,
+    }).format(date)
+  ).getTime();
 }