feat: add EditorGridSizePicker and EditorSelectionFrame components; implement FreeCreateView for article management; introduce ArticleSelectionOptimizeService for optimizing article selections
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user