guyue55/config_center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

优化配置类型和配置项页面

Browse Source
This commit is contained in:
古月 2025-03-04 12:23:00 +08:00
parent 7c6e0b8acf
commit 824ac04099
4 changed files with 626 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
app/static/css/style.css
View File

@ -158,19 +158,65 @@ main {
/* 卡片样式 */
.card {
background-color: white;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 2rem;
margin-bottom: 2rem;
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--border-color);
}
.card-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-color);
margin: 0;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
animation: fadeIn 0.3s ease;
}
.modal-content {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
max-width: 500px;
margin: 2rem auto;
padding: 2rem;
position: relative;
animation: slideIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateY(-20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.card-title {
@ -183,21 +229,93 @@ main {
overflow-x: auto;
}
.table-container {
overflow-x: auto;
margin: 1.5rem 0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
border-collapse: separate;
border-spacing: 0;
background: white;
}
th, td {
padding: 0.75rem;
padding: 1rem;
text-align: left;
border: none;
border-bottom: 1px solid var(--border-color);
}
th {
font-weight: 600;
background-color: var(--secondary-color);
color: var(--text-color);
}
tbody tr:hover {
background-color: rgba(99, 164, 255, 0.1);
transition: background-color 0.2s;
}
.config-value {
display: inline-block;
padding: 0.25rem 0.5rem;
background: var(--secondary-color);
border-radius: 4px;
font-family: monospace;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value-container {
position: relative;
max-width: 300px;
}
.btn-group {
display: inline-flex;
gap: 0.5rem;
}
.btn-group .btn {
border-radius: 4px;
}
.type-link {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
font-size: 1rem;
position: relative;
transition: color 0.3s ease;
}
.type-link::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: -2px;
left: 0;
background-color: var(--primary-color);
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease;
}
.type-link:hover {
color: var(--primary-dark);
}
.type-link:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
tr:hover {
@ -285,7 +403,7 @@ tr:hover {
/* 搜索框 */
.search-container {
margin-bottom: 1.5rem;
margin: 1.5rem 0;
}
.search-box {
@ -293,16 +411,49 @@ tr:hover {
gap: 1rem;
flex-wrap: wrap;
align-items: center;
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.input-group {
display: flex;
gap: 0.5rem;
align-items: center;
width: 100%;
}
.input-group-text {
display: flex;
align-items: center;
padding: 0.5rem;
background: var(--background-light);
border-radius: 4px;
color: var(--text-light);
}
.search-box select {
min-width: 150px;
max-width: 200px;
border-radius: 4px;
border: 1px solid var(--border-color);
padding: 0.5rem;
background: white;
}
.search-input {
flex: 1;
min-width: 200px;
border-radius: 4px;
border: 1px solid var(--border-color);
padding: 0.5rem;
transition: border-color 0.3s;
}
.search-input:focus {
border-color: var(--primary-color);
outline: none;
}
/* 标签样式 */

394
app/static/css/styles.css Normal file
View File

@ -0,0 +1,394 @@
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.card-header {
padding: 20px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-title {
margin: 0;
font-size: 1.5rem;
color: #333;
}
.card-body {
padding: 20px;
}
/* 搜索框样式 */
.search-container {
margin-bottom: 20px;
}
.search-box {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.search-input {
flex: 1;
min-width: 200px;
}
/* 表格样式 */
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
background-color: transparent;
border-radius: 4px;
overflow: hidden;
}
th {
background-color: #f8f9fa;
color: #495057;
font-weight: 600;
text-align: left;
padding: 12px;
border-bottom: 2px solid #dee2e6;
}
td {
padding: 12px;
border-bottom: 1px solid #dee2e6;
color: #212529;
}
tr:hover {
background-color: #f8f9fa;
}
/* 按钮样式 */
.btn {
padding: 8px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary {
background-color: #007bff;
color: white;
}
.btn-primary:hover {
background-color: #0056b3;
}
.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-secondary:hover {
background-color: #545b62;
}
.btn-danger {
background-color: #dc3545;
color: white;
}
.btn-danger:hover {
background-color: #c82333;
}
.btn-sm {
padding: 4px 8px;
font-size: 0.875rem;
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal-content {
position: relative;
background-color: #fff;
margin: 10% auto;
padding: 20px;
border-radius: 8px;
max-width: 500px;
width: 90%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.modal-header h2 {
margin: 0;
font-size: 1.5rem;
color: #333;
}
.close {
font-size: 1.5rem;
color: #666;
cursor: pointer;
padding: 5px;
}
.close:hover {
color: #333;
}
.form-group {
margin-bottom: 1rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
color: #495057;
}
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out;
}
.form-control:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* 响应式布局 */
@media (max-width: 768px) {
.search-box {
flex-direction: column;
}
.search-input {
width: 100%;
}
.btn {
width: 100%;
margin-bottom: 0.5rem;
}
.table-container {
margin: 0 -20px;
}
td, th {
padding: 8px;
}
}
/* 配置页面样式优化 */
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.stats-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
display: flex;
align-items: flex-start;
transition: transform 0.2s;
}
.stats-card:hover {
transform: translateY(-5px);
}
.stats-icon {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
color: white;
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
transition: all 0.3s ease;
}
.stats-icon i {
font-size: 1.5rem;
}
.stats-content {
flex: 1;
}
.stats-content h3 {
margin: 0;
font-size: 1rem;
color: var(--text-light);
}
.stats-number {
font-size: 2rem;
font-weight: bold;
color: var(--primary-color);
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
/* 搜索框样式优化 */
.search-container {
margin: 2rem 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.search-box {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.search-input {
flex: 1;
min-width: 200px;
padding: 0.75rem 1rem;
border: 1px solid #e9ecef;
border-radius: 6px;
transition: all 0.3s ease;
}
.search-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}
/* 按钮样式优化 */
.btn {
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 500;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
color: white;
box-shadow: 0 2px 4px rgba(0,123,255,0.2);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0,123,255,0.3);
}
.btn-secondary {
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
color: white;
box-shadow: 0 2px 4px rgba(108,117,125,0.2);
}
.btn-secondary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(108,117,125,0.3);
}
/* 表格样式优化 */
.table-container {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
overflow: hidden;
margin-top: 2rem;
}
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
th {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
color: var(--text-dark);
font-weight: 600;
text-align: left;
padding: 1rem;
border-bottom: 2px solid #dee2e6;
}
td {
padding: 1rem;
border-bottom: 1px solid #e9ecef;
color: var(--text-dark);
transition: all 0.2s ease;
}
tr:hover td {
background-color: #f8f9fa;
}
/* 响应式优化 */
@media (max-width: 768px) {
.search-box {
flex-direction: column;
}
.search-input,
.btn {
width: 100%;
}
.table-container {
margin: 1rem -1rem;
border-radius: 0;
}
td, th {
padding: 0.75rem;
}
}

70
app/templates/configs.html
View File

@ -7,48 +7,66 @@
<div class="card">
<div class="card-header">
<h1 class="card-title">配置项</h1>
<!-- 添加新增按钮 -->
<button class="btn btn-primary" onclick="showAddConfigModal()">添加配置</button>
<button class="btn btn-primary" onclick="showAddConfigModal()">
<i class="fas fa-plus"></i> 添加配置
</button>
</div>
<div class="card-body">
<div class="search-container">
<div class="search-container mb-4">
<form class="search-box" action="/page/configs" method="get">
<select name="type_name" class="form-control" onchange="this.form.submit()">
<option value="">所有类型</option>
{% for type in types %}
<option value="{{ type.type_name }}" {% if current_type == type.type_name %}selected{% endif %}>{{ type.type_name }}</option>
{% endfor %}
</select>
<input type="text" name="search" class="form-control search-input" placeholder="搜索键名或值..." value="{{ request.query_params.get('search', '') }}">
<button type="submit" class="btn btn-primary">搜索</button>
{% if request.query_params.get('search') or request.query_params.get('type_name') %}
<a href="/page/configs" class="btn btn-secondary">清除</a>
{% endif %}
<div class="input-group">
<span class="input-group-text"><i class="fas fa-filter"></i></span>
<select name="type_name" class="form-control" onchange="this.form.submit()">
<option value="">所有类型</option>
{% for type in types %}
<option value="{{ type.type_name }}" {% if current_type == type.type_name %}selected{% endif %}>{{ type.type_name }}</option>
{% endfor %}
</select>
<span class="input-group-text"><i class="fas fa-search"></i></span>
<input type="text" name="search" class="form-control" placeholder="搜索键名或值..." value="{{ request.query_params.get('search', '') }}">
<button type="submit" class="btn btn-primary">搜索</button>
{% if request.query_params.get('search') or request.query_params.get('type_name') %}
<a href="/page/configs" class="btn btn-secondary">清除</a>
{% endif %}
</div>
</form>
</div>
<div class="table-container">
<table>
<table class="table table-hover">
<thead>
<tr>
<th>类型</th>
<th>键名</th>
<th>值</th>
<th>描述</th>
<th>操作</th>
<th><i class="fas fa-layer-group"></i> 类型</th>
<th><i class="fas fa-key"></i> 键名</th>
<th><i class="fas fa-code"></i> 值</th>
<th><i class="fas fa-info-circle"></i> 描述</th>
<th><i class="fas fa-clock"></i> 创建时间</th>
<th><i class="fas fa-history"></i> 更新时间</th>
<th class="text-end">操作</th>
</tr>
</thead>
<tbody>
{% for config in configs %}
<tr>
<td>{{ config.type.type_name }}</td>
<td><span class="badge bg-primary">{{ config.type.type_name }}</span></td>
<td>{{ config.key }}</td>
<td>{{ config.value }}</td>
<td>{{ config.key_description }}</td>
<td>
<!-- 添加编辑和删除按钮 -->
<button class="btn btn-sm btn-secondary" onclick="showEditConfigModal('{{ config.type.type_name }}', '{{ config.key }}', '{{ config.value }}', '{{ config.key_description }}')">编辑</button>
<button class="btn btn-sm btn-danger" onclick="confirmDeleteConfig('{{ config.type.type_name }}', '{{ config.key }}')">删除</button>
<div class="value-container">
<code class="config-value">{{ config.value }}</code>
</div>
</td>
<td>{{ config.key_description }}</td>
<td>{{ config.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
<td>{{ config.updated_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
<td class="text-end">
<div class="btn-group">
<button class="btn btn-sm btn-secondary" onclick="showEditConfigModal('{{ config.type.type_name }}', '{{ config.key }}', '{{ config.value }}', '{{ config.key_description }}')">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-danger" onclick="confirmDeleteConfig('{{ config.type.type_name }}', '{{ config.key }}')">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
{% endfor %}

41
app/templates/types.html
View File

@ -7,27 +7,32 @@
<div class="card">
<div class="card-header">
<h1 class="card-title">配置类型</h1>
<!-- 添加新增按钮 -->
<button class="btn btn-primary" onclick="showAddTypeModal()">添加类型</button>
<button class="btn btn-primary" onclick="showAddTypeModal()">
<i class="fas fa-plus"></i> 添加类型
</button>
</div>
<div class="card-body">
<div class="search-container">
<div class="search-container mb-4">
<form class="search-box" action="/page/types" method="get">
<input type="text" name="search" class="form-control search-input" placeholder="搜索类型名称或描述..." value="{{ request.query_params.get('search', '') }}">
<button type="submit" class="btn btn-primary">搜索</button>
{% if request.query_params.get('search') %}
<a href="/page/types" class="btn btn-secondary">清除</a>
{% endif %}
<div class="input-group">
<span class="input-group-text"><i class="fas fa-search"></i></span>
<input type="text" name="search" class="form-control" placeholder="搜索类型名称或描述..." value="{{ request.query_params.get('search', '') }}">
<button type="submit" class="btn btn-primary">搜索</button>
{% if request.query_params.get('search') %}
<a href="/page/types" class="btn btn-secondary">清除</a>
{% endif %}
</div>
</form>
</div>
<div class="table-container">
<table>
<table class="table table-hover">
<thead>
<tr>
<th>类型名称</th>
<th>描述</th>
<th>操作</th>
<th>创建时间</th>
<th class="text-end">操作</th>
</tr>
</thead>
<tbody>
@ -35,13 +40,19 @@
<tr>
<td>
<!-- 添加链接，点击类型名称跳转到对应的配置项列表 -->
<a href="/page/configs?type_name={{ type.type_name }}">{{ type.type_name }}</a>
<a href="/page/configs?type_name={{ type.type_name }}" class="type-link">{{ type.type_name }}</a>
</td>
<td>{{ type.description }}</td>
<td>
<!-- 添加编辑和删除按钮 -->
<button class="btn btn-sm btn-secondary" onclick="showEditTypeModal('{{ type.type_name }}', '{{ type.description }}')">编辑</button>
<button class="btn btn-sm btn-danger" onclick="confirmDeleteType('{{ type.type_name }}')">删除</button>
<td>{{ type.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
<td class="text-end">
<div class="btn-group">
<button class="btn btn-sm btn-secondary" onclick="showEditTypeModal('{{ type.type_name }}', '{{ type.description }}')">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-danger" onclick="confirmDeleteType('{{ type.type_name }}')">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
{% endfor %}