ace-front-end 1.0.0

package/ace-element-plus-component/packages/components/userTag/UserInfoTag.vue

@@ -0,0 +1,419 @@
+<script setup lang="ts">
+import {onUnmounted, type Ref, ref, type StyleValue} from "vue";
+import {Close, Star, StarFilled} from "@element-plus/icons-vue";
+import {type IAceAxios, useLoading, type User, useUserApi} from "@jari-ace/app-bolts";
+import {JaAvatar} from "../avatar";
+import {ElIcon, ElPopover, ElTooltip, vLoading} from "element-plus";
+import {useAxios} from "./sharedAxios";
+
+const themeClass = {
+    primary: "user-info-tag--root theme-primary",
+    success: "user-info-tag--root theme-success",
+    warning: "user-info-tag--root theme-warning",
+    danger: "user-info-tag--root theme-danger",
+    info: "user-info-tag--root theme-info",
+    lotusPink: "user-info-tag--root theme-lotus-pink",
+    wineRed: "user-info-tag--root theme-wine-red",
+    autumnOrange: "user-info-tag--root theme-autumn-orange",
+    sunYellow: "user-info-tag--root theme-sun-yellow",
+    seaBlue: "user-info-tag--root theme-sea-blue",
+    moonlightBlue: "user-info-tag--root theme-moonlight-blue",
+    clovePurple: "user-info-tag--root theme-clove-purple",
+    skyGray: "user-info-tag--root  theme-sky-gray"
+}
+
+const props = withDefaults(defineProps<{
+    closable?: boolean,
+    userId?: string,
+    fullName?: string,
+    realm?: string,
+    username?: string,
+    theme?: keyof typeof themeClass,
+    showAvatarInTag?: boolean,
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end',
+    displayType?: 'tag' | 'text',
+    textStyle?: StyleValue,
+    width?: string | number
+}>(), {
+    closable: false,
+    fullName: "无名氏",
+    theme: "skyGray",
+    placement: "bottom",
+    displayType: "tag",
+    textStyle: () => ({})
+})
+
+const user = ref<User>();
+let axios: IAceAxios | undefined = useAxios();
+let loading: Ref<Boolean> | undefined = useLoading(axios);
+let api: ReturnType<typeof useUserApi> | undefined = useUserApi(axios);
+const bookmarked = ref(false)
+const visible = ref(false);
+const emit = defineEmits<{
+    (e: 'closed', userId?: string, realm?: string, userName?: string): void
+}>()
+
+onUnmounted(() => {
+    axios = undefined;
+    loading = undefined;
+    api = undefined;
+});
+
+function onPop() {
+    if (!user.value) {
+        if (props.userId) {
+            api?.getById(props.userId).then(r => {
+                user.value = r;
+                getBookmarkState();
+            });
+        } else if (props.username && props.realm) {
+            let username = props.username;
+            if (username.indexOf('\\') >= 0) {
+                const arr = username.split('\\');
+                username = arr[arr.length - 1];
+            }
+            api?.getByUserName(props.realm, username).then(r => {
+                user.value = r;
+                getBookmarkState();
+            });
+        } else {
+            throw new Error("user-info-tag组件的userId和(realm, userName)属性不能都为空")
+        }
+    }
+}
+
+function getBookmarkState() {
+    if (!user.value) return;
+    api?.checkBookmarked(user.value.id).then(r => bookmarked.value = r);
+}
+
+function onClosed() {
+    visible.value = false
+    emit('closed', props.userId, props.realm, props.username)
+}
+
+function doBookmark() {
+    if (!user.value) return;
+    api?.bookmarkUser(user.value.id).then(() => bookmarked.value = true);
+}
+
+function doUnbookmark() {
+    if (!user.value) return;
+    api?.unbookmarkUser(user.value.id).then(() => bookmarked.value = false);
+}
+
+</script>
+
+<template>
+    <el-popover width="auto" :hide-after="200" @before-enter="onPop" :placement="placement"
+                v-model:visible="visible">
+        <template #reference>
+            <div v-if="displayType === 'tag'" :class="themeClass[props.theme]"
+                 :style="{ width: typeof width === 'number' ? width + 'px' : width }">
+                <div class="portrait">
+                    <ja-avatar :size="24" :user-id="userId" :realm="realm"
+                               :username="username" :has-avatar="showAvatarInTag"></ja-avatar>
+                </div>
+                <div class="user-info">
+                    {{ fullName }}
+                    <div v-if="closable" class="close-btn" @click="onClosed()">
+                        <el-icon :size="10">
+                            <Close/>
+                        </el-icon>
+                    </div>
+                </div>
+            </div>
+            <span v-else class="user-info-text"
+                  :style="[textStyle, width ? { width: typeof width === 'number' ? width + 'px' : width, display: 'inline-block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', verticalAlign: 'bottom' } : {}]">
+                 {{ fullName }}
+            </span>
+        </template>
+        <template #default>
+            <div
+                class="dropdown" v-show="visible" v-loading="!!loading">
+                <div class="header">
+                    <ja-avatar :user-id="userId" :realm="realm"
+                               :username="username"
+                               :size="75"
+                               :has-avatar="user?.hasAvatar"
+                               style="margin-bottom: 8px"/>
+                    <div class="tools">
+                        <el-tooltip :content="bookmarked ? '取消常用人员': '设置为常用人员'">
+                            <el-icon v-if="!bookmarked" @click="doBookmark()" :size="16">
+                                <Star></Star>
+                            </el-icon>
+                            <el-icon v-else color="#FFBF29" @click="doUnbookmark()" :size="16">
+                                <star-filled></star-filled>
+                            </el-icon>
+                        </el-tooltip>
+                    </div>
+                </div>
+                <div>
+                    <p
+                        style="margin: 0; font-weight: 600">
+                        {{ fullName }}
+                    </p>
+                    <p
+                        style="margin: 0; font-size: 14px; color: var(--el-color-info-light-3)">
+                        @{{ user?.department?.name ?? "无归属部门" }}
+                    </p>
+                </div>
+                <p style="margin: 0;">
+                    <span class="label">手机：</span> {{
+                        !user?.mobile || user.mobile.length === 0 ? "(未填写手机号)" : user?.mobile
+                    }} <br/>
+                    <span class="label">邮箱：</span>
+                    {{ !user?.email || user.email.length === 0 ? "(未填写邮箱号)" : user?.email }}
+                </p>
+            </div>
+        </template>
+    </el-popover>
+
+</template>
+
+<style scoped lang="scss">
+.user-info-tag--root {
+    align-items: center;
+
+    border-radius: 28px;
+    display: inline-flex;
+    height: 28px;
+    max-width: 100%;
+    padding-right: 10px;
+    position: relative;
+    vertical-align: top;
+    gap: 8px;
+    cursor: default;
+
+
+    &.theme-info {
+        background-color: var(--el-color-info-light-9);
+        color: var(--el-color-info);
+        border: 1px solid var(--el-color-info-light-7);
+    }
+
+    &.theme-primary {
+        background-color: var(--el-color-primary-light-9);
+        color: var(--el-color-primary);
+        border: 1px solid var(--el-color-primary-light-7);
+    }
+
+    &.theme-success {
+        background-color: var(--el-color-success-light-9);
+        color: var(--el-color-success);
+        border: 1px solid var(--el-color-success-light-7);
+    }
+
+    &.theme-warning {
+        background-color: var(--el-color-warning-light-9);
+        color: var(--el-color-warning);
+        border: 1px solid var(--el-color-warning-light-7);
+    }
+
+    &.theme-danger {
+        background-color: var(--el-color-danger-light-9);
+        color: var(--el-color-danger);
+        border: 1px solid var(--el-color-danger-light-7);
+    }
+
+    &.theme-sky-gray {
+        background-color: #E8F5FF;
+        color: #00164D;
+        border: 1px solid #C1CCD7;
+    }
+
+    &.theme-see-green {
+        background-color: #E8FFFB;
+        color: #00164D;
+        border: 1px solid #8FEBE1;
+    }
+
+    &.theme-lotus-pink {
+        background-color: #FFE8ED;
+        color: #4D0028;
+        border: 1px solid #F593AF;
+    }
+
+    &.theme-wine-red {
+        background-color: #FFECE8;
+        color: #4D000A;
+        border: 1px solid #FAA298;
+    }
+
+    &.theme-autumn-orange {
+        background-color: #FFF3E8;
+        color: #4D0E00;
+        border: 1px solid #FFC59C;
+    }
+
+    &.theme-sun-yellow {
+        background-color: #FFFCE8;
+        color: #4D2B00;
+        border: 1px solid #FFEB9C;
+    }
+
+    &.theme-moonlight-blue {
+        background-color: #E8F7FF;
+        color: #001C4D;
+        border: 1px solid #9CD7FF;
+    }
+
+    &.theme-sea-blue {
+        background-color: #E8FCFF;
+        color: #002B4D;
+        border: 1px solid #98E6FA;
+    }
+
+    &.theme-clove-purple {
+        background-color: #F5E8FF;
+        color: #16004D;
+        border: 1px solid #C396ED;
+    }
+
+    .portrait {
+        display: inline-flex;
+        align-items: center;
+        justify-items: center;
+        margin-left: 1px;
+        color: #fff;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+    }
+
+    .user-info {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .close-btn {
+        cursor: pointer;
+        opacity: 0;
+        position: absolute;
+        right: -5px;
+        top: -5px;
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--el-color-danger-light-9);
+        color: var(--el-color-danger-light-3);
+        transition: all .2s ease-out;
+    }
+
+    .close-btn:hover {
+        background-color: var(--el-color-danger-light-7);
+    }
+;
+
+    &:hover {
+        .close-btn {
+            opacity: 1;
+        }
+
+        &.theme-info {
+            background-color: var(--el-color-info-light-8);
+        }
+
+        &.theme-primary {
+            background-color: var(--el-color-primary-light-8);
+        }
+
+        &.theme-success {
+            background-color: var(--el-color-primary-light-8);
+        }
+
+        &.theme-danger {
+            background-color: var(--el-color-primary-light-8);
+        }
+
+        &.theme-warning {
+            background-color: var(--el-color-primary-light-8);
+        }
+
+        &.theme-sky-gray {
+            background-color: #D4E1EB;
+        }
+
+        &.theme-see-green {
+            background-color: #BAF5ED;
+        }
+
+        &.theme-lotus-pink {
+            background-color: #FABDCC;
+        }
+
+        &.theme-wine-red {
+            background-color: #FCC8C0;
+        }
+
+        &.theme-autumn-orange {
+            background-color: #FFDDC2;
+        }
+
+        &.theme-sun-yellow {
+            background-color: #FFF5C2;
+        }
+
+        &.theme-moonlight-blue {
+            background-color: #C2E9FF;
+        }
+
+        &.theme-clove-purple {
+            background-color: #DDBEF6;
+        }
+
+        &.theme-sea-blue {
+            background-color: #C0F2FC;
+        }
+    }
+}
+
+.dropdown {
+    display: flex;
+    gap: 16px;
+    flex-direction: column;
+    user-select: none;
+
+    .header {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+
+        .tools {
+            flex: auto;
+            display: flex;
+            justify-content: end;
+            align-items: start;
+
+            .el-icon {
+                cursor: pointer;
+            }
+        }
+
+        .el-avatar {
+            flex: none;
+        }
+    }
+
+    .label {
+        font-weight: 300;
+    }
+}
+
+.user-info-text {
+    cursor: pointer;
+    color: var(--el-color-primary);
+    display: inline-block;
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+</style>

package/ace-element-plus-component/packages/components/userTag/index.ts

@@ -0,0 +1,6 @@
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import UserInfoTag from "./UserInfoTag.vue";
+
+export const JaUserInfoTag: SFCWithInstall<typeof UserInfoTag> = withInstall(UserInfoTag);
+
+

package/ace-element-plus-component/packages/components/userTag/sharedAxios.ts

@@ -0,0 +1,8 @@
+import {createAxiosWithoutCache, type IAceAxios} from "@jari-ace/app-bolts";
+
+let axios: IAceAxios | undefined;
+
+export function useAxios() {
+    if (!axios) axios = createAxiosWithoutCache();
+    return axios;
+}

package/ace-element-plus-component/packages/directives/auth/index.ts

@@ -0,0 +1,41 @@
+import type {DirectiveBinding} from "vue";
+import {useLoginUser} from "@jari-ace/app-bolts";
+
+function disableOrHideElement(modifiers: any, el: HTMLElement) {
+    if (modifiers.disable) {
+        (el as any).disabled = true;
+        el.classList.add('disabled');
+    } else {
+        el.style.display = 'none';
+    }
+}
+
+/**
+ * v-auth指令用法：
+ * 默认如果用户有指定角色，就显示，否则隐藏：
+ * v-auth="role1"
+ * 支持多个角色检查，默认为并且关系，即要求用户拥有全部指定角色：
+ * 数组参数形式 v-auth="[role1, role2]  或者 字符串参数 v-auth="'role1-name,role2-name'"
+ * 也可以修改为拥有任一角色即可：
+ * v-auth.any="[role1, role2]"
+ * 如果要不隐藏只禁用：
+ * v-auth.disable="role1"
+ */
+export default {
+    // 当指令绑定到元素时调用
+    mounted(el: HTMLElement, binding: DirectiveBinding<string | string[] | undefined>) {
+        const user = useLoginUser();
+        const {value, modifiers} = binding;
+        const userPermissions = (typeof value === "string" ? value.split(/,/) : (value ?? []));
+        if (!userPermissions || userPermissions.length === 0) return;
+        if (modifiers.any) {
+            if (!userPermissions.some(p => user.hasRole(p))) {
+                disableOrHideElement(modifiers, el);
+            }
+        } else {
+            if (!userPermissions.every(p => user.hasRole(p))) {
+                disableOrHideElement(modifiers, el);
+            }
+        }
+    }
+}

package/ace-element-plus-component/packages/directives/autofocus/index.ts

@@ -0,0 +1,29 @@
+/**
+ * 在组件mount后自动聚焦控件
+ */
+
+const timeoutHandles = new Map<HTMLElement, number>();
+
+export default {
+    mounted(el: HTMLElement) {
+        let handle;
+        if (el instanceof HTMLInputElement) {
+            handle = setTimeout(() => el?.focus(), 500)
+            timeoutHandles.set(el, handle);
+        } else {
+            const el1 = el.querySelectorAll('input')
+            if (el1.length > 0 && el1.item(0) instanceof HTMLInputElement) {
+                handle = setTimeout(() => (
+                    el1?.item(0) as HTMLInputElement
+                )?.focus(), 500)
+                timeoutHandles.set(el, handle)
+            }
+        }
+    },
+    onUnmounted(el: HTMLElement) {
+        if (timeoutHandles.has(el)) {
+            clearTimeout(timeoutHandles.get(el))
+            timeoutHandles.delete(el)
+        }
+    }
+}

package/ace-element-plus-component/packages/directives/index.ts

@@ -0,0 +1,10 @@
+import autofocus from "./autofocus";
+import shortcut from "./shortcut";
+import auth from "./auth";
+import type {App} from "vue";
+
+export function installDirectives(app: App) {
+    app.directive('focus', autofocus)
+    app.directive('shortcut', shortcut)
+    app.directive('auth', auth)
+}