chore(frontend): introduce prettier + eslint and prune unused code

- Add Prettier 3 with prettier-plugin-organize-imports (sorts/removes unused imports)
- Add ESLint 10 flat config with typescript-eslint + eslint-plugin-vue + eslint-config-prettier
- Add root scripts: format, format:check, lint, lint:fix
- Reformat 257 files across admin-web, ops-web, desktop-client, packages
- Remove unused locals/exports flagged by --noUnusedLocals/--noUnusedParameters
- Fix duplicate localTabLabel key, surrogate-pair regex u-flag, NBSP literal in regex
- Skip server/ (Go) and apps/browser-extension/ (deprecated per ADR)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/admin-web/src/views/KolManageView.vue

@@ -1,183 +1,191 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
-import { message, Modal } from "ant-design-vue";
 import {
-  PlusOutlined,
-  EditOutlined,
-  PlayCircleOutlined,
-  PauseCircleOutlined,
-  CloudUploadOutlined,
-  InboxOutlined,
-  DeleteOutlined,
   CheckCircleOutlined,
+  CloudUploadOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  InboxOutlined,
+  PauseCircleOutlined,
+  PlayCircleOutlined,
+  PlusOutlined,
   StopOutlined,
-} from "@ant-design/icons-vue";
+} from '@ant-design/icons-vue'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { message, Modal } from 'ant-design-vue'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import KolPackageFormModal from "@/components/kol/KolPackageFormModal.vue";
-import KolPromptFormModal from "@/components/kol/KolPromptFormModal.vue";
-import KolPromptEditor from "@/components/kol/KolPromptEditor.vue";
-import { kolManageApi } from "@/lib/api";
-import { formatError } from "@/lib/errors";
-import type { CreateKolPackageRequest, CreateKolPromptRequest, KolPackageSummary } from "@geo/shared-types";
+import KolPackageFormModal from '@/components/kol/KolPackageFormModal.vue'
+import KolPromptEditor from '@/components/kol/KolPromptEditor.vue'
+import KolPromptFormModal from '@/components/kol/KolPromptFormModal.vue'
+import { kolManageApi } from '@/lib/api'
+import { formatError } from '@/lib/errors'
+import type {
+  CreateKolPackageRequest,
+  CreateKolPromptRequest,
+  KolPackageSummary,
+} from '@geo/shared-types'
 
-const { t } = useI18n();
-const queryClient = useQueryClient();
+const { t } = useI18n()
+const queryClient = useQueryClient()
 
-const selectedPackageId = ref<number | null>(null);
-const packageModalOpen = ref(false);
-const editingPackage = ref<KolPackageSummary | null>(null);
-const promptModalOpen = ref(false);
-const editingPromptId = ref<number | null>(null);
-const togglingPromptId = ref<number | null>(null);
-const deletingPromptId = ref<number | null>(null);
+const selectedPackageId = ref<number | null>(null)
+const packageModalOpen = ref(false)
+const editingPackage = ref<KolPackageSummary | null>(null)
+const promptModalOpen = ref(false)
+const editingPromptId = ref<number | null>(null)
+const togglingPromptId = ref<number | null>(null)
+const deletingPromptId = ref<number | null>(null)
 
 const { data: packages, isPending: packagesPending } = useQuery({
-  queryKey: ["kol", "packages"],
+  queryKey: ['kol', 'packages'],
   queryFn: () => kolManageApi.listPackages(),
-});
+})
 
 const { data: prompts, isPending: promptsPending } = useQuery({
-  queryKey: computed(() => ["kol", "packages", selectedPackageId.value, "prompts"]),
+  queryKey: computed(() => ['kol', 'packages', selectedPackageId.value, 'prompts']),
   queryFn: () => kolManageApi.listPrompts(selectedPackageId.value!),
   enabled: computed(() => !!selectedPackageId.value),
-});
+})
 
 const createPackageMutation = useMutation({
   mutationFn: (body: CreateKolPackageRequest) => kolManageApi.createPackage(body),
   onSuccess: () => {
-    message.success(t("kol.manage.messages.packageCreated"));
-    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+    message.success(t('kol.manage.messages.packageCreated'))
+    void queryClient.invalidateQueries({ queryKey: ['kol', 'packages'] })
   },
   onError: (error) => message.error(formatError(error)),
-});
+})
 
 const updatePackageMutation = useMutation({
   mutationFn: (data: { id: number; body: CreateKolPackageRequest }) =>
     kolManageApi.updatePackage(data.id, data.body),
   onSuccess: () => {
-    message.success(t("kol.manage.messages.packageUpdated"));
-    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+    message.success(t('kol.manage.messages.packageUpdated'))
+    void queryClient.invalidateQueries({ queryKey: ['kol', 'packages'] })
   },
   onError: (error) => message.error(formatError(error)),
-});
+})
 
 const publishPackageMutation = useMutation({
   mutationFn: (id: number) => kolManageApi.publishPackage(id),
   onSuccess: () => {
-    message.success(t("kol.manage.messages.packagePublished"));
-    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+    message.success(t('kol.manage.messages.packagePublished'))
+    void queryClient.invalidateQueries({ queryKey: ['kol', 'packages'] })
   },
   onError: (error) => message.error(formatError(error)),
-});
+})
 
 const archivePackageMutation = useMutation({
   mutationFn: (id: number) => kolManageApi.archivePackage(id),
   onSuccess: () => {
-    message.success(t("kol.manage.messages.packageArchived"));
-    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+    message.success(t('kol.manage.messages.packageArchived'))
+    void queryClient.invalidateQueries({ queryKey: ['kol', 'packages'] })
   },
   onError: (error) => message.error(formatError(error)),
-});
+})
 
 const selfSubscribePackageMutation = useMutation({
   mutationFn: (id: number) => kolManageApi.selfSubscribePackage(id),
   onSuccess: () => {
-    message.success("已订阅自己的订阅包");
-    invalidateKolPackageAccess();
+    message.success('已订阅自己的订阅包')
+    invalidateKolPackageAccess()
   },
   onError: (error) => message.error(formatError(error)),
-});
+})
 
 const cancelSelfSubscriptionMutation = useMutation({
   mutationFn: (id: number) => kolManageApi.cancelSelfSubscription(id),
   onSuccess: () => {
-    message.success("已取消订阅自己的订阅包");
-    invalidateKolPackageAccess();
+    message.success('已取消订阅自己的订阅包')
+    invalidateKolPackageAccess()
   },
   onError: (error) => message.error(formatError(error)),
-});
+})
 
 const deletePackageMutation = useMutation({
   mutationFn: (id: number) => kolManageApi.deletePackage(id),
   onSuccess: (_, id) => {
-    message.success(t("kol.manage.messages.packageDeleted"));
-    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+    message.success(t('kol.manage.messages.packageDeleted'))
+    void queryClient.invalidateQueries({ queryKey: ['kol', 'packages'] })
     if (selectedPackageId.value === id) {
-      selectedPackageId.value = null;
-      editingPromptId.value = null;
+      selectedPackageId.value = null
+      editingPromptId.value = null
     }
   },
   onError: (error) => message.error(formatError(error)),
-});
+})
 
 const createPromptMutation = useMutation({
   mutationFn: (body: CreateKolPromptRequest) =>
     kolManageApi.createPrompt(selectedPackageId.value!, body),
   onSuccess: () => {
-    message.success(t("kol.manage.messages.promptCreated"));
+    message.success(t('kol.manage.messages.promptCreated'))
     void queryClient.invalidateQueries({
-      queryKey: ["kol", "packages", selectedPackageId.value, "prompts"],
-    });
+      queryKey: ['kol', 'packages', selectedPackageId.value, 'prompts'],
+    })
   },
   onError: (error) => message.error(formatError(error)),
-});
+})
 
 const togglePromptStatusMutation = useMutation({
-  mutationFn: (data: { id: number; nextStatus: "active" | "archived" }) =>
-    data.nextStatus === "active"
+  mutationFn: (data: { id: number; nextStatus: 'active' | 'archived' }) =>
+    data.nextStatus === 'active'
       ? kolManageApi.activatePrompt(data.id)
       : kolManageApi.archivePrompt(data.id),
   onMutate: (variables) => {
-    togglingPromptId.value = variables.id;
+    togglingPromptId.value = variables.id
   },
   onSuccess: (_, variables) => {
     message.success(
-      t(variables.nextStatus === "active" ? "kol.manage.messages.promptActivated" : "kol.manage.messages.promptArchived")
-    );
-    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+      t(
+        variables.nextStatus === 'active'
+          ? 'kol.manage.messages.promptActivated'
+          : 'kol.manage.messages.promptArchived',
+      ),
+    )
+    void queryClient.invalidateQueries({ queryKey: ['kol', 'packages'] })
     void queryClient.invalidateQueries({
-      queryKey: ["kol", "packages", selectedPackageId.value, "prompts"],
-    });
-    void queryClient.invalidateQueries({ queryKey: ["kol", "prompt", variables.id] });
+      queryKey: ['kol', 'packages', selectedPackageId.value, 'prompts'],
+    })
+    void queryClient.invalidateQueries({ queryKey: ['kol', 'prompt', variables.id] })
   },
   onError: (error) => message.error(formatError(error)),
   onSettled: () => {
-    togglingPromptId.value = null;
+    togglingPromptId.value = null
   },
-});
+})
 
 const deletePromptMutation = useMutation({
   mutationFn: (id: number) => kolManageApi.deletePrompt(id),
   onMutate: (id) => {
-    deletingPromptId.value = id;
+    deletingPromptId.value = id
   },
   onSuccess: (_, id) => {
-    message.success(t("kol.manage.messages.promptDeleted"));
-    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+    message.success(t('kol.manage.messages.promptDeleted'))
+    void queryClient.invalidateQueries({ queryKey: ['kol', 'packages'] })
     void queryClient.invalidateQueries({
-      queryKey: ["kol", "packages", selectedPackageId.value, "prompts"],
-    });
-    void queryClient.invalidateQueries({ queryKey: ["kol", "prompt", id] });
+      queryKey: ['kol', 'packages', selectedPackageId.value, 'prompts'],
+    })
+    void queryClient.invalidateQueries({ queryKey: ['kol', 'prompt', id] })
     if (editingPromptId.value === id) {
-      editingPromptId.value = null;
+      editingPromptId.value = null
     }
   },
   onError: (error) => message.error(formatError(error)),
   onSettled: () => {
-    deletingPromptId.value = null;
+    deletingPromptId.value = null
   },
-});
+})
 
 function invalidateKolPackageAccess() {
-  void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
-  void queryClient.invalidateQueries({ queryKey: ["kol", "my-subscription-prompts"] });
-  void queryClient.invalidateQueries({ queryKey: ["workspace"] });
+  void queryClient.invalidateQueries({ queryKey: ['kol', 'packages'] })
+  void queryClient.invalidateQueries({ queryKey: ['kol', 'my-subscription-prompts'] })
+  void queryClient.invalidateQueries({ queryKey: ['workspace'] })
 }
 
 const packageInitialValue = computed<Partial<CreateKolPackageRequest> | undefined>(() => {
-  if (!editingPackage.value) return undefined;
+  if (!editingPackage.value) return undefined
   return {
     name: editingPackage.value.name,
     description: editingPackage.value.description ?? undefined,
@@ -185,78 +193,78 @@ const packageInitialValue = computed<Partial<CreateKolPackageRequest> | undefine
     tags: editingPackage.value.tags,
     price_note: editingPackage.value.price_note ?? undefined,
     cover_url: editingPackage.value.cover_url ?? undefined,
-  };
-});
+  }
+})
 
 function handleCreatePackage() {
-  editingPackage.value = null;
-  packageModalOpen.value = true;
+  editingPackage.value = null
+  packageModalOpen.value = true
 }
 
 function handleEditPackage(pkg: KolPackageSummary) {
-  editingPackage.value = pkg;
-  packageModalOpen.value = true;
+  editingPackage.value = pkg
+  packageModalOpen.value = true
 }
 
 function handlePackageSubmit(body: CreateKolPackageRequest) {
   if (editingPackage.value) {
-    updatePackageMutation.mutate({ id: editingPackage.value.id, body });
+    updatePackageMutation.mutate({ id: editingPackage.value.id, body })
   } else {
-    createPackageMutation.mutate(body);
+    createPackageMutation.mutate(body)
   }
 }
 
 function handleDeletePackage(id: number) {
   Modal.confirm({
-    title: t("common.delete") + "?",
-    content: t("kol.manage.confirmDeletePackage"),
+    title: t('common.delete') + '?',
+    content: t('kol.manage.confirmDeletePackage'),
     onOk: () => deletePackageMutation.mutate(id),
-  });
+  })
 }
 
 function handleSelectPackage(packageId: number) {
-  selectedPackageId.value = packageId;
-  editingPromptId.value = null;
+  selectedPackageId.value = packageId
+  editingPromptId.value = null
 }
 
 function handleOpenEditor(promptId: number) {
-  editingPromptId.value = promptId;
+  editingPromptId.value = promptId
 }
 
 function handleCloseEditor() {
-  editingPromptId.value = null;
+  editingPromptId.value = null
 }
 
 function handleDeletePrompt(id: number) {
   Modal.confirm({
-    title: t("common.delete") + "?",
-    content: t("kol.manage.confirmDeletePrompt"),
+    title: t('common.delete') + '?',
+    content: t('kol.manage.confirmDeletePrompt'),
     onOk: () => deletePromptMutation.mutate(id),
-  });
+  })
 }
 
 function promptStatusLabel(status: string) {
-  if (status === "active") return t("kol.manage.status.active");
-  if (status === "archived") return t("kol.manage.status.archived");
-  return t("kol.manage.status.draft");
+  if (status === 'active') return t('kol.manage.status.active')
+  if (status === 'archived') return t('kol.manage.status.archived')
+  return t('kol.manage.status.draft')
 }
 
 function packageStatusLabel(status: string) {
-  if (status === "published") return t("kol.manage.packageStatus.published");
-  if (status === "archived") return t("kol.manage.packageStatus.archived");
-  return t("kol.manage.packageStatus.draft");
+  if (status === 'published') return t('kol.manage.packageStatus.published')
+  if (status === 'archived') return t('kol.manage.packageStatus.archived')
+  return t('kol.manage.packageStatus.draft')
 }
 
 function isSelfSubscribed(pkg: KolPackageSummary) {
-  return pkg.self_subscription?.status === "active";
+  return pkg.self_subscription?.status === 'active'
 }
 
 function canSelfSubscribe(pkg: KolPackageSummary) {
-  return pkg.status === "published" && !isSelfSubscribed(pkg);
+  return pkg.status === 'published' && !isSelfSubscribed(pkg)
 }
 
 function canCancelSelfSubscription(pkg: KolPackageSummary) {
-  return pkg.self_subscription?.status === "active";
+  return pkg.self_subscription?.status === 'active'
 }
 </script>
 
@@ -265,8 +273,8 @@ function canCancelSelfSubscription(pkg: KolPackageSummary) {
     <section v-if="!editingPromptId" class="page-title-card">
       <div class="page-title-card__header">
         <div class="page-title-card__copy">
-          <h2>{{ t("kol.manage.title") }}</h2>
-          <p>{{ t("kol.manage.subtitle") }}</p>
+          <h2>{{ t('kol.manage.title') }}</h2>
+          <p>{{ t('kol.manage.subtitle') }}</p>
         </div>
       </div>
     </section>
@@ -277,172 +285,204 @@ function canCancelSelfSubscription(pkg: KolPackageSummary) {
       </div>
     </div>
     <div v-else class="manage-content">
-        <div class="package-column">
+      <div class="package-column">
+        <div class="column-header">
+          <h3>{{ t('kol.manage.packageTitle') }}</h3>
+          <a-button type="primary" size="small" @click="handleCreatePackage">
+            <template #icon><PlusOutlined /></template>
+            {{ t('kol.manage.createPackage') }}
+          </a-button>
+        </div>
+
+        <a-list class="package-list" :loading="packagesPending" :data-source="packages">
+          <template #renderItem="{ item }">
+            <a-list-item
+              :class="{ 'is-selected': selectedPackageId === item.id }"
+              @click="handleSelectPackage(item.id)"
+            >
+              <div class="package-item-content">
+                <div class="package-name">{{ item.name }}</div>
+                <div class="package-meta">
+                  <a-tag
+                    :color="
+                      item.status === 'published'
+                        ? 'green'
+                        : item.status === 'archived'
+                          ? 'orange'
+                          : 'default'
+                    "
+                    size="small"
+                  >
+                    {{ packageStatusLabel(item.status) }}
+                  </a-tag>
+                  <a-tag v-if="isSelfSubscribed(item)" color="blue" size="small">自己已订阅</a-tag>
+                  <span>{{ t('kol.marketplace.prompts', { count: item.prompt_count }) }}</span>
+                </div>
+              </div>
+              <template #actions>
+                <a-dropdown>
+                  <a class="ant-dropdown-link" @click.prevent>...</a>
+                  <template #overlay>
+                    <a-menu>
+                      <a-menu-item @click="handleEditPackage(item)">
+                        <EditOutlined />
+                        {{ t('common.edit') }}
+                      </a-menu-item>
+                      <a-menu-item
+                        v-if="item.status !== 'published'"
+                        @click="publishPackageMutation.mutate(item.id)"
+                      >
+                        <CloudUploadOutlined />
+                        {{ t('kol.manage.publishPackage') }}
+                      </a-menu-item>
+                      <a-menu-item
+                        v-if="item.status === 'published'"
+                        @click="archivePackageMutation.mutate(item.id)"
+                      >
+                        <InboxOutlined />
+                        {{ t('kol.manage.archivePackage') }}
+                      </a-menu-item>
+                      <a-menu-item
+                        v-if="canSelfSubscribe(item)"
+                        @click="selfSubscribePackageMutation.mutate(item.id)"
+                      >
+                        <CheckCircleOutlined />
+                        订阅自己
+                      </a-menu-item>
+                      <a-menu-item
+                        v-if="canCancelSelfSubscription(item)"
+                        danger
+                        @click="cancelSelfSubscriptionMutation.mutate(item.id)"
+                      >
+                        <StopOutlined />
+                        取消订阅
+                      </a-menu-item>
+                      <a-menu-divider />
+                      <a-menu-item danger @click="handleDeletePackage(item.id)">
+                        <DeleteOutlined />
+                        {{ t('common.delete') }}
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+              </template>
+            </a-list-item>
+          </template>
+        </a-list>
+      </div>
+
+      <!-- Right Column: Prompts -->
+      <div class="prompt-column">
+        <template v-if="selectedPackageId">
           <div class="column-header">
-            <h3>{{ t("kol.manage.packageTitle") }}</h3>
-            <a-button type="primary" size="small" @click="handleCreatePackage">
+            <h3>{{ t('kol.manage.promptTitle') }}</h3>
+            <a-button type="primary" size="small" @click="promptModalOpen = true">
               <template #icon><PlusOutlined /></template>
-              {{ t('kol.manage.createPackage') }}
+              {{ t('kol.manage.createPrompt') }}
             </a-button>
           </div>
 
-          <a-list
-            class="package-list"
-            :loading="packagesPending"
-            :data-source="packages"
+          <a-table
+            class="modern-table"
+            :columns="[
+              { title: t('common.title'), dataIndex: 'name', key: 'name' },
+              {
+                title: t('tracking.columns.platform'),
+                dataIndex: 'platform_hint',
+                key: 'platform_hint',
+              },
+              { title: t('common.status'), dataIndex: 'status', key: 'status' },
+              { title: t('common.actions'), key: 'actions', align: 'right', width: 156 },
+            ]"
+            :data-source="prompts"
+            :loading="promptsPending"
+            :pagination="false"
           >
-            <template #renderItem="{ item }">
-              <a-list-item
-                :class="{ 'is-selected': selectedPackageId === item.id }"
-                @click="handleSelectPackage(item.id)"
-              >
-                <div class="package-item-content">
-                  <div class="package-name">{{ item.name }}</div>
-                  <div class="package-meta">
-                    <a-tag
-                      :color="item.status === 'published' ? 'green' : item.status === 'archived' ? 'orange' : 'default'"
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'platform_hint'">
+                <a-tag color="blue">
+                  {{ record.platform_hint || t('kol.manage.platformHintDefault') }}
+                </a-tag>
+              </template>
+              <template v-else-if="column.key === 'status'">
+                <a-tag
+                  :color="
+                    record.status === 'active'
+                      ? 'green'
+                      : record.status === 'archived'
+                        ? 'orange'
+                        : 'default'
+                  "
+                >
+                  {{ promptStatusLabel(record.status) }}
+                </a-tag>
+              </template>
+              <template v-else-if="column.key === 'actions'">
+                <div class="table-actions-row">
+                  <a-tooltip :title="t('common.edit')">
+                    <a-button
+                      type="text"
+                      shape="circle"
                       size="small"
+                      class="action-btn action-edit"
+                      @click="handleOpenEditor(record.id)"
                     >
-                      {{ packageStatusLabel(item.status) }}
-                    </a-tag>
-                    <a-tag v-if="isSelfSubscribed(item)" color="blue" size="small">自己已订阅</a-tag>
-                    <span>{{ t("kol.marketplace.prompts", { count: item.prompt_count }) }}</span>
-                  </div>
-                </div>
-                <template #actions>
-                  <a-dropdown>
-                    <a class="ant-dropdown-link" @click.prevent>...</a>
-                    <template #overlay>
-                      <a-menu>
-                        <a-menu-item @click="handleEditPackage(item)">
-                          <EditOutlined /> {{ t('common.edit') }}
-                        </a-menu-item>
-                        <a-menu-item
-                          v-if="item.status !== 'published'"
-                          @click="publishPackageMutation.mutate(item.id)"
-                        >
-                          <CloudUploadOutlined /> {{ t('kol.manage.publishPackage') }}
-                        </a-menu-item>
-                        <a-menu-item
-                          v-if="item.status === 'published'"
-                          @click="archivePackageMutation.mutate(item.id)"
-                        >
-                          <InboxOutlined /> {{ t('kol.manage.archivePackage') }}
-                        </a-menu-item>
-                        <a-menu-item
-                          v-if="canSelfSubscribe(item)"
-                          @click="selfSubscribePackageMutation.mutate(item.id)"
-                        >
-                          <CheckCircleOutlined /> 订阅自己
-                        </a-menu-item>
-                        <a-menu-item
-                          v-if="canCancelSelfSubscription(item)"
-                          danger
-                          @click="cancelSelfSubscriptionMutation.mutate(item.id)"
-                        >
-                          <StopOutlined /> 取消订阅
-                        </a-menu-item>
-                        <a-menu-divider />
-                        <a-menu-item danger @click="handleDeletePackage(item.id)">
-                          <DeleteOutlined /> {{ t('common.delete') }}
-                        </a-menu-item>
-                      </a-menu>
-                    </template>
-                  </a-dropdown>
-                </template>
-              </a-list-item>
-            </template>
-          </a-list>
-        </div>
-
-        <!-- Right Column: Prompts -->
-        <div class="prompt-column">
-          <template v-if="selectedPackageId">
-            <div class="column-header">
-              <h3>{{ t("kol.manage.promptTitle") }}</h3>
-              <a-button type="primary" size="small" @click="promptModalOpen = true">
-                <template #icon><PlusOutlined /></template>
-                {{ t('kol.manage.createPrompt') }}
-              </a-button>
-            </div>
-
-            <a-table
-              class="modern-table"
-              :columns="[
-                { title: t('common.title'), dataIndex: 'name', key: 'name' },
-                { title: t('tracking.columns.platform'), dataIndex: 'platform_hint', key: 'platform_hint' },
-                { title: t('common.status'), dataIndex: 'status', key: 'status' },
-                { title: t('common.actions'), key: 'actions', align: 'right', width: 156 },
-              ]"
-              :data-source="prompts"
-              :loading="promptsPending"
-              :pagination="false"
-            >
-              <template #bodyCell="{ column, record }">
-                <template v-if="column.key === 'platform_hint'">
-                  <a-tag color="blue">{{ record.platform_hint || t("kol.manage.platformHintDefault") }}</a-tag>
-                </template>
-                <template v-else-if="column.key === 'status'">
-                  <a-tag :color="record.status === 'active' ? 'green' : record.status === 'archived' ? 'orange' : 'default'">
-                    {{ promptStatusLabel(record.status) }}
-                  </a-tag>
-                </template>
-                <template v-else-if="column.key === 'actions'">
-                  <div class="table-actions-row">
-                    <a-tooltip :title="t('common.edit')">
-                      <a-button
-                        type="text"
-                        shape="circle"
-                        size="small"
-                        class="action-btn action-edit"
-                        @click="handleOpenEditor(record.id)"
-                      >
-                        <EditOutlined />
-                      </a-button>
-                    </a-tooltip>
-                    <a-tooltip
-                      :title="record.status === 'active' ? t('kol.manage.archivePrompt') : t('kol.manage.activatePrompt')"
-                    >
-                      <a-button
-                        type="text"
-                        shape="circle"
-                        size="small"
-                        :class="[
-                          'action-btn',
-                          record.status === 'active' ? 'action-disable' : 'action-enable',
-                        ]"
-                        :loading="togglePromptStatusMutation.isPending.value && togglingPromptId === record.id"
-                        @click="togglePromptStatusMutation.mutate({
+                      <EditOutlined />
+                    </a-button>
+                  </a-tooltip>
+                  <a-tooltip
+                    :title="
+                      record.status === 'active'
+                        ? t('kol.manage.archivePrompt')
+                        : t('kol.manage.activatePrompt')
+                    "
+                  >
+                    <a-button
+                      type="text"
+                      shape="circle"
+                      size="small"
+                      :class="[
+                        'action-btn',
+                        record.status === 'active' ? 'action-disable' : 'action-enable',
+                      ]"
+                      :loading="
+                        togglePromptStatusMutation.isPending.value && togglingPromptId === record.id
+                      "
+                      @click="
+                        togglePromptStatusMutation.mutate({
                           id: record.id,
                           nextStatus: record.status === 'active' ? 'archived' : 'active',
-                        })"
-                      >
-                        <PauseCircleOutlined v-if="record.status === 'active'" />
-                        <PlayCircleOutlined v-else />
-                      </a-button>
-                    </a-tooltip>
-                    <a-tooltip :title="t('common.delete')">
-                      <a-button
-                        type="text"
-                        shape="circle"
-                        size="small"
-                        class="action-btn action-delete"
-                        :loading="deletePromptMutation.isPending.value && deletingPromptId === record.id"
-                        @click="handleDeletePrompt(record.id)"
-                      >
-                        <DeleteOutlined />
-                      </a-button>
-                    </a-tooltip>
-                  </div>
-                </template>
+                        })
+                      "
+                    >
+                      <PauseCircleOutlined v-if="record.status === 'active'" />
+                      <PlayCircleOutlined v-else />
+                    </a-button>
+                  </a-tooltip>
+                  <a-tooltip :title="t('common.delete')">
+                    <a-button
+                      type="text"
+                      shape="circle"
+                      size="small"
+                      class="action-btn action-delete"
+                      :loading="
+                        deletePromptMutation.isPending.value && deletingPromptId === record.id
+                      "
+                      @click="handleDeletePrompt(record.id)"
+                    >
+                      <DeleteOutlined />
+                    </a-button>
+                  </a-tooltip>
+                </div>
               </template>
-            </a-table>
-          </template>
-          <div v-else class="empty-prompts">
-            <a-empty :description="t('kol.manage.emptyPromptSelection')" />
-          </div>
+            </template>
+          </a-table>
+        </template>
+        <div v-else class="empty-prompts">
+          <a-empty :description="t('kol.manage.emptyPromptSelection')" />
         </div>
       </div>
+    </div>
 
     <KolPackageFormModal
       v-model:open="packageModalOpen"
@@ -489,7 +529,9 @@ function canCancelSelfSubscription(pkg: KolPackageSummary) {
   width: 340px;
   background: #ffffff;
   border-radius: 12px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.02),
+    0 4px 8px -2px rgba(0, 0, 0, 0.04);
   border: 1px solid #f0f2f5;
   display: flex;
   flex-direction: column;
@@ -499,7 +541,9 @@ function canCancelSelfSubscription(pkg: KolPackageSummary) {
   flex: 1;
   background: #ffffff;
   border-radius: 12px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.02),
+    0 4px 8px -2px rgba(0, 0, 0, 0.04);
   border: 1px solid #f0f2f5;
   display: flex;
   flex-direction: column;