From 31b392b359c3c71724ef96420889fd5f4187741d Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Tue, 30 Dec 2025 02:48:45 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A6=E5=8D=95=E9=A1=B5=E9=9D=A2=E5=8F=8A?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=9F=BA=E4=BA=8Enaive=20ui=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../billing/AddPrepaidCreditsDialog.vue       |  86 +-
 .../billing/BillingDetailsDialog.vue          |  86 +-
 .../src/components/billing/PaymentDetails.vue | 159 +++-
 dashboard/src/pages/Billing.vue               | 224 ++++--
 dashboard/src/pages/BillingBalances.vue       | 406 +++++-----
 .../src/pages/BillingMarketplacePayouts.vue   | 252 +++---
 dashboard/src/pages/BillingOrders.vue         | 744 +++++++++++-------
 dashboard/src/pages/BillingOverview.vue       |  49 +-
 dashboard/src/pages/BillingPaymentMethods.vue | 388 ++++-----
 jcloud/translations/zh.csv                    |   1 +
 10 files changed, 1492 insertions(+), 903 deletions(-)

diff --git a/dashboard/src/components/billing/AddPrepaidCreditsDialog.vue b/dashboard/src/components/billing/AddPrepaidCreditsDialog.vue
index 365700b..a76eddc 100644
--- a/dashboard/src/components/billing/AddPrepaidCreditsDialog.vue
+++ b/dashboard/src/components/billing/AddPrepaidCreditsDialog.vue
@@ -1,15 +1,25 @@
 <template>
-	<Dialog v-model="show" :options="{ title: $t('Account Recharge') }">
-		<template #body-content>
-			<div
+	<n-modal
+		v-model:show="show"
+		preset="card"
+		:title="$t('Account Recharge')"
+		:style="modalStyle"
+		:mask-closable="true"
+		:close-on-esc="true"
+		class="add-prepaid-credits-modal"
+	>
+		<template #header>
+			<span class="text-lg font-semibold">{{ $t('Account Recharge') }}</span>
+		</template>
+		<n-space vertical :size="20">
+			<n-alert
 				v-if="showMessage"
-				class="mb-5 inline-flex gap-1.5 text-base text-gray-700"
+				type="info"
+				:title="$t('Information')"
+				closable
 			>
-				<FeatherIcon class="h-4" name="info" />
-				<span>
-					{{ $t('Please recharge your account balance before changing payment method.') }}
-				</span>
-			</div>
+				{{ $t('Please recharge your account balance before changing payment method.') }}
+			</n-alert>
 			<PrepaidCreditsForm
 				@success="
 					() => {
@@ -18,12 +28,13 @@
 					}
 				"
 			/>
-		</template>
-	</Dialog>
+		</n-space>
+	</n-modal>
 </template>
 <script setup>
+import { NModal, NSpace, NAlert } from 'naive-ui';
+import { computed, ref, onMounted, onUnmounted } from 'vue';
 import PrepaidCreditsForm from '../BuyPrepaidCreditsForm.vue';
-import { Dialog, FeatherIcon } from 'jingrow-ui';
 
 const props = defineProps({
 	showMessage: {
@@ -34,4 +45,53 @@ const props = defineProps({
 
 const emit = defineEmits(['success']);
 const show = defineModel();
-</script>
\ No newline at end of file
+const windowWidth = ref(window.innerWidth);
+
+const isMobile = computed(() => windowWidth.value <= 768);
+const modalStyle = computed(() => ({
+	width: isMobile.value ? '95vw' : '700px',
+	maxWidth: isMobile.value ? '95vw' : '90vw',
+}));
+
+function handleResize() {
+	windowWidth.value = window.innerWidth;
+}
+
+onMounted(() => {
+	handleResize();
+	window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style scoped>
+:deep(.add-prepaid-credits-modal .n-card) {
+	width: 700px;
+	max-width: 90vw;
+}
+
+:deep(.add-prepaid-credits-modal .n-card-body) {
+	padding: 24px;
+}
+
+@media (max-width: 768px) {
+	:deep(.add-prepaid-credits-modal .n-card) {
+		width: 95vw !important;
+		max-width: 95vw !important;
+		margin: 20px auto;
+		border-radius: 12px;
+	}
+
+	:deep(.add-prepaid-credits-modal .n-card-body) {
+		padding: 20px 16px;
+	}
+
+	:deep(.add-prepaid-credits-modal .n-card__header) {
+		padding: 16px;
+		font-size: 18px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/billing/BillingDetailsDialog.vue b/dashboard/src/components/billing/BillingDetailsDialog.vue
index 80e3b97..17b7c18 100644
--- a/dashboard/src/components/billing/BillingDetailsDialog.vue
+++ b/dashboard/src/components/billing/BillingDetailsDialog.vue
@@ -1,13 +1,25 @@
 <template>
-	<Dialog v-model="show" :options="{ title: $t('Billing Details') }">
-		<template #body-content>
-			<div
+	<n-modal
+		v-model:show="show"
+		preset="card"
+		:title="$t('Billing Details')"
+		:style="modalStyle"
+		:mask-closable="true"
+		:close-on-esc="true"
+		class="billing-details-modal"
+	>
+		<template #header>
+			<span class="text-lg font-semibold">{{ $t('Billing Details') }}</span>
+		</template>
+		<n-space vertical :size="20">
+			<n-alert
 				v-if="showMessage"
-				class="mb-5 inline-flex gap-1.5 text-base text-gray-700"
+				type="info"
+				:title="$t('Information')"
+				closable
 			>
-				<FeatherIcon class="h-4" name="info" />
-				<span> {{ $t('Please add billing details to your account before continuing.') }}</span>
-			</div>
+				{{ $t('Please add billing details to your account before continuing.') }}
+			</n-alert>
 			<BillingDetails
 				ref="billingRef"
 				@success="
@@ -17,13 +29,13 @@
 					}
 				"
 			/>
-		</template>
-	</Dialog>
+		</n-space>
+	</n-modal>
 </template>
 <script setup>
+import { NModal, NSpace, NAlert } from 'naive-ui';
+import { computed, ref, onMounted, onUnmounted } from 'vue';
 import BillingDetails from './BillingDetails.vue';
-import { FeatherIcon, Dialog } from 'jingrow-ui';
-import { ref } from 'vue';
 
 const props = defineProps({
 	showMessage: {
@@ -31,7 +43,57 @@ const props = defineProps({
 		default: false
 	}
 });
+
 const emit = defineEmits(['success']);
 const show = defineModel();
 const billingRef = ref(null);
-</script>
\ No newline at end of file
+const windowWidth = ref(window.innerWidth);
+
+const isMobile = computed(() => windowWidth.value <= 768);
+const modalStyle = computed(() => ({
+	width: isMobile.value ? '95vw' : '700px',
+	maxWidth: isMobile.value ? '95vw' : '90vw',
+}));
+
+function handleResize() {
+	windowWidth.value = window.innerWidth;
+}
+
+onMounted(() => {
+	handleResize();
+	window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style scoped>
+:deep(.billing-details-modal .n-card) {
+	width: 700px;
+	max-width: 90vw;
+}
+
+:deep(.billing-details-modal .n-card-body) {
+	padding: 24px;
+}
+
+@media (max-width: 768px) {
+	:deep(.billing-details-modal .n-card) {
+		width: 95vw !important;
+		max-width: 95vw !important;
+		margin: 20px auto;
+		border-radius: 12px;
+	}
+
+	:deep(.billing-details-modal .n-card-body) {
+		padding: 20px 16px;
+	}
+
+	:deep(.billing-details-modal .n-card__header) {
+		padding: 16px;
+		font-size: 18px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/billing/PaymentDetails.vue b/dashboard/src/components/billing/PaymentDetails.vue
index 6adaf05..906f59a 100644
--- a/dashboard/src/components/billing/PaymentDetails.vue
+++ b/dashboard/src/components/billing/PaymentDetails.vue
@@ -1,56 +1,65 @@
 <template>
-	<div class="flex flex-col gap-4 py-10">
-		<div class="flex flex-col">
-			<div class="flex items-center justify-between text-base text-gray-900">
-				<div class="flex flex-col gap-1.5">
-					<div class="text-lg font-semibold text-gray-900">{{ $t('Account Balance') }}</div>
-					<div class="text-2xl font-bold text-blue-600 py-6">
-						{{ availableCredits || currency + ' 0.00' }}
+	<n-space vertical :size="24">
+		<n-card class="payment-details-card" :title="$t('Account Balance')">
+			<n-space vertical :size="16">
+				<div class="balance-section">
+					<div class="balance-info">
+						<div class="balance-amount">
+							{{ availableCredits || currency + ' 0.00' }}
+						</div>
 					</div>
-				</div>
-				<div class="shrink-0">
-					<Button
-						:label="$t('Recharge')"
+					<n-button
+						type="primary"
 						@click="
 							() => {
 								showMessage = false;
 								showAddPrepaidCreditsDialog = true;
 							}
 						"
+						:size="buttonSize"
+						:block="isMobile"
 					>
-						<template #prefix>
-							<FeatherIcon class="h-4" name="plus" />
+						<template #icon>
+							<i-lucide-plus class="h-4 w-4" />
 						</template>
-					</Button>
+						{{ $t('Recharge') }}
+					</n-button>
 				</div>
-			</div>
-			<div class="my-3 h-px bg-gray-100" />
-			<div class="flex items-center justify-between text-base text-gray-900">
-				<div class="flex flex-col gap-1.5">
-					<div class="font-medium">{{ $t('Billing Address') }}</div>
-					<div v-if="billingDetailsSummary" class="leading-5 text-gray-700">
-						{{ billingDetailsSummary }}
+			</n-space>
+		</n-card>
+
+		<n-card class="payment-details-card" :title="$t('Billing Address')">
+			<n-space vertical :size="16">
+				<div class="address-section">
+					<div class="address-info">
+						<div v-if="billingDetailsSummary" class="address-text">
+							{{ billingDetailsSummary }}
+						</div>
+						<div v-else class="address-empty">
+							{{ $t('No address') }}
+						</div>
 					</div>
-					<div v-else class="text-gray-700">{{ $t('No address') }}</div>
-				</div>
-				<div class="shrink-0">
-					<Button
-						:label="billingAddressButtonLabel"
+					<n-button
+						:type="billingDetailsSummary ? 'default' : 'primary'"
 						@click="
 							() => {
 								showMessage = false;
 								showBillingDetailsDialog = true;
 							}
 						"
+						:size="buttonSize"
+						:block="isMobile"
 					>
-						<template v-if="!billingDetailsSummary" #prefix>
-							<FeatherIcon class="h-4" name="plus" />
+						<template v-if="!billingDetailsSummary" #icon>
+							<i-lucide-plus class="h-4 w-4" />
 						</template>
-					</Button>
+						{{ billingAddressButtonLabel }}
+					</n-button>
 				</div>
-			</div>
-		</div>
-	</div>
+			</n-space>
+		</n-card>
+	</n-space>
+
 	<BillingDetailsDialog
 		v-if="showBillingDetailsDialog"
 		v-model="showBillingDetailsDialog"
@@ -65,16 +74,11 @@
 	/>
 </template>
 <script setup>
-import DropdownItem from './DropdownItem.vue';
+import { NCard, NSpace, NButton } from 'naive-ui';
 import BillingDetailsDialog from './BillingDetailsDialog.vue';
 import AddPrepaidCreditsDialog from './AddPrepaidCreditsDialog.vue';
-import { Dropdown, Button, FeatherIcon, createResource } from 'jingrow-ui';
-import {
-	confirmDialog,
-	renderDialog,
-} from '../../utils/components';
-import { computed, ref, inject, h, defineAsyncComponent, onMounted, nextTick, getCurrentInstance } from 'vue';
-import router from '../../router';
+import { createResource } from 'jingrow-ui';
+import { computed, ref, inject, onMounted, onUnmounted, nextTick, getCurrentInstance } from 'vue';
 
 // 英文国家名到中文的映射
 const countryToZh = {
@@ -96,6 +100,10 @@ const {
 
 const showBillingDetailsDialog = ref(false);
 const showAddPrepaidCreditsDialog = ref(false);
+const windowWidth = ref(window.innerWidth);
+
+const isMobile = computed(() => windowWidth.value <= 768);
+const buttonSize = computed(() => (isMobile.value ? 'medium' : 'medium'));
 
 const currency = computed(() => (team.pg.currency == 'CNY' ? '¥' : '$'));
 
@@ -193,8 +201,14 @@ const billingAddressButtonLabel = computed(() => {
 	return billingDetailsSummary.value ? $t('Edit') : $t('Add Billing Address');
 });
 
+function handleResize() {
+	windowWidth.value = window.innerWidth;
+}
+
 // 修改onMounted钩子，添加自动设置支付方式为余额支付的逻辑
 onMounted(() => {
+	handleResize();
+	window.addEventListener('resize', handleResize);
 	// 如果当前没有设置支付方式，自动设置为余额支付
 	nextTick(() => {
 		if (!team.pg.payment_mode) {
@@ -203,6 +217,10 @@ onMounted(() => {
 	});
 });
 
+onUnmounted(() => {
+	window.removeEventListener('resize', handleResize);
+});
+
 function payUnpaidInvoices() {
 	let _unpaidInvoices = unpaidInvoices.data;
 	if (_unpaidInvoices.length > 1) {
@@ -231,4 +249,63 @@ function updatePaymentMode(mode) {
 	}
 	if (!changePaymentMode.loading) changePaymentMode.submit({ mode });
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.payment-details-card {
+	border-radius: 12px;
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+	transition: box-shadow 0.2s ease;
+}
+
+.payment-details-card:hover {
+	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.balance-section,
+.address-section {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.balance-info,
+.address-info {
+	flex: 1;
+}
+
+.balance-amount {
+	font-size: 32px;
+	font-weight: 700;
+	color: var(--n-color-primary);
+	line-height: 1.2;
+}
+
+.address-text {
+	font-size: 14px;
+	color: var(--n-text-color);
+	line-height: 1.6;
+	word-break: break-word;
+}
+
+.address-empty {
+	font-size: 14px;
+	color: var(--n-text-color-3);
+	font-style: italic;
+}
+
+@media (min-width: 769px) {
+	.balance-section,
+	.address-section {
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+}
+
+@media (max-width: 768px) {
+	.balance-amount {
+		font-size: 24px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/pages/Billing.vue b/dashboard/src/pages/Billing.vue
index c5169f4..8bd4e40 100644
--- a/dashboard/src/pages/Billing.vue
+++ b/dashboard/src/pages/Billing.vue
@@ -1,68 +1,178 @@
 <template>
-	<div class="sticky top-0 z-10 shrink-0">
+	<div class="billing-container">
 		<Header>
-			<FBreadcrumbs
-				:items="[{ label: $t('Billing'), route: { name: 'Billing' } }]"
-			/>
+			<n-breadcrumb>
+				<n-breadcrumb-item>
+					<router-link :to="{ name: 'Billing' }">
+						{{ $t('Billing') }}
+					</router-link>
+				</n-breadcrumb-item>
+			</n-breadcrumb>
 		</Header>
-		<TabsWithRouter
-			v-if="$team?.pg?.is_desk_user || $session.hasBillingAccess"
-			:tabs="filteredTabs"
-		/>
-		<div
-			v-else
-			class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
-		>
-			<i-lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
-			<ErrorMessage :message="$t('You do not have permission to view the billing page')" />
+		<div v-if="$team?.pg?.is_desk_user || $session.hasBillingAccess" class="billing-content">
+			<n-tabs
+				v-model:value="activeTab"
+				type="line"
+				animated
+				:bar-width="isMobile ? 0 : undefined"
+				:size="isMobile ? 'medium' : 'large'"
+				class="billing-tabs"
+			>
+				<n-tab-pane
+					v-for="tab in filteredTabs"
+					:key="tab.route.name"
+					:name="tab.route.name"
+					:tab="tab.label"
+				>
+					<router-view :tab="tab" />
+				</n-tab-pane>
+			</n-tabs>
+		</div>
+		<div v-else class="no-permission-container">
+			<n-result
+				status="403"
+				:title="$t('Access Denied')"
+				:description="$t('You do not have permission to view the billing page')"
+			>
+				<template #icon>
+					<i-lucide-alert-triangle class="h-12 w-12 text-red-600" />
+				</template>
+			</n-result>
 		</div>
 	</div>
 </template>
-<script>
-import { Tabs, Breadcrumbs } from 'jingrow-ui';
+<script setup>
+import { computed, ref, onMounted, onUnmounted, getCurrentInstance } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { NTabs, NTabPane, NBreadcrumb, NBreadcrumbItem, NResult } from 'naive-ui';
 import Header from '../components/Header.vue';
-import TabsWithRouter from '../components/TabsWithRouter.vue';
 
-export default {
-	name: 'Billing',
-	components: {
-		Header,
-		FBreadcrumbs: Breadcrumbs,
-		FTabs: Tabs,
-		TabsWithRouter,
+const instance = getCurrentInstance();
+const $t = instance?.appContext.config.globalProperties.$t || ((key) => key);
+const $team = instance?.appContext.config.globalProperties.$team;
+const $session = instance?.appContext.config.globalProperties.$session;
+
+const route = useRoute();
+const router = useRouter();
+
+const windowWidth = ref(window.innerWidth);
+const isMobile = computed(() => windowWidth.value <= 768);
+
+const tabs = [
+	{ label: $t('Overview'), route: { name: 'BillingOverview' } },
+	{ label: $t('Order Records'), route: { name: 'BillingOrders' } },
+	{ label: $t('Balance Details'), route: { name: 'BillingBalances' } },
+	{
+		label: $t('Developer Earnings'),
+		route: { name: 'BillingMarketplacePayouts' },
+		requireDeveloper: true,
+		requirePro: true
 	},
-	data() {
-		return {
-			currentTab: 0,
-			tabs: [
-				{ label: this.$t('Overview'), route: { name: 'BillingOverview' } },
-				{ label: this.$t('Order Records'), route: { name: 'BillingOrders' } },
-				{ label: this.$t('Balance Details'), route: { name: 'BillingBalances' } },
-				{
-					label: this.$t('Developer Earnings'),
-					route: { name: 'BillingMarketplacePayouts' },
-					requireDeveloper: true,
-					requirePro: true
-				},
-			],
-		};
-	},
-	computed: {
-		filteredTabs() {
-			return this.tabs.filter(tab => {
-				// 如果需要开发者权限但用户不是开发者，则隐藏
-				if (tab.requireDeveloper && !this.$team.pg.is_developer) {
-					return false;
-				}
-				
-				// 如果需要专业版权限但用户不是专业版用户，则隐藏
-				if (tab.requirePro && !this.$team.pg.is_pro) {
-					return false;
-				}
-				
-				return true;
-			});
+];
+
+const filteredTabs = computed(() => {
+	return tabs.filter(tab => {
+		// 如果需要开发者权限但用户不是开发者，则隐藏
+		if (tab.requireDeveloper && !$team.pg.is_developer) {
+			return false;
 		}
+		
+		// 如果需要专业版权限但用户不是专业版用户，则隐藏
+		if (tab.requirePro && !$team.pg.is_pro) {
+			return false;
+		}
+		
+		return true;
+	});
+});
+
+const activeTab = computed({
+	get() {
+		return route.name || 'BillingOverview';
 	},
-};
-</script>
\ No newline at end of file
+	set(value) {
+		router.push({ name: value });
+	}
+});
+
+function handleResize() {
+	windowWidth.value = window.innerWidth;
+}
+
+onMounted(() => {
+	handleResize();
+	window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style scoped>
+.billing-container {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.billing-content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.billing-tabs {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+:deep(.n-tabs-nav) {
+	padding: 0 24px;
+	background: white;
+	border-bottom: 1px solid var(--n-border-color);
+}
+
+:deep(.n-tabs-tab) {
+	padding: 12px 16px;
+	font-size: 15px;
+	font-weight: 500;
+}
+
+:deep(.n-tabs-tab--active) {
+	color: var(--n-color);
+}
+
+:deep(.n-tab-pane) {
+	padding: 0;
+	overflow-y: auto;
+}
+
+.no-permission-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 400px;
+	padding: 24px;
+}
+
+@media (max-width: 768px) {
+	:deep(.n-tabs-nav) {
+		padding: 0 16px;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	:deep(.n-tabs-tab) {
+		padding: 10px 12px;
+		font-size: 14px;
+		white-space: nowrap;
+	}
+
+	:deep(.n-tabs-nav-scroll-content) {
+		display: flex;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/pages/BillingBalances.vue b/dashboard/src/pages/BillingBalances.vue
index 367c467..e7bb855 100644
--- a/dashboard/src/pages/BillingBalances.vue
+++ b/dashboard/src/pages/BillingBalances.vue
@@ -1,205 +1,233 @@
 <template>
-	<div class="p-5">
-		<ObjectList :options="options">
-			<template #header-right>
-				<Button
-					icon="download"
-					appearance="primary"
-					@click="exportToCsv"
-					:loading="exporting"
-				>
-					{{ $t('Export') }}
-				</Button>
-			</template>
-		</ObjectList>
+	<div class="billing-balances-container">
+		<n-card class="balances-card">
+			<ObjectList :options="options">
+				<template #header-right>
+					<n-button
+						type="primary"
+						:size="buttonSize"
+						:loading="exporting"
+						:block="isMobile"
+						@click="exportToCsv"
+					>
+						<template #icon>
+							<i-lucide-download class="h-4 w-4" />
+						</template>
+						{{ $t('Export') }}
+					</n-button>
+				</template>
+			</ObjectList>
+		</n-card>
 	</div>
 </template>
-<script>
+<script setup>
+import { ref, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue';
+import { NCard, NButton } from 'naive-ui';
 import ObjectList from '../components/ObjectList.vue';
-import { Button, createResource } from 'jingrow-ui';
+import { createResource } from 'jingrow-ui';
 import { unparse } from 'papaparse';
 
-export default {
-	name: 'BillingBalances',
-	props: ['tab'],
-	components: {
-		ObjectList,
-		Button
-	},
-	data() {
-		return {
-			exporting: false
-		};
-	},
-	computed: {
-		options() {
-			return {
-				pagetype: 'Balance Transaction',
-				fields: ['type', 'source', 'invoice', 'description'],
-				columns: [
-					{
-						label: this.$t('Time'),
-						fieldname: 'creation',
-						format(value) {
-							return new Date(value).toLocaleString('zh-CN', {
-								year: 'numeric',
-								month: '2-digit',
-								day: '2-digit',
-								hour: '2-digit',
-								minute: '2-digit',
-								second: '2-digit'
-							}).replace(/\//g, '-');
-						}
-					},
-					{
-						label: this.$t('Description'),
-						fieldname: 'description',
-						format(value, row) {
-							if (value !== null && value !== undefined) {
-								return value;
-							}
-							
-							if (row.type === 'Applied To Invoice' && row.invoice) {
-								return this.$t('Applied to Invoice {invoice}', { invoice: row.invoice });
-							}
+const instance = getCurrentInstance();
+const $t = instance?.appContext.config.globalProperties.$t || ((key) => key);
+const $team = instance?.appContext.config.globalProperties.$team;
 
-							if (row.source === 'Prepaid Credits') {
-								return this.$t('Balance Recharge');
-							}
+const exporting = ref(false);
+const windowWidth = ref(window.innerWidth);
 
-							if (row.source === 'Free Credits') {
-								return this.$t('Free Credits');
-							}
+const isMobile = computed(() => windowWidth.value <= 768);
+const buttonSize = computed(() => (isMobile.value ? 'medium' : 'medium'));
 
-							return row.amount < 0 ? row.type : row.source;
-						}
-					},
-					{
-						label: this.$t('Amount'),
-						fieldname: 'amount',
-						align: 'right',
-						format: this.formatCurrency
-					},
-					{
-						label: this.$t('Balance'),
-						fieldname: 'ending_balance',
-						align: 'right',
-						format: this.formatCurrency
-					}
-				],
-				filters: {
-					pagestatus: 1,
-					team: this.$team.name
-				},
-				orderBy: 'creation desc'
-			};
-		}
-	},
-	created() {
-		// 创建导出资源
-		this.exportResource = createResource({
-			url: 'jcloud.api.billing.get_balance_transactions',
-			onSuccess: this.handleExportSuccess,
-			onError: this.handleExportError
-		});
-	},
-	methods: {
-		formatCurrency(value) {
-			if (value === 0) {
-				return '';
-			}
-			return this.$format.userCurrency(value);
-		},
-		formatDate(dateString) {
-			return new Date(dateString).toLocaleString('zh-CN', {
-				year: 'numeric',
-				month: '2-digit',
-				day: '2-digit',
-				hour: '2-digit',
-				minute: '2-digit',
-				second: '2-digit'
-			}).replace(/\//g, '-');
-		},
-		exportToCsv() {
-			this.exporting = true;
-			this.exportResource.submit({
-				page: 1,
-				page_size: 1000
-			});
-		},
-		handleExportSuccess(response) {
-			const transactions = response.transactions || [];
-			
-			// 定义CSV字段
-			const fields = [
-				this.$t('Time'),
-				this.$t('Description'),
-				this.$t('Amount'),
-				this.$t('Balance')
-			];
-			
-			// 准备数据
-			const csvData = transactions.map(row => {
-				// 优先使用原始描述，如果存在的话
-				let description = row.description;
-				
-				// 如果描述不存在，则使用备用逻辑
-				if (!description) {
-					if (row.type === 'Applied To Invoice' && row.invoice) {
-						description = this.$t('Applied to Invoice {invoice}', { invoice: row.invoice });
-					} else if (row.source === 'Prepaid Credits') {
-						description = this.$t('Balance Recharge');
-					} else if (row.source === 'Free Credits') {
-						description = this.$t('Free Credits');
-					} else {
-						description = row.amount < 0 ? row.type : row.source;
-					}
+const props = defineProps(['tab']);
+const options = computed(() => {
+	return {
+		pagetype: 'Balance Transaction',
+		fields: ['type', 'source', 'invoice', 'description'],
+		columns: [
+			{
+				label: $t('Time'),
+				fieldname: 'creation',
+				format(value) {
+					return new Date(value).toLocaleString('zh-CN', {
+						year: 'numeric',
+						month: '2-digit',
+						day: '2-digit',
+						hour: '2-digit',
+						minute: '2-digit',
+						second: '2-digit'
+					}).replace(/\//g, '-');
 				}
-				
-				return [
-					this.formatDate(row.creation),
-					description,
-					row.amount,
-					row.ending_balance
-				];
-			});
-			
-			// 添加表头
-			csvData.unshift(fields);
-			
-			// 生成CSV
-			let csv = unparse(csvData);
-			
-			// 添加BOM以支持中文
-			csv = '\uFEFF' + csv;
-			
-			// 触发下载
-			const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
-			const today = new Date().toISOString().split('T')[0];
-			const filename = `${this.$t('Balance Records')}-${today}.csv`;
-			const link = document.createElement('a');
-			link.href = URL.createObjectURL(blob);
-			link.download = filename;
-			link.click();
-			URL.revokeObjectURL(link.href);
-			
-			this.exporting = false;
+			},
+			{
+				label: $t('Description'),
+				fieldname: 'description',
+				format(value, row) {
+					if (value !== null && value !== undefined) {
+						return value;
+					}
+					
+					if (row.type === 'Applied To Invoice' && row.invoice) {
+						return $t('Applied to Invoice {invoice}', { invoice: row.invoice });
+					}
+
+					if (row.source === 'Prepaid Credits') {
+						return $t('Balance Recharge');
+					}
+
+					if (row.source === 'Free Credits') {
+						return $t('Free Credits');
+					}
+
+					return row.amount < 0 ? row.type : row.source;
+				}
+			},
+			{
+				label: $t('Amount'),
+				fieldname: 'amount',
+				align: 'right',
+				format: formatCurrency
+			},
+			{
+				label: $t('Balance'),
+				fieldname: 'ending_balance',
+				align: 'right',
+				format: formatCurrency
+			}
+		],
+		filters: {
+			pagestatus: 1,
+			team: $team.name
 		},
-		handleExportError(error) {
-			console.error(this.$t('Failed to export data'), error);
-			this.exporting = false;
-		}
+		orderBy: 'creation desc'
+	};
+});
+
+// 创建导出资源
+const exportResource = createResource({
+	url: 'jcloud.api.billing.get_balance_transactions',
+	onSuccess: handleExportSuccess,
+	onError: handleExportError
+});
+
+function formatCurrency(value) {
+	if (value === 0) {
+		return '';
 	}
-};
-</script>
-<style scoped>
-/* 添加悬浮效果 */
-.flex-col:hover {
-    background-color: #f0f0f0; /* 可按需调整颜色 */
+	const $format = instance?.appContext.config.globalProperties.$format;
+	return $format?.userCurrency(value) || value;
 }
 
-/* 允许内容复制 */
-.flex-col * {
-    user-select: text;
+function formatDate(dateString) {
+	return new Date(dateString).toLocaleString('zh-CN', {
+		year: 'numeric',
+		month: '2-digit',
+		day: '2-digit',
+		hour: '2-digit',
+		minute: '2-digit',
+		second: '2-digit'
+	}).replace(/\//g, '-');
+}
+
+function exportToCsv() {
+	exporting.value = true;
+	exportResource.submit({
+		page: 1,
+		page_size: 1000
+	});
+}
+
+function handleExportSuccess(response) {
+	const transactions = response.transactions || [];
+	
+	// 定义CSV字段
+	const fields = [
+		$t('Time'),
+		$t('Description'),
+		$t('Amount'),
+		$t('Balance')
+	];
+	
+	// 准备数据
+	const csvData = transactions.map(row => {
+		// 优先使用原始描述，如果存在的话
+		let description = row.description;
+		
+		// 如果描述不存在，则使用备用逻辑
+		if (!description) {
+			if (row.type === 'Applied To Invoice' && row.invoice) {
+				description = $t('Applied to Invoice {invoice}', { invoice: row.invoice });
+			} else if (row.source === 'Prepaid Credits') {
+				description = $t('Balance Recharge');
+			} else if (row.source === 'Free Credits') {
+				description = $t('Free Credits');
+			} else {
+				description = row.amount < 0 ? row.type : row.source;
+			}
+		}
+		
+		return [
+			formatDate(row.creation),
+			description,
+			row.amount,
+			row.ending_balance
+		];
+	});
+	
+	// 添加表头
+	csvData.unshift(fields);
+	
+	// 生成CSV
+	let csv = unparse(csvData);
+	
+	// 添加BOM以支持中文
+	csv = '\uFEFF' + csv;
+	
+	// 触发下载
+	const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
+	const today = new Date().toISOString().split('T')[0];
+	const filename = `${$t('Balance Records')}-${today}.csv`;
+	const link = document.createElement('a');
+	link.href = URL.createObjectURL(blob);
+	link.download = filename;
+	link.click();
+	URL.revokeObjectURL(link.href);
+	
+	exporting.value = false;
+}
+
+function handleExportError(error) {
+	console.error($t('Failed to export data'), error);
+	exporting.value = false;
+}
+
+function handleResize() {
+	windowWidth.value = window.innerWidth;
+}
+
+onMounted(() => {
+	handleResize();
+	window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style scoped>
+.billing-balances-container {
+	padding: 24px;
+	max-width: 1400px;
+	margin: 0 auto;
+}
+
+.balances-card {
+	border-radius: 12px;
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+@media (max-width: 768px) {
+	.billing-balances-container {
+		padding: 16px;
+	}
 }
 </style>
\ No newline at end of file
diff --git a/dashboard/src/pages/BillingMarketplacePayouts.vue b/dashboard/src/pages/BillingMarketplacePayouts.vue
index e61ca2a..aa09d10 100644
--- a/dashboard/src/pages/BillingMarketplacePayouts.vue
+++ b/dashboard/src/pages/BillingMarketplacePayouts.vue
@@ -1,105 +1,171 @@
 <template>
-	<div class="p-5">
-		<ObjectList :options="options" />
-		<Dialog
-			v-model="payoutDialog"
-			:options="{ size: '6xl', title: showPayout?.name }"
+	<div class="billing-marketplace-payouts-container">
+		<n-card class="payouts-card">
+			<ObjectList :options="options" />
+		</n-card>
+		<n-modal
+			v-model:show="payoutDialog"
+			preset="card"
+			:title="showPayout?.name"
+			:style="modalStyle"
+			:mask-closable="true"
+			:close-on-esc="true"
+			class="payout-dialog"
 		>
-			<template #body-content>
-				<template v-if="showPayout">
-					<div
-						v-if="showPayout.status === 'Empty'"
-						class="text-base text-gray-600"
-					>
-						{{ $t('No content to display') }}
-					</div>
-					<PayoutTable v-else :payoutId="showPayout.name" />
-				</template>
+			<template #header>
+				<span class="text-lg font-semibold">{{ showPayout?.name }}</span>
 			</template>
-		</Dialog>
+			<template v-if="showPayout">
+				<n-empty
+					v-if="showPayout.status === 'Empty'"
+					:description="$t('No content to display')"
+				/>
+				<PayoutTable v-else :payoutId="showPayout.name" />
+			</template>
+		</n-modal>
 	</div>
 </template>
-<script>
+<script setup>
+import { ref, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue';
+import { NCard, NModal, NEmpty } from 'naive-ui';
 import ObjectList from '../components/ObjectList.vue';
 import PayoutTable from '../components/PayoutTable.vue';
 
-export default {
-	name: 'BillingMarketplacePayouts',
-	props: ['tab'],
-	data() {
-		return {
-			payoutDialog: false,
-			showPayout: null
-		};
-	},
-	components: {
-		ObjectList,
-		PayoutTable
-	},
-	computed: {
-		options() {
-			return {
-				pagetype: 'Payout Order',
-				fields: [
-					'period_end',
-					'mode_of_payment',
-					'status',
-					'net_total_cny',
-					'net_total_usd'
-				],
-				filterControls: () => {
-					return [
-						{
-							type: 'select',
-							label: this.$t('Status'),
-							class: !this.$isMobile ? 'w-36' : '',
-							fieldname: 'status',
-							options: [
-								{ label: '', value: '' },
-								{ label: this.$t('Pending Settlement'), value: 'Draft' },
-								{ label: this.$t('Paid'), value: 'Paid' },
-								{ label: this.$t('Settled'), value: 'Commissioned' }
-							]
-						}
-					];
-				},
-				orderBy: 'creation desc',
-				columns: [
-					{
-						label: this.$t('Date'),
-						fieldname: 'period_end',
-						format(value) {
-							return Intl.DateTimeFormat('en-US', {
-								year: 'numeric',
-								month: 'short',
-								day: 'numeric'
-							}).format(new Date(value));
-						}
-					},
-					{ label: this.$t('Payment Method'), fieldname: 'mode_of_payment' },
-					{ label: this.$t('Status'), fieldname: 'status', type: 'Badge' },
-					{
-						label: this.$t('Total'),
-						fieldname: 'net_total_cny',
-						align: 'right',
-						format: (_, row) => {
-							let total = 0;
-							if (this.$team.pg.currency === 'CNY') {
-								total = row.net_total_cny + row.net_total_usd * 82;
-							} else {
-								total = row.net_total_cny / 82 + row.net_total_usd;
-							}
+const instance = getCurrentInstance();
+const $t = instance?.appContext.config.globalProperties.$t || ((key) => key);
+const $team = instance?.appContext.config.globalProperties.$team;
 
-							return this.$format.userCurrency(total);
-						}
-					}
-				],
-				onRowClick: row => {
-					this.showPayout = row;
-					this.payoutDialog = true;
+const props = defineProps(['tab']);
+
+const payoutDialog = ref(false);
+const showPayout = ref(null);
+const windowWidth = ref(window.innerWidth);
+
+const isMobile = computed(() => windowWidth.value <= 768);
+const modalStyle = computed(() => ({
+	width: isMobile.value ? '95vw' : '1200px',
+	maxWidth: isMobile.value ? '95vw' : '90vw',
+}));
+
+const options = computed(() => {
+	return {
+		pagetype: 'Payout Order',
+		fields: [
+			'period_end',
+			'mode_of_payment',
+			'status',
+			'net_total_cny',
+			'net_total_usd'
+		],
+		filterControls: () => {
+			return [
+				{
+					type: 'select',
+					label: $t('Status'),
+					class: !isMobile.value ? 'w-36' : '',
+					fieldname: 'status',
+					options: [
+						{ label: '', value: '' },
+						{ label: $t('Pending Settlement'), value: 'Draft' },
+						{ label: $t('Paid'), value: 'Paid' },
+						{ label: $t('Settled'), value: 'Commissioned' }
+					]
 				}
-			};
+			];
+		},
+		orderBy: 'creation desc',
+		columns: [
+			{
+				label: $t('Date'),
+				fieldname: 'period_end',
+				format(value) {
+					return Intl.DateTimeFormat('en-US', {
+						year: 'numeric',
+						month: 'short',
+						day: 'numeric'
+					}).format(new Date(value));
+				}
+			},
+			{ label: $t('Payment Method'), fieldname: 'mode_of_payment' },
+			{ label: $t('Status'), fieldname: 'status', type: 'Badge' },
+			{
+				label: $t('Total'),
+				fieldname: 'net_total_cny',
+				align: 'right',
+				format: (_, row) => {
+					let total = 0;
+					const $format = instance?.appContext.config.globalProperties.$format;
+					if ($team.pg.currency === 'CNY') {
+						total = row.net_total_cny + row.net_total_usd * 82;
+					} else {
+						total = row.net_total_cny / 82 + row.net_total_usd;
+					}
+
+					return $format?.userCurrency(total) || total;
+				}
+			}
+		],
+		onRowClick: row => {
+			showPayout.value = row;
+			payoutDialog.value = true;
 		}
+	};
+});
+
+function handleResize() {
+	windowWidth.value = window.innerWidth;
+}
+
+onMounted(() => {
+	handleResize();
+	window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style scoped>
+.billing-marketplace-payouts-container {
+	padding: 24px;
+	max-width: 1400px;
+	margin: 0 auto;
+}
+
+.payouts-card {
+	border-radius: 12px;
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+:deep(.payout-dialog .n-card) {
+	width: 1200px;
+	max-width: 90vw;
+}
+
+:deep(.payout-dialog .n-card-body) {
+	padding: 24px;
+}
+
+@media (max-width: 768px) {
+	.billing-marketplace-payouts-container {
+		padding: 16px;
 	}
-};
-</script>
\ No newline at end of file
+
+	:deep(.payout-dialog .n-card) {
+		width: 95vw !important;
+		max-width: 95vw !important;
+		margin: 20px auto;
+		border-radius: 12px;
+	}
+
+	:deep(.payout-dialog .n-card-body) {
+		padding: 20px 16px;
+	}
+
+	:deep(.payout-dialog .n-card__header) {
+		padding: 16px;
+		font-size: 18px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/pages/BillingOrders.vue b/dashboard/src/pages/BillingOrders.vue
index a0064e8..fb28f0c 100644
--- a/dashboard/src/pages/BillingOrders.vue
+++ b/dashboard/src/pages/BillingOrders.vue
@@ -1,147 +1,224 @@
 <template>
-  <div class="p-4">
-    <div class="mb-4 flex justify-between">
-      <div>
-        <FInput
-          v-model="filters.search"
-          :placeholder="$t('Search orders...')"
-          type="text"
-          class="w-60"
-          @input="debouncedSearch"
-        >
-          <template #prefix>
-            <i-lucide-search class="h-4 w-4 text-gray-500" />
-          </template>
-        </FInput>
-      </div>
-      <div class="flex items-center space-x-2">
-        <Button
-          icon="download"
-          appearance="primary"
-          @click="exportToCsv"
-        >
-          {{ $t('Export') }}
-        </Button>
-        <Button
-          icon="refresh-cw"
-          appearance="minimal"
-          @click="resetAndFetch"
-        />
-      </div>
-    </div>
-
-    <Card class="overflow-hidden !rounded-none !border-0">
-      <template v-if="orders.length === 0">
-        <div class="flex h-60 flex-col items-center justify-center space-y-2 p-4 text-center">
-          <i-lucide-file-text class="h-8 w-8 text-gray-400" />
-          <p class="text-base font-medium">{{ $t('No Order Records') }}</p>
-          <p class="text-sm text-gray-600">{{ $t('No order records to display') }}</p>
-        </div>
-      </template>
-
-      <template v-else>
-        <div class="overflow-x-auto">
-          <table class="w-full">
-            <thead>
-              <tr class="border-b text-left text-sm font-medium text-gray-600">
-                <th 
-                  v-for="column in columns" 
-                  :key="column.key" 
-                  class="whitespace-nowrap px-4 py-3"
-                  :class="column.class"
-                >
-                  {{ column.label }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr 
-                v-for="order in orders" 
-                :key="order.name || order.order_id"
-                class="border-b text-sm hover:bg-gray-50"
-              >
-                <td class="px-4 py-3">{{ formatDate(order.creation) }}</td>
-                <td class="px-4 py-3">{{ order.title || '-' }}</td>
-                <td class="px-4 py-3">{{ order.order_id || '-' }}</td>
-                <td class="px-4 py-3">{{ order.trade_no || '-' }}</td>
-                <td class="px-4 py-3">{{ order.order_type || '-' }}</td>
-                <td class="px-4 py-3">{{ order.payment_method || '-' }}</td>
-                <td class="px-4 py-3">{{ order.description || '-' }}</td>
-                <td class="px-4 py-3 text-right">{{ formatCurrency(order.total) }}</td>
-                <td class="px-4 py-3">
-                  <StatusIndicator :status="getStatusProps(order.status)" />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="flex items-center justify-between p-4">
-          <div class="text-sm text-gray-600">
-            {{ $t('Showing {count} orders, total {total}', { count: orders.length, total: totalCount }) }}
-          </div>
-          <Button
-            v-if="hasMoreToLoad"
-            @click="loadMore"
-            :loading="loadingMore"
-            appearance="primary"
+  <div class="billing-orders-container">
+    <n-card class="orders-card">
+      <template #header>
+        <div class="orders-header">
+          <n-input
+            v-model:value="filters.search"
+            :placeholder="$t('Search orders...')"
+            clearable
+            :size="inputSize"
+            class="search-input"
+            @input="debouncedSearch"
           >
-            {{ $t('Load More') }}
-          </Button>
+            <template #prefix>
+              <i-lucide-search class="h-4 w-4" />
+            </template>
+          </n-input>
+          <n-space :size="12">
+            <n-button
+              type="primary"
+              :size="buttonSize"
+              :loading="exporting"
+              @click="exportToCsv"
+              :block="isMobile"
+            >
+              <template #icon>
+                <i-lucide-download class="h-4 w-4" />
+              </template>
+              {{ $t('Export') }}
+            </n-button>
+            <n-button
+              :size="buttonSize"
+              @click="resetAndFetch"
+              :loading="initialLoading"
+              :block="isMobile"
+            >
+              <template #icon>
+                <i-lucide-refresh-cw class="h-4 w-4" />
+              </template>
+            </n-button>
+          </n-space>
         </div>
       </template>
-    </Card>
+
+      <n-empty
+        v-if="!initialLoading && orders.length === 0"
+        :description="$t('No order records to display')"
+        class="empty-state"
+      >
+        <template #icon>
+          <i-lucide-file-text class="h-12 w-12 text-gray-400" />
+        </template>
+      </n-empty>
+
+      <n-data-table
+        v-else
+        :columns="tableColumns"
+        :data="orders"
+        :loading="initialLoading"
+        :pagination="false"
+        :scroll-x="isMobile ? 1200 : undefined"
+        :bordered="false"
+        :single-line="false"
+        class="orders-table"
+        size="medium"
+      />
+
+      <div v-if="orders.length > 0" class="orders-footer">
+        <div class="orders-info">
+          {{ $t('Showing {count} orders, total {total}', { count: orders.length, total: totalCount }) }}
+        </div>
+        <n-button
+          v-if="hasMoreToLoad"
+          type="primary"
+          :loading="loadingMore"
+          :size="buttonSize"
+          :block="isMobile"
+          @click="loadMore"
+        >
+          {{ $t('Load More') }}
+        </n-button>
+      </div>
+    </n-card>
   </div>
 </template>
 
-<script>
-import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue';
-import { Button, Card, Input as FInput, createResource } from 'jingrow-ui';
-import StatusIndicator from '../components/StatusIndicator.vue';
+<script setup>
+import { ref, reactive, computed, onMounted, onUnmounted, h, getCurrentInstance } from 'vue';
+import { NCard, NInput, NButton, NSpace, NDataTable, NEmpty, NTag } from 'naive-ui';
+import { createResource } from 'jingrow-ui';
 import { unparse } from 'papaparse';
 
-export default {
-  name: 'BillingOrders',
-  components: {
-    Button,
-    Card,
-    FInput,
-    StatusIndicator,
-  },
-  setup() {
-    const instance = getCurrentInstance();
-    const $t = instance?.appContext.config.globalProperties.$t || ((key) => key);
-    const pageSize = 20;
-    const orders = ref([]);
-    const totalCount = ref(0);
-    const currentPage = ref(1);
-    const initialLoading = ref(true);
-    const loadingMore = ref(false);
+const instance = getCurrentInstance();
+const $t = instance?.appContext.config.globalProperties.$t || ((key) => key);
+const pageSize = 20;
+const orders = ref([]);
+const totalCount = ref(0);
+const currentPage = ref(1);
+const initialLoading = ref(true);
+const loadingMore = ref(false);
+const exporting = ref(false);
+const windowWidth = ref(window.innerWidth);
+
+const isMobile = computed(() => windowWidth.value <= 768);
+const inputSize = computed(() => (isMobile.value ? 'medium' : 'medium'));
+const buttonSize = computed(() => (isMobile.value ? 'medium' : 'medium'));
+
+const filters = reactive({
+  search: ''
+});
     
-    const filters = reactive({
-      search: ''
-    });
+// 计算是否还有更多数据可加载
+const hasMoreToLoad = computed(() => {
+  return orders.value.length < totalCount.value;
+});
+
+// 定义表格列
+const tableColumns = computed(() => {
+  const statusColumn = {
+    title: $t('Status'),
+    key: 'status',
+    width: isMobile.value ? 100 : 120,
+    render(row) {
+      const statusProps = getStatusProps(row.status);
+      return h(NTag, {
+        type: statusProps.color === 'green' ? 'success' : 
+              statusProps.color === 'orange' ? 'warning' : 
+              statusProps.color === 'red' ? 'error' : 'info',
+        size: isMobile.value ? 'small' : 'medium'
+      }, { default: () => statusProps.label });
+    }
+  };
+
+  const baseColumns = [
+    {
+      title: $t('Time'),
+      key: 'creation',
+      width: isMobile.value ? 140 : 160,
+      ellipsis: { tooltip: true },
+      render(row) {
+        return formatDate(row.creation);
+      }
+    },
+    {
+      title: $t('Title'),
+      key: 'title',
+      width: isMobile.value ? 120 : 150,
+      ellipsis: { tooltip: true },
+      render(row) {
+        return row.title || '-';
+      }
+    },
+    {
+      title: $t('Order ID'),
+      key: 'order_id',
+      width: isMobile.value ? 120 : 150,
+      ellipsis: { tooltip: true },
+      render(row) {
+        return row.order_id || '-';
+      }
+    },
+    {
+      title: $t('Transaction ID'),
+      key: 'trade_no',
+      width: isMobile.value ? 120 : 150,
+      ellipsis: { tooltip: true },
+      render(row) {
+        return row.trade_no || '-';
+      }
+    },
+    {
+      title: $t('Order Type'),
+      key: 'order_type',
+      width: isMobile.value ? 100 : 120,
+      ellipsis: { tooltip: true },
+      render(row) {
+        return row.order_type || '-';
+      }
+    },
+    {
+      title: $t('Payment Method'),
+      key: 'payment_method',
+      width: isMobile.value ? 100 : 120,
+      ellipsis: { tooltip: true },
+      render(row) {
+        return row.payment_method || '-';
+      }
+    },
+    {
+      title: $t('Description'),
+      key: 'description',
+      width: isMobile.value ? 150 : 200,
+      ellipsis: { tooltip: true },
+      render(row) {
+        return row.description || '-';
+      }
+    },
+    {
+      title: $t('Amount'),
+      key: 'total',
+      width: isMobile.value ? 100 : 120,
+      align: 'right',
+      render(row) {
+        return formatCurrency(row.total);
+      }
+    },
+    statusColumn
+  ];
+
+  // 移动端隐藏部分列
+  if (isMobile.value) {
+    return baseColumns.filter(col => 
+      ['creation', 'title', 'total', 'status'].includes(col.key)
+    );
+  }
+
+  return baseColumns;
+});
     
-    // 定义表格列
-    const columns = [
-      { key: 'creation', label: $t('Time'), class: '' },
-      { key: 'title', label: $t('Title'), class: '' },
-      { key: 'order_id', label: $t('Order ID'), class: '' },
-      { key: 'trade_no', label: $t('Transaction ID'), class: '' },
-      { key: 'order_type', label: $t('Order Type'), class: '' },
-      { key: 'payment_method', label: $t('Payment Method'), class: '' },
-      { key: 'description', label: $t('Description'), class: '' },
-      { key: 'total', label: $t('Amount'), class: 'text-right' },
-      { key: 'status', label: $t('Status'), class: '' }
-    ];
-    
-    // 计算是否还有更多数据可加载
-    const hasMoreToLoad = computed(() => {
-      return orders.value.length < totalCount.value;
-    });
-    
-    // 创建获取订单的资源
-    const ordersResource = createResource({
+// 创建获取订单的资源
+const ordersResource = createResource({
       url: 'jcloud.api.billing.get_orders',
       transform(response) {
         return {
@@ -165,178 +242,247 @@ export default {
         initialLoading.value = false;
         loadingMore.value = false;
       },
-      onError(error) {
-        initialLoading.value = false;
-        loadingMore.value = false;
-      }
-    });
-    
-    // 导出资源
-    const exportResource = createResource({
+  onError(error) {
+    initialLoading.value = false;
+    loadingMore.value = false;
+  }
+});
+
+// 导出资源
+const exportResource = createResource({
       url: 'jcloud.api.billing.get_orders',
-      onSuccess(response) {
-        const orders = response.orders || [];
-        
-        // 定义CSV字段
-        const fields = [
-          $t('Title'),
-          $t('Order ID'),
-          $t('Transaction ID'),
-          $t('Order Type'),
-          $t('Payment Method'),
-          $t('Description'),
-          $t('Amount'),
-          $t('Status'),
-          $t('Creation Time')
-        ];
-        
-        // 准备数据
-        const csvData = orders.map(order => [
-          order.title || '',
-          order.order_id || '',
-          order.trade_no || '',
-          order.order_type || '',
-          order.payment_method || '',
-          order.description || '',
-          order.total || 0,
-          order.status || '',
-          order.creation || ''
-        ]);
-        
-        // 添加表头
-        csvData.unshift(fields);
-        
-        // 生成CSV
-        let csv = unparse(csvData);
-        
-        // 添加BOM以支持中文
-        csv = '\uFEFF' + csv;
-        
-        // 触发下载
-        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
-        const today = new Date().toISOString().split('T')[0];
-        const filename = `${$t('Order Records')}-${today}.csv`;
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(blob);
-        link.download = filename;
-        link.click();
-        URL.revokeObjectURL(link.href);
-      },
-      onError(error) {
-        // 导出失败处理
-      }
-    });
+  onSuccess(response) {
+    const orders = response.orders || [];
     
-    // 方法：加载初始数据
-    function fetchOrders() {
+    // 定义CSV字段
+    const fields = [
+      $t('Title'),
+      $t('Order ID'),
+      $t('Transaction ID'),
+      $t('Order Type'),
+      $t('Payment Method'),
+      $t('Description'),
+      $t('Amount'),
+      $t('Status'),
+      $t('Creation Time')
+    ];
+    
+    // 准备数据
+    const csvData = orders.map(order => [
+      order.title || '',
+      order.order_id || '',
+      order.trade_no || '',
+      order.order_type || '',
+      order.payment_method || '',
+      order.description || '',
+      order.total || 0,
+      order.status || '',
+      order.creation || ''
+    ]);
+    
+    // 添加表头
+    csvData.unshift(fields);
+    
+    // 生成CSV
+    let csv = unparse(csvData);
+    
+    // 添加BOM以支持中文
+    csv = '\uFEFF' + csv;
+    
+    // 触发下载
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
+    const today = new Date().toISOString().split('T')[0];
+    const filename = `${$t('Order Records')}-${today}.csv`;
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = filename;
+    link.click();
+    URL.revokeObjectURL(link.href);
+    exporting.value = false;
+  },
+  onError(error) {
+    exporting.value = false;
+  }
+});
+
+// 方法：加载初始数据
+function fetchOrders() {
       if (currentPage.value === 1) {
         initialLoading.value = true;
       } else {
         loadingMore.value = true;
       }
       
-      ordersResource.submit({
-        page: currentPage.value,
-        page_size: pageSize,
-        search: filters.search,
-      });
-    }
-    
-    // 方法：重置并获取第一页数据
-    function resetAndFetch() {
-      currentPage.value = 1;
-      fetchOrders();
-    }
-    
-    // 方法：加载更多数据
-    function loadMore() {
-      if (loadingMore.value) return;
-      
-      currentPage.value += 1;
-      loadingMore.value = true;
-      fetchOrders();
-    }
-    
-    // 搜索防抖
-    let searchTimeout;
-    function debouncedSearch() {
-      clearTimeout(searchTimeout);
-      searchTimeout = setTimeout(() => {
-        resetAndFetch();
-      }, 300);
-    }
-    
-    // 导出为CSV
-    function exportToCsv() {
-      exportResource.submit({
-        page: 1,
-        page_size: 1000, // 设置较大的值获取更多数据用于导出
-        search: filters.search,
-      });
-    }
-    
-    // 格式化金额
-    function formatCurrency(amount) {
-      if (amount === undefined || amount === null) return '-';
-      return new Intl.NumberFormat('zh-CN', {
-        style: 'currency',
-        currency: 'CNY',
-      }).format(amount);
-    }
-    
-    // 格式化日期
-    function formatDate(dateString) {
-      if (!dateString) return '-';
-      
-      const date = new Date(dateString);
-      if (isNaN(date.getTime())) return '-';
-      
-      // 格式化为 YYYY-MM-DD HH:MM 格式
-      const year = date.getFullYear();
-      const month = String(date.getMonth() + 1).padStart(2, '0');
-      const day = String(date.getDate()).padStart(2, '0');
-      const hours = String(date.getHours()).padStart(2, '0');
-      const minutes = String(date.getMinutes()).padStart(2, '0');
-      
-      return `${year}-${month}-${day} ${hours}:${minutes}`;
-    }
-    
-    // 获取状态样式
-    function getStatusProps(status) {
-      const statusMap = {
-        '待支付': { label: $t('Pending Payment'), color: 'orange' },
-        '已支付': { label: $t('Paid'), color: 'green' },
-        '交易成功': { label: $t('Transaction Successful'), color: 'green' },
-        '已取消': { label: $t('Cancelled'), color: 'red' },
-        '已退款': { label: $t('Refunded'), color: 'red' },
-      };
-      
-      return statusMap[status] || { label: status || '', color: 'blue' };
-    }
-    
-    // 生命周期钩子
-    onMounted(() => {
-      fetchOrders();
-    });
-    
-    return {
-      columns,
-      orders,
-      totalCount,
-      currentPage,
-      initialLoading,
-      loadingMore,
-      hasMoreToLoad,
-      filters,
-      fetchOrders,
-      resetAndFetch,
-      loadMore,
-      debouncedSearch,
-      exportToCsv,
-      formatCurrency,
-      formatDate,
-      getStatusProps
-    };
+  ordersResource.submit({
+    page: currentPage.value,
+    page_size: pageSize,
+    search: filters.search,
+  });
+}
+
+// 方法：重置并获取第一页数据
+function resetAndFetch() {
+  currentPage.value = 1;
+  fetchOrders();
+}
+
+// 方法：加载更多数据
+function loadMore() {
+  if (loadingMore.value) return;
+  
+  currentPage.value += 1;
+  loadingMore.value = true;
+  fetchOrders();
+}
+
+// 搜索防抖
+let searchTimeout;
+function debouncedSearch() {
+  clearTimeout(searchTimeout);
+  searchTimeout = setTimeout(() => {
+    resetAndFetch();
+  }, 300);
+}
+
+// 导出为CSV
+function exportToCsv() {
+  exporting.value = true;
+  exportResource.submit({
+    page: 1,
+    page_size: 1000, // 设置较大的值获取更多数据用于导出
+    search: filters.search,
+  });
+}
+
+// 格式化金额
+function formatCurrency(amount) {
+  if (amount === undefined || amount === null) return '-';
+  return new Intl.NumberFormat('zh-CN', {
+    style: 'currency',
+    currency: 'CNY',
+  }).format(amount);
+}
+
+// 格式化日期
+function formatDate(dateString) {
+  if (!dateString) return '-';
+  
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) return '-';
+  
+  // 格式化为 YYYY-MM-DD HH:MM 格式
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+// 获取状态样式
+function getStatusProps(status) {
+  const statusMap = {
+    '待支付': { label: $t('Pending Payment'), color: 'orange' },
+    '已支付': { label: $t('Paid'), color: 'green' },
+    '交易成功': { label: $t('Transaction Successful'), color: 'green' },
+    '已取消': { label: $t('Cancelled'), color: 'red' },
+    '已退款': { label: $t('Refunded'), color: 'red' },
+  };
+  
+  return statusMap[status] || { label: status || '', color: 'blue' };
+}
+
+function handleResize() {
+  windowWidth.value = window.innerWidth;
+}
+
+// 生命周期钩子
+onMounted(() => {
+  handleResize();
+  window.addEventListener('resize', handleResize);
+  fetchOrders();
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style scoped>
+.billing-orders-container {
+  padding: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.orders-card {
+  border-radius: 12px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+.orders-header {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.search-input {
+  width: 100%;
+  max-width: 300px;
+}
+
+.orders-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 16px;
+  margin-top: 16px;
+  border-top: 1px solid var(--n-border-color);
+}
+
+.orders-info {
+  font-size: 14px;
+  color: var(--n-text-color-2);
+}
+
+.empty-state {
+  padding: 60px 20px;
+}
+
+.orders-table {
+  margin-top: 16px;
+}
+
+@media (min-width: 769px) {
+  .orders-header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
   }
-};
-</script> 
\ No newline at end of file
+
+  .orders-footer {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .search-input {
+    max-width: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+  .billing-orders-container {
+    padding: 16px;
+  }
+
+  .orders-header {
+    gap: 12px;
+  }
+
+  .search-input {
+    max-width: 100%;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/dashboard/src/pages/BillingOverview.vue b/dashboard/src/pages/BillingOverview.vue
index 8d0f431..5a9338f 100644
--- a/dashboard/src/pages/BillingOverview.vue
+++ b/dashboard/src/pages/BillingOverview.vue
@@ -1,19 +1,19 @@
 <template>
-	<div
-		v-if="team.pg"
-		class="flex flex-1 flex-col gap-8 overflow-y-auto px-60 pt-6"
-	>
-		<PaymentDetails />
-	</div>
-	<div v-else class="mt-12 flex flex-1 items-center justify-center">
-		<Spinner class="h-8" />
+	<div class="billing-overview-container">
+		<div v-if="team.pg" class="billing-overview-content">
+			<PaymentDetails />
+		</div>
+		<div v-else class="loading-container">
+			<n-spin size="large" />
+		</div>
 	</div>
 </template>
 
 <script setup>
+import { computed, provide, inject, onMounted, onUnmounted, ref } from 'vue';
+import { NSpin } from 'naive-ui';
 import PaymentDetails from '../components/billing/PaymentDetails.vue';
-import { Spinner, createResource } from 'jingrow-ui';
-import { computed, provide, inject } from 'vue';
+import { createResource } from 'jingrow-ui';
 
 const team = inject('team');
 
@@ -37,4 +37,31 @@ provide('billing', {
 	),
 	unpaidInvoices
 });
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.billing-overview-container {
+	width: 100%;
+	min-height: 100%;
+}
+
+.billing-overview-content {
+	padding: 24px;
+	max-width: 1200px;
+	margin: 0 auto;
+}
+
+.loading-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 400px;
+	padding: 24px;
+}
+
+@media (max-width: 768px) {
+	.billing-overview-content {
+		padding: 16px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/pages/BillingPaymentMethods.vue b/dashboard/src/pages/BillingPaymentMethods.vue
index 065230b..3ba3a68 100644
--- a/dashboard/src/pages/BillingPaymentMethods.vue
+++ b/dashboard/src/pages/BillingPaymentMethods.vue
@@ -1,209 +1,221 @@
 <template>
-	<div class="p-5">
-		<ObjectList :options="options" />
+	<div class="billing-payment-methods-container">
+		<n-card class="payment-methods-card">
+			<ObjectList :options="options" />
+		</n-card>
 	</div>
 </template>
-<script>
-import { defineAsyncComponent, h } from 'vue';
+<script setup>
+import { defineAsyncComponent, h, computed, getCurrentInstance } from 'vue';
+import { NCard } from 'naive-ui';
 import ObjectList from '../components/ObjectList.vue';
 import { Badge, FeatherIcon, Tooltip } from 'jingrow-ui';
 import { toast } from 'vue-sonner';
 import { confirmDialog, renderDialog, icon } from '../utils/components';
 
-export default {
-	name: 'BillingPaymentMethods',
-	props: ['tab'],
-	components: {
-		ObjectList
-	},
-	computed: {
-		options() {
-			return {
-				pagetype: 'Stripe Payment Method',
-				fields: [
-					'name',
-					'is_default',
-					'expiry_month',
-					'expiry_year',
-					'brand',
-					'stripe_mandate_id'
-				],
-				emptyStateMessage: this.$t('No cards added'),
-				columns: [
-					{
-						label: this.$t('Card Name'),
-						fieldname: 'name_on_card'
-					},
-					{
-						label: this.$t('Card'),
-						fieldname: 'last_4',
-						width: 1.5,
-						format(value) {
-							return `•••• ${value}`;
-						},
-						prefix: row => {
-							return this.cardBrandIcon(row.brand);
-						},
-						suffix(row) {
-							if (row.is_default) {
-								return h(
-									Badge,
-									{
-										theme: 'green'
-									},
-									() => this.$t('Default')
-								);
-							}
-						}
-					},
-					{
-						label: this.$t('Expiry Date'),
-						width: 0.5,
-						format(value, row) {
-							return `${row.expiry_month}/${row.expiry_year}`;
-						}
-					},
-					{
-						label: this.$t('Authorization'),
-						type: 'Component',
-						width: 1,
-						align: 'center',
-						component({ row }) {
-							if (row.stripe_mandate_id) {
-								return h(FeatherIcon, {
-									name: 'check-circle',
-									class: 'h-4 w-4 text-green-600'
-								});
-							}
-						}
-					},
-					{
-						label: '',
-						type: 'Component',
-						align: 'right',
-						component({ row }) {
-							if (row.is_default && row.stripe_payment_method) {
-								return h(
-									Tooltip,
-									{
-										text: this.$t('This card failed to pay last time. Please use another card.')
-									},
-									() =>
-										h(FeatherIcon, {
-											name: 'alert-circle',
-											class: 'h-4 w-4 text-red-600'
-										})
-								);
-							}
-						}
-					},
-					{
-						label: '',
-						fieldname: 'creation',
-						type: 'Timestamp',
-						align: 'right'
+const instance = getCurrentInstance();
+const $t = instance?.appContext.config.globalProperties.$t || ((key) => key);
+const $team = instance?.appContext.config.globalProperties.$team;
+
+const props = defineProps(['tab']);
+
+const options = computed(() => {
+	return {
+		pagetype: 'Stripe Payment Method',
+		fields: [
+			'name',
+			'is_default',
+			'expiry_month',
+			'expiry_year',
+			'brand',
+			'stripe_mandate_id'
+		],
+		emptyStateMessage: $t('No cards added'),
+		columns: [
+			{
+				label: $t('Card Name'),
+				fieldname: 'name_on_card'
+			},
+			{
+				label: $t('Card'),
+				fieldname: 'last_4',
+				width: 1.5,
+				format(value) {
+					return `•••• ${value}`;
+				},
+				prefix: row => {
+					return cardBrandIcon(row.brand);
+				},
+				suffix(row) {
+					if (row.is_default) {
+						return h(
+							Badge,
+							{
+								theme: 'green'
+							},
+							() => $t('Default')
+						);
 					}
-				],
-				rowActions: ({ listResource, row }) => {
-					return [
-						{
-							label: this.$t('Set as Default'),
-							onClick: () => {
+				}
+			},
+			{
+				label: $t('Expiry Date'),
+				width: 0.5,
+				format(value, row) {
+					return `${row.expiry_month}/${row.expiry_year}`;
+				}
+			},
+			{
+				label: $t('Authorization'),
+				type: 'Component',
+				width: 1,
+				align: 'center',
+				component({ row }) {
+					if (row.stripe_mandate_id) {
+						return h(FeatherIcon, {
+							name: 'check-circle',
+							class: 'h-4 w-4 text-green-600'
+						});
+					}
+				}
+			},
+			{
+				label: '',
+				type: 'Component',
+				align: 'right',
+				component({ row }) {
+					if (row.is_default && row.stripe_payment_method) {
+						return h(
+							Tooltip,
+							{
+								text: $t('This card failed to pay last time. Please use another card.')
+							},
+							() =>
+								h(FeatherIcon, {
+									name: 'alert-circle',
+									class: 'h-4 w-4 text-red-600'
+								})
+						);
+					}
+				}
+			},
+			{
+				label: '',
+				fieldname: 'creation',
+				type: 'Timestamp',
+				align: 'right'
+			}
+		],
+		rowActions: ({ listResource, row }) => {
+			return [
+				{
+					label: $t('Set as Default'),
+					onClick: () => {
+						toast.promise(
+							listResource.runDocMethod.submit({
+								method: 'set_default',
+								name: row.name
+							}),
+							{
+								loading: $t('Setting as default...'),
+								success: $t('Default card set'),
+								error: $t('Failed to set default card')
+							}
+						);
+					},
+					condition: () => !row.is_default
+				},
+				{
+					label: $t('Remove'),
+					onClick: () => {
+						if (row.is_default && $team.pg.payment_mode === 'Card') {
+							toast.error($t('Cannot remove default card'));
+							return;
+						}
+						confirmDialog({
+							title: $t('Remove Card'),
+							message: $t('Are you sure you want to remove this card?'),
+							onSuccess: ({ hide }) => {
 								toast.promise(
-									listResource.runDocMethod.submit({
-										method: 'set_default',
-										name: row.name
+									listResource.delete.submit(row.name, {
+										onSuccess() {
+											hide();
+										}
 									}),
 									{
-										loading: this.$t('Setting as default...'),
-										success: this.$t('Default card set'),
-										error: this.$t('Failed to set default card')
+										loading: $t('Removing card...'),
+										success: $t('Card removed'),
+										error: error =>
+											error.messages?.length
+												? error.messages.join('\n')
+												: error.message || $t('Failed to remove card')
 									}
 								);
-							},
-							condition: () => !row.is_default
-						},
-						{
-							label: this.$t('Remove'),
-							onClick: () => {
-								if (row.is_default && this.$team.pg.payment_mode === 'Card') {
-									toast.error(this.$t('Cannot remove default card'));
-									return;
-								}
-								confirmDialog({
-									title: this.$t('Remove Card'),
-									message: this.$t('Are you sure you want to remove this card?'),
-									onSuccess: ({ hide }) => {
-										toast.promise(
-											listResource.delete.submit(row.name, {
-												onSuccess() {
-													hide();
-												}
-											}),
-											{
-												loading: this.$t('Removing card...'),
-												success: this.$t('Card removed'),
-												error: error =>
-													error.messages?.length
-														? error.messages.join('\n')
-														: error.message || this.$t('Failed to remove card')
-											}
-										);
-									}
-								});
 							}
-						}
-					];
+						});
+					}
+				}
+			];
+		},
+		orderBy: 'creation desc',
+		primaryAction() {
+			return {
+				label: $t('Add Card'),
+				slots: {
+					prefix: icon('plus')
 				},
-				orderBy: 'creation desc',
-				primaryAction() {
-					return {
-						label: this.$t('Add Card'),
-						slots: {
-							prefix: icon('plus')
-						},
-						onClick: () => {
-							let StripeCardDialog = defineAsyncComponent(() =>
-								import('../components/StripeCardDialog.vue')
-							);
-							renderDialog(StripeCardDialog);
-						}
-					};
+				onClick: () => {
+					let StripeCardDialog = defineAsyncComponent(() =>
+						import('../components/StripeCardDialog.vue')
+					);
+					renderDialog(StripeCardDialog);
 				}
 			};
 		}
-	},
-	methods: {
-formatCurrency(value) {
-			if (value === 0) {
-				return '';
-			}
-			return this.$format.userCurrency(value);
-		},
-		cardBrandIcon(brand) {
-			let component = {
-				'master-card': defineAsyncComponent(() =>
-					import('@/components/icons/cards/MasterCard.vue')
-				),
-				visa: defineAsyncComponent(() =>
-					import('@/components/icons/cards/Visa.vue')
-				),
-				amex: defineAsyncComponent(() =>
-					import('@/components/icons/cards/Amex.vue')
-				),
-				jcb: defineAsyncComponent(() =>
-					import('@/components/icons/cards/JCB.vue')
-				),
-				generic: defineAsyncComponent(() =>
-					import('@/components/icons/cards/Generic.vue')
-				),
-				'union-pay': defineAsyncComponent(() =>
-					import('@/components/icons/cards/UnionPay.vue')
-				)
-			}[brand || 'generic'];
+	};
+});
 
-			return h(component, { class: 'h-4 w-6' });
-		}
+function cardBrandIcon(brand) {
+	let component = {
+		'master-card': defineAsyncComponent(() =>
+			import('@/components/icons/cards/MasterCard.vue')
+		),
+		visa: defineAsyncComponent(() =>
+			import('@/components/icons/cards/Visa.vue')
+		),
+		amex: defineAsyncComponent(() =>
+			import('@/components/icons/cards/Amex.vue')
+		),
+		jcb: defineAsyncComponent(() =>
+			import('@/components/icons/cards/JCB.vue')
+		),
+		generic: defineAsyncComponent(() =>
+			import('@/components/icons/cards/Generic.vue')
+		),
+		'union-pay': defineAsyncComponent(() =>
+			import('@/components/icons/cards/UnionPay.vue')
+		)
+	}[brand || 'generic'];
+
+	return h(component, { class: 'h-4 w-6' });
+}
+</script>
+
+<style scoped>
+.billing-payment-methods-container {
+	padding: 24px;
+	max-width: 1400px;
+	margin: 0 auto;
+}
+
+.payment-methods-card {
+	border-radius: 12px;
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+@media (max-width: 768px) {
+	.billing-payment-methods-container {
+		padding: 16px;
 	}
-};
-</script>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/jcloud/translations/zh.csv b/jcloud/translations/zh.csv
index ee53508..dac52b5 100644
--- a/jcloud/translations/zh.csv
+++ b/jcloud/translations/zh.csv
@@ -106,6 +106,7 @@ Domains,域名,
 Download,下载,
 Draft,草案,
 Due Date,到期日,
+Export,导出,
 Export as CSV,导出为CSV,
 Duration,持续时间,
 JERP Partner,JERP合作伙伴,