搜索结果列表页面开发
This commit is contained in:
付民康
49
src/components/ConversationItem/README.md
Normal file
49
src/components/ConversationItem/README.md
Normal file
@@ -0,0 +1,49 @@
|
||||
# ConversationItem
|
||||
|
||||
### 说明
|
||||
- ConversationItem组件为会话组件，demo如下
|
||||
``` js
|
||||
// tempalte
|
||||
<conversation-item
|
||||
id="1"
|
||||
ip="42.48.83.94"
|
||||
tagText="当前"
|
||||
desc="这是你当前的会话"
|
||||
device="Safari 于 Mac"
|
||||
time="2023-07-16 10:24"
|
||||
@handle-deleted="handleDeletedConversation"
|
||||
>
|
||||
</conversation-item>
|
||||
// script
|
||||
const handleDeletedConversation = (id:string) => {
|
||||
|
||||
};
|
||||
```
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-----------|------------------------|----------------------------|----------|-----------|
|
||||
| id | 卡片唯一id | string | | |
|
||||
| ip | ip地址 | string | | |
|
||||
| desc? | 描述 | string | | |
|
||||
| tagText? | 标签文档（不传则不显示） | string | | |
|
||||
| device? | 设备信息 | string | | |
|
||||
| time | 登录时间 | string | | |
|
||||
| hideDeleted? | 隐藏删除按钮 | boolean | | false |
|
||||
|
||||
|
||||
### Emits
|
||||
|
||||
| 方法 | 说明 | 返回值 |
|
||||
|-----------------|------------------------------------|---------------------|
|
||||
| handleDeleted | 点击删除按钮触发 | id(当前卡片唯一标识) |
|
||||
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|---------------------|---------------------------------------------|
|
||||
| icon | 左侧icon区域插槽 |
|
||||
| header | ip信息显示区域插槽 |
|
||||
| content | 描述内容区域插槽 |
|
||||
| right | 右侧按钮区域插槽 |
|
||||
142
src/components/ConversationItem/index.vue
Normal file
142
src/components/ConversationItem/index.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="g-conversation-item">
|
||||
<div class="g-conversation-item-left">
|
||||
<div class="g-conversation-item-left-icon">
|
||||
<slot name="icon">
|
||||
<img :src="svg" v-if="svg" />
|
||||
<Icon name="gt-computer-c" size="32px" v-else></Icon>
|
||||
</slot>
|
||||
</div>
|
||||
<div>
|
||||
<div class="g-conversation-item-left-header">
|
||||
<slot name="header">
|
||||
<span class="g-conversation-item-left-header-title font-medium">{{ item.ip }}</span>
|
||||
<!-- <custom-tag v-if="item.tagText && item.is_current" border-color="#D3D3D3" :title="item.tagText" /> -->
|
||||
</slot>
|
||||
</div>
|
||||
<div class="g-conversation-item-left-content">
|
||||
<slot name="content">
|
||||
<p v-if="item.desc && item.is_current">{{ item.desc }}</p>
|
||||
<p class="g-conversation-item-size text-CG600">
|
||||
<span>登录时间： {{ formatTime(item.time, 'YYYY年MM月DD日 HH:mm') }}</span>
|
||||
<span class="g-secret-key-item-split"></span>
|
||||
<span>{{ item.os }}</span>
|
||||
<span class="g-secret-key-item-split"></span>
|
||||
<span>{{ item.browser }}</span>
|
||||
</p>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="g-conversation-item-right">
|
||||
<slot name="right">
|
||||
<!-- <d-button icon="icon-delete" v-if="!hideDeleted" @click.stop="emits('handleDeleted', object_id)"></d-button> -->
|
||||
<MoreList :moreOpts="moreOpts" :item="item"></MoreList>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
|
||||
import CustomTag from '@/components/CustomTag/index.vue';
|
||||
import Time from '@/components/Time/index.vue';
|
||||
import MoreList from '@/components/MoreList/index.vue';
|
||||
interface listItem {
|
||||
object_id: string;
|
||||
ip: string;
|
||||
desc?: string;
|
||||
tagText?: string;
|
||||
browser?: string;
|
||||
os?: string;
|
||||
time?: string;
|
||||
hideDeleted?: boolean;
|
||||
is_current?: boolean;
|
||||
}
|
||||
withDefaults(defineProps<{
|
||||
item?: listItem | object | any,
|
||||
moreOpts: any,
|
||||
svg?: any,
|
||||
}>(), {
|
||||
item: () => ({
|
||||
object_id: '',
|
||||
ip: '',
|
||||
desc: '这是你当前的会话',
|
||||
tagText: '当前',
|
||||
browser: '',
|
||||
os: '',
|
||||
time: '',
|
||||
hideDeleted: false,
|
||||
is_current: false
|
||||
}),
|
||||
moreOpts: () => [],
|
||||
svg: ''
|
||||
});
|
||||
|
||||
const { formatTime } = useTimeFormat();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$g-conversation-item-border-color: #D3D3D3;
|
||||
|
||||
.g-conversation-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&-size {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-icon {
|
||||
margin-right: 16px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&-header {
|
||||
&-title {
|
||||
margin-right: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin-top: 0px;
|
||||
|
||||
p {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
font-size: 16px;
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
|
||||
:deep(.devui-button) {
|
||||
border-color: $g-conversation-item-border-color;
|
||||
margin-left: 24px;
|
||||
|
||||
// i {
|
||||
// font-size: 20px !important;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.g-secret-key-item-split {
|
||||
margin: 0 8px;
|
||||
display: inline-block;
|
||||
font-weight: bolder;
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background-color: var(--color-G400);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user