From d3fb920b99a0d8c5e06fdbd65006b02fc07116c9 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Mon, 25 Sep 2023 17:30:01 +0800
Subject: [PATCH] perf: add outer border to the application fix: remove
 draggable feature on dialog component

---
 frontend/src/AppContent.vue    | 13 ++++++++++---
 frontend/src/styles/style.scss |  4 ++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/AppContent.vue b/frontend/src/AppContent.vue
index 33409e2..e1a7bc1 100644
--- a/frontend/src/AppContent.vue
+++ b/frontend/src/AppContent.vue
@@ -83,6 +83,13 @@ const borderRadius = computed(() => {
     }
     return '10px'
 })
+
+const border = computed(() => {
+    if (isMacOS()) {
+        return undefined
+    }
+    return `1px solid ${themeVars.value.borderColor}`
+})
 </script>
 
 <template>
@@ -90,7 +97,7 @@ const borderRadius = computed(() => {
     <n-spin
         :show="props.loading"
         :theme-overrides="{ opacitySpinning: 0 }"
-        :style="{ backgroundColor: themeVars.bodyColor, borderRadius }">
+        :style="{ backgroundColor: themeVars.bodyColor, borderRadius, border }">
         <div
             id="app-content-wrapper"
             class="flex-box-v"
@@ -196,8 +203,8 @@ const borderRadius = computed(() => {
 
 <style lang="scss" scoped>
 #app-content-wrapper {
-    width: 100vw;
-    height: 100vh;
+    width: calc(100vw - 2px);
+    height: calc(100vh - 2px);
     overflow: hidden;
     box-sizing: border-box;
     border-radius: 10px;
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index cc3abfc..e617adb 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -22,7 +22,7 @@ body {
   background-color: #0000;
   line-height: 1.5;
   font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --wails-draggable: drag;
+  //--wails-draggable: drag;
 }
 
 #app {
@@ -120,6 +120,6 @@ body {
   }
 }
 
-.n-dialog {
+.n-modal-mask {
   --wails-draggable: drag;
 }