update setting func && panel

app/package.json

@@ -18,7 +18,7 @@
  "dependencies": {
   "chalk": "^2.3.0",
   "devtron": "^1.4.0",
-  "electron-config": "^1.0.0",
+  "electron-store": "^1.3.0",
   "electron-debug": "^1.4.0",
   "electron-fetch": "^1.1.0",
   "electron-is": "^2.4.0",

package.json

@@ -70,7 +70,6 @@
 		"electron-is-accelerator": "^0.1.2",
 		"electron-packager": "^10.1.0",
 		"electron-release": "^2.2.0",
-		"electron-store": "^1.3.0",
 		"eslint": "^4.13.1",
 		"eslint-config-prettier": "^2.9.0",
 		"eslint-config-standard": "^10.2.1",

src/main/configs/index.js

@@ -0,0 +1,41 @@
+import ElectronStore from 'electron-store';
+import _ from 'lodash';
+import { Log } from '../utils';
+
+const Store = new ElectronStore();
+const DefaultConfig = {
+  windowsSize: [375, 650],
+  playerSize: [375, 210],
+  opacity: 1,
+};
+
+const Configs = {
+  default: DefaultConfig,
+  store: _.assign(DefaultConfig, Store.store),
+  restore: () => (Store.store = DefaultConfig),
+  get: key => {
+    const config = Store.has(key) ? Store.get(key) : DefaultConfig[key];
+    Log(`[app][setting] get ${key}: ${config}`);
+    return config;
+  },
+  set: (key, value) => {
+    if (typeof key === 'object') {
+      Store.set(key);
+      Log(`[app][setting] set ${key}`);
+    } else {
+      if (typeof value === 'object') {
+        const oldConfig = Store.has(key) ? Store.get(key) : {};
+        Store.set(key, _.assign(oldConfig, value));
+      } else {
+        Store.set(key, value);
+      }
+      Log(`[app][setting] set ${key}: ${value}`);
+    }
+  },
+  delete: key => {
+    Store.delete(key);
+    Log(`[app][setting] delete ${key}`);
+  },
+};
+
+export default Configs;

src/main/index.js

@@ -2,10 +2,10 @@ import { app, BrowserWindow } from 'electron';
 import is from 'electron-is';
 import { join } from 'path';
 import { Log } from './utils';
+import Configs from './configs';
 import debug from 'electron-debug';
 import * as application from './services/app';
 import * as window from './services/window';
-import * as config from './configs/config';
 
 Log('[app] start 😘');
 
@@ -44,6 +44,4 @@ global.services = {
   window,
 };
 
-global.configs = {
-  config,
-};
+global.configs = Configs;

src/main/services/loadIpc.js

@@ -1,29 +1,40 @@
 import { Log } from '../utils';
+import Configs from '../configs';
 import { ipcMain as ipc, shell } from 'electron';
 
-let size = [375, 210];
+let windowsSize = Configs.get('windowsSize');
+let playerSize = Configs.get('playerSize');
 
 export default win => {
+  // 设置
+  ipc.on('config-set', (event, data) => {
+    Configs.set(data);
+  });
+
+  // console 转发
   ipc.on('console-msg', (event, data) => {
     Log(`[webview]${data}`);
   });
+  // 浏览器打开外链
   ipc.on('link', (event, data) => {
     shell.openExternal(data);
   });
+  // 关闭按钮处理
   ipc.on('close-main-window', () => {
     win.minimize();
   });
+  // 界面尺寸
   ipc.on('video-on', () => {
-    win.setSize(size[0], size[1], true);
+    win.setSize(playerSize[0], playerSize[1], true);
     win.setResizable(true);
   });
   ipc.on('video-off', () => {
-    win.setSize(375, 650, true);
+    win.setSize(windowsSize[0], windowsSize[1], true);
     win.setResizable(false);
   });
   ipc.on('resize', () => {
-    size = win.getSize();
-    Log('[app][resize]', size);
+    playerSize = win.getSize();
+    Log('[app][resize]', playerSize);
   });
   Log('[app][ipc] load');
 };

src/renderer/routes/Setting/About/index.js

@@ -8,7 +8,7 @@ export default () => {
   const Github = () => Link('https://github.com/canisminor1990/bilibili-client');
   return (
     <div>
-      <div className={style.band}>
+      <div onClick={Github} className={style.band}>
         <img className={style.logo} alt="logo" src="img/icon.png" />
         <div className={style.text}>Bilibili Mini-Client</div>
         <div className={style.version}>
@@ -23,7 +23,6 @@ export default () => {
           MIT开源于<a onClick={Github}>Github</a>
         </div>
       </div>
-      <div className={style.copyright}>Copyright © ️CanisMinor 2018</div>
     </div>
   );
 };

src/renderer/routes/Setting/About/index.scss

@@ -1,10 +1,11 @@
 @import 'import';
 .band {
+  cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 24rem;
+  padding: 4rem 0;
 }
 .info {
   color: #666;
@@ -16,12 +17,6 @@
   justify-content: center;
   box-shadow: 0 2px 8px rgba(#000, 0.1);
 }
-.copyright {
-  color: #ccc;
-  margin-top: 1.5rem;
-  text-align: center;
-  font-size: 0.8rem;
-}
 .logo {
   width: 8rem;
   height: 8rem;

src/renderer/routes/Setting/Basic/index.js

@@ -1,13 +1,59 @@
+import { Component } from 'react';
+import _ from 'lodash';
+import { Configs } from '../../../utils';
+import { Input, Button, message } from 'antd';
 import style from './index.scss';
 
-export default () => {
-  return (
-    <div className={style.box}>
-      Comming Soon{' '}
-      <span role="img" aria-label="love">
-        😘
-      </span>{' '}
-      ...
-    </div>
-  );
-};
+const InputGroup = Input.Group;
+
+class Basic extends Component {
+  state = {
+    configs: Configs.store,
+  };
+
+  onClickSave = () => {
+    message.success('保存成功！');
+  };
+  onClickRestore = () => {
+    message.success('重置成功！');
+  };
+
+  render() {
+    const { configs } = this.state;
+    const SettingInput = (key, title) => {
+      const defaultValue = configs[key];
+      let InputBox;
+      if (_.isArray(defaultValue)) {
+        InputBox = [
+          <Input key={1} style={{ width: '50%' }} defaultValue={configs[key][0]} />,
+          <Input key={2} style={{ width: '50%' }} defaultValue={configs[key][1]} />,
+        ];
+      } else {
+        InputBox = <Input defaultValue={configs[key]} />;
+      }
+      return (
+        <div className={style.cell}>
+          <div className={style.title}>{title}:</div>
+          <InputGroup compact={true}>{InputBox}</InputGroup>
+        </div>
+      );
+    };
+    return (
+      <div className={style.box}>
+        {SettingInput('playerSize', '播放器尺寸')}
+        {SettingInput('windowsSize', '主窗口尺寸')}
+        {SettingInput('opacity', '透明度')}
+        <div className={style.btnGroup}>
+          <Button className={style.btn} type="primary" size="large" onClick={this.onClickSave}>
+            保存设置
+          </Button>
+          <Button className={style.btn} onClick={this.onClickRestore} size="large">
+            还原默认
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Basic;

src/renderer/routes/Setting/Basic/index.scss

@@ -1,10 +1,36 @@
 @import 'import';
 
 .box {
-  height: 30rem;
-  font-size: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+}
+
+.cell {
+  display: flex;
+  margin-bottom: 1rem;
+}
+
+.title {
+  height: 2rem;
+  width: 8rem;
   display: flex;
   align-items: center;
-  justify-content: center;
-  color: #999;
+  margin-right: 0.5rem;
+}
+
+.btnGroup {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.btn {
+  border-radius: 3rem;
+  margin-bottom: 0.8rem;
+  &:first-child {
+    border: none;
+    background: linear-gradient(45deg, $c-primary, lighten($c-primary, 10%));
+    box-shadow: 0 4px 8px rgba($c-primary, 0.15);
+  }
 }

src/renderer/routes/Setting/index.js

@@ -11,7 +11,7 @@ const State = state => ({ a: 1 });
 const Setting = () => {
   return (
     <div className={style.view}>
-      <Tabs defaultActiveKey="2">
+      <Tabs defaultActiveKey="1">
         <TabPane tab="常规" key="1">
           <div className={style.content}>
             <Baisc />
@@ -23,6 +23,7 @@ const Setting = () => {
           </div>
         </TabPane>
       </Tabs>
+      <div className={style.copyright}>Copyright © ️ CanisMinor 2018</div>
     </div>
   );
 };

src/renderer/routes/Setting/index.scss

@@ -21,3 +21,17 @@
     box-shadow: $bar-shadow;
   }
 }
+.copyright {
+  color: #ccc;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 4em;
+  font-size: 0.8rem;
+  position: fixed;
+  background: #fff;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+}

src/renderer/utils.js

@@ -1,4 +1,4 @@
-import { ipcRenderer as ipc } from 'electron';
+import { ipcRenderer as ipc, remote } from 'electron';
 
 const UserAgent = {
   desktop: 'bilimini Desktop like Mozilla/233 (Chrome and Safari)',
@@ -8,9 +8,10 @@ const AvPrefix = 'https://www.bilibili.com/video/av';
 
 const Log = msg => {
   console.log(msg);
-  if ($isDev) ipc.send('console-msg', msg); // eslint-disable-line
+	if ($isDev) ipc.send('console-msg', msg); // eslint-disable-line
 };
 
 const Platform = navigator.platform.indexOf('Mac') > -1 ? 'mac' : 'win';
+const Configs = remote.getGlobal('configs');
 
-export { UserAgent, AvPrefix, Log, Platform };
+export { UserAgent, AvPrefix, Log, Platform, Configs };