第一版 开发完成

frontend/css/style.css

@@ -232,7 +232,7 @@ body {
 }
 
 .sidebar-nav {
-  flex: 1;
+  flex: 0 0 auto;
 }
 
 .nav-item {
@@ -472,6 +472,10 @@ body {
   align-items: flex-end;
 }
 
+.filter-row-amount {
+  margin-top: var(--space-16);
+}
+
 .filter-group {
   display: flex;
   align-items: center;
@@ -501,6 +505,10 @@ body {
   min-width: 130px;
 }
 
+.input-amount {
+  min-width: 100px;
+}
+
 .input {
   width: 100%;
   padding: 0.5rem 0.75rem;

frontend/index.html

@@ -64,7 +64,7 @@
           <div class="search-row">
             <select id="searchType" class="input input-select">
               <option value="name">项目名称</option>
-              <option value="code">项目编号</option>
+              <option value="code">合同编号</option>
             </select>
             <input type="text" id="searchKeyword" class="input input-search" placeholder="输入关键词搜索" />
             <button type="button" class="btn btn-search" id="btnSearch">搜索</button>
@@ -111,6 +111,16 @@
               <label><input type="checkbox" id="dateAbnormal" /> 仅日期异常</label>
             </div>
           </div>
+          <div class="filter-row filter-row-amount">
+            <div class="filter-group">
+              <label>合同金额（万元）</label>
+              <input type="number" id="amountMin" class="input input-amount" placeholder="最小" step="0.01" min="0" />
+            </div>
+            <div class="filter-group">
+              <label>至</label>
+              <input type="number" id="amountMax" class="input input-amount" placeholder="最大" step="0.01" min="0" />
+            </div>
+          </div>
         </div>
         <div class="table-wrap">
           <div class="table-loading" id="listLoading">加载中…</div>
@@ -121,11 +131,14 @@
           <table class="table" id="projectTable">
             <thead>
               <tr>
-                <th>项目名称</th>
                 <th>合同编号</th>
-                <th>进度</th>
-                <th>费用状态</th>
-                <th>更新时间</th>
+                <th>项目名称</th>
+                <th>合同金额</th>
+                <th>业主单位</th>
+                <th>签订日期</th>
+                <th>所属项目部</th>
+                <th>总体成本</th>
+                <th>项目负责人及电话</th>
                 <th>操作</th>
               </tr>
             </thead>

frontend/js/app.js

@@ -30,6 +30,8 @@
   var dateFrom = document.getElementById('dateFrom');
   var dateTo = document.getElementById('dateTo');
   var dateAbnormal = document.getElementById('dateAbnormal');
+  var amountMin = document.getElementById('amountMin');
+  var amountMax = document.getElementById('amountMax');
   var listLoading = document.getElementById('listLoading');
   var listEmpty = document.getElementById('listEmpty');
   var projectTable = document.getElementById('projectTable');
@@ -96,14 +98,23 @@
     if (navList) navList.classList.add('active');
   }
 
-  function showDetail(projectId) {
+  var detailMode = 'edit'; // 'view' | 'edit'
+
+  function updateDetailHeaderVisibility(mode) {
+    if (btnSave) btnSave.style.display = mode === 'edit' ? '' : 'none';
+    if (btnViewLog) btnViewLog.style.display = mode === 'edit' ? '' : 'none';
+  }
+
+  function showDetail(projectId, mode) {
     currentProjectId = projectId;
+    detailMode = mode != null ? mode : (projectId ? 'edit' : 'edit');
     if (viewList) viewList.classList.remove('active');
     if (viewDetail) viewDetail.classList.add('active');
     document.querySelectorAll('.nav-item').forEach(function (n) { n.classList.remove('active'); });
     if (detailTitle) detailTitle.textContent = projectId ? '项目详情' : '新建项目';
     if (detailLoading) detailLoading.style.display = 'block';
     if (detailContent) detailContent.style.display = 'none';
+    updateDetailHeaderVisibility(detailMode);
 
     if (projectId) {
       window.API.post('/api/projects/detail', { id: projectId }).then(function (res) {
@@ -198,6 +209,8 @@
       dateFrom: dateFrom && dateFrom.value ? dateFrom.value : undefined,
       dateTo: dateTo && dateTo.value ? dateTo.value : undefined,
       dateAbnormal: dateAbnormal && dateAbnormal.checked ? true : undefined,
+      amountMin: amountMin && amountMin.value !== '' ? parseFloat(amountMin.value) : undefined,
+      amountMax: amountMax && amountMax.value !== '' ? parseFloat(amountMax.value) : undefined,
     };
     if (!body.keyword) body.searchType = undefined;
     if (!body.dateFilterType) body.dateFrom = body.dateTo = undefined;
@@ -221,17 +234,19 @@
         if (projectTable) projectTable.style.visibility = 'visible';
         var html = list
           .map(function (p) {
-            var updatedAt = p.updatedAt ? p.updatedAt.slice(0, 10) : '—';
             return (
               '<tr>' +
-              '<td>' + (p.projectName || '—') + '</td>' +
               '<td>' + (p.contractCode || '—') + '</td>' +
-              '<td>' + (p.progress || '—') + '</td>' +
-              '<td>' + (p.cost || '—') + '</td>' +
-              '<td>' + updatedAt + '</td>' +
+              '<td>' + (p.projectName || '—') + '</td>' +
+              '<td>' + (p.bidContractAmount != null && p.bidContractAmount !== '' ? p.bidContractAmount : '—') + '</td>' +
+              '<td>' + (p.ownerUnit || '—') + '</td>' +
+              '<td>' + (p.signDate || '—') + '</td>' +
+              '<td>' + (p.projectDepartment || '—') + '</td>' +
+              '<td>' + (p.totalCost != null && p.totalCost !== '' ? p.totalCost : '—') + '</td>' +
+              '<td>' + (p.projectLeaderContact || '—') + '</td>' +
               '<td class="cell-actions">' +
-              '<button type="button" class="link-action" data-id="' + p.id + '">查看</button> ' +
-              '<button type="button" class="link-action" data-id="' + p.id + '">编辑</button>' +
+              '<button type="button" class="link-action" data-id="' + p.id + '" data-mode="view">查看</button> ' +
+              '<button type="button" class="link-action" data-id="' + p.id + '" data-mode="edit">编辑</button>' +
               '</td>' +
               '</tr>'
             );
@@ -241,7 +256,8 @@
         projectTableBody.querySelectorAll('.link-action').forEach(function (btn) {
           btn.addEventListener('click', function () {
             var id = btn.getAttribute('data-id');
-            showDetail(id);
+            var mode = btn.getAttribute('data-mode') || 'edit';
+            showDetail(id, mode);
           });
         });
       }
@@ -309,7 +325,7 @@
   if (btnPrev) btnPrev.addEventListener('click', function () { if (currentPage > 1) { currentPage--; loadList(); } });
   if (btnNext) btnNext.addEventListener('click', function () { if (currentPage * PAGE_SIZE < totalCount) { currentPage++; loadList(); } });
 
-  if (btnNewProject) btnNewProject.addEventListener('click', function () { showDetail(null); });
+  if (btnNewProject) btnNewProject.addEventListener('click', function () { showDetail(null, 'edit'); });
   if (btnBack) btnBack.addEventListener('click', function () { showList(); loadList(); });
   if (navList) navList.addEventListener('click', function (e) { e.preventDefault(); showList(); });