feat(all): 拆除内联样式、request优化

2024-05-10 10:17:47 +08:00 · 2024-05-10 10:17:47 +08:00 · 1e1ac401e5
commit 1e1ac401e5
parent a47aa0c431
42 changed files with 264 additions and 279 deletions
--- a/docs/index.md
+++ b/docs/index.md
@ -1,159 +0,0 @@
---
-hero:
-  title: lambo
-  description: 致力于提升前端开发效率与规范
-  actions:
-    - text: 快速上手
-      link: /bizs
-features:
-  - title: biz
-    emoji: 🍑
-    description: 业务库
-  - title: hooks
-    emoji: 💎
-    description: hooks
-  - title: func
-    emoji: 🌈
-    description: 常用函数库
-  - title: meta
-    emoji: ☀️
-    description: 原子组件库
-  - title: constants
-    emoji: 🈶️
-    description: 静态定义库
-  - title: request
-    emoji: 🥣
-    description: 网络请求库
-  - title: types
-    emoji: 🈸
-    description: typescript 声明库
-  - title: material
-    emoji: 🥱
-    description: 物料库
-  - title: cli
-    emoji: 🐔
-    description: 脚手架
---
-
-## 目录结构
-
-<Tree>
-  <ul>
-    <li>
-      docs
-      <small>全局文档</small>
-      <ul>
-        <li>
-          index.md
-          <small>这是首页文档</small>
-        </li>
-      </ul>
-    </li>
-    <li>
-      packages
-      <small>组件包目录</small>
-      <ul>
-        <li>
-          biz
-          <small>业务组件</small>
-        </li>
-        <li>
-          func
-          <small>函数库</small>
-        </li>
-        <li>
-          hooks
-          <small>hooks</small>
-        </li>
-        <li>
-          constants
-          <small>静态枚举值定义</small>
-        </li>
-        <li>
-          meta
-          <small>元组件</small>
-        </li>
-        <li>
-          request
-          <small>请求库</small>
-        </li>
-        <li>
-          types
-          <small>类型定义库</small>
-        </li>
-        <li>
-          material
-          <small>物料库</small>
-        </li>
-        <li>
-          cli
-          <small>脚手架</small>
-        </li>
-      </ul>
-    </li>
-    <li>
-      src
-      <small>这是 src 文件夹</small>
-      <ul>
-        <li>
-          index.md
-          <small>这是 index.md</small>
-        </li>
-      </ul>
-    </li>
-    <li>
-      .dumirc.ts
-      <small>文档配置</small>
-    </li>
-    <li>
-      package.json
-      <small>这是 package.json</small>
-    </li>
-  </ul>
-</Tree>
-
-## 本文档食用说明
-
-目前在进行中的项目为：@zhst/bizs、@zhst/hooks、@zhst/meta、@zhst/func..
-
-bizs: 基于@zhst/hooks、@zhst/meta、@zhst/func 开发，基本贴近于业务。<Badge>doing</Badge>
-
-meta：基于 antd 开发，作为公司的定制化原子组件。<Badge>doing</Badge>
-
-hooks：基于 ahooks、@zhst/func 定制化二次开发。<Badge>doing</Badge>
-
-func：基于 lodash-es 定制化二次开发 (由于 utils 包名被使用了)<Badge>doing</Badge>
-
-## 后续构思
-
-想做一个，基于智慧视通开发场景和业务场景的前端技术流程化方案，希望它能渗透到整个研发的所有流程中。
-
-比如：代码规范、git 提交规范、物料库、基于 electron 的前端工具客户端（可集成物料库、图片上传小工具）、api 自动生成...
-
-:::info{title=@zhst/lint}
-lint 工具库，包含：eslint-config、eslint-plugin、commit-lint
-:::
-
-:::info{title=@zhst/metarial}
-物料库，可以直接通过 clone npm 仓库的形式生成模板页面，页面没有任何依赖，一个页面就是一个项目。
-:::
-
-:::info{title=@zhst/app}
-基于 electron 的前端客户端工具，初期功能构思方案有：文件上传、git 仓库管理、物料库可视化页面一键生成
-:::
-
-:::info{title=@zhst/autoapi}
-接口一键生成工具
-:::
-
-:::info{title=@types/zhst}
-类型定义库
-:::
-
-:::info{title=@zhst/constants}
-静态变量枚举库
-:::
-
-:::info{title=@zhst/cli}
-基于物料库的脚手架，可以直接通过可视化界面搭建项目，偏向于 lowcode+ 思维
-:::
--- a/packages/biz/CHANGELOG.md
+++ b/packages/biz/CHANGELOG.md
@ -1,5 +1,19 @@
 # @zhst/biz

+## 0.19.0
+
+### Minor Changes
+
+- fix: 修复适配问题
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/hooks@0.11.0
+  - @zhst/func@0.13.0
+  - @zhst/icon@0.3.0
+  - @zhst/meta@0.17.0
+
 ## 0.18.8

 ### Patch Changes
--- a/packages/biz/package.json
+++ b/packages/biz/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/biz",
-  "version": "0.18.8",
+  "version": "0.19.0",
  "description": "业务库",
  "keywords": [
    "business",
--- a/packages/biz/src/boxSelectTree/boxSelectTree.tsx
+++ b/packages/biz/src/boxSelectTree/boxSelectTree.tsx
@ -1,13 +1,18 @@
-import React, { FC } from 'react';
+import React, { FC, useContext } from 'react';
 import { Tabs, TabsProps } from 'antd'
+import { ConfigProvider } from '@zhst/meta';
 import BoxPanel from './components/boxPanel';
 import type { BoxPanelProps } from './components/boxPanel';
-
+import './index.less'
+import classNames from 'classnames';
 export interface BoxSelectTreeProps extends BoxPanelProps {
  onTabChange?: (e: any) => void
  tabsProps?: TabsProps
+  prefixCls?: string;
 }

+const { ConfigContext } = ConfigProvider
+
 const BoxSelectTree: FC<BoxSelectTreeProps> = (props) => {
  const {
    data,
@ -28,21 +33,24 @@ const BoxSelectTree: FC<BoxSelectTreeProps> = (props) => {
    customImport,
    showOptions,
    extraBtns,
+    prefixCls: customizePrefixCls
  } = props
+  const { getPrefixCls } = useContext(ConfigContext);
+  const componentName = getPrefixCls('biz-box-select-tree', customizePrefixCls);

  const items: TabsProps['items'] = [
    {
      key: '1',
-      label: <div style={{ textAlign:'center', width: '160px' }} >盒子</div>,
+      label: <div className={classNames(componentName + '-tab')} style={{ textAlign:'center' }} >盒子</div>,
    },
    {
      key: '2',
-      label: <div style={{ textAlign:'center', width: '160px' }} >盒子组</div>,
+      label: <div className={classNames(componentName + '-tab')} style={{ textAlign:'center' }} >盒子组</div>,
    },
  ];

  return (
-    <div className='box-select-tree'>
+    <div className={componentName}>
      <Tabs
        defaultActiveKey="1"
        centered
--- a/packages/biz/src/boxSelectTree/components/boxPanel/index.less
+++ b/packages/biz/src/boxSelectTree/components/boxPanel/index.less
@ -0,0 +1,19 @@
+.zhst-biz-box-select-tree-panel {
+  padding: 0 16px;
+
+  &-btns-common {
+    padding: 4px 8px;
+  }
+
+  &-btns-import {
+    padding: 4px 8px;
+  }
+
+  &-btns-divider {
+    margin: 8px 0;
+  }
+
+  &-create-modal {
+    // width: 600px;
+  }
+}
--- a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx
+++ b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx
@ -1,11 +1,14 @@
-import React, { FC, useState, useRef } from 'react';
+import React, { FC, useState, useRef, useContext } from 'react';
 import{ Button, Divider, Input, Space, TreeDataNode } from 'antd'
 import { ModalForm, ModalFormProps, ProFormInstance, ProFormText } from '@ant-design/pro-components'
+import { ConfigProvider } from '@zhst/meta';
 import { ClockCircleOutlined, CloseCircleOutlined, DiffOutlined, FolderAddOutlined, ImportOutlined, SwitcherOutlined  } from '@ant-design/icons'
 import type { TreeProps, InputProps } from 'antd';
 import type { BoxTreeProps } from '../../../tree';
 import TreeTransferModal from '../../../treeTransferModal'
 import BoxTree from '../../../tree';
+import './index.less'
+import classNames from 'classnames';

 export interface BoxPanelProps {
  searchInputProps?: InputProps
@ -26,8 +29,11 @@ export interface BoxPanelProps {
  onCreate?: () => void
  customImport?: any
  extraBtns?: any
+  prefixCls?: string;
 }

+const { ConfigContext } = ConfigProvider
+
 const BoxPanel: FC<BoxPanelProps> = (props) => {
  const {
    searchInputProps,
@ -46,8 +52,12 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
    onBatch,
    onCreate,
    boxDataSource,
+    prefixCls: customizePrefixCls,
    customImport
  } = props
+
+  const { getPrefixCls } = useContext(ConfigContext);
+  const componentName = getPrefixCls('biz-box-select-tree-panel', customizePrefixCls);
  const [isTreeCheckable, setIsTreeCheckable] = useState(false)
  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
  const [boxChoiceOpen, setBoxChoiceOpen] = useState(false)
@ -104,7 +114,7 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
  }

  return (
-    <div style={{ padding: '0 16px' }}>
+    <div className={componentName}>
      {/* 盒子选择弹框 */}
      <TreeTransferModal
        open={boxChoiceOpen}
@ -132,17 +142,17 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
        {showOptions && (
          <>
            <Space align='center'>
-              <Button type='text' style={{ padding: '4px 8px' }} onClick={() => onImport?.()} icon={<ImportOutlined />} >导入盒子</Button>
-              <Divider type="vertical" style={{ margin: '8px 0' }} />
+              <Button className={classNames(componentName + '-btns-common')} type='text' onClick={() => onImport?.()} icon={<ImportOutlined />} >导入盒子</Button>
+              <Divider className={classNames(componentName + '-btns-divider')} type="vertical" />
              {onCreate ?
                (
-                  <Button onClick={onCreate} type='text' style={{ padding: '4px 8px' }} icon={<FolderAddOutlined />} >新建组</Button>
+                  <Button className={classNames(componentName + '-btns-common')} onClick={onCreate} type='text' icon={<FolderAddOutlined />} >新建组</Button>
                ) : (
                  <ModalForm<{
                    name: string
                    boxList?: any[]
                  }>
-                    width={'600px'}
+                    className={classNames(componentName + '-create-modal')}
                    open={onCreate ? false : undefined}
                    formRef={createFormRef}
                    title="新建组"
@ -150,7 +160,7 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
                    layout='horizontal'
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
-                    trigger={<Button type='text' style={{ padding: '4px 8px' }} icon={<FolderAddOutlined />} >新建组</Button>}
+                    trigger={<Button type='text' className={classNames(componentName + '-btns-common')} icon={<FolderAddOutlined />} >新建组</Button>}
                    submitter={{
                      searchConfig: {
                        submitText: '确定',
@ -197,9 +207,9 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
                  </ModalForm>
                )
              }
-              <Divider type="vertical" style={{ margin: '8px 0' }} />
+              <Divider className={classNames(componentName + '-btns-divider')} type="vertical" />
              {/* @ts-ignore */}
-              <Button danger type='text' style={{ padding: '4px 8px' }} icon={<CloseCircleOutlined />} disabled={treeProps?.checkedKeys?.length <= 0} onClick={onBoxBatchDelete} >删除</Button>
+              <Button className={classNames(componentName + '-btns-common')} danger type='text' icon={<CloseCircleOutlined />} disabled={treeProps?.checkedKeys?.length <= 0} onClick={onBoxBatchDelete} >删除</Button>
            </Space>
            <Divider style={{ margin: 0 }} />
          </>
--- a/packages/biz/src/boxSelectTree/index.less
+++ b/packages/biz/src/boxSelectTree/index.less
@ -0,0 +1,5 @@
+.zhst-biz-box-select-tree {
+  &-tab {
+    width: 160px;
+  }
+}
--- a/packages/biz/src/infiniteList/components/SearchCard.tsx
+++ b/packages/biz/src/infiniteList/components/SearchCard.tsx
@ -76,10 +76,10 @@ const SearchCard = forwardRef<SearchCardRefProps, SearchCardProps>((props, ref)
      <div className={`${componentName}-main`}>
        <i className={`${componentName}-main-num`}>{id || sort}</i>
        <Image
+          className={`${componentName}-main-img`}
          src={url || data?.url}
-          preview={false}
-          width={'100%'}
          height={'240px'}
+          preview={false}
          fallback={EMPTY_BASE64}
        />
        <Flex align='center' justify='space-between' className={`${componentName}-main-opt`}>
--- a/packages/biz/src/infiniteList/components/index.less
+++ b/packages/biz/src/infiniteList/components/index.less
@ -30,6 +30,11 @@
      border-radius: 3px;
    }

+    &-img {
+      width: 100%;
+      height: 240px;
+    }
+
    &-opt {
      display: none;
      position: absolute;
--- a/packages/biz/src/odModal/OdModal.tsx
+++ b/packages/biz/src/odModal/OdModal.tsx
@ -2,6 +2,8 @@ import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'reac
 import { Button, Modal, ModalProps, Select, SelectProps, Space, theme } from 'antd';
 import { ConfigProvider, CropperImage, Scanner, CropperImageProps, CropperImageRefProps } from '@zhst/meta'
 import { IconFont } from '@zhst/icon'
+import classNames from 'classnames';
+import './index.less'

 export interface ODModalProps extends ModalProps {
  prefixCls?: string;
@ -95,7 +97,7 @@ const ODModal = forwardRef<ODModalRefProps, ODModalProps>((props, ref) => {
      onCancel={onCancel}
      onOk={onOk}
      {...modalProps}
-      className={componentName}
+      rootClassName={componentName}
    >
      <Space size={12} direction='vertical' align='center' style={{ textAlign: 'center' }}>
        <Scanner style={{ width: odWidth, height: odHeight }} visible={scanning}>
@ -118,7 +120,7 @@ const ODModal = forwardRef<ODModalRefProps, ODModalProps>((props, ref) => {
            <div>
              选中类型：
              <Select
-                style={{ width: '90px' }}
+                className={classNames(componentName + '-type')}
                defaultValue={selectDefaultValue}
                value={selectedType}
                options={selectOptions}
@ -129,7 +131,7 @@ const ODModal = forwardRef<ODModalRefProps, ODModalProps>((props, ref) => {
            <Button disabled={handSelectDisable} size='small' type="link" onClick={onHandSelect}><IconFont icon="icon-shoudongkuangxuan" /> 手动框选</Button>
            <Button disabled={autoSelectDisable} size='small' type="link" onClick={onAutoSelect}><IconFont icon="icon-zidong" /> 自动框选</Button>
            <Button disabled={resetDisable} size='small' type="link" onClick={onReset}><IconFont icon="icon-zhongzhi3" /> 重置</Button>
-            {showRotateButton && <IconFont onIconClick={onRotate} styles={{ marginLeft: '6px' }}  color={token.colorPrimary} icon="icon-xuanzhuan1" />}
+            {showRotateButton && <IconFont className={classNames(componentName + '-rotate')} onIconClick={onRotate}  color={token.colorPrimary} icon="icon-xuanzhuan1" />}
          </Space>
        )}
      </Space>
--- a/packages/biz/src/odModal/index.less
+++ b/packages/biz/src/odModal/index.less
@ -0,0 +1,9 @@
+.zhst-od-modal {
+  &-type {
+    width: 90px;
+  }
+
+  &-rotate {
+    margin-left: 6px;
+  }
+}
--- a/packages/biz/src/treeTransfer/TreeTransfer.tsx
+++ b/packages/biz/src/treeTransfer/TreeTransfer.tsx
@ -53,7 +53,6 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
        <Card
          className={`${componentName}-left_card`}
          title={<div style={{ textAlign: 'center' }} >可选择的范围</div>}
-          bodyStyle={{ padding: 12 }}
        >
          <Input prefix={<SearchOutlined />} onChange={e => setKeyWords(e.target.value)} placeholder='请输入设备名称' {...searchInputProps} />
          <ConfigProvider
@ -66,7 +65,7 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
            }}
          >
            <Tree
-              style={{ marginTop: '6px' }}
+              className={`${componentName}-left_card-tree`}
              height={420}
              blockNode
              checkable
@ -84,12 +83,9 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
        <Card
          className={`${componentName}-right_card`}
          title={<div style={{ textAlign: 'center' }}>已选择的范围</div>}
-          bodyStyle={{ padding: 0 }}
-
        >
          <div
            className={`${componentName}-right_card__items`}
-            style={{ maxHeight: '422px' }}
          >
            {targetItems.map(item => (
              <div
--- a/packages/biz/src/treeTransfer/index.less
+++ b/packages/biz/src/treeTransfer/index.less
@ -2,8 +2,12 @@
  &-left {
    &_card {
      width: 500px;
-      min-height: 522px;
+      min-height: 544px;
      background-color: #FCFCFC;
+
+      &-tree {
+        margin-top: 6px;
+      }
    }
  }

@ -18,6 +22,7 @@
        width: 100%;
        height: calc(100% - 105px);
        overflow-y: scroll;
+        max-height: 422px;

        &::-webkit-scrollbar {
          display: none;
--- a/packages/func/CHANGELOG.md
+++ b/packages/func/CHANGELOG.md
@ -1,5 +1,16 @@
 # @zhst/utils

+## 0.13.0
+
+### Minor Changes
+
+- fix: 修复适配问题
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/request@0.13.0
+
 ## 0.12.0

 ### Minor Changes
--- a/packages/func/package.json
+++ b/packages/func/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/func",
-  "version": "0.12.0",
+  "version": "0.13.0",
  "description": "函数合集",
  "keywords": [
    "hooks"
--- a/packages/func/src/string/demo/pxTorem.tsx
+++ b/packages/func/src/string/demo/pxTorem.tsx
@ -9,7 +9,7 @@ import { Input } from 'antd'
 const demo = () => {
  const [outputVal, setOutPutVal ] = useState<any>(null)

-  const handleChange = (e) => {
+  const handleChange = (e: { target: { value: string } }) => {
    const value = pxToRem(e.target.value)
    setOutPutVal(value)
  }
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@ -1,5 +1,16 @@
 # @zhst/hooks

+## 0.11.0
+
+### Minor Changes
+
+- fix: 修复适配问题
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/func@0.13.0
+
 ## 0.10.4

 ### Patch Changes
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/hooks",
-  "version": "0.10.4",
+  "version": "0.11.0",
  "description": "hooks合集",
  "keywords": [
    "hooks"
--- a/packages/icon/CHANGELOG.md
+++ b/packages/icon/CHANGELOG.md
@ -1,5 +1,11 @@
 # @zhst/icon

+## 0.3.0
+
+### Minor Changes
+
+- fix: 修复适配问题
+
 ## 0.2.0

 ### Minor Changes
--- a/packages/icon/es/demo/basic.js
+++ b/packages/icon/es/demo/basic.js
@ -1,8 +0,0 @@
-import React from 'react';
-import { IconFont } from '@zhst/icon';
-var demo = function demo() {
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconFont, {
-    icon: "icon-daoru1"
-  }));
-};
-export default demo;
--- a/packages/icon/es/demo/demo.js
+++ b/packages/icon/es/demo/demo.js
@ -1,33 +0,0 @@
-import React from 'react';
-var iconJson = require("../font/iconfont.json");
-import { IconFont } from '@zhst/icon';
-import "./index.less";
-import { message } from '@zhst/meta';
-var demo = function demo() {
-  var iconArr = iconJson['glyphs'];
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("ul", {
-    className: 'demo-ul'
-  }, iconArr.map(function (item) {
-    var font_class = item.font_class,
-      name = item.name;
-    var fontName = "icon-".concat(font_class);
-    return /*#__PURE__*/React.createElement("li", {
-      className: 'demo-li'
-    }, /*#__PURE__*/React.createElement(IconFont, {
-      styles: {
-        marginBottom: 20
-      },
-      icon: fontName,
-      size: 32,
-      onIconClick: function onIconClick() {
-        navigator.clipboard.writeText(fontName);
-        message.success("\u590D\u5236".concat(fontName, "\u6210\u529F"));
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "demo-li-name"
-    }, name), /*#__PURE__*/React.createElement("div", {
-      className: "demo-li-name"
-    }, fontName));
-  })));
-};
-export default demo;
--- a/packages/icon/es/demo/index.less
+++ b/packages/icon/es/demo/index.less
@ -1,20 +0,0 @@
-.demo {
-  &-ul {
-    list-style-type: none;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  &-li {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 150px;
-    width: 150px;
-
-    &-name {
-      color: #666;
-      font-size: 12px;
-    }
-  }
-}
--- a/packages/icon/package.json
+++ b/packages/icon/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/icon",
-  "version": "0.2.0",
+  "version": "0.3.0",
  "description": "图标库",
  "keywords": [
    "icon",
--- a/packages/material/CHANGELOG.md
+++ b/packages/material/CHANGELOG.md
@ -1,5 +1,19 @@
 # @zhst/material

+## 0.14.0
+
+### Minor Changes
+
+- fix: 修复适配问题
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/hooks@0.11.0
+  - @zhst/func@0.13.0
+  - @zhst/meta@0.17.0
+  - @zhst/biz@0.19.0
+
 ## 0.13.4

 ### Patch Changes
--- a/packages/material/package.json
+++ b/packages/material/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/material",
-  "version": "0.13.4",
+  "version": "0.14.0",
  "description": "物料库",
  "keywords": [
    "business",
--- a/packages/material/src/algorithmConfig/algorithmConfig.tsx
+++ b/packages/material/src/algorithmConfig/algorithmConfig.tsx
@ -1,17 +1,19 @@
-import React, { forwardRef, ReactNode, useImperativeHandle } from 'react';
+import React, { forwardRef, ReactNode, useContext, useImperativeHandle } from 'react';
 import { Button, Flex, Image } from "antd";
 import theme from 'antd/es/theme'
-import { CropperImage } from '@zhst/meta'
+import { CropperImage, ConfigProvider } from '@zhst/meta'
 import type { CropperImageProps } from '@zhst/meta'
 import { AlgorithmConfigImg, ErrorImage } from '../utils/base64Images'
 import AlgorithmTable from './components/algorithmTable'
 import TimeTemplateTable from './components/timeTemplateTable';
 import { AlgorithmTableProps } from './components/algorithmTable/AlgorithmTable';
 import { TimeTemplateTableProps } from './components/timeTemplateTable/TimeTemplateTable';
+import classNames from 'classnames';
+import './index.less'

 const { useToken } = theme

-const Title = (props: any) => <h2 style={{ margin: '18px 16px', fontSize: '14px', color: 'rgba(0, 0, 0, 0.88)' }} >{props.children}</h2>
+const Title = (props: any) => <h2 style={{ color: 'rgba(0, 0, 0, 0.88)' }} {...props}>{props.children}</h2>

 export interface AlgorithmConfigProps {
  onAddAlgorithm?: () => void
@ -65,11 +67,14 @@ export interface AlgorithmConfigProps {
   * 自定义批量中间文案
   */
  customBatchCenterContent: ReactNode
+  prefixCls?: string;
 }

 export interface AlgorithmConfigRef {
 }

+const { ConfigContext } = ConfigProvider
+
 const AlgorithmConfig = forwardRef<AlgorithmConfigRef, AlgorithmConfigProps>((props, ref) => {
  const {
    algorithmTableDataSource = [],
@ -87,7 +92,11 @@ const AlgorithmConfig = forwardRef<AlgorithmConfigRef, AlgorithmConfigProps>((pr
    onLoadMoreButtonClick,
    customBatchCenterContent,
    customLoadMoreButton,
+    prefixCls: customizePrefixCls
  } = props
+  const { getPrefixCls } = useContext(ConfigContext);
+  const componentName = getPrefixCls('material-algo', customizePrefixCls);
+
  const { token } = useToken()
  // @ts-ignore
  const { type: cropType } = cropperImageProps
@ -96,10 +105,10 @@ const AlgorithmConfig = forwardRef<AlgorithmConfigRef, AlgorithmConfigProps>((pr
  }))

  return (
-    <Flex style={{ border: `1px solid ${token.colorBorder}`, backgroundColor: token.colorBgBase }}>
-      <div title={title} style={{ position: 'relative', width: '13.9%' }}>
-        <Title>{title}</Title>
-        <div style={{ paddingBottom: '36px', height: '612px', overflowY: 'scroll', boxSizing: "border-box", borderTop: `1px solid ${token.colorBorder}` }}>
+    <Flex className={componentName} style={{ border: `1px solid ${token.colorBorder}`, backgroundColor: token.colorBgBase }}>
+      <div className={classNames(`${componentName}-left`)} title={title} style={{ position: 'relative', width: '13.9%' }}>
+        <Title className={classNames(`${componentName}-title`)}>{title}</Title>
+        <div className={classNames(`${componentName}-left-list`)} style={{ borderTop: `1px solid ${token.colorBorder}` }}>
          {boxList.map(item => {
            return (
              <p
@ -146,7 +155,7 @@ const AlgorithmConfig = forwardRef<AlgorithmConfigRef, AlgorithmConfigProps>((pr
              {...cropperImageProps}
            />
          ) : (
-            <div style={{ padding: '84px' }}>
+            <div className={classNames(`${componentName}-middle-cont`)}>
              <Image
                width={'62.5%'}
                src={AlgorithmConfigImg}
@ -168,7 +177,7 @@ const AlgorithmConfig = forwardRef<AlgorithmConfigRef, AlgorithmConfigProps>((pr
      </div>
      <div style={{ width: '39.8%' }} >
        <div>
-          <Title>时间模板</Title>
+          <Title className={classNames(`${componentName}-title`)}>时间模板</Title>
          <div style={{ padding: `${token.paddingMD}px ${token.paddingSM}px`, borderTop: `1px solid ${token.colorBorder}`, borderBottom: `1px solid ${token.colorBorder}` }}>
            <TimeTemplateTable
              dataSource={timeTemplateDataSource}
@ -177,7 +186,7 @@ const AlgorithmConfig = forwardRef<AlgorithmConfigRef, AlgorithmConfigProps>((pr
          </div>
        </div>
        <div>
-          <Title>算法应用</Title>
+          <Title className={classNames(`${componentName}-title`)}>算法应用</Title>
          <div style={{ padding: `${token.paddingMD}px ${token.paddingSM}px`, borderTop: `1px solid ${token.colorBorder}` }}>
            <AlgorithmTable
              dataSource={algorithmTableDataSource}
--- a/packages/material/src/algorithmConfig/components/algorithmTable/AlgorithmTable.tsx
+++ b/packages/material/src/algorithmConfig/components/algorithmTable/AlgorithmTable.tsx
@ -1,16 +1,20 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { DeleteFilled, EditFilled, ImportOutlined, PlusCircleFilled } from '@ant-design/icons';
 import type { ParamsType, ProColumns, ProTableProps } from '@ant-design/pro-components';
 import {
  ProTable,
 } from '@ant-design/pro-components';
 import { Popconfirm, Select, Space, Switch } from 'antd';
+import { ConfigProvider } from '@zhst/meta'
 import theme from 'antd/es/theme'
 import { AnyObject } from 'antd/es/_util/type';
 import { SelectProps } from 'antd/lib';
 import SchemaFormModal from '../schemaFormModal';
+import classNames from 'classnames';
+import './index.less'

 const { useToken } = theme
+const { ConfigContext } = ConfigProvider

 export interface AlgorithmTableProps<DataSource, Params extends ParamsType = ParamsType, ValueType = "text"> extends ProTableProps<DataSource, Params, ValueType> {
  onAddAlgorithm?: (id?: string, record?: any) => void
@ -40,7 +44,11 @@ const AlgorithmTable= <DataSource extends AnyObject = AnyObject>(
    onDraw,
    tableType = 'multiple',
    sortList = [],
+    prefixCls: customizePrefixCls
  } = props
+  const { getPrefixCls } = useContext(ConfigContext);
+  const componentName = getPrefixCls('material-algo-algoTable', customizePrefixCls);
+

  const { token } = useToken()

@ -53,7 +61,6 @@ const AlgorithmTable= <DataSource extends AnyObject = AnyObject>(
      title: '运行周期',
      dataIndex: 'runCycle',
      valueType: 'select',
-      width: 80,
      valueEnum: {
        1: { text: '黑夜' },
        0: { text: '白天' },
@ -67,7 +74,8 @@ const AlgorithmTable= <DataSource extends AnyObject = AnyObject>(
      title: '操作',
      key: 'option',
      valueType: 'option',
-      fixed: true,
+      fixed: 'right',
+      width: '120px',
      render: (_DOM, record) => [
        <Switch value={record.status} onChange={_status => onItemSwitch?.(_status, record.id, record)} />,
        <a onClick={() => onDraw?.(record.id, record)} style={{ display: tableType === 'single' ? 'block' : 'none' }} href="#"><ImportOutlined /></a>,
@ -88,15 +96,15 @@ const AlgorithmTable= <DataSource extends AnyObject = AnyObject>(
  ];

  return (
-    <div>
-      <Space size={16} style={{ marginBottom: '12px' }}>
+    <div className={componentName}>
+      <Space className={classNames(`${componentName}-top`)} size={16}>
        <Select
+          className={classNames(`${componentName}-top-select`)}
          value={selectedKey}
-          style={{ width: 320 }}
          onChange={onSortSelect}
          options={sortList}
        />
-        <PlusCircleFilled onClick={() => onAddAlgorithm?.(selectedKey)} style={{ fontSize: '24px', color: token.colorPrimary, cursor: 'pointer' }} />
+        <PlusCircleFilled className={classNames(`${componentName}-top-plus`)} onClick={() => onAddAlgorithm?.(selectedKey)} style={{ color: token.colorPrimary, cursor: 'pointer' }} />
      </Space>
      <ProTable<DataSource>
        columns={columns}
--- a/packages/material/src/algorithmConfig/components/algorithmTable/index.less
+++ b/packages/material/src/algorithmConfig/components/algorithmTable/index.less
@ -0,0 +1,13 @@
+.zhst-material-algo-algoTable {
+  &-top {
+    margin-bottom: 12px;
+
+    &-select {
+      width: 320px;
+    }
+
+    &-plus {
+      font-size: 24px;
+    }
+  }
+}
--- a/packages/material/src/algorithmConfig/index.less
+++ b/packages/material/src/algorithmConfig/index.less
@ -0,0 +1,21 @@
+.zhst-material-algo {
+  &-title {
+    margin: 18px 16px;
+    font-size: 14px;
+  }
+
+  &-left {
+    &-list {
+      padding-bottom: 36px;
+      max-height: 612px;
+      overflow-y: scroll;
+      box-sizing: 'border-box';
+    }
+  }
+
+  &-middle {
+    &-cont {
+      padding: 84px;
+    }
+  }
+}
--- a/packages/meta/CHANGELOG.md
+++ b/packages/meta/CHANGELOG.md
@ -1,5 +1,19 @@
 # @zhst/utils

+## 0.17.0
+
+### Minor Changes
+
+- fix: 修复适配问题
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/hooks@0.11.0
+  - @zhst/func@0.13.0
+  - @zhst/icon@0.3.0
+  - @zhst/meta@0.17.0
+
 ## 0.16.4

 ### Patch Changes
--- a/packages/meta/es/CompareImage/CompareImage.js
+++ b/packages/meta/es/CompareImage/CompareImage.js
@ -101,8 +101,7 @@ var CompareImage = /*#__PURE__*/forwardRef(function (props, ref) {
    type: "primary",
    shape: "circle",
    style: {
-      width: '56px',
-      height: '56px'
+      width: '56px'
    },
    icon: /*#__PURE__*/React.createElement(IconFont, {
      icon: "icon-qiehuanzuo",
@ -116,8 +115,7 @@ var CompareImage = /*#__PURE__*/forwardRef(function (props, ref) {
    type: "primary",
    shape: "circle",
    style: {
-      width: '56px',
-      height: '56px'
+      width: '56px'
    },
    icon: /*#__PURE__*/React.createElement(IconFont, {
      icon: "icon-qiehuanyou",
--- a/packages/meta/es/CompareImage/index.less
+++ b/packages/meta/es/CompareImage/index.less
@ -123,6 +123,8 @@
    box-sizing: border-box;

    &__btn {
+      width: 56px;
+      height: 56px;
      opacity: 0.4;
      pointer-events: all;

--- a/packages/meta/package.json
+++ b/packages/meta/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/meta",
-  "version": "0.16.4",
+  "version": "0.17.0",
  "description": "原子组件",
  "keywords": [
    "meta",
--- a/packages/meta/src/CompareImage/CompareImage.tsx
+++ b/packages/meta/src/CompareImage/CompareImage.tsx
@ -118,7 +118,7 @@ const CompareImage = forwardRef<CompareImageRefProps, CompareImageProps>((props,
            onClick={onPre}
            type='primary'
            shape='circle'
-            style={{ width: '56px', height: '56px' }}
+            style={{ width: '56px' }}
            icon={<IconFont icon="icon-qiehuanzuo" size={32} color='#fff' />}
          >

@ -129,7 +129,7 @@ const CompareImage = forwardRef<CompareImageRefProps, CompareImageProps>((props,
            onClick={onNext}
            type='primary'
            shape='circle'
-            style={{ width: '56px', height: '56px' }}
+            style={{ width: '56px' }}
            icon={<IconFont icon="icon-qiehuanyou" size={32} color='#fff' />}
          />
        </div>
--- a/packages/meta/src/CompareImage/index.less
+++ b/packages/meta/src/CompareImage/index.less
@ -123,6 +123,8 @@
    box-sizing: border-box;

    &__btn {
+      width: 56px;
+      height: 56px;
      opacity: 0.4;
      pointer-events: all;

--- a/packages/request/CHANGELOG.md
+++ b/packages/request/CHANGELOG.md
@ -1,5 +1,16 @@
 # @zhst/request

+## 0.13.0
+
+### Minor Changes
+
+- fix: 修复适配问题
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/func@0.13.0
+
 ## 0.12.4

 ### Patch Changes
--- a/packages/request/es/index.js
+++ b/packages/request/es/index.js
@ -51,7 +51,7 @@ export var reqConfig = function reqConfig(config) {
      // }
      var _ref2 = (response === null || response === void 0 ? void 0 : response.data) || {},
        code = _ref2.code;
-      if ([403, 401].includes(code)) {
+      if ([403, 401, 203].includes(code)) {
        message.error('登录过期，请重新登录');
        onError === null || onError === void 0 || onError(response === null || response === void 0 ? void 0 : response.data);
        return {};
--- a/packages/request/lib/index.js
+++ b/packages/request/lib/index.js
@ -71,7 +71,7 @@ var reqConfig = (config) => {
        (response) => {
          var _a;
          const { code } = (response == null ? void 0 : response.data) || {};
-          if ([403, 401].includes(code)) {
+          if ([403, 401, 203].includes(code)) {
            import_antd.message.error("登录过期，请重新登录");
            onError == null ? void 0 : onError(response == null ? void 0 : response.data);
            return {};
--- a/packages/request/package.json
+++ b/packages/request/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/request",
-  "version": "0.12.4",
+  "version": "0.13.0",
  "description": "请求库",
  "keywords": [
    "request",
--- a/packages/request/src/code.ts
+++ b/packages/request/src/code.ts
@ -1,3 +1,4 @@
+// @ts-nocheck
 enum CommonErrCode {
    UNKNOW_ERROR         = 0,   // 未知错误, proto编译必须定义，禁止使用此值
    STATUS_OK            = 200, // 正常, 目前只是为了展示警告信息，配合errLevel使用
--- a/packages/slave/CHANGELOG.md
+++ b/packages/slave/CHANGELOG.md
@ -1,5 +1,16 @@
 # @zhst/slave

+## 0.8.0
+
+### Minor Changes
+
+- fix: 修复适配问题
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/func@0.13.0
+
 ## 0.7.4

 ### Patch Changes
--- a/packages/slave/package.json
+++ b/packages/slave/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/slave",
-  "version": "0.7.4",
+  "version": "0.8.0",
  "description": "微前端子应用方法库",
  "keywords": [
    "slave",