feat: user settings

2024-05-30 09:26:09 +08:00
parent a99b58fbb4
commit 69f354b278
14 changed files with 382 additions and 22 deletions
@@ -0,0 +1,28 @@
+.editor-wrap {
+  border-radius: 16px;
+  overflow: hidden;
+  .editor-header {
+    display: flex;
+    padding: 6px 10px;
+    justify-content: space-between;
+    align-items: center;
+    background-color: rgb(56, 56, 56);
+    .ant-select-selector {
+      background-color: rgba(255, 255, 255, 0.09) !important;
+      color: rgba(255, 255, 255, 0.7);
+      .ant-select-selection-item {
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+    .ant-select-arrow {
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+  //  set scrollbar style
+
+  .scrollbar {
+    .slider {
+      border-radius: 6px;
+    }
+  }
+}
@@ -0,0 +1,54 @@
+import { Select } from 'antd';
+import React from 'react';
+import CopyButton from '../copy-button';
+import './index.less';
+
+interface EditorwrapProps {
+  header?: React.ReactNode;
+  children: React.ReactNode;
+  showHeader?: boolean;
+  copyText: string;
+  langOptions?: { label: string; value: string }[];
+  onChangeLang?: (value: string) => void;
+}
+const EditorWrap: React.FC<EditorwrapProps> = ({
+  header,
+  children,
+  copyText,
+  langOptions,
+  onChangeLang,
+  showHeader = true
+}) => {
+  const handleChangeLang = (value: string) => {
+    onChangeLang && onChangeLang(value);
+  };
+  const renderHeader = () => {
+    if (header) {
+      return <div className="editor-header">{header}</div>;
+    }
+    if (showHeader) {
+      return (
+        <div className="editor-header">
+          <Select
+            defaultValue="JSON"
+            style={{ width: 120 }}
+            size="middle"
+            variant="filled"
+            options={langOptions}
+            onChange={handleChangeLang}
+          ></Select>
+          <CopyButton text={copyText} />
+        </div>
+      );
+    }
+    return null;
+  };
+  return (
+    <div className="editor-wrap">
+      {renderHeader()}
+      <div className="editor-content">{children}</div>
+    </div>
+  );
+};
+
+export default EditorWrap;
@@ -0,0 +1,27 @@
+import { Button, Space } from 'antd';
+
+type FormButtonsProps = {
+  onOk: () => void;
+  onCancel: () => void;
+  cancelText?: string;
+  okText?: string;
+};
+const FormButtons: React.FC<FormButtonsProps> = ({
+  onOk,
+  onCancel,
+  cancelText,
+  okText
+}) => {
+  return (
+    <Space size={40} style={{ marginTop: '80px' }}>
+      <Button type="primary" onClick={onOk} style={{ width: '120px' }}>
+        {okText || '保存'}
+      </Button>
+      <Button onClick={onCancel} style={{ width: '98px' }}>
+        {cancelText || '取消'}
+      </Button>
+    </Space>
+  );
+};
+
+export default FormButtons;