flat: 图片优化

common/globalFunction.js

@@ -433,6 +433,12 @@ function parseQueryParams(url = window.location.href) {
     return params;
 }
 
+function formatFileSize(bytes) {
+    if (bytes < 1024) return bytes + ' B'
+    else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB'
+    else if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(2) + ' MB'
+    else return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB'
+}
 export const $api = {
     msg,
     prePage,
@@ -442,7 +448,8 @@ export const $api = {
     streamRequest,
     chatRequest,
     insertSortData,
-    uploadFile
+    uploadFile,
+    formatFileSize
 }
 
 export default {

pages/chat/components/ai-paging.vue

@@ -122,9 +122,18 @@
             <!-- btn -->
             <CollapseTransition :show="showfile">
                 <view class="area-file">
-                    <image class="file-img" @click="uploadCamera" src="/static/icon/carmreupload.png"></image>
+                    <view class="file-card" @click="uploadCamera">
-                    <image class="file-img" @click="getUploadFile" src="/static/icon/fileupload.png"></image>
+                        <image class="card-img" src="/static/icon/file1.png"></image>
-                    <image class="file-img" @click="uploadCamera('album')" src="/static/icon/imgupload.png"></image>
+                        <text>拍照上传</text>
+                    </view>
+                    <view class="file-card" @click="uploadCamera('album')">
+                        <image class="card-img" src="/static/icon/file2.png"></image>
+                        <text>相册上传</text>
+                    </view>
+                    <view class="file-card" @click="getUploadFile">
+                        <image class="card-img" src="/static/icon/file3.png"></image>
+                        <text>文件上传</text>
+                    </view>
                 </view>
             </CollapseTransition>
 
@@ -132,20 +141,26 @@
             <view class="area-uploadfiles" v-if="filesList.length">
                 <scroll-view class="uploadfiles-scroll" scroll-x="true">
                     <view class="uploadfiles-list">
-                        <view class="file-uploadsend" v-for="(file, index) in filesList" :key="index">
+                        <view
+                            class="file-uploadsend"
+                            :class="{ 'file-border': isImage(file.type) }"
+                            v-for="(file, index) in filesList"
+                            :key="index"
+                        >
                             <image
-                                class="file-icon"
+                                class="file-iconImg"
                                 @click="jumpUrl(file)"
                                 v-if="isImage(file.type)"
-                                src="/static/icon/image.png"
+                                :src="file.url"
                             ></image>
-                            <image
+                            <view class="file-doc" @click="jumpUrl(file)" v-else>
-                                class="file-icon"
+                                <view style="width: 100%">
-                                @click="jumpUrl(file)"
+                                    <view class="filename-text">{{ file.name }}</view>
-                                v-if="isFile(file.type)"
+                                    <view class="filename-size">{{ file.size }}</view>
-                                src="/static/icon/doc.png"
+                                </view>
-                            ></image>
+                                <FileIcon :type="file.type"></FileIcon>
-                            <text class="filename-text">{{ file.name }}</text>
+                                <!-- <image class="file-icon" @click="jumpUrl(file)" :src=""></image> -->
+                            </view>
                             <view class="file-del" catchtouchmove="true" @click="delfile(file)">
                                 <uni-icons type="closeempty" color="#4B4B4B" size="10"></uni-icons>
                             </view>
@@ -169,6 +184,7 @@ const { messages, isTyping, textInput, chatSessionID } = storeToRefs(useChatGrou
 import CollapseTransition from '@/components/CollapseTransition/CollapseTransition.vue';
 import FadeView from '@/components/FadeView/FadeView.vue';
 import AudioWave from './AudioWave.vue';
+import FileIcon from './fileIcon.vue';
 import { useAudioRecorder } from '@/hook/useRealtimeRecorder.js';
 
 const { isRecording, recognizedText, startRecording, stopRecording, cancelRecording } = useAudioRecorder(
@@ -245,14 +261,16 @@ const sendMessageGuess = (item) => {
 const delfile = (file) => {
     uni.showModal({
         content: '确认删除文件？',
-        success() {
+        success(res) {
-            filesList.value = filesList.value.filter((item) => item.url !== file.url);
+            if (res.confirm) {
-            if (!filesList.value.length) {
+                filesList.value = filesList.value.filter((item) => item.url !== file.url);
-                if (textInput.value === state.uploadFileTips) {
+                if (!filesList.value.length) {
-                    textInput.value = '';
+                    if (textInput.value === state.uploadFileTips) {
+                        textInput.value = '';
+                    }
                 }
+                $api.msg('附件删除成功');
             }
-            $api.msg('附件删除成功');
         },
     });
 };
@@ -289,12 +307,16 @@ function getGuess() {
     });
 }
 
-function isImage(fileNmae) {
+function isImage(type) {
-    return new RegExp('image').test(fileNmae);
+    return new RegExp('image').test(type);
 }
 
-function isFile(fileNmae) {
+function isFile(type) {
-    return new RegExp('custom-doc').test(fileNmae);
+    const allowedTypes = config.allowedFileTypes || [];
+    if (!allowedTypes.includes(type)) {
+        return false;
+    }
+    return true;
 }
 
 function jumpUrl(file) {
@@ -347,6 +369,7 @@ function getUploadFile(type = 'camera') {
             const tempFilePaths = res.tempFilePaths;
             const file = res.tempFiles[0];
             const allowedTypes = config.allowedFileTypes || [];
+            const size = $api.formatFileSize(file.size);
             if (!allowedTypes.includes(file.type)) {
                 return $api.msg('仅支持 txt md html word pdf ppt csv excel 格式类型');
             }
@@ -355,8 +378,9 @@ function getUploadFile(type = 'camera') {
                 resData = JSON.parse(resData);
                 filesList.value.push({
                     url: resData.msg,
-                    type: 'custom-doc',
+                    type: file.type,
                     name: file.name,
+                    size: size,
                 });
                 textInput.value = state.uploadFileTips;
             });
@@ -605,7 +629,7 @@ image-margin-top = 40rpx
     padding: 20rpx;
 }
 .input-area {
-    padding: 32rpx;
+    padding: 32rpx 28rpx 24rpx 28rpx;
     position: relative;
     background: #FFFFFF;
     box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(11,44,112,0.06);
@@ -697,13 +721,28 @@ image-margin-top = 40rpx
     width: 100%
     grid-template-columns: repeat(3, 1fr)
     grid-gap: 20rpx
-    padding: 20rpx 0 0 0;
+    padding: 32rpx 0 0 0;
-    .file-img
+    .file-card
-        height: 179rpx
+        display: flex
-        width: 100%
+        flex-direction: column
+        align-items: center
+        padding: 24rpx 0
+        background: #F5F5F5;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+        text
+            font-size: 24rpx
+            font-weight: 500
+            color: #000000
+            padding-top: 8rpx
+        .card-img
+            height: 56rpx
+            width: 56rpx
+    .file-card:active
+        background: #e8e8e8
+
 .area-uploadfiles
     position: absolute
-    top: -100rpx
+    top: -180rpx
     width: calc(100% - 40rpx)
     background: #FFFFFF
     left: 0
@@ -715,18 +754,21 @@ image-margin-top = 40rpx
             height: 100%
             display: flex
             flex-wrap: nowrap
-            .file-uploadsend
+            .file-doc
                 display: flex
-                flex-wrap: nowrap
+                flex-direction: column
-                justify-content: center
+                align-items: flex-start
-                align-items: center
+                justify-content: space-between
+                padding: 16rpx 20rpx 18rpx 20rpx
+                height: calc(100% - 40rpx)
+            .file-uploadsend
                 margin: 10rpx 18rpx 0 10rpx;
                 height: 100%
                 border-radius: 30rpx
                 font-size: 24rpx
                 position: relative
-                width: 218rpx;
+                width: 360rpx;
-                height: 80rpx;
+                height: 160rpx;
                 border-radius: 12rpx 12rpx 12rpx 12rpx;
                 border: 2rpx solid #E2E2E2;
                 .file-del
@@ -751,13 +793,27 @@ image-margin-top = 40rpx
                     text-overflow: ellipsis
                     white-space: nowrap
                     color: #333333
+                    font-size: 24rpx
                     flex: 1
                     font-weight: 500
                     max-width: 100%
+                .filename-size
+                    overflow: hidden
+                    text-overflow: ellipsis
+                    white-space: nowrap
+                    color: #7B7B7B;
+                    flex: 1
+                    max-width: 100%
                 .file-icon
                     height: 40rpx
                     width: 40rpx
-                    margin: 0 18rpx 0 18rpx
+                .file-iconImg
+                    height: 100%
+                    width: 100%
+                    border-radius: 15rpx
+            .file-border
+                width: 160rpx;
+                border: 0
 
 @keyframes ai-circle {
     0% {

pages/chat/components/fileIcon.vue

@@ -0,0 +1,50 @@
+<template>
+    <image v-if="type === 'application/pdf'" :src="pdfIcon" class="file-icon" />
+    <image
+        v-else-if="
+            type === 'application/msword' ||
+            type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+        "
+        :src="docIcon"
+        class="file-icon"
+    />
+    <image
+        v-else-if="
+            type === 'application/vnd.ms-powerpoint' ||
+            type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+        "
+        :src="pptIcon"
+        class="file-icon"
+    />
+    <image v-else-if="type === 'text/markdown'" :src="mdIcon" class="file-icon" />
+    <image v-else-if="type === 'text/plain'" :src="txtIcon" class="file-icon" />
+    <image v-else-if="type === 'text/html'" :src="htmlIcon" class="file-icon" />
+    <image
+        v-else-if="
+            type === 'application/vnd.ms-excel' ||
+            type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        "
+        :src="excelIcon"
+        class="file-icon"
+    />
+    <image v-else :src="otherIcon" class="file-icon" />
+</template>
+
+<script setup>
+import pdfIcon from '@/static/file/pdf.png';
+import docIcon from '@/static/file/doc.png';
+import pptIcon from '@/static/file/ppt.png';
+import mdIcon from '@/static/file/md.png';
+import txtIcon from '@/static/file/txt.png';
+import htmlIcon from '@/static/file/html.png';
+import excelIcon from '@/static/file/excel.png';
+import otherIcon from '@/static/file/other.png';
+
+const props = defineProps({
+    type: String,
+});
+
+const type = props.type;
+</script>
+
+<style></style>