root/geo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(kol): expand variable schema and polish KOL UI

Browse Source 
- 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:
liangxu
2026-04-18 15:01:40 +08:00
parent 1dd316a34b
commit 79c65c1da7
26 changed files with 1506 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-web/src/components/kol/KolDynamicForm.vue
+31 -13
View File
@@ -1,7 +1,12 @@
<script setup lang="ts">
import type { KolVariableDefinition } from "@geo/shared-types";
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import {
getKolVariableNumberMax,
getKolVariableNumberMin,
getKolVariableTextMaxLength,
sanitizeKolVariableValue,
} from "@/lib/kol-placeholders";
const props = defineProps<{
variables: KolVariableDefinition[];
@@ -14,13 +19,8 @@ const emit = defineEmits<{
const { t } = useI18n();
const formModel = computed({
get: () => props.modelValue,
set: (val) => emit("update:modelValue", val),
});
function updateField(key: string, value: any) {
const next = { ...props.modelValue, [key]: value };
function updateField(variable: KolVariableDefinition, key: string, value: any) {
const next = { ...props.modelValue, [key]: sanitizeKolVariableValue(variable, value) };
emit("update:modelValue", next);
}
@@ -31,6 +31,18 @@ const selectOptions = (variable: KolVariableDefinition) => {
function fieldKey(variable: KolVariableDefinition): string {
return variable.key?.trim() || variable.id;
}
function textLimit(variable: KolVariableDefinition): number {
return getKolVariableTextMaxLength(variable);
}
function numberMin(variable: KolVariableDefinition): number {
return getKolVariableNumberMin(variable);
}
function numberMax(variable: KolVariableDefinition): number {
return getKolVariableNumberMax(variable);
}
</script>
<template>
@@ -45,7 +57,9 @@ function fieldKey(variable: KolVariableDefinition): string {
<a-input
:value="modelValue[fieldKey(variable)]"
:placeholder="variable.placeholder || t('common.inputPlease')"
@update:value="(val: string) => updateField(fieldKey(variable), val)"
:maxlength="textLimit(variable)"
show-count
@update:value="(val: string) => updateField(variable, fieldKey(variable), val)"
/>
</template>
@@ -53,8 +67,10 @@ function fieldKey(variable: KolVariableDefinition): string {
<a-textarea
:value="modelValue[fieldKey(variable)]"
:placeholder="variable.placeholder || t('common.inputPlease')"
:maxlength="textLimit(variable)"
:rows="4"
@update:value="(val: string) => updateField(fieldKey(variable), val)"
show-count
@update:value="(val: string) => updateField(variable, fieldKey(variable), val)"
/>
</template>
@@ -63,7 +79,7 @@ function fieldKey(variable: KolVariableDefinition): string {
:value="modelValue[fieldKey(variable)]"
:placeholder="variable.placeholder || t('common.selectPlease')"
:options="selectOptions(variable)"
@update:value="(val: string) => updateField(fieldKey(variable), val)"
@update:value="(val: string) => updateField(variable, fieldKey(variable), val)"
/>
</template>
@@ -71,8 +87,10 @@ function fieldKey(variable: KolVariableDefinition): string {
<a-input-number
:value="modelValue[fieldKey(variable)]"
:placeholder="variable.placeholder"
:min="numberMin(variable)"
:max="numberMax(variable)"
style="width: 100%"
@update:value="(val: number) => updateField(fieldKey(variable), val)"
@update:value="(val: number | null) => updateField(variable, fieldKey(variable), val)"
/>
</template>
@@ -80,7 +98,7 @@ function fieldKey(variable: KolVariableDefinition): string {
<a-checkbox-group
:value="modelValue[fieldKey(variable)] || []"
:options="selectOptions(variable)"
@update:value="(val: string[]) => updateField(fieldKey(variable), val)"
@update:value="(val: string[]) => updateField(variable, fieldKey(variable), val)"
/>
</template>
</a-form-item>
apps/admin-web/src/components/kol/KolPackageCard.vue
+6 -2
View File
@@ -1,8 +1,11 @@
<script setup lang="ts">
import { computed } from "vue";
import { UserOutlined, TagOutlined, TeamOutlined, ThunderboltOutlined } from "@ant-design/icons-vue";
import type { KolPackageSummary } from "@geo/shared-types";
import { useI18n } from "vue-i18n";
import { resolveApiURL } from "@/lib/api";
const props = defineProps<{
package: KolPackageSummary;
}>();
@@ -12,6 +15,7 @@ const emit = defineEmits<{
}>();
const { t } = useI18n();
const coverUrl = computed(() => resolveApiURL(props.package.cover_url));
function handleClick() {
emit("click", props.package.id);
@@ -21,8 +25,8 @@ function handleClick() {
<template>
<a-card hoverable class="kol-package-card" @click="handleClick">
<template #cover>
<div v-if="props.package.cover_url" class="card-cover-image">
<img alt="cover" :src="props.package.cover_url" />
<div v-if="coverUrl" class="card-cover-image">
<img alt="cover" :src="coverUrl" />
</div>
<div v-else class="card-cover-fallback">
<ThunderboltOutlined class="fallback-icon" />
apps/admin-web/src/components/kol/KolPackageFormModal.vue
+161 -11
View File
@@ -1,8 +1,14 @@
<script setup lang="ts">
import { reactive, watch } from "vue";
import { DeleteOutlined, PictureOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { computed, reactive, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import type { CreateKolPackageRequest } from "@geo/shared-types";
import CoverPickerModal from "@/components/CoverPickerModal.vue";
import { imagesApi, resolveApiURL } from "@/lib/api";
import { deriveCoverFileName } from "@/lib/cover-requirements";
const props = defineProps<{
open: boolean;
initialValue?: Partial<CreateKolPackageRequest>;
@@ -14,6 +20,7 @@ const emit = defineEmits<{
}>();
const { t } = useI18n();
const coverPickerOpen = ref(false);
const formState = reactive<CreateKolPackageRequest>({
name: "",
@@ -32,29 +39,57 @@ watch(
name: props.initialValue?.name || "",
description: props.initialValue?.description || "",
industry: props.initialValue?.industry || "",
tags: props.initialValue?.tags || [],
tags: [...(props.initialValue?.tags || [])],
price_note: props.initialValue?.price_note || "",
cover_url: props.initialValue?.cover_url || "",
});
return;
}
}
coverPickerOpen.value = false;
},
);
const coverPreviewUrl = computed(() => resolveApiURL(formState.cover_url));
const coverFileName = computed(() => deriveCoverFileName(formState.cover_url));
function handleOk() {
if (!formState.name.trim()) return;
emit("submit", { ...formState });
if (!formState.name.trim()) {
message.warning(t("kol.manage.packageForm.nameRequired"));
return;
}
emit("submit", { ...formState, tags: [...formState.tags] });
emit("update:open", false);
}
function handleCancel() {
emit("update:open", false);
}
function handleRemoveCover() {
formState.cover_url = "";
}
function handleCoverConfirmed(payload: { url: string }) {
formState.cover_url = resolveApiURL(payload.url);
}
async function uploadCover(file: File) {
const uploaded = await imagesApi.upload(file);
return {
url: uploaded.url,
fileName: uploaded.name,
assetId: uploaded.id,
};
}
</script>
<template>
<a-modal
:open="open"
:title="initialValue ? t('kol.manage.editPackage') : t('kol.manage.createPackage')"
:ok-text="t('common.confirm')"
:cancel-text="t('common.cancel')"
@ok="handleOk"
@cancel="handleCancel"
>
@@ -71,17 +106,132 @@ function handleCancel() {
<a-input v-model:value="formState.industry" />
</a-form-item>
<a-form-item label="Tags">
<a-select v-model:value="formState.tags" mode="tags" style="width: 100%" placeholder="Add tags" />
<a-form-item :label="t('kol.manage.packageForm.tags')">
<a-select
v-model:value="formState.tags"
mode="tags"
style="width: 100%"
:placeholder="t('kol.manage.packageForm.tagsPlaceholder')"
/>
</a-form-item>
<a-form-item label="Price Note">
<a-input v-model:value="formState.price_note" />
<a-form-item :label="t('kol.manage.packageForm.priceNote')">
<a-input
v-model:value="formState.price_note"
:placeholder="t('kol.manage.packageForm.priceNotePlaceholder')"
/>
</a-form-item>
<a-form-item label="Cover URL">
<a-input v-model:value="formState.cover_url" />
<a-form-item :label="t('kol.manage.packageForm.cover')">
<div class="package-cover-field">
<button
type="button"
class="package-cover-picker"
@click="coverPickerOpen = true"
>
<template v-if="coverPreviewUrl">
<img :src="coverPreviewUrl" :alt="t('kol.manage.packageForm.cover')" class="package-cover-picker__image" />
</template>
<template v-else>
<div class="package-cover-picker__empty">
<PictureOutlined class="package-cover-picker__icon" />
<strong>{{ t("kol.manage.packageForm.selectCover") }}</strong>
<span>{{ t("kol.manage.packageForm.coverHint") }}</span>
</div>
</template>
</button>
<div class="package-cover-actions">
<a-button @click="coverPickerOpen = true">
{{ coverPreviewUrl ? t("kol.manage.packageForm.changeCover") : t("kol.manage.packageForm.selectCover") }}
</a-button>
<a-button v-if="coverPreviewUrl" danger @click="handleRemoveCover">
<template #icon><DeleteOutlined /></template>
{{ t("kol.manage.packageForm.removeCover") }}
</a-button>
</div>
</div>
</a-form-item>
</a-form>
</a-modal>
<CoverPickerModal
v-model:open="coverPickerOpen"
:article-id="null"
:platform-ids="[]"
:current-url="coverPreviewUrl"
:current-file-name="coverFileName"
:title="t('kol.manage.packageForm.coverPicker.title')"
:local-tab-label="t('kol.manage.packageForm.coverPicker.localTab')"
:empty-upload-title="t('kol.manage.packageForm.coverPicker.emptyTitle')"
:empty-upload-hint="t('kol.manage.packageForm.coverPicker.emptyHint')"
:upload-handler="uploadCover"
@confirmed="handleCoverConfirmed"
/>
</template>
<style scoped>
.package-cover-field {
display: flex;
flex-direction: column;
gap: 12px;
}
.package-cover-picker {
width: 100%;
min-height: 180px;
border: 1px dashed #d0d5dd;
border-radius: 12px;
padding: 0;
overflow: hidden;
background: #f8fafc;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.package-cover-picker:hover {
border-color: #1677ff;
box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.08);
}
.package-cover-picker__image {
display: block;
width: 100%;
height: 180px;
object-fit: cover;
}
.package-cover-picker__empty {
display: flex;
min-height: 180px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px;
color: #475467;
text-align: center;
}
.package-cover-picker__empty strong {
color: #111827;
font-size: 15px;
font-weight: 700;
}
.package-cover-picker__empty span {
max-width: 320px;
font-size: 12px;
line-height: 1.6;
}
.package-cover-picker__icon {
font-size: 28px;
color: #1677ff;
}
.package-cover-actions {
display: flex;
gap: 8px;
}
</style>
apps/admin-web/src/components/kol/KolPersonaCard.vue
+2 -2
View File
@@ -6,7 +6,7 @@ import { message } from "ant-design-vue";
import { EditOutlined, UserOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import type { KolProfile } from "@geo/shared-types";
import { kolManageApi } from "@/lib/api";
import { kolManageApi, resolveApiURL } from "@/lib/api";
import { formatError } from "@/lib/errors";
const props = defineProps<{
@@ -22,7 +22,7 @@ const draftBio = ref(props.profile.bio ?? "");
const avatarUploading = ref(false);
const fileInput = ref<HTMLInputElement | null>(null);
const avatarURL = computed(() => props.profile.avatar_url ?? "");
const avatarURL = computed(() => resolveApiURL(props.profile.avatar_url));
const updateMutation = useMutation({
mutationFn: kolManageApi.updateProfile,
apps/admin-web/src/components/kol/KolPromptEditor.vue
+9 -3
View File
@@ -14,7 +14,11 @@ import type { KolCardConfig, KolVariableDefinition } from "@geo/shared-types";
import { formatError } from "@/lib/errors";
import { buildKolPlatformOptions } from "@/lib/kol-platform-options";
import { mergeKolCardConfig, parseKolCardConfig } from "@/lib/kol-card-config";
import { syncKolVariablesWithContent } from "@/lib/kol-placeholders";
import {
getKolVariableInitialValue,
normalizeKolVariableDefinition,
syncKolVariablesWithContent,
} from "@/lib/kol-placeholders";
const props = defineProps<{
promptId: number;
@@ -69,7 +73,9 @@ watch(
metadataForm.allow_web_search = parsedCardConfig.allow_web_search;
metadataForm.allow_user_knowledge = parsedCardConfig.allow_user_knowledge;
content.value = detail.latest_prompt_content ?? "";
variables.value = detail.latest_schema_json?.variables ?? [];
variables.value = (detail.latest_schema_json?.variables ?? []).map((variable) =>
normalizeKolVariableDefinition(variable),
);
cardConfig.value = { ...nextCardConfig };
}
},
@@ -178,7 +184,7 @@ function buildPreviewValues(nextVariables: KolVariableDefinition[]): Record<stri
nextVariables.forEach((variable) => {
const fieldKey = variable.key?.trim() || variable.id;
nextValues[fieldKey] = variable.type === "checkbox" ? [] : undefined;
nextValues[fieldKey] = getKolVariableInitialValue(variable);
});
return nextValues;
apps/admin-web/src/components/kol/KolVariableConfig.vue
+157 -1
View File
@@ -4,6 +4,15 @@ import { nextTick, ref } from "vue";
import { CloseOutlined, DownOutlined } from "@ant-design/icons-vue";
import type { KolVariableDefinition, KolVariableType } from "@geo/shared-types";
import { useI18n } from "vue-i18n";
import {
DEFAULT_KOL_NUMBER_MAX,
DEFAULT_KOL_NUMBER_MIN,
DEFAULT_KOL_TEXT_MAX_LENGTH,
getKolVariableNumberMax,
getKolVariableNumberMin,
getKolVariableTextMaxLength,
normalizeKolVariableDefinition,
} from "@/lib/kol-placeholders";
const props = defineProps<{
variables: KolVariableDefinition[];
@@ -33,7 +42,10 @@ type FocusVariableOptions = {
function updateVariable(index: number, updates: Partial<KolVariableDefinition>) {
const newVariables = [...props.variables];
newVariables[index] = { ...newVariables[index], ...updates };
newVariables[index] = normalizeKolVariableDefinition({
...newVariables[index],
...updates,
});
emit("update:variables", newVariables);
}
@@ -55,6 +67,73 @@ function handleTypeChange(index: number, type: KolVariableType) {
updateVariable(index, { type });
}
function handleTextMaxLengthChange(index: number, value: number | null) {
const maxLength =
typeof value === "number" && Number.isFinite(value) && value > 0
? Math.trunc(value)
: DEFAULT_KOL_TEXT_MAX_LENGTH;
const currentVariable = normalizeKolVariableDefinition(props.variables[index]);
updateVariable(index, {
max_length: maxLength,
default_value: currentVariable.default_value?.slice(0, maxLength),
});
}
function handleNumberMinChange(index: number, value: number | null) {
const currentVariable = normalizeKolVariableDefinition(props.variables[index]);
const minValue =
typeof value === "number" && Number.isFinite(value) ? value : DEFAULT_KOL_NUMBER_MIN;
const maxValue = Math.max(getKolVariableNumberMax(currentVariable), minValue);
const defaultNumber =
currentVariable.default_number === undefined
? undefined
: Math.min(maxValue, Math.max(minValue, currentVariable.default_number));
updateVariable(index, {
min_value: minValue,
max_value: maxValue,
default_number: defaultNumber,
});
}
function handleNumberMaxChange(index: number, value: number | null) {
const currentVariable = normalizeKolVariableDefinition(props.variables[index]);
const minValue = getKolVariableNumberMin(currentVariable);
const maxValue =
typeof value === "number" && Number.isFinite(value)
? Math.max(value, minValue)
: Math.max(DEFAULT_KOL_NUMBER_MAX, minValue);
const defaultNumber =
currentVariable.default_number === undefined
? undefined
: Math.min(maxValue, Math.max(minValue, currentVariable.default_number));
updateVariable(index, {
min_value: minValue,
max_value: maxValue,
default_number: defaultNumber,
});
}
function handleDefaultNumberChange(index: number, value: number | null) {
updateVariable(index, {
default_number: value === null ? undefined : value,
});
}
function textLimit(variable: KolVariableDefinition): number {
return getKolVariableTextMaxLength(variable);
}
function numberMin(variable: KolVariableDefinition): number {
return getKolVariableNumberMin(variable);
}
function numberMax(variable: KolVariableDefinition): number {
return getKolVariableNumberMax(variable);
}
function setCardRef(key: string, el: Element | ComponentPublicInstance | null) {
const element =
el instanceof HTMLElement
@@ -180,6 +259,41 @@ defineExpose({
/>
</div>
<template v-if="variable.type === 'input' || variable.type === 'textarea'">
<div class="form-item">
<label>{{ t('kol.manage.variable.maxLength') }}</label>
<a-input-number
:value="textLimit(variable)"
size="small"
:min="1"
:precision="0"
style="width: 100%"
@update:value="(val: number | null) => handleTextMaxLengthChange(index, val)"
/>
</div>
<div class="form-item">
<label>{{ t('kol.manage.variable.defaultValue') }}</label>
<a-input
v-if="variable.type === 'input'"
:value="variable.default_value"
size="small"
:maxlength="textLimit(variable)"
show-count
@input="(e: Event) => updateVariable(index, { default_value: (e.target as HTMLInputElement).value })"
/>
<a-textarea
v-else
:value="variable.default_value"
size="small"
:maxlength="textLimit(variable)"
:rows="3"
show-count
@update:value="(val: string) => updateVariable(index, { default_value: val })"
/>
</div>
</template>
<div v-if="variable.type === 'select' || variable.type === 'checkbox'" class="form-item">
<label>{{ t('kol.manage.variable.options') }}</label>
<a-input
@@ -189,6 +303,42 @@ defineExpose({
/>
</div>
<template v-if="variable.type === 'number'">
<div class="form-item-grid">
<div class="form-item">
<label>{{ t('kol.manage.variable.minValue') }}</label>
<a-input-number
:value="numberMin(variable)"
size="small"
style="width: 100%"
@update:value="(val: number | null) => handleNumberMinChange(index, val)"
/>
</div>
<div class="form-item">
<label>{{ t('kol.manage.variable.maxValue') }}</label>
<a-input-number
:value="numberMax(variable)"
size="small"
style="width: 100%"
@update:value="(val: number | null) => handleNumberMaxChange(index, val)"
/>
</div>
</div>
<div class="form-item">
<label>{{ t('kol.manage.variable.defaultNumber') }}</label>
<a-input-number
:value="variable.default_number"
size="small"
style="width: 100%"
:min="numberMin(variable)"
:max="numberMax(variable)"
@update:value="(val: number | null) => handleDefaultNumberChange(index, val)"
/>
</div>
</template>
<div class="token-display">
<code>&#123;&#123;{{ variable.key || variable.id }}&#125;&#125;</code>
</div>
@@ -274,6 +424,12 @@ defineExpose({
color: #8c8c8c;
}
.form-item-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.form-item-row {
display: flex;
justify-content: space-between;
apps/admin-web/src/i18n/messages/en-US.ts
+47 -2
View File
@@ -79,8 +79,8 @@ const enUS = {
contentManagement: "Content Management",
knowledge: "Knowledge Base",
images: "Image Management",
kolMarket: "Refined Templates",
kolMarketplace: "Refined Templates",
kolMarket: "Refined Template Marketplace",
kolMarketplace: "Refined Template Marketplace",
kolWorkspace: "KOL Workspace",
kolManage: "Prompt Management",
kolDashboard: "Dashboard",
@@ -186,6 +186,8 @@ const enUS = {
},
manage: {
title: "KOL Prompt Management",
packageTitle: "Packages",
promptTitle: "Prompts",
createPackage: "Create package",
editPackage: "Edit package",
publishPackage: "Publish",
@@ -193,8 +195,46 @@ const enUS = {
createPrompt: "Create prompt",
activatePrompt: "Go live",
archivePrompt: "Take offline",
confirmDeletePackage: "Are you sure you want to delete this package?",
confirmDeletePrompt: "Are you sure you want to delete this prompt?",
emptyPromptSelection: "Select a package on the left to view its prompts",
platformHint: "Platform",
platformHintDefault: "General",
packageStatus: {
draft: "Draft",
published: "Published",
archived: "Archived",
},
messages: {
packageCreated: "Package created successfully",
packageUpdated: "Package updated successfully",
packagePublished: "Package published successfully",
packageArchived: "Package archived successfully",
packageDeleted: "Package deleted successfully",
promptCreated: "Prompt created successfully",
promptActivated: "Prompt is live",
promptArchived: "Prompt is offline",
promptDeleted: "Prompt deleted successfully",
},
packageForm: {
tags: "Tags",
tagsPlaceholder: "Type a tag and press Enter",
priceNote: "Price Note",
priceNotePlaceholder: "For example: Contact me for pricing",
cover: "Cover Image",
coverHint: "Choose from the image library or upload a local image and convert it to WebP automatically.",
selectCover: "Select cover image",
changeCover: "Change cover image",
removeCover: "Remove cover image",
noCover: "No cover image selected",
nameRequired: "Package title is required",
coverPicker: {
title: "Select package cover",
localTab: "Local upload",
emptyTitle: "Choose an image for this package cover",
emptyHint: "Choose from the image library or upload a local image and convert it to WebP automatically.",
},
},
status: {
draft: "Draft",
active: "Live",
@@ -221,6 +261,11 @@ const enUS = {
required: "Required",
placeholder: "Placeholder",
options: "Options (comma separated)",
maxLength: "Max length",
defaultValue: "Default value",
minValue: "Min number",
maxValue: "Max number",
defaultNumber: "Default number",
},
},
dashboard: {
apps/admin-web/src/i18n/messages/zh-CN.ts
+47 -2
View File
@@ -79,8 +79,8 @@ const zhCN = {
contentManagement: "内容管理",
knowledge: "知识库",
images: "图片管理",
kolMarket: "精调模版",
kolMarketplace: "精调模版",
kolMarket: "精调模版市场",
kolMarketplace: "精调模版市场",
kolWorkspace: "KOL 工作台",
kolManage: "提示词管理",
kolDashboard: "数据看板",
@@ -186,6 +186,8 @@ const zhCN = {
},
manage: {
title: "KOL 提示词管理",
packageTitle: "订阅包",
promptTitle: "提示词",
createPackage: "创建订阅包",
editPackage: "编辑包",
publishPackage: "发布",
@@ -193,8 +195,46 @@ const zhCN = {
createPrompt: "新增提示词",
activatePrompt: "上线",
archivePrompt: "下线",
confirmDeletePackage: "确定要删除这个订阅包吗？",
confirmDeletePrompt: "确定要删除这个提示词吗？",
emptyPromptSelection: "请选择左侧订阅包以查看提示词",
platformHint: "平台",
platformHintDefault: "通用",
packageStatus: {
draft: "草稿",
published: "已发布",
archived: "已归档",
},
messages: {
packageCreated: "订阅包创建成功",
packageUpdated: "订阅包更新成功",
packagePublished: "订阅包发布成功",
packageArchived: "订阅包归档成功",
packageDeleted: "订阅包删除成功",
promptCreated: "提示词创建成功",
promptActivated: "提示词已上线",
promptArchived: "提示词已下线",
promptDeleted: "提示词删除成功",
},
packageForm: {
tags: "标签",
tagsPlaceholder: "输入标签后按回车",
priceNote: "价格说明",
priceNotePlaceholder: "例如：联系我获取报价",
cover: "封面图",
coverHint: "支持从素材库选择，也支持本地上传后自动转为 WebP。",
selectCover: "选择封面图",
changeCover: "更换封面图",
removeCover: "移除封面图",
noCover: "暂未设置封面图",
nameRequired: "请填写订阅包标题",
coverPicker: {
title: "选择订阅包封面",
localTab: "本地上传",
emptyTitle: "选择一张图片作为订阅包封面",
emptyHint: "支持从素材库选择，也支持本地上传后自动转为 WebP。",
},
},
status: {
draft: "草稿",
active: "已上线",
@@ -221,6 +261,11 @@ const zhCN = {
required: "必填",
placeholder: "提示语",
options: "选项（逗号分隔）",
maxLength: "字数限制",
defaultValue: "默认值",
minValue: "最小数字",
maxValue: "最大数字",
defaultNumber: "默认数字",
},
},
dashboard: {
apps/admin-web/src/lib/api.ts
+1 -4
View File
@@ -297,10 +297,7 @@ export const kolManageApi = {
}>>("/api/tenant/kol/manage/profile/avatar", formData);
markImageUploadRequestFinished(progressToken);
return {
...response.data.data,
url: resolveApiURL(response.data.data.url),
};
return response.data.data;
} catch (error) {
markImageUploadRequestFailed(progressToken);
throw error;
apps/admin-web/src/lib/kol-placeholders.ts
+170 -2
View File
@@ -4,6 +4,10 @@ import { newVariableId } from "./kol-variable-id";
const KOL_PLACEHOLDER_RE = /\{\{\s*([^{}]+?)\s*\}\}/g;
export const DEFAULT_KOL_TEXT_MAX_LENGTH = 20;
export const DEFAULT_KOL_NUMBER_MIN = 0;
export const DEFAULT_KOL_NUMBER_MAX = 10000;
function normalizePlaceholderKey(value: string): string {
return value.trim();
}
@@ -21,6 +25,32 @@ function normalizeVariableType(type?: KolVariableType): KolVariableType {
}
}
function normalizeFiniteNumber(value: unknown): number | undefined {
if (typeof value === "number" && Number.isFinite(value)) {
return value;
}
if (typeof value === "string" && value.trim()) {
const parsed = Number(value);
if (Number.isFinite(parsed)) {
return parsed;
}
}
return undefined;
}
function normalizePositiveInteger(value: unknown, fallback: number): number {
const normalized = normalizeFiniteNumber(value);
if (normalized === undefined) {
return fallback;
}
const rounded = Math.trunc(normalized);
return rounded > 0 ? rounded : fallback;
}
function clampNumber(value: number, min: number, max: number): number {
return Math.min(max, Math.max(min, value));
}
export function buildKolPlaceholderToken(key: string): string {
return `{{${normalizePlaceholderKey(key)}}}`;
}
@@ -70,7 +100,7 @@ export function createKolVariableDefinition(
): KolVariableDefinition {
const normalizedKey = normalizePlaceholderKey(key);
return {
return normalizeKolVariableDefinition({
id: overrides.id?.trim() || newVariableId(),
key: normalizedKey,
label: overrides.label?.trim() || normalizedKey,
@@ -78,7 +108,145 @@ export function createKolVariableDefinition(
required: overrides.required ?? true,
placeholder: overrides.placeholder,
options: overrides.options,
max_length: overrides.max_length,
default_value: overrides.default_value,
min_value: overrides.min_value,
max_value: overrides.max_value,
default_number: overrides.default_number,
});
}
export function getKolVariableTextMaxLength(variable: KolVariableDefinition): number {
return normalizePositiveInteger(variable.max_length, DEFAULT_KOL_TEXT_MAX_LENGTH);
}
export function getKolVariableNumberMin(variable: KolVariableDefinition): number {
return normalizeFiniteNumber(variable.min_value) ?? DEFAULT_KOL_NUMBER_MIN;
}
export function getKolVariableNumberMax(variable: KolVariableDefinition): number {
const min = getKolVariableNumberMin(variable);
const max = normalizeFiniteNumber(variable.max_value) ?? DEFAULT_KOL_NUMBER_MAX;
return max >= min ? max : min;
}
export function normalizeKolVariableDefinition(variable: KolVariableDefinition): KolVariableDefinition {
const type = normalizeVariableType(variable.type);
const normalizedKey = normalizePlaceholderKey(variable.key || variable.label || variable.id);
const normalizedLabel = variable.label?.trim() || normalizedKey;
const normalizedOptions =
type === "select" || type === "checkbox"
? (variable.options || []).map((item) => item.trim()).filter(Boolean)
: undefined;
const baseVariable: KolVariableDefinition = {
...variable,
id: variable.id?.trim() || newVariableId(),
key: normalizedKey,
label: normalizedLabel,
type,
required: variable.required ?? true,
placeholder: variable.placeholder,
options: normalizedOptions,
};
if (type === "input" || type === "textarea") {
const maxLength = getKolVariableTextMaxLength(baseVariable);
const defaultValue =
typeof variable.default_value === "string"
? variable.default_value.slice(0, maxLength)
: undefined;
return {
...baseVariable,
max_length: maxLength,
default_value: defaultValue,
min_value: undefined,
max_value: undefined,
default_number: undefined,
};
}
if (type === "number") {
const minValue = getKolVariableNumberMin(baseVariable);
const maxValue = getKolVariableNumberMax(baseVariable);
const rawDefaultNumber = normalizeFiniteNumber(variable.default_number);
const defaultNumber =
rawDefaultNumber === undefined ? undefined : clampNumber(rawDefaultNumber, minValue, maxValue);
return {
...baseVariable,
options: undefined,
max_length: undefined,
default_value: undefined,
min_value: minValue,
max_value: maxValue,
default_number: defaultNumber,
};
}
return {
...baseVariable,
max_length: undefined,
default_value: undefined,
min_value: undefined,
max_value: undefined,
default_number: undefined,
};
}
export function getKolVariableInitialValue(variable: KolVariableDefinition): any {
const normalized = normalizeKolVariableDefinition(variable);
if (normalized.type === "checkbox") {
return [];
}
if (normalized.type === "number") {
return normalized.default_number;
}
if (normalized.type === "input" || normalized.type === "textarea") {
return normalized.default_value;
}
return undefined;
}
export function sanitizeKolVariableValue(variable: KolVariableDefinition, value: any): any {
const normalized = normalizeKolVariableDefinition(variable);
if (normalized.type === "number") {
if (value === null || value === undefined || value === "") {
return undefined;
}
const numericValue = normalizeFiniteNumber(value);
if (numericValue === undefined) {
return undefined;
}
return clampNumber(numericValue, getKolVariableNumberMin(normalized), getKolVariableNumberMax(normalized));
}
if (normalized.type === "input" || normalized.type === "textarea") {
if (value === null || value === undefined) {
return undefined;
}
return String(value).slice(0, getKolVariableTextMaxLength(normalized));
}
return value;
}
export function isKolVariableValueEmpty(variable: KolVariableDefinition, value: any): boolean {
const normalized = normalizeKolVariableDefinition(variable);
if (normalized.type === "checkbox") {
return !Array.isArray(value) || value.length === 0;
}
if (normalized.type === "number") {
return value === null || value === undefined || value === "";
}
if (typeof value === "string") {
return value.trim().length === 0;
}
return value === null || value === undefined;
}
export function syncKolVariablesWithContent(
@@ -95,7 +263,7 @@ export function syncKolVariablesWithContent(
}
byKey.set(
key,
createKolVariableDefinition(key, {
normalizeKolVariableDefinition({
...variable,
key,
label: variable.label?.trim() || key,
apps/admin-web/src/views/KnowledgeView.vue.patch
-10
View File
@@ -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: "",
});
apps/admin-web/src/views/KolGenerateView.vue
+8 -2
View File
@@ -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);
}
});
apps/admin-web/src/views/KolManageView.vue
+116 -53
View File
@@ -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>
apps/admin-web/src/views/KolPackageDetailView.vue
+4 -3
View File
@@ -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">
apps/admin-web/src/views/TemplatesView.vue
+195 -66
View File
@@ -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) {
apps/admin-web/src/views/WorkspaceView.vue
+186 -45
View File
@@ -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>