feat: ui optimize

funnyzak · Nov 12, 2021 · 11e6ae4 · 11e6ae4
1 parent 830d52c
commit 11e6ae4
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 19 deletions.
diff --git a/public/index.html b/public/index.html
@@ -14,23 +14,22 @@
     <meta name="branch" content="<%= gitInfo.BRANCH %>" />
     <meta name="hash" content="<%= gitInfo.COMMITHASH %>" />
   </head>
+
   <body>
     <div id="root"></div>
     <script>
       function initTopDrag() {
-        const topDiv = document.createElement('div'); // 创建节点
-        topDiv.style.position = 'fixed'; // 一直在顶部
+        const topDiv = document.createElement('div');
+        topDiv.style.position = 'fixed';
         topDiv.style.top = '0';
         topDiv.style.left = '0';
-        topDiv.style.height = '20px'; // 顶部20px才可拖动
-        topDiv.style.width = '100%'; // 宽度100%
-        topDiv.style.zIndex = '9999'; // 悬浮于最外层
+        topDiv.style.height = '20px';
+        topDiv.style.width = '100%';
+        topDiv.style.zIndex = '9999';
         topDiv.style.pointerEvents = 'none'; // 用于点击穿透
-        // @ts-ignore
         topDiv.style['-webkit-user-select'] = 'none'; // 禁止选择文字
-        // @ts-ignore
         topDiv.style['-webkit-app-region'] = 'drag'; // 拖动
-        document.body.appendChild(topDiv); // 添加节点
+        document.body.appendChild(topDiv);
       }
 
       window.addEventListener(

diff --git a/src/App.less b/src/App.less
@@ -16,3 +16,7 @@
 @border-color-base: #d9d9d9; // 边框色
 @box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
   0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影
+
+.border-radius-base {
+  border-radius: @border-radius-base;
+}
diff --git a/src/background.ts b/src/background.ts
@@ -34,8 +34,8 @@ function createWindow() {
   win = new BrowserWindow({
     show: isDevelopment,
     width: 1024,
-    height: 750,
-    minHeight: 750,
+    height: 745,
+    minHeight: 745,
     minWidth: 1024,
     fullscreenable: isDevelopment,
     maximizable: true,
@@ -175,7 +175,7 @@ const menuTemplate: any = [
         }
       },
       {
-        label: '下新版',
+        label: '检查更新',
         click: async () => {
           await shell.openExternal(
             'https://github.com/funnyzak/tts-now/releases'

diff --git a/src/layout/AppMain/Batch.tsx b/src/layout/AppMain/Batch.tsx
@@ -47,12 +47,12 @@ const Wrapper = styled.div`
 `;
 
 const MainWrapper = styled.div`
-  height: calc(100vh - 80px - 115px - 10px) !important;
+  height: calc(100vh - 80px - 115px - 15px) !important;
   border: 1px solid #f4f6fa;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  margin-bottom: 10px;
+  margin-bottom: 15px;
 `;
 
 const tableStyle = css`
@@ -123,6 +123,7 @@ const SelectFilesComponent: React.FC<ICallBackFileListProp> = ({
 
   return (
     <MainWrapper
+      className="border-radius-base"
       css={css`
         align-items: center;
         justify-content: center;
@@ -163,6 +164,10 @@ const OutPutPathSelectComponent: React.FC<{
           <Button
             css={css`
               margin: 0;
+              border: 0;
+              color: #666;
+              border-radius: 0;
+              background: #eee;
             `}
             type="primary"
             size="large"
@@ -175,6 +180,9 @@ const OutPutPathSelectComponent: React.FC<{
           <Button
             css={css`
               margin: 0;
+              border: 0;
+              border-left: 1px solid #f4f6fa;
+              border-radius: 0;
             `}
             size="large"
             onClick={() => {

diff --git a/src/layout/AppMain/Single.tsx b/src/layout/AppMain/Single.tsx
@@ -37,11 +37,11 @@ const actionButtonStyle = css`
 `;
 
 const singleTxtStyle = {
-  height: 'calc(100vh - 80px - 115px - 10px) !important',
+  height: 'calc(100vh - 80px - 115px - 15px) !important',
   padding: '15px',
   margin: 0,
   overflow: 'hidden',
-  marginBottom: '10px',
+  marginBottom: '15px',
   lineHeight: '22px !important'
 };
 

diff --git a/src/layout/Dialog/SetttingKeyDialog.tsx b/src/layout/Dialog/SetttingKeyDialog.tsx
@@ -35,7 +35,7 @@ const Index: React.FC<IDialogProp> = ({ closeCallBack }) => {
   return (
     <>
       <Modal
-        title="配置"
+        title="阿里云配置"
         centered
         okText="确定"
         cancelText="取消"

diff --git a/src/layout/SiderBar/Header.tsx b/src/layout/SiderBar/Header.tsx
@@ -4,14 +4,15 @@ import { appName } from '@/config';
 
 const Header = styled.div`
   width: 280px;
-  height: 60px;
+  height: 80px;
   background-color: #748bad;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: 24px;
   color: #fff;
+  padding-top: 20px;
 `;
 
 const Index = () => (

diff --git a/src/layout/SiderBar/index.tsx b/src/layout/SiderBar/index.tsx
@@ -17,7 +17,7 @@ const Wrapper = styled.div`
 
 const Wrapper2 = styled.div`
   width: 280px;
-  height: calc(100vh - 60px - 80px - 60px);
+  height: calc(100vh - 80px - 80px - 60px);
   padding: 0 20px;
   overflow-y: auto;
   box-sizing: border-box;
@@ -26,7 +26,7 @@ const Wrapper2 = styled.div`
 const settingButtonStyle = css`
   width: 280px;
   height: 60px;
-  padding: 12px 20px 0;
+  padding: 7px 20px 0;
   border-right: 1px solid #f4f6fa;
   background-color: #fff;
 `;