boke-devops 0.0.30 → 0.0.38

package/packages/boke-devops-vue/package.json

@@ -1,59 +1,61 @@
-{
-  "name": "@devops/boke-devops-vue",
-  "version": "0.0.30",
-  "description": "BokeDevopsUI",
-  "main": "dist/index.es.js",
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "start": "vite --host",
-    "dev": "npm start ",
-    "build:tsc": "vue-tsc --emitDeclarationOnly -d",
-    "build": "pnpm run build:tsc && vite build",
-    "lint": "eslint 'src/**/*.{js,ts,tsx,jsx}' 'examples/**/*.{js,ts,tsx,jsx}' --fix"
-  },
-  "files": [
-    "dist",
-    "types"
-  ],
-  "dependencies": {
-    "@ant-design/icons-vue": "^7.0.1",
-    "ant-design-vue": "^4.2.1",
-    "protobufjs": "^7.3.0"
-  },
-  "peerDependencies": {
-    "vue": ">=3.2.0"
-  },
-  "devDependencies": {
-    "@types/lodash": "^4.14.182",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^16.4.13",
-    "@types/qs": "^6.9.7",
-    "@vitejs/plugin-vue": "^2.3.1",
-    "@vitejs/plugin-vue-jsx": "^1.1.7",
-    "@vue/compiler-sfc": "^3.0.5",
-    "@vue/eslint-config-typescript": "^11.0.0",
-    "@web/test-runner": "^0.13.15",
-    "husky": "^7.0.4",
-    "less": "^4.1.1",
-    "lint-staged": "^12.1.2",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "prettier": "^2.4.1",
-    "rollup-plugin-visualizer": "^5.9.0",
-    "sass": "^1.37.5",
-    "stylelint": "~13.13.1",
-    "stylelint-config-prettier": "~9.0.3",
-    "stylelint-less": "1.0.1",
-    "stylelint-order": "~4.1.0",
-    "typescript": "^4.3.5",
-    "vite": "^2.7.1",
-    "vite-plugin-dts": "^3.6.0",
-    "vue-tsc": "^1.0.8"
-  },
-  "license": "MIT",
-  "keywords": [],
-  "authors": [
-    "Julone"
-  ],
-  "gitHead": "35743a6fa655ec881297d4c5a2d023c1fe63b58b"
+{
+  "name": "@devops/boke-devops-vue",
+  "version": "0.0.38",
+  "description": "BokeDevopsUI",
+  "author": "Julone",
+  "main": "dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "start": "vite --host",
+    "dev": "npm start",
+    "build:tsc": "vue-tsc --emitDeclarationOnly -d",
+    "build": "pnpm run build:tsc && vite build",
+    "lint": "eslint 'src/**/*.{js,ts,tsx,jsx}' 'examples/**/*.{js,ts,tsx,jsx}' --fix"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
+    "@devops/boke-devops-vue": "file:",
+    "ant-design-vue": "^4.2.1",
+    "protobufjs": "^7.3.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.2.0"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.182",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^16.4.13",
+    "@types/qs": "^6.9.7",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vitejs/plugin-vue-jsx": "^1.1.7",
+    "@vue/compiler-sfc": "^3.0.5",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@web/test-runner": "^0.13.15",
+    "husky": "^7.0.4",
+    "less": "^4.1.1",
+    "lint-staged": "^12.1.2",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "prettier": "^2.4.1",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "sass": "^1.37.5",
+    "stylelint": "~13.13.1",
+    "stylelint-config-prettier": "~9.0.3",
+    "stylelint-less": "1.0.1",
+    "stylelint-order": "~4.1.0",
+    "typescript": "^4.3.5",
+    "vite": "^2.7.1",
+    "vite-plugin-dts": "^3.6.0",
+    "vue-tsc": "^1.0.8"
+  },
+  "license": "MIT",
+  "keywords": [],
+  "authors": [
+    "Julone"
+  ],
+  "gitHead": "35743a6fa655ec881297d4c5a2d023c1fe63b58b"
 }

package/packages/boke-devops-vue/src/Provider/Provider.vue

@@ -19,4 +19,10 @@ const props = defineProps({
 const {gc, gs} = mergeConfig(props)
 provide("globalConfig", gc)
 provide("globalState", gs)
+
+console.log(
+      ` %c ${'@devops/boke-devops-vue'}  %c 由 BOKE运维部 构建 `,
+      'color: #fff; background: #ea3c37; padding:5px 0;',
+      'background: #333; color: #fff; padding:5px 0;',
+    );
 </script>

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

@@ -1,21 +1,26 @@
 import {reactive} from "vue"
 import {mergeWith} from "lodash-es"
 
+// 属性生效规则: 组件Props > 全局Provider的Props > 默认Props
 export const globalConfig = {
     avatar: {
         user_name: "name",
         dept_name: "dept_name",
         user_avatar: "avatar",
-        user_id: "user_id"
+        user_id: "user_id" // cmdb中的user_id
+    },
+    avatarCard: {
+        "api_url": process.env.NODE_ENV == 'development'? "https://devopstest.pocketcity.com/api": "//devops.pocketcity.com/api",
+        "enabled": true,
     }
 }
 
-
 export const globalState = reactive({
     global_always_avatar_is_hihglight: null, //如果设置这个, 自带的头像高亮将失效
 })
 
 export const mergeConfig = (props: any) => {
+
     return {
         gc: mergeWith({}, globalConfig, props.globalConfig),
         gs: mergeWith({}, globalState, props.globalState), // TIP: 为什么需要合并到{}, 因为要避免污染全局的属性

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

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

package/packages/boke-devops-vue/src/{AegisUser/store.ts → UserAvatar/avatar.store.ts}

@@ -7,17 +7,26 @@ export const useCustomProps = () => {
     const injectGlobalConfig = inject("globalConfig") as any
     const injectGlobalState = inject("globalState") as any
     const mergedProps = mergeWith({}, globalConfig.avatar, injectGlobalConfig?.avatar, props?.customProps || {});
+    const mergedAvatarCardProps = mergeWith({}, globalConfig.avatarCard, injectGlobalConfig?.avatarCard);
+
 
     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
+    const global_disabled_avatar_card = injectGlobalConfig?.avatarCard?.enabled == false
+    const AVATAR_CARD_URL = mergedAvatarCardProps.api_url
+
     return {
         NAME_KEY,
         AVATAR_KEY,
         DEPT_KEY,
         USERID_KEY,
-        global_always_avatar_is_hihglight
+        global_always_avatar_is_hihglight,
+        global_disabled_avatar_card,
+        AVATAR_CARD_URL
     }
 }

package/packages/boke-devops-vue/src/UserAvatar/user-avatar-card.vue

@@ -0,0 +1,188 @@
+<template>
+    <div
+      class="mps-user-avator-rich-conent"
+      style="display: flex; gap: 16px; flex-direction: row;     align-items: flex-start;"
+    >
+      <div style="z-index: 2">
+        <img :src="userinfo.user_icon" style="width: 70px; height: 70px;border-radius: 500px;margin-top: 10px;" />
+      </div>
+      <div style="z-index: 2">
+        <p
+          class="demo-rich-content__name"
+          style="margin: 0 0 6px 0; font-weight: 500"
+        >
+          <a-space :size="12" :spacer="spacer" :wrap="false">
+            <span style="font-weight:bold">{{ userinfo.user_name }}</span>
+            <span class="dept_class">{{ userinfo.dept_name }}</span>
+            <span class="dept_class" v-if="userinfo.dept_name != extraInfo?.min_fs_department_name && extraInfo?.min_fs_department_name">{{ extraInfo?.min_fs_department_name }}</span>
+          </a-space>
+        </p>
+        <p
+            v-if="extraInfo"
+          class="demo-rich-content__mention"
+          style="
+            margin: 0 0 8px 0;
+            font-size: 14px;
+            color: var(--el-color-info);
+          "
+        >
+          <a-space :wrap="true" :size="2">
+            <ATag :bordered="false" color="orange" v-for="el in extraInfogroups" :key="el.name" size="small">
+              {{el.name}}
+            </ATag>
+            <a-button  type="link" size="small"  @click="seeAllRoles = !seeAllRoles, $emit('pinCard')" style="zoom: 0.8">关联角色({{extraInfogroupsCount}})<CaretDownOutlined :rotate="seeAllRoles?180: 0" /></a-button>
+          </a-space>
+        </p>
+        <p
+            v-if="extraInfo"
+            class="demo-rich-content__mention"
+            style="
+            margin: 0 0 6px 0;
+            font-size: 14px;
+            color: var(--el-color-info);
+          "
+        >
+          <a-space :wrap="true" :size="2">
+            <MpsRoleTag v-for="(el,index) in projectslist"  :key="el" size="small">
+              {{el}}
+            </MpsRoleTag>
+            <a-button  type="link" size="small"  @click="seeAllProjects = !seeAllProjects, $emit('pinCard')" style="zoom: 0.8">关联项目({{projectslistCount}})<CaretDownOutlined :rotate="seeAllProjects?180: 0" /></a-button>
+          </a-space>
+        </p>
+        <p  class="demo-rich-content__desc" style="margin:  8px 0 0">
+          <a-space :size="2" :spacer="spacer">
+            <a-button
+                type="primary"
+              size="small"
+                :disabled="!extraInfo"
+              @click="onChat(extraInfo?.fs_open_id)"
+            >
+              飞书联系
+            </a-button>
+          </a-space>
+        </p>
+        <a style="position:absolute; right: 8px; bottom: 8px;float:right; font-size: 12px; opacity: 0.8; color: #ccc; transform: translateY(0px)" href="https://devops.pocketcity.com/">数据来源: Aegis</a>
+
+      </div>
+      <div
+        class="mps-user-avator-rich-conent_after"
+        :style="{
+          'background-image': `url('https://sf3-scmcdn-cn.feishucdn.com/obj/feishu-static/lark/open/app_store/images/banner-2c2539b4.png')`,
+          opacity: 0.4,
+          'background-size': 'cover',
+          'background-position-y': '-30px',
+        }"
+      ></div>
+    </div>
+</template>
+<style lang="scss" scoped>
+  .mps-user-avator-rich-conent {
+    min-width: 270px;
+    max-width: 350px;
+    :deep(.el-avatar) {
+      img {
+        width: 100%;
+        cursor: zoom-in;
+      }
+    }
+    :deep(.dept_class){
+      color: #333;
+      font-size: 12px;
+    }
+
+    .mps-user-avator-rich-conent_after {
+      content: '';
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      top: 0px;
+      z-index: 1;
+      border-radius: 8px;
+
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: left top;
+    }
+  }
+</style>
+<script>
+  import { defineComponent, createVNode } from 'vue'
+  import {Tag as ATag ,Divider as ADivider, Space as ASpace, Button as AButton} from "ant-design-vue"
+  import {hex_sha1} from "../utils/encode";
+  import {CaretDownOutlined} from "@ant-design/icons-vue"
+  import {useCustomProps} from "./avatar.store"
+
+  export default defineComponent({
+    props: ['userinfo'],
+    components: { MpsRoleTag: ATag,  MpsGroupTag: ATag, MpsDictTag: ATag ,ASpace,AButton,ATag,CaretDownOutlined},
+    emit: ['pinCard'],
+    data() {
+      return {
+        showViewer: false,
+        spacer: createVNode(ADivider, {
+          direction: 'vertical',
+          style: { margin: '0 2px' },
+        }),
+        isDark: false,
+        extraInfo: null,
+        seeAllProjects:  false,
+        seeAllRoles: false
+      }
+    },
+    computed: {
+      projectslist(){
+        return (this.extraInfo?.projects_list || []).filter((item, index) => {
+          if(this.seeAllProjects) {
+            return true
+          }
+          return index < 4
+        })
+      },
+      projectslistCount(){
+        return (this.extraInfo?.projects_list || [])?.length
+      },
+      extraInfogroups(){
+        return (this.extraInfo?.groups || []).filter((item, index) => {
+          if(this.seeAllRoles) {
+            return true
+          }
+          return index < 4
+        })
+      },
+      extraInfogroupsCount(){
+        return (this.extraInfo?.groups || []).length
+      }
+
+    },
+    methods: {
+      onChat(account) {
+        window.open(`feishu://applink.feishu.cn/client/chat/open?openId=${account}`)
+      },
+    },
+    mounted() {
+      // 预备参数
+      const jsapi_ticket = Math.random().toString(36).substr(2, 18)
+      const noncestr = Math.random().toString(36).substr(2, 7)
+      const user_id =  this.userinfo?.user_id
+      const timestamp = Date.now()
+      // 加密参数生成签名
+      const encode = `jsapi_ticket=${jsapi_ticket}&noncestr=${noncestr}&user_id=${user_id}&timestamp=${timestamp}`
+      const signature = hex_sha1(encode)
+      // 查询
+      try {
+        const {AVATAR_CARD_URL} = useCustomProps();
+        const api = `/users/getUserInfo/?${encode}&signature=${signature}`
+        fetch(AVATAR_CARD_URL + api,).then(res=> res.json()).then(res=> {
+          if (res.code == 0) {
+            this.extraInfo = res.data
+          }
+        })
+      } catch (error) {
+        
+      }
+    
+    },
+  })
+</script>
+

package/packages/boke-devops-vue/src/{AegisUser → UserAvatar}/user-avatar-group.vue

@@ -3,7 +3,7 @@
   <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>
+    <div style="display: inline-flex;">
       <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>
@@ -25,7 +25,7 @@
 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 { useCustomProps } from "./avatar.store"
 import {isFunction} from "lodash-es"
 
 const props = defineProps({