275 lines
9.5 KiB
HTML
275 lines
9.5 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>
|
||
</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" data-target="general-settings"><span class="icon">⚙️</span> 通用</div>
|
||
<div class="item active" 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" 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" id="ftbToggleBtn">
|
||
<div class="ftb-toggle-knob"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 外观 -->
|
||
<div class="content active" 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>
|
||
|
||
<!-- 辅助码 -->
|
||
<div class="content" id="helpcode-settings">
|
||
<div class="content-header"><span>辅助码</span></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>
|
||
|
||
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');
|
||
});
|
||
});
|
||
|
||
//
|
||
// 外观 -> 主题模式(默认)
|
||
//
|
||
document.querySelectorAll('.dropdown').forEach(dropdown => {
|
||
const btn = dropdown.querySelector('.dropdown-toggle');
|
||
const menu = dropdown.querySelector('.dropdown-menu');
|
||
const textSpan = btn.querySelector('span');
|
||
|
||
// 打开/关闭菜单
|
||
btn.addEventListener('click', e => {
|
||
e.stopPropagation();
|
||
dropdown.classList.toggle('open');
|
||
});
|
||
|
||
// 点击菜单项
|
||
menu.querySelectorAll('.dropdown-item').forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
textSpan.textContent = item.textContent;
|
||
|
||
// 根据按钮 id 区分动作
|
||
if (window.chrome?.webview) {
|
||
if (btn.id === 'themeBtn') {
|
||
window.chrome.webview.postMessage({ action: "changeTheme", theme: item.dataset.value });
|
||
} else if (btn.id === 'arrangeBtn') {
|
||
window.chrome.webview.postMessage({ action: "changeCandidateArrange", arrange: item.dataset.value });
|
||
}
|
||
}
|
||
|
||
dropdown.classList.remove('open');
|
||
});
|
||
});
|
||
});
|
||
|
||
// 点击空白处关闭所有下拉
|
||
document.addEventListener('click', () => {
|
||
document.querySelectorAll('.dropdown').forEach(d => d.classList.remove('open'));
|
||
});
|
||
|
||
//
|
||
// 外观 -> 候选项排列方式
|
||
//
|
||
|
||
|
||
//
|
||
// 通用 -> 悬浮工具栏
|
||
//
|
||
const toggle = document.getElementById('ftbToggleBtn');
|
||
toggle.addEventListener('click', () => {
|
||
toggle.classList.toggle('active');
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |