Skip to content

F
fns_front_2
Commit a9db791a authored by chenqikuai's avatar chenqikuai
Browse files
Options

优化项目体积

parent d547a65f
Hide whitespace changes
Inline Side-by-side
Showing with 219 additions and 167 deletions
package.json
View file @ a9db791a
......@@ -4,7 +4,7 @@
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
"build": "vue-cli-service build --report"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
......
src/service/UserManagementService/index.ts
View file @ a9db791a
......@@ -3,19 +3,34 @@ import baseAxios from '../index'
const prefix = '/user'
export function userLogin(data: {
/* 成功修改后会退出登录 */
export function userChangePhone(data: {
newPhone: string
newVerifyCode: string
phone: string
pwd: string
userType: eRole
verifyCode: string
}) {
return baseAxios({
url: prefix + '/login',
method: 'POST',
method: 'post',
url: prefix + '/change/phone',
data,
})
}
/* 成功修改后会退出登录 */
export function userChangePwd(data: {
newPwd: string
phone: string
verifyCode: string
}) {
return baseAxios({
method: 'post',
url: prefix + '/change/pwd',
data,
})
}
/* true已注册 false未注册 */
export function userCheckPhone(phone: string) {
return baseAxios({
url: prefix + '/check/phone',
......@@ -38,9 +53,45 @@ export function userCreate(data: {
})
}
/* 用户可通过验证码或密码登录 */
export function userLogin(data: {
phone: string
pwd?: string
userType?: eRole
verifyCode: string
}) {
return baseAxios({
url: prefix + '/login',
method: 'POST',
data,
})
}
export function userLogout() {
return baseAxios({
url: prefix + '/logout',
method: 'GET',
})
}
// function padding(all: number): any;
// function padding(topAndBottom: number, leftAndRight: number): any;
// function padding(top: number, right: number, bottom: number, left: number): any;
// // Actual implementation that is a true representation of all the cases the function body needs to handle
// function padding(a: number, b?: number, c?: number, d?: number) {
// if (b === undefined && c === undefined && d === undefined) {
// b = c = d = a;
// } else if (c === undefined && d === undefined) {
// c = a;
// d = b;
// }
// return {
// top: a,
// right: b,
// bottom: c,
// left: d
// };
// }
// padding(1, 2, 3, 4)
\ No newline at end of file
src/store/messagesStore.ts
View file @ a9db791a
......@@ -14,10 +14,10 @@ import { ChatMessageTypes } from '@/types/chatMessageTypes'
import encodeChatMessage from '@/utils/fzm-message-protocol-chat/encodeChatMessage'
import { v4 as uuidv4 } from 'uuid'
import { connectionState } from './connectionStore'
import { uploadFile, abortUploadFile } from './ossStore'
// import { uploadFile, abortUploadFile } from './ossStore'
import { dtalk } from '@/utils/fzm-message-protocol-chat/protobuf'
import { date, StringDictionary } from 'quasar'
import { Checkpoint } from 'ali-oss'
// import { Checkpoint } from 'ali-oss'
import axios, { AxiosResponse } from 'axios'
import { ChatRecordBody } from '@/types/record'
import ChatMessageDB from '@/db/ChatMessageDB'
......@@ -33,7 +33,7 @@ export interface UploadProgress {
/** 上传百分比，值为 0 ~ 100 */
percentage: number
/** OSS 分片上传产生的碎片 */
checkpoint?: Checkpoint
checkpoint?: any
}
/** MessageStore 存储的数据结构 */
......@@ -159,35 +159,35 @@ class MessageStore {
return
}
uploadFile(content.rawMessage, type, this.updateProgress(message))
.then((url) => {
// 如果用户提前终止了本次上传
if (message.state === 'failure') return
// uploadFile(content.rawMessage, type, this.updateProgress(message))
// .then((url) => {
// // 如果用户提前终止了本次上传
// if (message.state === 'failure') return
console.log(`阿里云 OSS 上传成功, ${url}`)
// console.log(`阿里云 OSS 上传成功, ${url}`)
if (type === ChatMessageTypes.Audio) {
;(<dtalk.proto.IAudioMsg>content).mediaUrl = url
} else if (type === ChatMessageTypes.Image) {
;(<dtalk.proto.IImageMsg>content).mediaUrl = url
} else if (type === ChatMessageTypes.Video) {
;(<dtalk.proto.IVideoMsg>content).mediaUrl = url
}
this.send(type, content, _uuid, message, target as string)
})
.catch((err) => {
console.log(err)
message.state = 'failure'
ChatDBService.getInstance().handleEveryReceive({
msg: message,
masterId: getMasterIdFromDisplayMsg(message),
isChattingWithTargetId: isChattingWith(
getMasterIdFromDisplayMsg(message),
getTargetIdFromDisplayMsg(message),
),
})
/* 存数据库！！！！！！ */
})
// if (type === ChatMessageTypes.Audio) {
// ;(<dtalk.proto.IAudioMsg>content).mediaUrl = url
// } else if (type === ChatMessageTypes.Image) {
// ;(<dtalk.proto.IImageMsg>content).mediaUrl = url
// } else if (type === ChatMessageTypes.Video) {
// ;(<dtalk.proto.IVideoMsg>content).mediaUrl = url
// }
// this.send(type, content, _uuid, message, target as string)
// })
// .catch((err) => {
// console.log(err)
// message.state = 'failure'
// ChatDBService.getInstance().handleEveryReceive({
// msg: message,
// masterId: getMasterIdFromDisplayMsg(message),
// isChattingWithTargetId: isChattingWith(
// getMasterIdFromDisplayMsg(message),
// getTargetIdFromDisplayMsg(message),
// ),
// })
// /* 存数据库！！！！！！ */
// })
}
// 文本类消息，不需要上传 OSS，直接发送
else {
......@@ -259,8 +259,8 @@ class MessageStore {
* @param uuid 终止的消息 id
* @param checkpoint 分片片段
*/
abortSendingMessage(uuid: string, checkpoint: Checkpoint) {
abortUploadFile(checkpoint)
abortSendingMessage(uuid: string, checkpoint: any) {
// abortUploadFile(checkpoint)
const message = this.messages.find((m) => m.uuid == uuid)
if (message) {
message.state = 'failure'
......@@ -324,7 +324,7 @@ class MessageStore {
/** 返回一个回调函数，该回调函数处理每次上传进度更新 */
private updateProgress(message: DisplayMessage) {
return (p: number, checkpoint: Checkpoint) => {
return (p: number, checkpoint: any) => {
// 被用户手动终止上传的消息不更新进度
if (message.state !== 'pending') return
// 获取最新的上传百分比和最新的碎片信息
......
src/store/ossStore.ts
View file @ a9db791a
/**
* 利用此实例来上传文件到「阿里云 OSS」，并获取文件的链接
*/
// /**
// * 利用此实例来上传文件到「阿里云 OSS」，并获取文件的链接
// */
import axios from 'axios'
import { date } from 'quasar'
import OSS, { Checkpoint } from 'ali-oss'
import { ChatMessageTypes } from '@/types/chatMessageTypes'
import { v4 as uuidv4 } from 'uuid'
// import axios from 'axios'
// import { date } from 'quasar'
// // import OSS, { Checkpoint } from 'ali-oss'
// import { ChatMessageTypes } from '@/types/chatMessageTypes'
// import { v4 as uuidv4 } from 'uuid'
interface Credentials {
AccessKeyId: string
AccessKeySecret: string
Expiration: string
SecurityToken: string
}
// interface Credentials {
// AccessKeyId: string
// AccessKeySecret: string
// Expiration: string
// SecurityToken: string
// }
let credentials: Credentials | undefined
// let credentials: Credentials | undefined
const getCredentials = (): Promise<Credentials> => {
return new Promise<Credentials>((resolve, reject) => {
if (credentials && !expired(new Date(credentials.Expiration))) {
console.log(`OSS 凭证已存在，直接使用`)
resolve(credentials)
} else {
axios({
method: 'get',
url: `/oss/get-token?timestamp=${Date.now()}`,
})
.then((res) => {
credentials = res.data.data.Credentials as Credentials
resolve(credentials)
})
.catch(() => {
reject()
})
}
})
}
// const getCredentials = (): Promise<Credentials> => {
// return new Promise<Credentials>((resolve, reject) => {
// if (credentials && !expired(new Date(credentials.Expiration))) {
// console.log(`OSS 凭证已存在，直接使用`)
// resolve(credentials)
// } else {
// axios({
// method: 'get',
// url: `/oss/get-token?timestamp=${Date.now()}`,
// })
// .then((res) => {
// credentials = res.data.data.Credentials as Credentials
// resolve(credentials)
// })
// .catch(() => {
// reject()
// })
// }
// })
// }
const expired = (expiration: Date) => {
const dateDiff = date.getDateDiff(new Date(), expiration, 'seconds')
return dateDiff >= 0
}
// const expired = (expiration: Date) => {
// const dateDiff = date.getDateDiff(new Date(), expiration, 'seconds')
// return dateDiff >= 0
// }
const protocol = process.env.NODE_ENV === 'development' ? 'http' : 'https'
const bucket = process.env.NODE_ENV === 'development' ? 'dld-test' : 'otc-chat'
const region = process.env.NODE_ENV === 'development' ? 'oss-cn-shanghai' : 'oss-cn-shanghai'
const ossBaseUrl = `${protocol}://${bucket}.${region}.aliyuncs.com/`
// const protocol = process.env.NODE_ENV === 'development' ? 'http' : 'https'
// const bucket = process.env.NODE_ENV === 'development' ? 'dld-test' : 'otc-chat'
// const region = process.env.NODE_ENV === 'development' ? 'oss-cn-shanghai' : 'oss-cn-shanghai'
// const ossBaseUrl = `${protocol}://${bucket}.${region}.aliyuncs.com/`
const getOssClientInstance = (): Promise<OSS> => {
return new Promise((resolve, reject) => {
getCredentials()
.then((c) => {
const oss = new OSS({
accessKeyId: c.AccessKeyId,
accessKeySecret: c.AccessKeySecret,
stsToken: c.SecurityToken,
region,
bucket,
})
resolve(oss)
})
.catch((err) => {
reject(err)
})
})
}
// const getOssClientInstance = (): Promise<OSS> => {
// return new Promise((resolve, reject) => {
// getCredentials()
// .then((c) => {
// const oss = new OSS({
// accessKeyId: c.AccessKeyId,
// accessKeySecret: c.AccessKeySecret,
// stsToken: c.SecurityToken,
// region,
// bucket,
// })
// resolve(oss)
// })
// .catch((err) => {
// reject(err)
// })
// })
// }
type OnprogressFunction = (p: number, checkpoint: Checkpoint) => void
// type OnprogressFunction = (p: number, checkpoint: Checkpoint) => void
/**
* 将 Blob 对象上传至阿里云 OSS
* @param file 文件，按媒体类型和日期分文件夹，文件名为随机的 uuid
* @param type 消息类型
* @param onprogress 回调函数，处理每次上传进度更新
* @returns 上传成功的话能获得 url
*/
export const uploadFile = (file: Blob, type: ChatMessageTypes, onprogress?: OnprogressFunction): Promise<string> => {
return new Promise((resolve, reject) => {
getOssClientInstance()
.then((oss) => {
let typeName: string
let extName: string
switch (type) {
case ChatMessageTypes.Audio:
typeName = `audio`
extName = 'wav'
break
case ChatMessageTypes.Image:
typeName = `image`
extName = 'jpg'
break
case ChatMessageTypes.Video:
typeName = `video`
extName = 'mp4'
break
default:
throw '上传阿里云 OSS 时出错：暂未分类的文件类型'
}
// /**
// * 将 Blob 对象上传至阿里云 OSS
// * @param file 文件，按媒体类型和日期分文件夹，文件名为随机的 uuid
// * @param type 消息类型
// * @param onprogress 回调函数，处理每次上传进度更新
// * @returns 上传成功的话能获得 url
// */
// export const uploadFile = (file: Blob, type: ChatMessageTypes, onprogress?: OnprogressFunction): Promise<string> => {
// return new Promise((resolve, reject) => {
// getOssClientInstance()
// .then((oss) => {
// let typeName: string
// let extName: string
// switch (type) {
// case ChatMessageTypes.Audio:
// typeName = `audio`
// extName = 'wav'
// break
// case ChatMessageTypes.Image:
// typeName = `image`
// extName = 'jpg'
// break
// case ChatMessageTypes.Video:
// typeName = `video`
// extName = 'mp4'
// break
// default:
// throw '上传阿里云 OSS 时出错：暂未分类的文件类型'
// }
const day = date.formatDate(new Date(), 'YYYYMMDD')
// const day = date.formatDate(new Date(), 'YYYYMMDD')
/** example: `otc-chat/audio/20210415/qqq-www-eee-rrr.wav` */
const objectName = `otc-chat/${typeName}/${day}/${uuidv4()}.${extName}`
// /** example: `otc-chat/audio/20210415/qqq-www-eee-rrr.wav` */
// const objectName = `otc-chat/${typeName}/${day}/${uuidv4()}.${extName}`
oss.multipartUpload(objectName, file, {
progress(p, checkpoint) {
onprogress && onprogress(p, checkpoint)
},
})
.then((res) => {
resolve(ossBaseUrl + res.name)
})
.catch((res) => {
reject(res)
})
})
.catch((err) => {
reject(err)
})
})
}
// oss.multipartUpload(objectName, file, {
// progress(p, checkpoint) {
// onprogress && onprogress(p, checkpoint)
// },
// })
// .then((res) => {
// resolve(ossBaseUrl + res.name)
// })
// .catch((res) => {
// reject(res)
// })
// })
// .catch((err) => {
// reject(err)
// })
// })
// }
export const abortUploadFile = (checkpoint: Checkpoint): Promise<void> => {
return new Promise((resolve) => {
getOssClientInstance().then((oss) => {
oss.abortMultipartUpload(checkpoint.name, checkpoint.uploadId).then(() => {
resolve()
})
})
})
}
// export const abortUploadFile = (checkpoint: Checkpoint): Promise<void> => {
// return new Promise((resolve) => {
// getOssClientInstance().then((oss) => {
// oss.abortMultipartUpload(checkpoint.name, checkpoint.uploadId).then(() => {
// resolve()
// })
// })
// })
// }
src/views/Chat/ChatContentMessage.vue
View file @ a9db791a
......@@ -45,21 +45,21 @@
</div>
<!-- 图片消息 -->
<ChatContentMessageImageVue
<!-- <ChatContentMessageImageVue
v-else-if="type === 3"
:from-myself="fromMyself"
:state="state"
:content="content"
:uploadProgress="uploadProgress"
/>
/> -->
<ChatContentMessageVideoVue
<!-- <ChatContentMessageVideoVue
v-else-if="type === 4"
:from-myself="fromMyself"
:state="state"
:content="content"
:uploadProgress="uploadProgress"
/>
/> -->
<!-- 卡片消息 -->
<ChatContentMessageCardVue
......@@ -105,9 +105,9 @@ import default_avatar_url from "@/assets/user_avatar.png";
import { messageStore } from "@/store/messagesStore";
import ChatContentMessageTextVue from "./ChatContentMessageText.vue";
import ChatContentMessageCardVue from "./ChatContentMessageCard.vue";
import ChatContentMessageImageVue from "./ChatContentMessageImage.vue";
// import ChatContentMessageImageVue from "./ChatContentMessageImage.vue";
import { ChatMessageTypes } from "@/types/chatMessageTypes";
import ChatContentMessageVideoVue from "./ChatContentMessageVideo.vue";
// import ChatContentMessageVideoVue from "./ChatContentMessageVideo.vue";
import { target } from "@/store/appCallerStore";
import { copyToClipboard } from 'quasar'
import { Toast } from "vant";
......@@ -119,8 +119,8 @@ export default defineComponent({
components: {
ChatContentMessageTextVue,
ChatContentMessageCardVue,
ChatContentMessageImageVue,
ChatContentMessageVideoVue,
// ChatContentMessageImageVue,
// ChatContentMessageVideoVue,
},
props: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment