1239 lines
33 KiB
HTML
1239 lines
33 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>(IME)Settings</title>
|
||
<link rel="icon" href="./assets/MetasequoiaIME.ico">
|
||
<!-- <link href="./style.css" rel="stylesheet"> -->
|
||
<style>
|
||
:root {
|
||
--accent-color: #8E8CD8;
|
||
--bg-color: rgba(32, 32, 32, 0.65);
|
||
--sidebar-bg: rgba(25, 25, 25, 0.7);
|
||
--sidebar-hover: rgba(255, 255, 255, 0.08);
|
||
--item-active-hover: rgba(255, 255, 255, 0.06);
|
||
--text-color: #f3f3f3;
|
||
--border-color: rgba(255, 255, 255, 0.08);
|
||
--card-bg: rgba(38, 38, 38, 0.5);
|
||
--titlebar-height: 32px;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
font-family: "Noto Sans SC", "Segoe UI Variable", "Segoe UI", sans-serif;
|
||
user-select: none;
|
||
}
|
||
|
||
body {
|
||
font-family: "Noto Sans SC", "Microsoft YaHei", "Segoe UI Variable", "Segoe UI", sans-serif;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
color: var(--text-color);
|
||
/* background: var(--bg-color); */
|
||
background: #202020;
|
||
/* background: transparent; */
|
||
/* backdrop-filter: blur(20px) saturate(160%); */
|
||
/* -webkit-backdrop-filter: blur(20px) saturate(160%); */
|
||
/* overflow: hidden; */
|
||
}
|
||
|
||
/* 主体区域 */
|
||
.main {
|
||
display: flex;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar {
|
||
width: 200px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 12px 0;
|
||
overflow-y: auto;
|
||
scrollbar-gutter: stable;
|
||
}
|
||
|
||
/* 整个滚动条宽度 */
|
||
.sidebar::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
/* 滚动条轨道 */
|
||
.sidebar::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
/* 滚动条滑块 */
|
||
.sidebar::-webkit-scrollbar-thumb {
|
||
background-color: rgba(120, 120, 120, 0.4);
|
||
border-radius: 2px;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
/* 滚动条在鼠标悬浮时更亮一些 */
|
||
.sidebar::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba(160, 160, 160, 0.6);
|
||
}
|
||
|
||
/* 深色模式下更暗 */
|
||
@media (prefers-color-scheme: dark) {
|
||
.sidebar::-webkit-scrollbar-thumb {
|
||
background-color: rgba(180, 180, 180, 0.25);
|
||
}
|
||
|
||
.sidebar::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba(220, 220, 220, 0.4);
|
||
}
|
||
}
|
||
|
||
.sidebar-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 24px 12px 24px;
|
||
gap: 10px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.content-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 24px 12px 0.5em;
|
||
gap: 10px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.sidebar-header img {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.sidebar-header span {
|
||
font-weight: 500;
|
||
font-size: 19px;
|
||
}
|
||
|
||
.content-header span {
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
/* 控制 emoji 大小 */
|
||
line-height: 1;
|
||
/* 避免多余行高影响垂直居中 */
|
||
width: 24px;
|
||
height: 24px;
|
||
text-align: center;
|
||
position: relative;
|
||
top: 1px;
|
||
}
|
||
|
||
.input-icon {
|
||
position: relative;
|
||
top: -1px;
|
||
}
|
||
|
||
.sidebar .item {
|
||
padding: 6px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 15px;
|
||
position: relative;
|
||
/* transition: background 0.02s, color 0.02s; */
|
||
transition: none;
|
||
border-radius: 5px;
|
||
margin: 2px 8px;
|
||
color: #e6e6e6;
|
||
/* font-weight: 450; */
|
||
}
|
||
|
||
.sidebar .item:hover {
|
||
background: var(--sidebar-hover);
|
||
}
|
||
|
||
.sidebar .item.active {
|
||
background: var(--item-active-hover);
|
||
}
|
||
|
||
.sidebar .item.active:hover {
|
||
background: var(--sidebar-hover);
|
||
color: #fff;
|
||
}
|
||
|
||
/* item 左侧的 bar */
|
||
.sidebar .item::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: -2px;
|
||
width: 4px;
|
||
height: 50%;
|
||
border-radius: 3px;
|
||
background: var(--accent-color);
|
||
/* 初始收起 */
|
||
transform: scaleY(0);
|
||
/* 从中间往上下展开 */
|
||
transform-origin: center center;
|
||
/* 动画过渡 */
|
||
transition: transform 0.25s ease;
|
||
/* 初始隐藏 */
|
||
opacity: 0;
|
||
}
|
||
|
||
.sidebar .item.active::before {
|
||
transform: scaleY(1);
|
||
/* 展开 */
|
||
opacity: 1;
|
||
/* 渐显 */
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
padding: 12px 12px;
|
||
overflow-y: auto;
|
||
display: none;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.active {
|
||
display: block;
|
||
}
|
||
|
||
.section {
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
padding: 20px 24px;
|
||
margin-bottom: 18px;
|
||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
|
||
/* backdrop-filter: blur(10px); */
|
||
/* z-index: 0; */
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 15px;
|
||
font-weight: 550;
|
||
color: #ccc;
|
||
}
|
||
|
||
select {
|
||
padding: 6px 10px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border-color);
|
||
background-color: rgba(45, 45, 45, 0.8);
|
||
color: #f3f3f3;
|
||
font-size: 14px;
|
||
transition: border 0.2s, background 0.2s;
|
||
}
|
||
|
||
select:focus {
|
||
outline: none;
|
||
border: 1px solid var(--accent-color);
|
||
background-color: rgba(50, 50, 50, 0.9);
|
||
}
|
||
|
||
/* 候选窗口预览 */
|
||
.candidate-preview h2 {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.cand-prev-title {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
input[type="range"] {
|
||
width: 100%;
|
||
accent-color: var(--accent-color);
|
||
}
|
||
|
||
.candidate-container {
|
||
font-family: Arial, sans-serif;
|
||
font-size: 16px;
|
||
background-color: #202020;
|
||
padding: 2px;
|
||
border-radius: 6px;
|
||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
||
min-width: 7em;
|
||
width: fit-content;
|
||
user-select: none;
|
||
border: 2px solid #9b9b9b2e;
|
||
}
|
||
|
||
.candidate-row {
|
||
justify-content: space-between;
|
||
padding: 2px;
|
||
padding-right: 12px;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
margin-top: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.candidate-cand {
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.candidate-row-wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
.candidate-first {
|
||
background-color: #3e3e3eb9;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.candidate-first::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
height: 0.8em;
|
||
width: 0.2em;
|
||
background: #6b69d6;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.candidate-text {
|
||
padding-left: 8px;
|
||
color: #e9e8e8;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
}
|
||
|
||
.divider {
|
||
width: 100%;
|
||
height: 0.5px;
|
||
background-color: #908f8f16;
|
||
margin: 12px 0;
|
||
backdrop-filter: none;
|
||
}
|
||
|
||
.arrange-item {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* 主题模式 */
|
||
.theme .ftb-toggle {
|
||
padding-top: 5px;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
/* 下拉按钮主体 */
|
||
.theme-toggle-header {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
|
||
.dropdown-toggle {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: rgba(45, 45, 45, 0.85);
|
||
border: 0px solid var(--border-color);
|
||
border-radius: 8px;
|
||
color: #f3f3f3;
|
||
font-size: 14px;
|
||
padding: 4px 12px;
|
||
padding-right: 6px;
|
||
transition: all 0.2s ease;
|
||
text-align: left;
|
||
min-width: 100px;
|
||
}
|
||
|
||
div.arrow {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.dropdown-toggle img {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
/* 移除悬浮时的高亮效果 */
|
||
.dropdown-toggle:hover {
|
||
background: rgba(45, 45, 45, 0.85);
|
||
border-color: var(--border-color);
|
||
}
|
||
|
||
.dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
right: 0;
|
||
top: calc(100% + 2px);
|
||
background: rgba(40, 40, 40, 0.96);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 10px;
|
||
min-width: 100px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
|
||
backdrop-filter: blur(12px);
|
||
z-index: 999;
|
||
overflow: hidden;
|
||
animation: dropdownFade 0.12s ease-out;
|
||
}
|
||
|
||
/* 悬浮时保持圆角和背景,不再加亮 */
|
||
.dropdown-item {
|
||
margin: 2px;
|
||
padding: 4px 8px;
|
||
color: #eee;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
/* 让每个选项也有圆角 */
|
||
}
|
||
|
||
.dropdown-item:hover {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: #fff;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* .dropdown.open .dropdown-menu {
|
||
display: block;
|
||
} */
|
||
|
||
.dropdown-menu.open {
|
||
display: block;
|
||
}
|
||
|
||
/* 通用 -> 悬浮工具栏 */
|
||
.ftb-toggle-btn {
|
||
position: relative;
|
||
width: 38px;
|
||
height: 19px;
|
||
background: #555;
|
||
border-radius: 9px;
|
||
flex-shrink: 0;
|
||
transition: background 0.2s ease, border 0.2s ease;
|
||
}
|
||
|
||
.ftb-toggle-knob {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 1px;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
transform: translateY(-50%);
|
||
transition: all 0.2s ease;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.ftb-toggle-btn.active {
|
||
background: #8E8CD8;
|
||
border-color: #555;
|
||
}
|
||
|
||
.ftb-toggle-btn.active .ftb-toggle-knob {
|
||
/* 38 - 16 - 1 * 2 = 20 */
|
||
transform: translate(20px, -50%);
|
||
}
|
||
|
||
/**/
|
||
/* 通用 -> 翻页方式 */
|
||
/**/
|
||
.section-page-option {}
|
||
|
||
.content-page-option {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.check-option {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 4px;
|
||
border-radius: 4px;
|
||
user-select: none;
|
||
}
|
||
|
||
.check-option input[type="checkbox"] {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
width: 18px;
|
||
height: 18px;
|
||
border: 2px solid #8a8886;
|
||
border-radius: 2px;
|
||
background-color: transparent;
|
||
position: relative;
|
||
cursor: pointer;
|
||
transition: all 0.1s ease;
|
||
}
|
||
|
||
.check-option input[type="checkbox"]:hover {
|
||
border-color: #c8c6c4;
|
||
}
|
||
|
||
.check-option input[type="checkbox"]:checked {
|
||
background-color: #8e8cd8a7;
|
||
border-color: #8e8cd8a7;
|
||
}
|
||
|
||
.check-option input[type="checkbox"]:checked::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 1px;
|
||
left: 4px;
|
||
width: 4px;
|
||
height: 9px;
|
||
border: solid white;
|
||
border-width: 0 2px 2px 0;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.check-option input[type="checkbox"]:focus {
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.check-option span {
|
||
font-size: 14px;
|
||
color: #f3f3f3;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.check-option:hover span {
|
||
color: #ffffff;
|
||
}
|
||
|
||
/**/
|
||
/* 输入 -> 输入方案 */
|
||
/**/
|
||
.input-option-content {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.radio-option {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 隐藏默认单选框样式 */
|
||
.radio-option input[type="radio"] {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 2px solid #616161;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
outline: none;
|
||
transition: border-color 0.2s ease, background-color 0.2s ease;
|
||
}
|
||
|
||
/* 选中时 */
|
||
.radio-option input[type="radio"]:checked {
|
||
border-color: #8E8CD8;
|
||
}
|
||
|
||
.radio-option input[type="radio"]:checked::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color: #8E8CD8;
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
/* 悬浮时边框变亮一点 */
|
||
.radio-option input[type="radio"]:hover {
|
||
/* border-color: #8E8CD8DA; */
|
||
}
|
||
|
||
.input-option-divider {
|
||
width: 100%;
|
||
height: 0.8px;
|
||
background-color: #908f8f15;
|
||
}
|
||
|
||
/**/
|
||
/* 输入 -> 双拼方案 */
|
||
/**/
|
||
.shuangpin-option-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.shuangpin-scheme-arrow {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.dropdown-toggle-shuangpin-scheme {
|
||
padding: 4px 6px 4px 9px;
|
||
min-width: 110px;
|
||
}
|
||
|
||
.shuangpin-scheme-dropdown-menu {
|
||
min-width: 110px;
|
||
}
|
||
|
||
.shuangpin-scheme-dropdown-menu div {
|
||
font-size: 14px;
|
||
color: #ccc;
|
||
}
|
||
|
||
/**/
|
||
/* 添加方案 */
|
||
/**/
|
||
.add-shuangpin-scheme {
|
||
text-align: right;
|
||
}
|
||
|
||
.add-shuangpin-scheme-btn {
|
||
display: inline-flex;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 12px;
|
||
width: auto;
|
||
height: 30px;
|
||
border-radius: 6px;
|
||
background: #292929;
|
||
border: 0px solid #666;
|
||
color: #ccc;
|
||
font-size: 14px;
|
||
user-select: none;
|
||
transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
|
||
}
|
||
|
||
.add-shuangpin-scheme-btn:hover {
|
||
background: #333;
|
||
background: rgba(45, 45, 45);
|
||
border-color: #777;
|
||
}
|
||
|
||
.add-shuangpin-scheme-btn:active {
|
||
background: #d1d1d128;
|
||
border-color: #555;
|
||
}
|
||
|
||
/**/
|
||
/* 辅助码 -> 双拼辅助码 */
|
||
/**/
|
||
.section-header-shuangpin-helpcode {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.dropdown-toggle-shuangpin-helpcode-scheme {
|
||
padding: 4px 6px 4px 9px;
|
||
min-width: 110px;
|
||
}
|
||
|
||
.dropdown-menu-shuangpin-helpcode-scheme {
|
||
min-width: 110px;
|
||
}
|
||
|
||
/**/
|
||
/* 辅助码 -> 全拼辅助码 */
|
||
/**/
|
||
.section-header-quanpin-helpcode {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.dropdown-toggle-quanpin-helpcode-scheme {
|
||
padding: 4px 6px 4px 9px;
|
||
min-width: 110px;
|
||
}
|
||
|
||
.dropdown-menu-quanpin-helpcode-scheme {
|
||
min-width: 110px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="main">
|
||
<div class="sidebar">
|
||
<div class="sidebar-header">
|
||
<img src="./assets/MetasequoiaIME.ico" alt="">
|
||
<span>水杉输入法</span>
|
||
</div>
|
||
<div class="item active" data-target="general-settings"><span class="icon">⚙️</span> 通用</div>
|
||
<div class="item" data-target="appearence-settings"><span class="icon">🎨</span> 外观</div>
|
||
<div class="item" data-target="input-settings"><span class="icon input-icon">⌨️</span> 输入</div>
|
||
<div class="item" data-target="helpcode-settings"><span class="icon">🧩</span> 辅助码</div>
|
||
<div class="item" data-target="shortcut-settings"><span class="icon">⌘</span> 快捷键</div>
|
||
<div class="item" data-target="dict-settings"><span class="icon">📚</span> 词库</div>
|
||
<div class="item" data-target="skin-settings"><span class="icon">🖼️</span> 皮肤</div>
|
||
<div class="item" data-target="voice-settings"><span class="icon">🎙️</span> 语音打字</div>
|
||
<div class="item" data-target="screenkb-settings"><span class="icon">🖥️</span> 屏幕键盘</div>
|
||
<div class="item" data-target="tools-settings"><span class="icon">🛠️</span> 实用功能</div>
|
||
<div class="item" data-target="ai-settings"><span class="icon">🤖</span> AI 辅助</div>
|
||
<div class="item" data-target="help-settings"><span class="icon">❓</span> 帮助</div>
|
||
<div class="item" data-target="about-settings"><span class="icon">ℹ️</span> 关于</div>
|
||
<div class="item" data-target="feedback-settings"><span class="icon">💬</span> 反馈</div>
|
||
</div>
|
||
|
||
<!-- 通用 -->
|
||
<div class="content active" id="general-settings">
|
||
<div class="content-header"><span>通用</span></div>
|
||
|
||
<!-- 悬浮工具栏 toggle -->
|
||
<div class="section ftb-toggle">
|
||
<div class="section-header">
|
||
<div class="section-title">悬浮工具栏</div>
|
||
<div class="ftb-toggle-btn active" id="ftbToggleBtn">
|
||
<div class="ftb-toggle-knob"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section section-page-option">
|
||
<div class="section-header">
|
||
<div class="section-title">翻页方式</div>
|
||
</div>
|
||
|
||
<div class="content-page-option">
|
||
<label class="check-option">
|
||
<input type="checkbox" name="page-method" value="minus">
|
||
<span>- / =</span>
|
||
</label>
|
||
|
||
<div class="input-option-divider"></div>
|
||
|
||
<label class="check-option">
|
||
<input type="checkbox" name="page-method" value="comma" checked>
|
||
<span>, / .</span>
|
||
</label>
|
||
|
||
<div class="input-option-divider"></div>
|
||
|
||
<label class="check-option">
|
||
<input type="checkbox" name="page-method" value="tab">
|
||
<span>Shift+Tab / Tab</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-title">中英混输</div>
|
||
<div class="ftb-toggle-btn active" id="zhEnToggleBtn">
|
||
<div class="ftb-toggle-knob"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 外观 -->
|
||
<div class="content" id="appearence-settings">
|
||
<div class="content-header"><span>外观</span></div>
|
||
|
||
<!-- 候选窗口预览 -->
|
||
<div class="section candidate-preview">
|
||
<div class="section-title cand-prev-title">候选窗口预览</div>
|
||
<div class="candidate-container">
|
||
<div class="candidate-row">
|
||
<div class="candidate-text">ni'mf</div>
|
||
</div>
|
||
<div class="candidate-row-wrapper">
|
||
<div class="candidate-row candidate-cand candidate-first">
|
||
<div class="candidate-text">1 你们(rR)</div>
|
||
</div>
|
||
</div>
|
||
<div class="candidate-row-wrapper">
|
||
<div class="candidate-row candidate-cand">
|
||
<div class="candidate-text">2 你(rX)</div>
|
||
</div>
|
||
</div>
|
||
<div class="candidate-row-wrapper">
|
||
<div class="candidate-row candidate-cand">
|
||
<div class="candidate-text">3 尼(uV)</div>
|
||
</div>
|
||
</div>
|
||
<div class="candidate-row-wrapper">
|
||
<div class="candidate-row candidate-cand">
|
||
<div class="candidate-text">4 妮(nV)</div>
|
||
</div>
|
||
</div>
|
||
<div class="candidate-row-wrapper">
|
||
<div class="candidate-row candidate-cand">
|
||
<div class="candidate-text">5 泥(dV)</div>
|
||
</div>
|
||
</div>
|
||
<div class="candidate-row-wrapper">
|
||
<div class="candidate-row candidate-cand">
|
||
<div class="candidate-text">6 逆(zQ)</div>
|
||
</div>
|
||
</div>
|
||
<div class="candidate-row-wrapper">
|
||
<div class="candidate-row candidate-cand">
|
||
<div class="candidate-text">7 拟(fR)</div>
|
||
</div>
|
||
</div>
|
||
<div class="candidate-row-wrapper">
|
||
<div class="candidate-row candidate-cand">
|
||
<div class="candidate-text">8 腻(oD)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主题模式 -->
|
||
<div class="section theme">
|
||
<div class="section-header">
|
||
<div class="section-title">主题模式(默认)</div>
|
||
<div class="dropdown">
|
||
<button class="dropdown-toggle" id="themeBtn">
|
||
<span>深色</span>
|
||
<div class="arrow">
|
||
<img src="./assets/arrow.svg" alt="arrow">
|
||
</div>
|
||
</button>
|
||
<div class="dropdown-menu" id="themeMenu">
|
||
<div class="dropdown-item" data-value="dark">深色</div>
|
||
<div class="dropdown-item" data-value="light">浅色</div>
|
||
<div class="dropdown-item" data-value="system">跟随系统</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<div class="section-header arrange-item">
|
||
<div class="section-title">候选项排列方式</div>
|
||
<div class="dropdown">
|
||
<button class="dropdown-toggle" id="arrangeBtn">
|
||
<span>竖排</span>
|
||
<div class="arrow">
|
||
<img src="./assets/arrow.svg" alt="arrow">
|
||
</div>
|
||
</button>
|
||
<div class="dropdown-menu" id="arrangeMenu">
|
||
<div class="dropdown-item" data-value="horizontal">横排</div>
|
||
<div class="dropdown-item" data-value="vertical">竖排</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 输入 -->
|
||
<div class="content" id="input-settings">
|
||
<div class="content-header"><span>输入</span></div>
|
||
|
||
<!-- 输入方案 -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-title">输入方案</div>
|
||
</div>
|
||
<div class="input-option-content">
|
||
<label class="radio-option">
|
||
<input type="radio" name="input-method" value="pinyin">
|
||
<span>拼音输入(全拼)</span>
|
||
</label>
|
||
|
||
<div class="input-option-divider"></div>
|
||
|
||
<label class="radio-option">
|
||
<input type="radio" name="input-method" value="doublepinyin" checked>
|
||
<span>双拼输入</span>
|
||
</label>
|
||
|
||
<div class="input-option-divider"></div>
|
||
|
||
<label class="radio-option">
|
||
<input type="radio" name="input-method" value="wubi">
|
||
<span>五笔输入</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 双拼方案 -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-title">双拼方案</div>
|
||
<div class="shuangpin-option-content">
|
||
<div class="dropdown dropdown-shuangpin-scheme">
|
||
<button class="dropdown-toggle dropdown-toggle-shuangpin-scheme" id="shuangpinSchemeBtn">
|
||
<span>小鹤双拼</span>
|
||
<div class="arrow shuangpin-scheme-arrow">
|
||
<img src="./assets/arrow.svg" alt="arrow">
|
||
</div>
|
||
</button>
|
||
<div class="dropdown-menu shuangpin-scheme-dropdown-menu" id="shuangpinSchemeMenu">
|
||
<div class="dropdown-item" data-value="xiaohe">小鹤双拼</div>
|
||
<div class="dropdown-item" data-value="ziranma">自然码双拼</div>
|
||
<div class="dropdown-item" data-value="ziranma">微软双拼</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="add-shuangpin-scheme">
|
||
<button class="add-shuangpin-scheme-btn">添加方案</button>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 辅助码 -->
|
||
<div class="content" id="helpcode-settings">
|
||
<div class="content-header"><span>辅助码</span></div>
|
||
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-title">双拼辅助码</div>
|
||
<div class="ftb-toggle-btn active" id="shuangpinHelpcodeToggleBtn">
|
||
<div class="ftb-toggle-knob"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-header section-header-shuangpin-helpcode">
|
||
<div class="section-title">双拼辅助码方案</div>
|
||
<div class="dropdown dropdown-shuangpin-helpcode-scheme">
|
||
<button class="dropdown-toggle dropdown-toggle-shuangpin-helpcode-scheme" id="shuangpinHelpcodeSchemeBtn">
|
||
<span>蓝天小雨点</span>
|
||
<div class="arrow">
|
||
<img src="./assets/arrow.svg" alt="arrow">
|
||
</div>
|
||
</button>
|
||
<div class="dropdown-menu dropdown-menu-shuangpin-helpcode-scheme" id="shuangpinHelpcodeSchemeMenu">
|
||
<div class="dropdown-item" data-value="blueskyraindrop">蓝天小雨点</div>
|
||
<div class="dropdown-item" data-value="zrm">自然码辅码</div>
|
||
<div class="dropdown-item" data-value="custom">自定义</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-title">全拼辅助码</div>
|
||
<div class="ftb-toggle-btn" id="quanpinHelpcodeToggleBtn">
|
||
<div class="ftb-toggle-knob"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-header section-header-quanpin-helpcode">
|
||
<div class="section-title">全拼辅助码方案</div>
|
||
<div class="dropdown dropdown-quanpin-helpcode-scheme">
|
||
<button class="dropdown-toggle dropdown-toggle-quanpin-helpcode-scheme" id="quanpinHelpcodeSchemeBtn">
|
||
<span>蓝天小雨点</span>
|
||
<div class="arrow">
|
||
<img src="./assets/arrow.svg" alt="arrow">
|
||
</div>
|
||
</button>
|
||
<div class="dropdown-menu dropdown-menu-quanpin-helpcode-scheme" id="quanpinHelpcodeSchemeMenu">
|
||
<div class="dropdown-item" data-value="blueskyraindrop">蓝天小雨点</div>
|
||
<div class="dropdown-item" data-value="zrm">自然码辅码</div>
|
||
<div class="dropdown-item" data-value="custom">自定义</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快捷键 -->
|
||
<div class="content" id="shortcut-settings">
|
||
<div class="content-header"><span>快捷键</span></div>
|
||
</div>
|
||
|
||
<!-- 词库 -->
|
||
<div class="content" id="dict-settings">
|
||
<div class="content-header"><span>词库</span></div>
|
||
</div>
|
||
|
||
<!-- 皮肤 -->
|
||
<div class="content" id="skin-settings">
|
||
<div class="content-header"><span>皮肤</span></div>
|
||
</div>
|
||
|
||
<!-- 语音打字 -->
|
||
<div class="content" id="voice-settings">
|
||
<div class="content-header"><span>语音打字</span></div>
|
||
</div>
|
||
|
||
<!-- 屏幕键盘 -->
|
||
<div class="content" id="screenkb-settings">
|
||
<div class="content-header"><span>屏幕键盘</span></div>
|
||
</div>
|
||
|
||
<!-- 实用功能 -->
|
||
<div class="content" id="tools-settings">
|
||
<div class="content-header"><span>实用功能</span></div>
|
||
</div>
|
||
|
||
<!-- AI 辅助 -->
|
||
<div class="content" id="ai-settings">
|
||
<div class="content-header"><span>AI 辅助</span></div>
|
||
</div>
|
||
|
||
<!-- 帮助 -->
|
||
<div class="content" id="help-settings">
|
||
<div class="content-header"><span>帮助</span></div>
|
||
</div>
|
||
|
||
<!-- 关于 -->
|
||
<div class="content" id="about-settings">
|
||
<div class="content-header"><span>关于</span></div>
|
||
</div>
|
||
|
||
<!-- 反馈 -->
|
||
<div class="content" id="feedback-settings">
|
||
<div class="content-header"><span>反馈</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
//
|
||
// 外观 -> 主题模式(默认)
|
||
//
|
||
{
|
||
const btn = document.getElementById('themeBtn');
|
||
const menu = document.getElementById('themeMenu');
|
||
const textSpan = btn.querySelector('span');
|
||
|
||
btn.addEventListener('click', e => {
|
||
// e.stopPropagation();
|
||
menu.classList.toggle('open');
|
||
});
|
||
|
||
menu.querySelectorAll('.dropdown-item').forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
textSpan.textContent = item.textContent;
|
||
if (window.chrome?.webview) {
|
||
window.chrome.webview.postMessage({
|
||
action: "changeTheme",
|
||
theme: item.dataset.value
|
||
});
|
||
}
|
||
menu.classList.remove('open');
|
||
});
|
||
});
|
||
|
||
// 点击外部关闭当前菜单
|
||
document.addEventListener('click', e => {
|
||
if (!btn.contains(e.target) && !menu.contains(e.target)) {
|
||
menu.classList.remove('open');
|
||
}
|
||
});
|
||
}
|
||
|
||
//
|
||
// 候选项排列方式
|
||
//
|
||
{
|
||
const btn = document.getElementById('arrangeBtn');
|
||
const menu = document.getElementById('arrangeMenu');
|
||
const textSpan = btn.querySelector('span');
|
||
|
||
btn.addEventListener('click', e => {
|
||
// e.stopPropagation();
|
||
menu.classList.toggle('open');
|
||
});
|
||
|
||
menu.querySelectorAll('.dropdown-item').forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
textSpan.textContent = item.textContent;
|
||
if (window.chrome?.webview) {
|
||
window.chrome.webview.postMessage({
|
||
action: "changeCandidateArrange",
|
||
arrange: item.dataset.value
|
||
});
|
||
}
|
||
menu.classList.remove('open');
|
||
});
|
||
});
|
||
|
||
// 点击外部关闭当前菜单
|
||
document.addEventListener('click', e => {
|
||
if (!btn.contains(e.target) && !menu.contains(e.target)) {
|
||
menu.classList.remove('open');
|
||
}
|
||
});
|
||
}
|
||
|
||
//
|
||
// 双拼方案
|
||
//
|
||
{
|
||
const btn = document.getElementById('shuangpinSchemeBtn');
|
||
const menu = document.getElementById('shuangpinSchemeMenu');
|
||
const textSpan = btn.querySelector('span');
|
||
|
||
btn.addEventListener('click', e => {
|
||
e.stopPropagation();
|
||
menu.classList.toggle('open');
|
||
});
|
||
|
||
menu.querySelectorAll('.dropdown-item').forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
textSpan.textContent = item.textContent;
|
||
if (window.chrome?.webview) {
|
||
window.chrome.webview.postMessage({
|
||
action: "changeShuangpinScheme",
|
||
scheme: item.dataset.value
|
||
});
|
||
}
|
||
menu.classList.remove('open');
|
||
});
|
||
});
|
||
|
||
// 点击外部关闭当前菜单
|
||
document.addEventListener('click', e => {
|
||
if (!btn.contains(e.target) && !menu.contains(e.target)) {
|
||
menu.classList.remove('open');
|
||
}
|
||
});
|
||
}
|
||
|
||
//
|
||
// 双拼辅助码方案
|
||
//
|
||
{
|
||
const btn = document.getElementById('shuangpinHelpcodeSchemeBtn');
|
||
const menu = document.getElementById('shuangpinHelpcodeSchemeMenu');
|
||
const textSpan = btn.querySelector('span');
|
||
|
||
btn.addEventListener('click', e => {
|
||
e.stopPropagation();
|
||
menu.classList.toggle('open');
|
||
});
|
||
|
||
menu.querySelectorAll('.dropdown-item').forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
textSpan.textContent = item.textContent;
|
||
if (window.chrome?.webview) {
|
||
window.chrome.webview.postMessage({
|
||
action: "changeShuangpinScheme",
|
||
scheme: item.dataset.value
|
||
});
|
||
}
|
||
menu.classList.remove('open');
|
||
});
|
||
});
|
||
|
||
// 点击外部关闭当前菜单
|
||
document.addEventListener('click', e => {
|
||
if (!btn.contains(e.target) && !menu.contains(e.target)) {
|
||
menu.classList.remove('open');
|
||
}
|
||
});
|
||
}
|
||
|
||
//
|
||
// 全拼辅助码方案
|
||
//
|
||
{
|
||
const btn = document.getElementById('quanpinHelpcodeSchemeBtn');
|
||
const menu = document.getElementById('quanpinHelpcodeSchemeMenu');
|
||
const textSpan = btn.querySelector('span');
|
||
|
||
btn.addEventListener('click', e => {
|
||
e.stopPropagation();
|
||
menu.classList.toggle('open');
|
||
});
|
||
|
||
menu.querySelectorAll('.dropdown-item').forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
textSpan.textContent = item.textContent;
|
||
if (window.chrome?.webview) {
|
||
window.chrome.webview.postMessage({
|
||
action: "changeQuanpinScheme",
|
||
scheme: item.dataset.value
|
||
});
|
||
}
|
||
menu.classList.remove('open');
|
||
});
|
||
});
|
||
|
||
// 点击外部关闭当前菜单
|
||
document.addEventListener('click', e => {
|
||
if (!btn.contains(e.target) && !menu.contains(e.target)) {
|
||
menu.classList.remove('open');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
const sidebarItems = document.querySelectorAll('.sidebar .item');
|
||
|
||
sidebarItems.forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
document.querySelector('.sidebar .item.active')?.classList.remove('active');
|
||
item.classList.add('active');
|
||
|
||
document.querySelector('.content.active')?.classList.remove('active');
|
||
const targetId = item.dataset.target;
|
||
document.getElementById(targetId)?.classList.add('active');
|
||
});
|
||
});
|
||
|
||
//
|
||
// 通用 -> 悬浮工具栏
|
||
//
|
||
{
|
||
const toggle = document.getElementById('ftbToggleBtn');
|
||
toggle.addEventListener('click', () => {
|
||
toggle.classList.toggle('active');
|
||
});
|
||
}
|
||
|
||
//
|
||
// 通用 -> 中英混输开关
|
||
//
|
||
{
|
||
const toggle = document.getElementById('zhEnToggleBtn');
|
||
toggle.addEventListener('click', () => {
|
||
toggle.classList.toggle('active');
|
||
});
|
||
}
|
||
|
||
//
|
||
// 辅助码 -> 双拼辅助码
|
||
//
|
||
{
|
||
const toggle = document.getElementById('shuangpinHelpcodeToggleBtn');
|
||
toggle.addEventListener('click', () => {
|
||
toggle.classList.toggle('active');
|
||
});
|
||
}
|
||
|
||
//
|
||
// 辅助码 -> 全拼辅助码
|
||
//
|
||
{
|
||
const toggle = document.getElementById('quanpinHelpcodeToggleBtn');
|
||
toggle.addEventListener('click', () => {
|
||
toggle.classList.toggle('active');
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |