befly-admin-ui 1.9.7 → 1.9.9

package/layouts/default.vue

@@ -37,49 +37,62 @@
                     </template>
                 </t-menu>
             </div>
+        </div>
 
-            <!-- 底部操作区域 -->
-            <div class="sidebar-footer">
-                <div class="footer-item" @click="handleSettings">
-                    <SettingIcon style="width: 18px; height: 18px" />
-                    <span>系统设置</span>
-                </div>
-                <div class="footer-user">
-                    <t-upload :action="$Config.uploadPath" :headers="uploadHeaders" :show-upload-list="false" accept="image/*" @success="onAvatarUploadSuccess">
-                        <div class="user-avatar" :class="{ 'has-avatar': $Data.userInfo.avatar }">
+        <!-- 右侧内容区域 -->
+        <div class="layout-main">
+            <div class="main-toolbar">
+                <TDropdown trigger="click" placement="bottom-right" @click="onUserDropdownAction">
+                    <div class="toolbar-user">
+                        <div class="toolbar-user-avatar">
                             <img v-if="$Data.userInfo.avatar" :src="$Data.userInfo.avatar" alt="avatar" />
                             <UserIcon v-else style="width: 16px; height: 16px; color: #fff" />
-                            <div class="avatar-overlay">
-                                <CloudIcon style="width: 14px; height: 14px; color: #fff" />
-                            </div>
                         </div>
-                    </t-upload>
-                    <div class="user-info">
-                        <span class="user-name">{{ $Data.userInfo.nickname || "管理员" }}</span>
-                        <span class="user-role">{{ $Data.userInfo.role || "超级管理员" }}</span>
+                        <div class="toolbar-user-info">
+                            <span class="user-name">{{ $Data.userInfo.nickname || "管理员" }}</span>
+                            <span class="user-role">{{ $Data.userInfo.role || "超级管理员" }}</span>
+                        </div>
+                        <ChevronDownIcon class="toolbar-user-arrow" style="width: 16px; height: 16px" />
                     </div>
-                    <t-button theme="default" variant="text" size="small" @click="handleLogout">
-                        <template #icon>
-                            <CloseCircleIcon style="width: 16px; height: 16px" />
-                        </template>
-                    </t-button>
-                </div>
+                    <TDropdownMenu slot="dropdown">
+                        <TDropdownItem value="password">
+                            <LockOnIcon style="width: 14px; height: 14px; margin-right: 6px" />
+                            修改密码
+                        </TDropdownItem>
+                        <TDropdownItem value="logout" :divider="true">
+                            <CloseCircleIcon style="width: 14px; height: 14px; margin-right: 6px" />
+                            退出登录
+                        </TDropdownItem>
+                    </TDropdownMenu>
+                </TDropdown>
             </div>
-        </div>
 
-        <!-- 右侧内容区域 -->
-        <div class="layout-main">
-            <RouterView />
+            <div class="main-content">
+                <RouterView />
+            </div>
+
+            <PageDialog v-if="$Data.passwordDialogVisible" v-model="$Data.passwordDialogVisible" title="修改密码" :confirm-loading="$Data.passwordSubmitting" @confirm="onPasswordSubmit">
+                <TForm ref="passwordFormRef" :model="$Data.passwordForm" label-width="100px" label-position="left" :rules="passwordFormRules">
+                    <TFormItem label="新密码" prop="password">
+                        <TInput v-model="$Data.passwordForm.password" type="password" placeholder="请输入新密码，至少6位" autocomplete="new-password" />
+                    </TFormItem>
+                    <TFormItem label="确认密码" prop="confirmPassword">
+                        <TInput v-model="$Data.passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码" autocomplete="new-password" />
+                    </TFormItem>
+                </TForm>
+            </PageDialog>
         </div>
     </div>
 </template>
 
 <script setup>
 import { arrayToTree } from "befly-admin-ui/utils/arrayToTree";
-import { Button as TButton, DialogPlugin, Menu as TMenu, MenuItem as TMenuItem, MessagePlugin, Submenu as TSubmenu, Upload as TUpload } from "tdesign-vue-next";
-import { CloudIcon, CloseCircleIcon, CodeIcon, LinkIcon, MenuIcon, SettingIcon, UserIcon, ControlPlatformIcon, AppIcon, HomeIcon } from "tdesign-icons-vue-next";
+import PageDialog from "befly-admin-ui/components/pageDialog.vue";
+import { hashPassword } from "befly-admin-ui/utils/hashPassword";
+import { DialogPlugin, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Form as TForm, FormItem as TFormItem, Input as TInput, Menu as TMenu, MenuItem as TMenuItem, MessagePlugin, Submenu as TSubmenu } from "tdesign-vue-next";
+import { AppIcon, ChevronDownIcon, CloseCircleIcon, ControlPlatformIcon, HomeIcon, LockOnIcon, UserIcon } from "tdesign-icons-vue-next";
 
-import { reactive, watch } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { $Http } from "@/plugins/http.js";
 import { $Config } from "@/plugins/config.js";
@@ -87,7 +100,7 @@ import { $Store } from "@/plugins/store.js";
 
 const router = useRouter();
 const route = useRoute();
-const uploadHeaders = { Authorization: `Bearer ${$Store.local.get($Config.tokenName, "")}` };
+const passwordFormRef = ref(null);
 
 function isString(value) {
     return typeof value === "string";
@@ -122,19 +135,39 @@ const normalizeParentPath = (parentPath) => {
     return normalized;
 };
 
+function createPasswordForm() {
+    return {
+        password: "",
+        confirmPassword: ""
+    };
+}
+
 // 响应式数据
 const $Data = reactive({
     userMenus: [],
     userMenusFlat: [], // 一维菜单数据
     expandedKeys: [],
     currentMenuKey: "",
+    passwordDialogVisible: false,
+    passwordSubmitting: false,
+    passwordForm: createPasswordForm(),
     userInfo: {
+        id: 0,
         nickname: "管理员",
         role: "超级管理员",
-        avatar: "" // 用户头像
+        avatar: "",
+        roleCode: ""
     }
 });
 
+const passwordFormRules = {
+    password: [
+        { required: true, message: "请输入新密码", trigger: "blur" },
+        { min: 6, message: "新密码至少6位", trigger: "blur" }
+    ],
+    confirmPassword: [{ required: true, message: "请再次输入新密码", trigger: "blur" }]
+};
+
 function normalizeAvatarUrl(value) {
     if (!isString(value) || value.length === 0) {
         return "";
@@ -263,27 +296,67 @@ async function handleLogout() {
     });
 }
 
-function handleSettings() {
-    router.push("/core/settings");
+function openPasswordDialog() {
+    $Data.passwordForm = createPasswordForm();
+    $Data.passwordDialogVisible = true;
 }
 
-async function onAvatarUploadSuccess(res) {
-    if (res.response?.code === 0 && res.response?.data?.url) {
-        const avatarUrl = res.response.data.url;
+function onUserDropdownAction(data) {
+    const record = data;
+    const rawValue = record && record["value"] ? record["value"] : "";
+    const cmd = rawValue ? String(rawValue) : "";
 
-        try {
-            if ($Data.userInfo.id) {
-                await $Http("/core/admin/upd", {
-                    id: $Data.userInfo.id,
-                    avatar: avatarUrl
-                });
-            }
+    if (cmd === "password") {
+        openPasswordDialog();
+        return;
+    }
 
-            $Data.userInfo.avatar = avatarUrl;
-            MessagePlugin.success("头像上传成功");
-        } catch (error) {
-            MessagePlugin.error(error.msg || error.message || "头像保存失败");
+    if (cmd === "logout") {
+        handleLogout();
+    }
+}
+
+async function onPasswordSubmit(context) {
+    const form = passwordFormRef.value;
+    if (form === null) {
+        MessagePlugin.warning("表单未就绪");
+        return;
+    }
+
+    const valid = await form.validate();
+    if (valid !== true) {
+        return;
+    }
+
+    if ($Data.passwordForm.password !== $Data.passwordForm.confirmPassword) {
+        MessagePlugin.error("两次输入的密码不一致");
+        return;
+    }
+
+    if (!$Data.userInfo.id) {
+        MessagePlugin.error("用户信息未就绪");
+        return;
+    }
+
+    $Data.passwordSubmitting = true;
+
+    try {
+        const hashedPassword = await hashPassword($Data.passwordForm.password);
+        const storedPassword = await hashPassword(hashedPassword);
+
+        await $Http("/core/admin/upd", {
+            id: $Data.userInfo.id,
+            password: storedPassword
+        });
+
+        MessagePlugin.success("密码修改成功");
+        if (context && typeof context.close === "function") {
+            context.close();
         }
+    } catch (error) {
+        MessagePlugin.error(error.msg || error.message || "密码修改失败");
+    } finally {
+        $Data.passwordSubmitting = false;
     }
 }
 
@@ -413,112 +486,92 @@ watch(
                 }
             }
         }
+    }
+
+    // 右侧主内容区域
+    .layout-main {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--layout-gap);
+        overflow: hidden;
 
-        // 底部操作区域
-        .sidebar-footer {
-            border-top: 1px solid var(--border-color-light);
-            padding: var(--spacing-sm);
+        .main-toolbar {
+            flex-shrink: 0;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding: var(--spacing-sm) var(--spacing-md);
+            background: var(--bg-color-container);
+            border-radius: var(--border-radius-large);
+            box-shadow: var(--shadow-1);
 
-            .footer-item {
+            .toolbar-user {
                 display: flex;
                 align-items: center;
                 gap: var(--spacing-sm);
-                padding: var(--spacing-sm) var(--spacing-md);
+                padding: 4px 8px;
                 border-radius: var(--border-radius);
-                color: var(--text-secondary);
                 cursor: pointer;
-                transition: all var(--transition-fast);
+                transition: background-color var(--transition-fast);
 
                 &:hover {
                     background-color: var(--bg-color-hover);
-                    color: var(--text-primary);
-                }
-
-                span {
-                    font-size: var(--font-size-sm);
-                    white-space: nowrap;
                 }
             }
 
-            .footer-user {
+            .toolbar-user-avatar {
+                width: 36px;
+                height: 36px;
+                min-width: 36px;
                 display: flex;
                 align-items: center;
-                gap: var(--spacing-sm);
-                padding: var(--spacing-sm);
-                margin-top: var(--spacing-xs);
-                background: var(--bg-color-secondarycontainer);
-                border-radius: var(--border-radius);
-
-                .user-avatar {
-                    width: 32px;
-                    height: 32px;
-                    min-width: 32px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    background: var(--primary-color);
-                    border-radius: 50%;
-                    flex-shrink: 0;
-                    cursor: pointer;
-                    position: relative;
-                    overflow: hidden;
-
-                    img {
-                        width: 100%;
-                        height: 100%;
-                        object-fit: cover;
-                    }
-
-                    .avatar-overlay {
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        background: rgba(0, 0, 0, 0.5);
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        opacity: 0;
-                        transition: opacity var(--transition-fast);
-                    }
+                justify-content: center;
+                background: var(--primary-color);
+                border-radius: 50%;
+                overflow: hidden;
+                flex-shrink: 0;
 
-                    &:hover .avatar-overlay {
-                        opacity: 1;
-                    }
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
                 }
+            }
 
-                .user-info {
-                    flex: 1;
-                    min-width: 0;
-                    display: flex;
-                    flex-direction: column;
+            .toolbar-user-info {
+                min-width: 0;
+                display: flex;
+                flex-direction: column;
 
-                    .user-name {
-                        font-size: var(--font-size-sm);
-                        font-weight: var(--font-weight-medium);
-                        color: var(--text-primary);
-                        line-height: 1.3;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                    }
+                .user-name {
+                    font-size: var(--font-size-sm);
+                    font-weight: var(--font-weight-medium);
+                    color: var(--text-primary);
+                    line-height: 1.3;
+                    white-space: nowrap;
+                }
 
-                    .user-role {
-                        font-size: var(--font-size-xs);
-                        color: var(--text-placeholder);
-                        line-height: 1.3;
-                    }
+                .user-role {
+                    font-size: var(--font-size-xs);
+                    color: var(--text-placeholder);
+                    line-height: 1.3;
+                    white-space: nowrap;
                 }
             }
+
+            .toolbar-user-arrow {
+                color: var(--text-placeholder);
+                flex-shrink: 0;
+            }
         }
-    }
 
-    // 右侧主内容区域
-    .layout-main {
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
+        .main-content {
+            flex: 1;
+            min-height: 0;
+            overflow: hidden;
+        }
     }
 }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "befly-admin-ui",
-    "version": "1.9.7",
-    "gitHead": "913ad3b34f63ddf0936fb338fadc78ade7edf00d",
+    "version": "1.9.9",
+    "gitHead": "990aee4744b2c52e24c1a8c7a6cbee06b7d31833",
     "private": false,
     "description": "Befly - 管理后台功能组件",
     "keywords": [

package/views/people/admin/index.vue

@@ -8,14 +8,6 @@
             </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>
@@ -50,7 +42,7 @@
 <script setup>
 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 { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon } from "tdesign-icons-vue-next";
 import EditDialog from "./components/edit.vue";
 import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
@@ -88,10 +80,6 @@ function onAdd() {
     onAction("add", {});
 }
 
-function onReload(reload) {
-    reload({ keepSelection: true });
-}
-
 function onDialogSuccess(reload) {
     reload({ keepSelection: true });
 }