feat(kol-web): add KolPersonaCard with inline editing
This commit is contained in:
@@ -0,0 +1,308 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useMutation, useQueryClient } from "@tanstack/vue-query";
|
||||
import { message } from "ant-design-vue";
|
||||
import { EditOutlined, UserOutlined, LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import type { KolProfile } from "@geo/shared-types";
|
||||
|
||||
import { kolManageApi } from "@/lib/api";
|
||||
import { formatError } from "@/lib/errors";
|
||||
|
||||
const props = defineProps<{
|
||||
profile: KolProfile;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const editing = ref<"display_name" | "bio" | null>(null);
|
||||
const draftDisplayName = ref(props.profile.display_name);
|
||||
const draftBio = ref(props.profile.bio ?? "");
|
||||
const avatarUploading = ref(false);
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
const avatarURL = computed(() => props.profile.avatar_url ?? "");
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: kolManageApi.updateProfile,
|
||||
onSuccess: async () => {
|
||||
message.success(t("kol.profile.persona.saveSuccess"));
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "profile"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["workspace", "kol-cards"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "packages"] }),
|
||||
]);
|
||||
editing.value = null;
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(formatError(error) || t("kol.profile.persona.saveError"));
|
||||
draftDisplayName.value = props.profile.display_name;
|
||||
draftBio.value = props.profile.bio ?? "";
|
||||
},
|
||||
});
|
||||
|
||||
function saveFields(patch: { display_name?: string; bio?: string | null; avatar_url?: string | null }) {
|
||||
updateMutation.mutate({
|
||||
display_name: patch.display_name ?? props.profile.display_name,
|
||||
bio: patch.bio !== undefined ? patch.bio : props.profile.bio,
|
||||
avatar_url: patch.avatar_url !== undefined ? patch.avatar_url : props.profile.avatar_url,
|
||||
});
|
||||
}
|
||||
|
||||
function commitDisplayName() {
|
||||
const next = draftDisplayName.value.trim();
|
||||
if (!next) {
|
||||
message.error(t("kol.profile.persona.displayNameRequired"));
|
||||
return;
|
||||
}
|
||||
if (next.length > 40) {
|
||||
message.error(t("kol.profile.persona.displayNameTooLong"));
|
||||
return;
|
||||
}
|
||||
if (next === props.profile.display_name) {
|
||||
editing.value = null;
|
||||
return;
|
||||
}
|
||||
saveFields({ display_name: next });
|
||||
}
|
||||
|
||||
function commitBio() {
|
||||
const next = draftBio.value.trim();
|
||||
if (next.length > 500) {
|
||||
message.error(t("kol.profile.persona.bioTooLong"));
|
||||
return;
|
||||
}
|
||||
const nextVal = next === "" ? null : next;
|
||||
if (nextVal === (props.profile.bio ?? null)) {
|
||||
editing.value = null;
|
||||
return;
|
||||
}
|
||||
saveFields({ bio: nextVal });
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
draftDisplayName.value = props.profile.display_name;
|
||||
draftBio.value = props.profile.bio ?? "";
|
||||
editing.value = null;
|
||||
}
|
||||
|
||||
function startDisplayNameEdit() {
|
||||
draftDisplayName.value = props.profile.display_name;
|
||||
editing.value = "display_name";
|
||||
}
|
||||
|
||||
function startBioEdit() {
|
||||
draftBio.value = props.profile.bio ?? "";
|
||||
editing.value = "bio";
|
||||
}
|
||||
|
||||
function triggerAvatarPicker() {
|
||||
fileInput.value?.click();
|
||||
}
|
||||
|
||||
async function handleFilePicked(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
input.value = "";
|
||||
if (!file) return;
|
||||
|
||||
if (!/^image\/(png|jpe?g|gif|webp)$/i.test(file.type)) {
|
||||
message.error(t("kol.profile.persona.avatarInvalidType"));
|
||||
return;
|
||||
}
|
||||
if (file.size > 2 * 1024 * 1024) {
|
||||
message.error(t("kol.profile.persona.avatarTooLarge"));
|
||||
return;
|
||||
}
|
||||
|
||||
avatarUploading.value = true;
|
||||
try {
|
||||
const uploaded = await kolManageApi.uploadAvatar(file);
|
||||
saveFields({ avatar_url: uploaded.url });
|
||||
} catch (error) {
|
||||
message.error(formatError(error) || t("kol.profile.persona.saveError"));
|
||||
} finally {
|
||||
avatarUploading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="persona-card">
|
||||
<div class="persona-avatar-wrap" :class="{ uploading: avatarUploading }" @click="triggerAvatarPicker">
|
||||
<template v-if="avatarURL">
|
||||
<img :src="avatarURL" class="persona-avatar" alt="" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="persona-avatar persona-avatar-fallback">
|
||||
<UserOutlined />
|
||||
</div>
|
||||
</template>
|
||||
<div class="persona-avatar-mask">
|
||||
<LoadingOutlined v-if="avatarUploading" />
|
||||
<span v-else>{{ t("kol.profile.persona.avatarLabel") }}</span>
|
||||
</div>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/gif,image/webp"
|
||||
class="persona-avatar-input"
|
||||
@change="handleFilePicked"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="persona-fields">
|
||||
<div class="persona-field">
|
||||
<label class="persona-field-label">{{ t("kol.profile.persona.displayNameLabel") }}</label>
|
||||
<template v-if="editing === 'display_name'">
|
||||
<a-input
|
||||
v-model:value="draftDisplayName"
|
||||
:disabled="updateMutation.isPending.value"
|
||||
:placeholder="t('kol.profile.persona.displayNamePlaceholder')"
|
||||
:max-length="40"
|
||||
allow-clear
|
||||
@press-enter="commitDisplayName"
|
||||
@blur="commitDisplayName"
|
||||
@keyup.esc="cancelEdit"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="persona-field-static" @click="startDisplayNameEdit">
|
||||
<span class="persona-field-value">{{ profile.display_name }}</span>
|
||||
<EditOutlined class="persona-field-edit-icon" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="persona-field">
|
||||
<label class="persona-field-label">{{ t("kol.profile.persona.bioLabel") }}</label>
|
||||
<template v-if="editing === 'bio'">
|
||||
<a-textarea
|
||||
v-model:value="draftBio"
|
||||
:disabled="updateMutation.isPending.value"
|
||||
:placeholder="t('kol.profile.persona.bioPlaceholder')"
|
||||
:auto-size="{ minRows: 2, maxRows: 6 }"
|
||||
:max-length="500"
|
||||
show-count
|
||||
@blur="commitBio"
|
||||
@keydown.ctrl.enter.prevent="commitBio"
|
||||
@keydown.meta.enter.prevent="commitBio"
|
||||
@keyup.esc="cancelEdit"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="persona-field-static persona-field-static-multiline" @click="startBioEdit">
|
||||
<span class="persona-field-value persona-field-value-bio">
|
||||
{{ profile.bio || t("kol.profile.persona.bioPlaceholder") }}
|
||||
</span>
|
||||
<EditOutlined class="persona-field-edit-icon" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<p class="persona-avatar-hint">{{ t("kol.profile.persona.avatarHint") }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.persona-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 32px;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
}
|
||||
.persona-avatar-wrap {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.persona-avatar,
|
||||
.persona-avatar-fallback {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.persona-avatar-mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.persona-avatar-wrap:hover .persona-avatar-mask,
|
||||
.persona-avatar-wrap.uploading .persona-avatar-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
.persona-avatar-input {
|
||||
display: none;
|
||||
}
|
||||
.persona-fields {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
.persona-field-label {
|
||||
display: block;
|
||||
color: #8c8c8c;
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.persona-field-static {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: text;
|
||||
padding: 2px 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.persona-field-static-multiline {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.persona-field-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
word-break: break-word;
|
||||
}
|
||||
.persona-field-value-bio {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #595959;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.persona-field-edit-icon {
|
||||
color: #bfbfbf;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.persona-field-static:hover .persona-field-edit-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
.persona-avatar-hint {
|
||||
margin: 0;
|
||||
color: #bfbfbf;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user