update 处理一些样式问题

web-react/craco.config.js

@@ -29,7 +29,7 @@ module.exports = {
     ],
     webpack: {
         plugins: [
-            //new MonacoWebpackPlugin()
+            new MonacoWebpackPlugin()
         ]
-    }
+    },
 }

web-react/src/assets/style/dark/lib/card.less

@@ -2,3 +2,13 @@
 .ant-card {
   margin-bottom: @padding-md;
 }
+.ant-card-grid-hoverable {
+  &:hover {
+    box-shadow: 1px 0 0 0 #303030,
+    0 1px 0 0 #303030,
+    1px 1px 0 0 #303030,
+    1px 0 0 0 #303030 inset,
+    0 1px 0 0 #303030 inset,
+    @card-shadow;
+  }
+}

web-react/src/assets/style/dark/lib/table.less

@@ -75,6 +75,9 @@
 .ant-table-sticky-scroll {
   display: none;
 }
+.ant-table-expanded-row>td {
+  border-right: @border-width-base @border-style-base @table-border-color  !important;
+}
 .yo-table {
   .ant-table {
     margin: 0 !important;
@@ -196,11 +199,13 @@
       }
     }
     .ant-table-tbody {
-      >.ant-table-expanded-row-level-1>td {
+      >.ant-table-expanded-row>td {
         padding: 0;
 
         border-right: none !important;
         .ant-table-wrapper {
+          margin-bottom: -1px;
+
           border: none;
           .ant-table {
             margin: 0 !important;
@@ -215,20 +220,17 @@
                 padding-left: @padding-md;
               }
             }
-            .ant-table-expanded-row-level-1>td {
+            .ant-table-tbody {
-              padding: @padding-sm @padding-xs @padding-sm @padding-xl;
+              >tr {
-
+                &:last-child {
-              border-right: @border-width-base @border-style-base @table-border-color  !important;
+                  >td {
-              .ant-card {
+                    border-bottom: @border-width-base @border-style-base @table-border-color;
-                max-width: fit-content;
+                  }
-                margin-bottom: 0;
+                  &:hover {
-
+                    >td {
-                background: none;
+                      border-bottom-color: lighten(@primary-color, 30%);
-                .ant-card-grid {
+                    }
-                  width: 300px;
+                  }
-                  padding: @padding-xs @padding-sm;
-
-                  background-color: @card-background;
                 }
               }
             }
@@ -237,4 +239,17 @@
       }
     }
   }
+  .ant-card {
+    max-width: fit-content;
+    margin: @padding-sm @padding-xs @padding-sm @padding-xl;
+
+    background: none;
+    .ant-card-grid {
+      width: 300px;
+      height: 90px;
+      padding: @padding-xs @padding-sm;
+
+      background-color: @card-background;
+    }
+  }
 }

web-react/src/assets/style/dark/public.less

@@ -35,7 +35,7 @@
   }
 }
 a.link-gray {
-  color: fade(@black, 50%);
+  color: fade(@white, 50%);
   &:hover {
     color: @link-hover-color;
   }

web-react/src/assets/style/default/lib/table.less

@@ -75,6 +75,9 @@
 .ant-table-sticky-scroll {
   display: none;
 }
+.ant-table-expanded-row>td {
+  border-right: @border-width-base @border-style-base @table-border-color  !important;
+}
 .yo-table {
   .ant-table {
     margin: 0 !important;
@@ -196,11 +199,13 @@
       }
     }
     .ant-table-tbody {
-      >.ant-table-expanded-row-level-1>td {
+      >.ant-table-expanded-row>td {
         padding: 0;
 
         border-right: none !important;
         .ant-table-wrapper {
+          margin-bottom: -1px;
+
           border: none;
           .ant-table {
             margin: 0 !important;
@@ -215,20 +220,17 @@
                 padding-left: @padding-md;
               }
             }
-            .ant-table-expanded-row-level-1>td {
+            .ant-table-tbody {
-              padding: @padding-sm @padding-xs @padding-sm @padding-xl;
+              >tr {
-
+                &:last-child {
-              border-right: @border-width-base @border-style-base @table-border-color !important;
+                  >td {
-              .ant-card {
+                    border-bottom: @border-width-base @border-style-base @table-border-color;
-                max-width: fit-content;
+                  }
-                margin-bottom: 0;
+                  &:hover {
-
+                    >td {
-                background: none;
+                      border-bottom-color: lighten(@primary-color, 30%);
-                .ant-card-grid {
+                    }
-                  width: 300px;
+                  }
-                  padding: @padding-xs @padding-sm;
-
-                  background-color: @card-background;
                 }
               }
             }
@@ -237,4 +239,17 @@
       }
     }
   }
+  .ant-card {
+    max-width: fit-content;
+    margin: @padding-sm @padding-xs @padding-sm @padding-xl;
+
+    background: none;
+    .ant-card-grid {
+      width: 300px;
+      height: 90px;
+      padding: @padding-xs @padding-sm;
+
+      background-color: @card-background;
+    }
+  }
 }

web-react/src/index.js

@@ -14,10 +14,12 @@ const SETTING = JSON.parse(window.localStorage.getItem(SETTING_KEY)) || {
   theme: 'default'
 };
 
+let imp
+
 if (SETTING.theme === 'dark') {
-  import('./assets/style/dark/index.less')
+  imp = import('./assets/style/dark/index.less')
 } else {
-  import('./assets/style/default/index.less')
+  imp = import('./assets/style/default/index.less')
 }
 
 moment.locale('zh-cn')
@@ -27,24 +29,26 @@ moment.locale('zh-cn')
 const root = document.getElementById('root')
 root.style.opacity = 0
 
-ReactDOM.render(
+imp.then(() => {
-  <ConfigProvider
+  ReactDOM.render(
-    locale={zhCN}
+    <ConfigProvider
-    renderEmpty={
+      locale={zhCN}
-      () => (
+      renderEmpty={
-        <div className="text-center pt-md">
+        () => (
-          <AntIcon className="h3 mb-md" type="smile" />
+          <div className="text-center pt-md">
-          <p>暂无数据</p>
+            <AntIcon className="h3 mb-md" type="smile" />
-        </div>
+            <p>暂无数据</p>
-      )
+          </div>
-    }
+        )
-  >
+      }
-    <Router />
+    >
-  </ConfigProvider>,
+      <Router />
-  root
+    </ConfigProvider>,
-);
+    root
+  );
 
-// If you want to start measuring performance in your app, pass a function
+  // If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
+  // to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+  // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+  reportWebVitals();
+})

web-react/src/pages/system/dict/dictdata/form.jsx

@@ -3,6 +3,9 @@ import { Form, message as Message, Spin } from 'antd'
 import { AntIcon } from 'components'
 import { cloneDeep } from 'lodash'
 import MonacoEditor from 'react-monaco-editor'
+import store from 'store'
+
+const { getState } = store
 
 const initialValues = {}
 
@@ -10,6 +13,7 @@ export default class form extends Component {
     state = {
         // 加载状态
         loading: true,
+        ...getState('layout'),
     }
 
     // 表单实例
@@ -83,6 +87,8 @@ export default class form extends Component {
     //#endregion
 
     render() {
+        const { theme } = this.state
+
         return (
             <Form initialValues={initialValues} ref={this.form} className="yo-form">
                 <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
@@ -90,7 +96,7 @@ export default class form extends Component {
                         <MonacoEditor
                             height={300}
                             language="json"
-                            theme="vs-dark"
+                            theme={theme === 'dark' ? 'vs-dark' : 'default'}
                             options={{
                                 fontSize: 12,
                             }}