From e1f771cbccb4ea0defc7270bd8dade80a35a9577 Mon Sep 17 00:00:00 2001 From: cuiyouliang Date: Fri, 30 May 2025 17:56:05 +0800 Subject: [PATCH] =?UTF-8?q?IM=E7=9B=B8=E5=85=B3=E6=A8=A1=E5=9D=97=E6=9C=AC?= =?UTF-8?q?=E5=9C=B0=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/main.ts | 33 +- src/permission.ts | 7 +- src/router/index.ts | 5 + src/utils/link.ts | 140 +++++ src/utils/request.ts | 5 +- src/views/im/components/About.vue | 430 +++++++++++++++ src/views/im/components/AdvList.vue | 31 ++ src/views/im/components/AdvListItem.vue | 105 ++++ .../im/components/ChatDefaultContent.vue | 59 +++ src/views/im/components/EditProfile.vue | 492 ++++++++++++++++++ src/views/im/components/EditProfilePopup.vue | 38 ++ src/views/im/components/Header.vue | 147 ++++++ src/views/im/components/Menu.vue | 427 +++++++++++++++ src/views/im/components/NavBar.vue | 256 +++++++++ src/views/im/components/Profile.vue | 423 +++++++++++++++ src/views/im/icon/adv-arrow.svg | 17 + src/views/im/icon/arrow-down-line.png | Bin 0 -> 1732 bytes src/views/im/icon/arrow-down.png | Bin 0 -> 400 bytes src/views/im/icon/calendar.svg | 8 + src/views/im/icon/global.png | Bin 0 -> 2006 bytes src/views/im/icon/menu.png | Bin 0 -> 691 bytes src/views/im/icon/message-real.svg | 16 + src/views/im/icon/message-selected.svg | 16 + src/views/im/icon/message.svg | 14 + src/views/im/icon/profile-selected.svg | 32 ++ src/views/im/icon/profile.svg | 17 + src/views/im/icon/relation-real.svg | 19 + src/views/im/icon/relation-selected.svg | 16 + src/views/im/icon/relation.svg | 18 + src/views/im/icon/setting.png | Bin 0 -> 457 bytes src/views/im/index.vue | 189 +++++++ src/views/im/styles/common.scss | 115 ++++ src/views/im/styles/h5/home.scss | 63 +++ src/views/im/styles/h5/login.scss | 154 ++++++ src/views/im/styles/h5/profile.scss | 94 ++++ src/views/im/styles/home.scss | 3 + src/views/im/styles/login.scss | 3 + src/views/im/styles/profile.scss | 3 + src/views/im/styles/web/home.scss | 121 +++++ src/views/im/styles/web/login.scss | 237 +++++++++ src/views/im/styles/web/profile.scss | 124 +++++ vite.config.ts | 9 +- 43 files changed, 3880 insertions(+), 8 deletions(-) create mode 100644 src/utils/link.ts create mode 100644 src/views/im/components/About.vue create mode 100644 src/views/im/components/AdvList.vue create mode 100644 src/views/im/components/AdvListItem.vue create mode 100644 src/views/im/components/ChatDefaultContent.vue create mode 100644 src/views/im/components/EditProfile.vue create mode 100644 src/views/im/components/EditProfilePopup.vue create mode 100644 src/views/im/components/Header.vue create mode 100644 src/views/im/components/Menu.vue create mode 100644 src/views/im/components/NavBar.vue create mode 100644 src/views/im/components/Profile.vue create mode 100644 src/views/im/icon/adv-arrow.svg create mode 100644 src/views/im/icon/arrow-down-line.png create mode 100644 src/views/im/icon/arrow-down.png create mode 100644 src/views/im/icon/calendar.svg create mode 100644 src/views/im/icon/global.png create mode 100644 src/views/im/icon/menu.png create mode 100644 src/views/im/icon/message-real.svg create mode 100644 src/views/im/icon/message-selected.svg create mode 100644 src/views/im/icon/message.svg create mode 100644 src/views/im/icon/profile-selected.svg create mode 100644 src/views/im/icon/profile.svg create mode 100644 src/views/im/icon/relation-real.svg create mode 100644 src/views/im/icon/relation-selected.svg create mode 100644 src/views/im/icon/relation.svg create mode 100644 src/views/im/icon/setting.png create mode 100644 src/views/im/index.vue create mode 100644 src/views/im/styles/common.scss create mode 100644 src/views/im/styles/h5/home.scss create mode 100644 src/views/im/styles/h5/login.scss create mode 100644 src/views/im/styles/h5/profile.scss create mode 100644 src/views/im/styles/home.scss create mode 100644 src/views/im/styles/login.scss create mode 100644 src/views/im/styles/profile.scss create mode 100644 src/views/im/styles/web/home.scss create mode 100644 src/views/im/styles/web/login.scss create mode 100644 src/views/im/styles/web/profile.scss diff --git a/package.json b/package.json index fdfe767..c34dff4 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,8 @@ "dependencies": { "@element-plus/icons-vue": "2.3.1", "@highlightjs/vue-plugin": "2.1.0", + "@tencentcloud/chat": "^3.5.5", + "@tencentcloud/chat-uikit-vue": "^2.4.3", "@vueup/vue-quill": "1.2.0", "@vueuse/core": "13.1.0", "animate.css": "4.1.1", diff --git a/src/main.ts b/src/main.ts index 63a5c35..c8730a2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,7 +8,9 @@ import 'element-plus/theme-chalk/dark/css-vars.css'; import App from './App.vue'; import store from './store'; import router from './router'; - +import { TUIComponents, TUIChatKit } from './TUIKit'; +import { TUIStore, StoreName, TUITranslateService } from '@tencentcloud/chat-uikit-engine'; +import TUINotification from './TUIKit/components/TUINotification/index'; // 自定义指令 import directive from './directive'; @@ -55,3 +57,32 @@ app.use(plugins); directive(app); app.mount('#app'); + +const SDKAppID = 1600089570; // Your SDKAppID +const secretKey = 'b84abcf1d5c41a702b1c63fe50adaa1bc77cc51233d0073f044e25c6f21fcb58'; +const userSig = + 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwpX5pUCUk5mYl16ckZgPVVKckp1YUJCZomRlaGZgYGBhaWpuAJFJrSjILEoFipuamhoBpSCiJZm5IDFzEwtTSwsTY2OoKZnpQBtcPYq8XMvLkiKjTC1yDPLcM53zI7yS3POLLfyyDSNzK0ucjMOT-Q1Lgn09bZVqAf37Nfg_'; // Your secretKey +TUIChatKit.components(TUIComponents, app); +TUIChatKit.init(); +/** + * Init TUINotification configuration. + */ +TUINotification.setNotificationConfiguration({ + showPreviews: true, + allowNotifications: true, + notificationTitle: 'Tencent Cloud Chat', + notificationIcon: 'https://web.sdk.qcloud.com/im/demo/latest/faviconnew.png' +}); + +/** + * Listen for new messages and use notification components. + * This capability is only available in the web environment. + */ +TUIStore.watch(StoreName.CHAT, { + newMessageList: (newMessageList: unknown) => { + if (Array.isArray(newMessageList)) { + newMessageList.forEach((message) => TUINotification.notify(message)); + } + } +}); +export { SDKAppID, secretKey, userSig }; diff --git a/src/permission.ts b/src/permission.ts index fb60b07..de4c1b1 100644 --- a/src/permission.ts +++ b/src/permission.ts @@ -19,9 +19,10 @@ const isWhiteList = (path: string) => { router.beforeEach(async (to, from, next) => { NProgress.start(); - if (getToken()) { + next(); + /* if (getToken()) { to.meta.title && useSettingsStore().setTitle(to.meta.title as string); - /* has token*/ + /!* has token*!/ if (to.path === '/login') { next({ path: '/' }); NProgress.done(); @@ -62,7 +63,7 @@ router.beforeEach(async (to, from, next) => { next(`/login?redirect=${redirect}`); // 否则全部重定向到登录页 NProgress.done(); } - } + }*/ }); router.afterEach(() => { diff --git a/src/router/index.ts b/src/router/index.ts index a6497db..be19b69 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -37,6 +37,11 @@ export const constantRoutes: RouteRecordRaw[] = [ } ] }, + { + path: '/im-test', + hidden: true, + component: () => import('@/views/im/index.vue') + }, { path: '/social-callback', hidden: true, diff --git a/src/utils/link.ts b/src/utils/link.ts new file mode 100644 index 0000000..bd69091 --- /dev/null +++ b/src/utils/link.ts @@ -0,0 +1,140 @@ +const Link = { + adv: { + label: '首购低至1折, 复购7.5折起! 立即选购', + url: 'https://cloud.tencent.com/act/pro/imnew?from=16262', + }, + demo: { + label: '体验更多Demo', + url: 'https://cloud.tencent.com/document/product/269/36852', + }, + im: { + label: '访问官网', + url: 'https://cloud.tencent.com/product/im', + }, + privacy: { + label: '隐私条例', + url: 'https://web.sdk.qcloud.com/document/Tencent-IM-Privacy-Protection-Guidelines.html', + }, + agreement: { + label: '用户协议', + url: 'https://web.sdk.qcloud.com/document/Tencent-IM-User-Agreement.html', + }, + product: { + label: '产品文档', + url: 'https://cloud.tencent.com/document/product/269/1499#.E7.BE.A4.E7.BB.84.E5.8A.9F.E8.83.BD', + }, + customMessage: { + label: '自定义消息', + url: 'https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#createCustomMessage', + }, + contact: { + label: '联系我们', + url: 'https://cloud.tencent.com/document/product/269/59590', + }, + intl: { + label: '国际站', + url: 'https://web.sdk.qcloud.com/im/demo/en/index.html#/home', + }, + stepList: [ + { + label: '创建项目', + url: 'https://cloud.tencent.com/document/product/269/68493#.E6.AD.A5.E9.AA.A41.EF.BC.9A.E5.88.9B.E5.BB.BA.E9.A1.B9.E7.9B.AE', + }, + { + label: '下载TUIKit组件', + url: 'https://cloud.tencent.com/document/product/269/68493#.E6.AD.A5.E9.AA.A42.EF.BC.9A.E4.B8.8B.E8.BD.BD-tuikit-.E7.BB.84.E4.BB.B6', + }, + { + label: '引入TUIKit组件', + url: 'https://cloud.tencent.com/document/product/269/68493#.E6.AD.A5.E9.AA.A43.EF.BC.9A.E5.BC.95.E5.85.A5-tuikit-.E7.BB.84.E4.BB.B6', + }, + { + label: '获取SDKAppID', + url: 'https://cloud.tencent.com/document/product/269/68493#.E6.AD.A5.E9.AA.A44.EF.BC.9A-.E8.8E.B7.E5.8F.96-sdkappid-.E3.80.81.E5.AF.86.E9.92.A5.E4.B8.8E-userid', + }, + { + label: '调用TUIKit组件', + url: 'https://cloud.tencent.com/document/product/269/68493#.E6.AD.A5.E9.AA.A45.EF.BC.9A.E8.B0.83.E7.94.A8-tuikit-.E7.BB.84.E4.BB.B6', + }, + { + label: '启动项目', + url: 'https://cloud.tencent.com/document/product/269/68493#.E6.AD.A5.E9.AA.A46.EF.BC.9A.E5.90.AF.E5.8A.A8.E9.A1.B9.E7.9B.AE', + }, + { + label: '发送您的第一条消息', + url: 'https://cloud.tencent.com/document/product/269/68493#.E6.AD.A5.E9.AA.A47.EF.BC.9A.E5.8F.91.E9.80.81.E6.82.A8.E7.9A.84.E7.AC.AC.E4.B8.80.E6.9D.A1.E6.B6.88.E6.81.AF', + }, + ], + advList: [ + { + label: 'IM首购低至1折', + subLabel: '续费9折起', + btnText: '立即选购', + url: 'https://cloud.tencent.com/act/pro/imnew?from=16262', + }, + ], + apkQRCodeList: [ + { + type: 'android', + label: '扫码体验 Chat (React Native)', + url: 'https://web.sdk.qcloud.com/component/TUIKit/chat_react-native_demo_apk.png', + }, + { + type: 'android', + label: '扫码体验 Chat&Push (uni-app)', + url: 'https://qcloudimg.tencent-cloud.cn/raw/c1fed062d91cd95fdfb57059edcd5890.png', + }, + ], +}; + +const qrList = [ + { + icon: 'https://web.sdk.qcloud.com/im/assets/images/react_native.svg', + name: 'React Native', + link: 'https://web.sdk.qcloud.com/component/TUIKit/chat_react-native_demo_apk.png', + detail: '扫描二维码下载', + }, + { + icon: 'https://web.sdk.qcloud.com/im/assets/images/uniapp.svg', + name: 'Uniapp', + link: 'https://qcloudimg.tencent-cloud.cn/raw/c1fed062d91cd95fdfb57059edcd5890.png', + detail: '扫描二维码下载', + }, + { + icon: 'https://web.sdk.qcloud.com/im/assets/images/Android.svg', + name: 'Android', + link: 'https://web.sdk.qcloud.com/im/assets/images/android.png', + detail: '扫描二维码下载', + }, + { + icon: 'https://web.sdk.qcloud.com/im/assets/images/iOS.svg', + name: 'iOS', + link: 'https://web.sdk.qcloud.com/im/assets/images/ios.png', + detail: '扫描二维码下载', + }, + { + icon: 'https://web.sdk.qcloud.com/im/assets/images/Miniprogram.svg', + name: '小程序', + link: 'https://web.sdk.qcloud.com/im/assets/images/mini.png', + detail: '微信扫码进入', + }, +]; + +const mobileList = [ + { + type: 'android', + link: 'https://web.sdk.qcloud.com/im/assets/images/android-mobile.svg', + url: 'https://comm.qq.com/im_demo_download/index.html#/mobile-demo', + }, + { + type: 'iphone', + link: 'https://web.sdk.qcloud.com/im/assets/images/iphone-mobile.svg', + url: 'https://apps.apple.com/cn/app/%E8%85%BE%E8%AE%AF%E4%BA%91im/id1112479040', + }, + { + type: 'miniprogram', + link: 'https://web.sdk.qcloud.com/im/assets/images/mini-mobile.svg', + }, +]; + +export { Link, qrList, mobileList }; diff --git a/src/utils/request.ts b/src/utils/request.ts index f3b06ad..4661cd5 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -124,7 +124,8 @@ service.interceptors.response.use( if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') { return res.data; } - if (code === 401) { + return Promise.resolve(res.data); + /* if (code === 401) { // prettier-ignore if (!isRelogin.show) { isRelogin.show = true; @@ -158,7 +159,7 @@ service.interceptors.response.use( return Promise.reject('error'); } else { return Promise.resolve(res.data); - } + }*/ }, (error: any) => { let { message } = error; diff --git a/src/views/im/components/About.vue b/src/views/im/components/About.vue new file mode 100644 index 0000000..0a90b71 --- /dev/null +++ b/src/views/im/components/About.vue @@ -0,0 +1,430 @@ + + + diff --git a/src/views/im/components/AdvList.vue b/src/views/im/components/AdvList.vue new file mode 100644 index 0000000..0d1528c --- /dev/null +++ b/src/views/im/components/AdvList.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/views/im/components/AdvListItem.vue b/src/views/im/components/AdvListItem.vue new file mode 100644 index 0000000..90b5373 --- /dev/null +++ b/src/views/im/components/AdvListItem.vue @@ -0,0 +1,105 @@ + + + + + + diff --git a/src/views/im/components/ChatDefaultContent.vue b/src/views/im/components/ChatDefaultContent.vue new file mode 100644 index 0000000..48c16c8 --- /dev/null +++ b/src/views/im/components/ChatDefaultContent.vue @@ -0,0 +1,59 @@ + + + diff --git a/src/views/im/components/EditProfile.vue b/src/views/im/components/EditProfile.vue new file mode 100644 index 0000000..2efe0e4 --- /dev/null +++ b/src/views/im/components/EditProfile.vue @@ -0,0 +1,492 @@ + + + diff --git a/src/views/im/components/EditProfilePopup.vue b/src/views/im/components/EditProfilePopup.vue new file mode 100644 index 0000000..f830edf --- /dev/null +++ b/src/views/im/components/EditProfilePopup.vue @@ -0,0 +1,38 @@ + + + diff --git a/src/views/im/components/Header.vue b/src/views/im/components/Header.vue new file mode 100644 index 0000000..e9073a4 --- /dev/null +++ b/src/views/im/components/Header.vue @@ -0,0 +1,147 @@ + + + + + diff --git a/src/views/im/components/Menu.vue b/src/views/im/components/Menu.vue new file mode 100644 index 0000000..41f1e76 --- /dev/null +++ b/src/views/im/components/Menu.vue @@ -0,0 +1,427 @@ + + + + + diff --git a/src/views/im/components/NavBar.vue b/src/views/im/components/NavBar.vue new file mode 100644 index 0000000..4269a55 --- /dev/null +++ b/src/views/im/components/NavBar.vue @@ -0,0 +1,256 @@ + + + diff --git a/src/views/im/components/Profile.vue b/src/views/im/components/Profile.vue new file mode 100644 index 0000000..ce948e3 --- /dev/null +++ b/src/views/im/components/Profile.vue @@ -0,0 +1,423 @@ + + + + diff --git a/src/views/im/icon/adv-arrow.svg b/src/views/im/icon/adv-arrow.svg new file mode 100644 index 0000000..b73602a --- /dev/null +++ b/src/views/im/icon/adv-arrow.svg @@ -0,0 +1,17 @@ + + + 编组 5 + + + + + + + + + + + + + + diff --git a/src/views/im/icon/arrow-down-line.png b/src/views/im/icon/arrow-down-line.png new file mode 100644 index 0000000000000000000000000000000000000000..3e76ba3e02613297b677df10edbb8ace3689bce0 GIT binary patch literal 1732 zcmV;#20QtQP)Px*en~_@RCr$P+fQgCRU8NK_a@o3r44Mr!1k~x3OTe}JX8-ArSZ^zuq|aVfr^)< z+TfvHMATEKCl&Ex50Yxxi&#ixDeXf49c)qTL3@yHdnhQ%9(ExMSx8H3H_6D%WRm%t z_vX!SlC*hyY5u-UKKcHBZ|2P`M*JVB00te64~94>a0oak2L%=Y9*!rJg8~Zx562VA zL4gH;hvNz5puhsa!|{Z2P+$Sz;dnwhD6jzVa6F-x8B~%arXLt%ECIVP56AQcSU-&w zjP>)h_tg{JchE*5I{gTK;MPzhHdwT$X#N__*h>z!IUNtk9tr-o|4r9q`ksh2+LKWI6f_N8u3rWG@0^4vDuuZ3#c zPbpG*p+KwYBw?B%%{i^Y(x6sKzg0lxWF8$I;cz&N4-XL<7>Ji@?K|!4WQ6W+gmSr@ z6pcou3aY8}wUl0H&`SR_mAg|qWz0}0g!}sXiit!5_w@8g2z3W<-HJ>3JTgo|p%B9N z@5@I~hlPWK1DsB$rMT(`u?cru0IC z%IVBzvqB<~I3FAw%1Bb_ZG?~%2n0Uf*x2}bX6BpcZr*%dfqL-ZH(`GM!~cedhd(M7 zi(esxFvh}9TU(p)bUJ-C5{Zjg&SWzAY;5fIYp18jO9+)-mH~so;1}!b z>z|3DcvZeHisJdm$jIk~Lg7=jzY2e~w|7piuHO4Sl}cT)_EJ^WZ6Cdu3DtqBx;(PLKjPZU)N5}Z`^722a)E`%( z(Y(?YjFVFfgCZ0|J3HG!QGDxcY;5xR)6?udgwUHx4h7*y`ERLIdZ#?||I*$bxxKo& z^h6YYZW|bg6%bN)qgoeKsYQgUJM!v&=l=d$U}k3Ye0)6Fes=cnk|Y(!Wy><8fN@}@ zt?h-$m6g=#{QTP0-rmuo`kW55C3|QYRQ_X!dj0xwA(KJq>C?sUB&m2uE%U(LYuBdU zkH-;u{J1k{i`nY4yd9`gy4gb^m-|(cC#%81;d%M7t*wn2dGZN|-@uVbw{FMZuH37# zmu^y$znXPnB(9Xa5mdfcJ>*pPJLSnHR>s>Fy1GJG+b`9ZI(7e)Ur0FoY`R%q-RAOD zATExU%6-y;8V>)hEaK#HFG+Nm?CDfn3;X4fbzg0&wRA^bY0}6YR-9Zc;ni9bZEjGd z-qnJ)Eql$#w*0G^b-HC;6d|Wm-6ZGhp&AA%Z&v2K}OcayZpY`fnat3O@f(q0or8KBi+h#a%XFM{p!}K$q4FT1cz7bWvXF93mbh6HJ z_LKgs=Y<9}%=WsJxR4Fh#dt3zUI0y|u5PrBU3JZ94+)NM)~)5;uA z^^I;JA=3$(P|bm6g0eI7`d@2UAfYjv3e=2D0%isDtJJk|Js->4rHwVE9;@B;+oAfV z{)2r1^;-U}Wn8|&4@h4V+Kj376R~ayr3nsnd#D$j(|7Z=YHn%RQs>0lfH0000Px$N=ZaPR5(wqlfg>FFc60SNu}V`M`_5R@6c;sKv)m12#SJx(duOjih{Tv6v2D1 zeTN=O`X+i6ikrxU1ZtIa6$7CVX1@9Ve<&qM@(ZOI*%ykQ}*4}hocj)uy zH&*S=cfmXBMNx>lu5YciQvmP2euIb>S(fb=MG-P|R#ySTps=V102ANvsI}f1+gu08 uHBM=orkj1=bDoIfxNMr{ZMcN-Pw)X&+ + + + \ No newline at end of file diff --git a/src/views/im/icon/global.png b/src/views/im/icon/global.png new file mode 100644 index 0000000000000000000000000000000000000000..bba4fa44118db2baab73f79d6286be3657d0c4a3 GIT binary patch literal 2006 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 ZfonXbb3kCmIVS)B002ovPDHLkV1h2iJpcdz literal 0 HcmV?d00001 diff --git a/src/views/im/icon/message-real.svg b/src/views/im/icon/message-real.svg new file mode 100644 index 0000000..0a0c85d --- /dev/null +++ b/src/views/im/icon/message-real.svg @@ -0,0 +1,16 @@ + + + 编组 8 + + + + + + + + + + + + + diff --git a/src/views/im/icon/message-selected.svg b/src/views/im/icon/message-selected.svg new file mode 100644 index 0000000..1592b97 --- /dev/null +++ b/src/views/im/icon/message-selected.svg @@ -0,0 +1,16 @@ + + + 编组 8 + + + + + + + + + + + + + diff --git a/src/views/im/icon/message.svg b/src/views/im/icon/message.svg new file mode 100644 index 0000000..03d10cd --- /dev/null +++ b/src/views/im/icon/message.svg @@ -0,0 +1,14 @@ + + + 编组 8 + + + + + + + + + + + diff --git a/src/views/im/icon/profile-selected.svg b/src/views/im/icon/profile-selected.svg new file mode 100644 index 0000000..6c446c7 --- /dev/null +++ b/src/views/im/icon/profile-selected.svg @@ -0,0 +1,32 @@ + + + 编组 8 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/views/im/icon/profile.svg b/src/views/im/icon/profile.svg new file mode 100644 index 0000000..f75ecc5 --- /dev/null +++ b/src/views/im/icon/profile.svg @@ -0,0 +1,17 @@ + + + 编组 8 + + + + + + + + + + + + + + diff --git a/src/views/im/icon/relation-real.svg b/src/views/im/icon/relation-real.svg new file mode 100644 index 0000000..f2692ed --- /dev/null +++ b/src/views/im/icon/relation-real.svg @@ -0,0 +1,19 @@ + + + 编组 8 + + + + + + + + + + + + + + + + diff --git a/src/views/im/icon/relation-selected.svg b/src/views/im/icon/relation-selected.svg new file mode 100644 index 0000000..dc16663 --- /dev/null +++ b/src/views/im/icon/relation-selected.svg @@ -0,0 +1,16 @@ + + + 编组 8 + + + + + + + + + + + + + diff --git a/src/views/im/icon/relation.svg b/src/views/im/icon/relation.svg new file mode 100644 index 0000000..97923aa --- /dev/null +++ b/src/views/im/icon/relation.svg @@ -0,0 +1,18 @@ + + + 编组 8 + + + + + + + + + + + + + + + diff --git a/src/views/im/icon/setting.png b/src/views/im/icon/setting.png new file mode 100644 index 0000000000000000000000000000000000000000..df45602de49386e0afe90e1daf623dbdc7de7a19 GIT binary patch literal 457 zcmV;)0XF`LP)Px$gGod|R7gv`mOpC4Fcik0oES_&gCU-aGk8g^P|(&Bcq()$c=H`}2XBThflfX_ zH$$(GEFKa%C*VO)3`yhi408Ric1UAs@t~*oL*Mtw65*U{005iKhTwN-?DzYk&a$k0 zs21lJi$zgK5Yz{ejfa}{fe}Vr*PV1VxfIY``xmeiWSV9n=d~kE({poe3$)#u8l_1d z$MNYJ5MyjAghS@@I;;jlx#Bp^Ip>p^ZByfTEDg^xodAdin}T6fYIL0(c00j2|7MJl zs*EK_LeR6P=a+XN@Bjc`0C1^{DAyh2@bR{KeT<^01}j16OBjadTY@~#)1+SosG6`+ zx|vPeQVqFA;c)nsPFACYEszj`P)acjt>g@0aGo)y$sWBRIr$$@*V*cn&iDQ4{c>4L z-6gxpbe(*z*CGgl6Q-_nM~>r=F~X1}NnZ0v8K~k-KB{z04@M7zvUrbrU{N+DzaRuD z`>9r8qh1p-bxJNi2~%>FOW4gHC(52%sveL(9OsZ;#mlgj00000NkvXXu0mjfWLw5` literal 0 HcmV?d00001 diff --git a/src/views/im/index.vue b/src/views/im/index.vue new file mode 100644 index 0000000..1dda7d3 --- /dev/null +++ b/src/views/im/index.vue @@ -0,0 +1,189 @@ + + + + + diff --git a/src/views/im/styles/common.scss b/src/views/im/styles/common.scss new file mode 100644 index 0000000..e375b5f --- /dev/null +++ b/src/views/im/styles/common.scss @@ -0,0 +1,115 @@ +@import "@/TUIKit/assets/styles/common.scss"; +// button +@mixin btn { + border-radius: 5px; + padding: 13px 0; + cursor: pointer; +} +@mixin btn-default { + @include btn; + background: #006eff; + border: 1px solid #006eff; + color: #fff; +} +@mixin btn-error { + @include btn; + border: 1px solid #e54545; + color: #e54545; + background: #fff; +} +@mixin btn-normal { + @include btn; + background: #fff; + border: 1px solid #ddd; + color: #000; +} + +// flex +// flex布局 默认 纵向垂直居中水平居中 +@mixin flex($direction: column, $js: center, $al: center) { + box-sizing: border-box; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + flex-direction: $direction; + justify-content: $js; + align-items: $al; + border: 0px solid black; + margin: 0; + padding: 0; + min-width: 0; +} + +// 文本超出隐藏 ...隐藏文本 +@mixin single-line-ellipsis($width: 100%) { + width: $width; + overflow: hidden; + -ms-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; +} + +// 文本最多(n)行，超出部分用...表示 +@mixin line($num) { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: $num; + -webkit-box-orient: vertical; +} + +// position居中 +@mixin positionCenter { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.container { + @include flex; + position: fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + z-index: 3; + background: rgba(0, 0, 0, 0.3); + overflow: hidden; + .box { + @include flex; + border-radius: 0.5rem; + background: #fff; + overflow: hidden; + color: #000; + } + .box-h5 { + width: 100%; + height: 100%; + padding: 0px; + border-radius: 0px; + .title { + @include flex; + box-sizing: border-box; + width: 100%; + padding: 15px 18px; + position: relative; + .title-back { + position: absolute; + left: 18px; + } + .title-name { + font-size: 18px; + font-weight: 500; + font-family: PingFangSC-Medium; + } + } + } +} diff --git a/src/views/im/styles/h5/home.scss b/src/views/im/styles/h5/home.scss new file mode 100644 index 0000000..05b76c2 --- /dev/null +++ b/src/views/im/styles/h5/home.scss @@ -0,0 +1,63 @@ +/* stylelint-disable */ +.home-h5 { + flex-direction: column; + min-width: 100%; + min-height: 100%; + background: #fff; + + .home-menu { + position: fixed; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 10; + align-items: flex-end; + } + + .home-container { + .home-main { + padding: 0; + min-width: 0; + + .home-TUIKit { + flex-direction: column-reverse; + border-radius: 0; + max-width: 100%; + + .home-TUIKit-navbar { + width: 100%; + padding: 12px 18px; + } + + .home-TUIKit-main { + flex: 1; + display: flex; + flex-direction: column; + + .chat-popup { + position: absolute; + } + } + + .callkit-drag-container { + &-h5 { + width: 100%; + height: 100%; + left: 0; + top: 0; + border-radius: 0; + box-shadow: none; + } + + &-mini { + width: 72px; + height: 72px; + left: calc(100% - 100px); + top: 20px; + background-color: transparent; + } + } + } + } + } +} diff --git a/src/views/im/styles/h5/login.scss b/src/views/im/styles/h5/login.scss new file mode 100644 index 0000000..36ca52d --- /dev/null +++ b/src/views/im/styles/h5/login.scss @@ -0,0 +1,154 @@ +@import "../common.scss"; +.login-h5 { + min-width: 100%; + max-width: 100%; + padding: 17px 0; + .login-header { + padding: 0 23px; + } + .login-main { + .login-main-content { + padding: 0 23px; + background: url("../assets/image/h5/login-bg.png") no-repeat; + background-size: 65%; + background-position-x: right; + align-items: flex-start; + .login-form { + flex: 1; + .login-title { + flex-direction: column; + padding: 60px 0 18px; + p { + padding-left: 0; + font-size: 27px; + line-height: 40px; + } + } + .login-form-item { + font-size: 18px; + .el-checkbox { + .checked-text { + font-size: 14px; + } + } + .login-form-item-disabled { + font-size: 18px; + padding: 20px; + } + } + .login-btn { + button { + height: auto !important; + font-size: 20px; + line-height: 27px; + padding: 13px 0; + } + } + } + } + } + .login-footer { + background: none; + padding: 10px 10px; + + &-list { + flex: 1; + display: flex; + + &-item { + flex: 1; + display: flex; + background: url("../assets/image/h5/adv-more.svg") no-repeat; + background-size: 100% 100%; + border: solid #96c3ff 1px; + + &:last-child { + background: url("../assets/image/h5/adv-im.svg") no-repeat; + background-size: 100% 100%; + } + + a { + flex: 1; + display: flex; + justify-content: space-around; + align-items: center; + box-sizing: border-box; + padding: 20px; + + span { + padding: 5px 20px; + background: #147aff; + box-shadow: 0 4px 5px 0 rgba(255, 255, 255, 0.7), 0 3px 8px 0 rgba(20, 122, 255, 0.55); + border-radius: 30.5px; + display: flex; + align-items: center; + justify-content: center; + font-family: PingFangSC-Regular; + font-weight: 400; + font-size: 15px; + color: #ffffff; + letter-spacing: 0; + } + + aside { + display: flex; + flex-direction: column; + + h1 { + font-family: PingFangSC-Regular; + font-size: 16px; + color: #000000; + letter-spacing: 0; + } + + .sub { + align-self: flex-end; + } + } + } + } + + &-bottom { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .text-header { + display: flex; + align-items: center; + + span { + padding: 20px 20px; + width: 84px; + font-family: "PingFang SC"; + font-style: normal; + font-weight: 400; + color: #bbbbbb; + } + } + + i { + width: 120px; + height: 1px; + background: #dbdbdb; + } + + &-image { + display: flex; + + .platform { + width: 41px; + height: 41px; + padding: 0 20px; + + img { + width: 100%; + height: 100%; + } + } + } + } + } + } +} diff --git a/src/views/im/styles/h5/profile.scss b/src/views/im/styles/h5/profile.scss new file mode 100644 index 0000000..6ea4861 --- /dev/null +++ b/src/views/im/styles/h5/profile.scss @@ -0,0 +1,94 @@ +.TUI-profile-h5 { + background: #efefef; + flex: 1; + display: flex; + flex-direction: column; + width: 100%; + &-basic { + width: 100%; + box-sizing: border-box; + background: #ffffff; + padding: 14px 18px; + flex-direction: row; + align-items: flex-start; + margin-bottom: 10px; + &-avatar { + width: 78px; + height: 78px; + border-radius: 8px; + } + &-info { + &-nick { + font-size: 14px; + flex: 1; + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 6px 0; + font-family: PingFangSC-Medium; + font-weight: 500; + color: #000; + letter-spacing: 0; + } + &-id { + font-family: PingFangSC-Regular; + font-weight: 400; + color: #999; + letter-spacing: 0; + font-size: 14px; + word-break: keep-all; + padding: 6px 0; + &-label { + } + &-value { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + } + &-setting { + width: 100%; + flex-direction: column; + + &-item { + margin-bottom: 10px; + background: #ffffff; + padding: 10px; + &-exit { + .TUI-profile-h5-setting-item-label { + justify-content: center; + .label-left { + .label-title { + color: red; + } + } + } + } + &-label { + .label-left { + display: flex; + flex-direction: column; + .label-title { + color: #444444; + font-size: 14px; + } + } + .label-right { + color: #000000; + font-size: 14px; + display: flex; + flex-direction: row; + } + } + &-bottom-popup { + font-size: 16px; + color: #147aff; + padding: 10px; + border-bottom: 1px solid #DBDBDB; + } + } + } +} diff --git a/src/views/im/styles/home.scss b/src/views/im/styles/home.scss new file mode 100644 index 0000000..08fce9a --- /dev/null +++ b/src/views/im/styles/home.scss @@ -0,0 +1,3 @@ +@import './web/home.scss'; +@import './h5/home.scss'; +@import "./common.scss"; diff --git a/src/views/im/styles/login.scss b/src/views/im/styles/login.scss new file mode 100644 index 0000000..d11caa8 --- /dev/null +++ b/src/views/im/styles/login.scss @@ -0,0 +1,3 @@ +@import "./web/login.scss"; +@import "./h5/login.scss"; +@import "./common.scss"; diff --git a/src/views/im/styles/profile.scss b/src/views/im/styles/profile.scss new file mode 100644 index 0000000..a0416a0 --- /dev/null +++ b/src/views/im/styles/profile.scss @@ -0,0 +1,3 @@ +@import "./web/profile.scss"; +@import "./h5/profile.scss"; +@import "./common.scss"; \ No newline at end of file diff --git a/src/views/im/styles/web/home.scss b/src/views/im/styles/web/home.scss new file mode 100644 index 0000000..14f6af4 --- /dev/null +++ b/src/views/im/styles/web/home.scss @@ -0,0 +1,121 @@ +#preloadedImages { + background: linear-gradient(135deg, #f1f4f7 0%, #edf5ff 100%) no-repeat; + background-size: cover; + background-image: url("https://web.sdk.qcloud.com/im/assets/images/background-zip.png"); +} + +.home { + box-sizing: border-box; + flex: 1; + display: flex; + flex-direction: row; + min-width: 1024px; + background-size: contain; + width: 100%; + height: 100%; + overflow: hidden; + .home-menu { + box-sizing: border-box; + display: flex; + } + .home-container { + box-sizing: border-box; + display: flex; + flex: 1; + flex-direction: column; + overflow: hidden; + align-items: stretch; + .home-header { + box-sizing: border-box; + overflow: hidden; + .header-menu-show { + padding-left: 0px; + } + } + .home-main { + box-sizing: border-box; + flex: 1; + display: flex; + justify-content: center; + overflow: hidden; + padding: 50px; + min-width: 968px; + .home-TUIKit { + box-sizing: border-box; + display: flex; + flex: 1; + width: 100%; + height: 100%; + max-width: 1400px; + overflow: hidden; + min-height: 640px; + border-radius: 12px; + background-color: #ffffff; + box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.3); + .home-TUIKit-navbar { + box-sizing: border-box; + display: flex; + } + .home-TUIKit-main { + box-sizing: border-box; + flex: 1; + display: flex; + overflow: hidden; + flex-direction: row; + border: 0 solid black; + .home-conversation, + .home-relation { + min-width: 285px; + box-sizing: border-box; + flex: 0 0 24%; + display: flex; + flex-direction: column; + border-right: 1px solid #f4f5f9; + } + .home-chat { + box-sizing: border-box; + min-width: 0; + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + } + } + .callkit-drag-container { + position: fixed; + z-index: 100; + background-color: #ffffff; + user-select: none; + &-pc { + left: calc(50% - 25rem); + top: calc(50% - 18rem); + width: 50rem; + height: 36rem; + border-radius: 16px; + box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; + } + &-mini { + width: 168px; + height: 56px; + right: 10px; + top: 70px; + background-color: transparent; + border-radius: 0px; + box-shadow: none; + } + } + } + } + } + .home-container.menu-expand { + .dialog, + .container { + width: calc(100% - 300px) !important; + left: 300px !important; + } + .home-main .home-TUIKit .callkit-drag-container.callkit-drag-container-pc { + left: calc(50% - 25rem + 150px); + } + } +} \ No newline at end of file diff --git a/src/views/im/styles/web/login.scss b/src/views/im/styles/web/login.scss new file mode 100644 index 0000000..53caf04 --- /dev/null +++ b/src/views/im/styles/web/login.scss @@ -0,0 +1,237 @@ +@import "../common.scss"; +.login { + flex: 1; + @include flex(column, center, stretch); + min-width: 980px; + width: 100%; + height: 100%; + background: #ffffff; + .login-main { + flex: 1; + @include flex(column, center, stretch); + padding-bottom: 5vw; + .login-main-content { + flex: 1; + @include flex(row, space-between, center); + padding: 0 6vh; + width: 100%; + max-width: 100rem; + align-self: center; + background: url("../assets/image/login-background.png") no-repeat; + background-position: center left; + .login-main-adv { + @include flex(column, flex-start, flex-start); + .login-main-adv-introduce { + font-size: 3rem; + line-height: 4.2rem; + font-family: PingFangSC-Regular; + font-weight: 400; + color: #000000; + } + } + + .login-sale { + margin-top: 40px; + padding: 8px 16px; + font-size: 1.4rem; + line-height: 2rem; + border-radius: 6px; + display: flex; + align-items: center; + cursor: pointer; + color: #ffffff; + background: url("../assets/image/adv-bg.svg") no-repeat; + background-size: cover; + background-position: center; + .icon { + margin: 0 8px; + } + } + + .small-txt { + width: 42rem; + font-size: 2.6rem; + line-height: 3.6rem; + } + + .checked-text { + display: flex; + flex-wrap: wrap; + font-size: 0.88rem; + line-height: 1.73rem; + font-family: PingFangSC-Regular; + font-weight: 400; + color: #bbbbbb; + letter-spacing: 0; + a { + color: #006ef0; + } + } + .login-form { + box-sizing: border-box; + width: 22.41rem; + + .login-title { + display: flex; + letter-spacing: 0; + font-family: PingFangSC-Medium; + font-weight: 500; + color: #000000; + img { + width: 4.61rem; + height: 3.23rem; + } + p { + padding-left: 10.5px; + font-size: 1.8rem; + line-height: 2.7rem; + align-items: center; + display: flex; + } + } + + .login-form-item { + margin: 18px 0; + .el-select { + width: 100%; + font-size: 1rem; + padding-top: 28px; + line-height: 1.73rem; + font-weight: 400; + color: #000000; + } + + .el-input__inner { + width: 356.4px; + height: 54px; + margin-top: 12px; + border-radius: 4.8px; + background: #ffffff; + border: 1.2px solid #dddddd; + } + + .input-with-select { + margin-top: 14px; + input { + height: 40px; + } + } + .el-input-group__append { + .code-box { + color: #006eff; + } + } + .login-form-item-disabled { + cursor: pointer; + background: #f4f5f9; + border: 1.2px solid #dddddd; + color: #111111; + letter-spacing: 0; + border-radius: 4.8px; + width: 100%; + margin-top: 28px; + padding: 14px 11px; + box-sizing: border-box; + font-size: 1rem; + line-height: 1.2rem; + + label { + cursor: pointer; + color: #999999; + padding-right: 16px; + } + } + } + .login-form-footer { + display: flex; + flex-direction: row; + justify-content: space-between; + text-decoration: none; + a { + color: #006ef0; + } + } + + .login-btn { + flex: 1; + @include flex(column, center, stretch); + .btn { + width: 100%; + flex: 1; + height: 3rem; + font-size: 1.25rem; + font-weight: 400; + letter-spacing: 0; + border: 1px solid #006eff; + border-radius: 5px; + color: #006eff; + margin-bottom: 10px; + background-color: transparent; + cursor: pointer; + + &:disabled { + opacity: 0.3; + } + + &-primary { + background: #006eff; + color: #ffffff; + } + } + } + } + } + + .login-main-middle { + height: 130px; + width: 100%; + max-width: 100rem; + align-self: center; + padding: 0 1.6rem 20px; + box-sizing: border-box; + display: flex; + + .login-main-middle-box { + flex: 1; + display: flex; + } + } + .login-main-footer { + box-sizing: border-box; + padding: 0 1.6rem; + width: 100%; + max-width: 100rem; + display: flex; + align-items: center; + align-self: center; + background: rgba(231, 242, 255, 0.4); + .mask { + flex: 0 0 25%; + padding: 1.6rem 0; + display: flex; + flex-direction: column; + align-items: center; + .mask-top { + word-break: break-all; + white-space: nowrap; + font-size: 3rem; + height: 4.19rem; + font-family: PingFangSC-Regular; + font-weight: 400; + color: #006eff; + letter-spacing: 0; + } + .mask-under { + opacity: 0.49; + font-weight: 400; + font-size: 1.2rem; + font-family: PingFangSC-Regular; + color: #000; + letter-spacing: 0; + height: 62px; + text-align: center; + } + } + } + } +} diff --git a/src/views/im/styles/web/profile.scss b/src/views/im/styles/web/profile.scss new file mode 100644 index 0000000..58b34ae --- /dev/null +++ b/src/views/im/styles/web/profile.scss @@ -0,0 +1,124 @@ +/* stylelint-disable-next-line selector-class-pattern */ +.TUI-profile { + background: #fff; + display: flex; + flex-direction: column; + box-sizing: border-box; + overflow: hidden; + + &-basic { + display: flex; + flex-direction: row; + box-sizing: border-box; + overflow: hidden; + + &-avatar { + width: 30px; + height: 30px; + border-radius: 5px; + margin-right: 10px; + } + + &-info { + flex: 1; + display: flex; + flex-direction: column; + box-sizing: border-box; + overflow: hidden; + font-size: 14px; + + &-nick { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &-id { + display: flex; + flex-direction: row; + overflow: hidden; + + &-label { + font-weight: 400; + color: #999; + } + + &-value { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } + } + + &-setting { + &-item { + height: 40px; + padding-left: 14px; + padding-right: 8px; + display: flex; + line-height: 40px; + text-align: center; + align-items: center; + justify-content: space-between; + cursor: pointer; + + &:hover { + background-color: rgba(0, 110, 255, 0.1); + + /* stylelint-disable-next-line selector-class-pattern */ + .TUI-profile-setting-item-children { + display: block; + } + } + + &-label { + font-size: 14px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex: 1; + } + + /* stylelint-disable-next-line no-descending-specificity */ + &-children { + display: none; + position: absolute; + left: 100%; + min-width: 167px; + border-radius: 0 4px 4px 0; + z-index: 2; + background: #fff; + box-shadow: 2px 1px 6px 0 rgba(2, 16, 43, 0.15); + + &-item { + height: 40px; + padding-left: 14px; + padding-right: 8px; + display: flex; + line-height: 40px; + text-align: center; + align-items: center; + justify-content: space-between; + cursor: pointer; + + &:hover { + background-color: rgba(0, 110, 255, 0.1); + } + + &-label { + font-size: 14px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + flex: 1; + padding-right: 5px; + } + } + } + } + } +} diff --git a/vite.config.ts b/vite.config.ts index 58ca5f2..42f58c1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -24,10 +24,15 @@ export default defineConfig(({ mode, command }) => { open: true, proxy: { [env.VITE_APP_BASE_API]: { - target: 'http://localhost:8080', + target: 'http://192.168.1.250:8080', changeOrigin: true, ws: true, - rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '') + rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), ''), + bypass(req, res, options) { + const proxyURL = options.target + options.rewrite(req.url); + console.log('请求的真实api地址===>', proxyURL); + res.setHeader('x-req-proxyURL', proxyURL); // 设置真实请求地址 + } } } },