update 处理一些样式问题

2021-07-02 14:11:48 +08:00
parent 4053d6ff0a
commit 717c264518
7 changed files with 106 additions and 56 deletions
--- a/web-react/src/assets/style/dark/lib/card.less
+++ b/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;
+  }
+}
--- a/web-react/src/assets/style/dark/lib/table.less
+++ b/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 {
-              padding: @padding-sm @padding-xs @padding-sm @padding-xl;
-
-              border-right: @border-width-base @border-style-base @table-border-color  !important;
-              .ant-card {
-                max-width: fit-content;
-                margin-bottom: 0;
-
-                background: none;
-                .ant-card-grid {
-                  width: 300px;
-                  padding: @padding-xs @padding-sm;
-
-                  background-color: @card-background;
+            .ant-table-tbody {
+              >tr {
+                &:last-child {
+                  >td {
+                    border-bottom: @border-width-base @border-style-base @table-border-color;
+                  }
+                  &:hover {
+                    >td {
+                      border-bottom-color: lighten(@primary-color, 30%);
+                    }
+                  }
                }
              }
            }
@@ -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;
+    }
+  }
 }
--- a/web-react/src/assets/style/dark/public.less
+++ b/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;
  }
--- a/web-react/src/assets/style/default/lib/table.less
+++ b/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 {
-              padding: @padding-sm @padding-xs @padding-sm @padding-xl;
-
-              border-right: @border-width-base @border-style-base @table-border-color !important;
-              .ant-card {
-                max-width: fit-content;
-                margin-bottom: 0;
-
-                background: none;
-                .ant-card-grid {
-                  width: 300px;
-                  padding: @padding-xs @padding-sm;
-
-                  background-color: @card-background;
+            .ant-table-tbody {
+              >tr {
+                &:last-child {
+                  >td {
+                    border-bottom: @border-width-base @border-style-base @table-border-color;
+                  }
+                  &:hover {
+                    >td {
+                      border-bottom-color: lighten(@primary-color, 30%);
+                    }
+                  }
                }
              }
            }
@@ -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;
+    }
+  }
 }
--- a/web-react/src/index.js
+++ b/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(
-  <ConfigProvider
-    locale={zhCN}
-    renderEmpty={
-      () => (
-        <div className="text-center pt-md">
-          <AntIcon className="h3 mb-md" type="smile" />
-          <p>暂无数据</p>
-        </div>
-      )
-    }
-  >
-    <Router />
-  </ConfigProvider>,
-  root
-);
+imp.then(() => {
+  ReactDOM.render(
+    <ConfigProvider
+      locale={zhCN}
+      renderEmpty={
+        () => (
+          <div className="text-center pt-md">
+            <AntIcon className="h3 mb-md" type="smile" />
+            <p>暂无数据</p>
+          </div>
+        )
+      }
+    >
+      <Router />
+    </ConfigProvider>,
+    root
+  );

-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+  // If you want to start measuring performance in your app, pass a function
+  // to log results (for example: reportWebVitals(console.log))
+  // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+  reportWebVitals();
+})
--- a/web-react/src/pages/system/dict/dictdata/form.jsx
+++ b/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,
                            }}