feat(kol): expand variable schema and polish KOL UI
- Add length/range limits to KOL variable definitions: max_length and default_value for input/textarea, min_value/max_value/default_number for number. Backend validates and normalizes; frontend renders limit inputs in KolVariableConfig and applies limits at runtime in KolDynamicForm. - Sort workspace cards by most recent prompt/package update, falling back to granted_at. Adds updated_at to KolWorkspaceCard. - Polish TemplatesView, WorkspaceView, and KOL package management UI; route create/update/publish/archive/delete toasts through i18n and expand package form copy and status labels. - Remove stale KnowledgeView.vue.patch. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,10 +0,0 @@
|
||||
--- /Users/liangxu/Documents/test/geo-rankly/apps/admin-web/src/views/KnowledgeView.vue
|
||||
+++ /Users/liangxu/Documents/test/geo-rankly/apps/admin-web/src/views/KnowledgeView.vue
|
||||
@@ -37,6 +37,5 @@
|
||||
const itemForm = reactive({
|
||||
- group_id: undefined as number | undefined,
|
||||
- name: "",
|
||||
+ group_ids: [] as number[],
|
||||
url: "",
|
||||
content: "",
|
||||
});
|
||||
@@ -9,6 +9,11 @@ import { kolGenerateApi } from "@/lib/api";
|
||||
import KolDynamicForm from "@/components/kol/KolDynamicForm.vue";
|
||||
import KnowledgeGroupSelect from "@/components/KnowledgeGroupSelect.vue";
|
||||
import { parseKolCardConfig } from "@/lib/kol-card-config";
|
||||
import {
|
||||
getKolVariableInitialValue,
|
||||
isKolVariableValueEmpty,
|
||||
normalizeKolVariableDefinition,
|
||||
} from "@/lib/kol-placeholders";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -42,7 +47,7 @@ watch(
|
||||
if (schema?.schema_json?.variables) {
|
||||
const newValues: Record<string, any> = {};
|
||||
schema.schema_json.variables.forEach((v) => {
|
||||
newValues[fieldKey(v.key, v.id)] = v.type === "checkbox" ? [] : undefined;
|
||||
newValues[fieldKey(v.key, v.id)] = getKolVariableInitialValue(normalizeKolVariableDefinition(v));
|
||||
});
|
||||
values.value = newValues;
|
||||
enableWebSearch.value = false;
|
||||
@@ -78,7 +83,8 @@ function handleSubmit() {
|
||||
|
||||
const missingLabels: string[] = [];
|
||||
schema.schema_json.variables.forEach((v) => {
|
||||
if (v.required && !values.value[fieldKey(v.key, v.id)]) {
|
||||
const normalizedVariable = normalizeKolVariableDefinition(v);
|
||||
if (normalizedVariable.required && isKolVariableValueEmpty(normalizedVariable, values.value[fieldKey(v.key, v.id)])) {
|
||||
missingLabels.push(v.label);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -45,8 +45,8 @@ const { data: prompts, isPending: promptsPending } = useQuery({
|
||||
const createPackageMutation = useMutation({
|
||||
mutationFn: (body: CreateKolPackageRequest) => kolManageApi.createPackage(body),
|
||||
onSuccess: () => {
|
||||
message.success(t("common.create") + "成功");
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
|
||||
message.success(t("kol.manage.messages.packageCreated"));
|
||||
void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
|
||||
},
|
||||
onError: (error) => message.error(formatError(error)),
|
||||
});
|
||||
@@ -55,8 +55,8 @@ const updatePackageMutation = useMutation({
|
||||
mutationFn: (data: { id: number; body: CreateKolPackageRequest }) =>
|
||||
kolManageApi.updatePackage(data.id, data.body),
|
||||
onSuccess: () => {
|
||||
message.success(t("common.edit") + "成功");
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
|
||||
message.success(t("kol.manage.messages.packageUpdated"));
|
||||
void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
|
||||
},
|
||||
onError: (error) => message.error(formatError(error)),
|
||||
});
|
||||
@@ -64,37 +64,40 @@ const updatePackageMutation = useMutation({
|
||||
const publishPackageMutation = useMutation({
|
||||
mutationFn: (id: number) => kolManageApi.publishPackage(id),
|
||||
onSuccess: () => {
|
||||
message.success(t("kol.manage.publishPackage") + "成功");
|
||||
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.archivePackage") + "成功");
|
||||
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 deletePackageMutation = useMutation({
|
||||
mutationFn: (id: number) => kolManageApi.deletePackage(id),
|
||||
onSuccess: (_, id) => {
|
||||
message.success(t("common.delete") + "成功");
|
||||
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;
|
||||
}
|
||||
},
|
||||
onError: (error) => message.error(formatError(error)),
|
||||
});
|
||||
|
||||
const createPromptMutation = useMutation({
|
||||
mutationFn: (body: CreateKolPromptRequest) =>
|
||||
kolManageApi.createPrompt(selectedPackageId.value!, body),
|
||||
onSuccess: () => {
|
||||
message.success(t("kol.manage.createPrompt") + "成功");
|
||||
queryClient.invalidateQueries({
|
||||
message.success(t("kol.manage.messages.promptCreated"));
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: ["kol", "packages", selectedPackageId.value, "prompts"],
|
||||
});
|
||||
},
|
||||
@@ -111,7 +114,7 @@ const togglePromptStatusMutation = useMutation({
|
||||
},
|
||||
onSuccess: (_, variables) => {
|
||||
message.success(
|
||||
t(variables.nextStatus === "active" ? "kol.manage.activatePrompt" : "kol.manage.archivePrompt") + "成功"
|
||||
t(variables.nextStatus === "active" ? "kol.manage.messages.promptActivated" : "kol.manage.messages.promptArchived")
|
||||
);
|
||||
void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
|
||||
void queryClient.invalidateQueries({
|
||||
@@ -131,7 +134,7 @@ const deletePromptMutation = useMutation({
|
||||
deletingPromptId.value = id;
|
||||
},
|
||||
onSuccess: (_, id) => {
|
||||
message.success(t("common.delete") + "成功");
|
||||
message.success(t("kol.manage.messages.promptDeleted"));
|
||||
void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: ["kol", "packages", selectedPackageId.value, "prompts"],
|
||||
@@ -180,7 +183,7 @@ function handlePackageSubmit(body: CreateKolPackageRequest) {
|
||||
function handleDeletePackage(id: number) {
|
||||
Modal.confirm({
|
||||
title: t("common.delete") + "?",
|
||||
content: "确定要删除这个订阅包吗？",
|
||||
content: t("kol.manage.confirmDeletePackage"),
|
||||
onOk: () => deletePackageMutation.mutate(id),
|
||||
});
|
||||
}
|
||||
@@ -201,7 +204,7 @@ function handleCloseEditor() {
|
||||
function handleDeletePrompt(id: number) {
|
||||
Modal.confirm({
|
||||
title: t("common.delete") + "?",
|
||||
content: "确定要删除这个提示词吗？",
|
||||
content: t("kol.manage.confirmDeletePrompt"),
|
||||
onOk: () => deletePromptMutation.mutate(id),
|
||||
});
|
||||
}
|
||||
@@ -211,6 +214,12 @@ function promptStatusLabel(status: string) {
|
||||
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");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -223,7 +232,7 @@ function promptStatusLabel(status: string) {
|
||||
<div v-else class="manage-content">
|
||||
<div class="package-column">
|
||||
<div class="column-header">
|
||||
<h3>订阅包</h3>
|
||||
<h3>{{ t("kol.manage.packageTitle") }}</h3>
|
||||
<a-button type="primary" size="small" @click="handleCreatePackage">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
{{ t('kol.manage.createPackage') }}
|
||||
@@ -234,7 +243,6 @@ function promptStatusLabel(status: string) {
|
||||
class="package-list"
|
||||
:loading="packagesPending"
|
||||
:data-source="packages"
|
||||
size="small"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item
|
||||
@@ -244,10 +252,13 @@ function promptStatusLabel(status: string) {
|
||||
<div class="package-item-content">
|
||||
<div class="package-name">{{ item.name }}</div>
|
||||
<div class="package-meta">
|
||||
<a-tag :color="item.status === 'published' ? 'green' : 'orange'" size="small">
|
||||
{{ item.status }}
|
||||
<a-tag
|
||||
:color="item.status === 'published' ? 'green' : item.status === 'archived' ? 'orange' : 'default'"
|
||||
size="small"
|
||||
>
|
||||
{{ packageStatusLabel(item.status) }}
|
||||
</a-tag>
|
||||
<span>{{ item.prompt_count }} 提示词</span>
|
||||
<span>{{ t("kol.marketplace.prompts", { count: item.prompt_count }) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<template #actions>
|
||||
@@ -287,7 +298,7 @@ function promptStatusLabel(status: string) {
|
||||
<div class="prompt-column">
|
||||
<template v-if="selectedPackageId">
|
||||
<div class="column-header">
|
||||
<h3>提示词</h3>
|
||||
<h3>{{ t("kol.manage.promptTitle") }}</h3>
|
||||
<a-button type="primary" size="small" @click="promptModalOpen = true">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
{{ t('kol.manage.createPrompt') }}
|
||||
@@ -295,6 +306,7 @@ function promptStatusLabel(status: string) {
|
||||
</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' },
|
||||
@@ -303,12 +315,11 @@ function promptStatusLabel(status: string) {
|
||||
]"
|
||||
:data-source="prompts"
|
||||
:loading="promptsPending"
|
||||
size="small"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'platform_hint'">
|
||||
<a-tag color="blue">{{ record.platform_hint || '通用' }}</a-tag>
|
||||
<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'">
|
||||
@@ -367,7 +378,7 @@ function promptStatusLabel(status: string) {
|
||||
</a-table>
|
||||
</template>
|
||||
<div v-else class="empty-prompts">
|
||||
<a-empty description="请选择左侧订阅包以查看提示词" />
|
||||
<a-empty :description="t('kol.manage.emptyPromptSelection')" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -390,7 +401,7 @@ function promptStatusLabel(status: string) {
|
||||
.kol-manage-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 64px);
|
||||
height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
.fullscreen-editor {
|
||||
@@ -398,63 +409,74 @@ function promptStatusLabel(status: string) {
|
||||
min-height: 0;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.manage-content--editor {
|
||||
padding: 16px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.manage-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.package-column {
|
||||
width: 320px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
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);
|
||||
border: 1px solid #f0f2f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.prompt-column {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
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);
|
||||
border: 1px solid #f0f2f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
padding: 16px;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.column-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.package-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.package-item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.package-name {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.package-meta {
|
||||
@@ -462,20 +484,29 @@ function promptStatusLabel(status: string) {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.ant-list-item.is-selected {
|
||||
background-color: #e6f7ff;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.ant-list-item {
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.ant-list-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ant-list-item:hover {
|
||||
background-color: #fafafa;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.ant-list-item.is-selected {
|
||||
background-color: #f0f7ff;
|
||||
border-color: #bae0ff;
|
||||
}
|
||||
|
||||
.empty-prompts {
|
||||
@@ -490,29 +521,61 @@ function promptStatusLabel(status: string) {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Modern Enterprise Table Styles */
|
||||
:deep(.modern-table) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
:deep(.modern-table .ant-table-thead > tr > th) {
|
||||
background-color: #f9fafb !important;
|
||||
color: #4b5563;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
:deep(.modern-table .ant-table-tbody > tr > td) {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
:deep(.modern-table .ant-table-tbody > tr:last-child > td) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
:deep(.modern-table .ant-table-tbody > tr:hover > td) {
|
||||
background-color: #f9fafb !important;
|
||||
}
|
||||
|
||||
.table-actions-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
color: #6b7280;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-edit.ant-btn:hover:not(:disabled) {
|
||||
color: #52c41a;
|
||||
background: #f6ffed;
|
||||
color: #059669;
|
||||
background: #d1fae5;
|
||||
}
|
||||
|
||||
.action-enable.ant-btn:hover:not(:disabled) {
|
||||
color: #1677ff;
|
||||
background: #e6f4ff;
|
||||
color: #2563eb;
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.action-disable.ant-btn:hover:not(:disabled) {
|
||||
color: #fa8c16;
|
||||
background: #fff7e6;
|
||||
color: #d97706;
|
||||
background: #fef3c7;
|
||||
}
|
||||
|
||||
.action-delete.ant-btn:hover:not(:disabled) {
|
||||
color: #ff4d4f;
|
||||
background: #fff1f0;
|
||||
color: #dc2626;
|
||||
background: #fee2e2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
ClockCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import { kolMarketplaceApi } from "@/lib/api";
|
||||
import { kolMarketplaceApi, resolveApiURL } from "@/lib/api";
|
||||
import { formatError } from "@/lib/errors";
|
||||
|
||||
const route = useRoute();
|
||||
@@ -47,6 +47,7 @@ const subscribeMutation = useMutation({
|
||||
});
|
||||
|
||||
const pkg = computed(() => packageQuery.data.value);
|
||||
const resolvedCoverUrl = computed(() => resolveApiURL(pkg.value?.cover_url));
|
||||
const subscription = computed(() => pkg.value?.subscription);
|
||||
|
||||
const subscriptionStatusMeta = computed(() => {
|
||||
@@ -102,8 +103,8 @@ function goBack() {
|
||||
<a-row :gutter="24">
|
||||
<a-col :xs="24" :lg="16">
|
||||
<section class="main-card">
|
||||
<div class="package-cover" v-if="pkg.cover_url">
|
||||
<img :src="pkg.cover_url" alt="cover" />
|
||||
<div class="package-cover" v-if="resolvedCoverUrl">
|
||||
<img :src="resolvedCoverUrl" alt="cover" />
|
||||
</div>
|
||||
<div class="package-info">
|
||||
<div class="package-title-row">
|
||||
|
||||
@@ -678,22 +678,27 @@ function refreshRecords(): void {
|
||||
class="templates-view__kol-cover"
|
||||
:style="card.package_cover ? { backgroundImage: `url(${card.package_cover})` } : {}"
|
||||
>
|
||||
<div v-if="!card.package_cover" class="templates-view__kol-cover-fallback"></div>
|
||||
<div v-if="!card.package_cover" class="templates-view__kol-cover-fallback">
|
||||
<AppstoreOutlined class="templates-view__fallback-icon" />
|
||||
</div>
|
||||
<div class="templates-view__kol-hover-overlay">
|
||||
<ArrowRightOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div class="templates-view__kol-content">
|
||||
<div class="templates-view__kol-header">
|
||||
<h4 class="templates-view__kol-title">{{ card.package_name }}</h4>
|
||||
<div class="templates-view__kol-subtitle">
|
||||
<span>{{ card.prompt_name }}</span>
|
||||
<a-tag v-if="card.platform_hint" color="blue" size="small">{{ card.platform_hint }}</a-tag>
|
||||
</div>
|
||||
<h4 class="templates-view__kol-title" :title="card.prompt_name">{{ card.prompt_name }}</h4>
|
||||
<div class="templates-view__kol-meta-row">
|
||||
<span class="templates-view__kol-prompt" :title="card.package_name">{{ card.package_name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="templates-view__kol-footer">
|
||||
<span class="templates-view__kol-author">{{ card.kol_display_name }}</span>
|
||||
<span class="templates-view__kol-action">
|
||||
{{ t("kol.generate.title") }}
|
||||
<ArrowRightOutlined />
|
||||
</span>
|
||||
<div class="templates-view__kol-author">
|
||||
<div class="templates-view__author-avatar">{{ card.kol_display_name?.[0]?.toUpperCase() || 'K' }}</div>
|
||||
<span>{{ card.kol_display_name }}</span>
|
||||
</div>
|
||||
<div class="templates-view__kol-platform" v-if="card.platform_hint">
|
||||
{{ card.platform_hint }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@@ -849,59 +854,94 @@ function refreshRecords(): void {
|
||||
|
||||
.templates-view__drawer-mode-card {
|
||||
width: 100%;
|
||||
border: 1px solid #dbe7f5;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
|
||||
padding: 18px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.templates-view__drawer-mode-card:hover {
|
||||
border-color: #d1d5db;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.templates-view__drawer-mode-card:hover,
|
||||
.templates-view__drawer-mode-card.is-active {
|
||||
background: #eff6ff;
|
||||
border-color: #1677ff;
|
||||
box-shadow: 0 12px 24px rgba(22, 119, 255, 0.12);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 0 1px #1677ff;
|
||||
}
|
||||
|
||||
/* Radio circle representing selection */
|
||||
.templates-view__drawer-mode-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #d1d5db;
|
||||
background-color: #ffffff;
|
||||
transition: all 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.templates-view__drawer-mode-card.is-active::before {
|
||||
border-color: #1677ff;
|
||||
background-color: #1677ff;
|
||||
box-shadow: inset 0 0 0 3px #eff6ff;
|
||||
}
|
||||
|
||||
.templates-view__drawer-mode-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.templates-view__drawer-mode-icon--general {
|
||||
background: linear-gradient(180deg, #fff4d6 0%, #ffe7ad 100%);
|
||||
color: #d48806;
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.templates-view__drawer-mode-icon--refined {
|
||||
background: linear-gradient(180deg, #e6f4ff 0%, #cfe3ff 100%);
|
||||
color: #1677ff;
|
||||
background: #e0f2fe;
|
||||
color: #0284c7;
|
||||
}
|
||||
|
||||
.templates-view__drawer-mode-card.is-active .templates-view__drawer-mode-icon {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.templates-view__drawer-mode-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.templates-view__drawer-mode-copy strong {
|
||||
font-size: 16px;
|
||||
color: #101828;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.templates-view__drawer-mode-copy small {
|
||||
color: #667085;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -1017,87 +1057,176 @@ function refreshRecords(): void {
|
||||
|
||||
.templates-view__kol-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.templates-view__kol-card {
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #f0f0f0;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.templates-view__kol-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
|
||||
border-color: #1677ff;
|
||||
box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
|
||||
border-color: #d1d5db;
|
||||
}
|
||||
|
||||
.templates-view__kol-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #1677ff, #0958d9);
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.templates-view__kol-card:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.templates-view__kol-cover {
|
||||
height: 100px;
|
||||
height: 120px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: #f5f5f5;
|
||||
background-color: #f8fafc;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.templates-view__kol-cover-fallback {
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.templates-view__fallback-icon {
|
||||
font-size: 32px;
|
||||
color: rgba(22, 119, 255, 0.2);
|
||||
}
|
||||
|
||||
.templates-view__kol-hover-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.templates-view__kol-hover-overlay > .anticon {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
background: rgba(0,0,0,0.4);
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
transform: translateY(10px);
|
||||
transition: all 0.2s;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.templates-view__kol-card:hover .templates-view__kol-hover-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.templates-view__kol-card:hover .templates-view__kol-hover-overlay > .anticon {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.templates-view__kol-content {
|
||||
padding: 12px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.templates-view__kol-header {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.templates-view__kol-title {
|
||||
margin: 0 0 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin: 0 0 6px 0;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.templates-view__kol-subtitle {
|
||||
.templates-view__kol-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
color: #8c8c8c;
|
||||
font-size: 12px;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.templates-view__kol-prompt {
|
||||
font-size: 13px;
|
||||
color: #4b5563;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.templates-view__kol-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.templates-view__kol-author {
|
||||
color: #bfbfbf;
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.templates-view__kol-action {
|
||||
display: inline-flex;
|
||||
.templates-view__author-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #e5e7eb;
|
||||
color: #4b5563;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #1677ff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.templates-view__kol-platform {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
PlaySquareOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||
import type { RecentArticle, TemplateCard } from "@geo/shared-types";
|
||||
import type { KolWorkspaceCard, RecentArticle, TemplateCard } from "@geo/shared-types";
|
||||
import { message } from "ant-design-vue";
|
||||
import type { TableColumnsType } from "ant-design-vue";
|
||||
import { computed, ref } from "vue";
|
||||
@@ -56,6 +56,21 @@ const kolCardsQuery = useQuery({
|
||||
queryFn: () => workspaceApi.kolCards(),
|
||||
});
|
||||
|
||||
function toTimeValue(value?: string | null): number {
|
||||
const parsed = Date.parse(value ?? "");
|
||||
return Number.isNaN(parsed) ? 0 : parsed;
|
||||
}
|
||||
|
||||
const sortedKolCards = computed<KolWorkspaceCard[]>(() =>
|
||||
[...(kolCardsQuery.data.value ?? [])].sort((left, right) => {
|
||||
const updatedDiff = toTimeValue(right.updated_at) - toTimeValue(left.updated_at);
|
||||
if (updatedDiff !== 0) {
|
||||
return updatedDiff;
|
||||
}
|
||||
return toTimeValue(right.granted_at) - toTimeValue(left.granted_at);
|
||||
}),
|
||||
);
|
||||
|
||||
const statIcons = [
|
||||
FileDoneOutlined,
|
||||
CloudUploadOutlined,
|
||||
@@ -270,27 +285,33 @@ function refreshDashboard(): void {
|
||||
<section class="panel panel-kol" v-if="kolCardsQuery.data.value?.length">
|
||||
<h3 class="panel-title">{{ t("kol.marketplace.title") }}</h3>
|
||||
<div class="kol-cards-container">
|
||||
<div
|
||||
v-for="card in kolCardsQuery.data.value"
|
||||
<div
|
||||
v-for="card in sortedKolCards"
|
||||
:key="card.subscription_prompt_id"
|
||||
class="kol-card"
|
||||
@click="router.push(`/kol/generate/${card.subscription_prompt_id}`)"
|
||||
>
|
||||
<div class="kol-card-cover" :style="card.package_cover ? { backgroundImage: `url(${card.package_cover})` } : {}">
|
||||
<div v-if="!card.package_cover" class="kol-card-cover-fallback"></div>
|
||||
<div v-if="!card.package_cover" class="kol-card-cover-fallback">
|
||||
<AppstoreOutlined class="fallback-icon" />
|
||||
</div>
|
||||
<div class="kol-card-hover-overlay">
|
||||
<ArrowRightOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div class="kol-card-content">
|
||||
<div class="kol-card-header">
|
||||
<h4 class="kol-card-title">{{ card.package_name }}</h4>
|
||||
<div class="kol-card-subtitle">
|
||||
<span>{{ card.prompt_name }}</span>
|
||||
<a-tag v-if="card.platform_hint" color="blue" size="small">{{ card.platform_hint }}</a-tag>
|
||||
</div>
|
||||
<h4 class="kol-card-title" :title="card.prompt_name">{{ card.prompt_name }}</h4>
|
||||
<div class="kol-card-meta-row">
|
||||
<span class="kol-card-prompt" :title="card.package_name">{{ card.package_name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="kol-card-footer">
|
||||
<span class="kol-card-author">{{ card.kol_display_name }}</span>
|
||||
<div class="kol-card-action">
|
||||
<ArrowRightOutlined />
|
||||
<div class="kol-card-author">
|
||||
<div class="author-avatar">{{ card.kol_display_name?.[0]?.toUpperCase() || 'K' }}</div>
|
||||
<span>{{ card.kol_display_name }}</span>
|
||||
</div>
|
||||
<div class="kol-card-platform" v-if="card.platform_hint">
|
||||
{{ card.platform_hint }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -585,58 +606,138 @@ function refreshDashboard(): void {
|
||||
|
||||
/* --- KOL Section --- */
|
||||
.kol-cards-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: -4px;
|
||||
scroll-snap-type: x proximity;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #c7d2fe transparent;
|
||||
}
|
||||
|
||||
.kol-cards-container::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.kol-cards-container::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.kol-cards-container::-webkit-scrollbar-thumb {
|
||||
background: #c7d2fe;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.kol-card {
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #f0f0f0;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
flex: 0 0 clamp(260px, 18vw, 320px);
|
||||
min-width: 260px;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.kol-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
|
||||
border-color: #1677ff;
|
||||
box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
|
||||
border-color: #d1d5db;
|
||||
}
|
||||
|
||||
.kol-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #1677ff, #0958d9);
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.kol-card:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.kol-card-cover {
|
||||
height: 100px;
|
||||
height: 120px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: #f5f5f5;
|
||||
background-color: #f8fafc;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kol-card-cover-fallback {
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fallback-icon {
|
||||
font-size: 32px;
|
||||
color: rgba(22, 119, 255, 0.2);
|
||||
}
|
||||
|
||||
.kol-card-hover-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.kol-card-hover-overlay > .anticon {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
background: rgba(0,0,0,0.4);
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
transform: translateY(10px);
|
||||
transition: all 0.2s;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.kol-card:hover .kol-card-hover-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.kol-card:hover .kol-card-hover-overlay > .anticon {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.kol-card-content {
|
||||
padding: 12px;
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.kol-card-header {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.kol-card-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin: 0 0 6px 0;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
@@ -644,30 +745,64 @@ function refreshDashboard(): void {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kol-card-subtitle {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
.kol-card-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.kol-card-prompt {
|
||||
font-size: 13px;
|
||||
color: #4b5563;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.kol-card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 4px;
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.kol-card-author {
|
||||
font-size: 11px;
|
||||
color: #bfbfbf;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.kol-card-action {
|
||||
color: #1677ff;
|
||||
font-size: 12px;
|
||||
.author-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #e5e7eb;
|
||||
color: #4b5563;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.kol-card-platform {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@@ -675,4 +810,10 @@ function refreshDashboard(): void {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.kol-card {
|
||||
flex-basis: min(280px, calc(100vw - 80px));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user