wok-ui-ext 0.1.0

package/dist/tree/node.js

@@ -0,0 +1,264 @@
+import { FullRenderingModule } from 'wok-ui';
+import { getWokUiExtI18n } from '../i18n';
+import { showWarning } from '../toast';
+import { NodeInfo } from './node-info';
+/**
+ * 节点，包含自身信息以及子节点列表
+ */
+export class Node extends FullRenderingModule {
+    constructor(opts) {
+        super(document.createElement('li'));
+        this.opts = opts;
+        this.subNodes = [];
+        this.el.classList.add('wok-ui-ext-tree-node');
+        this.data = opts.data;
+        this.level = opts.level;
+        // 初始的展开状态
+        if (!opts.data.unfolded) {
+            // 折叠为默认值，不触发回调
+            this.el.classList.add('wok-ui-ext-folded');
+        }
+        // 初始的已选标识
+        if (opts.selectedIds.includes(opts.data.id) && !opts.data.unselectable) {
+            this.el.classList.add('wok-ui-ext-selected');
+        }
+        // 不可选择标识
+        if (opts.data.unselectable) {
+            this.el.classList.add('wok-ui-ext-unselectable');
+        }
+        // 不可移动标识，传递到子节点
+        if (opts.data.unmoveable) {
+            if (opts.data.unmoveable === 'all-descendants') {
+                if (opts.data.children) {
+                    opts.data.children.forEach(child => (child.unmoveable = 'all-descendants'));
+                }
+            }
+        }
+        this.render();
+    }
+    buildInfo() {
+        return new NodeInfo({
+            level: this.level,
+            isMaxLevel: this.opts.maxLevel <= this.level,
+            data: this.data,
+            enableDrag: this.opts.enableMove,
+            onDragStart: (coord) => this.opts.onDragStart(this, coord),
+            buildActions: () => {
+                if (this.opts.buildActions) {
+                    return this.opts.buildActions(this.data, this.level);
+                }
+                return [];
+            },
+            buildTitleModule: this.opts.buildTitleModule,
+            onClick: () => {
+                if (this.data.unselectable === true) {
+                    return;
+                }
+                if (this.el.classList.contains('wok-ui-ext-selected')) {
+                    if (this.opts.unSelectHook(this.data.id)) {
+                        this.el.classList.remove('wok-ui-ext-selected');
+                    }
+                }
+                else {
+                    if (this.opts.selectHook(this.data.id)) {
+                        this.el.classList.add('wok-ui-ext-selected');
+                    }
+                }
+            },
+            onToggleFold: () => {
+                // 处理折叠事件
+                if (this.data.unfolded) {
+                    this.fold();
+                }
+                else {
+                    this.unfold();
+                }
+            }
+        });
+    }
+    updateInfo() {
+        if (this.nodeInfo) {
+            const newInfo = this.buildInfo();
+            this.nodeInfo.replaceBy(newInfo);
+            this.nodeInfo = newInfo;
+        }
+    }
+    buildContent() {
+        // 节点内容
+        this.addChild((this.nodeInfo = this.buildInfo()));
+        // 子级节点
+        if (this.opts.data.children && this.opts.data.children.length) {
+            const { length } = this.opts.data.children;
+            this.addChild({
+                tag: 'ul',
+                classNames: 'wok-ui-ext-sub-nodes',
+                preHandle: el => {
+                    this.subNodesEl = el;
+                },
+                children: (this.subNodes = this.opts.data.children.map((data, idx) => new Node({
+                    parent: this,
+                    level: this.opts.level + 1,
+                    maxLevel: this.opts.maxLevel,
+                    hasNextSibling: idx < length - 1,
+                    isLast: idx === length - 1,
+                    data: data,
+                    buildTitleModule: this.opts.buildTitleModule,
+                    enableMove: this.opts.enableMove,
+                    selectedIds: this.opts.selectedIds,
+                    onDragStart: this.opts.onDragStart,
+                    selectHook: this.opts.selectHook,
+                    unSelectHook: this.opts.unSelectHook,
+                    onFold: this.opts.onFold,
+                    onUnfold: this.opts.onUnfold,
+                    buildActions: this.opts.buildActions
+                })))
+            });
+        }
+        else {
+            this.subNodesEl = undefined;
+        }
+    }
+    /**
+     * 主动取消选中
+     */
+    unSelect() {
+        this.el.classList.remove('wok-ui-ext-selected');
+    }
+    fold() {
+        if (!this.data.unfolded) {
+            return;
+        }
+        this.data.unfolded = false;
+        this.updateInfo();
+        // 给定高度，触发动画
+        if (this.subNodesEl) {
+            this.subNodesEl.style.height = this.subNodesEl.scrollHeight + 'px';
+        }
+        // 高度更新完成后，再改样式，才能触发动画
+        setTimeout(() => {
+            this.el.classList.add('wok-ui-ext-folded');
+        }, 0);
+        this.opts.onFold(this);
+    }
+    /**
+     * 展开，为了让子节点元素有动画，必须得指定宽度（auto 高度不会产生动画），宽度需要根据子节点的情况进行计算
+     */
+    unfold() {
+        if (this.data.unfolded) {
+            return;
+        }
+        if (!this.subNodesEl) {
+            return;
+        }
+        this.data.unfolded = true;
+        this.updateInfo();
+        const subNodesEl = this.subNodesEl;
+        subNodesEl.style.height = subNodesEl.scrollHeight + 'px';
+        this.el.classList.remove('wok-ui-ext-folded');
+        // 动画完后后，将高度改为自动
+        // 否则子节点再伸展会无法撑开
+        setTimeout(() => {
+            subNodesEl.style.height = 'auto';
+        }, 300);
+        this.opts.onUnfold(this);
+    }
+    /**
+     * 更新标题
+     * @param title
+     */
+    updateTitle(title) {
+        this.opts.data.title = title;
+        this.updateInfo();
+    }
+    /**
+     * 删除子节点
+     * @param subNodeId 子节点ID
+     */
+    removeSubNode(subNodeId) {
+        if (!this.data.children) {
+            return;
+        }
+        const idx = this.data.children.findIndex(c => c.id === subNodeId);
+        if (idx !== -1) {
+            this.data.children.splice(idx, 1);
+            this.render();
+        }
+    }
+    /**
+     * 添加子节点
+     * @param subNodeData 子节点数据
+     */
+    addSubNode(subNodeData) {
+        if (this.level >= this.opts.maxLevel) {
+            const msg = getWokUiExtI18n().buildMsg('tree-max-level', `${this.opts.maxLevel}`);
+            showWarning(msg);
+            throw new Error(msg);
+        }
+        if (!this.data.children) {
+            this.data.children = [];
+        }
+        // 锁定处理
+        const data = { ...subNodeData };
+        if (data.unmoveable === 'all-descendants') {
+            data.unmoveable = 'all-descendants';
+        }
+        this.data.children.push(data);
+        this.render();
+        if (!this.data.unfolded) {
+            setTimeout(() => this.unfold(), 100);
+        }
+    }
+    /**
+     * 插入子节点，到指定位置
+     * @param subNodeData 子节点数据
+     */
+    insertSubNode(subNodeData, targetIdx) {
+        if (this.level >= this.opts.maxLevel) {
+            const msg = getWokUiExtI18n().buildMsg('tree-max-level', `${this.opts.maxLevel}`);
+            showWarning(msg);
+            throw new Error(msg);
+        }
+        if (!this.data.children) {
+            this.data.children = [];
+        }
+        if (targetIdx > this.data.children.length) {
+            return;
+        }
+        this.data.children.splice(targetIdx, 0, subNodeData);
+        this.render();
+    }
+    /**
+     * 获取子节点
+     */
+    getSubNodes() {
+        return this.subNodes;
+    }
+    /**
+     * 获取父节点模块
+     */
+    getParentNode() {
+        return this.opts.parent;
+    }
+    /**
+     * 处理拖动悬浮并反应调整样式
+     * @param sourceNode 源节点，即要移动的节点
+     * @param clientX 横坐标
+     * @param clientY 纵坐标
+     * @returns
+     */
+    handleDragOverAndReact(sourceNode, clientX, clientY) {
+        // 如果不可移动，不反应
+        if (this.opts.data.unmoveable) {
+            return false;
+        }
+        if (!this.nodeInfo) {
+            return false;
+        }
+        // 如果源节点就是本节点，不反应
+        if (sourceNode.id === this.opts.data.id) {
+            this.nodeInfo.removeMovingStyle();
+            return false;
+        }
+        return this.nodeInfo.handleDragOverAndReact(clientX, clientY);
+    }
+}

package/dist/tree/style.css

@@ -0,0 +1,99 @@
+ul.wok-ui-ext-tree {
+  font-size: var(--font-size-small);
+  line-height: 1.5;
+  user-select: none;
+  list-style: none;
+}
+ul.wok-ui-ext-tree li.wok-ui-ext-tree-node {
+  margin-top: 4px;
+  overflow: hidden;
+}
+ul.wok-ui-ext-tree li.wok-ui-ext-tree-node .wok-ui-ext-node-info {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  padding: 10px 12px 10px 8px;
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  font-size: var(--font-size-small);
+  transition: background var(--transition-speed) ease;
+  gap: 8px;
+}
+ul.wok-ui-ext-tree li.wok-ui-ext-tree-node .wok-ui-ext-node-info .wok-ui-ext-icon-fold {
+  text-align: center;
+  color: var(--color-primary);
+  font-size: 15px;
+  cursor: pointer;
+  transition: color var(--transition-speed);
+  flex-shrink: 0;
+}
+ul.wok-ui-ext-tree li.wok-ui-ext-tree-node .wok-ui-ext-node-info .wok-ui-ext-node-name {
+  flex: 1;
+  word-wrap: break-word;
+  word-break: break-all;
+  white-space: normal;
+}
+ul.wok-ui-ext-tree li.wok-ui-ext-tree-node .wok-ui-ext-node-info .wok-ui-ext-icon-manage {
+  display: none;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+ul.wok-ui-ext-tree li.wok-ui-ext-tree-node .wok-ui-ext-node-info:hover {
+  background-color: var(--bg-hover);
+}
+ul.wok-ui-ext-tree li.wok-ui-ext-tree-node .wok-ui-ext-node-info:hover .wok-ui-ext-icon-manage {
+  display: block;
+}
+ul.wok-ui-ext-tree li.wok-ui-ext-tree-node > ul.wok-ui-ext-sub-nodes {
+  transition: height 0.3s ease-out;
+  padding-left: 32px;
+  overflow: hidden;
+  position: relative;
+}
+ul.wok-ui-ext-tree li.wok-ui-ext-tree-node.wok-ui-ext-unselectable > .wok-ui-ext-node-info {
+  color: var(--text-disabled);
+}
+ul.wok-ui-ext-tree li.wok-ui-ext-tree-node.wok-ui-ext-selected > .wok-ui-ext-node-info {
+  background: var(--bg-active);
+  color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
+  box-shadow: inset 3px 0 0 var(--color-primary);
+}
+ul.wok-ui-ext-tree li.wok-ui-ext-tree-node.wok-ui-ext-folded > ul.wok-ui-ext-sub-nodes {
+  height: 0 !important;
+  overflow: hidden;
+}
+ul.wok-ui-ext-tree .wok-ui-ext-tree-node-dragging-img {
+  position: fixed;
+  padding: 10px 12px 10px 24px;
+  text-align: center;
+  min-width: 150px;
+  font-size: 1rem;
+  opacity: 0.8;
+  cursor: move;
+  user-select: none;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  border-radius: var(--radius-md);
+  border: 1px dashed var(--color-primary);
+  color: var(--color-primary);
+  display: none;
+  z-index: 1000;
+}
+ul.wok-ui-ext-tree.wok-ui-ext-dragging .wok-ui-ext-tree-node-dragging-img {
+  display: block;
+}
+ul.wok-ui-ext-tree.wok-ui-ext-dragging .wok-ui-ext-tree-node .wok-ui-ext-node-info.wok-ui-ext-moving-before {
+  border-top: 2px solid var(--color-primary);
+}
+ul.wok-ui-ext-tree.wok-ui-ext-dragging .wok-ui-ext-tree-node .wok-ui-ext-node-info.wok-ui-ext-moving-after {
+  border-bottom: 2px solid var(--color-primary);
+}
+ul.wok-ui-ext-tree.wok-ui-ext-dragging .wok-ui-ext-tree-node .wok-ui-ext-node-info.wok-ui-ext-moving-in {
+  background-color: var(--color-primary);
+  border-radius: var(--radius-md);
+  color: white;
+}
+ul.wok-ui-ext-tree.wok-ui-ext-dragging .wok-ui-ext-tree-node .wok-ui-ext-node-info.wok-ui-ext-moving-in .wok-ui-ext-icon-fold {
+  color: white !important;
+}

package/dist/upload/index.d.ts

@@ -0,0 +1,48 @@
+import { Module } from 'wok-ui';
+import './style.less';
+/**
+ * 上传组件
+ */
+export declare class Uploader extends Module {
+    private readonly opts;
+    /**
+     * 上传组件
+     * @param opts
+     * @param opts.hint 提示，说明需要的文件信息，如：仅支持上传 pdf 文件
+     * @param opts.accept 接受的文件类型，如：.pdf,.docx
+     * @param opts.multiple 是否支持多选
+     * @param opts.maxSize 最大文件大小，单位：字节
+     * @param opts.onUpload 上传文件的回调函数
+     * @param opts.showOnly 是否仅展示，不实现上传文件功能，使用场景是上传由上层的组件来实现，如嵌入图片裁剪器等
+     * @param opts.disabled 是否禁用
+     */
+    constructor(opts: {
+        hint?: string;
+        accept?: string;
+        multiple?: boolean;
+        maxSize?: number;
+        onUpload?: (files: File[]) => void;
+        showOnly?: boolean;
+        disabled?: boolean;
+    });
+    /**
+     * 校验文件（大小、类型），全部通过后才触发上传回调
+     * @param files 待校验的文件列表
+     */
+    private validateAndUpload;
+    /**
+     * 判断文件是否匹配 accept 规则，支持三种形式：
+     * - 扩展名：`.pdf,.docx`
+     * - MIME 前缀：`image/*`
+     * - 具体 MIME：`application/pdf`
+     * @param file 文件
+     * @param accept accept 规则
+     */
+    private matchesAccept;
+    /**
+     * 格式化文件大小,转成人类可读的格式
+     * @param size 文件大小，单位：字节
+     * @returns 格式化后的文件大小，如：123 B, 123.45 KB, 123.45 MB
+     */
+    private formatSize;
+}

package/dist/upload/index.js

@@ -0,0 +1,141 @@
+import { Module } from 'wok-ui';
+import { getWokUiExtI18n } from '../i18n';
+import { IconCloudUpload } from '../icons';
+import { showWarning } from '../toast';
+import './style.css';
+/**
+ * 上传组件
+ */
+export class Uploader extends Module {
+    /**
+     * 上传组件
+     * @param opts
+     * @param opts.hint 提示，说明需要的文件信息，如：仅支持上传 pdf 文件
+     * @param opts.accept 接受的文件类型，如：.pdf,.docx
+     * @param opts.multiple 是否支持多选
+     * @param opts.maxSize 最大文件大小，单位：字节
+     * @param opts.onUpload 上传文件的回调函数
+     * @param opts.showOnly 是否仅展示，不实现上传文件功能，使用场景是上传由上层的组件来实现，如嵌入图片裁剪器等
+     * @param opts.disabled 是否禁用
+     */
+    constructor(opts) {
+        super(document.createElement('label'));
+        this.opts = opts;
+        const i18n = getWokUiExtI18n();
+        this.el.classList.add('wok-ui-ext-uploader-area');
+        this.addChild(new IconCloudUpload(), {
+            classNames: 'wok-ui-ext-uploader-hint',
+            innerText: i18n.buildMsg('upload-hint')
+        });
+        if (opts.hint) {
+            this.addChild(8, {
+                classNames: 'wok-ui-ext-uploader-hint-secondary',
+                innerText: opts.hint
+            });
+        }
+        if (opts.disabled) {
+            this.el.classList.add('disabled');
+        }
+        if (!opts.showOnly) {
+            this.addChild({
+                tag: 'input',
+                attrs: {
+                    type: 'file',
+                    accept: opts.accept,
+                    multiple: opts.multiple
+                },
+                preHandle: el => {
+                    const input = el;
+                    input.addEventListener('change', () => {
+                        if (input.files) {
+                            this.validateAndUpload(Array.from(input.files));
+                        }
+                    });
+                }
+            });
+            // 拖拽上传。拖拽会跳过 input 的 accept/multiple 原生限制，这里手动校验
+            this.el.addEventListener('dragenter', e => {
+                e.preventDefault();
+                this.el.classList.add('dragging');
+            });
+            this.el.addEventListener('dragover', e => {
+                e.preventDefault();
+                this.el.classList.add('dragging');
+            });
+            this.el.addEventListener('dragleave', e => {
+                if (!(e.relatedTarget instanceof Node) || !this.el.contains(e.relatedTarget)) {
+                    this.el.classList.remove('dragging');
+                }
+            });
+            this.el.addEventListener('drop', e => {
+                e.preventDefault();
+                this.el.classList.remove('dragging');
+                const files = e.dataTransfer?.files;
+                if (files && files.length) {
+                    this.validateAndUpload(Array.from(files));
+                }
+            });
+        }
+    }
+    /**
+     * 校验文件（大小、类型），全部通过后才触发上传回调
+     * @param files 待校验的文件列表
+     */
+    validateAndUpload(files) {
+        const opts = this.opts;
+        const i18n = getWokUiExtI18n();
+        for (const file of files) {
+            if (typeof opts.maxSize === 'number' && file.size > opts.maxSize) {
+                showWarning(i18n.buildMsg('upload-max-size', file.name, this.formatSize(opts.maxSize)));
+                return;
+            }
+            if (opts.accept && !this.matchesAccept(file, opts.accept)) {
+                showWarning(i18n.buildMsg('upload-type-not-allowed', file.name));
+                return;
+            }
+        }
+        // multiple 为 false 时只取第一个文件
+        const list = opts.multiple === false ? files.slice(0, 1) : files;
+        opts.onUpload?.(list);
+    }
+    /**
+     * 判断文件是否匹配 accept 规则，支持三种形式：
+     * - 扩展名：`.pdf,.docx`
+     * - MIME 前缀：`image/*`
+     * - 具体 MIME：`application/pdf`
+     * @param file 文件
+     * @param accept accept 规则
+     */
+    matchesAccept(file, accept) {
+        const rules = accept
+            .split(',')
+            .map(rule => rule.trim().toLowerCase())
+            .filter(Boolean);
+        const fileName = file.name.toLowerCase();
+        const mime = file.type.toLowerCase();
+        return rules.some(rule => {
+            if (rule.startsWith('.')) {
+                return fileName.endsWith(rule);
+            }
+            if (rule.endsWith('/*')) {
+                return mime.startsWith(rule.slice(0, -1));
+            }
+            return mime === rule;
+        });
+    }
+    /**
+     * 格式化文件大小,转成人类可读的格式
+     * @param size 文件大小，单位：字节
+     * @returns 格式化后的文件大小，如：123 B, 123.45 KB, 123.45 MB
+     */
+    formatSize(size) {
+        const i18n = getWokUiExtI18n();
+        if (size < 1024) {
+            return i18n.buildMsg('upload-size-b', `${size}`);
+        }
+        if (size < 1024 * 1024) {
+            return i18n.buildMsg('upload-size-kb', `${(size / 1024).toFixed(2)}`);
+        }
+        return i18n.buildMsg('upload-size-mb', `${(size / 1024 / 1024).toFixed(2)}`);
+    }
+}

package/dist/upload/style.css

@@ -0,0 +1,41 @@
+/* Uploader */
+.wok-ui-ext-uploader-area {
+  border: 2px dashed var(--color-primary-soft);
+  border-radius: var(--radius-xl);
+  padding: 30px 16px;
+  text-align: center;
+  background: var(--bg-content);
+  transition: border 0.15s;
+  cursor: pointer;
+  display: block;
+}
+.wok-ui-ext-uploader-area:hover {
+  border-color: var(--color-primary);
+  background: var(--bg-hover);
+}
+.wok-ui-ext-uploader-area.dragging {
+  border-color: var(--color-primary);
+  background: var(--color-primary-soft);
+}
+.wok-ui-ext-uploader-area .wok-ui-svg-icon {
+  font-size: 42px;
+  color: var(--color-primary);
+  margin-bottom: 8px;
+}
+.wok-ui-ext-uploader-area .wok-ui-ext-uploader-hint {
+  font-size: 15px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+.wok-ui-ext-uploader-area .wok-ui-ext-uploader-hint-secondary {
+  font-size: 12px;
+  color: var(--text-placeholder);
+}
+.wok-ui-ext-uploader-area input[type="file"] {
+  display: none;
+}
+.wok-ui-ext-uploader-area.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "wok-ui-ext",
+  "version": "0.1.0",
+  "description": "wok-ui 的扩展库，提供一套科技蓝风格 + 多主题的组件库，覆盖常用的组件",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "*.less",
+    "*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/lib/*/index.d.ts",
+      "import": "./dist/lib/*/index.js"
+    }
+  },
+  "scripts": {
+    "build": "node scripts/build.js",
+    "build:docs": "vite build docs-site && rm -rf docs/ && mv docs-site/dist docs/",
+    "dev:docs": "vite docs-site",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Peak Tai <peaktai@qq.com>",
+  "license": "ISC",
+  "packageManager": "pnpm@10.33.0",
+  "devDependencies": {
+    "@types/node": "^24.1.0",
+    "fast-glob": "^3.3.3",
+    "github-markdown-css": "^5.9.0",
+    "highlight.js": "^11.11.1",
+    "less": "^4.2.1",
+    "marked": "^18.0.5",
+    "minisearch": "^7.2.0",
+    "tslib": "^2.8.1",
+    "typescript": "^4.9.5",
+    "vite": "^8.1.3",
+    "gray-matter": "^4.0.3"
+  },
+  "peerDependencies": {
+    "wok-ui": "^1.0.0"
+  }
+}