Merge branch 'main' of https://github.com/DipperMap/dippermap

DipperMap · Dec 1, 2023 · 7d6e868 · 7d6e868
2 parents efc9924 + b316dce
commit 7d6e868
Show file tree

Hide file tree

Showing 20 changed files with 170 additions and 42 deletions.
diff --git a/src/App.css b/src/App.css
@@ -73,6 +73,35 @@
   align-items: center;
 }
 
+@media (max-width: 767px) {
+  .App-sider {
+    color: #fff;
+    background: #1d2531 !important;
+    overflow: auto;
+    /* height: 100vh; */
+    height: 64px;
+    /* width: 100% !important; */
+    position: fixed !important;
+    left: 0px;
+    top: 0;
+    bottom: 0;
+    z-index: 2;
+  }
+
+  .siderWidth {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+  }
+
+  .retractSiderHeight {
+    height: 300px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+  }
+}
+
 /* @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,27 +2,59 @@ import { Layout } from "antd";
 import "./App.css";
 import { AppCard } from "./components/app-content";
 import { AppSider } from "./components/app-sider";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import classNames from "classnames";
 import { AppHeader } from "./components/app-header";
 import { AppSearch } from "./components/app-search";
 
 const { Header, Footer, Sider, Content } = Layout;
 function App() {
   const [collapsed, setCollapsed] = useState(false);
+  const [screenWidth, setScreenWidth] = useState(window.innerWidth);
+  useEffect(() => {
+    if (window.innerWidth <= 767) {
+      setCollapsed(true);
+    }
+    const handleResize = () => {
+      setScreenWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
   return (
     <Layout className="App">
       <Sider
         className={classNames([
           "App-sider",
-          collapsed ? "retractSiderWidth" : "siderWidth",
+          collapsed
+            ? window.innerWidth <= 767
+              ? "retractSiderHeight"
+              : "retractSiderWidth"
+            : "siderWidth",
         ])}
       >
-        <AppSider />
+        <AppSider
+          collapsed={collapsed}
+          setCollapsed={setCollapsed}
+          screenWidth={screenWidth}
+        />
       </Sider>
-      <Layout style={{ marginLeft: collapsed ? 0 : 270 }}>
+      <Layout
+        style={{
+          marginLeft: collapsed ? 0 : screenWidth <= 767 ? 0 : 270,
+          marginTop: screenWidth <= 767 ? 64 : 0,
+        }}
+      >
         <Header className="App-header">
-          <AppHeader collapsed={collapsed} setCollapsed={setCollapsed} />
+          <AppHeader
+            collapsed={collapsed}
+            setCollapsed={setCollapsed}
+            screenWidth={screenWidth}
+          />
         </Header>
         <Content className="App-content">
           <AppSearch />

diff --git a/src/components/app-content/index.css b/src/components/app-content/index.css
@@ -74,3 +74,8 @@
   overflow: hidden;
   white-space: nowrap;
 }
+.titleIcon {
+  margin-right: 10px;
+  color: #000;
+  font-size: 20px;
+}
diff --git a/src/components/app-content/index.tsx b/src/components/app-content/index.tsx
@@ -3,6 +3,7 @@ import { Avatar, Row, Card, Col, Tooltip, FloatButton } from "antd";
 import { FileTextOutlined } from "@ant-design/icons";
 import "./index.css";
 import { IGroup } from "../../data/types";
+import { IconFont } from "../../constants";
 
 export const AppCard = () => {
   const siteConfig = SitesConfig["main"];
@@ -11,9 +12,23 @@ export const AppCard = () => {
       style={{ display: "flex", alignItems: "center", flexDirection: "column" }}
     >
       {siteConfig.groups.map((group: IGroup) => {
-        const { name, children } = group;
+        const { name, children, icon } = group;
         return (
-          <Card title={name} className="item-content" id={name} key={name}>
+          <Card
+            title={
+              <div style={{ display: "flex", alignItems: "center" }}>
+                {icon && (
+                  <div className="titleIcon">
+                    <IconFont type={icon} />
+                  </div>
+                )}
+                <div>{name}</div>
+              </div>
+            }
+            className="item-content"
+            id={name}
+            key={name}
+          >
             <Row className="card" gutter={[16, 16]}>
               {children.map((val) => {
                 return (

diff --git a/src/components/app-header/index.tsx b/src/components/app-header/index.tsx
@@ -11,16 +11,22 @@ import weChat from "../../assets/weixin.jpeg";
 type AppHeaderProps = {
   collapsed: boolean;
   setCollapsed: (val: boolean) => void;
+  screenWidth: number;
 };
 
 export const AppHeader: React.FC<AppHeaderProps> = ({
   setCollapsed,
   collapsed,
+  screenWidth,
 }) => {
   return (
     <div className="app-header">
       <div onClick={() => setCollapsed(!collapsed)}>
-        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+        {screenWidth > 767 && (
+          <div>
+            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+          </div>
+        )}
       </div>
       <div className="header-right">
         <div className="weChat">

diff --git a/src/components/app-sider/index.css b/src/components/app-sider/index.css
@@ -4,8 +4,25 @@
   text-align: center;
 }
 
+@media (max-width: 767px) {
+  .logo {
+    padding: 14px 20px;
+    background: rgba(255, 255, 255, 0.02);
+    text-align: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .all-tag {
+    padding: 12px 24px;
+    overflow: auto;
+    height: 150px;
+  }
+}
+
 .all-tag {
   padding: 12px 24px;
+  overflow-y: auto;
 }
 
 .tag-item {
@@ -23,7 +40,7 @@
   background-color: #ffffff10;
   color: #fff;
 }
-.selected-tag{
+.selected-tag {
   background-color: #fff;
   color: #000;
 }

diff --git a/src/components/app-sider/index.tsx b/src/components/app-sider/index.tsx
@@ -5,8 +5,19 @@ import { SitesConfig } from "../../data/sites";
 import "./index.css";
 import { Space, Tag } from "antd";
 import classNames from "classnames";
+import { AppstoreAddOutlined, CloseOutlined } from "@ant-design/icons";
 
-export const AppSider = () => {
+type AppSilderPopup = {
+  collapsed: boolean;
+  screenWidth: number;
+  setCollapsed: (value: boolean) => void;
+};
+
+export const AppSider: React.FC<AppSilderPopup> = ({
+  collapsed,
+  screenWidth,
+  setCollapsed,
+}) => {
   const [selectedTag, setSelectedTag] = useState<string | undefined>(undefined);
   const siteConfig = SitesConfig["main"];
   const tagClick = (item: IGroup) => {
@@ -20,6 +31,15 @@ export const AppSider = () => {
     <div>
       <div className="logo">
         <img width={150} src={logo} alt="" />
+        <div
+          onClick={() => {
+            setCollapsed(!collapsed);
+          }}
+        >
+          {screenWidth <= 767 && (
+            <div>{collapsed ? <CloseOutlined /> : <AppstoreAddOutlined />}</div>
+          )}
+        </div>
       </div>
       <div className="all-tag">
         {siteConfig.groups.map((group: IGroup) => {

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -0,0 +1,5 @@
+import { createFromIconfontCN } from "@ant-design/icons";
+
+export const iconUrl = "//at.alicdn.com/t/a/font_4354752_e3prmhsizxg.js";
+
+export const IconFont = createFromIconfontCN({ scriptUrl: iconUrl });
diff --git a/src/data/sites/main/groups/color_map.ts b/src/data/sites/main/groups/color_map.ts
@@ -1,21 +1,20 @@
-import { IGroup } from '../../../types'
-export const MapColor: IGroup = {
-    icon: '',
-    name: '地图颜色',
-    en_name: 'map color',
-    order: 2,
-    children: [
-        {
-            icon: "https://colorbrewer2.org/favicon.ico",
-            name: "ColorBrewer",
-            en_name: "ColorBrewer",
-            description: "地图配色",
-            en_description: "Map color",
-            site_url: "https://colorbrewer2.org/",
-            order: 2,
-            tags: ["GIS", "Web", "Data"],
-        },
-
-    ]
+import { IGroup } from "../../../types";
 
-}
+export const MapColor: IGroup = {
+  icon: "icon-ditupeise",
+  name: "地图颜色",
+  en_name: "map color",
+  order: 2,
+  children: [
+    {
+      icon: "https://colorbrewer2.org/favicon.ico",
+      name: "ColorBrewer",
+      en_name: "ColorBrewer",
+      description: "地图配色",
+      en_description: "Map color",
+      site_url: "https://colorbrewer2.org/",
+      order: 2,
+      tags: ["GIS", "Web", "Data"],
+    },
+  ],
+};
diff --git a/src/data/sites/main/groups/coord_convert.ts b/src/data/sites/main/groups/coord_convert.ts
@@ -1,7 +1,7 @@
 // 坐标转换工具
 import { IGroup } from '../../../types'
 export const CoordConvert: IGroup = {
-    icon: '',
+    icon: 'icon-tool_zuobiaozhuanhuan',
     name: '坐标转换',
     order: 2,
     en_name: 'Coord',

diff --git a/src/data/sites/main/groups/data_collaboration.ts b/src/data/sites/main/groups/data_collaboration.ts
@@ -1,6 +1,6 @@
 import { IGroup } from '../../../types'
 export const DataCollaboration: IGroup = {
-    icon: '',
+    icon: 'icon-shujuxietong',
     name: '数据协同',
     order: 2,
     en_name: 'Data Collaboration',

diff --git a/src/data/sites/main/groups/data_edit.ts b/src/data/sites/main/groups/data_edit.ts
@@ -1,6 +1,6 @@
 import { IGroup } from '../../../types'
 export const DataEdit: IGroup = {
-    icon: '',
+    icon: 'icon-shujubianji',
     name: '数据编辑',
     en_name: 'data edit',
     order: 0,

diff --git a/src/data/sites/main/groups/data_format_convert.ts b/src/data/sites/main/groups/data_format_convert.ts
@@ -1,6 +1,6 @@
 import { IGroup } from '../../../types'
 export const DataFormatConvert: IGroup = {
-    icon: '',
+    icon: 'icon-shujuzhuanhuan',
     name: '数据转换',
     order: 2,
     en_name: 'Data format conversion',

diff --git a/src/data/sites/main/groups/data_process.ts b/src/data/sites/main/groups/data_process.ts
@@ -1,6 +1,6 @@
 import { IGroup } from '../../../types'
 export const DataProcess: IGroup = {
-    icon: '',
+    icon: 'icon-a-shujuchuli1',
     name: '数据处理',
     en_name: 'data process',
     order: 2,

diff --git a/src/data/sites/main/groups/data_source.ts b/src/data/sites/main/groups/data_source.ts
@@ -1,10 +1,10 @@
 // 数据可视化
 import { IGroup } from '../../../types'
 export const DataSource: IGroup = {
-    icon: '',
+    icon: 'icon-shujuyuanguanli',
     name: '数据源',
     en_name: 'data source',
-    order: 2,
+    order: 1.1,
     children: [{
         icon: "https://img.alicdn.com/imgextra/i3/O1CN01NQARus1gyEAmmQ9T0_!!6000000004210-0-tps-670-670.jpg",
         name: "DataV.GeoAtlas",

diff --git a/src/data/sites/main/groups/geocoding.ts b/src/data/sites/main/groups/geocoding.ts
@@ -1,6 +1,6 @@
 import { IGroup } from '../../../types'
 export const GeoCoding: IGroup = {
-    icon: '',
+    icon: 'icon-dilibianma',
     name: '地理编码',
     en_name: 'geocoding',
     order: 2,

diff --git a/src/data/sites/main/groups/onlinemap.ts b/src/data/sites/main/groups/onlinemap.ts
@@ -1,6 +1,6 @@
 import { IGroup } from '../../../types'
 export const OnlineMap: IGroup = {
-    icon: '',
+    icon: 'icon-a-zaixianditu2',
     name: '在线地图',
     order: 2,
     en_name: 'onlinemap',

diff --git a/src/data/sites/main/groups/rs_platform.ts b/src/data/sites/main/groups/rs_platform.ts
@@ -1,6 +1,6 @@
 import { IGroup } from '../../../types'
 export const RSPlatform: IGroup = {
-    icon: '',
+    icon: 'icon-yaogancehui',
     name: '遥感平台',
     en_name: 'RS Platform',
     order: 2,

diff --git a/src/data/sites/main/groups/visualization.ts b/src/data/sites/main/groups/visualization.ts
@@ -1,7 +1,7 @@
 // 数据可视化
 import { IGroup } from '../../../types'
 export const Visulization: IGroup = {
-    icon: '',
+    icon: 'icon-shujukeshihua1',
     name: '数据可视化',
     en_name: 'Coord',
     order: 1,

diff --git a/src/data/types.ts b/src/data/types.ts
@@ -12,7 +12,7 @@ export interface IItem {
   favorite?: boolean;
 }
 export interface IGroup {
-  icon?: string;
+  icon?: any;
   name: string;
   en_name: string;
   order: number;