-
@@ -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) {
diff --git a/apps/admin-web/src/views/WorkspaceView.vue b/apps/admin-web/src/views/WorkspaceView.vue
index ddaa424..29bd85f 100644
--- a/apps/admin-web/src/views/WorkspaceView.vue
+++ b/apps/admin-web/src/views/WorkspaceView.vue
@@ -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
(() =>
+ [...(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 {
{{ t("kol.marketplace.title") }}