fix: fix ui for windows

IceEnd · May 13, 2023 · e2c12ad · e2c12ad
1 parent 0d26911
commit e2c12ad
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 70 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "1chat",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "one_chat"
-version = "0.1.1"
+version = "0.1.2"
 description = "A Tauri App"
 authors = ["you"]
 license = ""

diff --git a/src-tauri/src/setup.rs b/src-tauri/src/setup.rs
@@ -10,9 +10,5 @@ pub fn init(app: &mut App) -> std::result::Result<(), Box<dyn std::error::Error>
     window_vibrancy::apply_vibrancy(&win, NSVisualEffectMaterial::FullScreenUI, Some(NSVisualEffectState::Active), None)
         .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");
 
-    // 仅在 windows 下执行
-    #[cfg(target_os = "windows")]
-    window_vibrancy::apply_blur(&win, Some((18, 18, 18, 125))).expect("Unsupported platform! 'apply_blur' is only supported on Windows");
-
     Ok(())
 }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "1chat",
-    "version": "0.1.1"
+    "version": "0.1.2"
   },
   "tauri": {
     "allowlist": {

diff --git a/src/components/context-menu/menu-item.vue b/src/components/context-menu/menu-item.vue
@@ -11,6 +11,7 @@
 
   &:hover {
     background-color: var(--el-color-primary);
+    color: var(--el-color-white);
   }
 }
 </style>
diff --git a/src/components/layout/app/settings-dialog.vue b/src/components/layout/app/settings-dialog.vue
@@ -1,69 +1,74 @@
 <template>
   <el-dialog
+    center
+    align-center
+    append-to-body
     v-model="visible"
-    width="420px"
+
     :title="$t('Settings')"
   >
-    <el-divider content-position="left">{{ $t('Version') }} {{ version }}</el-divider>
-    <el-form
-      label-position="top"
-      size="small"
-      :model="config"
-    >
-      <el-form-item :label="$t('OpenAI API Key')">
-        <el-input type="password" v-model="config.openaiAPIKey" />
-      </el-form-item>
+    <el-scrollbar height="400px">
+      <el-divider content-position="left">{{ $t('Version') }} {{ version }}</el-divider>
+      <el-form
+        label-position="top"
+        size="small"
+        :model="config"
+      >
+        <el-form-item :label="$t('OpenAI API Key')">
+          <el-input type="password" v-model="config.openaiAPIKey" />
+        </el-form-item>
 
-      <el-form-item :label="$t('Language')">
-        <el-select v-model="config.locale">
-          <el-option
-            v-for="lang in LanguageOptions"
-            :key="lang.value"
-            :label="lang.label"
-            :value="lang.value"
-          />
-        </el-select>
-      </el-form-item>
+        <el-form-item :label="$t('Language')">
+          <el-select v-model="config.locale">
+            <el-option
+              v-for="lang in LanguageOptions"
+              :key="lang.value"
+              :label="lang.label"
+              :value="lang.value"
+            />
+          </el-select>
+        </el-form-item>
 
-      <el-form-item :label="$t('Theme')">
-        <el-select v-model="config.theme">
-          <el-option
-            v-for="theme in ThemeOptions"
-            :key="theme.value"
-            :label="theme.label"
-            :value="theme.value"
-          />
-        </el-select>
-      </el-form-item>
+        <el-form-item :label="$t('Theme')">
+          <el-select v-model="config.theme">
+            <el-option
+              v-for="theme in ThemeOptions"
+              :key="theme.value"
+              :label="theme.label"
+              :value="theme.value"
+            />
+          </el-select>
+        </el-form-item>
 
-      <el-form-item :label="$t('Font Size')">
-        <el-select v-model="config.fontSize">
-          <el-option
-            v-for="theme in FontSizeOptions"
-            :key="theme.value"
-            :label="theme.label"
-            :value="theme.value"
-          />
-        </el-select>
-      </el-form-item>
+        <el-form-item :label="$t('Font Size')">
+          <el-select v-model="config.fontSize">
+            <el-option
+              v-for="theme in FontSizeOptions"
+              :key="theme.value"
+              :label="theme.label"
+              :value="theme.value"
+            />
+          </el-select>
+        </el-form-item>
 
-      <el-divider content-position="left">{{ $t('Proxy & Model') }}</el-divider>
+        <el-divider content-position="left">{{ $t('Proxy & Model') }}</el-divider>
 
-      <el-form-item :label="$t('API Host')">
-        <el-input v-model="config.host" />
-      </el-form-item>
+        <el-form-item :label="$t('API Host')">
+          <el-input v-model="config.host" />
+        </el-form-item>
 
-      <el-form-item :label="$t('Model')">
-        <el-select v-model="config.model">
-          <el-option
-            v-for="model in ModelOptions"
-            :key="model.value"
-            :label="model.label"
-            :value="model.value"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
+        <el-form-item :label="$t('Model')">
+          <el-select v-model="config.model">
+            <el-option
+              v-for="model in ModelOptions"
+              :key="model.value"
+              :label="model.label"
+              :value="model.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
   </el-dialog>
 </template>
 

diff --git a/src/store/system.ts b/src/store/system.ts
@@ -1,6 +1,7 @@
-import { reactive, watch } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import { invoke } from '@tauri-apps/api/tauri';
 import { appWindow } from '@tauri-apps/api/window';
+import { platform as getPlatform } from '@tauri-apps/api/os';
 import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import { Language, Theme, TauriCommand, DEFAULT_HOST, Model } from '@/constants';
@@ -15,6 +16,7 @@ export const useSystemStore = defineStore('system', () => {
     host: DEFAULT_HOST,
     model: Model.GPT_35_TURBO,
   });
+  const platform = ref('');
 
   const update = (payload: AppSystem.IConfig) => {
     Object.assign(config, payload, {
@@ -50,8 +52,14 @@ export const useSystemStore = defineStore('system', () => {
     }
   });
 
+  getPlatform().then(value => {
+    document.querySelector('html')?.classList.add(value);
+    platform.value = value;
+  });
+
   return {
     config,
+    platform,
     update,
   };
 });

diff --git a/src/styles/variables/color.less b/src/styles/variables/color.less
@@ -1,13 +1,34 @@
 :root {
   --app-nav-bg-color: rgba(#fff, 0.75);
   --link-active-bg-color: #eee;
+  --chat-empty-bg-color: var(--app-nav-bg-color);
 }
 
-html.dark {
-  --app-nav-bg-color: rgba(#3c3c3c, 0.75);
-  --link-active-bg-color: #333;
+html {
+  &.dark {
+    --app-nav-bg-color: rgba(#3c3c3c, 0.75);
+    --link-active-bg-color: #333;
 
-  .markdown-body {
-    color-scheme: dark;
+    .markdown-body {
+      color-scheme: dark;
+    }
+
+    &.win32 {
+      --app-nav-bg-color: #3c3c3c;
+    }
+  }
+
+  &.light {
+    &.win32,
+    &.linux {
+      --app-nav-bg-color: #3c3c3c;
+      --chat-empty-bg-color: #fff;
+    }
+
+    &.win32 {
+      #app {
+        border-top: 1px solid var(--el-border-color-extra-light);
+      }
+    }
   }
 }
diff --git a/src/views/chat/empty.vue b/src/views/chat/empty.vue
@@ -10,7 +10,7 @@ import ChatRoundFilled from '@/assets/chat-round-filled.svg?skipsvgo';
 
 <style lang="less" scoped>
 .empty {
-  background-color: var(--app-nav-bg-color);
+  background-color: var(--chat-empty-bg-color);
 
   .chat-icon {
     color: var(--el-text-color-placeholder);