首页-数据上传-数据分析-政策库-系统管理

frontend/src/App.jsx

@@ -18,7 +18,12 @@ import { LogoProvider } from "./LogoContext";
 import { FullScreenLoader } from "./components/Preloader";
 import { ThemeProvider } from "./ThemeContext";
 
-const Main = lazy(() => import("@/pages/Main"));
+const Main = lazy(() => import("@/pages/Main")); // 原首页-AI问政
+const Home = lazy(() => import("@/pages/Home")); // 新首页
+const PolicyLibrary = lazy(() => import("@/pages/PolicyLibrary")); // 政策库
+const DataAnalysis = lazy(() => import("@/pages/DataAnalysis")); // 数据分析
+const Tendency = lazy(() => import("@/pages/Tendency")); // 趋势洞察
+
 const InvitePage = lazy(() => import("@/pages/Invite"));
 const WorkspaceChat = lazy(() => import("@/pages/WorkspaceChat"));
 const AdminUsers = lazy(() => import("@/pages/Admin/Users"));
@@ -89,7 +94,21 @@ export default function App() {
             <PfpProvider>
               <I18nextProvider i18n={i18n}>
                 <Routes>
-                  <Route path="/" element={<PrivateRoute Component={Main} />} />
+                  <Route path="/Main" element={<PrivateRoute Component={Main} />} />
+                  <Route path="/" element={<PrivateRoute Component={Home} />} />
+                  <Route
+                    path="/home/PolicyLibrary"
+                    element={<ManagerRoute Component={PolicyLibrary} />}
+                  />
+                  <Route
+                    path="/home/Tendency"
+                    element={<ManagerRoute Component={Tendency} />}
+                  />
+                  <Route
+                    path="/home/DataAnalysis"
+                    element={<ManagerRoute Component={DataAnalysis} />}
+                  />
+
                   <Route path="/login" element={<Login />} />
                   <Route
                     path="/sso/simple"

frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx

@@ -34,7 +34,7 @@ export default function NewFolderModal({ closeModal, files, setFiles }) {
         <div className="relative p-6 border-b rounded-t border-theme-modal-border">
           <div className="w-full flex gap-x-2 items-center">
             <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
-              Create New Folder
+                创建新文件夹
             </h3>
           </div>
           <button
@@ -53,13 +53,13 @@ export default function NewFolderModal({ closeModal, files, setFiles }) {
                   htmlFor="folderName"
                   className="block mb-2 text-sm font-medium text-white"
                 >
-                  Folder Name
+                  文件夹名称
                 </label>
                 <input
                   name="folderName"
                   type="text"
                   className="border-none bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
-                  placeholder="Enter folder name"
+                  placeholder="输入文件夹名称"
                   required={true}
                   autoComplete="off"
                   value={folderName}
@@ -74,13 +74,13 @@ export default function NewFolderModal({ closeModal, files, setFiles }) {
                 type="button"
                 className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
               >
-                Cancel
+                取消
               </button>
               <button
                 type="submit"
                 className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
               >
-                Create Folder
+                创建文件夹
               </button>
             </div>
           </form>

frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx

@@ -179,6 +179,7 @@ function Directory({
   }, 500);
 
   const filteredFiles = filterFileSearchResults(files, searchTerm);
+  console.log(333,filteredFiles);
 
   const handleContextMenu = (event) => {
     event.preventDefault();

frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx

@@ -80,7 +80,8 @@ export default function UploadFile({
   return (
     <div>
       <div
-        className={`w-[560px] border-dashed border-[1px] border-theme-modal-border light:border-[#686C6F] rounded-2xl bg-theme-bg-primary transition-colors duration-300 p-3 ${ready
+      // 560px
+        className={`w-[100%] border-dashed border-[1px] border-theme-modal-border light:border-[#686C6F] rounded-2xl bg-theme-bg-primary transition-colors duration-300 p-3 ${ready
           ? " light:bg-transparent cursor-pointer hover:bg-theme-bg-secondary light:hover:bg-[#E0F2FE]"
           : "cursor-not-allowed"
           }`}

frontend/src/pages/Admin/Users/index.jsx

@@ -62,6 +62,7 @@ function UsersContainer() {
   useEffect(() => {
     async function fetchUsers() {
       const _users = await Admin.users();
+      console.log(1111,_users);
       setUsers(_users);
       setLoading(false);
     }

frontend/src/pages/DataAnalysis/DataAnalysis.css

@@ -0,0 +1,115 @@
+.box {
+    width: 100%;
+    padding: 10px 0;
+    height: auto;
+    position: absolute;
+    background-color: #F7F7FC;
+}
+
+.box1 {
+    width: 85%;
+    margin: 0 auto;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-rows: 100px 1fr;
+}
+
+.search {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10px 0;
+}
+
+.search1 {
+    width: 40%;
+    position: relative;
+    box-shadow: 0 0 5px #CFCFCF;
+    border-radius: 50px;
+}
+
+.search1 input {
+    width: 100%;
+    border-bottom-left-radius: 50px;
+    border-top-left-radius: 50px;
+    padding: 8px 0 8px 50px;
+}
+
+.search1 input:focus {
+    outline: none;
+    border: 1px solid #1677FF;
+}
+
+.search1 img {
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    left: 10px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+}
+
+.search button {
+    color: #fff;
+    background-color: #1677FF;
+    padding: 8px 30px 8px;
+    border-top-right-radius: 50px;
+    border-bottom-right-radius: 50px;
+    box-shadow: 0 0 5px #CFCFCF;
+}
+
+.content {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    column-gap: 20px;
+    row-gap: 20px;
+}
+
+.content2 {
+    display: grid;
+    grid-template-rows: 1fr 50px;
+    box-shadow: 0 0 2px #CFCFCF;
+    background-color: #fff;
+    border-radius: 10px;
+}
+
+.content2_1 {
+    width: 95%;
+    display: grid;
+    grid-template-columns: 50px 1fr;
+    column-gap: 20px;
+    border-bottom: 1px solid #F0F0F5;
+    padding: 10px;
+}
+
+.nr1 img {
+    width: 100%;
+}
+
+.nr2 div:first-child {
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.nr2 div:last-child {
+    color: #7E807C;
+    font-size: 14px;
+    padding: 5px 0;
+}
+
+.content2_2 {
+    display: flex;
+    align-items: center;
+    justify-content: right;
+}
+
+.content2_2 button {
+    color: #645BFF;
+    background-color: #E6E9FF;
+    padding: 5px 10px;
+    margin-right: 20px;
+    border-radius: 5px;
+    font-size: 14px;
+}

frontend/src/pages/DataAnalysis/index.jsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useState, useRef } from 'react';
+import './DataAnalysis.css'
+import sou from './img/sou.png'
+import tu1 from './img/1.png'
+import tu2 from './img/2.png'
+import tu3 from './img/3.png'
+import tu4 from './img/4.png'
+import tu5 from './img/5.png'
+import tu6 from './img/6.png'
+import tu7 from './img/7.png'
+import tu8 from './img/8.png'
+import tu9 from './img/9.png'
+import tu10 from './img/10.png'
+import tu11 from './img/11.png'
+import tu12 from './img/12.png'
+import tu13 from './img/13.png'
+import tu14 from './img/14.png'
+
+function DataAnalysis() {
+    const [renderKey, setRenderKey] = useState();
+
+    const list = [
+        {
+            name: '觉醒回声',
+            text: '欢迎来到「觉醒电台」，这里有四位独具魅力的主播，陪你畅聊科技前沿、哲学思辨、星座运势和娱乐圈八卦，无论你是',
+            img: tu1
+        },
+        {
+            name: '金脉超级面试官',
+            text: 'deepseek深度解析简历，为应聘者提供全面的分析和诊断，并提供AI面试，为春招的小伙伴打下坚实基础。',
+            img: tu2
+        },
+        {
+            name: 'DeepSeek R1超级助手',
+            text: 'DeepSeek R1超级助手，具备联网搜索，代码运行等能力，是你身边最万能的伙伴，借助火山方舟我能为你提供高并发服务～',
+            img: tu3
+        },
+        {
+            name: 'DeepSeek R1能力增强版',
+            text: 'DeepSeek 能力增强版，你可以使用我来完成联网搜索、图片理解、读链接、生成图片、思维导图等需求',
+            img: tu4
+        },
+        {
+            name: '表情包生成器',
+            text: '一键生成表情包！',
+            img: tu5
+        },
+        {
+            name: '茉卷英语',
+            text: '开启AI英语创作新纪元！ ⚡ 豆包1.5 + DeepSeek R1 双AI引擎赋能 📢 多维创作空间：文本/音频/图文 🌱 共创共学社区',
+            img: tu6
+        },
+        {
+            name: '华泰股市助手',
+            text: '为您提供灵活的股票指标筛选工具，以及对市场的分析。',
+            img: tu7
+        },
+        {
+            name: 'Emoji 翻译器',
+            text: '我是一个 😀🐶🍏 表情符号（emoji）翻译机器人，我会把你发过来的语句用表情符号翻译给你。也可以翻译你发过来的表情',
+            img: tu8
+        },
+        {
+            name: '懂车帝',
+            text: '由官方打造的汽车领域AI助手，为您一站式解决看选买的用车需求。',
+            img: tu9
+        },
+        {
+            name: '万能英语助手',
+            text: '擅长：单词记忆和学习、口语对话训练、英语知识讲解、翻译。',
+            img: tu10
+        },
+        {
+            name: '专业英语翻译',
+            text: '能翻译所有英语字，词，文章，论文等',
+            img: tu11
+        },
+        {
+            name: '小红书账号拆解神器',
+            text: '提供小红书账号粉丝画像、口碑排名、内容标签等多维度数据分析，帮你快速了解账号特点。',
+            img: tu12
+        },
+        {
+            name: '觉醒回声',
+            text: '欢迎来到「觉醒电台」，这里有四位独具魅力的主播，陪你畅聊科技前沿、哲学思辨、星座运势和娱乐圈八卦，无论你是',
+            img: tu13
+        },
+        {
+            name: '旅途小助手（行程规划）',
+            text: '一个为您量身定制旅行计划的智能助手，只需输入旅行地点和天数，便能获得详尽的日程安排和美食推荐。让您的旅途轻',
+            img: tu14
+        },
+        {
+            name: 'Emoji 翻译器',
+            text: '我是一个 😀🐶🍏 表情符号（emoji）翻译机器人，我会把你发过来的语句用表情符号翻译给你。也可以翻译你发过来的表情',
+            img: tu8
+        },
+        {
+            name: '懂车帝',
+            text: '由官方打造的汽车领域AI助手，为您一站式解决看选买的用车需求。',
+            img: tu9
+        },
+        {
+            name: '万能英语助手',
+            text: '擅长：单词记忆和学习、口语对话训练、英语知识讲解、翻译。',
+            img: tu10
+        },
+        {
+            name: '专业英语翻译',
+            text: '能翻译所有英语字，词，文章，论文等',
+            img: tu11
+        },
+        {
+            name: '小红书账号拆解神器',
+            text: '提供小红书账号粉丝画像、口碑排名、内容标签等多维度数据分析，帮你快速了解账号特点。',
+            img: tu12
+        },
+        {
+            name: '觉醒回声',
+            text: '欢迎来到「觉醒电台」，这里有四位独具魅力的主播，陪你畅聊科技前沿、哲学思辨、星座运势和娱乐圈八卦，无论你是',
+            img: tu13
+        },
+        {
+            name: '旅途小助手（行程规划）',
+            text: '一个为您量身定制旅行计划的智能助手，只需输入旅行地点和天数，便能获得详尽的日程安排和美食推荐。让您的旅途轻',
+            img: tu14
+        },
+    ]
+
+    useEffect(() => {
+
+    }, []);
+
+
+    return (
+        <div className='box'>
+            <div className='box1'>
+            <div className='head'>
+                <div className='search'>
+                    <div className='search1'>
+                        <img src={sou} alt="" />
+                        <input type="text" placeholder='请输入内容' />
+                    </div>
+                    <button>搜索</button>
+                </div>
+            </div>
+            <div className='content'>
+                {list.map((item, index) => (
+                    <div className='content2' key={index}>
+                        <div className='content2_1'>
+                            <div className='nr1'>
+                                <img src={item.img} alt="" />
+                            </div>
+                            <div className='nr2'>
+                                <div>{item.name}</div>
+                                <div>{item.text}</div>
+                            </div>
+                        </div>
+                        <div className='content2_2'>
+                            <button>立即使用</button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+            </div>
+        </div>
+    )
+}
+
+export default DataAnalysis;

frontend/src/pages/Home/home.css

@@ -0,0 +1,127 @@
+.box {
+    width: 100%;
+}
+
+.box video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+}
+
+.cen_box {
+    width: 100%;
+    height: 100vh;
+    display: grid;
+    grid-template-rows: 100px 1fr;
+    box-sizing: border-box;
+}
+
+.head {
+    position: relative;
+}
+
+.head1_1 {
+    text-align: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 16px;
+    margin: auto;
+    font-weight: bold;
+    font-size: 26px;
+    letter-spacing: 4px;
+
+    color: transparent;
+    background: linear-gradient(to bottom, #98F5FF, #0EC0FF);
+    -webkit-background-clip: text;
+    background-clip: text;
+
+    overflow: hidden;
+    white-space: nowrap;
+    animation: move 5s steps(60) forwards;
+}
+
+@keyframes move {
+    from {
+        width: 0;
+    }
+
+    to {
+        width: 100%;
+    }
+}
+
+.head2 {
+    position: absolute;
+    display: flex;
+    right: 10%;
+    top: 35px;
+    bottom: 0;
+    font-weight: bold;
+    color: #fff;
+}
+
+.head2 div:nth-child(1) {
+    font-size: 26px;
+}
+
+.head2 div:nth-child(2) {
+    margin: 0 20px;
+    margin-top: 10px;
+}
+
+.head2 div:nth-child(3) {
+    margin-top: 10px;
+}
+
+
+.head img {
+    width: 100%;
+    background-size: 100% 100%;
+}
+
+.content {
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+}
+
+.lunType {
+    width: 100%;
+}
+
+.lunType1_1 {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    row-gap: 100px;
+    justify-items: center;
+}
+
+.lunType2 {
+    width: 20vw;
+    height: 15vw;
+    background-image: url('./img/233.png');
+    background-size: 100% 100%;
+    color: #fff;
+    font-size: 26px;
+}
+
+.lunType2 div {
+    text-align: center;
+    margin: 30px 0 20px;
+}
+
+.lunType2 img {
+    width: 130px;
+    height: 150px;
+    margin: 0 auto;
+}
+
+.lunType2:hover {
+    color: #dfb07b;
+    background-image: url('./img/ccc.png');
+}

frontend/src/pages/Home/index.jsx

@@ -0,0 +1,136 @@
+import { useState, useEffect } from "react";
+import './home.css'
+import videoRef from "./img/bj1.mp4"
+import headImg from "./img/head.png"
+import { Carousel, message } from 'antd';
+import moment from 'moment';
+import bg from './img/card.png'
+import bgHover from "./img/card_hover.png"
+import icon1 from "./img/1.png"
+import icon2 from "./img/2.png"
+import icon3 from "./img/3.png"
+import icon4 from "./img/4.png"
+import icon5 from "./img/5.png"
+import icon6 from "./img/6.png"
+import icon7 from "./img/7.png"
+import icon8 from "./img/8.png"
+
+
+export default function Home() {
+    const [data, setData] = useState(false);
+    const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+    const [renderKey, setRenderKey] = useState(1);
+    // 链接类型：1-路由 2-链接 3-建设中 4-点击事件
+    const list = [
+        {
+            type: 1,
+            url: '/indexto',
+            name: '数据上传',
+            icon: icon1,
+        },
+        {
+            type: 1,
+            url: '/home/DataAnalysis',
+            name: '数据分析',
+            icon: icon2,
+        },
+        {
+            type: 2,
+            url: '/policemap',
+            name: '报告生成',
+            icon: icon4,
+        },
+        {
+            type: 1,
+            url: '/Main',
+            name: 'AI问政',
+            icon: icon3,
+        },
+        {
+            type: 1,
+            url: '/settings/appearance',
+            name: '系统管理',
+            icon: icon5,
+        },
+        {
+            type: 1,
+            url: '/home/Tendency',
+            name: '趋势洞察',
+            icon: icon6,
+        },
+        {
+            type: 1,
+            url: '/home/PolicyLibrary',
+            name: '政策库',
+            icon: icon7,
+        },
+        {
+            type: 2,
+            url: '/camera/manage_place',
+            name: '应用管理',
+            icon: icon8,
+        },
+    ]
+
+    // 点击事件
+    const bindUrl = (e) => {
+        console.log(1234, e);
+        if (e.type == 1) {
+            window.location = e.url
+        } else {
+            message.info({
+                content: e.name + '开发中...'
+            })
+        }
+    }
+
+    //方法
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setRenderKey(Math.random());
+        }, 1000);
+        // 组件卸载清除定时器
+        return () => clearInterval(timer);
+    }, []);
+
+    return (
+        <div className='box'>
+            {/* 背景视频 */}
+            <video autoPlay loop muted>
+                <source src={videoRef} type="video/mp4"></source>
+            </video>
+            <div className="cen_box">
+                <div className="head">
+                    <div className="head1_1">阿拉善盟AI行政数据分析与决策参考系统</div>
+                    <img src={headImg} alt="" />
+                    <div className="head2">
+                        <div>{moment().format('HH:mm:ss')}</div>
+                        <div>{moment().format('YYYY年MM月DD日')} </div>
+                        <div>{weeks[moment().day()]}</div>
+                    </div>
+                </div>
+                <div className="content">
+                    <Carousel draggable>
+                        <div className="lunType">
+                            <div className="lunType1_1">
+                                {list.map((item, index) => (
+                                    <div key={index} className="lunType2" onClick={() => bindUrl(item)}>
+                                        <div>{item.name}</div>
+                                        <img src={item.icon} alt="" />
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </Carousel>
+                </div>
+            </div>
+        </div>
+    )
+
+}
+
+
+
+
+
+

frontend/src/pages/Home/styles/btn.scss

@@ -0,0 +1,99 @@
+@import './variables.scss';
+
+@mixin colorBtn($color) {
+  background: $color;
+
+  &:hover {
+    color: $color;
+
+    &:before,
+    &:after {
+      background: $color;
+    }
+  }
+}
+
+.blue-btn {
+  @include colorBtn($blue)
+}
+
+.light-blue-btn {
+  @include colorBtn($light-blue)
+}
+
+.red-btn {
+  @include colorBtn($red)
+}
+
+.pink-btn {
+  @include colorBtn($pink)
+}
+
+.green-btn {
+  @include colorBtn($green)
+}
+
+.tiffany-btn {
+  @include colorBtn($tiffany)
+}
+
+.yellow-btn {
+  @include colorBtn($yellow)
+}
+
+.pan-btn {
+  font-size: 14px;
+  color: #fff;
+  padding: 14px 36px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  transition: 600ms ease all;
+  position: relative;
+  display: inline-block;
+
+  &:hover {
+    background: #fff;
+
+    &:before,
+    &:after {
+      width: 100%;
+      transition: 600ms ease all;
+    }
+  }
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 2px;
+    width: 0;
+    transition: 400ms ease all;
+  }
+
+  &::after {
+    right: inherit;
+    top: inherit;
+    left: 0;
+    bottom: 0;
+  }
+}
+
+.custom-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+}

frontend/src/pages/Home/styles/chenhai.scss

@@ -0,0 +1,384 @@
+/**
+ * 通用css样式布局处理
+ * Copyright (c) 2019 chenhai
+ */
+
+/** 基础通用 **/
+.pt5 {
+    padding-top: 5px;
+}
+.pr5 {
+    padding-right: 5px;
+}
+.pb5 {
+    padding-bottom: 5px;
+}
+.mt5 {
+    margin-top: 5px;
+}
+.mr5 {
+    margin-right: 5px;
+}
+.mb5 {
+    margin-bottom: 5px;
+}
+.mb8 {
+    margin-bottom: 8px;
+}
+.ml5 {
+    margin-left: 5px;
+}
+.mt10 {
+    margin-top: 10px;
+}
+.mr10 {
+    margin-right: 10px;
+}
+.mb10 {
+    margin-bottom: 10px;
+}
+.ml0 {
+    margin-left: 10px;
+}
+.mt20 {
+    margin-top: 20px;
+}
+.mr20 {
+    margin-right: 20px;
+}
+.mb20 {
+    margin-bottom: 20px;
+}
+.m20 {
+    margin-left: 20px;
+}
+
+.el-dialog:not(.is-fullscreen) {
+    margin-top: 6vh !important;
+}
+
+.el-table {
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+        th {
+            word-break: break-word;
+            background-color: #f8f8f9;
+            color: #515a6e;
+            height: 40px;
+            font-size: 13px;
+        }
+    }
+    .el-table__body-wrapper {
+        .el-button [class*="el-icon-"] + span {
+            margin-left: 1px;
+        }
+    }
+}
+
+/** 表单布局 **/
+.form-header {
+    font-size: 15px;
+    color: #6379bb;
+    border-bottom: 1px solid #ddd;
+    margin: 8px 10px 25px 10px;
+    padding-bottom: 5px;
+}
+
+/** 表格布局 **/
+.pagination-container {
+    position: relative;
+    height: 25px;
+    margin-bottom: 10px;
+    margin-top: 15px;
+    padding: 10px 20px !important;
+}
+
+/* tree border */
+.tree-border {
+    margin-top: 5px;
+    border: 1px solid #e5e6e7;
+    background: #ffffff none;
+    border-radius: 4px;
+}
+
+.pagination-container .el-pagination {
+    right: 0;
+    position: absolute;
+}
+
+.el-table .fixed-width .el-button--mini {
+    color: #409eff;
+    padding-left: 0;
+    padding-right: 0;
+    width: inherit;
+}
+
+.el-tree-node__content > .el-checkbox {
+    margin-right: 8px;
+}
+
+.list-group-striped > .list-group-item {
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.list-group {
+    padding-left: 0px;
+    list-style: none;
+}
+
+.list-group-item {
+    border-bottom: 1px solid #e7eaec;
+    border-top: 1px solid #e7eaec;
+    margin-bottom: -1px;
+    padding: 11px 0px;
+    font-size: 13px;
+}
+
+.pull-right {
+    float: right !important;
+}
+
+.el-card__header {
+    padding: 14px 15px 7px;
+    min-height: 40px;
+}
+
+.el-card__body {
+    padding: 15px 20px 20px 20px;
+}
+
+.card-box {
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-bottom: 10px;
+}
+
+/* button color */
+.el-button--cyan.is-active,
+.el-button--cyan:active {
+    background: #20b2aa;
+    border-color: #20b2aa;
+    color: #ffffff;
+}
+
+.el-button--cyan:focus,
+.el-button--cyan:hover {
+    background: #48d1cc;
+    border-color: #48d1cc;
+    color: #ffffff;
+}
+
+.el-button--cyan {
+    background-color: #20b2aa;
+    border-color: #20b2aa;
+    color: #ffffff;
+}
+
+.up {
+    position: relative;
+    // padding-right: 15px;
+    &::after {
+        content: '\279C';
+        position: absolute;
+        top: 0;
+        right: -20px;
+        bottom: 2px;
+        color: #00ac51;
+        font-size: 16px;
+        font-weight: bold;
+        transform: rotateZ(-90deg);
+    }
+}
+
+.down {
+    position: relative;
+    // padding-right: 15px;
+    &::after {
+        content: '\279C';
+        position: absolute;
+        top: 0;
+        right: -15px;
+        bottom: 2px;
+        color: #ef3248;
+        font-size: 16px;
+        font-weight: bold;
+        transform: rotateZ(90deg);
+    }
+}
+
+/* text color */
+.text-navy {
+    color: #00ac51;
+}
+
+.text-primary {
+    color: inherit;
+}
+
+.text-success {
+    color: #0095ff;
+}
+
+.text-info {
+    color: #525264;
+}
+
+.text-warning {
+    color: #f8ac59;
+}
+
+.text-danger {
+    color: #ef3248;
+}
+
+.text-muted {
+    color: #888888;
+}
+
+/* background color */
+.bg-navy {
+    background-color: #00ac51;
+}
+
+.bg-success {
+    background-color: #0095ff;
+}
+
+.bg-info {
+    background-color: #23c6c8;
+}
+
+.bg-warning {
+    background-color: #f8ac59;
+}
+
+.bg-danger {
+    background-color: #ef3248;
+}
+
+.bg-muted {
+    background-color: #888888;
+}
+
+.bg-success-opacity {
+    background-color: #0095ff20;
+}
+
+.bg-warning-opacity {
+    background-color: #f8ac5920;
+}
+
+.bg-danger-opacity {
+    background-color: #ef324820;
+}
+
+.bg-light-blue {
+    border: 1px solid #0095ff;
+    background: #e2f6ff;
+}
+.bg-light-grey {
+    border: 1px solid #525264;
+    background: #d7dbf2;
+}
+.bg-light-green {
+    border: 1px solid #00ac51;
+    background: #dcf7e9;
+}
+.bg-light-orange {
+    border: 1px solid #f8ac59;
+    background: #f6e8df;
+}
+
+.border-success {
+    border-color: #0095ff20;
+}
+
+.border-navy {
+    border-color: #00ac5120;
+}
+
+/* image */
+.img-circle {
+    border-radius: 50%;
+}
+
+.img-lg {
+    width: 120px;
+    height: 120px;
+}
+
+.avatar-upload-preview {
+    position: absolute;
+    top: 50%;
+    transform: translate(50%, -50%);
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    box-shadow: 0 0 4px #ccc;
+    overflow: hidden;
+}
+
+/* 拖拽列样式 */
+.sortable-ghost {
+    opacity: 0.8;
+    color: #fff !important;
+    background: #00ac51 !important;
+}
+
+.top-right-btn {
+    position: relative;
+    float: right;
+}
+
+.vue-treeselect--has-value .vue-treeselect__input {
+    vertical-align: middle !important;
+}
+
+.el-upload__tip {
+    font-size: 14px;
+}
+
+.el-select {
+    width: 100%;
+}
+
+.el-dialog {
+    .el-descriptions {
+        font-size: 16px;
+        margin-bottom: 15px;
+    }
+    .el-dialog__body {
+        overflow-y: auto;
+        padding-bottom: 75px;
+        max-height: 750px;
+    }
+    .el-dialog__footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #fff;
+    }
+}
+.el-tag + .el-tag {
+    margin-left: 10px;
+}
+.el-alert {
+    padding: 0px 16px !important;
+}
+.button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+.input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+}

frontend/src/pages/Home/styles/cloud/custom-animation.css

@@ -0,0 +1,623 @@
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeInLeft {
+    0% {
+        opacity: 0;
+        transform: translate3d(-200px, 0, 0);
+        transform: translate3d(-200px, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes fadeInRight {
+    0% {
+        opacity: 0;
+        transform: translate3d(200px, 0, 0);
+        transform: translate3d(200px, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translate3d(0, 200px, 0);
+        transform: translate3d(0, 200px, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        transform: translate3d(0, -200px, 0);
+        transform: translate3d(0, -200px, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes flipInY {
+    0% {
+        transform: perspective(400px) rotateY(90deg);
+        transform: perspective(400px) rotateY(90deg);
+        animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+        opacity: 0;
+    }
+
+    40% {
+        transform: perspective(400px) rotateY(-20deg);
+        transform: perspective(400px) rotateY(-20deg);
+        animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+
+    60% {
+        transform: perspective(400px) rotateY(10deg);
+        transform: perspective(400px) rotateY(10deg);
+        opacity: 1;
+    }
+
+    80% {
+        transform: perspective(400px) rotateY(-5deg);
+        transform: perspective(400px) rotateY(-5deg);
+    }
+
+    to {
+        transform: perspective(400px);
+        transform: perspective(400px);
+    }
+}
+
+@keyframes bounceInLeft {
+    0%,
+    60%,
+    75%,
+    90%,
+    to {
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(-3000px, 0, 0);
+        transform: translate3d(-3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(25px, 0, 0);
+        transform: translate3d(25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(-10px, 0, 0);
+        transform: translate3d(-10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(5px, 0, 0);
+        transform: translate3d(5px, 0, 0);
+    }
+
+    to {
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes bounceInRight {
+    0%,
+    60%,
+    75%,
+    90%,
+    to {
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(3000px, 0, 0);
+        transform: translate3d(3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(-25px, 0, 0);
+        transform: translate3d(-25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(10px, 0, 0);
+        transform: translate3d(10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(-5px, 0, 0);
+        transform: translate3d(-5px, 0, 0);
+    }
+
+    to {
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes bounceInUp {
+    0%,
+    60%,
+    75%,
+    90%,
+    to {
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(0, 3000px, 0);
+        transform: translate3d(0, 3000px, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(0, -25px, 0);
+        transform: translate3d(0, -25px, 0);
+    }
+
+    75% {
+        transform: translate3d(0, 10px, 0);
+        transform: translate3d(0, 10px, 0);
+    }
+
+    90% {
+        transform: translate3d(0, -5px, 0);
+        transform: translate3d(0, -5px, 0);
+    }
+
+    to {
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes bounceInDown {
+    0%,
+    60%,
+    75%,
+    90%,
+    to {
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(0, -3000px, 0);
+        transform: translate3d(0, -3000px, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(0, 25px, 0);
+        transform: translate3d(0, 25px, 0);
+    }
+
+    75% {
+        transform: translate3d(0, -10px, 0);
+        transform: translate3d(0, -10px, 0);
+    }
+
+    90% {
+        transform: translate3d(0, 5px, 0);
+        transform: translate3d(0, 5px, 0);
+    }
+
+    to {
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes wobble {
+    0% {
+        transform: none;
+        transform: none;
+    }
+
+    15% {
+        transform: translate3d(-25%, 0, 0) rotate(-5deg);
+        transform: translate3d(-25%, 0, 0) rotate(-5deg);
+    }
+
+    30% {
+        transform: translate3d(20%, 0, 0) rotate(3deg);
+        transform: translate3d(20%, 0, 0) rotate(3deg);
+    }
+
+    45% {
+        transform: translate3d(-15%, 0, 0) rotate(-3deg);
+        transform: translate3d(-15%, 0, 0) rotate(-3deg);
+    }
+
+    60% {
+        transform: translate3d(10%, 0, 0) rotate(2deg);
+        transform: translate3d(10%, 0, 0) rotate(2deg);
+    }
+
+    75% {
+        transform: translate3d(-5%, 0, 0) rotate(-1deg);
+        transform: translate3d(-5%, 0, 0) rotate(-1deg);
+    }
+
+    to {
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes rubberBand {
+    0% {
+        transform: scaleX(1);
+        transform: scaleX(1);
+    }
+
+    30% {
+        transform: scale3d(1.25, 0.75, 1);
+        transform: scale3d(1.25, 0.75, 1);
+    }
+
+    40% {
+        transform: scale3d(0.75, 1.25, 1);
+        transform: scale3d(0.75, 1.25, 1);
+    }
+
+    50% {
+        transform: scale3d(1.15, 0.85, 1);
+        transform: scale3d(1.15, 0.85, 1);
+    }
+
+    65% {
+        transform: scale3d(0.95, 1.05, 1);
+        transform: scale3d(0.95, 1.05, 1);
+    }
+
+    75% {
+        transform: scale3d(1.05, 0.95, 1);
+        transform: scale3d(1.05, 0.95, 1);
+    }
+
+    to {
+        transform: scaleX(1);
+        transform: scaleX(1);
+    }
+}
+
+@keyframes rotateIn {
+    0% {
+        transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(1turn);
+        transform: rotate(1turn);
+    }
+}
+
+@keyframes flip {
+    0% {
+        transform: perspective(400px) rotateY(-1turn);
+        transform: perspective(400px) rotateY(-1turn);
+        animation-timing-function: ease-out;
+        animation-timing-function: ease-out;
+    }
+
+    40% {
+        transform: perspective(400px) translateZ(150px) rotateY(-190deg);
+        transform: perspective(400px) translateZ(150px) rotateY(-190deg);
+        animation-timing-function: ease-out;
+        animation-timing-function: ease-out;
+    }
+
+    50% {
+        transform: perspective(400px) translateZ(150px) rotateY(-170deg);
+        transform: perspective(400px) translateZ(150px) rotateY(-170deg);
+        animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+
+    80% {
+        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+        animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+
+    to {
+        transform: perspective(400px);
+        transform: perspective(400px);
+        animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+}
+
+@keyframes swing {
+    20% {
+        transform: rotate(15deg);
+        transform: rotate(15deg);
+    }
+
+    40% {
+        transform: rotate(-10deg);
+        transform: rotate(-10deg);
+    }
+
+    60% {
+        transform: rotate(5deg);
+        transform: rotate(5deg);
+    }
+
+    80% {
+        transform: rotate(-5deg);
+        transform: rotate(-5deg);
+    }
+
+    to {
+        transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+
+@keyframes flash {
+    0%,
+    50%,
+    to {
+        opacity: 1;
+    }
+
+    25%,
+    75% {
+        opacity: 0;
+    }
+}
+
+@keyframes slideDown {
+    0% {
+        transform-origin: 0 0;
+        transform-origin: 0 0;
+        transform: translateY(0);
+        transform: translateY(0);
+    }
+
+    to {
+        transform-origin: 0 0;
+        transform-origin: 0 0;
+        transform: translateY(100%);
+        transform: translateY(100%);
+    }
+}
+
+@keyframes slideUp {
+    0% {
+        transform-origin: 0 0;
+        transform-origin: 0 0;
+        transform: translateY(0);
+        transform: translateY(0);
+    }
+
+    to {
+        transform-origin: 0 0;
+        transform-origin: 0 0;
+        transform: translateY(-100%);
+        transform: translateY(-100%);
+    }
+}
+
+@keyframes tada {
+    0% {
+        transform: scaleX(1);
+        transform: scaleX(1);
+    }
+
+    10%,
+    20% {
+        transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
+        transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
+        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
+    }
+
+    40%,
+    60%,
+    80% {
+        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
+        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
+    }
+
+    to {
+        transform: scaleX(1);
+        transform: scaleX(1);
+    }
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes fadeOutLeft {
+    0% {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+@keyframes fadeOutRight {
+    0% {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@keyframes fadeOutUp {
+    0% {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+@keyframes fadeOutDown {
+    0% {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+@keyframes bounceOutLeft {
+    20% {
+        opacity: 1;
+        transform: translate3d(20px, 0, 0);
+        transform: translate3d(20px, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(-2000px, 0, 0);
+        transform: translate3d(-2000px, 0, 0);
+    }
+}
+
+@keyframes bounceOutRight {
+    20% {
+        opacity: 1;
+        transform: translate3d(-20px, 0, 0);
+        transform: translate3d(-20px, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(2000px, 0, 0);
+        transform: translate3d(2000px, 0, 0);
+    }
+}
+
+@keyframes bounceOutUp {
+    20% {
+        transform: translate3d(0, -10px, 0);
+        transform: translate3d(0, -10px, 0);
+    }
+
+    40%,
+    45% {
+        opacity: 1;
+        transform: translate3d(0, 20px, 0);
+        transform: translate3d(0, 20px, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, -2000px, 0);
+        transform: translate3d(0, -2000px, 0);
+    }
+}
+
+@keyframes bounceOutDown {
+    20% {
+        transform: translate3d(0, 10px, 0);
+        transform: translate3d(0, 10px, 0);
+    }
+
+    40%,
+    45% {
+        opacity: 1;
+        transform: translate3d(0, -20px, 0);
+        transform: translate3d(0, -20px, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, 2000px, 0);
+        transform: translate3d(0, 2000px, 0);
+    }
+}
+
+@keyframes flipOutY {
+    0% {
+        transform: perspective(400px);
+        transform: perspective(400px);
+    }
+
+    30% {
+        transform: perspective(400px) rotateY(-15deg);
+        transform: perspective(400px) rotateY(-15deg);
+        opacity: 1;
+    }
+
+    to {
+        transform: perspective(400px) rotateY(90deg);
+        transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+}

frontend/src/pages/Home/styles/cloud/reset.css

@@ -0,0 +1,34 @@
+@font-face {
+    font-family: "led";
+    src: url("../../fonts/led.ttf");
+}
+
+/* @font-face {
+    font-family: "PingFang-SC-Semibold";
+    src: url("../../fonts/PingFang-SC-Semibold.ttf");
+}
+
+@font-face {
+    font-family: "PingFang-Light";
+    src: url("../../fonts/PingFang-Light.ttf");
+}
+
+@font-face {
+    font-family: "PingFang-Bold";
+    src: url("../../fonts/PingFang-Bold.ttf");
+} */
+
+@font-face {
+    font-family: "PingFang-SC";
+    src: url("../../fonts/PingFang-SC.ttf");
+}
+/*
+@font-face {
+    font-family: "PingFang-JT";
+    src: url("../../fonts/PingFang-JT.ttf");
+}
+
+@font-face {
+    font-family: "PingFang-JC";
+    src: url("../../fonts/PingFang-JC.ttf");
+} */

frontend/src/pages/Home/styles/element-ui.scss

@@ -0,0 +1,92 @@
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell {
+  .el-tag {
+    margin-right: 0px;
+  }
+}
+
+.small-padding {
+  .cell {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+.fixed-width {
+  .el-button--mini {
+    padding: 7px 10px;
+    width: 60px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// fix date-picker ui bug in filter-item
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.el-menu--collapse
+  > div
+  > .el-submenu
+  > .el-submenu__title
+  .el-submenu__icon-arrow {
+  display: none;
+}

frontend/src/pages/Home/styles/element-variables.scss

@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #1890ff;
+$--color-success: #13ce66;
+$--color-warning: #ffba00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}

frontend/src/pages/Home/styles/index.css

@@ -0,0 +1,688 @@
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+:export {
+  menuColor: #fff;
+  menuLightColor: rgba(0, 0, 0, 0.7);
+  menuColorActive: #e78361;
+  menuBackground: #4383cc;
+  menuLightBackground: #ffffff;
+  subMenuBackground: #529add;
+  subMenuHover: #FEC171;
+  sideBarWidth: 200px;
+  logoTitleColor: #ffffff;
+  logoLightTitleColor: #4ea7fa;
+}
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform--move,
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload input[type="file"] {
+  display: none !important;
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell .el-tag {
+  margin-right: 0px;
+}
+
+.small-padding .cell {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.fixed-width .el-button--mini {
+  padding: 7px 10px;
+  width: 60px;
+}
+
+.status-col .cell {
+  padding: 0 10px;
+  text-align: center;
+}
+
+.status-col .cell .el-tag {
+  margin-right: 0px;
+}
+
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+.upload-container .el-upload {
+  width: 100%;
+}
+
+.upload-container .el-upload .el-upload-dragger {
+  width: 100%;
+  height: 200px;
+}
+
+.el-dropdown-menu a {
+  display: block;
+}
+
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.el-menu--collapse
+> div
+> .el-submenu
+> .el-submenu__title
+.el-submenu__icon-arrow {
+  display: none;
+}
+
+#app .main-container {
+  height: 100%;
+  transition: margin-left .28s;
+  margin-left: 200px;
+  position: relative;
+}
+
+#app .sidebarHide {
+  margin-left: 0 !important;
+}
+
+#app .el-menu-item.is-active {
+  color: #e78361 !important;
+  background-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+#app .el-menu-item.is-active:hover {
+  background-color: #4383cc;
+}
+
+#app .sidebar-container {
+  -webkit-transition: width .28s;
+  transition: width 0.28s;
+  width: 200px !important;
+  background-color: #4383cc;
+  height: 100%;
+  position: fixed;
+  font-size: 0px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  overflow: hidden;
+  -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+}
+
+#app .sidebar-container .horizontal-collapse-transition {
+  transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+}
+
+#app .sidebar-container .scrollbar-wrapper {
+  overflow-x: hidden !important;
+}
+
+#app .sidebar-container .el-scrollbar__bar.is-vertical {
+  right: 0px;
+}
+
+#app .sidebar-container .el-scrollbar {
+  height: 100%;
+}
+
+#app .sidebar-container.has-logo .el-scrollbar {
+  height: calc(100% - 50px);
+}
+
+#app .sidebar-container .is-horizontal {
+  display: none;
+}
+
+#app .sidebar-container a {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+}
+
+#app .sidebar-container .svg-icon {
+  margin-right: 16px;
+}
+
+#app .sidebar-container .el-menu {
+  border: none;
+  height: 100%;
+  width: 100% !important;
+}
+
+#app .sidebar-container .el-menu-item, #app .sidebar-container .el-submenu__title {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+#app .sidebar-container .submenu-title-noDropdown:hover,
+#app .sidebar-container .el-submenu__title:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+#app .sidebar-container .theme-dark .is-active > .el-submenu__title {
+  color: #e78361 !important;
+}
+
+#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
+#app .sidebar-container .el-submenu .el-menu-item {
+  min-width: 200px !important;
+}
+
+#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover,
+#app .sidebar-container .el-submenu .el-menu-item:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title,
+#app .sidebar-container .theme-dark .el-submenu .el-menu-item {
+  background-color: #529add !important;
+}
+
+#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title:hover,
+#app .sidebar-container .theme-dark .el-submenu .el-menu-item:hover {
+  background-color: #FEC171 !important;
+}
+
+#app .hideSidebar .sidebar-container {
+  width: 54px !important;
+}
+
+#app .hideSidebar .main-container {
+  margin-left: 54px;
+}
+
+#app .hideSidebar .submenu-title-noDropdown {
+  padding: 0 !important;
+  position: relative;
+}
+
+#app .hideSidebar .submenu-title-noDropdown .el-tooltip {
+  padding: 0 !important;
+}
+
+#app .hideSidebar .submenu-title-noDropdown .el-tooltip .svg-icon {
+  margin-left: 20px;
+}
+
+#app .hideSidebar .el-submenu {
+  overflow: hidden;
+}
+
+#app .hideSidebar .el-submenu > .el-submenu__title {
+  padding: 0 !important;
+}
+
+#app .hideSidebar .el-submenu > .el-submenu__title .svg-icon {
+  margin-left: 20px;
+}
+
+#app .hideSidebar .el-menu--collapse .el-submenu > .el-submenu__title > span {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  display: inline-block;
+}
+
+#app .el-menu--collapse .el-menu .el-submenu {
+  min-width: 200px !important;
+}
+
+#app .mobile .main-container {
+  margin-left: 0px;
+}
+
+#app .mobile .sidebar-container {
+  transition: transform .28s;
+  width: 200px !important;
+}
+
+#app .mobile.hideSidebar .sidebar-container {
+  pointer-events: none;
+  transition-duration: 0.3s;
+  transform: translate3d(-200px, 0, 0);
+}
+
+#app .withoutAnimation .main-container,
+#app .withoutAnimation .sidebar-container {
+  transition: none;
+}
+
+.el-menu--vertical > .el-menu .svg-icon {
+  margin-right: 16px;
+}
+
+.el-menu--vertical .nest-menu .el-submenu > .el-submenu__title:hover,
+.el-menu--vertical .el-menu-item:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+.el-menu--vertical > .el-menu--popup {
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-track-piece {
+  background: #d3dce6;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar {
+  width: 6px;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-thumb {
+  background: #99a9bf;
+  border-radius: 20px;
+}
+
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+:export {
+  menuColor: #fff;
+  menuLightColor: rgba(0, 0, 0, 0.7);
+  menuColorActive: #e78361;
+  menuBackground: #4383cc;
+  menuLightBackground: #ffffff;
+  subMenuBackground: #529add;
+  subMenuHover: #FEC171;
+  sideBarWidth: 200px;
+  logoTitleColor: #ffffff;
+  logoLightTitleColor: #4ea7fa;
+}
+
+.blue-btn {
+  background: #324157;
+}
+
+.blue-btn:hover {
+  color: #324157;
+}
+
+.blue-btn:hover:before, .blue-btn:hover:after {
+  background: #324157;
+}
+
+.light-blue-btn {
+  background: #3A71A8;
+}
+
+.light-blue-btn:hover {
+  color: #3A71A8;
+}
+
+.light-blue-btn:hover:before, .light-blue-btn:hover:after {
+  background: #3A71A8;
+}
+
+.red-btn {
+  background: #C03639;
+}
+
+.red-btn:hover {
+  color: #C03639;
+}
+
+.red-btn:hover:before, .red-btn:hover:after {
+  background: #C03639;
+}
+
+.pink-btn {
+  background: #E65D6E;
+}
+
+.pink-btn:hover {
+  color: #E65D6E;
+}
+
+.pink-btn:hover:before, .pink-btn:hover:after {
+  background: #E65D6E;
+}
+
+.green-btn {
+  background: #30B08F;
+}
+
+.green-btn:hover {
+  color: #30B08F;
+}
+
+.green-btn:hover:before, .green-btn:hover:after {
+  background: #30B08F;
+}
+
+.tiffany-btn {
+  background: #4AB7BD;
+}
+
+.tiffany-btn:hover {
+  color: #4AB7BD;
+}
+
+.tiffany-btn:hover:before, .tiffany-btn:hover:after {
+  background: #4AB7BD;
+}
+
+.yellow-btn {
+  background: #FEC171;
+}
+
+.yellow-btn:hover {
+  color: #FEC171;
+}
+
+.yellow-btn:hover:before, .yellow-btn:hover:after {
+  background: #FEC171;
+}
+
+.pan-btn {
+  font-size: 14px;
+  color: #fff;
+  padding: 14px 36px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  transition: 600ms ease all;
+  position: relative;
+  display: inline-block;
+}
+
+.pan-btn:hover {
+  background: #fff;
+}
+
+.pan-btn:hover:before, .pan-btn:hover:after {
+  width: 100%;
+  transition: 600ms ease all;
+}
+
+.pan-btn:before, .pan-btn:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 2px;
+  width: 0;
+  transition: 400ms ease all;
+}
+
+.pan-btn::after {
+  right: inherit;
+  top: inherit;
+  left: 0;
+  bottom: 0;
+}
+
+.custom-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+
+aside {
+  background: #eef1f6;
+  padding: 8px 24px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  display: block;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+aside a {
+  color: #337ab7;
+  cursor: pointer;
+}
+
+aside a:hover {
+  color: #20a0ff;
+}
+
+.app-container {
+  padding: 20px;
+}
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+.pagination-container {
+  margin-top: 30px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.sub-navbar {
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  padding-right: 20px;
+  transition: 600ms ease position;
+  background: linear-gradient(90deg, #20b6f9 0%, #20b6f9 0%, #2178f1 100%, #2178f1 100%);
+}
+
+.sub-navbar .subtitle {
+  font-size: 20px;
+  color: #fff;
+}
+
+.sub-navbar.draft {
+  background: #d0d0d0;
+}
+
+.sub-navbar.deleted {
+  background: #d0d0d0;
+}
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+}
+
+.link-type:hover,
+.link-type:focus:hover {
+  color: #20a0ff;
+}
+
+.filter-container {
+  padding-bottom: 10px;
+}
+
+.filter-container .filter-item {
+  display: inline-block;
+  vertical-align: middle;
+  margin-bottom: 10px;
+}

frontend/src/pages/Home/styles/index.scss

@@ -0,0 +1,182 @@
+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
+@import './btn.scss';
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+aside {
+  background: #eef1f6;
+  padding: 8px 24px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  display: block;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  a {
+    color: #337ab7;
+    cursor: pointer;
+
+    &:hover {
+      color: rgb(32, 160, 255);
+    }
+  }
+}
+
+//main-container全局样式
+.app-container {
+  padding: 20px;
+}
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+.pagination-container {
+  margin-top: 30px;
+}
+
+.text-center {
+  text-align: center
+}
+
+.sub-navbar {
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  padding-right: 20px;
+  transition: 600ms ease position;
+  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+
+  .subtitle {
+    font-size: 20px;
+    color: #fff;
+  }
+
+  &.draft {
+    background: #d0d0d0;
+  }
+
+  &.deleted {
+    background: #d0d0d0;
+  }
+}
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(32, 160, 255);
+  }
+}
+
+.filter-container {
+  padding-bottom: 10px;
+
+  .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+  }
+}

frontend/src/pages/Home/styles/map-theme/default/style.css

@@ -0,0 +1,434 @@
+div.olMap {
+    z-index: 0;
+    padding: 0 !important;
+    margin: 0 !important;
+    cursor: default;
+}
+
+div.olMapViewport {
+    text-align: left;
+}
+
+div.olLayerDiv {
+   -moz-user-select: none;
+   -khtml-user-select: none;
+}
+
+.olLayerGoogleCopyright {
+    left: 2px;
+    bottom: 2px;
+}
+.olLayerGoogleV3.olLayerGoogleCopyright {
+    right: auto !important;
+}
+.olLayerGooglePoweredBy {
+    left: 2px;
+    bottom: 15px;
+}
+.olLayerGoogleV3.olLayerGooglePoweredBy {
+    bottom: 15px !important;
+}
+.olControlAttribution {
+    font-size: smaller;
+    right: 3px;
+    bottom: 4.5em;
+    position: absolute;
+    display: block;
+}
+.olControlScale {
+    right: 3px;
+    bottom: 3em;
+    display: block;
+    position: absolute;
+    font-size: smaller;
+}
+.olControlScaleLine {
+   display: block;
+   position: absolute;
+   left: 10px;
+   bottom: 15px;
+   font-size: xx-small;
+}
+.olControlScaleLineBottom {
+   border: solid 2px black;
+   border-bottom: none;
+   margin-top:-2px;
+   text-align: center;
+}
+.olControlScaleLineTop {
+   border: solid 2px black;
+   border-top: none;
+   text-align: center;
+}
+
+.olControlPermalink {
+    right: 3px;
+    bottom: 1.5em;
+    display: block;
+    position: absolute;
+    font-size: smaller;
+}
+
+div.olControlMousePosition {
+    bottom: 0em;
+    right: 3px;
+    display: block;
+    position: absolute;
+    font-family: Arial;
+    font-size: smaller;
+}
+
+.olControlOverviewMapContainer {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+.olControlOverviewMapElement {
+    padding: 10px 18px 10px 10px;
+    background-color: #00008B;
+    -moz-border-radius: 1em 0 0 0;
+}
+
+.olControlOverviewMapMinimizeButton {
+    right: 0;
+    bottom: 80px;
+    cursor: pointer;
+}
+
+.olControlOverviewMapMaximizeButton {
+    right: 0;
+    bottom: 80px;
+    cursor: pointer;
+}
+
+.olControlOverviewMapExtentRectangle {
+    overflow: hidden;
+    background-image: url("img/blank.gif");
+    cursor: move;
+    border: 2px dotted red;
+}
+.olControlOverviewMapRectReplacement {
+    overflow: hidden;
+    cursor: move;
+    background-image: url("img/overview_replacement.gif");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.olLayerGeoRSSDescription {
+    float:left;
+    width:100%;
+    overflow:auto;
+    font-size:1.0em;
+}
+.olLayerGeoRSSClose {
+    float:right;
+    color:gray;
+    font-size:1.2em;
+    margin-right:6px;
+    font-family:sans-serif;
+}
+.olLayerGeoRSSTitle {
+    float:left;font-size:1.2em;
+}
+
+.olPopupContent {
+    padding:10px;
+    overflow-y: auto;
+    box-shadow: 0px 2px 2px 0px rgba(174, 174, 174, 0.5);
+}
+
+.olControlNavigationHistory {
+   background-image: url("img/navigation_history.png");
+   background-repeat: no-repeat;
+   width:  24px;
+   height: 24px;
+
+}
+.olControlNavigationHistoryPreviousItemActive {
+  background-position: 0 0;
+}
+.olControlNavigationHistoryPreviousItemInactive {
+   background-position: 0 -24px;
+}
+.olControlNavigationHistoryNextItemActive {
+   background-position: -24px 0;
+}
+.olControlNavigationHistoryNextItemInactive {
+   background-position: -24px -24px;
+}
+
+div.olControlSaveFeaturesItemActive {
+    background-image: url(img/save_features_on.png);
+    background-repeat: no-repeat;
+    background-position: 0 1px;
+}
+div.olControlSaveFeaturesItemInactive {
+    background-image: url(img/save_features_off.png);
+    background-repeat: no-repeat;
+    background-position: 0 1px;
+}
+
+.olHandlerBoxZoomBox {
+    border: 2px solid red;
+    position: absolute;
+    background-color: white;
+    opacity: 0.50;
+    font-size: 1px;
+    filter: alpha(opacity=50);
+}
+.olHandlerBoxSelectFeature {
+    border: 2px solid blue;
+    position: absolute;
+    background-color: white;
+    opacity: 0.50;
+    font-size: 1px;
+    filter: alpha(opacity=50);
+}
+
+.olControlPanPanel {
+    top: 10px;
+    left: 5px;
+}
+
+.olControlPanPanel div {
+    background-image: url(img/pan-panel.png);
+    height: 18px;
+    width: 18px;
+    cursor: pointer;
+    position: absolute;
+}
+
+.olControlPanPanel .olControlPanNorthItemInactive {
+    top: 0;
+    left: 9px;
+    background-position: 0 0;
+}
+.olControlPanPanel .olControlPanSouthItemInactive {
+    top: 36px;
+    left: 9px;
+    background-position: 18px 0;
+}
+.olControlPanPanel .olControlPanWestItemInactive {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    background-position: 0 18px;
+}
+.olControlPanPanel .olControlPanEastItemInactive {
+    top: 18px;
+    left: 18px;
+    background-position: 18px 18px;
+}
+
+.olControlZoomPanel {
+    top: 71px;
+    left: 14px;
+}
+
+.olControlZoomPanel div {
+    background-image: url(img/zoom-panel.png);
+    position: absolute;
+    height: 18px;
+    width: 18px;
+    cursor: pointer;
+}
+
+.olControlZoomPanel .olControlZoomInItemInactive {
+    top: 0;
+    left: 0;
+    background-position: 0 0;
+}
+
+.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
+    top: 18px;
+    left: 0;
+    background-position: 0 -18px;
+}
+
+.olControlZoomPanel .olControlZoomOutItemInactive {
+    top: 36px;
+    left: 0;
+    background-position: 0 18px;
+}
+
+/*
+ * When a potential text is bigger than the image it move the image
+ * with some headers (closes #3154)
+ */
+.olControlPanZoomBar div {
+    font-size: 1px;
+}
+
+.olPopupCloseBox {
+  background: url("img/close.gif") no-repeat;
+  cursor: pointer;
+}
+
+.olFramedCloudPopupContent {
+    padding: 5px;
+    overflow: auto;
+}
+
+.olControlNoSelect {
+ -moz-user-select: none;
+ -khtml-user-select: none;
+}
+
+.olImageLoadError {
+    background-color: pink;
+    opacity: 0.5;
+    filter: alpha(opacity=50); /* IE */
+}
+
+/**
+ * Cursor styles
+ */
+
+.olCursorWait {
+    cursor: wait;
+}
+.olDragDown {
+    cursor: move;
+}
+.olDrawBox {
+    cursor: crosshair;
+}
+.olControlDragFeatureOver {
+    cursor: move;
+}
+.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
+    cursor: -moz-grabbing;
+}
+
+/**
+ * Layer switcher
+ */
+.olControlLayerSwitcher {
+    position: absolute;
+    top: 25px;
+    right: 0;
+    width: 20em;
+    font-family: sans-serif;
+    font-weight: bold;
+    margin-top: 3px;
+    margin-left: 3px;
+    margin-bottom: 3px;
+    font-size: smaller;
+    color: white;
+    background-color: transparent;
+}
+
+.olControlLayerSwitcher .layersDiv {
+    padding-top: 5px;
+    padding-left: 10px;
+    padding-bottom: 5px;
+    padding-right: 75px;
+    background-color: darkblue;
+    width: 100%;
+    height: 100%;
+}
+
+.olControlLayerSwitcher .layersDiv .baseLbl,
+.olControlLayerSwitcher .layersDiv .dataLbl {
+    margin-top: 3px;
+    margin-left: 3px;
+    margin-bottom: 3px;
+}
+
+.olControlLayerSwitcher .layersDiv .baseLayersDiv,
+.olControlLayerSwitcher .layersDiv .dataLayersDiv {
+    padding-left: 10px;
+}
+
+.olControlLayerSwitcher .maximizeDiv,
+.olControlLayerSwitcher .minimizeDiv {
+    top: 5px;
+    right: 0;
+    cursor: pointer;
+}
+
+.olBingAttribution {
+    color: #DDD;
+}
+.olBingAttribution.road {
+    color: #333;
+}
+
+.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite {
+    color: #EEE;
+}
+.olGoogleAttribution {
+    color: #333;
+}
+span.olGoogleAttribution a {
+    color: #77C;
+}
+span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
+    color: #EEE;
+}
+
+/**
+ * Editing and navigation icons.
+ * (using the editing_tool_bar.png sprint image)
+ */
+.olControlNavToolbar ,
+.olControlEditingToolbar {
+    margin: 5px 5px 0 0;
+}
+.olControlNavToolbar div,
+.olControlEditingToolbar div {
+    background-image: url("img/editing_tool_bar.png");
+    background-repeat: no-repeat;
+    margin: 0 0 5px 5px;
+    width: 24px;
+    height: 22px;
+    cursor: pointer
+}
+/* positions */
+.olControlEditingToolbar {
+    right: 0;
+    top: 0;
+}
+.olControlNavToolbar {
+    top: 295px;
+    left: 9px;
+}
+/* layouts */
+.olControlEditingToolbar div {
+    float: right;
+}
+/* individual controls */
+.olControlNavToolbar .olControlNavigationItemInactive,
+.olControlEditingToolbar .olControlNavigationItemInactive {
+    background-position: -103px -1px;
+}
+.olControlNavToolbar .olControlNavigationItemActive ,
+.olControlEditingToolbar .olControlNavigationItemActive  {
+    background-position: -103px -24px;
+}
+.olControlNavToolbar .olControlZoomBoxItemInactive {
+    background-position: -128px -1px;
+}
+.olControlNavToolbar .olControlZoomBoxItemActive  {
+    background-position: -128px -24px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePointItemInactive {
+    background-position: -77px -1px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePointItemActive {
+    background-position: -77px -24px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePathItemInactive {
+    background-position: -51px -1px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePathItemActive {
+    background-position: -51px -24px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{
+    background-position: -26px -1px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {
+    background-position: -26px -24px;
+}

frontend/src/pages/Home/styles/mixin.scss

@@ -0,0 +1,66 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+@mixin pct($pct) {
+  width: #{$pct};
+  position: relative;
+  margin: 0 auto;
+}
+
+@mixin triangle($width, $height, $color, $direction) {
+  $width: $width/2;
+  $color-border-style: $height solid $color;
+  $transparent-border-style: $width solid transparent;
+  height: 0;
+  width: 0;
+
+  @if $direction==up {
+    border-bottom: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==right {
+    border-left: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+
+  @else if $direction==down {
+    border-top: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==left {
+    border-right: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+}

frontend/src/pages/Home/styles/ruoyi.scss

@@ -0,0 +1,291 @@
+/**
+* 通用css样式布局处理
+* Copyright (c) 2019 ruoyi
+*/
+
+/** 基础通用 **/
+.pt5 {
+  padding-top: 5px;
+}
+
+.pr5 {
+  padding-right: 5px;
+}
+
+.pb5 {
+  padding-bottom: 5px;
+}
+
+.mt5 {
+  margin-top: 5px;
+}
+
+.mr5 {
+  margin-right: 5px;
+}
+
+.mb5 {
+  margin-bottom: 5px;
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+
+.ml5 {
+  margin-left: 5px;
+}
+
+.mt10 {
+  margin-top: 10px;
+}
+
+.mr10 {
+  margin-right: 10px;
+}
+
+.mb10 {
+  margin-bottom: 10px;
+}
+.ml10 {
+	margin-left: 10px;
+}
+
+.mt20 {
+  margin-top: 20px;
+}
+
+.mr20 {
+  margin-right: 20px;
+}
+
+.mb20 {
+  margin-bottom: 20px;
+}
+.ml20 {
+	margin-left: 20px;
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+}
+
+.el-message-box__status + .el-message-box__message{
+  word-break: break-word;
+}
+
+.el-dialog:not(.is-fullscreen) {
+  margin-top: 6vh !important;
+}
+
+.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
+  overflow: auto;
+  overflow-x: hidden;
+  max-height: 70vh;
+  padding: 10px 20px 0;
+}
+
+.el-table {
+  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
+    th {
+      word-break: break-word;
+      background-color: #f8f8f9;
+      color: #515a6e;
+      height: 40px;
+      font-size: 13px;
+    }
+  }
+
+  .el-table__body-wrapper {
+    .el-button [class*="el-icon-"] + span {
+      margin-left: 1px;
+    }
+  }
+}
+
+/** 表单布局 **/
+.form-header {
+  font-size: 15px;
+  color: #6379bb;
+  border-bottom: 1px solid #ddd;
+  margin: 8px 10px 25px 10px;
+  padding-bottom: 5px
+}
+
+/** 表格布局 **/
+.pagination-container {
+  position: relative;
+  height: 25px;
+  margin-bottom: 10px;
+  margin-top: 15px;
+  padding: 10px 20px !important;
+}
+
+/* tree border */
+.tree-border {
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  background: #FFFFFF none;
+  border-radius: 4px;
+}
+
+.pagination-container .el-pagination {
+  right: 0;
+  position: absolute;
+}
+
+@media (max-width: 768px) {
+  .pagination-container .el-pagination > .el-pagination__jump {
+    display: none !important;
+  }
+  .pagination-container .el-pagination > .el-pagination__sizes {
+    display: none !important;
+  }
+}
+
+.el-table .fixed-width .el-button--mini {
+  padding-left: 0;
+  padding-right: 0;
+  width: inherit;
+}
+
+/** 表格更多操作下拉样式 */
+.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
+	cursor: pointer;
+	margin-left: 5px;
+}
+
+.el-table .el-dropdown, .el-icon-arrow-down {
+  font-size: 12px;
+}
+
+.el-tree-node__content > .el-checkbox {
+  margin-right: 8px;
+}
+
+.list-group-striped > .list-group-item {
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.list-group {
+  padding-left: 0px;
+  list-style: none;
+}
+
+.list-group-item {
+  border-bottom: 1px solid #e7eaec;
+  border-top: 1px solid #e7eaec;
+  margin-bottom: -1px;
+  padding: 11px 0px;
+  font-size: 13px;
+}
+
+.pull-right {
+  float: right !important;
+}
+
+.el-card__header {
+  padding: 14px 15px 7px;
+  min-height: 40px;
+}
+
+.el-card__body {
+  padding: 15px 20px 20px 20px;
+}
+
+.card-box {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-bottom: 10px;
+}
+
+/* button color */
+.el-button--cyan.is-active,
+.el-button--cyan:active {
+  background: #20B2AA;
+  border-color: #20B2AA;
+  color: #FFFFFF;
+}
+
+.el-button--cyan:focus,
+.el-button--cyan:hover {
+  background: #48D1CC;
+  border-color: #48D1CC;
+  color: #FFFFFF;
+}
+
+.el-button--cyan {
+  background-color: #20B2AA;
+  border-color: #20B2AA;
+  color: #FFFFFF;
+}
+
+/* text color */
+.text-navy {
+  color: #1ab394;
+}
+
+.text-primary {
+  color: inherit;
+}
+
+.text-success {
+  color: #1c84c6;
+}
+
+.text-info {
+  color: #23c6c8;
+}
+
+.text-warning {
+  color: #f8ac59;
+}
+
+.text-danger {
+  color: #ed5565;
+}
+
+.text-muted {
+  color: #888888;
+}
+
+/* image */
+.img-circle {
+  border-radius: 50%;
+}
+
+.img-lg {
+  width: 120px;
+  height: 120px;
+}
+
+.avatar-upload-preview {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
+}
+
+/* 拖拽列样式 */
+.sortable-ghost {
+  opacity: .8;
+  color: #fff !important;
+  background: #42b983 !important;
+}
+
+.top-right-btn {
+  position: relative;
+  float: right;
+}

frontend/src/pages/Home/styles/sidebar.scss

@@ -0,0 +1,245 @@
+#app {
+
+  .main-container {
+    min-height: 100%;
+    transition: margin-left .28s;
+    margin-left: $base-sidebar-width;
+    position: relative;
+  }
+
+  .sidebarHide {
+    margin-left: 0 !important;
+  }
+
+  .sidebar-container {
+    -webkit-transition: width .28s;
+    transition: width 0.28s;
+    width: $base-sidebar-width !important;
+    background-color: $base-menu-background;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+
+    // reset element-ui css
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 16px;
+    }
+
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+
+    .el-menu-item,
+    .el-submenu__title {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: nowrap !important;
+    }
+
+
+    .el-menu-item.is-active {
+      color: #e78361 !important;
+      background-color: $base-sub-menu-hover !important; // 点击菜单的颜色
+      &:hover {
+      background-color: $base-sub-menu-hover !important;
+      }
+    }
+
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      font-family: '微软雅黑 Light' !important;
+      font-weight: bolder !important;
+      font-size: 13px !important;
+      &:hover {
+        background-color: #4293e4 !important;
+        color: #fff !important;
+      }
+    }
+
+    // & .theme-dark .is-active>.el-submenu__title {
+    //   color: $base-menu-color-active !important;
+    // }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      min-width: $base-sidebar-width !important;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.06) !important;
+      }
+    }
+
+    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
+    & .theme-dark .el-submenu .el-menu-item {
+      background-color: $base-sub-menu-background !important;
+      font-family: '微软雅黑 Light' !important;
+      font-weight: bolder !important;
+      font-size: 12px !important;
+
+      &:hover {
+        background-color: $base-sub-menu-hover !important;
+      }
+    }
+  }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: 54px !important;
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      &>.el-submenu__title {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+      }
+    }
+
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: $base-sidebar-width !important;
+  }
+
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform .28s;
+      width: $base-sidebar-width !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$base-sidebar-width, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+
+// when menu collapsed
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+  }
+
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      // you can use $subMenuHover
+      background-color: rgba(0, 0, 0, 0.06) !important;
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}

frontend/src/pages/Home/styles/transition.scss

@@ -0,0 +1,49 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform--move,
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

frontend/src/pages/Home/styles/variables.css

@@ -0,0 +1,25 @@
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+:export {
+  menuColor: #4DAEFE;
+  menuLightColor: rgba(0, 0, 0, 0.7);
+  menuColorActive: #4DAEFE;
+  menuBackground: #ffffff;
+  menuLightBackground: #4DAEFE;
+  subMenuBackground: #d5e3f3;
+  subMenuHover: #a1cef3;
+  sideBarWidth: 210px;
+  logoTitleColor: #4DAEFE;
+  logoLightTitleColor: #4DAEFE;
+}

frontend/src/pages/Home/styles/variables.min.css

@@ -0,0 +1 @@
+:export{menuColor:#4DAEFE;menuLightColor:rgba(0,0,0,0.7);menuColorActive:#4DAEFE;menuBackground:#fff;menuLightBackground:#4DAEFE;subMenuBackground:#d5e3f3;subMenuHover:#a1cef3;sideBarWidth:210px;logoTitleColor:#4DAEFE;logoLightTitleColor:#4DAEFE}

frontend/src/pages/Home/styles/variables.scss

@@ -0,0 +1,55 @@
+// base color
+$blue:#324157;
+$light-blue:#3A71A8;
+$red:#C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow:#FEC171;
+$panGreen: #30B08F;
+
+
+// 默认菜单主题风格
+$base-menu-color:#4DAEFE;
+$base-menu-color-active:#4DAEFE;
+$base-menu-background:#ffffff;
+$base-logo-title-color: #4DAEFE;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#4DAEFE;
+$base-logo-light-title-color: #4DAEFE;
+
+$base-sub-menu-background:#d5e3f3;
+$base-sub-menu-hover:#a1cef3;
+
+// 自定义暗色菜单风格
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+
+$base-sidebar-width: 210px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuColor: $base-menu-color;
+  menuLightColor: $base-menu-light-color;
+  menuColorActive: $base-menu-color-active;
+  menuBackground: $base-menu-background;
+  menuLightBackground: $base-menu-light-background;
+  subMenuBackground: $base-sub-menu-background;
+  subMenuHover: $base-sub-menu-hover;
+  sideBarWidth: $base-sidebar-width;
+  logoTitleColor: $base-logo-title-color;
+  logoLightTitleColor: $base-logo-light-title-color
+}

frontend/src/pages/PolicyLibrary/index.jsx

@@ -0,0 +1,393 @@
+import UploadFile from "../../components/Modals/ManageWorkspace/Documents/UploadFile";
+import PreLoader from "@/components/Preloader";
+import { memo, useEffect, useState } from "react";
+import FolderRow from "../../components/Modals/ManageWorkspace/Documents/Directory/FileRow";
+import System from "@/models/system";
+import { MagnifyingGlass, Plus, Trash } from "@phosphor-icons/react";
+import Document from "@/models/document";
+import showToast from "@/utils/toast";
+import FolderSelectionPopup from "../../components/Modals/ManageWorkspace/Documents/Directory/FolderSelectionPopup";
+import MoveToFolderIcon from "../../components/Modals/ManageWorkspace/Documents/Directory/MoveToFolderIcon";
+import { useModal } from "@/hooks/useModal";
+import NewFolderModal from "../../components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal";
+import debounce from "lodash.debounce";
+import { filterFileSearchResults } from "../../components/Modals/ManageWorkspace/Documents/Directory/utils";
+// import ContextMenu from "../../components/Modals/ManageWorkspace/Documents/Directory/ContextMenu";
+import { Tooltip } from "react-tooltip";
+import { safeJsonParse } from "@/utils/request";
+import { data } from "autoprefixer";
+function Directory({
+    files,
+    setFiles,
+    loading,
+    setLoading,
+    workspace,
+    fetchKeys,
+    selectedItems,
+    setSelectedItems,
+    setHighlightWorkspace,
+    moveToWorkspace,
+    setLoadingMessage,
+    loadingMessage,
+}) {
+    const [amountSelected, setAmountSelected] = useState(0);
+    const [showFolderSelection, setShowFolderSelection] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [dataTo, setFDataTo] = useState([]);
+    const [show, setShow] = useState(false);
+    const {
+        isOpen: isFolderModalOpen,
+        openModal: openFolderModal,
+        closeModal: closeFolderModal,
+    } = useModal();
+    //   const [contextMenu, setContextMenu] = useState({
+    //     visible: false,
+    //     x: 0,
+    //     y: 0,
+    //   });
+    useEffect(() => {
+        async function fetchUsers() {
+            const nodata = await System.localFiles();
+            const emo = nodata.items[0].items
+            setFDataTo(emo)
+            console.log(2222,emo);
+          }
+          fetchUsers();
+    }, []);
+
+    const deleteFiles = async (event) => {
+        event.stopPropagation();
+        if (
+            !window.confirm(
+                "Are you sure you want to delete these files and folders?\nThis will remove the files from the system and remove them from any existing workspaces automatically.\nThis action is not reversible."
+            )
+        ) {
+            return false;
+        }
+
+        try {
+            const toRemove = [];
+            const foldersToRemove = [];
+
+            for (const itemId of Object.keys(selectedItems)) {
+                for (const folder of files.items) {
+                    const foundItem = folder.items.find((file) => file.id === itemId);
+                    if (foundItem) {
+                        toRemove.push(`${folder.name}/${foundItem.name}`);
+                        break;
+                    }
+                }
+            }
+            for (const folder of files.items) {
+                if (folder.name === "custom-documents") {
+                    continue;
+                }
+
+                if (isSelected(folder.id, folder)) {
+                    foldersToRemove.push(folder.name);
+                }
+            }
+
+            setLoading(true);
+            setLoadingMessage(
+                `Removing ${toRemove.length} documents and ${foldersToRemove.length} folders. Please wait.`
+            );
+            await System.deleteDocuments(toRemove);
+            for (const folderName of foldersToRemove) {
+                await System.deleteFolder(folderName);
+            }
+
+            await fetchKeys(true);
+            setSelectedItems({});
+        } catch (error) {
+            console.error("Failed to delete files and folders:", error);
+        } finally {
+            setLoading(false);
+            setSelectedItems({});
+        }
+    };
+
+    const toggleSelection = (item) => {
+        setSelectedItems((prevSelectedItems) => {
+            const newSelectedItems = { ...prevSelectedItems };
+            if (item.type === "folder") {
+                // select all files in the folder
+                if (newSelectedItems[item.name]) {
+                    delete newSelectedItems[item.name];
+                    item.items.forEach((file) => delete newSelectedItems[file.id]);
+                } else {
+                    newSelectedItems[item.name] = true;
+                    item.items.forEach((file) => (newSelectedItems[file.id] = true));
+                }
+            } else {
+                // single file selections
+                if (newSelectedItems[item.id]) {
+                    delete newSelectedItems[item.id];
+                } else {
+                    newSelectedItems[item.id] = true;
+                }
+            }
+
+            return newSelectedItems;
+        });
+    };
+
+    // check if item is selected based on selectedItems state
+    const isSelected = (id, item) => {
+        if (item && item.type === "folder") {
+          if (!selectedItems[item.name]) {
+            return false;
+          }
+          return item.items.every((file) => selectedItems[file.id]);
+        }
+    
+        return !!selectedItems[id];
+      };
+    
+
+    const moveToFolder = async (folder) => {
+        const toMove = [];
+        for (const itemId of Object.keys(selectedItems)) {
+            for (const currentFolder of files.items) {
+                const foundItem = currentFolder.items.find(
+                    (file) => file.id === itemId
+                );
+                if (foundItem) {
+                    toMove.push({ ...foundItem, folderName: currentFolder.name });
+                    break;
+                }
+            }
+        }
+        setLoading(true);
+        setLoadingMessage(`Moving ${toMove.length} documents. Please wait.`);
+        const { success, message } = await Document.moveToFolder(
+            toMove,
+            folder.name
+        );
+        if (!success) {
+            showToast(`Error moving files: ${message}`, "error");
+            setLoading(false);
+            return;
+        }
+
+        if (success && message) {
+            // show info if some files were not moved due to being embedded
+            showToast(message, "info");
+        } else {
+            showToast(`Successfully moved ${toMove.length} documents.`, "success");
+        }
+        await fetchKeys(true);
+        setSelectedItems({});
+        setLoading(false);
+    };
+
+    const handleSearch = debounce((e) => {
+        const searchValue = e.target.value;
+        setSearchTerm(searchValue);
+    }, 500);
+
+    const filteredFiles =filterFileSearchResults(files, searchTerm) 
+    // console.log(114545,filteredFiles);
+
+    const handleContextMenu = (event) => {
+        event.preventDefault();
+        // setContextMenu({ visible: true, x: event.clientX, y: event.clientY });
+    };
+
+    const closeContextMenu = () => {
+        // setContextMenu({ visible: false, x: 0, y: 0 });
+    };
+
+    // 点击显示隐藏
+    const bindUrl = () =>{
+        setShow(!show)
+        console.log(show);
+    }
+    
+    // 返回首页
+   const bindHome = () =>{
+    window.location = '/'
+   } 
+
+    return (
+        <>
+            <div className="px-8 pb-8 w-[60%] mt-[30px] ml-[20px] pt-[10px]  shadow-lg shadow-[0_0_20px_0_#F4F6FC]   onContextMenu={handleContextMenu}">
+                <div className="flex flex-col gap-y-6">
+                    <div className="flex items-center justify-between w-[100%] px-5 relative">
+                        <h3 className="text-white text-base font-bold cursor-pointer text-[22px]"  onClick={bindHome}>首页</h3>
+                        <div className="relative">
+                            <input
+                                type="search"
+                                placeholder="搜寻文件"
+                                onChange={handleSearch}
+                                className="border-none search-input bg-[#ECEFF6] text-white placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg pl-9 pr-2.5 py-2 w-[600px] h-[32px] light:border-theme-modal-border light:border"
+                            />
+                            <MagnifyingGlass
+                                size={14}
+                                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white"
+                                weight="bold"
+                            />
+                        </div>
+                        <button
+                            className="border-none flex items-center gap-x-2 cursor-pointer px-[14px] py-[7px] -mr-[14px] rounded-lg hover:bg-theme-sidebar-subitem-hover z-20 relative"
+                            onClick={openFolderModal}
+                        >
+                            <Plus
+                                size={18}
+                                weight="bold"
+                                className="text-theme-text-primary light:text-[#0ba5ec]"
+                            />
+                            <div className="text-theme-text-primary light:text-[#0ba5ec] text-xs font-bold leading-[18px]">
+                                新文件夹
+                            </div>
+                        </button>
+                    </div>
+
+                    <div className="relative w-[100%] h-[500px] bg-[#ECEFF6]  rounded-2xl overflow-hidden border ">
+                        <div className="absolute top-0 left-0 right-0 z-10 rounded-t-2xl text-theme-text-primary text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-md ">
+                            <p className="col-span-6">Name</p>
+                        </div>
+
+                        <div className="overflow-y-auto h-full pt-8">
+                            {loading ? (
+                                <div className="w-full h-full flex items-center justify-center flex-col gap-y-5">
+                                    <PreLoader />
+                                    <p className="text-white text-sm font-semibold animate-pulse text-center w-1/3">
+                                        {loadingMessage}
+                                    </p>
+                                </div>
+                            ) : dataTo.length > 0 ? (
+                                dataTo.map((item, index) => (
+                                    <div  key={index} onClick={bindUrl}>
+                                        <div className="hover:bg-slate-400 pt-[10px] pb-[10px] pl-[30px] hover:text-[#fff]">{item.title}</div>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className="w-full h-full flex items-center justify-center">
+                                    <p className="text-white text-opacity-40 text-sm font-medium">
+                                        No Documents
+                                    </p>
+                                </div>
+                            )}
+                        </div>
+                        {show == true && (
+                            <div className="absolute bottom-[12px] left-0 right-0 flex justify-center pointer-events-none">
+                                <div className="mx-auto bg-white/40 light:bg-white rounded-lg py-1 px-2 pointer-events-auto light:shadow-lg">
+                                    <div className="flex flex-row items-center gap-x-2">
+                                        <button
+                                            // onClick={moveToWorkspace}
+                                            onMouseEnter={() => setHighlightWorkspace(true)}
+                                            onMouseLeave={() => setHighlightWorkspace(false)}
+                                            className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[30px] px-2.5 rounded-lg hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white"
+                                        >
+                                            设为私有
+                                        </button>
+                                        <button
+                                            // onClick={moveToWorkspace}
+                                            onMouseEnter={() => setHighlightWorkspace(true)}
+                                            onMouseLeave={() => setHighlightWorkspace(false)}
+                                            className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[30px] px-2.5 rounded-lg hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white"
+                                        >
+                                            设为公有
+                                        </button>
+                                        <button
+                                            // onClick={moveToWorkspace}
+                                            onMouseEnter={() => setHighlightWorkspace(true)}
+                                            onMouseLeave={() => setHighlightWorkspace(false)}
+                                            className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[30px] px-2.5 rounded-lg hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white"
+                                        >
+                                            添加标签
+                                        </button>
+                                        <div className="relative">
+                                            <button
+                                                // onClick={() =>
+                                                //     setShowFolderSelection(!showFolderSelection)
+                                                // }
+                                                className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[32px] w-[32px] rounded-lg text-dark-text hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white flex justify-center items-center group"
+                                            >
+                                                <MoveToFolderIcon className="text-dark-text light:text-[#026AA2] group-hover:text-white" />
+                                            </button>
+                                            {showFolderSelection && (
+                                                <FolderSelectionPopup
+                                                    folders={files.items.filter(
+                                                        (item) => item.type === "folder"
+                                                    )}
+                                                    onSelect={moveToFolder}
+                                                    onClose={() => setShowFolderSelection(false)}
+                                                />
+                                            )}
+                                        </div>
+                                        <button
+                                            // onClick={deleteFiles}
+                                            className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[32px] w-[32px] rounded-lg text-dark-text hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white flex justify-center items-center"
+                                        >
+                                            <Trash size={18} weight="bold" />
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+
+                    <UploadFile
+                        workspace={workspace}
+                        fetchKeys={fetchKeys}
+                        setLoading={setLoading}
+                        setLoadingMessage={setLoadingMessage}
+                    />
+                </div>
+                {isFolderModalOpen && (
+                    <div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-30">
+                        <NewFolderModal
+                            closeModal={closeFolderModal}
+                            files={files}
+                            setFiles={setFiles}
+                        />
+                    </div>
+                )}
+                {/* <ContextMenu
+          contextMenu={contextMenu}
+          closeContextMenu={closeContextMenu}
+          files={files}
+          selectedItems={selectedItems}
+          setSelectedItems={setSelectedItems}
+        /> */}
+            </div>
+            <DirectoryTooltips />
+        </>
+    );
+}
+
+/**
+ * Tooltips for the directory components. Renders when the directory is shown
+ * or updated so that tooltips are attached as the items are changed.
+ */
+function DirectoryTooltips() {
+    return (
+        <Tooltip
+            id="directory-item"
+            place="bottom"
+            delayShow={800}
+            className="tooltip invert light:invert-0 z-99 max-w-[200px]"
+            render={({ content }) => {
+                const data = safeJsonParse(content, null);
+                if (!data) return null;
+                return (
+                    <div className="text-xs">
+                        <p className="text-white light:invert font-medium">{data.title}</p>
+                        <div className="flex mt-1 gap-x-2">
+                            <p className="">
+                                Date: <b>{data.date}</b>
+                            </p>
+                            <p className="">
+                                Type: <b>{data.extension}</b>
+                            </p>
+                        </div>
+                    </div>
+                );
+            }}
+        />
+    );
+}
+
+export default memo(Directory);

frontend/src/pages/Tendency/index.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from 'react';
+
+function IframeComponent() {
+    const iframeRef = useRef(null);
+
+    useEffect(() => {
+        if (iframeRef.current) {
+            iframeRef.current.contentWindow.addEventListener('message', (event) => {
+                console.log(11111, event.data);
+            });
+        }
+
+        return () => {
+            if (iframeRef.current) {
+                iframeRef.current.contentWindow.removeEventListener('message', (event) => {
+                    console.log('Received message:', event.data);
+                });
+            }
+        };
+    }, []); // 空依赖数组确保只运行一次清理操作
+
+    return (
+        <div>
+            <iframe ref={iframeRef} src="https://example.com"  className='w-[100%] h-screen'/>;
+        </div>
+    )
+}
+
+export default IframeComponent;

frontend/src/utils/paths.js

@@ -4,9 +4,23 @@ export default {
   home: () => {
     return "/";
   },
+  Main: () => {
+    return "/Main";
+  },
   login: (noTry = false) => {
     return `/login${noTry ? "?nt=1" : ""}`;
   },
+  homeType:{
+    PolicyLibrary: () => {
+      return "/home/PolicyLibrary";
+    },
+    Tendency: () => {
+      return "/home/Tendency";
+    },
+    DataAnalysis: () => {
+      return "/home/DataAnalysis";
+    },
+  },
   onboarding: {
     home: () => {
       return "/onboarding";
@@ -77,7 +91,7 @@ export default {
     return `${API_BASE}/docs`;
   },
   settings: {
-    users: () => {
+    users: () => {{}
       return `/settings/users`;
     },
     section: () => {

package.json

@@ -30,5 +30,9 @@
   "private": false,
   "devDependencies": {
     "cross-env": "^7.0.3"
+  },
+  "dependencies": {
+    "antd": "^5.24.2",
+    "moment": "^2.30.1"
   }
 }