boke-devops 0.0.30

package/packages/boke-devops-vue/src/AegisUser/__tests__/Avatar.test.js

@@ -0,0 +1,18 @@
+import Avatar from '../user-avatar.vue'
+import { mount, VueWrapper } from '@vue/test-utils';
+import { describe, expect, it, vi, test, } from 'vitest';
+
+test('Link changes the state when hovered', async () => {
+    const wrapper = mount(Avatar, {
+            props: {
+                data: { name: 'Julone', dept_name: '运维部', avatar: 'https://s1-imfile.fewebp' }
+            },
+            slots: {
+                default : 'sdafasd'
+            },
+        },
+    );
+    expect(wrapper.element).toMatchSnapshot() // 匹配快照
+    const actions = wrapper.find('.boke-useravator-wrapper');
+    expect(actions.exists()).toBeTruthy(); // 查找是否有类名
+})

package/packages/boke-devops-vue/src/AegisUser/__tests__/__snapshots__/Avatar.test.js.snap

@@ -0,0 +1,60 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Link changes the state when hovered 1`] = `
+<div
+  data-v-6fc62be8=""
+  style="display: inline-flex;"
+>
+  <span
+    class="ant-tag css-dev-only-do-not-override-16pw25h ant-tag-default boke-useravator-wrapper"
+    data-v-6fc62be8=""
+    style="padding: 2px 12px 2px 2px; border-radius: 50px;"
+  >
+    
+    <div
+      class="left-icon"
+      data-v-6fc62be8=""
+    >
+      <span
+        class="avator-icon ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-16pw25h"
+        data-v-6fc62be8=""
+        style="width: 28px; height: 28px; line-height: 28px; font-size: 18px;"
+      >
+        <img
+          src="https://s1-imfile.fewebp"
+        />
+      </span>
+    </div>
+    
+    
+    <div
+      class="label"
+      data-v-6fc62be8=""
+    >
+      <span
+        class="realname"
+        data-v-6fc62be8=""
+      >
+        Julone
+      </span>
+      <span
+        class="id"
+        data-v-6fc62be8=""
+      >
+        <span
+          data-v-6fc62be8=""
+        >
+          运维部
+        </span>
+      </span>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+    
+    sdafasd
+    
+    
+    <!---->
+  </span>
+</div>
+`;

package/packages/boke-devops-vue/src/AegisUser/multiple-user-select.vue

@@ -0,0 +1,190 @@
+<template>
+  <ASelect
+    v-model:value="innerdata"
+    class="wiki-user-caseder"
+    v-if="options"
+    @change="onNodeClick($event)"
+    style="flex: 1"
+    :dropdownStyle="{ zIndex: 100000 }"
+    allowClear
+    :virtual="true"
+    :options="options"
+    mode="multiple"
+    :fieldNames="{ children: 'children', label: 'label', value: 'value' }"
+    :disabled="props.disabled || false"
+    show-search
+    :dropdownMatchSelectWidth="240"
+    :max-tag-count="props.maxTagCount || 100"
+    :filter-option="onFilterOption"
+    v-bind="$attrs"
+  >
+    <template #tagRender="{ label, closable, onClose, option }">
+      <userAvatar
+        v-if="option?.data"
+        :data="option?.data"
+        :size="18"
+        :hidePopover="true"
+        :noID="true"
+        style="width: fit-content"
+        :noDialogDetail="true"
+        :tag="true"
+        :closable="closable"
+        @close="onClose"
+        :customProps="$attrs.customProps"
+      >
+      </userAvatar>
+    </template>
+    <template #placeholder>
+      <div
+        style="display: flex; align-items: center; line-height: 12px; gap: 8px"
+      >
+        <UserOutlined />
+        {{ props.placeholder || "未选择用户" }}
+      </div>
+    </template>
+    <template #option="item">
+      <div style="display: flex; align-items: center; height: 100%">
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            pointer-events: none;
+          "
+        >
+          <div class="user-select-user-label">
+            <a-avatar
+              :src="item?.data?.[AVATAR_KEY]"
+              :class="'user-select-avatar-icon'"
+              :size="18"
+            >
+              <div style="display: flex;width: 18px;height: 18px"></div>
+            </a-avatar>
+            <span>
+              {{ item.data?.[NAME_KEY] }}
+            </span>
+          </div>
+          <small style="margin: 0 8px; zoom: 0.8">{{
+            item.data?.[DEPT_KEY]
+          }}</small>
+        </div>
+      </div>
+    </template>
+  </ASelect>
+</template>
+
+<script setup lang="tsx">
+import {
+  defineProps,
+  ref,
+  computed,
+  nextTick,
+  watch,
+  onUpdated,
+} from "vue";
+
+import {find as _find} from "lodash-es";
+import { Select as ASelect, Avatar as AAvatar} from "ant-design-vue/es";
+import userAvatar from "./user-avatar.vue";
+import { UserOutlined } from "@ant-design/icons-vue";
+
+import {useCustomProps} from "./store"
+import { onErrorCaptured } from "vue";
+
+const props = defineProps([
+  "modelValue",
+  "options",
+  "disabled",
+  "userSource",
+  "optionDisabledProp",
+  "hideValues",
+  "placeholder",
+  "maxTagCount",
+]);
+
+const  {NAME_KEY, AVATAR_KEY, DEPT_KEY,USERID_KEY } =useCustomProps()
+
+const emits = defineEmits(["update:modelValue", "blur", "focus", "change"]);
+// userSelectOptionsAll
+const projUserTreeOptions = computed(
+  () => null
+);
+const innerdata = ref(null);
+const options = computed(() => {
+  const target = props.options || projUserTreeOptions.value;
+  return target
+    ?.map((item) => {
+      item.disabled = props.optionDisabledProp
+        ? item[props.optionDisabledProp]
+        : item.disabled;
+      return item;
+    })
+    .filter((user) => {
+      return !props.hideValues?.includes(user.value);
+    });
+});
+const onNodeClick = (e) => {
+  const target = _find(projUserTreeOptions.value, (item: any) => item.value == e);
+  emits("change", target);
+  emits("update:modelValue", e);
+  nextTick(() => {
+    innerdata.value = e;
+  });
+};
+const onFocus = () => {
+  // userCenter.refreshUserCenter()
+};
+
+const onFilterOption = (inputValue, option) => {
+  const description = option.label
+    .toLowerCase()
+    .includes(inputValue.toLowerCase());
+  return option.label.toLowerCase().includes(inputValue.toLowerCase());
+};
+
+watch(
+  props.userSource,
+  (val) => {
+    innerdata.value = props.modelValue;
+  },
+  { immediate: true }
+);
+onUpdated(() => {
+  innerdata.value = props.modelValue;
+});
+
+onErrorCaptured(()=> {
+  return false
+})
+</script>
+<style lang="less" scoped>
+.wiki-user-caseder {
+    /deep/ .ant-select-selection-item {
+      align-items: center;
+    }
+
+  &.ant-select-disabled {
+      /deep/.ant-select-selector {
+        // border: none !important;
+        background: transparent !important;
+
+        .ant-select-selection-item {
+          color: var(--boke-text-color-regular) !important;
+        }
+      }
+  }
+}
+
+.user-select-user-label {
+  font-size: 12px;
+  white-space: nowrap;
+  display: flex;
+  max-width: 80px;
+  margin-left: 4px;
+  gap: 12px;
+  /deep/ .user-select-avatar-icon {
+    flex: none;
+  }
+}
+</style>

package/packages/boke-devops-vue/src/AegisUser/store.ts

@@ -0,0 +1,23 @@
+import { computed, toRef,  getCurrentInstance, inject } from "vue"
+import { globalConfig, globalState } from "../Provider/store"
+import { mergeWith } from "lodash-es"
+
+export const useCustomProps = () => {
+    const props = getCurrentInstance()?.attrs as any;
+    const injectGlobalConfig = inject("globalConfig") as any
+    const injectGlobalState = inject("globalState") as any
+    const mergedProps = mergeWith({}, globalConfig.avatar, injectGlobalConfig?.avatar, props?.customProps || {});
+
+    let NAME_KEY = toRef(mergedProps, 'user_name')
+    let AVATAR_KEY = toRef(mergedProps, 'user_avatar')
+    let DEPT_KEY = toRef(mergedProps, 'dept_name')
+    let USERID_KEY = toRef(mergedProps, 'user_id')
+    const global_always_avatar_is_hihglight = injectGlobalState?.global_always_avatar_is_hihglight || globalState?.global_always_avatar_is_hihglight
+    return {
+        NAME_KEY,
+        AVATAR_KEY,
+        DEPT_KEY,
+        USERID_KEY,
+        global_always_avatar_is_hihglight
+    }
+}

package/packages/boke-devops-vue/src/AegisUser/user-avatar-group.vue

@@ -0,0 +1,76 @@
+<template>
+  <a-typography-text v-if="!data || data.length === 0" type="info">{{props.placeholder}}</a-typography-text>
+  <rmp-user-avatar v-else-if="data.length == 1" :data="data[0]" :key="data[0]?.[AVATAR_KEY]" :size="size" :hide-popover="false"
+    :show-text="props.showText" :is_highlight="() => props.is_highlight(data[0])"  :tag="props.tag"></rmp-user-avatar>
+  <a-popover v-else show-arrow placement="bottom" destroy-on-close>
+    <div>
+      <a-avatar-group>
+        <template v-for="(el, index) in data">
+          <a-avatar :src="el?.[AVATAR_KEY]" :key="el?.[AVATAR_KEY]" v-if="index < props.max"  :size="$props.size" :class="{ is_highlight: isH(el) }"></a-avatar>
+        </template>
+        <a-avatar v-if="props.max < data.length" shape="circle" style="background: rgb(103 103 103)" :size="$props.size"> 共{{ data.length }}人</a-avatar>
+      </a-avatar-group>
+    </div>
+    <!-- <div slot="content">触发元素是指触发浮层内容显示的元素</div> -->
+    <template #content>
+      <div style="padding: 8px; max-width: 320px;  gap: 16px; display: flex; flex-wrap: wrap">
+        <rmp-user-avatar v-for="(el, index) in data" :key="el?.[AVATAR_KEY]" :data="el" :size="'small'" :show-text="true"
+          style="display: inline-flex" :is_highlight="() => props.is_highlight(el)" :tag="props.tag" ></rmp-user-avatar>
+      </div>
+    </template>
+  </a-popover>
+</template>
+
+<script setup lang="jsx">
+import { useAttrs } from "vue"
+import RmpUserAvatar from './user-avatar.vue';
+import { Popover as APopover, AvatarGroup as AAvatarGroup, Avatar as AAvatar, TypographyText as ATypographyText} from "ant-design-vue"
+import { useCustomProps } from "./store"
+import {isFunction} from "lodash-es"
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  size: {
+    type: String,
+    default: '27px',
+  },
+  showText: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: "暂无人员"
+  },
+  max: {
+    type: Number,
+    default: 3,
+  },
+  is_highlight: {
+    type: Function,
+    default: (v) => {
+      return false
+    }
+  },
+  tag: {
+    type: Boolean,
+  }
+});
+
+const attrs =  useAttrs ()
+const { AVATAR_KEY, global_always_avatar_is_hihglight, NAME_KEY, DEPT_KEY } = useCustomProps()
+const isH = (item) => {
+  if(global_always_avatar_is_hihglight) {
+    return isFunction(global_always_avatar_is_hihglight)? global_always_avatar_is_hihglight(item): global_always_avatar_is_hihglight
+  }
+  return (isFunction(props.is_highlight)? props?.is_highlight(item): props.is_highlight)
+}
+</script>
+<style lang="less" scoped>
+.is_highlight{
+  box-shadow: 0 0px 0px 1.5px var(--boke-color-primary);
+}
+</style>

package/packages/boke-devops-vue/src/AegisUser/user-avatar.vue

@@ -0,0 +1,347 @@
+<template>
+  <div style="display:inline-flex">
+    <ATag class="boke-useravator-wrapper" :class="{
+      'wrapper-only-name': props.onlyName,
+      is_tag: props.tag && !props.color,
+      is_highlight: isHigh(),
+      disabled: props.disabled,
+      'only-icon-style': props.onlyIcon
+    }" v-bind="attrs" :style="{ padding: '2px', paddingRight: '12px', borderRadius: '50px' }" v-if="data"
+      :color="props.color || 'default'" :title="data?.[DEPT_KEY]">
+      <div class="left-icon" ref="targetRef" @mouseenter="onShowPopover()" @mousemove="onShowPopover()"
+        @mouseleave="onClosePopover()">
+        <AAvatar v-if="!props.onlyName" :src="user_icon" :class="'avator-icon'" :size="props.size">
+        </AAvatar>
+        <span v-else>
+          <span v-if="props.linkType == 'text'">
+            {{ user_name }}
+          </span>
+          <el-link v-else :type="props.linkType" :underline="false">
+            {{ user_name }}
+          </el-link>
+        </span>
+      </div>
+      <slot name="prefix"></slot>
+      <div class="label" v-if="!props.onlyIcon && !props.onlyName">
+        <span class="realname">
+          {{
+      isLoading
+        ? "加载中..."
+        : user_name
+    }}
+        </span>
+        <span class="id" v-if="!props.noID">
+          <span>{{ dept_name }}</span>
+        </span>
+      </div>
+      <div v-if="props.suffix">{{ props.suffix }}</div>
+      <AButton size="small" v-if="props.closable" @click.stop.prevent="onClose" :color="props.color" type="text"
+        shape="circle" style="margin-left: 3px; transform: translateY(0) scale(0.6); opacity: 0.8">
+        <template #icon>
+          <CloseOutlined />
+        </template>
+      </AButton>
+      <slot name="default" :scoped="data"></slot>
+    </ATag>
+  </div>
+</template>
+
+<script lang="jsx">
+import { defineComponent } from "vue"
+import {
+  ref,
+  defineEmits,
+  computed,
+} from "vue";
+import { Avatar as AAvatar, Button as AButton, Tag as ATag } from "ant-design-vue/es"
+import { useCustomProps } from "./store"
+import { isFunction } from "lodash-es"
+import {CloseOutlined} from "@ant-design/icons-vue"
+
+export default defineComponent({
+  inheritAttrs: false,
+  name: "BokeUserAvator", // 切记：defineOptions() vue3.3才有，请使用defineComponent
+  components: {
+    'AAvatar': AAvatar,
+    "AButton": AButton,
+    "ATag": ATag,
+    CloseOutlined
+  },
+  props: {
+    size: {
+      type: [Number, String],
+      required: false,
+      default: 28
+    },
+    hidePopover: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    onlyIcon: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    onlyName: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    linkType: {
+      type: null,
+      required: false,
+      default: "primary"
+    },
+    data: {
+      type: null,
+      required: false,
+      default: null
+    },
+    shape: {
+      type: String,
+      required: false,
+      default: "circle"
+    },
+    insidePopover: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    noID: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    noDialogDetail: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    tag: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    closable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    color: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    suffix: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    is_highlight: {
+      type: Function,
+      required: false,
+      default: () => false
+    }
+  },
+  emits: ['close'],
+  setup(props, { attrs, emit }) {
+    const { NAME_KEY, AVATAR_KEY, DEPT_KEY, USERID_KEY, global_always_avatar_is_hihglight } = useCustomProps()
+    const appVersion = "1.0.0";
+    console.log(emit,"emits")
+    const targetRef = ref();
+    const onShowPopover = () => { };
+    const showViewer = ref(false);
+
+    const onClosePopover = () => { };
+    const isMyself = ref(false);
+
+    const user_name = computed(() => {
+      return props.data[NAME_KEY.value] || "未知用户";
+    });
+
+    const dept_name = computed(() => {
+      return props.data[DEPT_KEY.value] || "未知部门";
+    });
+
+    const user_id = computed(() => {
+      return props.data[USERID_KEY.value] || "未知用户";
+    });
+    const data = ref<any>(props.data);
+    const user_icon = ref(props.data[AVATAR_KEY.value]);
+    const isLoading = ref(false);
+
+    const isHigh = () => {
+      if (global_always_avatar_is_hihglight) {
+        return isFunction(global_always_avatar_is_hihglight) ? global_always_avatar_is_hihglight(data.value) : global_always_avatar_is_hihglight
+      }
+      return isFunction(props.is_highlight) ? props?.is_highlight(data.value) : props.is_highlight
+    }
+
+    const onClose= ()=> {
+      emit("close")
+    }
+    return {
+      user_name,
+      dept_name,
+      user_id,
+      data,
+      user_icon,
+      isLoading,
+      isHigh,
+      props,
+      onShowPopover,
+      onClosePopover,
+      attrs,
+      emit,
+      onClose
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.boke-useravator-wrapper {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  overflow: hidden;
+  margin-left: 4px;
+  border: none;
+
+  &.ant-tag-default {
+    cursor: default;
+    background-color: transparent;
+
+    &:hover {
+      filter: brightness(0.8)
+    }
+  }
+
+  &.is_tag {
+    background-color: var(--boke-fill-color-light);
+    border-radius: 118px;
+  }
+
+  &.is_highlight {
+    border-radius: 118px;
+    background-color: var(--boke-color-primary);
+    color: white;
+  }
+
+  &.disabled {
+    pointer-events: none;
+  }
+
+  .left-icon {
+    display: inline-flex;
+    padding: 0 4px 0 2px;
+    position: relative;
+  }
+
+  &.wrapper-only-name {
+    margin-left: 0px;
+
+    .left-icon {
+      padding: 0 0px;
+    }
+  }
+
+  .label {
+    font-size: 12px;
+    white-space: nowrap;
+    display: flex;
+    flex-direction: column;
+    max-width: 80px;
+    margin-left: 4px;
+
+    span {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 14px;
+
+      &.realname {
+        margin-bottom: 0;
+
+        &.lineThrough {
+          // text-decoration: line-through;
+          color: #75757599;
+        }
+      }
+
+      &.id {
+        opacity: 0.7;
+        zoom: 0.8;
+      }
+    }
+  }
+
+  &.isByeBye {
+    opacity: 0.5;
+
+    .avator-icon {
+      position: relative;
+
+      &::after {
+        content: "";
+        width: inherit;
+        height: 100%;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        z-index: 100;
+        display: block;
+        border: 2px solid var(--boke-color-danger);
+        border-radius: inherit;
+        box-sizing: border-box;
+        pointer-events: none;
+      }
+    }
+  }
+
+  .left-icon {
+    :deep(.el-avatar) {
+      &::before {
+        content: "";
+        width: inherit;
+        height: 100%;
+        position: absolute;
+        top: 0px;
+        left: 4px;
+        z-index: 100;
+        display: block;
+        border: 1px solid var(--boke-border-color-extra-light);
+        border-radius: inherit;
+        box-sizing: border-box;
+        pointer-events: none;
+        mix-blend-mode: darken;
+      }
+    }
+  }
+
+  :deep(.el-avatar) {
+    img {
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+}
+
+.demo-rich-conent {
+  :deep(.el-avatar) {
+    img {
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+}
+
+.only-icon-style {
+  padding: 0;
+  margin: 0;
+}
+</style>