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,61 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import { LeftOutlined } from "@ant-design/icons-vue";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||
import { message } from "ant-design-vue";
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { LeftOutlined } from '@ant-design/icons-vue'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import ArticleEditorCanvas from "@/components/ArticleEditorCanvas.vue";
|
||||
import PublishArticleModal from "@/components/PublishArticleModal.vue";
|
||||
import { articlesApi } from "@/lib/api";
|
||||
import { formatError } from "@/lib/errors";
|
||||
import ArticleEditorCanvas from '@/components/ArticleEditorCanvas.vue'
|
||||
import PublishArticleModal from '@/components/PublishArticleModal.vue'
|
||||
import { articlesApi } from '@/lib/api'
|
||||
import { formatError } from '@/lib/errors'
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useI18n();
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const queryClient = useQueryClient()
|
||||
const { t } = useI18n()
|
||||
|
||||
const articleId = computed(() => Number(route.params.id));
|
||||
const title = ref("");
|
||||
const markdown = ref("");
|
||||
const initialTitle = ref("");
|
||||
const initialMarkdown = ref("");
|
||||
const leaveModalOpen = ref(false);
|
||||
const publishModalOpen = ref(false);
|
||||
const articleId = computed(() => Number(route.params.id))
|
||||
const title = ref('')
|
||||
const markdown = ref('')
|
||||
const initialTitle = ref('')
|
||||
const initialMarkdown = ref('')
|
||||
const leaveModalOpen = ref(false)
|
||||
const publishModalOpen = ref(false)
|
||||
|
||||
const detailQuery = useQuery({
|
||||
queryKey: computed(() => ["articles", "detail", articleId.value]),
|
||||
queryKey: computed(() => ['articles', 'detail', articleId.value]),
|
||||
enabled: computed(() => Number.isInteger(articleId.value) && articleId.value > 0),
|
||||
queryFn: () => articlesApi.detail(articleId.value),
|
||||
});
|
||||
})
|
||||
|
||||
watch(
|
||||
() => detailQuery.data.value,
|
||||
(detail) => {
|
||||
if (!detail) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
const nextTitle = detail.title ?? "";
|
||||
const nextMarkdown = stripLeadingTitleHeading(nextTitle, detail.markdown_content ?? "");
|
||||
const nextTitle = detail.title ?? ''
|
||||
const nextMarkdown = stripLeadingTitleHeading(nextTitle, detail.markdown_content ?? '')
|
||||
|
||||
title.value = nextTitle;
|
||||
markdown.value = nextMarkdown;
|
||||
initialTitle.value = nextTitle;
|
||||
initialMarkdown.value = nextMarkdown;
|
||||
title.value = nextTitle
|
||||
markdown.value = nextMarkdown
|
||||
initialTitle.value = nextTitle
|
||||
initialMarkdown.value = nextMarkdown
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
)
|
||||
|
||||
const detail = computed(() => detailQuery.data.value);
|
||||
const editorLocked = computed(() => detail.value?.generate_status !== "completed");
|
||||
const referencedImageAssetIds = computed(() => extractReferencedImageAssetIds(markdown.value));
|
||||
const detail = computed(() => detailQuery.data.value)
|
||||
const editorLocked = computed(() => detail.value?.generate_status !== 'completed')
|
||||
const referencedImageAssetIds = computed(() => extractReferencedImageAssetIds(markdown.value))
|
||||
const hasChanges = computed(
|
||||
() =>
|
||||
title.value.trim() !== initialTitle.value.trim() ||
|
||||
markdown.value !== initialMarkdown.value,
|
||||
);
|
||||
title.value.trim() !== initialTitle.value.trim() || markdown.value !== initialMarkdown.value,
|
||||
)
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
@@ -65,212 +64,218 @@ const saveMutation = useMutation({
|
||||
referenced_image_asset_ids: referencedImageAssetIds.value,
|
||||
}),
|
||||
onSuccess: async (data) => {
|
||||
message.success(t("article.editor.messages.saved"));
|
||||
title.value = data.title ?? "";
|
||||
markdown.value = data.markdown_content ?? "";
|
||||
initialTitle.value = title.value;
|
||||
initialMarkdown.value = markdown.value;
|
||||
message.success(t('article.editor.messages.saved'))
|
||||
title.value = data.title ?? ''
|
||||
markdown.value = data.markdown_content ?? ''
|
||||
initialTitle.value = title.value
|
||||
initialMarkdown.value = markdown.value
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["articles"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["workspace"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["templates"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["articles", "detail", articleId.value] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["articles", "detail", articleId.value, "publish-modal"] }),
|
||||
]);
|
||||
queryClient.invalidateQueries({ queryKey: ['articles'] }),
|
||||
queryClient.invalidateQueries({ queryKey: ['workspace'] }),
|
||||
queryClient.invalidateQueries({ queryKey: ['templates'] }),
|
||||
queryClient.invalidateQueries({ queryKey: ['articles', 'detail', articleId.value] }),
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ['articles', 'detail', articleId.value, 'publish-modal'],
|
||||
}),
|
||||
])
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(formatError(error));
|
||||
message.error(formatError(error))
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const saveDisabled = computed(
|
||||
() => editorLocked.value || saveMutation.isPending.value || title.value.trim() === "" || !hasChanges.value,
|
||||
);
|
||||
() =>
|
||||
editorLocked.value ||
|
||||
saveMutation.isPending.value ||
|
||||
title.value.trim() === '' ||
|
||||
!hasChanges.value,
|
||||
)
|
||||
const leaveSaveDisabled = computed(
|
||||
() => editorLocked.value || saveMutation.isPending.value || title.value.trim() === "",
|
||||
);
|
||||
() => editorLocked.value || saveMutation.isPending.value || title.value.trim() === '',
|
||||
)
|
||||
|
||||
async function saveArticle(): Promise<boolean> {
|
||||
if (leaveSaveDisabled.value || !hasChanges.value) {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
|
||||
try {
|
||||
await saveMutation.mutateAsync();
|
||||
return true;
|
||||
await saveMutation.mutateAsync()
|
||||
return true
|
||||
} catch {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(): Promise<void> {
|
||||
if (saveDisabled.value) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
await saveArticle();
|
||||
await saveArticle()
|
||||
}
|
||||
|
||||
function handleSaveShortcut(event: KeyboardEvent): void {
|
||||
if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== "s") {
|
||||
return;
|
||||
if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== 's') {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
if (event.repeat || saveDisabled.value) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
void handleSave();
|
||||
void handleSave()
|
||||
}
|
||||
|
||||
async function handlePublish(): Promise<void> {
|
||||
if (editorLocked.value) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
if (hasChanges.value && !saveMutation.isPending.value) {
|
||||
try {
|
||||
await saveMutation.mutateAsync();
|
||||
await saveMutation.mutateAsync()
|
||||
} catch {
|
||||
return;
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
publishModalOpen.value = true;
|
||||
publishModalOpen.value = true
|
||||
}
|
||||
|
||||
async function uploadEditorImage(file: File): Promise<string> {
|
||||
const result = await articlesApi.uploadImage(articleId.value, file);
|
||||
return result.url;
|
||||
const result = await articlesApi.uploadImage(articleId.value, file)
|
||||
return result.url
|
||||
}
|
||||
|
||||
async function handlePublished(): Promise<void> {
|
||||
await Promise.all([
|
||||
detailQuery.refetch(),
|
||||
queryClient.invalidateQueries({ queryKey: ["articles"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["workspace"] }),
|
||||
]);
|
||||
queryClient.invalidateQueries({ queryKey: ['articles'] }),
|
||||
queryClient.invalidateQueries({ queryKey: ['workspace'] }),
|
||||
])
|
||||
}
|
||||
|
||||
const isFreeCreateEmpty = computed(
|
||||
() =>
|
||||
detail.value?.source_type === "free_create" &&
|
||||
title.value.trim() === "" &&
|
||||
markdown.value.trim() === "",
|
||||
);
|
||||
detail.value?.source_type === 'free_create' &&
|
||||
title.value.trim() === '' &&
|
||||
markdown.value.trim() === '',
|
||||
)
|
||||
|
||||
const isFreeCreateInitiallyEmpty = computed(
|
||||
() =>
|
||||
detail.value?.source_type === "free_create" &&
|
||||
initialTitle.value.trim() === "" &&
|
||||
initialMarkdown.value.trim() === "",
|
||||
);
|
||||
detail.value?.source_type === 'free_create' &&
|
||||
initialTitle.value.trim() === '' &&
|
||||
initialMarkdown.value.trim() === '',
|
||||
)
|
||||
|
||||
function handleBack(): void {
|
||||
if (saveMutation.isPending.value) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
if (isFreeCreateEmpty.value) {
|
||||
void cleanupEmptyFreeCreate();
|
||||
return;
|
||||
void cleanupEmptyFreeCreate()
|
||||
return
|
||||
}
|
||||
|
||||
if (hasChanges.value) {
|
||||
leaveModalOpen.value = true;
|
||||
return;
|
||||
leaveModalOpen.value = true
|
||||
return
|
||||
}
|
||||
|
||||
navigateBack();
|
||||
navigateBack()
|
||||
}
|
||||
|
||||
async function cleanupEmptyFreeCreate(): Promise<void> {
|
||||
try {
|
||||
await articlesApi.remove(articleId.value);
|
||||
await articlesApi.remove(articleId.value)
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["articles"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["workspace"] }),
|
||||
]);
|
||||
queryClient.invalidateQueries({ queryKey: ['articles'] }),
|
||||
queryClient.invalidateQueries({ queryKey: ['workspace'] }),
|
||||
])
|
||||
} catch {
|
||||
// ignore cleanup errors
|
||||
}
|
||||
navigateBack();
|
||||
navigateBack()
|
||||
}
|
||||
|
||||
function navigateBack(): void {
|
||||
if (window.history.length > 1) {
|
||||
void router.back();
|
||||
return;
|
||||
void router.back()
|
||||
return
|
||||
}
|
||||
|
||||
void router.push("/articles/templates");
|
||||
void router.push('/articles/templates')
|
||||
}
|
||||
|
||||
function handleStay(): void {
|
||||
leaveModalOpen.value = false;
|
||||
leaveModalOpen.value = false
|
||||
}
|
||||
|
||||
function handleDiscardLeave(): void {
|
||||
leaveModalOpen.value = false;
|
||||
leaveModalOpen.value = false
|
||||
if (isFreeCreateInitiallyEmpty.value) {
|
||||
void cleanupEmptyFreeCreate();
|
||||
return;
|
||||
void cleanupEmptyFreeCreate()
|
||||
return
|
||||
}
|
||||
navigateBack();
|
||||
navigateBack()
|
||||
}
|
||||
|
||||
async function handleSaveAndLeave(): Promise<void> {
|
||||
const saved = await saveArticle();
|
||||
const saved = await saveArticle()
|
||||
if (!saved) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
leaveModalOpen.value = false;
|
||||
navigateBack();
|
||||
leaveModalOpen.value = false
|
||||
navigateBack()
|
||||
}
|
||||
|
||||
function stripLeadingTitleHeading(titleValue: string, markdownValue: string): string {
|
||||
const normalizedTitle = titleValue.trim();
|
||||
const normalizedTitle = titleValue.trim()
|
||||
if (!normalizedTitle) {
|
||||
return markdownValue;
|
||||
return markdownValue
|
||||
}
|
||||
|
||||
const normalizedMarkdown = markdownValue.replace(/^\uFEFF/, "");
|
||||
const match = normalizedMarkdown.match(/^#\s+(.+?)\s*(\r?\n|$)/);
|
||||
const normalizedMarkdown = markdownValue.replace(/^\uFEFF/, '')
|
||||
const match = normalizedMarkdown.match(/^#\s+(.+?)\s*(\r?\n|$)/)
|
||||
if (!match) {
|
||||
return markdownValue;
|
||||
return markdownValue
|
||||
}
|
||||
|
||||
if (match[1].trim() !== normalizedTitle) {
|
||||
return markdownValue;
|
||||
return markdownValue
|
||||
}
|
||||
|
||||
return normalizedMarkdown.slice(match[0].length).replace(/^\s*\r?\n/, "");
|
||||
return normalizedMarkdown.slice(match[0].length).replace(/^\s*\r?\n/, '')
|
||||
}
|
||||
|
||||
function extractReferencedImageAssetIds(markdownValue: string): number[] {
|
||||
const ids = new Set<number>();
|
||||
const matcher = /data-asset-id=(?:"|')(\d+)(?:"|')/g;
|
||||
const ids = new Set<number>()
|
||||
const matcher = /data-asset-id=(?:"|')(\d+)(?:"|')/g
|
||||
|
||||
for (const match of markdownValue.matchAll(matcher)) {
|
||||
const id = Number.parseInt(match[1] ?? "", 10);
|
||||
const id = Number.parseInt(match[1] ?? '', 10)
|
||||
if (Number.isInteger(id) && id > 0) {
|
||||
ids.add(id);
|
||||
ids.add(id)
|
||||
}
|
||||
}
|
||||
|
||||
return [...ids];
|
||||
return [...ids]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("keydown", handleSaveShortcut);
|
||||
});
|
||||
window.addEventListener('keydown', handleSaveShortcut)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("keydown", handleSaveShortcut);
|
||||
});
|
||||
window.removeEventListener('keydown', handleSaveShortcut)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -278,7 +283,7 @@ onBeforeUnmount(() => {
|
||||
<header class="article-editor-view__topbar">
|
||||
<button class="article-editor-view__back" type="button" @click="handleBack">
|
||||
<LeftOutlined />
|
||||
<span>{{ t("common.back") }}</span>
|
||||
<span>{{ t('common.back') }}</span>
|
||||
</button>
|
||||
|
||||
<div class="article-editor-view__actions">
|
||||
@@ -289,10 +294,10 @@ onBeforeUnmount(() => {
|
||||
aria-keyshortcuts="Control+S Meta+S"
|
||||
@click="handleSave"
|
||||
>
|
||||
{{ t("common.save") }}
|
||||
{{ t('common.save') }}
|
||||
</a-button>
|
||||
<a-button type="primary" :disabled="editorLocked" @click="handlePublish">
|
||||
{{ t("article.editor.publish") }}
|
||||
{{ t('article.editor.publish') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</header>
|
||||
@@ -313,9 +318,9 @@ onBeforeUnmount(() => {
|
||||
<section class="article-editor-view__main">
|
||||
<ArticleEditorCanvas
|
||||
:key="String(articleId)"
|
||||
:article-id="articleId"
|
||||
v-model:title="title"
|
||||
v-model="markdown"
|
||||
:article-id="articleId"
|
||||
:disabled="editorLocked"
|
||||
:upload-image="uploadEditorImage"
|
||||
/>
|
||||
@@ -333,15 +338,15 @@ onBeforeUnmount(() => {
|
||||
@cancel="handleStay"
|
||||
>
|
||||
<p class="article-editor-view__leave-copy">
|
||||
{{ t("article.editor.leaveConfirm.description") }}
|
||||
{{ t('article.editor.leaveConfirm.description') }}
|
||||
</p>
|
||||
|
||||
<template #footer>
|
||||
<a-button @click="handleStay">
|
||||
{{ t("common.cancel") }}
|
||||
{{ t('common.cancel') }}
|
||||
</a-button>
|
||||
<a-button @click="handleDiscardLeave">
|
||||
{{ t("article.editor.leaveConfirm.discard") }}
|
||||
{{ t('article.editor.leaveConfirm.discard') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@@ -349,7 +354,7 @@ onBeforeUnmount(() => {
|
||||
:disabled="leaveSaveDisabled"
|
||||
@click="handleSaveAndLeave"
|
||||
>
|
||||
{{ t("article.editor.leaveConfirm.saveAndLeave") }}
|
||||
{{ t('article.editor.leaveConfirm.saveAndLeave') }}
|
||||
</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
||||
Reference in New Issue
Block a user