@blueking/bk-user-selector 0.0.2-beta.1 → 0.0.3

package/README.md

@@ -8,8 +8,7 @@
 - 支持用户搜索功能
 - 支持跨租户显示
 - 支持拖拽排序（多选模式）
-- 自动处理可见性和折叠标签
-- 完全响应式设计
+- 支持快速选择当前用户
 
 ## 安装
 
@@ -19,12 +18,13 @@ npm install @blueking/bk-user-selector
 
 ## 使用方法
 
-### 在 Vue 3 中使用
+### 在 Vue3 中使用
 
 ```javascript
 // 全局注册
 import { createApp } from 'vue';
 import BkUserSelector from '@blueking/bk-user-selector';
+import '@blueking/bk-user-selector/vue3/vue3.css';
 
 const app = createApp(App);
 app.use(BkUserSelector);
@@ -40,6 +40,13 @@ export default {
 };
 ```
 
+### 在 Vue2 中使用
+
+```javascript
+import BkUserSelector from '@blueking/bk-user-selector/vue2';
+import '@blueking/bk-user-selector/vue2/vue2.css';
+```
+
 ### 基本用法
 
 ```vue
@@ -49,6 +56,7 @@ export default {
     v-model="selectedUser"
     :api-base-url="apiBaseUrl"
     :tenant-id="tenantId"
+    :current-user-id="currentUserId"
     @change="handleUserChange"
   />
 
@@ -57,6 +65,7 @@ export default {
     v-model="selectedUsers"
     :api-base-url="apiBaseUrl"
     :tenant-id="tenantId"
+    :current-user-id="currentUserId"
     :multiple="true"
     :draggable="true"
     @change="handleUsersChange"
@@ -64,26 +73,28 @@ export default {
 </template>
 
 <script setup>
-import { ref } from 'vue';
-
-// API 基础路径
-const apiBaseUrl = ref('https://api.example.com');
-// 租户 ID
-const tenantId = ref('default');
-// 单选选中值
-const selectedUser = ref('');
-// 多选选中值
-const selectedUsers = ref([]);
-
-// 处理单选模式下的值变化
-const handleUserChange = (user) => {
-  console.log('Selected user:', user);
-};
-
-// 处理多选模式下的值变化
-const handleUsersChange = (users) => {
-  console.log('Selected users:', users);
-};
+  import { ref } from 'vue';
+
+  // API 基础路径
+  const apiBaseUrl = ref('https://api.example.com');
+  // 租户 ID
+  const tenantId = ref('default');
+  // 当前用户ID
+  const currentUserId = ref('admin'); 
+  // 单选选中值
+  const selectedUser = ref('');
+  // 多选选中值
+  const selectedUsers = ref([]);
+
+  // 处理单选模式下的值变化
+  const handleUserChange = user => {
+    console.log('Selected user:', user);
+  };
+
+  // 处理多选模式下的值变化
+  const handleUsersChange = users => {
+    console.log('Selected users:', users);
+  };
 </script>
 ```
 
@@ -91,23 +102,34 @@ const handleUsersChange = (users) => {
 
 ### 属性
 
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| modelValue / v-model | 绑定值，单选为字符串，多选为数组 | String / Array | '' / [] |
-| label | 文本标签 | String | '人员选择' |
-| required | 是否必填 | Boolean | false |
-| placeholder | 占位文本 | String | '请输入人员名称搜索' |
-| multiple | 是否多选 | Boolean | false |
-| draggable | 是否可拖拽（仅多选模式有效） | Boolean | false |
-| apiBaseUrl | API 基础 URL | String | '' |
-| tenantId | 租户 ID | String | '' |
+| 参数                 | 说明                             | 类型           | 默认值               |
+| -------------------- | -------------------------------- | -------------- | -------------------- |
+| modelValue / v-model | 绑定值，单选为字符串，多选为数组 | String / Array | '' / []              |
+| label                | 文本标签                         | String         | '人员选择'           |
+| required             | 是否必填                         | Boolean        | false                |
+| placeholder          | 占位文本                         | String         | '请输入人员名称搜索' |
+| multiple             | 是否多选                         | Boolean        | false                |
+| draggable            | 是否可拖拽（仅多选模式有效）     | Boolean        | false                |
+| apiBaseUrl           | API 基础 URL                     | String         | ''                   |
+| tenantId             | 租户 ID                          | String         | ''                   |
+| currentUserId        | 当前用户ID（用于快速选择"我"）   | String         | ''                   |
 
 ### 事件
 
-| 事件名称 | 说明 | 回调参数 |
-|---------|------|----------|
-| update:modelValue | 绑定值变化时触发 | 变化后的值 |
-| change | 选中值变化时触发 | 变化后的用户信息 |
+| 事件名称          | 说明             | 回调参数         |
+| ----------------- | ---------------- | ---------------- |
+| update:modelValue | 绑定值变化时触发 | 变化后的值       |
+| change            | 选中值变化时触发 | 变化后的用户信息 |
+
+## 功能说明
+
+### 快速选择"我"
+
+当设置了`currentUserId`属性后，组件会在输入框右侧显示一个"我"的标签。点击该标签可以快速选择当前用户，无需手动搜索。
+
+- 在单选模式下，点击"我"会直接选中当前用户
+- 在多选模式下，点击"我"会将当前用户添加到已选列表中（如果尚未选择）
+- 当当前用户已被选中时，"我"标签会显示为灰色且不可点击
 
 ## 开发
 
@@ -124,4 +146,4 @@ npm run build
 
 ## 许可证
 
-MIT
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/bk-user-selector",
-  "version": "0.0.2-beta.1",
+  "version": "0.0.3",
   "description": "蓝鲸用户选择器",
   "license": "MIT",
   "author": "Tencent BlueKing",

package/typings/api/user.d.ts

@@ -17,15 +17,15 @@ export declare const getTenants: (apiBaseUrl: string, tenantId: string) => Promi
  * @param keyword - 搜索关键词
  * @returns 用户列表Promise
  */
-export declare const searchUsers: (apiBaseUrl: string, tenantId: string, keyword?: string) => Promise<User[]>;
+export declare const searchUsers: (apiBaseUrl?: string, tenantId?: string, keyword?: string) => Promise<User[]>;
 /**
- * 批量查找用户
+ * 批量精准查找用户
  * @param apiBaseUrl - API基础URL
  * @param tenantId - 租户ID
  * @param users - 用户名列表
  * @returns 查找到的用户列表Promise
  */
-export declare const lookupUsers: (apiBaseUrl: string, tenantId: string, users?: string[]) => Promise<User[]>;
+export declare const lookupUsers: (apiBaseUrl?: string, tenantId?: string, users?: string[]) => Promise<User[]>;
 /**
  * 将API返回的用户数据格式化为组件所需格式
  * @param users - API返回的用户列表

package/typings/components/multiple-selector.vue.d.ts

@@ -42,6 +42,20 @@ declare const _default: import("vue").DefineComponent<{
         type: () => FormattedUser[];
         default: () => never[];
     };
+    /**
+     * 租户信息映射
+     */
+    tenants: {
+        type: () => Record<string, string>;
+        default: () => {};
+    };
+    /**
+     * 当前用户ID
+     */
+    currentUserId: {
+        type: StringConstructor;
+        default: string;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selectedUsers": (...args: any[]) => void;
     "add-user": (...args: any[]) => void;
@@ -89,16 +103,32 @@ declare const _default: import("vue").DefineComponent<{
         type: () => FormattedUser[];
         default: () => never[];
     };
+    /**
+     * 租户信息映射
+     */
+    tenants: {
+        type: () => Record<string, string>;
+        default: () => {};
+    };
+    /**
+     * 当前用户ID
+     */
+    currentUserId: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & {
     "onUpdate:selectedUsers"?: ((...args: any[]) => any) | undefined;
     "onAdd-user"?: ((...args: any[]) => any) | undefined;
     "onRemove-user"?: ((...args: any[]) => any) | undefined;
 }, {
+    tenants: Record<string, string>;
+    draggable: boolean;
     modelValue: unknown[];
     placeholder: string;
     apiBaseUrl: string;
     tenantId: string;
-    draggable: boolean;
     selectedUsers: FormattedUser[];
+    currentUserId: string;
 }, {}>;
 export default _default;

package/typings/components/single-selector.vue.d.ts

@@ -1,10 +1,10 @@
 import { SingleSelectorProps } from '../types';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<SingleSelectorProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
     change: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<SingleSelectorProps>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/typings/components/user-selector.vue.d.ts

@@ -1,37 +1,34 @@
 import { UserSelectorProps } from '../types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<UserSelectorProps>, {
-    label: string;
-    required: boolean;
+    apiBaseUrl: string;
+    tenantId: string;
     placeholder: string;
     modelValue: string;
     draggable: boolean;
     multiple: boolean;
-    apiBaseUrl: string;
-    tenantId: string;
+    currentUserId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
     change: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<UserSelectorProps>, {
-    label: string;
-    required: boolean;
+    apiBaseUrl: string;
+    tenantId: string;
     placeholder: string;
     modelValue: string;
     draggable: boolean;
     multiple: boolean;
-    apiBaseUrl: string;
-    tenantId: string;
+    currentUserId: string;
 }>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    draggable: boolean;
     modelValue: string | string[];
     placeholder: string;
     apiBaseUrl: string;
     tenantId: string;
+    currentUserId: string;
     multiple: boolean;
-    required: boolean;
-    label: string;
-    draggable: boolean;
 }, {}>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/typings/hooks/useTenantData.d.ts

@@ -2,7 +2,7 @@
  * 租户数据处理 Hook
  * @module hooks/useTenantData
  */
-import { Ref } from 'vue';
+import { type Ref } from 'vue';
 /**
  * 使用租户数据的Hook
  * @param apiBaseUrl - API基础URL

package/typings/hooks/useUserSearch.d.ts

@@ -2,8 +2,8 @@
  * 用户搜索 Hook
  * @module hooks/useUserSearch
  */
-import { Ref } from 'vue';
-import { FormattedUser } from '../types';
+import { type Ref } from 'vue';
+import { type FormattedUser } from '../types';
 /**
  * 使用用户搜索的Hook
  * @param apiBaseUrl - API基础URL

package/typings/hooks/useUserSelection.d.ts

@@ -2,8 +2,8 @@
  * 用户选择 Hook
  * @module hooks/useUserSelection
  */
-import { Ref } from 'vue';
-import { FormattedUser } from '../types';
+import { type Ref } from 'vue';
+import { type FormattedUser } from '../types';
 /**
  * 使用用户选择的Hook
  * @param apiBaseUrl - API基础URL

package/typings/types/index.d.ts

@@ -62,13 +62,13 @@ export interface Tenant {
  */
 export interface UserSelectorProps {
     /**
-     * 文本标签
+     * 接口基础URL
      */
-    label?: string;
+    apiBaseUrl: string;
     /**
-     * 是否必填
+     * 租户ID
      */
-    required?: boolean;
+    tenantId: string;
     /**
      * 占位文字
      */
@@ -86,13 +86,9 @@ export interface UserSelectorProps {
      */
     multiple?: boolean;
     /**
-     * 接口基础URL
-     */
-    apiBaseUrl?: string;
-    /**
-     * 租户ID
+     * 本人ID
      */
-    tenantId?: string;
+    currentUserId?: string;
 }
 /**
  * 单选模式属性
@@ -117,5 +113,9 @@ export interface SingleSelectorProps {
     /**
      * 租户信息映射
      */
-    tenants?: Record<string, string>;
+    tenants: Record<string, string>;
+    /**
+     * 本人ID
+     */
+    currentUserId?: string;
 }

package/typings/utils/common.d.ts

@@ -2,7 +2,7 @@
  * 通用工具函数
  * @module utils/common
  */
-import { FormattedUser } from '../types';
+import { type FormattedUser } from '../types';
 /**
  * 防抖函数
  * @param fn - 需要防抖的函数
@@ -17,7 +17,7 @@ export declare const debounce: <T extends (...args: any[]) => any>(fn: T, delay:
  * @param containerWidth - 容器宽度
  * @returns 可见项目数量
  */
-export declare const calculateVisibleTags: (container: HTMLElement, items: NodeListOf<Element> | HTMLElement[], containerWidth: number) => number;
+export declare const calculateVisibleTags: (container: HTMLElement, items: HTMLElement[] | NodeListOf<Element>, containerWidth: number) => number;
 /**
  * 转换用户数组为Map结构，方便快速查找
  * @param users - 用户列表

package/typings/vue2.d.ts

@@ -1,2 +1,16 @@
-declare const _default: any;
+import BkUserSelector from './components/user-selector.vue';
+declare const _default: {
+    beforeDestroy(): void;
+    created(): void;
+    data(): {
+        app: null;
+        unWatchStack: never[];
+    };
+    mounted(): void;
+    name: string;
+    props: any;
+    render(createElement: any): any;
+};
 export default _default;
+export { BkUserSelector };
+export * from './types';