fix list item style
This commit is contained in:
@@ -6,6 +6,7 @@
|
||||
block
|
||||
:options="filterOptions"
|
||||
@change="switchFilter"
|
||||
v-entrance-transition
|
||||
/>
|
||||
<t-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
@@ -13,19 +14,14 @@
|
||||
@refresh="refresh"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<t-cell-group v-if="pageResult.list.length" class="items" theme="card">
|
||||
<t-cell-group v-if="pageResult.list.length" class="items fix-last-cell-line" theme="card">
|
||||
<t-swipe-cell
|
||||
v-for="item in pageResult.list"
|
||||
v-for="(item, index) in pageResult.list"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
v-entrance-transition="70 + index * 30"
|
||||
>
|
||||
<t-cell
|
||||
:description="getPreview(item)"
|
||||
:note="getTime(item)"
|
||||
arrow
|
||||
hover
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<t-cell arrow hover @click="toDetail(item)">
|
||||
<template #leftIcon>
|
||||
<div class="icon" :class="{ unread: isUnread(item) }">
|
||||
<t-icon name="notification" size="1.25rem" />
|
||||
@@ -34,14 +30,19 @@
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<span v-text="getSubject(item)" />
|
||||
<t-tag
|
||||
v-if="isUnread(item)"
|
||||
class="unread-label"
|
||||
theme="danger"
|
||||
size="small"
|
||||
>未读</t-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<pass-time-label :timestamp="item.createdAt || item.sendAt" underline />
|
||||
</template>
|
||||
<template #note>
|
||||
<t-tag
|
||||
v-if="filterMode === 'all' && isUnread(item)"
|
||||
class="unread-label"
|
||||
theme="danger"
|
||||
size="small"
|
||||
>未读</t-tag>
|
||||
</template>
|
||||
</t-cell>
|
||||
<template #right>
|
||||
<t-button
|
||||
@@ -65,7 +66,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Time } from "timi-web";
|
||||
import { PassTimeLabel } from "timi-web";
|
||||
import { NotifyAPI, type NotifyDetail, type Page, type PageResult, useUserStore } from "timi-web-api";
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { Message } from "@/utils/message";
|
||||
@@ -291,15 +292,6 @@ function getSubject(item: NotifyDetail): string {
|
||||
return item.subject?.trim() || "站内通知";
|
||||
}
|
||||
|
||||
function getPreview(item: NotifyDetail): string {
|
||||
const text = item.content?.replace(/\s+/g, " ").trim() || "无通知内容";
|
||||
return 80 < text.length ? `${text.slice(0, 80)}...` : text;
|
||||
}
|
||||
|
||||
function getTime(item: NotifyDetail): string {
|
||||
return Time.toPassedDateTime(item.createdAt || item.sendAt) || "-";
|
||||
}
|
||||
|
||||
async function toDetail(item: NotifyDetail): Promise<void> {
|
||||
if (!item.id) {
|
||||
return;
|
||||
@@ -356,27 +348,6 @@ onUnmounted(() => {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
:deep(.t-cell:after) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.t-cell__title) {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.t-cell__description) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:deep(.t-cell__note) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
|
||||
Reference in New Issue
Block a user