Add setting popup component

source/Component/CommandBar/CommandBar.tsx

@@ -4,7 +4,7 @@ import { LocalizationTooltipHost } from "../Localization/LocalizationTooltipHost
 import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { AllI18nKeys } from "../Localization/Localization";
-import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
+import { SettingPopup } from "@Component/SettingPopup/SettingPopup";
 import { Component, ReactNode } from "react";
 import { MouseMod } from "@GLRender/ClassicRenderer";
 import "./CommandBar.scss";
@@ -73,7 +73,7 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
                     iconName: "Settings",
                     i18NKey: "Command.Bar.Setting.Info",
                     click: () => {
-                        // this.props.status?.popup.showPopup(ConfirmPopup, {});
+                        this.props.status?.popup.showPopup(SettingPopup, {});
                     }
                 })}
             </div>

source/Component/SettingPopup/SettingPopup.scss

@@ -0,0 +1,6 @@
+@import "../Theme/Theme.scss";
+
+div.setting-popup {
+	width: 100%;
+	height: 100%;
+}

source/Component/SettingPopup/SettingPopup.tsx

@@ -0,0 +1,34 @@
+import { Component, ReactNode } from "react";
+import { Popup } from "@Context/Popups";
+import { Theme } from "@Component/Theme/Theme";
+import { Localization } from "@Component/Localization/Localization";
+import "./SettingPopup.scss";
+
+interface ISettingPopupProps {
+
+}
+
+class SettingPopup extends Popup<ISettingPopupProps> {
+
+	public minWidth: number = 400;
+	public minHeight: number = 300;
+	public width: number = 600;
+	public height: number = 450;
+
+	public onRenderHeader(): ReactNode {
+		return <Localization i18nKey="Popup.Setting.Title"/>
+	}
+
+	public render(): ReactNode {
+		return <SettingPopupComponent {...this.props}/>
+	}
+}
+
+class SettingPopupComponent extends Component<ISettingPopupProps> {
+
+	public render(): ReactNode {
+		return <Theme className="setting-popup"></Theme>
+	}
+}
+
+export { SettingPopup };

source/Localization/EN-US.ts

@@ -51,6 +51,7 @@ const EN_US = {
     "Popup.Action.Objects.Confirm.Title": "Confirm Delete",
     "Popup.Action.Objects.Confirm.Delete": "Delete",
     "Popup.Delete.Objects.Confirm": "Are you sure you want to delete this object(s)? The object is deleted and cannot be recalled.",
+    "Popup.Setting.Title": "Preferences setting",
     "Build.In.Label.Name.All.Group": "All group",
     "Build.In.Label.Name.All.Range": "All range",
     "Common.No.Data": "No Data",

source/Localization/ZH-CN.ts

@@ -51,6 +51,7 @@ const ZH_CN = {
     "Popup.Action.Objects.Confirm.Title": "删除确认",
     "Popup.Action.Objects.Confirm.Delete": "删除",
     "Popup.Delete.Objects.Confirm": "你确定要删除这个(些)对象吗？对象被删除将无法撤回。",
+    "Popup.Setting.Title": "首选项设置",
     "Build.In.Label.Name.All.Group": "全部群",
     "Build.In.Label.Name.All.Range": "全部范围",
     "Common.No.Data": "暂无数据",