af-mobile-client-vue3 1.3.29 → 1.3.31

package/src/views/loading/AuthLoading.vue

@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import { getUserPermissions } from '@af-mobile-client-vue3/services/api/search'
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
+import { UserType } from '@af-mobile-client-vue3/types/auth'
+import { PLATFORM_ROUTE_MAP, PlatformType } from '@af-mobile-client-vue3/types/platform'
+import { isWechat } from '@af-mobile-client-vue3/utils/platform-auth'
+import { funcToRouter, loadRoutes } from '@af-mobile-client-vue3/utils/routerUtil'
+import { secureStorageBatchWrite } from '@af-mobile-client-vue3/utils/secureStorage'
+import { Loading as VanLoading } from 'vant'
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const userStore = useUserStore()
+// 响应式状态
+const isLoading = ref(true)
+const errorMessage = ref('')
+const hasError = ref(false)
+
+// 主要认证处理逻辑
+async function handleAuth() {
+  try {
+    const authParam = route.query as Record<string, string>
+
+    if (authParam.platformType) {
+      // 微信公众号授权登录参数
+      await handleExternalLogin(authParam)
+    }
+    else {
+      // 无授权参数，检查是否已登录或等待授权
+      await handleWaitingForAuth()
+    }
+  }
+  catch (error) {
+    console.error('[AuthLoading] 认证处理失败:', error)
+
+    isLoading.value = false
+    hasError.value = true
+
+    if (error instanceof Error) {
+      errorMessage.value = '授权失败，请尝试重新进入此页面'
+    }
+    else {
+      errorMessage.value = '认证失败'
+    }
+  }
+}
+
+// 处理外部用户登录
+async function handleExternalLogin(loginParams: any) {
+  const data = await userStore.loginExternal(Object.assign(loginParams, {
+    isMobile: true,
+  }))
+  const loginInfo = {
+    f: data,
+    jwt: data.id,
+    r: data.r,
+  }
+  userStore.setLogin(loginInfo)
+  // 设置用户信息
+  userStore.setUserType(data.resources.userType || UserType.SYSTEM)
+  userStore.setPlatformType(loginParams.platformType || PlatformType.WECHAT_OFFICIAL)
+  await afterGeneral(data.resources, data.access_token, UserType.EXTERNAL)
+
+  // 获取重定向地址并跳转
+  let targetPath = route.query.redirect as string
+  if (data.resources.userType === UserType.EXTERNAL) {
+    // 外部用户没有重定向地址，直接跳转到外部用户首页
+    // 对应的外部用户只能跳转到对应的页面
+    const platformPrefixes = PLATFORM_ROUTE_MAP[data.resources.platformType]
+    if (!targetPath.startsWith(platformPrefixes)) {
+      targetPath = platformPrefixes
+    }
+  }
+  router.replace(targetPath)
+}
+
+function closeWindows() {
+  if (isWechat()) {
+    (window as any).WeixinJSBridge.call('closeWindow')
+  }
+  else {
+    // 关闭页面
+    if (navigator.userAgent.includes('Firefox') || navigator.userAgent.includes('Chrome')) {
+      window.open('about:blank', '_self')
+      window.close()
+    }
+    else {
+      window.opener = null
+      window.open('', '_self')
+      window.close()
+    }
+  }
+}
+
+async function afterGeneral(result, token = '', userType = UserType.SYSTEM) {
+  // 排序 functions 及其嵌套的 children
+  if (result.functions && Array.isArray(result.functions)) {
+    // 对顶层菜单进行排序
+    result.functions.sort((a, b) => (a.position || 0) - (b.position || 0))
+
+    // 对每个菜单的子项进行排序
+    for (const item of result.functions) {
+      if (item.children && Array.isArray(item.children)) {
+        item.children.sort((a, b) => (a.position || 0) - (b.position || 0))
+      }
+    }
+  }
+
+  const user: any = {
+    ...result,
+    username: result.ename,
+    avatar: result.avatar,
+  }
+  userStore.setUserInfo(user)
+  // 如果result中没有返回 权限 需要主动获取权限列表
+  if (!result.permissions && userType !== UserType.EXTERNAL) {
+    result.permissions = await getUserPermissions(result.id)
+  }
+  userStore.setPermissions(result.permissions)
+  userStore.setRoles([{ id: userType, operation: ['add', 'edit', 'delete'] }])
+  // 加载路由
+  if (user.functions) {
+    loadRoutes(funcToRouter(user.functions))
+  }
+
+  // 存储登录数据到本地缓存
+  secureStorageBatchWrite([
+    {
+      key: 'loginData',
+      value: {
+        token,
+      },
+    },
+    {
+      key: 'userData',
+      value: result,
+    },
+  ])
+
+  // 每次重新登录时，清除indexedDB缓存
+  // indexedDB.clear()
+}
+
+// TODO 处理等待授权的情况 暂未实现目前不确定三方对接方式
+async function handleWaitingForAuth() {
+  console.log('[AuthLoading] 处理等待授权情况')
+
+  // 检查是否已登录
+  const token = userStore.getToken()
+  const userType = userStore.getUserType()
+
+  if (token) {
+    const targetPath = userType === 'EXTERNAL' ? '/ex' : '/'
+    router.replace(targetPath)
+  }
+  else {
+    // 根据来源决定处理方式
+    const source = route.query.source as string
+    closeWindows()
+
+    if (source === 'external') {
+      // 外部用户需要重新获取授权
+      throw new Error('第三方授权已过期，请重新尝试')
+    }
+    else {
+      // 其他情况
+      throw new Error('需要重新获取授权')
+    }
+  }
+}
+
+onMounted(() => {
+  handleAuth()
+})
+</script>
+
+<template>
+  <div class="auth-loading">
+    <!-- Logo区域 -->
+    <div class="logo-section">
+      <div class="company-logo">
+        <div class="logo-text">
+          智慧燃气
+        </div>
+      </div>
+    </div>
+
+    <!-- Loading区域 -->
+    <div v-if="isLoading && !hasError" class="loading-section">
+      <div class="loading-spinner">
+        <VanLoading type="spinner" size="48px" color="#007BFF" />
+      </div>
+      <div class="loading-text">
+        稍等，这就好
+      </div>
+    </div>
+
+    <!-- 错误处理区域 -->
+    <div v-if="hasError" class="error-section">
+      <div class="error-icon">
+        ⚠️
+      </div>
+      <div class="error-message">
+        {{ errorMessage }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 主容器 */
+.auth-loading {
+  min-height: 100vh;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 32px 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Logo区域 */
+.logo-section {
+  margin-bottom: 64px;
+}
+
+.company-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-text {
+  font-size: 28px;
+  font-weight: 600;
+  color: #007bff;
+  letter-spacing: 2px;
+}
+
+/* Loading区域 */
+.loading-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.loading-spinner {
+  margin-bottom: 24px;
+}
+
+.loading-text {
+  font-size: 18px;
+  font-weight: 500;
+  color: #2c3e50;
+  margin-bottom: 12px;
+  line-height: 1.4;
+}
+
+.platform-text {
+  font-size: 14px;
+  color: #6c757d;
+  line-height: 1.4;
+}
+
+/* 错误处理区域 */
+.error-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 300px;
+}
+
+.error-icon {
+  font-size: 48px;
+  margin-bottom: 20px;
+  opacity: 0.8;
+}
+
+.error-message {
+  font-size: 16px;
+  color: #dc3545;
+  margin-bottom: 24px;
+  line-height: 1.5;
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+  .auth-loading {
+    padding: 24px 16px;
+  }
+
+  .logo-text {
+    font-size: 24px;
+  }
+
+  .loading-text {
+    font-size: 16px;
+  }
+
+  .platform-text {
+    font-size: 13px;
+  }
+
+  .error-message {
+    font-size: 15px;
+  }
+}
+
+/* 大屏适配 */
+@media (min-width: 768px) {
+  .auth-loading {
+    max-width: 400px;
+    margin: 0 auto;
+  }
+}
+
+/* 兼容性优化 - 避免使用可能有问题的CSS特性 */
+.loading-spinner :deep(.van-loading__spinner) {
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+/* 禁用选择，提升用户体验 */
+.auth-loading {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* 确保文字在各种设备上清晰显示 */
+.logo-text,
+.loading-text,
+.platform-text,
+.error-message {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>

package/src/views/user/login/ForgetPasswordForm.vue

@@ -1,94 +1,94 @@
-<script setup lang="ts">
-import type { FormInstance } from 'vant'
-import { LoginStateEnum, useFormRules, useLoginState } from '@af-mobile-client-vue3/hooks/useLogin'
-import {
-
-  showFailToast,
-  Button as VanButton,
-  Field as VanField,
-  Form as VanForm,
-} from 'vant'
-import { computed, reactive, ref, unref } from 'vue'
-
-const { handleBackLogin, getLoginState } = useLoginState()
-const { getFormRules } = useFormRules()
-const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD)
-
-const loading = ref(false)
-const formRef = ref<FormInstance>()
-const formData = reactive({
-  username: '',
-  mobile: '',
-  sms: '',
-})
-
-function handleReset() {
-  formRef.value
-    ?.validate()
-    .then(async () => {
-      try {
-        loading.value = true
-        // do something
-      }
-      finally {
-        loading.value = false
-      }
-    })
-    .catch((e) => {
-      showFailToast('验证失败')
-      console.error(e)
-    })
-}
-</script>
-
-<template>
-  <div v-if="getShow" class="form forget_password_form">
-    <VanForm ref="formRef" @submit="handleReset">
-      <VanField
-        v-model="formData.username"
-        class="form_field"
-        name="username"
-        label="账号"
-        placeholder="请输入账号"
-        label-align="top"
-        :rules="getFormRules.username"
-      />
-      <VanField
-        v-model="formData.mobile"
-        class="form_field"
-        name="password"
-        label="手机号码"
-        placeholder="请输入手机号码"
-        label-align="top"
-        :rules="getFormRules.mobile"
-      />
-
-      <VanField
-        v-model="formData.sms"
-        class="form_field"
-        center
-        clearable
-        label-align="top"
-        label="短信验证码"
-        placeholder="请输入短信验证码"
-        :rules="getFormRules.sms"
-      >
-        <template #button>
-          <VanButton size="small" type="primary">
-            发送验证码
-          </VanButton>
-        </template>
-      </VanField>
-      <VanButton class="reset_btn btn" type="primary" block native-type="submit" :loading="loading">
-        重 置
-      </VanButton>
-      <VanButton class="back_btn btn" plain type="primary" block @click="handleBackLogin">
-        返 回
-      </VanButton>
-    </VanForm>
-  </div>
-</template>
-
-<style scoped lang="less">
-@import '@af-mobile-client-vue3/styles/login.less';
-</style>
+<script setup lang="ts">
+import type { FormInstance } from 'vant'
+import { LoginStateEnum, useFormRules, useLoginState } from '@af-mobile-client-vue3/hooks/useLogin'
+import {
+
+  showFailToast,
+  Button as VanButton,
+  Field as VanField,
+  Form as VanForm,
+} from 'vant'
+import { computed, reactive, ref, unref } from 'vue'
+
+const { handleBackLogin, getLoginState } = useLoginState()
+const { getFormRules } = useFormRules()
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD)
+
+const loading = ref(false)
+const formRef = ref<FormInstance>()
+const formData = reactive({
+  username: '',
+  mobile: '',
+  sms: '',
+})
+
+function handleReset() {
+  formRef.value
+    ?.validate()
+    .then(async () => {
+      try {
+        loading.value = true
+        // do something
+      }
+      finally {
+        loading.value = false
+      }
+    })
+    .catch((e) => {
+      showFailToast('验证失败')
+      console.error(e)
+    })
+}
+</script>
+
+<template>
+  <div v-if="getShow" class="form forget_password_form">
+    <VanForm ref="formRef" @submit="handleReset">
+      <VanField
+        v-model="formData.username"
+        class="form_field"
+        name="username"
+        label="账号"
+        placeholder="请输入账号"
+        label-align="top"
+        :rules="getFormRules.username"
+      />
+      <VanField
+        v-model="formData.mobile"
+        class="form_field"
+        name="password"
+        label="手机号码"
+        placeholder="请输入手机号码"
+        label-align="top"
+        :rules="getFormRules.mobile"
+      />
+
+      <VanField
+        v-model="formData.sms"
+        class="form_field"
+        center
+        clearable
+        label-align="top"
+        label="短信验证码"
+        placeholder="请输入短信验证码"
+        :rules="getFormRules.sms"
+      >
+        <template #button>
+          <VanButton size="small" type="primary">
+            发送验证码
+          </VanButton>
+        </template>
+      </VanField>
+      <VanButton class="reset_btn btn" type="primary" block native-type="submit" :loading="loading">
+        重 置
+      </VanButton>
+      <VanButton class="back_btn btn" plain type="primary" block @click="handleBackLogin">
+        返 回
+      </VanButton>
+    </VanForm>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import '@af-mobile-client-vue3/styles/login.less';
+</style>