293 lines
12 KiB
HTML
293 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Registry - 微服务配置管理中心</title>
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
</head>
|
||
<body>
|
||
<!-- 标题栏：仅展示应用名与当前项目 -->
|
||
<header class="titlebar">
|
||
<span class="app-title">📋 Registry 配置管理中心</span>
|
||
<span class="current-project" id="current-project-name">未选择项目</span>
|
||
</header>
|
||
|
||
<!-- 工具栏：分组处理（项目 / 模式 / 配置 / 数据） -->
|
||
<div class="toolbar">
|
||
<div class="tool-group" title="项目操作">
|
||
<span class="group-label">项目</span>
|
||
<select id="project-selector" class="toolbar-select">
|
||
<option value="">-- 选择项目 --</option>
|
||
</select>
|
||
<button id="btn-new-project" class="toolbar-btn" title="新建项目">📁 新建</button>
|
||
<button id="btn-delete-project" class="toolbar-btn" title="删除项目">🗑 删除</button>
|
||
</div>
|
||
|
||
<div class="tool-group" title="工作模式">
|
||
<span class="group-label">模式</span>
|
||
<div class="mode-switcher">
|
||
<button class="mode-btn" data-mode="plan" title="规划模式：定义配置结构">📐 规划</button>
|
||
<button class="mode-btn active" data-mode="edit" title="编辑模式：修改配置值">✏️ 编辑</button>
|
||
<button class="mode-btn" data-mode="readonly" title="只读模式：仅查看">👁️ 只读</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tool-group" title="配置操作">
|
||
<span class="group-label">配置</span>
|
||
<button id="btn-add-config" class="toolbar-btn" title="新增配置项">➕ 新增</button>
|
||
<button id="btn-collapse-all" class="toolbar-btn" title="全部折叠">⊟ 折叠</button>
|
||
</div>
|
||
|
||
<div class="tool-group" title="数据操作">
|
||
<span class="group-label">数据</span>
|
||
<button id="btn-export-config" class="toolbar-btn" title="导出配置">📥 导出</button>
|
||
<button id="btn-import-config" class="toolbar-btn" title="导入配置">📤 导入</button>
|
||
<input type="file" id="import-file-input" accept=".json" style="display:none">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 维度栏：展示已启用维度的筛选器与映射配置入口 -->
|
||
<div class="dimension-bar" id="dimension-bar">
|
||
<span class="dim-empty" id="dim-empty">选择项目后展示维度筛选</span>
|
||
<div class="dim-item" id="dim-idc" style="display:none">
|
||
<span class="dim-name">机房</span>
|
||
<select class="dim-select" id="dim-idc-select"></select>
|
||
<span class="dim-mapping" id="dim-idc-mapping"></span>
|
||
</div>
|
||
<div class="dim-item" id="dim-env" style="display:none">
|
||
<span class="dim-name">环境</span>
|
||
<select class="dim-select" id="dim-env-select"></select>
|
||
<span class="dim-mapping" id="dim-env-mapping"></span>
|
||
</div>
|
||
<div class="dim-item" id="dim-group" style="display:none">
|
||
<span class="dim-name">分组</span>
|
||
<select class="dim-select" id="dim-group-select"></select>
|
||
<span class="dim-mapping" id="dim-group-mapping"></span>
|
||
</div>
|
||
<button id="btn-dim-mapping" class="toolbar-btn" style="display:none" title="配置维度映射方式">⚙ 映射配置</button>
|
||
</div>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="main-container">
|
||
<!-- 左侧树形导航 -->
|
||
<aside class="tree-panel" id="tree-panel">
|
||
<div class="tree-header">
|
||
<span>配置树</span>
|
||
</div>
|
||
<div class="tree-content" id="tree-content">
|
||
<div class="tree-empty">请先选择一个项目</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 分隔条 -->
|
||
<div class="resizer" id="resizer"></div>
|
||
|
||
<!-- 右侧详情面板 -->
|
||
<main class="detail-panel" id="detail-panel">
|
||
<!-- 配置导航地址栏：显示当前路径，可拷贝、可粘贴回车跳转 -->
|
||
<div class="address-bar">
|
||
<span class="address-icon">📍</span>
|
||
<input type="text" id="address-input" class="address-input" placeholder="配置路径，回车跳转（类似注册表地址栏）">
|
||
<button id="btn-address-go" class="addr-btn" title="跳转到路径">转到</button>
|
||
<button id="btn-address-copy" class="addr-btn" title="拷贝路径">拷贝</button>
|
||
</div>
|
||
<div class="detail-table-wrapper">
|
||
<table class="config-table" id="config-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="col-key">键名</th>
|
||
<th class="col-value">值</th>
|
||
<th class="col-type">类型</th>
|
||
<th class="col-desc">说明</th>
|
||
<th class="col-actions">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="config-tbody">
|
||
<tr class="empty-row">
|
||
<td colspan="5">请在左侧选择节点查看配置</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- 状态栏 -->
|
||
<footer class="statusbar">
|
||
<span id="status-text">就绪</span>
|
||
<span id="status-mode">当前模式：编辑</span>
|
||
</footer>
|
||
|
||
<!-- 模态框：新建项目 -->
|
||
<div class="modal-overlay" id="modal-project" style="display:none">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3 id="modal-project-title">新建项目</h3>
|
||
<button class="modal-close" onclick="closeModal('modal-project')">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label>项目名称 <span class="required">*</span></label>
|
||
<input type="text" id="project-name" placeholder="例如：用户服务">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>项目描述</label>
|
||
<textarea id="project-description" rows="2" placeholder="项目配置说明"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>维度配置 <span class="hint">（是否启用创建后不可修改；映射方式后续可调整）</span></label>
|
||
<div class="dim-config-row">
|
||
<label class="checkbox-label"><input type="checkbox" id="project-enable-idc" checked> 机房</label>
|
||
<select id="project-idc-mapping" class="mapping-select">
|
||
<option value="path">映射为路径</option>
|
||
<option value="label">仅作标签</option>
|
||
</select>
|
||
</div>
|
||
<div class="dim-config-row">
|
||
<label class="checkbox-label"><input type="checkbox" id="project-enable-env" checked> 环境</label>
|
||
<select id="project-env-mapping" class="mapping-select">
|
||
<option value="path">映射为路径</option>
|
||
<option value="label">仅作标签</option>
|
||
</select>
|
||
</div>
|
||
<div class="dim-config-row">
|
||
<label class="checkbox-label"><input type="checkbox" id="project-enable-group" checked> 分组</label>
|
||
<select id="project-group-mapping" class="mapping-select">
|
||
<option value="path">映射为路径</option>
|
||
<option value="label">仅作标签</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeModal('modal-project')">取消</button>
|
||
<button class="btn btn-primary" id="btn-save-project">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模态框：维度映射配置 -->
|
||
<div class="modal-overlay" id="modal-mapping" style="display:none">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3>维度映射配置</h3>
|
||
<button class="modal-close" onclick="closeModal('modal-mapping')">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p class="hint" style="margin-bottom:12px">映射为路径：该维度作为配置存储路径前缀；仅作标签：该维度仅用于筛选，不进入路径。</p>
|
||
<div class="dim-config-row" id="map-idc-row">
|
||
<span class="map-name">机房</span>
|
||
<select id="map-idc-mapping" class="mapping-select">
|
||
<option value="path">映射为路径</option>
|
||
<option value="label">仅作标签</option>
|
||
</select>
|
||
</div>
|
||
<div class="dim-config-row" id="map-env-row">
|
||
<span class="map-name">环境</span>
|
||
<select id="map-env-mapping" class="mapping-select">
|
||
<option value="path">映射为路径</option>
|
||
<option value="label">仅作标签</option>
|
||
</select>
|
||
</div>
|
||
<div class="dim-config-row" id="map-group-row">
|
||
<span class="map-name">分组</span>
|
||
<select id="map-group-mapping" class="mapping-select">
|
||
<option value="path">映射为路径</option>
|
||
<option value="label">仅作标签</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeModal('modal-mapping')">取消</button>
|
||
<button class="btn btn-primary" id="btn-save-mapping">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模态框：新增/编辑配置项 -->
|
||
<div class="modal-overlay" id="modal-config" style="display:none">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3 id="modal-config-title">新增配置项</h3>
|
||
<button class="modal-close" onclick="closeModal('modal-config')">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label>键名 <span class="required">*</span> <span class="hint">（可用 / 嵌套，如 db/pool/max）</span></label>
|
||
<input type="text" id="config-key" placeholder="例如：db/host 或 db.host">
|
||
</div>
|
||
<div id="config-dimension-fields">
|
||
<div class="form-row">
|
||
<div class="form-group form-half" id="dim-idc-group">
|
||
<label>机房</label>
|
||
<input type="text" id="config-idc" placeholder="例如：华北">
|
||
</div>
|
||
<div class="form-group form-half" id="dim-env-group">
|
||
<label>环境</label>
|
||
<input type="text" id="config-environment" placeholder="例如：dev">
|
||
</div>
|
||
</div>
|
||
<div class="form-group" id="dim-group-group">
|
||
<label>分组</label>
|
||
<input type="text" id="config-group" placeholder="例如：用户模块">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>值</label>
|
||
<input type="text" id="config-value" placeholder="配置值">
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group form-half">
|
||
<label>类型</label>
|
||
<select id="config-type">
|
||
<option value="string">string</option>
|
||
<option value="number">number</option>
|
||
<option value="boolean">boolean</option>
|
||
<option value="json">json</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group form-half">
|
||
<label>值范围 <span class="hint">（规划模式）</span></label>
|
||
<input type="text" id="config-value-range" placeholder="例如：1-100 或 枚举: A,B">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>说明 <span class="required">*</span></label>
|
||
<textarea id="config-description" rows="2" placeholder="配置项用途说明"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>用途 <span class="hint">（规划模式）</span></label>
|
||
<textarea id="config-purpose" rows="2" placeholder="详细用途描述"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeModal('modal-config')">取消</button>
|
||
<button class="btn btn-primary" id="btn-save-config">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模态框：确认删除 -->
|
||
<div class="modal-overlay" id="modal-confirm" style="display:none">
|
||
<div class="modal modal-sm">
|
||
<div class="modal-header">
|
||
<h3>确认操作</h3>
|
||
<button class="modal-close" onclick="closeModal('modal-confirm')">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="confirm-message"></p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeModal('modal-confirm')">取消</button>
|
||
<button class="btn btn-danger" id="btn-confirm-ok">确认</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/api.js"></script>
|
||
<script src="/js/tree.js"></script>
|
||
<script src="/js/app.js"></script>
|
||
</body>
|
||
</html>
|