Web优化 2

web/src/views/chat/components/AttachmentUploader.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="flex gap-2 items-center flex-wrap">
-    <NUpload
-      :custom-request="upload"
-      :show-file-list="false"
-      multiple
-    >
-      <NButton size="small">
-        添加附件
-      </NButton>
+    <NUpload :custom-request="upload" :show-file-list="false" multiple>
+      <NButton size="small"> 添加附件 </NButton>
     </NUpload>
     <div
       v-for="a in attachments"
@@ -15,13 +9,7 @@
       class="text-xs px-2 py-1 bg-neutral-100 rounded flex items-center gap-1"
     >
       <span>{{ a.filename }} ({{ Math.round(a.size_bytes / 1024) }} KB)</span>
-      <NButton
-        text
-        size="tiny"
-        @click="remove(a.id)"
-      >
-        ×
-      </NButton>
+      <NButton text size="tiny" @click="remove(a.id)"> × </NButton>
     </div>
   </div>
 </template>
@@ -41,6 +29,9 @@ const emit = defineEmits<{ change: [ids: string[]] }>()
 const attachments = ref<Attachment[]>([])
 const msg = useMessage()
 
+const MAX_ATTACHMENT_SIZE_MB = 20
+const MAX_ATTACHMENT_SIZE_BYTES = MAX_ATTACHMENT_SIZE_MB * 1024 * 1024
+
 async function upload(opts: UploadCustomRequestOptions) {
   const f = opts.file.file
   if (!f) {
@@ -62,8 +53,8 @@ async function upload(opts: UploadCustomRequestOptions) {
     opts.onError()
     return
   }
-  if (f.size > 20 * 1024 * 1024) {
-    msg.error('单文件不能超过 20 MB')
+  if (f.size > MAX_ATTACHMENT_SIZE_BYTES) {
+    msg.error(`单文件不能超过 ${MAX_ATTACHMENT_SIZE_MB} MB`)
     opts.onError()
     return
   }
@@ -83,7 +74,11 @@ function remove(id: string) {
 
 watch(
   () => attachments.value.map((a) => a.id),
-  () => emit('change', attachments.value.map((a) => a.id)),
+  () =>
+    emit(
+      'change',
+      attachments.value.map((a) => a.id),
+    ),
 )
 
 defineExpose({