feat: 更新用户界面，添加 Rwa 组件并优化交易视图

src/App.vue

@@ -6,7 +6,6 @@ const { isAuthenticated } = storeToRefs(userStore);
 const { locale, loadSavedLanguage } = useLanguage();
 const { initializeWallet } = useWalletStore();
 const { updateProfile } = useUserStore();
-const route = useRoute();
 
 onMounted(() => {
   if (!isAuthenticated.value)

src/ui/avatar/index.vue

@@ -1,7 +1,17 @@
-<script lang='ts' setup></script>
+<script lang='ts' setup>
+import type { ComponentInstance } from "vue";
+
+const vm = getCurrentInstance()!;
+
+function changeRef(exposed: any) {
+  vm.exposed = exposed;
+}
+
+defineExpose({} as ComponentInstance<typeof IonAvatar>);
+</script>
 
 <template>
-  <ion-avatar v-bind="$attrs">
+  <ion-avatar v-bind="$attrs" :ref="changeRef">
     <img
       src="https://api.iconify.design/material-icon-theme:drizzle.svg"
       alt="Avatar"
@@ -11,7 +21,8 @@
 
 <style lang='css' scoped>
 ion-avatar {
+  --padding: 10px;
   background-color: #e7f6e1;
-  padding: 10px;
+  padding: var(--padding);
 }
 </style>

src/views/market/index.vue

@@ -73,10 +73,10 @@ onBeforeMount(() => {
         <ion-refresher-content />
       </ion-refresher>
 
-      <ui-tabs size="small" class="mb-3">
+      <!-- <ui-tabs size="small" class="mb-3">
         <ui-tab-pane name="all" title="数字化产品" />
         <ui-tab-pane name="stocks" title="代币化产品" />
-      </ui-tabs>
+      </ui-tabs> -->
 
       <Category v-model="query!.categoryId" />
       <RwaList :data="rwaData" />

src/views/riwa/components/rwa.vue

@@ -0,0 +1,17 @@
+<script lang='ts' setup>
+import { client, safeClient } from "@/api";
+
+const { data } = safeClient(client.api.rwa.subscription.available_editions.get({
+  query: {
+    limit: 4,
+  },
+}));
+</script>
+
+<template>
+  <div>
+    {{ data }}
+  </div>
+</template>
+
+<style lang='css' scoped></style>

src/views/riwa/index.vue

@@ -1,29 +1,23 @@
 <script setup lang="ts">
-const tradingViewContainer = useTemplateRef<HTMLElement>("tradingViewContainer");
+import IcOutlineMenu from "~icons/ic/outline-menu";
-
+import Rwa from "./components/rwa.vue";
-useTradingView(tradingViewContainer, {
-  data: [
-    // 随机k线图数据
-    { time: "2023-10-01", open: 100, high: 110, low: 90, close: 105 },
-    { time: "2023-10-02", open: 105, high: 115, low: 95, close: 100 },
-    { time: "2023-10-03", open: 100, high: 120, low: 80, close: 110 },
-    { time: "2023-10-04", open: 110, high: 130, low: 100, close: 120 },
-    { time: "2023-10-05", open: 120, high: 140, low: 110, close: 130 },
-    { time: "2023-10-06", open: 130, high: 150, low: 120, close: 140 },
-    { time: "2023-10-07", open: 140, high: 160, low: 130, close: 150 },
-  ],
-});
 </script>
 
 <template>
-  <IonPage>
+  <ion-page>
-    <IonHeader>
+    <ion-header class="ion-no-border">
-      <IonToolbar class="ui-toolbar">
+      <ion-toolbar class="ui-toolbar">
-        <IonTitle>Home</IonTitle>
+        <ion-button slot="start" fill="clear">
-      </IonToolbar>
+          <IcOutlineMenu slot="icon-only" />
-    </IonHeader>
+        </ion-button>
-    <IonContent :fullscreen="true">
+        <ion-button slot="end" fill="clear">
-      <div ref="tradingViewContainer" />
+          <!-- <ui-avatar slot="icon-only" class="w-10 h-10" style="--padding: 8px" /> -->
-    </IonContent>
+        </ion-button>
-  </IonPage>
+        <ion-title>首页</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <Rwa />
+    </ion-content>
+  </ion-page>
 </template>

src/views/trade/index.vue

@@ -1,8 +1,20 @@
 <script setup lang="ts">
-import { cartOutline } from "ionicons/icons";
-import OperationWrapper from "./components/operation-wrapper.vue";
-
 const { t } = useI18n();
+
+const tradingViewContainer = useTemplateRef<HTMLElement>("tradingViewContainer");
+
+useTradingView(tradingViewContainer, {
+  data: [
+    // 随机k线图数据
+    { time: "2023-10-01", open: 100, high: 110, low: 90, close: 105 },
+    { time: "2023-10-02", open: 105, high: 115, low: 95, close: 100 },
+    { time: "2023-10-03", open: 100, high: 120, low: 80, close: 110 },
+    { time: "2023-10-04", open: 110, high: 130, low: 100, close: 120 },
+    { time: "2023-10-05", open: 120, high: 140, low: 110, close: 130 },
+    { time: "2023-10-06", open: 130, high: 150, low: 120, close: 140 },
+    { time: "2023-10-07", open: 140, high: 160, low: 130, close: 150 },
+  ],
+});
 </script>
 
 <template>
@@ -13,7 +25,7 @@ const { t } = useI18n();
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
-      <!-- <OperationWrapper v-model="current" /> -->
+      <div ref="tradingViewContainer" />
     </ion-content>
   </ion-page>
 </template>