雨霖铃
1e83988b72
feat(sidepanel): 优化时间戳工具界面与交互功能 - 调整 CSS 样式，增加 #current-timestamp 区块样式定义，统一阴影写法空格格式 - 重构 HTML 结构，将当前时间戳相关元素包裹进 div 容器中，并调整按钮布局 - 限制时区列表为常用时区，提升选择效率并确保兼容性 - 改进切换单位和复制按钮的反馈效果，添加动画提示增强用户体验 - 精简 updateTimestamp 函数逻辑，移除冗余代码并提高可维护性 ```
116 lines
4.0 KiB
HTML
116 lines
4.0 KiB
HTML
<!-- sidepanel/index.html -->
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>测试工具</title>
|
|
<link rel="stylesheet" href="index.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar">
|
|
<button id="nav-timestamp-btn" class="nav-button active">时间戳转换</button>
|
|
<button id="nav-other-tools-btn" class="nav-button">其他工具</button>
|
|
<button id="close-panel-btn" class="close-button">X</button>
|
|
</nav>
|
|
|
|
<!-- 页面内容容器 -->
|
|
<div class="content">
|
|
<!-- 时间戳工具页面 -->
|
|
<div id="page-timestamp" class="page active">
|
|
<h2>时间戳工具</h2>
|
|
<div id="current-timestamp">
|
|
<h2>当前时间戳</h2>
|
|
<p>
|
|
<a href="javascript:;" id="current-timestamp-value">1762873747965</a>
|
|
<span id="current-timestamp-unit">毫秒</span>
|
|
</p>
|
|
<div>
|
|
<button id="toggle-unit-btn">切换单位</button>
|
|
<button id="copy-timestamp-btn">复制</button>
|
|
<button id="stop-timer-btn" style="background-color: red;">停止</button>
|
|
<button id="start-timer-btn" style="display: none">开始</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 时间戳转日期时间 -->
|
|
<div>
|
|
<h2>时间戳转日期时间</h2>
|
|
<div class="datetime-box">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
id="timestamp-input"
|
|
placeholder="请输入时间戳"
|
|
class="input-text"
|
|
/>
|
|
<select id="timestamp-input-unit-select" class="select-box">
|
|
<option value="milliseconds">毫秒(ms)</option>
|
|
<option value="seconds">秒(s)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<button id="convert-timestamp-to-date-btn" class="convert-button">转换</button>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
id="timestamp-conversion-result"
|
|
placeholder="转换结果"
|
|
class="input-text"
|
|
/>
|
|
<select class="select-box" id="timezone-result"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 日期时间转时间戳 -->
|
|
<div>
|
|
<h2>日期时间转时间戳</h2>
|
|
<div class="datetime-box">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
id="datetime-input"
|
|
placeholder="输入日期时间"
|
|
class="input-text"
|
|
/>
|
|
<select class="select-box" id="timezone-input"></select>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<button id="convert-date-to-timestamp-btn" class="convert-button">转换</button>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
id="date-conversion-result"
|
|
placeholder="转换结果"
|
|
class="input-text"
|
|
/>
|
|
<select id="date-result-unit-select" class="select-box">
|
|
<option value="milliseconds">毫秒(ms)</option>
|
|
<option value="seconds">秒(s)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 其他工具页面 -->
|
|
<div id="page-other-tools" class="page">
|
|
<h2>其他工具页面</h2>
|
|
<p>这里可以放置其他工具的内容。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../dist/sidepanel.bundle.js"></script>
|
|
</body>
|
|
</html>
|