feat: 优化通知详情和列表组件的图标背景色,支持深色模式适配

This commit is contained in:
2026-01-13 00:20:52 +07:00
parent f516408d75
commit f4e7fc2fd4
3 changed files with 26 additions and 21 deletions

View File

@@ -23,7 +23,7 @@ function getConfigByType(type: string) {
<div v-if="data" class="notification-detail"> <div v-if="data" class="notification-detail">
<!-- 图标和标题 --> <!-- 图标和标题 -->
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<div slot="start" class="bg-[#93d25d] p-3 rounded-full shrink-0"> <div slot="start" class="bg-(--bg-icon-color) p-3 rounded-full shrink-0 icon">
<Icon :icon="getConfigByType(data.notification.type).icon" class="text-xl text-[#3b7901]" /> <Icon :icon="getConfigByType(data.notification.type).icon" class="text-xl text-[#3b7901]" />
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
@@ -65,10 +65,15 @@ function getConfigByType(type: string) {
line-height: 1.8; line-height: 1.8;
} }
.icon {
--bg-icon-color: #d5e8b4;
}
/* 深色模式适配 */ /* 深色模式适配 */
@media (prefers-color-scheme: dark) { .ion-palette-dark .icon {
.notification-content { --bg-icon-color: #262d1b;
}
.ion-palette-dark .notification-content {
color: var(--ion-color-step-600); color: var(--ion-color-step-600);
}
} }
</style> </style>

View File

@@ -103,7 +103,7 @@ onBeforeMount(() => {
class="py-3" class="py-3"
@click="handleItemClick(item)" @click="handleItemClick(item)"
> >
<div slot="start" class="bg-[#93d25d] p-3 rounded-full"> <div slot="start" class="bg-(--bg-icon-color) p-3 rounded-full icon">
<Icon :icon="getConfigByType(item.notification.type).icon" class="text-xl text-[#3b7901]" /> <Icon :icon="getConfigByType(item.notification.type).icon" class="text-xl text-[#3b7901]" />
</div> </div>
<div class="pl-3 w-full"> <div class="pl-3 w-full">
@@ -133,3 +133,13 @@ onBeforeMount(() => {
</IonContent> </IonContent>
</IonPage> </IonPage>
</template> </template>
<style lang="css" scoped>
.icon {
--bg-icon-color: #d5e8b4;
}
.ion-palette-dark .icon {
--bg-icon-color: #262d1b;
}
</style>

View File

@@ -12,7 +12,8 @@ import { getCryptoIcon } from "@/config/crypto";
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
const walletStore = useWalletStore(); const walletStore = useWalletStore();
const { fundingBalances, tradingBalances } = storeToRefs(walletStore); const { USDTBalance } = storeToRefs(walletStore);
await walletStore.syncUSDTBalance();
const formRef = useTemplateRef<FormInstance>("formRef"); const formRef = useTemplateRef<FormInstance>("formRef");
type AccountType = "funding" | "trading"; type AccountType = "funding" | "trading";
@@ -31,17 +32,6 @@ const initialValues: TransferForm = {
toAccount: "trading", toAccount: "trading",
}; };
// 可用余额
const availableBalance = computed(() => {
const form = formRef.value?.values as TransferForm | undefined;
if (!form)
return "0";
const balances = form.fromAccount === "funding" ? fundingBalances.value : tradingBalances.value;
const balance = balances?.find(item => item.assetCode === form.assetCode);
return balance ? balance.available : "0";
});
// 验证规则 // 验证规则
const schema = computed(() => z.object({ const schema = computed(() => z.object({
assetCode: z.string({ message: t("transfer.assetCodeRequired") }).min(1, t("transfer.assetCodeRequired")), assetCode: z.string({ message: t("transfer.assetCodeRequired") }).min(1, t("transfer.assetCodeRequired")),
@@ -49,7 +39,7 @@ const schema = computed(() => z.object({
.string({ message: t("transfer.amountRequired") }) .string({ message: t("transfer.amountRequired") })
.min(1, t("transfer.amountRequired")) .min(1, t("transfer.amountRequired"))
.refine(value => Number(value) > 0, t("transfer.amountMinError")) .refine(value => Number(value) > 0, t("transfer.amountMinError"))
.refine(value => Number(value) <= Number(availableBalance.value), t("transfer.amountMaxError", { amount: availableBalance.value })), .refine(value => Number(value) <= Number(USDTBalance.value?.available), t("transfer.amountMaxError", { amount: USDTBalance.value?.available })),
fromAccount: z.string({ message: t("transfer.fromAccountRequired") }).min(1, t("transfer.fromAccountRequired")), fromAccount: z.string({ message: t("transfer.fromAccountRequired") }).min(1, t("transfer.fromAccountRequired")),
toAccount: z.string({ message: t("transfer.toAccountRequired") }).min(1, t("transfer.toAccountRequired")), toAccount: z.string({ message: t("transfer.toAccountRequired") }).min(1, t("transfer.toAccountRequired")),
})); }));
@@ -73,7 +63,7 @@ function setMaxAmount() {
if (!form) if (!form)
return; return;
form.setFieldValue("amount", availableBalance.value); form.setFieldValue("amount", USDTBalance.value?.available || "0");
} }
// 提交划转 // 提交划转
@@ -229,7 +219,7 @@ function getAccountTypeName(type: AccountType) {
<!-- 可用余额 --> <!-- 可用余额 -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-sm text-(--ion-color-medium)">{{ t("transfer.available") }}</span> <span class="text-sm text-(--ion-color-medium)">{{ t("transfer.available") }}</span>
<span class="text-sm font-medium">{{ Number(availableBalance).toFixed(2) }}</span> <span class="text-sm font-medium">{{ Number(USDTBalance?.available).toFixed(2) }}</span>
</div> </div>
<!-- 提交按钮 --> <!-- 提交按钮 -->