openclaw/shell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Delete docs directory

Browse Source
This commit is contained in:
starry
2026-01-13 06:04:32 +08:00
committed by GitHub
parent a9fdfbb08c
commit b730123a0b
4 changed files with 0 additions and 2365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

584
docs/index.html
View File

@@ -1,584 +0,0 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IP地址命令生成器</title>
<link rel="icon" href="favicon.ico">
<style>
:root {
--primary: #4f46e5;
--primary-hover: #4338ca;
--secondary: #10b981;
--secondary-hover: #059669;
--danger: #ef4444;
--danger-hover: #dc2626;
--text: #1f2937;
--text-light: #6b7280;
--bg: #f9fafb;
--card-bg: #ffffff;
--border: #e5e7eb;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
padding: 20px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
font-size: 16px;
}
.container {
background: var(--card-bg);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
padding: 20px;
margin: 10px 0;
}
.header {
text-align: center;
margin-bottom: 16px;
}
.header h1 {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 8px;
color: var(--text);
}
.header p {
color: var(--text-light);
font-size: 1rem;
}
.input-section {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}
.input-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.flex-row {
display: flex;
gap: 12px;
}
.flex-col {
flex: 1;
}
label {
font-weight: 500;
font-size: 1rem;
color: var(--text);
}
input, textarea, select {
padding: 10px 12px;
font-size: 1rem;
border-radius: 6px;
border: 1px solid var(--border);
transition: border-color 0.2s, box-shadow 0.2s;
width: 100%;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}
#interface {
max-width: 120px;
}
#ipInput {
min-height: 120px;
resize: vertical;
font-family: monospace;
font-size: 0.95rem;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
button {
padding: 4px 12px;
font-size: 1rem;
font-weight: 500;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
flex: 1;
min-width: 100px;
display: flex;
align-items: center;
justify-content: center;
height: 36px;
}
.btn-primary {
background-color: var(--primary);
color: white;
}
.btn-primary:hover {
background-color: var(--primary-hover);
}
.btn-secondary {
background-color: var(--secondary);
color: white;
}
.btn-secondary:hover {
background-color: var(--secondary-hover);
}
.btn-danger {
background-color: var(--danger);
color: white;
}
.btn-danger:hover {
background-color: var(--danger-hover);
}
.tab-container {
margin-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.tab-buttons {
display: flex;
}
.tab-button {
background: transparent;
border: none;
padding: 8px 16px;
cursor: pointer;
font-weight: 500;
color: var(--text-light);
border-bottom: 2px solid transparent;
}
.tab-button.active {
color: var(--primary);
border-bottom: 2px solid var(--primary);
}
.tab-content {
display: none;
padding-top: 16px;
}
.tab-content.active {
display: block;
}
.result-container {
margin-top: 16px;
}
.result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.result-header h3 {
font-size: 1.1rem;
font-weight: 600;
}
.result-box {
background-color: #f8fafc;
border: 1px solid var(--border);
padding: 12px;
border-radius: 6px;
min-height: 150px;
max-height: 300px;
white-space: pre-wrap;
word-wrap: break-word;
font-family: 'Roboto Mono', monospace;
font-size: 0.95rem;
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.result-box::-webkit-scrollbar {
display: none;
}
.doc-section {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border);
font-size: 0.9rem;
}
.doc-section h4 {
margin-bottom: 8px;
font-size: 1rem;
}
.doc-section ul {
padding-left: 20px;
margin-bottom: 12px;
}
.doc-section ul li {
margin-bottom: 4px;
}
.doc-section code {
background-color: #f1f5f9;
padding: 2px 4px;
border-radius: 4px;
font-family: 'Roboto Mono', monospace;
font-size: 0.85rem;
}
@media (max-width: 640px) {
.container {
padding: 16px;
}
.header h1 {
font-size: 1.5rem;
}
.button-group {
flex-direction: column;
}
button {
width: 100%;
min-width: auto;
}
#interface {
max-width: 100%;
}
.flex-row {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>公网IP地址添加命令生成器</h1>
<p>为Linux服务器生成添加公网IP的命令</p>
</div>
<div class="tab-container">
<div class="tab-buttons">
<button class="tab-button active" onclick="changeTab(event, 'ipv4Tab')">IPv4</button>
<button class="tab-button" onclick="changeTab(event, 'ipv6Tab')">IPv6</button>
</div>
</div>
<div id="ipv4Tab" class="tab-content active">
<div class="input-section">
<div class="input-row">
<label for="interface">网卡名称</label>
<input type="text" id="interface" value="eth0" placeholder="例如: eth0" />
</div>
<div class="input-row">
<label for="ipInput">公网IPv4地址列表 (每行一个)</label>
<textarea id="ipInput" placeholder="例如:
203.0.113.10
192.0.2.100/24"></textarea>
</div>
</div>
<div class="button-group">
<button class="btn-primary" onclick="generateCommand('ipv4')">生成命令</button>
<button class="btn-danger" onclick="generateCSectionCommand()">生成C段命令</button>
</div>
</div>
<div id="ipv6Tab" class="tab-content">
<div class="input-section">
<div class="input-row">
<label for="interfaceIpv6">网卡名称</label>
<input type="text" id="interfaceIpv6" value="eth0" placeholder="例如: eth0" />
</div>
<div class="input-row">
<label for="ipv6Prefix">IPv6地址或网段前缀</label>
<input type="text" id="ipv6Prefix" placeholder="例如: 2001:475:35:3f4::6/64" />
</div>
<div class="input-row">
<div class="flex-row">
<div class="flex-col">
<label for="ipv6Count">生成IPv6地址数量</label>
<input type="number" id="ipv6Count" value="10" min="1" max="100" />
</div>
<div class="flex-col">
<label for="ipv6Mask">子网掩码长度</label>
<input type="number" id="ipv6Mask" value="64" min="1" max="128" />
</div>
</div>
</div>
</div>
<div class="button-group">
<button class="btn-primary" onclick="generateIPv6Command()">生成IPv6命令</button>
</div>
</div>
<div class="result-container">
<div class="result-header">
<h3>生成的命令：</h3>
<button class="btn-secondary" onclick="copyResult()">复制命令</button>
</div>
<div class="result-box" id="resultBox">生成的命令将显示在这里...</div>
</div>
<div class="doc-section">
<h4>Linux服务器添加公网IP说明</h4>
<ul>
<li><strong>临时添加IP</strong>: 上述命令会临时添加IP，系统重启后失效</li>
<li><strong>永久添加</strong>: 需要修改网络配置文件 <code>/etc/network/interfaces</code> 或 <code>/etc/sysconfig/network-scripts/</code> 下的配置</li>
<li><strong>验证添加</strong>: 使用 <code>ip addr show</code> 命令验证IP是否添加成功</li>
<li><strong>注意事项</strong>: 添加公网IP前需确认IP已分配给您的服务器，否则可能导致IP冲突</li>
<li><strong>IPv6注意</strong>: 添加IPv6地址前确保服务器已开启IPv6支持</li>
</ul>
<p><small>使用<code>sysctl -w net.ipv6.conf.all.forwarding=1</code>开启IPv6转发，<code>sysctl -p</code>使配置生效</small></p>
</div>
</div>
<script>
function changeTab(evt, tabId) {
const tabContents = document.getElementsByClassName("tab-content");
for (let i = 0; i < tabContents.length; i++) {
tabContents[i].classList.remove("active");
}
const tabButtons = document.getElementsByClassName("tab-button");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons[i].classList.remove("active");
}
document.getElementById(tabId).classList.add("active");
evt.currentTarget.classList.add("active");
}
function generateCommand(type) {
const interfaceName = document.getElementById(type === 'ipv6' ? 'interfaceIpv6' : 'interface').value.trim();
const ipInput = document.getElementById('ipInput').value.trim().split('\n');
let commands = '';
if (interfaceName && ipInput.length > 0) {
ipInput.forEach(ip => {
const trimmedIp = ip.trim();
if (trimmedIp) {
const ipWithMask = trimmedIp.includes('/') ? trimmedIp : `${trimmedIp}/32`;
commands += `sudo ip addr add ${ipWithMask} dev ${interfaceName}\n`;
}
});
document.getElementById('resultBox').textContent = commands || "没有有效的IP地址输入";
} else {
document.getElementById('resultBox').textContent = "请填写网卡名称和IP地址";
}
}
function generateCSectionCommand() {
const interfaceName = document.getElementById('interface').value.trim();
if (!interfaceName) {
document.getElementById('resultBox').textContent = "请先填写网卡名称";
return;
}
// 获取第一个IP作为C段基准
let firstIp = document.getElementById('ipInput').value.trim().split('\n')[0] || '';
firstIp = firstIp.split('/')[0];
if (!firstIp) {
firstIp = '198.51.100.1'; // 使用RFC 5737定义的测试网段作为默认值
}
const ipParts = firstIp.split('.');
if (ipParts.length !== 4 || ipParts.some(part => isNaN(parseInt(part)) || parseInt(part) > 255)) {
document.getElementById('resultBox').textContent = "请输入有效的IP地址作为C段基准";
return;
}
let commands = '';
const baseIp = `${ipParts[0]}.${ipParts[1]}.${ipParts[2]}`;
for (let i = 1; i <= 254; i++) {
commands += `sudo ip addr add ${baseIp}.${i}/24 dev ${interfaceName}\n`;
}
document.getElementById('resultBox').textContent = commands;
}
function generateIPv6Command() {
const interfaceName = document.getElementById('interfaceIpv6').value.trim();
const ipv6Input = document.getElementById('ipv6Prefix').value.trim();
const ipv6Count = parseInt(document.getElementById('ipv6Count').value);
let ipv6Mask = parseInt(document.getElementById('ipv6Mask').value);
if (!interfaceName || !ipv6Input) {
document.getElementById('resultBox').textContent = "请填写网卡名称和IPv6前缀";
return;
}
if (isNaN(ipv6Count) || ipv6Count < 1 || ipv6Count > 1000) {
document.getElementById('resultBox').textContent = "IPv6一次最多生成1000个";
return;
}
if (isNaN(ipv6Mask) || ipv6Mask < 1 || ipv6Mask > 128) {
document.getElementById('resultBox').textContent = "IPv6子网掩码长度必须在1-128之间";
return;
}
let prefix = ipv6Input;
let inputMask = null;
if (ipv6Input.includes('/')) {
const parts = ipv6Input.split('/');
prefix = parts[0];
inputMask = parseInt(parts[1]);
if (!isNaN(inputMask) && inputMask >= 1 && inputMask <= 128) {
ipv6Mask = inputMask;
document.getElementById('ipv6Mask').value = ipv6Mask;
}
}
const prefixSegments = Math.ceil(ipv6Mask / 16);
let networkPrefix = '';
if (prefix.includes('::')) {
const expandedAddress = expandIPv6Address(prefix);
const segments = expandedAddress.split(':');
networkPrefix = segments.slice(0, prefixSegments).join(':');
if (prefixSegments < 8) {
networkPrefix += ':';
}
} else {
const segments = prefix.split(':');
networkPrefix = segments.slice(0, prefixSegments).join(':');
if (prefixSegments < 8) {
networkPrefix += ':';
}
}
let commands = '';
for (let i = 0; i < ipv6Count; i++) {
const randomAddress = generateRandomIPv6InterfaceID(networkPrefix, ipv6Mask);
commands += `sudo ip addr add ${randomAddress}/${ipv6Mask} dev ${interfaceName}\n`;
}
document.getElementById('resultBox').textContent = commands;
}
function expandIPv6Address(address) {
if (address.includes('/')) {
address = address.split('/')[0];
}
if (!address.includes('::')) {
return address;
}
const parts = address.split('::');
const beforeDoubleColon = parts[0] ? parts[0].split(':') : [];
const afterDoubleColon = parts[1] ? parts[1].split(':') : [];
const missingGroups = 8 - (beforeDoubleColon.length + afterDoubleColon.length);
let expandedAddress = '';
if (beforeDoubleColon.length > 0) {
expandedAddress += beforeDoubleColon.join(':') + ':';
}
for (let i = 0; i < missingGroups; i++) {
expandedAddress += '0:';
}
if (afterDoubleColon.length > 0) {
expandedAddress += afterDoubleColon.join(':');
} else {
expandedAddress = expandedAddress.slice(0, -1);
}
return expandedAddress;
}
function generateRandomIPv6InterfaceID(networkPrefix, prefixLength) {
const segmentsToKeep = Math.ceil(prefixLength / 16);
const segmentsToGenerate = 8 - segmentsToKeep;
if (segmentsToGenerate <= 0) {
return networkPrefix;
}
const cleanPrefix = networkPrefix.endsWith(':') ?
networkPrefix.slice(0, -1) : networkPrefix;
const existingSegments = cleanPrefix.split(':');
let randomSegments = [];
for (let i = 0; i < segmentsToGenerate; i++) {
randomSegments.push(generateRandomHex(4));
}
return [...existingSegments, ...randomSegments].join(':');
}
function generateRandomHex(length) {
const hexChars = '0123456789abcdef';
let result = '';
for (let i = 0; i < length; i++) {
result += hexChars.charAt(Math.floor(Math.random() * hexChars.length));
}
return result;
}
function copyResult() {
const resultBox = document.getElementById('resultBox');
const textToCopy = resultBox.textContent;
navigator.clipboard.writeText(textToCopy).then(() => {
const copyBtn = document.querySelector('.btn-secondary');
const originalText = copyBtn.textContent;
copyBtn.textContent = '已复制!';
setTimeout(() => {
copyBtn.textContent = originalText;
}, 2000);
}).catch(err => {
console.error('复制失败: ', err);
alert('复制失败，请手动选择文本复制');
});
}
</script>
</body>
</html>

691
docs/md/index.html
View File

@@ -1,691 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown 实时编辑器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* 默认主题（白天模式） */
--bg-color: #f5f5f5;
--text-color: #333;
--header-bg: #fff;
--header-text: #333;
--button-bg: #c4c4c4;
--button-hover: #939393;
--editor-bg: #fff;
--border-color: #ddd;
--code-bg: #f6f8fa;
--blockquote-color: #6a737d;
--blockquote-border: #dfe2e5;
--dropdown-bg: #fff;
--dropdown-shadow: 0 8px 16px rgba(0,0,0,0.1);
--dropdown-hover-bg: #f1f1f1;
}
/* 黑夜模式 */
body.theme-dark {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
--header-bg: #121212;
--header-text: #f0f0f0;
--button-bg: #2c3e50;
--button-hover: #34495e;
--editor-bg: #2d2d2d;
--border-color: #444;
--code-bg: #383838;
--blockquote-color: #aaa;
--blockquote-border: #666;
--dropdown-bg: #3e3e3e;
--dropdown-shadow: 0 8px 16px rgba(0,0,0,0.3);
--dropdown-hover-bg: #555;
}
/* 蓝色模式 */
body.theme-blue {
--bg-color: #e8f4f8;
--text-color: #2c3e50;
--header-bg: #1e88e5;
--header-text: white;
--button-bg: #0d47a1;
--button-hover: #1565c0;
--editor-bg: #f1f8fe;
--border-color: #bbdefb;
--code-bg: #e3f2fd;
--blockquote-color: #546e7a;
--blockquote-border: #64b5f6;
--dropdown-bg: #ffffff;
--dropdown-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
--dropdown-hover-bg: #e3f2fd;
}
/* 赛博朋克模式 */
body.theme-cyberpunk {
--bg-color: #0a0a16;
--text-color: #f0f2f5;
--header-bg: #120458;
--header-text: #00ff9f;
--button-bg: #9900ff;
--button-hover: #b14aff;
--editor-bg: #1a1a2e;
--border-color: #ff00ff;
--code-bg: #2d1b54;
--blockquote-color: #00fff9;
--blockquote-border: #ff00ff;
--dropdown-bg: #1a1a2e;
--dropdown-shadow: 0 5px 15px rgba(255, 0, 255, 0.3);
--dropdown-hover-bg: #2d1b54;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
transition: background-color 0.3s, color 0.3s;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
max-width: 100%;
margin: 0 auto;
}
header {
background-color: var(--header-bg);
color: var(--header-text);
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
font-size: 1.1rem;
margin: 0;
}
.toolbar {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
button {
background-color: var(--button-bg);
color: var(--header-text);
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
button:hover {
background-color: var(--button-hover);
}
button:disabled {
background-color: #95a5a6;
cursor: not-allowed;
}
/* --- Dropdown Menu Styles --- */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: var(--dropdown-bg);
min-width: 160px;
box-shadow: var(--dropdown-shadow);
z-index: 1;
border-radius: 4px;
padding: 5px 0;
margin-top: 5px;
}
.dropdown-menu button {
color: var(--text-color);
background-color: transparent;
padding: 10px 15px;
text-decoration: none;
display: block;
width: 100%;
text-align: left;
border-radius: 0;
}
.dropdown-menu button:hover {
background-color: var(--dropdown-hover-bg);
}
.dropdown-menu.show {
display: block;
}
/* --- End Dropdown Styles --- */
.theme-selector {
margin-left: 10px;
}
#themeSelector {
padding: 6px 10px;
border-radius: 4px;
border: 1px solid var(--border-color);
background-color: var(--editor-bg);
color: var(--text-color);
cursor: pointer;
font-size: 14px;
outline: none;
}
main {
display: flex;
flex: 1;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.editor-container,
.preview-container {
flex: 1;
padding: 1rem;
overflow-y: auto;
height: 100%;
transition: flex 0.3s ease-in-out, opacity 0.3s ease-in-out;
min-width: 0;
}
.editor-container {
background-color: var(--editor-bg);
border-right: 1px solid var(--border-color);
/* 保持与.preview-container一致，无多余样式 */
border-radius: 0;
padding: 1rem;
}
.preview-container {
background-color: var(--editor-bg);
padding: 1rem;
}
#editor {
width: 100%;
height: 100%;
border: none;
resize: none;
font-family: 'Consolas', monospace;
font-size: 16px;
line-height: 1.6;
padding: 4px 10px;
outline: none;
background-color: transparent;
color: var(--text-color);
}
#editor::-webkit-scrollbar {
height: 6px;
width: 0 !important;
background: transparent;
}
#editor {
scrollbar-width: thin; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.markdown-body {
padding: 10px;
line-height: 1.6;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 1.5rem; margin-bottom: 1rem; font-weight: 600; line-height: 1.25; }
.markdown-body h1 { font-size: 2em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; }
.markdown-body p { margin-top: 0; margin-bottom: 1rem; }
.markdown-body blockquote { padding: 0 1em; color: var(--blockquote-color); border-left: 0.25em solid var(--blockquote-border); margin: 0 0 1rem 0; }
.markdown-body pre { background-color: var(--code-bg); border-radius: 3px; padding: 16px; overflow: auto; margin-bottom: 1rem; }
.markdown-body pre code { padding: 0; background-color: transparent; }
.markdown-body code { font-family: 'Consolas', monospace; background-color: var(--code-bg); padding: 0.2em 0.4em; border-radius: 3px; }
.markdown-body img { max-width: 100%; }
.markdown-body ul, .markdown-body ol { padding-left: 2em; margin-bottom: 1rem; }
.markdown-body table { border-collapse: collapse; margin-bottom: 1rem; display: block; overflow: auto; width: 100%; }
.markdown-body th, .markdown-body td { padding: 6px 13px; border: 1px solid var(--border-color); }
.editor-container::-webkit-scrollbar,
.preview-container::-webkit-scrollbar {
width: 0 !important;
background: transparent;
}
.editor-container,
.preview-container {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
@media (max-width: 768px) {
header { flex-direction: column; gap: 1rem; }
main { flex-direction: column; }
.editor-container, .preview-container { flex: none; height: 50%; width: 100%; }
.editor-container { border-right: none; border-bottom: 1px solid var(--border-color); }
main.preview-hidden .editor-container,
main.editor-hidden .preview-container { height: 100%; border-bottom: none; }
}
.sync-scroll-toggle {
display: flex;
align-items: center;
margin-left: 18px;
font-size: 13px;
color: var(--header-text);
user-select: none;
}
.sync-scroll-toggle input[type="checkbox"] {
accent-color: var(--button-bg);
margin-right: 4px;
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Markdown 实时编辑器</h1>
<div class="toolbar">
<!-- 文件操作 -->
<button id="saveBtn">保存</button>
<button id="importBtn">导入 MD</button>
<div class="dropdown">
<button class="dropdown-toggle">导出</button>
<div id="export-menu" class="dropdown-menu">
<button id="exportBtn">导出 MD</button>
<button id="exportHtmlBtn">导出 HTML</button>
<button id="exportPdfBtn">导出 PDF</button>
</div>
</div>
<!-- 视图选项 -->
<div class="dropdown">
<button class="dropdown-toggle">视图</button>
<div id="view-menu" class="dropdown-menu">
<button id="toggleEditorBtn">切换编辑区</button>
<button id="togglePreviewBtn">切换预览区</button>
<button id="mdGuideBtn">Markdown 指南</button>
</div>
</div>
<!-- 主题选择 -->
<div class="theme-selector">
<select id="themeSelector">
<option value="default">白天模式</option>
<option value="dark">黑夜模式</option>
<option value="blue">蓝色模式</option>
<option value="cyberpunk">赛博朋克</option>
</select>
</div>
<!-- 同步滚动开关 -->
<label class="sync-scroll-toggle" title="编辑区滚动时预览区也跟随滚动">
<input type="checkbox" id="syncScrollToggle" checked>
同步滚动
</label>
</div>
</header>
<main>
<div class="editor-container">
<textarea id="editor" placeholder="在此输入 Markdown 内容..."></textarea>
</div>
<div class="preview-container">
<div id="preview" class="markdown-body"></div>
</div>
</main>
</div>
<!-- 依赖库 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<!-- 主逻辑 -->
<script>
window.addEventListener('load', function () {
// --- DOM 元素获取 ---
const editor = document.getElementById('editor');
const preview = document.getElementById('preview');
const mainContainer = document.querySelector('main');
const syncScrollToggle = document.getElementById('syncScrollToggle');
// 工具栏按钮
const saveBtn = document.getElementById('saveBtn');
const importBtn = document.getElementById('importBtn');
const exportBtn = document.getElementById('exportBtn');
const exportHtmlBtn = document.getElementById('exportHtmlBtn');
const exportPdfBtn = document.getElementById('exportPdfBtn');
const toggleEditorBtn = document.getElementById('toggleEditorBtn');
const togglePreviewBtn = document.getElementById('togglePreviewBtn');
const mdGuideBtn = document.getElementById('mdGuideBtn');
const themeSelector = document.getElementById('themeSelector');
const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
// --- 状态变量 ---
let isShowingGuide = false;
let userContentBeforeGuide = '';
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.md,.markdown,text/markdown';
fileInput.style.display = 'none';
document.body.appendChild(fileInput);
marked.setOptions({ breaks: true, gfm: true, headerIds: true, sanitize: false });
// --- 核心功能 ---
function renderMarkdown(shouldSave = true) {
const markdownText = editor.value;
const htmlContent = marked.parse(markdownText);
preview.innerHTML = htmlContent;
if (shouldSave && !isShowingGuide) {
localStorage.setItem('markdown-content', markdownText);
}
}
function getFilename() {
const firstLine = editor.value.trim().split('\n')[0];
const sanitized = firstLine.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s]/g, '').trim();
return sanitized && sanitized.length > 0 ? sanitized : 'markdown-export';
}
// --- 初始化 ---
const savedContent = localStorage.getItem('markdown-content');
if (savedContent) editor.value = savedContent;
renderMarkdown(false);
const initialTheme = localStorage.getItem('markdown-theme') || 'default';
applyTheme(initialTheme);
themeSelector.value = initialTheme;
updateViewButtonsText();
// --- 事件监听器 ---
editor.addEventListener('input', () => {
if (isShowingGuide) {
isShowingGuide = false;
mdGuideBtn.textContent = 'Markdown 指南';
}
renderMarkdown(true);
});
saveBtn.addEventListener('click', () => {
localStorage.setItem('markdown-content', editor.value);
alert('内容已手动保存到本地存储！');
});
importBtn.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
editor.value = e.target.result;
if (isShowingGuide) {
isShowingGuide = false;
mdGuideBtn.textContent = '返回编辑';
}
renderMarkdown(true);
};
reader.readAsText(file);
fileInput.value = '';
});
exportBtn.addEventListener('click', () => {
const blob = new Blob([editor.value], { type: 'text/markdown' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${getFilename()}.md`;
a.click();
URL.revokeObjectURL(url);
});
exportHtmlBtn.addEventListener('click', () => {
const filename = getFilename() + '.html';
// 构造完整HTML文档
const htmlContent = `<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<title>${filename}</title>\n<style>${document.querySelector('style').innerHTML}</style>\n</head>\n<body>\n<div class=\"markdown-body\">${preview.innerHTML}</div>\n</body>\n</html>`;
const blob = new Blob([htmlContent], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
});
exportPdfBtn.addEventListener('click', async () => {
const btn = exportPdfBtn;
btn.disabled = true;
btn.textContent = '正在生成...';
try {
const element = document.getElementById('preview');
const opt = {
margin: 15,
filename: `${getFilename()}.pdf`,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
await html2pdf().from(element).set(opt).save();
} catch (error) {
console.error("PDF导出失败:", error);
alert("导出 PDF 时出错，请查看控制台获取更多信息。");
} finally {
btn.disabled = false;
btn.textContent = '导出 PDF';
}
});
// --- 视图切换功能 ---
function updateViewButtonsText() {
toggleEditorBtn.textContent = mainContainer.classList.contains('editor-hidden') ? '显示编辑区' : '隐藏编辑区';
togglePreviewBtn.textContent = mainContainer.classList.contains('preview-hidden') ? '显示预览区' : '隐藏预览区';
mdGuideBtn.textContent = isShowingGuide ? '返回编辑' : 'Markdown 指南';
}
toggleEditorBtn.addEventListener('click', function () {
mainContainer.classList.remove('preview-hidden');
mainContainer.classList.toggle('editor-hidden');
updateViewButtonsText();
});
togglePreviewBtn.addEventListener('click', function () {
mainContainer.classList.remove('editor-hidden');
mainContainer.classList.toggle('preview-hidden');
updateViewButtonsText();
});
const markdownGuideContent = `...`; // 指南内容太长，为保持代码清爽此处省略，实际代码会包含完整内容。
mdGuideBtn.addEventListener('click', () => {
isShowingGuide = !isShowingGuide;
if (isShowingGuide) {
userContentBeforeGuide = editor.value;
editor.value = markdownGuideContent.replace('...', `
# Markdown 语法指南
这是一个 Markdown 格式的快速参考指南，您可以随时查看这个页面来学习 Markdown 的使用方法。
## 基本语法
### 标题
\`\`\`
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
\`\`\`
### 强调
\`\`\`
*斜体文本* 或 _斜体文本_
**粗体文本** 或 __粗体文本__
***粗斜体文本*** 或 ___粗斜体文本___
\`\`\`
### 列表
无序列表：
\`\`\`
- 项目1
- 项目2
- 子项目A
- 子项目B
\`\`\`
有序列表：
\`\`\`
1. 第一项
2. 第二项
3. 第三项
\`\`\`
### 链接
\`\`\`
[链接文本](https://www.example.com)
\`\`\`
### 图片
\`\`\`
![替代文本](图片URL)
\`\`\`
## 高级语法
### 表格
\`\`\`
| 表头1 | 表头2 | 表头3 |
| :--- | :---: | ---: |
| 左对齐 | 居中对齐 | 右对齐 |
| 单元格4 | 单元格5 | 单元格6 |
\`\`\`
### 代码块
行内代码使用反引号 \`code\` 包裹。
代码块使用三个反引号包裹：
\`\`\`javascript
function greet(name) {
console.log("Hello, " + name + "!");
}
greet('World');
\`\`\`
### 引用
\`\`\`
> 这是一段引用的文字。
>
> > 引用可以嵌套。
\`\`\`
### 分隔线
使用三个或更多的星号、破折号或下划线来创建分隔线。
\`\`\`
***
---
___
\`\`\`
### 删除线
\`\`\`
~~这段文字将被划掉。~~
\`\`\`
`);
renderMarkdown(false);
} else {
editor.value = userContentBeforeGuide;
renderMarkdown(true);
}
updateViewButtonsText();
});
// --- 主题切换 ---
themeSelector.addEventListener('change', (e) => {
applyTheme(e.target.value);
localStorage.setItem('markdown-theme', e.target.value);
});
function applyTheme(theme) {
document.body.className = '';
document.body.classList.add(`theme-${theme}`);
}
// --- 下拉菜单交互逻辑 ---
function closeAllDropdowns() {
document.querySelectorAll('.dropdown-menu').forEach(menu => {
menu.classList.remove('show');
});
}
dropdownToggles.forEach(toggle => {
toggle.addEventListener('click', function(event) {
event.stopPropagation();
const currentMenu = this.nextElementSibling;
const isShown = currentMenu.classList.contains('show');
closeAllDropdowns(); // Close others first
if (!isShown) {
currentMenu.classList.add('show');
}
});
});
// Click outside to close dropdowns
window.addEventListener('click', function(event) {
if (!event.target.matches('.dropdown-toggle')) {
closeAllDropdowns();
}
});
// --- 同步滚动功能 ---
let isSyncScroll = true;
let isPreviewScrolling = false;
syncScrollToggle.addEventListener('change', function() {
isSyncScroll = this.checked;
});
editor.addEventListener('scroll', function() {
if (!isSyncScroll) return;
if (isPreviewScrolling) return;
const editorScroll = editor.scrollTop;
const editorHeight = editor.scrollHeight - editor.clientHeight;
const percent = editorHeight > 0 ? editorScroll / editorHeight : 0;
const previewContainer = preview.parentElement;
const previewHeight = previewContainer.scrollHeight - previewContainer.clientHeight;
isPreviewScrolling = true;
previewContainer.scrollTop = percent * previewHeight;
setTimeout(() => { isPreviewScrolling = false; }, 10);
});
});
</script>
</body>
</html>

1090
docs/nezha/index.html
View File

File diff suppressed because it is too large Load Diff