@mxmweb/zui 1.0.3 → 1.1.0

package/dist/lib_enter.d.ts

@@ -0,0 +1,13 @@
+import { default as Button } from './elements/Button';
+import { default as GoggleNavbar } from './elements/GoggleNavbar';
+import { default as MoreDropdown } from './elements/DropdownMenu';
+import { default as Uploader } from './elements/Uploader';
+import { default as DropDownButton } from './elements/DropDownButton';
+import { default as CustomDock } from './elements/CustomDock';
+import { default as DashboardContainer } from './containers/DashboardContainer';
+import { default as DockContainer } from './containers/DockContainer';
+import { defaultTheme, deepMergeTheme, Styles } from './theme/styledTheme';
+export { Button, MoreDropdown, Uploader, DropDownButton, GoggleNavbar, CustomDock };
+export { DashboardContainer, DockContainer };
+export { defaultTheme, deepMergeTheme, type Styles };
+export { default as Icon } from './icons/Icon';

package/dist/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@mxmweb/zui",
+  "main": "index.js",
+  "license": "MIT",
+  "style": "assets/style.css",
+  "types": "lib_enter.d.ts",
+  "private": false,
+  "version": "1.1.0",
+  "author": "hanfeng_Zhang",
+  "type": "module",
+  "scripts": {
+    "test": "yarn link",
+    "disconnect": "yarn unlink"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib_enter.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./style.css": "./assets/style.css"
+  },
+  "dependencies": {
+    "@mxmweb/xviewer": "workspace:*"
+  }
+}

package/{theme → dist/theme}/styledTheme.d.ts

@@ -2,11 +2,6 @@ import { default as React } from 'react';
 export type SizeType = 'sm' | 'md' | 'lg';
 export type FontWeightType = 'normal' | 'bold' | 'thin';
 export type FontFamilyType = 'default' | 'serif' | 'mono';
-export interface AiChatStyles {
-    theme?: AppTheme;
-    mode?: 'light' | 'dark';
-    [key: string]: any;
-}
 export interface ThemeColors {
     primary: string;
     secondary: string;
@@ -21,10 +16,39 @@ export interface ThemeColors {
     disabledBackground: string;
     disabledText: string;
     textSecondary?: string;
+    textTertiary?: string;
+    textInverse?: string;
     shadow?: string;
     appBackground?: string;
     listBackground?: string;
     dashboardBackground?: string;
+    primaryHover?: string;
+    primaryActive?: string;
+    borderWeak?: string;
+    surfaceSubtle?: string;
+    surfaceSelected?: string;
+    btnPrimaryBg?: string;
+    btnPrimaryBgHover?: string;
+    btnPrimaryBgActive?: string;
+    btnPrimaryBgDisabled?: string;
+    btnPrimaryText?: string;
+    btnPrimaryTextDisabled?: string;
+    btnSecondaryText?: string;
+    btnSecondaryTextHover?: string;
+    btnSecondaryTextActive?: string;
+    btnSecondaryTextDisabled?: string;
+    btnSecondaryBg?: string;
+    btnSecondaryBgHover?: string;
+    btnSecondaryBgActive?: string;
+    btnSecondaryBgDisabled?: string;
+    btnSecondaryBorder?: string;
+    btnSecondaryBorderHover?: string;
+    btnSecondaryBorderActive?: string;
+    btnSecondaryBorderDisabled?: string;
+    btnTextText?: string;
+    btnTextTextHover?: string;
+    btnTextTextActive?: string;
+    btnTextTextDisabled?: string;
     [key: string]: any;
 }
 export interface ThemeOthers {
@@ -62,54 +86,16 @@ export interface AppTheme {
     others?: ThemeOthers;
 }
 export declare const defaultTheme: AppTheme;
-export declare const sidebarMap: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export declare const sizeMap: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export declare const radiusMap: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export declare const paddingMap: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export declare const marginMap: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export declare const shadowMap: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export declare const lineHeightMap: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export declare function deepMergeTheme(defaultTheme: AppTheme, customTheme?: Partial<AppTheme>): AppTheme;
-export declare function mapSpaceToCssValue(space: Record<string, string>): {
-    size: string;
-    radius: string;
-    padding: string;
-    margin: string;
-    shadow: string;
-    lineHeight: string;
-    sidebar: string;
-};
-export declare const ThemeContext: React.Context<AppTheme>;
-export declare const useTheme: () => AppTheme;
-export declare const ThemeProvider: ({ theme, children }: {
-    theme: AppTheme;
+export declare const defaultStyles: Styles;
+export interface Styles {
+    theme?: AppTheme;
+    mode?: 'light' | 'dark';
+    [key: string]: any;
+}
+export declare function deepMergeTheme(baseStyles: Styles, customStyles?: Partial<Styles>): Styles;
+export declare const ThemeContext: React.Context<Styles>;
+export declare const useTheme: () => Styles;
+export declare const ThemeProvider: ({ styles, children }: {
+    styles: Styles;
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/eslint.config.js

@@ -0,0 +1,92 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import reactPlugin from "eslint-plugin-react";
+import importPlugin from "eslint-plugin-import";
+import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
+import prettierPlugin from "eslint-plugin-prettier";
+
+export default tseslint.config(
+  { ignores: ["dist", "node_modules", "coverage"] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:react-refresh/recommended",
+      "plugin:prettier/recommended",
+      "plugin:import/recommended",
+      "plugin:import/typescript",
+      "plugin:jsx-a11y/recommended",
+    ],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        sourceType: "module",
+      },
+    },
+    plugins: {
+      "react": reactPlugin,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      "@typescript-eslint": tseslint.plugin,
+      "import": importPlugin,
+      "jsx-a11y": jsxA11yPlugin,
+      "prettier": prettierPlugin,
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+      "import/resolver": {
+        typescript: {},
+        node: {
+          extensions: [".js", ".jsx", ".ts", ".tsx"],
+        },
+      },
+    },
+    rules: {
+      // React 相关规则
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "react/jsx-uses-react": "off",
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExports: true },
+      ],
+      
+      // TypeScript 相关规则
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+      
+      // 导入相关规则
+      "import/order": [
+        "error",
+        {
+          groups: ["builtin", "external", "internal", "parent", "sibling", "index"],
+          "newlines-between": "always",
+          alphabetize: { order: "asc", caseInsensitive: true },
+        },
+      ],
+      
+      // 通用规则
+      "no-console": ["warn", { allow: ["warn", "error"] }],
+      "prettier/prettier": "error",
+      "no-unused-vars": "off", // 使用 @typescript-eslint/no-unused-vars 替代
+    },
+  }
+);

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UI 组件库预览</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,23 +1,51 @@
 {
   "name": "@mxmweb/zui",
-  "main": "index.js",
-  "license": "MIT",
-  "style": "assets/style.css",
-  "types": "lib_enter.d.ts",
-  "private": false,
-  "version": "1.0.3",
   "author": "hanfeng_Zhang",
+  "version": "1.1.0",
   "type": "module",
-  "scripts": {
-    "test": "yarn link",
-    "disconnect": "yarn unlink"
-  },
+  "main": "dist/index.js",
+  "types": "dist/lib_enter.d.ts",
   "exports": {
     ".": {
-      "types": "./lib_enter.d.ts",
-      "import": "./index.js",
-      "default": "./index.js"
+      "types": "./dist/lib_enter.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
-    "./style.css": "./assets/style.css"
+    "./style.css": "./dist/assets/style.css",
+    "./icons/*": "./dist/icons/*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --mode production",
+    "publish": "npm publish --access public",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint src --ext ts,tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,css,md}\"",
+    "release": "semantic-release",
+    "release:dry": "semantic-release --dry-run"
+  },
+  "dependencies": {
+    "@mxmweb/xviewer": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "styled-components": "*",
+    "animejs": "*"
+  },
+  "include": [
+    "src/application/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "src/main.tsx",
+    "src/Preview.tsx",
+    "type.d.ts",
+    "vite-env.d.ts"
+  ],
+  "devDependencies": {
+    "@types/validator": "^13.15.3"
   }
 }

package/postcss.config.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  plugins: [
+    require('@tailwindcss/postcss')(),
+    // 自定义插件：去除所有@layer指令，展开为普通CSS
+    function discardLayerPlugin() {
+      return {
+        postcssPlugin: 'discard-layer',
+        AtRule: {
+          layer: (atRule) => {
+            atRule.replaceWith(atRule.nodes || []);
+          }
+        }
+      }
+    },
+    require('autoprefixer')(),
+  ]
+};
+// 标记自定义插件为postcss插件
+module.exports.plugins[1].postcss = true;

package/public/mock.csv

@@ -0,0 +1,16 @@
+id,name,age,gender,email,phone,address,company,position,salary
+1,张三,28,男,zhangsan@example.com,13800000001,北京市朝阳区,字节跳动,前端工程师,18000
+2,李四,32,女,lis4@example.com,13800000002,上海市浦东新区,阿里巴巴,产品经理,22000
+3,王五,25,男,wangwu@example.com,13800000003,深圳市南山区,腾讯,后端工程师,17000
+4,赵六,29,女,zhaoliu@example.com,13800000004,杭州市西湖区,网易,UI设计师,16000
+5,钱七,35,男,qianqi@example.com,13800000005,广州市天河区,美团,测试工程师,15000
+6,孙八,27,女,sunba@example.com,13800000006,成都市高新区,京东,数据分析师,20000
+7,周九,31,男,zhoujiu@example.com,13800000007,南京市鼓楼区,小米,运维工程师,15500
+8,吴十,26,女,wushi@example.com,13800000008,武汉市武昌区,拼多多,市场专员,14000
+9,郑十一,30,男,zheng11@example.com,13800000009,重庆市渝中区,百度,算法工程师,23000
+10,冯十二,33,女,feng12@example.com,13800000010,苏州市工业园区,携程,HR,13500
+11,陈十三,24,男,chen13@example.com,13800000011,天津市和平区,滴滴,前端工程师,17500
+12,褚十四,28,女,chu14@example.com,13800000012,青岛市市南区,快手,产品经理,21000
+13,卫十五,29,男,wei15@example.com,13800000013,厦门市思明区,知乎,后端工程师,16500
+14,蒋十六,27,女,jiang16@example.com,13800000014,合肥市包河区,B站,UI设计师,15800
+15,沈十七,34,男,shen17@example.com,13800000015,福州市鼓楼区,字节跳动,测试工程师,15200

package/public/mock_/345/211/257/346/234/254.csv

@@ -0,0 +1,16 @@
+id,name,age,gender,email,phone,address,company,position,salary
+1,张三,28,男,zhangsan@example.com,13800000001,北京市朝阳区,字节跳动,前端工程师,18000
+2,李四,32,女,lis4@example.com,13800000002,上海市浦东新区,阿里巴巴,产品经理,22000
+3,王五,25,男,wangwu@example.com,13800000003,深圳市南山区,腾讯,后端工程师,17000
+4,赵六,29,女,zhaoliu@example.com,13800000004,杭州市西湖区,网易,UI设计师,16000
+5,钱七,35,男,qianqi@example.com,13800000005,广州市天河区,美团,测试工程师,15000
+6,孙八,27,女,sunba@example.com,13800000006,成都市高新区,京东,数据分析师,20000
+7,周九,31,男,zhoujiu@example.com,13800000007,南京市鼓楼区,小米,运维工程师,15500
+8,吴十,26,女,wushi@example.com,13800000008,武汉市武昌区,拼多多,市场专员,14000
+9,郑十一,30,男,zheng11@example.com,13800000009,重庆市渝中区,百度,算法工程师,23000
+10,冯十二,33,女,feng12@example.com,13800000010,苏州市工业园区,携程,HR,13500
+11,陈十三,24,男,chen13@example.com,13800000011,天津市和平区,滴滴,前端工程师,17500
+12,褚十四,28,女,chu14@example.com,13800000012,青岛市市南区,快手,产品经理,21000
+13,卫十五,29,男,wei15@example.com,13800000013,厦门市思明区,知乎,后端工程师,16500
+14,蒋十六,27,女,jiang16@example.com,13800000014,合肥市包河区,B站,UI设计师,15800
+15,沈十七,34,男,shen17@example.com,13800000015,福州市鼓楼区,字节跳动,测试工程师,15200

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/Preview.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import './style.css';
+import DockContainerExample from './examples/DockContainerExample';
+
+const Preview: React.FC = () => {
+
+    return(
+      <div className='w-screen h-screen relative'>
+        <DockContainerExample />
+      </div>
+    )
+
+};
+
+export default Preview;