暂不支持华丽呼哨的版本控制功能

README.md

@@ -10,15 +10,10 @@
 ## ✨ 主要特性
 
 - 🔄 **配置管理**
-  - 支持多种配置类型（环境变量、服务参数、数据库连接等）
+  - 支持多种配置类型
   - 提供配置的增删改查功能
   - 实时配置更新，无需重启服务
 
-- 📊 **版本控制**
-  - 记录配置修改历史
-  - 支持配置版本回滚
-  - 变更追踪与审计
-
 - 🌐 **Web界面**
   - 现代化的用户界面设计
   - 直观的配置操作体验
@@ -80,6 +75,26 @@ python run.py
 - 日志配置
 - 其他系统参数
 
+## 💫 页面展示
+
+### 首页
+
+![首页](docs/images/home.png)
+
+首页展示了系统的整体概况，包括最近的配置变更、统计数据和快速操作入口。
+
+### 配置类型页面
+
+![配置类型](docs/images/types.png)
+
+配置类型页面提供了对不同类型配置的管理功能，支持添加、编辑和删除配置类型。
+
+### 配置项页面
+
+![配置项](docs/images/configs.png)
+
+配置项页面展示了所有的配置内容，提供了搜索、筛选和编辑功能。
+
 ## 📦 部署
 
 ### Docker部署
@@ -96,8 +111,7 @@ docker run -d -p 8000:8000 config-center
 
 1. 安装Python环境
 2. 安装项目依赖
-3. 配置系统环境变量
-4. 使用gunicorn或uvicorn启动服务
+3. 使用gunicorn或uvicorn启动服务
 
 ## 🤝 贡献指南
 

app/api/pages.py

@@ -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]
     
     # 获取所有类型

app/static/css/style.css

@@ -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;
 }
@@ -403,10 +400,10 @@ tr:hover {
   border-color: var(--primary-color);
   outline: none;
 }
+
 /* 搜索框 */
 .search-container {
-  margin-bottom: 1.5rem;
-  padding: 0;
+  margin: 1.5rem 0;
 }
 
 .search-box {
@@ -414,39 +411,12 @@ tr:hover {
   gap: 1rem;
   flex-wrap: wrap;
   align-items: center;
-  width: 100%;
+  background: white;
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
-.search-box select {
-  min-width: 150px;
-  max-width: 200px;
-}
-.search-input {
-  flex: 1;
-  min-width: 200px;
-}
-.search-box .btn {
-  flex-shrink: 0;
-  white-space: nowrap;
-  min-width: 80px;
-}
-
-@media (max-width: 768px) {
-  .search-box {
-    gap: 0.5rem;
-  }
-
-  .search-box select,
-  .search-input,
-  .search-box .btn {
-    width: 100%;
-    margin: 0;
-  }
-
-  .search-box select {
-    max-width: 100%;
-  }
-}
 .input-group {
   display: flex;
   gap: 0.5rem;
@@ -462,6 +432,7 @@ tr:hover {
   border-radius: 4px;
   color: var(--text-light);
 }
+
 .search-box select {
   min-width: 150px;
   max-width: 200px;
@@ -470,6 +441,7 @@ tr:hover {
   padding: 0.5rem;
   background: white;
 }
+
 .search-input {
   flex: 1;
   min-width: 200px;
@@ -478,10 +450,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;

app/static/css/styles.css

@@ -1,394 +0,0 @@
-.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,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 %}

app/templates/types.html

@@ -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';

requirements.txt

@@ -1,8 +1,8 @@
 fastapi==0.103.1
 uvicorn==0.23.2
-sqlalchemy==2.0.20
+sqlalchemy==1.4.41
 alembic==1.12.0
-pydantic==2.3.0
+pydantic>=2.7.0
 pydantic_settings===2.8.1
 jinja2==3.1.2
 aiosqlite==0.19.0