adjust style

wallitor-gui/src-tauri/src/handler/file.rs

@@ -1,6 +1,7 @@
 use crate::reader;
 use std::path::Path;
 use std::fs;
+use serde::{Deserialize, Serialize};
 use tauri::ipc::Response;
 
 #[tauri::command]
@@ -40,3 +41,16 @@ pub async fn del_folder(path: String) -> bool {
     }
     false
 }
+
+#[derive(Serialize,Deserialize)]
+struct settings{
+    title_bar:String,
+    auto_start:bool,
+    auto_pause:bool
+  }
+  
+
+#[tauri::command]
+pub async fn get_config() -> String{
+    if let Ok()
+}

wallitor-gui/src/components/TitleBar.vue

@@ -2,9 +2,15 @@
   <div data-tauri-drag-region class="titlebar colbox">
     <div class="titlebar-icon-wrapper colbox">
       <template v-if="mode == 'mac'">
-        <div class="titlebar-button titlebar-close button-style-mac" @click="close"></div>
+        <div class="titlebar-button titlebar-close button-style-mac" @click="close">
-        <div class="titlebar-button titlebar-minimize button-style-mac" @click="minimize"></div>
+          <svg-icon name="window-close" :size="button_size_mac"></svg-icon>
-        <div class="titlebar-button titlebar-maximize button-style-mac" @click="toggleMaximize"></div> 
+        </div>
+        <div class="titlebar-button titlebar-minimize button-style-mac" @click="minimize">
+          <svg-icon name="window-minimize" :size="button_size_mac"></svg-icon>
+        </div>
+        <div class="titlebar-button titlebar-maximize button-style-mac" @click="toggleMaximize">
+          <svg-icon name="window-maximize" :size="button_size_mac"></svg-icon>
+        </div>
       </template>
       <img src="@/assets/vw.png" class="titlebar-icon">
       <div class="titlebar-icon-title">
@@ -27,7 +33,7 @@
         <div class="titlebar-button titlebar-maximize button-style-win" @click="toggleMaximize">
           <template v-if="maximized">
             <div class="titlebar-button-rect">
-              <svg-icon name="window-maximized button-style-win" :size="button_size_alter"></svg-icon>
+              <svg-icon name="window-maximized" :size="button_size_alter"></svg-icon>
             </div>
           </template>
           <template v-else>
@@ -60,6 +66,8 @@ type Mode = "win" | "mac";
 const maximized = ref(false);
 const button_size_default = ref("18px");
 const button_size_alter = ref("15px")
+const button_size_mac = ref("11px")
+
 const props = defineProps({
   mode: {
     type: String as PropType<Mode>,
@@ -169,20 +177,43 @@ function openSettings() {
 
 
 .button-style-mac.titlebar-button {
-  width: 14px;
+  width: 13px;
-  height: 14px;
+  height: 13px;
   border-radius: 100%;
   margin-left: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #000000b4
 }
 
 .button-style-mac.titlebar-minimize {
-  background-color: red;
+  background: #FFBB39;
+  border: 1px solid #CFA64E;
 }
+
 .button-style-mac.titlebar-maximize {
-  background-color: green;
+  background: #606060;
-  margin-right: 6px;
+  border: 1px solid #656565;
+  margin-right: 8px;
 }
+
+.button-style-mac:hover.titlebar-maximize {
+  background: #00CD4E;
+  border: 1px solid #0EA642;
+}
+
 .button-style-mac.titlebar-close {
-  background-color: yellow;
+  background: #FF5D5B;
+  border: 1px solid #CF544D;
+}
+
+.button-style-mac svg {
+  opacity: 0;
+  transition: .2s;
+}
+
+.button-style-mac:hover svg {
+  opacity: 1;
 }
 </style>

wallitor-gui/src/views/SettingsView.vue

@@ -1,30 +1,36 @@
 <template>
     <div class="settings-wrapper">
-        <div class="settings-back" @click="back_home">
+        <div class="settings-back colbox" @click="back_home">
             <SvgIcon name="direction-left"></SvgIcon>
-            返回
+            <div class="settings-back-text">返回</div>
         </div>
         <table class="settings-table">
             <tbody class="setting-table-body">
                 <tr>
-                    <td><div class="settings-label">
+                    <td>
+                        <div class="settings-label">
                             <div class="settings-label-title">标题栏样式</div>
                             <div class="settings-label-subtitle">选择选题栏关闭按钮样式</div>
-                    </div></td>
+                        </div>
+                    </td>
                     <td><el-switch></el-switch></td>
                 </tr>
                 <tr>
-                    <td><div class="settings-label">
+                    <td>
+                        <div class="settings-label">
                             <div class="settings-label-title">开机自启</div>
                             <div class="settings-label-subtitle">开机自启</div>
-                    </div></td>
+                        </div>
+                    </td>
                     <td><el-switch></el-switch></td>
                 </tr>
                 <tr>
-                    <td><div class="settings-label">
+                    <td>
+                        <div class="settings-label">
                             <div class="settings-label-title">最大化自动暂停</div>
                             <div class="settings-label-subtitle">最大化自动暂停</div>
-                    </div></td>
+                        </div>
+                    </td>
                     <td><el-switch></el-switch></td>
                 </tr>
             </tbody>
@@ -56,6 +62,7 @@ function back_home() {
     padding-right: 30px;
     width: calc(100% - 60px);
 }
+
 .settings-back {
     color: var(--text-color);
     padding: 8px;
@@ -79,7 +86,9 @@ function back_home() {
     margin-left: 40px;
     margin-right: 40px;
 }
-.settings-table td,th{
+
+.settings-table td,
+th {
     padding: 5px;
     color: var(--text-color);
 }
@@ -95,4 +104,10 @@ function back_home() {
     font-weight: 300;
     margin-bottom: 10px;
 }
+
+.settings-back-text {
+    transform: translateY(-3px);
+    margin-left: 4px;
+    font-weight: 600;
+}
 </style>