@jari-ace/element-plus-component 0.2.1 → 0.2.2

package/packages/components/userTag/UserInfoTag.vue

@@ -1,397 +1,397 @@
-<script setup lang="ts">
-import {onUnmounted, type Ref, ref} 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,
-    hasAvatar?: boolean,
-    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
-}>(), {
-    closable: false,
-    fullName: "无名氏",
-    theme: "skyGray",
-    placement: "bottom"
-})
-
-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 :class="themeClass[props.theme]">
-                <div class="portrait">
-                    <ja-avatar :size="24" :user-id="userId" :realm="realm"
-                               :username="username" :has-avatar="false"></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>
-        </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;
-    }
-
-    .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;
-    }
-}
-
-</style>
+<script setup lang="ts">
+import {onUnmounted, type Ref, ref} 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,
+    hasAvatar?: boolean,
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+}>(), {
+    closable: false,
+    fullName: "无名氏",
+    theme: "skyGray",
+    placement: "bottom"
+})
+
+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 :class="themeClass[props.theme]">
+                <div class="portrait">
+                    <ja-avatar :size="24" :user-id="userId" :realm="realm"
+                               :username="username" :has-avatar="false"></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>
+        </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;
+    }
+
+    .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;
+    }
+}
+
+</style>