✨ Feature: optimize UI, rewrite some css settings

public/i18n/en.yml

@@ -166,6 +166,14 @@ SETTINGS_CHOOSE_LANGUAGE: Choose Language
 UPLOADER_CONFIG_NAME: Configuration Name
 UPLOADER_CONFIG_PLACEHOLDER: Please Enter Configuration Name
 SELECTED_SETTING_HINT: Selected
+SETTINGS_MAIN_WINDOW_SIZE: Default Main Window Size
+SETTINGS_MAIN_WINDOW_WIDTH: Default Main Window Width
+SETTINGS_MAIN_WINDOW_WIDTH_HINT: 'Default: 1200'
+SETTINGS_MAIN_WINDOW_WIDTH_RULE: Window Height must be greater than 100
+SETTINGS_MAIN_WINDOW_HEIGHT: Default Main Window Height
+SETTINGS_MAIN_WINDOW_HEIGHT_HINT: 'Default: 800'
+SETTINGS_MAIN_WINDOW_HEIGHT_RULE: Window Height must be greater than 100
+SETTINGS_RAW_PICGO_SIZE: Raw PicGo Size
 SETTINGS_CUSTOM_MINI_ICON_PATH: Custom Mini Window Icon Path
 SETTINGS_CUSTOM_MINI_ICON: Custom Mini Window Icon
 SETTINGS_COMPRESS_AND_WATERMARK: Compress and Watermark

public/i18n/zh-CN.yml

@@ -167,6 +167,14 @@ BUILTIN_CLIPBOARD_TIPS: 使用内置剪贴板函数而不是调用脚本获取
 UPLOADER_CONFIG_NAME: 图床配置名
 UPLOADER_CONFIG_PLACEHOLDER: 请输入配置名称
 SELECTED_SETTING_HINT: 已选中
+SETTINGS_MAIN_WINDOW_SIZE: 默认主窗口大小(需重启)
+SETTINGS_MAIN_WINDOW_SIZE_WIDTH: 默认主窗口宽度
+SETTINGS_MAIN_WINDOW_WIDTH_HINT: '默认宽度: 1200'
+SETTINGS_MAIN_WINDOW_WIDTH_RULE: 窗口宽度必须大于100
+SETTINGS_MAIN_WINDOW_SIZE_HEIGHT: 默认主窗口高度
+SETTINGS_MAIN_WINDOW_HEIGHT_HINT: '默认高度: 800'
+SETTINGS_MAIN_WINDOW_HEIGHT_RULE: 窗口高度必须大于100
+SETTINGS_RAW_PICGO_SIZE: 原PicGo大小
 SETTINGS_CUSTOM_MINI_ICON_PATH: 自定义Mini窗口图标路径
 SETTINGS_CUSTOM_MINI_ICON: 是否自定义Mini窗口图标
 SETTINGS_COMPRESS_AND_WATERMARK: 设置图片水印和压缩-格式转换等参数

public/i18n/zh-TW.yml

@@ -167,6 +167,14 @@ BUILTIN_CLIPBOARD_TIPS: 使用內建剪貼簿函數而不是調用腳本取得
 UPLOADER_CONFIG_NAME: 圖床配置名
 UPLOADER_CONFIG_PLACEHOLDER: 請輸入配置名稱
 SELECTED_SETTING_HINT: 已選中
+SETTINGS_MAIN_WINDOW_SIZE: 默認主視窗大小
+SETTINGS_MAIN_WINDOW_SIZE_WIDTH: 默認主視窗寬度
+SETTINGS_MAIN_WINDOW_WIDTH_HINT: '默認: 1200'
+SETTINGS_MAIN_WINDOW_WIDTH_RULE: 窗口寬度必須大於100
+SETTINGS_MAIN_WINDOW_SIZE_HEIGHT: 默認主視窗高度
+SETTINGS_MAIN_WINDOW_HEIGHT_HINT: '默認: 800'
+SETTINGS_MAIN_WINDOW_HEIGHT_RULE: 窗口高度必須大於100
+SETTINGS_RAW_PICGO_SIZE: 原PicGo大小
 SETTINGS_CUSTOM_MINI_ICON_PATH: 自訂Mini視窗圖示路徑
 SETTINGS_CUSTOM_MINI_ICON: 自訂Mini視窗圖示
 SETTINGS_COMPRESS_AND_WATERMARK: 設置圖片浮水印和壓縮-格式轉換等參數

src/main/apis/app/window/windowList.ts

@@ -11,6 +11,7 @@ import db from '~/main/apis/core/datastore'
 import { TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants'
 import { app } from 'electron'
 import { remoteNoticeHandler } from '../remoteNotice'
+import picgo from '~/main/apis/core/picgo'
 
 const windowList = new Map<IWindowList, IWindowListItem>()
 
@@ -18,6 +19,20 @@ const handleWindowParams = (windowURL: string) => {
   return windowURL
 }
 
+const getDefaultWindowSizes = (): { width: number, height: number } => {
+  const mainWindowWidth = picgo.getConfig<any>('settings.mainWindowWidth')
+  const mainWindowHeight = picgo.getConfig<any>('settings.mainWindowHeight')
+  console.log('mainWindowWidth', mainWindowWidth)
+  console.log('mainWindowHeight', mainWindowHeight)
+  return {
+    width: mainWindowWidth || 1200,
+    height: mainWindowHeight || 800
+  }
+}
+
+const defaultWindowWidth = getDefaultWindowSizes().width
+const defaultWindowHeight = getDefaultWindowSizes().height
+
 windowList.set(IWindowList.TRAY_WINDOW, {
   isValid: process.platform !== 'linux',
   multiple: false,
@@ -53,8 +68,8 @@ windowList.set(IWindowList.SETTING_WINDOW, {
   multiple: false,
   options () {
     const options: IBrowserWindowOptions = {
-      height: 800,
-      width: 1200,
+      height: defaultWindowHeight,
+      width: defaultWindowWidth,
       show: false,
       frame: true,
       center: true,

src/renderer/layouts/Main.vue

@@ -460,7 +460,7 @@ $darwinBg = transparentify(#172426, #000, 0.7)
     height calc(100vh - 22px)
     overflow-x hidden
     overflow-y auto
-    width 170px
+    width 162px
     .info-window
       cursor pointer
       position fixed
@@ -474,7 +474,7 @@ $darwinBg = transparentify(#172426, #000, 0.7)
   .el-menu
     border-right none
     background transparent
-    width 170px
+    width 162px
     &-item
       color #eee
       position relative
@@ -487,7 +487,7 @@ $darwinBg = transparentify(#172426, #000, 0.7)
         &:before
           content ''
           position absolute
-          width 3px
+          width 1px
           height 20px
           right 0
           top 18px
@@ -520,7 +520,7 @@ $darwinBg = transparentify(#172426, #000, 0.7)
     input
       text-align center
   *::-webkit-scrollbar
-    width 8px
+    width 2px
     height 8px
   *::-webkit-scrollbar-thumb
     border-radius 4px

src/renderer/manage/pages/logIn.vue

@@ -757,11 +757,10 @@ onMounted(async () => {
 
 <style lang='stylus'>
 .layout
-  height 100%
-  width 100%
   background-color #fff
-  overflow auto
-  margin 0 0 0 0
+  position absolute
+  left 162px
+  right 0
   &.el-tabs
     border 0
     border-style none

src/renderer/manage/pages/manageMain.vue

@@ -136,7 +136,7 @@
     </div>
     <div
       class="layout__content"
-      style="height: 100%;position: relative;width: 100%;background-color: transparent;"
+      style="height: 100%;background-color: transparent;flex: 1;width: 0;"
     >
       <router-view />
     </div>
@@ -511,7 +511,7 @@ onBeforeMount(() => {
     flex-direction: column
     border-bottom-right-radius: 4px
     z-index 1
-    width: 140px
+    width: 130px
     position: relative
     &__button
       font-weight: bold;

src/renderer/pages/Gallery.vue

@@ -660,7 +660,7 @@ export default {
       transform: rotate(180deg)
 #gallery-view
   position absolute
-  left 140px
+  left 162px
   right 0
   height 100%
   .cursor-pointer

src/renderer/pages/PicGoSetting.vue

@@ -15,8 +15,8 @@
     </el-row>
     <el-row class="setting-list">
       <el-col
-        :span="20"
-        :offset="2"
+        :span="22"
+        :offset="1"
       >
         <el-row style="width: 100%">
           <el-form
@@ -210,6 +210,18 @@
                 @change="handleUploadNotification"
               />
             </el-form-item>
+            <el-form-item
+              :label="$T('SETTINGS_MAIN_WINDOW_SIZE')"
+            >
+              <el-button
+                type="primary"
+                round
+                size="small"
+                @click="mainWindowSizeVisible = true"
+              >
+                {{ $T('SETTINGS_CLICK_TO_SET') }}
+              </el-button>
+            </el-form-item>
             <el-form-item
               v-if="os !== 'darwin'"
               :label="$T('SETTINGS_MINI_WINDOW_ON_TOP')"
@@ -407,6 +419,62 @@
         </el-button>
       </template>
     </el-dialog>
+    <el-dialog
+      v-model="mainWindowSizeVisible"
+      :title="$T('SETTINGS_MAIN_WINDOW_SIZE')"
+      :modal-append-to-body="false"
+      width="70%"
+      center
+    >
+      <el-form
+        label-position="right"
+        :model="customLink"
+        label-width="120px"
+      >
+        <el-form-item
+          :label="$T('SETTINGS_MAIN_WINDOW_SIZE_WIDTH')"
+        >
+          <el-input
+            v-model="mainWindowWidth"
+            :autofocus="true"
+            :placeholder="$T('SETTINGS_MAIN_WINDOW_WIDTH_HINT')"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$T('SETTINGS_MAIN_WINDOW_SIZE_HEIGHT')"
+        >
+          <el-input
+            v-model="mainWindowHeight"
+            :autofocus="true"
+            :placeholder="$T('SETTINGS_MAIN_WINDOW_HEIGHT_HINT')"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$T('SETTINGS_RAW_PICGO_SIZE')"
+        >
+          <el-switch
+            v-model="rawPicGoSize"
+            :active-text="$T('SETTINGS_OPEN')"
+            :inactive-text="$T('SETTINGS_CLOSE')"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button
+          round
+          @click="cancelWindowSize"
+        >
+          {{ $T('CANCEL') }}
+        </el-button>
+        <el-button
+          type="primary"
+          round
+          @click="confirmWindowSize"
+        >
+          {{ $T('CONFIRM') }}
+        </el-button>
+      </template>
+    </el-dialog>
     <el-dialog
       v-model="checkUpdateVisible"
       :title="$T('SETTINGS_CHECK_UPDATE')"
@@ -944,6 +1012,7 @@ const customLinkVisible = ref(false)
 const checkUpdateVisible = ref(false)
 const serverVisible = ref(false)
 const proxyVisible = ref(false)
+const mainWindowSizeVisible = ref(false)
 
 const customLink = reactive({
   value: '$url'
@@ -953,6 +1022,10 @@ const shortKey = reactive<IShortKeyMap>({
   upload: ''
 })
 
+const mainWindowWidth = ref(1200)
+const mainWindowHeight = ref(800)
+const rawPicGoSize = ref(false)
+
 const proxy = ref('')
 const npmRegistry = ref('')
 const npmProxy = ref('')
@@ -1022,6 +1095,8 @@ async function initData () {
     proxy.value = picBed.proxy || ''
     npmRegistry.value = settings.registry || ''
     npmProxy.value = settings.proxy || ''
+    mainWindowWidth.value = settings.mainWindowWidth || 1200
+    mainWindowHeight.value = settings.mainWindowHeight || 800
     server.value = settings.server || {
       port: 36677,
       host: '127.0.0.1',
@@ -1191,6 +1266,29 @@ function handleUploadNotification (val: ICheckBoxValueType) {
   })
 }
 
+async function cancelWindowSize () {
+  mainWindowSizeVisible.value = false
+  mainWindowWidth.value = await getConfig<number>('settings.mainWindowWidth') || 1200
+  mainWindowHeight.value = await getConfig<number>('settings.mainWindowHeight') || 800
+}
+
+async function confirmWindowSize () {
+  mainWindowSizeVisible.value = false
+  const width = enforceNumber(mainWindowWidth.value)
+  const height = enforceNumber(mainWindowHeight.value)
+  saveConfig({
+    'settings.mainWindowWidth': rawPicGoSize.value ? 800 : width < 100 ? 100 : width,
+    'settings.mainWindowHeight': rawPicGoSize.value ? 450 : height < 100 ? 100 : height
+  })
+
+  const successNotification = new Notification($T('SETTINGS_MAIN_WINDOW_SIZE'), {
+    body: $T('TIPS_NEED_RELOAD')
+  })
+  successNotification.onclick = () => {
+    return true
+  }
+}
+
 function handleMiniWindowOntop (val: ICheckBoxValueType) {
   saveConfig('settings.miniWindowOntop', val)
   $message.info($T('TIPS_NEED_RELOAD'))
@@ -1338,7 +1436,7 @@ export default {
 #picgo-setting
   height 100%
   position absolute
-  left 140px
+  left 162px
   right 0
   .sub-title
     font-size 14px

src/renderer/pages/Plugin.vue

@@ -560,9 +560,8 @@ export default {
 $darwinBg = #172426
 #plugin-view
   position absolute
-  left 140px
+  left 162px
   right 0
-  padding 0 20px 0
   .el-loading-mask
     background-color rgba(0, 0, 0, 0.8)
   .plugin-list

src/renderer/pages/Upload.vue

@@ -675,7 +675,7 @@ export default {
     color #409EFF
 #upload-view
   position absolute
-  left 140px
+  left 162px
   right 0
   height 100%
   .view-title

src/renderer/pages/UploaderConfigPage.vue

@@ -185,7 +185,7 @@ export default {
 #config-list-view
   position absolute
   min-height 100%
-  left 150px
+  left 162px
   right 0
   overflow-x hidden
   overflow-y auto

src/renderer/pages/picbeds/index.vue

@@ -163,6 +163,9 @@ export default {
   height 100%
   overflow-y auto
   overflow-x hidden
+  position absolute
+  left 162px
+  right 0
   .setting-list
     height 100%
     overflow-y auto

src/universal/types/i18n.d.ts

@@ -161,6 +161,14 @@ interface ILocales {
   UPLOADER_CONFIG_NAME: string
   UPLOADER_CONFIG_PLACEHOLDER: string
   SELECTED_SETTING_HINT: string
+  SETTINGS_MAIN_WINDOW_SIZE: string
+  SETTINGS_MAIN_WINDOW_SIZE_WIDTH: string
+  SETTINGS_MAIN_WINDOW_WIDTH_HINT: string
+  SETTINGS_MAIN_WINDOW_WIDTH_RULE: string
+  SETTINGS_MAIN_WINDOW_SIZE_HEIGHT: string
+  SETTINGS_MAIN_WINDOW_HEIGHT_HINT: string
+  SETTINGS_MAIN_WINDOW_HEIGHT_RULE: string
+  SETTINGS_RAW_PICGO_SIZE: string
   SETTINGS_CUSTOM_MINI_ICON_PATH: string
   SETTINGS_CUSTOM_MINI_ICON: string
   SETTINGS_COMPRESS_AND_WATERMARK: string