同步换肤功能；

zhangzzzz
1 parent e36427d3
Showing 5 changed files with 213 additions and 2 deletions
src/components/Common/PersonCenter/PersonCenter.js
src/components/Common/PersonCenter/SkinChangeModal copy.js
src/components/Common/PersonCenter/SkinChangeModal.js
src/global.less
src/skinchange.less
@@ -30,7 +30,7 @@ import OnlineUser from &#39;@/assets/onlineUser.svg&#39;;
 // import StaticEditTable from '@/components/Common/CommonTable';
 import * as commonServices from '@/services/services';
 import commonConfig from '../../../utils/config';
-// import SkinChangeModal from './SkinChangeModal';
+import SkinChangeModal from './SkinChangeModal';
 import MenuSearchPopovor from './MenuSearchPopovor';
 import SwitchCompanyAndLanguage from './SwitchCompanyAndLanguage';
+/* eslint-disable */
+import React, { useEffect, useRef, useState } from "react";
+import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
+import styles from "@/routes/indexPage.less";
+
+const skinList = [
+  {
+    name: "default",
+    color1: "#383d41",
+    color2: "#303538"
+  },
+  {
+    name: "color1",
+    color1: "#6e5064",
+    color2: "#b482a4"
+  },
+  {
+    name: "color2",
+    color1: "#0010fc",
+    color2: "#515bf3"
+  },
+  {
+    name: "color3",
+    color1: "#433598",
+    color2: "#7160d5"
+  },
+  {
+    name: "color4",
+    color1: "#e1408e",
+    color2: "#c56f98"
+  },
+  {
+    name: "color5",
+    color1: "#f46b5f",
+    color2: "#e69892"
+  },
+  {
+    name: "color6",
+    color1: "#fa375c",
+    color2: "#eb8498"
+  },
+  {
+    name: "color7",
+    color1: "#6f41ed",
+    color2: "#8b70d5"
+  },
+  {
+    name: "color8",
+    color1: "#fd4138",
+    color2: "#e3736e"
+  }
+];
+
+const SkinChangeModal = props => {
+  const { skinChangeModalVisible, handleCancel } = props;
+  const [currentSkin, setCurrentSkin] = useState(
+    localStorage.getItem("xly-skin") || "default"
+  );
+  const oldSkin = useRef(null);
+  useEffect(() => {
+    // getComputedStyle(oBody).getPropertyValue('--xly-login-header-logo')
+    const oBody = document.querySelector("body");
+    oldSkin.current = oBody.getAttribute("data-skin");
+  }, []);
+
+  const handleCancelSelf = () => {
+    const oBody = document.querySelector("body");
+    oBody.setAttribute("data-skin", oldSkin.current);
+    handleCancel();
+  };
+
+  const handleOk = () => {
+    localStorage.setItem("xly-skin", currentSkin);
+    handleCancel();
+  };
+
+  const handleChooseSkin = ({ name }) => {
+    setCurrentSkin(name);
+    const oBody = document.querySelector("body");
+    oBody.setAttribute("data-skin", name);
+  };
+
+  return skinChangeModalVisible ? (
+    <AntdDraggableModal
+      title={"主题肤色"}
+      visible={skinChangeModalVisible}
+      width={600}
+      onOk={handleOk}
+      onCancel={handleCancelSelf}
+    >
+      <div className={styles.skinChangeModal}>
+        {skinList.map(item => {
+          const { color1, color2, name } = item;
+          return (
+            <div
+              className="skinChangeOption"
+              onClick={() => {
+                handleChooseSkin(item);
+              }}
+            >
+              <div className="skinChangeOptionLeft">
+                <div
+                  className="skinChangeOptionColor2"
+                  style={{ background: color2 }}
+                />
+              </div>
+              <div className="skinChangeOptionRight">
+                <div
+                  className="skinChangeOptionColor1"
+                  style={{ background: color1 }}
+                />
+                {currentSkin === name ? (
+                  <div className="skinChangeChecked">✓</div>
+                ) : (
+                  ""
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </AntdDraggableModal>
+  ) : (
+    ""
+  );
+};
+
+export default SkinChangeModal;
 /* eslint-disable */
 import React, { useEffect, useRef, useState } from "react";
 import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
-import styles from "@/routes/IndexPage.less";
+import styles from "@/routes/indexPage.less";
 const skinList = [
   {
@@ -2,6 +2,7 @@
 @import "./index.less";
 @import "./default.less";
 @import "./variable.less";
+@import "./skinchange.less";
 .ant-card-head {
   border-bottom: 1px solid #d9d9d9;
+:root {
+  body[data-skin=default] {
+    --xly-skin-header-color: #383d41; // 顶部导航栏背景色
+    --xly-skin-menu-color: #343848; // 左侧一级菜单背景色
+    --xly-skin-menu-span-color: #ccd6df; // 菜单字体色
+    --xly-skin-submenu-color: #303538; // 展开后二级菜单背景色
+    --xly-skin-active-color: #1890FF; // 激活色
+    --xly-skin-modal-bg-color: #646464; // modal弹窗header背景色
+  }
+
+  body[data-skin=color1] {
+    --xly-skin-header-color: #6e5064;
+    --xly-skin-menu-color: #b482a4;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #7c5a71;
+    --xly-skin-active-color: #84c015;
+    --xly-skin-modal-bg-color: #6e5064;
+  }
+
+  body[data-skin=color2] {
+    --xly-skin-header-color: #0010fc;
+    --xly-skin-menu-color: #515bf3;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #656ab3;
+    --xly-skin-active-color: #dd8547;
+    --xly-skin-modal-bg-color: #0010fc;
+  }
+
+  body[data-skin=color3] {
+    --xly-skin-header-color: #433598;
+    --xly-skin-menu-color: #7160d5;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #624fce;
+    --xly-skin-active-color: #dd8547;
+    --xly-skin-modal-bg-color: #433598;
+  }
+
+  body[data-skin=color4] {
+    --xly-skin-header-color: #e1408e;
+    --xly-skin-menu-color: #c56f98;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #cd5790;
+    --xly-skin-active-color: #03bcff;
+    --xly-skin-modal-bg-color: #e1408e;
+  }
+
+  body[data-skin=color5] {
+    --xly-skin-header-color: #f46b5f;
+    --xly-skin-menu-color: #e69892;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #c6655e;
+    --xly-skin-active-color: #cdd32b;
+    --xly-skin-modal-bg-color: #f46b5f;
+  }
+
+  body[data-skin=color6] {
+    --xly-skin-header-color: #fa375c;
+    --xly-skin-menu-color: #eb8498;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #cc576f;
+    --xly-skin-active-color: #cdd32b;
+    --xly-skin-modal-bg-color: #fa375c;
+  }
+
+  body[data-skin=color7] {
+    --xly-skin-header-color: #6f41ed;
+    --xly-skin-menu-color: #8b70d5;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: rgb(76, 82, 169);
+    --xly-skin-active-color: #cdd32b;
+    --xly-skin-modal-bg-color: #6f41ed;
+  }
+
+  body[data-skin=color8] {
+    --xly-skin-header-color: #fd4138;
+    --xly-skin-menu-color: #e3736e;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #c3514b;
+    --xly-skin-active-color: #cdd32b;
+    --xly-skin-modal-bg-color: #fd4138;
+  }
+}
 \ No newline at end of file