From e10d099036825b1abc17ced0b7f85961dec14c82 Mon Sep 17 00:00:00 2001
From: cody <648753004@qq.com>
Date: Tue, 13 Jan 2026 12:29:15 +0800
Subject: [PATCH] update

---
 .../Controllers/Web/CompanyController.php     |   6 +-
 resources/views/company_search.blade.php      | 194 +++++++++++++-----
 2 files changed, 143 insertions(+), 57 deletions(-)

diff --git a/app/Http/Controllers/Web/CompanyController.php b/app/Http/Controllers/Web/CompanyController.php
index 338bdba..fb69ad4 100644
--- a/app/Http/Controllers/Web/CompanyController.php
+++ b/app/Http/Controllers/Web/CompanyController.php
@@ -20,11 +20,13 @@ class CompanyController extends Controller
             ->whereHas('courseSigns', function ($query) {
                 $query->where('status', 1); // 审核通过
             })
-            ->select('id', 'name', 'company_name', 'company_id')
+            ->select('id', 'username', 'company_name', 'company_id')
             ->orderBy('id', 'desc')
             ->get();
 
-        return view('company_search', compact('users'));
+        $totalCount = $users->count();
+
+        return view('company_search', compact('users', 'totalCount'));
     }
 
     /**
diff --git a/resources/views/company_search.blade.php b/resources/views/company_search.blade.php
index f111b7a..ee4e64a 100644
--- a/resources/views/company_search.blade.php
+++ b/resources/views/company_search.blade.php
@@ -14,70 +14,108 @@
 
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background: #f5f5f5;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
             padding: 20px;
         }
 
         .container {
-            max-width: 1200px;
+            max-width: 1400px;
             margin: 0 auto;
             background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 12px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
             overflow: hidden;
         }
 
         .header {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
-            padding: 30px;
+            padding: 40px 30px;
             text-align: center;
         }
 
         .header h1 {
-            font-size: 28px;
+            font-size: 32px;
+            margin-bottom: 15px;
+            font-weight: 600;
+        }
+
+        .header p {
+            font-size: 16px;
+            opacity: 0.95;
             margin-bottom: 10px;
         }
 
+        .header .total-count {
+            font-size: 18px;
+            font-weight: 600;
+            margin-top: 15px;
+            padding: 10px 20px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 20px;
+            display: inline-block;
+        }
+
         .table-container {
-            padding: 20px;
+            padding: 30px;
             overflow-x: auto;
         }
 
         table {
             width: 100%;
             border-collapse: collapse;
+            background: white;
         }
 
         th, td {
-            padding: 12px;
+            padding: 16px;
             text-align: left;
-            border-bottom: 1px solid #e0e0e0;
+            border-bottom: 1px solid #e8e8e8;
         }
 
         th {
-            background-color: #f8f9fa;
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
             font-weight: 600;
-            color: #333;
+            color: #495057;
+            font-size: 14px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        td {
+            color: #212529;
+            font-size: 14px;
         }
 
         tr:hover {
             background-color: #f8f9fa;
         }
 
+        tr:last-child td {
+            border-bottom: none;
+        }
+
         .search-btn {
-            padding: 6px 16px;
-            background: #667eea;
+            padding: 8px 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
             border: none;
-            border-radius: 4px;
+            border-radius: 6px;
             cursor: pointer;
             font-size: 14px;
-            transition: background 0.3s;
+            font-weight: 500;
+            transition: all 0.3s;
+            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
         }
 
         .search-btn:hover {
-            background: #5568d3;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
+        }
+
+        .search-btn:active {
+            transform: translateY(0);
         }
 
         /* 弹窗样式 */
@@ -89,24 +127,26 @@
             top: 0;
             width: 100%;
             height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
+            background-color: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(4px);
         }
 
         .modal-content {
             background-color: white;
-            margin: 5% auto;
+            margin: 3% auto;
             padding: 0;
-            border-radius: 8px;
+            border-radius: 12px;
             width: 90%;
-            max-width: 800px;
-            max-height: 80vh;
+            max-width: 900px;
+            max-height: 85vh;
             overflow: hidden;
             display: flex;
             flex-direction: column;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
         }
 
         .modal-header {
-            padding: 20px;
+            padding: 25px 30px;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
             display: flex;
@@ -116,15 +156,22 @@
 
         .modal-header h2 {
             margin: 0;
-            font-size: 20px;
+            font-size: 22px;
+            font-weight: 600;
         }
 
         .close {
             color: white;
-            font-size: 28px;
+            font-size: 32px;
             font-weight: bold;
             cursor: pointer;
             line-height: 1;
+            transition: opacity 0.3s;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
         .close:hover {
@@ -132,48 +179,79 @@
         }
 
         .modal-body {
-            padding: 20px;
+            padding: 30px;
             overflow-y: auto;
             flex: 1;
         }
 
+        .search-input-group {
+            margin-bottom: 25px;
+        }
+
+        .search-input-group input {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 15px;
+            transition: border-color 0.3s;
+        }
+
+        .search-input-group input:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
         .company-list {
             list-style: none;
             padding: 0;
         }
 
         .company-item {
-            padding: 15px;
-            border: 1px solid #e0e0e0;
-            border-radius: 4px;
-            margin-bottom: 10px;
+            padding: 18px;
+            border: 2px solid #e8e8e8;
+            border-radius: 8px;
+            margin-bottom: 12px;
             cursor: pointer;
             transition: all 0.3s;
+            background: #fafafa;
         }
 
         .company-item:hover {
-            background-color: #f8f9fa;
+            background-color: #f0f4ff;
             border-color: #667eea;
+            transform: translateX(4px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
         }
 
         .company-name {
             font-weight: 600;
-            color: #333;
-            margin-bottom: 5px;
+            color: #212529;
+            margin-bottom: 8px;
+            font-size: 16px;
         }
 
         .company-info {
             font-size: 13px;
-            color: #666;
+            color: #6c757d;
+            line-height: 1.6;
         }
 
         .loading {
             text-align: center;
-            padding: 40px;
+            padding: 60px 20px;
             color: #999;
+            font-size: 15px;
         }
 
         .no-results {
+            text-align: center;
+            padding: 60px 20px;
+            color: #999;
+            font-size: 15px;
+        }
+
+        .empty-state {
             text-align: center;
             padding: 40px;
             color: #999;
@@ -183,11 +261,13 @@
 <body>
     <div class="container">
         <div class="header">
-            <h1>用户公司信息管理</h1>
-            <p>管理用户的公司信息</p>
+            <h1>📋 用户公司信息管理</h1>
+            <p>管理用户的公司信息，支持搜索和更新公司名称</p>
+            <div class="total-count">总用户数：{{ $totalCount }}</div>
         </div>
 
         <div class="table-container">
+            @if($users->count() > 0)
             <table>
                 <thead>
                     <tr>
@@ -202,16 +282,21 @@
                     @foreach($users as $user)
                     <tr data-user-id="{{ $user->id }}">
                         <td>{{ $user->id }}</td>
-                        <td>{{ $user->name }}</td>
+                        <td>{{ $user->username ?: '-' }}</td>
                         <td class="company-name-cell">{{ $user->company_name }}</td>
                         <td>{{ $user->company_id ?? '-' }}</td>
                         <td>
-                            <button class="search-btn" onclick="openSearchModal({{ $user->id }}, '{{ addslashes($user->company_name) }}')">搜索公司</button>
+                            <button class="search-btn" onclick="openSearchModal({{ $user->id }}, '{{ addslashes($user->company_name) }}')">🔍 搜索公司</button>
                         </td>
                     </tr>
                     @endforeach
                 </tbody>
             </table>
+            @else
+            <div class="empty-state">
+                <p>暂无用户数据</p>
+            </div>
+            @endif
         </div>
     </div>
 
@@ -219,28 +304,20 @@
     <div id="searchModal" class="modal">
         <div class="modal-content">
             <div class="modal-header">
-                <h2>搜索公司</h2>
+                <h2>🔍 搜索公司</h2>
                 <span class="close" onclick="closeModal()">&times;</span>
             </div>
             <div class="modal-body">
-                <div style="margin-bottom: 20px;">
+                <div class="search-input-group">
                     <input 
                         type="text" 
                         id="searchCompanyInput" 
-                        placeholder="请输入公司名称..." 
-                        style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"
+                        placeholder="请输入公司名称进行搜索..." 
                         onkeypress="if(event.key === 'Enter') searchCompany()"
                     >
-                    <button 
-                        class="search-btn" 
-                        onclick="searchCompany()" 
-                        style="margin-top: 10px; width: 100%;"
-                    >
-                        查询
-                    </button>
                 </div>
                 <div id="companyListContainer">
-                    <div class="loading">请输入公司名称进行查询</div>
+                    <div class="loading">查询中...</div>
                 </div>
             </div>
         </div>
@@ -252,8 +329,15 @@
         function openSearchModal(userId, currentCompanyName) {
             currentUserId = userId;
             document.getElementById('searchModal').style.display = 'block';
-            document.getElementById('searchCompanyInput').value = currentCompanyName;
-            document.getElementById('companyListContainer').innerHTML = '<div class="loading">请输入公司名称进行查询</div>';
+            const input = document.getElementById('searchCompanyInput');
+            input.value = currentCompanyName;
+            
+            // 自动执行搜索
+            if (currentCompanyName) {
+                searchCompany();
+            } else {
+                document.getElementById('companyListContainer').innerHTML = '<div class="loading">请输入公司名称进行查询</div>';
+            }
         }
 
         function closeModal() {
@@ -272,12 +356,12 @@
         function searchCompany() {
             const companyName = document.getElementById('searchCompanyInput').value.trim();
             if (!companyName) {
-                alert('请输入公司名称');
+                document.getElementById('companyListContainer').innerHTML = '<div class="no-results">请输入公司名称</div>';
                 return;
             }
 
             const container = document.getElementById('companyListContainer');
-            container.innerHTML = '<div class="loading">查询中...</div>';
+            container.innerHTML = '<div class="loading">查询中，请稍候...</div>';
 
             fetch(`/api/mobile/other/company?company_name=${encodeURIComponent(companyName)}`)
                 .then(response => response.json())
@@ -360,7 +444,7 @@
                         companyNameCell.textContent = companyName;
                         companyIdCell.textContent = '-';
                     }
-                    alert('更新成功');
+                    alert('更新成功！');
                     closeModal();
                 } else {
                     alert('更新失败: ' + (data.msg || data.message || '未知错误'));