update

src/packages/digital/App.vue

@@ -1,12 +1,25 @@
 <template>
-  <ConfigProvider theme="dark" :cell-group-props="{ inset: false }">
+  <ConfigProvider :theme="theme" :cell-group-props="{ inset: false }">
     <app-view />
   </ConfigProvider>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { ConfigProvider } from 'vant'
+import { AppTheme } from '@/constants/theme'
+import { localData } from '@/stores/storage'
 import AppView from '@mobile/App.vue'
+
+const appTheme = localData.getRef('appTheme')
+
+const theme = computed(() => {
+  if (appTheme.value === AppTheme.Default) {
+    const isLight = window.matchMedia('(prefers-color-scheme: light)').matches
+    return isLight ? AppTheme.Light : AppTheme.Dark
+  }
+  return appTheme.value
+})
 </script>
 
 <style lang="less">

src/packages/digital/assets/themes/dark/index.less

@@ -0,0 +1,36 @@
+.van-theme-dark {
+    --app-background: #0d121b;
+    --page-background: var(--app-background);
+    --block-background: #131b28;
+    --block-background-2: var(--block-background);
+
+    /* 颜色规范 */
+    --color-default: #e8e8e8;
+    --color-primary: #f7941d;
+    --color-secondary: #f9bc4a;
+    --color-info: #777;
+    --color-up: #10aa79;
+    --color-down: #ec653d;
+
+    /* 导航栏 */
+    --navbar-color: #e8e8e8;
+    --navbar-background: transparent;
+    --navbar-backbutton-color: #fff;
+
+    /* Vant */
+    --van-border-color: #161b24;
+
+    /* Vant-Button */
+    --van-button-default-color: #0d121b;
+    --van-button-primary-color: #0d121b;
+    --van-button-success-color: #0d121b;
+    --van-button-danger-color: #0d121b;
+
+    /* Vant-CellGroup */
+    --van-cell-active-color: #1d2533;
+    --van-cell-border-color: rgba(255, 255, 255, 0.05);
+
+    .van-dialog {
+        --van-border-color: rgba(255, 255, 255, 0.05);
+    }
+}

src/packages/digital/assets/themes/default/default.less

@@ -1,9 +1,4 @@
 :root {
-    --app-bg-color: #0d121b;
-    --page-bg-color: var(--app-bg-color);
-    --block-bg-color: #131b28;
-    --font-default-color: #e8e8e8;
-
     /* 字体大小规范 */
     --font-x-large: 18px;
     --font-large: 16px;
@@ -11,45 +6,22 @@
     --font-small: 12px;
     --font-x-small: 10px;
 
-    /* 颜色规范 */
-    --color-default: #e8e8e8;
-    --color-primary: #f7941d;
-    --color-secondary: #04c786;
-    --color-info: #777;
-    --color-up: #10aa79;
-    --color-down: #de603b;
-
     /* 导航栏 */
     --navbar-height: 44px;
-    --navbar-color: #e8e8e8;
-    --navbar-background: transparent;
-    --navbar-backbutton-color: #fff;
-
-    /* 标签栏 */
-    --tabbar-background: #fff;
-    --tabbar-icon: #999;
-    --tabbar-icon-active: #c30d23;
-
+    
     /* 内容边距 */
     --content-inset: 12px;
 
-    /* Vant */
-    --van-border-color: #161b24;
-
     /* Vant-Button */
-    --van-button-default-color: #0d121b;
     --van-button-default-background: var(--color-info);
     --van-button-default-border-color: var(--van-button-primary-background);
 
-    --van-button-primary-color: #0d121b;
     --van-button-primary-background: linear-gradient(to top, #f7941d 0%, #f7941d 24%, #f8bb49 76%, #f8bb49 100%);
     --van-button-primary-border-color: var(--van-button-primary-background);
 
-    --van-button-success-color: #0d121b;
     --van-button-success-background: linear-gradient(to top, #089266 0%, #2BD59E 76%, #23CD96 100%);
     --van-button-success-border-color: var(--van-button-success-background);
 
-    --van-button-danger-color: #0d121b;
     --van-button-danger-background: linear-gradient(to top, #CD451D 0%, #EE8161 76%, #EB7451 100%);
     --van-button-danger-border-color: var(--van-button-danger-background);
 
@@ -60,15 +32,13 @@
     --van-radio-checked-icon-color: var(--color-primary);
 
     /* Vant-Dialog */
-    --van-dialog-background: var(--block-bg-color);
+    --van-dialog-background: var(--block-background);
     --van-dialog-confirm-button-text-color: var(--color-primary);
 
     /* Vant-CellGroup */
-    --van-cell-group-background: var(--block-bg-color);
-    --van-cell-background: var(--block-bg-color);
-    --van-cell-border-color: rgba(255, 255, 255, 0.05);
+    --van-cell-group-background: var(--block-background);
+    --van-cell-background: var(--block-background);
     --van-cell-text-color: var(--color-default);
-    --van-cell-active-color: #1d2533;
 
     /* Vant-Tabs */
     --van-tab-active-text-color: var(--color-primary);
@@ -85,9 +55,8 @@
 
 .van-dialog {
     --van-button-default-color: var(--color-info);
-    --van-button-default-background: var(--block-bg-color);
+    --van-button-default-background: var(--block-background);
     --van-border-width: 1px;
-    --van-border-color: rgba(255, 255, 255, 0.05);
 }
 
 .van-action-sheet {

src/packages/digital/assets/themes/global/global.less

@@ -40,7 +40,7 @@
 
 .g-price {
     &-normal {
-        color: #fff;
+        color: var(--color-default);
     }
 
     &-up {
@@ -102,7 +102,7 @@
 .g-detail-table {
     table {
         width: 100%;
-        background-color: var(--block-bg-color);
+        background-color: var(--block-background);
         border-radius: 6px;
         padding: 12px;
 
@@ -165,7 +165,7 @@
     table {
         width: 100%;
         line-height: 1.7;
-        background-color: var(--block-bg-color);
+        background-color: var(--block-background);
         border-radius: 6px;
         padding: 12px;
 

src/packages/digital/assets/themes/light/index.less

@@ -0,0 +1,32 @@
+.van-theme-light {
+    --app-background: #f5f5f5;
+    --page-background: #fff;
+    --block-background: #fff;
+    --block-background-2: var(--app-background);
+
+    /* 颜色规范 */
+    --color-default: #1e1e1e;
+    --color-primary: #f7941d;
+    --color-secondary: var(--color-default);
+    --color-info: #777;
+    --color-up: #10aa79;
+    --color-down: #ec653d;
+
+    /* 导航栏 */
+    --navbar-color: #000;
+    --navbar-background: transparent;
+    --navbar-backbutton-color: var(--navbar-color);
+
+    /* Vant */
+    --van-border-color: var(--app-background);
+
+    /* Vant-Button */
+    --van-button-default-color: #fff;
+    --van-button-primary-color: #fff;
+    --van-button-success-color: #fff;
+    --van-button-danger-color: #fff;
+
+    .van-dialog {
+        --van-border-color: #f7f7f7;
+    }
+}

src/packages/digital/assets/themes/style.less

@@ -1,3 +1,5 @@
 @import '@mobile/assets/themes/base/reset.less';
 @import './global/global.less';
-@import './default/default.less';
+@import './default/default.less';
+@import './light/index.less';
+@import './dark/index.less';

src/packages/digital/components/field-currency/index.vue

@@ -1,18 +1,18 @@
 <template>
     <Field v-bind="$attrs" placeholder="请选择" arrow-direction="down" is-link readonly @click="showSheet = true">
         <template #input v-if="currencyItem">
-            <app-image-icon :url="getCurrencyIconUrl(currencyItem.label)" size="small" />
+            <app-image-icon :url="getCurrencyIconUrl(currencyItem.enumitemvalue)" size="small" />
             <span>{{ currencyItem.label }}</span>
         </template>
     </Field>
     <ActionSheet v-model:show="showSheet" title="请选择" teleport="body">
         <CellGroup style="min-height: 200px;">
-            <RadioGroup v-model="currencyId" v-if="digitalCurrencyList.length">
-                <template v-for="(item, index) in digitalCurrencyList" :key="index">
+            <RadioGroup v-model="currencyId" v-if="currencyList.length">
+                <template v-for="(item, index) in currencyList" :key="index">
                     <Cell size="large" :title="item.label" :border="false" clickable center
                         @click="onRadioClick(item.value)">
                         <template #icon>
-                            <app-image-icon :url="getCurrencyIconUrl(item.label)" size="small"
+                            <app-image-icon :url="getCurrencyIconUrl(item.enumitemvalue)" size="small"
                                 style="margin-right: 8px;" />
                         </template>
                         <template #right-icon>
@@ -31,6 +31,7 @@ import { shallowRef, computed, onMounted, nextTick } from 'vue'
 import { Field, ActionSheet, CellGroup, RadioGroup, Cell, Radio, Empty } from 'vant'
 import { getCurrencyIconUrl } from '@/filters'
 import { getDigitalCurrencyList } from '@/constants/order'
+import { useSpotAccountStore } from '../../views/wallet/components/spot/composables'
 import AppImageIcon from '@mobile/components/base/image-icon/index.vue'
 
 const props = defineProps({
@@ -42,9 +43,21 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue', 'change'])
 
 const showSheet = shallowRef(false)
+const spotAccountStore = useSpotAccountStore()
 const digitalCurrencyList = getDigitalCurrencyList()
 
-const currencyItem = computed(() => digitalCurrencyList.find((e) => e.enumitemname === currencyId.value))
+// 过滤未激活账户
+const currencyList = computed(() => {
+    const ids = new Set()
+    for (const item of spotAccountStore.dataList) {
+        if (item.digitalaccountid) {
+            ids.add(item.currencyid)
+        }
+    }
+    return digitalCurrencyList.filter((e) => ids.has(e.enumitemname))
+})
+
+const currencyItem = computed(() => currencyList.value.find((e) => e.enumitemname === currencyId.value))
 
 const currencyId = computed({
     get: () => props.modelValue,

src/packages/digital/components/grid/index.less

@@ -11,8 +11,8 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        color: #f9bc4a;
-        background-color: var(--block-bg-color);
+        color: var(--color-secondary);
+        background-color: var(--block-background);
         border-radius: 6px;
         padding: 10px 0;
 

src/packages/digital/components/search/index.less

@@ -1,10 +1,17 @@
 .app-search {
     --van-search-background: transparent;
-    --van-search-content-background: var(--block-bg-color);
     --van-radius-sm: 6px;
     --van-search-input-height: 40px;
     --van-search-padding: 10px var(--van-padding-md);
 
+    &.bg-default {
+        --van-search-content-background: var(--block-background);
+    }
+
+    &.bg-primary {
+        --van-search-content-background: var(--block-background-2);
+    }
+
     .van-search {
         &__content {
             border: 1px solid rgba(248, 187, 73, 0.2);

src/packages/digital/components/search/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <Search class="app-search" :placeholder="t('digital.search')">
+    <Search class="app-search" :class="[`bg-${background}`]" :placeholder="t('digital.search')">
         <template #left-icon>
             <img :src="'./img/icons/search.svg'" :title="t('digital.search')" />
         </template>
@@ -10,9 +10,18 @@
 </template>
 
 <script lang="ts" setup>
+import { PropType } from 'vue'
 import { Search } from 'vant'
 import { i18n } from '@/stores'
 
+defineProps({
+    // 背景颜色
+    background: {
+        type: String as PropType<'default' | 'primary'>,
+        default: 'default'
+    },
+})
+
 const t = i18n.global.t
 </script>
 

src/packages/digital/components/switch-tab/index.less

@@ -4,6 +4,7 @@
     .app-switch {
         &-tabs {
             height: 44px;
+            color: var(--color-default);
             background-color: transparent;
             border-radius: 6px;
             padding: 5px;
@@ -12,7 +13,9 @@
                 font-size: 16px;
 
                 &.active {
+                    color: var(--van-button-primary-color);
                     background: var(--van-button-primary-background);
+                    border-width: 0;
                 }
             }
         }

src/packages/digital/components/switch-tab/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-block class="app-switch-tab-v2" background>
+    <app-block class="app-switch-tab-v2" background="primary">
         <app-switch-tab width="100%" v-bind="$attrs" />
     </app-block>
 </template>

src/packages/digital/router/index.ts

@@ -202,6 +202,11 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('../views/setting/index.vue'),
       },
       {
+        path: 'theme',
+        name: 'setting-theme',
+        component: () => import('../views/setting/theme/index.vue')
+      },
+      {
         path: 'luanguage',
         name: 'setting-luanguage',
         component: () => import('../views/setting/luanguage/index.vue'),

src/packages/digital/views/account/certification/index.vue

@@ -39,7 +39,7 @@
             </CellGroup>
         </Form>
         <div class="g-form__footer inset">
-            <Button type="primary" @click="formRef?.submit" round block>
+            <Button type="primary" @click="formRef?.submit" block>
                 {{ t('user.authentication.submit') }}
             </Button>
         </div>

src/packages/digital/views/contract/components/account/index.vue

@@ -3,34 +3,38 @@
         <table cellspacing="0" cellpadding="0" v-for="(item, index) in accountList" :key="index">
             <thead>
                 <tr>
-                    <th colspan="3">
-                        <span>{{ $t('digital.account')+`(${ item.accountid })` }}</span>
+                    <th colspan="2">
+                        <span>{{ $t('digital.account') + `(${item.accountid})` }}</span>
                     </th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td colspan="2">
-                        <span class="text-small">{{ $t('digital.currencydecimalplace')+`(${currency(item.currencyid)})` }}</span>
-                        <span>{{ formatDecimal(item.currentbalance) }}</span>
+                    <td>
+                        <span class="text-small">
+                            {{ $t('digital.currencydecimalplace') + `(${currency(item.currencyid)})` }}
+                        </span>
+                        <span>{{ item.currentbalance.toFixed(item.currencydecimalplace) }}</span>
                     </td>
                     <td>
                         <span class="text-small">{{ $t('account.profitLoss') }}</span>
-                        <span>{{ formatDecimal(item.closepl) }}</span>
+                        <span :class="handlePriceColor(item.profitLoss)">
+                            {{ formatNumber(item.profitLoss, item.currencydecimalplace) }}
+                        </span>
                     </td>
                 </tr>
                 <tr>
                     <td>
-                        <span class="text-small">{{ $t('mine.availableFunds')+`(${currency(item.currencyid)})` }}</span>
-                        <span>{{ formatDecimal(item.avaiableBalance) }}</span>
-                    </td>
-                    <td>
-                        <span class="text-small">{{ $t('account.usedMargin')+`(${currency(item.currencyid)})` }}</span>
-                        <span>{{ formatDecimal(item.usedmargin) }}</span>
+                        <span class="text-small">
+                            {{ $t('mine.availableFunds') + `(${currency(item.currencyid)})` }}
+                        </span>
+                        <span>{{ item.avaiableBalance.toFixed(item.currencydecimalplace) }}</span>
                     </td>
                     <td>
-                        <span class="text-small">{{ $t('account.freeze')+`(${currency(item.currencyid)})` }}</span>
-                        <span>{{ formatDecimal(item.freezeMargin) }}</span>
+                        <span class="text-small">
+                            {{ $t('account.usedMargin') + `(${currency(item.currencyid)})` }}
+                        </span>
+                        <span>{{ item.usedmargin.toFixed(item.currencydecimalplace) }}</span>
                     </td>
                 </tr>
             </tbody>
@@ -48,7 +52,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { Button } from 'vant'
-import { formatDecimal } from '@/filters'
+import { handlePriceColor, formatNumber } from '@/filters'
 import { useNavigation } from '@mobile/router/navigation'
 import { useAccountStore, useFuturesStore } from '@/stores'
 import { getGoodsCurrencyItemName } from '@/constants/order'

src/packages/digital/views/contract/detail/index.vue

@@ -17,7 +17,7 @@
                     </div>
                     <div class="g-account-total__info" v-if="isAmountVisible">
                         <span :class="handlePriceColor(accountItem.profitLoss)">
-                            {{ accountItem.profitLoss.toFixed(accountItem.currencydecimalplace) }}
+                            {{ formatNumber(accountItem.profitLoss, accountItem.currencydecimalplace) }}
                         </span>
                         <span :class="accountItem.hazardRatioColor">
                             {{ parsePercent(accountItem.hazardRatio) }}
@@ -81,7 +81,7 @@
 <script lang="ts" setup>
 import { shallowRef, computed, watch, onActivated } from 'vue'
 import { Cell, CellGroup, Tab, Tabs, ActionSheet } from 'vant'
-import { handlePriceColor, parsePercent } from '@/filters'
+import { handlePriceColor, parsePercent, formatNumber } from '@/filters'
 import { useNavigation } from '@mobile/router/navigation'
 import { i18n, useAccountStore, useFuturesStore } from '@/stores'
 import { GridItem } from '@/packages/digital/components/grid/types'

src/packages/digital/views/contract/goods/chart/index.less

@@ -23,7 +23,7 @@
     }
 
     .app-quote-chart {
-        background-color: var(--page-bg-color);
+        background-color: var(--page-background);
         margin-top: 0;
 
         &__header {

src/packages/digital/views/contract/goods/chart/index.vue

@@ -1,6 +1,6 @@
 <!-- 合约 - 交易下单 - 图表 -->
 <template>
-    <app-view class="contract-goods-chart">
+    <app-view class="contract-goods-chart" background="primary">
         <template #header>
             <app-navbar :title="quote ? `${quote.goodscode}/${goodsname}` : `${t('operation.chart')}`" />
         </template>
@@ -54,7 +54,7 @@
                     </tbody>
                 </table>
             </app-block>
-            <goods-chart v-bind="{ theme: 'Dark', goodsCode: quote.goodscode }" />
+            <goods-chart v-bind="{ goodsCode: quote.goodscode }" />
         </template>
         <template #footer>
             <app-submitbar>

src/packages/digital/views/contract/goods/detail/index.vue

@@ -20,7 +20,7 @@
                 </template>
             </app-navbar>
         </template>
-        <app-block class="trade-panel" background>
+        <app-block class="trade-panel" background="primary">
             <div class="trade-panel-item">
                 <h3 :class="quote?.askColor">{{ handleNumberValue(quote?.ask) }}</h3>
                 <Button :type="formData.BuyOrSell === BuyOrSell.Buy ? 'success' : 'default'"

src/packages/digital/views/contract/goods/list/index.less

@@ -14,7 +14,7 @@
                 right: 0;
                 left: 0;
                 pointer-events: none;
-                border-bottom: 1px solid #292929;
+                border-bottom: 1px solid var(--van-border-color);
                 transform: scaleY(.5);
             }
 
@@ -28,7 +28,7 @@
             th {
                 font-size: 12px;
                 font-weight: normal;
-                color: #999;
+                color: var(--color-info);
             }
         }
 
@@ -53,7 +53,7 @@
 
             .text-small {
                 font-size: 12px;
-                color: #999;
+                color: var(--color-info);
             }
         }
     }

src/packages/digital/views/contract/goods/list/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-view class="contract">
+    <app-view class="contract" background="primary">
         <Tabs class="g-tabs" type="card" v-model:active="currentGroupId" shrink v-if="goodsGroups.length">
             <template v-for="(item, index) in goodsGroups" :key="index">
                 <Tab :title="goodsGroupeName(item)" :name="item.goodsgroupid">

src/packages/digital/views/home/index.less

@@ -8,7 +8,7 @@
         padding-bottom: 0;
 
         &__title {
-            color: #f9bc4a;
+            color: var(--color-secondary);
         }
 
         &__iconbar {
@@ -20,12 +20,13 @@
 
     .van-tabbar {
         --van-tabbar-height: 62px;
-        --van-tabbar-background: var(--block-bg-color);
+        --van-tabbar-background: var(--block-background);
         --van-tabbar-item-active-background: var(--van-tabbar-background);
         --van-tabbar-item-text-color: var(--color-info);
         --van-tabbar-item-active-color: var(--color-primary);
         --van-tabbar-item-icon-margin-bottom: 8px;
 
+        box-shadow: 0 -2px 4px 0 var(--app-background);
         border-radius: 16px 16px 0 0;
         overflow: hidden;
     }

src/packages/digital/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <app-view class="home" flex>
+  <app-view class="home" :background="background" flex>
     <template #header>
       <app-statusbar>
         <div class="home-header">
@@ -11,7 +11,7 @@
             <app-image-icon url="./img/icons/language.svg" @click="routerTo('setting-luanguage')" />
           </div>
         </div>
-        <app-search />
+        <app-search :background="background" />
       </app-statusbar>
     </template>
     <router-view v-slot="{ Component }">
@@ -58,6 +58,8 @@ const loginStore = useLoginStore()
 const cssTransition = shallowRef(true) // 是否使用css动画
 const currentTab = shallowRef(0)
 
+const background = computed(() => [0, 3].includes(currentTab.value) ? 'default' : 'primary')
+
 // 导航标签列表
 const tabbarItems = computed(() => ([
   {
@@ -75,8 +77,8 @@ const tabbarItems = computed(() => ([
   {
     name: 'home-listing',
     label: t('tabbar.spot'),
-    icon: './img/icons/contract.svg',
-    action: './img/icons/contract-active.svg',
+    icon: './img/icons/spot.svg',
+    action: './img/icons/spot-active.svg',
   },
   // {
   //   name: 'home-spot',

src/packages/digital/views/home/main/index.less

@@ -17,7 +17,7 @@
         }
 
         section {
-            background-color: var(--block-bg-color);
+            background-color: var(--block-background);
             border-radius: 6px;
             padding-left: 16px;
 
@@ -27,7 +27,7 @@
                 padding-left: 0;
 
                 &:not(:first-child) {
-                    border-top: 1px solid rgba(255, 255, 255, 0.04);
+                    border-top: 1px solid rgba(136, 136, 136, 0.08);
                 }
 
                 &:nth-child(1) {

src/packages/digital/views/listing/goods/chart/index.less

@@ -23,7 +23,7 @@
     }
 
     .app-quote-chart {
-        background-color: var(--page-bg-color);
+        background-color: var(--page-background);
         margin-top: 0;
 
         &__header {

src/packages/digital/views/listing/goods/chart/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-view class="spot-goods-chart g-layout">
+    <app-view class="spot-goods-chart g-layout" background="primary">
         <template #header>
             <app-navbar :title="quote ? quote.goodscode : '图表'" />
         </template>
@@ -53,7 +53,7 @@
                     </tbody>
                 </table>
             </app-block>
-            <goods-chart v-bind="{ theme: 'Dark', goodsCode: quote.goodscode }" />
+            <goods-chart v-bind="{ goodsCode: quote.goodscode }" />
         </template>
         <template #footer>
             <app-submitbar>

src/packages/digital/views/listing/goods/detail/index.less

@@ -1,16 +1,4 @@
 .listing-goods-detail {
-    .trade-panel {
-        display: flex;
-
-        &__right {
-            flex: 2;
-        }
-
-        .listing-quote-spread {
-            flex: 1;
-        }
-    }
-
     .trade-info {
         ul {
             li {

src/packages/digital/views/listing/goods/detail/index.vue

@@ -2,47 +2,58 @@
     <app-view class="listing-goods-detail g-layout g-form">
         <template #header>
             <app-navbar :title="quote ? quote.goodscode : t('tabbar.trade')">
-                <template #right>
-                    <img :src="'./img/icons/chart.svg'" @click="navigateToGoodsChart" />
-                </template>
-            </app-navbar>
-        </template>
-        <div class="trade-panel">
-            <spread v-bind="{ quote }" />
-            <div class="trade-panel__right">
-                <app-submitbar>
-                    <Button :type="formData.BuyOrSell === BuyOrSell.Buy ? 'success' : 'default'" size="small" block
-                        @click="formData.BuyOrSell = BuyOrSell.Buy">{{ $t('quote.buy') }}</Button>
-                    <Button :type="formData.BuyOrSell === BuyOrSell.Sell ? 'danger' : 'default'" size="small" block
-                        @click="formData.BuyOrSell = BuyOrSell.Sell">{{ $t('quote.sell') }}</Button>
-                </app-submitbar>
-                <Form ref="formRef" class="g-form__container" @submit="onSubmit">
+                <template #footer v-if="quote">
                     <CellGroup inset>
-                        <Field name="OrderPrice" :rules="formRules.OrderPrice" :label="t('quote.goods.orderprice')" label-align="top">
-                            <template #input>
-                                <app-stepper v-model="formData.OrderPrice" :min="0"
-                                    :decimal-length="quote?.decimalplace" :step="quote?.decimalvalue" />
+                        <Cell>
+                            <template #title>
+                                <h3 :class="quote.lastColor">
+                                    <span>{{ handleNumberValue(quote.last.toFixed(quote.decimalplace)) }}</span>
+                                </h3>
+                                <span :class="quote.lastColor">{{ parsePercent(quote.change, 2, true) }}</span>
                             </template>
-                        </Field>
-                    </CellGroup>
-                    <CellGroup inset>
-                        <Field :label="t('quote.goods.orderqty')" label-align="top" :rules="formRules.OrderQty">
-                            <template #input>
-                                <app-stepper v-model="formData.OrderQty" :min="0"
-                                    :decimal-length="baseAccount?.currencydecimalplace" />
+                            <template #right-icon>
+                                <img :src="'./img/icons/chart.svg'" @click="navigateToGoodsChart" />
                             </template>
-                        </Field>
+                        </Cell>
                     </CellGroup>
-                    <CellGroup inset>
-                        <Cell :title="formData.BuyOrSell === BuyOrSell.Buy ? t('digital.prepayment') : t('digital.preacquisition')"
-                            :label="formatDecimal(calculations.estimatedAmount, quoteAccount?.currencydecimalplace)" />
-                    </CellGroup>
-                </Form>
-            </div>
-        </div>
+                </template>
+            </app-navbar>
+        </template>
+        <spread v-bind="{ quote }" v-if="quote" />
+        <app-submitbar>
+            <Button :type="formData.BuyOrSell === BuyOrSell.Buy ? 'success' : 'default'" size="small" block
+                @click="formData.BuyOrSell = BuyOrSell.Buy">{{ $t('quote.buy') }}</Button>
+            <Button :type="formData.BuyOrSell === BuyOrSell.Sell ? 'danger' : 'default'" size="small" block
+                @click="formData.BuyOrSell = BuyOrSell.Sell">{{ $t('quote.sell') }}</Button>
+        </app-submitbar>
+        <Form ref="formRef" class="g-form__container" @submit="onSubmit">
+            <CellGroup inset>
+                <Field name="OrderPrice" :rules="formRules.OrderPrice" :label="t('quote.goods.orderprice')"
+                    label-align="top">
+                    <template #input>
+                        <app-stepper v-model="formData.OrderPrice" :min="0" :decimal-length="quote?.decimalplace"
+                            :step="quote?.decimalvalue" />
+                    </template>
+                </Field>
+            </CellGroup>
+            <CellGroup inset>
+                <Field :label="t('quote.goods.orderqty')" label-align="top" :rules="formRules.OrderQty">
+                    <template #input>
+                        <app-stepper v-model="formData.OrderQty" :min="0"
+                            :decimal-length="baseAccount?.currencydecimalplace" />
+                    </template>
+                </Field>
+            </CellGroup>
+        </Form>
         <app-block class="trade-info" v-if="formData.BuyOrSell === BuyOrSell.Buy">
             <ul>
                 <li>
+                    <span class="text-small">{{ t('digital.prepayment') }}</span>
+                    <span>
+                        {{ formatDecimal(calculations.estimatedAmount, quoteAccount?.currencydecimalplace) }}
+                    </span>
+                </li>
+                <li>
                     <span class="text-small">{{ $t('digital.buyEstimatedFee') }}</span>
                     <span>
                         {{ formatDecimal(calculations.buyEstimatedFee, quoteAccount?.currencydecimalplace) }}
@@ -65,6 +76,12 @@
         <app-block class="trade-info" v-if="formData.BuyOrSell === BuyOrSell.Sell">
             <ul>
                 <li>
+                    <span class="text-small">{{ t('digital.preacquisition') }}</span>
+                    <span>
+                        {{ formatDecimal(calculations.estimatedAmount, quoteAccount?.currencydecimalplace) }}
+                    </span>
+                </li>
+                <li>
                     <span class="text-small">{{ $t('digital.sellEstimatedFee') }}</span>
                     <span>
                         {{ formatDecimal(calculations.sellEstimatedFee, quoteAccount?.currencydecimalplace) }}
@@ -107,7 +124,7 @@
 import { shallowRef, reactive, computed, onMounted, onUnmounted, onActivated } from 'vue'
 import { Form, Button, CellGroup, Field, Cell, Tab, Tabs, FormInstance, showDialog, FieldRule } from 'vant'
 import { fullloading } from '@/utils/vant'
-import { formatDecimal } from '@/filters'
+import { formatDecimal, handleNumberValue, parsePercent } from '@/filters'
 import { EBuildType, EDelistingType, EListingSelectType, EOrderOperateType, EValidType } from '@/constants/client'
 import { BuyOrSell, PriceMode } from '@/constants/order'
 import { useNavigation } from '@mobile/router/navigation'

src/packages/digital/views/listing/goods/detail/spread/index.less

@@ -1,10 +1,10 @@
 .listing-quote-spread {
     display: flex;
-    flex-direction: column;
+    gap: 16px;
     color: var(--color-info);
-    padding: var(--van-padding-md) 0 0 var(--van-padding-md);
 
     dl {
+        flex: 1;
         font-size: 12px;
 
         dt {

src/packages/digital/views/listing/goods/detail/spread/index.vue

@@ -1,67 +1,68 @@
 <template>
-    <div class="listing-quote-spread">
-        <dl v-if="quote">
+    <app-block class="listing-quote-spread">
+        <dl>
             <dt>
                 <span>{{ $t('tabbar.pricing') }}</span>
                 <span>{{ $t('tss.qty') }}</span>
             </dt>
             <dd>
-                <span :class="quote.askColor">{{ handleNumberValue(quote.ask.toFixed(quote.decimalplace)) }}</span>
-                <span>{{ handleNumberValue(quote.askvolume.toFixed(quote.decimalplace)) }}</span>
+                <span class="g-price-up">{{ handleNumberValue(quote.ask5.toFixed(quote.decimalplace)) }}</span>
+                <span>{{ handleNumberValue(quote.askvolume5.toFixed(quote.decimalplace)) }}</span>
             </dd>
             <dd>
-                <span :class="quote.ask2Color">{{ handleNumberValue(quote.ask2.toFixed(quote.decimalplace)) }}</span>
-                <span>{{ handleNumberValue(quote.askvolume2.toFixed(quote.decimalplace)) }}</span>
+                <span class="g-price-up">{{ handleNumberValue(quote.ask4.toFixed(quote.decimalplace)) }}</span>
+                <span>{{ handleNumberValue(quote.askvolume4.toFixed(quote.decimalplace)) }}</span>
             </dd>
             <dd>
-                <span :class="quote.ask3Color">{{ handleNumberValue(quote.ask3.toFixed(quote.decimalplace)) }}</span>
+                <span class="g-price-up">{{ handleNumberValue(quote.ask3.toFixed(quote.decimalplace)) }}</span>
                 <span>{{ handleNumberValue(quote.askvolume3.toFixed(quote.decimalplace)) }}</span>
             </dd>
             <dd>
-                <span :class="quote.ask4Color">{{ handleNumberValue(quote.ask4.toFixed(quote.decimalplace)) }}</span>
-                <span>{{ handleNumberValue(quote.askvolume4.toFixed(quote.decimalplace)) }}</span>
+                <span class="g-price-up">{{ handleNumberValue(quote.ask2.toFixed(quote.decimalplace)) }}</span>
+                <span>{{ handleNumberValue(quote.askvolume2.toFixed(quote.decimalplace)) }}</span>
             </dd>
             <dd>
-                <span :class="quote.ask5Color">{{ handleNumberValue(quote.ask5.toFixed(quote.decimalplace)) }}</span>
-                <span>{{ handleNumberValue(quote.askvolume5.toFixed(quote.decimalplace)) }}</span>
+                <span class="g-price-up">{{ handleNumberValue(quote.ask.toFixed(quote.decimalplace)) }}</span>
+                <span>{{ handleNumberValue(quote.askvolume.toFixed(quote.decimalplace)) }}</span>
             </dd>
         </dl>
-        <div class="listing-quote-spread__price" :class="quote.lastColor" v-if="quote">
-            <h3>{{ handleNumberValue(quote.last.toFixed(quote.decimalplace)) }}</h3>
-            <span>{{ parsePercent(quote.change, 2, true) }}</span>
-        </div>
-        <dl v-if="quote">
+        <dl>
+            <dt>
+                <span>{{ $t('tabbar.pricing') }}</span>
+                <span>{{ $t('tss.qty') }}</span>
+            </dt>
             <dd>
-                <span :class="quote.bidColor">{{ handleNumberValue(quote.bid.toFixed(quote.decimalplace)) }}</span>
+                <span class="g-price-down">{{ handleNumberValue(quote.bid.toFixed(quote.decimalplace)) }}</span>
                 <span>{{ handleNumberValue(quote.bidvolume.toFixed(quote.decimalplace)) }}</span>
             </dd>
             <dd>
-                <span :class="quote.bid2Color">{{ handleNumberValue(quote.bid2.toFixed(quote.decimalplace)) }}</span>
+                <span class="g-price-down">{{ handleNumberValue(quote.bid2.toFixed(quote.decimalplace)) }}</span>
                 <span>{{ handleNumberValue(quote.bidvolume2.toFixed(quote.decimalplace)) }}</span>
             </dd>
             <dd>
-                <span :class="quote.bid3Color">{{ handleNumberValue(quote.bid3.toFixed(quote.decimalplace)) }}</span>
+                <span class="g-price-down">{{ handleNumberValue(quote.bid3.toFixed(quote.decimalplace)) }}</span>
                 <span>{{ handleNumberValue(quote.bidvolume3.toFixed(quote.decimalplace)) }}</span>
             </dd>
             <dd>
-                <span :class="quote.bid4Color">{{ handleNumberValue(quote.bid4.toFixed(quote.decimalplace)) }}</span>
+                <span class="g-price-down">{{ handleNumberValue(quote.bid4.toFixed(quote.decimalplace)) }}</span>
                 <span>{{ handleNumberValue(quote.bidvolume4.toFixed(quote.decimalplace)) }}</span>
             </dd>
             <dd>
-                <span :class="quote.bid5Color">{{ handleNumberValue(quote.bid5.toFixed(quote.decimalplace)) }}</span>
+                <span class="g-price-down">{{ handleNumberValue(quote.bid5.toFixed(quote.decimalplace)) }}</span>
                 <span>{{ handleNumberValue(quote.bidvolume5.toFixed(quote.decimalplace)) }}</span>
             </dd>
         </dl>
-    </div>
+    </app-block>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue'
-import { parsePercent, handleNumberValue } from '@/filters'
+import { handleNumberValue } from '@/filters'
 
 defineProps({
     quote: {
-        type: Object as PropType<Model.GoodsQuote>
+        type: Object as PropType<Model.GoodsQuote>,
+        required: true
     }
 })
 </script>

src/packages/digital/views/listing/goods/list/index.less

@@ -14,7 +14,7 @@
                 right: 0;
                 left: 0;
                 pointer-events: none;
-                border-bottom: 1px solid #292929;
+                border-bottom: 1px solid var(--van-border-color);
                 transform: scaleY(.5);
             }
 
@@ -28,7 +28,7 @@
             th {
                 font-size: 12px;
                 font-weight: normal;
-                color: #999;
+                color: var(--color-info);
             }
         }
 
@@ -53,7 +53,7 @@
 
             .text-small {
                 font-size: 12px;
-                color: #999;
+                color: var(--color-info);
             }
         }
     }

src/packages/digital/views/listing/goods/list/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-view class="spot">
+    <app-view class="spot" background="primary">
         <Tabs class="g-tabs" type="card" v-model:active="currentGroupId" shrink v-if="goodsGroups.length">
             <template v-for="(item, index) in goodsGroups" :key="index">
                 <Tab :title="goodsGroupeName(item)" :name="item.goodsgroupid">

src/packages/digital/views/setting/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-view class="setting">
+    <app-view class="setting" background="primary">
         <template #header>
             <app-navbar :title="t('mine.settings')" />
         </template>
@@ -27,6 +27,11 @@
             </Cell>
         </CellGroup>
         <CellGroup :title="t('mine.system')">
+            <Cell is-link :to="{ name: 'setting-theme' }" :value="themeValue">
+                <template #title>
+                    <app-iconfont icon="g-icon-dark">深色模式</app-iconfont>
+                </template>
+            </Cell>
             <Cell is-link :to="{ name: 'setting-luanguage' }" v-if="globalStore.getSystemInfo('i18nEnabled')">
                 <template #title>
                     <app-iconfont icon="g-icon-lang">{{ $t('mine.setting.language') }}</app-iconfont>
@@ -48,6 +53,7 @@
 import { computed } from 'vue'
 import { Cell, CellGroup } from 'vant'
 import { dialog } from '@/utils/vant'
+import { AppTheme } from '@/constants/theme'
 import { AuthStatus } from '@/constants/account'
 import { useRequest } from '@/hooks/request'
 import { getI18nConfigs } from '@/services/api/common'
@@ -67,6 +73,17 @@ const language = computed(() => {
     return locale?.langname ?? i18n.global.locale
 })
 
+const themeValue = computed(() => {
+    switch (globalStore.appTheme) {
+        case AppTheme.Light:
+            return '已关闭'
+        case AppTheme.Dark:
+            return '已启用'
+        default:
+            return '跟随系统'
+    }
+})
+
 const userLogout = () => {
     dialog({
         message: t('banksign.tips5'),

src/packages/digital/views/setting/luanguage/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-view class="setting-luanguage">
+    <app-view class="setting-luanguage" background="primary">
         <template #header>
             <app-navbar title="语言设置" />
         </template>

src/packages/digital/views/setting/theme/index.less

@@ -0,0 +1,4 @@
+.setting-theme{
+    --van-cell-group-background: transparent;
+    --van-cell-background: transparent;
+}

src/packages/digital/views/setting/theme/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <app-view class="setting-theme" background="primary">
+        <template #header>
+            <app-navbar title="主题设置" />
+        </template>
+        <CellGroup>
+            <Cell title="跟随系统" clickable @click="onClick(AppTheme.Default)">
+                <template #right-icon v-if="globalStore.appTheme === AppTheme.Default">
+                    <img :src="'./img/icons/success.svg'" />
+                </template>
+            </Cell>
+            <Cell title="浅色模式" clickable @click="onClick(AppTheme.Light)">
+                <template #right-icon v-if="globalStore.appTheme === AppTheme.Light">
+                    <img :src="'./img/icons/success.svg'" />
+                </template>
+            </Cell>
+            <Cell title="深色模式" clickable @click="onClick(AppTheme.Dark)">
+                <template #right-icon v-if="globalStore.appTheme === AppTheme.Dark">
+                    <img :src="'./img/icons/success.svg'" />
+                </template>
+            </Cell>
+        </CellGroup>
+    </app-view>
+</template>
+
+<script lang="ts" setup>
+import { Cell, CellGroup } from 'vant'
+import { useNavigation } from '@mobile/router/navigation'
+import { AppTheme } from '@/constants/theme'
+import { useGlobalStore } from '@/stores'
+
+const { routerBack } = useNavigation()
+const globalStore = useGlobalStore()
+
+const onClick = (value: AppTheme) => {
+    globalStore.setTheme(value)
+    routerBack()
+}
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/digital/views/spot/components/account/index.less

@@ -1,37 +0,0 @@
-.spot-account {
-    .card {
-        display: flex;
-        justify-content: space-between;
-        border-bottom: 1px solid #171f2d;
-        padding: 10px 20px;
-
-        &-section {
-            display: flex;
-            align-items: center;
-
-            &__info,
-            &__balance {
-                display: flex;
-                flex-direction: column;
-                line-height: 1.5;
-            }
-
-            &__balance {
-                text-align: right;
-            }
-
-            &__image {
-                margin-right: 10px;
-            }
-
-            &__icon {
-                margin-left: 10px;
-            }
-
-            .text-small {
-                font-size: 12px;
-                color: #666;
-            }
-        }
-    }
-}

src/packages/digital/views/spot/components/account/index.vue

@@ -88,8 +88,4 @@ const navigateTo = (name: string, id: string | number) => {
         query: { id }
     })
 }
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>
+</script>

src/packages/digital/views/spot/goods/chart/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-view class="spot-goods-chart">
+    <app-view class="spot-goods-chart" background="primary">
         <template #header>
             <app-navbar :title="quote ? quote.goodscode : '图表'" />
         </template>
@@ -47,7 +47,7 @@
                     </tbody>
                 </table>
             </div>
-            <goods-chart v-bind="{ theme: 'Dark', goodsCode: quote.goodscode }" />
+            <goods-chart v-bind="{ goodsCode: quote.goodscode }" />
         </template>
         <template #footer>
             <app-submitbar>

src/packages/digital/views/spot/goods/list/index.less

@@ -14,7 +14,7 @@
                 right: 0;
                 left: 0;
                 pointer-events: none;
-                border-bottom: 1px solid #292929;
+                border-bottom: 1px solid var(--van-border-color);
                 transform: scaleY(.5);
             }
 
@@ -28,7 +28,7 @@
             th {
                 font-size: 12px;
                 font-weight: normal;
-                color: #999;
+                color: var(--color-info);
             }
         }
 
@@ -53,7 +53,7 @@
 
             .text-small {
                 font-size: 12px;
-                color: #999;
+                color: var(--color-info);
             }
         }
     }

src/packages/digital/views/spot/goods/list/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-view class="spot">
+    <app-view class="spot" background="primary">
         <Tabs v-model:active="currentGroupId" v-if="goodsGroups.length">
             <template v-for="(item, index) in goodsGroups" :key="index">
                 <Tab :title="goodsGroupeName(item)" :name="item.goodsgroupid">

src/packages/digital/views/user/login/index.less

@@ -1,5 +1,5 @@
 .login {
-    background-color: var(--app-bg-color);
+    background-color: var(--app-background);
 
     .app-navbar {
         &__wrapper {

src/packages/digital/views/wallet/components/contract/index.vue

@@ -5,8 +5,8 @@
             <table cellspacing="0" cellpadding="0" @click="onClick(item.accountid)">
                 <thead>
                     <tr>
-                        <th colspan="2">
-                            <span>{{ $t('digital.account')+`(${item.accountid})` }}</span>
+                        <th>
+                            <span>{{ $t('digital.account') + `(${item.accountid})` }}</span>
                         </th>
                         <th>
                             <Icon name="arrow" />
@@ -15,30 +15,29 @@
                 </thead>
                 <tbody>
                     <tr>
-                        <td colspan="2">
-                            <span class="text-small">{{ $t('digital.currencydecimalplace')+`(${currencycode(item.currencyid)})` }}</span>
+                        <td>
+                            <span class="text-small">{{
+                                $t('digital.currencydecimalplace') + `(${currencycode(item.currencyid)})` }}</span>
                             <span>{{ item.currentbalance.toFixed(item.currencydecimalplace) }}</span>
                         </td>
                         <td>
                             <span class="text-small">{{ $t('account.profitLoss') }}</span>
                             <span :class="handlePriceColor(item.profitLoss)">
-                                {{ item.profitLoss.toFixed(item.currencydecimalplace) }}
+                                {{ formatNumber(item.profitLoss, item.currencydecimalplace) }}
                             </span>
                         </td>
                     </tr>
                     <tr>
                         <td>
-                            <span class="text-small">{{ $t('account.availableFunds')+`(${currencycode(item.currencyid)})` }}</span>
+                            <span class="text-small">{{
+                                $t('account.availableFunds') + `(${currencycode(item.currencyid)})` }}</span>
                             <span>{{ item.avaiableBalance.toFixed(item.currencydecimalplace) }}</span>
                         </td>
                         <td>
-                            <span class="text-small">{{ $t('account.usedMargin')+`(${currencycode(item.currencyid)})` }}</span>
+                            <span class="text-small">{{ $t('account.usedMargin') + `(${currencycode(item.currencyid)})`
+                            }}</span>
                             <span>{{ item.usedmargin.toFixed(item.currencydecimalplace) }}</span>
                         </td>
-                        <td>
-                            <span class="text-small">{{ $t('account.freeze')+`(${currencycode(item.currencyid)})` }}</span>
-                            <span>{{ item.freezemargin.toFixed(item.currencydecimalplace) }}</span>
-                        </td>
                     </tr>
                 </tbody>
             </table>
@@ -48,10 +47,9 @@
 
 <script lang="ts" setup>
 import { Icon } from 'vant'
-import { handlePriceColor } from '@/filters'
+import { handlePriceColor, formatNumber } from '@/filters'
 import { useAccountStore } from '@/stores'
-import { getCurrencyName, getGoodsCurrencyItemName } from '@/constants/order'
-import { computed } from 'vue'
+import { getGoodsCurrencyItemName } from '@/constants/order'
 
 const emit = defineEmits(['click'])
 

src/packages/digital/views/wallet/components/spot/index.less

@@ -2,7 +2,7 @@
     .card {
         display: flex;
         justify-content: space-between;
-        background-color: var(--block-bg-color);
+        background-color: var(--block-background);
         border-radius: 6px;
         padding: 12px;
         margin-bottom: 12px;

src/packages/digital/views/wallet/transfer/index.less

@@ -5,17 +5,17 @@
         padding: 20px;
 
         span {
-            border: 2px solid #2d2d2d;
-            padding: 30px 20px;
-            border-radius: 8px;
             flex: 1;
             text-align: center;
-            background-color: #1a1a1a;
+            border: 2px solid rgba(248, 187, 73, 0.2);
+            border-radius: 8px;
+            background-color: var(--block-background);
+            padding: 30px 20px;
 
             &.active {
-                border-color: #7b5417;
-                background-color: #1e1606;
-                color: #db9933;
+                border-color: rgba(248, 187, 73, 0.3);
+                background-color: rgba(255, 163, 0, 0.2);
+                color: #db901d;
             }
         }
     }

src/packages/mobile/assets/themes/base/reset.less

@@ -26,14 +26,14 @@ body {
     position: relative;
     height: inherit;
     font-size: 14px;
-    color: var(--font-default-color, #333);
+    color: var(--color-default, #333);
     margin: auto !important;
     overflow: hidden;
     -webkit-overflow-scrolling: touch;
 
     a {
         text-decoration: none;
-        color: var(--font-default-color, #333);
+        color: var(--color-default, #333);
 
         &:hover {
             color: inherit;
@@ -95,7 +95,7 @@ body {
     position: relative;
     width: 100%;
     height: 100%;
-    background-color: var(--app-bg-color, #fff);
+    background-color: var(--app-background);
     overflow-x: hidden;
     padding-bottom: constant(safe-area-inset-bottom);
     /* 兼容 iOS<11.2 */

src/packages/mobile/assets/themes/default/default.less

@@ -1,4 +1,8 @@
 :root {
+    --app-background: #f6f6f6;
+    --page-background: #fff;
+    --block-background: #fff;
+
     /* 字体大小规范 */
     --font-x-large: 18px;
     --font-large: 16px;

src/packages/mobile/components/base/datepicker/index.less

@@ -1,6 +1,6 @@
 .app-datepicker {
     &__select {
-        background-color: var(--block-bg-color);
+        background-color: var(--block-background);
         border-radius: 6px;
         padding: 4px 8px;
     }

src/packages/mobile/components/base/switch-tab/index.less

@@ -4,7 +4,8 @@
     &-tabs {
         display: inline-flex;
         height: 36px;
-        background-color: var(--van-button-default-background);
+        color: #fff;
+        background-color: var(--color-info);
         border-radius: 18px;
         overflow: hidden;
 
@@ -16,8 +17,9 @@
 
             &.active {
                 font-weight: bold;
-                color: #222;
+                color: #000;
                 background-color: #fff;
+                border: 1px solid var(--color-info);
                 border-radius: inherit;
             }
         }

src/packages/mobile/components/layouts/block/index.less

@@ -13,5 +13,13 @@
 
     &__inner {
         overflow: hidden;
+
+        &.bg-default {
+            background-color: transparent;
+        }
+
+        &.bg-primary {
+            background-color: var(--block-background);
+        }
     }
 }

src/packages/mobile/components/layouts/block/index.vue

@@ -1,13 +1,13 @@
 <template>
     <div :class="className">
-        <div class="app-block__inner" :class="$attrs.class" :style="styles">
+        <div class="app-block__inner" :class="[$attrs.class, `bg-${props.background}`]">
             <slot></slot>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import { PropType } from 'vue'
 
 defineOptions({
     inheritAttrs: false
@@ -19,16 +19,12 @@ const props = defineProps({
         default: true
     },
     background: {
-        type: Boolean,
-        default: false
+        type: String as PropType<'default' | 'primary'>,
+        default: 'default'
     }
 })
 
 const className = ['app-block', { 'app-block--inset': props.inset }]
-
-const styles: CSSProperties = {
-    backgroundColor: props.background ? 'var(--block-bg-color)' : 'transparent'
-}
 </script>
 
 <style lang="less">

src/packages/mobile/components/layouts/page/index.less

@@ -2,5 +2,4 @@
     width: 100%;
     height: 100%;
     overflow-y: auto;
-    background-color: var(--page-bg-color, #f6f6f6);
 }

src/packages/mobile/components/layouts/view/index.less

@@ -2,9 +2,16 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    background-color: var(--page-bg-color, #f6f6f6);
     -webkit-overflow-scrolling: touch;
 
+    &.bg-default {
+        background-color: var(--app-background);
+    }
+
+    &.bg-primary {
+        background-color: var(--page-background);
+    }
+
     &__loading {
         display: flex;
         justify-content: center;

src/packages/mobile/components/layouts/view/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="viewRef" class="app-view">
+    <div ref="viewRef" class="app-view" :class="[`bg-${background}`]">
         <slot name="header"></slot>
         <app-scroll-view :class="{ 'app-view__body': true, 'flex': flex }">
             <Loading class="app-view__loading" v-if="loading" />
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, onMounted } from 'vue'
+import { shallowRef, onMounted, PropType } from 'vue'
 import { Loading } from 'vant'
 
 defineProps({
@@ -19,10 +19,16 @@ defineProps({
         type: Boolean,
         default: false
     },
+    // 是否启用弹性布局
     flex: {
         type: Boolean,
         default: false
     },
+    // 背景颜色
+    background: {
+        type: String as PropType<'default' | 'primary'>,
+        default: 'default'
+    },
 })
 
 const emit = defineEmits(['ready'])

src/packages/mobile/components/modules/article/index.less

@@ -16,7 +16,7 @@
     }
 
     &__section {
-        background-color: var(--block-bg-color);
+        background-color: var(--block-background);
         border-radius: 6px;
     }
 
@@ -36,7 +36,7 @@
         &__item {
             position: relative;
             display: flex;
-            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 60%, transparent 60%);
+            background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.3) 60%, transparent 60%);
             background-size: 1px 6px; // 1px 宽（虚线粗细），6px 高（间隔周期）
             background-repeat: repeat-y;
             background-position: left center;

src/packages/mobile/components/modules/article/index.vue

@@ -33,7 +33,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
 import { Image, Icon } from 'vant'
 import { formatDate } from '@/filters'
 import { useRequest } from '@/hooks/request'

src/packages/mobile/views/account/authresult/Index.vue

@@ -26,7 +26,7 @@
                     <Image fit="contain" :src="getFileUrl(userInfo.halfbodyphotourl)" width="100" height="100" />
                 </Cell>
                 <Cell :title="t('user.authentication.authstatus')"
-                    :value="userStore.userAccount.modifystatus !== 1 ? getModifyStatusName(userStore.userAccount.modifystatus) : getAuthStatusName(userStore.userAccount.hasauth)" />
+                    :value="![0, 1].includes(userStore.userAccount.modifystatus) ? getModifyStatusName(userStore.userAccount.modifystatus) : getAuthStatusName(userStore.userAccount.hasauth)" />
                 <Cell :title="t('user.authentication.modifyremark')" :value="userStore.userAccount.modifyremark"
                     v-if="userStore.userAccount.hasauth === AuthStatus.Rejected && userStore.userAccount.modifyremark" />
             </CellGroup>

src/packages/mobile/views/home/main/Index.vue

@@ -12,7 +12,7 @@
           </template>
         </Cell>
       </app-block>
-      <app-block class="home-main__iconbar" v-if="iconbar.length">
+      <app-block class="home-main__iconbar" background="primary" v-if="iconbar.length">
         <template v-for="(list, i) in iconbar" :key="i">
           <ul>
             <template v-for="(item, n) in list" :key="n">

src/packages/mobile/views/news/detail/index.less

@@ -38,7 +38,7 @@
         >div {
             &.content {
                 color: var(--color-default);
-                background-color: var(--block-bg-color, #f9f9f9);
+                background-color: var(--block-background, #f9f9f9);
                 border-radius: 6px;
                 padding: 12px;
 

src/packages/mobile/views/user/cancel/Index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-view class="g-form logoff" :loading="false">
+    <app-view class="logoff" :loading="false" background="primary">
         <template #header>
             <app-navbar :title="$t('user.cancel.title')" />
         </template>
@@ -13,9 +13,9 @@
                 <dt>{{ $t('user.cancel.tips_6') }}</dt>
             </dl>
         </section>
-        <div class="g-form__footer inset">
-            <Button type="primary" @click="onSubmit" round block>{{ $t('user.cancel.confirmcancellation') }}</Button>
-        </div>
+        <app-submitbar>
+            <Button type="primary" @click="onSubmit" block>{{ $t('user.cancel.confirmcancellation') }}</Button>
+        </app-submitbar>
     </app-view>
 </template>
 
@@ -25,6 +25,7 @@ import { fullloading, dialog } from '@/utils/vant'
 import { useAccountCancellation } from '@/business/user'
 import { i18n } from '@/stores'
 import eventBus from '@/services/bus'
+import AppSubmitbar from '@mobile/components/base/submitbar/index.vue'
 
 const { formSubmit } = useAccountCancellation()
 

src/packages/mobile/views/user/password/Index.vue

@@ -14,9 +14,9 @@
                     :rules="formRules.confirmpassword" />
             </CellGroup>
         </Form>
-        <div class="g-form__footer inset">
-            <Button type="primary" @click="formRef?.submit()" round block>{{ $t('operation.submit') }}</Button>
-        </div>
+        <app-submitbar>
+            <Button type="primary" @click="formRef?.submit()" block>{{ $t('operation.submit') }}</Button>
+        </app-submitbar>
     </app-view>
 </template>
 
@@ -29,8 +29,9 @@ import { useNavigation } from '@mobile/router/navigation'
 import { validateRules } from '@/constants/regex'
 import { useAccountPassword } from '@/business/user'
 import { useLogin } from '@/business/login'
-import eventBus from '@/services/bus'
 import { useGlobalStore, i18n } from '@/stores'
+import eventBus from '@/services/bus'
+import AppSubmitbar from '@mobile/components/base/submitbar/index.vue'
 
 const { getGlobalUrlParams } = useNavigation()
 const { userLogout } = useLogin()

src/packages/mobile/views/user/register/Index.vue

@@ -30,10 +30,10 @@
         </Field>
       </CellGroup>
       <CellGroup :inset="insetStyle" v-if="selectedMethod === 2">
-        <Field name="email" :label="t('user.register.emailregister')" v-model="formData.mobilephone" :placeholder="t('common.required')"
-          :rules="formRules.email" />
-        <Field v-model="formData.vcode" type="digit" name="vcode" :label="t('user.register.vscode')" :placeholder="t('common.required')"
-          :rules="formRules.vcode">
+        <Field name="email" :label="t('user.register.emailregister')" v-model="formData.mobilephone"
+          :placeholder="t('common.required')" :rules="formRules.email" />
+        <Field v-model="formData.vcode" type="digit" name="vcode" :label="t('user.register.vscode')"
+          :placeholder="t('common.required')" :rules="formRules.vcode">
           <template #button>
             <Button size="small" :disabled="loading" @click="sendVerifyCode">
               <span v-if="isCountdown">{{ t('user.register.sendagain') }}({{ currentTime }})</span>
@@ -391,7 +391,7 @@ onMounted(() => {
   if (os === 'iOS') {
     formData.openmode = 6
   }
-  
+
   if (openMethodList.length) {
     selectedMethod.value = openMethodList[0].value
   }

src/stores/modules/global.ts

@@ -106,24 +106,18 @@ export const useGlobalStore = defineStore(() => {
 
     // 设置状态栏主题色
     const setStatusBarTheme = (theme: AppTheme) => {
-        switch (theme) {
-            case AppTheme.Default:
-            case AppTheme.Dark: {
-                plus.setStatusBarStyle('light')
-                break
-            }
-            default: {
-                plus.setStatusBarStyle('dark')
-            }
+        if (theme === AppTheme.Default) {
+            const isLight = window.matchMedia('(prefers-color-scheme: light)').matches
+            isLight ? plus.setStatusBarStyle(AppTheme.Light) : plus.setStatusBarStyle(AppTheme.Dark)
+        } else {
+            plus.setStatusBarStyle(theme)
         }
     }
 
     // 设置主题
-    const setTheme = (key: keyof typeof AppTheme) => {
-        const theme = AppTheme[key]
+    const setTheme = (theme: AppTheme) => {
+        localData.setValue('appTheme', theme)
         setStatusBarTheme(theme)
-        document.documentElement.setAttribute('theme', theme)
-        appTheme.value = theme
     }
 
     // 适配客户端屏幕