From 9545e9feb639bf872749a4daa04687e4f838dc4c Mon Sep 17 00:00:00 2001
From: ali322 <ali322@gmail.com>
Date: Tue, 13 Jul 2021 11:40:07 +0800
Subject: [PATCH] fix style

---
 package.json                                  |  2 +-
 renderer/component/confirm.tsx                |  4 ++--
 renderer/component/icon.tsx                   |  9 +++++---
 renderer/config/template.ts                   | 23 ++++++++++---------
 renderer/locale/en_us.ts                      |  4 +++-
 renderer/locale/zh_cn.ts                      |  6 +++--
 renderer/scene/index/setup/index.tsx          |  2 +-
 renderer/scene/index/workbench/index.tsx      |  3 +--
 .../scene/index/workbench/project-drawer.tsx  |  4 ++--
 .../scene/index/workbench/project-extra.tsx   |  8 +++----
 .../scene/index/workbench/project-form.tsx    |  5 ++--
 renderer/scene/index/workbench/project.tsx    |  4 ++--
 renderer/style/component.less                 |  2 +-
 renderer/style/reboot.less                    | 13 ++++++++++-
 14 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index 2d7ae34..9d66330 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nva-client",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "gui client form nva",
   "main": "dist/main/index.js",
   "scripts": {
diff --git a/renderer/component/confirm.tsx b/renderer/component/confirm.tsx
index 05c5d8a..8c3553b 100644
--- a/renderer/component/confirm.tsx
+++ b/renderer/component/confirm.tsx
@@ -28,9 +28,9 @@ export default class Confirm extends React.Component<any, any> {
       }}>
         <div className="modal-mask"></div>
         <div className="modal-inner px-20 py-12">
-          <p className="m-0 text-center py-8">{this.content}</p>
+          <p className="m-0 text-center py-8 text-gray text-md">{this.content}</p>
           <div className="text-right mt-12">
-            <button className="btn btn-primary px-16 mr-12" onClick={() => {
+            <button className="btn btn-success px-16 mr-12" onClick={() => {
               this.ok()
               this.handleClose()
             }}>
diff --git a/renderer/component/icon.tsx b/renderer/component/icon.tsx
index f96f9df..e50fb8a 100644
--- a/renderer/component/icon.tsx
+++ b/renderer/component/icon.tsx
@@ -3,11 +3,14 @@ import * as React from 'react'
 interface Props {
   type: string,
   size?: number,
-  color?: string
+  color?: string,
+  hide?: boolean
+  className?: string,
+  onClick?: (event: any) => void
 }
 
-export default ({ type, size = 14, color = 'inhreit' }: Props) => {
+export default ({ type, size = 14, color = 'inhreit', hide = false, className = '', onClick = () => {} }: Props) => {
   return (
-    <i className={`icon ion-md-${type}`} style={{ fontSize: `${size}px`, color }}></i>
+    <i className={`icon ion-md-${type} ${className}`} style={{ fontSize: `${size}px`, color, visibility: hide ? 'hidden' : 'visible' }} onClick={onClick}></i>
   )
 }
diff --git a/renderer/config/template.ts b/renderer/config/template.ts
index 1520be8..36e12d7 100644
--- a/renderer/config/template.ts
+++ b/renderer/config/template.ts
@@ -2,18 +2,19 @@ import t from '../locale'
 
 export default (locale: string): Record<string, string> => {
   const message = t(locale)
+  let prefix = 'ali322'
   return {
-    [`${message.spa}(vue + vuex + vue-router)`]: 'ali322/frontend-boilerplate#vue-spa',
-    [`${message.micro}(vue + vuex + vue-router)`]: 'ali322/frontend-boilerplate#micro',
-    [`${message.spa}(react + redux + react-router)`]: 'ali322/frontend-boilerplate#spa',
-    [`${message.spa}(react + mobx + react-router)`]: 'ali322/frontend-boilerplate#mobx-spa',
-    [`${message.mpa}(vue + vuex)`]: 'ali322/frontend-boilerplate#vue',
-    [`${message.mpa}(react + redux)`]: 'ali322/frontend-boilerplate#master',
-    [`${message.spa}(react + mobx)`]: 'ali322/frontend-boilerplate#mobx',
+    [`${message.spa}(vue + vuex + vue-router)`]: `${prefix}/frontend-boilerplate#vue-spa`,
+    [`${message.micro}(vue + vuex + vue-router)`]: `${prefix}/frontend-boilerplate#micro`,
+    [`${message.spa}(react + redux + react-router)`]: `${prefix}/frontend-boilerplate#spa`,
+    [`${message.spa}(react + mobx + react-router)`]: `${prefix}/frontend-boilerplate#mobx-spa`,
+    [`${message.mpa}(vue + vuex)`]: `${prefix}/frontend-boilerplate#vue`,
+    [`${message.mpa}(react + redux)`]: `${prefix}/frontend-boilerplate#master`,
+    [`${message.spa}(react + mobx)`]: `${prefix}/frontend-boilerplate#mobx`,
 
-    [`SSR ${message.spa}(koa + react + redux + react-router)`]: 'ali322/ssr-boilerplate#spa',
-    [`SSR ${message.spa}(koa + vue + vuex + vue-router)`]: 'ali322/ssr-boilerplate#vue-spa',
-    [`SSR ${message.mpa}(react+redux)`]: 'ali322/ssr-boilerplate#master',
-    [`SSR ${message.mpa}(vue+vuex)`]: 'ali322/ssr-boilerplate#vue'
+    [`SSR ${message.spa}(koa + react + redux + react-router)`]: `${prefix}/ssr-boilerplate#spa`,
+    [`SSR ${message.spa}(koa + vue + vuex + vue-router)`]: `${prefix}/ssr-boilerplate#vue-spa`,
+    [`SSR ${message.mpa}(react+redux)`]: `${prefix}/ssr-boilerplate#master`,
+    [`SSR ${message.mpa}(vue+vuex)`]: `${prefix}/ssr-boilerplate#vue`
   }
 }
diff --git a/renderer/locale/en_us.ts b/renderer/locale/en_us.ts
index 9de86fc..e4e22c5 100644
--- a/renderer/locale/en_us.ts
+++ b/renderer/locale/en_us.ts
@@ -57,7 +57,9 @@ export default {
   submit: 'Submit',
   confirm: 'Confirm',
   cancel: 'Cancel',
-  initProjectFailed: 'Init project failed',
+  yes: 'Yes',
+  nope: 'No',
+  createProjectFailed: 'create project failed',
   update: 'Update',
   installDepsNow: 'Install Dependencies Now?',
   latestVersion: 'Latest Version',
diff --git a/renderer/locale/zh_cn.ts b/renderer/locale/zh_cn.ts
index bb7c429..fb25daa 100644
--- a/renderer/locale/zh_cn.ts
+++ b/renderer/locale/zh_cn.ts
@@ -25,7 +25,7 @@ export default {
   project: '项目',
   settings: '设置',
   // project
-  createProject: '创建项目',
+  createProject: '创建新项目',
   creating: '创建中',
   openProject: '打开项目',
   runDev: '运行开发',
@@ -57,7 +57,9 @@ export default {
   confirm: '确定',
   submit: '提交',
   cancel: '取消',
-  initProjectFailed: '初始化项目失败',
+  yes: '是',
+  nope: '否',
+  createProjectFailed: '创建项目失败',
   update: '更新',
   installDepsNow: '是否立刻安装依赖包?',
   latestVersion: '最新版本',
diff --git a/renderer/scene/index/setup/index.tsx b/renderer/scene/index/setup/index.tsx
index 74c5202..444e53c 100644
--- a/renderer/scene/index/setup/index.tsx
+++ b/renderer/scene/index/setup/index.tsx
@@ -53,7 +53,7 @@ export default class Setup extends React.Component<any, any> {
         </div>
         <Modal active={this.modalVisible} width={300} onClose={() => this.modalVisible = false}>
           <div className="py-24">
-            <p className="text-center">{message.resetAppNow}</p>
+            <p className="text-center text-md">{message.resetAppNow}</p>
             <div className="d-flex flex-row justify-content-center">
               <button className="btn btn-success px-12 mr-12"
                 onClick={() => {
diff --git a/renderer/scene/index/workbench/index.tsx b/renderer/scene/index/workbench/index.tsx
index e3c9223..1fc6fde 100644
--- a/renderer/scene/index/workbench/index.tsx
+++ b/renderer/scene/index/workbench/index.tsx
@@ -47,7 +47,6 @@ export default class WorkBench extends React.Component<any, any> {
     if (index < 0) {
       addHistory(project)
     }
-    this.project.wrappedInstance.stop()
     saveOpened(project)
     this.modalActived = false
     this.drawerActived = false
@@ -140,7 +139,7 @@ export default class WorkBench extends React.Component<any, any> {
         {this.renderOperations()}
         {this.renderProject()}
         <Modal width={600} active={this.modalActived} onClose={() => this.modalActived = false}>
-          <ProjectForm onCreate={this.createProject} onFail={() => this.toast.error(message.initProjectFailed)} onCancel={() => this.modalActived = false}></ProjectForm>
+          <ProjectForm onCreate={this.createProject} onFail={() => this.toast.error(message.createProjectFailed)} onCancel={() => this.modalActived = false}></ProjectForm>
         </Modal>
         <Toast ref={(ref: any) => this.toast = ref}></Toast>
       </div>
diff --git a/renderer/scene/index/workbench/project-drawer.tsx b/renderer/scene/index/workbench/project-drawer.tsx
index cd08588..f915bc5 100644
--- a/renderer/scene/index/workbench/project-drawer.tsx
+++ b/renderer/scene/index/workbench/project-drawer.tsx
@@ -39,7 +39,7 @@ export default ({ active = false, opened, histories, children, toggleActive, del
                     toggleActive()
                   }}>
                   <div className="history-head w-100 position-relative">
-                    <span className={`flex-1 d-block text-base pr-20 line-height-25 text-truncate ${opened.path === history.path ? 'text-gray font-weight-bold' : 'text-muted'}`}>{history.name}</span>
+                    <span className={`flex-1 d-block text-l pr-20 line-height-25 text-truncate ${opened.path === history.path ? 'text-gray font-weight-bold' : 'text-muted'}`}>{history.name}</span>
                     <button className="delete-history p-0 border-0 outline-0 bg-transparent"
                       onClick={(e: any) => {
                         e.stopPropagation()
@@ -48,7 +48,7 @@ export default ({ active = false, opened, histories, children, toggleActive, del
                       <Icon type="trash" size={14}></Icon>
                     </button>
                   </div>
-                  <p className={`m-0 text-sm text-truncate ${opened.path === history.path ? 'text-gray' : 'text-muted'}`}>{history.path}</p>
+                  <p className={`m-0 py-4 text-sm text-truncate ${opened.path === history.path ? 'text-gray' : 'text-muted'}`}>{history.path}</p>
                 </span>
               ))}
             </div>
diff --git a/renderer/scene/index/workbench/project-extra.tsx b/renderer/scene/index/workbench/project-extra.tsx
index e74a3bc..b31f611 100644
--- a/renderer/scene/index/workbench/project-extra.tsx
+++ b/renderer/scene/index/workbench/project-extra.tsx
@@ -69,12 +69,12 @@ export default class ProjectExtra extends React.Component<any, any> {
     if (this.modalType === ModalType.addDep) {
       return (
         <div className="py-24 w-100">
-          <div className="input-wrapper mb-12 px-20" style={{ width: '220px' }}>
+          <div className="input-wrapper mb-12 px-20" style={{ width: '280px' }}>
             <input type="text" placeholder={message.typePackage} className="input input--sm" onChange={(e: any) => {
               this.name = e.target.value
             }}/>
           </div>
-          <div className="input-wrapper px-20 mb-20" style={{ width: '220px' }}>
+          <div className="input-wrapper px-20 mb-20" style={{ width: '280px' }}>
             <input type="text" placeholder={message.typeVersion} className="input input--sm" onChange={(e: any) => {
               this.version = e.target.value
             }}/>
@@ -136,11 +136,11 @@ export default class ProjectExtra extends React.Component<any, any> {
                 installPKG()
                 this.modalVisible = false
               }}>
-              <span>{message.submit}</span>
+              <span>{message.yes}</span>
             </button>
             <button className="btn btn-secondary px-12"
               onClick={() => this.modalVisible = false}>
-              <span>{message.cancel}</span>
+              <span>{message.nope}</span>
             </button>
           </div>
         </div>
diff --git a/renderer/scene/index/workbench/project-form.tsx b/renderer/scene/index/workbench/project-form.tsx
index 65bb220..0523efa 100644
--- a/renderer/scene/index/workbench/project-form.tsx
+++ b/renderer/scene/index/workbench/project-form.tsx
@@ -86,7 +86,8 @@ export default class ProjectForm extends React.Component<any, any> {
           path: this.saved
         }
         onCreate(project)
-      } catch (_) {
+      } catch (e) {
+        console.log(e)
         onFail()
       } finally {
         this.downloading = false
@@ -108,7 +109,7 @@ export default class ProjectForm extends React.Component<any, any> {
       <div className="h-100 d-flex flex-column pt-28 pb-12">
         <div className="header-border bg-white pb-12 d-flex">
           <div className="flex-1 text-center">
-            <h1 className="text-xl">{message.initProject}</h1>
+            <h1 className="text-xl">{message.createProject}</h1>
           </div>
         </div>
         <div className="flex-1 d-flex justify-content-start align-items-start p-20 pb-0">
diff --git a/renderer/scene/index/workbench/project.tsx b/renderer/scene/index/workbench/project.tsx
index 5141383..9c2465c 100644
--- a/renderer/scene/index/workbench/project.tsx
+++ b/renderer/scene/index/workbench/project.tsx
@@ -157,8 +157,8 @@ export default class Project extends React.Component<any, any> {
         <div className="d-flex justify-content-center align-items-center pl-32">
           <div className="text-xl pr-2">{name}</div>
         </div>
-        <button disabled={running} onClick={toggleDrawer} className="outline-0 pl-8 pt-4 border-0 bg-transparent line-height-25 cursor-pointer">
-          <Icon type="arrow-dropdown"></Icon>
+        <button disabled={running || working} onClick={toggleDrawer} className="outline-0 pl-8 pt-4 border-0 bg-transparent line-height-25 cursor-pointer">
+          <Icon type="arrow-dropdown" hide={running || working}></Icon>
         </button>
         <div className="flex-1 text-left pl-12">
           <button
diff --git a/renderer/style/component.less b/renderer/style/component.less
index f01c29d..590f432 100644
--- a/renderer/style/component.less
+++ b/renderer/style/component.less
@@ -218,7 +218,7 @@
     }
     .form-group__content{
       flex: 0 1 80%;
-      padding-left: 15px;
+      // padding-left: 15px;
     }
   }
 }
diff --git a/renderer/style/reboot.less b/renderer/style/reboot.less
index 8c6a80e..54cf4bb 100644
--- a/renderer/style/reboot.less
+++ b/renderer/style/reboot.less
@@ -15,6 +15,7 @@ html {
   font-size: 16px;
   line-height: 1.15;
   box-sizing: border-box;
+  color: rgba(0,0,0,.65);
 }
 
 *,
@@ -28,6 +29,12 @@ a {
   text-decoration: none;
   outline: none;
 }
+h1,h2,h3,h4,h5,h6{
+  color: rgba(0,0,0,.65);
+  margin-top: 0;
+  margin-bottom: 4px;
+  font-weight: 400;
+}
 
 ol ol,
 ul ul,
@@ -63,7 +70,7 @@ ul ol {
   color: #878e90;
 }
 .text-gray{
-  color: #465154;
+  color: rgba(0,0,0,.65);
 }
 .text-center{
   text-align: center;
@@ -82,8 +89,12 @@ ul ol {
 .text-sm{
   font-size: 12px;
 }
+.text-l{
+  font-size: 18px;
+}
 .text-xl{
   font-size: 20px;
+  line-height: 28px;
 }
 .font-weight-bold{
   font-weight: 600;