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

app/static/css/style.css

@@ -158,19 +158,65 @@ main {
 /* 卡片样式 */
 .card {
   background-color: white;
-  border-radius: 4px;
+  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  padding: 1.5rem;
+  padding: 2rem;
-  margin-bottom: 1.5rem;
+  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;
+  margin-bottom: 1.5rem;
-  padding-bottom: 0.5rem;
+  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--border-color);
+  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;
+  border-collapse: separate;
-  margin-bottom: 1rem;
+  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;
 }
 
 /* 标签样式 */

app/static/css/styles.css

@@ -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;
+    }
+}

app/templates/configs.html

@@ -7,48 +7,66 @@
     <div class="card">
         <div class="card-header">
             <h1 class="card-title">配置项</h1>
-            <!-- 添加新增按钮 -->
+            <button class="btn btn-primary" onclick="showAddConfigModal()">
-            <button class="btn btn-primary" onclick="showAddConfigModal()">添加配置</button>
+                <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()">
+                    <div class="input-group">
-                        <option value="">所有类型</option>
+                        <span class="input-group-text"><i class="fas fa-filter"></i></span>
-                        {% for type in types %}
+                        <select name="type_name" class="form-control" onchange="this.form.submit()">
-                        <option value="{{ type.type_name }}" {% if current_type == type.type_name %}selected{% endif %}>{{ type.type_name }}</option>
+                            <option value="">所有类型</option>
-                        {% endfor %}
+                            {% for type in types %}
-                    </select>
+                            <option value="{{ type.type_name }}" {% if current_type == type.type_name %}selected{% endif %}>{{ type.type_name }}</option>
-                    <input type="text" name="search" class="form-control search-input" placeholder="搜索键名或值..." value="{{ request.query_params.get('search', '') }}">
+                            {% endfor %}
-                    <button type="submit" class="btn btn-primary">搜索</button>
+                        </select>
-                    {% if request.query_params.get('search') or request.query_params.get('type_name') %}
+                        <span class="input-group-text"><i class="fas fa-search"></i></span>
-                    <a href="/page/configs" class="btn btn-secondary">清除</a>
+                        <input type="text" name="search" class="form-control" placeholder="搜索键名或值..." value="{{ request.query_params.get('search', '') }}">
-                    {% endif %}
+                        <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><i class="fas fa-layer-group"></i> 类型</th>
-                            <th>键名</th>
+                            <th><i class="fas fa-key"></i> 键名</th>
-                            <th>值</th>
+                            <th><i class="fas fa-code"></i> 值</th>
-                            <th>描述</th>
+                            <th><i class="fas fa-info-circle"></i> 描述</th>
-                            <th>操作</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>
-                                <!-- 添加编辑和删除按钮 -->
+                                <div class="value-container">
-                                <button class="btn btn-sm btn-secondary" onclick="showEditConfigModal('{{ config.type.type_name }}', '{{ config.key }}', '{{ config.value }}', '{{ config.key_description }}')">编辑</button>
+                                    <code class="config-value">{{ config.value }}</code>
-                                <button class="btn btn-sm btn-danger" onclick="confirmDeleteConfig('{{ config.type.type_name }}', '{{ config.key }}')">删除</button>
+                                </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 %}

app/templates/types.html

@@ -7,27 +7,32 @@
     <div class="card">
         <div class="card-header">
             <h1 class="card-title">配置类型</h1>
-            <!-- 添加新增按钮 -->
+            <button class="btn btn-primary" onclick="showAddTypeModal()">
-            <button class="btn btn-primary" onclick="showAddTypeModal()">添加类型</button>
+                <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', '') }}">
+                    <div class="input-group">
-                    <button type="submit" class="btn btn-primary">搜索</button>
+                        <span class="input-group-text"><i class="fas fa-search"></i></span>
-                    {% if request.query_params.get('search') %}
+                        <input type="text" name="search" class="form-control" placeholder="搜索类型名称或描述..." value="{{ request.query_params.get('search', '') }}">
-                    <a href="/page/types" class="btn btn-secondary">清除</a>
+                        <button type="submit" class="btn btn-primary">搜索</button>
-                    {% endif %}
+                        {% 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>
+                            <td>{{ type.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
-                                <!-- 添加编辑和删除按钮 -->
+                            <td class="text-end">
-                                <button class="btn btn-sm btn-secondary" onclick="showEditTypeModal('{{ type.type_name }}', '{{ type.description }}')">编辑</button>
+                                <div class="btn-group">
-                                <button class="btn btn-sm btn-danger" onclick="confirmDeleteType('{{ type.type_name }}')">删除</button>
+                                    <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 %}