feat: add options page && popup page

src/_locales/en/messages.json

@@ -8,7 +8,25 @@
   "manifest_iconTitle": {
     "message": "[loading……]"
   },
+  "global_btn_ok": {
+    "message": "ok"
+  },
   "component_developerCollabrationNetwork_title": {
     "message": "Developer Collabration Network"
+  },
+  "options_header_settings": {
+    "message": "Settings"
+  },
+  "options_header_commandLine": {
+    "message": "Commandline"
+  },
+  "options_toggle_checkForUpdates": {
+    "message": "check updates"
+  },
+  "options_toggle_checkForUpdates_onText": {
+    "message": "on"
+  },
+  "options_toggle_checkForUpdates_offText": {
+    "message": "off"
   }
 }

src/_locales/zh_CN/messages.json

@@ -8,7 +8,25 @@
   "manifest_iconTitle": {
     "message": "[载入中……]"
   },
+  "global_btn_ok": {
+    "message": "确定"
+  },
   "component_developerCollabrationNetwork_title": {
     "message": "开发人员合作网络图"
+  },
+  "options_header_settings": {
+    "message": "设置"
+  },
+  "options_header_commandLine": {
+    "message": "命令行"
+  },
+  "options_toggle_checkForUpdates": {
+    "message": "自动检测更新"
+  },
+  "options_toggle_checkForUpdates_onText": {
+    "message": "开"
+  },
+  "options_toggle_checkForUpdates_offText": {
+    "message": "关"
   }
 }

src/components/OptionsPage/index.css

@@ -0,0 +1,11 @@
+.container{
+    width: 98vw;
+    min-height: calc(100vh - 100px);
+    margin-top: 10px;
+    opacity: 1;
+    background: white;
+    box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
+    transition: all 0.2s ease 0s;
+    border-radius: 3px;
+    overflow: hidden;
+}

src/components/OptionsPage/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+  Pivot, PivotItem, PivotLinkFormat,Stack, Toggle,DefaultButton
+} from 'office-ui-fabric-react';
+import { initializeIcons } from '@uifabric/icons';
+import {getMessageI18n} from '../../utils/utils'
+import './index.css';
+
+initializeIcons();
+
+const OptionsPage: React.FC<{}> = () => {
+
+    return(
+      <Stack>
+        <Stack horizontalAlign="center">
+          <h1>HYPERTRONS</h1>
+          <sub>version 0.1.2</sub>
+        </Stack>
+        <Stack horizontalAlign="center">
+          <div className="container">
+            <Pivot
+              style={{margin:"3px"}}
+              linkFormat={PivotLinkFormat.tabs}
+            >
+              <PivotItem headerText={getMessageI18n("options_header_settings")} itemIcon="Settings">
+                <Stack
+                  horizontalAlign="space-around"
+                  verticalAlign='center'
+                  style={{margin:"5px",padding:"3px"}}
+                  tokens={{
+                    childrenGap: 10
+                  }}
+                >
+                  <Stack
+                    horizontalAlign="start"
+                    verticalAlign='center'
+                    horizontal
+                    tokens={{
+                      childrenGap: 10
+                    }}
+                  >
+                    <DefaultButton
+                      style={{width:100}}
+                      onClick={()=>{}}
+                    >
+                      {getMessageI18n("global_btn_ok")}
+                    </DefaultButton>
+                  </Stack>
+                  <Toggle
+                    label={getMessageI18n('options_toggle_checkForUpdates')}
+                    defaultChecked
+                    onText={getMessageI18n('options_toggle_checkForUpdates_onText')}
+                    offText={getMessageI18n('options_toggle_checkForUpdates_offText')}
+                    onChange={(e,checked)=>{
+
+                    }}
+                  />
+
+                </Stack>
+              </PivotItem>
+              <PivotItem headerText={getMessageI18n("options_header_commandLine")} itemIcon="CommandPrompt">
+                <Stack
+                  horizontalAlign="space-around"
+                  verticalAlign='center'
+                  style={{margin:"5px",padding:"3px"}}
+                  tokens={{
+                    childrenGap: 10
+                  }}
+                >
+
+                </Stack>
+              </PivotItem>
+            </Pivot>
+          </div>
+        </Stack>
+      </Stack>
+    )
+}
+
+export default OptionsPage;

src/components/PopupPage/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {
+  Stack
+} from 'office-ui-fabric-react';
+import { initializeIcons } from '@uifabric/icons';
+import './index.css';
+
+initializeIcons();
+
+const PopupPage: React.FC<{}> = () => {
+
+    return(
+        <Stack horizontalAlign="center">
+          <h1>Hypertrons</h1>
+        </Stack>
+    )
+}
+
+export default PopupPage;

src/manifest.json

@@ -1,6 +1,7 @@
 {
   "name": "Hypertrons",
   "default_locale": "zh_CN",
+  "options_page": "options.html",
   "icons": {
     "128": "128.png"
   },

src/pages/Options/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from 'react-dom';
+import OptionsPage from '../../components/OptionsPage/index'
 
 import './index.css';
 
-render(<div />, window.document.querySelector('#app-container'));
+render(<OptionsPage />, window.document.querySelector('#app-container'));

src/pages/Popup/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from 'react-dom';
+import PopupPage from '../../components/PopupPage/index'
 
 import './index.css';
 
-render(<div />, window.document.querySelector('#app-container'));
+render(<PopupPage />, window.document.querySelector('#app-container'));

src/utils/utils.ts

@@ -39,3 +39,7 @@ export async function chrome_get(key:string){
     })
   });
 }
+
+export function getMessageI18n(key:string){
+  return chrome.i18n.getMessage(key);
+}