chore(frontend): introduce prettier + eslint and prune unused code
- Add Prettier 3 with prettier-plugin-organize-imports (sorts/removes unused imports) - Add ESLint 10 flat config with typescript-eslint + eslint-plugin-vue + eslint-config-prettier - Add root scripts: format, format:check, lint, lint:fix - Reformat 257 files across admin-web, ops-web, desktop-client, packages - Remove unused locals/exports flagged by --noUnusedLocals/--noUnusedParameters - Fix duplicate localTabLabel key, surrogate-pair regex u-flag, NBSP literal in regex - Skip server/ (Go) and apps/browser-extension/ (deprecated per ADR) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,153 +1,156 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
PlusOutlined,
|
||||
AppstoreOutlined,
|
||||
ArrowRightOutlined,
|
||||
BlockOutlined,
|
||||
ExperimentOutlined,
|
||||
FileTextOutlined,
|
||||
NodeIndexOutlined,
|
||||
PlusOutlined,
|
||||
RocketOutlined,
|
||||
ThunderboltOutlined,
|
||||
TrophyOutlined,
|
||||
ArrowRightOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||
import { message } from "ant-design-vue";
|
||||
} from '@ant-design/icons-vue'
|
||||
import type {
|
||||
ArticleListItem,
|
||||
ArticleListParams,
|
||||
KolWorkspaceCard,
|
||||
RecentArticle,
|
||||
TemplateListItem,
|
||||
} from "@geo/shared-types";
|
||||
import type { TableColumnsType } from "ant-design-vue";
|
||||
import type { Dayjs } from "dayjs";
|
||||
import { computed, onBeforeUnmount, reactive, ref, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
} from '@geo/shared-types'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
|
||||
import type { TableColumnsType } from 'ant-design-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import type { Dayjs } from 'dayjs'
|
||||
import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import ArticleActionGroup from "@/components/ArticleActionGroup.vue";
|
||||
import ArticleGenerateStatus from "@/components/ArticleGenerateStatus.vue";
|
||||
import ArticlePublishStatus from "@/components/ArticlePublishStatus.vue";
|
||||
import ArticleSourceMeta from "@/components/ArticleSourceMeta.vue";
|
||||
import ArticleDetailDrawer from "@/components/ArticleDetailDrawer.vue";
|
||||
import PublishArticleModal from "@/components/PublishArticleModal.vue";
|
||||
import { articlesApi, templatesApi, workspaceApi } from "@/lib/api";
|
||||
import { buildArticleClipboardContent, resolveArticleActionState } from "@/lib/article-list-actions";
|
||||
import { formatError } from "@/lib/errors";
|
||||
import ArticleActionGroup from '@/components/ArticleActionGroup.vue'
|
||||
import ArticleDetailDrawer from '@/components/ArticleDetailDrawer.vue'
|
||||
import ArticleGenerateStatus from '@/components/ArticleGenerateStatus.vue'
|
||||
import ArticlePublishStatus from '@/components/ArticlePublishStatus.vue'
|
||||
import ArticleSourceMeta from '@/components/ArticleSourceMeta.vue'
|
||||
import PublishArticleModal from '@/components/PublishArticleModal.vue'
|
||||
import { articlesApi, templatesApi, workspaceApi } from '@/lib/api'
|
||||
import { buildArticleClipboardContent, resolveArticleActionState } from '@/lib/article-list-actions'
|
||||
import {
|
||||
formatDateTime,
|
||||
getGenerateStatusMeta,
|
||||
getPublishStatusMeta,
|
||||
getTemplateMeta,
|
||||
} from "@/lib/display";
|
||||
} from '@/lib/display'
|
||||
import { formatError } from '@/lib/errors'
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const queryClient = useQueryClient()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
|
||||
const pickerOpen = ref(false);
|
||||
const pickerMode = ref<"general" | "refined" | null>(null);
|
||||
const publishModalOpen = ref(false);
|
||||
const selectedPublishArticleId = ref<number | null>(null);
|
||||
const articleDrawerOpen = ref(false);
|
||||
const selectedArticleId = ref<number | null>(null);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const draftGenerationRange = ref<[Dayjs, Dayjs] | null>(null);
|
||||
const pickerOpen = ref(false)
|
||||
const pickerMode = ref<'general' | 'refined' | null>(null)
|
||||
const publishModalOpen = ref(false)
|
||||
const selectedPublishArticleId = ref<number | null>(null)
|
||||
const articleDrawerOpen = ref(false)
|
||||
const selectedArticleId = ref<number | null>(null)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const draftGenerationRange = ref<[Dayjs, Dayjs] | null>(null)
|
||||
|
||||
const draftFilters = reactive<{
|
||||
template_filter?: string;
|
||||
publish_status?: string;
|
||||
generate_status?: string;
|
||||
keyword?: string;
|
||||
created_from?: string;
|
||||
created_to?: string;
|
||||
template_filter?: string
|
||||
publish_status?: string
|
||||
generate_status?: string
|
||||
keyword?: string
|
||||
created_from?: string
|
||||
created_to?: string
|
||||
}>({
|
||||
keyword: "",
|
||||
});
|
||||
keyword: '',
|
||||
})
|
||||
|
||||
const appliedFilters = reactive<{
|
||||
template_filter?: string;
|
||||
publish_status?: string;
|
||||
generate_status?: string;
|
||||
keyword?: string;
|
||||
created_from?: string;
|
||||
created_to?: string;
|
||||
template_filter?: string
|
||||
publish_status?: string
|
||||
generate_status?: string
|
||||
keyword?: string
|
||||
created_from?: string
|
||||
created_to?: string
|
||||
}>({
|
||||
keyword: "",
|
||||
});
|
||||
keyword: '',
|
||||
})
|
||||
|
||||
const templateListQuery = useQuery({
|
||||
queryKey: ["templates", "list"],
|
||||
queryKey: ['templates', 'list'],
|
||||
queryFn: () => templatesApi.list(),
|
||||
});
|
||||
})
|
||||
|
||||
const kolCardsQuery = useQuery({
|
||||
queryKey: ["workspace", "kol-cards", "templates"],
|
||||
queryKey: ['workspace', 'kol-cards', 'templates'],
|
||||
queryFn: () => workspaceApi.kolCards(),
|
||||
});
|
||||
})
|
||||
|
||||
const recentArticlesQuery = useQuery({
|
||||
queryKey: ["workspace", "recent-articles", "templates"],
|
||||
queryKey: ['workspace', 'recent-articles', 'templates'],
|
||||
queryFn: () => workspaceApi.recentArticles(),
|
||||
});
|
||||
})
|
||||
|
||||
const articleParams = computed<ArticleListParams>(() => {
|
||||
const params: ArticleListParams = {
|
||||
page: page.value,
|
||||
page_size: pageSize.value,
|
||||
source_type: "template,kol",
|
||||
};
|
||||
source_type: 'template,kol',
|
||||
}
|
||||
|
||||
const templateFilter = appliedFilters.template_filter;
|
||||
if (templateFilter?.startsWith("source:")) {
|
||||
params.source_type = templateFilter.replace("source:", "");
|
||||
} else if (templateFilter?.startsWith("template:")) {
|
||||
params.source_type = "template";
|
||||
params.template_id = Number(templateFilter.replace("template:", ""));
|
||||
} else if (templateFilter?.startsWith("kol:")) {
|
||||
params.source_type = "kol";
|
||||
params.kol_prompt_id = Number(templateFilter.replace("kol:", ""));
|
||||
const templateFilter = appliedFilters.template_filter
|
||||
if (templateFilter?.startsWith('source:')) {
|
||||
params.source_type = templateFilter.replace('source:', '')
|
||||
} else if (templateFilter?.startsWith('template:')) {
|
||||
params.source_type = 'template'
|
||||
params.template_id = Number(templateFilter.replace('template:', ''))
|
||||
} else if (templateFilter?.startsWith('kol:')) {
|
||||
params.source_type = 'kol'
|
||||
params.kol_prompt_id = Number(templateFilter.replace('kol:', ''))
|
||||
}
|
||||
if (appliedFilters.publish_status) {
|
||||
params.publish_status = appliedFilters.publish_status;
|
||||
params.publish_status = appliedFilters.publish_status
|
||||
}
|
||||
if (appliedFilters.generate_status) {
|
||||
params.generate_status = appliedFilters.generate_status;
|
||||
params.generate_status = appliedFilters.generate_status
|
||||
}
|
||||
if (appliedFilters.keyword?.trim()) {
|
||||
params.keyword = appliedFilters.keyword.trim();
|
||||
params.keyword = appliedFilters.keyword.trim()
|
||||
}
|
||||
if (appliedFilters.created_from) {
|
||||
params.created_from = appliedFilters.created_from;
|
||||
params.created_from = appliedFilters.created_from
|
||||
}
|
||||
if (appliedFilters.created_to) {
|
||||
params.created_to = appliedFilters.created_to;
|
||||
params.created_to = appliedFilters.created_to
|
||||
}
|
||||
|
||||
return params;
|
||||
});
|
||||
return params
|
||||
})
|
||||
|
||||
const articleListQuery = useQuery({
|
||||
queryKey: computed(() => ["articles", "list", articleParams.value]),
|
||||
queryKey: computed(() => ['articles', 'list', articleParams.value]),
|
||||
queryFn: () => articlesApi.list(articleParams.value),
|
||||
});
|
||||
})
|
||||
|
||||
const hasActiveRecordFilters = computed(() =>
|
||||
Boolean(
|
||||
appliedFilters.template_filter ||
|
||||
appliedFilters.publish_status ||
|
||||
appliedFilters.generate_status ||
|
||||
appliedFilters.keyword?.trim() ||
|
||||
appliedFilters.created_from ||
|
||||
appliedFilters.created_to,
|
||||
appliedFilters.publish_status ||
|
||||
appliedFilters.generate_status ||
|
||||
appliedFilters.keyword?.trim() ||
|
||||
appliedFilters.created_from ||
|
||||
appliedFilters.created_to,
|
||||
),
|
||||
);
|
||||
)
|
||||
|
||||
const recentTemplateArticles = computed<ArticleListItem[]>(() =>
|
||||
(recentArticlesQuery.data.value || [])
|
||||
.filter((article: RecentArticle) => article.source_type === "template" || article.source_type === "kol")
|
||||
.filter(
|
||||
(article: RecentArticle) =>
|
||||
article.source_type === 'template' || article.source_type === 'kol',
|
||||
)
|
||||
.map((article: RecentArticle) => ({
|
||||
id: article.id,
|
||||
source_type: article.source_type,
|
||||
@@ -155,9 +158,9 @@ const recentTemplateArticles = computed<ArticleListItem[]>(() =>
|
||||
kol_prompt_id: null,
|
||||
template_name:
|
||||
article.template_name ||
|
||||
(article.source_type === "kol"
|
||||
? t("templates.sections.refinedTemplates")
|
||||
: t("templates.sections.generalTemplates")),
|
||||
(article.source_type === 'kol'
|
||||
? t('templates.sections.refinedTemplates')
|
||||
: t('templates.sections.generalTemplates')),
|
||||
prompt_rule_id: null,
|
||||
prompt_rule_name: null,
|
||||
generation_mode: article.generation_mode,
|
||||
@@ -170,123 +173,129 @@ const recentTemplateArticles = computed<ArticleListItem[]>(() =>
|
||||
source_label: article.source_label,
|
||||
created_at: article.created_at,
|
||||
})),
|
||||
);
|
||||
)
|
||||
|
||||
const shouldUseRecentFallback = computed(
|
||||
() =>
|
||||
!hasActiveRecordFilters.value &&
|
||||
(articleListQuery.data.value?.total ?? 0) === 0 &&
|
||||
recentTemplateArticles.value.length > 0,
|
||||
);
|
||||
)
|
||||
|
||||
const displayedArticles = computed<ArticleListItem[]>(() =>
|
||||
shouldUseRecentFallback.value ? recentTemplateArticles.value : articleListQuery.data.value?.items || [],
|
||||
);
|
||||
shouldUseRecentFallback.value
|
||||
? recentTemplateArticles.value
|
||||
: articleListQuery.data.value?.items || [],
|
||||
)
|
||||
|
||||
const displayedArticleTotal = computed(() =>
|
||||
shouldUseRecentFallback.value ? recentTemplateArticles.value.length : articleListQuery.data.value?.total || 0,
|
||||
);
|
||||
shouldUseRecentFallback.value
|
||||
? recentTemplateArticles.value.length
|
||||
: articleListQuery.data.value?.total || 0,
|
||||
)
|
||||
|
||||
let articlePollingTimer: number | null = null;
|
||||
let articlePollingTimer: number | null = null
|
||||
|
||||
function hasActiveGenerationStatus(status?: string | null): boolean {
|
||||
return status === "queued" || status === "pending" || status === "generating" || status === "running";
|
||||
return (
|
||||
status === 'queued' || status === 'pending' || status === 'generating' || status === 'running'
|
||||
)
|
||||
}
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (articleId: number) => articlesApi.remove(articleId),
|
||||
onSuccess: async () => {
|
||||
message.success(t("templates.list.deleteSuccess"));
|
||||
message.success(t('templates.list.deleteSuccess'))
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["articles"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["workspace"] }),
|
||||
]);
|
||||
queryClient.invalidateQueries({ queryKey: ['articles'] }),
|
||||
queryClient.invalidateQueries({ queryKey: ['workspace'] }),
|
||||
])
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(formatError(error) || t("templates.list.deleteError"));
|
||||
message.error(formatError(error) || t('templates.list.deleteError'))
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const templateFilterOptions = computed(() => {
|
||||
return [
|
||||
{ label: t("templates.sections.generalTemplates"), value: "source:template" },
|
||||
{ label: t("templates.sections.refinedTemplates"), value: "source:kol" },
|
||||
];
|
||||
});
|
||||
{ label: t('templates.sections.generalTemplates'), value: 'source:template' },
|
||||
{ label: t('templates.sections.refinedTemplates'), value: 'source:kol' },
|
||||
]
|
||||
})
|
||||
|
||||
const generateStatusOptions = computed(() => [
|
||||
{ label: getGenerateStatusMeta("draft").label, value: "draft" },
|
||||
{ label: getGenerateStatusMeta("generating").label, value: "generating" },
|
||||
{ label: getGenerateStatusMeta("completed").label, value: "completed" },
|
||||
{ label: getGenerateStatusMeta("failed").label, value: "failed" },
|
||||
]);
|
||||
{ label: getGenerateStatusMeta('draft').label, value: 'draft' },
|
||||
{ label: getGenerateStatusMeta('generating').label, value: 'generating' },
|
||||
{ label: getGenerateStatusMeta('completed').label, value: 'completed' },
|
||||
{ label: getGenerateStatusMeta('failed').label, value: 'failed' },
|
||||
])
|
||||
|
||||
const publishStatusOptions = computed(() => [
|
||||
{ label: getPublishStatusMeta("unpublished").label, value: "unpublished" },
|
||||
{ label: getPublishStatusMeta("publishing").label, value: "publishing" },
|
||||
{ label: getPublishStatusMeta("success").label, value: "success" },
|
||||
{ label: getPublishStatusMeta("partial_success").label, value: "partial_success" },
|
||||
{ label: getPublishStatusMeta("failed").label, value: "failed" },
|
||||
]);
|
||||
{ label: getPublishStatusMeta('unpublished').label, value: 'unpublished' },
|
||||
{ label: getPublishStatusMeta('publishing').label, value: 'publishing' },
|
||||
{ label: getPublishStatusMeta('success').label, value: 'success' },
|
||||
{ label: getPublishStatusMeta('partial_success').label, value: 'partial_success' },
|
||||
{ label: getPublishStatusMeta('failed').label, value: 'failed' },
|
||||
])
|
||||
|
||||
const articleColumns = computed<TableColumnsType<ArticleListItem>>(() => [
|
||||
{
|
||||
title: t("common.title"),
|
||||
dataIndex: "title",
|
||||
key: "title",
|
||||
title: t('common.title'),
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
},
|
||||
{
|
||||
title: t("common.templateType"),
|
||||
dataIndex: "template_name",
|
||||
key: "template_name",
|
||||
title: t('common.templateType'),
|
||||
dataIndex: 'template_name',
|
||||
key: 'template_name',
|
||||
width: 168,
|
||||
},
|
||||
{
|
||||
title: t("common.generateStatus"),
|
||||
dataIndex: "generate_status",
|
||||
key: "generate_status",
|
||||
title: t('common.generateStatus'),
|
||||
dataIndex: 'generate_status',
|
||||
key: 'generate_status',
|
||||
width: 128,
|
||||
},
|
||||
{
|
||||
title: t("common.publishStatus"),
|
||||
dataIndex: "publish_status",
|
||||
key: "publish_status",
|
||||
title: t('common.publishStatus'),
|
||||
dataIndex: 'publish_status',
|
||||
key: 'publish_status',
|
||||
width: 128,
|
||||
},
|
||||
{
|
||||
title: t("common.wordCount"),
|
||||
dataIndex: "word_count",
|
||||
key: "word_count",
|
||||
title: t('common.wordCount'),
|
||||
dataIndex: 'word_count',
|
||||
key: 'word_count',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: t("common.actions"),
|
||||
key: "actions",
|
||||
title: t('common.actions'),
|
||||
key: 'actions',
|
||||
width: 156,
|
||||
align: "right",
|
||||
align: 'right',
|
||||
},
|
||||
]);
|
||||
])
|
||||
|
||||
// removed wizard watch effect
|
||||
|
||||
function applyFilters(): void {
|
||||
page.value = 1;
|
||||
appliedFilters.template_filter = draftFilters.template_filter;
|
||||
appliedFilters.publish_status = draftFilters.publish_status;
|
||||
appliedFilters.generate_status = draftFilters.generate_status;
|
||||
appliedFilters.keyword = draftFilters.keyword?.trim() || "";
|
||||
appliedFilters.created_from = draftGenerationRange.value?.[0]?.toISOString();
|
||||
appliedFilters.created_to = draftGenerationRange.value?.[1]?.toISOString();
|
||||
page.value = 1
|
||||
appliedFilters.template_filter = draftFilters.template_filter
|
||||
appliedFilters.publish_status = draftFilters.publish_status
|
||||
appliedFilters.generate_status = draftFilters.generate_status
|
||||
appliedFilters.keyword = draftFilters.keyword?.trim() || ''
|
||||
appliedFilters.created_from = draftGenerationRange.value?.[0]?.toISOString()
|
||||
appliedFilters.created_to = draftGenerationRange.value?.[1]?.toISOString()
|
||||
}
|
||||
|
||||
function getTemplateCardClass(idx: number): string {
|
||||
const classes = ["card-yellow", "card-blue-light", "card-blue-deep", "card-grey"];
|
||||
return classes[idx % classes.length];
|
||||
const classes = ['card-yellow', 'card-blue-light', 'card-blue-deep', 'card-grey']
|
||||
return classes[idx % classes.length]
|
||||
}
|
||||
|
||||
function getTemplateBgColorClass(idx: number): string {
|
||||
const classes = ["bg-yellow", "bg-blue-light", "bg-blue-deep", "bg-grey"];
|
||||
return classes[idx % classes.length];
|
||||
const classes = ['bg-yellow', 'bg-blue-light', 'bg-blue-deep', 'bg-grey']
|
||||
return classes[idx % classes.length]
|
||||
}
|
||||
|
||||
const templateIconMap: Record<string, unknown> = {
|
||||
@@ -294,75 +303,79 @@ const templateIconMap: Record<string, unknown> = {
|
||||
product_review: ExperimentOutlined,
|
||||
research_report: FileTextOutlined,
|
||||
brand_search_expansion: NodeIndexOutlined,
|
||||
};
|
||||
}
|
||||
|
||||
function resolveTemplateIcon(template: TemplateListItem): unknown {
|
||||
return templateIconMap[template.template_key] ?? RocketOutlined;
|
||||
return templateIconMap[template.template_key] ?? RocketOutlined
|
||||
}
|
||||
|
||||
function resetFilters(): void {
|
||||
draftFilters.template_filter = undefined;
|
||||
draftFilters.publish_status = undefined;
|
||||
draftFilters.generate_status = undefined;
|
||||
draftFilters.keyword = "";
|
||||
draftGenerationRange.value = null;
|
||||
applyFilters();
|
||||
draftFilters.template_filter = undefined
|
||||
draftFilters.publish_status = undefined
|
||||
draftFilters.generate_status = undefined
|
||||
draftFilters.keyword = ''
|
||||
draftGenerationRange.value = null
|
||||
applyFilters()
|
||||
}
|
||||
|
||||
function openTemplatePicker(): void {
|
||||
pickerOpen.value = true;
|
||||
pickerMode.value = "general";
|
||||
pickerOpen.value = true
|
||||
pickerMode.value = 'general'
|
||||
}
|
||||
|
||||
function choosePickerMode(mode: "general" | "refined"): void {
|
||||
pickerMode.value = mode;
|
||||
function choosePickerMode(mode: 'general' | 'refined'): void {
|
||||
pickerMode.value = mode
|
||||
}
|
||||
|
||||
function startTemplate(template: TemplateListItem): void {
|
||||
pickerOpen.value = false;
|
||||
pickerMode.value = null;
|
||||
void router.push({ path: "/articles/wizard", query: { template_id: String(template.id) } });
|
||||
pickerOpen.value = false
|
||||
pickerMode.value = null
|
||||
void router.push({ path: '/articles/wizard', query: { template_id: String(template.id) } })
|
||||
}
|
||||
|
||||
function openRefinedTemplate(card: KolWorkspaceCard): void {
|
||||
pickerOpen.value = false;
|
||||
pickerMode.value = null;
|
||||
pickerOpen.value = false
|
||||
pickerMode.value = null
|
||||
void router.push({
|
||||
name: "kol-generate",
|
||||
name: 'kol-generate',
|
||||
params: { subscriptionPromptId: String(card.subscription_prompt_id) },
|
||||
query: { source: "templates" },
|
||||
});
|
||||
query: { source: 'templates' },
|
||||
})
|
||||
}
|
||||
|
||||
async function openEditor(article: ArticleListItem): Promise<void> {
|
||||
try {
|
||||
const detail = await articlesApi.detail(article.id);
|
||||
const detail = await articlesApi.detail(article.id)
|
||||
|
||||
if (detail.generate_status === "draft" && detail.source_type === "template" && detail.template_id) {
|
||||
if (
|
||||
detail.generate_status === 'draft' &&
|
||||
detail.source_type === 'template' &&
|
||||
detail.template_id
|
||||
) {
|
||||
await router.push({
|
||||
name: "article-wizard",
|
||||
name: 'article-wizard',
|
||||
query: {
|
||||
template_id: String(detail.template_id),
|
||||
article_id: String(detail.id),
|
||||
},
|
||||
});
|
||||
return;
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
await router.push({ name: "article-editor", params: { id: String(detail.id) } });
|
||||
await router.push({ name: 'article-editor', params: { id: String(detail.id) } })
|
||||
} catch (error) {
|
||||
message.error(formatError(error) || t("common.noData"));
|
||||
message.error(formatError(error) || t('common.noData'))
|
||||
}
|
||||
}
|
||||
|
||||
function openPublish(article: ArticleListItem): void {
|
||||
selectedPublishArticleId.value = article.id;
|
||||
publishModalOpen.value = true;
|
||||
selectedPublishArticleId.value = article.id
|
||||
publishModalOpen.value = true
|
||||
}
|
||||
|
||||
function openPreview(article: ArticleListItem): void {
|
||||
selectedArticleId.value = article.id;
|
||||
articleDrawerOpen.value = true;
|
||||
selectedArticleId.value = article.id
|
||||
articleDrawerOpen.value = true
|
||||
}
|
||||
|
||||
watch(
|
||||
@@ -370,69 +383,69 @@ watch(
|
||||
(items: ArticleListItem[]) => {
|
||||
const hasGeneratingArticles = items.some((item: ArticleListItem) =>
|
||||
hasActiveGenerationStatus(item.generate_status),
|
||||
);
|
||||
)
|
||||
|
||||
if (hasGeneratingArticles) {
|
||||
startArticlePolling();
|
||||
return;
|
||||
startArticlePolling()
|
||||
return
|
||||
}
|
||||
|
||||
stopArticlePolling();
|
||||
stopArticlePolling()
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
stopArticlePolling();
|
||||
});
|
||||
stopArticlePolling()
|
||||
})
|
||||
|
||||
function handleTableChange(nextPage: number, nextPageSize: number): void {
|
||||
page.value = nextPage;
|
||||
pageSize.value = nextPageSize;
|
||||
page.value = nextPage
|
||||
pageSize.value = nextPageSize
|
||||
}
|
||||
|
||||
function startArticlePolling(): void {
|
||||
if (articlePollingTimer !== null) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
articlePollingTimer = window.setInterval(() => {
|
||||
void Promise.all([articleListQuery.refetch(), recentArticlesQuery.refetch()]);
|
||||
}, 10000);
|
||||
void Promise.all([articleListQuery.refetch(), recentArticlesQuery.refetch()])
|
||||
}, 10000)
|
||||
}
|
||||
|
||||
function stopArticlePolling(): void {
|
||||
if (articlePollingTimer === null) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
window.clearInterval(articlePollingTimer);
|
||||
articlePollingTimer = null;
|
||||
window.clearInterval(articlePollingTimer)
|
||||
articlePollingTimer = null
|
||||
}
|
||||
|
||||
async function handleDelete(articleId: number): Promise<void> {
|
||||
await deleteMutation.mutateAsync(articleId);
|
||||
await deleteMutation.mutateAsync(articleId)
|
||||
}
|
||||
|
||||
async function copyArticle(articleId: number): Promise<void> {
|
||||
try {
|
||||
const detail = await articlesApi.detail(articleId);
|
||||
const content = buildArticleClipboardContent(detail);
|
||||
const detail = await articlesApi.detail(articleId)
|
||||
const content = buildArticleClipboardContent(detail)
|
||||
|
||||
if (!content) {
|
||||
message.warning(t("common.noData"));
|
||||
return;
|
||||
message.warning(t('common.noData'))
|
||||
return
|
||||
}
|
||||
|
||||
await navigator.clipboard.writeText(content);
|
||||
message.success(t("common.copySuccess"));
|
||||
await navigator.clipboard.writeText(content)
|
||||
message.success(t('common.copySuccess'))
|
||||
} catch (error) {
|
||||
message.error(formatError(error) || t("common.noData"));
|
||||
message.error(formatError(error) || t('common.noData'))
|
||||
}
|
||||
}
|
||||
|
||||
function refreshRecords(): void {
|
||||
void Promise.all([articleListQuery.refetch(), recentArticlesQuery.refetch()]);
|
||||
void Promise.all([articleListQuery.refetch(), recentArticlesQuery.refetch()])
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -447,21 +460,21 @@ function refreshRecords(): void {
|
||||
<div class="templates-view__header-actions">
|
||||
<a-button class="batch-generate-btn">
|
||||
<template #icon><BlockOutlined /></template>
|
||||
{{ t("templates.actions.batchGenerate") }}
|
||||
{{ t('templates.actions.batchGenerate') }}
|
||||
</a-button>
|
||||
<a-button type="primary" class="templates-view__create-btn" @click="openTemplatePicker">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
{{ t("templates.actions.chooseTemplate") }}
|
||||
{{ t('templates.actions.chooseTemplate') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-divider style="margin: 0; border-color: #f0f0f0;" />
|
||||
<a-divider style="margin: 0; border-color: #f0f0f0" />
|
||||
|
||||
<div class="templates-view__filters">
|
||||
<div class="templates-view__filters-inline">
|
||||
<div class="templates-view__filter-item">
|
||||
<label>{{ t("templates.filters.template") }}:</label>
|
||||
<label>{{ t('templates.filters.template') }}:</label>
|
||||
<a-select
|
||||
v-model:value="draftFilters.template_filter"
|
||||
allow-clear
|
||||
@@ -472,7 +485,7 @@ function refreshRecords(): void {
|
||||
</div>
|
||||
|
||||
<div class="templates-view__filter-item">
|
||||
<label>{{ t("templates.filters.publishStatus") }}:</label>
|
||||
<label>{{ t('templates.filters.publishStatus') }}:</label>
|
||||
<a-select
|
||||
v-model:value="draftFilters.publish_status"
|
||||
allow-clear
|
||||
@@ -483,7 +496,7 @@ function refreshRecords(): void {
|
||||
</div>
|
||||
|
||||
<div class="templates-view__filter-item">
|
||||
<label>{{ t("templates.filters.generationTime") }}:</label>
|
||||
<label>{{ t('templates.filters.generationTime') }}:</label>
|
||||
<a-range-picker
|
||||
v-model:value="draftGenerationRange"
|
||||
allow-clear
|
||||
@@ -498,7 +511,7 @@ function refreshRecords(): void {
|
||||
</div>
|
||||
|
||||
<div class="templates-view__filter-item">
|
||||
<label>{{ t("templates.filters.generateStatus") }}:</label>
|
||||
<label>{{ t('templates.filters.generateStatus') }}:</label>
|
||||
<a-select
|
||||
v-model:value="draftFilters.generate_status"
|
||||
allow-clear
|
||||
@@ -509,7 +522,7 @@ function refreshRecords(): void {
|
||||
</div>
|
||||
|
||||
<div class="templates-view__filter-item">
|
||||
<label>{{ t("templates.filters.keyword") }}:</label>
|
||||
<label>{{ t('templates.filters.keyword') }}:</label>
|
||||
<a-input-search
|
||||
v-model:value="draftFilters.keyword"
|
||||
:placeholder="t('templates.filters.keywordPlaceholder')"
|
||||
@@ -518,7 +531,9 @@ function refreshRecords(): void {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<a-button @click="resetFilters" class="templates-view__reset-btn">{{ t("common.reset") }}</a-button>
|
||||
<a-button class="templates-view__reset-btn" @click="resetFilters">
|
||||
{{ t('common.reset') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -526,11 +541,11 @@ function refreshRecords(): void {
|
||||
<section class="templates-view__table-card">
|
||||
<div class="templates-view__table-head">
|
||||
<div>
|
||||
<p class="eyebrow">{{ t("templates.list.eyebrow") }}</p>
|
||||
<h3>{{ t("templates.list.count", { count: displayedArticleTotal }) }}</h3>
|
||||
<p class="eyebrow">{{ t('templates.list.eyebrow') }}</p>
|
||||
<h3>{{ t('templates.list.count', { count: displayedArticleTotal }) }}</h3>
|
||||
</div>
|
||||
<a-button type="link" @click="refreshRecords">
|
||||
{{ t("common.refresh") }}
|
||||
{{ t('common.refresh') }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
@@ -552,12 +567,12 @@ function refreshRecords(): void {
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #emptyText>{{ t("templates.list.empty") }}</template>
|
||||
<template #emptyText>{{ t('templates.list.empty') }}</template>
|
||||
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'title'">
|
||||
<div class="templates-view__title-cell">
|
||||
<strong>{{ record.title || t("article.untitled") }}</strong>
|
||||
<strong>{{ record.title || t('article.untitled') }}</strong>
|
||||
<ArticleSourceMeta
|
||||
:source-type="record.source_type"
|
||||
:generation-mode="record.generation_mode"
|
||||
@@ -567,7 +582,7 @@ function refreshRecords(): void {
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'template_name'">
|
||||
{{ record.template_name || "--" }}
|
||||
{{ record.template_name || '--' }}
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'generate_status'">
|
||||
@@ -575,14 +590,11 @@ function refreshRecords(): void {
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'publish_status'">
|
||||
<ArticlePublishStatus
|
||||
:status="record.publish_status"
|
||||
:article-id="record.id"
|
||||
/>
|
||||
<ArticlePublishStatus :status="record.publish_status" :article-id="record.id" />
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'word_count'">
|
||||
{{ record.word_count || "--" }}
|
||||
{{ record.word_count || '--' }}
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'actions'">
|
||||
@@ -609,7 +621,7 @@ function refreshRecords(): void {
|
||||
class="templates-view__drawer"
|
||||
>
|
||||
<div class="templates-view__drawer-intro">
|
||||
<p>{{ t("route.templates.description") }}</p>
|
||||
<p>{{ t('route.templates.description') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="templates-view__drawer-mode-grid">
|
||||
@@ -623,8 +635,8 @@ function refreshRecords(): void {
|
||||
<AppstoreOutlined />
|
||||
</span>
|
||||
<span class="templates-view__drawer-mode-copy">
|
||||
<strong>{{ t("templates.sections.generalTemplates") }}</strong>
|
||||
<small>{{ t("templates.picker.generalDescription") }}</small>
|
||||
<strong>{{ t('templates.sections.generalTemplates') }}</strong>
|
||||
<small>{{ t('templates.picker.generalDescription') }}</small>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@@ -638,16 +650,16 @@ function refreshRecords(): void {
|
||||
<ThunderboltOutlined />
|
||||
</span>
|
||||
<span class="templates-view__drawer-mode-copy">
|
||||
<strong>{{ t("templates.sections.refinedTemplates") }}</strong>
|
||||
<small>{{ t("templates.picker.refinedDescription") }}</small>
|
||||
<strong>{{ t('templates.sections.refinedTemplates') }}</strong>
|
||||
<small>{{ t('templates.picker.refinedDescription') }}</small>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="pickerMode === 'general'" class="templates-view__drawer-panel">
|
||||
<div class="templates-view__drawer-panel-head">
|
||||
<p class="eyebrow">{{ t("templates.sections.generalTemplates") }}</p>
|
||||
<h3>{{ t("templates.sections.generalTemplates") }}</h3>
|
||||
<p class="eyebrow">{{ t('templates.sections.generalTemplates') }}</p>
|
||||
<h3>{{ t('templates.sections.generalTemplates') }}</h3>
|
||||
</div>
|
||||
<div class="template-cards-container">
|
||||
<article
|
||||
@@ -672,10 +684,10 @@ function refreshRecords(): void {
|
||||
|
||||
<div v-else-if="pickerMode === 'refined'" class="templates-view__drawer-panel">
|
||||
<div class="templates-view__drawer-panel-head">
|
||||
<p class="eyebrow">{{ t("templates.sections.refinedTemplates") }}</p>
|
||||
<h3>{{ t("templates.sections.refinedTemplates") }}</h3>
|
||||
<p class="eyebrow">{{ t('templates.sections.refinedTemplates') }}</p>
|
||||
<h3>{{ t('templates.sections.refinedTemplates') }}</h3>
|
||||
</div>
|
||||
<div class="templates-view__kol-grid" v-if="kolCardsQuery.data.value?.length">
|
||||
<div v-if="kolCardsQuery.data.value?.length" class="templates-view__kol-grid">
|
||||
<article
|
||||
v-for="card in kolCardsQuery.data.value"
|
||||
:key="card.subscription_prompt_id"
|
||||
@@ -690,24 +702,30 @@ function refreshRecords(): void {
|
||||
<AppstoreOutlined class="templates-view__fallback-icon" />
|
||||
</div>
|
||||
<div class="templates-view__kol-hover-overlay">
|
||||
<ArrowRightOutlined />
|
||||
<ArrowRightOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div class="templates-view__kol-content">
|
||||
<h4 class="templates-view__kol-title" :title="card.prompt_name">{{ card.prompt_name }}</h4>
|
||||
<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>
|
||||
<span class="templates-view__kol-prompt" :title="card.package_name">
|
||||
{{ card.package_name }}
|
||||
</span>
|
||||
<span class="templates-view__kol-updated-at">
|
||||
{{ t("common.updatedAt") }}: {{ formatDateTime(card.updated_at) }}
|
||||
{{ t('common.updatedAt') }}: {{ formatDateTime(card.updated_at) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="templates-view__kol-footer">
|
||||
<div class="templates-view__kol-author">
|
||||
<div class="templates-view__author-avatar">{{ card.kol_display_name?.[0]?.toUpperCase() || 'K' }}</div>
|
||||
<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">
|
||||
<div v-if="card.platform_hint" class="templates-view__kol-platform">
|
||||
{{ card.platform_hint }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -720,10 +738,7 @@ function refreshRecords(): void {
|
||||
<a-empty v-else :description="t('templates.picker.empty')" />
|
||||
</a-drawer>
|
||||
|
||||
<PublishArticleModal
|
||||
v-model:open="publishModalOpen"
|
||||
:article-id="selectedPublishArticleId"
|
||||
/>
|
||||
<PublishArticleModal v-model:open="publishModalOpen" :article-id="selectedPublishArticleId" />
|
||||
|
||||
<ArticleDetailDrawer
|
||||
:open="articleDrawerOpen"
|
||||
@@ -881,7 +896,9 @@ function refreshRecords(): void {
|
||||
|
||||
.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);
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -990,13 +1007,15 @@ function refreshRecords(): void {
|
||||
padding: 20px 16px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.template-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0,0,0,0.06);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.template-icon-wrapper {
|
||||
@@ -1041,24 +1060,39 @@ function refreshRecords(): void {
|
||||
background: linear-gradient(180deg, #fffbf2 0%, #fff6e0 100%);
|
||||
border: 1px solid #ffecb3;
|
||||
}
|
||||
.bg-yellow { background: #ffe58f; color: #fa8c16; }
|
||||
.card-yellow .template-action { color: #fa8c16; }
|
||||
.bg-yellow {
|
||||
background: #ffe58f;
|
||||
color: #fa8c16;
|
||||
}
|
||||
.card-yellow .template-action {
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
/* Light Blue Product Review */
|
||||
.card-blue-light {
|
||||
background: linear-gradient(180deg, #f0f7ff 0%, #e6f0ff 100%);
|
||||
border: 1px solid #d6e4ff;
|
||||
}
|
||||
.bg-blue-light { background: #bae0ff; color: #1677ff; }
|
||||
.card-blue-light .template-action { color: #1677ff; }
|
||||
.bg-blue-light {
|
||||
background: #bae0ff;
|
||||
color: #1677ff;
|
||||
}
|
||||
.card-blue-light .template-action {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
/* Blue Deep Research */
|
||||
.card-blue-deep {
|
||||
background: linear-gradient(135deg, #e6f4ff 0%, #d4e8ff 100%);
|
||||
border: 1px solid #bae0ff;
|
||||
}
|
||||
.bg-blue-deep { background: #91caff; color: #0958d9; }
|
||||
.card-blue-deep .template-action { color: #0958d9; }
|
||||
.bg-blue-deep {
|
||||
background: #91caff;
|
||||
color: #0958d9;
|
||||
}
|
||||
.card-blue-deep .template-action {
|
||||
color: #0958d9;
|
||||
}
|
||||
|
||||
/* Grey Expansion */
|
||||
.card-grey {
|
||||
@@ -1087,7 +1121,9 @@ function refreshRecords(): void {
|
||||
|
||||
.templates-view__kol-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -1117,7 +1153,7 @@ function refreshRecords(): void {
|
||||
}
|
||||
|
||||
.templates-view__kol-cover::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -16px;
|
||||
z-index: 0;
|
||||
@@ -1130,7 +1166,7 @@ function refreshRecords(): void {
|
||||
}
|
||||
|
||||
.templates-view__kol-cover::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
@@ -1172,7 +1208,7 @@ function refreshRecords(): void {
|
||||
.templates-view__kol-hover-overlay > .anticon {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
background: rgba(0,0,0,0.4);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
transform: translateY(10px);
|
||||
@@ -1279,8 +1315,13 @@ function refreshRecords(): void {
|
||||
}
|
||||
}
|
||||
|
||||
.bg-grey { background: #f0f0f0; color: #8c8c8c; }
|
||||
.card-grey .template-action { display: none; }
|
||||
.bg-grey {
|
||||
background: #f0f0f0;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
.card-grey .template-action {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.templates-view__header,
|
||||
|
||||
Reference in New Issue
Block a user