253 lines
8.2 KiB
PHP
253 lines
8.2 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bird 工业级数据采集终端</title>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
|
|
@vite(['resources/js/app.js'])
|
|
|
|
<style>
|
|
/* 工业级 Premium 专属配色与基础重置 */
|
|
:root {
|
|
--primary-color: #0052cc;
|
|
--primary-hover: #0040a3;
|
|
--bg-main: #f4f5f7;
|
|
--bg-card: #ffffff;
|
|
--text-title: #172b4d;
|
|
--text-body: #42526e;
|
|
--border-color: #dfe1e6;
|
|
--focus-ring: rgba(0, 82, 204, 0.2);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-main);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
color: var(--text-body);
|
|
margin: 0;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
/* 集中式卡片容器 */
|
|
.app-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
background: var(--bg-card);
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 24px rgba(23, 43, 77, 0.08);
|
|
border: 1px solid var(--border-color);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 顶部高端系统状态栏 */
|
|
.app-header {
|
|
background: #172b4d;
|
|
color: #ffffff;
|
|
padding: 24px 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.app-header h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: 0.5px; }
|
|
.system-badge {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-family: monospace;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* 表单主体区域 */
|
|
.app-body { padding: 32px; }
|
|
.form-group { margin-bottom: 24px; }
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
color: var(--text-title);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 高级输入框 */
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
box-sizing: border-box;
|
|
font-size: 15px;
|
|
color: var(--text-title);
|
|
transition: all 0.2s ease;
|
|
background: #fafbfc;
|
|
}
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
background: #ffffff;
|
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
}
|
|
|
|
/* TipTap 编辑器无缝工业外壳 */
|
|
.editor-container {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.editor-container:focus-within {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
}
|
|
|
|
/* 专业紧凑工具栏 */
|
|
.editor-toolbar {
|
|
background: #f4f5f7;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
.editor-toolbar button {
|
|
background: #ffffff;
|
|
border: 1px solid var(--border-color);
|
|
padding: 6px 14px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-title);
|
|
transition: all 0.15s;
|
|
}
|
|
.editor-toolbar button:hover {
|
|
background: #ebecf0;
|
|
border-color: #c1c7d0;
|
|
}
|
|
|
|
/* TipTap 核心内容交互区 */
|
|
.tiptap-content {
|
|
padding: 20px;
|
|
min-height: 280px;
|
|
outline: none;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: #253858;
|
|
}
|
|
/* 丰富编辑器内默认 Markdown 样式的预览感 */
|
|
.tiptap-content h1 { font-size: 22px; margin-top: 0; color: var(--text-title); border-bottom: 1px solid #ebecf0; padding-bottom: 8px;}
|
|
.tiptap-content p { margin: 0 0 12px 0; }
|
|
.tiptap-content strong { color: #000; font-weight: 600; }
|
|
|
|
/* 底部操作与监控区 */
|
|
.app-footer {
|
|
padding: 0 32px 32px 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn-submit {
|
|
background-color: var(--primary-color);
|
|
color: #ffffff;
|
|
border: none;
|
|
padding: 14px 28px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
transition: background-color 0.15s;
|
|
box-shadow: 0 2px 4px rgba(9, 30, 66, 0.08);
|
|
}
|
|
.btn-submit:hover { background-color: var(--primary-hover); }
|
|
|
|
/* 工业数据看板小标签 */
|
|
.data-meta { font-size: 12px; color: #7a869a; }
|
|
.data-meta span { margin-right: 15px; }
|
|
.status-dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #36b37e;
|
|
border-radius: 50%;
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="app-container">
|
|
<div class="app-header">
|
|
<h2>🦅 Bird 档案核心采集终端</h2>
|
|
<div class="system-badge">NODE: LOCAL_VITE_v11 // STATUS: ONLINE</div>
|
|
</div>
|
|
|
|
<div class="app-body">
|
|
<div class="form-group">
|
|
<label class="form-label">鸟类物种标准名称 (Title)</label>
|
|
<input type="text" id="s-bird-title" class="form-control" placeholder="例如：秘鲁红鹳 (Phoenicopterus chilensis)...">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">物种生境与特征描述 (Markdown Engine)</label>
|
|
<div class="editor-container">
|
|
<div class="editor-toolbar">
|
|
<button type="button" id="btn-bold">B</button>
|
|
<button type="button" id="btn-italic">I</button>
|
|
<button type="button" id="btn-heading">H1</button>
|
|
</div>
|
|
<div id="div-editor" class="tiptap-content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="app-footer">
|
|
<div class="data-meta">
|
|
<span><i class="status-dot"></i>DB-Engine: MySQL 8.0</span>
|
|
<span>Format: Pure Markdown Source</span>
|
|
</div>
|
|
<button type="button" id="btn-save-bird" class="btn-submit">将数据安全持久化到数据库</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#btn-save-bird').on('click', function() {
|
|
const sTitle = $('#s-bird-title').val();
|
|
|
|
// 安全调用本地编译的 TipTap 数据通道
|
|
if (typeof window.getBirdMarkdownText !== 'function') {
|
|
alert('前端核心资产编译中，请稍候');
|
|
return;
|
|
}
|
|
|
|
const sMarkdownContent = window.getBirdMarkdownText();
|
|
|
|
if (!sTitle || !sMarkdownContent) {
|
|
alert('【工业规范提示】核心指标不能为空，请检查输入。');
|
|
return;
|
|
}
|
|
|
|
// 异步安全投递
|
|
window.axios.post('/birds', {
|
|
title: sTitle,
|
|
markdown_content: sMarkdownContent
|
|
})
|
|
.then(function (oResponse) {
|
|
if (oResponse.status === 201) {
|
|
const iNewBirdId = oResponse.data.data.id;
|
|
alert('🎉 投递成功！数据已通过安全网关清洗并安全写入表 birds。');
|
|
window.location.href = '/birds/' + iNewBirdId;
|
|
}
|
|
})
|
|
.catch(function (oError) {
|
|
console.error(oError);
|
|
alert('投递失败，安全网关拒绝了请求。');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|