@donglegeyu/ui-core 0.1.0

package/src/components/Card/Card.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Card as SemiCard, CardProps as SemiCardProps } from '@douyinfe/semi-ui';
+
+export interface CardProps extends SemiCardProps {
+  /** 卡片标题 */
+  title?: string;
+  /** 是否显示边框 */
+  bordered?: boolean;
+  /** 是否悬浮 */
+  hoverable?: boolean;
+  /** 卡片内容 */
+  children?: React.ReactNode;
+  /** 卡片操作区 */
+  extra?: React.ReactNode;
+}
+
+/**
+ * 公司 Card 组件
+ * 基于 Semi Design Card 二次封装
+ */
+export const Card: React.FC<CardProps> = ({
+  title,
+  bordered = true,
+  hoverable = false,
+  children,
+  extra,
+  className,
+  style,
+  ...restProps
+}) => {
+  const classes = [
+    'company-card',
+    hoverable ? 'company-card--hoverable' : '',
+    className || '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <SemiCard
+      title={title}
+      bordered={bordered}
+      className={classes}
+      style={style}
+      extra={extra}
+      {...restProps}
+    >
+      {children}
+    </SemiCard>
+  );
+};
+
+Card.displayName = 'Card';

package/src/components/Card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps } from './Card';

package/src/components/Form/Form.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Form as SemiForm, FormProps as SemiFormProps, useForm } from '@douyinfe/semi-ui';
+
+export interface FormItemProps {
+  field: string;
+  label: string;
+  rules?: Array<{ required?: boolean; message?: string; [key: string]: any }>;
+  children: React.ReactNode;
+}
+
+export interface FormProps extends Omit<SemiFormProps, 'form'> {
+  /** 表单实例 */
+  form?: ReturnType<typeof useForm>;
+  /** 提交回调 */
+  onSubmit?: (values: Record<string, any>) => void;
+  /** 表单项 */
+  children: React.ReactNode;
+}
+
+/**
+ * 公司 Form 组件
+ * 基于 Semi Design Form 二次封装
+ */
+export const Form: React.FC<FormProps> = ({ form, onSubmit, children, layout = 'horizontal', labelPosition = 'left', ...restProps }) => {
+  const formApi = form || useForm();
+
+  const handleSubmit = (values: Record<string, any>, errors: any) => {
+    if (!errors && onSubmit) {
+      onSubmit(values);
+    }
+  };
+
+  return (
+    <SemiForm
+      form={formApi}
+      onSubmit={handleSubmit}
+      layout={layout}
+      labelPosition={labelPosition}
+      {...restProps}
+    >
+      {children}
+    </SemiForm>
+  );
+};
+
+Form.Item = SemiForm.Input;
+Form.displayName = 'Form';

package/src/components/Form/index.ts

@@ -0,0 +1,2 @@
+export { Form } from './Form';
+export type { FormProps, FormItemProps } from './Form';

package/src/components/Input/Input.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Input as SemiInput, InputProps as SemiInputProps } from '@douyinfe/semi-ui';
+
+export type InputSize = 'small' | 'medium' | 'large';
+
+export interface InputProps extends Omit<SemiInputProps, 'size'> {
+  /** 输入框尺寸 */
+  size?: InputSize;
+  /** 是否显示清除按钮 */
+  allowClear?: boolean;
+  /** 前缀图标 */
+  prefix?: React.ReactNode;
+  /** 后缀图标 */
+  suffix?: React.ReactNode;
+  /** 值变化回调 */
+  onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * 公司 Input 组件
+ * 基于 Semi Design Input 二次封装
+ */
+export const Input: React.FC<InputProps> = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ size = 'medium', allowClear = false, prefix, suffix, className, style, ...restProps }, ref) => {
+    const semiSize = size === 'small' ? 'small' : size === 'large' ? 'large' : 'default';
+
+    const classes = [
+      'company-input',
+      className || '',
+    ].filter(Boolean).join(' ');
+
+    return (
+      <SemiInput
+        ref={ref}
+        size={semiSize}
+        showClear={allowClear}
+        prefix={prefix}
+        suffix={suffix}
+        className={classes}
+        style={style}
+        {...restProps}
+      />
+    );
+  }
+);
+
+Input.displayName = 'Input';

package/src/components/Input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps, InputSize } from './Input';

package/src/components/Layout/Layout.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Layout as SemiLayout, Sider, Header, Content, Footer } from '@douyinfe/semi-ui';
+
+export interface LayoutProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+/**
+ * 公司 Layout 组件
+ * 基于 Semi Design Layout 二次封装
+ */
+export const Layout: React.FC<LayoutProps> & {
+  Sider: typeof Sider;
+  Header: typeof Header;
+  Content: typeof Content;
+  Footer: typeof Footer;
+} = ({ className, style, children }) => {
+  return (
+    <SemiLayout className={['company-layout', className].filter(Boolean).join(' ')} style={style}>
+      {children}
+    </SemiLayout>
+  );
+};
+
+Layout.Sider = Sider;
+Layout.Header = Header;
+Layout.Content = Content;
+Layout.Footer = Footer;
+Layout.displayName = 'Layout';

package/src/components/Layout/index.ts

@@ -0,0 +1,2 @@
+export { Layout } from './Layout';
+export type { LayoutProps } from './Layout';

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Modal as SemiModal, ModalProps as SemiModalProps } from '@douyinfe/semi-ui';
+
+export type ModalSize = 'small' | 'medium' | 'large';
+
+export interface ModalProps extends Omit<SemiModalProps, 'size'> {
+  /** 弹窗尺寸 */
+  size?: ModalSize;
+  /** 是否显示 */
+  visible: boolean;
+  /** 标题 */
+  title: string;
+  /** 确认按钮文字 */
+  okText?: string;
+  /** 取消按钮文字 */
+  cancelText?: string;
+  /** 确认回调 */
+  onOk?: () => void;
+  /** 取消回调 */
+  onCancel?: () => void;
+  /** 弹窗内容 */
+  children?: React.ReactNode;
+}
+
+/**
+ * 公司 Modal 组件
+ * 基于 Semi Design Modal 二次封装
+ */
+export const Modal: React.FC<ModalProps> = ({
+  visible,
+  title,
+  okText = '确定',
+  cancelText = '取消',
+  size = 'medium',
+  children,
+  onOk,
+  onCancel,
+  ...restProps
+}) => {
+  const semiSize = size === 'small' ? 'small' : size === 'large' ? 'large' : 'default';
+
+  return (
+    <SemiModal
+      visible={visible}
+      title={title}
+      okText={okText}
+      cancelText={cancelText}
+      size={semiSize}
+      onOk={onOk}
+      onCancel={onCancel}
+      {...restProps}
+    >
+      {children}
+    </SemiModal>
+  );
+};
+
+Modal.displayName = 'Modal';

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps, ModalSize } from './Modal';

package/src/components/Select/Select.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Select as SemiSelect, SelectProps as SemiSelectProps } from '@douyinfe/semi-ui';
+
+export type SelectSize = 'small' | 'medium' | 'large';
+
+export interface SelectProps<T = any> extends Omit<SemiSelectProps, 'size'> {
+  /** 选择器尺寸 */
+  size?: SelectSize;
+  /** 是否显示清除按钮 */
+  allowClear?: boolean;
+  /** 占位符 */
+  placeholder?: string;
+  /** 是否多选 */
+  multiple?: boolean;
+  /** 选项数据 */
+  options?: Array<{ label: string; value: T; disabled?: boolean }>;
+  /** 值变化回调 */
+  onChange?: (value: T | T[], option: any) => void;
+}
+
+/**
+ * 公司 Select 组件
+ * 基于 Semi Design Select 二次封装
+ */
+export const Select = React.forwardRef(
+  <T = any,>(
+    { size = 'medium', allowClear = false, multiple = false, options = [], placeholder, className, style, ...restProps }: SelectProps<T>,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const semiSize = size === 'small' ? 'small' : size === 'large' ? 'large' : 'default';
+
+    const classes = [
+      'company-select',
+      className || '',
+    ].filter(Boolean).join(' ');
+
+    return (
+      <SemiSelect
+        ref={ref}
+        size={semiSize}
+        showClear={allowClear}
+        multiple={multiple}
+        placeholder={placeholder}
+        optionList={options}
+        className={classes}
+        style={style}
+        {...restProps}
+      />
+    );
+  }
+) as <T = any>(
+  props: SelectProps<T> & { ref?: React.Ref<HTMLDivElement> }
+) => React.ReactElement;
+
+Select.displayName = 'Select';

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps, SelectSize } from './Select';

package/src/components/Table/Table.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Table as SemiTable, TableProps as SemiTableProps } from '@douyinfe/semi-ui';
+
+export interface TableColumn<T = any> {
+  title: string;
+  dataIndex: string;
+  key?: string;
+  width?: number | string;
+  align?: 'left' | 'center' | 'right';
+  fixed?: 'left' | 'right';
+  sorter?: boolean | ((a: T, b: T) => number);
+  render?: (value: any, record: T, index: number) => React.ReactNode;
+}
+
+export interface TableProps<T = any> extends Omit<SemiTableProps<T>, 'columns'> {
+  /** 列配置 */
+  columns: TableColumn<T>[];
+  /** 数据源 */
+  dataSource: T[];
+  /** 是否显示边框 */
+  bordered?: boolean;
+  /** 是否显示斑马纹 */
+  striped?: boolean;
+  /** 行选择配置 */
+  rowSelection?: {
+    type?: 'checkbox' | 'radio';
+    selectedRowKeys?: React.Key[];
+    onChange?: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
+  };
+  /** 分页配置 */
+  pagination?: {
+    current?: number;
+    pageSize?: number;
+    total?: number;
+    onChange?: (page: number, pageSize: number) => void;
+  };
+}
+
+/**
+ * 公司 Table 组件
+ * 基于 Semi Design Table 二次封装
+ */
+export const Table = React.forwardRef(
+  <T extends Record<string, any> = any,>(
+    { columns, dataSource, bordered = true, striped = false, rowSelection, pagination, className, style, ...restProps }: TableProps<T>,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const classes = [
+      'company-table',
+      striped ? 'company-table--striped' : '',
+      className || '',
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} className={classes} style={style}>
+        <SemiTable
+          columns={columns as SemiTableProps<T>['columns']}
+          dataSource={dataSource}
+          bordered={bordered}
+          rowSelection={rowSelection}
+          pagination={pagination}
+          {...restProps}
+        />
+      </div>
+    );
+  }
+) as <T extends Record<string, any> = any>(
+  props: TableProps<T> & { ref?: React.Ref<HTMLDivElement> }
+) => React.ReactElement;
+
+Table.displayName = 'Table';

package/src/components/Table/index.ts

@@ -0,0 +1,2 @@
+export { Table } from './Table';
+export type { TableProps, TableColumn } from './Table';

package/src/index.ts

@@ -0,0 +1,34 @@
+/**
+ * @company/ui-core - 公司 UI 组件库
+ * 基于 Semi Design 二次封装
+ */
+
+// Theme
+export { CompanyThemeProvider } from './theme/provider';
+export { theme, colorTokens, spacingTokens, borderRadiusTokens, fontSizeTokens, fontWeightTokens, boxShadowTokens, transitionTokens, zIndexTokens } from './theme/tokens';
+export type { Theme, ColorTokens, SpacingTokens } from './theme/tokens';
+
+// Components - 基础组件
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonType, ButtonSize } from './components/Button';
+
+export { Input } from './components/Input';
+export type { InputProps, InputSize } from './components/Input';
+
+export { Select } from './components/Select';
+export type { SelectProps, SelectSize } from './components/Select';
+
+export { Table } from './components/Table';
+export type { TableProps, TableColumn } from './components/Table';
+
+export { Form } from './components/Form';
+export type { FormProps, FormItemProps } from './components/Form';
+
+export { Modal } from './components/Modal';
+export type { ModalProps, ModalSize } from './components/Modal';
+
+export { Layout } from './components/Layout';
+export type { LayoutProps } from './components/Layout';
+
+export { Card } from './components/Card';
+export type { CardProps } from './components/Card';

package/src/theme/index.ts

@@ -0,0 +1,2 @@
+export { theme, colorTokens, spacingTokens, borderRadiusTokens, fontSizeTokens, fontWeightTokens, boxShadowTokens, transitionTokens, zIndexTokens } from './tokens';
+export type { Theme, ColorTokens, SpacingTokens } from './tokens';

package/src/theme/provider.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ConfigProvider } from '@douyinfe/semi-ui';
+import { theme } from './tokens';
+
+interface CompanyThemeProviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * 公司主题提供者
+ * 将 Design Tokens 注入到 Semi Design 的 ConfigProvider
+ */
+export const CompanyThemeProvider: React.FC<CompanyThemeProviderProps> = ({ children }) => {
+  const semiTheme = {
+    light: {
+      '--semi-color-primary': theme.color.primary['500'],
+      '--semi-color-primary-hover': theme.color.primary['600'],
+      '--semi-color-primary-active': theme.color.primary['700'],
+      '--semi-color-primary-disabled': theme.color.primary['300'],
+      '--semi-color-success': theme.color.success.DEFAULT,
+      '--semi-color-warning': theme.color.warning.DEFAULT,
+      '--semi-color-danger': theme.color.error.DEFAULT,
+      '--semi-color-info': theme.color.info.DEFAULT,
+    },
+  };
+
+  return (
+    <ConfigProvider theme={semiTheme}>
+      {children}
+    </ConfigProvider>
+  );
+};

package/src/theme/tokens.ts

@@ -0,0 +1,132 @@
+/**
+ * Design Tokens - 公司设计规范
+ * 所有样式变量集中管理，AI 只需调用组件，无需写样式
+ */
+
+export const colorTokens = {
+  // 主色系
+  primary: {
+    50: '#e6f7ff',
+    100: '#bae7ff',
+    200: '#91d5ff',
+    300: '#69c0ff',
+    400: '#40a9ff',
+    500: '#1677ff',  // 主色
+    600: '#0958d9',
+    700: '#003eb3',
+    800: '#002c8c',
+    900: '#001d66',
+  },
+  // 语义色
+  success: {
+    light: '#f6ffed',
+    DEFAULT: '#52c41a',
+    dark: '#389e0d',
+  },
+  warning: {
+    light: '#fffbe6',
+    DEFAULT: '#faad14',
+    dark: '#d48806',
+  },
+  error: {
+    light: '#fff2f0',
+    DEFAULT: '#ff4d4f',
+    dark: '#cf1322',
+  },
+  info: {
+    light: '#e6f7ff',
+    DEFAULT: '#1677ff',
+    dark: '#0958d9',
+  },
+  // 中性色
+  neutral: {
+    50: '#ffffff',
+    100: '#fafafa',
+    200: '#f5f5f5',
+    300: '#f0f0f0',
+    400: '#d9d9d9',
+    500: '#bfbfbf',
+    600: '#8c8c8c',
+    700: '#595959',
+    800: '#434343',
+    900: '#262626',
+    950: '#141414',
+  },
+} as const;
+
+export const spacingTokens = {
+  xs: '4px',
+  sm: '8px',
+  md: '16px',
+  lg: '24px',
+  xl: '32px',
+  '2xl': '48px',
+  '3xl': '64px',
+} as const;
+
+export const borderRadiusTokens = {
+  none: '0',
+  sm: '4px',
+  md: '8px',
+  lg: '12px',
+  xl: '16px',
+  full: '9999px',
+} as const;
+
+export const fontSizeTokens = {
+  xs: '12px',
+  sm: '14px',
+  md: '16px',
+  lg: '18px',
+  xl: '20px',
+  '2xl': '24px',
+  '3xl': '30px',
+  '4xl': '36px',
+} as const;
+
+export const fontWeightTokens = {
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+} as const;
+
+export const boxShadowTokens = {
+  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+} as const;
+
+export const transitionTokens = {
+  fast: '150ms ease',
+  base: '200ms ease',
+  slow: '300ms ease',
+} as const;
+
+export const zIndexTokens = {
+  dropdown: 1000,
+  sticky: 1020,
+  fixed: 1030,
+  modalBackdrop: 1040,
+  modal: 1050,
+  popover: 1060,
+  tooltip: 1070,
+} as const;
+
+// 导出完整 theme 对象
+export const theme = {
+  color: colorTokens,
+  spacing: spacingTokens,
+  borderRadius: borderRadiusTokens,
+  fontSize: fontSizeTokens,
+  fontWeight: fontWeightTokens,
+  boxShadow: boxShadowTokens,
+  transition: transitionTokens,
+  zIndex: zIndexTokens,
+} as const;
+
+export type Theme = typeof theme;
+export type ColorTokens = typeof colorTokens;
+export type SpacingTokens = typeof spacingTokens;

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "**/*.test.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import dts from 'rollup-plugin-dts';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+        'theme/index': resolve(__dirname, 'src/theme/index.ts'),
+      },
+      formats: ['es', 'cjs'],
+      fileName: (format, entryName) => {
+        const ext = format === 'es' ? 'esm.js' : 'cjs.js';
+        return `${entryName}.${ext}`;
+      },
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@douyinfe/semi-ui', '@douyinfe/semi-icons'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          '@douyinfe/semi-ui': 'SemiUI',
+          '@douyinfe/semi-icons': 'SemiIcons',
+        },
+      },
+    },
+    sourcemap: true,
+    minify: false,
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    },
+  },
+});