befly-admin-ui 1.8.14

package/views/login_1/index.vue

@@ -0,0 +1,400 @@
+<template>
+    <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-section">
+            <div class="login-box">
+                <div class="login-header">
+                    <h2 class="login-title">欢迎回来</h2>
+                    <p class="login-subtitle">请登录您的账户</p>
+                </div>
+
+                <TForm :model="$Data.formData" :rules="$Data.formRules" ref="formRef" class="login-form" :show-message="false" label-width="0">
+                    <TFormItem prop="account">
+                        <TInputAdornment>
+                            <template #prepend>
+                                <TSelect v-model="$Data.formData.loginType" :style="{ width: '110px' }" size="large" :popup-props="{ overlayClassName: 'login-type-select-popup' }">
+                                    <TOption value="username" label="用户名" />
+                                    <TOption value="email" label="邮箱" />
+                                    <TOption value="phone" label="手机号" />
+                                </TSelect>
+                            </template>
+                            <TInput v-model="$Data.formData.account" :placeholder="$Data.formData.loginType === 'username' ? '请输入用户名' : $Data.formData.loginType === 'email' ? '请输入邮箱' : '请输入手机号'" size="large" clearable @enter="apiLogin">
+                                <template #prefix-icon>
+                                    <UserIcon />
+                                </template>
+                            </TInput>
+                        </TInputAdornment>
+                    </TFormItem>
+
+                    <TFormItem prop="password">
+                        <TInput v-model="$Data.formData.password" type="password" placeholder="密码" size="large" clearable @enter="apiLogin">
+                            <template #prefix-icon>
+                                <LockOnIcon />
+                            </template>
+                        </TInput>
+                    </TFormItem>
+
+                    <div class="form-options">
+                        <TCheckbox v-model="$Data.rememberMe">记住我</TCheckbox>
+                        <a href="#" class="link-text">忘记密码？</a>
+                    </div>
+
+                    <TButton theme="primary" class="login-btn" size="large" block :loading="$Data.loading" @click="apiLogin">登录</TButton>
+                </TForm>
+
+                <div class="login-footer">
+                    <p class="copyright">© 2024 Befly. All rights reserved.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { Form as TForm, FormItem as TFormItem, Input as TInput, Button as TButton, Checkbox as TCheckbox, InputAdornment as TInputAdornment, Select as TSelect, Option as TOption, MessagePlugin } from "tdesign-vue-next";
+import { LockOnIcon, UserIcon } from "tdesign-icons-vue-next";
+import { $Http } from "@/plugins/http";
+import { $Storage } from "@/plugins/storage";
+import { hashPassword } from "befly-admin-ui/utils/hashPassword";
+
+const router = useRouter();
+
+const formRef = ref<null | { validate: () => Promise<boolean> }>(null);
+
+// 数据定义
+const $Data = reactive({
+    loading: false,
+    rememberMe: false,
+    formRules: {
+        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
+    },
+    formData: {
+        loginType: "username",
+        account: "",
+        password: ""
+    }
+});
+
+async function apiLogin(): Promise<void> {
+    try {
+        if (formRef.value === null) {
+            MessagePlugin.error("表单未就绪");
+            return;
+        }
+
+        await formRef.value.validate();
+
+        $Data.loading = true;
+
+        const hashedPassword = await hashPassword($Data.formData.password);
+
+        const res = await $Http.post("/core/auth/login", {
+            loginType: $Data.formData.loginType,
+            account: $Data.formData.account,
+            password: hashedPassword
+        });
+
+        $Storage.local.set("token", res.data.token);
+
+        if (res.data.userInfo) {
+            $Storage.local.set("userInfo", res.data.userInfo);
+        }
+
+        MessagePlugin.success(res.msg || "登录成功");
+
+        await router.push("/");
+    } catch (error) {
+        MessagePlugin.error("登录失败");
+    } finally {
+        $Data.loading = false;
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.login-container {
+    display: flex;
+    width: 100%;
+    min-height: 100vh;
+    background: var(--login-bg);
+}
+
+// 左侧装饰区域
+.left-section {
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--login-left-gradient-start) 0%, var(--login-left-gradient-end) 100%);
+    overflow: hidden;
+}
+
+.bg-decoration {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    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;
+        }
+    }
+}
+
+@keyframes float {
+    0%,
+    100% {
+        transform: translateY(0) scale(1);
+    }
+    50% {
+        transform: translateY(-20px) scale(1.05);
+    }
+}
+
+.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;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.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;
+}
+
+.login-header {
+    text-align: center;
+    margin-bottom: 2.5rem;
+}
+
+.login-title {
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--login-title);
+    margin-bottom: 0.5rem;
+}
+
+.login-subtitle {
+    font-size: 1rem;
+    color: var(--login-subtitle);
+}
+
+.login-footer {
+    margin-top: 2rem;
+    text-align: center;
+}
+
+.copyright {
+    font-size: 0.875rem;
+    color: var(--login-subtitle);
+}
+
+.login-form {
+    width: 100%;
+
+    :deep(.t-form__item) {
+        margin-bottom: 1.25rem;
+    }
+
+    :deep(.t-form__controls) {
+        width: 100%;
+    }
+
+    :deep(.t-input-adornment) {
+        width: 100%;
+    }
+
+    :deep(.t-input-adornment__prepend) {
+        padding: 0;
+        border-right: 1px solid var(--login-card-border);
+    }
+
+    :deep(.t-input) {
+        width: 100%;
+        border-radius: 8px;
+        transition: all 0.3s;
+
+        &:hover {
+            border-color: #667eea;
+        }
+
+        &:focus-within {
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+    }
+
+    :deep(.t-input__wrap) {
+        width: 100%;
+    }
+}
+
+.form-options {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
+
+    .link-text {
+        color: var(--login-link);
+        text-decoration: none;
+        transition: color 0.3s;
+
+        &:hover {
+            color: var(--login-link-hover);
+        }
+    }
+}
+
+.login-btn {
+    width: 100%;
+    height: 48px;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    background: linear-gradient(135deg, var(--login-btn-gradient-start) 0%, var(--login-btn-gradient-end) 100%);
+    border: none;
+    transition: all 0.3s;
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px var(--login-btn-shadow);
+    }
+
+    &:active {
+        transform: translateY(0);
+    }
+
+    :deep(.t-button__text) {
+        color: #fff;
+    }
+}
+
+// 响应式设计
+@media (max-width: 1024px) {
+    .login-container {
+        flex-direction: column;
+    }
+
+    .left-section {
+        min-height: 300px;
+        flex: none;
+    }
+
+    .brand-title {
+        font-size: 3rem;
+    }
+
+    .right-section {
+        flex: 1;
+    }
+}
+
+@media (max-width: 768px) {
+    .left-section {
+        min-height: 200px;
+    }
+
+    .brand-title {
+        font-size: 2.5rem;
+    }
+
+    .brand-subtitle {
+        font-size: 1rem;
+        margin-bottom: 2rem;
+    }
+
+    .login-box {
+        padding: 2rem 1.5rem;
+    }
+
+    .login-title {
+        font-size: 1.75rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .right-section {
+        padding: 1rem;
+    }
+
+    .login-box {
+        padding: 1.5rem 1rem;
+        border-radius: 12px;
+    }
+}
+</style>

package/views/people/admin/components/edit.vue

@@ -0,0 +1,173 @@
+<template>
+    <PageDialog v-model="dialogVisible" :title="$Prop.actionType === 'upd' ? '编辑管理员' : '添加管理员'" :confirm-loading="$Data.submitting" @confirm="onSubmit">
+        <div class="dialog-wrapper">
+            <TForm :model="$Data.formData" label-width="80px" label-position="left" label-align="left" :rules="$Data2.formRules" ref="formRef">
+                <TFormItem label="角色" prop="roleCode">
+                    <TSelect v-model="$Data.formData.roleCode" :options="$Data.allRoleLists" :keys="$Data.keys" placeholder="请选择角色" />
+                </TFormItem>
+                <TFormItem label="用户名" prop="username">
+                    <TInput v-model="$Data.formData.username" placeholder="请输入用户名" :disabled="$Prop.actionType === 'upd'" />
+                </TFormItem>
+                <TFormItem v-if="$Prop.actionType === 'add'" label="密码" prop="password">
+                    <TInput v-model="$Data.formData.password" type="password" placeholder="请输入密码，至少6位" />
+                </TFormItem>
+                <TFormItem label="昵称" prop="nickname">
+                    <TInput v-model="$Data.formData.nickname" placeholder="请输入昵称" />
+                </TFormItem>
+                <TFormItem v-if="$Prop.actionType === 'upd'" label="状态" prop="state">
+                    <TRadioGroup v-model="$Data.formData.state">
+                        <TRadio :label="1">正常</TRadio>
+                        <TRadio :label="2">禁用</TRadio>
+                    </TRadioGroup>
+                </TFormItem>
+            </TForm>
+        </div>
+    </PageDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+
+import {
+    //
+    Form as TForm,
+    FormItem as TFormItem,
+    Input as TInput,
+    Select as TSelect,
+    RadioGroup as TRadioGroup,
+    Radio as TRadio,
+    MessagePlugin
+} from "tdesign-vue-next";
+import PageDialog from "@/components/pageDialog.vue";
+import { $Http } from "@/plugins/http";
+import { fieldClear } from "befly-admin-ui/utils/fieldClear";
+import { hashPassword } from "befly-admin-ui/utils/hashPassword";
+
+const $Prop = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    actionType: {
+        type: String,
+        default: "add"
+    },
+    rowData: {
+        type: Object,
+        default: {}
+    }
+});
+
+const $Emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "success"): void;
+}>();
+
+type PageDialogEventContext = {
+    close: () => void;
+};
+
+// 表单引用
+type TDesignFormInstance = {
+    validate: () => Promise<unknown>;
+};
+
+const formRef = ref<TDesignFormInstance | null>(null);
+
+const dialogVisible = computed({
+    get: () => $Prop.modelValue,
+    set: (value) => {
+        $Emit("update:modelValue", value);
+    }
+});
+
+const $Data = reactive({
+    submitting: false,
+    allRoleLists: [],
+    keys: {
+        label: "name",
+        value: "code"
+    },
+    formData: {
+        id: null,
+        username: "",
+        password: "",
+        nickname: "",
+        roleCode: null,
+        state: 1
+    }
+});
+
+const $Data2 = reactive({
+    formRules: {
+        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+        password: [
+            { required: true, message: "请输入密码", trigger: "blur" },
+            { min: 6, message: "密码至少6位", trigger: "blur" }
+        ],
+        roleCode: [{ required: true, message: "请选择角色", trigger: "change" }],
+        nickname: [{ min: 2, max: 50, message: "昵称长度在 2 到 50 个字符", trigger: "blur" }]
+    }
+});
+
+async function initData(): Promise<void> {
+    await apiRoleLists();
+    if ($Prop.actionType === "upd" && $Prop.rowData.id) {
+        $Data.formData = Object.assign({}, $Prop.rowData);
+    }
+}
+
+async function apiRoleLists(): Promise<void> {
+    try {
+        const result = await $Http.post(
+            "/core/role/all",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        $Data.allRoleLists = result.data || [];
+    } catch (_error) {
+        MessagePlugin.error("加载角色列表失败");
+    }
+}
+
+async function onSubmit(context?: PageDialogEventContext): Promise<void> {
+    try {
+        const form = formRef.value;
+        if (!form) {
+            MessagePlugin.warning("表单未就绪");
+            return;
+        }
+
+        const valid = await form.validate();
+        if (!valid) return;
+
+        $Data.submitting = true;
+        const formData = ($Prop.actionType === "add" ? fieldClear($Data.formData, { omitKeys: ["id", "state"] }) : fieldClear($Data.formData, { omitKeys: ["password"] })) as Record<string, unknown>;
+
+        const password = typeof formData["password"] === "string" ? String(formData["password"]) : "";
+        if ($Prop.actionType === "add" && password) {
+            formData["password"] = await hashPassword(password);
+        }
+
+        const result = await $Http.post($Prop.actionType === "upd" ? "/core/admin/upd" : "/core/admin/ins", formData);
+
+        MessagePlugin.success(result.msg);
+        $Emit("success");
+        if (context && typeof context.close === "function") {
+            context.close();
+        }
+    } catch (error) {
+        MessagePlugin.error((error as { msg?: string }).msg || "提交失败");
+    } finally {
+        $Data.submitting = false;
+    }
+}
+
+initData();
+</script>
+
+<style scoped lang="scss">
+// 可根据需要添加样式
+</style>

package/views/people/admin/index.vue

@@ -0,0 +1,121 @@
+<template>
+    <PagedTableDetail class="page-admin" :columns="$Data.columns" :endpoints="$Data.endpoints">
+        <template #toolLeft>
+            <TButton theme="primary" @click="onAdd">
+                <template #icon>
+                    <AddIcon />
+                </template>
+            </TButton>
+        </template>
+
+        <template #toolRight="scope">
+            <TButton shape="circle" @click="onReload(scope.reload)">
+                <template #icon>
+                    <RefreshIcon />
+                </template>
+            </TButton>
+        </template>
+
+        <template #state="{ row }">
+            <TTag v-if="row.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
+            <TTag v-else-if="row.state === 2" shape="round" theme="warning" variant="light-outline">禁用</TTag>
+            <TTag v-else-if="row.state === 0" shape="round" theme="danger" variant="light-outline">删除</TTag>
+        </template>
+
+        <template #operation="{ row, deleteRow }">
+            <TDropdown trigger="click" placement="bottom-right" @click="onDropdownAction($event, row, deleteRow)">
+                <TButton theme="primary" size="small">
+                    操作
+                    <template #suffix><ChevronDownIcon /></template>
+                </TButton>
+                <TDropdownMenu slot="dropdown">
+                    <TDropdownItem value="upd">
+                        <EditIcon />
+                        编辑
+                    </TDropdownItem>
+                    <TDropdownItem value="del" :divider="true">
+                        <DeleteIcon />
+                        删除
+                    </TDropdownItem>
+                </TDropdownMenu>
+            </TDropdown>
+        </template>
+
+        <template #dialogs="scope">
+            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
+        </template>
+    </PagedTableDetail>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Tag as TTag } from "tdesign-vue-next";
+import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon, RefreshIcon } from "tdesign-icons-vue-next";
+import EditDialog from "./components/edit.vue";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
+import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
+
+// 响应式数据
+const $Data = reactive({
+    columns: withDefaultColumns([
+        { colKey: "username", title: "用户名", fixed: "left" },
+        { colKey: "nickname", title: "昵称" },
+        { colKey: "roleCode", title: "角色" },
+        { colKey: "state", title: "状态" },
+        { colKey: "operation", title: "操作" }
+    ]),
+    endpoints: {
+        list: {
+            path: "/core/admin/list",
+            dropValues: [""]
+        },
+        delete: {
+            path: "/core/admin/del",
+            idKey: "id",
+            confirm: (row) => ({
+                header: "确认删除",
+                body: `确认删除“${row.username}”吗？`,
+                confirmBtn: "删除"
+            })
+        }
+    },
+    editVisible: false,
+    actionType: "add",
+    rowData: {}
+});
+
+function onAdd(): void {
+    onAction("add", {});
+}
+
+function onReload(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
+
+function onDialogSuccess(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
+
+function onAction(command: string, rowData: Record<string, unknown>): void {
+    $Data.actionType = command;
+    $Data.rowData = rowData;
+    if (command === "add" || command === "upd") {
+        $Data.editVisible = true;
+    }
+}
+
+function onDropdownAction(data: unknown, rowData: Record<string, unknown>, deleteRow: (row: Record<string, unknown>) => void): void {
+    const record = data as Record<string, unknown>;
+    const rawValue = record && record["value"] ? record["value"] : "";
+    const cmd = rawValue ? String(rawValue) : "";
+    if (cmd === "del") {
+        deleteRow(rowData);
+        return;
+    }
+    onAction(cmd, rowData);
+}
+</script>
+
+<style scoped lang="scss">
+// 样式继承自全局 page-table
+</style>

package/views/people/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <RouterView />
+</template>