refactor: update user center page (#110)

build/vite/optimize.ts

@@ -13,6 +13,9 @@ const include = [
   'vant/es/empty/style/index',
   'vant/es/icon/style/index',
   'vant/es/stepper/style/index',
+  'vant/es/image/style/index',
+  'vant/es/form/style/index',
+  'vant/es/field/style/index',
 ]
 
 const exclude = [

package.json

@@ -2,7 +2,7 @@
   "name": "vue3-vant-mobile",
   "type": "module",
   "version": "2.3.10",
-  "packageManager": "pnpm@9.7.0",
+  "packageManager": "pnpm@9.8.0",
   "description": "Vue + Vite H5 Starter Template",
   "license": "MIT",
   "scripts": {

src/locales/en-US.json

@@ -33,7 +33,8 @@
     "profile": "PROFILE"
   },
   "profile": {
-    "placeholder": "WIP"
+    "login": "Login",
+    "settings": "Settings"
   },
   "keepAlive": {
     "label": "The current component will be cached"

src/locales/zh-CN.json

@@ -33,7 +33,8 @@
     "profile": "我的"
   },
   "profile": {
-    "placeholder": "未完成"
+    "login": "登录",
+    "settings": "设置"
   },
   "keepAlive": {
     "label": "当前组件将会被缓存"

src/pages/index.vue

@@ -35,8 +35,8 @@ const menuItems = computed(() => ([
   { title: t('menus.echartsDemo'), route: 'charts' },
   { title: t('menus.unocssExample'), route: 'unocss' },
   { title: t('menus.persistPiniaState'), route: 'counter' },
-  { title: t('menus.404Demo'), route: 'unknown' },
   { title: t('menus.keepAlive'), route: 'keepalive' },
+  { title: t('menus.404Demo'), route: 'unknown' },
 ]))
 </script>
 

src/pages/profile/index.vue

@@ -3,41 +3,36 @@ import router from '@/router'
 import { useUserStore } from '@/stores'
 import defaultAvatar from '@/assets/images/default-avatar.svg'
 
-const { t } = useI18n()
 const userStore = useUserStore()
 const userInfo = computed(() => userStore.userInfo)
+const isLogin = computed(() => !!userInfo.value.uid)
 
-function goLogin() {
-  router.push({ name: 'login', query: { redirect: 'profile' } })
-}
+function login() {
+  if (isLogin.value)
+    return
 
-function logout() {
-  userStore.logout()
   router.push({ name: 'login', query: { redirect: 'profile' } })
 }
 </script>
 
 <template>
-  <div mx-auto mb-60 pt-15 text-center text-16 text-dark dark:text-white>
-    <template v-if="userInfo.uid">
-      <div class="bg mb-32 mt-64">
-        <van-image :src="userInfo.avatar || defaultAvatar" round class="h-64 w-64 border" />
-      </div>
-      <div class="mb-64">
-        {{ userInfo.name }}
-      </div>
-      <div class="mb-32">
-        {{ userInfo.prose }}
-      </div>
-      <van-button class="w-xl" type="primary" @click="logout()">
-        {{ t('login.logout') }}
-      </van-button>
+  <div>
+    <VanCellGroup :inset="true">
+      <van-cell center :is-link="!isLogin" @click="login">
+        <template #title>
+          <van-image :src="userInfo.avatar || defaultAvatar" round class="h-56 w-56" />
         </template>
-    <template v-else>
-      <van-button class="w-xl" type="primary" @click="goLogin()">
-        {{ t('login.login') }}
-      </van-button>
+
+        <template #value>
+          <span v-if="isLogin">{{ userInfo.name }}</span>
+          <span v-else>{{ $t('profile.login') }}</span>
         </template>
+      </van-cell>
+    </VanCellGroup>
+
+    <VanCellGroup :inset="true" class="!mt-16">
+      <van-cell :title="$t('profile.settings')" icon="setting-o" is-link to="" />
+    </VanCellGroup>
   </div>
 </template>
 

src/styles/app.less

@@ -15,9 +15,7 @@ html.dark {
 }
 
 #app {
-  height: 100vh;
-  // Dynamic Viewport Units
-  height: 100dvh;
+  height: 100%;
   position: relative;
   overflow-x: hidden;
 }