Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
foreign
/
customer-service
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Snippets
Settings
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit
202611d0
authored
Oct 08, 2021
by
zhousil
Browse files
Options
_('Browse Files')
Download
Plain Diff
合并冲突
parents
7c3fe629
e997f302
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
80 additions
and
52 deletions
components/avatar.vue
components/message.vue
model/index.ts
xim/index.ts
components/avatar.vue
View file @
202611d0
<
template
>
<
template
>
<el-avatar
class=
"tm-avatar"
:src=
"hasAvatar ? src : ''"
:size=
"size"
:shape=
"shape"
:alt=
"alt"
:fit=
"fit"
>
<el-avatar
<img
class=
"tm-load-img"
v-if=
"src"
:src=
"src"
@
load=
"hasAvatar = true"
/>
class=
"tm-avatar"
:src=
"hasAvatar ? src : ''"
:size=
"size"
:shape=
"shape"
:alt=
"alt"
:fit=
"fit"
>
<img
class=
"tm-load-img"
v-if=
"src"
:src=
"src"
@
load=
"hasAvatar = true"
/>
<slot>
<slot>
<img
src=
"../imgs/default-avatar.png"
:style=
"`width:$
{size}px`" />
<img
src=
"../imgs/default-avatar.png"
:style=
"`width:$
{size}px`" />
</slot>
</slot>
...
@@ -8,60 +20,62 @@
...
@@ -8,60 +20,62 @@
</
template
>
</
template
>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
{
Component
,
Prop
,
Vue
}
from
"vue-property-decorator"
;
import
{
Component
,
Prop
,
Vue
}
from
"vue-property-decorator"
;
@
Component
@
Component
export
default
class
Avatar
extends
Vue
{
export
default
class
Avatar
extends
Vue
{
@
Prop
({
@
Prop
()
type
:
String
,
private
readonly
src
?:
string
;
})
private
readonly
src
?:
string
;
@
Prop
({
@
Prop
({
type
:
[
String
,
Number
],
type
:
[
String
,
Number
],
default
:
30
,
default
:
30
,
validator
:
value
=>
[
"large"
,
"medium"
,
"small"
].
indexOf
(
value
)
>=
0
||
typeof
value
===
"number"
,
validator
:
(
value
)
=>
})
[
"large"
,
"medium"
,
"small"
].
indexOf
(
value
)
>=
0
||
private
readonly
size
!
:
number
|
"large"
|
"medium"
|
"small"
;
typeof
value
===
"number"
,
})
private
readonly
size
!
:
number
|
"large"
|
"medium"
|
"small"
;
@
Prop
({
@
Prop
({
type
:
String
,
type
:
String
,
default
:
"square"
,
default
:
"square"
,
validator
:
value
=>
[
"circle"
,
"square"
].
indexOf
(
value
)
>=
0
,
validator
:
(
value
)
=>
[
"circle"
,
"square"
].
indexOf
(
value
)
>=
0
,
})
})
private
readonly
shape
!
:
"circle"
|
"square"
;
private
readonly
shape
!
:
"circle"
|
"square"
;
@
Prop
(
String
)
@
Prop
(
String
)
private
readonly
alt
?:
string
;
private
readonly
alt
?:
string
;
@
Prop
({
@
Prop
({
type
:
String
,
type
:
String
,
default
:
"cover"
,
default
:
"cover"
,
validator
:
value
=>
[
"fill"
,
"contain"
,
"cover"
,
"none"
,
"scale-down"
].
indexOf
(
value
)
>=
0
,
validator
:
(
value
)
=>
})
[
"fill"
,
"contain"
,
"cover"
,
"none"
,
"scale-down"
].
indexOf
(
value
)
>=
private
readonly
fit
!
:
"fill"
|
"contain"
|
"cover"
|
"none"
|
"scale-down"
;
0
,
})
private
readonly
fit
!
:
"fill"
|
"contain"
|
"cover"
|
"none"
|
"scale-down"
;
private
hasAvatar
=
false
;
private
hasAvatar
=
false
;
}
}
</
script
>
</
script
>
<
style
lang=
"less"
scoped
>
<
style
lang=
"less"
scoped
>
.tm-avatar
{
.tm-avatar
{
background
:
none
;
background
:
none
;
flex-shrink
:
0
;
flex-shrink
:
0
;
flex-grow
:
0
;
flex-grow
:
0
;
}
}
.tm-avatar
.tm-svg-icon
{
.tm-avatar
.tm-svg-icon
{
background
:
#d8d8d8
;
background
:
#d8d8d8
;
}
}
.tm-avatar
.tm-load-img
{
.tm-avatar
.tm-load-img
{
display
:
none
;
display
:
none
;
}
}
.tm-avatar
/
deep
/
img
{
.tm-avatar
/
deep
/
img
{
width
:
100%
;
width
:
100%
;
}
}
.default-avatar
{
.default-avatar
{
display
:
inline-block
;
display
:
inline-block
;
color
:
#333
;
color
:
#333
;
}
}
</
style
>
</
style
>
components/message.vue
View file @
202611d0
...
@@ -9,11 +9,14 @@
...
@@ -9,11 +9,14 @@
>
>
<div
class=
"msg-content"
:class=
"
{ 'algin-left': !isMyMessage }">
<div
class=
"msg-content"
:class=
"
{ 'algin-left': !isMyMessage }">
<div
<div
class=
"msg-name no-selection"
class=
"msg-name no-selection d-flex align-items-center"
:class=
"
{ 'algin-left': !isMyMessage }"
:class=
"
{
'flex-row-reverse justify-content-end': !isMyMessage,
}"
v-if="!isWithdrawMessage"
v-if="!isWithdrawMessage"
>
>
{{
userName
}}
{{
userName
}}
<avatar
v-if=
"avatar"
:src=
"avatar"
shape=
"circle"
/>
</div>
</div>
<component
<component
...
...
model/index.ts
View file @
202611d0
...
@@ -64,6 +64,11 @@ export interface ChatOption {
...
@@ -64,6 +64,11 @@ export interface ChatOption {
serviceType
?:
ServiceType
;
serviceType
?:
ServiceType
;
eventHub
?:
Vue
;
eventHub
?:
Vue
;
/**
* 用户信息(头像,别名)可选
*/
user
?:
{
icon
?:
string
;
username
?:
string
};
}
}
export
interface
ChatServiceLogger
{
export
interface
ChatServiceLogger
{
...
...
xim/index.ts
View file @
202611d0
...
@@ -40,6 +40,12 @@ class Chat {
...
@@ -40,6 +40,12 @@ class Chat {
option
.
serviceType
&&
(
this
.
serviceType
=
option
.
serviceType
);
option
.
serviceType
&&
(
this
.
serviceType
=
option
.
serviceType
);
option
.
product
&&
(
this
.
product
=
option
.
product
);
option
.
product
&&
(
this
.
product
=
option
.
product
);
this
.
eventHub
=
option
.
eventHub
;
this
.
eventHub
=
option
.
eventHub
;
if
(
option
.
user
)
{
this
.
userMapping
[
this
.
_sdk
().
global
.
uid
]
=
{
name
:
option
.
user
.
username
,
avatar
:
option
.
user
.
icon
,
};
}
dbController
.
setup
(
this
.
_sdk
().
global
.
uid
);
dbController
.
setup
(
this
.
_sdk
().
global
.
uid
);
...
@@ -124,7 +130,7 @@ class Chat {
...
@@ -124,7 +130,7 @@ class Chat {
}
}
public
getUserMapping
()
{
public
getUserMapping
()
{
return
{}
as
any
;
return
this
.
userMapping
;
}
}
private
debug
(
message
:
string
)
{
private
debug
(
message
:
string
)
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment