@scx-js/scx-admin 0.0.3

package/components/user-profile/change-password-dialog.vue

@@ -0,0 +1,100 @@
+<template>
+    <el-dialog v-model="changePasswordDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
+               :width="dialogWidth" title="修改密码">
+        <el-form ref="changePasswordRef" :model="changePasswordForm" label-width="100px">
+            <easy-form-item label="原密码" prop="password" required>
+                <el-input v-model="changePasswordForm.password" show-password></el-input>
+            </easy-form-item>
+            <easy-form-item label="新密码" prop="newPassword" required>
+                <el-input v-model="changePasswordForm.newPassword" show-password></el-input>
+            </easy-form-item>
+            <el-form-item :rules="newPassword2Rules" label="确认密码" prop="newPassword2">
+                <el-input v-model="changePasswordForm.newPassword2" show-password></el-input>
+            </el-form-item>
+        </el-form>
+        <span>注意 : 请牢记修改后的密码, 忘记请联系管理员进行找回!!!</span>
+        <template #footer>
+            <el-button @click="changePasswordDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="changePassword">确认修改</el-button>
+        </template>
+    </el-dialog>
+</template>
+<script setup>
+import EasyFormItem from "../easy-form-item/index.vue";
+import {ElMessage} from "element-plus";
+import {reactive, ref} from "vue";
+import {useScxReq} from "@scx-js/scx-http";
+import {useScxFSS} from "@scx-js/scx-app-x";
+import {useScxUserInfo} from "../../scx/index.js";
+
+const props = defineProps({
+    dialogWidth: {
+        default: "80%"
+    },
+});
+
+const fss = useScxFSS();
+const req = useScxReq();
+const userInfo = useScxUserInfo();
+
+const changePasswordRef = ref();
+
+const changePasswordDialogVisible = ref(false);
+
+const changePasswordForm = reactive({
+    password: "",
+    newPassword: "",
+    newPassword2: ""
+});
+
+const newPassword2Rules = [{
+    type: "string",
+    trigger: "blur",
+    required: true,
+    validator: (rule, value, callback) => {
+        if (value.trim() === "") {
+            return callback("请再次输入密码 !!!");
+        } else if (changePasswordForm.newPassword !== value) {
+            callback("两次密码不一致 !!!");
+        } else {
+            callback();
+        }
+    }
+}];
+
+
+function changePassword() {
+    changePasswordRef.value.validate((valid) => {
+        if (valid) {
+            req.post("api/auth/change-password-by-self", {
+                newPassword: changePasswordForm.newPassword,
+                oldPassword: changePasswordForm.password
+            }).then(data => {
+                ElMessage.success("修改密码成功 !!! 下次登录请使用新密码 !!!");
+                changePasswordDialogVisible.value = false;
+            }).catch(e => {
+                if (e.message === "wrong-password") {
+                    ElMessage.error("密码错误 !!!");
+                } else {
+                    ElMessage.error("修改密码失败 !!! 请稍后再试 !!!");
+                }
+            });
+        }
+    });
+}
+
+function showChangePassword() {
+    changePasswordForm.newPassword = "";
+    changePasswordForm.password = "";
+    changePasswordForm.newPassword2 = "";
+    changePasswordDialogVisible.value = true;
+}
+
+defineExpose({
+    showChangePassword
+});
+</script>
+
+<style scoped>
+
+</style>

package/components/user-profile/change-user-avatar.vue

@@ -0,0 +1,43 @@
+<template>
+    <easy-upload v-model="userInfo.avatar" :before-delete="removeAvatar" :upload-handler="upload"/>
+</template>
+<script setup>
+import EasyUpload from "../easy-upload/index.vue";
+import {ElMessage} from "element-plus";
+import {useScxUserInfo} from "../../scx/index.js";
+import {useScxReq} from "@scx-js/scx-http";
+import {useScxFSS} from "@scx-js/scx-app-x";
+
+const fss = useScxFSS();
+const req = useScxReq();
+const userInfo = useScxUserInfo();
+
+function removeAvatar(e) {
+    return new Promise((resolve, reject) => {
+        req.post("api/auth/change-user-avatar", {newAvatar: ""}).then(data => {
+            resolve(true);
+            ElMessage.success("移除头像成功 !!!");
+        }).catch(e => {
+            ElMessage.error("移除头像失败 !!!");
+        });
+    });
+}
+
+function upload(e) {
+    return new Promise((resolve, reject) => {
+        fss.upload(e).then(data => {
+            req.post("api/auth/change-user-avatar", {newAvatar: data.item.fssObjectID}).then(data => {
+                userInfo.avatar = data.avatar;
+                resolve(userInfo.avatar);
+                ElMessage.success("修改头像成功 !!!");
+            }).catch(e => {
+                ElMessage.error("修改头像失败 !!!");
+            });
+        });
+    });
+}
+</script>
+
+<style scoped>
+
+</style>

package/components/user-profile/change-username-dialog.vue

@@ -0,0 +1,82 @@
+<template>
+    <el-dialog v-model="changeUsernameDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
+               :width="dialogWidth" title="修改用户名">
+        <el-form ref="changeUsernameRef" :model="changeUsernameForm" label-width="120px">
+            <easy-form-item label="新用户名" prop="newUsername" required>
+                <el-input v-model="changeUsernameForm.newUsername"></el-input>
+            </easy-form-item>
+            <easy-form-item label="密码" prop="password" required>
+                <el-input v-model="changeUsernameForm.password" show-password></el-input>
+            </easy-form-item>
+        </el-form>
+        <span>注意 : 请牢记修改后的用户名, 忘记请联系管理员进行找回!!!</span>
+        <template #footer>
+            <el-button @click="changeUsernameDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="changeUsername">确认修改</el-button>
+        </template>
+    </el-dialog>
+</template>
+<script setup>
+import EasyFormItem from "../easy-form-item/index.vue";
+import {reactive, ref} from "vue";
+import {ElMessage} from "element-plus";
+import {useScxUserInfo} from "../../scx/index.js";
+import {useScxReq} from "@scx-js/scx-http";
+import {useScxFSS} from "@scx-js/scx-app-x";
+
+const props = defineProps({
+    dialogWidth: {
+        default: "400px"
+    },
+});
+
+const fss = useScxFSS();
+const req = useScxReq();
+const userInfo = useScxUserInfo();
+
+const changeUsernameRef = ref();
+
+const changeUsernameDialogVisible = ref(false);
+
+const changeUsernameForm = reactive({
+    newUsername: "",
+    password: ""
+});
+
+function changeUsername() {
+    changeUsernameRef.value.validate((valid) => {
+        if (valid) {
+            req.post("api/auth/change-username-by-self", {
+                newUsername: changeUsernameForm.newUsername,
+                password: changeUsernameForm.password
+            }).then(data => {
+                userInfo.username = data.username;
+                ElMessage.success("修改用户名成功 !!! 下次登录请使用新用户名 !!!");
+                changeUsernameDialogVisible.value = false;
+            }).catch(e => {
+                if (e.message === "username-already-exists") {
+                    ElMessage.error("用户名已被占用 !!!");
+                } else if (e.message === "wrong-password") {
+                    ElMessage.error("密码错误 !!!");
+                } else {
+                    ElMessage.error("修改用户名失败 !!! 请稍后再试 !!!");
+                }
+            });
+        }
+    });
+}
+
+function showChangeUsername() {
+    changeUsernameForm.newUsername = userInfo.username;
+    changeUsernameForm.password = "";
+    changeUsernameDialogVisible.value = true;
+}
+
+defineExpose({
+    showChangeUsername
+});
+</script>
+
+<style scoped>
+
+</style>

package/components/user-profile/index.css

@@ -0,0 +1,8 @@
+.user-profile {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    flex-direction: column;
+    row-gap: 10px;
+}

package/components/user-profile/index.vue

@@ -0,0 +1,77 @@
+<template>
+
+    <div class="user-profile">
+
+        <change-user-avatar/>
+
+        <slot name="info">
+            <el-descriptions :column="1" border>
+                <el-descriptions-item align="center" label="用户名" label-align="center" width="150px">
+                    {{ userInfo.username }}
+                </el-descriptions-item>
+            </el-descriptions>
+        </slot>
+
+        <el-divider/>
+        <div>
+            <el-button plain type="primary" @click="showChangeUsername">点击修改用户名</el-button>
+            <el-button plain type="success" @click="showChangePassword">点击修改密码</el-button>
+        </div>
+    </div>
+
+    <change-username-dialog ref="changeUsernameDialogRef" :dialog-width="dialogWidth"/>
+
+    <change-password-dialog ref="changePasswordDialogRef" :dialog-width="dialogWidth"/>
+
+</template>
+
+<script>
+import "./index.css";
+import {ref} from "vue";
+import {useScxUserInfo} from "../../index.js";
+import EasyUpload from "../easy-upload/index.vue";
+import EasyFormItem from "../easy-form-item/index.vue";
+import ChangeUserAvatar from "./change-user-avatar.vue";
+import ChangeUsernameDialog from "./change-username-dialog.vue";
+import ChangePasswordDialog from "./change-password-dialog.vue";
+
+export default {
+    name: "user-profile",
+    components: {
+        ChangeUserAvatar,
+        ChangeUsernameDialog,
+        ChangePasswordDialog,
+        EasyFormItem,
+        EasyUpload
+    },
+    props: {
+        dialogWidth: {
+            default: "400px"
+        },
+    },
+    setup() {
+
+        const userInfo = useScxUserInfo();
+
+        const changeUsernameDialogRef = ref();
+        const changePasswordDialogRef = ref();
+
+        function showChangeUsername() {
+            changeUsernameDialogRef.value.showChangeUsername();
+        }
+
+        function showChangePassword() {
+            changePasswordDialogRef.value.showChangePassword();
+        }
+
+        return {
+            userInfo,
+            changeUsernameDialogRef,
+            changePasswordDialogRef,
+            showChangeUsername,
+            showChangePassword
+        };
+    }
+};
+
+</script>

package/index.js

@@ -0,0 +1,4 @@
+export * from "./routes.js";
+export * from "./components/index.js";
+export * from "./scx/index.js";
+export * from "./util/index.js";

package/layout/index.vue

@@ -0,0 +1,24 @@
+<template>
+    <!-- element ui 配置 -->
+    <el-config-provider :locale="zhCN">
+        <scx-app/>
+    </el-config-provider>
+</template>
+
+<script>
+import zhCN from "element-plus/es/locale/lang/zh-cn";
+import ScxApp from "./scx-app.vue";
+
+export default {
+    name: "scx-layout",
+    components: {
+        ScxApp,
+    },
+    setup() {
+
+        return {
+            zhCN
+        };
+    }
+};
+</script>

package/layout/scx-app.vue

@@ -0,0 +1,110 @@
+<template>
+
+    <!-- 上下结构 -->
+    <div class="scx-app">
+
+        <!-- 顶栏 -->
+        <scx-navbar>
+            <template #left>
+                <scx-menu-toggle/>
+                <scx-logo/>
+            </template>
+            <template #right>
+                <scx-theme-switch/>
+                <scx-user-panel/>
+            </template>
+        </scx-navbar>
+
+        <!-- 内容区域 -->
+        <div class="scx-content">
+
+            <!-- 左侧边栏 -->
+            <scx-sidebar :class="userConfig.menuCollapse ? 'collapse' : ''">
+
+                <!-- 菜单栏 -->
+                <scx-menu/>
+
+            </scx-sidebar>
+
+            <!-- 右侧主内容容器 -->
+            <scx-main/>
+
+        </div>
+
+        <!-- 右侧通知面板 -->
+        <scx-notice/>
+
+    </div>
+</template>
+
+<script>
+import ScxSidebar from "./scx-sidebar.vue";
+import ScxMain from "./scx-main.vue";
+import ScxNotice from "./scx-notice.vue";
+import ScxUserPanel from "./scx-user-panel.vue";
+import ScxMenu from "./scx-menu.vue";
+import ScxMenuToggle from "./scx-menu-toggle.vue";
+import ScxLogo from "./scx-logo.vue";
+import ScxNavbar from "./scx-navbar.vue";
+import ScxThemeSwitch from "./scx-theme-switch.vue";
+import {useScxUserConfig} from "../scx/index.js";
+
+export default {
+    name: "scx-app",
+    components: {
+        ScxThemeSwitch,
+        ScxNavbar,
+        ScxLogo,
+        ScxMenuToggle,
+        ScxMenu,
+        ScxUserPanel,
+        ScxSidebar,
+        ScxMain,
+        ScxNotice
+    },
+    setup() {
+        const userConfig = useScxUserConfig();
+        return {
+            userConfig
+        };
+    }
+};
+</script>
+
+<style>
+.scx-app {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    color: var(--scx-text-color);
+    background: var(--scx-bg);
+    /*使切换主题时颜色过渡平滑一些*/
+    transition: background 200ms ease, color 100ms ease;
+    flex-direction: column;
+}
+
+.scx-content {
+    display: flex;
+    height: 100%;
+    overflow: auto;
+    z-index: 3;
+}
+
+.scx-sidebar {
+    width: 200px;
+    transition: width 200ms;
+}
+
+.scx-sidebar.collapse {
+    width: 54px;
+}
+
+.scx-sidebar-top {
+    justify-content: start;
+}
+
+.scx-logo {
+    flex-shrink: unset;
+}
+</style>

package/layout/scx-input.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="scx-input">
+        <scx-icon v-if="icon" :icon="icon"/>
+        <input v-model="m" :placeholder="placeholder" type="text"/>
+        <scx-icon v-show="m!==''" icon="outlined-close" @click="m=''"/>
+    </div>
+</template>
+
+<script>
+import {computed} from "vue";
+
+export default {
+    name: "scx-input",
+    props: {
+        modelValue: {
+            type: String,
+            required: true,
+            default: "",
+        },
+        placeholder: {
+            type: String,
+            default: "输入名称搜索",
+        },
+        icon: {
+            type: String,
+            default: null
+        }
+    },
+    setup(props, context) {
+
+        const m = computed({
+            get() {
+                return props.modelValue;
+            },
+            set(value) {
+                context.emit("update:modelValue", value);
+            }
+        });
+
+        return {m};
+    }
+};
+</script>
+<style>
+.scx-input {
+    display: flex;
+    justify-content: space-between;
+    align-self: center;
+    align-items: center;
+    /* 32px 是当前这个元素的高度 默认被内部的 input 撑起来的高度*/
+    border-radius: calc(32px / 2);
+    background: var(--scx-input_bg);
+    box-shadow: var(--scx-input_box-shadow);
+    transition: all 100ms cubic-bezier(0.23, 1, 0.32, 1);
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box;
+}
+
+.scx-input > input {
+    width: 100%;
+    outline: none;
+    font-size: 15px;
+    height: 30px;
+    border: 0;
+    background-color: transparent;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.scx-input > input::placeholder {
+    color: var(--scx-text-placeholder-color);
+}
+
+.scx-input > svg {
+    width: 20px;
+    flex-shrink: 0;
+    cursor: pointer;
+}
+
+.scx-input:focus-within {
+    box-shadow: var(--scx-input-hover_box-shadow);
+}
+</style>

package/layout/scx-logo.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="scx-logo">
+
+        <div class="scx-logo-logo">
+            <scx-icon icon="outlined-scx-logo"/>
+        </div>
+
+        <div class="scx-logo-label">
+            {{ systemConfig.title }}
+        </div>
+
+    </div>
+</template>
+
+<script>
+import {useScxSystemConfig} from "../scx/index.js";
+
+export default {
+    name: "scx-logo",
+    setup() {
+        const systemConfig = useScxSystemConfig();
+        return {systemConfig};
+    }
+};
+</script>
+
+<style scoped>
+.scx-logo {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.scx-logo-logo {
+    padding: 10px;
+    height: 100%;
+    width: 54px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.scx-logo-logo > .scx-icon {
+    width: 100%;
+    height: 100%;
+    fill: var(--scx-theme);
+}
+
+.scx-logo-label {
+    white-space: nowrap;
+    overflow: hidden;
+    color: var(--scx-theme);
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+.collapse .scx-logo-label {
+    visibility: hidden;
+}
+</style>

package/layout/scx-main.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="scx-main">
+        <router-view v-slot="{ Component }">
+            <!-- 路由切换动画 -->
+            <transition mode="out-in" name="scx-main-t">
+                <!-- 对所有页面都进行缓存  v-if 是为了刷新当前路由 -->
+                <keep-alive>
+                    <component :is="Component"/>
+                </keep-alive>
+            </transition>
+        </router-view>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "scx-main",
+    setup() {
+        return {};
+    }
+
+};
+</script>
+
+<style>
+.scx-main {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+}
+
+/*---------------------- vue 动画 -----------------------*/
+.scx-main-t-enter-active,
+.scx-main-t-leave-active {
+    transition: opacity 200ms, transform 200ms;
+}
+
+.scx-main-t-enter-from {
+    opacity: 0;
+    transform: scale(0.98, 0.98);
+}
+
+.scx-main-t-leave-to {
+    opacity: 0;
+    transform: scale(1.02, 1.02);
+}
+</style>