refactor: index.css 抽取不同模块

packages/app/src/index.tsx

@@ -1,11 +1,9 @@
 import '@styles/index.css';
-import '@styles/iconfont.css';
 import '@icon-park/react/styles/index.css';
 import {RootRoutes} from '@routes';
 import {createRoot} from 'react-dom/client';
 import {BrowserRouter} from 'react-router-dom';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
-import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
 import {StrictMode, Suspense} from 'react';
 import {ConfigProvider} from 'antd';
 import {ThemeConfig} from 'antd/es/config-provider/context';

packages/app/src/styles/antd.css

@@ -0,0 +1,113 @@
+/* antd ui调整 */
+.ant-card-title-reset {
+  & .ant-card-head-title {
+    font-size: 20px !important;
+    font-weight: normal !important;
+  }
+}
+
+.ant-table-thead th {
+  text-align: center !important;
+}
+
+.ant-table-cell {
+  overflow-wrap: anywhere !important;
+}
+
+.ant-layout-content {
+  overflow: auto;
+}
+
+/* .ant-menu-title-content,
+.ant-menu-submenu .ant-menu-item-icon,
+.ant-menu-item .ant-menu-item-icon {
+  font-size: 16px !important;
+} */
+
+.ant-menu-item,
+.ant-menu-submenu-title {
+  width: 100% !important;
+  margin: 4px 0 !important;
+  border-radius: unset !important;
+}
+
+.ant-menu-item-selected {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 4px;
+    content: '';
+    background: var(--primary-color);
+  }
+}
+
+.table-wrapper .ant-pagination-total-text {
+  margin-right: auto;
+}
+
+.ant-tabs-tabpane {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block !important;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+
+.ant-tabs-tabpane-hidden {
+  z-index: -1;
+}
+
+.ant-tabs-tabpane-active {
+  z-index: 999;
+}
+
+/** antd ui增加 */
+.ant-text-btn-color-primary {
+  color: var(--primary-color) !important;
+
+  &:hover {
+    background-color: #ebfafd !important;
+  }
+
+  &:disabled {
+    color: rgb(0 0 0 / 25%) !important;
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+}
+
+.ant-text-btn-color-cyan {
+  color: #13c2c2 !important;
+
+  &:hover {
+    background-color: #e1f5f6 !important;
+  }
+}
+
+.ant-text-btn-color-yellow {
+  color: #ff7500 !important;
+
+  &:hover {
+    background-color: #fdf0e4 !important;
+  }
+}
+
+.ant-btn-color-green {
+  color: white !important;
+  background-color: #0aa344;
+  border-color: #0aa344;
+
+  &:hover {
+    background-color: #4dbe6b !important;
+    border-color: #4dbe6b !important;
+  }
+}

packages/app/src/styles/index.css

@@ -1,5 +1,10 @@
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable selector-class-pattern */
+@import url('./iconfont.css');
+@import url('./antd.css');
+@import url('./recharts.css');
+@import url('./modal.css');
+
 :root {
   --primary-color: #00a6ca;
   --error-color: #ff4d4f;
@@ -96,168 +101,3 @@ img {
   align-items: center;
   justify-content: center;
 }
-
-/** react modal ui调整 */
-
-.ReactModal__Overlay {
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgb(0 0 0 / 60%) !important;
-  opacity: 0;
-  transition: opacity 200ms ease-in-out;
-}
-
-.ReactModal__Content {
-  position: static !important;
-  padding: 0 !important;
-  border-radius: 10px;
-  transition: transform 200ms ease-in-out !important;
-  transform: translateY(30px);
-}
-
-.ReactModal__Overlay--after-open {
-  opacity: 1;
-
-  & .ReactModal__Content {
-    transform: translateY(0);
-  }
-}
-
-.ReactModal__Overlay--before-close {
-  opacity: 0;
-
-  & .ReactModal__Content {
-    transform: translateY(30px);
-  }
-}
-
-/* antd ui调整 */
-.ant-card-title-reset {
-  & .ant-card-head-title {
-    font-size: 20px !important;
-    font-weight: normal !important;
-  }
-}
-
-.ant-table-thead th {
-  text-align: center !important;
-}
-
-.ant-table-cell {
-  overflow-wrap: anywhere !important;
-}
-
-.ant-layout-content {
-  overflow: auto;
-}
-
-/* .ant-menu-title-content,
-.ant-menu-submenu .ant-menu-item-icon,
-.ant-menu-item .ant-menu-item-icon {
-  font-size: 16px !important;
-} */
-
-.ant-menu-item,
-.ant-menu-submenu-title {
-  width: 100% !important;
-  margin: 4px 0 !important;
-  border-radius: unset !important;
-}
-
-.ant-menu-item-selected {
-  position: relative;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 4px;
-    content: '';
-    background: var(--primary-color);
-  }
-}
-
-.table-wrapper .ant-pagination-total-text {
-  margin-right: auto;
-}
-
-.ant-tabs-tabpane {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block !important;
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-}
-
-.ant-tabs-tabpane-hidden {
-  z-index: -1;
-}
-
-.ant-tabs-tabpane-active {
-  z-index: 999;
-}
-
-/** antd ui增加 */
-.ant-text-btn-color-primary {
-  color: var(--primary-color) !important;
-
-  &:hover {
-    background-color: #ebfafd !important;
-  }
-
-  &:disabled {
-    color: rgb(0 0 0 / 25%) !important;
-    cursor: not-allowed;
-
-    &:hover {
-      background-color: transparent !important;
-    }
-  }
-}
-
-.ant-text-btn-color-cyan {
-  color: #13c2c2 !important;
-
-  &:hover {
-    background-color: #e1f5f6 !important;
-  }
-}
-
-.ant-text-btn-color-yellow {
-  color: #ff7500 !important;
-
-  &:hover {
-    background-color: #fdf0e4 !important;
-  }
-}
-
-.ant-btn-color-green {
-  color: white !important;
-  background-color: #0aa344;
-  border-color: #0aa344;
-
-  &:hover {
-    background-color: #4dbe6b !important;
-    border-color: #4dbe6b !important;
-  }
-}
-
-/** rechars ui调整 */
-.recharts-tooltip-cursor {
-  fill: #eee !important;
-}
-
-.recharts-tooltip-item-list {
-  & li {
-    color: white !important;
-  }
-}
-
-.recharts-default-tooltip {
-  color: white;
-}

packages/app/src/styles/modal.css

@@ -0,0 +1,37 @@
+/* stylelint-disable selector-class-pattern */
+
+/** react modal ui调整 */
+
+.ReactModal__Overlay {
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(0 0 0 / 60%) !important;
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}
+
+.ReactModal__Content {
+  position: static !important;
+  padding: 0 !important;
+  border-radius: 10px;
+  transition: transform 200ms ease-in-out !important;
+  transform: translateY(30px);
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+
+  & .ReactModal__Content {
+    transform: translateY(0);
+  }
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+
+  & .ReactModal__Content {
+    transform: translateY(30px);
+  }
+}

packages/app/src/styles/recharts.css

@@ -0,0 +1,14 @@
+/** rechars ui调整 */
+.recharts-tooltip-cursor {
+  fill: #eee !important;
+}
+
+.recharts-tooltip-item-list {
+  & li {
+    color: white !important;
+  }
+}
+
+.recharts-default-tooltip {
+  color: white;
+}