fix list item style

This commit is contained in:
Timi
2026-08-28 23:25:53 +08:00
parent c85a75ff0e
commit f5beb65a62
+13 -42
View File
@@ -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,13 +30,18 @@
<template #title>
<div class="title">
<span v-text="getSubject(item)" />
</div>
</template>
<template #description>
<pass-time-label :timestamp="item.createdAt || item.sendAt" underline />
</template>
<template #note>
<t-tag
v-if="isUnread(item)"
v-if="filterMode === 'all' && isUnread(item)"
class="unread-label"
theme="danger"
size="small"
>未读</t-tag>
</div>
</template>
</t-cell>
<template #right>
@@ -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;