@befly-addon/admin 1.0.37 → 1.0.38

package/views/login/index_1.vue

@@ -1,189 +1,226 @@
 <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 class="login-container">
+        <!-- 左侧装饰区域 -->
+        <div class="left-section">
+            <div class="bg-decoration">
+                <div class="circle circle-1"></div>
+                <div class="circle circle-2"></div>
+                <div class="circle circle-3"></div>
+            </div>
+            <div class="welcome-content">
+                <h1 class="brand-title">Befly</h1>
+                <p class="brand-subtitle">轻量级业务快速开发框架</p>
+            </div>
         </div>
 
-        <!-- 右侧表单区域 -->
-        <div class="right-panel">
-            <!-- 登录表单 -->
-            <div class="form-container sign-in-form" :class="{ active: !$Data.isSignUp }">
-                <h2 class="form-title">登录到 Befly</h2>
+        <!-- 右侧登录区域 -->
+        <div class="right-section">
+            <div class="login-box">
+                <div class="login-header">
+                    <h2 class="login-title">欢迎回来</h2>
+                    <p class="login-subtitle">请登录您的账户</p>
+                </div>
 
-                <!-- 邮箱登录 -->
                 <EmailLoginForm />
-            </div>
-
-            <!-- 注册表单 -->
-            <div class="form-container sign-up-form" :class="{ active: $Data.isSignUp }">
-                <h2 class="form-title">注册账号</h2>
 
-                <RegisterForm @success="$Method.handleRegisterSuccess" />
+                <div class="login-footer">
+                    <p class="copyright">© 2024 Befly. All rights reserved.</p>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-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 {
+.login-container {
     display: flex;
     width: 100%;
     min-height: 100vh;
-    overflow: hidden;
-    position: relative;
-    background: #fff;
+    background: var(--login-bg);
 }
 
-// 青色滑动背景块
-.left-panel {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 50%;
-    height: 100%;
+// 左侧装饰区域
+.left-section {
+    flex: 1;
+    position: relative;
     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;
+    background: linear-gradient(135deg, var(--login-left-gradient-start) 0%, var(--login-left-gradient-end) 100%);
+    overflow: hidden;
 }
 
-// 表单区域容器（全屏背景）
-.right-panel {
+.bg-decoration {
     position: absolute;
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 1;
+    overflow: hidden;
+
+    .circle {
+        position: absolute;
+        border-radius: 50%;
+        background: var(--login-circle-bg);
+        animation: float 20s infinite ease-in-out;
+
+        &.circle-1 {
+            width: 400px;
+            height: 400px;
+            top: -100px;
+            left: -100px;
+            animation-delay: 0s;
+        }
+
+        &.circle-2 {
+            width: 300px;
+            height: 300px;
+            bottom: -50px;
+            right: -50px;
+            animation-delay: 7s;
+        }
+
+        &.circle-3 {
+            width: 200px;
+            height: 200px;
+            top: 50%;
+            right: 10%;
+            animation-delay: 14s;
+        }
+    }
 }
 
-// 注册模式下青色块移动到右侧
-.auth-container.sign-up-mode {
-    .left-panel {
-        transform: translateX(100%);
+@keyframes float {
+    0%,
+    100% {
+        transform: translateY(0) scale(1);
+    }
+    50% {
+        transform: translateY(-20px) scale(1.05);
     }
 }
 
-// 表单容器（跟随颜色区域滑动）
-.form-container {
-    position: absolute;
-    width: 50%;
-    height: 100%;
-    top: 0;
+.welcome-content {
+    position: relative;
+    z-index: 1;
+    color: #fff;
+    text-align: center;
+    padding: 2rem;
+}
+
+.brand-title {
+    font-size: 4rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    letter-spacing: 2px;
+    color: var(--login-brand-title);
+}
+
+.brand-subtitle {
+    font-size: 1.25rem;
+    margin-bottom: 3rem;
+    color: var(--login-brand-subtitle);
+}
+
+// 右侧登录区域
+.right-section {
+    flex: 1;
     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;
-    }
+    padding: 2rem;
 }
 
-// 登录模式：登录表单在右侧
-.auth-container:not(.sign-up-mode) {
-    .sign-in-form {
-        right: 0;
-    }
+.login-box {
+    width: 100%;
+    max-width: 440px;
+    background: var(--login-card-bg);
+    border: 1px solid var(--login-card-border);
+    border-radius: 16px;
+    box-shadow: 0 10px 40px var(--login-card-shadow);
+    padding: 3rem 2.5rem;
+}
 
-    .sign-up-form {
-        left: 0;
-    }
+.login-header {
+    text-align: center;
+    margin-bottom: 2.5rem;
 }
 
-// 注册模式：注册表单在左侧，登录表单在右侧
-.auth-container.sign-up-mode {
-    .sign-in-form {
-        right: -50%;
-    }
+.login-title {
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--login-title);
+    margin-bottom: 0.5rem;
+}
 
-    .sign-up-form {
-        left: 0;
-    }
+.login-subtitle {
+    font-size: 1rem;
+    color: var(--login-subtitle);
 }
 
-.form-title {
-    font-size: 1.8rem;
-    color: #333;
-    margin-bottom: 1.5rem;
-    font-weight: 600;
+.login-footer {
+    margin-top: 2rem;
     text-align: center;
-    width: 100%;
+}
+
+.copyright {
+    font-size: 0.875rem;
+    color: var(--login-subtitle);
 }
 
 // 响应式设计
-@media (max-width: 968px) {
-    .auth-container {
+@media (max-width: 1024px) {
+    .login-container {
         flex-direction: column;
     }
 
-    .left-panel,
-    .right-panel {
+    .left-section {
+        min-height: 300px;
         flex: none;
-        width: 100%;
     }
 
-    .left-panel {
-        order: 1 !important;
-        position: relative;
+    .brand-title {
+        font-size: 3rem;
+    }
+
+    .right-section {
+        flex: 1;
+    }
+}
+
+@media (max-width: 768px) {
+    .left-section {
         min-height: 200px;
     }
 
-    .right-panel {
-        order: 2 !important;
-        min-height: 500px;
+    .brand-title {
+        font-size: 2.5rem;
     }
 
-    .form-container {
-        width: 100%;
-        padding: 2rem 1rem;
-        position: static;
+    .brand-subtitle {
+        font-size: 1rem;
+        margin-bottom: 2rem;
     }
 
-    .auth-container.sign-up-mode {
-        .left-panel {
-            transform: none;
-        }
+    .login-box {
+        padding: 2rem 1.5rem;
+    }
+
+    .login-title {
+        font-size: 1.75rem;
     }
 }
 
-@media (max-width: 576px) {
-    .form-title {
-        font-size: 1.5rem;
-        margin-bottom: 1.5rem;
+@media (max-width: 480px) {
+    .right-section {
+        padding: 1rem;
+    }
+
+    .login-box {
+        padding: 1.5rem 1rem;
+        border-radius: 12px;
     }
 }
 </style>

package/views/role/components/api.vue

@@ -214,8 +214,8 @@ $Method.initData();
 
         .api-group {
             margin-bottom: 16px;
-            border: 1px solid $border-color;
-            border-radius: $border-radius-small;
+            border: 1px solid var(--border-color);
+            border-radius: var(--border-radius-small);
             overflow: hidden;
 
             &:last-child {
@@ -224,10 +224,10 @@ $Method.initData();
 
             .group-header {
                 padding: 12px 16px;
-                background-color: $bg-color-hover;
+                background-color: var(--bg-color-hover);
                 font-weight: 500;
-                font-size: $font-size-sm;
-                color: $text-primary;
+                font-size: var(--font-size-sm);
+                color: var(--text-primary);
                 display: flex;
                 align-items: center;
                 gap: 8px;
@@ -237,15 +237,17 @@ $Method.initData();
                     width: 8px;
                     height: 8px;
                     border-radius: 50%;
-                    background-color: $primary-color;
+                    background-color: var(--primary-color);
                     opacity: 0.3;
                     flex-shrink: 0;
                 }
             }
 
-            .api-checkbox-list {
-                padding: 16px;
-                background-color: $bg-color-container;
+            .api-item {
+                padding: 8px 16px;
+                cursor: pointer;
+                transition: background-color 0.2s;
+                background-color: var(--bg-color-container);
 
                 :deep(.t-checkbox-group) {
                     display: flex;

package/views/role/components/edit.vue

@@ -1,5 +1,5 @@
 <template>
-    <TDialog v-model:visible="$Data.visible" :title="$Prop.actionType === 'upd' ? '更新角色' : '添加角色'" width="600px" :append-to-body="true" :show-footer="true" :esc-closable="false" top="10vh" @close="$Method.onClose">
+    <TDialog v-model:visible="$Data.visible" :header="$Prop.actionType === 'upd' ? '更新角色' : '添加角色'" width="600px" :append-to-body="true" :show-footer="true" :esc-closable="false" top="10vh" @close="$Method.onClose">
         <div class="comp-role-edit">
             <TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
                 <TFormItem label="角色名称" prop="name">
@@ -30,7 +30,18 @@
 </template>
 
 <script setup>
-import { Dialog as TDialog, Form as TForm, FormItem as TFormItem, Input as TInput, InputNumber as TInputNumber, RadioGroup as TRadioGroup, Radio as TRadio, Button as TButton, MessagePlugin } from 'tdesign-vue-next';
+import {
+    //
+    Dialog as TDialog,
+    Form as TForm,
+    FormItem as TFormItem,
+    Input as TInput,
+    InputNumber as TInputNumber,
+    RadioGroup as TRadioGroup,
+    Radio as TRadio,
+    Button as TButton,
+    MessagePlugin
+} from 'tdesign-vue-next';
 import { $Http } from '@/plugins/http';
 
 const $Prop = defineProps({

package/views/role/index.vue

@@ -6,7 +6,6 @@
                     <template #icon>
                         <ILucidePlus />
                     </template>
-                    添加角色
                 </TButton>
             </div>
             <div class="right">
@@ -14,7 +13,6 @@
                     <template #icon>
                         <ILucideRotateCw />
                     </template>
-                    刷新
                 </TButton>
             </div>
         </div>

package/utils/scanBeflyAddonViews.js

@@ -1,43 +0,0 @@
-import { readdirSync, existsSync } from 'node:fs';
-import { join } from 'node:path';
-
-/**
- * 扫描所有 @befly-addon 包的 views 目录
- * 用于 unplugin-vue-router 的 routesFolder 配置
- * 注意：此函数只能在 vite.config.ts 中使用（Node.js 环境），不能在浏览器中使用
- * @returns 路由文件夹配置数组
- */
-export function scanBeflyAddonViews() {
-    // 使用绝对路径：基于项目根目录（process.cwd()）
-    const projectRoot = process.cwd();
-    const addonBasePath = join(projectRoot, 'node_modules', '@befly-addon');
-    const routesFolders = [];
-
-    if (!existsSync(addonBasePath)) {
-        return routesFolders;
-    }
-
-    try {
-        const addonDirs = readdirSync(addonBasePath);
-
-        for (const addonName of addonDirs) {
-            const addonPath = join(addonBasePath, addonName);
-
-            // 检查是否为目录（包括符号链接）
-            if (!existsSync(addonPath)) continue;
-
-            const viewsPath = join(addonPath, 'views');
-
-            if (existsSync(viewsPath)) {
-                routesFolders.push({
-                    src: viewsPath,
-                    path: `addon/${addonName}/`
-                });
-            }
-        }
-    } catch (error) {
-        console.error('扫描 @befly-addon 目录失败:', error);
-    }
-
-    return routesFolders;
-}

package/views/admin/components/role.vue

@@ -1,138 +0,0 @@
-<template>
-    <TDialog v-model:visible="$Data.visible" title="分配角色" width="600px" :append-to-body="true" :show-footer="true" :esc-closable="false" top="20vh" @close="$Method.onClose">
-        <div class="role-dialog">
-            <div class="user-info">
-                <TTag type="info">{{ $Prop.rowData.username }}</TTag>
-                <span class="user-email">{{ $Prop.rowData.email }}</span>
-            </div>
-            <TDivider />
-            <TSelect v-model="$Data.checkedRoleCode" :options="$Data.roleOptions" placeholder="请选择角色" />
-        </div>
-        <template #footer>
-            <TButton @click="$Method.onClose">取消</TButton>
-            <TButton theme="primary" @click="$Method.onSubmit">确定</TButton>
-        </template>
-    </TDialog>
-</template>
-
-<script setup>
-import { Dialog as TDialog, Tag as TTag, Divider as TDivider, Select as TSelect, Button as TButton, MessagePlugin } from 'tdesign-vue-next';
-import { $Http } from '@/plugins/http';
-
-const $Prop = defineProps({
-    modelValue: {
-        type: Boolean,
-        default: false
-    },
-    rowData: {
-        type: Object,
-        default: {}
-    }
-});
-
-const $Emit = defineEmits(['update:modelValue', 'success']);
-
-const $Data = $ref({
-    visible: false,
-    roleOptions: [],
-    checkedRoleCode: ''
-});
-
-// 方法集合
-const $Method = {
-    async initData() {
-        $Method.onShow();
-        await Promise.all([$Method.apiRoleList(), $Method.apiAdminRoleDetail()]);
-    },
-
-    onShow() {
-        setTimeout(() => {
-            $Data.visible = $Prop.modelValue;
-        }, 100);
-    },
-
-    onClose() {
-        $Data.visible = false;
-        setTimeout(() => {
-            $Emit('update:modelValue', false);
-        }, 300);
-    },
-
-    // 加载角色列表
-    async apiRoleList() {
-        try {
-            const res = await $Http('/addon/admin/role/list', {
-                page: 1,
-                limit: 1000
-            });
-            const roleList = res.data.lists || [];
-            $Data.roleOptions = roleList
-                .filter((role) => role.state === 1)
-                .map((role) => ({
-                    label: role.name,
-                    value: role.code
-                }));
-        } catch (error) {
-            console.error('加载角色列表失败:', error);
-            MessagePlugin.info({ message: '加载角色列表失败', status: 'error' });
-        }
-    },
-
-    // 加载管理员角色
-    async apiAdminRoleDetail() {
-        if (!$Prop.rowData.id) return;
-
-        try {
-            const res = await $Http('/addon/admin/admin/roleDetail', {
-                adminId: $Prop.rowData.id
-            });
-            $Data.checkedRoleCode = res.data.roleCode || '';
-        } catch (error) {
-            console.error('加载用户角色失败:', error);
-        }
-    },
-
-    // 提交角色分配
-    async onSubmit() {
-        if (!$Data.checkedRoleCode) {
-            MessagePlugin.info({ message: '请选择角色', status: 'warning' });
-            return;
-        }
-
-        try {
-            const res = await $Http('/addon/admin/admin/roleSave', {
-                adminId: $Prop.rowData.id,
-                roleCode: $Data.checkedRoleCode
-            });
-
-            if (res.code === 0) {
-                MessagePlugin.info({ message: '角色分配成功', status: 'success' });
-                $Method.onClose();
-                $Emit('success');
-            } else {
-                MessagePlugin.info({ message: res.msg || '分配失败', status: 'error' });
-            }
-        } catch (error) {
-            console.error('分配失败:', error);
-            MessagePlugin.info({ message: '分配失败', status: 'error' });
-        }
-    }
-};
-
-$Method.initData();
-</script>
-
-<style scoped lang="scss">
-.role-dialog {
-    .user-info {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        margin-bottom: 16px;
-
-        .user-email {
-            color: $text-secondary;
-        }
-    }
-}
-</style>