From 05969e2be501584a6e70c3186c231632dfe8303a Mon Sep 17 00:00:00 2001
From: root <295172551@qq.com>
Date: Thu, 26 Jun 2025 23:58:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=A4=A7=E6=92=92=E6=97=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 LTEMvcApp/Views/Home/NetworkConfig.cshtml | 188 +++++++++++++++-------
 1 file changed, 131 insertions(+), 57 deletions(-)

diff --git a/LTEMvcApp/Views/Home/NetworkConfig.cshtml b/LTEMvcApp/Views/Home/NetworkConfig.cshtml
index c773e09..806d12d 100644
--- a/LTEMvcApp/Views/Home/NetworkConfig.cshtml
+++ b/LTEMvcApp/Views/Home/NetworkConfig.cshtml
@@ -4,63 +4,96 @@
     var port = Context.Request.Query["port"].ToString();
 }
 
+<style>
+    .network-config-table th {
+        background: #f5faff;
+        color: #1976d2;
+        font-weight: bold;
+        text-align: center;
+    }
+    .network-config-table td {
+        vertical-align: middle;
+        text-align: center;
+    }
+    .network-config-table .btn {
+        margin: 0 2px;
+    }
+    .alert-service-check {
+        background: #fffbe6;
+        color: #856404;
+        border: 1px solid #ffeeba;
+        margin-top: 10px;
+        font-size: 1.05em;
+    }
+</style>
+
 <div class="container mt-4">
-    <h2>网络配置管理 <span class="text-info">@ip:@port</span></h2>
-    <div class="row mb-3">
-        <div class="col-md-4">
-            <button class="btn btn-success" onclick="showAddConfigModal()">
-                <i class="fas fa-plus"></i> 添加网络配置
-            </button>
+    <h2>
+        <i class="fas fa-network-wired text-primary"></i>
+        网络配置管理
+        <span class="text-info" style="font-size:1.1em;">@ip:@port</span>
+    </h2>
+
+    <!-- 添加网络配置表单 -->
+    <div class="card mb-4">
+        <div class="card-header bg-primary text-white">
+            <i class="fas fa-plus-circle"></i> 添加网络配置
+        </div>
+        <div class="card-body">
+            <form id="addConfigForm" class="mb-0">
+                <div class="form-row">
+                    <div class="form-group col-md-2">
+                        <label>Key</label>
+                        <input type="text" class="form-control" name="configKey" required />
+                    </div>
+                    <div class="form-group col-md-2">
+                        <label>RagConfig</label>
+                        <input type="text" class="form-control" name="ragConfig" />
+                    </div>
+                    <div class="form-group col-md-2">
+                        <label>APN</label>
+                        <input type="text" class="form-control" name="apn" />
+                    </div>
+                    <div class="form-group col-md-2">
+                        <label>Band(逗号分隔)</label>
+                        <input type="text" class="form-control" name="band" />
+                    </div>
+                    <div class="form-group col-md-3">
+                        <label>Comment</label>
+                        <input type="text" class="form-control" name="comment" />
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label>Core/IMS 配置</label>
+                    <table class="table table-sm table-bordered" id="coreOrImsTable">
+                        <thead>
+                            <tr>
+                                <th style="width:60px;">Index</th>
+                                <th style="width:100px;">PLMN</th>
+                                <th>CoreNetworkConfig</th>
+                                <th>IMSConfig</th>
+                                <th style="width:50px;"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                        </tbody>
+                    </table>
+                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="addCoreOrImsRow()">
+                        <i class="fas fa-plus"></i> 添加一行
+                    </button>
+                </div>
+                <button type="button" class="btn btn-primary" onclick="submitAddConfig()">
+                    <i class="fas fa-check"></i> 添加
+                </button>
+            </form>
         </div>
     </div>
+
     <div id="configTableContainer">
         <!-- 配置表格将由JS动态填充 -->
     </div>
 </div>
 
-<!-- 添加配置模态框 -->
-<div class="modal fade" id="addConfigModal" tabindex="-1" role="dialog" aria-labelledby="addConfigModalLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="addConfigModalLabel">添加网络配置</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <form id="addConfigForm">
-          <div class="form-group">
-            <label>Key</label>
-            <input type="text" class="form-control" name="configKey" required />
-          </div>
-          <div class="form-group">
-            <label>RagConfig</label>
-            <input type="text" class="form-control" name="ragConfig" />
-          </div>
-          <div class="form-group">
-            <label>APN</label>
-            <input type="text" class="form-control" name="apn" />
-          </div>
-          <div class="form-group">
-            <label>Band(逗号分隔)</label>
-            <input type="text" class="form-control" name="band" />
-          </div>
-          <div class="form-group">
-            <label>Comment</label>
-            <input type="text" class="form-control" name="comment" />
-          </div>
-          <!-- coreOrImsConfigs 可扩展为复杂表单，这里先省略 -->
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
-        <button type="button" class="btn btn-primary" onclick="submitAddConfig()">添加</button>
-      </div>
-    </div>
-  </div>
-</div>
-
 @section Scripts {
 <script>
 const ip = '@ip';
@@ -68,6 +101,7 @@ const port = '@port';
 
 $(function() {
     loadNetworkConfigs();
+    addCoreOrImsRow();
 });
 
 function loadNetworkConfigs() {
@@ -93,11 +127,14 @@ function loadNetworkConfigs() {
 }
 
 function renderConfigTable(data) {
-    let html = `<table class="table table-bordered"><thead><tr>
+    let html = `<table class="table table-bordered network-config-table"><thead><tr>
         <th>Key</th><th>APN</th><th>Band</th><th>Comment</th><th>操作</th>
     </tr></thead><tbody>`;
     if (data.length === 0) {
-        html += '<tr><td colspan="5" class="text-center">暂无数据</td></tr>';
+        html += '<tr><td colspan="5" class="text-center text-muted">暂无数据</td></tr>';
+        html += `<tr><td colspan="5" class="alert-service-check">
+            <i class="fas fa-exclamation-circle"></i> 服务是否正常？请检查Agent服务和网络配置接口是否可用。
+        </td></tr>`;
     } else {
         data.forEach(item => {
             html += `<tr>
@@ -105,7 +142,11 @@ function renderConfigTable(data) {
                 <td>${item.apn || ''}</td>
                 <td>${item.band ? item.band.join(',') : ''}</td>
                 <td>${item.comment || ''}</td>
-                <td><button class="btn btn-danger btn-sm" onclick="deleteConfig('${item.configKey}')"><i class='fas fa-trash'></i> 删除</button></td>
+                <td>
+                    <button class="btn btn-danger btn-sm" onclick="deleteConfig('${item.configKey}')" title="删除">
+                        <i class='fas fa-trash'></i>
+                    </button>
+                </td>
             </tr>`;
         });
     }
@@ -113,9 +154,40 @@ function renderConfigTable(data) {
     $('#configTableContainer').html(html);
 }
 
-function showAddConfigModal() {
-    $('#addConfigForm')[0].reset();
-    $('#addConfigModal').modal('show');
+function addCoreOrImsRow(data) {
+    let row = `<tr>
+        <td><input type="number" class="form-control form-control-sm" name="coreIndex" value="${data?.index ?? ''}" /></td>
+        <td><input type="text" class="form-control form-control-sm" name="corePlmn" value="${data?.plmn ?? ''}" /></td>
+        <td><input type="text" class="form-control form-control-sm" name="coreNetworkConfig" value="${data?.coreNetworkConfig ?? ''}" /></td>
+        <td><input type="text" class="form-control form-control-sm" name="imsConfig" value="${data?.imsConfig ?? ''}" /></td>
+        <td>
+            <button type="button" class="btn btn-danger btn-sm" onclick="removeCoreOrImsRow(this)">
+                <i class="fas fa-trash"></i>
+            </button>
+        </td>
+    </tr>`;
+    $('#coreOrImsTable tbody').append(row);
+}
+
+function removeCoreOrImsRow(btn) {
+    $(btn).closest('tr').remove();
+    // 至少保留一行
+    if ($('#coreOrImsTable tbody tr').length === 0) {
+        addCoreOrImsRow();
+    }
+}
+
+function getCoreOrImsConfigs() {
+    let arr = [];
+    $('#coreOrImsTable tbody tr').each(function() {
+        arr.push({
+            index: parseInt($(this).find('[name="coreIndex"]').val()) || 0,
+            plmn: $(this).find('[name="corePlmn"]').val(),
+            coreNetworkConfig: $(this).find('[name="coreNetworkConfig"]').val(),
+            imsConfig: $(this).find('[name="imsConfig"]').val()
+        });
+    });
+    return arr;
 }
 
 function submitAddConfig() {
@@ -126,7 +198,7 @@ function submitAddConfig() {
         apn: form.find('[name="apn"]').val(),
         band: form.find('[name="band"]').val().split(',').map(x => x.trim()).filter(x => x),
         comment: form.find('[name="comment"]').val(),
-        coreOrImsConfigs: [] // 可扩展
+        coreOrImsConfigs: getCoreOrImsConfigs()
     };
     $.ajax({
         url: `/api/ipgroup/network-config?ip=${ip}&port=${port}`,
@@ -134,7 +206,9 @@ function submitAddConfig() {
         contentType: 'application/json',
         data: JSON.stringify(data),
         success: function(res) {
-            $('#addConfigModal').modal('hide');
+            form[0].reset();
+            $('#coreOrImsTable tbody').empty();
+            addCoreOrImsRow();
             loadNetworkConfigs();
         },
         error: function() {