更新问题清单样式

zrch-risk-client-39/src/views/project/problemList/StProblemCheckList.vue

 <template>
-  <div>
-    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+  <div class="problem-check-page">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection" class="styled-table">
       <template #tableTitle>
         <!-- <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined">添加问题</a-button> -->
         <a-dropdown v-if="selectedRowKeys.length > 0">
@@ -19,7 +19,7 @@
         </a-dropdown>
       </template>
       <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+        <TableAction :actions="getTableAction(record)" />
       </template>
     </BasicTable>
     <StProblemCheckModal @register="registerModal" @success="handleSuccess" :centered="true" />
@@ -59,6 +59,9 @@
         params['bpmNodeId'] = props.currentFlowNode.id;
         params['todoList'] = props.todoList;
       },
+      formConfig: {
+        schemas: searchFormSchema,
+      },
       actionColumn: { width: 200, fixed: 'right' },
     },
     exportConfig: { name: '问题整改', url: getExportUrl },
@@ -67,14 +70,6 @@
 
   const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
 
-  function handleAdd() {
-    openModal(true, {
-      isUpdate: false,
-      showFooter: true,
-      record: { bpmNodeId: props.currentFlowNode.id, deployId: props.currentFlowNode.deployId, bpmStatus: 0 },
-    });
-  }
-
   function handleEdit(record: Recordable) {
     openModal(true, { record, isUpdate: true, showFooter: true });
   }
@@ -100,23 +95,22 @@
   function getTableAction(record) {
     return [
       { label: '编辑', onClick: handleEdit.bind(null, record) },
-      // { label: '发送', onClick: handleFlow.bind(null, record) },
-    ];
-  }
-
-  function getDropDownAction(record) {
-    return [
       { label: '详情', onClick: handleDetail.bind(null, record) },
       {
         label: '删除',
         popConfirm: { title: '是否确认删除', confirm: handleDelete.bind(null, record) },
       },
+      // { label: '发送', onClick: handleFlow.bind(null, record) },
     ];
   }
 
-  async function handleFlow(record: Recordable) {
-    emit('sendWorkFlow', record);
-  }
+  // function getDropDownAction(record) {
+  //   return [{ label: '编辑', onClick: handleEdit.bind(null, record) }];
+  // }
+
+  // async function handleFlow(record: Recordable) {
+  //   emit('sendWorkFlow', record);
+  // }
 
   async function handleUpdate(dataId, flowNode) {
     const record = { bpmNodeId: flowNode.id, deployId: flowNode.deployId, bpmStatus: 2, id: dataId };
@@ -134,4 +128,200 @@
   defineExpose({ handleUpdate, handleStartUpdate });
 </script>
 
-<style scoped></style>
+<style scoped lang="less">
+  /* ==================== 柔和中性风格 - CSS 变量 ==================== */
+  .problem-check-page {
+    --color-primary: #3b5bdb;
+    --color-primary-hover: #364fc7;
+    --color-primary-light: #e8ecfd;
+    --color-success: #2f9e44;
+    --color-warning: #e67700;
+    --color-error: #c92a2a;
+    --color-text-primary: #1c1c1e;
+    --color-text-secondary: #555770;
+    --color-text-muted: #a0a3b1;
+    --color-border: #e4e4e9;
+    --color-border-strong: #c8c8d0;
+    --color-bg-page: #f5f5f7;
+    --color-bg-white: #ffffff;
+    --color-bg-section: #f0f0f4;
+    --radius: 6px;
+
+    min-height: 100%;
+    background: var(--color-bg-page);
+    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
+    padding: 20px;
+  }
+
+  /* ==================== 表格样式 ==================== */
+  .styled-table {
+    background: var(--color-bg-white);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+
+    :deep(.ant-table) {
+      border-radius: 0;
+      font-size: 13px;
+    }
+
+    :deep(.ant-table-title) {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-bg-section);
+    }
+
+    :deep(.ant-table-thead > tr > th) {
+      background: var(--color-bg-section);
+      border-bottom: 1px solid var(--color-border-strong);
+      font-weight: 600;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      padding: 10px 16px;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+    }
+
+    :deep(.ant-table-tbody > tr > td) {
+      padding: 11px 16px;
+      border-bottom: 1px solid var(--color-border);
+      color: var(--color-text-primary);
+    }
+
+    :deep(.ant-table-tbody > tr:hover > td) {
+      background: #f8f8fc;
+    }
+
+    :deep(.ant-pagination) {
+      margin: 14px 16px;
+    }
+
+    :deep(.ant-table-row-selected > td) {
+      background: var(--color-primary-light) !important;
+    }
+
+    /* 搜索表单区域 */
+    :deep(.ant-form) {
+      padding: 16px 16px 4px;
+      background: var(--color-bg-white);
+      border-bottom: 1px solid var(--color-border);
+    }
+  }
+
+  /* ==================== 表单控件 ==================== */
+  :deep(.ant-input),
+  :deep(.ant-select-selector),
+  :deep(.ant-picker) {
+    border-radius: var(--radius) !important;
+    border-color: var(--color-border) !important;
+    box-shadow: none !important;
+    font-size: 13px;
+
+    &:hover {
+      border-color: var(--color-border-strong) !important;
+    }
+
+    &:focus,
+    &.ant-input-focused {
+      border-color: var(--color-primary) !important;
+      box-shadow: 0 0 0 2px var(--color-primary-light) !important;
+    }
+  }
+
+  :deep(.ant-select-focused .ant-select-selector) {
+    border-color: var(--color-primary) !important;
+    box-shadow: 0 0 0 2px var(--color-primary-light) !important;
+  }
+
+  /* ==================== 按钮样式 ==================== */
+  :deep(.ant-btn) {
+    border-radius: var(--radius);
+    font-weight: 500;
+    font-size: 13px;
+    box-shadow: none;
+
+    &.ant-btn-primary {
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+
+      &:hover {
+        background: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+      }
+    }
+
+    &.ant-btn-default {
+      border-color: var(--color-border-strong);
+      color: var(--color-text-secondary);
+      background: var(--color-bg-white);
+
+      &:hover {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+        background: var(--color-primary-light);
+      }
+    }
+  }
+
+  /* ==================== 表单项 ==================== */
+  :deep(.ant-form-item) {
+    margin-bottom: 16px;
+  }
+
+  :deep(.ant-form-item-label > label) {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+  }
+
+  /* ==================== 复选框 ==================== */
+  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+
+  /* ==================== 下拉菜单 ==================== */
+  :deep(.ant-dropdown-menu) {
+    border-radius: var(--radius);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+
+  :deep(.ant-dropdown-menu-item) {
+    font-size: 13px;
+    color: var(--color-text-primary);
+
+    &:hover {
+      background: var(--color-bg-section);
+    }
+  }
+
+  /* ==================== 操作列链接 ==================== */
+  :deep(.ant-table-cell) {
+    .ant-btn-link {
+      color: var(--color-primary);
+      padding: 0 6px;
+      font-size: 13px;
+
+      &:hover {
+        color: var(--color-primary-hover);
+      }
+    }
+  }
+
+  /* ==================== 响应式 ==================== */
+  @media (max-width: 768px) {
+    .problem-check-page {
+      padding: 12px;
+    }
+
+    .styled-table {
+      :deep(.ant-table-title) {
+        padding: 10px 12px;
+      }
+
+      :deep(.ant-table-thead > tr > th),
+      :deep(.ant-table-tbody > tr > td) {
+        padding: 8px 12px;
+      }
+    }
+  }
+</style>