refactor(login): 重构登录注册页面和配置

- 合并平台特定登录页面到统一登录页面
- 重命名登录策略配置变量以更清晰表达意图
- 更新README文档说明登录策略变更
- 实现注册成功后的跳转逻辑
- 更新tabbar配置使用自定义样式

src/login/README.md

@@ -15,9 +15,9 @@
 
 比如大部分2B和后台管理类的应用，比如企业微信、钉钉、飞书、内部报表系统、CMS系统等，都需要登录，只有登录后，才能使用。
 
-### EXCLUDE_PATH_LIST
-`EXCLUDE_PATH_LIST` 表示排除的路由列表。
+### EXCLUDE_PAGE_LIST
+`EXCLUDE_PAGE_LIST` 表示排除的路由列表。
 
-在 `默认无需登录策略： DEFAULT_NO_NEED_LOGIN` 中，只有路由在 `EXCLUDE_PATH_LIST` 中，才需要登录，相当于黑名单。
+在 `默认无需登录策略： DEFAULT_NO_NEED_LOGIN` 中，只有路由在 `EXCLUDE_PAGE_LIST` 中，才需要登录，相当于黑名单。
 
-在 `默认需要登录策略： DEFAULT_NEED_LOGIN` 中，只有路由在 `EXCLUDE_PATH_LIST` 中，才不需要登录，相当于白名单。
+在 `默认需要登录策略： DEFAULT_NEED_LOGIN` 中，只有路由在 `EXCLUDE_PAGE_LIST` 中，才不需要登录，相当于白名单。

src/login/config.ts

@@ -1,13 +1,13 @@
 export const LOGIN_STRATEGY_MAP = {
-  BLACKLIST: 'BLACKLIST', // 黑名单策略，默认可以进入APP
-  WHITELIST: 'WHITELIST', // 白名单策略，默认不可以进入APP，需要强制登录
+  DEFAULT_NO_NEED_LOGIN: 0, // 黑名单策略，默认可以进入APP
+  DEFAULT_NEED_LOGIN: 1, // 白名单策略，默认不可以进入APP，需要强制登录
 }
-// 登录策略，默认使用黑名单策略，即默认不需要登录就可以访问
-export const LOGIN_STRATEGY = LOGIN_STRATEGY_MAP.WHITELIST
+// 登录策略，默认使用`无需登录策略`，即默认不需要登录就可以访问
+export const LOGIN_STRATEGY = LOGIN_STRATEGY_MAP.DEFAULT_NO_NEED_LOGIN
 
 export const LOGIN_PAGE_LIST = ['/pages/login/login', '/pages/login/register']
 
 // 排除在外的列表，白名单策略指白名单列表，黑名单策略指黑名单列表
-export const EXCLUDE_LIST = [
+export const EXCLUDE_PAGE_LIST = [
   '/pages/xxx/index',
 ]

src/pages.json

@@ -15,7 +15,7 @@
     }
   },
   "tabBar": {
-    "custom": false,
+    "custom": true,
     "color": "#999999",
     "selectedColor": "#018d71",
     "backgroundColor": "#F8F8F8",
@@ -26,16 +26,16 @@
     "spacing": "3px",
     "list": [
       {
-        "iconPath": "static/tabbar/home.png",
-        "selectedIconPath": "static/tabbar/homeHL.png",
+        "text": "首页",
         "pagePath": "pages/index/index",
-        "text": "首页"
+        "iconType": "uniUi",
+        "icon": "home"
       },
       {
-        "iconPath": "static/tabbar/example.png",
-        "selectedIconPath": "static/tabbar/exampleHL.png",
+        "text": "关于",
         "pagePath": "pages/about/about",
-        "text": "关于"
+        "iconType": "unocss",
+        "icon": "i-carbon-code"
       }
     ]
   },

src/pages/login/README.md

@@ -0,0 +1,11 @@
+# 登录注册
+
+登录页 `login.vue` 对应路由是 `/pages/login/login`.
+注册页 `register.vue` 对应路由是 `/pages/login/register`.
+
+## 适用性
+
+登录注册页主要适用于 `h5` 和 `App`，因为小程序通常会使用平台提供的快捷登录。
+
+但是当业务要求需要服用夸平台的登录注册页时，也是可以用的。主要还是取决于业务形式。
+

src/pages/login/login.h5.vue

@@ -1,57 +0,0 @@
-<route lang="jsonc" type="page">
-{
-  "layout": "default",
-  "style": {
-    "navigationBarTitleText": "登录"
-  }
-}
-</route>
-
-<script lang="ts" setup>
-import { useUserStore } from '@/store/user'
-import { tabbarList } from '@/tabbar/config'
-import { isPageTabbar } from '@/tabbar/store'
-
-const redirectUrl = ref('')
-onLoad((options) => {
-  console.log('login options', options)
-  redirectUrl.value = options.redirectUrl || tabbarList[0].pagePath
-})
-const userStore = useUserStore()
-function doLogin() {
-  userStore.setUserInfo({
-    id: 1,
-    username: '菲鸽',
-    avatar: 'https://unibest.oss-cn-beijing.aliyuncs.com/avatar.png',
-    token: 'fake-token',
-  })
-  console.log(redirectUrl.value)
-  if (isPageTabbar(redirectUrl.value)) {
-    uni.switchTab({
-      url: `/${redirectUrl.value}`,
-    })
-  }
-  else {
-    uni.redirectTo({
-      url: `/${redirectUrl.value}`,
-    })
-  }
-}
-</script>
-
-<template>
-  <view class="login">
-    <view class="login__header">
-      <view class="login__header__title">
-        登录 h5
-      </view>
-      <button class="mt-4 w-40 text-center" @click="doLogin">
-        点击模拟登录
-      </button>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-//
-</style>

src/pages/login/login.vue

@@ -8,17 +8,46 @@
 </route>
 
 <script lang="ts" setup>
-import LoginH5 from './login.h5.vue'
-import LoginWeixin from './login.weixin.vue'
+import { useUserStore } from '@/store/user'
+import { tabbarList } from '@/tabbar/config'
+import { isPageTabbar } from '@/tabbar/store'
+
+const redirectUrl = ref('')
+onLoad((options) => {
+  console.log('login options', options)
+  redirectUrl.value = options.redirectUrl || tabbarList[0].pagePath
+})
+const userStore = useUserStore()
+function doLogin() {
+  userStore.setUserInfo({
+    id: 1,
+    username: '菲鸽',
+    avatar: 'https://unibest.oss-cn-beijing.aliyuncs.com/avatar.png',
+    token: 'fake-token',
+  })
+  console.log(redirectUrl.value)
+  if (isPageTabbar(redirectUrl.value)) {
+    uni.switchTab({
+      url: `/${redirectUrl.value}`,
+    })
+  }
+  else {
+    uni.redirectTo({
+      url: `/${redirectUrl.value}`,
+    })
+  }
+}
 </script>
 
 <template>
-  <!-- #ifdef H5 || APP-PLUS -->
-  <LoginH5 />
-  <!-- #endif -->
-  <!-- #ifdef MP-WEIXIN -->
-  <LoginWeixin />
-  <!-- #endif -->
+  <view class="login">
+    <view class="text-center">
+      登录页
+    </view>
+    <button class="mt-4 w-40 text-center" @click="doLogin">
+      点击模拟登录
+    </button>
+  </view>
 </template>
 
 <style lang="scss" scoped>

src/pages/login/login.weixin.vue

@@ -1,26 +0,0 @@
-<route lang="jsonc" type="page">
-{
-  "layout": "default",
-  "style": {
-    "navigationBarTitleText": "登录"
-  }
-}
-</route>
-
-<script lang="ts" setup>
-//
-</script>
-
-<template>
-  <view class="login">
-    <view class="login__header">
-      <view class="login__header__title">
-        登录 mp-weixin
-      </view>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-//
-</style>

src/pages/login/register.vue

@@ -8,10 +8,26 @@
 </route>
 
 <script lang="ts" setup>
+function doRegister() {
+  uni.showToast({
+    title: '注册成功',
+  })
+  // 注册成功后跳转到登录页
+  uni.navigateTo({
+    url: '/pages/login/login',
+  })
+}
 </script>
 
 <template>
-  <view>注册</view>
+  <view class="login">
+    <view class="text-center">
+      注册页
+    </view>
+    <button class="mt-4 w-40 text-center" @click="doRegister">
+      点击模拟注册
+    </button>
+  </view>
 </template>
 
 <style lang="scss" scoped>

src/router/interceptor.ts

@@ -7,7 +7,7 @@
 import { useUserStore } from '@/store'
 import { tabbarStore } from '@/tabbar/store'
 import { getLastPage } from '@/utils'
-import { EXCLUDE_LIST, LOGIN_PAGE_LIST } from '../login/config'
+import { EXCLUDE_PAGE_LIST, LOGIN_PAGE_LIST } from '../login/config'
 
 // 黑名单登录拦截器 - （适用于大部分页面不需要登录，少部分页面需要登录）
 export const navigateToInterceptor = {
@@ -43,7 +43,7 @@ export const navigateToInterceptor = {
 
     console.log('拦截器中得到的 path:', path, userStore.hasLogin)
 
-    if ([...EXCLUDE_LIST, ...LOGIN_PAGE_LIST].includes(path)) {
+    if (EXCLUDE_PAGE_LIST.includes(path)) {
       console.log('111')
       uni.navigateTo({ url: path })
       return