feat(extension): 初始化Chrome扩展项目结构与基础功能
This commit is contained in:
雨霖铃
@@ -0,0 +1,150 @@
|
||||
<!-- 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" class="nav-button active">时间戳转换</button>
|
||||
<button id="nav-other" class="nav-button">其他工具</button>
|
||||
<button id="close" class="close-button">X</button>
|
||||
</nav>
|
||||
|
||||
<!-- 页面内容容器 -->
|
||||
<div class="content">
|
||||
<!-- 时间戳转换页面 -->
|
||||
<div id="page-timestamp" class="page active">
|
||||
<div class="bg-white border rounded-lg p-2 mb-4">
|
||||
<h2 class="text-lg font-bold mb-3">当前时间戳</h2>
|
||||
<p class="text-3xl font-mono mb-3">
|
||||
<a href="javascript:;" class="hover:text-blue-500">1762793622638</a>
|
||||
<span class="text-sm ml-2">毫秒</span>
|
||||
</p>
|
||||
<div class="flex space-x-3">
|
||||
<button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-white text-gray-700 shadow waves-effect">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 mr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"></path>
|
||||
</svg>
|
||||
开始
|
||||
</button>
|
||||
<button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:opacity-50 bg-white text-gray-700 shadow waves-effect">
|
||||
单个转换
|
||||
</button>
|
||||
<button class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-2 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 waves-effect">
|
||||
批量转换
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-lg text-gray-600 font-bold mb-4 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5 mr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
|
||||
</svg>
|
||||
时间戳转换
|
||||
</div>
|
||||
<div class="flex items-center mb-3">
|
||||
<input type="text" placeholder="输入时间戳" id="jsTimestampI" class="flex-1 border border-gray-300 rounded-md px-2 py-1 w-0">
|
||||
<select id="timestampUnit" class="ml-2 flex-1 border border-gray-300 rounded-md px-2 py-1">
|
||||
<option value="s">秒(s)</option>
|
||||
<option value="ms">毫秒(ms)</option>
|
||||
</select>
|
||||
<button id="convertTimestamp" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-gray-800 text-gray-100 shadow hover:bg-gray-800/90 h-8 px-3 py-1 rounded-md waves-effect ml-2">
|
||||
转换
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-3 flex-grow items-center">
|
||||
<input type="text" placeholder="转换结果" id="jsTimestampO" class="flex-[2] border border-gray-300 rounded-md px-2 py-1 w-0">
|
||||
<div tabindex="-1" class="multiselect flex-1" role="combobox" aria-owns="listbox-null">
|
||||
<div class="multiselect__select"></div>
|
||||
<div class="multiselect__tags">
|
||||
<div class="multiselect__tags-wrap" style="display: none;"></div>
|
||||
<div class="multiselect__spinner" style="display: none;"></div>
|
||||
<input name="" type="text" autocomplete="off" spellcheck="false" placeholder="选择时区" tabindex="0" class="multiselect__input" aria-controls="listbox-null" style="width: 0px; position: absolute; padding: 0px;">
|
||||
<span class="multiselect__single">Asia/Shanghai</span>
|
||||
</div>
|
||||
<div class="multiselect__content-wrapper" tabindex="-1" style="max-height: 300px; display: none;">
|
||||
<ul class="multiselect__content" role="listbox" id="listbox-null" style="display: inline-block;">
|
||||
<li class="multiselect__element" id="null-0" role="option">
|
||||
<span class="multiselect__option--highlight multiselect__option--selected multiselect__option" data-select="Press enter to select" data-selected="Selected" data-deselect="Press enter to remove">
|
||||
<span>Asia/Shanghai</span>
|
||||
</span>
|
||||
</li>
|
||||
<!-- 更多时区选项... -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 px-3 py-1 waves-effect">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 mr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"></path>
|
||||
</svg>
|
||||
切换单位
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<div class="text-lg text-gray-600 font-bold mb-4 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5 mr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 7.5h19.5m-19.5 0A3.75 3.75 0 0 1 6 3.75m0 0h12a3.75 3.75 0 0 1 3.75 3.75m0 0H6m0 0v12.75A3.75 3.75 0 0 1 6 15.75m0 0v-12Zm0 12h12m-12 0a3.75 3.75 0 0 0 3.75 3.75m0 0h6.75a3.75 3.75 0 0 0 3.75-3.75m0 0H9.75"></path>
|
||||
</svg>
|
||||
日期时间转换
|
||||
</div>
|
||||
<div class="flex items-center mb-3">
|
||||
<input type="text" placeholder="输入日期时间 (如: 2023-10-27 10:30:00)" id="jsDatetimeI" class="flex-1 border border-gray-300 rounded-md px-2 py-1 w-0">
|
||||
<div tabindex="-1" class="multiselect flex-1 ml-2" role="combobox" aria-owns="listbox-null">
|
||||
<div class="multiselect__select"></div>
|
||||
<div class="multiselect__tags">
|
||||
<div class="multiselect__tags-wrap" style="display: none;"></div>
|
||||
<div class="multiselect__spinner" style="display: none;"></div>
|
||||
<input name="" type="text" autocomplete="off" spellcheck="false" placeholder="选择时区" tabindex="0" class="multiselect__input" aria-controls="listbox-null" style="width: 0px; position: absolute; padding: 0px;">
|
||||
<span class="multiselect__single">Asia/Shanghai</span>
|
||||
</div>
|
||||
<div class="multiselect__content-wrapper" tabindex="-1" style="max-height: 300px; display: none;">
|
||||
<ul class="multiselect__content" role="listbox" id="listbox-null" style="display: inline-block;">
|
||||
<li class="multiselect__element" id="null-0" role="option">
|
||||
<span class="multiselect__option--highlight multiselect__option--selected multiselect__option" data-select="Press enter to select" data-selected="Selected" data-deselect="Press enter to remove">
|
||||
<span>Asia/Shanghai</span>
|
||||
</span>
|
||||
</li>
|
||||
<!-- 更多时区选项... -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<button id="convertDatetime" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-gray-800 text-gray-100 shadow hover:bg-gray-800/90 h-8 px-3 py-1 rounded-md waves-effect ml-2">
|
||||
转换
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-3 flex-grow items-center">
|
||||
<input type="text" placeholder="转换结果" id="jsDatetimeO" class="flex-[2] border border-gray-300 rounded-md px-2 py-1 w-0">
|
||||
<select id="datetimeUnit" class="ml-2 flex-1 border border-gray-300 rounded-md px-2 py-1">
|
||||
<option value="s">秒(s)</option>
|
||||
<option value="ms">毫秒(ms)</option>
|
||||
</select>
|
||||
<button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 px-3 py-1 waves-effect">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 mr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"></path>
|
||||
</svg>
|
||||
切换单位
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 其他工具页面 -->
|
||||
<div id="page-other" class="page">
|
||||
<h2>其他工具页面</h2>
|
||||
<p>这里可以放置其他工具的内容。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user