feat: 🎸 添加logo/修改Readme/修改样式

README.md

@@ -1,20 +1,42 @@
-# Hyrule
+## Hyrule
 
 An `electron` app
 
-## Feature
-
 基于`github`来管理图片和`issues`文章。
 
+### Image
+
+使用`github`仓库来做图床
+
+- 上传图片
+- 删除图片
+- 图片目录管理
+
+### Issues
+
+使用`github issues`来做博客, 可以[参考](https://zwing.site/posts/417715171.html)
+
+- 创建`issues`
+- 编辑`issues`
+- 删除`issues`
+- 将图片上传到默认图床
+
+### Develop
+
+- `yarn dev:web` 启动`web`服务
+- `yarn dev:main` 编译主程序
+- `yarn dev:electron` 启动`electron`
+
+### Build
+
+`yarn build`
+
 ### Demo
 
+![](./example/0.png)
 ![](./example/1.png)
 ![](./example/2.png)
 ![](./example/3.png)
 ![](./example/4.png)
-
-### Develop
-
-- `yarn dev:web`
-- `yarn dev:main`
-- `yarn dev:electron`
+![](./example/5.png)
+![](./example/6.png)

build/prod.conf.js

@@ -11,6 +11,7 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const path = require('path')
+
 const webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  module: {
@@ -140,7 +141,7 @@ const webpackConfig = merge(baseWebpackConfig, {
  // ignore: ['.*']
  // }
  // ]),
- new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
+ new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ]
 })
 module.exports = webpackConfig

electronrc.js

@@ -25,10 +25,10 @@ module.exports = {
  ]
  },
  mac: {
- icon: 'build/icons/icon.icns'
+ icon: 'build/icons/icon.png'
  },
  win: {
- icon: 'build/icons/icon.ico',
+ icon: 'build/icons/icon.png',
  target: 'nsis',
  legalTrademarks: 'Eyas Personal'
  },

global.d.ts

@@ -1,8 +1,11 @@
-
 declare module '*.svg' {
  const content: any
  export default content
 }
+declare module '*.png' {
+ const content: any
+ export default content
+}
 
 declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 

package.json

@@ -10,33 +10,20 @@
  "build:main": "tsc -p tsconfig.electron.json",
  "dev:electron": "nodemon --watch ./dist/main --exec electron ./dist/main/main.js",
  "build:package": "electron-builder --config ./electronrc.js -mwl",
- "lint": "tslint --fix --format codeFrame --project ."
+ "lint": "tslint --fix --format codeFrame --project .",
+ "build": "yarn build:web && yarn build:main && yarn build:package"
  },
  "author": {
  "email": "[email protected]",
  "name": "zWing"
  },
  "dependencies": {
- "@zzwing/react-image": "^1.1.7",
- "antd": "^3.17.0",
- "classnames": "^2.2.6",
  "consola": "^2.6.2",
- "dayjs": "^1.8.14",
+ "electron-is-dev": "^1.1.0",
  "electron-store": "^3.2.0",
  "electron-util": "^0.11.0",
- "gatsby-remark-prismjs": "^3.2.9",
- "lite-queue": "^1.0.1",
- "monaco-editor": "^0.17.0",
  "node-fetch": "^2.5.0",
- "prismjs": "^1.16.0",
- "qs": "^6.7.0",
- "rc-animate": "^2.8.2",
- "react": "^16.8.6",
- "react-dom": "^16.8.6",
- "react-router-dom": "^5.0.0",
- "remark": "^10.0.1",
- "remark-html": "^9.0.0",
- "url-join": "^4.0.0"
+ "qs": "^6.7.0"
  },
  "devDependencies": {
  "@babel/core": "^7.4.4",
@@ -48,39 +35,54 @@
  "@types/react": "^16.8.16",
  "@types/react-dom": "^16.8.4",
  "@types/react-router-dom": "^4.3.2",
+ "@zzwing/react-image": "^1.1.7",
+ "antd": "^3.17.0",
  "autoprefixer": "^9.5.1",
  "awesome-typescript-loader": "^5.2.1",
  "babel-loader": "^8.0.5",
  "babel-plugin-import": "^1.11.0",
+ "classnames": "^2.2.6",
  "css-loader": "^2.1.1",
  "cssnano": "^4.1.10",
+ "dayjs": "^1.8.14",
  "electron": "^5.0.1",
  "electron-builder": "^20.40.2",
  "electron-debug": "^3.0.0",
  "electron-devtools-installer": "^2.2.4",
- "electron-is-dev": "^1.1.0",
  "electron-reloader": "^0.2.0",
  "fork-ts-checker-notifier-webpack-plugin": "^1.0.0",
  "fork-ts-checker-webpack-plugin": "^1.3.0",
+ "gatsby-remark-prismjs": "^3.2.9",
  "html-webpack-plugin": "^3.2.0",
  "less": "^3.9.0",
  "less-loader": "^5.0.0",
+ "lite-queue": "^1.0.1",
  "mini-css-extract-plugin": "^0.6.0",
+ "monaco-editor": "^0.17.0",
  "monaco-editor-webpack-plugin": "^1.7.0",
  "nodemon": "^1.19.0",
  "optimize-css-assets-webpack-plugin": "^5.0.1",
  "post-loader": "^2.0.0",
  "postcss-loader": "^3.0.0",
  "postcss-safe-parser": "^4.0.1",
+ "prismjs": "^1.16.0",
+ "rc-animate": "^2.8.2",
+ "react": "^16.8.6",
  "react-dev-utils": "^9.0.0",
+ "react-dom": "^16.8.6",
  "react-hot-loader": "^4.8.4",
+ "react-router-dom": "^5.0.0",
+ "remark": "^10.0.1",
+ "remark-html": "^9.0.0",
  "style-loader": "^0.23.1",
  "style-resources-loader": "^1.2.1",
  "tslint": "5.14.0",
  "tslint-config-prettier": "^1.18.0",
  "tslint-eslint-rules": "^5.4.0",
  "tslint-react": "^4.0.0",
  "typescript": "^3.4.5",
+ "url-join": "^4.0.0",
+ "url-loader": "^2.0.0",
  "webpack": "^4.30.0",
  "webpack-cli": "^3.3.2",
  "webpack-dev-server": "^3.3.1",

src/main/menu.ts

@@ -91,7 +91,7 @@ export function createMenu() {
  role: 'help',
  submenu: [
  {
- label: 'Learn More',
+ label: 'about',
  click() {
  shell.openExternal('https://github.com/zWingz/Hyrule')
  }

src/renderer/App.tsx

@@ -39,6 +39,9 @@ class App extends PureComponent<{}, State> {
  }
  componentDidMount() {
  ipcRenderer.on('set-access-token', async (e, t) => {
+ this.setState({
+ isLogin: true
+ })
  this.valid(t)
  })
  if (token) {
@@ -62,11 +65,11 @@ class App extends PureComponent<{}, State> {
  ipcRenderer.send('open-auth-window')
  }
  logout = () => {
- store.clear()
  this.setState({
  loaded: false,
  isLogin: false
  })
+ store.clear()
  }
  render() {
  const { avatar, owner, loaded, isLogin } = this.state

src/renderer/component/RepoWrapper/index.tsx

@@ -48,6 +48,11 @@ export function RepoWrapper<P = any>(
  ImageKit.setRepo(repo)
  }
  }
- return <Page {...p} repo={repoInfo} />
+ useEffect(() => {
+ if(!repoInfo) {
+ p.history.replace('/')
+ }
+ }, [])
+ return repoInfo ? <Page {...p} repo={repoInfo} /> : null
  }
 }

src/renderer/pages/Images/index.tsx

@@ -6,7 +6,8 @@ import {
  message as Message,
  Spin,
  Empty,
- Switch
+ Switch,
+ Tooltip
 } from 'antd'
 import cls from 'classnames'
 import join from 'url-join'
@@ -28,6 +29,7 @@ import { GitRepo } from 'src/renderer/http/types'
 type Prop = {
  repo: GitRepo
  className?: string
+ onClose?: () => void
 }
 
 type State = {
@@ -123,7 +125,7 @@ export class ImagesPageBase extends PureComponent<Prop, State> {
  abortToken = abort
  })
  const { images, dir } = dataJson
- if(!this._isMounted) return
+ if (!this._isMounted) return
  this.setState({
  // images: [],
  images: images.map(each => ({
@@ -327,14 +329,23 @@ export class ImagesPageBase extends PureComponent<Prop, State> {
  dragover,
  checkedToggle
  } = this.state
- const { repo, className } = this.props
- console.log(repo);
+ const { repo, className, onClose } = this.props
  const keys = Object.keys(dir)
  const empty = !images.length
  return (
  <div className={cls('page-container album-container', className)}>
  <div className='album-title flex align-center'>
  <div className='page-title mr-auto'>{repo.name}</div>
+ {onClose && (
+ <Tooltip title='close dashboard' mouseEnterDelay={0.3}>
+ <Icon
+ onClick={onClose}
+ className='mr10'
+ style={{ fontSize: '22px' }}
+ type='menu-unfold'
+ />
+ </Tooltip>
+ )}
  <Button
  icon='folder-add'
  className='mr10'

src/renderer/pages/Issues/index.tsx

@@ -15,7 +15,7 @@ import {
  setCacheDefUploadRepo,
  store
 } from 'src/renderer/utils/store'
-import { Spin, Select, Icon } from 'antd'
+import { Spin, Select, Icon, Tooltip } from 'antd'
 import { ImagesPageBase } from '../Images'
 import { empty } from 'src/renderer/utils/helper'
 import { ImageKit } from 'src/renderer/utils/imageKit'
@@ -51,7 +51,6 @@ class IssuesPageBase extends PureComponent<Prop, State> {
  }
  const repo = imagesRepo.filter(each => each.name === uploadRepo)[0]
  cache = repo
- console.log(repo)
  return repo
  }
  constructor(p: Prop) {
@@ -136,27 +135,33 @@ class IssuesPageBase extends PureComponent<Prop, State> {
  <div className='page-container'>
  <div className='flex'>
  <div className='page-title mr-auto'>{this.props.repo.name}</div>
- {uploadRepo && (
- <div className='flex-center'>
- <Icon
- type='menu-fold'
- className='mr10'
- onClick={this.onShowImageChange}
- style={{ fontSize: '22px' }}
- />
+ <div className='flex-center'>
+ {uploadRepo && (
+ <Tooltip title='open images dashboard' mouseEnterDelay={0.3}>
+ <Icon
+ type='menu-fold'
+ className='mr10'
+ onClick={this.onShowImageChange}
+ style={{ fontSize: '22px' }}
+ />
+ </Tooltip>
+ )}
+ <Tooltip
+ title='Select a repo to upload image'
+ mouseEnterDelay={0.5}>
  <Select
- placeholder='Select'
+ placeholder='Select a upload repo'
  value={uploadRepo}
- style={{ minWidth: '120px' }}
+ style={{ minWidth: '180px' }}
  onChange={this.onRepoSelectChange}>
  {imagesRepo.map(each => (
  <Option key={each.name} value={each.name}>
  {each.name}
  </Option>
  ))}
  </Select>
- </div>
- )}
+ </Tooltip>
+ </div>
  </div>
  {loading && (
  <Spin delay={250} className='spin-loading absolute-full' />
@@ -175,10 +180,16 @@ class IssuesPageBase extends PureComponent<Prop, State> {
  <div
  className={cls('issues-images-container absolute-full', {
  hidden: !condition
- })}
- onClick={this.onShowImageChange}>
+ })}>
+ <div
+ className='issues-images-mask absolute-full'
+ onClick={this.onShowImageChange}
+ />
  <ImagesPageBase
- className={cls('issues-images')}
+ onClose={this.onShowImageChange}
+ className={cls('issues-images', {
+ hidden: !condition
+ })}
  repo={this.uploadRepoInfo}
  />
  </div>