Improve UI

Author: Ayideyia

frontend/src/components/ColorPicker/index.vue

@@ -19,7 +19,7 @@ const pick = () => {
 
 <template>
   <div
-    :class="{ 'pr-8': $slots.suffix }"
+    :class="{ 'pl-8': $slots.prefix, 'pr-8': $slots.suffix }"
     class="gui-color-picker rounded-full inline-flex items-center overflow-hidden"
   >
     <div v-if="$slots.prefix" class="flex items-center line-clamp-1 break-all">
@@ -30,7 +30,7 @@ const pick = () => {
       v-model="model"
       @change="(e) => onChange(e)"
       type="color"
-      class="w-26 border-0 bg-transparent cursor-pointer"
+      class="w-26 h-28 flex justify-center items-center border-0 bg-transparent cursor-pointer"
     />
     <div v-if="$slots.suffix" class="flex items-center line-clamp-1 break-all">
       <slot name="suffix" v-bind="{ pick }"></slot>
@@ -45,6 +45,12 @@ const pick = () => {
   background: var(--color-picker-bg);
 }
 
+input::-webkit-color-swatch-wrapper {
+  padding: 0;
+  width: 16px;
+  height: 16px;
+}
+
 input::-webkit-color-swatch {
   border-radius: 6px;
   border: none;

frontend/src/views/SettingsView/components/components/AdvancedSettings.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { OpenDir } from '@/bridge'
 import { useAppSettingsStore, useEnvStore } from '@/stores'
+import { APP_TITLE, APP_VERSION } from '@/utils'
 
 const appSettings = useAppSettingsStore()
 const envStore = useEnvStore()
@@ -12,6 +13,10 @@ const handleOpenFolder = async () => {
 const handleClearApiToken = () => {
   appSettings.app.githubApiToken = ''
 }
+
+const handleClearUserAgent = () => {
+  appSettings.app.userAgent = ''
+}
 </script>
 
 <template>
@@ -59,5 +64,24 @@ const handleClearApiToken = () => {
         </template>
       </Input>
     </div>
+    <div class="px-8 py-12 flex items-center justify-between">
+      <div class="text-16 font-bold">{{ $t('settings.userAgent.name') }}</div>
+      <Input
+        v-model.lazy="appSettings.app.userAgent"
+        :placeholder="APP_TITLE + '/' + APP_VERSION"
+        editable
+        class="text-14"
+      >
+        <template #suffix>
+          <Button
+            @click="handleClearUserAgent"
+            v-tips="'settings.userAgent.reset'"
+            type="text"
+            size="small"
+            icon="reset"
+          />
+        </template>
+      </Input>
+    </div>
   </Card>
 </template>

frontend/src/views/SettingsView/components/components/SystemProxySettings.vue

@@ -1,12 +1,7 @@
 <script lang="ts" setup>
 import { useAppSettingsStore } from '@/stores'
-import { APP_TITLE, APP_VERSION } from '@/utils'
 
 const appSettings = useAppSettingsStore()
-
-const handleClearUserAgent = () => {
-  appSettings.app.userAgent = ''
-}
 </script>
 
 <template>
@@ -17,7 +12,7 @@ const handleClearUserAgent = () => {
       <div class="text-16 font-bold">{{ $t('settings.autoSetSystemProxy') }}</div>
       <Switch v-model="appSettings.app.autoSetSystemProxy" />
     </div>
-    <div class="px-8 py-12 flex items-center justify-between">
+    <div class="px-8 pt-12 pb-8 flex flex-col gap-12">
       <div class="text-16 font-bold">
         {{ $t('settings.proxyBypassList') }}
         <span class="font-normal text-12">({{ $t('settings.proxyBypassListTips') }})</span>
@@ -29,24 +24,5 @@ const handleClearUserAgent = () => {
         class="min-w-256"
       />
     </div>
-    <div class="px-8 py-12 flex items-center justify-between">
-      <div class="text-16 font-bold">{{ $t('settings.userAgent.name') }}</div>
-      <Input
-        v-model.lazy="appSettings.app.userAgent"
-        :placeholder="APP_TITLE + '/' + APP_VERSION"
-        editable
-        class="text-14"
-      >
-        <template #suffix>
-          <Button
-            @click="handleClearUserAgent"
-            v-tips="'settings.userAgent.reset'"
-            type="text"
-            size="small"
-            icon="reset"
-          />
-        </template>
-      </Input>
-    </div>
   </Card>
 </template>