style(table): 优化表格样式并添加全局美化

- 在 component.less 中添加了 ele-pro-table 的全局美化样式
- 调整了表格的列宽、对齐方式等样式
- 优化了表格的视觉效果，提高了可读性

src/styles/component.less

@@ -1,2 +1,17 @@
 /** 组件样式 */
 //@input-item: 300px;
+
+/* ele-pro-table 全局美化样式 */
+.ele-pro-table .ant-table-thead > tr > th {
+  border-bottom: 2px solid #f0f0f0;
+  background-color: #fafafa;
+  font-weight: 600;
+}
+
+.ele-pro-table .ant-table-tbody > tr > td {
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.ele-pro-table .ant-table-tbody > tr:hover > td {
+  background-color: #f8f9fa;
+}

src/views/shop/shopCoupon/index.vue

@@ -35,63 +35,63 @@
             <a-tag v-else color="green">正常</a-tag>
           </template>
           <template v-if="column.key === 'action'">
-              <a-space>
             <a @click="openEdit(record)" class="ele-text-primary">
-                  <EditOutlined /> 编辑
+              <EditOutlined/>
+              编辑
             </a>
-                <a-divider type="vertical" />
+            <a-divider type="vertical"/>
             <a-popconfirm
               title="确定要删除此优惠券吗？"
               @confirm="remove(record)"
               placement="topRight"
             >
               <a class="ele-text-danger">
-                    <DeleteOutlined /> 删除
+                <DeleteOutlined/>
+                删除
               </a>
             </a-popconfirm>
-              </a-space>
           </template>
         </template>
       </ele-pro-table>
     </a-card>
 
     <!-- 编辑弹窗 -->
-      <ShopCouponEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    <ShopCouponEdit v-model:visible="showEdit" :data="current" @done="reload"/>
   </a-page-header>
 </template>
 
 <script lang="ts" setup>
-  import { createVNode, ref } from 'vue';
-  import { message, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
-  import type { EleProTable } from 'ele-admin-pro';
-  import { toDateString } from 'ele-admin-pro';
-  import type {
+import {createVNode, ref} from 'vue';
+import {message, Modal} from 'ant-design-vue';
+import {ExclamationCircleOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons-vue';
+import type {EleProTable} from 'ele-admin-pro';
+import {toDateString} from 'ele-admin-pro';
+import type {
   DatasourceFunction,
   ColumnItem
-  } from 'ele-admin-pro/es/ele-pro-table/types';
-  import Search from './components/search.vue';
-  import {getPageTitle} from '@/utils/common';
-  import ShopCouponEdit from './components/shopCouponEdit.vue';
-  import { pageShopCoupon, removeShopCoupon, removeBatchShopCoupon } from '@/api/shop/shopCoupon';
-  import type { ShopCoupon, ShopCouponParam } from '@/api/shop/shopCoupon/model';
+} from 'ele-admin-pro/es/ele-pro-table/types';
+import Search from './components/search.vue';
+import {getPageTitle} from '@/utils/common';
+import ShopCouponEdit from './components/shopCouponEdit.vue';
+import {pageShopCoupon, removeShopCoupon, removeBatchShopCoupon} from '@/api/shop/shopCoupon';
+import type {ShopCoupon, ShopCouponParam} from '@/api/shop/shopCoupon/model';
 
-  // 表格实例
-  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
 
-  // 表格选中数据
-  const selection = ref<ShopCoupon[]>([]);
-  // 当前编辑数据
-  const current = ref<ShopCoupon | null>(null);
-  // 是否显示编辑弹窗
-  const showEdit = ref(false);
-  // 是否显示批量移动弹窗
-  const showMove = ref(false);
-  // 加载状态
-  const loading = ref(true);
+// 表格选中数据
+const selection = ref<ShopCoupon[]>([]);
+// 当前编辑数据
+const current = ref<ShopCoupon | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 是否显示批量移动弹窗
+const showMove = ref(false);
+// 加载状态
+const loading = ref(true);
 
-  // 表格数据源
-  const datasource: DatasourceFunction = ({
+// 表格数据源
+const datasource: DatasourceFunction = ({
                                           page,
                                           limit,
                                           where,
@@ -107,10 +107,10 @@
     page,
     limit
   });
-  };
+};
 
-  // 表格列配置
-  const columns = ref<ColumnItem[]>([
+// 表格列配置
+const columns = ref<ColumnItem[]>([
   {
     title: 'ID',
     dataIndex: 'id',
@@ -134,7 +134,7 @@
     key: 'type',
     align: 'center',
     width: 100,
-      customRender: ({ text }) => {
+    customRender: ({text}) => {
       const typeMap: Record<number, string> = {
         10: '满减券',
         20: '折扣券',
@@ -148,7 +148,7 @@
     key: 'couponValue',
     align: 'center',
     width: 120,
-      customRender: ({ record }) => {
+    customRender: ({record}) => {
       if (record.type === 10) {
         return `减${record.reducePrice}元`;
       } else if (record.type === 20) {
@@ -163,14 +163,14 @@
     key: 'minPrice',
     align: 'center',
     width: 100,
-      customRender: ({ text }) => text ? `满${text}元` : '无门槛'
+    customRender: ({text}) => text ? `满${text}元` : '无门槛'
   },
   {
     title: '有效期',
     key: 'validity',
     align: 'center',
     width: 180,
-      customRender: ({ record }) => {
+    customRender: ({record}) => {
       if (record.expireType === 10) {
         return `领取后${record.expireDay}天`;
       } else {
@@ -184,7 +184,7 @@
     key: 'applyRange',
     align: 'center',
     width: 100,
-      customRender: ({ text }) => {
+    customRender: ({text}) => {
       const rangeMap: Record<number, string> = {
         10: '全部商品',
         20: '指定商品',
@@ -198,7 +198,7 @@
     key: 'issueInfo',
     align: 'center',
     width: 120,
-      customRender: ({ record }) => {
+    customRender: ({record}) => {
       const total = record.totalCount === -1 ? '无限' : record.totalCount;
       return `${record.issuedCount}/${total}`;
     }
@@ -209,7 +209,7 @@
     key: 'limitPerUser',
     align: 'center',
     width: 100,
-      customRender: ({ text }) => text === -1 ? '无限制' : `${text}张/人`
+    customRender: ({text}) => text === -1 ? '无限制' : `${text}张/人`
   },
   {
     title: '状态',
@@ -233,7 +233,7 @@
     width: 120,
     sorter: true,
     ellipsis: true,
-      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    customRender: ({text}) => toDateString(text, 'yyyy-MM-dd')
   },
   {
     title: '操作',
@@ -243,27 +243,27 @@
     align: 'center',
     hideInSetting: true
   }
-  ]);
+]);
 
-  /* 搜索 */
-  const reload = (where?: ShopCouponParam) => {
+/* 搜索 */
+const reload = (where?: ShopCouponParam) => {
   selection.value = [];
-    tableRef?.value?.reload({ where: where });
-  };
+  tableRef?.value?.reload({where: where});
+};
 
-  /* 打开编辑弹窗 */
-  const openEdit = (row?: ShopCoupon) => {
+/* 打开编辑弹窗 */
+const openEdit = (row?: ShopCoupon) => {
   current.value = row ?? null;
   showEdit.value = true;
-  };
+};
 
-  /* 打开批量移动弹窗 */
-  const openMove = () => {
+/* 打开批量移动弹窗 */
+const openMove = () => {
   showMove.value = true;
-  };
+};
 
-  /* 删除单个 */
-  const remove = (row: ShopCoupon) => {
+/* 删除单个 */
+const remove = (row: ShopCoupon) => {
   const hide = message.loading('请求中..', 0);
   removeShopCoupon(row.id)
     .then((msg) => {
@@ -275,10 +275,10 @@
       hide();
       message.error(e.message);
     });
-  };
+};
 
-  /* 批量删除 */
-  const removeBatch = () => {
+/* 批量删除 */
+const removeBatch = () => {
   if (!selection.value.length) {
     message.error('请至少选择一条数据');
     return;
@@ -302,15 +302,15 @@
         });
     }
   });
-  };
+};
 
-  /* 查询 */
-  const query = () => {
+/* 查询 */
+const query = () => {
   loading.value = true;
-  };
+};
 
-  /* 自定义行属性 */
-  const customRow = (record: ShopCoupon) => {
+/* 自定义行属性 */
+const customRow = (record: ShopCoupon) => {
   return {
     // 行点击事件
     onClick: () => {
@@ -321,14 +321,14 @@
       openEdit(record);
     }
   };
-  };
-  query();
+};
+query();
 </script>
 
 <script lang="ts">
-  export default {
+export default {
   name: 'ShopCoupon'
-  };
+};
 </script>
 
 <style lang="less" scoped>