Skip to content

Commit f15272a

Browse files
H3CoF6H3CoF6
committed
fix(biz): add dark theme for biz page
1 parent 6ea36cc commit f15272a

1 file changed

Lines changed: 50 additions & 34 deletions

File tree

‎frontend/components/BizMessages.vue‎

Lines changed: 50 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div class="biz-page h-screen flex overflow-hidden" style="background-color: var(--app-shell-bg)">
33

4-
<div class="w-[300px] lg:w-[320px] bg-white border-r border-gray-200 flex flex-col flex-shrink-0 z-10">
5-
<div class="p-3 border-b border-gray-200" style="background-color: var(--app-surface-muted)">
4+
<div :class="['w-[300px] lg:w-[320px] border-r flex flex-col flex-shrink-0 z-10', isDark ? 'bg-[#1e1e1e] border-[#333]' : 'bg-white border-gray-200']">
5+
<div class="p-3 border-b" :class="isDark ? 'border-[#333]' : 'border-gray-200'" style="background-color: var(--app-surface-muted)">
66
<div class="contact-search-wrapper flex-1">
77
<input
88
v-model="searchQuery"
@@ -15,43 +15,44 @@
1515

1616
<div class="flex-1 overflow-y-auto min-h-0">
1717
<div v-if="loadingAccounts" class="flex justify-center py-4">
18-
<span class="text-sm text-gray-400">加载中...</span>
18+
<span class="text-sm" :class="isDark ? 'text-gray-500' : 'text-gray-400'">加载中...</span>
1919
</div>
2020
<div v-else>
2121
<div
2222
v-for="item in filteredAccounts"
2323
:key="item.username"
2424
@click="selectAccount(item)"
25-
class="flex items-center gap-3 px-4 py-3 cursor-pointer transition-colors border-b border-gray-50"
25+
class="flex items-center gap-3 px-4 py-3 cursor-pointer transition-colors border-b"
2626
:class="[
27+
isDark ? 'border-[#333]' : 'border-gray-50',
2728
selectedAccount?.username === item.username
28-
? 'bg-[#E5E5E5]' // 选中状态最深
29+
? (isDark ? 'bg-[#333]' : 'bg-[#E5E5E5]') // 选中状态
2930
: item.username === 'gh_3dfda90e39d6'
30-
? 'bg-[#F2F2F2] hover:bg-[#EAEAEA]' // 微信支付专门的底色，以示区分
31-
: 'hover:bg-gray-50' // 普通项的悬浮色
31+
? (isDark ? 'bg-[#2a2a2a] hover:bg-[#333]' : 'bg-[#F2F2F2] hover:bg-[#EAEAEA]') // 微信支付专门的底色
32+
: (isDark ? 'hover:bg-[#252525]' : 'hover:bg-gray-50') // 普通悬浮色
3233
]"
3334
>
34-
<img v-if="item.avatar" :src="api.getBizProxyImageUrl(item.avatar)" class="w-10 h-10 rounded-md object-cover bg-gray-200 flex-shrink-0" alt=""/>
35+
<img v-if="item.avatar" :src="api.getBizProxyImageUrl(item.avatar)" :class="['w-10 h-10 rounded-md object-cover flex-shrink-0', isDark ? 'bg-[#333]' : 'bg-gray-200']" alt=""/>
3536
<div v-else class="w-10 h-10 rounded-md bg-[#03C160] text-white flex items-center justify-center text-lg font-medium flex-shrink-0 shadow-sm">
3637
{{ (item.name || item.username).charAt(0).toUpperCase() }}
3738
</div>
3839

3940
<div class="flex-1 min-w-0 flex flex-col justify-center gap-0.5">
4041
<div class="flex justify-between items-center">
41-
<h3 class="text-sm text-gray-900 truncate">{{ item.name || item.username }}</h3>
42-
<span v-if="item.formatted_last_time" class="text-[11px] text-gray-400 flex-shrink-0 ml-2">
42+
<h3 class="text-sm truncate" :class="isDark ? 'text-gray-100' : 'text-gray-900'">{{ item.name || item.username }}</h3>
43+
<span v-if="item.formatted_last_time" class="text-[11px] flex-shrink-0 ml-2" :class="isDark ? 'text-gray-500' : 'text-gray-400'">
4344
{{ item.formatted_last_time }}
4445
</span>
4546
</div>
4647

4748
<div
4849
class="text-[10px] px-1.5 py-0.5 rounded w-max mt-0.5"
49-
:class="{
50-
'text-[#03C160] bg-[#03C160]/10': item.type === 1, // 服务号 - 绿色
51-
'text-blue-500 bg-blue-50': item.type === 0, // 公众号 - 蓝色
52-
'text-orange-500 bg-orange-50': item.type === 2, // 企业号 - 橙色
53-
'text-gray-400 bg-gray-100': item.type === 3 // 未知 - 灰色
54-
}"
50+
:class="[
51+
item.type === 1 ? (isDark ? 'text-[#03C160] bg-[#03C160]/20' : 'text-[#03C160] bg-[#03C160]/10') : // 服务号
52+
item.type === 0 ? (isDark ? 'text-blue-400 bg-blue-900/40' : 'text-blue-500 bg-blue-50') : // 公众号
53+
item.type === 2 ? (isDark ? 'text-orange-400 bg-orange-900/40' : 'text-orange-500 bg-orange-50') : // 企业号
54+
(isDark ? 'text-gray-400 bg-gray-700/50' : 'text-gray-400 bg-gray-100') // 未知
55+
]"
5556
>
5657
{{ {1: '服务号', 0: '公众号', 2: '企业号', 3: '未知'}[item.type] || '未知' }}
5758
</div>
@@ -61,47 +62,47 @@
6162
</div>
6263
</div>
6364

64-
<div class="flex-1 flex flex-col min-h-0 min-w-0 bg-[#F5F5F5]">
65+
<div class="flex-1 flex flex-col min-h-0 min-w-0" :class="isDark ? 'bg-[#121212]' : 'bg-[#F5F5F5]'">
6566
<div v-if="selectedAccount" class="flex-1 flex flex-col min-h-0 relative">
66-
<div class="h-14 border-b border-gray-200 bg-[#F5F5F5] flex items-center px-5 shrink-0 z-10">
67-
<h2 class="text-base text-gray-900">{{ selectedAccount.name }}</h2>
67+
<div class="h-14 border-b flex items-center px-5 shrink-0 z-10" :class="isDark ? 'bg-[#121212] border-[#333]' : 'bg-[#F5F5F5] border-gray-200'">
68+
<h2 class="text-base" :class="isDark ? 'text-gray-100' : 'text-gray-900'">{{ selectedAccount.name }}</h2>
6869
</div>
6970

7071
<div class="flex-1 overflow-y-auto px-4 py-6 flex flex-col-reverse" @scroll="handleScroll" ref="messageListRef">
71-
<div v-if="!hasMore" class="text-center text-xs text-gray-400 py-4 w-full">没有更多消息了</div>
72-
<div v-if="loadingMessages" class="text-center text-xs text-gray-400 py-4 w-full">正在加载...</div>
72+
<div v-if="!hasMore" class="text-center text-xs py-4 w-full" :class="isDark ? 'text-gray-500' : 'text-gray-400'">没有更多消息了</div>
73+
<div v-if="loadingMessages" class="text-center text-xs py-4 w-full" :class="isDark ? 'text-gray-500' : 'text-gray-400'">正在加载...</div>
7374

7475
<div class="w-full max-w-[400px] mx-auto flex flex-col-reverse gap-6">
7576
<div v-for="msg in messages" :key="msg.local_id" class="w-full">
7677

77-
<div v-if="selectedAccount.username === 'gh_3dfda90e39d6'" class="bg-white rounded-xl shadow-sm p-5 border border-gray-100">
78-
<div class="flex items-center text-gray-500 text-sm mb-5">
78+
<div v-if="selectedAccount.username === 'gh_3dfda90e39d6'" class="rounded-xl shadow-sm p-5 border" :class="isDark ? 'bg-[#1e1e1e] border-[#333]' : 'bg-white border-gray-100'">
79+
<div class="flex items-center text-sm mb-5" :class="isDark ? 'text-gray-400' : 'text-gray-500'">
7980
<img v-if="msg.merchant_icon" :src="api.getBizProxyImageUrl(msg.merchant_icon)" class="w-6 h-6 rounded-full mr-2 object-cover" alt=""/>
80-
<div v-else class="w-6 h-6 rounded-full mr-2 bg-green-100 flex items-center justify-center text-green-600">¥</div>
81+
<div v-else class="w-6 h-6 rounded-full mr-2 flex items-center justify-center" :class="isDark ? 'bg-green-900/40 text-green-400' : 'bg-green-100 text-green-600'">¥</div>
8182
<span>{{ msg.merchant_name || '微信支付' }}</span>
8283
</div>
8384
<div class="text-center mb-6">
84-
<h3 class="text-[22px] font-medium text-gray-900 mb-1">{{ msg.title }}</h3>
85+
<h3 class="text-[22px] font-medium mb-1" :class="isDark ? 'text-gray-100' : 'text-gray-900'">{{ msg.title }}</h3>
8586
</div>
86-
<div class="text-[13px] text-gray-500 whitespace-pre-wrap leading-relaxed">
87+
<div class="text-[13px] whitespace-pre-wrap leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500'">
8788
{{ msg.description }}
8889
</div>
89-
<div class="mt-4 pt-3 border-t border-gray-100 text-[12px] text-gray-400 text-right">
90+
<div class="mt-4 pt-3 border-t text-[12px] text-right" :class="isDark ? 'border-[#333] text-gray-500' : 'border-gray-100 text-gray-400'">
9091
{{ msg.formatted_time }}
9192
</div>
9293
</div>
9394

94-
<div v-else class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100">
95+
<div v-else class="rounded-xl shadow-sm overflow-hidden border" :class="isDark ? 'bg-[#1e1e1e] border-[#333]' : 'bg-white border-gray-100'">
9596
<a :href="msg.url" target="_blank" class="block relative group cursor-pointer">
96-
<img :src="msg.cover ? api.getBizProxyImageUrl(msg.cover) : defaultImage" class="w-full h-[180px] object-cover bg-gray-100" alt=""/>
97+
<img :src="msg.cover ? api.getBizProxyImageUrl(msg.cover) : defaultImage" :class="['w-full h-[180px] object-cover', isDark ? 'bg-[#333]' : 'bg-gray-100']" alt=""/>
9798
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3 pt-8">
9899
<h3 class="text-white text-[15px] font-medium leading-snug line-clamp-2 group-hover:underline">
99100
{{ msg.title }}
100101
</h3>
101102
</div>
102103
</a>
103104

104-
<div v-if="msg.des" class="px-4 py-3 text-[13px] text-gray-500 border-b border-gray-50">
105+
<div v-if="msg.des" class="px-4 py-3 text-[13px] border-b" :class="isDark ? 'text-gray-400 border-[#333]' : 'text-gray-500 border-gray-50'">
105106
{{ msg.des }}
106107
</div>
107108

@@ -111,20 +112,31 @@
111112
:key="idx"
112113
:href="item.url"
113114
target="_blank"
114-
class="flex items-center justify-between p-3 border-t border-gray-100 hover:bg-gray-50 cursor-pointer group"
115+
class="flex items-center justify-between p-3 border-t hover:bg-opacity-50 cursor-pointer group"
116+
:class="isDark ? 'border-[#333] hover:bg-[#252525]' : 'border-gray-100 hover:bg-gray-50'"
115117
>
116-
<span class="text-[14px] text-gray-800 leading-snug line-clamp-2 pr-3 group-hover:underline">
118+
<span class="text-[14px] leading-snug line-clamp-2 pr-3 group-hover:underline" :class="isDark ? 'text-gray-200' : 'text-gray-800'">
117119
{{ item.title }}
118120
</span>
119-
<img :src="item.cover ? api.getBizProxyImageUrl(item.cover) : defaultImage" class="w-12 h-12 rounded object-cover flex-shrink-0 bg-gray-100 border border-gray-100" alt=""/>
121+
<img :src="item.cover ? api.getBizProxyImageUrl(item.cover) : defaultImage" :class="['w-12 h-12 rounded object-cover flex-shrink-0 border', isDark ? 'bg-[#333] border-[#444]' : 'bg-gray-100 border-gray-100']" alt=""/>
120122
</a>
121123
</div>
122124
</div>
123125

124126
</div>
125127
</div>
126128
</div>
129+
</div>
127130

131+
<div v-else class="flex-1 flex items-center justify-center">
132+
<div class="text-center">
133+
<div class="w-20 h-20 mx-auto mb-5 rounded-2xl flex items-center justify-center" :class="isDark ? 'bg-[#2a2a2a]' : 'bg-gray-200/50'">
134+
<svg class="w-10 h-10" :class="isDark ? 'text-gray-600' : 'text-gray-400'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
135+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5L18.5 7H20" />
136+
</svg>
137+
</div>
138+
<p class="text-sm" :class="isDark ? 'text-gray-500' : 'text-gray-400'">请选择一个服务号查看消息</p>
139+
</div>
128140
</div>
129141
</div>
130142
</div>
@@ -136,12 +148,16 @@ import { ref, computed, onMounted } from 'vue'
136148
import { useApi } from '~/composables/useApi'
137149
const api = useApi()
138150
139-
// 状态
151+
import { storeToRefs } from 'pinia'
152+
import { useThemeStore } from '~/stores/theme'
153+
140154
const accounts = ref([])
141155
const loadingAccounts = ref(false)
142156
const searchQuery = ref('')
143157
const selectedAccount = ref(null)
144158
159+
const themeStore = useThemeStore()
160+
const { isDark } = storeToRefs(themeStore)
145161
const messages = ref([])
146162
const loadingMessages = ref(false)
147163
const offset = ref(0)

0 commit comments

Comments
 (0)