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 block
:options="filterOptions" :options="filterOptions"
@change="switchFilter" @change="switchFilter"
v-entrance-transition
/> />
<t-pull-down-refresh <t-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
@@ -13,19 +14,14 @@
@refresh="refresh" @refresh="refresh"
@scrolltolower="loadMore" @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 <t-swipe-cell
v-for="item in pageResult.list" v-for="(item, index) in pageResult.list"
:key="item.id" :key="item.id"
class="item" class="item"
v-entrance-transition="70 + index * 30"
> >
<t-cell <t-cell arrow hover @click="toDetail(item)">
:description="getPreview(item)"
:note="getTime(item)"
arrow
hover
@click="toDetail(item)"
>
<template #leftIcon> <template #leftIcon>
<div class="icon" :class="{ unread: isUnread(item) }"> <div class="icon" :class="{ unread: isUnread(item) }">
<t-icon name="notification" size="1.25rem" /> <t-icon name="notification" size="1.25rem" />
@@ -34,13 +30,18 @@
<template #title> <template #title>
<div class="title"> <div class="title">
<span v-text="getSubject(item)" /> <span v-text="getSubject(item)" />
</div>
</template>
<template #description>
<pass-time-label :timestamp="item.createdAt || item.sendAt" underline />
</template>
<template #note>
<t-tag <t-tag
v-if="isUnread(item)" v-if="filterMode === 'all' && isUnread(item)"
class="unread-label" class="unread-label"
theme="danger" theme="danger"
size="small" size="small"
>未读</t-tag> >未读</t-tag>
</div>
</template> </template>
</t-cell> </t-cell>
<template #right> <template #right>
@@ -65,7 +66,7 @@
</template> </template>
<script setup lang="ts"> <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 { NotifyAPI, type NotifyDetail, type Page, type PageResult, useUserStore } from "timi-web-api";
import { DialogPlugin } from "tdesign-mobile-vue"; import { DialogPlugin } from "tdesign-mobile-vue";
import { Message } from "@/utils/message"; import { Message } from "@/utils/message";
@@ -291,15 +292,6 @@ function getSubject(item: NotifyDetail): string {
return item.subject?.trim() || "站内通知"; 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> { async function toDetail(item: NotifyDetail): Promise<void> {
if (!item.id) { if (!item.id) {
return; return;
@@ -356,27 +348,6 @@ onUnmounted(() => {
border-radius: 0; 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 { .icon {
width: 3.5rem; width: 3.5rem;
height: 3.5rem; height: 3.5rem;