befly-admin 3.2.0 → 3.3.0

package/src/views/login/components/emailLoginForm.vue

@@ -0,0 +1,163 @@
+<template>
+    <tiny-form :model="$Data.formData" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)" class="login-form" label-width="90px" label-position="left" :show-message="false">
+        <tiny-form-item prop="account" label="账号">
+            <tiny-input v-model="$Data.formData.account" placeholder="请输入用户名或邮箱" size="large" clearable>
+                <template #prefix-icon>
+                    <Icon name="User" :size="18" />
+                </template>
+            </tiny-input>
+        </tiny-form-item>
+
+        <tiny-form-item prop="password" label="密码">
+            <tiny-input v-model="$Data.formData.password" type="password" placeholder="请输入密码" size="large" clearable>
+                <template #prefix-icon>
+                    <Icon name="Lock" :size="18" />
+                </template>
+            </tiny-input>
+        </tiny-form-item>
+
+        <div class="form-footer">
+            <a href="#" class="forgot-password">忘记密码？</a>
+        </div>
+
+        <tiny-button theme="primary" class="auth-btn" size="large" :loading="$Data.loading" @click="$Method.apiLogin"> 登录 </tiny-button>
+    </tiny-form>
+</template>
+
+<script setup>
+const router = useRouter();
+
+// 表单引用
+const $From = $shallowRef({
+    form: null
+});
+
+// 数据定义
+const $Data = $ref({
+    loading: false,
+    formData: {
+        account: '',
+        password: ''
+    }
+});
+
+const $Data2 = $shallowRef({
+    formRules: {
+        account: [{ required: true, message: '请输入用户名或邮箱', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+    }
+});
+
+// 方法定义
+const $Method = {
+    async apiLogin() {
+        try {
+            const valid = await $From.form.validate();
+
+            $Data.loading = true;
+
+            const res = await $Http('/core/auth/login', {
+                account: $Data.formData.account,
+                password: $Data.formData.password
+            });
+
+            // 先保存 token
+            $Storage.local.set('token', res.data.token);
+
+            // 如果返回用户信息,也可以存储
+            if (res.data.userInfo) {
+                $Storage.local.set('userInfo', res.data.userInfo);
+            }
+
+            Modal.message({
+                message: '登录成功',
+                status: 'success'
+            });
+
+            // 跳转到首页，路由守卫会自动加载菜单
+            await router.push('/');
+        } catch (error) {
+            console.log('🔥[ error ]-77', error);
+        } finally {
+            $Data.loading = false;
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.login-form {
+    width: 100%;
+    max-width: 450px;
+}
+
+.tiny-form-item {
+    width: 100%;
+    margin-bottom: 1.2rem;
+
+    :deep(.tiny-form__controls) {
+        width: 100%;
+    }
+
+    :deep(.tiny-input) {
+        width: 100%;
+        background: #f8f9fa;
+        border: 1px solid #e0e0e0;
+        border-radius: 6px;
+        transition: all 0.3s;
+
+        &:hover {
+            border-color: #48b19f;
+        }
+
+        &:focus-within {
+            border-color: #48b19f;
+            background: #fff;
+        }
+
+        input {
+            padding: 0.75rem 1rem;
+        }
+    }
+}
+
+.form-footer {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 1rem;
+}
+
+.forgot-password {
+    font-size: 0.8rem;
+    color: #888;
+    text-decoration: none;
+
+    &:hover {
+        color: #48b19f;
+    }
+}
+
+.auth-btn {
+    width: 100% !important;
+    max-width: 100%;
+    height: 44px;
+    border-radius: 6px;
+    background: #48b19f;
+    border: none;
+    font-size: 0.95rem;
+    font-weight: 600;
+    margin-top: 0.5rem;
+    transition: all 0.3s;
+
+    &:hover {
+        background: #3a9d8f;
+        transform: translateY(-1px);
+        box-shadow: 0 3px 10px rgba(72, 177, 159, 0.3);
+    }
+
+    :deep(.tiny-button__text) {
+        color: #fff;
+    }
+}
+</style>

package/src/views/login/components/registerForm.vue

@@ -0,0 +1,168 @@
+<template>
+    <tiny-form :model="$Data.formData" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)" class="login-form" label-width="70px" label-position="left">
+        <tiny-form-item prop="username" label="用户名">
+            <tiny-input v-model="$Data.formData.username" placeholder="请输入用户名" size="large" clearable>
+                <template #prefix-icon>
+                    <Icon name="User" :size="18" />
+                </template>
+            </tiny-input>
+        </tiny-form-item>
+
+        <tiny-form-item prop="email" label="邮箱">
+            <tiny-input v-model="$Data.formData.email" placeholder="请输入邮箱" size="large" clearable>
+                <template #prefix-icon>
+                    <Icon name="Mail" :size="18" />
+                </template>
+            </tiny-input>
+        </tiny-form-item>
+
+        <tiny-form-item prop="password" label="密码">
+            <tiny-input v-model="$Data.formData.password" type="password" placeholder="请输入密码" size="large" clearable>
+                <template #prefix-icon>
+                    <Icon name="Lock" :size="18" />
+                </template>
+            </tiny-input>
+        </tiny-form-item>
+
+        <tiny-form-item prop="nickname" label="昵称">
+            <tiny-input v-model="$Data.formData.nickname" placeholder="请输入昵称（选填）" size="large" clearable>
+                <template #prefix-icon>
+                    <Icon name="Smile" :size="18" />
+                </template>
+            </tiny-input>
+        </tiny-form-item>
+
+        <tiny-button theme="primary" class="auth-btn" size="large" :loading="$Data.loading" @click="$Method.handleSubmit"> 注册 </tiny-button>
+    </tiny-form>
+</template>
+
+<script setup>
+const emit = defineEmits(['success']);
+
+// 表单引用
+const $From = $shallowRef({
+    form: null
+});
+
+// 数据定义
+const $Data = $ref({
+    loading: false,
+    formData: {
+        username: '',
+        email: '',
+        password: '',
+        nickname: ''
+    }
+});
+
+const $Data2 = $shallowRef({
+    formRules: {
+        username: [
+            { required: true, message: '请输入用户名', trigger: 'blur' },
+            { min: 3, max: 20, message: '用户名长度为 3-20 个字符', trigger: 'blur' }
+        ],
+        email: [
+            { required: true, message: '请输入邮箱', trigger: 'blur' },
+            { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
+        ],
+        password: [
+            { required: true, message: '请输入密码', trigger: 'blur' },
+            { min: 6, message: '密码长度至少 6 个字符', trigger: 'blur' }
+        ]
+        // nickname 是选填项，不需要验证规则
+    }
+});
+
+// 方法定义
+const $Method = {
+    async handleSubmit() {
+        const valid = await $From.form.validate();
+        if (!valid) return;
+
+        $Data.loading = true;
+
+        try {
+            await $Http('/core/register', $Data.formData);
+            MessagePlugin.success('注册成功，请登录');
+
+            // 清空表单
+            $Method.resetForm();
+
+            // 通知父组件注册成功，切换到登录模式
+            emit('success');
+        } catch (error) {
+            // 错误已经在 request 拦截器中处理
+        } finally {
+            $Data.loading = false;
+        }
+    },
+
+    // 清空表单
+    resetForm() {
+        $Data.formData.username = '';
+        $Data.formData.email = '';
+        $Data.formData.password = '';
+        $Data.formData.nickname = '';
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.login-form {
+    width: 100%;
+    max-width: 450px;
+}
+
+.tiny-form-item {
+    width: 100%;
+    margin-bottom: 1.2rem;
+
+    :deep(.tiny-form__controls) {
+        width: 100%;
+    }
+
+    :deep(.tiny-input) {
+        width: 100%;
+        background: #f8f9fa;
+        border: 1px solid #e0e0e0;
+        border-radius: 6px;
+        transition: all 0.3s;
+
+        &:hover {
+            border-color: #48b19f;
+        }
+
+        &:focus-within {
+            border-color: #48b19f;
+            background: #fff;
+        }
+
+        input {
+            padding: 0.75rem 1rem;
+        }
+    }
+}
+
+.auth-btn {
+    width: 100% !important;
+    max-width: 100%;
+    height: 44px;
+    border-radius: 6px;
+    background: #48b19f;
+    border: none;
+    font-size: 0.95rem;
+    font-weight: 600;
+    margin-top: 0.5rem;
+    transition: all 0.3s;
+
+    &:hover {
+        background: #3a9d8f;
+        transform: translateY(-1px);
+        box-shadow: 0 3px 10px rgba(72, 177, 159, 0.3);
+    }
+
+    :deep(.tiny-button__text) {
+        color: #fff;
+    }
+}
+</style>

package/src/views/login/components/welcomePanel.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="panel-content" v-if="!isSignUp">
+        <h2>你好，朋友！</h2>
+        <p>填写个人信息，开始使用</p>
+        <button class="toggle-btn" @click="$emit('toggle')">注册账号</button>
+    </div>
+    <div class="panel-content" v-else>
+        <h2>欢迎回来！</h2>
+        <p>使用您的账号登录</p>
+        <button class="toggle-btn" @click="$emit('toggle')">立即登录</button>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    isSignUp: {
+        type: Boolean,
+        default: false
+    }
+});
+
+defineEmits(['toggle']);
+</script>
+
+<style scoped lang="scss">
+.panel-content {
+    text-align: center;
+    padding: 2rem;
+    max-width: 400px;
+
+    h2 {
+        font-size: 2rem;
+        font-weight: 600;
+        margin-bottom: 1rem;
+    }
+
+    p {
+        font-size: 1rem;
+        line-height: 1.6;
+        margin-bottom: 2rem;
+        opacity: 0.9;
+    }
+
+    .toggle-btn {
+        padding: 0.8rem 3rem;
+        border: 2px solid #fff;
+        background: transparent;
+        color: #fff;
+        border-radius: 25px;
+        font-size: 0.9rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover {
+            background: #fff;
+            color: #48b19f;
+        }
+    }
+}
+</style>