feat: themes page

package.json

@@ -21,6 +21,7 @@
     "@icon-park/react": "^1.4.2",
     "echarts": "^5.4.1",
     "framer-motion": "^8.4.2",
+    "js-yaml": "^4.1.0",
     "md5": "2.3.0",
     "ofetch": "^1.0.0",
     "react": "18.2.0",
@@ -36,6 +37,7 @@
     "@innei/eslint-config-react-ts": "0.9.7",
     "@innei/eslint-config-ts": "0.9.7",
     "@originjs/vite-plugin-commonjs": "1.0.3",
+    "@types/js-yaml": "^4.0.5",
     "@types/md5": "2.3.2",
     "@types/node": "18.11.18",
     "@types/react": "18.0.27",

src/components/universal/CheckBox/index.module.css

@@ -0,0 +1,67 @@
+.checkbox {
+  margin-top: 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.label {
+  position: relative;
+  display: inline-block;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.check {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 18px;
+  height: 18px;
+  border: 2px solid #ccc;
+  border-radius: 2px;
+  background-color: var(--background-color);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.name {
+  font-size: 14px;
+  color: var(--text-color);
+  position: relative;
+  left: 30px;
+  top: -2px;
+}
+
+.input:checked~.check {
+  background-color: #2196F3;
+  border-color: #2196F3;
+}
+
+.input:checked~.check:before {
+  content: "";
+  position: absolute;
+  display: block;
+}
+
+.input:checked~.check:before {
+  content: "";
+  position: absolute;
+  display: block;
+  left: 4px;
+  top: 0px;
+  width: 6px;
+  height: 12px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}

src/components/universal/CheckBox/index.tsx

@@ -0,0 +1,60 @@
+import styles from "./index.module.css"
+import { useState, useEffect } from "react";
+import { ModalBody } from "../Modal";
+
+export interface CheckBoxProps {
+  selected?: any[] // 选中的值
+  value: { // 选项
+    name: string;
+    key: string;
+    value: any;
+  }[];
+  onChange: (checked: any[]) => void;
+  label?: string; // 标签
+  [key: string]: any;
+}
+
+/**
+ * A checkbox component 多选框组件
+ */
+export const CheckBox = (props: CheckBoxProps) => {
+  const { selected = [], value, onChange, label, ...rest } = props;
+  const [checked, setChecked] = useState<any>(selected);
+
+  useEffect(() => {
+    setChecked(selected);
+  }, [selected]);
+
+  const handleChange = (e: any) => {
+    const { checked: _checked, value } = e.target;
+    if (_checked) {
+      setChecked([...checked, value]);
+    }
+    if (!_checked) {
+      setChecked(checked.filter((item: any) => item !== value));
+    }
+    onChange(checked);
+  };  
+
+  return (
+    <>
+      {label && <ModalBody>{label}</ModalBody>}
+      <div className={styles.checkbox}>
+        {value.map((item) => (
+          <label key={item.key} className={styles.label}>
+            <input
+              type="checkbox"
+              className={styles.input}
+              checked={checked.includes(item.value)}
+              value={item.value}
+              onChange={handleChange}
+              {...rest}
+            />
+            <span className={styles.check}></span>
+            <span className={styles.name}>{item.name}</span>
+          </label>
+        ))}
+      </div>
+    </>
+  );
+};

src/components/universal/Color/index.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.color {
+  border-radius: 4px;
+  display: inline-block;
+  height: 20px;
+  width: 50px;
+  margin-top: 16px;
+  margin-left: 10px;
+}
+
+/* 移除掉原生的边框 */
+.color {
+  background-color: initial;
+}

src/components/universal/Color/index.tsx

@@ -0,0 +1,25 @@
+import styles from "./index.module.css"
+import { ModalBody } from "../Modal";
+
+export interface ColorProps {
+  value: string;
+  label?: string;
+  onChange: (value: string) => void;
+}
+
+export const Color = (props: ColorProps) => {
+  const { value, onChange, label } = props;
+  return (
+    <div className={styles.container}>
+      {label && <ModalBody>{label}</ModalBody>}
+      <input
+        type="color"
+        className={styles.color}
+        defaultValue={value}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+      />
+    </div>
+  );
+}

src/components/universal/Radio/index.module.css

@@ -0,0 +1,67 @@
+.radio {
+  margin-top: 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.label {
+  position: relative;
+  display: inline-block;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.check {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 18px;
+  height: 18px;
+  border: 2px solid #ccc;
+  border-radius: 9999px;
+  background-color: var(--background-color);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.name {
+  font-size: 14px;
+  color: var(--text-color);
+  position: relative;
+  left: 30px;
+  top: -2px;
+}
+
+.input:checked~.check {
+  background-color: #2196F3;
+  border-color: #2196F3;
+}
+
+.input:checked~.check:before {
+  content: "";
+  position: absolute;
+  display: block;
+  left: 2.2px;
+  top: 2.2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 9999px;
+  background: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+  .input:checked~.check {
+    background-color: #2196F3;
+    border-color: #2196F3;
+  }
+}

src/components/universal/Radio/index.tsx

@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react"
+import { ModalBody } from "../Modal"
+import styles from "./index.module.css"
+
+export interface RadioProps {
+  selected?: any
+  value: {
+    name: string
+    key: string
+    value: any
+  }[]
+  onChange: (checked: any) => void
+  label?: string
+  [key: string]: any
+}
+
+/**
+ * A radio component 单选框组件
+ * @param props
+ */
+export const Radio = (props: RadioProps) => {
+  const { selected, value, onChange, label, ...rest } = props
+  const [checked, setChecked] = useState<any>(selected)
+
+  useEffect(() => {
+    setChecked(selected)
+  }, [selected])
+
+  const handleChange = (e: any) => {
+    const { value } = e.target
+    setChecked(value)
+    onChange(value)
+  }
+
+  return (
+    <>
+      {label && <ModalBody>{label}</ModalBody>}
+      <div className={styles.radio}>
+        {value.map((item) => (
+          <label key={item.key} className={styles.label}>
+            <input
+              type="radio"
+              className={styles.input}
+              checked={checked === item.value}
+              value={item.value}
+              onChange={handleChange}
+              {...rest}
+            />
+            <span className={styles.check}></span>
+            <span className={styles.name}>{item.name}</span>
+          </label>
+        ))}
+      </div>
+    </>
+  )
+}