File size: 3,239 Bytes
8ede856 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | <template>
<v-dialog v-model="isOpen" max-width="500" @update:model-value="handleDialogChange">
<v-card>
<v-card-title class="dialog-title">
{{ isEditing ? tm('project.edit') : tm('project.create') }}
</v-card-title>
<v-card-text>
<v-text-field v-model="form.emoji" :label="tm('project.emoji')" flat variant="solo-filled" hide-details class="mb-3" />
<v-text-field v-model="form.title" :label="tm('project.name')" flat variant="solo-filled" hide-details class="mb-3" autofocus
@keyup.enter="handleSave" />
<v-textarea v-model="form.description" :label="tm('project.description')" flat variant="solo-filled" hide-details rows="3" rounded="lg" />
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn variant="text" @click="handleCancel" color="grey-darken-1">{{ t('core.common.cancel') }}</v-btn>
<v-btn variant="text" @click="handleSave" color="primary" :disabled="!form.title.trim()">{{ t('core.common.save') }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useI18n, useModuleI18n } from '@/i18n/composables';
export interface Project {
project_id: string;
title: string;
emoji?: string;
description?: string;
created_at: string;
updated_at: string;
}
export interface ProjectFormData {
emoji: string;
title: string;
description: string;
}
interface Props {
modelValue: boolean;
project?: Project | null;
}
const props = withDefaults(defineProps<Props>(), {
modelValue: false,
project: null
});
const emit = defineEmits<{
'update:modelValue': [value: boolean];
save: [formData: ProjectFormData, projectId?: string];
}>();
const { t } = useI18n();
const { tm } = useModuleI18n('features/chat');
const isOpen = ref(props.modelValue);
const isEditing = ref(false);
const form = ref<ProjectFormData>({
emoji: '📁',
title: '',
description: ''
});
watch(() => props.modelValue, (newVal) => {
isOpen.value = newVal;
if (newVal) {
// 打开对话框时初始化表单
if (props.project) {
isEditing.value = true;
form.value = {
emoji: props.project.emoji || '📁',
title: props.project.title,
description: props.project.description || ''
};
} else {
isEditing.value = false;
form.value = {
emoji: '📁',
title: '',
description: ''
};
}
}
});
function handleDialogChange(value: boolean) {
emit('update:modelValue', value);
}
function handleCancel() {
isOpen.value = false;
emit('update:modelValue', false);
}
function handleSave() {
if (!form.value.title.trim()) {
return;
}
emit('save', { ...form.value }, props.project?.project_id);
isOpen.value = false;
emit('update:modelValue', false);
}
</script>
<style scoped>
.dialog-title {
font-size: 22px;
font-weight: 500;
}
</style>
|