Dev

config/config.ts

@@ -47,4 +47,5 @@ export default defineConfig({
   },
   // Fast Refresh 热更新
   fastRefresh: {},
+  extraBabelPlugins: ['react-activation/babel'],
 });

config/settings.ts

@@ -10,6 +10,8 @@ export type ProjectSetting = LayoutSettings & {
   defaultLocal: 'zh-CN' | 'en-US';
   // 是否展示水印
   waterMark: boolean;
+  // 是否展示顶部多页签
+  multiTab: boolean;
   storageOptions: {
     // 缓存key 前缀
     namespace: string;
@@ -33,6 +35,7 @@ const Settings: ProjectSetting = {
   historyType: 'hash',
   defaultLocal: 'zh-CN',
   waterMark: true,
+  multiTab: true,
   storageOptions: {
     namespace: 'ballcat/',
     storage: 'local',

package.json

@@ -49,6 +49,7 @@
     "moment": "^2.25.3",
     "omit.js": "^2.0.2",
     "react": "^17.0.0",
+    "react-activation": "^0.9.4",
     "react-color": "2.19.3",
     "react-cropper": "2.1.8",
     "react-dev-inspector": "^1.1.1",

src/components/Editor/WangEditor.tsx

@@ -24,7 +24,16 @@ export default ({
   );
 
   useEffect(() => {
-    const we = new WangEditor(`#wang-editor-dom`);
+    let we: WangEditor;
+
+    try {
+      we = new WangEditor(`#wang-editor-dom`);
+    } catch (e) {
+      // 组件缓存时. 从有这个组件的页面切换出去会导致这里不停的报错. 找不到 wang-editor-dom Dom.
+      // 这里捕获异常就不管了.  切换回来这个组件会重新渲染
+      return () => {};
+    }
+
     setEditor(we);
     we.config.onchange = (val: string) => update(val);
 

src/components/Form/FullForm.tsx

@@ -5,15 +5,9 @@ import ProForm from '@ant-design/pro-form';
 import type { R } from '@/typings';
 import I18n from '@/utils/I18nUtils';
 import type { FullFormProps } from '.';
+import { defautlTitle } from '.';
 import { Button, Card } from 'antd';
 
-export const defautlTitle = {
-  read: I18n.text('form.read'),
-  edit: I18n.text('form.edit'),
-  create: I18n.text('form.create'),
-  del: I18n.text('form.del'),
-};
-
 const FullForm = <E, P = E>(props: FullFormProps<E, P>) => {
   const {
     formRef: currencyRef,
@@ -65,7 +59,7 @@ const FullForm = <E, P = E>(props: FullFormProps<E, P>) => {
     req?: (body: P) => Promise<R<any>>,
   ) => {
     if (req === undefined) {
-      I18n.error({ key: 'orm.error.request', params: { title: defautlTitle[st] } });
+      I18n.error({ key: 'form.error.request', params: { title: defautlTitle[st] } });
       return Promise.resolve(false);
     }
     setLoading(true);
@@ -121,10 +115,10 @@ const FullForm = <E, P = E>(props: FullFormProps<E, P>) => {
             ];
           },
         }}
-        {...antProps}
         layout="horizontal"
         labelCol={labelCol || { sm: { span: 24 }, md: { span: 4 } }}
         wrapperCol={wrapperCol}
+        {...antProps}
         formRef={formRef}
         onFinish={async (values) => {
           switch (status) {

src/components/Form/ModalForm.tsx

@@ -4,13 +4,7 @@ import type { ProFormInstance } from '@ant-design/pro-form';
 import { ModalForm as AntdModalForm } from '@ant-design/pro-form';
 import type { R } from '@/typings';
 import I18n from '@/utils/I18nUtils';
-
-export const defautlTitle = {
-  read: I18n.text('form.read'),
-  edit: I18n.text('form.edit'),
-  create: I18n.text('form.create'),
-  del: I18n.text('form.del'),
-};
+import { defautlTitle } from '.';
 
 const ModalForm = <E, P = E>(props: ModalFormProps<E, P>) => {
   const {
@@ -45,7 +39,7 @@ const ModalForm = <E, P = E>(props: ModalFormProps<E, P>) => {
     req?: (body: P) => Promise<R<any>>,
   ) => {
     if (req === undefined) {
-      I18n.error({ key: 'orm.error.request', params: { title: defautlTitle[st] } });
+      I18n.error({ key: 'form.error.request', params: { title: defautlTitle[st] } });
       return Promise.resolve(false);
     }
 
@@ -95,13 +89,13 @@ const ModalForm = <E, P = E>(props: ModalFormProps<E, P>) => {
 
   return (
     <AntdModalForm<E>
-      {...antProps}
       width={width}
       layout="horizontal"
       labelCol={labelCol || { sm: { span: 24 }, md: { span: 4 } }}
       wrapperCol={wrapperCol}
-      formRef={formRef}
       title={modalTitle}
+      {...antProps}
+      formRef={formRef}
       visible={visible}
       onVisibleChange={setVisible}
       onFinish={async (values) => {

src/components/Form/index.ts

@@ -4,6 +4,7 @@ import FormDictSelect from './dict/FormDictSelect';
 import FormNumber from './FormNumber';
 import FormGroup from './FormGroup';
 import FormDictCheckbox from './dict/FormDictCheckbox';
+import I18n from '@/utils/I18nUtils';
 
 export * from './typings';
 
@@ -18,4 +19,10 @@ const Form = {
 
 export default Form;
 
-export { ModalForm, FormDictRadio, FormDictSelect, FormNumber };
+const defautlTitle = {
+  read: I18n.text('form.read'),
+  edit: I18n.text('form.edit'),
+  create: I18n.text('form.create'),
+  del: I18n.text('form.del'),
+};
+export { ModalForm, FormDictRadio, FormDictSelect, FormNumber, defautlTitle };

src/components/Inline/index.tsx

@@ -1,5 +1,4 @@
 import { Component } from 'react';
-import './index.less';
 import type { Route } from '@ant-design/pro-layout/lib/typings';
 
 export type InlineMeta = {
@@ -25,7 +24,12 @@ class Inline extends Component<InlineProps, InlineState> {
   render() {
     const { meta } = this.state;
 
-    return <iframe className="iframe" src={meta.uri} />;
+    return (
+      <iframe
+        style={{ boxSizing: 'border-box', height: '100%', width: '100%', border: '0' }}
+        src={meta.uri}
+      />
+    );
   }
 }
 

src/components/Lov/Lov.tsx

@@ -16,8 +16,8 @@ for (let i = 0; i < keys.length; i += 1) {
 }
 
 const Lov: React.FC<LovProps> = (props) => {
-  const config = cache[props.keyword];
-  const { value, onChange } = props;
+  const { value, onChange, keyword, overwriteConfig } = props;
+  const config = { ...cache[keyword], ...overwriteConfig };
   const [show, setShow] = useState<boolean>(false);
   const [lovValue, setLovValue] = useState<any>();
   const [modalKey, setModalKey] = useState<number>(1);

src/components/Lov/LovModal.tsx

@@ -108,7 +108,8 @@ function getRet(row: any, config: LovConfig<any>) {
 const LovModal: React.FC<LovModalProps & LovConfig<any> & ModalProps> = (props) => {
   const config: LovConfig<any> = props;
 
-  const { value, setValue, title, show, setShow, modalStyle, modalProperties } = props;
+  const { value, setValue, title, show, setShow, modalStyle, modalProperties, dynamicParams } =
+    props;
 
   const tableRef = useRef<ActionType>();
 
@@ -257,7 +258,7 @@ const LovModal: React.FC<LovModalProps & LovConfig<any> & ModalProps> = (props)
             method: config.method,
             sendMessage: false,
           };
-          option[config.position.toLowerCase()] = { ...p, ...config.fixedParams };
+          option[config.position.toLowerCase()] = { ...p, ...config.fixedParams, ...dynamicParams };
 
           return request<R<PageResult<any>>>(config.url, option);
         }}

src/components/Lov/typing.ts

@@ -2,6 +2,8 @@ import type React from 'react';
 
 export type LovProps = {
   keyword: string;
+  // 覆写配置
+  overwriteConfig?: Partial<LovConfig<any>>;
 } & LovModalProps;
 
 export type LovConfig<T> = {
@@ -17,7 +19,7 @@ export type LovConfig<T> = {
   method: 'GET' | 'POST' | 'HEAD' | 'PUT' | 'PATCH' | 'DELETE' | 'OPTIONS' | 'TRACE';
   // 参数位置
   position: 'DATA' | 'PARAMS';
-  // 固定请求参数
+  // 固定请求参数, 该参数值会覆盖搜索栏中同名的参数值
   fixedParams?: Record<string, any>;
   // 是否多选
   multiple: boolean;
@@ -72,4 +74,6 @@ export type LovModalProps = {
   value?: any;
   // 参数为新值
   onChange?: (val: any) => void;
+  // 动态参数. 该参数值会覆盖 固定参数以及搜索栏中同名的参数值
+  dynamicParams?: Record<string, any>;
 };

src/components/MultiTab/index.less

@@ -0,0 +1,93 @@
+@import '~antd/es/style/themes/default.less';
+
+@multi-tab-prefix-cls: ballcat-multi-tab;
+
+.@{multi-tab-prefix-cls} {
+  position: relative;
+  z-index: 16;
+  height: 40px;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+  &-fixed {
+    top: 48px;
+  }
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav {
+  margin: 0;
+  border-bottom: none;
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab {
+  height: 40px;
+  margin: 0;
+  padding: 0;
+  line-height: 40px;
+  background: none;
+  border: none;
+  border-radius: 0;
+  transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+    color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab-next,
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab-prev {
+  width: 40px;
+  line-height: 1;
+  opacity: 1;
+  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+    opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  pointer-events: auto;
+
+  .anticon {
+    font-size: 14px;
+  }
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap {
+  height: auto;
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab > div {
+  padding: 0 0 0 16px;
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab-active {
+  background: rgba(24, 144, 255, 0.08);
+}
+
+.@{multi-tab-prefix-cls}
+  .ant-tabs
+  .ant-tabs-nav
+  .ant-tabs-nav-wrap
+  .ant-tabs-tab
+  > div.ant-tabs-tab-unclosable {
+  padding-right: 16px;
+}
+
+.@{multi-tab-prefix-cls}
+  .ant-tabs
+  .ant-tabs-nav
+  .ant-tabs-nav-wrap
+  .ant-tabs-tab
+  .ant-tabs-tab-remove {
+  height: 40px;
+  margin: -4px 0 0 0;
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .multi-tab-drop {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  cursor: pointer;
+
+  .anticon {
+    font-size: 14px;
+  }
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs-nav-operations .ant-tabs-nav-more {
+  cursor: pointer;
+}