feat 增加首次登录强制重置密码的交互

admin/src/views/account/login.vue

@@ -45,6 +45,27 @@
             </div>
         </div>
         <layout-footer />
+        <el-dialog
+            v-model="showForceChangePwd"
+            title="首次登录必须修改密码"
+            width="600px"
+            center
+            :show-close="false"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            append-to-body
+        >
+            <div class="flex justify-center items-center">
+                <div class="w-full">
+                    <user-setting
+                        :is-first-login="true"
+                        :temp-password="formData.password"
+                        @success="handleForcePwdSuccess"
+                        @cancel="handleForcePwdCancel"
+                    />
+                </div>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -59,6 +80,7 @@ import LayoutFooter from '@/layout/components/footer.vue'
 import useAppStore from '@/stores/modules/app'
 import useUserStore from '@/stores/modules/user'
 import cache from '@/utils/cache'
+import UserSetting from '@/views/user/setting.vue'
 
 const passwordRef = shallowRef<InputInstance>()
 const formRef = shallowRef<FormInstance>()
@@ -67,6 +89,7 @@ const userStore = useUserStore()
 const route = useRoute()
 const router = useRouter()
 const remAccount = ref(false)
+const showForceChangePwd = ref(false)
 const config = computed(() => appStore.config)
 const formData = reactive({
     account: '',
@@ -104,14 +127,27 @@ const handleLogin = async () => {
         account: remAccount.value ? formData.account : ''
     })
     await userStore.login(formData)
-    const {
-        query: { redirect }
-    } = route
-    const path = typeof redirect === 'string' ? redirect : PageEnum.INDEX
-    router.push(path)
+    const userInfo = await userStore.getUserInfo()
+    console.log('userInfo', userInfo)
+    // 检查是否首次登录
+    if (userInfo?.first_login === 1 || userInfo?.user?.first_login === 1) {
+        showForceChangePwd.value = true
+        return
+    }
+    window.location.href = '/workbench'
 }
 const { isLock, lockFn: lockLogin } = useLockFn(handleLogin)
 
+const handleForcePwdSuccess = async () => {
+    showForceChangePwd.value = false
+    window.location.href = '/workbench'
+}
+
+const handleForcePwdCancel = async () => {
+    await userStore.logout()
+    showForceChangePwd.value = false
+}
+
 onMounted(() => {
     const value = cache.get(ACCOUNT_KEY)
     if (value?.remember) {

admin/src/views/user/setting.vue

@@ -9,23 +9,23 @@
                 :rules="rules"
                 label-width="100px"
             >
-                <el-form-item label="头像：" prop="avatar">
+                <el-form-item label="头像：" prop="avatar" v-if="!isFirstLogin">
                     <material-picker v-model="formData.avatar" :limit="1" />
                 </el-form-item>
 
-                <el-form-item label="账号：" prop="account">
+                <el-form-item label="账号：" prop="account" v-if="!isFirstLogin">
                     <div class="w-80">
                         <el-input v-model="formData.account" disabled />
                     </div>
                 </el-form-item>
 
-                <el-form-item label="名称：" prop="name">
+                <el-form-item label="名称：" prop="name" v-if="!isFirstLogin">
                     <div class="w-80">
                         <el-input v-model="formData.name" placeholder="请输入名称" />
                     </div>
                 </el-form-item>
 
-                <el-form-item label="当前密码：" prop="password_old">
+                <el-form-item label="当前密码：" prop="password_old" v-if="!isFirstLogin">
                     <div class="w-80">
                         <el-input
                             v-model.trim="formData.password_old"
@@ -59,9 +59,13 @@
                 </el-form-item>
             </el-form>
         </el-card>
-        <footer-btns>
+        <footer-btns v-if="!isFirstLogin">
             <el-button type="primary" @click="handleSubmit">保存</el-button>
         </footer-btns>
+        <div v-else class="flex justify-center mt-4">
+            <el-button @click="emit('cancel')">取消</el-button>
+            <el-button type="primary" @click="handleSubmit">保存</el-button>
+        </div>
     </div>
 </template>
 
@@ -72,6 +76,16 @@ import { setUserInfo } from '@/api/user'
 import useUserStore from '@/stores/modules/user'
 import feedback from '@/utils/feedback'
 
+const props = defineProps<{
+    isFirstLogin?: boolean
+    tempPassword?: string
+}>()
+
+const emit = defineEmits<{
+    (event: 'success'): void
+    (event: 'cancel'): void
+}>()
+
 const formRef = ref<FormInstance>()
 const userStore = useUserStore()
 // 表单数据
@@ -109,6 +123,10 @@ const getUser = async () => {
         //@ts-ignore
         formData[key] = userInfo[key]
     }
+    // 如果是首次登录强制修改密码，自动填充旧密码
+    if (props.isFirstLogin && props.tempPassword) {
+        formData.password_old = props.tempPassword
+    }
 }
 
 // 设置个人设置
@@ -143,7 +161,11 @@ const setUser = async () => {
         }
     }
     await setUserInfo(formData)
-    userStore.getUserInfo()
+    await userStore.getUserInfo()
+    if (props.isFirstLogin) {
+        feedback.msgSuccess('修改成功')
+        emit('success')
+    }
 }
 
 // 提交数据