fix & style: tailwind css conflict and UI problem & clean some codes (#…

…4416) * feat: Replaced mobx with zustand * fix: displayed wrong time and info * fix: The content of badge overflow * style: Collected theme and added dumpKubeObject function * feat: Ingress & Secret resource * fix: errors in using next build * feat: Events overview and new UI components * feat: kubeconfig parser * feat: KubePanel v1.0.0 * fix: merge conflict * fix: Add clear logo and icon * fix: Fixed Sider * feat: Auto deploy * fix: Wrong margin-left in Content due to fixed style Sider * fix: tailwind css conflict with antd * style: clean codes
labring · Dec 15, 2023 · 37709ce · 37709ce
1 parent 6f3852f
commit 37709ce
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 75 deletions.
diff --git a/frontend/plugins/kubepanel/src/pages/_document.tsx b/frontend/plugins/kubepanel/src/pages/_document.tsx
@@ -12,7 +12,10 @@ export default function Document() {
         <meta name="description" content="sealos cloud" />
         <meta name="format-detection" content="telephone=no" />
       </Head>
-      <body>
+      {/* fix: tailwind css conflict with antd
+       * @link https://github.com/ant-design/ant-design/issues/38794#issuecomment-1345475630
+       */}
+      <body id="app">
         <Main />
         <NextScript />
       </body>

diff --git a/frontend/plugins/kubepanel/src/pages/kubepanel/components/layout.tsx b/frontend/plugins/kubepanel/src/pages/kubepanel/components/layout.tsx
@@ -1,36 +1,49 @@
 import { ConfigProvider, Layout } from 'antd';
 import ResourceSideNav, { SideNavItemKey } from './sidebar/sidebar';
 import { theme } from '@/constants/theme';
+import { useCallback, useState } from 'react';
+import { CollapseType } from 'antd/es/layout/Sider';
 
-const { Header, Footer, Sider, Content } = Layout;
+const { Sider, Content } = Layout;
 
 interface Props {
   children: React.ReactNode;
   onClickSideNavItem?: (key: SideNavItemKey) => void;
 }
 
+type CollapseCallback = (collapsed: boolean, type: CollapseType) => void;
+
+const siderWidth = 256;
+const collapsedWidth = 0;
+
 export default function AppLayout({ children, onClickSideNavItem }: Props) {
+  const [contentMargin, setContentMargin] = useState(siderWidth);
+
+  const onCollapse = useCallback<CollapseCallback>((collapsed, _) => {
+    setContentMargin(collapsed ? collapsedWidth : siderWidth);
+  }, []);
+
   return (
     <ConfigProvider theme={theme}>
       <Layout>
         <Sider
           style={{
-            overflow: 'auto',
             height: '100vh',
             backgroundColor: '#F2F2F4',
             position: 'fixed',
             left: 0,
             top: 0,
             bottom: 0
           }}
-          width={256}
+          width={siderWidth}
           theme="light"
+          onCollapse={onCollapse}
           breakpoint="lg"
-          collapsedWidth="0"
+          collapsedWidth={collapsedWidth}
         >
           <ResourceSideNav onClick={onClickSideNavItem} />
         </Sider>
-        <Layout style={{ marginLeft: 256 }}>
+        <Layout style={{ marginLeft: contentMargin }}>
           <Content style={{ backgroundColor: '#F2F2F4' }}>{children}</Content>
         </Layout>
       </Layout>

diff --git a/frontend/plugins/kubepanel/src/services/backend/kubernetes.ts b/frontend/plugins/kubepanel/src/services/backend/kubernetes.ts
diff --git a/frontend/plugins/kubepanel/src/styles/globals.css b/frontend/plugins/kubepanel/src/styles/globals.css
@@ -1,3 +1,23 @@
+/**
+*   fix: tailwind css conflict with antd
+*   @link https://github.com/ant-design/ant-design/issues/38794#issuecomment-1345475630
+*/
+@import 'antd/dist/reset.css';
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
diff --git a/frontend/plugins/kubepanel/tailwind.config.js b/frontend/plugins/kubepanel/tailwind.config.js
@@ -1,6 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  /**
+   * fix: tailwind css conflict with antd
+   * @link https://github.com/ant-design/ant-design/issues/38794#issuecomment-1345475630
+   */
+  corePlugins: {
+    preflight: false
+  },
+  important: '#app',
   theme: {
     extend: {
       colors: {