@blueking/bk-user-selector 0.1.3 → 0.1.5

package/README.md

@@ -20,6 +20,8 @@
 | 👥 **用户组**     | 支持用户组/角色分组显示              |
 | ✏️ **自定义输入** | 支持创建自定义用户和自由粘贴         |
 | 🎭 **自定义渲染** | 支持自定义标签和列表项渲染           |
+| 📝 **多行输入**   | 支持 textarea 模式，完整展示所有标签 |
+| ⌨️ **键盘导航**   | 支持上下键切换选项、Enter 快速选中   |
 
 ## 📦 安装
 
@@ -231,6 +233,37 @@ export default {
 </script>
 ```
 
+### 多行输入模式（Textarea）
+
+当需要展示大量已选用户时，可使用 textarea 模式完整展示所有标签：
+
+```vue
+<template>
+  <BkUserSelector
+    v-model="selectedUsers"
+    :api-base-url="apiBaseUrl"
+    :tenant-id="tenantId"
+    :multiple="true"
+    type="textarea"
+    :rows="4"
+    :resize="true"
+    @change="handleChange"
+  />
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const apiBaseUrl = ref('https://api.example.com');
+  const tenantId = ref('default');
+  const selectedUsers = ref([]);
+
+  const handleChange = users => {
+    console.log('Selected:', users);
+  };
+</script>
+```
+
 ### 排除指定用户
 
 从下拉列表中排除特定用户：
@@ -265,7 +298,7 @@ export default {
 | --------------------- | --------------------------------- | ------------------------------------------------ | ---------------------- | ---- |
 | modelValue / v-model  | 绑定值，单选为字符串，多选为数组  | `string` / `string[]`                            | `''` / `[]`            | 是   |
 | apiBaseUrl            | API 基础 URL                      | `string`                                         | `''`                   | 是   |
-| tenantId              | 租户 ID                           | `string`                                         | `''`                   | 是   |
+| tenantId              | 租户 ID                           | `string`                                         | `'default'`            | 否   |
 | hasAvatar             | 是否显示头像                      | `boolean`                                        | `false`                | 否   |
 | avatarBaseUrl         | 头像基础 URL                      | `string`                                         | ``                     | 否   |
 | label                 | 文本标签                          | `string`                                         | `'人员选择'`           | 否   |
@@ -285,6 +318,9 @@ export default {
 | allowCreate           | 是否允许自定义输入，按 Enter 确认 | `boolean`                                        | `false`                | 否   |
 | freePaste             | 是否允许粘贴任意文本              | `boolean`                                        | `false`                | 否   |
 | maxCount              | 最大可选数量（0 表示不限制）      | `number`                                         | `0`                    | 否   |
+| type                  | 输入框类型                        | `'input'` / `'textarea'`                         | `'input'`              | 否   |
+| rows                  | 默认行数（仅 textarea 模式生效）  | `number`                                         | `4`                    | 否   |
+| resize                | 是否允许拖拽调整高度（仅 textarea 模式生效） | `boolean`                              | `true`                 | 否   |
 
 #### exactSearchKey 说明
 
@@ -359,6 +395,16 @@ type RenderFunction = (
 - **开启（默认）**：使用多租户用户管理接口查询，支持跨租户显示
 - **关闭**：使用原有用户管理接口查询
 
+### 多行输入模式（Textarea）
+
+通过 `type="textarea"` 启用多行模式：
+
+- **完整展示**：未聚焦时不折叠标签，完整展示所有已选用户
+- **高度可配**：通过 `rows` 设置默认行数，每行约 32px
+- **可拖拽调整**：默认允许拖拽调整容器高度，可通过 `resize=false` 禁用
+- **自动滚动**：内容超出容器高度时自动出现滚动条
+- **聚焦同步**：切换聚焦/失焦状态时自动同步容器高度
+
 ### 拖拽排序
 
 在多选模式下启用 `draggable`：
@@ -367,6 +413,21 @@ type RenderFunction = (
 - 拖拽时会有视觉反馈
 - 拖拽完成后会触发 `change` 事件
 
+### 键盘导航
+
+组件支持完整的键盘操作：
+
+| 按键        | 功能                                                      |
+| ----------- | --------------------------------------------------------- |
+| `↑` / `↓`   | 在下拉列表中切换高亮选项                                  |
+| `Enter`     | 选中当前高亮的选项（`allowCreate=true` 时创建自定义用户） |
+| `←` / `→`   | 在已选标签之间移动光标                                    |
+| `Backspace` | 删除光标前的已选用户                                      |
+
+- 输入搜索内容后，第一个选项会自动高亮
+- 高亮选项会自动滚动到可视区域
+- 支持用户组、普通用户、虚拟账号的键盘选择
+
 ## ⚠️ 注意事项
 
 1. **API 配置**：使用前必须正确配置 `apiBaseUrl` 和 `tenantId`

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@blueking/bk-user-selector",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "蓝鲸用户选择器",
   "license": "MIT",
   "author": "Tencent BlueKing",
   "scripts": {
     "prepublishOnly": "run-p build dts",
     "dev": "vite --mode development -c scripts/vite.dev.ts",
-    "build": "tsx ./scripts/vite.build.ts",
+    "build": "vite-node ./scripts/vite.build.ts",
     "dts": "vue-tsc --project tsconfig.dts.json",
     "prettier": "prettier ./src ./scripts ./playground --write",
     "visualize": "vite-bundle-visualizer -c scripts/vite.visualizer.ts"
@@ -58,10 +58,7 @@
   },
   "dependencies": {
     "bkui-vue": "2.0.2-beta.63",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "sortablejs": "^1.15.6"
-  },
-  "engines": {
-    "node": ">=18.16.0"
   }
 }

package/typings/components/me-tag.vue.d.ts

@@ -7,7 +7,7 @@ interface MeTagProps {
     /** 是否禁用 */
     isDisabled?: boolean;
 }
-declare const _default: import("vue").DefineComponent<MeTagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<MeTagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => any;
 }, string, import("vue").PublicProps, Readonly<MeTagProps> & Readonly<{
     onClick?: (() => any) | undefined;
@@ -15,4 +15,5 @@ declare const _default: import("vue").DefineComponent<MeTagProps, {}, {}, {}, {}
     currentUserId: string;
     isDisabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/typings/components/selection-popover.vue.d.ts

@@ -9,8 +9,12 @@ interface SelectionPopoverProps {
     containerWidth?: number | string;
     /** 无匹配人员时的提示文本 */
     emptyText?: string;
+    /** 扁平化选项列表（用于键盘导航高亮） */
+    flatOptions?: FormattedUser[];
     /** 是否显示头像 */
     hasAvatar?: boolean;
+    /** 当前高亮选项索引 */
+    highlightedIndex?: number;
     /** 是否显示下拉菜单 */
     isShow?: boolean;
     /** 是否加载中 */
@@ -30,21 +34,11 @@ interface SelectionPopoverProps {
     /** 用户组名称 */
     userGroupName?: string;
 }
-declare var __VLS_20: {};
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_refs: {
-    contentContainerRef: any;
-    slotContainerRef: any;
+declare var __VLS_22: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_22) => any;
 };
-declare const __VLS_templateResult: {
-    slots: {
-        default?(_: typeof __VLS_20): any;
-    };
-    refs: __VLS_PickRefsExpose<typeof __VLS_refs>;
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
-};
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
-declare const __VLS_component: import("vue").DefineComponent<SelectionPopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<SelectionPopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "click-outside": (event: MouseEvent) => any;
     "select-user": (user: FormattedUser) => any;
 }, string, import("vue").PublicProps, Readonly<SelectionPopoverProps> & Readonly<{
@@ -59,19 +53,17 @@ declare const __VLS_component: import("vue").DefineComponent<SelectionPopoverPro
     avatarBaseUrl: string;
     containerWidth: number | string;
     emptyText: string;
+    flatOptions: FormattedUser[];
+    highlightedIndex: number;
     isShow: boolean;
     loading: boolean;
     options: FormattedUser[];
     userGroupName: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PickRefsExpose<T> = T extends object ? {
-    [K in keyof T]: (T[K] extends any[] ? Parameters<T[K][0]['expose']>[0][] : T[K] extends {
-        expose?: (exposed: infer E) => void;
-    } ? E : T[K]) | null;
-} : never;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,5 +1,5 @@
 import { FormattedUser, UserSelectorProps } from '../types';
-declare const _default: import("vue").DefineComponent<UserSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<UserSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     blur: () => any;
     change: (user: FormattedUser | FormattedUser[] | null) => any;
     focus: () => any;
@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<UserSelectorProps, {}, {},
     "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
 }>, {
     userGroup: import("../types").UserGroupConfig[];
+    type: "input" | "textarea";
     apiBaseUrl: string;
     tenantId: string;
     enableMultiTenantMode: boolean;
@@ -24,14 +25,17 @@ declare const _default: import("vue").DefineComponent<UserSelectorProps, {}, {},
     freePaste: boolean;
     maxCount: number;
     excludeUserIds: string[];
-    disabled: boolean;
+    resize: boolean;
     hasAvatar: boolean;
     avatarBaseUrl: string;
     emptyText: string;
     userGroupName: string;
+    disabled: boolean;
     draggable: boolean;
     modelValue: string | string[];
     multiple: boolean;
+    rows: number;
     placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,9 @@
 import { createVNode, VNode } from 'vue';
 import { FormattedUser } from '../types';
-declare const _default: import("vue").DefineComponent<{
+/**
+ * 组件属性
+ */
+type __VLS_Props = {
     /**
      * 是否激活状态
      */
@@ -37,48 +40,13 @@ declare const _default: import("vue").DefineComponent<{
      * 用户信息
      */
     user: FormattedUser;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
     close: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{
-    /**
-     * 是否激活状态
-     */
-    active?: boolean;
-    /**
-     * 头像基础URL
-     */
-    avatarBaseUrl?: string;
-    /**
-     * 当前租户ID
-     */
-    currentTenantId: string;
-    /**
-     * 是否可拖拽
-     */
-    draggable?: boolean;
-    /**
-     * 是否显示头像
-     */
-    hasAvatar?: boolean;
-    /**
-     * 渲染标签
-     */
-    renderTag?: (h: typeof createVNode, userInfo: FormattedUser) => VNode;
-    /**
-     * 是否显示租户信息
-     */
-    showTenant?: boolean;
-    /**
-     * 租户数据映射
-     */
-    tenants: Record<string, string>;
-    /**
-     * 用户信息
-     */
-    user: FormattedUser;
-}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/typings/types/index.d.ts

@@ -220,6 +220,23 @@ export interface UserSelectorProps extends BaseSelectorProps {
      * 是否多选
      */
     multiple?: boolean;
+    /**
+     * 是否允许拖拽调整高度（仅 type='textarea' 时生效）
+     * @default true
+     */
+    resize?: boolean;
+    /**
+     * 默认行数（仅 type='textarea' 时生效，每行约 32px）
+     * @default 4
+     */
+    rows?: number;
+    /**
+     * 输入框类型
+     * - input: 单行模式（默认），固定高度，未聚焦时折叠标签
+     * - textarea: 多行模式，高度可配置，完整展示所有标签
+     * @default 'input'
+     */
+    type?: 'input' | 'textarea';
 }
 /**
  * 用户类型

package/vue2/config.json

@@ -1 +1,22 @@
-{"type":"bk-user-selector","name":"bk-user-selector","displayName":"人员选择器","framework":"vue2","styles":[],"props":{"modelValue":{"type":["number","string"],"tips":"值"},"dataUrl":{"type":"string","tips":"数据源接口"}},"events":[],"slots":{}}
+{
+  "type": "bk-user-selector",
+  "name": "bk-user-selector",
+  "displayName": "人员选择器",
+  "framework": "vue2",
+  "styles": [],
+  "props": {
+    "modelValue": {
+      "type": [
+        "number",
+        "string"
+      ],
+      "tips": "值"
+    },
+    "dataUrl": {
+      "type": "string",
+      "tips": "数据源接口"
+    }
+  },
+  "events": [],
+  "slots": {}
+}