<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>AI Intervention Agent</title>
<link rel="icon" type="image/svg+xml" href="/icons/icon.svg" sizes="any" />
<link rel="mask-icon" href="/icons/icon.svg" color="#8B5CF6" />
<link rel="apple-touch-icon" href="/icons/icon.svg" />
<!-- 0.0.0.0 访问兼容性：尽早重定向到 127.0.0.1，避免浏览器/Fetch/通知权限异常 -->
<script nonce="{{ csp_nonce }}">
;(function redirectZeroHostToLoopback() {
try {
const url = new URL(window.location.href)
if (url.hostname === '0.0.0.0') {
url.hostname = '127.0.0.1'
console.warn(
`检测到访问地址为 0.0.0.0，已自动切换为 ${url.origin}（避免浏览器兼容性问题）`
)
window.location.replace(url.toString())
}
} catch (e) {
// 忽略：不影响主流程
}
})()
</script>
<!-- 资源预加载优化：减少首屏渲染阻塞 -->
<link rel="preload" href="/static/css/prism.css" as="style" />
<!-- MathJax 数学公式支持 - 按需加载优化（1.17MB → 需要时才加载） -->
<script src="/static/js/mathjax-loader.js" nonce="{{ csp_nonce }}"></script>
<!-- Prism.js 代码高亮 CSS -->
<link rel="stylesheet" href="/static/css/prism.css" />
<!-- marked.js Markdown 渲染 (defer: 按顺序异步加载) -->
<script defer src="/static/js/marked.js" nonce="{{ csp_nonce }}"></script>
<!-- Prism.js 代码高亮 JS (defer: 按顺序异步加载) -->
<script defer src="/static/js/prism.js" nonce="{{ csp_nonce }}"></script>
<style>
/* 合规：不再打包/分发第三方字体，统一使用系统默认字体栈 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* CSS 变量 - 深色主题（默认） */
:root {
--bg-primary: #1a1a1f;
--bg-secondary: rgba(30, 30, 40, 0.8);
--bg-tertiary: rgba(45, 45, 60, 0.9);
--bg-hover: rgba(255, 255, 255, 0.1);
--text-primary: #f5f5f7;
--text-secondary: rgba(245, 245, 247, 0.7);
--border-color: rgba(255, 255, 255, 0.15);
--shadow-color: rgba(0, 0, 0, 0.2);
--accent-color: #8b5cf6;
--accent-hover: #a78bfa;
}
/* CSS 变量 - 浅色主题（Anthropic 官方品牌色 - 优化版） */
[data-theme='light'] {
--bg-primary: #e8e6dc; /* Light Gray - 页面底层 */
--bg-secondary: #faf9f5; /* Light - 内容卡片（浮出） */
--bg-tertiary: #f2f1ec; /* Header */
--bg-input: #e8e6dc; /* Light Gray - 输入区域 */
--bg-hover: rgba(217, 119, 87, 0.12); /* Orange 淡化 */
--text-primary: #141413; /* Dark */
--text-secondary: #5a5955; /* Dark 淡化 */
--border-color: rgba(176, 174, 165, 0.3); /* Mid Gray 淡化 */
--shadow-color: rgba(20, 20, 19, 0.12); /* Dark 阴影 */
--accent-color: #d97757; /* Orange - 主要强调色 */
--accent-hover: #c56a4c; /* 深 Orange */
--accent-secondary: #6a9bcc; /* Blue - 次要强调色 */
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
background: var(--bg-primary);
/* 移除复杂背景渐变以提升性能 */
color: var(--text-primary);
min-height: 100vh;
padding: 1rem 0;
line-height: 1.47059;
font-weight: 400;
letter-spacing: -0.022em;
overflow-x: hidden;
box-sizing: border-box;
/* 移除背景动画以提升性能 */
transition: background-color 0.3s ease, color 0.3s ease;
}
/* 无内容状态下的特殊样式 */
body.no-content-mode {
height: 100vh;
overflow: hidden;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 3rem 0;
box-sizing: border-box;
}
/* 移除背景动画定义以提升性能 */
.container {
max-width: 720px;
margin: 0 auto;
background: var(--bg-tertiary);
/* 移除毛玻璃效果以提升性能 */
border: 1px solid var(--border-color);
border-radius: 32px;
padding: 0;
box-shadow: 0 8px 16px var(--shadow-color);
overflow: hidden;
position: relative;
/* 移除过渡动画以提升性能 */
transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* 无内容模式下的容器样式 */
body.no-content-mode .container {
margin: 0;
width: 100%;
max-width: 720px;
max-height: calc(100vh - 6rem);
overflow: hidden;
flex-shrink: 0;
}
/* 移除容器悬停效果以提升性能 */
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
.header {
background: var(--bg-secondary);
/* 移除毛玻璃效果 */
padding: 1rem 1.75rem;
border-bottom: 0.5px solid var(--border-color);
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
}
.header::after {
content: '';
position: absolute;
bottom: 0;
left: 1.75rem;
right: 1.75rem;
height: 0.5px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
h1 {
color: var(--text-primary);
margin: 0;
font-size: 1.375rem;
font-weight: 600;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 0.625rem;
transition: color 0.3s ease;
}
.header-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
/* 设置按钮样式 - 简化版 */
.settings-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: #f5f5f7;
padding: 0.5rem;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
backdrop-filter: blur(8px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.settings-btn:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.settings-btn:active {
transform: translateY(0);
background: rgba(255, 255, 255, 0.08);
}
.settings-btn:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}
/* 头部按钮容器 - 确保水平排列 */
.header-actions {
display: flex;
flex-direction: row; /* 强制水平排列 */
flex-wrap: nowrap; /* 禁止换行 */
gap: 8px;
align-items: center;
}
/* 主题切换按钮样式 */
.theme-toggle-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: #f5f5f7;
padding: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
backdrop-filter: blur(8px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.theme-toggle-btn:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.theme-toggle-btn:active {
transform: translateY(0);
}
.theme-toggle-btn:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.5);
}
.theme-icon {
width: 20px;
height: 20px;
position: absolute;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* 太阳图标（暗色主题时隐藏） */
.theme-icon-sun {
opacity: 0;
transform: rotate(-90deg) scale(0.5);
}
/* 月亮图标（暗色主题时显示） */
.theme-icon-moon {
opacity: 1;
transform: rotate(0deg) scale(1);
}
/* 亮色主题时图标状态 */
.theme-toggle-btn.is-light .theme-icon-sun {
opacity: 1;
transform: rotate(0deg) scale(1);
}
.theme-toggle-btn.is-light .theme-icon-moon {
opacity: 0;
transform: rotate(90deg) scale(0.5);
}
/* 亮色主题适配 */
[data-theme='light'] .settings-btn,
[data-theme='light'] .theme-toggle-btn {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.1);
color: #1e293b;
}
[data-theme='light'] .settings-btn:hover,
[data-theme='light'] .theme-toggle-btn:hover {
background: rgba(0, 0, 0, 0.1);
border-color: rgba(0, 0, 0, 0.15);
}
/* 设置面板样式 - 简化版 */
.settings-panel {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
backdrop-filter: blur(8px);
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.settings-content {
background: linear-gradient(145deg, rgba(30, 30, 40, 0.98), rgba(25, 25, 35, 0.95));
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
max-width: 800px;
width: 100%;
max-height: 85vh;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
backdrop-filter: blur(20px);
position: relative;
}
.settings-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.settings-content::-webkit-scrollbar {
width: 6px;
}
.settings-content::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 3px;
}
.settings-content::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
border-radius: 3px;
}
.settings-content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
}
.settings-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2.5rem 2.5rem 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
position: relative;
}
.settings-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}
.settings-header::after {
content: '';
position: absolute;
bottom: 0;
left: 2.5rem;
right: 2.5rem;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 122, 255, 0.3), transparent);
}
.settings-header h3 {
margin: 0;
color: #ffffff;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.settings-close-btn {
background: linear-gradient(135deg, rgba(255, 69, 58, 0.12), rgba(255, 69, 58, 0.08));
border: 1.5px solid rgba(255, 69, 58, 0.25);
border-radius: 50%;
color: #ff453a;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 12px rgba(255, 69, 58, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.settings-close-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
background: currentColor;
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 1px;
transition: all 0.2s ease;
}
.settings-close-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
background: currentColor;
transform: translate(-50%, -50%) rotate(-45deg);
border-radius: 1px;
transition: all 0.2s ease;
}
.settings-close-btn:hover {
background: linear-gradient(135deg, rgba(255, 69, 58, 0.2), rgba(255, 69, 58, 0.15));
border-color: rgba(255, 69, 58, 0.4);
transform: scale(1.08);
box-shadow: 0 4px 20px rgba(255, 69, 58, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
color: #ff2d20;
}
.settings-close-btn:hover::before,
.settings-close-btn:hover::after {
width: 16px;
height: 2.5px;
}
.settings-close-btn:active {
transform: scale(0.92);
box-shadow: 0 1px 6px rgba(255, 69, 58, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1);
background: linear-gradient(135deg, rgba(255, 69, 58, 0.25), rgba(255, 69, 58, 0.2));
}
.settings-body {
padding: 2rem;
max-height: calc(85vh - 140px);
overflow-y: auto;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.005));
}
.settings-main-title {
color: #ffffff;
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 1.5rem 0;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.setting-group {
margin-bottom: 2rem;
background: rgba(45, 45, 60, 0.9);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
padding: 1.5rem;
position: relative;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.setting-group::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
.setting-group:last-child {
margin-bottom: 0;
}
.setting-group::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
border-radius: 16px 16px 0 0;
}
.setting-group-title {
color: #f5f5f7;
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 1.5rem 0;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
background: linear-gradient(135deg, #f5f5f7, rgba(0, 122, 255, 0.8));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.setting-group-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40%;
height: 2px;
background: linear-gradient(90deg, #007aff, rgba(0, 122, 255, 0.4), transparent);
border-radius: 1px;
}
.setting-subgroup {
margin: 1.5rem 0;
padding: 1rem;
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
position: relative;
}
.setting-subgroup-title {
color: rgba(245, 245, 247, 0.95);
font-size: 1rem;
font-weight: 600;
margin: 0 0 1rem 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.setting-item {
margin-bottom: 1rem;
padding: 0.5rem 0;
background: transparent;
border: none;
border-radius: 0;
transition: none;
position: relative;
}
.setting-item:last-child {
margin-bottom: 0;
}
.setting-label {
display: flex;
align-items: center;
gap: 1rem;
cursor: pointer;
margin-bottom: 0;
padding: 0.25rem;
border-radius: 8px;
transition: all 0.2s ease;
}
.setting-label input[type='checkbox'] {
width: 20px;
height: 20px;
accent-color: #007aff;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
position: relative;
}
.setting-label input[type='checkbox']:checked {
transform: scale(1.1);
box-shadow: 0 0 10px rgba(0, 122, 255, 0.3);
}
.setting-title {
color: #f5f5f7;
font-size: 1rem;
font-weight: 600;
flex: 1;
transition: color 0.2s ease;
letter-spacing: -0.01em;
}
.setting-label:hover .setting-title {
color: rgba(245, 245, 247, 0.9);
}
.setting-description {
color: rgba(245, 245, 247, 0.65);
font-size: 0.9rem;
line-height: 1.5;
margin-left: 3rem;
font-style: italic;
transition: color 0.2s ease;
}
.setting-item:hover .setting-description {
color: rgba(245, 245, 247, 0.75);
}
/* 音量滑块样式 - 美化版 */
.volume-slider {
flex: 1;
margin: 0 1rem;
height: 6px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
border-radius: 3px;
outline: none;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.volume-slider::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
background: linear-gradient(135deg, #007aff, #0056cc);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.volume-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 4px 15px rgba(0, 122, 255, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.2),
0 0 20px rgba(0, 122, 255, 0.2);
}
.volume-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: linear-gradient(135deg, #007aff, #0056cc);
border-radius: 50%;
cursor: pointer;
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.volume-value {
color: #007aff;
font-size: 1rem;
font-weight: 700;
min-width: 50px;
text-align: right;
background: linear-gradient(135deg, #007aff, rgba(0, 122, 255, 0.8));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 10px rgba(0, 122, 255, 0.3);
}
/* 设置输入框样式 */
.setting-input {
width: 100%;
padding: 0.75rem 1rem;
margin-top: 0.5rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #f5f5f7;
font-size: 0.95rem;
font-family: inherit;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.setting-input:focus {
outline: none;
border-color: #007aff;
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}
.setting-input::placeholder {
color: rgba(245, 245, 247, 0.5);
}
/* 设置选择框样式 */
.setting-select {
width: 100%;
padding: 0.75rem 1rem;
margin-top: 0.5rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #f5f5f7;
font-size: 0.95rem;
font-family: inherit;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 16px;
padding-right: 3rem;
}
.setting-select:focus {
outline: none;
border-color: #007aff;
background-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}
.setting-select option {
background: #1a1a1f;
color: #f5f5f7;
padding: 0.5rem;
}
/* 设置标签布局调整 */
.setting-label.has-input {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.setting-label.has-input .setting-title {
margin-bottom: 0.25rem;
}
/* 按钮样式 - 简化版 */
.btn {
background: rgba(0, 122, 255, 0.8);
border: 1px solid rgba(0, 122, 255, 0.3);
border-radius: 10px;
color: #ffffff;
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}
.btn:hover {
background: rgba(0, 122, 255, 0.9);
border-color: rgba(0, 122, 255, 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}
.btn:active {
transform: translateY(0);
background: rgba(0, 122, 255, 0.7);
}
.btn-secondary {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
border: 1px solid rgba(255, 255, 255, 0.2);
color: #f5f5f7;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
border-color: rgba(255, 255, 255, 0.25);
color: #ffffff;
}
/* 状态信息样式 - 美化版 */
.status-info {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
padding: 1.75rem;
position: relative;
backdrop-filter: blur(15px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.status-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
border-radius: 16px 16px 0 0;
}
.status-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0.75rem 1rem;
border-radius: 10px;
transition: all 0.2s ease;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.005));
border: 1px solid rgba(255, 255, 255, 0.05);
}
/* ===== 浅色主题 - 设置面板覆盖 ===== */
[data-theme='light'] .settings-panel {
background: rgba(0, 0, 0, 0.4);
}
[data-theme='light'] .settings-content {
background: #faf9f5 !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}
[data-theme='light'] .settings-content::before {
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent) !important;
}
[data-theme='light'] .settings-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
background: #f2f1ec !important;
}
[data-theme='light'] .settings-header::before,
[data-theme='light'] .settings-header::after {
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent) !important;
}
[data-theme='light'] .settings-header h3,
[data-theme='light'] #settings-title {
color: #141413 !important;
}
[data-theme='light'] .settings-close-btn {
background: rgba(0, 0, 0, 0.08) !important;
color: #bf4d43 !important;
border-color: rgba(191, 77, 67, 0.3) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
[data-theme='light'] .settings-close-btn:hover {
background: rgba(191, 77, 67, 0.15) !important;
border-color: rgba(191, 77, 67, 0.5) !important;
}
[data-theme='light'] .settings-body {
background: #faf9f5 !important;
}
[data-theme='light'] .settings-main-title {
color: #141413 !important;
}
[data-theme='light'] .setting-group {
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
[data-theme='light'] .setting-subgroup {
background: #f8f8f5 !important;
}
[data-theme='light'] .setting-subgroup-title {
color: #141413 !important;
border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
[data-theme='light'] .setting-item {
border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme='light'] .setting-label {
color: #141413 !important;
}
[data-theme='light'] .status-row {
background: rgba(0, 0, 0, 0.02) !important;
border-color: rgba(0, 0, 0, 0.08) !important;
color: #141413 !important;
}
/* 浅色主题 - 状态行内部 span 元素颜色覆盖 */
[data-theme='light'] .status-row span:first-child {
color: rgba(20, 20, 19, 0.85) !important;
}
[data-theme='light'] .status-row span:last-child {
color: #141413 !important;
}
/* 浅色主题 - 设置描述文字颜色（预防性修复） */
[data-theme='light'] .setting-description {
color: rgba(20, 20, 19, 0.65) !important;
}
[data-theme='light'] .setting-item:hover .setting-description {
color: rgba(20, 20, 19, 0.75) !important;
}
[data-theme='light'] .setting-label:hover .setting-title {
color: rgba(20, 20, 19, 0.9) !important;
}
[data-theme='light'] .setting-input::placeholder {
color: rgba(20, 20, 19, 0.5) !important;
}
[data-theme='light'] .section-icon {
color: #141413 !important;
}
[data-theme='light'] .settings-content::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05) !important;
}
[data-theme='light'] .settings-content::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1)) !important;
}
[data-theme='light'] .settings-content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.15)) !important;
}
[data-theme='light'] .setting-input {
background: #ffffff !important;
border-color: rgba(0, 0, 0, 0.15) !important;
color: #141413 !important;
}
[data-theme='light'] .setting-input:focus {
border-color: #d97757 !important;
box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.1) !important;
}
[data-theme='light'] .setting-select {
background: #ffffff !important;
border-color: rgba(0, 0, 0, 0.15) !important;
color: #141413 !important;
}
[data-theme='light'] .volume-slider::-webkit-slider-track {
background: rgba(0, 0, 0, 0.1) !important;
}
[data-theme='light'] .volume-slider::-webkit-slider-thumb {
background: linear-gradient(135deg, #d97757, #c06647) !important;
}
[data-theme='light'] .volume-value {
background: linear-gradient(135deg, #d97757, rgba(217, 119, 87, 0.8)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.status-row:last-child {
margin-bottom: 0;
}
.status-row span:first-child {
color: rgba(245, 245, 247, 0.85);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.status-row span:last-child {
color: #f5f5f7;
font-size: 0.9rem;
font-weight: 600;
padding: 0.4rem 0.75rem;
border-radius: 8px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
}
.content {
padding: 1.75rem;
}
.feedback-group {
background: transparent;
border: none;
padding: 0;
margin: 0;
}
.description {
font-size: 1rem;
margin-bottom: 1.5rem;
padding: 1.5rem 1.75rem;
background: linear-gradient(
135deg,
rgba(0, 122, 255, 0.08) 0%,
rgba(88, 86, 214, 0.06) 50%,
rgba(175, 82, 222, 0.05) 100%
);
border: 1px solid rgba(0, 122, 255, 0.25);
border-radius: 24px;
color: #f5f5f7;
line-height: 1.6;
letter-spacing: -0.022em;
position: relative;
/* 移除毛玻璃效果 */
box-shadow: 0 4px 8px rgba(0, 122, 255, 0.1);
}
.description::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
border-radius: 24px 24px 0 0;
}
.options-container {
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem; /* 增加选项间距 */
}
.option-item {
display: flex;
align-items: center;
padding: 1.25rem 1.5rem;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.03) 50%,
rgba(255, 255, 255, 0.05) 100%
);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
transition: all 0.15s ease;
cursor: pointer;
position: relative;
margin-bottom: 0.75rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
user-select: none;
}
.option-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
border-radius: 20px 20px 0 0;
}
.option-item:hover {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.06) 50%,
rgba(255, 255, 255, 0.08) 100%
);
border-color: rgba(0, 122, 255, 0.4);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}
.option-item:active {
transform: translateY(0);
transition: all 0.05s ease;
}
.option-item input[type='checkbox'] {
margin-right: 1rem;
width: 20px;
height: 20px;
accent-color: #007aff;
cursor: pointer;
flex-shrink: 0;
position: relative;
}
.option-item input[type='checkbox']::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
cursor: pointer;
}
.option-item label {
font-size: 1rem;
cursor: pointer;
color: #f5f5f7;
flex: 1;
font-weight: 400;
letter-spacing: -0.022em;
line-height: 1.5;
padding: 0.5rem 0;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.separator {
height: 0.5px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
margin: 1.25rem 0;
}
.textarea-container {
position: relative;
margin-bottom: 1rem;
}
.feedback-textarea {
width: 100%;
min-height: 180px;
padding: 1.5rem 1.75rem;
font-size: 1rem;
font-family: 'MonoLisaNerdFont', 'SF Mono', ui-monospace, SFMono-Regular, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.03) 50%,
rgba(255, 255, 255, 0.05) 100%
);
color: #f5f5f7;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
resize: vertical;
margin-bottom: 1rem;
/* 移除过渡动画 */
line-height: 1.6;
letter-spacing: -0.022em;
/* 移除毛玻璃效果 */
position: relative;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.feedback-textarea:focus {
outline: none;
border-color: rgba(0, 122, 255, 0.5);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
background: rgba(255, 255, 255, 0.08);
/* 移除transform效果 */
}
.feedback-textarea::placeholder {
color: rgba(245, 245, 247, 0.6);
font-weight: 400;
}
.button-container {
display: flex;
gap: 0.625rem;
justify-content: flex-end;
margin-top: 1.25rem;
}
.btn {
padding: 1rem 1.75rem;
font-size: 0.9375rem;
font-weight: 600;
font-family: inherit;
border: none;
border-radius: 20px;
cursor: pointer;
/* 移除过渡动画 */
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 130px;
justify-content: center;
letter-spacing: -0.022em;
position: relative;
/* 移除毛玻璃效果 */
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
border-radius: 20px 20px 0 0;
}
.btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
border-radius: 20px;
opacity: 0;
transition: opacity 0.3s ease;
}
.btn:hover::after {
opacity: 1;
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #f5f5f7;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
/* 移除transform效果 */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.btn-primary {
background: #007aff;
color: white;
border: 1px solid rgba(0, 122, 255, 0.3);
box-shadow: 0 4px 8px rgba(0, 122, 255, 0.2);
}
.btn-primary:hover {
background: #0056cc;
/* 移除transform效果 */
box-shadow: 0 6px 12px rgba(0, 122, 255, 0.3);
}
.btn:disabled {
background: rgba(255, 255, 255, 0.03);
color: rgba(245, 245, 247, 0.3);
cursor: not-allowed;
transform: none;
box-shadow: none;
border-color: rgba(255, 255, 255, 0.05);
}
.status-message {
margin-top: 1rem;
padding: 0.875rem 1.125rem;
border-radius: 12px;
text-align: center;
display: none;
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: -0.022em;
/* 移除毛玻璃效果 */
position: relative;
}
.status-message::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.5px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
border-radius: 12px 12px 0 0;
}
.status-success {
background: rgba(52, 199, 89, 0.08);
color: #34c759;
border: 0.5px solid rgba(52, 199, 89, 0.2);
}
.status-error {
background: rgba(255, 69, 58, 0.08);
color: #ff453a;
border: 0.5px solid rgba(255, 69, 58, 0.2);
}
.shortcut-hint {
position: relative;
bottom: auto;
left: auto;
display: flex; /* 默认显示 */
align-items: center;
gap: 0.25rem;
font-size: 0.625rem;
color: rgba(245, 245, 247, 0.7);
font-weight: 400;
letter-spacing: -0.022em;
cursor: help;
padding: 0.3rem 0.5rem;
border-radius: 6px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 10;
opacity: 0.8;
width: fit-content;
}
.shortcut-hint:hover {
color: rgba(245, 245, 247, 1);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
opacity: 1;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
.shortcut-hint .keyboard-icon {
font-size: 0.75rem;
opacity: 0.6;
}
.shortcut-tooltip {
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;
background: linear-gradient(
135deg,
rgba(30, 41, 59, 0.95) 0%,
rgba(15, 23, 42, 0.98) 50%,
rgba(8, 15, 35, 0.96) 100%
);
color: rgba(248, 250, 252, 0.95);
padding: 12px 16px;
border-radius: 10px;
font-size: 11px;
line-height: 1.4;
white-space: pre;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 1000;
width: fit-content;
text-align: left;
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 4px 15px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
font-weight: 500;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
monospace;
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.shortcut-hint:hover .shortcut-tooltip {
opacity: 1;
visibility: visible;
}
.shortcut-hint::before {
content: '';
position: absolute;
top: 100%;
left: 16px;
margin-top: 2px;
border: 6px solid transparent;
border-bottom-color: rgb(17, 24, 39);
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 1001;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.shortcut-hint:hover::before {
opacity: 1;
visibility: visible;
}
/* 图片预览区域样式 */
.image-preview-container {
margin-bottom: 1.5rem;
padding: 1.5rem;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.03) 50%,
rgba(255, 255, 255, 0.05) 100%
);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
position: relative;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.image-preview-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.image-count-text {
font-size: 0.875rem;
color: rgba(245, 245, 247, 0.8);
font-weight: 500;
}
.clear-all-images-btn {
background: rgba(255, 69, 58, 0.1);
color: #ff453a;
border: 1px solid rgba(255, 69, 58, 0.2);
border-radius: 12px;
padding: 0.5rem 1rem;
font-size: 0.8125rem;
cursor: pointer;
transition: all 0.2s ease;
}
.clear-all-images-btn:hover {
background: rgba(255, 69, 58, 0.15);
border-color: rgba(255, 69, 58, 0.3);
}
.image-previews {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 1rem;
max-height: 300px;
overflow-y: auto;
}
.image-preview-item {
position: relative;
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
/* 移除cursor: pointer和hover动效 */
}
.image-preview-thumbnail {
width: 100%;
height: 80px;
object-fit: cover;
display: block;
/* 保留cursor: pointer用于点击放大功能 */
cursor: pointer;
}
.image-preview-info {
padding: 0.5rem;
background: rgba(0, 0, 0, 0.3);
color: #f5f5f7;
font-size: 0.75rem;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.image-preview-remove {
position: absolute;
top: 4px;
right: 4px;
background: rgba(255, 69, 58, 0.9);
color: white;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
cursor: pointer;
font-size: 12px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(1);
}
.image-preview-remove:hover {
opacity: 1;
background: rgba(255, 69, 58, 1);
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(255, 69, 58, 0.4);
}
/* 移除图片缩略图的hover动效 */
/* 图片放大预览模态框 */
.image-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(5px);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.image-modal.show {
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease-out;
}
.image-modal-content {
position: relative;
max-width: 90%;
max-height: 90%;
display: flex;
align-items: center;
justify-content: center;
}
.image-modal img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.image-modal-close {
position: absolute;
top: -40px;
right: -40px;
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
font-size: 24px;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.image-modal-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.image-modal-info {
position: absolute;
bottom: -50px;
left: 0;
right: 0;
text-align: center;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 8px;
border-radius: 4px;
font-size: 14px;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 移动设备优化 */
@media (max-width: 768px) {
.image-preview-container {
margin: 1rem 0;
}
.image-previews {
gap: 0.75rem;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.image-preview-item {
min-height: 80px;
}
.image-preview-thumbnail {
max-height: 60px;
}
.image-preview-remove {
width: 22px;
height: 22px;
font-size: 12px;
top: 2px;
right: 2px;
}
.image-modal-close {
top: 10px;
right: 10px;
width: 40px;
height: 40px;
font-size: 20px;
}
.image-modal-info {
bottom: 10px;
left: 10px;
right: 10px;
font-size: 12px;
}
/* 触摸友好的按钮大小 */
.btn {
min-height: 44px;
padding: 0.75rem 1rem;
}
/* 拖拽提示优化 */
.drag-overlay-content {
padding: 1.5rem;
max-width: 300px;
}
.drag-icon {
font-size: 3rem;
}
.drag-text {
font-size: 1.25rem;
}
}
/* 触摸设备优化 - 已移除所有hover动效，无需特殊处理 */
/* 拖拽覆盖层样式 */
.drag-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.drag-overlay-content {
text-align: center;
color: #f5f5f7;
padding: 2rem;
border: 2px dashed rgba(0, 122, 255, 0.5);
border-radius: 20px;
background: rgba(0, 122, 255, 0.1);
max-width: 400px;
}
.drag-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.8;
}
.drag-text {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.drag-subtext {
font-size: 1rem;
opacity: 0.7;
}
/* 拖拽区域高亮效果 */
.textarea-drag-over {
border-color: rgba(0, 122, 255, 0.6) !important;
background: rgba(0, 122, 255, 0.05) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3) !important;
}
/* 加载状态样式 */
.image-loading {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
color: rgba(245, 245, 247, 0.6);
font-size: 0.875rem;
}
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid #007aff;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 0.5rem;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 错误状态样式 */
.image-error {
background: rgba(255, 69, 58, 0.1);
border-color: rgba(255, 69, 58, 0.3);
color: #ff453a;
}
.error-icon {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
/* 高性能Markdown渲染样式 */
.markdown-content {
line-height: 1.5;
color: #f5f5f7;
/* 优化渲染性能 */
contain: layout style;
will-change: auto;
transform: translateZ(0); /* 启用硬件加速 */
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
color: #f5f5f7;
font-weight: 600;
margin: 1rem 0 0.5rem 0;
}
.markdown-content h1 {
font-size: 1.5rem;
}
.markdown-content h2 {
font-size: 1.25rem;
}
.markdown-content h3 {
font-size: 1.125rem;
}
.markdown-content h4 {
font-size: 1rem;
}
.markdown-content p {
margin: 0.75rem 0;
color: #f5f5f7;
}
/* 简洁稳健的列表样式 - 使用标准CSS */
.markdown-content ul,
.markdown-content ol {
margin: 0.75rem 0;
padding-left: 1.5rem;
color: #f5f5f7;
line-height: 1.6;
}
.markdown-content ul {
list-style-type: disc;
list-style-position: outside;
}
.markdown-content ol {
list-style-type: decimal;
list-style-position: outside;
}
.markdown-content li {
margin: 0.375rem 0;
color: #f5f5f7;
line-height: 1.6;
}
/* 自定义列表标记颜色 */
.markdown-content ul li::marker {
color: #f5f5f7;
font-size: 1.1em;
}
.markdown-content ol li::marker {
color: #f5f5f7;
font-weight: 600;
}
/* 嵌套列表样式 */
.markdown-content ul ul {
list-style-type: circle;
margin: 0.25rem 0;
padding-left: 1.25rem;
}
.markdown-content ul ul ul {
list-style-type: square;
}
.markdown-content ol ol {
list-style-type: lower-alpha;
margin: 0.25rem 0;
padding-left: 1.25rem;
}
.markdown-content ol ol ol {
list-style-type: lower-roman;
}
/* 列表项内容样式 */
.markdown-content li p {
margin: 0.25rem 0;
}
.markdown-content li > *:first-child {
margin-top: 0;
}
.markdown-content li > *:last-child {
margin-bottom: 0;
}
.markdown-content blockquote {
margin: 1rem 0;
padding: 0.75rem 1rem;
background: rgba(0, 122, 255, 0.08);
border-left: 3px solid #007aff;
color: #f5f5f7;
}
/* 内联代码样式 */
.markdown-content code {
background: rgba(255, 255, 255, 0.12);
color: #ff453a;
padding: 0.125rem 0.375rem;
font-family: 'MonoLisaNerdFont', monospace;
font-size: 0.875rem;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* 代码块容器样式 - 现代化设计 */
.code-block-container {
position: relative;
margin: 1.5rem 0;
border-radius: 20px;
background: linear-gradient(
135deg,
rgba(15, 15, 25, 0.95) 0%,
rgba(25, 25, 40, 0.9) 50%,
rgba(20, 20, 35, 0.95) 100%
);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.code-block-container:hover {
transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
border-color: rgba(0, 122, 255, 0.3);
}
/* 移除代码块装饰线以简化样式 */
/* 代码块样式 - 优化版 */
.markdown-content pre {
background: transparent;
border: none;
padding: 1.5rem 1.75rem;
margin: 0;
overflow-x: auto;
border-radius: 20px;
font-size: 0.9rem;
line-height: 1.6;
position: relative;
}
.markdown-content pre code {
background: none;
color: #f5f5f7;
padding: 0;
font-family: 'MonoLisaNerdFont', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono',
'Consolas', monospace;
font-size: inherit;
font-weight: 400;
letter-spacing: 0.025em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
text-decoration: none !important;
}
/* 强制覆盖代码高亮背景 */
.markdown-content .highlight,
.markdown-content div[style*='background'] {
background: transparent !important;
}
/* 移除代码块内所有文本装饰 */
.markdown-content pre *,
.markdown-content code *,
.markdown-content pre,
.markdown-content code {
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-style: none !important;
text-decoration-color: transparent !important;
text-decoration-thickness: 0 !important;
text-underline-offset: 0 !important;
border-bottom: none !important;
border-top: none !important;
outline: none !important;
box-shadow: none !important;
}
/* 强制移除所有代码相关元素的下划线 */
.code-block-container *,
.code-block-container,
pre *,
pre,
code *,
code,
.highlight *,
.highlight {
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-style: none !important;
text-decoration-color: transparent !important;
text-decoration-thickness: 0 !important;
text-underline-offset: 0 !important;
border-bottom: none !important;
border-top: none !important;
}
/* 完全隐藏代码块滚动条但保持滚动功能 */
.markdown-content pre::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.code-block-container pre::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* 对于Firefox浏览器隐藏滚动条 */
.markdown-content pre {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.code-block-container pre {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
/* 代码工具栏样式 - 现代化设计 */
.code-toolbar {
position: absolute;
top: 16px;
right: 16px;
display: flex;
align-items: center;
gap: 10px;
z-index: 10;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.code-block-container:hover .code-toolbar {
opacity: 1;
}
/* 语言标识样式 - 精美设计 */
.language-label {
background: linear-gradient(135deg, rgba(0, 122, 255, 0.25), rgba(88, 86, 214, 0.2));
border: 1px solid rgba(0, 122, 255, 0.4);
border-radius: 8px;
padding: 5px 10px;
font-size: 0.7rem;
color: #4fc3f7;
font-weight: 700;
font-family: inherit;
backdrop-filter: blur(15px);
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
transition: all 0.3s ease;
}
.language-label:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
border-color: rgba(0, 122, 255, 0.6);
}
/* 复制按钮样式 - 精美设计 */
.copy-button {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 10px;
padding: 7px 12px;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
backdrop-filter: blur(15px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
}
.copy-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.copy-button:hover::before {
left: 100%;
}
.copy-button:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.12));
border-color: rgba(255, 255, 255, 0.4);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.copy-button:active {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.copy-button.copied {
background: linear-gradient(135deg, rgba(52, 199, 89, 0.25), rgba(52, 199, 89, 0.15));
border-color: rgba(52, 199, 89, 0.5);
color: #4caf50;
box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}
.markdown-content table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
background: rgba(255, 255, 255, 0.03);
}
.markdown-content th,
.markdown-content td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #f5f5f7;
}
.markdown-content th {
background: rgba(0, 122, 255, 0.1);
font-weight: 600;
}
.markdown-content a {
color: #007aff;
text-decoration: none;
}
.markdown-content a:hover {
text-decoration: underline;
}
/* 删除线样式 */
.markdown-content del,
.markdown-content s,
.markdown-content .strikethrough {
text-decoration: line-through;
color: rgba(245, 245, 247, 0.6);
text-decoration-color: rgba(245, 245, 247, 0.6);
text-decoration-thickness: 2px;
}
.markdown-content hr {
border: none;
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 1.5rem 0;
}
/* 加载动画 */
@keyframes loading {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
/* 移除所有动画定义以提升性能 */
/* 移除浮动动画以提升性能 */
/* 移动端适配 */
@media (max-width: 768px) {
/* 移动端隐藏快捷键提示 */
.shortcut-hint {
display: none !important;
}
/* 移动端隐藏快捷键部分 */
.shortcuts-section {
display: none !important;
}
body {
padding: 0;
font-size: 16px; /* 防止iOS缩放 */
min-height: 100vh;
min-height: 100dvh; /* 使用动态视口高度 */
max-height: 100vh;
max-height: 100dvh;
overflow-y: auto;
}
body.no-content-mode {
padding: 0;
height: 100vh;
height: 100dvh; /* 使用动态视口高度 */
overflow: hidden;
}
.container {
max-width: 100%;
margin: 0;
border-radius: 0;
box-shadow: none;
border: none;
background: transparent;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
body.no-content-mode .container {
margin: 0;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
background: transparent;
overflow: hidden;
}
.header {
padding: 0.75rem 1.25rem;
/* 添加iOS安全区域支持，确保标题不被状态栏遮挡 */
padding-top: max(0.75rem, env(safe-area-inset-top));
background: transparent;
border-bottom: none;
flex-shrink: 0;
}
h1 {
font-size: 1.25rem;
}
.content {
padding: 1rem 1.25rem;
background: transparent;
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.feedback-group {
display: flex;
flex-direction: column;
height: 100%;
}
.description {
padding: 1rem 1.25rem;
border-radius: 20px;
font-size: 0.95rem;
margin-bottom: 1rem;
flex-shrink: 0;
}
.option-item {
padding: 1rem 1.25rem;
border-radius: 16px;
margin-bottom: 0.5rem;
}
.option-item input[type='checkbox'] {
width: 20px;
height: 20px;
margin-right: 0.75rem;
}
.option-item label {
font-size: 0.95rem;
line-height: 1.4;
}
.feedback-textarea {
min-height: 100px;
max-height: 30vh;
padding: 1rem 1.25rem;
border-radius: 20px;
font-size: 16px; /* 防止iOS缩放 */
line-height: 1.5;
flex-shrink: 0;
}
.button-container {
flex-direction: column;
gap: 0.75rem;
margin-top: 1rem;
flex-shrink: 0;
}
.btn {
padding: 0.875rem 1.5rem;
font-size: 0.9rem;
border-radius: 16px;
min-width: auto;
width: 100%;
}
.shortcut-hint:hover,
.shortcut-hint:active {
color: rgba(245, 245, 247, 1);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
opacity: 1;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
.shortcut-tooltip {
top: 100%;
left: 0;
margin-top: 6px;
width: fit-content;
font-size: 0.6rem;
padding: 6px 10px;
border-radius: 5px;
line-height: 1.3;
}
.keyboard-icon {
font-size: 0.45rem;
opacity: 0.3;
}
.status-message {
margin-top: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 10px;
font-size: 0.9rem;
}
/* 无有效内容页面移动端适配 */
#no-content-container {
padding: 2rem 1.25rem !important;
min-height: 300px !important;
}
#no-content-container h2 {
font-size: 1.5rem !important;
margin-bottom: 0.75rem !important;
}
#no-content-container p {
font-size: 0.95rem !important;
margin-bottom: 1.5rem !important;
}
#no-content-container .button-container {
margin-top: 1.5rem !important;
}
/* 进度条适配 */
#no-content-container > div:nth-child(4) {
width: 200px !important;
}
/* Markdown内容移动端适配 */
.markdown-content {
font-size: 0.95rem;
}
.markdown-content h1 {
font-size: 1.3rem;
}
.markdown-content h2 {
font-size: 1.15rem;
}
.markdown-content h3 {
font-size: 1.05rem;
}
.code-block-container {
border-radius: 16px;
margin: 1rem 0;
transform: none !important; /* 禁用移动端悬停效果 */
}
.code-block-container:hover {
transform: none !important;
}
.markdown-content pre {
padding: 1rem 1.25rem;
font-size: 0.85rem;
overflow-x: auto;
border-radius: 16px;
}
.markdown-content code {
font-size: 0.8rem;
padding: 0.1rem 0.3rem;
border-radius: 4px;
}
.code-toolbar {
top: 10px;
right: 10px;
gap: 8px;
opacity: 1; /* 移动端始终显示 */
}
.language-label {
padding: 4px 8px;
font-size: 0.65rem;
border-radius: 6px;
}
.copy-button {
padding: 5px 10px;
font-size: 0.7rem;
border-radius: 8px;
}
/* 移动端也完全隐藏滚动条 */
.markdown-content pre::-webkit-scrollbar,
.code-block-container pre::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.markdown-content pre,
.code-block-container pre {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.markdown-content table {
font-size: 0.85rem;
}
.markdown-content th,
.markdown-content td {
padding: 0.5rem;
}
/* 移动端列表样式优化 */
.markdown-content ul,
.markdown-content ol {
padding-left: 1.5rem;
margin: 0.5rem 0;
}
.markdown-content ul li,
.markdown-content ol li {
margin: 0.375rem 0;
padding-left: 1rem;
font-size: 0.95rem;
}
.markdown-content ul li::before {
font-size: 1.1em;
}
.markdown-content ul ul,
.markdown-content ol ol,
.markdown-content ul ol,
.markdown-content ol ul {
padding-left: 1rem;
}
/* 设置面板中等屏幕优化 */
.settings-content {
max-width: 90%;
width: 90%;
}
.settings-header {
padding: 1.25rem 1.25rem 1rem;
}
.settings-body {
padding: 1.25rem;
}
.setting-label {
min-height: 40px;
}
.setting-label input[type='checkbox'] {
width: 18px;
height: 18px;
}
.btn {
min-height: 40px;
padding: 0.625rem 1rem;
}
.settings-close-btn {
min-width: 40px;
min-height: 40px;
}
}
/* 小屏幕手机适配 */
@media (max-width: 480px) {
body {
padding: 0;
min-height: 100vh;
min-height: 100dvh; /* 使用动态视口高度 */
max-height: 100vh;
max-height: 100dvh;
overflow-y: auto;
}
body.no-content-mode {
padding: 0;
height: 100vh;
height: 100dvh; /* 使用动态视口高度 */
overflow: hidden;
}
.container {
margin: 0;
border-radius: 0;
box-shadow: none;
border: none;
background: transparent;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
body.no-content-mode .container {
margin: 0;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
background: transparent;
overflow: hidden;
}
.header {
padding: 0.75rem 1rem;
/* 添加iOS安全区域支持，确保标题不被状态栏遮挡 */
padding-top: max(0.75rem, env(safe-area-inset-top));
background: transparent;
border-bottom: none;
flex-shrink: 0;
}
h1 {
font-size: 1.125rem;
}
.content {
padding: 0.75rem 1rem;
background: transparent;
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.feedback-group {
display: flex;
flex-direction: column;
height: 100%;
}
.description {
padding: 1rem 1.25rem;
font-size: 0.9rem;
}
.feedback-textarea {
min-height: 80px;
max-height: 25vh;
padding: 0.875rem 1rem;
font-size: 16px;
flex-shrink: 0;
}
.btn {
padding: 0.75rem 1.25rem;
font-size: 0.85rem;
}
#no-content-container {
padding: 1.5rem 1rem !important;
min-height: 250px !important;
}
#no-content-container h2 {
font-size: 1.25rem !important;
}
#no-content-container p {
font-size: 0.9rem !important;
}
/* 进度条适配 */
#no-content-container > div:nth-child(4) {
width: 160px !important;
height: 4px !important;
}
/* 小屏幕列表样式优化 */
.markdown-content ul,
.markdown-content ol {
padding-left: 1.25rem;
margin: 0.375rem 0;
}
.markdown-content ul li,
.markdown-content ol li {
margin: 0.3rem 0;
padding-left: 0;
font-size: 0.9rem;
}
.markdown-content ul li::before {
font-size: 1em;
}
.markdown-content ul ul,
.markdown-content ol ol,
.markdown-content ul ol,
.markdown-content ol ul {
padding-left: 1.25rem;
}
/* 设置面板移动端优化 */
.settings-panel {
padding: 0;
align-items: stretch;
justify-content: stretch;
}
.settings-content {
max-width: 100%;
width: 100%;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
margin: 0;
border-radius: 0;
border: none;
background: rgba(30, 30, 40, 0.98);
display: flex;
flex-direction: column;
}
.settings-header {
padding: 1rem 1rem 0.75rem;
position: sticky;
top: 0;
background: rgba(30, 30, 40, 0.98);
z-index: 10;
}
.settings-header h3 {
font-size: 1.1rem;
}
.settings-close-btn {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
}
.settings-close-btn::before,
.settings-close-btn::after {
width: 16px;
height: 2.5px;
}
.settings-body {
padding: 1rem;
padding-bottom: max(1rem, env(safe-area-inset-bottom));
flex: 1;
overflow-y: auto;
max-height: none !important;
height: auto;
}
.settings-main-title {
font-size: 1.1rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}
.setting-group {
margin-bottom: 1.5rem;
padding: 1rem;
border-radius: 12px;
}
.setting-group-title {
font-size: 0.95rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}
.setting-subgroup {
margin: 1rem 0;
padding: 0.75rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.01);
}
.setting-subgroup-title {
font-size: 0.85rem;
margin-bottom: 0.75rem;
padding-bottom: 0.25rem;
}
.setting-item {
margin-bottom: 0.75rem;
padding: 0.5rem 0;
border-radius: 0;
background: transparent;
border: none;
}
.setting-label {
gap: 0.75rem;
margin-bottom: 0;
min-height: 44px;
align-items: center;
padding: 0;
}
.setting-label input[type='checkbox'] {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
}
.setting-title {
font-size: 1rem;
line-height: 1.4;
}
.setting-description {
font-size: 0.9rem;
line-height: 1.4;
margin-left: 3rem;
}
.volume-slider {
margin: 0 1rem;
min-height: 44px;
}
.btn {
min-height: 44px;
padding: 0.75rem 1rem;
font-size: 0.95rem;
border-radius: 12px;
}
.status-info {
padding: 0.75rem;
}
.status-row {
margin-bottom: 0.75rem;
min-height: 44px;
align-items: center;
}
.status-row span {
font-size: 0.95rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>
<div class="header-icon">
<svg width="32" height="32" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="masterBg" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" class="svg-stop-1" />
<stop offset="100%" class="svg-stop-2" />
</linearGradient>
<radialGradient id="aiFluidCore" cx="50%" cy="50%" r="70%" fx="52%" fy="48%">
<stop offset="0%" class="svg-stop-3" />
<stop offset="30%" class="svg-stop-4" />
<stop offset="60%" class="svg-stop-5" />
<stop offset="100%" class="svg-stop-6" />
</radialGradient>
<linearGradient id="interventionControl" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" class="svg-stop-7" />
<stop offset="30%" class="svg-stop-8" />
<stop offset="70%" class="svg-stop-9" />
<stop offset="100%" class="svg-stop-10" />
</linearGradient>
</defs>
<g>
<rect
x="10"
y="10"
width="100"
height="100"
rx="22.5"
ry="22.5"
fill="url(#masterBg)"
/>
</g>
<g transform="translate(60,60) scale(0.95)">
<g>
<path
id="aiShape"
d="M 0 -35
Q 30 -35, 30 0
Q 30 35, 0 35
Q -30 35, -30 0
Q -30 -35, 0 -35 Z
M 0 -25
Q 20 -25, 20 0
Q 20 25, 0 25
Q -20 25, -20 0
Q -20 -25, 0 -25 Z"
fill-rule="evenodd"
fill="url(#aiFluidCore)"
transform="rotate(15)"
/>
</g>
<g transform="translate(0, -1)">
<path
d="M -15 -22
L -7 -22
C -5.5 -22, -4.5 -21, -4.5 -19.5
L -4.5 19.5
C -4.5 21, -5.5 22, -7 22
L -15 22
C -16.5 22, -17.5 21, -17.5 19.5
L -17.5 -19.5
C -17.5 -21, -16.5 -22, -15 -22 Z"
fill="url(#interventionControl)"
/>
<path
d="M 4.5 -22
L 12.5 -22
C 14 -22, 15 -21, 15 -19.5
L 15 19.5
C 15 21, 14 22, 12.5 22
L 4.5 22
C 3 22, 2 21, 2 19.5
L 2 -19.5
C 2 -21, 3 -22, 4.5 -22 Z"
fill="url(#interventionControl)"
/>
</g>
</g>
</svg>
</div>
AI Intervention Agent
</h1>
<div class="header-actions">
<button
class="theme-toggle-btn"
id="theme-toggle-btn"
title="切换主题"
aria-label="切换主题"
>
<!-- Claude 风格太阳图标（浅色模式）- 精致线条版 -->
<svg
class="theme-icon theme-icon-sun"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<!-- 太阳中心圆 -->
<circle cx="10" cy="10" r="3" />
<!-- 光芒射线 -->
<line x1="10" y1="2" x2="10" y2="4" />
<line x1="10" y1="16" x2="10" y2="18" />
<line x1="2" y1="10" x2="4" y2="10" />
<line x1="16" y1="10" x2="18" y2="10" />
<line x1="4.2" y1="4.2" x2="5.8" y2="5.8" />
<line x1="14.2" y1="14.2" x2="15.8" y2="15.8" />
<line x1="4.2" y1="15.8" x2="5.8" y2="14.2" />
<line x1="14.2" y1="5.8" x2="15.8" y2="4.2" />
</svg>
<!-- Claude 风格月亮图标（深色模式）- 精致线条版 -->
<svg
class="theme-icon theme-icon-moon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<!-- 新月形状 -->
<path
d="M17.5 10.5C17.5 14.642 14.142 18 10 18C5.858 18 2.5 14.642 2.5 10.5C2.5 6.358 5.858 3 10 3C10.2 3 10.4 3.01 10.6 3.02C8.4 3.9 7 6.1 7 8.7C7 12.1 9.9 15 13.3 15C14.9 15 16.3 14.3 17.3 13.2C17.4 12.3 17.5 11.4 17.5 10.5Z"
/>
</svg>
</button>
<button
class="settings-btn"
id="settings-btn"
title="通知设置"
aria-label="打开通知设置"
aria-haspopup="dialog"
aria-controls="settings-panel"
>
<!-- Claude 风格设置/齿轮图标 - 精致线条版 -->
<svg
class="btn-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<!-- 齿轮中心圆 -->
<circle cx="12" cy="12" r="3" />
<!-- 齿轮外形 -->
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
/>
</svg>
</button>
</div>
</div>
<!-- 任务标签页 -->
<div
class="task-tabs-container hidden"
id="task-tabs-container"
role="tablist"
aria-label="任务列表"
>
<div class="task-tabs" id="task-tabs">
<!-- 标签页将由 JS 动态生成 -->
</div>
</div>
<!-- 无有效内容页面 -->
<div id="no-content-container" class="no-content-container">
<div class="no-content-icon" id="hourglass-lottie"></div>
<h2 class="no-content-title">无有效内容</h2>
<p class="no-content-description">等待新的反馈请求...</p>
<div class="no-content-progress">
<div class="no-content-progress-bar"></div>
</div>
<div class="button-container no-content-buttons" id="no-content-buttons">
<button class="btn btn-secondary" id="close-btn" aria-label="关闭 Web 服务">
<!-- Claude 风格关闭图标（X）- 精致线条版 -->
<svg
class="btn-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
style="width: 18px; height: 18px; margin-right: 6px"
>
<!-- 交叉线条 -->
<line x1="5" y1="5" x2="15" y2="15" />
<line x1="15" y1="5" x2="5" y2="15" />
</svg>
关闭服务
</button>
</div>
<!-- 无内容页面的状态消息显示区域 -->
<div class="status-message no-content-status" id="no-content-status-message"></div>
</div>
<!-- 正常内容页面 -->
<div id="content-container" class="content">
<div class="feedback-group">
<!-- Task ID 和倒计时显示区域 -->
<div class="header-info-container">
<div class="task-id-container hidden" id="task-id-container">
<span class="task-id-label">
<!-- Claude 官方文档图标 -->
<svg
class="section-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3 4.5C3 3.67157 3.67157 3 4.5 3H11C11.1326 3 11.2598 3.05268 11.3536 3.14645L16.8536 8.64645C16.9473 8.74021 17 8.86739 17 9V15.5C17 16.3284 16.3284 17 15.5 17H4.5C3.67157 17 3 16.3284 3 15.5V4.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5V15.5C4 15.7761 4.22386 16 4.5 16H15.5C15.7761 16 16 15.7761 16 15.5V9.20711L11.2929 4.5H11H4.5Z"
/>
</svg>
任务:
</span>
<span class="task-id-text" id="task-id-text"></span>
</div>
<div class="countdown-container hidden" id="countdown-container">
<span class="countdown-label">⏰</span>
<span class="countdown-text" id="countdown-text">0秒后自动重新询问</span>
</div>
</div>
<div class="description markdown-content" id="description">加载中...</div>
<div class="options-container hidden" id="options-container">
<!-- 预定义选项将在这里动态加载 -->
</div>
<div class="separator hidden" id="separator"></div>
<!-- 图片预览区域 -->
<div class="image-preview-container hidden" id="image-preview-container">
<div class="image-preview-header">
<span class="image-count-text">已选择 <span id="image-count">0</span> 张图片</span>
<button class="clear-all-images-btn" id="clear-all-images-btn" title="清除所有图片">
<!-- Claude 官方垃圾箱图标 -->
<svg
class="btn-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7 3C7 2.44772 7.44772 2 8 2H12C12.5523 2 13 2.44772 13 3V4H16C16.2761 4 16.5 4.22386 16.5 4.5C16.5 4.77614 16.2761 5 16 5H15V16C15 16.5523 14.5523 17 14 17H6C5.44772 17 5 16.5523 5 16V5H4C3.72386 5 3.5 4.77614 3.5 4.5C3.5 4.22386 3.72386 4 4 4H7V3ZM8 4H12V3H8V4ZM6 5V16H14V5H6Z"
/>
<path
d="M8.5 7C8.77614 7 9 7.22386 9 7.5V14.5C9 14.7761 8.77614 15 8.5 15C8.22386 15 8 14.7761 8 14.5V7.5C8 7.22386 8.22386 7 8.5 7Z"
/>
<path
d="M11.5 7C11.7761 7 12 7.22386 12 7.5V14.5C12 14.7761 11.7761 15 11.5 15C11.2239 15 11 14.7761 11 14.5V7.5C11 7.22386 11.2239 7 11.5 7Z"
/>
</svg>
清除全部
</button>
</div>
<div class="image-previews" id="image-previews">
<!-- 图片预览缩略图将在这里动态添加 -->
</div>
</div>
<!-- 拖拽提示覆盖层 -->
<div class="drag-overlay hidden" id="drag-overlay">
<div class="drag-overlay-content">
<div class="drag-icon">📁</div>
<div class="drag-text">拖放图片到这里</div>
<div class="drag-subtext">支持 JPG、PNG、GIF、WEBP 格式</div>
</div>
</div>
<!-- 图片放大预览模态框 -->
<div class="image-modal" id="image-modal">
<div class="image-modal-content">
<img id="modal-image" src="" alt="" />
<button class="image-modal-close" onclick="closeImageModal()">×</button>
<div class="image-modal-info" id="modal-info"></div>
</div>
</div>
<!-- 代码粘贴模态框（iOS/HTTP 等场景无法读取剪贴板时的降级方案） -->
<div
class="settings-panel hidden"
id="code-paste-panel"
role="dialog"
aria-modal="true"
aria-labelledby="code-paste-title"
>
<div class="settings-content" style="max-width: 720px">
<div class="settings-header">
<h3 id="code-paste-title" class="settings-title">
<svg
class="section-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
<line x1="14" y1="4" x2="10" y2="20"></line>
</svg>
插入代码
</h3>
<button class="settings-close-btn" id="code-paste-close-btn" type="button" aria-label="关闭"></button>
</div>
<div class="settings-body">
<div class="setting-group">
<div
id="code-paste-hint"
style="margin-bottom: 0.75rem; color: rgba(245, 245, 247, 0.8); font-size: 0.9rem"
>
由于浏览器安全限制无法自动读取剪贴板，请在下方粘贴代码（iOS 可长按→粘贴），然后点击“插入”。
</div>
<textarea
id="code-paste-textarea"
class="code-paste-textarea"
placeholder="在此粘贴代码…"
spellcheck="false"
autocapitalize="off"
autocomplete="off"
autocorrect="off"
></textarea>
<div class="code-paste-actions">
<button class="btn btn-secondary" id="code-paste-cancel-btn" type="button">取消</button>
<button class="btn btn-primary" id="code-paste-insert-btn" type="button">插入</button>
</div>
</div>
</div>
</div>
</div>
<!-- 隐藏的文件上传input -->
<input type="file" id="file-upload-input" multiple accept="image/*" class="hidden" />
<div class="textarea-container">
<textarea
class="feedback-textarea"
id="feedback-text"
placeholder="请在此输入您的反馈内容……"
></textarea>
</div>
<div class="button-container">
<button class="btn btn-secondary" id="insert-code-btn">
<!-- Claude 风格代码图标（线条版） -->
<svg
class="btn-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
<line x1="14" y1="4" x2="10" y2="20"></line>
</svg>
插入代码
</button>
<button class="btn btn-secondary" id="upload-image-btn">
<!-- Claude 风格图片图标（线条版） -->
<svg
class="btn-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
上传图片
</button>
<button class="btn btn-primary" id="submit-btn">
<!-- Claude 风格发送图标（双箭头） -->
<svg
class="btn-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.29289 3.29289C3.68342 2.90237 4.31658 2.90237 4.70711 3.29289L10.7071 9.29289C11.0976 9.68342 11.0976 10.3166 10.7071 10.7071L4.70711 16.7071C4.31658 17.0976 3.68342 17.0976 3.29289 16.7071C2.90237 16.3166 2.90237 15.6834 3.29289 15.2929L8.58579 10L3.29289 4.70711C2.90237 4.31658 2.90237 3.68342 3.29289 3.29289ZM9.29289 3.29289C9.68342 2.90237 10.3166 2.90237 10.7071 3.29289L16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L14.5858 10L9.29289 4.70711C8.90237 4.31658 8.90237 3.68342 9.29289 3.29289Z"
/>
</svg>
发送请求
</button>
</div>
<div class="status-message" id="status-message"></div>
</div>
</div>
<!-- 设置面板 -->
<div
class="settings-panel hidden"
id="settings-panel"
role="dialog"
aria-modal="true"
aria-labelledby="settings-title"
>
<div class="settings-content">
<div class="settings-header">
<h3 id="settings-title">
<!-- Claude 风格设置/齿轮图标 - 精致线条版 -->
<svg
class="section-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<!-- 齿轮中心圆 -->
<circle cx="12" cy="12" r="3" />
<!-- 齿轮外形 -->
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
/>
</svg>
设置
</h3>
<button
class="settings-close-btn"
id="settings-close-btn"
aria-label="关闭设置"
></button>
</div>
<div class="settings-body">
<!-- 通知标题 -->
<h4 class="settings-main-title">
<!-- Claude 风格铃铛图标 -->
<svg
class="section-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 2C7.23858 2 5 4.23858 5 7V11.5858L3.29289 13.2929C3.00693 13.5789 2.92134 14.009 3.07612 14.3827C3.2309 14.7564 3.59554 15 4 15H16C16.4045 15 16.7691 14.7564 16.9239 14.3827C17.0787 14.009 16.9931 13.5789 16.7071 13.2929L15 11.5858V7C15 4.23858 12.7614 2 10 2ZM6 7C6 4.79086 7.79086 3 10 3C12.2091 3 14 4.79086 14 7V12C14 12.2652 14.1054 12.5196 14.2929 12.7071L15.5858 14H4.41421L5.70711 12.7071C5.89464 12.5196 6 12.2652 6 12V7ZM8.26756 16C8.61337 17.1825 9.70948 18 11 18C12.2905 18 13.3866 17.1825 13.7324 16H8.26756Z"
/>
</svg>
通知
</h4>
<!-- 通知设置 -->
<div class="setting-group">
<!-- 通知总开关 -->
<div class="setting-item">
<label class="setting-label">
<input type="checkbox" id="notification-enabled" checked />
<span class="setting-title">启用通知功能</span>
</label>
</div>
<!-- 桌面通知设置 -->
<div class="setting-subgroup">
<h5 class="setting-subgroup-title">
<svg
class="section-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<line x1="2" y1="12" x2="22" y2="12" />
<path
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
/>
</svg>
桌面通知
</h5>
<div class="setting-item">
<label class="setting-label">
<input type="checkbox" id="web-notification-enabled" checked />
<span class="setting-title">桌面通知</span>
</label>
</div>
<div class="setting-item">
<label class="setting-label">
<input type="checkbox" id="auto-request-permission" checked />
<span class="setting-title">自动请求通知权限</span>
</label>
</div>
</div>
<!-- 声音通知设置 -->
<div class="setting-subgroup">
<h5 class="setting-subgroup-title">
<svg
class="section-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
<path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
</svg>
声音通知
</h5>
<div class="setting-item">
<label class="setting-label">
<input type="checkbox" id="sound-notification-enabled" checked />
<span class="setting-title">声音通知</span>
</label>
</div>
<div class="setting-item">
<label class="setting-label">
<input type="checkbox" id="sound-mute" />
<span class="setting-title">静音模式</span>
</label>
</div>
<div class="setting-item">
<label class="setting-label">
<span class="setting-title">音量调节</span>
<input
type="range"
id="sound-volume"
min="0"
max="100"
value="80"
class="volume-slider"
/>
<span class="volume-value">80%</span>
</label>
</div>
</div>
<!-- 移动设备通知设置 -->
<div class="setting-subgroup">
<h5 class="setting-subgroup-title">
<svg
class="section-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
<line x1="12" y1="18" x2="12.01" y2="18" />
</svg>
移动设备
</h5>
<div class="setting-item">
<label class="setting-label">
<input type="checkbox" id="mobile-optimized" checked />
<span class="setting-title">移动设备优化</span>
</label>
</div>
<div class="setting-item">
<label class="setting-label">
<input type="checkbox" id="mobile-vibrate" checked />
<span class="setting-title">震动提醒</span>
</label>
</div>
</div>
<!-- Bark 通知设置 -->
<div class="setting-subgroup">
<h5 class="setting-subgroup-title">
<svg
class="section-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06z"
/>
<path d="M10 2c1 .5 2 2 2 5" />
</svg>
Bark 通知 (iOS)
</h5>
<div class="setting-item">
<label class="setting-label">
<input type="checkbox" id="bark-notification-enabled" />
<span class="setting-title">启用 Bark 通知</span>
</label>
</div>
<div class="setting-item">
<label class="setting-label has-input">
<span class="setting-title">Bark URL</span>
<input
type="url"
id="bark-url"
class="setting-input"
placeholder="https://api.day.app/push"
value=""
/>
</label>
</div>
<div class="setting-item">
<label class="setting-label has-input">
<span class="setting-title">Device Key</span>
<input
type="text"
id="bark-device-key"
class="setting-input"
placeholder="请输入您的 Bark Device Key"
value=""
/>
</label>
</div>
<div class="setting-item">
<label class="setting-label has-input">
<span class="setting-title">图标 URL (可选)</span>
<input
type="url"
id="bark-icon"
class="setting-input"
placeholder="https://example.com/icon.png"
value=""
/>
</label>
</div>
<div class="setting-item">
<label class="setting-label has-input">
<span class="setting-title">点击行为</span>
<select id="bark-action" class="setting-select">
<option value="none">无操作</option>
<option value="url">打开链接</option>
<option value="copy">复制内容</option>
</select>
</label>
</div>
<div class="setting-item">
<button class="btn btn-secondary" id="test-bark-notification-btn">
<svg
class="btn-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
/>
<polyline points="14 2 14 8 20 8" />
<line x1="9" y1="15" x2="15" y2="15" />
</svg>
测试 Bark 通知
</button>
</div>
</div>
<!-- 通知状态信息 -->
<div class="setting-subgroup">
<h5 class="setting-subgroup-title">
<svg
class="section-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="16" x2="12" y2="12" />
<line x1="12" y1="8" x2="12.01" y2="8" />
</svg>
状态信息
</h5>
<div class="status-row">
<span>浏览器支持：</span>
<span id="browser-support-status">检测中...</span>
</div>
<div class="status-row">
<span>通知权限：</span>
<span id="notification-permission-status">检测中...</span>
</div>
<div class="status-row">
<span>音频状态：</span>
<span id="audio-status">检测中...</span>
</div>
</div>
<!-- 测试功能 -->
<div class="setting-subgroup">
<h5 class="setting-subgroup-title">
<svg
class="section-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
/>
<polyline points="14 2 14 8 20 8" />
<line x1="9" y1="15" x2="15" y2="15" />
</svg>
测试功能
</h5>
<div class="setting-item">
<button class="btn btn-secondary" id="test-notification-btn">
<svg
class="btn-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
</svg>
测试通知
</button>
</div>
<div class="setting-item">
<button class="btn btn-secondary" id="reset-settings-btn">
<svg
class="btn-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="1 4 1 10 7 10" />
<polyline points="23 20 23 14 17 14" />
<path
d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"
/>
</svg>
重置设置
</button>
</div>
</div>
</div>
<!-- 配置文件信息（用于明确“当前实际读取的 config.jsonc 是哪一份”） -->
<h4 class="settings-main-title shortcuts-section">
<svg
class="section-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 7H4" />
<path d="M20 12H4" />
<path d="M20 17H4" />
</svg>
配置
</h4>
<div class="setting-group">
<div class="setting-item">
<label class="setting-label has-input">
<span class="setting-title">当前配置文件路径</span>
<input
type="text"
id="config-file-path"
class="setting-input"
value="加载中..."
readonly
/>
</label>
<div style="margin-top: 0.5rem; color: rgba(245, 245, 247, 0.7); font-size: 0.85rem">
开发模式默认优先使用工作目录的 <code>./config.jsonc</code>。如需强制指向
<code>~/.config/ai-intervention-agent/config.jsonc</code>，请在启动前设置环境变量：
<code>AI_INTERVENTION_AGENT_CONFIG_FILE=/path/to/config.jsonc</code>。
</div>
</div>
</div>
<!-- 常用快捷键 -->
<h4 class="settings-main-title shortcuts-section">
<svg
class="section-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="4" width="20" height="16" rx="2" ry="2" />
<path
d="M6 8h.001M10 8h.001M14 8h.001M18 8h.001M8 12h.001M12 12h.001M16 12h.001M6 16h12"
/>
</svg>
常用快捷键
</h4>
<div class="setting-group shortcuts-section">
<div class="status-row">
<span>提交反馈：</span>
<span id="shortcut-submit">Ctrl+Enter</span>
</div>
<div class="status-row">
<span>插入代码：</span>
<span id="shortcut-code">Alt+C</span>
</div>
<div class="status-row">
<span>粘贴图片：</span>
<span id="shortcut-paste">Ctrl+V</span>
</div>
<div class="status-row">
<span>上传图片：</span>
<span id="shortcut-upload">Ctrl+U</span>
</div>
<div class="status-row">
<span>清除图片：</span>
<span id="shortcut-delete">Delete</span>
</div>
</div>
<!-- 版本信息 -->
<div class="version-info">
<div class="version-text">
<span class="version-name">AI Intervention Agent</span>
<span class="version-number">v{{ version }}</span>
</div>
<a
href="{{ github_url }}"
target="_blank"
rel="noopener noreferrer"
class="github-link"
title="在 GitHub 上查看项目"
>
<!-- GitHub 图标 - 明确设置尺寸以确保正确渲染 -->
<svg
viewBox="0 0 24 24"
fill="currentColor"
class="github-icon"
width="14"
height="14"
style="width: 14px; height: 14px; flex-shrink: 0"
>
<path
d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
/>
</svg>
<span>GitHub</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 验证工具类：统一验证和缓存功能 -->
<script defer src="/static/js/validation-utils.js" nonce="{{ csp_nonce }}"></script>
<!-- 🎬 Lottie 动画库 (defer: 按顺序异步加载) -->
<script defer src="/static/js/lottie.min.js" nonce="{{ csp_nonce }}"></script>
<!-- 🎨 主题切换模块 (defer: 按顺序异步加载) -->
<script defer src="/static/js/theme.js" nonce="{{ csp_nonce }}"></script>
<!-- ⌨️ 键盘快捷键模块 (defer: 按顺序异步加载) -->
<script defer src="/static/js/keyboard-shortcuts.js" nonce="{{ csp_nonce }}"></script>
<!-- DOM 安全工具：防止 XSS 攻击 (defer: 按顺序异步加载) -->
<script defer src="/static/js/dom-security.js" nonce="{{ csp_nonce }}"></script>
<!-- 📋 多任务管理模块 (defer: 按顺序异步加载，依赖内联脚本中的函数) -->
<script defer src="/static/js/multi_task.js" nonce="{{ csp_nonce }}"></script>
<!-- 主应用脚本 (依赖: mathjax-loader, multi_task, theme, dom-security 等) -->
<script defer src="/static/js/app.js" nonce="{{ csp_nonce }}"></script>
</body>
</html>
