@zjlab-fe/data-hub-ui 0.21.6 → 0.22.0

package/package.json

@@ -1,154 +1,164 @@
-{
-  "name": "@zjlab-fe/data-hub-ui",
-  "version": "0.21.6",
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "types": "dist/types/index.d.ts",
-  "license": "ISC",
-  "scripts": {
-    "start": "cross-env NODE_ENV=development webpack-dev-server --open /data-hub-ui/demo --config webpack.dev.config.js",
-    "build:dist": "npm run build:lib & npm run build:es",
-    "build": "cross-env NODE_ENV=production webpack --config webpack.dev.config.js",
-    "build:lib": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js",
-    "build:es": "cross-env NODE_ENV=production OUTPUT_TYPE=module webpack --config webpack.prod.config.js",
-    "generate:skill": "node scripts/generateComponentsSkill.js",
-    "lint": "npm run lint-eslint",
-    "lint-eslint": "eslint -c .eslintrc.js --ext .ts,.tsx,.js,.jsx src --fix",
-    "prepare": "husky",
-    "test": "jest --coverage"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/preset-env": "^7.25.7",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.25.7",
-    "@jest/globals": "^29.7.0",
-    "@tailwindcss/typography": "^0.5.16",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.0.1",
-    "@types/filesystem": "^0.0.36",
-    "@types/jest": "^29.5.13",
-    "@types/pdfjs-dist": "^2.10.378",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
-    "babel-jest": "^29.7.0",
-    "babel-loader": "^9.1.3",
-    "babel-preset-react-app": "^10.0.1",
-    "clsx": "^2.1.1",
-    "cross-env": "^7.0.3",
-    "css-loader": "^7.1.2",
-    "eslint": "8.x",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.4",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.6.0",
-    "husky": "^9.0.11",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.2.7",
-    "mini-css-extract-plugin": "^2.9.0",
-    "postcss": "^8.4.47",
-    "postcss-loader": "^8.1.1",
-    "postcss-nested": "^6.2.0",
-    "prettier": "^3.3.3",
-    "raw-loader": "^4.0.2",
-    "react-syntax-highlighter": "^15.6.1",
-    "react-test-renderer": "^18.3.1",
-    "sass": "1.77.x",
-    "sass-loader": "14.x",
-    "style-loader": "^4.0.0",
-    "tailwind-merge": "^2.6.0",
-    "ts-jest": "^29.2.5",
-    "ts-loader": "^9.5.1",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.6.3",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.92.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
-  },
-  "dependencies": {
-    "@ant-design/icons": "^5.3.7",
-    "@blocknote/core": "^0.51.4",
-    "@blocknote/mantine": "^0.51.4",
-    "@blocknote/react": "^0.51.4",
-    "@codesandbox/sandpack-react": "^2.19.9",
-    "@floating-ui/dom": "^1.7.4",
-    "@mantine/core": "^8.3",
-    "@mantine/hooks": "^8.3",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@tiptap/core": "^3.14.0",
-    "@tiptap/extension-code-block-lowlight": "^3.14.0",
-    "@tiptap/extension-color": "^3.14.0",
-    "@tiptap/extension-floating-menu": "^3.14.0",
-    "@tiptap/extension-highlight": "^3.14.0",
-    "@tiptap/extension-image": "^3.14.0",
-    "@tiptap/extension-link": "^3.14.0",
-    "@tiptap/extension-list-item": "^3.14.0",
-    "@tiptap/extension-placeholder": "^3.14.0",
-    "@tiptap/extension-table": "^3.14.0",
-    "@tiptap/extension-table-cell": "^3.14.0",
-    "@tiptap/extension-table-header": "^3.14.0",
-    "@tiptap/extension-table-row": "^3.14.0",
-    "@tiptap/extension-text-align": "^3.14.0",
-    "@tiptap/extension-text-style": "^3.14.0",
-    "@tiptap/extension-underline": "^3.14.0",
-    "@tiptap/markdown": "^3.14.0",
-    "@tiptap/pm": "^3.14.0",
-    "@tiptap/react": "^3.14.0",
-    "@tiptap/starter-kit": "^3.14.0",
-    "@zjlab-fe/util": "^0.5.5",
-    "antd": "^5.19.2",
-    "arrow-js-ffi": "^0.4.2",
-    "autoprefixer": "^10.4.20",
-    "axios": "^1.7.2",
-    "chardet": "^2.1.0",
-    "classnames": "^2.5.1",
-    "copy-to-clipboard": "^3.3.3",
-    "dayjs": "^1.11.11",
-    "i18next": "^25.0.0",
-    "jotai": "^2.11.0",
-    "jotai-scope": "^0.9.7",
-    "lowlight": "^3.3.0",
-    "marked": "^16.1.2",
-    "mathjax-full": "3.2.2",
-    "parquet-wasm": "^0.6.1",
-    "prosemirror-state": "^1.4.3",
-    "prosemirror-transform": "^1.12.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-error-boundary": "^5.0.0",
-    "react-json-tree": "^0.20.0",
-    "react-json-view": "^1.21.3",
-    "react-markdown": "^9.1.0",
-    "react-router": "^6.24.1",
-    "react-router-dom": "^6.24.1",
-    "rehype-mathjax": "^7.1.0",
-    "rehype-raw": "^7.0.0",
-    "remark-gfm": "^4.0.0",
-    "remark-math": "^6.0.0",
-    "resize-observer-polyfill": "^1.5.1",
-    "shiki": "^4.1.0",
-    "tailwindcss": "^3.4.13",
-    "unist-util-visit": "^5.0.0",
-    "uuid": "^14.0.0"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{ts,tsx,js,jsx}": [
-      "eslint --config .eslintrc.js"
-    ]
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "packageManager": "pnpm@9.12.1+sha256.91452fdfa46234ae447d46d5c4fc4e7e0a7058f90495c4b6f77f8beebbb154e3"
-}
+{
+  "name": "@zjlab-fe/data-hub-ui",
+  "version": "0.22.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "dist/types/index.d.ts",
+  "license": "ISC",
+  "scripts": {
+    "start": "cross-env NODE_ENV=development webpack-dev-server --open /data-hub-ui/demo --config webpack.dev.config.js",
+    "build:dist": "npm run build:lib & npm run build:es",
+    "build": "cross-env NODE_ENV=production webpack --config webpack.dev.config.js",
+    "build:lib": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js",
+    "build:es": "rollup -c rollup.es.config.mjs",
+    "generate:skill": "node scripts/generateComponentsSkill.js",
+    "lint": "npm run lint-eslint",
+    "lint-eslint": "eslint -c .eslintrc.js --ext .ts,.tsx,.js,.jsx src --fix",
+    "prepare": "husky",
+    "test": "jest --coverage"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.25.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.25.7",
+    "@jest/globals": "^29.7.0",
+    "@rollup/plugin-alias": "^6.0.0",
+    "@rollup/plugin-commonjs": "^29.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@rollup/plugin-url": "^8.0.2",
+    "@tailwindcss/typography": "^0.5.16",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/filesystem": "^0.0.36",
+    "@types/jest": "^29.5.13",
+    "@types/pdfjs-dist": "^2.10.378",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "babel-preset-react-app": "^10.0.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
+    "eslint": "8.x",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.4",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.6.0",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.7",
+    "mini-css-extract-plugin": "^2.9.0",
+    "postcss": "^8.4.47",
+    "postcss-import": "^16.1.1",
+    "postcss-loader": "^8.1.1",
+    "postcss-modules": "^6.0.1",
+    "postcss-nested": "^6.2.0",
+    "prettier": "^3.3.3",
+    "raw-loader": "^4.0.2",
+    "react-syntax-highlighter": "^15.6.1",
+    "react-test-renderer": "^18.3.1",
+    "rollup": "^4.62.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "1.77.x",
+    "sass-loader": "14.x",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.2.5",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.92.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.3.7",
+    "@blocknote/core": "^0.51.4",
+    "@blocknote/mantine": "^0.51.4",
+    "@blocknote/react": "^0.51.4",
+    "@codesandbox/sandpack-react": "^2.19.9",
+    "@floating-ui/dom": "^1.7.4",
+    "@mantine/core": "^8.3",
+    "@mantine/hooks": "^8.3",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tiptap/core": "^3.14.0",
+    "@tiptap/extension-code-block-lowlight": "^3.14.0",
+    "@tiptap/extension-color": "^3.14.0",
+    "@tiptap/extension-floating-menu": "^3.14.0",
+    "@tiptap/extension-highlight": "^3.14.0",
+    "@tiptap/extension-image": "^3.14.0",
+    "@tiptap/extension-link": "^3.14.0",
+    "@tiptap/extension-list-item": "^3.14.0",
+    "@tiptap/extension-placeholder": "^3.14.0",
+    "@tiptap/extension-table": "^3.14.0",
+    "@tiptap/extension-table-cell": "^3.14.0",
+    "@tiptap/extension-table-header": "^3.14.0",
+    "@tiptap/extension-table-row": "^3.14.0",
+    "@tiptap/extension-text-align": "^3.14.0",
+    "@tiptap/extension-text-style": "^3.14.0",
+    "@tiptap/extension-underline": "^3.14.0",
+    "@tiptap/markdown": "^3.14.0",
+    "@tiptap/pm": "^3.14.0",
+    "@tiptap/react": "^3.14.0",
+    "@tiptap/starter-kit": "^3.14.0",
+    "@zjlab-fe/util": "^0.5.5",
+    "antd": "^5.19.2",
+    "arrow-js-ffi": "^0.4.2",
+    "autoprefixer": "^10.4.20",
+    "axios": "^1.7.2",
+    "chardet": "^2.1.0",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "copy-to-clipboard": "^3.3.3",
+    "dayjs": "^1.11.11",
+    "i18next": "^25.0.0",
+    "jotai": "^2.11.0",
+    "jotai-scope": "^0.9.7",
+    "lowlight": "^3.3.0",
+    "marked": "^16.1.2",
+    "parquet-wasm": "^0.6.1",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-transform": "^1.12.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^5.0.0",
+    "react-json-tree": "^0.20.0",
+    "react-json-view": "^1.21.3",
+    "react-markdown": "^9.1.0",
+    "react-router": "^6.24.1",
+    "react-router-dom": "^6.24.1",
+    "rehype-mathjax": "^7.1.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "shiki": "^4.1.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.13",
+    "tslib": "^2.8.1",
+    "unist-util-visit": "^5.0.0",
+    "uuid": "^14.0.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --config .eslintrc.js"
+    ]
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "packageManager": "pnpm@9.12.1+sha256.91452fdfa46234ae447d46d5c4fc4e7e0a7058f90495c4b6f77f8beebbb154e3"
+}

package/rollup.es.config.mjs

@@ -0,0 +1,177 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import alias from '@rollup/plugin-alias';
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import * as sass from 'sass';
+import postcss from 'postcss';
+import postcssModules from 'postcss-modules';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+import postcssImport from 'postcss-import';
+import postcssNested from 'postcss-nested';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const srcDir = path.resolve(__dirname, 'src');
+
+// PostCSS 基础插件
+const basePostcssPlugins = [postcssImport(), postcssNested(), tailwindcss(), autoprefixer()];
+
+// 图片插件：将图片全部 base64 内联到 JS 中
+// 消费端无需任何额外配置，无路径问题
+function imagePlugin() {
+  return {
+    name: 'images',
+    async load(id) {
+      const ext = path.extname(id).toLowerCase();
+      if (!['.png', '.jpg', '.jpeg', '.gif', '.svg'].includes(ext)) return null;
+      if (id.includes('node_modules')) return null;
+
+      const buffer = fs.readFileSync(id);
+      const mimeMap = {
+        '.png': 'image/png',
+        '.jpg': 'image/jpeg',
+        '.jpeg': 'image/jpeg',
+        '.gif': 'image/gif',
+        '.svg': 'image/svg+xml',
+      };
+      const dataUrl = `data:${mimeMap[ext] || 'image/png'};base64,${buffer.toString('base64')}`;
+
+      return { code: `export default ${JSON.stringify(dataUrl)};`, map: null };
+    },
+  };
+}
+
+// 自定义 SCSS/CSS 处理插件
+function stylePlugin() {
+  return {
+    name: 'styles',
+
+    async transform(code, id) {
+      // 处理 src 目录下的样式文件
+      const isSrc = id.startsWith(srcDir);
+      // 处理从 node_modules 导入的 CSS（经由 src 文件引用）
+      const isNodeModuleCss = !isSrc && id.includes('node_modules') && id.endsWith('.css');
+
+      if (!isSrc && !isNodeModuleCss) return null;
+      if (!id.endsWith('.scss') && !id.endsWith('.css')) return null;
+
+      const isModule = id.endsWith('.module.scss') && isSrc;
+      const ext = path.extname(id);
+      const dir = path.dirname(id);
+
+      let processedCode = code;
+
+      // 替换 SCSS @import 中的 @/ 为相对路径（仅 src 文件）
+      if (isSrc) {
+        processedCode = code.replace(
+          /@(import|use)\s+['"]@\/([^'"]+)['"]/g,
+          (_match, directive, importPath) => {
+            const absolutePath = path.resolve(srcDir, importPath);
+            const relativePath = path.relative(dir, absolutePath).replace(/\\/g, '/');
+            return `@${directive} '${relativePath.startsWith('.') ? relativePath : './' + relativePath}'`;
+          },
+        );
+      }
+
+      // 编译 SCSS → CSS
+      let css;
+      try {
+        if (ext === '.scss') {
+          const result = sass.compileString(processedCode, {
+            loadPaths: [dir, srcDir, path.resolve(srcDir, 'styles')],
+          });
+          css = result.css;
+        } else {
+          css = processedCode;
+        }
+      } catch (err) {
+        this.error(`SCSS compile error: ${err.message}`);
+      }
+
+      // 对所有 CSS 运行 PostCSS（tailwindcss + postcss-nested + postcss-import）
+      try {
+        const tailwindResult = await postcss(basePostcssPlugins).process(css, {
+          from: id,
+          to: id.replace(/\.(scss|css)$/, '.css'),
+        });
+        css = tailwindResult.css;
+      } catch (err) {
+        this.error(`PostCSS error: ${err.message}`);
+      }
+
+      // 对 .module.scss 文件，用 postcss-modules 提取类名映射
+      let classMap = {};
+
+      if (isModule) {
+        const modulesPlugin = postcssModules({
+          generateScopedName: '[name]__[local]___[hash:base64:5]',
+          getJSON(cssFileName, json) {
+            classMap = json;
+          },
+        });
+
+        const result = await postcss([modulesPlugin]).process(css, { from: id });
+        css = result.css;
+      }
+
+      // 生成 JS 模块代码
+      const escapedCss = css.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$');
+
+      let jsCode;
+      if (isModule) {
+        const namedExports = Object.entries(classMap)
+          .map(([key, value]) => {
+            const jsKey = key.replace(/[^a-zA-Z0-9_$]/g, '_');
+            return `var ${jsKey} = ${JSON.stringify(value)}; export { ${jsKey} as ${JSON.stringify(key)} };`;
+          })
+          .join('\n');
+
+        const mapJson = JSON.stringify(classMap);
+
+        jsCode = `
+var style = document.createElement('style');
+style.textContent = \`${escapedCss}\`;
+document.head.appendChild(style);
+
+${namedExports}
+
+var styles = ${mapJson};
+export default styles;
+`;
+      } else {
+        // 普通样式或 node_modules CSS：只注入 CSS，没有 export
+        jsCode = `
+var style = document.createElement('style');
+style.textContent = \`${escapedCss}\`;
+document.head.appendChild(style);
+`;
+      }
+
+      return { code: jsCode, map: null };
+    },
+  };
+}
+
+export default {
+  input: 'src/index.tsx',
+  output: {
+    dir: 'es',
+    format: 'esm',
+    preserveModules: true,
+    preserveModulesRoot: 'src',
+    entryFileNames: '[name].js',
+  },
+  plugins: [
+    peerDepsExternal({ includeDependencies: true }),
+    alias({ entries: [{ find: '@', replacement: srcDir }] }),
+    imagePlugin(),
+    resolve({ extensions: ['.js', '.ts', '.jsx', '.tsx'] }),
+    commonjs(),
+    stylePlugin(),
+    typescript({ tsconfig: './tsconfig.rollup.json' }),
+  ],
+};

package/tsconfig.rollup.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": false,
+    "declarationDir": null
+  }
+}