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/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>