feat(ui): 优化文件消息的视觉样式和布局
This commit is contained in:
parent
8e9c57a6f9
commit
526a580e14
|
|
@ -298,14 +298,20 @@
|
||||||
class="structured-file"
|
class="structured-file"
|
||||||
@click="downloadMessageFile(block.url)"
|
@click="downloadMessageFile(block.url)"
|
||||||
>
|
>
|
||||||
<u-icon
|
<image
|
||||||
name="download"
|
class="structured-file-icon"
|
||||||
size="28"
|
src="/static/common/images/icon-file.png"
|
||||||
color="#4370fe"
|
mode="scaleToFill"
|
||||||
></u-icon>
|
></image>
|
||||||
<text class="structured-file-name">{{
|
<text class="structured-file-name">{{
|
||||||
block.name
|
block.name
|
||||||
}}</text>
|
}}</text>
|
||||||
|
<u-icon
|
||||||
|
name="download"
|
||||||
|
size="36"
|
||||||
|
color="#666666"
|
||||||
|
class="structured-file-download"
|
||||||
|
></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -403,14 +409,20 @@
|
||||||
class="structured-file"
|
class="structured-file"
|
||||||
@click="downloadMessageFile(block.url)"
|
@click="downloadMessageFile(block.url)"
|
||||||
>
|
>
|
||||||
<u-icon
|
<image
|
||||||
name="download"
|
class="structured-file-icon"
|
||||||
size="28"
|
src="/static/common/images/icon-file.png"
|
||||||
color="#4370fe"
|
mode="scaleToFill"
|
||||||
></u-icon>
|
></image>
|
||||||
<text class="structured-file-name">{{
|
<text class="structured-file-name">{{
|
||||||
block.name
|
block.name
|
||||||
}}</text>
|
}}</text>
|
||||||
|
<u-icon
|
||||||
|
name="download"
|
||||||
|
size="36"
|
||||||
|
color="#666666"
|
||||||
|
class="structured-file-download"
|
||||||
|
></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -1183,8 +1195,7 @@ export default {
|
||||||
|
|
||||||
// 创建AI回复消息对象
|
// 创建AI回复消息对象
|
||||||
const aiMessage = {
|
const aiMessage = {
|
||||||
id:
|
id: data.id || Math.random().toString(36).substring(2, 15),
|
||||||
this.currentDMid || Math.random().toString(36).substring(2, 15),
|
|
||||||
message: message,
|
message: message,
|
||||||
sendDate: "",
|
sendDate: "",
|
||||||
isSend: true,
|
isSend: true,
|
||||||
|
|
@ -2048,27 +2059,38 @@ export default {
|
||||||
|
|
||||||
.structured-item-file {
|
.structured-item-file {
|
||||||
.structured-file {
|
.structured-file {
|
||||||
display: inline-flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
width: 500rpx;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 16rpx 20rpx;
|
padding: 24rpx;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-radius: 12rpx;
|
border-radius: 16rpx;
|
||||||
}
|
box-sizing: border-box;
|
||||||
}
|
|
||||||
|
|
||||||
.structured-file {
|
.structured-file-icon {
|
||||||
display: inline-flex;
|
width: 48rpx;
|
||||||
align-items: center;
|
height: 62rpx;
|
||||||
max-width: 100%;
|
flex-shrink: 0;
|
||||||
padding: 8rpx 0;
|
margin-right: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.structured-file-name {
|
.structured-file-name {
|
||||||
margin-left: 8rpx;
|
flex: 1;
|
||||||
font-size: 26rpx;
|
font-size: 28rpx;
|
||||||
color: #4370fe;
|
color: #333333;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.structured-file-download {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Loading…
Reference in New Issue