@mxmweb/zui 1.0.3 → 1.1.0

package/src/style.css

@@ -0,0 +1,9 @@
+@import 'tailwindcss';
+
+/* 额外的全局样式 */
+
+
+* {
+  padding: 0;
+  margin: 0;
+}

package/src/theme/styledTheme.tsx

@@ -0,0 +1,253 @@
+import React, { createContext, useContext } from 'react';
+
+// 主题类型定义
+export type SizeType = 'sm' | 'md' | 'lg'
+export type FontWeightType = 'normal' | 'bold' |'thin'
+export type FontFamilyType = 'default' | 'serif' | 'mono'
+
+
+
+export interface ThemeColors {
+  primary: string
+  secondary: string
+  success: string
+  warning: string
+  error: string
+  info: string
+  background: string
+  text: string
+  border: string
+  disabled: string
+  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
+  // 按钮常用映射（保证不使用 tokens 也能拿到状态颜色）
+  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 {
+
+}
+
+export interface ThemeSpace {
+  sidebar: string
+  size: string
+  radius: string
+  padding: string
+  margin: string
+  shadow: string
+  lineHeight: string
+  [key: string]: any
+}
+
+export interface ThemeFonts {
+  body?: {
+    size?: string
+    weight?: string
+    family?: string
+  }
+  heading?: {
+    size?: string
+    weight?: string
+    family?: string
+  }
+}
+
+export interface ThemeIcons {
+  // aiAvatar: string
+  // userAvatar: string
+  // pdf: string
+  // word: string
+  // image: string
+  // video: string
+  // audio: string
+  // excel: string
+  // ppt: string
+  [key: string]: any
+}
+
+export interface AppTheme {
+  colors: ThemeColors
+  space: ThemeSpace
+  icons: ThemeIcons
+  fonts?: ThemeFonts
+  others?: ThemeOthers
+}
+
+// 默认主题实现
+export const defaultTheme: AppTheme = {
+  colors: {
+    // 兼容旧字段
+    primary: '#4E6EF2',
+    secondary: '#6D86F5',
+    success: '#52C41A',
+    warning: '#FAAD14',
+    error: '#F5222D',
+    info: '#1890FF',
+    background: '#F7F8FA',
+    text: '#1D2129',
+    border: '#DDE0E5',
+    disabled: '#C9CDD4',
+    disabledBackground: '#F5F7FA',
+    disabledText: '#C9CDD4',
+    shadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
+    appBackground: 'transparent',
+    listBackground: '#F2F3F5',
+    dashboardBackground: '#FFFFFF',
+    textSecondary: '#4E5969',
+    textTertiary: '#86909C',
+    textInverse: '#FFFFFF',
+    // 状态与扩展
+    primaryHover: '#6D86F5',
+    primaryActive: '#2D4BE0',
+    borderWeak: '#E5E6EB',
+    surfaceSubtle: '#F2F3F5',
+    surfaceSelected: '#EEF3FE',
+    // 按钮映射
+    btnPrimaryBg: '#4E6EF2',
+    btnPrimaryBgHover: '#6D86F5',
+    btnPrimaryBgActive: '#2D4BE0',
+    btnPrimaryBgDisabled: '#F5F7FA',
+    btnPrimaryText: '#FFFFFF',
+    btnPrimaryTextDisabled: '#C9CDD4',
+    btnSecondaryText: '#4E6EF2',
+    btnSecondaryTextHover: '#4E6EF2',
+    btnSecondaryTextActive: '#2D4BE0',
+    btnSecondaryTextDisabled: '#C9CDD4',
+    btnSecondaryBg: '#FFFFFF',
+    btnSecondaryBgHover: '#EEF3FE',
+    btnSecondaryBgActive: '#EEF3FE',
+    btnSecondaryBgDisabled: '#F5F7FA',
+    btnSecondaryBorder: '#4E6EF2',
+    btnSecondaryBorderHover: '#6D86F5',
+    btnSecondaryBorderActive: '#2D4BE0',
+    btnSecondaryBorderDisabled: '#E5E6EB',
+    btnTextText: '#4E6EF2',
+    btnTextTextHover: '#6D86F5',
+    btnTextTextActive: '#2D4BE0',
+    btnTextTextDisabled: '#C9CDD4',
+  },
+  space: {
+    sidebar: '260px',
+    size: '12px',
+    radius: '4px',
+    padding: '8px',
+    margin: '8px',
+    shadow: '0 2px 8px rgba(0,0,0,0.1)',
+    lineHeight: '1.5',
+  },
+  fonts: {
+    body: {
+      size: '14px',
+      weight: 'normal',
+      family: 'PingFang SC, Microsoft YaHei, Arial, sans-serif',
+    },
+    heading: {
+      size: '16px',
+      weight: '600',
+      family: 'PingFang SC, Microsoft YaHei, Arial, sans-serif',
+    },
+  },
+  icons: {
+    aiAvatar: 'http://10.15.12.13:9000/dev-rag-data/header_pic/JIABINBIN00/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20231212161213.jpg',
+    userAvatar: 'http://10.15.12.13:9005/assets/nav-logo-BKaOCDqi.png',
+    pdf: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/pdf-icon.png',
+    word: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/word-icon.png',
+    image: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/image-icon.png',
+    video: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/video-icon.png',
+    audio: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/audio-icon.png',
+    excel: 'https://ai-chat-1326151111.cos.c zap-shanghai.myqcloud.com/excel-icon.png',
+    ppt: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/ppt-icon.png',
+  },
+  others: {
+    baseFontWeight: 'normal',
+  }
+}
+export const defaultStyles: Styles = {
+  theme: defaultTheme,
+  mode: 'light',
+}
+export interface Styles {
+  theme?: AppTheme
+  mode?: 'light' | 'dark'
+  [key: string]: any
+}
+
+// 深合并 theme 工具
+export function deepMergeTheme(baseStyles: Styles, customStyles?: Partial<Styles>): Styles {
+  if (!customStyles) return baseStyles;
+
+  const mergedStyles = {
+    ...baseStyles,
+    ...customStyles,
+  };
+
+  // 如果 customStyles 有 theme，则合并 theme
+  if (customStyles.theme && baseStyles.theme) {
+    mergedStyles.theme = {
+      ...baseStyles.theme,
+      ...customStyles.theme,
+      colors: { ...baseStyles.theme.colors, ...customStyles.theme.colors },
+      space: { ...baseStyles.theme.space, ...customStyles.theme.space },
+      icons: { ...baseStyles.theme.icons, ...customStyles.theme.icons },
+      fonts: { ...baseStyles.theme.fonts, ...customStyles.theme.fonts },
+      others: { ...baseStyles.theme.others, ...customStyles.theme.others },
+    };
+  }
+
+  return mergedStyles;
+}
+
+
+export const ThemeContext = createContext<Styles>(defaultStyles);
+
+export const useTheme = () => useContext(ThemeContext);
+
+
+export const ThemeProvider = ({ styles, children }: { styles: Styles; children: React.ReactNode }) => {
+  // 这里做一次转换
+  const cssTheme = {
+    ...styles,
+  };
+  return (
+    <ThemeContext.Provider value={cssTheme}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/src/types/images.d.ts

@@ -0,0 +1,12 @@
+declare module '*.svg' {
+  import * as React from 'react';
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+

package/src/types/svg-modules.d.ts

@@ -0,0 +1,24 @@
+declare module '*.svg?react' {
+  import * as React from 'react';
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
+
+declare module '*.svg?url' {
+  const src: string;
+  export default src;
+}
+
+// 包内子路径导入（发布后给外部项目使用）
+declare module '@mxmweb/zui/icons/*.svg?react' {
+  import * as React from 'react';
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
+
+declare module '@mxmweb/zui/icons/*.svg?url' {
+  const src: string;
+  export default src;
+}
+
+

package/src/vite-env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string;
+  readonly VITE_API_URL: string;
+  readonly VITE_PUBLISH_NAME: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/tailwind.config.js

@@ -0,0 +1,170 @@
+/** @type {import('tailwindcss').Config} */
+import typography from '@tailwindcss/typography';
+export default {
+  darkMode: ['class'],
+  mode: 'jit',
+  corePlugins: {
+    preflight: false,
+    aspectRatio: true,
+    divideStyle: true,
+  },
+  content: ['./src/**/*.{html,ts,tsx,mdx}'],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        chart: {
+          1: 'hsl(var(--chart-1))',
+          2: 'hsl(var(--chart-2))',
+          3: 'hsl(var(--chart-3))',
+          4: 'hsl(var(--chart-4))',
+          5: 'hsl(var(--chart-5))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: {
+            height: '0',
+          },
+          to: {
+            height: 'var(--radix-accordion-content-height)',
+          },
+        },
+        'accordion-up': {
+          from: {
+            height: 'var(--radix-accordion-content-height)',
+          },
+          to: {
+            height: '0',
+          },
+        },
+        dot: {
+          '0%, 20%': {
+            color: 'rgba(0,0,0,0)',
+            textShadow: '.25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0)',
+          },
+          '40%': {
+            color: 'black',
+            textShadow: '.25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0)',
+          },
+          '60%': {
+            textShadow: '.25em 0 0 black, .5em 0 0 rgba(0,0,0,0)',
+          },
+          '80%, 100%': {
+            textShadow: '.25em 0 0 black, .5em 0 0 black',
+          },
+        },
+        slideDownAndFade: {
+          from: {
+            opacity: '0',
+            transform: 'translateY(-2px)',
+          },
+          to: {
+            opacity: '1',
+            transform: 'translateY(0)',
+          },
+        },
+        slideLeftAndFade: {
+          from: {
+            opacity: '0',
+            transform: 'translateX(2px)',
+          },
+          to: {
+            opacity: '1',
+            transform: 'translateX(0)',
+          },
+        },
+        slideUpAndFade: {
+          from: {
+            opacity: '0',
+            transform: 'translateY(2px)',
+          },
+          to: {
+            opacity: '1',
+            transform: 'translateY(0)',
+          },
+        },
+        slideRightAndFade: {
+          from: {
+            opacity: '0',
+            transform: 'translateX(-2px)',
+          },
+          to: {
+            opacity: '1',
+            transform: 'translateX(0)',
+          },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        dot: 'dot 1.5s infinite',
+        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+      },
+      fontFamily: {
+        sans: ['PingFang SC', 'Arial', 'Helvetica', 'sans-serif'],
+      },
+      fontSize: {
+        xs: ['12px', '20px'],
+        sm: ['14px', '22px'],
+        base: ['16px', '24px'],
+        lg: ['18px', '26px'],
+        xl: ['24px', '32px'],
+        '2xl': ['30px', '38px'],
+        '3xl': ['38px', '46px'],
+        '4xl': ['46px', '54px'],
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            maxWidth: '720px',
+          },
+        },
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [typography, require('tailwindcss-animate')],
+};

package/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    // "allowImportingTsExtensions": false,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": false,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true, // 确保生成类型声明文件
+    "outDir": "./dist/types" // 输出类型声明文件的目录
+  },
+  "include": ["src", "type.d.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsconfig.app.tsbuildinfo

@@ -0,0 +1,11 @@
+{
+  "root": [
+    "./src/preview.tsx",
+    "./src/main.tsx",
+    "./src/type.d.ts",
+    "./src/vite-env.d.ts",
+    "./src/application/index.tsx",
+    "./src/application/@types/system.ts"
+  ],
+  "version": "5.6.3"
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts", "/src/type.d.ts"]
+}

package/tsconfig.node.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.6.3"}