From 6f80a17da17942f07ef4243995dd7f2ff847ca25 Mon Sep 17 00:00:00 2001
From: EstrellaXD <estrellaxd05@gmail.com>
Date: Wed, 30 Aug 2023 10:03:19 +0800
Subject: [PATCH] webui: adjust ui.

---
 webui/src/components/ab-status-bar.vue | 103 +++++++++++++------------
 webui/unocss.config.ts                 |   6 +-
 2 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/webui/src/components/ab-status-bar.vue b/webui/src/components/ab-status-bar.vue
index 400d014f..6d5146f8 100644
--- a/webui/src/components/ab-status-bar.vue
+++ b/webui/src/components/ab-status-bar.vue
@@ -1,20 +1,20 @@
 <script lang="ts" setup>
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { AddOne, International, More } from '@icon-park/vue-next';
+import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue';
+import {AddOne, International, More} from '@icon-park/vue-next';
 
 withDefaults(
-  defineProps<{
-    running: boolean;
-    items: {
-      id: number;
-      icon: any;
-      label: string | (() => string);
-      handle?: () => void | Promise<void>;
-    }[];
-  }>(),
-  {
-    running: false,
-  }
+    defineProps<{
+      running: boolean;
+      items: {
+        id: number;
+        icon: any;
+        label: string | (() => string);
+        handle?: () => void | Promise<void>;
+      }[];
+    }>(),
+    {
+      running: false,
+    }
 );
 
 defineEmits<{
@@ -36,62 +36,63 @@ function abLabel(label: string | (() => string)) {
     <div rel>
       <div fx-cer space-x-16px>
         <International
-          theme="outline"
-          size="24"
-          fill="#fff"
-          is-btn
-          btn-click
-          @click="() => $emit('changeLang')"
+            theme="outline"
+            size="24"
+            fill="#fff"
+            is-btn
+            btn-click
+            @click="() => $emit('changeLang')"
         />
 
         <AddOne
-          theme="outline"
-          size="24"
-          fill="#fff"
-          is-btn
-          btn-click
-          @click="() => $emit('clickAdd')"
+            theme="outline"
+            size="24"
+            fill="#fff"
+            is-btn
+            btn-click
+            @click="() => $emit('clickAdd')"
         />
 
         <MenuButton bg-transparent is-btn btn-click>
-          <More theme="outline" size="24" fill="#fff" />
+          <More theme="outline" size="24" fill="#fff"/>
         </MenuButton>
 
-        <ab-status :running="running" />
+        <ab-status :running="running"/>
       </div>
 
       <MenuItems
-        abs
-        top-50px
-        w-120px
-        rounded-8px
-        bg-white
-        overflow-hidden
-        shadow
-        z-99
+          abs
+          top-50px
+          left-32px
+          w-120px
+          rounded-8px
+          bg-white
+          overflow-hidden
+          shadow
+          z-99
       >
         <MenuItem v-for="i in items" :key="i.id" v-slot="{ active }">
           <div
-            w-full
-            h-32px
-            px-12px
-            fx-cer
-            justify-between
-            is-btn
-            hover:text-white
-            hover:bg-primary
-            class="group"
-            :class="[active ? 'text-white bg-theme-row' : 'text-black']"
-            @click="() => i.handle && i.handle()"
+              w-full
+              h-32px
+              px-12px
+              fx-cer
+              space-x-8px
+              is-btn
+              hover:text-white
+              hover:bg-primary
+              class="group"
+              :class="[active ? 'text-white bg-theme-row' : 'text-black']"
+              @click="() => i.handle && i.handle()"
           >
-            <div text-main>{{ abLabel(i.label) }}</div>
-
             <div
-              class="group-hover:text-white"
-              :class="[active ? 'text-white' : 'text-primary']"
+                class="group-hover:text-white"
+                :class="[active ? 'text-white' : 'text-primary']"
             >
               <Component :is="i.icon" size="16"></Component>
             </div>
+            <div text-main>{{ abLabel(i.label) }}</div>
+
           </div>
         </MenuItem>
       </MenuItems>
diff --git a/webui/unocss.config.ts b/webui/unocss.config.ts
index 4df8d2d0..31c4fe22 100644
--- a/webui/unocss.config.ts
+++ b/webui/unocss.config.ts
@@ -15,7 +15,7 @@ export default defineConfig({
   ],
   theme: {
     colors: {
-      primary: '#5739ca',
+      primary: '#493475',
       running: '#A3D491',
       stopped: '#DF7F91',
       page: '#F0F0F0',
@@ -25,13 +25,13 @@ export default defineConfig({
     [
       'bg-theme-row',
       {
-        background: 'linear-gradient(90.5deg, #372A87 1.53%, #9B4D9C 96.48%)',
+        background: 'linear-gradient(90.5deg, #492897 1.53%, #783674 96.48%)',
       },
     ],
     [
       'bg-theme-col',
       {
-        background: 'linear-gradient(180deg, #3C239F 0%, #793572 100%)',
+        background: 'linear-gradient(180deg, #492897 0%, #783674 100%)',
       },
     ],
     [