Files
msime-windows/ui-html/webview2/settings/default.html
T

1239 lines
33 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>