feat:多货币以及支付方式配置

src/locales/langs/en-us.ts

@@ -1007,7 +1007,14 @@ const local: any = {
       action:'Action',
       geterr:'Failed to get the billing rule',
       updatesuc:'Update successful',
-      updateerr:'Update failed'
+      updateerr:'Update failed',
+      currencySettings: 'Currency Settings',
+      currencySelect: 'Select Currency',
+      currentCurrency: 'Current Currency',
+      currencyName: 'Currency Name',
+      currencyCode: 'Currency Code',
+      currencySymbol: 'Currency symbol',
+      paymentMethods:'Pay Methods',
     },
     ratelimit:{
       title:'Rate limit management',

src/locales/langs/zh-cn.ts

@@ -1007,7 +1007,14 @@ const local:any = {
       action:'操作',
       geterr:'获取计费规则失败',
       updatesuc:'更新成功',
-      updateerr:'更新失败'
+      updateerr:'更新失败',
+      currencySettings: '货币设置',
+      currencySelect: '选择货币',
+      currentCurrency: '当前货币',
+      currencyName: '货币名称',
+      currencyCode: '货币代码',
+      currencySymbol: '货币符号',
+      paymentMethods:'支付方式',
     },
     ratelimit:{
       title:'限速管理',

src/service/api/auth.ts

@@ -490,6 +490,29 @@ export function updateUserProfile(data: { email: string; code: string }) {
     data
   });
 }
+/** 更新支付配置 */
+export function updatePaymentConfig(data: {
+  currency: string;
+  currencySymbol: string;
+  paymentMethods: string[];
+}) {
+  return request<any>({
+    url: '/system/config/pay',
+    method: 'put',
+    data
+  });
+}
+/** 获取支付配置 */
+export function getPaymentConfig() {
+  return request<{
+    currency: string;
+    currencySymbol: string;
+    paymentMethods: string[];
+  }>({
+    url: '/system/config/pay',
+    method: 'get'
+  });
+}
 
 
 

src/typings/auto-imports.d.ts

@@ -183,6 +183,7 @@ declare global {
   const getFixedTabs: typeof import('../store/modules/tab/shared')['getFixedTabs']
   const getGlobalMenusByAuthRoutes: typeof import('../store/modules/route/shared')['getGlobalMenusByAuthRoutes']
   const getLocalizedTimeUnit: typeof import('../utils/units')['getLocalizedTimeUnit']
+  const getPaymentConfig: typeof import('../service/api/auth')['getPaymentConfig']
   const getPortalConfig: typeof import('../service/api/auth')['getPortalConfig']
   const getRouteIcons: typeof import('../store/modules/tab/shared')['getRouteIcons']
   const getSelectedMenuKeyPathByKey: typeof import('../store/modules/route/shared')['getSelectedMenuKeyPathByKey']
@@ -313,6 +314,7 @@ declare global {
   const updateLocaleOfGlobalMenus: typeof import('../store/modules/route/shared')['updateLocaleOfGlobalMenus']
   const updatePackage: typeof import('../service/api/auth')['updatePackage']
   const updatePasswordByOld: typeof import('../service/api/auth')['updatePasswordByOld']
+  const updatePaymentConfig: typeof import('../service/api/auth')['updatePaymentConfig']
   const updatePortalConfig: typeof import('../service/api/auth')['updatePortalConfig']
   const updateSite: typeof import('../service/api/auth')['updateSite']
   const updateTabByI18nKey: typeof import('../store/modules/tab/shared')['updateTabByI18nKey']

src/views/billing/package/index.vue

@@ -76,8 +76,7 @@
             :min="0.01"
             :precision="2"
             style="width: 100%"
-            :formatter="value => `¥ ${value}`"
+            :addon-before="currencyStore.symbol"
-            :parser="value => (value || '').replace(/[¥\s,]/g, '')"
           />
         </AFormItem>
 
@@ -166,8 +165,8 @@ import { computed, shallowRef, ref, onMounted } from 'vue';
 import { useElementSize } from '@vueuse/core';
 import { fetchPackageList, addPackage, fetchRateLimitList, updatePackage, deletePackage } from '@/service/api/auth';
 import { Button as AButton, message, Modal, Form as AForm, Input as AInput, InputNumber as AInputNumber, Select as ASelect, Switch as ASwitch, Tag as ATag } from 'ant-design-vue';
-import { PlusOutlined } from '@ant-design/icons-vue';
 import type { Rule } from 'ant-design-vue/es/form';
+import { useCurrencyStore } from '@/views/billing/rule/modules/currency';
 import {
   formatBandwidth,
   formatStorage,
@@ -185,6 +184,7 @@ const timeUnits = useTimeUnits();
 const formatTime = useFormatTime();
 const wrapperEl = shallowRef<HTMLElement | null>(null);
 const { height: wrapperElHeight } = useElementSize(wrapperEl);
+const currencyStore = useCurrencyStore();
 
 const scrollConfig = computed(() => {
   return {
@@ -241,9 +241,9 @@ const { columns, columnChecks, data, loading, getData, mobilePagination } = useT
     {
       key: 'price',
       dataIndex: 'price',
-      title: t('page.package.price'),
+      title: t('page.package.price')+currencyStore.symbol,
       align: 'center',
-      customRender: ({ text }) => `${Number(text).toFixed(2)}`
+      customRender: ({ text }) => `${Number(text).toFixed(2)}  ${currencyStore.symbol}`
     },
     {
       key: 'traffic',

src/views/billing/rule/index.vue

@@ -1,11 +1,53 @@
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <!-- 货币设置卡片 -->
     <ACard
       :title="t('page.rule.title')"
       :bordered="false"
-      :body-style="{ flex: 1, overflow: 'hidden' }"
+      class="flex-col-stretch"
-      class="flex-col-stretch sm:flex-1-hidden"
     >
+      <div class="currency-selector">
+        <ASpace size="large">
+          <div class="selector-item">
+            <span class="selector-label">{{ t('page.rule.currencySelect') }}:</span>
+            <ASelect
+              v-model:value="selectedCurrency"
+              style="width: 120px"
+              @change="handleCurrencyChange"
+            >
+              <ASelect.Option
+                v-for="currency in availableCurrencies"
+                :key="currency.code"
+                :value="currency.code"
+              >
+                {{ currency.code }}
+              </ASelect.Option>
+            </ASelect>
+          </div>
+          <div class="selector-item">
+            <span class="selector-label">{{ t('page.rule.currencySymbol') }}:</span>
+            <span class="currency-symbol">{{ currencyStore.symbol }}</span>
+          </div>
+        </ASpace>
+      </div>
+
+      <!-- 支付方式配置 -->
+      <div class="payment-selector">
+        <ASpace size="large">
+          <div class="selector-item">
+            <span class="selector-label">{{ t('page.rule.paymentMethods') }}:</span>
+          </div>
+          <div class="selector-item">
+            <ACheckbox.Group
+              v-model:value="selectedPaymentMethods"
+              :options="paymentOptions"
+              @change="handlePaymentMethodsChange"
+            />
+          </div>
+        </ASpace>
+      </div>
+
+      <!-- 计费规则表格 -->
       <ATable
         :columns="columns"
         :data-source="data"
@@ -89,7 +131,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { fetchBillRuleList, updateBillRule } from '@/service/api/auth';
+import { fetchBillRuleList, updateBillRule, updatePaymentConfig, getPaymentConfig } from '@/service/api/auth';
 import {
   Card as ACard,
   Table as ATable,
@@ -101,12 +143,19 @@ import {
   FormItem as AFormItem,
   InputNumber as AInputNumber,
   message,
-  Select as ASelect
+  Select as ASelect,
+  Descriptions as ADescriptions,
+  DescriptionsItem as ADescriptionsItem,
+  Checkbox as ACheckbox
 } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
 import type { ColumnsType } from 'ant-design-vue/es/table';
 import { useI18n } from 'vue-i18n';
+import { useCurrencyStore, availableCurrencies } from '@/views/billing/rule/modules/currency';
+
 const { t } = useI18n();
+const currencyStore = useCurrencyStore();
+const selectedCurrency = ref(currencyStore.code);
 
 interface BillRule {
   id: number;
@@ -149,6 +198,46 @@ const getUnitText = (unit: number) => {
   return unitOptions.find(option => option.value === unit)?.label || '';
 };
 
+// 支付方式配置
+const paymentOptions = [
+  { label: 'Alipay', value: 'alipay' },
+  { label: 'WeChat Pay', value: 'wxpay' },
+  { label: 'PayPal', value: 'paypal' },
+  { label: 'Stripe', value: 'stripe' }
+];
+const selectedPaymentMethods = ref<string[]>([]);
+
+// 处理货币变更
+const handleCurrencyChange = async (value: string) => {
+  currencyStore.setCurrency(value);
+  // 同步更新支付配置
+  try {
+    await updatePaymentConfig({
+      currency: value,
+      currencySymbol: currencyStore.symbol,
+      paymentMethods: selectedPaymentMethods.value
+    });
+    message.success(t('page.rule.updatesuc'));
+  } catch (error) {
+    message.error(t('page.rule.updatefail'));
+  }
+};
+
+// 处理支付方式变更
+const handlePaymentMethodsChange = async (values: string[]) => {
+  selectedPaymentMethods.value = values;
+  try {
+    await updatePaymentConfig({
+      currency: selectedCurrency.value,
+      currencySymbol: currencyStore.symbol,
+      paymentMethods: values
+    });
+    message.success(t('page.rule.updatesuc'));
+  } catch (error) {
+    message.error(t('page.rule.updatefail'));
+  }
+};
+
 const columns: ColumnsType = [
   {
     title: t('page.rule.traffic'),
@@ -162,7 +251,8 @@ const columns: ColumnsType = [
     dataIndex: 'price',
     key: 'price',
     align: 'center',
-    width: 150
+    width: 150,
+    customRender: ({ text }) => `${currencyStore.symbol}${text}`
   },
   {
     title: t('page.rule.unit'),
@@ -212,6 +302,21 @@ const getData = async () => {
   }
 };
 
+// 获取支付配置
+const getPayConfig = async () => {
+  try {
+    const res = await getPaymentConfig();
+    if (res.data) {
+      // 更新货币和支付方式
+      selectedCurrency.value = res.data.currency;
+      currencyStore.setCurrency(res.data.currency);
+      selectedPaymentMethods.value = res.data.paymentMethods;
+    }
+  } catch (error) {
+    message.error(t('page.rule.getConfigFail'));
+  }
+};
+
 // 打开编辑抽屉
 const handleEdit = (record: BillRule) => {
   currentRule.value = { ...record };
@@ -245,11 +350,44 @@ const handleSubmit = async () => {
 
 onMounted(() => {
   getData();
+  getPayConfig(); // 获取支付配置
 });
 </script>
 
 <style scoped>
+.currency-selector {
+  margin-bottom: 16px;
+  padding: 8px 0;
+}
+
+.selector-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.selector-label {
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+}
+
+.currency-symbol {
+  font-size: 16px;
+  font-weight: 500;
+  min-width: 20px;
+  display: inline-block;
+}
+
+.payment-selector {
+  margin-bottom: 16px;
+  padding: 8px 0;
+}
+
 :deep(.ant-form-item) {
   margin-bottom: 24px;
 }
+
+:deep(.ant-descriptions-item) {
+  padding-bottom: 16px;
+}
 </style>

src/views/billing/rule/modules/currency.ts

@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+
+interface CurrencyOption {
+  code: string
+  symbol: string
+  name: string
+}
+
+interface CurrencyState {
+  currentCurrency: CurrencyOption
+}
+
+export const availableCurrencies: CurrencyOption[] = [
+  { code: 'USD', symbol: '$', name: '美元' },
+  { code: 'CNY', symbol: '¥', name: '人民币' },
+  { code: 'EUR', symbol: '€', name: '欧元' },
+  { code: 'GBP', symbol: '£', name: '英镑' },
+]
+
+export const useCurrencyStore = defineStore('currency', {
+  state: (): CurrencyState => ({
+    currentCurrency: availableCurrencies[0]
+  }),
+
+  actions: {
+    setCurrency(currencyCode: string) {
+      const currency = availableCurrencies.find(c => c.code === currencyCode)
+      if (currency) {
+        this.currentCurrency = currency
+      }
+    }
+  },
+
+  getters: {
+    symbol: (state: CurrencyState): string => state.currentCurrency.symbol,
+    code: (state: CurrencyState): string => state.currentCurrency.code,
+    name: (state: CurrencyState): string => state.currentCurrency.name
+  }
+})

src/views/user-center/bill/index.vue

@@ -6,8 +6,12 @@ import { useElementSize } from '@vueuse/core';
 import { fetchBillList } from '@/service/api/auth';
 import { Tag as ATag } from 'ant-design-vue';
 import BillSearch from '@/views/user-center/bill/modules/bill-search.vue';
+import { useCurrencyStore, } from '@/views/billing/rule/modules/currency';
 import { useI18n } from 'vue-i18n';
+import {ref} from "vue/dist/vue";
 const { t } = useI18n();
+const currencyStore = useCurrencyStore();
+
 const wrapperEl = shallowRef<HTMLElement | null>(null);
 const { height: wrapperElHeight } = useElementSize(wrapperEl);
 
@@ -92,7 +96,7 @@ const {
       title: t('page.bill.amount'),
       align: 'center',
       width: 120,
-      customRender: ({ text }) => `¥${Number(text).toFixed(2)}`
+      customRender: ({ text }) => `${currencyStore.symbol}${Number(text).toFixed(2)}`
     },
     {
       key: 'status',