boke-devops 0.0.30 → 0.0.38

package/packages/boke-docs/docs/components/Avatar/__test__/user_avatar.test.js

@@ -0,0 +1,18 @@
+import UserAvatar from '../demo/normal.vue'
+import UserAvatarWith_provider from '../demo/with_provider.vue'
+import { mount, VueWrapper } from '@vue/test-utils';
+import { describe, expect, it, vi, test, } from 'vitest';
+
+test('user avatar is normal', async () => {
+    const wrapper = mount(UserAvatar, {
+        },
+    );
+    expect(wrapper.element).toMatchSnapshot() // 匹配快照
+})
+
+test('with provider', async () => {
+    const wrapper = mount(UserAvatarWith_provider, {
+        }
+    )
+    expect(wrapper.element).toMatchSnapshot() // 匹配快照
+})

package/packages/boke-docs/docs/components/Avatar/demo/normal.vue

@@ -4,6 +4,7 @@
       tag
       :data="data"
   ></BokeUserAvatar>
+  无数据的时候
   <BokeUserAvatar
       tag
       :data="{}"

package/packages/boke-docs/docs/components/Avatar/index.md

@@ -8,3 +8,21 @@
 <code src="./demo/with_provider.vue"></code>
 
 ### Props
+| 属性名         | 类型                  | 必填   | 默认值      | 描述                                                         |
+| ------------ | ------------------- | ----- | --------- | ------------------------------------------------------------ |
+| size         | Number, String      | 否     | 28        | 头像尺寸，可以是数字或字符串。                                      |
+| hidePopover  | Boolean             | 否     | false     | 是否隐藏气泡框（popover）。                                         |
+| onlyIcon     | Boolean             | 否     | false     | 是否只显示头像图标，不显示其他内容。                                   |
+| onlyName     | Boolean             | 否     | false     | 是否只显示用户名，不显示其他信息。                                    |
+| linkType     | 不限类型              | 否     | "primary" | 链接类型，用于决定用户名称显示的样式或链接类型。                             |
+| data         | 不限类型              | 否     | null      | 用户数据，用于显示头像、用户名等信息。                                  |
+| shape        | String              | 否     | "circle"  | 头像形状，可以是"circle"（圆形）或其他支持的形状。                          |
+| insidePopover| Boolean             | 否     | false     | 是否在气泡框内部显示。                                              |
+| noID         | Boolean             | 否     | false     | 是否隐藏用户ID。                                                 |
+| noDialogDetail| Boolean            | 否     | false     | 是否隐藏对话框详细信息。                                              |
+| tag          | Boolean             | 否     | false     | 是否显示标签样式。                                                 |
+| closable     | Boolean             | 否     | false     | 是否可关闭。                                                    |
+| color        | String              | 否     | ""        | 头像或标签的颜色。                                                 |
+| disabled     | Boolean             | 否     | false     | 是否禁用。                                                     |
+| suffix       | String              | 否     | ""        | 后缀文本，显示在头像或标签之后。                                        |
+| is_highlight | Function            | 否     | () => false| 一个函数，用于确定头像或标签是否高亮显示的条件。                              |

package/packages/boke-docs/docs/components/AvatarGroup/__test__/__snapshots__/user_avatar.test.js.snap

@@ -0,0 +1,174 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`user avatar is normal 1`] = `
+<div>
+  
+  <div
+    data-v-46dce084=""
+    style="display: inline-flex;"
+  >
+    <div
+      class="ant-avatar-group css-dev-only-do-not-override-16pw25h"
+      data-v-46dce084=""
+    >
+      
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-16pw25h"
+        data-v-46dce084=""
+      >
+        <img
+          src="https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp"
+        />
+      </span>
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-16pw25h"
+        data-v-46dce084=""
+      >
+        <img
+          src="https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp"
+        />
+      </span>
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-16pw25h"
+        data-v-46dce084=""
+      >
+        <img
+          src="https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp"
+        />
+      </span>
+      
+    </div>
+  </div>
+  <!---->
+  
+</div>
+`;
+
+exports[`with provider 1`] = `
+<div>
+  <h4>
+    Inside of Provider
+  </h4>
+  
+  <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 is_tag is_highlight"
+      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.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp"
+          />
+        </span>
+        <!---->
+        
+      </div>
+      
+      
+      <div
+        class="label"
+        data-v-7871c292=""
+      >
+        <span
+          class="realname"
+          data-v-7871c292=""
+        >
+          Julone-new
+        </span>
+        <span
+          class="id"
+          data-v-7871c292=""
+        >
+          <span
+            data-v-7871c292=""
+          >
+            运维部
+          </span>
+        </span>
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+      
+      
+      
+      <!---->
+    </span>
+  </div>
+  
+  <h4>
+    Out of Provider
+  </h4>
+  <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 is_tag"
+      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.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp"
+          />
+        </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-->
+      
+      
+      
+      <!---->
+    </span>
+  </div>
+</div>
+`;

package/packages/boke-docs/docs/components/AvatarGroup/__test__/user_avatar.test.js

@@ -0,0 +1,18 @@
+import UserAvatar from '../demo/normal.vue'
+import UserAvatarWith_provider from '../demo/with_provider.vue'
+import { mount, VueWrapper } from '@vue/test-utils';
+import { describe, expect, it, vi, test, } from 'vitest';
+
+test('user avatar is normal', async () => {
+    const wrapper = mount(UserAvatar, {
+        },
+    );
+    expect(wrapper.element).toMatchSnapshot() // 匹配快照
+})
+
+test('with provider', async () => {
+    const wrapper = mount(UserAvatarWith_provider, {
+        }
+    )
+    expect(wrapper.element).toMatchSnapshot() // 匹配快照
+})

package/packages/boke-docs/docs/components/AvatarGroup/demo/normal.vue

@@ -0,0 +1,36 @@
+<template>
+<div>
+  <BokeUserAvatarGroup
+      tag
+      :data="data"
+  ></BokeUserAvatarGroup>
+
+</div>
+
+</template>
+
+<script setup>
+
+import {BokeProvider, BokeUserAvatarGroup} from '@devops/boke-devops-vue';
+
+const data = [
+    {
+  name: 'Julone', // Yes
+  cmdb_name: "Julone-new", // No
+  dept_name: '运维部',
+  avatar: 'https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp'
+},
+    {
+  name: 'Julone2', // Yes
+  cmdb_name: "Julone-new", // No
+  dept_name: '运维部',
+  avatar: 'https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp'
+},
+    {
+  name: 'Julone3', // Yes
+  cmdb_name: "Julone-new", // No
+  dept_name: '运维部',
+  avatar: 'https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp'
+}
+]
+</script>

package/packages/boke-docs/docs/components/AvatarGroup/demo/with_provider.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <h4>Inside of Provider</h4>
+    <BokeProvider :globalConfig="globalConfig" :globalState="globalState">
+      <BokeUserAvatar
+          tag
+          :data="data"
+      ></BokeUserAvatar>
+    </BokeProvider>
+    <h4>Out of Provider</h4>
+    <BokeUserAvatar
+        tag
+        :data="data"
+    ></BokeUserAvatar>
+    <h4>In of Drawer</h4>
+    <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
+      open
+    </el-button>
+
+    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
+      <span>Hi there!</span>
+      <BokeUserAvatar
+          tag
+          :data="data"
+      ></BokeUserAvatar>
+    </el-drawer>
+
+  </div>
+</template>
+
+<script setup>
+
+import {BokeProvider, BokeUserAvatar} from '@devops/boke-devops-vue';
+import { ref } from 'vue';
+import {ElButton,  ElDrawer} from "element-plus"
+const drawer = ref(false)
+
+const globalConfig = {
+  avatar: {
+    user_name: "cmdb_name"
+  },
+  avatarCard: {
+    enabled: false,
+    api_url: "/"
+  }
+}
+const globalState = {
+  global_always_avatar_is_hihglight: userinfo=>{ // 是否高亮Avatar
+    return true
+  }
+}
+const data = {
+  name: 'Julone', // 原先的, 失效
+  cmdb_name: "Julone-new", // 生效!
+  dept_name: '运维部',
+  user_id: 1,
+  avatar: 'https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp'
+}
+</script>

package/packages/boke-docs/docs/components/AvatarGroup/index.md

@@ -0,0 +1,28 @@
+# 用户头像组
+
+## 正常使用
+
+<code src="./demo/normal.vue"></code>
+
+## 全局修改 - keyname
+<code src="./demo/with_provider.vue"></code>
+
+### Props
+| 属性名         | 类型                  | 必填   | 默认值      | 描述                                                         |
+| ------------ | ------------------- | ----- | --------- | ------------------------------------------------------------ |
+| size         | Number, String      | 否     | 28        | 头像尺寸，可以是数字或字符串。                                      |
+| hidePopover  | Boolean             | 否     | false     | 是否隐藏气泡框（popover）。                                         |
+| onlyIcon     | Boolean             | 否     | false     | 是否只显示头像图标，不显示其他内容。                                   |
+| onlyName     | Boolean             | 否     | false     | 是否只显示用户名，不显示其他信息。                                    |
+| linkType     | 不限类型              | 否     | "primary" | 链接类型，用于决定用户名称显示的样式或链接类型。                             |
+| data         | 不限类型              | 否     | null      | 用户数据，用于显示头像、用户名等信息。                                  |
+| shape        | String              | 否     | "circle"  | 头像形状，可以是"circle"（圆形）或其他支持的形状。                          |
+| insidePopover| Boolean             | 否     | false     | 是否在气泡框内部显示。                                              |
+| noID         | Boolean             | 否     | false     | 是否隐藏用户ID。                                                 |
+| noDialogDetail| Boolean            | 否     | false     | 是否隐藏对话框详细信息。                                              |
+| tag          | Boolean             | 否     | false     | 是否显示标签样式。                                                 |
+| closable     | Boolean             | 否     | false     | 是否可关闭。                                                    |
+| color        | String              | 否     | ""        | 头像或标签的颜色。                                                 |
+| disabled     | Boolean             | 否     | false     | 是否禁用。                                                     |
+| suffix       | String              | 否     | ""        | 后缀文本，显示在头像或标签之后。                                        |
+| is_highlight | Function            | 否     | () => false| 一个函数，用于确定头像或标签是否高亮显示的条件。                              |