update

package-lock.json

@@ -1269,6 +1269,11 @@
       "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=",
       "dev": true
     },
+    "@quasar/extras": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.0.0.tgz",
+      "integrity": "sha512-cEsCTkpwcCoPAOLtZp6ek0Gjbp9MbhCUrwpvx/GWuvPzjetIehOQcN0SV84cJmoLt//RB8LxHIR/lQXejNuiAw=="
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.0",
       "resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.0.tgz",

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@quasar/extras": "^1.0.0",
     "ali-oss": "^6.16.0",
     "autosize": "^5.0.1",
     "axios": "^0.21.1",

src/main.ts

@@ -8,15 +8,15 @@ import quasarConfig from './plugins/quasar-config'
 import '@/assets/styles/style.less'
 import '@/styles/quasar.scss'
 import 'quasar/dist/quasar.css'
-// import '@quasar/extras/roboto-font/roboto-font.css'
-// import '@quasar/extras/material-icons/material-icons.css'
+import '@quasar/extras/roboto-font/roboto-font.css'
+import '@quasar/extras/material-icons/material-icons.css'
 // import '@quasar/extras/material-icons-outlined/material-icons-outlined.css'
 // import '@quasar/extras/material-icons-round/material-icons-round.css'
 // import '@quasar/extras/material-icons-sharp/material-icons-sharp.css'
-// import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'
-// import '@quasar/extras/ionicons-v4/ionicons-v4.css'
+import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'
+import '@quasar/extras/ionicons-v4/ionicons-v4.css'
 // import '@quasar/extras/mdi-v4/mdi-v4.css'
-// import '@quasar/extras/eva-icons/eva-icons.css'
+import '@quasar/extras/eva-icons/eva-icons.css'
 
 createApp(App)
   .use(router)

src/views/Chat/ChatContentMessageImage.vue

 <template>
-    <q-img
-        @click="viewImage"
-        :src="imgSrc"
-        :ratio="content.width / content.height"
-        class="bg-white w-36 relative rounded-md"
-        style="max-height: 150px"
-        :no-spinner="fromMyself"
-        spinner-size="md"
-        spinner-color="primary"
-    >
-        <!-- 图片上灰色遮罩 -->
-        <transition name="fade">
-            <div v-if="showProgress" class="absolute-full flex flex-center">
-                <!-- 上传进度圆圈 -->
-                <q-circular-progress
-                    :value="uploadProgress.percentage"
-                    size="45px"
-                    :thickness="1"
-                    color="white"
-                    track-color="grey-6"
-                    class="q-ma-md"
-                /></div
-        ></transition>
-    </q-img>
+  <q-img
+    @click="viewImage"
+    :src="imgSrc"
+    :ratio="content.width / content.height"
+    class="bg-white !w-36 relative rounded-md"
+    style="max-height: 150px"
+    :no-spinner="fromMyself"
+    spinner-size="md"
+    spinner-color="primary"
+  >
+    <!-- 图片上灰色遮罩 -->
+    <transition name="fade">
+      <div v-if="showProgress" class="absolute-full flex flex-center">
+        <!-- 上传进度圆圈 -->
+        <q-circular-progress
+          :value="uploadProgress.percentage"
+          size="45px"
+          :thickness="1"
+          color="white"
+          track-color="grey-6"
+          class="q-ma-md"
+        /></div
+    ></transition>
+  </q-img>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
-import { useQuasar } from 'quasar'
-import MediaViewerVue from '@/components/MediaViewer.vue'
+import { computed, defineComponent } from "vue";
+import { useQuasar } from "quasar";
+import MediaViewerVue from "@/components/MediaViewer.vue";
+
+let mark = 0;
 
 export default defineComponent({
-    props: { fromMyself: Boolean, content: Object, state: String, uploadProgress: Object },
+  props: {
+    fromMyself: Boolean,
+    content: Object,
+    state: String,
+    uploadProgress: Object,
+  },
 
-    setup(props) {
-        const imgSrc = computed(() => {
-            if (props?.content?.rawMessage) {
-                return URL.createObjectURL(props?.content?.rawMessage)
-            } else {
-                return props?.content?.mediaUrl
-            }
-        })
+  setup(props) {
+    const imgSrc = computed(() => {
+      if (props?.content?.rawMessage) {
+        return URL.createObjectURL(props?.content?.rawMessage);
+      } else {
+        return props?.content?.mediaUrl;
+      }
+    });
 
-        const showProgress = computed(() => {
-            if (props.state === 'pending') {
-                return props.uploadProgress != undefined && props.uploadProgress.percentage < 100
-            } else {
-                return false
-            }
-        })
+    const showProgress = computed(() => {
+      if (props.state === "pending") {
+        return (
+          props.uploadProgress != undefined &&
+          props.uploadProgress.percentage < 100
+        );
+      } else {
+        return false;
+      }
+    });
 
-        const quasar = useQuasar()
-        const viewImage = () => {
-            quasar.dialog({
-                component: MediaViewerVue,
-                componentProps: {
-                    type: 'image',
-                    url: imgSrc.value,
-                    ratio: props?.content?.width / props?.content?.height,
-                },
-            })
-        }
+    const quasar = useQuasar();
+    const viewImage = () => {
+      if (new Date().getTime() - mark >= 200) {
+        quasar.dialog({
+          component: MediaViewerVue,
+          componentProps: {
+            type: "image",
+            url: imgSrc.value,
+            ratio: props?.content?.width / props?.content?.height,
+          },
+        });
+        mark = new Date().getTime();
+      }
+    };
 
-        return { imgSrc, showProgress, viewImage }
-    },
-})
+    return { imgSrc, showProgress, viewImage };
+  },
+});
 </script>

src/views/Chat/ChatContentMessageVideo.vue

@@ -3,7 +3,7 @@
         @click="viewVideo"
         :src="posterImgSrc"
         :ratio="content.width / content.height"
-        class="bg-white w-36 relative rounded-md"
+        class="bg-white !w-36 relative rounded-md"
         style="max-height: 150px; min-height: 100px"
         :no-spinner="fromMyself"
         spinner-size="md"

src/views/Chat/ChatInput.vue

@@ -21,11 +21,11 @@
 
     <!-- 没有输入文字，显示 `加号` 按钮 -->
     <button
-      v-if="false"
+      v-if="!inputText"
       @click="showMenu ? (showMenu = false) : (showMenu = true)"
       class="w-7 h-7 mx-2.5 text-center select-none focus:outline-none"
     >
-      <i class="iconfont text-primary text-xl">&#xe605;</i>
+      <i class="iconfont !text-xl text-black">&#xe605;</i>
     </button>
     <!-- 有输入文字，显示 `发送` 按钮 -->
     <button
@@ -55,7 +55,7 @@
     class="min-h-input-menu flex items-center px-8 text-sm text-subtle"
   >
     <ChatInputAlbumVue />
-    <ChatInputCameraVue />
+    <!-- <ChatInputCameraVue /> -->
   </div>
 </template>
 

src/views/Chat/ChatInputAlbum.vue

@@ -6,18 +6,19 @@
         ref="input"
         name="file"
         type="file"
-        accept=".png, .jpg, .jpeg, .gif, .mov, .mp4, .m4v"
+        accept="video/*,image/*"
         @change="receiveImage"
     />
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref } from 'vue'
+import { defineComponent, nextTick, reactive, ref } from 'vue'
 import iconUrl from '@/assets/input_menu_album.png'
 import ChatInputMenuButtonVue from '@/views/Chat/ChatInputMenuButton.vue'
 import { messageStore } from '@/store/messagesStore'
 import { ChatMessageTypes } from '@/types/chatMessageTypes'
 import compress from '@/utils/compressor'
+import { Toast } from 'vant'
 
 export default defineComponent({
     components: { ChatInputMenuButtonVue },
@@ -75,6 +76,9 @@ export default defineComponent({
                     URL.revokeObjectURL(video.src)
                 }
             } else {
+                nextTick(()=>{
+                    Toast.fail("未能识别的文件类型")
+                })
                 throw '未能识别的文件类型'
             }
 

src/views/Chat/ChatInputText.vue

 <template>
-    <textarea
-        ref="textarea"
-        @keydown.enter.prevent="sendTextMessage"
-        class="enable-touch flex-grow border-none outline-none py-2.5 h-9"
-        v-model="inputText"
-        style="max-height: 6em"
-        type="text"
-        placeholder="想说点什么呢..."
-        :input-class="['text-base']"
-    />
+  <textarea
+    ref="textarea"
+    @keydown.enter.prevent="sendTextMessage"
+    class="enable-touch flex-grow border-none outline-none py-2.5 h-9 my-2"
+    v-model="inputText"
+    style="
+      max-height: 6em;
+      background: #f5f6f9;
+      border-radius: 19px;
+      margin-left: 5px;
+    "
+    type="text"
+    placeholder="想说点什么呢..."
+    :input-class="['text-base']"
+  />
 </template>
 
 <script lang="ts">
-import { textInputStore } from '@/store/textInputStore'
-import { MessageContent } from '@/types/chat-message'
-import { ref } from '@vue/reactivity'
-import { defineComponent, onMounted } from '@vue/runtime-core'
-import autosize from 'autosize'
+import { textInputStore } from "@/store/textInputStore";
+import { MessageContent } from "@/types/chat-message";
+import { ref } from "@vue/reactivity";
+import { defineComponent, nextTick, onMounted, watch } from "@vue/runtime-core";
+import autosize from "autosize";
 
 export default defineComponent({
-    emits: ['send'],
+  emits: ["send"],
 
-    setup(props, { emit }) {
-        
-        /** 文本输入框中的实时内容 */
-        const inputText = textInputStore.inputText
+  setup(props, { emit }) {
+    /** 文本输入框中的实时内容 */
+    const inputText = textInputStore.inputText;
 
-        /** 告诉父组件要发送一条文本消息 */
-        const sendTextMessage = () => {
-            const textMessageContent: MessageContent = { content: inputText.value }
-            inputText.value && emit('send', { type: 1, content: textMessageContent })
-        }
+    /** 告诉父组件要发送一条文本消息 */
+    const sendTextMessage = () => {
+      const textMessageContent: MessageContent = { content: inputText.value };
+      inputText.value && emit("send", { type: 1, content: textMessageContent });
+    };
 
-        /** 限定 textarea 的最大长度 */
-        const textarea = ref<HTMLTextAreaElement | null>(null)
-        onMounted(() => textarea.value && autosize(textarea.value))
+    watch(inputText, (newv, oldv) => {
+      if (inputText.value.length >= 500) {
+        inputText.value = oldv;
+      }
+      if (inputText.value === "") {
+        nextTick(() => {
+          textarea.value && autosize(textarea.value);
+        });
+      }
+    });
 
-        return { inputText, sendTextMessage, textarea }
-    },
-})
+    /** 限定 textarea 的最大长度 */
+    const textarea = ref<HTMLTextAreaElement | null>(null);
+    onMounted(() => textarea.value && autosize(textarea.value));
+
+    return { inputText, sendTextMessage, textarea };
+  },
+});
 </script>

tailwind.config.js

@@ -79,6 +79,9 @@ module.exports = {
     padding: ['responsive', 'important'],
     backgroundColor: ['responsive', 'important'],
     borderRadius: ['responsive', 'important'],
+    fontSize: ['responsive', "important"],
+    width: ['responsive', "important"],
+    height: ['responsive', "important"],
   },
   plugins: [
     plugin(function ({ addVariant }) {