<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>知乎屏蔽词设置</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
padding: 16px;
min-width: 400px;
background: #f6f6f6;
margin: 0;
}
h1 {
font-size: 18px;
margin: 0 0 16px 0;
color: #1a1a1a;
}
.input-group {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
#keyword-input {
flex: 1;
padding: 8px 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
font-size: 14px;
}
#keyword-input:focus {
outline: none;
border-color: #0066ff;
}
button {
padding: 8px 16px;
background: #0066ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
button:hover {
background: #0052cc;
}
.keyword-list {
background: white;
border: 1px solid #d9d9d9;
border-radius: 4px;
max-height: 300px;
overflow-y: auto;
}
.keyword-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid #f0f0f0;
}
.keyword-item:last-child {
border-bottom: none;
}
.keyword-text {
font-size: 14px;
color: #1a1a1a;
word-break: break-all;
}
.delete-btn {
padding: 4px 8px;
background: #ff4d4f;
font-size: 12px;
}
.delete-btn:hover {
background: #ff7875;
}
.empty-tip {
padding: 24px;
text-align: center;
color: #8c8c8c;
font-size: 14px;
}
.status {
margin-top: 12px;
padding: 8px;
border-radius: 4px;
font-size: 13px;
display: none;
}
.status.success {
display: block;
background: #f6ffed;
color: #52c41a;
border: 1px solid #b7eb8f;
}
.status.error {
display: block;
background: #fff2f0;
color: #ff4d4f;
border: 1px solid #ffccc7;
}
.count {
font-size: 13px;
color: #8c8c8c;
margin-bottom: 8px;
}
.action-group {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.action-group button {
padding: 6px 14px;
font-size: 13px;
}
.import-btn {
background: #52c41a;
}
.import-btn:hover {
background: #389e0d;
}
.export-btn {
background: #666;
}
.export-btn:hover {
background: #555;
}
</style>
</head>
<body>
<h1>屏蔽词管理</h1>
<div class="input-group">
<input type="text" id="keyword-input" placeholder="输入要屏蔽的关键词">
<button id="add-btn">添加</button>
</div>
<div class="action-group">
<button class="import-btn" id="import-btn">导入</button>
<button class="export-btn" id="export-btn">导出</button>
<input type="file" id="import-file" accept=".json,.txt" style="display:none">
</div>
<div class="count" id="count"></div>
<div class="keyword-list" id="keyword-list">
<div class="empty-tip">暂无屏蔽词</div>
</div>
<div class="status" id="status"></div>
<script src="options.js"></script>
</body>
</html>