feat: 优化产品激活状态显示，使用标签组件展示状态，并添加启用/停用操作确认对话框

src/views/product/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { h, useTemplateRef } from 'vue';
-import { useDialog, useMessage } from 'naive-ui';
+import { NTag, useDialog, useMessage } from 'naive-ui';
 import dayjs from 'dayjs';
 import { client, safeClient } from '@/service/api';
 import type { TableBaseColumns, TableFetchData, TableInst } from '@/components/table';
@@ -79,8 +79,8 @@ const columns: TableBaseColumns = [
   {
     key: 'isActive',
     title: '是否激活',
-    render: (row: any) => {
+    render(row) {
-      return row.isActive ? '是' : '否';
+      return row.isActive ? h(NTag, { type: 'primary' }, '是') : h(NTag, { type: 'error' }, '否');
     }
   },
   {
@@ -97,7 +97,7 @@ const columns: TableBaseColumns = [
   {
     key: 'operations',
     title: '操作',
-    width: 120,
+    width: 200,
     fixed: 'right',
     operations: row => [
       {
@@ -106,6 +106,25 @@ const columns: TableBaseColumns = [
         onClick() {
           handleEdit(row);
         }
+      },
+      {
+        contentText: row.isActive ? '停用' : '启用',
+        size: 'small',
+        type: row.isActive ? 'error' : 'success',
+        ghost: true,
+        onClick() {
+          dialog.warning({
+            title: `确认${row.isActive ? '停用' : '启用'}该产品吗？`,
+            content: `${row.isActive ? '停用' : '启用'}后用户将无法订阅该产品`,
+            positiveText: '确认',
+            negativeText: '取消',
+            onPositiveClick: async () => {
+              await safeClient(() => client.api.admin.subscription.products({ productId: row.id as string }).delete());
+              message.success('操作成功');
+              tableInst.value?.reload();
+            }
+          });
+        }
       }
     ]
   }