feat:修改表格的底层样式

nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/adapter/vxe-table.ts

@@ -43,7 +43,7 @@ setupVbenVxeTable({
     vxeUI.setConfig({
       grid: {
         align: 'center',
-        border: false,
+        border: true,
         columnConfig: {
           resizable: true,
         },

nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/wms/iostorinv/data.ts

@@ -334,7 +334,7 @@ export function useGridColumns(): VxeTableGridOptions<WmsIostorInvApi.IostorInv>
     {
       field: 'billCode',
       title: '单据编号',
-      minWidth: 120,
+      minWidth: 150,
       slots: { default: 'billCode' },
     },
     {

nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/wms/iostorinv/index.vue

@@ -143,7 +143,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 </script>
 
 <template>
-  <Page auto-content-height class="iostorinv-page">
+  <Page auto-content-height>
     <FormModal @success="handleRefresh" />
     <AllocationModal @success="handleRefresh" />
     <DetailModal />
@@ -216,23 +216,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-
-<style scoped>
-.iostorinv-page :deep(.vxe-cell--checkbox .vxe-checkbox--icon) {
-  color: #2563eb;
-  filter: drop-shadow(0 0 1px rgb(255 255 255 / 90%));
-}
-
-.iostorinv-page
-  :deep(.vxe-body--row.row--hover .vxe-cell--checkbox .vxe-checkbox--icon),
-.iostorinv-page
-  :deep(.vxe-body--row.row--current .vxe-cell--checkbox .vxe-checkbox--icon) {
-  color: #1d4ed8;
-  filter: drop-shadow(0 0 2px #fff);
-}
-
-.iostorinv-page :deep(.vxe-cell--checkbox.is--checked .vxe-checkbox--icon),
-.iostorinv-page :deep(.vxe-cell--checkbox.is--indeterminate .vxe-checkbox--icon) {
-  color: #1d4ed8;
-}
-</style>

nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/packages/effects/plugins/src/vxe-table/style.css

@@ -56,6 +56,33 @@
   /* --vxe-ui-table-fixed-scrolling-box-shadow-color: rgb(0 0 0 / 80%); */
 }
 
+/*
+ * 全局提高表格复选框对比度。默认边框使用主题主色，在悬浮行、当前行及
+ * 勾选行中增加背景色描边，避免复选框与高亮行背景混在一起。
+ */
+.vxe-grid .vxe-cell--checkbox:not(.is--disabled) .vxe-checkbox--icon {
+  color: var(--vxe-ui-font-primary-color);
+  filter: drop-shadow(
+    0 0 1px var(--vxe-ui-layout-background-color)
+  );
+}
+
+.vxe-grid
+  .vxe-body--row:is(.row--hover, .row--current, .row--checked)
+  .vxe-cell--checkbox:not(.is--disabled)
+  .vxe-checkbox--icon {
+  color: var(--vxe-ui-font-primary-darken-color);
+  filter: drop-shadow(
+    0 0 2px var(--vxe-ui-layout-background-color)
+  );
+}
+
+.vxe-grid
+  .vxe-cell--checkbox:is(.is--checked, .is--indeterminate):not(.is--disabled)
+  .vxe-checkbox--icon {
+  color: var(--vxe-ui-font-primary-darken-color);
+}
+
 .vxe-pager {
   .vxe-pager--prev-btn:not(.is--disabled):active,
   .vxe-pager--next-btn:not(.is--disabled):active,