style

components/image-preview.vue

@@ -3,21 +3,17 @@
         :modal="false"
         :before-close="close"
         :visible="value"
-        custom-class="hide-header show-close padding-0 width-auto"
+        :show-close="false"
+        custom-class="transparent"
+        width="90%"
     >
         <div class="d-flex flex-column">
-            <div class="preview-title text-center">图片预览</div>
-
-            <div class="d-flex justify-content-center" style="min-width: 300px">
-                <img v-if="file" :src="file.url" :style="style" />
+            <div class="d-flex justify-content-center">
+                <img v-if="file" :src="file.url" />
+                <i class="el-icon-close" @click="close"></i>
             </div>
 
             <div class="d-flex justify-content-center actions">
-                <span
-                    class="d-flex align-items-center justify-content-center"
-                    @click="set2Default"
-                    >1:1</span
-                >
                 <a
                     class="d-flex align-items-center justify-content-center"
                     :href="file.url"
@@ -31,77 +27,68 @@
 </template>
 
 <script lang="ts">
-import { Component, Model, Prop, Vue } from "vue-property-decorator";
-
-@Component({ components: {} })
-export default class ImagePreview extends Vue {
-    @Model("update")
-    private value!: boolean;
+    import { Component, Model, Prop, Vue } from "vue-property-decorator";
 
-    @Prop()
-    private file!: { name: string; url: string };
+    @Component({ components: {} })
+    export default class ImagePreview extends Vue {
+        @Model("update")
+        private value!: boolean;
 
-    private style: {
-        "max-height": number | string;
-        "max-width": number | string;
-    } = {
-        "max-height": "300px",
-        "max-width": "600px",
-    };
+        @Prop()
+        private file!: { name: string; url: string };
 
-    private close() {
-        setTimeout(
-            () =>
-                (this.style = { "max-height": "300px", "max-width": "600px" }),
-            300
-        );
-        this.$emit("update", false);
-    }
-
-    private set2Default() {
-        this.style = { "max-height": "1600px", "max-width": "1600px" };
-    }
+        private close() {
+            this.$emit("update", false);
+        }
 
-    private get getAttachment() {
-        if (this.file) {
-            return this.file.name;
+        private get getAttachment() {
+            if (this.file) {
+                return this.file.name;
+            }
+            return "文件下载";
         }
-        return "文件下载";
     }
-}
 </script>
 
 <style lang="less" scoped>
-.preview-title {
-    font-size: 18px;
-    color: #333;
-    margin-bottom: 15px;
-}
+    img {
+        max-width: 100%;
+        max-height: 100%;
 
-.actions {
-    margin: 15px 0;
+        & + i {
+            top: -25px;
+            right: 20px;
+            background-color: rgba(0, 0, 0, 0.5);
+            border-radius: 50%;
+            padding: 5px;
+            font-size: 40px;
+            color: #fff;
+            display: table;
+            position: relative;
+            z-index: 1;
+            cursor: pointer;
+        }
+    }
 
-    > span,
-    a {
-        width: 30px;
-        height: 30px;
-        background-color: #7a7b7d;
-        color: #fff;
-        border-radius: 50%;
-        cursor: pointer;
+    .actions {
+        margin: 15px 0;
 
-        i {
+        a {
+            width: 50px;
+            height: 50px;
+            background-color: #7a7b7d;
             color: #fff;
-            font-size: 20px;
-        }
+            border-radius: 50%;
+            cursor: pointer;
 
-        & + span {
-            margin-left: 15px;
-        }
-    }
+            i {
+                color: #fff;
+                font-size: 30px;
+            }
 
-    > a {
-        margin-left: 15px;
+            & + span {
+                margin-left: 15px;
+            }
+        }
     }
-}
 </style>

service/monitor.ts

@@ -3,17 +3,17 @@ import { UniplatSdk } from "uniplat-sdk";
 import { ImEnvironment } from "../model";
 
 export const enum Product {
-    Default = 'default',
-    QqxbWeixin = 'qqxb-weixin',
-    QqxbApp = 'qqxb-app',
-    Fulibao = 'fulibao',
-    HrManager = 'hr-manager',
-    Hrs100 = 'hrs100',
-    HrsApp = 'hrs-app',
-    BiJie = 'bi-jie',
-    Cashier = 'cashier',
+    Default = "default",
+    QqxbWeixin = "qqxb-weixin",
+    QqxbApp = "qqxb-app",
+    Fulibao = "fulibao",
+    HrManager = "hr-manager",
+    Hrs100 = "hrs100",
+    HrsApp = "hrs-app",
+    BiJie = "bi-jie",
+    Cashier = "cashier",
     Uniplat = "uniplat",
-    DeShengJiuYeBao = 'de-sheng-jiu-ye-bao'
+    DeShengJiuYeBao = "de-sheng-jiu-ye-bao",
 }
 
 const enum ProductTable {
@@ -88,33 +88,40 @@ class WebMonitor {
     public useSdk(sdk: UniplatSdk, options: SdkMonitorOption) {
         this.envir = options.envir;
         this.product = options.product;
-        sdk.events.addUniversalErrorResponseCallback((r: AxiosResponse<any>) => {
-            if (this.enable()) {
-                const msg: string[] = [];
-                msg.push(`URL: ${decodeURIComponent(r.config.url as string)}`);
-                msg.push(`Token: ${sdk.global.jwtToken}`);
-                const header = r.config.headers;
-                if (header) {
-                    msg.push(`CurrentOrg: ${header.CurrentOrg}`);
-                    msg.push(`Scenes: ${header.Scenes}`);
-                }
+        sdk.events.addUniversalErrorResponseCallback(
+            (r: AxiosResponse<any>) => {
+                if (this.enable()) {
+                    const msg: string[] = [];
+                    msg.push(
+                        `URL: ${decodeURIComponent(r.config.url as string)}`
+                    );
+                    msg.push(`Token: ${sdk.global.jwtToken}`);
+                    const header = r.config.headers;
+                    if (header) {
+                        msg.push(`CurrentOrg: ${header.CurrentOrg}`);
+                        msg.push(`Scenes: ${header.Scenes}`);
+                    }
 
-                options &&
-                    options.userAgent &&
-                    msg.push(`UserAgent: ${window.navigator.userAgent}`);
-                r.config && r.config.params && msg.push(`Params: ${r.config.params}`);
-                r.config && r.config.data && msg.push(`Payload: ${JSON.stringify(r.config.data)}`);
+                    options &&
+                        options.userAgent &&
+                        msg.push(`UserAgent: ${window.navigator.userAgent}`);
+                    r.config &&
+                        r.config.params &&
+                        msg.push(`Params: ${JSON.stringify(r.config.params)}`);
+                    r.config &&
+                        r.config.data &&
+                        msg.push(`Payload: ${JSON.stringify(r.config.data)}`);
 
-                msg.push(
-                    `Exception: ${((r.data.error as string) || "").substring(
-                        0,
-                        500
-                    )}`
-                );
+                    msg.push(
+                        `Exception: ${(
+                            (r.data.error as string) || ""
+                        ).substring(0, 500)}`
+                    );
 
-                r && r.config && this.error(msg.join("\n"));
+                    r && r.config && this.error(msg.join("\n"));
+                }
             }
-        });
+        );
     }
 }
 

utils/chat-info.ts

@@ -88,7 +88,7 @@ export async function getChatModelInfo(
               }
     ) as ChatModelInfoData;
 
-    let removing = [];
+    const removing = [];
     for (const item of waitingAction) {
         if (item.key === key) {
             item.resolve(o);

utils/user-info.ts

 import { UniplatSdk } from "uniplat-sdk";
 import Chat from "../xim";
 
-export type UserMapping = {
-    [eid: string]: {
-        name: string;
-        phone: string;
-        icon: string;
-        alias_name: string;
-    };
-};
+export interface ChatUserSummaryInfo {
+    name: string;
+    phone: string;
+    icon: string;
+    alias_name: string;
+}
+
+export type UserMapping = { [eid: string]: ChatUserSummaryInfo };
 
 const userMapping: UserMapping = {};
 
@@ -25,6 +25,12 @@ interface UserInfo {
 
 export const getUserMapping = () => userMapping;
 
+const loadingKeys = new Set<string>();
+let waitingAction: {
+    key: string;
+    resolve: (d: ChatUserSummaryInfo) => void;
+}[] = [];
+
 export class ChatUserInfoService {
     public static async getUserInfo(eid: string, sdk?: UniplatSdk) {
         if (userMapping[eid]) {
@@ -33,6 +39,15 @@ export class ChatUserInfoService {
         if (!+eid || +eid < 0) {
             return { name: "", phone: "", icon: "", alias_name: "" };
         }
+
+        if (loadingKeys.has(eid)) {
+            return new Promise<ChatUserSummaryInfo>((resolve) =>
+                waitingAction.push({ key: eid, resolve })
+            );
+        }
+
+        loadingKeys.add(eid);
+
         const info = await (sdk || Chat.getSdk())
             .domainService(
                 "passport",
@@ -47,6 +62,21 @@ export class ChatUserInfoService {
             alias_name: info.alias_name,
         };
         userMapping[eid] = data;
+
+        const removing = [];
+        for (const item of waitingAction) {
+            if (item.key === eid) {
+                item.resolve(data);
+                removing.push(item.key);
+            }
+        }
+
+        for (const item of removing) {
+            waitingAction = waitingAction.filter((i) => i.key !== item);
+        }
+
+        loadingKeys.delete(eid);
+
         return data;
     }