@befly-addon/admin 1.0.10 → 1.0.11

package/views/login/components/emailLoginForm.vue

@@ -0,0 +1,167 @@
+<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>
+                    <i-lucide:user style="width: 18px; height: 18px" />
+                </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>
+                    <i-lucide:lock style="width: 18px; height: 18px" />
+                </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 lang="ts">
+import { ref, shallowRef } from 'vue';
+import { useRouter } from 'vue-router';
+import { Modal } from '@opentiny/vue';
+
+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('/addon/admin/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/views/login/components/registerForm.vue

@@ -0,0 +1,170 @@
+<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>
+                    <i-lucide:user style="width: 18px; height: 18px" />
+                </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>
+                    <i-lucide:mail style="width: 18px; height: 18px" />
+                </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>
+                    <i-lucide:lock style="width: 18px; height: 18px" />
+                </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>
+                    <i-lucide:smile style="width: 18px; height: 18px" />
+                </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>
+import { ref, shallowRef } from 'vue';
+
+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('/addon/admin/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/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>

package/views/login/index.vue

@@ -0,0 +1,191 @@
+<template>
+    <div class="auth-container" :class="{ 'sign-up-mode': $Data.isSignUp }">
+        <!-- 左侧欢迎区域 -->
+        <div class="left-panel">
+            <WelcomePanel :is-sign-up="$Data.isSignUp" @toggle="$Method.toggleMode" />
+        </div>
+
+        <!-- 右侧表单区域 -->
+        <div class="right-panel">
+            <!-- 登录表单 -->
+            <div class="form-container sign-in-form" :class="{ active: !$Data.isSignUp }">
+                <h2 class="form-title">登录到 Befly</h2>
+
+                <!-- 邮箱登录 -->
+                <EmailLoginForm />
+            </div>
+
+            <!-- 注册表单 -->
+            <div class="form-container sign-up-form" :class="{ active: $Data.isSignUp }">
+                <h2 class="form-title">注册账号</h2>
+
+                <RegisterForm @success="$Method.handleRegisterSuccess" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+import WelcomePanel from './components/welcomePanel.vue';
+import EmailLoginForm from './components/emailLoginForm.vue';
+import RegisterForm from './components/registerForm.vue';
+
+// 数据定义
+const $Data = $ref({
+    isSignUp: false
+});
+
+// 方法定义
+const $Method = {
+    // 切换登录/注册模式
+    toggleMode() {
+        $Data.isSignUp = !$Data.isSignUp;
+    },
+
+    // 注册成功后切换到登录模式
+    handleRegisterSuccess() {
+        $Data.isSignUp = false;
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.auth-container {
+    display: flex;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    position: relative;
+    background: #fff;
+}
+
+// 青色滑动背景块
+.left-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #48b19f 0%, #3a9d8f 100%);
+    color: #fff;
+    z-index: 5;
+    transition: transform 0.5s ease-in-out;
+}
+
+// 表单区域容器（全屏背景）
+.right-panel {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+// 注册模式下青色块移动到右侧
+.auth-container.sign-up-mode {
+    .left-panel {
+        transform: translateX(100%);
+    }
+}
+
+// 表单容器（跟随颜色区域滑动）
+.form-container {
+    position: absolute;
+    width: 50%;
+    height: 100%;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 2rem;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.5s ease-in-out;
+
+    &.active {
+        opacity: 1;
+        pointer-events: all;
+    }
+}
+
+// 登录模式：登录表单在右侧
+.auth-container:not(.sign-up-mode) {
+    .sign-in-form {
+        right: 0;
+    }
+
+    .sign-up-form {
+        left: 0;
+    }
+}
+
+// 注册模式：注册表单在左侧，登录表单在右侧
+.auth-container.sign-up-mode {
+    .sign-in-form {
+        right: -50%;
+    }
+
+    .sign-up-form {
+        left: 0;
+    }
+}
+
+.form-title {
+    font-size: 1.8rem;
+    color: #333;
+    margin-bottom: 1.5rem;
+    font-weight: 600;
+    text-align: center;
+    width: 100%;
+}
+
+// 响应式设计
+@media (max-width: 968px) {
+    .auth-container {
+        flex-direction: column;
+    }
+
+    .left-panel,
+    .right-panel {
+        flex: none;
+        width: 100%;
+    }
+
+    .left-panel {
+        order: 1 !important;
+        position: relative;
+        min-height: 200px;
+    }
+
+    .right-panel {
+        order: 2 !important;
+        min-height: 500px;
+    }
+
+    .form-container {
+        width: 100%;
+        padding: 2rem 1rem;
+        position: static;
+    }
+
+    .auth-container.sign-up-mode {
+        .left-panel {
+            transform: none;
+        }
+    }
+}
+
+@media (max-width: 576px) {
+    .form-title {
+        font-size: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+}
+</style>