💄 角色box草创 #121

src/pages/common/Test.vue

@@ -18,15 +18,22 @@
       <v-btn class="test-btn" @click="tryGetList">获取角色列表</v-btn>
       <v-btn class="test-btn" @click="tryGetDetail">获取角色详情</v-btn>
     </div>
+    <div class="test-grid">
+      <TuaAvatarBox v-for="avatar in avatarList" :key="avatar.base.id" :model-value="avatar" />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import showSnackbar from "../../components/func/snackbar.js";
+import TuaAvatarBox from "../../components/userAvatar/tua-avatar-box.vue";
 import TSUserAvatar from "../../plugins/Sqlite/modules/userAvatar.js";
 import { useUserStore } from "../../store/modules/user.js";
 import TGRequest from "../../web/request/TGRequest.js";
 
 const userStore = useUserStore();
+const avatarList = ref<TGApp.Game.Avatar.DetailList[]>();
 
 async function tryGetList(): Promise<void> {
   const ck = userStore.cookie;
@@ -62,6 +69,7 @@ async function tryGetDetail(): Promise<void> {
   console.log(res);
   showSnackbar({ text: "获取成功！", color: "success" });
   userStore.propMap = res.property_map;
+  avatarList.value = res.list;
 }
 </script>
 <style lang="css" scoped>
@@ -119,4 +127,10 @@ async function tryGetDetail(): Promise<void> {
 .test-4 {
   background: var(--box-bg-4);
 }
+
+.test-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
 </style>