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>
This commit is contained in:
@@ -1,104 +1,104 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||
import { message } from "ant-design-vue";
|
||||
import { kolMarketplaceApi, resolveApiURL } from '@/lib/api'
|
||||
import { formatError } from '@/lib/errors'
|
||||
import {
|
||||
LeftOutlined,
|
||||
UserOutlined,
|
||||
TagOutlined,
|
||||
ThunderboltOutlined,
|
||||
TeamOutlined,
|
||||
CheckCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import { kolMarketplaceApi, resolveApiURL } from "@/lib/api";
|
||||
import { formatError } from "@/lib/errors";
|
||||
LeftOutlined,
|
||||
TagOutlined,
|
||||
TeamOutlined,
|
||||
ThunderboltOutlined,
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const queryClient = useQueryClient();
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const packageId = computed(() => Number(route.params.id));
|
||||
const packageId = computed(() => Number(route.params.id))
|
||||
|
||||
const packageQuery = useQuery({
|
||||
queryKey: computed(() => ["kol", "package", packageId.value]),
|
||||
queryKey: computed(() => ['kol', 'package', packageId.value]),
|
||||
queryFn: () => kolMarketplaceApi.detail(packageId.value),
|
||||
enabled: computed(() => !isNaN(packageId.value)),
|
||||
});
|
||||
})
|
||||
|
||||
const mySubscriptionPromptsQuery = useQuery({
|
||||
queryKey: ["kol", "my-subscription-prompts"],
|
||||
queryKey: ['kol', 'my-subscription-prompts'],
|
||||
queryFn: () => kolMarketplaceApi.mySubscriptionPrompts(),
|
||||
});
|
||||
})
|
||||
|
||||
const subscribeMutation = useMutation({
|
||||
mutationFn: (id: number) => kolMarketplaceApi.subscribe(id),
|
||||
onSuccess: () => {
|
||||
message.success(t("common.submit"));
|
||||
void queryClient.invalidateQueries({ queryKey: ["kol", "package", packageId.value] });
|
||||
message.success(t('common.submit'))
|
||||
void queryClient.invalidateQueries({ queryKey: ['kol', 'package', packageId.value] })
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(formatError(error) || t("common.noData"));
|
||||
message.error(formatError(error) || t('common.noData'))
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const pkg = computed(() => packageQuery.data.value);
|
||||
const resolvedCoverUrl = computed(() => resolveApiURL(pkg.value?.cover_url));
|
||||
const subscription = computed(() => pkg.value?.subscription);
|
||||
const isOwnPackage = computed(() => Boolean(pkg.value?.owned_by_current_tenant));
|
||||
const pkg = computed(() => packageQuery.data.value)
|
||||
const resolvedCoverUrl = computed(() => resolveApiURL(pkg.value?.cover_url))
|
||||
const subscription = computed(() => pkg.value?.subscription)
|
||||
const isOwnPackage = computed(() => Boolean(pkg.value?.owned_by_current_tenant))
|
||||
|
||||
const subscriptionStatusMeta = computed(() => {
|
||||
if (!subscription.value) return null;
|
||||
if (!subscription.value) return null
|
||||
switch (subscription.value.status) {
|
||||
case "pending":
|
||||
return { label: t("kol.package.pending"), color: "orange", icon: ClockCircleOutlined };
|
||||
case "active":
|
||||
return { label: t("kol.package.subscribed"), color: "success", icon: CheckCircleOutlined };
|
||||
case "expired":
|
||||
return { label: t("kol.package.expired"), color: "error", icon: ExclamationCircleOutlined };
|
||||
case "revoked":
|
||||
return { label: t("kol.package.revoked"), color: "default", icon: ExclamationCircleOutlined };
|
||||
case 'pending':
|
||||
return { label: t('kol.package.pending'), color: 'orange', icon: ClockCircleOutlined }
|
||||
case 'active':
|
||||
return { label: t('kol.package.subscribed'), color: 'success', icon: CheckCircleOutlined }
|
||||
case 'expired':
|
||||
return { label: t('kol.package.expired'), color: 'error', icon: ExclamationCircleOutlined }
|
||||
case 'revoked':
|
||||
return { label: t('kol.package.revoked'), color: 'default', icon: ExclamationCircleOutlined }
|
||||
default:
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
function handleSubscribe() {
|
||||
if (pkg.value && !isOwnPackage.value) {
|
||||
subscribeMutation.mutate(pkg.value.id);
|
||||
subscribeMutation.mutate(pkg.value.id)
|
||||
}
|
||||
}
|
||||
|
||||
function handleGenerate(promptId: number) {
|
||||
const subPrompt = mySubscriptionPromptsQuery.data.value?.find(
|
||||
(sp) => sp.prompt_id === promptId && sp.package_id === packageId.value
|
||||
);
|
||||
(sp) => sp.prompt_id === promptId && sp.package_id === packageId.value,
|
||||
)
|
||||
if (subPrompt) {
|
||||
void router.push({
|
||||
name: "kol-generate",
|
||||
name: 'kol-generate',
|
||||
params: { subscriptionPromptId: String(subPrompt.id) },
|
||||
query: { source: "templates" },
|
||||
});
|
||||
query: { source: 'templates' },
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
void router.push({ name: "kol-marketplace" });
|
||||
void router.push({ name: 'kol-marketplace' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kol-package-detail">
|
||||
<div class="detail-header">
|
||||
<button type="button" class="back-btn" @click="goBack" :aria-label="t('common.back')">
|
||||
<button type="button" class="back-btn" :aria-label="t('common.back')" @click="goBack">
|
||||
<span class="back-btn__icon">
|
||||
<LeftOutlined />
|
||||
</span>
|
||||
<span class="back-btn__text">{{ t("common.back") }}</span>
|
||||
<span class="back-btn__text">{{ t('common.back') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -111,8 +111,8 @@ function goBack() {
|
||||
<a-col :xs="24" :lg="16">
|
||||
<section class="main-card">
|
||||
<div
|
||||
class="package-cover"
|
||||
v-if="resolvedCoverUrl"
|
||||
class="package-cover"
|
||||
:style="{ backgroundImage: `url(${resolvedCoverUrl})` }"
|
||||
>
|
||||
<img :src="resolvedCoverUrl" alt="cover" />
|
||||
@@ -120,7 +120,7 @@ function goBack() {
|
||||
<div class="package-info">
|
||||
<div class="package-title-row">
|
||||
<h1 class="package-name">{{ pkg.name }}</h1>
|
||||
<a-tag color="blue" v-if="pkg.industry">
|
||||
<a-tag v-if="pkg.industry" color="blue">
|
||||
<template #icon><TagOutlined /></template>
|
||||
{{ pkg.industry }}
|
||||
</a-tag>
|
||||
@@ -131,18 +131,18 @@ function goBack() {
|
||||
</a-avatar>
|
||||
<div class="kol-meta">
|
||||
<span class="kol-display-name">{{ pkg.kol_display_name }}</span>
|
||||
<p class="kol-bio" v-if="pkg.kol_bio">{{ pkg.kol_bio }}</p>
|
||||
<p v-if="pkg.kol_bio" class="kol-bio">{{ pkg.kol_bio }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-row" v-if="pkg.tags?.length">
|
||||
<div v-if="pkg.tags?.length" class="tags-row">
|
||||
<a-tag v-for="tag in pkg.tags" :key="tag">{{ tag }}</a-tag>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="description-section">
|
||||
<h3>{{ t("common.description") }}</h3>
|
||||
<p class="description-text">{{ pkg.description || t("common.noData") }}</p>
|
||||
<h3>{{ t('common.description') }}</h3>
|
||||
<p class="description-text">{{ pkg.description || t('common.noData') }}</p>
|
||||
</div>
|
||||
<div class="price-section" v-if="pkg.price_note">
|
||||
<div v-if="pkg.price_note" class="price-section">
|
||||
<h3>费用说明</h3>
|
||||
<p class="price-text">{{ pkg.price_note }}</p>
|
||||
</div>
|
||||
@@ -152,13 +152,15 @@ function goBack() {
|
||||
<section class="prompts-section">
|
||||
<h3 class="section-title">
|
||||
<ThunderboltOutlined />
|
||||
{{ t("kol.marketplace.prompts", { count: pkg.prompts?.length || 0 }) }}
|
||||
{{ t('kol.marketplace.prompts', { count: pkg.prompts?.length || 0 }) }}
|
||||
</h3>
|
||||
<div class="prompts-list">
|
||||
<div v-for="prompt in pkg.prompts" :key="prompt.id" class="prompt-item">
|
||||
<div class="prompt-info">
|
||||
<span class="prompt-name">{{ prompt.name }}</span>
|
||||
<a-tag v-if="prompt.platform_hint" color="cyan" size="small">{{ prompt.platform_hint }}</a-tag>
|
||||
<a-tag v-if="prompt.platform_hint" color="cyan" size="small">
|
||||
{{ prompt.platform_hint }}
|
||||
</a-tag>
|
||||
</div>
|
||||
<div class="prompt-action">
|
||||
<a-tooltip :title="subscription?.status !== 'active' ? '订阅后可用' : ''">
|
||||
@@ -168,7 +170,7 @@ function goBack() {
|
||||
:disabled="subscription?.status !== 'active'"
|
||||
@click="handleGenerate(prompt.id)"
|
||||
>
|
||||
{{ t("kol.generate.title") }}
|
||||
{{ t('kol.generate.title') }}
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
@@ -185,7 +187,9 @@ function goBack() {
|
||||
<h3 class="card-title">订阅状态</h3>
|
||||
<div v-if="!subscription && isOwnPackage" class="not-subscribed">
|
||||
<p class="status-text">这是你自己发布的订阅包,不能在模版市场申请订阅。</p>
|
||||
<p class="owner-hint">如需自己使用,请回到 KOL 工作台,在订阅包菜单中点击「订阅自己」。</p>
|
||||
<p class="owner-hint">
|
||||
如需自己使用,请回到 KOL 工作台,在订阅包菜单中点击「订阅自己」。
|
||||
</p>
|
||||
</div>
|
||||
<div v-else-if="!subscription" class="not-subscribed">
|
||||
<p class="status-text">您尚未订阅该 KOL 提示词包。</p>
|
||||
@@ -196,7 +200,7 @@ function goBack() {
|
||||
:loading="subscribeMutation.isPending.value"
|
||||
@click="handleSubscribe"
|
||||
>
|
||||
{{ t("kol.package.subscribe") }}
|
||||
{{ t('kol.package.subscribe') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<div v-else class="subscription-info">
|
||||
@@ -206,14 +210,17 @@ function goBack() {
|
||||
{{ subscriptionStatusMeta?.label }}
|
||||
</a-tag>
|
||||
</div>
|
||||
<div class="subscription-dates" v-if="subscription.status === 'active'">
|
||||
<div v-if="subscription.status === 'active'" class="subscription-dates">
|
||||
<div class="date-item">
|
||||
<span class="label">到期时间:</span>
|
||||
<span class="value">{{ subscription.end_at || '永不过期' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a-button
|
||||
v-if="!isOwnPackage && (subscription.status === 'expired' || subscription.status === 'revoked')"
|
||||
v-if="
|
||||
!isOwnPackage &&
|
||||
(subscription.status === 'expired' || subscription.status === 'revoked')
|
||||
"
|
||||
type="primary"
|
||||
block
|
||||
size="large"
|
||||
@@ -226,11 +233,17 @@ function goBack() {
|
||||
<a-divider />
|
||||
<div class="package-stats">
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><TeamOutlined /> 已有订阅</span>
|
||||
<span class="stat-label">
|
||||
<TeamOutlined />
|
||||
已有订阅
|
||||
</span>
|
||||
<span class="stat-value">{{ pkg.subscriber_count }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><ThunderboltOutlined /> 包含 Prompt</span>
|
||||
<span class="stat-label">
|
||||
<ThunderboltOutlined />
|
||||
包含 Prompt
|
||||
</span>
|
||||
<span class="stat-value">{{ pkg.prompt_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -326,7 +339,7 @@ function goBack() {
|
||||
}
|
||||
|
||||
.package-cover::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -24px;
|
||||
z-index: 0;
|
||||
@@ -337,7 +350,7 @@ function goBack() {
|
||||
}
|
||||
|
||||
.package-cover::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
|
||||
Reference in New Issue
Block a user