@king-design/intact 3.6.2-beta.1 → 3.7.0

package/components/drawer/index.spec.ts

@@ -89,4 +89,47 @@ describe('Drawer', () => {
         const [dialog1, dialog2] = getElements('.k-dialog');
         expect(dialog2.querySelector('.k-dialog-body')!.textContent).to.eql('Dialog');
     });
+
+    it('should show resize bar when resizable is true', async function() {
+        class Demo extends Component {
+            static template = `
+                const {Drawer} = this;
+                <Drawer value={true} resizable={true} placement="right">
+                    <div>Content</div>
+                </Drawer>
+            `;
+            private Drawer = Drawer;
+        }
+        const [instance, element] = mount(Demo);
+        await wait();
+        expect(getElement('.k-drawer-resize')).to.not.be.undefined;
+    });
+
+    it('should update width when dragging', async function() {
+        class Demo extends Component {
+            static template = `
+                const {Drawer} = this;
+                <Drawer value={true} resizable={true} placement="right" ref="drawer">
+                    <div>Content</div>
+                </Drawer>
+            `;
+            private Drawer = Drawer;
+        }
+        const [instance, element] = mount(Demo);
+        await wait();
+
+        const drawer = instance.refs.drawer.dialogRef.value;
+        const initialWidth = drawer.offsetWidth;
+        const resizeBar = getElement('.k-drawer-resize') as HTMLElement;
+
+        const startX = resizeBar.getBoundingClientRect().left;
+        dispatchEvent(resizeBar, 'mousedown', { clientX: startX, which: 1 });
+        await wait();
+        dispatchEvent(document, 'mousemove', { clientX: startX - 50 });
+        await wait();
+        dispatchEvent(document, 'mouseup');
+        await wait(100);
+
+        expect(drawer.offsetWidth).to.be.greaterThan(initialWidth);
+    });
 });

package/components/drawer/index.ts

@@ -2,24 +2,38 @@ import {TypeDefs} from 'intact';
 import template from './index.vdt';
 import {BaseDialog, BaseDialogProps} from '../dialog/base';
 import {Placement, placements} from './styles';
+import {useDrawerResizable} from './useDrawerResizable';
 
 export interface DrawerProps extends BaseDialogProps {
     placement?: Placement
+    resizable?: boolean
 }
 
 const typeDefs: Required<TypeDefs<DrawerProps>> = {
     ...BaseDialog.typeDefs,
     placement: placements,
+    resizable: Boolean,
 };
 
 const defaults = (): Partial<DrawerProps> => ({
     ...BaseDialog.defaults(),
     placement: 'right',
     draggable: false,
+    resizable: false,
 });
 
 export class Drawer extends BaseDialog<DrawerProps> {
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
+
+    private _resizable = useDrawerResizable(this.dialogRef);
+
+    init() {
+        super.init();
+        
+        this.watch('width', (v) => {
+            this._resizable.drawerWidth.set(v || null);
+        });
+    }
 }

package/components/drawer/index.vdt

@@ -1,6 +1,12 @@
 import {makeStyles} from './styles';
 
-const {placement, overlay} = this.get();
+const {placement, overlay, resizable, width} = this.get();
+const {
+    getResizeBarPosition, getHeightResizeBarPosition, 
+    drawerWidth, isResizing, drawerHeight, startWidth, startHeight
+} = this._resizable;
+const shouldShowHeightResizeBar = !!(resizable && (placement === 'top' || placement === 'bottom'))
+
 const { k } = this.config;
 const classNameObj = {
     [`${k}-drawer`]: true,
@@ -8,10 +14,21 @@ const classNameObj = {
     [makeStyles(overlay, k)]: true
 };
 
-<t:super class={classNameObj}>
+<t:super class={classNameObj} width={resizable ? (drawerWidth.value || width) : width}>
     <b:_content>
-        <div class={`${k}-drawer-content`}>
+        <div 
+            class={`${k}-drawer-content ${isResizing.value ? `${k}-drawer-resizing` : ''}`}
+            style={drawerHeight.value ? { height: `${drawerHeight.value}px` } : null}
+        >
             {$super()}
+            <div v-if={!!resizable}
+                class={`${k}-drawer-resize ${k}-drawer-resize-${getResizeBarPosition()}`}
+                ev-mousedown={startWidth}
+            />
+            <div v-if={shouldShowHeightResizeBar}
+                class={`${k}-drawer-resize-horizontal ${k}-drawer-resize-${getHeightResizeBarPosition()}`}
+                ev-mousedown={startHeight}
+            />
         </div>
     </b:_content>
 </t:super>

package/components/drawer/styles.ts

@@ -29,6 +29,7 @@ export const makeStyles = cache(function makeStyles(overlay: boolean, k: string)
             background: transparent;
             box-shadow: none;
             border-radius: 0;
+            max-height: 100vh;
         }
 
         &.transition-enter-active,
@@ -43,15 +44,58 @@ export const makeStyles = cache(function makeStyles(overlay: boolean, k: string)
 
         .${k}-drawer-content {
             height: 100%;
+            max-height: 100vh;
             display: flex;
             background: #fff;
             flex-direction: column;
             transform: translateX(0);
             box-shadow: ${drawer.boxShadow};
+            position: relative;
             .${k}-dialog-body {
                 flex-grow: 1;
                 overflow: auto;
             }
+            &.${k}-drawer-resizing {
+                transition: none !important;
+            }
+        }
+
+        .${k}-drawer-resize {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 5px;
+            cursor: col-resize;
+            z-index: 10;
+            user-select: none;
+            &:hover {
+                background: rgba(0, 0, 0, 0.1);
+            }
+            &.${k}-drawer-resize-right {
+                right: 0;
+            }
+            &.${k}-drawer-resize-left {
+                left: 0;
+            }
+        }
+
+        .${k}-drawer-resize-horizontal {
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 5px;
+            cursor: row-resize;
+            z-index: 10;
+            user-select: none;
+            &:hover {
+                background: rgba(0, 0, 0, 0.1);
+            }
+            &.${k}-drawer-resize-top {
+                top: 0;
+            }
+            &.${k}-drawer-resize-bottom {
+                bottom: 0;
+            }
         }
         
         ${makePlacementStyles(k, 'right', `right: 0; height: 100%;`, `translateX(100%)`, `${borderRadius} 0 0 ${borderRadius}`)}

package/components/drawer/useDrawerResizable.ts

@@ -0,0 +1,190 @@
+import {useInstance, RefObject, onMounted, onBeforeUnmount} from 'intact';
+import {useState} from '../../hooks/useState';
+import {useDraggable} from '../../hooks/useDraggable';
+import type {Drawer} from './';
+
+export function useDrawerResizable(
+    drawerRef: RefObject<HTMLElement>,
+) {
+    const instance = useInstance() as Drawer;
+    const { width } = instance.get();
+    const drawerWidth = useState<number | string | null>(width || null);
+    const drawerHeight = useState<number | null>(null);
+    const isResizing = useState(false);
+
+    let startX = 0;
+    let startWidth = 0;
+    let startY = 0;
+    let startHeight = 0;
+
+    let minWidth = 200; // 最小宽度
+    let maxWidth = window.innerWidth; // 最大宽度
+    let minHeight = 200; // 最小高度
+    let maxHeight = window.innerHeight; // 最大高度
+
+    // 监听窗口大小变化，更新最大宽高
+    let handleResize: (() => void) | null = null;
+    onMounted(() => {
+        handleResize = () => {
+            maxWidth = window.innerWidth;
+            maxHeight = window.innerHeight;
+        };
+        window.addEventListener('resize', handleResize);
+    });
+
+    onBeforeUnmount(() => {
+        if (handleResize) {
+            window.removeEventListener('resize', handleResize);
+        }
+    });
+
+    // 宽度拖拽
+    function onStartWidth(e: MouseEvent) {
+        const drawer = drawerRef.value;
+        if (!drawer) return;
+
+        startX = e.clientX;
+        startWidth = drawer.offsetWidth;
+        drawerWidth.set(startWidth);
+        isResizing.set(true);
+
+        // 锁定全局样式
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+    }
+
+    function onMoveWidth(e: MouseEvent) {
+        const drawer = drawerRef.value;
+        if (!drawer) return;
+
+        const {placement, resizable} = instance.get() as any;
+        // 计算鼠标移动距离
+        const deltaX = e.clientX - startX;
+        let widthDelta = deltaX;
+        
+        // 根据 placement 调整拖拽方向
+        if (placement === 'right') {
+            widthDelta = -deltaX;
+        } else if (placement === 'left') {
+            widthDelta = deltaX;
+        } else {
+            // top / bottom 模式：由于是居中（left: 50%, transform: translateX(-50%)）对称增长
+            // 宽度变化量应该是位移的两倍才能保持鼠标跟随
+            widthDelta = deltaX * 2;
+        }
+        const newWidth = Math.max(
+            minWidth,
+            Math.min(maxWidth, startWidth + widthDelta)
+        );
+        drawerWidth.set(newWidth);
+    }
+
+    function onEndWidth() {
+        isResizing.set(false);
+        // 恢复全局样式
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }
+
+    const widthDrag = useDraggable({
+        onStart: onStartWidth,
+        onMove: onMoveWidth,
+        onEnd: onEndWidth,
+        disable() {
+            const {resizable} = instance.get();
+            return !resizable;
+        },
+    });
+
+    // 高度拖拽，仅在 placement 为 top / bottom 时启用
+    function onStartHeight(e: MouseEvent) {
+        const drawer = drawerRef.value;
+        if (!drawer) return;
+
+        const {placement, resizable} = instance.get();
+        if (!resizable || (placement !== 'top' && placement !== 'bottom')) return;
+
+        startY = e.clientY;
+        startHeight = drawer.offsetHeight;
+        drawerHeight.set(startHeight);
+        isResizing.set(true);
+
+        // 锁定全局样式
+        document.body.style.cursor = 'row-resize';
+        document.body.style.userSelect = 'none';
+    }
+
+    function onMoveHeight(e: MouseEvent) {
+        const drawer = drawerRef.value;
+        if (!drawer) return;
+
+        const {placement} = instance.get();
+        if (placement !== 'top' && placement !== 'bottom') return;
+
+        const deltaY = e.clientY - startY;
+
+        const heightDelta = placement === 'top' ? deltaY : -deltaY;
+
+        const newHeight = Math.max(
+            minHeight,
+            Math.min(maxHeight, startHeight + heightDelta)
+        );
+
+        // 设置状态，由模板进行渲染
+        drawerHeight.set(newHeight);
+    }
+
+    function onEndHeight() {
+        isResizing.set(false);
+        // 恢复全局样式
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }
+
+    const heightDrag = useDraggable({
+        onStart: onStartHeight,
+        onMove: onMoveHeight,
+        onEnd: onEndHeight,
+        disable() {
+            const {placement, resizable} = instance.get();
+            return !resizable || (placement !== 'top' && placement !== 'bottom');
+        },
+    });
+
+    // 重置 resize 状态
+    function resetResizeState() {
+        const {width} = instance.get();
+        drawerWidth.set(width || null);
+        drawerHeight.set(null);
+    }
+
+    // 监听 placement 变化，切换时重置 resize 状态
+    instance.watch('placement', (newPlacement, oldPlacement) => {
+        if (oldPlacement !== undefined && newPlacement !== oldPlacement) {
+            resetResizeState();
+        }
+    });
+
+    // 获取宽度拖拽条位置
+    function getResizeBarPosition(): 'left' | 'right' {
+        const {placement} = instance.get();
+        return placement === 'right' ? 'left' : 'right';
+    }
+
+    // 获取高度拖拽条位置
+    function getHeightResizeBarPosition(): 'top' | 'bottom' {
+        const {placement} = instance.get();
+        return placement === 'top' ? 'bottom' : 'top';
+    }
+
+    return {
+        drawerWidth,
+        drawerHeight,
+        isResizing,
+        getResizeBarPosition,
+        getHeightResizeBarPosition,
+        startWidth: widthDrag.start,
+        startHeight: heightDrag.start,
+    };
+}
+

package/components/icon/demos/color.md

@@ -3,7 +3,7 @@ title: 颜色
 order: 1
 ---
 
-使用`color`属性可以定义图标的颜色，组件内置了4中颜色：`primary` `warning` `danger` `success`。你也
+使用`color`属性可以定义图标的颜色，组件内置了4种颜色：`primary` `warning` `danger` `success`。你也
 可以自定义`color`值；给组件添加`hoverable`属性，可以展示`hover`效果
 
 ```vdt

package/components/icon/demos/icons.md

@@ -139,6 +139,24 @@ export default class extends Component<Props> {
                 ['start'],
                 ['stop'],
                 ['sortorder'],
+                ["history"],
+                ["correlation"],
+                ["webui"],
+                ["log"],
+                ["save"],
+                ["memory"],
+                ["Physicalport"],
+                ["queue"],
+                ["channel"],
+                ["cpu"],
+                ["change"],
+                ["subnet"],
+                ["listener"],
+                ["outboundrules"],
+                ["inboundrules"],
+                ["fullscreen"],
+                ["add-circled"],
+                ["think"],
             ],
         } as Props
     }

package/components/menu/demos/collapse.md

@@ -68,8 +68,8 @@ export default class extends Component<Props> {
             expandedKeys: ['3'],
             selectedKey: '3-2',
             collapse: true,
-            theme: 'dark'
-        } as MenuProps;
+            theme: 'dark' as MenuProps['theme']
+        };
     }
 
     @bind

package/components/menu/demos/showCollapseArrow.md

@@ -88,11 +88,11 @@ export default class extends Component<Props> {
         return {
             expandedKeys: [],
             selectedKey: '2',
-            size: 'small',
-            theme: 'light',
+            size: 'small' as MenuProps['size'],
+            theme: 'light' as MenuProps['theme'],
             showCollapseArrow: true,
             collapse: false,
-        } as MenuProps;
+        };
     }
 }
 ```

package/components/menu/demos/size.md

@@ -79,11 +79,11 @@ export default class extends Component {
     static defaults() {
         return {
             expandedKeys: ['3'],
-            size: 'large',
-            theme: 'light',
-            type: 'vertical',
+            size: 'large' as MenuProps['size'],
+            theme: 'light' as MenuProps['theme'],
+            type: 'vertical' as MenuProps['type'],
             collapse: false,
-        } as MenuProps;
+        };
     }
 }
 ```

package/components/menu/styles.ts

@@ -50,7 +50,8 @@ const defaults = {
         bgColor: '#fff',
         get border() { return `1px solid ${theme.color.disabledBg}` },
         item: {
-            get color() { return theme.color.text }, 
+            get color() { return theme.color.text },
+            get arrowColor() { return theme.color.lightBlack },
             get hoverColor() { return theme.color.primary }, 
             get hoverBg() { return theme.color.hoverBg },
             disabledColor: '#b6bec2',
@@ -183,7 +184,7 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
                     }
                 }
                 .${k}-menu-item-arrow {
-                    color: ${menu.light.item.color};
+                    color: ${menu.light.item.arrowColor};
                 }
                 &.${k}-highlighted {
                     > .${k}-menu-item-title {
@@ -234,9 +235,12 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
                 }
             }
             .${k}-sub-menu {
-                .${k}-menu-item-title, .${k}-menu-item-arrow {
+                .${k}-menu-item-title {
                     color: ${menu.light.item.subTitleColor} !important;
                 }
+                .${k}-menu-item-arrow {
+                    color: ${menu.light.item.arrowColor} !important;
+                }
             }
         }
 

package/components/notification/demos/basic.md

@@ -0,0 +1,27 @@
+---
+title: 基础用法
+order: 0
+---
+
+最基础的用法，使用静态方法`notice`显示通知，通过`title`属性设置通知标题，`content`属性设置通知内容。
+
+```vdt
+import {Button} from 'kpc';
+
+<Button ev-click={this.showNotification.bind(this)}>基础用法</Button>
+```
+
+```ts
+import {Notification} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+
+    showNotification() {
+        Notification.notice({
+            title: 'Hello, Kingcloud Design!',
+            content: '这是一条基础用法的通知'
+        });
+    }
+}
+```

package/components/notification/demos/close.md

@@ -0,0 +1,52 @@
+---
+title: 控制关闭
+order: 7
+---
+
+可以通过`Notification.notice()`、`Notification.info()`等方法返回的唯一ID，调用`Notification.close(id)`来控制通知的关闭。
+
+```vdt
+import {ButtonGroup, Button} from 'kpc';
+
+<ButtonGroup>
+    <Button ev-click={this.showNotification}>显示通知</Button>
+    <Button ev-click={this.closeNotification}>关闭通知</Button>
+</ButtonGroup>
+```
+
+```ts
+import {Notification, bind} from 'kpc';
+
+interface Props {
+    notificationId?: number 
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    
+    static defaults() {
+        return {
+            notificationId: undefined
+        }
+    }
+    
+    @bind
+    showNotification() {
+        const id = Notification.info({
+            title: '可关闭的通知',
+            content: '点击"关闭通知"按钮可以关闭此通知',
+            duration: 0,
+        });
+        this.set('notificationId', id);
+    }
+
+    @bind
+    closeNotification() {
+        const notificationId = this.get('notificationId');
+        if (notificationId !== undefined) {
+            Notification.close(notificationId as number);
+            this.set('notificationId', undefined);
+        }
+    }
+}
+```

package/components/notification/demos/duration.md

@@ -0,0 +1,43 @@
+---
+title: 修改关闭延时
+order: 5
+---
+
+通知默认4.5秒后关闭，可以设置`duration`属性自定义关闭延时；`duration`设置为`0`，通知不会自动关闭，只能手动关闭。
+
+```vdt
+import {ButtonGroup, Button} from 'kpc';
+
+<ButtonGroup>
+    <Button ev-click={this.showCloseDelay}>10s后关闭</Button>
+    <Button ev-click={this.showStick}>不会自动关闭</Button>
+</ButtonGroup>
+```
+
+```ts
+import {Notification} from 'kpc';
+import {bind} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+    
+    @bind
+    showCloseDelay() {
+        Notification.warning({
+            title: '10s后关闭',
+            content: '这条通知10s后才会自动关闭',
+            duration: 10000,
+        });
+    }
+
+    @bind
+    showStick() {
+        Notification.warning({
+            title: '不会自动关闭',
+            content: '这条通知不会自动关闭，需要手动关闭',
+            duration: 0,
+        });
+    }
+}
+```
+

package/components/notification/demos/events.md

@@ -0,0 +1,39 @@
+---
+title: 点击与关闭事件
+order: 6
+---
+
+通知支持点击和关闭事件回调，可以通过`onClick`和`onClose`属性设置回调函数。
+
+```vdt
+import {ButtonGroup, Button} from 'kpc';
+
+<ButtonGroup>
+    <Button ev-click={this.showNotification}>显示通知</Button>
+</ButtonGroup>
+```
+
+```ts
+import {Notification, Message} from 'kpc';
+import {bind} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+    
+    @bind
+    showNotification() {
+        Notification.info({
+            title: '事件通知',
+            content: '点击通知或等待自动关闭，查看页面信息提示',
+            onClick: (e) => {
+                Message.info('你点击了通知');
+            },
+            onClose: () => {
+                Message.warning('通知已关闭');
+            },
+            className: 'event-test'
+        });
+    }
+}
+```
+