sync: 对齐小程序 v1.0.2 生产代码并脱敏
This commit is contained in:
MiFaZhan
@@ -37,176 +37,26 @@ function iconClass(item: MessageItem) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="msg-list">
|
||||
<view class="mlist">
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.messageId"
|
||||
class="mitem"
|
||||
@click="emit('open', item)"
|
||||
>
|
||||
<view class="micon" :class="`micon--${itemTone(item)}`">
|
||||
<view class="micon-glyph" :class="iconClass(item)" />
|
||||
<view class="flex flex-col gap-16rpx">
|
||||
<view v-for="item in list" :key="item.messageId" class="card-base flex gap-20rpx p-24rpx active:bg-input-bg" @click="emit('open', item)">
|
||||
<view class="h-64rpx w-64rpx flex shrink-0 items-center justify-center rounded-16rpx bg-canvas-soft text-30rpx text-primary">
|
||||
<view :class="iconClass(item)" />
|
||||
</view>
|
||||
<view class="min-w-0 flex flex-1 flex-col gap-12rpx">
|
||||
<view class="flex items-start justify-between gap-16rpx">
|
||||
<text class="min-w-0 flex-1 break-words text-28rpx text-ink font-bold leading-40rpx">{{ item.title }}</text>
|
||||
<wd-tag v-if="item.unread" type="danger" round>
|
||||
未读
|
||||
</wd-tag>
|
||||
</view>
|
||||
<view class="mmain">
|
||||
<view class="mt-row">
|
||||
<text class="mt">{{ item.title }}</text>
|
||||
<view v-if="item.unread" class="udot" />
|
||||
</view>
|
||||
<text class="ms">{{ item.summary }}</text>
|
||||
</view>
|
||||
<view class="mside">
|
||||
<text class="mtime">{{ item.time || '暂无时间' }}</text>
|
||||
<text class="line-clamp-2 break-words text-25rpx text-muted leading-38rpx">{{ item.summary }}</text>
|
||||
<view class="flex flex-wrap items-center justify-between gap-12rpx">
|
||||
<wd-tag :type="itemTone(item)" plain>
|
||||
{{ item.typeText || group.label }}
|
||||
</wd-tag>
|
||||
<text class="text-22rpx text-disabled">{{ item.time || '暂无时间' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.msg-list {
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 6rpx 18rpx rgba(11, 43, 172, 0.06);
|
||||
}
|
||||
|
||||
.mlist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mitem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
min-height: 122rpx;
|
||||
padding: 22rpx 22rpx;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
transition: background 0.16s ease;
|
||||
}
|
||||
|
||||
.mitem:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.mitem:active {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.micon {
|
||||
display: flex;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
border-radius: 18rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.micon--primary {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.micon--success {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.micon--warning {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
.micon--danger {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.micon-glyph {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.mmain {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mt-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.mt {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 28rpx;
|
||||
font-weight: 800;
|
||||
line-height: 38rpx;
|
||||
color: #111827;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.udot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background: #dc2626;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 0 4rpx rgba(220, 38, 38, 0.18);
|
||||
}
|
||||
|
||||
.ms {
|
||||
display: -webkit-box;
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #64748b;
|
||||
line-height: 34rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.mside {
|
||||
display: flex;
|
||||
width: 96rpx;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.mtime {
|
||||
max-width: 96rpx;
|
||||
color: #94a3b8;
|
||||
font-size: 22rpx;
|
||||
line-height: 30rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
.mitem {
|
||||
gap: 14rpx;
|
||||
padding: 20rpx 18rpx;
|
||||
}
|
||||
|
||||
.micon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.mside {
|
||||
width: 96rpx;
|
||||
}
|
||||
|
||||
.mtime {
|
||||
max-width: 96rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,6 +6,7 @@ const props = defineProps<{
|
||||
placeholder: string
|
||||
modelValue: string
|
||||
filterKey: MessageFilterKey
|
||||
loading?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -23,120 +24,18 @@ const activeFilterKey = computed({
|
||||
get: () => props.filterKey,
|
||||
set: value => emit('update:filterKey', value),
|
||||
})
|
||||
|
||||
const dotColorMap: Record<MessageFilterKey, string> = {
|
||||
all: '#2563eb',
|
||||
recent30: '#2563eb',
|
||||
asc: '#64748b',
|
||||
}
|
||||
|
||||
function dotColor(key: MessageFilterKey) {
|
||||
return dotColorMap[key]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="toolbar">
|
||||
<view class="search-row">
|
||||
<wd-search
|
||||
v-model="keyword"
|
||||
hide-cancel
|
||||
placeholder-left
|
||||
variant="filled"
|
||||
:placeholder="props.placeholder"
|
||||
custom-class="min-w-0 flex-1 !p-0"
|
||||
/>
|
||||
<wd-button
|
||||
class="refresh-btn"
|
||||
icon="i-carbon-renew"
|
||||
type="primary"
|
||||
plain
|
||||
round
|
||||
size="small"
|
||||
@click="emit('refresh')"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="tag-row">
|
||||
<view
|
||||
v-for="option in messageFilterOptions"
|
||||
:key="option.key"
|
||||
class="chip"
|
||||
:class="{ 'is-active': activeFilterKey === option.key }"
|
||||
@click="activeFilterKey = option.key"
|
||||
>
|
||||
<view class="dot" :style="{ background: dotColor(option.key) }" />
|
||||
<text class="chip-txt">{{ option.label }}</text>
|
||||
</view>
|
||||
<view class="card-base flex flex-col gap-20rpx p-20rpx">
|
||||
<view class="flex items-center gap-16rpx">
|
||||
<wd-search v-model="keyword" hide-cancel placeholder-left variant="filled" :placeholder="props.placeholder" custom-class="min-w-0 flex-1 !p-0" />
|
||||
<wd-button type="primary" variant="text" size="small" css-icon="i-carbon-renew" custom-class="!h-56rpx !min-h-56rpx !px-8rpx !text-24rpx" :loading="props.loading" :disabled="props.loading" @click="emit('refresh')">
|
||||
刷新
|
||||
</wd-button>
|
||||
</view>
|
||||
<wd-tabs v-model="activeFilterKey" line-theme="text" custom-class="!bg-transparent">
|
||||
<wd-tab v-for="option in messageFilterOptions" :key="option.key" :name="option.key" :title="option.label" />
|
||||
</wd-tabs>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7rpx;
|
||||
height: 44rpx;
|
||||
padding: 0 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.18s ease;
|
||||
}
|
||||
|
||||
.chip:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.chip.is-active {
|
||||
background: #eff6ff;
|
||||
border-color: #bfdbfe;
|
||||
}
|
||||
|
||||
.chip-txt {
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
color: #334155;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chip.is-active .chip-txt {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chip.is-active .dot {
|
||||
box-shadow: 0 0 0 4rpx rgba(37, 99, 235, 0.14);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user