befly-admin 3.0.1

package/src/styles/index.scss

@@ -0,0 +1,198 @@
+/* 全局基础样式 */
+
+* {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'PingFang SC', 'Microsoft YaHei';
+}
+
+#app {
+    width: 100%;
+    min-height: 100vh;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #d9d9d9;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #bfbfbf;
+}
+
+.tiny-dialog-box {
+    .tiny-dialog-box__header {
+        .tiny-dialog-box__headerbtn {
+            top: 0 !important;
+            right: 0 !important;
+        }
+    }
+}
+
+/* 通用工具类 */
+.text-center {
+    text-align: center;
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-between {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.tiny-form--label-left .tiny-form-item__label {
+    padding-left: 0 !important;
+}
+
+// 首页组件通用样式
+.section-block {
+    background: $dashboard-section-bg;
+    border-radius: $dashboard-section-radius;
+    padding: $dashboard-section-padding;
+    border: 1px solid $dashboard-section-border;
+    box-shadow: $shadow-small;
+
+    .section-header {
+        display: flex;
+        align-items: center;
+        gap: $spacing-sm;
+        margin-bottom: $spacing-md;
+        padding-bottom: $spacing-sm;
+        border-bottom: 1px solid $border-color-light;
+
+        h2 {
+            font-size: $dashboard-header-font-size;
+            font-weight: 600;
+            color: $text-primary;
+            margin: 0;
+            flex: 1;
+        }
+    }
+
+    .section-content {
+        font-size: $dashboard-content-font-size;
+    }
+}
+
+// 数据列表页面通用布局样式
+.page-table {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 16px;
+    background: #f5f7fa;
+
+    // 工具栏
+    .main-tool {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 56px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 10px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+        border: 1px solid #e8eaed;
+
+        .left,
+        .toolbar-left {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
+
+        .right,
+        .toolbar-right {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
+
+        .toolbar-search {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
+    }
+
+    // 表格区域
+    .main-table {
+        position: absolute;
+        top: 72px;
+        left: 0;
+        right: 0;
+        bottom: 72px;
+        overflow: hidden;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+        border: 1px solid #e8eaed;
+
+        .custom-table-cell-class {
+            background-color: #f5f7fa !important;
+            font-weight: 600;
+            color: #1f2329;
+        }
+    }
+
+    // 分页器
+    .main-page {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 56px;
+        padding: 0 20px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+        border: 1px solid #e8eaed;
+        display: flex;
+        align-items: center;
+        .tiny-pager {
+            width: 100%;
+        }
+    }
+}
+.custom-toolbar {
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    height: 52px;
+    justify-content: space-between;
+}

package/src/styles/mixins.scss

@@ -0,0 +1,98 @@
+// SCSS 混合宏（Mixins）
+
+// 文本溢出省略
+@mixin text-ellipsis($lines: 1) {
+    @if $lines == 1 {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    } @else {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: $lines;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+// Flex 布局
+@mixin flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@mixin flex-between {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+// 响应式断点
+@mixin respond-to($breakpoint) {
+    @if $breakpoint == xs {
+        @media (max-width: $breakpoint-xs) {
+            @content;
+        }
+    } @else if $breakpoint == sm {
+        @media (min-width: $breakpoint-xs) and (max-width: $breakpoint-sm) {
+            @content;
+        }
+    } @else if $breakpoint == md {
+        @media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md) {
+            @content;
+        }
+    } @else if $breakpoint == lg {
+        @media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg) {
+            @content;
+        }
+    } @else if $breakpoint == xl {
+        @media (min-width: $breakpoint-lg) {
+            @content;
+        }
+    }
+}
+
+// 清除浮动
+@mixin clearfix {
+    &::after {
+        content: '';
+        display: table;
+        clear: both;
+    }
+}
+
+// 动画过渡
+@mixin transition($property: all, $duration: $transition-normal, $timing: ease) {
+    transition: $property $duration $timing;
+}
+
+// 阴影
+@mixin shadow($level: medium) {
+    @if $level == small {
+        box-shadow: $shadow-small;
+    } @else if $level == medium {
+        box-shadow: $shadow-medium;
+    } @else if $level == large {
+        box-shadow: $shadow-large;
+    }
+}
+
+// 绝对居中
+@mixin absolute-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+// 固定宽高比
+@mixin aspect-ratio($width, $height) {
+    position: relative;
+
+    &::before {
+        content: '';
+        display: block;
+        padding-top: ($height / $width) * 100%;
+    }
+}

package/src/styles/variables.scss

@@ -0,0 +1,75 @@
+// 全局 SCSS 变量
+// 可以在任何 .vue 或 .scss 文件中直接使用
+
+// 主题色
+$primary-color: #0052d9;
+$success-color: #00a870;
+$warning-color: #ed7b2f;
+$error-color: #e34d59;
+$info-color: #0052d9;
+
+// 文本颜色
+$text-primary: #1f2329;
+$text-secondary: #646a73;
+$text-placeholder: #8f959e;
+$text-disabled: #c9cdd4;
+
+// 背景色
+$bg-color-page: #f5f7fa;
+$bg-color-container: #ffffff;
+$bg-color-overlay: rgba(0, 0, 0, 0.6);
+$bg-color-hover: #f5f7fa;
+
+// 边框
+$border-color: #e8eaed;
+$border-color-light: #f0f1f3;
+$border-radius: 8px;
+$border-radius-small: 4px;
+$border-radius-large: 12px;
+
+// 间距
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+
+// 阴影
+$shadow-small: 0 2px 8px rgba(0, 0, 0, 0.04);
+$shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
+$shadow-large: 0 8px 24px rgba(0, 0, 0, 0.12);
+$shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
+
+// 动画时间
+$transition-fast: 0.15s;
+$transition-normal: 0.3s;
+$transition-slow: 0.5s;
+
+// 字体大小
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-md: 16px;
+$font-size-lg: 18px;
+$font-size-xl: 20px;
+
+// 布局尺寸
+$header-height: 64px;
+$aside-width: 240px;
+$footer-height: 48px;
+
+// 响应式断点
+$breakpoint-xs: 480px;
+$breakpoint-sm: 768px;
+$breakpoint-md: 992px;
+$breakpoint-lg: 1200px;
+$breakpoint-xl: 1600px;
+
+// 首页专用变量
+$dashboard-section-bg: #ffffff;
+$dashboard-section-border: #e8eaed;
+$dashboard-section-radius: 8px;
+$dashboard-section-padding: 16px;
+$dashboard-section-gap: 16px;
+$dashboard-header-font-size: 16px;
+$dashboard-content-font-size: 14px;
+$dashboard-min-font-size: 14px;

package/src/types/env.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue';
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}
+
+// 自动路由模块声明
+declare module 'virtual:auto-routes' {
+    import type { RouteRecordRaw } from 'vue-router';
+    const routes: RouteRecordRaw[];
+    export default routes;
+}
+
+interface ImportMetaEnv {
+    readonly VITE_API_URL: string;
+    readonly VITE_APP_TITLE: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}

package/src/util.ts

@@ -0,0 +1,28 @@
+/**
+ * 工具函数集合
+ */
+
+/**
+ * 将一维数组转换为树形结构
+ * @param items 一维数组
+ * @param pid 父节点ID，默认为0
+ * @returns 树形结构数组
+ */
+export function arrayToTree<T extends { id: number; pid: number; children?: T[] }>(items: T[], pid = 0): T[] {
+    const tree: T[] = [];
+
+    for (const item of items) {
+        if (item.pid === pid) {
+            const children = arrayToTree(items, item.id);
+            const node = { ...item };
+
+            if (children.length > 0) {
+                node.children = children;
+            }
+
+            tree.push(node);
+        }
+    }
+
+    return tree;
+}

package/src/views/403/403.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="error-page">
+        <t-result status="403" title="无权限访问" description="抱歉，您没有访问该页面的权限">
+            <template #extra>
+                <t-button theme="primary" @click="$Method.goHome">返回首页</t-button>
+                <t-button theme="default" @click="$Method.goBack">返回上一页</t-button>
+            </template>
+        </t-result>
+    </div>
+</template>
+
+<script setup>
+const router = useRouter();
+
+const $Method = {
+    goHome() {
+        router.push('/');
+    },
+    goBack() {
+        router.back();
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.error-page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background: $bg-color-page;
+}
+</style>

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

@@ -0,0 +1,147 @@
+<template>
+    <tiny-dialog-box 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">
+        <tiny-form :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($Form.form = el)">
+            <tiny-form-item label="用户名" prop="username">
+                <tiny-input v-model="$Data.formData.username" placeholder="请输入用户名" :disabled="$Prop.actionType === 'upd'" />
+            </tiny-form-item>
+            <tiny-form-item label="邮箱" prop="email">
+                <tiny-input v-model="$Data.formData.email" placeholder="请输入邮箱" />
+            </tiny-form-item>
+            <tiny-form-item v-if="$Prop.actionType === 'add'" label="密码" prop="password">
+                <tiny-input v-model="$Data.formData.password" type="password" placeholder="请输入密码，至少6位" />
+            </tiny-form-item>
+            <tiny-form-item label="姓名" prop="name">
+                <tiny-input v-model="$Data.formData.name" placeholder="请输入姓名" />
+            </tiny-form-item>
+            <tiny-form-item label="昵称" prop="nickname">
+                <tiny-input v-model="$Data.formData.nickname" placeholder="请输入昵称" />
+            </tiny-form-item>
+            <tiny-form-item label="手机号" prop="phone">
+                <tiny-input v-model="$Data.formData.phone" placeholder="请输入手机号" />
+            </tiny-form-item>
+            <tiny-form-item v-if="$Prop.actionType === 'upd'" label="状态" prop="state">
+                <tiny-radio-group v-model="$Data.formData.state">
+                    <tiny-radio :label="1">正常</tiny-radio>
+                    <tiny-radio :label="2">禁用</tiny-radio>
+                </tiny-radio-group>
+            </tiny-form-item>
+        </tiny-form>
+        <template #footer>
+            <tiny-button @click="$Method.onClose">取消</tiny-button>
+            <tiny-button type="primary" @click="$Method.onSubmit">确定</tiny-button>
+        </template>
+    </tiny-dialog-box>
+</template>
+
+<script setup>
+const $Prop = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    actionType: {
+        type: String,
+        default: 'add'
+    },
+    rowData: {
+        type: Object,
+        default: {}
+    }
+});
+
+const $Emit = defineEmits(['update:modelValue', 'success']);
+
+// 表单引用
+const $Form = $shallowRef({
+    form: null
+});
+
+const $Data = $ref({
+    visible: false,
+    formData: {
+        id: 0,
+        username: '',
+        email: '',
+        password: '',
+        name: '',
+        nickname: '',
+        phone: '',
+        state: 1
+    }
+});
+
+const $Data2 = $shallowRef({
+    formRules: {
+        username: [{ required: true, message: '请输入用户名', 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' }
+        ],
+        name: [{ min: 2, max: 50, message: '姓名长度在 2 到 50 个字符', trigger: 'blur' }],
+        nickname: [{ min: 2, max: 50, message: '昵称长度在 2 到 50 个字符', trigger: 'blur' }],
+        phone: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }]
+    }
+});
+
+// 方法集合
+const $Method = {
+    async initData() {
+        $Method.onShow();
+        if ($Prop.actionType === 'upd' && $Prop.rowData.id) {
+            // 编辑模式：复制数据
+            $Data.formData.id = $Prop.rowData.id || 0;
+            $Data.formData.username = $Prop.rowData.username || '';
+            $Data.formData.email = $Prop.rowData.email || '';
+            $Data.formData.name = $Prop.rowData.name || '';
+            $Data.formData.nickname = $Prop.rowData.nickname || '';
+            $Data.formData.phone = $Prop.rowData.phone || '';
+            $Data.formData.state = $Prop.rowData.state ?? 1;
+        }
+    },
+
+    onShow() {
+        setTimeout(() => {
+            $Data.visible = $Prop.modelValue;
+        }, 100);
+    },
+
+    onClose() {
+        $Data.visible = false;
+        setTimeout(() => {
+            $Emit('update:modelValue', false);
+        }, 300);
+    },
+
+    async onSubmit() {
+        try {
+            const valid = await $Form.form.validate();
+            if (!valid) return;
+
+            const res = await $Http($Prop.actionType === 'upd' ? '/addon/admin/adminUpd' : '/addon/admin/adminIns', $Data.formData);
+
+            Modal.message({
+                message: $Prop.actionType === 'upd' ? '编辑成功' : '添加成功',
+                status: 'success'
+            });
+            $Emit('success');
+            $Method.onClose();
+        } catch (error) {
+            console.error('提交失败:', error);
+            Modal.message({
+                message: '提交失败',
+                status: 'error'
+            });
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+// 可根据需要添加样式
+</style>