更新图钉 API 文档及代码

src/components/dialog/index.css

@@ -1,13 +1,13 @@
 .bim-dialog {
     position: absolute;
-    background-color: var(--bim-bg-elevated);
-    border: 1px solid var(--bim-border-default);
-    border-radius: var(--bim-panel-radius, 12px);
+    background: var(--bim-dialog-bg, var(--bim-bg-elevated));
+    border: 1px solid var(--bim-dialog-border-color, var(--bim-border-default));
+    border-radius: var(--bim-dialog-radius, 4px);
     box-shadow: var(--bim-shadow-lg);
     display: flex;
     flex-direction: column;
     z-index: 10001;
-    color: var(--bim-dialog-title-color, var(--bim-text-primary));
+    color: var(--bim-dialog-text-color, var(--bim-text-secondary));
     overflow: hidden;
     min-width: 200px;
     min-height: 100px;
@@ -15,16 +15,19 @@
 }
 
 .bim-dialog-header {
-    height: 40px;
-    background-color: var(--bim-bg-inset);
+    position: relative;
+    min-height: 58px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 12px;
+    gap: 12px;
+    padding: 0 10px 0 18px;
     cursor: default;
     user-select: none;
-    border-bottom: 1px solid var(--bim-border-default);
     flex-shrink: 0;
+    border-bottom: 1px solid var(--bim-border-subtle, var(--bim-dialog-border-color, var(--bim-border-default)));
+    box-shadow: var(--bim-shadow-sm);
+    z-index: 1;
 }
 
 .bim-dialog-header.draggable {
@@ -32,24 +35,42 @@
 }
 
 .bim-dialog-title {
-    font-size: 14px;
-    font-weight: 500;
+    flex: 1;
+    min-width: 0;
+    font-size: 18px;
+    font-weight: 300;
+    line-height: 1.2;
+    letter-spacing: 0.01em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: var(--bim-dialog-title-color);
+    color: var(--bim-dialog-title-color, var(--bim-text-primary));
 }
 
 .bim-dialog-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
     cursor: pointer;
-    font-size: 18px;
-    color: var(--bim-text-tertiary);
-    line-height: 1;
+    color: var(--bim-text-secondary);
+    border-radius: 4px;
+    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+    flex-shrink: 0;
     margin-left: 8px;
 }
 
 .bim-dialog-close:hover {
     color: var(--bim-text-primary);
+    background-color: var(--bim-component-bg-hover, rgba(15, 23, 42, 0.06));
+    box-shadow: inset 0 0 0 1px var(--bim-border-subtle, var(--bim-dialog-border-color, var(--bim-border-default)));
+}
+
+.bim-dialog-close svg {
+    display: block;
+    width: 20px;
+    height: 20px;
 }
 
 .bim-dialog-content {
@@ -57,30 +78,50 @@
     overflow: auto;
     font-size: 14px;
     color: var(--bim-dialog-text-color, var(--bim-text-secondary));
+    background: var(--bim-dialog-bg, var(--bim-bg-elevated));
 }
 
 /* 缩放句柄 */
 .bim-dialog-resize-handle {
     position: absolute;
-    width: 10px;
-    height: 10px;
-    bottom: 0;
-    right: 0;
+    width: 28px;
+    height: 28px;
+    right: 2px;
+    bottom: 2px;
     cursor: se-resize;
     z-index: 10;
+    border-radius: 4px 0 4px 0;
+    transition: background-color 0.2s ease;
+}
+
+.bim-dialog-resize-handle:hover {
+    background: var(--bim-component-bg-hover, rgba(15, 23, 42, 0.04));
 }
 
 .bim-dialog-resize-handle::after {
     content: '';
     position: absolute;
-    bottom: 3px;
-    right: 3px;
-    width: 6px;
-    height: 6px;
+    right: 7px;
+    bottom: 7px;
+    width: 11px;
+    height: 11px;
     border-right: 2px solid var(--bim-text-tertiary);
     border-bottom: 2px solid var(--bim-text-tertiary);
 }
 
-.bim-dialog-resize-handle:hover::after {
+.bim-dialog-resize-handle::before {
+    content: '';
+    position: absolute;
+    right: 11px;
+    bottom: 11px;
+    width: 6px;
+    height: 6px;
+    border-right: 2px solid var(--bim-text-tertiary);
+    border-bottom: 2px solid var(--bim-text-tertiary);
+    opacity: 0.85;
+}
+
+.bim-dialog-resize-handle:hover::after,
+.bim-dialog-resize-handle:hover::before {
     border-color: var(--bim-text-primary);
 }

src/components/dialog/index.ts

@@ -69,6 +69,9 @@ export class BimDialog implements IBimComponent {
         style.setProperty('--bim-text-secondary', theme.textSecondary);
         style.setProperty('--bim-text-tertiary', theme.textTertiary);
         style.setProperty('--bim-border-default', theme.borderDefault);
+        style.setProperty('--bim-border-subtle', theme.borderSubtle);
+        style.setProperty('--bim-component-bg-hover', theme.componentBgHover);
+        style.setProperty('--bim-shadow-sm', theme.shadowSm);
         style.setProperty('--bim-shadow-lg', theme.shadowLg);
     }
 
@@ -110,7 +113,7 @@ export class BimDialog implements IBimComponent {
     }
 
     public setLocales(): void {
-        if (this.options.title) {
+        if (this.options.title && !this.options.header) {
             const titleEl = this.header.querySelector('.bim-dialog-title');
             if (titleEl) {
                 titleEl.textContent = t(this.options.title);
@@ -145,20 +148,37 @@ export class BimDialog implements IBimComponent {
         header.className = 'bim-dialog-header';
         if (this.options.draggable) header.classList.add('draggable');
 
-        const title = document.createElement('span');
-        title.className = 'bim-dialog-title';
-        title.textContent = this.options.title ? t(this.options.title) : '';
+        if (this.options.header) {
+            header.appendChild(this.options.header);
+        } else {
+            const title = document.createElement('span');
+            title.className = 'bim-dialog-title';
+            title.textContent = this.options.title ? t(this.options.title) : '';
+            header.appendChild(title);
+        }
 
-        const closeBtn = document.createElement('span');
-        closeBtn.className = 'bim-dialog-close';
-        closeBtn.innerHTML = '×';
-        // 修复 TS 报错：去掉未使用的参数 e
-        closeBtn.onclick = () => {
-            this.close();
-        };
+        if (!this.options.hideCloseButton) {
+            const closeBtn = document.createElement('span');
+            closeBtn.className = 'bim-dialog-close';
 
-        header.appendChild(title);
-        header.appendChild(closeBtn);
+            if (this.options.closeIcon) {
+                if (typeof this.options.closeIcon === 'string') {
+                    closeBtn.innerHTML = this.options.closeIcon;
+                } else {
+                    closeBtn.appendChild(this.options.closeIcon);
+                }
+            } else {
+                closeBtn.innerHTML = `<svg width="24" height="24" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>`;
+            }
+
+            closeBtn.onclick = () => {
+                this.close();
+            };
+
+            header.appendChild(closeBtn);
+        }
 
         // 创建内容区域 (Content)
         const content = document.createElement('div');

src/components/dialog/index.type.ts

@@ -32,7 +32,7 @@ export interface DialogColors {
 export interface DialogOptions extends DialogColors {
     /** 弹窗挂载的父容器 */
     container: HTMLElement;
-    /** 弹窗标题 */
+    /** 弹窗标题（使用默认标题栏时生效，支持国际化 key） */
     title?: string;
     /** 弹窗内容，支持 HTML 字符串或 HTMLElement */
     content?: HTMLElement | string;
@@ -58,4 +58,15 @@ export interface DialogOptions extends DialogColors {
     onOpen?: () => void;
     /** 弹窗唯一标识 ID (可选) */
     id?: string;
+
+    /**
+     * 自定义标题栏内容（传入 HTMLElement 时，完全替换默认标题栏）。
+     * 可在此插入 tab、图标、图片等任意内容。
+     * 传入后 title 字段不再生效。
+     */
+    header?: HTMLElement;
+    /** 是否隐藏关闭按钮（默认 false） */
+    hideCloseButton?: boolean;
+    /** 自定义关闭按钮图标（传入 SVG 字符串或 HTMLElement） */
+    closeIcon?: HTMLElement | string;
 }