From aa4abc0d21cde175d6d3e8232241d6db2a3a6382 Mon Sep 17 00:00:00 2001 From: zhangjiming Date: Mon, 3 Mar 2025 17:40:21 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 13 +++-------- src/assets/menu/icon_measure.svg | 1 + src/components/Menu.tsx | 3 --- src/components/SideMenu.scss | 29 +++++++++++++++++++++++++ src/components/SideMenu.tsx | 47 ++++++++++++++++++++++++++++++++++++++++ src/index.css | 18 ++++++++------- src/pages/home/Home.module.scss | 3 --- src/pages/home/Home.scss | 3 +++ src/pages/home/Home.tsx | 2 +- src/styles/variables.scss | 0 tailwind.config.js | 2 +- 11 files changed, 95 insertions(+), 26 deletions(-) create mode 100644 src/assets/menu/icon_measure.svg delete mode 100644 src/components/Menu.tsx create mode 100644 src/components/SideMenu.scss create mode 100644 src/components/SideMenu.tsx delete mode 100644 src/pages/home/Home.module.scss create mode 100644 src/pages/home/Home.scss delete mode 100644 src/styles/variables.scss diff --git a/src/App.tsx b/src/App.tsx index 51e3038..0d8b651 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,7 @@ import { Outlet } from "react-router"; import { Layout } from "antd"; import { default as AppHeader} from "./components/Header"; import { default as AppFooter} from "./components/Footer"; -import Menu from "./components/Menu"; +import SideMenu from "./components/SideMenu"; const { Header, Footer, Sider, Content } = Layout; @@ -27,13 +27,6 @@ function App() { backgroundColor: "#0958d9", }; - const siderStyle: React.CSSProperties = { - textAlign: "center", - lineHeight: "100vh", - color: "#fff", - backgroundColor: "#3165D2", - }; - const footerStyle: React.CSSProperties = { textAlign: "center", color: "#fff", @@ -46,8 +39,8 @@ function App() { return (
- - + +
diff --git a/src/assets/menu/icon_measure.svg b/src/assets/menu/icon_measure.svg new file mode 100644 index 0000000..df5ae77 --- /dev/null +++ b/src/assets/menu/icon_measure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx deleted file mode 100644 index da72563..0000000 --- a/src/components/Menu.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Menu() { - return
Menu
-} \ No newline at end of file diff --git a/src/components/SideMenu.scss b/src/components/SideMenu.scss new file mode 100644 index 0000000..a9a85b1 --- /dev/null +++ b/src/components/SideMenu.scss @@ -0,0 +1,29 @@ +.side-menu { + .ant-menu-submenu-title { + color: #fff; + + img { + width: 16px; + } + .ant-menu-title-content { + color: #fff; + } + } + .ant-menu-submenu-selected { + background-color: #3458bc; + } + .ant-menu-item { + margin-inline: 0; + border-radius: 0; + } + .ant-menu-item-selected { + width: 100%; + } + + .ant-menu-item { + color: #fff; + } + .ant-menu-item-selected { + color: var(--primaryColor); + } +} diff --git a/src/components/SideMenu.tsx b/src/components/SideMenu.tsx new file mode 100644 index 0000000..4cc4d4d --- /dev/null +++ b/src/components/SideMenu.tsx @@ -0,0 +1,47 @@ +import type { MenuProps } from "antd"; +import { Menu } from "antd"; +import icon_logo from "../assets/icon_logo.svg"; +import icon_measure from "../assets/menu/icon_measure.svg"; + +import "./SideMenu.scss"; + +type MenuItem = Required["items"][number]; + +const items: MenuItem[] = [ + { + key: "sub1", + label: "测量", + icon: , + children: [ + { + key: "g1", + label: "新测量", + }, + { + key: "g2", + label: "测量记录", + }, + ], + }, +]; + +export default function SideMenu() { + const onClick: MenuProps["onClick"] = e => { + console.log("click ", e); + }; + return ( +
+ + +

V1.0

+
+ ); +} diff --git a/src/index.css b/src/index.css index 17df0e7..e53e993 100644 --- a/src/index.css +++ b/src/index.css @@ -3,15 +3,17 @@ @tailwind utilities; body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + "Droid Sans", "Helvetica Neue", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; +} + +:root { + --primaryColor: #3e63cb; } diff --git a/src/pages/home/Home.module.scss b/src/pages/home/Home.module.scss deleted file mode 100644 index 4ee680e..0000000 --- a/src/pages/home/Home.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.home { - color: red; -} \ No newline at end of file diff --git a/src/pages/home/Home.scss b/src/pages/home/Home.scss new file mode 100644 index 0000000..4ee680e --- /dev/null +++ b/src/pages/home/Home.scss @@ -0,0 +1,3 @@ +.home { + color: red; +} \ No newline at end of file diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index fcae07f..9eb977f 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -1,4 +1,4 @@ -import "./Home.module.scss"; +import "./Home.scss"; export default function Home() { return ( diff --git a/src/styles/variables.scss b/src/styles/variables.scss deleted file mode 100644 index e69de29..0000000 diff --git a/tailwind.config.js b/tailwind.config.js index f005ec6..0d6640b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,7 +3,7 @@ module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { colors: { - primary: "#3165D2", + primary: "#3e63cb", white: "#FFF", title: "#646566", text: "#333",