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