refactor(shop): 优化店铺优惠券页面布局和代码结构- 移除 shop-coupon-container div，直接使用 a-page-header组件

- 调整按钮布局，使用 a-space 组件- 优化图标使用，去除多余空格
- 注释代码功能，提高可读性
- 修改 API_URL 环境变量，启用服务器 API

.env.development

@@ -1,5 +1,5 @@
 VITE_APP_NAME=后台管理(开发环境)
-VITE_API_URL=http://127.0.0.1:9200/api
+#VITE_API_URL=http://127.0.0.1:9200/api
 #VITE_SERVER_API_URL=http://127.0.0.1:8000/api
 
 

src/views/shop/shopCoupon/index.vue

@@ -1,23 +1,21 @@
 <template>
-  <div class="shop-coupon-container">
   <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
     <template #extra>
       <a-space>
         <a-button type="primary" @click="openEdit()">
           <template #icon>
-              <PlusOutlined />
+            <PlusOutlined/>
           </template>
           新增优惠券
         </a-button>
         <a-button @click="reload()">
           <template #icon>
-              <ReloadOutlined />
+            <ReloadOutlined/>
           </template>
           刷新
         </a-button>
       </a-space>
     </template>
-    </a-page-header>
 
     <a-card :bordered="false" :body-style="{ padding: '16px' }">
       <!-- 搜索区域 -->
@@ -69,13 +67,13 @@
             <a-space>
               <a-button type="primary" @click="handleSearch">
                 <template #icon>
-                  <SearchOutlined />
+                  <SearchOutlined/>
                 </template>
                 搜索
               </a-button>
               <a-button @click="handleReset">
                 <template #icon>
-                  <ClearOutlined />
+                  <ClearOutlined/>
                 </template>
                 重置
               </a-button>
@@ -201,14 +199,14 @@
               <a-tooltip title="编辑">
                 <a-button type="link" size="small" @click="openEdit(record)">
                   <template #icon>
-                    <EditOutlined />
+                    <EditOutlined/>
                   </template>
                 </a-button>
               </a-tooltip>
               <a-tooltip title="复制">
                 <a-button type="link" size="small" @click="copyRecord(record)">
                   <template #icon>
-                    <CopyOutlined />
+                    <CopyOutlined/>
                   </template>
                 </a-button>
               </a-tooltip>
@@ -219,7 +217,7 @@
                 <a-tooltip title="删除">
                   <a-button type="link" size="small" danger>
                     <template #icon>
-                      <DeleteOutlined />
+                      <DeleteOutlined/>
                     </template>
                   </a-button>
                 </a-tooltip>
@@ -231,14 +229,15 @@
     </a-card>
 
     <!-- 编辑弹窗 -->
-    <ShopCouponEdit v-model:visible="showEdit" :data="current" @done="reload" />
-  </div>
+    <ShopCouponEdit v-model:visible="showEdit" :data="current" @done="reload"/>
+
+  </a-page-header>
 </template>
 
 <script lang="ts" setup>
-  import { createVNode, ref, reactive, computed } from 'vue';
-  import { message, Modal } from 'ant-design-vue';
-  import {
+import {createVNode, ref, reactive, computed} from 'vue';
+import {message, Modal} from 'ant-design-vue';
+import {
   ExclamationCircleOutlined,
   PlusOutlined,
   ReloadOutlined,
@@ -247,40 +246,40 @@
   EditOutlined,
   DeleteOutlined,
   CopyOutlined
-  } from '@ant-design/icons-vue';
-  import type { EleProTable } from 'ele-admin-pro';
-  import { toDateString } from 'ele-admin-pro';
-  import type {
+} 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 { 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 {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 loading = ref(false);
+// 表格选中数据
+const selection = ref<ShopCoupon[]>([]);
+// 当前编辑数据
+const current = ref<ShopCoupon | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 加载状态
+const loading = ref(false);
 
-  // 搜索表单
-  const searchForm = reactive<ShopCouponParam>({
+// 搜索表单
+const searchForm = reactive<ShopCouponParam>({
   name: '',
   type: undefined,
   expireType: undefined,
   isExpire: undefined
-  });
+});
 
-  // 表格数据源
-  const datasource: DatasourceFunction = ({
+// 表格数据源
+const datasource: DatasourceFunction = ({
                                           page,
                                           limit,
                                           where,
@@ -300,10 +299,10 @@
   }
 
   return pageShopCoupon(params);
-  };
+};
 
-  // 行选择配置
-  const rowSelection = computed(() => ({
+// 行选择配置
+const rowSelection = computed(() => ({
   selectedRowKeys: selection.value.map(item => item.id),
   onChange: (selectedRowKeys: (string | number)[], selectedRows: ShopCoupon[]) => {
     selection.value = selectedRows;
@@ -334,10 +333,10 @@
       });
     }
   }
-  }));
+}));
 
-  // 表格列配置
-  const columns = ref<ColumnItem[]>([
+// 表格列配置
+const columns = ref<ColumnItem[]>([
   {
     title: 'ID',
     dataIndex: 'id',
@@ -396,7 +395,7 @@
     key: 'limitPerUser',
     align: 'center',
     width: 100,
-      customRender: ({ text }) => text === -1 ? '无限制' : text
+    customRender: ({text}) => text === -1 ? '无限制' : text
   },
   {
     title: '状态',
@@ -413,7 +412,7 @@
     width: 120,
     sorter: true,
     ellipsis: true,
-      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    customRender: ({text}) => toDateString(text, 'yyyy-MM-dd')
   },
   {
     title: '操作',
@@ -423,74 +422,74 @@
     align: 'center',
     hideInSetting: true
   }
-  ]);
+]);
 
-  // 工具方法
-  const getCouponTypeText = (type: number) => {
+// 工具方法
+const getCouponTypeText = (type: number) => {
   const typeMap = {
     10: '满减券',
     20: '折扣券',
     30: '免费券'
   };
   return typeMap[type as keyof typeof typeMap] || '未知';
-  };
+};
 
-  const getCouponTypeColor = (type: number) => {
+const getCouponTypeColor = (type: number) => {
   const colorMap = {
     10: 'red',
     20: 'orange',
     30: 'green'
   };
   return colorMap[type as keyof typeof colorMap] || 'default';
-  };
+};
 
-  const getApplyRangeText = (range: number) => {
+const getApplyRangeText = (range: number) => {
   const rangeMap = {
     10: '全部商品',
     20: '指定商品',
     30: '指定分类'
   };
   return rangeMap[range as keyof typeof rangeMap] || '未知';
-  };
+};
 
-  const getApplyRangeColor = (range: number) => {
+const getApplyRangeColor = (range: number) => {
   const colorMap = {
     10: 'blue',
     20: 'purple',
     30: 'cyan'
   };
   return colorMap[range as keyof typeof colorMap] || 'default';
-  };
+};
 
-  const formatDate = (dateStr: string) => {
+const formatDate = (dateStr: string) => {
   return dateStr ? toDateString(dateStr, 'yyyy-MM-dd') : '-';
-  };
+};
 
-  const getUsagePercent = (record: ShopCoupon) => {
+const getUsagePercent = (record: ShopCoupon) => {
   if (record.totalCount === -1) return 0;
   return Math.round(((record.issuedCount || 0) / record.totalCount) * 100);
-  };
+};
 
-  const getUsageColor = (record: ShopCoupon) => {
+const getUsageColor = (record: ShopCoupon) => {
   const percent = getUsagePercent(record);
   if (percent >= 90) return '#ff4d4f';
   if (percent >= 70) return '#faad14';
   return '#52c41a';
-  };
+};
 
-  /* 搜索 */
-  const reload = (where?: ShopCouponParam) => {
+/* 搜索 */
+const reload = (where?: ShopCouponParam) => {
   selection.value = [];
-    tableRef?.value?.reload({ where: where });
-  };
+  tableRef?.value?.reload({where: where});
+};
 
-  /* 处理搜索 */
-  const handleSearch = () => {
+/* 处理搜索 */
+const handleSearch = () => {
   reload();
-  };
+};
 
-  /* 重置搜索 */
-  const handleReset = () => {
+/* 重置搜索 */
+const handleReset = () => {
   Object.assign(searchForm, {
     name: '',
     type: undefined,
@@ -498,21 +497,21 @@
     isExpire: undefined
   });
   reload();
-  };
+};
 
-  /* 清除选择 */
-  const clearSelection = () => {
+/* 清除选择 */
+const clearSelection = () => {
   selection.value = [];
-  };
+};
 
-  /* 打开编辑弹窗 */
-  const openEdit = (row?: ShopCoupon) => {
+/* 打开编辑弹窗 */
+const openEdit = (row?: ShopCoupon) => {
   current.value = row ?? null;
   showEdit.value = true;
-  };
+};
 
-  /* 复制记录 */
-  const copyRecord = (record: ShopCoupon) => {
+/* 复制记录 */
+const copyRecord = (record: ShopCoupon) => {
   const copyData = {
     ...record,
     id: undefined,
@@ -524,10 +523,10 @@
   current.value = copyData;
   showEdit.value = true;
   message.success('已复制优惠券信息，请修改后保存');
-  };
+};
 
-  /* 删除单个 */
-  const remove = (row: ShopCoupon) => {
+/* 删除单个 */
+const remove = (row: ShopCoupon) => {
   if (row.issuedCount && row.issuedCount > 0) {
     message.warning('该优惠券已有用户领取，无法删除');
     return;
@@ -544,10 +543,10 @@
       hide();
       message.error(e.message);
     });
-  };
+};
 
-  /* 批量删除 */
-  const removeBatch = () => {
+/* 批量删除 */
+const removeBatch = () => {
   if (!selection.value.length) {
     message.error('请至少选择一条数据');
     return;
@@ -583,10 +582,10 @@
         });
     }
   });
-  };
+};
 
-  /* 自定义行属性 */
-  const customRow = (record: ShopCoupon) => {
+/* 自定义行属性 */
+const customRow = (record: ShopCoupon) => {
   return {
     // 行点击事件
     onClick: () => {
@@ -599,13 +598,13 @@
     // 行样式
     class: record.isExpire === 1 ? 'expired-row' : ''
   };
-  };
+};
 </script>
 
 <script lang="ts">
-  export default {
+export default {
   name: 'ShopCoupon'
-  };
+};
 </script>
 
 <style lang="less" scoped>