feat: add EditorGridSizePicker and EditorSelectionFrame components; implement FreeCreateView for article management; introduce ArticleSelectionOptimizeService for optimizing article selections
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,299 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type Component, type CSSProperties } from "vue";
|
||||
|
||||
type EditorActionMenuItem = {
|
||||
key: string;
|
||||
label: string;
|
||||
icon?: Component;
|
||||
danger?: boolean;
|
||||
disabled?: boolean;
|
||||
active?: boolean;
|
||||
};
|
||||
|
||||
type EditorActionMenuGroup = {
|
||||
key: string;
|
||||
columns?: number;
|
||||
items: EditorActionMenuItem[];
|
||||
};
|
||||
|
||||
const props = defineProps<{
|
||||
x: number;
|
||||
y: number;
|
||||
groups: EditorActionMenuGroup[];
|
||||
variant?: "tile" | "inline";
|
||||
minWidth?: string;
|
||||
maxWidth?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [key: string];
|
||||
}>();
|
||||
|
||||
const menuRef = ref<HTMLElement | null>(null);
|
||||
const frame = ref({
|
||||
x: props.x,
|
||||
y: props.y,
|
||||
});
|
||||
|
||||
const resolvedVariant = computed(() => props.variant ?? "inline");
|
||||
|
||||
const menuStyle = computed<CSSProperties>(() => {
|
||||
const style: CSSProperties = {
|
||||
left: `${frame.value.x}px`,
|
||||
top: `${frame.value.y}px`,
|
||||
};
|
||||
|
||||
if (props.minWidth) {
|
||||
style.minWidth = props.minWidth;
|
||||
}
|
||||
|
||||
if (props.maxWidth) {
|
||||
style.maxWidth = props.maxWidth;
|
||||
}
|
||||
|
||||
return style;
|
||||
});
|
||||
|
||||
function clamp(value: number, min: number, max: number): number {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
}
|
||||
|
||||
function syncMenuFrame(): void {
|
||||
void nextTick(() => {
|
||||
const menu = menuRef.value;
|
||||
if (!menu) {
|
||||
return;
|
||||
}
|
||||
|
||||
const offset = 16;
|
||||
frame.value = {
|
||||
x: clamp(props.x, offset, Math.max(offset, window.innerWidth - menu.offsetWidth - offset)),
|
||||
y: clamp(props.y, offset, Math.max(offset, window.innerHeight - menu.offsetHeight - offset)),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function handleWindowResize(): void {
|
||||
syncMenuFrame();
|
||||
}
|
||||
|
||||
function handleSelect(item: EditorActionMenuItem): void {
|
||||
if (item.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit("select", item.key);
|
||||
}
|
||||
|
||||
function resolveGroupStyle(group: EditorActionMenuGroup): CSSProperties {
|
||||
return {
|
||||
gridTemplateColumns: `repeat(${Math.max(group.columns ?? group.items.length, 1)}, minmax(0, 1fr))`,
|
||||
};
|
||||
}
|
||||
|
||||
watch(
|
||||
() => ({
|
||||
x: props.x,
|
||||
y: props.y,
|
||||
groups: props.groups,
|
||||
minWidth: props.minWidth,
|
||||
maxWidth: props.maxWidth,
|
||||
variant: resolvedVariant.value,
|
||||
}),
|
||||
() => {
|
||||
syncMenuFrame();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
flush: "post",
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("resize", handleWindowResize);
|
||||
syncMenuFrame();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", handleWindowResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
ref="menuRef"
|
||||
class="editor-action-menu"
|
||||
:class="`editor-action-menu--${resolvedVariant}`"
|
||||
:style="menuStyle"
|
||||
@pointerdown.stop
|
||||
@contextmenu.prevent
|
||||
>
|
||||
<template v-for="(group, groupIndex) in groups" :key="group.key">
|
||||
<div class="editor-action-menu__group" :style="resolveGroupStyle(group)">
|
||||
<button
|
||||
v-for="item in group.items"
|
||||
:key="item.key"
|
||||
type="button"
|
||||
class="editor-action-menu__action"
|
||||
:class="{
|
||||
'editor-action-menu__action--active': item.active,
|
||||
'editor-action-menu__action--danger': item.danger,
|
||||
}"
|
||||
:disabled="item.disabled"
|
||||
@click="handleSelect(item)"
|
||||
>
|
||||
<component :is="item.icon" v-if="item.icon" />
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="groupIndex < groups.length - 1" class="editor-action-menu__divider"></div>
|
||||
</template>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor-action-menu {
|
||||
position: fixed;
|
||||
z-index: 1200;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-action-menu--tile {
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
border: 1px solid #edf2fa;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow:
|
||||
0 20px 48px rgba(15, 23, 42, 0.08),
|
||||
0 6px 16px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.editor-action-menu--inline {
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid #e8eef8;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 100%);
|
||||
box-shadow:
|
||||
0 20px 48px rgba(15, 23, 42, 0.1),
|
||||
0 6px 18px rgba(15, 23, 42, 0.06);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.editor-action-menu__group {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.editor-action-menu--inline .editor-action-menu__group {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.editor-action-menu__divider {
|
||||
height: 1px;
|
||||
background: #f0f3f8;
|
||||
}
|
||||
|
||||
.editor-action-menu__action {
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.editor-action-menu__action span {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.editor-action-menu__action :deep(svg) {
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.editor-action-menu--tile .editor-action-menu__action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
min-height: 86px;
|
||||
padding: 12px 10px;
|
||||
border-radius: 12px;
|
||||
background: #f7f9fa;
|
||||
color: #3f4a5c;
|
||||
}
|
||||
|
||||
.editor-action-menu--tile .editor-action-menu__action span {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.editor-action-menu--tile .editor-action-menu__action :deep(svg) {
|
||||
font-size: 22px;
|
||||
color: #5c6b81;
|
||||
}
|
||||
|
||||
.editor-action-menu--tile .editor-action-menu__action:hover:not(:disabled) {
|
||||
background: #eff4ff;
|
||||
border-color: #c2d6ff;
|
||||
color: #245bdb;
|
||||
}
|
||||
|
||||
.editor-action-menu--tile .editor-action-menu__action:hover:not(:disabled) :deep(svg) {
|
||||
color: #245bdb;
|
||||
}
|
||||
|
||||
.editor-action-menu--inline .editor-action-menu__action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 46px;
|
||||
padding: 0 14px;
|
||||
border-radius: 12px;
|
||||
background: #f7f9fc;
|
||||
color: #344054;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.editor-action-menu--inline .editor-action-menu__action :deep(svg) {
|
||||
font-size: 18px;
|
||||
color: #52607a;
|
||||
}
|
||||
|
||||
.editor-action-menu--inline .editor-action-menu__action:hover:not(:disabled),
|
||||
.editor-action-menu--inline .editor-action-menu__action--active {
|
||||
border-color: #c8d8ff;
|
||||
background: #edf4ff;
|
||||
color: #245bdb;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.editor-action-menu--inline .editor-action-menu__action:hover:not(:disabled) :deep(svg),
|
||||
.editor-action-menu--inline .editor-action-menu__action--active :deep(svg) {
|
||||
color: #245bdb;
|
||||
}
|
||||
|
||||
.editor-action-menu__action--danger:hover:not(:disabled) {
|
||||
border-color: #ffd2cf;
|
||||
background: #fff1f0;
|
||||
color: #cf1322;
|
||||
}
|
||||
|
||||
.editor-action-menu__action--danger:hover:not(:disabled) :deep(svg) {
|
||||
color: #cf1322;
|
||||
}
|
||||
|
||||
.editor-action-menu--tile .editor-action-menu__action:disabled {
|
||||
opacity: 0.46;
|
||||
}
|
||||
|
||||
.editor-action-menu__action:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,586 @@
|
||||
<script setup lang="ts">
|
||||
import { CheckOutlined, CloseOutlined, DeleteOutlined, LoadingOutlined, RedoOutlined } from "@ant-design/icons-vue";
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type CSSProperties } from "vue";
|
||||
|
||||
type EditorAiAssistStatus = "idle" | "generating" | "completed" | "error";
|
||||
|
||||
const props = defineProps<{
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
prompt: string;
|
||||
status: EditorAiAssistStatus;
|
||||
streaming: boolean;
|
||||
hasPreview: boolean;
|
||||
error: string;
|
||||
title: string;
|
||||
promptPlaceholder: string;
|
||||
continuePlaceholder?: string;
|
||||
loadingLabel: string;
|
||||
errorLabel: string;
|
||||
disclaimer: string;
|
||||
historyLabel?: string;
|
||||
regenerateLabel: string;
|
||||
discardLabel: string;
|
||||
applyLabel: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
"update:prompt": [value: string];
|
||||
submit: [];
|
||||
close: [];
|
||||
reset: [];
|
||||
apply: [];
|
||||
}>();
|
||||
|
||||
const IDLE_MAX_WIDTH = 760;
|
||||
|
||||
const panelRef = ref<HTMLElement | null>(null);
|
||||
const promptInputRef = ref<HTMLInputElement | null>(null);
|
||||
const frame = ref({
|
||||
x: props.x,
|
||||
y: props.y,
|
||||
width: props.width,
|
||||
});
|
||||
|
||||
const promptValue = computed({
|
||||
get: () => props.prompt,
|
||||
set: (value: string) => {
|
||||
emit("update:prompt", value);
|
||||
},
|
||||
});
|
||||
|
||||
const resolvedContinuePlaceholder = computed(
|
||||
() => props.continuePlaceholder?.trim() || props.promptPlaceholder,
|
||||
);
|
||||
|
||||
const panelStyle = computed<CSSProperties>(() => ({
|
||||
left: `${frame.value.x}px`,
|
||||
top: `${frame.value.y}px`,
|
||||
width: `${frame.value.width}px`,
|
||||
}));
|
||||
|
||||
function clamp(value: number, min: number, max: number): number {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
}
|
||||
|
||||
function syncPanelFrame(): void {
|
||||
void nextTick(() => {
|
||||
const panel = panelRef.value;
|
||||
if (!panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
const offset = 16;
|
||||
const maxWidth = Math.max(240, window.innerWidth - offset * 2);
|
||||
const width =
|
||||
props.status === "idle"
|
||||
? Math.min(props.width, maxWidth, IDLE_MAX_WIDTH)
|
||||
: Math.min(props.width, maxWidth);
|
||||
frame.value = {
|
||||
x: clamp(props.x - width / 2, offset, Math.max(offset, window.innerWidth - width - offset)),
|
||||
y: clamp(props.y, offset, Math.max(offset, window.innerHeight - panel.offsetHeight - offset)),
|
||||
width,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function focusPromptInput(): void {
|
||||
if (props.status !== "idle") {
|
||||
return;
|
||||
}
|
||||
|
||||
void nextTick(() => {
|
||||
promptInputRef.value?.focus();
|
||||
promptInputRef.value?.setSelectionRange(props.prompt.length, props.prompt.length);
|
||||
});
|
||||
}
|
||||
|
||||
function handleWindowResize(): void {
|
||||
syncPanelFrame();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => ({
|
||||
x: props.x,
|
||||
y: props.y,
|
||||
width: props.width,
|
||||
status: props.status,
|
||||
hasPreview: props.hasPreview,
|
||||
error: props.error,
|
||||
}),
|
||||
() => {
|
||||
syncPanelFrame();
|
||||
focusPromptInput();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
flush: "post",
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("resize", handleWindowResize);
|
||||
syncPanelFrame();
|
||||
focusPromptInput();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", handleWindowResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
ref="panelRef"
|
||||
class="editor-ai-assist"
|
||||
:style="panelStyle"
|
||||
@pointerdown.stop
|
||||
@contextmenu.prevent
|
||||
>
|
||||
<div class="editor-ai-assist__shell">
|
||||
<div v-if="status === 'idle'" class="editor-ai-assist__bar">
|
||||
<div class="editor-ai-assist__bar-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M6.75 15.25L8.78 9.78L14.25 7.75L12.22 13.22L6.75 15.25Z" stroke="url(#editor-ai-assist-gradient)" stroke-width="2" stroke-linejoin="round" />
|
||||
<path d="M14.5 4.5L15.07 6.43L17 7L15.07 7.57L14.5 9.5L13.93 7.57L12 7L13.93 6.43L14.5 4.5Z" fill="url(#editor-ai-assist-gradient)" />
|
||||
<path d="M18 13L18.58 14.92L20.5 15.5L18.58 16.08L18 18L17.42 16.08L15.5 15.5L17.42 14.92L18 13Z" fill="url(#editor-ai-assist-gradient)" />
|
||||
<defs>
|
||||
<linearGradient id="editor-ai-assist-gradient" x1="4.5" y1="4.5" x2="20.5" y2="18.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#245bdb" />
|
||||
<stop offset="1" stop-color="#ef5da8" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="editor-ai-assist__bar-label">{{ title }}</span>
|
||||
<input
|
||||
ref="promptInputRef"
|
||||
v-model="promptValue"
|
||||
type="text"
|
||||
class="editor-ai-assist__bar-input"
|
||||
:placeholder="promptPlaceholder"
|
||||
@keydown.enter.prevent="emit('submit')"
|
||||
/>
|
||||
<div class="editor-ai-assist__bar-actions">
|
||||
<button type="button" class="editor-ai-assist__icon-button" @click="emit('close')">
|
||||
<CloseOutlined />
|
||||
</button>
|
||||
<span class="editor-ai-assist__divider"></span>
|
||||
<button type="button" class="editor-ai-assist__send-button" @click="emit('submit')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="22" y1="2" x2="11" y2="13"></line>
|
||||
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="editor-ai-assist__result">
|
||||
<div class="editor-ai-assist__result-box">
|
||||
<div class="editor-ai-assist__result-content">
|
||||
<slot v-if="hasPreview" name="preview"></slot>
|
||||
<div v-else-if="streaming" class="editor-ai-assist__placeholder">
|
||||
<LoadingOutlined />
|
||||
<span>{{ loadingLabel }}</span>
|
||||
</div>
|
||||
<div v-else class="editor-ai-assist__placeholder editor-ai-assist__placeholder--error">
|
||||
{{ error || errorLabel }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-ai-assist__result-footer">
|
||||
<span>{{ disclaimer }}</span>
|
||||
<span class="editor-ai-assist__result-badges">
|
||||
<CheckOutlined />
|
||||
<span class="editor-ai-assist__thumb">👍</span>
|
||||
<span class="editor-ai-assist__thumb editor-ai-assist__thumb--down">👍</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-ai-assist__toolbar">
|
||||
<div class="editor-ai-assist__toolbar-head">
|
||||
<button type="button" class="editor-ai-assist__back-button" @click="emit('reset')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="19" y1="12" x2="5" y2="12"></line>
|
||||
<polyline points="12 19 5 12 12 5"></polyline>
|
||||
</svg>
|
||||
<span>{{ title }}</span>
|
||||
</button>
|
||||
<div class="editor-ai-assist__history">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
<span>{{ historyLabel || "1/1" }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="editor-ai-assist__icon-button editor-ai-assist__icon-button--close"
|
||||
@click="emit('close')"
|
||||
>
|
||||
<CloseOutlined />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-ai-assist__toolbar-body">
|
||||
<div class="editor-ai-assist__continue">
|
||||
<input
|
||||
v-model="promptValue"
|
||||
type="text"
|
||||
:placeholder="resolvedContinuePlaceholder"
|
||||
@keydown.enter.prevent="emit('submit')"
|
||||
/>
|
||||
<button type="button" class="editor-ai-assist__continue-send" @click="emit('submit')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="22" y1="2" x2="11" y2="13"></line>
|
||||
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="editor-ai-assist__toolbar-actions">
|
||||
<button type="button" class="editor-ai-assist__toolbar-button" @click="emit('submit')">
|
||||
<RedoOutlined />
|
||||
<span>{{ regenerateLabel }}</span>
|
||||
</button>
|
||||
<button type="button" class="editor-ai-assist__toolbar-button" @click="emit('close')">
|
||||
<DeleteOutlined />
|
||||
<span>{{ discardLabel }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="editor-ai-assist__toolbar-button editor-ai-assist__toolbar-button--primary"
|
||||
@click="emit('apply')"
|
||||
>
|
||||
<span>{{ applyLabel }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor-ai-assist {
|
||||
position: fixed;
|
||||
z-index: 1300;
|
||||
max-width: min(1120px, calc(100vw - 32px));
|
||||
}
|
||||
|
||||
.editor-ai-assist__shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-ai-assist__bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 999px;
|
||||
background: #ffffff;
|
||||
box-shadow:
|
||||
0 4px 20px rgba(15, 23, 42, 0.08),
|
||||
0 0 0 1px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.editor-ai-assist__bar-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__bar-label {
|
||||
color: #101828;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.editor-ai-assist__bar-input {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: #344054;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__bar-input::placeholder {
|
||||
color: #98a2b3;
|
||||
}
|
||||
|
||||
.editor-ai-assist__bar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
margin: 0 4px;
|
||||
background: #eaecf0;
|
||||
}
|
||||
|
||||
.editor-ai-assist__icon-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: #667085;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.editor-ai-assist__icon-button:hover {
|
||||
background: #f2f4f7;
|
||||
color: #344054;
|
||||
}
|
||||
|
||||
.editor-ai-assist__send-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: #245bdb;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 8px rgba(36, 91, 219, 0.28);
|
||||
}
|
||||
|
||||
.editor-ai-assist__send-button:hover {
|
||||
background: #1d4fc4;
|
||||
}
|
||||
|
||||
.editor-ai-assist__result {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(15, 23, 42, 0.1),
|
||||
0 0 0 1px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.editor-ai-assist__result-box {
|
||||
margin: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #eef2f6;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.editor-ai-assist__result-content {
|
||||
min-height: 80px;
|
||||
max-height: 300px;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
color: #101828;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.editor-ai-assist__placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #667085;
|
||||
}
|
||||
|
||||
.editor-ai-assist__placeholder--error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.editor-ai-assist__result-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
border-top: 1px solid rgba(226, 232, 240, 0.6);
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__result-badges {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__result-badges :deep(svg) {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.editor-ai-assist__thumb {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__thumb--down {
|
||||
display: inline-block;
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.editor-ai-assist__toolbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__toolbar-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__back-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.editor-ai-assist__back-button:hover {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.editor-ai-assist__history {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__icon-button--close {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__toolbar-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__continue {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
padding: 4px 4px 4px 16px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 20px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.editor-ai-assist__continue input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__continue-send {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: #e8efff;
|
||||
color: #245bdb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.editor-ai-assist__toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__toolbar-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.editor-ai-assist__toolbar-button:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.editor-ai-assist__toolbar-button--primary {
|
||||
background: #245bdb;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.editor-ai-assist__toolbar-button--primary:hover {
|
||||
background: #1d4fc4;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.editor-ai-assist {
|
||||
max-width: calc(100vw - 24px);
|
||||
}
|
||||
|
||||
.editor-ai-assist__bar {
|
||||
flex-wrap: wrap;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.editor-ai-assist__bar-input {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.editor-ai-assist__toolbar-body {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.editor-ai-assist__toolbar-actions {
|
||||
justify-content: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.editor-ai-assist__toolbar-button {
|
||||
justify-content: center;
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
.editor-ai-assist__toolbar-button--primary {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,245 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
emptyLabel: string;
|
||||
hint: string;
|
||||
initialRows?: number;
|
||||
initialCols?: number;
|
||||
maxRows?: number;
|
||||
maxCols?: number;
|
||||
expandStep?: number;
|
||||
cellSize?: number;
|
||||
gap?: number;
|
||||
}>(),
|
||||
{
|
||||
initialRows: 4,
|
||||
initialCols: 10,
|
||||
maxRows: 15,
|
||||
maxCols: 15,
|
||||
expandStep: 2,
|
||||
cellSize: 22,
|
||||
gap: 6,
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [row: number, col: number];
|
||||
}>();
|
||||
|
||||
const gridRef = ref<HTMLElement | null>(null);
|
||||
const rows = ref(props.initialRows);
|
||||
const cols = ref(props.initialCols);
|
||||
const previewRow = ref(0);
|
||||
const previewCol = ref(0);
|
||||
const pointerActive = ref(false);
|
||||
|
||||
const gridStyle = computed(() => ({
|
||||
gridTemplateColumns: `repeat(${cols.value}, ${props.cellSize}px)`,
|
||||
gap: `${props.gap}px`,
|
||||
}));
|
||||
|
||||
const cellStyle = computed(() => ({
|
||||
width: `${props.cellSize}px`,
|
||||
height: `${props.cellSize}px`,
|
||||
}));
|
||||
|
||||
const cells = computed(() => {
|
||||
const entries: Array<{ key: string; row: number; col: number }> = [];
|
||||
|
||||
for (let row = 1; row <= rows.value; row += 1) {
|
||||
for (let col = 1; col <= cols.value; col += 1) {
|
||||
entries.push({ key: `${row}-${col}`, row, col });
|
||||
}
|
||||
}
|
||||
|
||||
return entries;
|
||||
});
|
||||
|
||||
const selectionLabel = computed(() => {
|
||||
if (!previewRow.value || !previewCol.value) {
|
||||
return props.emptyLabel;
|
||||
}
|
||||
|
||||
return `${previewRow.value} × ${previewCol.value}`;
|
||||
});
|
||||
|
||||
function clamp(value: number, min: number, max: number): number {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
}
|
||||
|
||||
function ensureCapacity(row: number, col: number): void {
|
||||
while (row > rows.value && rows.value < props.maxRows) {
|
||||
rows.value = Math.min(props.maxRows, rows.value + props.expandStep);
|
||||
}
|
||||
|
||||
while (col > cols.value && cols.value < props.maxCols) {
|
||||
cols.value = Math.min(props.maxCols, cols.value + props.expandStep);
|
||||
}
|
||||
|
||||
if (row === rows.value && rows.value < props.maxRows) {
|
||||
rows.value = Math.min(props.maxRows, rows.value + props.expandStep);
|
||||
}
|
||||
|
||||
if (col === cols.value && cols.value < props.maxCols) {
|
||||
cols.value = Math.min(props.maxCols, cols.value + props.expandStep);
|
||||
}
|
||||
}
|
||||
|
||||
function updatePreview(row: number, col: number): void {
|
||||
const nextRow = clamp(row, 1, props.maxRows);
|
||||
const nextCol = clamp(col, 1, props.maxCols);
|
||||
|
||||
ensureCapacity(nextRow, nextCol);
|
||||
previewRow.value = nextRow;
|
||||
previewCol.value = nextCol;
|
||||
}
|
||||
|
||||
function resolveSizeFromPointer(clientX: number, clientY: number): { row: number; col: number } | null {
|
||||
const grid = gridRef.value;
|
||||
if (!grid) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const rect = grid.getBoundingClientRect();
|
||||
const stepX = props.cellSize + props.gap;
|
||||
const stepY = props.cellSize + props.gap;
|
||||
const relativeX = clientX - rect.left;
|
||||
const relativeY = clientY - rect.top;
|
||||
|
||||
return {
|
||||
row: clamp(Math.ceil((relativeY + props.gap) / stepY), 1, props.maxRows),
|
||||
col: clamp(Math.ceil((relativeX + props.gap) / stepX), 1, props.maxCols),
|
||||
};
|
||||
}
|
||||
|
||||
function beginSelection(row: number, col: number): void {
|
||||
pointerActive.value = true;
|
||||
updatePreview(row, col);
|
||||
}
|
||||
|
||||
function handleWindowPointerMove(event: PointerEvent): void {
|
||||
if (!pointerActive.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextSize = resolveSizeFromPointer(event.clientX, event.clientY);
|
||||
if (!nextSize) {
|
||||
return;
|
||||
}
|
||||
|
||||
updatePreview(nextSize.row, nextSize.col);
|
||||
}
|
||||
|
||||
function handleWindowPointerUp(): void {
|
||||
if (!pointerActive.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
pointerActive.value = false;
|
||||
if (!previewRow.value || !previewCol.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit("select", previewRow.value, previewCol.value);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("pointermove", handleWindowPointerMove);
|
||||
window.addEventListener("pointerup", handleWindowPointerUp);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("pointermove", handleWindowPointerMove);
|
||||
window.removeEventListener("pointerup", handleWindowPointerUp);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="editor-grid-size-picker" @pointerdown.stop>
|
||||
<div class="editor-grid-size-picker__status">{{ selectionLabel }}</div>
|
||||
<div ref="gridRef" class="editor-grid-size-picker__grid" :style="gridStyle">
|
||||
<button
|
||||
v-for="cell in cells"
|
||||
:key="cell.key"
|
||||
type="button"
|
||||
class="editor-grid-size-picker__cell"
|
||||
:style="cellStyle"
|
||||
:class="{
|
||||
'editor-grid-size-picker__cell--active': cell.row <= previewRow && cell.col <= previewCol,
|
||||
}"
|
||||
@mouseenter="updatePreview(cell.row, cell.col)"
|
||||
@focus="updatePreview(cell.row, cell.col)"
|
||||
@pointerdown.prevent.stop="beginSelection(cell.row, cell.col)"
|
||||
@keydown.enter.prevent="emit('select', cell.row, cell.col)"
|
||||
@keydown.space.prevent="emit('select', cell.row, cell.col)"
|
||||
></button>
|
||||
</div>
|
||||
<div class="editor-grid-size-picker__hint">{{ hint }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor-grid-size-picker {
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
left: -18px;
|
||||
z-index: 24;
|
||||
width: max-content;
|
||||
max-width: min(calc(100vw - 48px), 520px);
|
||||
padding: 18px;
|
||||
border: 1px solid #e3e9f4;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.98) 100%);
|
||||
box-shadow:
|
||||
0 18px 40px rgba(15, 23, 42, 0.14),
|
||||
0 2px 8px rgba(15, 23, 42, 0.06);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.editor-grid-size-picker__status {
|
||||
margin-bottom: 14px;
|
||||
color: #101828;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.editor-grid-size-picker__grid {
|
||||
display: grid;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.editor-grid-size-picker__cell {
|
||||
padding: 0;
|
||||
border: 1px solid #d5dbe7;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
cursor: crosshair;
|
||||
transition:
|
||||
border-color 0.14s ease,
|
||||
background-color 0.14s ease,
|
||||
transform 0.14s ease,
|
||||
box-shadow 0.14s ease;
|
||||
}
|
||||
|
||||
.editor-grid-size-picker__cell:hover,
|
||||
.editor-grid-size-picker__cell--active {
|
||||
border-color: #2f6bff;
|
||||
background: rgba(47, 107, 255, 0.14);
|
||||
box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.08);
|
||||
}
|
||||
|
||||
.editor-grid-size-picker__cell:focus-visible {
|
||||
outline: 2px solid rgba(47, 107, 255, 0.36);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.editor-grid-size-picker__hint {
|
||||
margin-top: 12px;
|
||||
color: #667085;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
|
||||
type SelectionHandle = "nw" | "ne" | "sw" | "se";
|
||||
|
||||
const props = defineProps<{
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
"resize-start": [event: PointerEvent, handle: SelectionHandle];
|
||||
}>();
|
||||
|
||||
const frameStyle = computed(() => ({
|
||||
left: `${props.x}px`,
|
||||
top: `${props.y}px`,
|
||||
width: `${props.width}px`,
|
||||
height: `${props.height}px`,
|
||||
}));
|
||||
|
||||
function handleResizeStart(event: PointerEvent, handle: SelectionHandle): void {
|
||||
emit("resize-start", event, handle);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="editor-selection-frame" :style="frameStyle">
|
||||
<button
|
||||
type="button"
|
||||
class="editor-selection-frame__handle editor-selection-frame__handle--nw"
|
||||
@pointerdown="handleResizeStart($event, 'nw')"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
class="editor-selection-frame__handle editor-selection-frame__handle--ne"
|
||||
@pointerdown="handleResizeStart($event, 'ne')"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
class="editor-selection-frame__handle editor-selection-frame__handle--sw"
|
||||
@pointerdown="handleResizeStart($event, 'sw')"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
class="editor-selection-frame__handle editor-selection-frame__handle--se"
|
||||
@pointerdown="handleResizeStart($event, 'se')"
|
||||
></button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor-selection-frame {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #2f6bff;
|
||||
border-radius: 18px;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.9),
|
||||
0 14px 28px rgba(47, 107, 255, 0.12);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.editor-selection-frame__handle {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 999px;
|
||||
background: #2f6bff;
|
||||
box-shadow: 0 4px 10px rgba(47, 107, 255, 0.28);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.editor-selection-frame__handle--nw {
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: nwse-resize;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.editor-selection-frame__handle--ne {
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: nesw-resize;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
.editor-selection-frame__handle--sw {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
cursor: nesw-resize;
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
|
||||
.editor-selection-frame__handle--se {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
cursor: nwse-resize;
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
</style>
|
||||
@@ -53,7 +53,7 @@ const enUS = {
|
||||
articleCreation: "Article Creation",
|
||||
templates: "Templates",
|
||||
custom: "Custom Generation",
|
||||
optimize: "Optimization",
|
||||
freeCreate: "Free Create",
|
||||
media: "Media",
|
||||
brandManagement: "Brand Management",
|
||||
brands: "Brand Library",
|
||||
@@ -106,9 +106,9 @@ const enUS = {
|
||||
title: "Custom Generation",
|
||||
description: "Generate articles with custom prompt rules, instant or scheduled.",
|
||||
},
|
||||
optimize: {
|
||||
title: "Article Optimization",
|
||||
description: "No matching backend APIs exist in this repository yet.",
|
||||
freeCreate: {
|
||||
title: "Free Create",
|
||||
description: "Create and edit articles freely, no templates or AI generation required.",
|
||||
},
|
||||
media: {
|
||||
title: "Media Management",
|
||||
@@ -209,8 +209,32 @@ const enUS = {
|
||||
custom_generation: "Custom generation",
|
||||
instant_task: "Instant task",
|
||||
schedule_task: "Scheduled task",
|
||||
free_create: "Free create",
|
||||
},
|
||||
},
|
||||
freeCreate: {
|
||||
actions: {
|
||||
create: "New Article",
|
||||
},
|
||||
filters: {
|
||||
publishStatus: "Publish Status",
|
||||
keyword: "Search",
|
||||
createdTime: "Created Time",
|
||||
createdTimeStart: "Start",
|
||||
createdTimeEnd: "End",
|
||||
keywordPlaceholder: "Search by title",
|
||||
},
|
||||
list: {
|
||||
eyebrow: "Free Create",
|
||||
count: "{count} articles",
|
||||
empty: "No articles yet. Click \"New Article\" to start creating.",
|
||||
edit: "Edit article",
|
||||
deleteConfirm: "Are you sure you want to delete this article?",
|
||||
deleteSuccess: "Article deleted",
|
||||
deleteError: "Failed to delete article",
|
||||
},
|
||||
createError: "Failed to create article",
|
||||
},
|
||||
templates: {
|
||||
eyebrow: "Article Creation",
|
||||
actions: {
|
||||
@@ -431,6 +455,30 @@ const enUS = {
|
||||
resetSize: "Reset size",
|
||||
delete: "Delete image",
|
||||
},
|
||||
aiOptimize: {
|
||||
title: "AI Optimize",
|
||||
subtitle: "Supports contiguous multi-block selections and generates a rewrite from your instruction",
|
||||
originalLabel: "Selected text",
|
||||
previewLabel: "Preview",
|
||||
previewPlaceholder: "After you enter an instruction, the AI rewrite will stream here.",
|
||||
generating: "Generating...",
|
||||
streamingHint: "Building a stronger version of the selected text in real time...",
|
||||
disclaimer: "AI output is for reference only. Review it before replacing the original text.",
|
||||
promptLabel: "Instruction",
|
||||
promptPlaceholder: "For example: make it more natural, classroom-friendly, and persuasive while keeping the facts unchanged.",
|
||||
generate: "Generate",
|
||||
regenerate: "Regenerate",
|
||||
stop: "Stop",
|
||||
replace: "Replace selection",
|
||||
close: "Keep original",
|
||||
messages: {
|
||||
selectionRequired: "Select one block or multiple contiguous blocks of article text first.",
|
||||
promptRequired: "Enter an instruction first.",
|
||||
selectionChanged: "The original selection changed. Please select it again before replacing.",
|
||||
empty: "There is no AI content ready to replace yet.",
|
||||
failed: "AI optimization failed. Please try again later.",
|
||||
},
|
||||
},
|
||||
messages: {
|
||||
saved: "Article saved.",
|
||||
generating: "This article is still generating. Try editing it later.",
|
||||
|
||||
@@ -53,7 +53,7 @@ const zhCN = {
|
||||
articleCreation: "文章创作",
|
||||
templates: "模版创作",
|
||||
custom: "自定义生成",
|
||||
optimize: "文章优化",
|
||||
freeCreate: "自由创作",
|
||||
media: "媒体管理",
|
||||
brandManagement: "品牌管理",
|
||||
brands: "品牌词库",
|
||||
@@ -106,9 +106,9 @@ const zhCN = {
|
||||
title: "自定义生成",
|
||||
description: "基于自定义 Prompt 规则灵活生成文章，支持即时与定时任务。",
|
||||
},
|
||||
optimize: {
|
||||
title: "文章优化",
|
||||
description: "当前仓库还没有匹配的后端接口，页面暂保持为设计占位。",
|
||||
freeCreate: {
|
||||
title: "自由创作",
|
||||
description: "自由创建并编辑文章，无需模版或AI生成。",
|
||||
},
|
||||
media: {
|
||||
title: "媒体管理",
|
||||
@@ -209,8 +209,32 @@ const zhCN = {
|
||||
custom_generation: "自定义生成",
|
||||
instant_task: "即时任务",
|
||||
schedule_task: "定时任务",
|
||||
free_create: "自由创作",
|
||||
},
|
||||
},
|
||||
freeCreate: {
|
||||
actions: {
|
||||
create: "新建文章",
|
||||
},
|
||||
filters: {
|
||||
publishStatus: "发布状态",
|
||||
keyword: "搜索文章",
|
||||
createdTime: "创建时间",
|
||||
createdTimeStart: "开始时间",
|
||||
createdTimeEnd: "结束时间",
|
||||
keywordPlaceholder: "请输入标题内容搜索",
|
||||
},
|
||||
list: {
|
||||
eyebrow: "自由创作",
|
||||
count: "共 {count} 篇文章",
|
||||
empty: "还未创建文章，点击「新建文章」开始创作~",
|
||||
edit: "编辑文章",
|
||||
deleteConfirm: "确认删除这篇文章吗？",
|
||||
deleteSuccess: "文章已删除",
|
||||
deleteError: "删除文章失败",
|
||||
},
|
||||
createError: "创建文章失败",
|
||||
},
|
||||
templates: {
|
||||
eyebrow: "Article Creation",
|
||||
actions: {
|
||||
@@ -438,6 +462,30 @@ const zhCN = {
|
||||
resetSize: "重置大小",
|
||||
delete: "删除图片",
|
||||
},
|
||||
aiOptimize: {
|
||||
title: "AI 优化",
|
||||
subtitle: "支持连续多段选中，基于你的优化要求生成候选改写",
|
||||
originalLabel: "当前选中文字",
|
||||
previewLabel: "优化预览",
|
||||
previewPlaceholder: "输入你的优化要求后，AI 会在这里实时生成候选内容。",
|
||||
generating: "正在生成中...",
|
||||
streamingHint: "正在根据你的要求逐步生成更合适的表达...",
|
||||
disclaimer: "AI 生成内容仅供参考，请确认后再替换原文。",
|
||||
promptLabel: "优化要求",
|
||||
promptPlaceholder: "例如：更自然一点，适合课堂导入，保留原有信息但更有感染力。",
|
||||
generate: "开始生成",
|
||||
regenerate: "重新生成",
|
||||
stop: "停止",
|
||||
replace: "替换原文",
|
||||
close: "先不替换",
|
||||
messages: {
|
||||
selectionRequired: "请先选中一段或连续多段需要优化的正文内容。",
|
||||
promptRequired: "请先输入你的优化要求。",
|
||||
selectionChanged: "原选区已变化，请重新选中后再替换。",
|
||||
empty: "当前还没有可替换的 AI 内容。",
|
||||
failed: "AI 优化失败，请稍后重试。",
|
||||
},
|
||||
},
|
||||
messages: {
|
||||
saved: "文章已保存",
|
||||
generating: "文章还在生成中，请稍后再编辑。",
|
||||
|
||||
@@ -72,7 +72,7 @@ const navSections = computed(() => [
|
||||
items: [
|
||||
{ key: "/articles/templates", label: t("nav.templates") },
|
||||
{ key: "/articles/custom", label: t("nav.custom") },
|
||||
{ key: "/articles/optimize", label: t("nav.optimize") },
|
||||
{ key: "/articles/free-create", label: t("nav.freeCreate") },
|
||||
{ key: "/media", label: t("nav.media"), icon: GlobalOutlined },
|
||||
],
|
||||
},
|
||||
|
||||
@@ -5,6 +5,7 @@ import type {
|
||||
ArticleImageUploadResponse,
|
||||
ArticleListParams,
|
||||
ArticleListResponse,
|
||||
CreateArticleRequest,
|
||||
ArticleVersion,
|
||||
AuthTokens,
|
||||
Brand,
|
||||
@@ -210,6 +211,9 @@ export const articlesApi = {
|
||||
list(params: ArticleListParams) {
|
||||
return apiClient.get<ArticleListResponse>("/api/tenant/articles", { params });
|
||||
},
|
||||
create(payload: CreateArticleRequest = {}) {
|
||||
return apiClient.post<ArticleDetail, CreateArticleRequest>("/api/tenant/articles", payload);
|
||||
},
|
||||
detail(id: number) {
|
||||
return apiClient.get<ArticleDetail>(`/api/tenant/articles/${id}`);
|
||||
},
|
||||
@@ -305,6 +309,24 @@ export interface ArticleGenerationStreamEvent {
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
export interface ArticleSelectionOptimizeRequest {
|
||||
title: string;
|
||||
markdown_content: string;
|
||||
selected_text: string;
|
||||
instruction: string;
|
||||
}
|
||||
|
||||
export interface ArticleSelectionOptimizeStreamEvent {
|
||||
type: string;
|
||||
article_id: number;
|
||||
status?: string;
|
||||
delta?: string;
|
||||
content?: string;
|
||||
error?: string;
|
||||
model?: string;
|
||||
done?: boolean;
|
||||
}
|
||||
|
||||
export function isGenerationStreamEnabled(): boolean {
|
||||
return generationStreamEnabled;
|
||||
}
|
||||
@@ -316,18 +338,65 @@ export async function subscribeArticleGeneration(
|
||||
onClose?: () => void;
|
||||
},
|
||||
signal: AbortSignal,
|
||||
): Promise<void> {
|
||||
return subscribeSSE<ArticleGenerationStreamEvent>(
|
||||
`/api/tenant/articles/${articleId}/stream`,
|
||||
{
|
||||
method: "GET",
|
||||
},
|
||||
handlers,
|
||||
signal,
|
||||
);
|
||||
}
|
||||
|
||||
export async function streamArticleSelectionOptimize(
|
||||
articleId: number,
|
||||
payload: ArticleSelectionOptimizeRequest,
|
||||
handlers: {
|
||||
onEvent: (event: ArticleSelectionOptimizeStreamEvent) => void;
|
||||
onClose?: () => void;
|
||||
},
|
||||
signal: AbortSignal,
|
||||
): Promise<void> {
|
||||
return subscribeSSE<ArticleSelectionOptimizeStreamEvent>(
|
||||
`/api/tenant/articles/${articleId}/selection-optimize/stream`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
},
|
||||
handlers,
|
||||
signal,
|
||||
);
|
||||
}
|
||||
|
||||
type SSEEventShape = {
|
||||
type: string;
|
||||
};
|
||||
|
||||
async function subscribeSSE<TEvent extends SSEEventShape>(
|
||||
path: string,
|
||||
init: RequestInit,
|
||||
handlers: {
|
||||
onEvent: (event: TEvent) => void;
|
||||
onClose?: () => void;
|
||||
},
|
||||
signal: AbortSignal,
|
||||
): Promise<void> {
|
||||
const accessToken = getStoredAccessToken();
|
||||
if (!accessToken) {
|
||||
throw new Error("missing access token");
|
||||
}
|
||||
|
||||
const response = await fetch(`${baseURL}/api/tenant/articles/${articleId}/stream`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "text/event-stream",
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
},
|
||||
const requestHeaders = new Headers(init.headers);
|
||||
requestHeaders.set("Accept", "text/event-stream");
|
||||
requestHeaders.set("Authorization", `Bearer ${accessToken}`);
|
||||
|
||||
const response = await fetch(`${baseURL}${path}`, {
|
||||
...init,
|
||||
headers: requestHeaders,
|
||||
signal,
|
||||
});
|
||||
|
||||
@@ -350,11 +419,11 @@ export async function subscribeArticleGeneration(
|
||||
}
|
||||
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
buffer = consumeSSEBuffer(buffer, handlers.onEvent);
|
||||
buffer = consumeSSEBuffer<TEvent>(buffer, handlers.onEvent);
|
||||
}
|
||||
|
||||
buffer += decoder.decode();
|
||||
consumeSSEBuffer(buffer, handlers.onEvent);
|
||||
consumeSSEBuffer<TEvent>(buffer, handlers.onEvent);
|
||||
} finally {
|
||||
reader.releaseLock();
|
||||
handlers.onClose?.();
|
||||
@@ -543,9 +612,9 @@ export function normalizeInputParams(
|
||||
};
|
||||
}
|
||||
|
||||
function consumeSSEBuffer(
|
||||
function consumeSSEBuffer<TEvent extends SSEEventShape>(
|
||||
buffer: string,
|
||||
onEvent: (event: ArticleGenerationStreamEvent) => void,
|
||||
onEvent: (event: TEvent) => void,
|
||||
): string {
|
||||
let next = buffer;
|
||||
|
||||
@@ -558,7 +627,7 @@ function consumeSSEBuffer(
|
||||
const rawEvent = next.slice(0, delimiterIndex);
|
||||
next = next.slice(delimiterIndex + 2);
|
||||
|
||||
const parsed = parseSSEEvent(rawEvent);
|
||||
const parsed = parseSSEEvent<TEvent>(rawEvent);
|
||||
if (parsed) {
|
||||
onEvent(parsed);
|
||||
}
|
||||
@@ -567,7 +636,7 @@ function consumeSSEBuffer(
|
||||
return next;
|
||||
}
|
||||
|
||||
function parseSSEEvent(raw: string): ArticleGenerationStreamEvent | null {
|
||||
function parseSSEEvent<TEvent extends SSEEventShape>(raw: string): TEvent | null {
|
||||
const lines = raw.split(/\r?\n/);
|
||||
let event = "message";
|
||||
const dataLines: string[] = [];
|
||||
@@ -586,9 +655,13 @@ function parseSSEEvent(raw: string): ArticleGenerationStreamEvent | null {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data = JSON.parse(dataLines.join("\n")) as unknown as ArticleGenerationStreamEvent;
|
||||
const data = JSON.parse(dataLines.join("\n")) as Record<string, unknown> | null;
|
||||
if (!data || Array.isArray(data)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
...data,
|
||||
type: event,
|
||||
};
|
||||
} as TEvent;
|
||||
}
|
||||
|
||||
@@ -54,6 +54,9 @@ export function getSourceTypeLabel(sourceType?: string | null, generationMode?:
|
||||
if (sourceType === "template") {
|
||||
return i18n.global.t("status.sourceType.template");
|
||||
}
|
||||
if (sourceType === "free_create") {
|
||||
return i18n.global.t("status.sourceType.free_create");
|
||||
}
|
||||
if (sourceType === "custom_generation") {
|
||||
if (generationMode === "schedule") {
|
||||
return i18n.global.t("status.sourceType.schedule_task");
|
||||
|
||||
@@ -69,7 +69,7 @@ const app = createApp(App);
|
||||
|
||||
const IconFont = createFromIconfontCN({
|
||||
// 需要替换为你自己真实项目的 js 地址，才能显示出你的 '#icon-line-global_undo'。
|
||||
scriptUrl: "//at.alicdn.com/t/c/font_5154382_bf9lssq7ar.js",
|
||||
scriptUrl: "//at.alicdn.com/t/c/font_5154382_922oh81rh1.js",
|
||||
});
|
||||
app.component("IconFont", IconFont);
|
||||
|
||||
|
||||
@@ -77,13 +77,13 @@ const router = createRouter({
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "articles/optimize",
|
||||
name: "articles-optimize",
|
||||
component: () => import("@/views/FeatureStubView.vue"),
|
||||
path: "articles/free-create",
|
||||
name: "articles-free-create",
|
||||
component: () => import("@/views/FreeCreateView.vue"),
|
||||
meta: {
|
||||
titleKey: "route.optimize.title",
|
||||
descriptionKey: "route.optimize.description",
|
||||
navKey: "/articles/optimize",
|
||||
titleKey: "route.freeCreate.title",
|
||||
descriptionKey: "route.freeCreate.description",
|
||||
navKey: "/articles/free-create",
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@@ -171,11 +171,30 @@ async function handlePublished(): Promise<void> {
|
||||
]);
|
||||
}
|
||||
|
||||
const isFreeCreateEmpty = computed(
|
||||
() =>
|
||||
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() === "",
|
||||
);
|
||||
|
||||
function handleBack(): void {
|
||||
if (saveMutation.isPending.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isFreeCreateEmpty.value) {
|
||||
void cleanupEmptyFreeCreate();
|
||||
return;
|
||||
}
|
||||
|
||||
if (hasChanges.value) {
|
||||
leaveModalOpen.value = true;
|
||||
return;
|
||||
@@ -184,6 +203,19 @@ function handleBack(): void {
|
||||
navigateBack();
|
||||
}
|
||||
|
||||
async function cleanupEmptyFreeCreate(): Promise<void> {
|
||||
try {
|
||||
await articlesApi.remove(articleId.value);
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["articles"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["workspace"] }),
|
||||
]);
|
||||
} catch {
|
||||
// ignore cleanup errors
|
||||
}
|
||||
navigateBack();
|
||||
}
|
||||
|
||||
function navigateBack(): void {
|
||||
if (window.history.length > 1) {
|
||||
void router.back();
|
||||
@@ -199,6 +231,10 @@ function handleStay(): void {
|
||||
|
||||
function handleDiscardLeave(): void {
|
||||
leaveModalOpen.value = false;
|
||||
if (isFreeCreateInitiallyEmpty.value) {
|
||||
void cleanupEmptyFreeCreate();
|
||||
return;
|
||||
}
|
||||
navigateBack();
|
||||
}
|
||||
|
||||
@@ -293,6 +329,7 @@ function serializePlatformSelection(platformIds: string[]): string {
|
||||
<MilkdownProvider>
|
||||
<ArticleEditorCanvas
|
||||
:key="String(articleId)"
|
||||
:article-id="articleId"
|
||||
v-model:title="title"
|
||||
v-model="markdown"
|
||||
:disabled="editorLocked"
|
||||
|
||||
@@ -0,0 +1,477 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
SendOutlined,
|
||||
PlusOutlined,
|
||||
LoadingOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||
import { message } from "ant-design-vue";
|
||||
import type { ArticleListItem, ArticleListParams } 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";
|
||||
|
||||
import PublishArticleModal from "@/components/PublishArticleModal.vue";
|
||||
import { articlesApi } from "@/lib/api";
|
||||
import { formatError } from "@/lib/errors";
|
||||
import {
|
||||
formatDateTime,
|
||||
getGenerateStatusMeta,
|
||||
getPublishStatusMeta,
|
||||
getSourceTypeLabel,
|
||||
} from "@/lib/display";
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
const publishModalOpen = ref(false);
|
||||
const selectedPublishArticleId = ref<number | null>(null);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const createdRange = ref<[Dayjs, Dayjs] | null>(null);
|
||||
|
||||
const draftFilters = reactive<{
|
||||
publish_status?: string;
|
||||
keyword?: string;
|
||||
created_from?: string;
|
||||
created_to?: string;
|
||||
}>({
|
||||
keyword: "",
|
||||
});
|
||||
|
||||
const appliedFilters = reactive<{
|
||||
publish_status?: string;
|
||||
keyword?: string;
|
||||
created_from?: string;
|
||||
created_to?: string;
|
||||
}>({
|
||||
keyword: "",
|
||||
});
|
||||
|
||||
const articleParams = computed<ArticleListParams>(() => {
|
||||
const params: ArticleListParams = {
|
||||
page: page.value,
|
||||
page_size: pageSize.value,
|
||||
source_type: "free_create",
|
||||
};
|
||||
|
||||
if (appliedFilters.publish_status) {
|
||||
params.publish_status = appliedFilters.publish_status;
|
||||
}
|
||||
if (appliedFilters.keyword?.trim()) {
|
||||
params.keyword = appliedFilters.keyword.trim();
|
||||
}
|
||||
if (appliedFilters.created_from) {
|
||||
params.created_from = appliedFilters.created_from;
|
||||
}
|
||||
if (appliedFilters.created_to) {
|
||||
params.created_to = appliedFilters.created_to;
|
||||
}
|
||||
|
||||
return params;
|
||||
});
|
||||
|
||||
const articleListQuery = useQuery({
|
||||
queryKey: computed(() => ["articles", "list", articleParams.value]),
|
||||
queryFn: () => articlesApi.list(articleParams.value),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (articleId: number) => articlesApi.remove(articleId),
|
||||
onSuccess: async () => {
|
||||
message.success(t("freeCreate.list.deleteSuccess"));
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["articles"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["workspace"] }),
|
||||
]);
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(formatError(error) || t("freeCreate.list.deleteError"));
|
||||
},
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: () => articlesApi.create({}),
|
||||
onSuccess: (data) => {
|
||||
void router.push({ name: "article-editor", params: { id: String(data.id) } });
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(formatError(error) || t("freeCreate.createError"));
|
||||
},
|
||||
});
|
||||
|
||||
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("pending_review").label, value: "pending_review" },
|
||||
]);
|
||||
|
||||
const articleColumns = computed<TableColumnsType<ArticleListItem>>(() => [
|
||||
{
|
||||
title: t("common.title"),
|
||||
dataIndex: "title",
|
||||
key: "title",
|
||||
},
|
||||
{
|
||||
title: t("common.publishStatus"),
|
||||
dataIndex: "publish_status",
|
||||
key: "publish_status",
|
||||
width: 128,
|
||||
},
|
||||
{
|
||||
title: t("common.wordCount"),
|
||||
dataIndex: "word_count",
|
||||
key: "word_count",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: t("common.actions"),
|
||||
key: "actions",
|
||||
width: 156,
|
||||
align: "right",
|
||||
},
|
||||
]);
|
||||
|
||||
function applyFilters(): void {
|
||||
page.value = 1;
|
||||
appliedFilters.publish_status = draftFilters.publish_status;
|
||||
appliedFilters.keyword = draftFilters.keyword?.trim() || "";
|
||||
appliedFilters.created_from = createdRange.value?.[0]?.toISOString();
|
||||
appliedFilters.created_to = createdRange.value?.[1]?.toISOString();
|
||||
}
|
||||
|
||||
function resetFilters(): void {
|
||||
draftFilters.publish_status = undefined;
|
||||
draftFilters.keyword = "";
|
||||
createdRange.value = null;
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function openEditor(article: ArticleListItem): void {
|
||||
void router.push({ name: "article-editor", params: { id: String(article.id) } });
|
||||
}
|
||||
|
||||
function openPublish(article: ArticleListItem): void {
|
||||
selectedPublishArticleId.value = article.id;
|
||||
publishModalOpen.value = true;
|
||||
}
|
||||
|
||||
function canPublishArticle(status: string): boolean {
|
||||
return status === "completed";
|
||||
}
|
||||
|
||||
function handleTableChange(nextPage: number, nextPageSize: number): void {
|
||||
page.value = nextPage;
|
||||
pageSize.value = nextPageSize;
|
||||
}
|
||||
|
||||
async function handleDelete(articleId: number): Promise<void> {
|
||||
await deleteMutation.mutateAsync(articleId);
|
||||
}
|
||||
|
||||
function handleCreate(): void {
|
||||
createMutation.mutate();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="free-create-view">
|
||||
<section class="free-create-view__top-card">
|
||||
<div class="free-create-view__header">
|
||||
<div class="free-create-view__header-title">
|
||||
<h2>{{ t('route.freeCreate.title') }}</h2>
|
||||
<p>{{ t('route.freeCreate.description') }}</p>
|
||||
</div>
|
||||
<div class="free-create-view__header-actions">
|
||||
<a-button type="primary" :loading="createMutation.isPending.value" @click="handleCreate">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
{{ t("freeCreate.actions.create") }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-divider style="margin: 0; border-color: #f0f0f0;" />
|
||||
|
||||
<div class="free-create-view__filters">
|
||||
<div class="free-create-view__filters-inline">
|
||||
<div class="free-create-view__filter-item">
|
||||
<label>{{ t("freeCreate.filters.publishStatus") }}:</label>
|
||||
<a-select
|
||||
v-model:value="draftFilters.publish_status"
|
||||
allow-clear
|
||||
:options="publishStatusOptions"
|
||||
:placeholder="t('common.selectPlease')"
|
||||
@change="applyFilters"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="free-create-view__filter-item">
|
||||
<label>{{ t("freeCreate.filters.createdTime") }}:</label>
|
||||
<a-range-picker
|
||||
v-model:value="createdRange"
|
||||
allow-clear
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:placeholder="[
|
||||
t('freeCreate.filters.createdTimeStart'),
|
||||
t('freeCreate.filters.createdTimeEnd'),
|
||||
]"
|
||||
@change="applyFilters"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="free-create-view__filter-item">
|
||||
<label>{{ t("freeCreate.filters.keyword") }}:</label>
|
||||
<a-input-search
|
||||
v-model:value="draftFilters.keyword"
|
||||
:placeholder="t('freeCreate.filters.keywordPlaceholder')"
|
||||
@search="applyFilters"
|
||||
@pressEnter="applyFilters"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<a-button @click="resetFilters" class="free-create-view__reset-btn">{{ t("common.reset") }}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="free-create-view__table-card">
|
||||
<div class="free-create-view__table-head">
|
||||
<div>
|
||||
<p class="eyebrow">{{ t("freeCreate.list.eyebrow") }}</p>
|
||||
<h3>{{ t("freeCreate.list.count", { count: articleListQuery.data.value?.total ?? 0 }) }}</h3>
|
||||
</div>
|
||||
<a-button type="link" @click="articleListQuery.refetch()">
|
||||
{{ t("common.refresh") }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
:columns="articleColumns"
|
||||
:data-source="articleListQuery.data.value?.items || []"
|
||||
:loading="articleListQuery.isPending.value"
|
||||
row-key="id"
|
||||
:pagination="{
|
||||
current: page,
|
||||
pageSize,
|
||||
total: articleListQuery.data.value?.total || 0,
|
||||
showSizeChanger: true,
|
||||
onChange: handleTableChange,
|
||||
onShowSizeChange: handleTableChange,
|
||||
}"
|
||||
>
|
||||
<template #emptyText>{{ t("freeCreate.list.empty") }}</template>
|
||||
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'title'">
|
||||
<div class="free-create-view__title-cell">
|
||||
<strong>{{ record.title || t("article.untitled") }}</strong>
|
||||
<span>
|
||||
{{ getSourceTypeLabel(record.source_type) }} · {{ formatDateTime(record.created_at) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'publish_status'">
|
||||
<a-tag :color="getPublishStatusMeta(record.publish_status).color">
|
||||
{{ getPublishStatusMeta(record.publish_status).label }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'word_count'">
|
||||
{{ record.word_count || "--" }}
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'actions'">
|
||||
<div class="table-actions-row">
|
||||
<a-tooltip
|
||||
:title="canPublishArticle(record.generate_status) ? t('media.publish.title') : t('templates.list.publishDisabled')"
|
||||
>
|
||||
<span>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
class="action-btn action-publish"
|
||||
:disabled="!canPublishArticle(record.generate_status)"
|
||||
@click="openPublish(record)"
|
||||
>
|
||||
<SendOutlined />
|
||||
</a-button>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
<a-tooltip :title="t('freeCreate.list.edit')">
|
||||
<span>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
class="action-btn action-edit"
|
||||
@click="openEditor(record)"
|
||||
>
|
||||
<EditOutlined />
|
||||
</a-button>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
<a-popconfirm
|
||||
:title="t('freeCreate.list.deleteConfirm')"
|
||||
@confirm="handleDelete(record.id)"
|
||||
>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
class="action-btn action-delete"
|
||||
:loading="deleteMutation.isPending.value"
|
||||
:title="t('common.delete')"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</section>
|
||||
|
||||
<PublishArticleModal
|
||||
v-model:open="publishModalOpen"
|
||||
:article-id="selectedPublishArticleId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.free-create-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.free-create-view__top-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e6edf5;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.free-create-view__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.free-create-view__header-title h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.free-create-view__header-title p {
|
||||
margin: 6px 0 0 0;
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.free-create-view__header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.free-create-view__filters {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.free-create-view__table-card {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border: 1px solid #e6edf5;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.free-create-view__filters-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px 24px;
|
||||
}
|
||||
|
||||
.free-create-view__reset-btn {
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.free-create-view__filter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.free-create-view__filter-item label {
|
||||
color: #101828;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.free-create-view__filter-item :deep(.ant-select) {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.free-create-view__filter-item :deep(.ant-picker) {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.free-create-view__filter-item :deep(.ant-input-affix-wrapper),
|
||||
.free-create-view__filter-item :deep(.ant-input-search) {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.free-create-view__table-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.free-create-view__table-head h3 {
|
||||
margin: 6px 0 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.free-create-view__title-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.free-create-view__title-cell span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.free-create-view__filter-item :deep(.ant-picker) {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.free-create-view__table-head {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user