优化样式
This commit is contained in:
parent
b09cc72fe3
commit
0e8f50cb6b
@ -84,16 +84,17 @@ async def configs_page(
|
||||
result = await db.execute(query)
|
||||
rows = result.all()
|
||||
|
||||
# 处理查询结果，将Config对象的属性转换为字典
|
||||
# 处理查询结果，构建包含类型信息的配置数据
|
||||
configs = [{
|
||||
"config_id": row[0].config_id,
|
||||
"type_id": row[0].type_id,
|
||||
"key": row[0].key,
|
||||
"value": row[0].value,
|
||||
"key_description": row[0].key_description,
|
||||
"created_at": row[0].created_at,
|
||||
"updated_at": row[0].updated_at,
|
||||
"type_name": row[1].type_name
|
||||
"type": {
|
||||
"type_name": row[1].type_name
|
||||
}
|
||||
} for row in rows]
|
||||
|
||||
# 获取所有类型
|
||||
|
||||
@ -260,32 +260,29 @@ tbody tr:hover {
|
||||
background-color: rgba(99, 164, 255, 0.1);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.btn-group .btn {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-group .btn::before {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 4px 8px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
.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;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.btn-group .btn:hover::before {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
.value-container {
|
||||
position: relative;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: inline-flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -406,25 +403,28 @@ tr:hover {
|
||||
/* 搜索框 */
|
||||
.search-container {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-box select {
|
||||
min-width: 150px;
|
||||
max-width: 200px;
|
||||
min-width: 120px;
|
||||
max-width: 180px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.search-box .btn {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
@ -462,6 +462,7 @@ tr:hover {
|
||||
border-radius: 4px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.search-box select {
|
||||
min-width: 150px;
|
||||
max-width: 200px;
|
||||
@ -470,6 +471,7 @@ tr:hover {
|
||||
padding: 0.5rem;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
@ -478,10 +480,12 @@ tr:hover {
|
||||
padding: 0.5rem;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--primary-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 标签样式 */
|
||||
.tag {
|
||||
display: inline-block;
|
||||
|
||||
@ -31,7 +31,8 @@
|
||||
|
||||
/* 搜索框样式 */
|
||||
.search-container {
|
||||
margin-bottom: 20px;
|
||||
margin: 0 0 20px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
@ -49,30 +50,59 @@
|
||||
/* 表格样式 */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
margin: 0 -20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 1rem;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f8f9fa;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 12px;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
color: #212529;
|
||||
vertical-align: middle;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.value-container {
|
||||
position: relative;
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
background: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.config-value {
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
font-family: monospace;
|
||||
font-size: 0.9em;
|
||||
color: #333;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
@ -211,12 +241,17 @@ tr:hover {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
margin: 0 -20px;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 8px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.value-container {
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
.config-value {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
/* 配置页面样式优化 */
|
||||
|
||||
@ -7,63 +7,54 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h1 class="card-title">配置项</h1>
|
||||
<button class="btn btn-primary" onclick="showAddConfigModal()">
|
||||
<i class="fas fa-plus"></i> 添加配置
|
||||
</button>
|
||||
<!-- 添加新增按钮 -->
|
||||
<button class="btn btn-primary" onclick="showAddConfigModal()">添加配置</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="search-container mb-4">
|
||||
<div class="search-container">
|
||||
<form class="search-box" action="/page/configs" method="get">
|
||||
<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>
|
||||
<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 %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table table-hover">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<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>类型</th>
|
||||
<th>键名</th>
|
||||
<th>值</th>
|
||||
<th>描述</th>
|
||||
<th>更新时间</th>
|
||||
<th class="text-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for config in configs %}
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">{{ config.type_name }}</span></td>
|
||||
<td>{{ config.key }}</td>
|
||||
<td>
|
||||
<div class="value-container">
|
||||
<code class="config-value">{{ config.value }}</code>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ config.type.type_name }}</td>
|
||||
<td style="font-weight: 500;">{{ config.key }}</td>
|
||||
<td style="font-weight: 500;">{{ config.value }}</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" data-tooltip="编辑" onclick="showEditConfigModal('{{ config.type_name }}', '{{ config.key }}', '{{ config.value }}', '{{ config.key_description }}')">
|
||||
<!-- 添加编辑和删除按钮 -->
|
||||
<button class="btn btn-sm btn-primary" data-bs-toggle="tooltip" title="编辑" 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" data-tooltip="删除" onclick="confirmDeleteConfig('{{ config.type_name }}', '{{ config.key }}')">
|
||||
<button class="btn btn-sm btn-danger" data-bs-toggle="tooltip" title="删除" onclick="confirmDeleteConfig('{{ config.type.type_name }}', '{{ config.key }}')">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
@ -136,6 +127,14 @@
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
// 初始化工具提示
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
||||
tooltips.forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip);
|
||||
});
|
||||
});
|
||||
|
||||
// 添加配置模态框
|
||||
function showAddConfigModal() {
|
||||
document.getElementById('addConfigModal').style.display = 'block';
|
||||
@ -270,4 +269,4 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
@ -15,7 +15,6 @@
|
||||
<div class="search-container mb-4">
|
||||
<form class="search-box" action="/page/types" method="get">
|
||||
<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') %}
|
||||
@ -46,10 +45,10 @@
|
||||
<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" data-tooltip="编辑" onclick="showEditTypeModal('{{ type.type_name }}', '{{ type.description }}')">
|
||||
<button class="btn btn-sm btn-primary" data-bs-toggle="tooltip" title="编辑" onclick="showEditTypeModal('{{ type.type_name }}', '{{ type.description }}')">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-danger" data-tooltip="删除" onclick="confirmDeleteType('{{ type.type_name }}')">
|
||||
<button class="btn btn-sm btn-danger" data-bs-toggle="tooltip" title="删除" onclick="confirmDeleteType('{{ type.type_name }}')">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
@ -105,6 +104,14 @@
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
// 初始化工具提示
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
||||
tooltips.forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip);
|
||||
});
|
||||
});
|
||||
|
||||
// 添加类型模态框
|
||||
function showAddTypeModal() {
|
||||
document.getElementById('addTypeModal').style.display = 'block';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user