fix mobile adapter

app/src/App.vue

@@ -12,6 +12,7 @@ import { deleteConversation } from "./assets/script/api";
 import {ref} from "vue";
 import Close from "./components/icons/close.vue";
 import Notification from "./components/Notification.vue";
+import Bar from "./components/icons/bar.vue";
 
 const current = manager.getCurrent();
 const sidebar = ref(false), padding = ref(false);
@@ -91,7 +92,8 @@ function toggleConversation(id: number) {
       </div>
       <div class="grow" />
       <router-link to="/settings" class="user" v-if="auth">
-        <img class="avatar" :src="'https://api.deeptrain.net/avatar/' + username" alt="" @click="setSidebar(true)">
+        <bar class="menu" v-if="mobile" @click="setSidebar(true)" />
+        <img class="avatar" :src="'https://api.deeptrain.net/avatar/' + username" alt="">
         <span class="username">{{ username }}</span>
       </router-link>
       <div class="login" v-else>
@@ -102,7 +104,11 @@ function toggleConversation(id: number) {
       </div>
     </aside>
     <div class="container">
-      <router-view />
+      <router-view v-slot="{ Component }">
+        <transition name="fade">
+          <component :is="Component" />
+        </transition>
+      </router-view>
     </div>
   </div>
   <div class="copyright">
@@ -141,6 +147,16 @@ aside {
   width: max-content;
 }
 
+.menu {
+  flex-shrink: 0;
+  width: 32px;
+  height: 36px;
+  color: var(--card-text);
+  fill: var(--card-text);
+  margin-left: 14px;
+  margin-right: 4px;
+}
+
 .user {
   display: flex;
   user-select: none;
@@ -554,7 +570,7 @@ aside {
   }
 
   .avatar {
-    margin-left: 12px;
+    margin-left: 8px;
   }
 
   .user {
@@ -577,4 +593,19 @@ aside {
     display: none;
   }
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: 0.5s opacity;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transition: 0.5s opacity;
+}
+
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

app/src/components/icons/bar.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M80 160h352M80 256h352M80 352h352"/></svg>
+</template>

app/src/views/SettingsView.vue

@@ -99,6 +99,7 @@ function payment() {
 </script>
 
 <template>
+  <div class="page">
     <div class="wrapper">
       <div class="nav">
         <router-link to="/" class="router">
@@ -120,18 +121,18 @@ function payment() {
         <div class="subtitle">配额</div>
         <div class="row">
           <wallet />
-        <span class="text">Deeptrain 钱包</span>
-        <span class="value">{{ info.balance }} ￥</span>
+          <span class="text">余额</span>
+          <span class="value money">{{ info.balance }}</span>
         </div>
         <div class="row">
           <chart />
-        <span class="text">GPT-4 配额</span>
-        <span class="value">{{ info.gpt4 }} 次</span>
+          <span class="text">GPT-4</span>
+          <span class="value time">{{ info.gpt4 }}</span>
         </div>
         <div class="row">
           <draw />
-        <span class="text">DALL-E 配额</span>
-        <span class="value">{{ info.dalle }} 次</span>
+          <span class="text">DALL-E</span>
+          <span class="value time">{{ info.dalle }}</span>
         </div>
         <div class="split" />
         <div class="subtitle">购买</div>
@@ -179,9 +180,21 @@ function payment() {
         </div>
       </div>
     </div>
+  </div>
 </template>
-
+<style>
+.page.fade-leave-active {
+  transform: translateY(35px);
+}
+</style>
 <style scoped>
+.page {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -337,6 +350,7 @@ function payment() {
   height: 24px;
   fill: #eee;
   margin-right: 4px;
+  flex-shrink: 0;
 }
 
 .buy-input {
@@ -396,7 +410,9 @@ function payment() {
   transition: .5s;
   cursor: pointer;
   margin-right: -2px;
+  color: #fff;
   background: rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
 }
 
 .user button:hover {
@@ -423,6 +439,7 @@ function payment() {
   color: #fff !important;
   user-select: none;
   text-align: center;
+  transform: translateX(-26px);
 }
 
 .subtitle::before {
@@ -482,6 +499,7 @@ function payment() {
 .text {
   font-size: 18px;
   color: var(--card-text-hover);
+  white-space: nowrap;
 }
 
 .value {
@@ -490,5 +508,66 @@ function payment() {
   color: var(--card-text);
   margin-right: 6px;
   margin-left: auto;
+  white-space: nowrap;
+}
+
+.value.money::after {
+  content: "¥";
+  margin-left: 2px;
+  font-size: 12px;
+  color: #eee;
+}
+
+.value.time::after {
+  content: "次";
+  margin-left: 2px;
+  font-size: 12px;
+  color: #eee;
+}
+
+@media (max-width: 460px) {
+  .body {
+    width: calc(100% - 32px);
+    padding: 24px 16px;
+  }
+
+  .row {
+    transform: translateX(-8px);
+  }
+
+  .buy-card {
+    width: 100%;
+  }
+
+  .sale {
+    align-items: normal;
+    justify-content: center;
+  }
+
+  .sale svg {
+    margin-right: 4px;
+  }
+
+  .buy-quota {
+    gap: 0;
+  }
+
+  .buy-input {
+    min-width: 0;
+    text-align: center;
+    margin: 6px 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .pay-info {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .buy-action {
+    margin: 12px auto;
+    min-width: 120px;
+  }
 }
 </style>