feat: 更新 API 地址，优化样式和组件，添加新主题变量

src/App.vue

@@ -3,6 +3,8 @@
 
 <template>
   <IonApp>
-    <IonRouterOutlet />
+    <Suspense>
+      <IonRouterOutlet />
+    </Suspense>
   </IonApp>
 </template>

src/api/index.ts

@@ -1,6 +1,10 @@
 import type { App } from "@riwa/api-types";
 import { treaty } from "@elysiajs/eden";
 
-const api = treaty<App>(`${window.location.origin}/api`);
+const client = treaty<App>(`${window.location.origin}/api`, {
+  fetch: {
+    credentials: "include",
+  },
+});
 
-export { api };
+export { client };

src/theme/ionic.css

@@ -0,0 +1,3 @@
+.ui-toolbar {
+  --background: var(--ion-color-primary-contrast);
+}

src/theme/variables.css

@@ -64,9 +64,53 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-dark-contrast-rgb: 255, 255, 255;
   --ion-color-dark-shade: #292929;
   --ion-color-dark-tint: #444444;
-}
 
-:root {
+  --ion-background-color: #ffffff;
+  --ion-background-color-rgb: 255, 255, 255;
+
+  --ion-text-color: #000000;
+  --ion-text-color-rgb: 0, 0, 0;
+
+  --ion-text-color-step-50: #0d0d0d;
+  --ion-text-color-step-100: #1a1a1a;
+  --ion-text-color-step-150: #262626;
+  --ion-text-color-step-200: #333333;
+  --ion-text-color-step-250: #404040;
+  --ion-text-color-step-300: #4d4d4d;
+  --ion-text-color-step-350: #595959;
+  --ion-text-color-step-400: #666666;
+  --ion-text-color-step-450: #737373;
+  --ion-text-color-step-500: #808080;
+  --ion-text-color-step-550: #8c8c8c;
+  --ion-text-color-step-600: #999999;
+  --ion-text-color-step-650: #a6a6a6;
+  --ion-text-color-step-700: #b3b3b3;
+  --ion-text-color-step-750: #bfbfbf;
+  --ion-text-color-step-800: #cccccc;
+  --ion-text-color-step-850: #d9d9d9;
+  --ion-text-color-step-900: #e6e6e6;
+  --ion-text-color-step-950: #f2f2f2;
+
+  --ion-background-color-step-50: #f2f2f2;
+  --ion-background-color-step-100: #e6e6e6;
+  --ion-background-color-step-150: #d9d9d9;
+  --ion-background-color-step-200: #cccccc;
+  --ion-background-color-step-250: #bfbfbf;
+  --ion-background-color-step-300: #b3b3b3;
+  --ion-background-color-step-350: #a6a6a6;
+  --ion-background-color-step-400: #999999;
+  --ion-background-color-step-450: #8c8c8c;
+  --ion-background-color-step-500: #808080;
+  --ion-background-color-step-550: #737373;
+  --ion-background-color-step-600: #666666;
+  --ion-background-color-step-650: #595959;
+  --ion-background-color-step-700: #4d4d4d;
+  --ion-background-color-step-750: #404040;
+  --ion-background-color-step-800: #333333;
+  --ion-background-color-step-850: #262626;
+  --ion-background-color-step-900: #191919;
+  --ion-background-color-step-950: #0d0d0d;
+
   --ion-font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
     "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -77,11 +121,70 @@ http://ionicframework.com/docs/theming/ */
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --ion-color-primary: #ffffff;
+    --ion-color-primary-rgb: 255, 255, 255;
+    --ion-color-primary-contrast: #000000;
+    --ion-color-primary-contrast-rgb: 0, 0, 0;
+    --ion-color-primary-shade: #e0e0e0;
+    --ion-color-primary-tint: #ffffff;
+
+    --ion-color-secondary: #ededed;
+    --ion-color-secondary-rgb: 237, 237, 237;
+    --ion-color-secondary-contrast: #000000;
+    --ion-color-secondary-contrast-rgb: 0, 0, 0;
+    --ion-color-secondary-shade: #d1d1d1;
+    --ion-color-secondary-tint: #efefef;
+
+    --ion-color-tertiary: #d6d6d6;
+    --ion-color-tertiary-rgb: 214, 214, 214;
+    --ion-color-tertiary-contrast: #000000;
+    --ion-color-tertiary-contrast-rgb: 0, 0, 0;
+    --ion-color-tertiary-shade: #bcbcbc;
+    --ion-color-tertiary-tint: #dadada;
+
+    --ion-color-success: #2dd55b;
+    --ion-color-success-rgb: 45, 213, 91;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
+    --ion-color-success-shade: #28bb50;
+    --ion-color-success-tint: #42d96b;
+
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    --ion-color-danger: #c5000f;
+    --ion-color-danger-rgb: 197, 0, 15;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #ad000d;
+    --ion-color-danger-tint: #cb1a27;
+
+    --ion-color-light: #f6f8fc;
+    --ion-color-light-rgb: 246, 248, 252;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d8dade;
+    --ion-color-light-tint: #f7f9fc;
+
+    --ion-color-medium: #5f5f5f;
+    --ion-color-medium-rgb: 95, 95, 95;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #545454;
+    --ion-color-medium-tint: #6f6f6f;
+
+    --ion-color-dark: #2f2f2f;
+    --ion-color-dark-rgb: 47, 47, 47;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #292929;
+    --ion-color-dark-tint: #444444;
+
     --ui-input-background: #1e1e1e;
     --ui-input-color: #ffffff;
   }
 }
-
-.ui-toolbar {
-  --background: var(--ion-color-primary-contrast);
-}

src/views/chat/index.vue

@@ -7,10 +7,10 @@ import IcOutlineCleaningServices from "~icons/ic/outline-cleaning-services";
   <IonPage>
     <IonHeader>
       <ion-toolbar class="ui-toolbar">
-        <ion-button slot="start" fill="clear" color="dark">
+        <ion-button slot="start" fill="clear">
           <IcOutlineCleaningServices slot="icon-only" />
         </ion-button>
-        <ion-button slot="end" fill="clear" color="dark">
+        <ion-button slot="end" fill="clear">
           <IcBaselinePermContactCalendar slot="icon-only" />
         </ion-button>
         <ion-title>Chat</ion-title>

src/views/onchain-address/index.vue

@@ -9,7 +9,7 @@ const { user } = useAuth();
     <IonHeader>
       <IonToolbar class="ui-toolbar">
         <ion-buttons slot="start">
-          <ion-back-button default-href="/layout/user" />
+          <ion-back-button />
         </ion-buttons>
         <ion-title>My Onchain Address</ion-title>
       </IonToolbar>
@@ -19,7 +19,7 @@ const { user } = useAuth();
         <div class="container">
           <div class="user-info">
             <div class="avatar-wrapper">
-              <ion-avatar class="avatar">
+              <ion-avatar class="avatar size-16">
                 <img alt="User avatar" :src="user?.image || 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'">
               </ion-avatar>
             </div>

src/views/riwa/index.vue

@@ -20,17 +20,11 @@ async function handleLogout() {
 <template>
   <IonPage ref="page">
     <IonHeader>
-      <IonToolbar>
+      <IonToolbar class="ui-tabbar">
         <IonTitle>Home</IonTitle>
       </IonToolbar>
     </IonHeader>
     <IonContent :fullscreen="true">
-      <IonHeader collapse="condense">
-        <IonToolbar>
-          <IonTitle>Home</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-
       <IonButton @click="openSignin">
         Log in
       </IonButton>

src/views/user/components/wallet-card.vue

@@ -1,7 +1,10 @@
 <script lang='ts' setup>
+import { client } from "@/api";
+
 const balance = ref(9999999.00);
 
 const formattedBalance = formatBalance(balance);
+const { data } = await client.asset.balances.get();
 </script>
 
 <template>

src/views/user/index.vue

@@ -9,13 +9,13 @@ import WalletCard from "./components/wallet-card.vue";
     <ion-header>
       <ion-toolbar class="ui-toolbar">
         <div slot="end">
-          <ion-button fill="clear" color="dark">
+          <ion-button fill="clear">
             <ion-icon slot="icon-only" :icon="scanOutline" />
           </ion-button>
-          <ion-button fill="clear" color="dark">
+          <ion-button fill="clear">
             <ion-icon slot="icon-only" :icon="notificationsOutline" />
           </ion-button>
-          <ion-button fill="clear" color="dark">
+          <ion-button fill="clear">
             <ion-icon slot="icon-only" :icon="settingsOutline" />
           </ion-button>
         </div>