Merge branch 'master' of http://git.sinosoftzx.cn/like/customAgent

src/components/footer-bar-btn.vue

@@ -145,7 +145,7 @@ onMounted(() => {
   box-sizing: border-box;
   border-image: linear-gradient(115deg, #ffffff 4%, #ffffff 89%) 1.2;
   backdrop-filter: blur(14px);
-  box-shadow: 0px 4px 10px 0px rgba(181, 189, 216, 0.3);
+  /* box-shadow: 0px 4px 10px 0px rgba(181, 189, 216, 0.3); */
   z-index: 3;
   border-radius: 101rem;
 }

src/components/footer-bar-input.vue

@@ -99,8 +99,8 @@
     @onFaceChoose="handleFaceChoose"></emoticon-box>
   <!-- </transition> -->
 
-  <upload-image ref="uploadImageRef" @image-selected="handleImageSelected" @image-sent="handleImageSent"
+  <upload-image :class="{ min_heightauto: !addFlag }" @image-selected="handleImageSelected"
-    @image-failed="handleImageFailed"></upload-image>
+    @image-sent="handleImageSent" @image-failed="handleImageFailed"></upload-image>
 
   <!-- <SoundRecord v-if="soundFlag" @clickFinish="sayFinish"></SoundRecord> -->
   <!-- </div> -->
@@ -155,7 +155,6 @@ const elder = inject('elder', ref(false))
 // —— 模板引用 ——
 const sendMessageArea = ref(null)
 const voiceInputRef = ref(null)
-const uploadImageRef = ref(null)
 
 // —— 响应式状态（原 data）——
 const sendMessage = ref('') // 输入的内容
@@ -488,12 +487,13 @@ function handleFaceChoose(face) {
   })
 }
 
-// 上传图片
+// 上传图片：底部滑出图片/拍照面板
 function addUpload() {
   smileFlag.value = true
   emoticonClick.value = false
-  addFlag.value = true
+  imageBoxShow.value = true
-  uploadImageRef.value?.openFilePicker()
+  addFlag.value = !addFlag.value
+  scrollTopBody()
 }
 
 function handleImageSelected(payload) {
@@ -799,6 +799,7 @@ watch(sendMessage, (newValue, oldValue) => {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   align-content: flex-start;
+  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -871,6 +872,7 @@ watch(sendMessage, (newValue, oldValue) => {
   vertical-align: middle;
   caret-color: #1988fe;
   border: none;
+  resize: none;
   overflow: hidden;
   overflow-y: auto;
   word-break: break-all;
@@ -900,7 +902,7 @@ textarea:-ms-input-placeholder {
 .input-btn-box {
   width: 30rem;
   height: 30rem;
-  padding: 2.5rem 5rem 0 5rem;
+  padding: 0 5rem;
   vertical-align: middle;
 }
 
@@ -953,7 +955,7 @@ textarea:-ms-input-placeholder {
 }
 
 .close-box {
-  background: url('data:image/png;base64,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') no-repeat center;
+  background: url('../assets/images/add-icon.png') no-repeat center;
   background-size: 100% auto;
   transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
@@ -963,7 +965,7 @@ textarea:-ms-input-placeholder {
 }
 
 .add-box {
-  background: url('data:image/png;base64,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') no-repeat center;
+  background: url('../assets/images/add-icon.png') no-repeat center;
   background-size: 100% auto;
   border: 0;
 }

src/components/upload-image.vue

@@ -1,11 +1,25 @@
 <template>
-  <input
+  <div class="upload-image before-top" :class="elder ? 'elder-wrapper' : ''">
-    ref="fileInput"
+    <div class="upload-box-wrapper flex">
-    class="file-input"
+      <div class="upload-btn-item upload-image-btn">
-    type="file"
+        <van-uploader :before-read="beforeRead" accept="image/*" :after-read="afterRead">
-    accept="image/jpeg,image/png,image/gif,image/webp"
+          <a class="upload-icon image-icon" href="javascript:;"></a>
-    @change="handleFileChange"
+          <div>图片</div>
-  />
+        </van-uploader>
+      </div>
+      <div class="upload-btn-item upload-photograph-btn">
+        <van-uploader
+          capture="camera"
+          accept="image/*"
+          :before-read="beforeRead"
+          :after-read="afterRead"
+        >
+          <a class="upload-icon photograph-icon" href="javascript:;"></a>
+          <div>拍照</div>
+        </van-uploader>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -16,23 +30,37 @@ import { uploadConversationImage } from '@/utils/conversationApi'
 
 const emit = defineEmits(['image-selected', 'image-sent', 'image-failed'])
 
+const elder = inject('elder', false)
 const userId = inject('userId', ref(''))
 const manualService = inject('manualService', ref('1'))
 const sessionId = inject('sessionId', ref(''))
 const source = inject('source', ref(''))
 
-const fileInput = ref(null)
 const uploading = ref(false)
 
 const MAX_IMAGE_SIZE = 5 * 1024 * 1024
 const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
 
-function openFilePicker() {
+function beforeRead(file) {
   if (uploading.value) {
     showToast('图片正在发送，请稍候')
-    return
+    return false
   }
-  fileInput.value?.click()
+  if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
+    showToast('请选择 JPG、PNG、GIF 或 WebP 图片')
+    return false
+  }
+  if (file.size > MAX_IMAGE_SIZE) {
+    showToast('图片大小不能超过5M')
+    return false
+  }
+  return true
+}
+
+function afterRead(item) {
+  // vant4 的 after-read 入参是 { file: 原生File, content, status... } 包装对象（可能传单个或数组）
+  const file = Array.isArray(item) ? item[0]?.file : item?.file
+  processFile(file)
 }
 
 function readAsDataUrl(file) {
@@ -81,20 +109,8 @@ function isBusinessFailure(response) {
   return Number.isFinite(code) && (code < 0 || code >= 400)
 }
 
-async function handleFileChange(event) {
+async function processFile(file) {
-  const input = event.target
-  const file = input.files?.[0]
-  input.value = ''
-
   if (!file || uploading.value) return
-  if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
-    showToast('请选择 JPG、PNG、GIF 或 WebP 图片')
-    return
-  }
-  if (file.size > MAX_IMAGE_SIZE) {
-    showToast('图片大小不能超过5M')
-    return
-  }
 
   const localId = `image_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`
   let previewUrl = ''
@@ -136,12 +152,96 @@ async function handleFileChange(event) {
     uploading.value = false
   }
 }
-
-defineExpose({ openFilePicker })
 </script>
-
 <style scoped>
-.file-input {
+.upload-box-wrapper {
-  display: none;
+  height: 100%;
+  padding: 25.5rem 15rem 0 15rem;
+}
+
+.upload-btn-item {
+  width: 44rem;
+  line-height: 20rem;
+  font-size: 14rem;
+  margin: 0 21rem;
+  text-align: center;
+}
+
+.upload-btn-item :deep(.van-uploader__wrapper) {
+  flex-direction: column;
+  align-items: center;
+}
+
+.upload-btn-item div {
+  display: inline-block;
+  line-height: 20rem;
+  font-size: 14rem;
+  color: #666666;
+  text-align: center;
+  padding-top: 6rem;
+}
+
+.upload-icon {
+  display: block;
+  width: 44rem;
+  height: 44rem;
+  position: relative;
+  box-shadow: 0 2rem 6rem 0 #eaf0f8;
+  border-radius: 8rem;
+}
+
+.upload-icon:active {
+  opacity: 0.5;
+}
+
+.image-icon {
+  background: #ffffff
+    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAqCAYAAAD8pHgAAAAAAXNSR0IArs4c6QAAA2xJREFUaAXtmD1oFEEUx+ftJRZCErEQIUYjWNpIEi9nQrwYLVKc2mhrq2ChkM5OULAIioiijZWN6aKVkCOXkMvHJRDFpI4IihCNUQwYsvN8s8kcs3t3s7N3Z3ZXXFhm5r2ZN//fzsfOLjDl6uk532TDjw6bs3bGEBRXBLOACYutJLB5YWpq9KcUWBTd1d13mQF7gsj2S2ccUgD2jSG7VpiZeCn0OkDJ3nSvvcVzVLbiAFFGI7cSkJ6byk06APYW3o4xjOCzuM0Ew86IADshCnG+ALBD6N+eYogtcYYR2mntNyEibAPFnUbR36DktVlgsEBbyCg9gyVgvJV2lh56IpeoUXGn1AbYJachENxqbztwb2RkxFZ0PTx56sxT5PYLZHhQsYea9Z1yAPBsfiZ31wPjiJ7LZ7OWlbgSKoGncz+gzT1Wy5Cnjas4m8++IejXLmOIBS0QCV1WjxUVdQLMVvQZOGh9jhpUM6qiBaLN8ItRFON6pdFonx0qzOQuMLBulnqDW3yA4LhRSM7M6nmCOTD5iWFhnp8ef1APKC0Qbcut4pzn0eEqZjKZvTSSGZfRoKDCyOr1gNICiY5sG58nBwebZafe9PPq+jAydtRr15XLwcj6tUL5AtGZ4hhf23jbleofEEcL2XEynT7UlTr9il6wV6XNJNXByPa1QDkCO7v7OAUripWBS1NYp++PZXqRipPC4VK/3mICo0boTKVvMOT3VZsuX5jOWf4j5IqALTRKqd2AEd1WM1IBgVx0xoWgI6MGDgpVExC9EL/STF1VBXjztcDIWEGgqgZyYCw4m2hsGKgEVQ+YoFBVAUmYQn58cXZy7F05qHrCqFB+58bAQCqM7MgL9TdgZF+Ubij5kmwgoHIwMmIRCqzrhZ3jjPTtZmr4gSdeUrQB0JoR06ySQAFFPnGHdhmNkAlMaASejn2B4gQj2LRTzvnNCvpp5nlAoRe1QMggO69ZM6GrLyPAd8qVaRNp03+gSA8PidOuIeHXfa2GAce/bzTq+tUDIV60136t6wJEzfdvriE6wf6O2pOuQs8mcaAcofdVBIhUE4JZEoK2gYA9jpS6KsQAgsOQEG0/ffyw2Np2ZB9lk3Qb/P0RrSJzIX0FPKI/PneEIpf47t7+pM3xHCJvj4xcjRAAawUYjs3lc9OaavF2/QFLSjPjXbcGYgAAAABJRU5ErkJggg==')
+    no-repeat center;
+  background-size: 26rem auto;
+}
+
+.photograph-icon {
+  background: #ffffff
+    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAqCAYAAAD1T9h6AAAAAXNSR0IArs4c6QAAA9NJREFUWAntWU9IVEEYn2/erln2/w/RISyhyEsHUbdN21batIUUoiyiQxF2iyBNOiV6iTA6RRfrEEGH8CZJQbaouWqLBOWhCKSkJNKgpFZ97u58fc9Ylefu8mbeE1xoDm9n5vszv9978818M8tYlhdQwe85dGS/iMdakYGH0UPFR9IGAHUG0JGXA43d3d2/kv1Wf11WFZN6gUBgw6/o7HMCvoPRw25BwwViXVRn26lWI+uPyxpMRuOX/oGXtcysj4jVnnJ/eWatpVIpAn6/38VQXFnqxpmeRAIbZD1JEZjSxWn64jtlB7Gsj1jj8fn2WNYnxSUBWF1dvebHj+imVE5iLN5B06colcypPuDwIFfLbUrlT9P0CQr0+GLZPIHigxUnAUULzcVCUpD6MosdLmcdAGYo4iMauq4ODobeGGPNESj2Hm6klaB1OQd30jcRiQNoVZH+UAhKfZW7xezMBxogx8lBlt0XwOjxqooCjnHdn3XgjbeDmN/5oqeQU1BKRb1hu1IKCLGXCMCKDFgrL0kA51kLPkkw6wlIJ3NJ5ul+aV3+SNnlY9pKeijvGEO3cCdiPJ/0j9Eec46ib2s6W5V+xwgAsGlAXp+/c9v99vb2hAnMe2o/LyuruaEnJpuJRL1Jrtx0iABMUgoQiIS7hyKD6bGEwx2/SdpQ6vW9FcgeUn0+E0hvlVniTAxo7KwBPvNQC9LIQO8jarUs9KjXbBOgbb19KNzzTBZC0f59NylWRmTtzPq2CWgav2N2aqXd1tYWA4Z3rehm0rFFgAJ3fOBVKJJpgEwyN7ieZpJbkdkiQDE4QlNI+WBcWen7ZGSWVoCm07FFABkaq4pyaW5uFpSUTSk7IENbBADBuElQLl5v7Wr6fOuVHZChLQL0BQo9waAyANQmPHbAG7a2CJB9Dv6cPqEKIp4QZ1Rtk3Z2CVA2Lppqa2ulT3Ml5YECOotcTAJR/bVPAFnB57HxezIAjLnPErEnZCNN3DyObQKGQxRYV+z13Z27+DKPYGp7vVWbYzjeSZlpsUmk1HSEwNzIyC7/0cVrT9nhowRuSZIWDAZXEcmLcTbzjihXKKFNYQQlB/y3kInrKWTqXcC+0fbWSxfXY7RMuKm+i0D76SJ3nbrTFJZcO+VQOm1yTjfXtL7TCkNPMfc0KTjXdG4KOYdJytN/AlKvaxmUOTP+4snSwhF1zgGGsxQ/cwEf5m6e9xIYfM86EsDC/f2hUd7X1/mTzqYX6HASzRYS9MK/5oDrvIF3fsc0rtlxVr+GYGzxsGVFkkH2hbCFN6513e7q6ppckRhlQf0FMCEfY+4M8aUAAAAASUVORK5CYII=')
+    no-repeat center;
+  background-size: 26rem auto;
+}
+
+.elder-wrapper .upload-box-wrapper {
+  padding: 16rem 15rem 0 24rem;
+}
+
+.elder-wrapper .upload-btn-item {
+  margin: unset;
+  width: auto;
+  margin-right: 26rem;
+}
+
+.elder-wrapper .upload-icon {
+  width: 62rem;
+  height: 62rem;
+  box-shadow: 0 4rem 11rem 0 rgba(25, 28, 104, 0.1);
+  border-radius: 8rem;
+}
+
+.elder-wrapper .upload-btn-item em {
+  font-family: PingFangSC-Regular;
+  font-size: 16rem;
+  color: #2c3562;
+}
+
+.elder-wrapper .image-icon {
+  background: #ffffff
+    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABICAMAAABvLTMyAAAAolBMVEUAAAAsNmIzPGcwO2ksNmNPVH0sNWMtOWUsNmIEXOwsNWMtN2QsNmItNWIuNmIuN2UvN2QtNWMsNWMTaPMtNmMsNmMsNWIsNWMtNWMCXOsCXOsCXOsDXestNmMuN2MDX+sIXfA9QGosNWIsNmItNmQ2PWcsNmMtNWMtNmMtNWMsNWItNmMDXOouNmQsNmQuOGMsNWMsNWMsNmIsNmMsNWICXOr9eT9JAAAANHRSTlMA9h0V2AX6LcODcy6gj3olQN6sDYnh77+l+ebayIhUSyEM0YJJDzPmvHzJt657bDeXX7O53jRWPAAAAwdJREFUWMO1mNl2sjAQgIclUFkEXNC6VkGrtdr2/9P3f7VaQjrIAZnA8buBC/2YTJaTGShhn6cTU+MENHMyPdtwB9uPuCKRX2fUPd4KT6+QsaXFW6ItWdlmPPEOPBm3NnfMOzF2b2wafsgJgw0Q2AShg0PSCj5DxqaNDFDCGGkyvr9/MvmRgQ7K6AM5LDkfIy7oQyv6XLDM/Xm8K2jJKs+UGJtHiI0Un5ftrDxv0IE8fzYA+DJS5KW3mM0WvReaC/PlA4DY9SNAes/fGc89kgtnMwJweUZhvb1///FOXn/C4sJRLJpCbN8FyPGJpXuEafZ0MG+/I52vh8P1/He81Pw5mWYKk+wZ3gQ3H/6+DecK4YWZZgJm9gxAsrg61uJ1fX1dEHVBpjFBTDGeIbOrYyheh9fXGVG3EcsNeAZ01eUe+aAOlq6jTwVdp75QmL3qe0/bkq7dMt47J40jqGuxyfb+K4pKOtUjYOeIFdugox1QuyTmnKAjsVliwrrrVuMbRXz4vKR2W51+4oh16H+winVHD62QtK0jTt3WOuaj7N8HAHTSGW9cMnABOup0U8rMkLhnjS/v//bVisdvn5egdNeVm8DqM6DojGTLi5iJXrDJSYj2pBNF9zVexprKEHUZ22AHFN3R4lVoCcsCl3kbkc47fcLr2AYATM6pAxRdGPN64hTkevsCii7UMP1+6hpsF6RJhBlMMDaKTtosLwAk9EpzswSCDjkJGRK88QIDUNFZFUNhZ5zvaKei00KoIpU+aw8KOiuFar7wYq+gu0ANOxGeyVR0B6gjydcSKOgsvTa4OJ9Vki5fWV7DvZK7tAtZ1PRrU5zkxOuimT/r2POMD+plNn/W4YtDhXrVnjZEJw5Nh1YInGVJZtwdq2XQyhQbi6h7gziQiygs8So5if1FLPGaClCmiXklFqAN5XH+rZjRy2PQrfrifSVTRy/esbVQ991PemuhvvGBibjQGh/NbRnxoZTUliE0jbZixihNo8e1tLo33B7WDuzerHxwKxVxjyqN3qMLt/wAPmSqnZF+mgUAAAAASUVORK5CYII=')
+    no-repeat center;
+  background-size: 26rem 24rem;
+}
+
+.elder-wrapper .photograph-icon {
+  background: #ffffff
+    url('data:image/png;base64,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')
+    no-repeat center;
+  background-size: 26rem 24rem;
 }
 </style>

src/main.js

@@ -7,6 +7,7 @@ import pinia from './store'
 import { useAppStore } from './store/app.js'
 import Vant from 'vant'
 import 'vant/lib/index.css'
+import '@/assets/style/common.css'
 import Vue3Lazyload from 'vue3-lazyload'
 import { Post } from './utils/https'
 import imageService from './utils/imageService'