Improve UI

Author: Ayideyia

frontend/src/assets/styles/utilities/flex.less

@@ -1,10 +1,3 @@
-.flex {
-  display: flex;
-}
-.inline-flex {
-  display: inline-flex;
-}
-
 .flex-row {
   flex-direction: row;
 }

frontend/src/assets/styles/utilities/grid.less

@@ -1,7 +1,3 @@
-.grid {
-  display: grid;
-}
-
 @cols: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 24, 32, 64;
 
 .generate-cols(@i: 1) when (@i <= length(@cols)) {

frontend/src/assets/styles/utilities/others.less

@@ -50,6 +50,10 @@
   right: 8px;
 }
 
+.right-32 {
+  right: 32px;
+}
+
 .bottom-4 {
   bottom: 4px;
 }
@@ -58,6 +62,10 @@
   bottom: 12px;
 }
 
+.bottom-32 {
+  bottom: 32px;
+}
+
 .left-8 {
   left: 8px;
 }

frontend/src/components/Tabs/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 type TabItemType = {
@@ -9,27 +10,35 @@ type TabItemType = {
 interface Props {
   activeKey: string
   items: readonly TabItemType[]
-  height?: string
   tabPosition?: 'left' | 'top'
+  tabWidth?: string
+  contentWidth?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  height: '',
   tabPosition: 'left',
+  tabWidth: '20%',
+  contentWidth: '80%',
 })
 
 const emits = defineEmits(['update:activeKey'])
 
 const { t } = useI18n()
 
+const isTop = computed(() => props.tabPosition === 'top')
+
 const handleChange = (key: string) => emits('update:activeKey', key)
 
 const isActive = ({ key }: TabItemType) => key === props.activeKey
 </script>
 
 <template>
-  <div :style="{ height }" :class="'position-' + tabPosition" class="gui-tabs flex">
-    <div class="gui-tabs-tab flex">
+  <div :class="{ 'flex-col': isTop }" class="gui-tabs flex">
+    <div
+      :class="{ 'justify-center mb-8': isTop, 'flex-col': !isTop }"
+      :style="{ width: isTop ? 'auto' : tabWidth }"
+      class="gui-tabs-tab flex"
+    >
       <Button
         v-for="tab in items"
         :key="tab.key"
@@ -41,27 +50,8 @@ const isActive = ({ key }: TabItemType) => key === props.activeKey
       <slot name="extra"></slot>
     </div>
 
-    <div class="slot flex flex-col overflow-y-auto">
+    <div class="flex flex-col overflow-y-auto" :style="{ width: isTop ? 'auto' : contentWidth }">
       <slot :name="activeKey"></slot>
     </div>
   </div>
 </template>
-
-<style lang="less" scoped>
-.position-left {
-  .gui-tabs-tab {
-    min-width: 20%;
-    flex-direction: column;
-  }
-  .slot {
-    width: 80%;
-  }
-}
-.position-top {
-  flex-direction: column;
-  .gui-tabs-tab {
-    justify-content: center;
-    margin-bottom: 8px;
-  }
-}
-</style>

frontend/src/views/PluginsView/components/PluginConfigItem.vue

@@ -70,7 +70,7 @@ defineExpose({ reset: handleResetAll })
 </script>
 
 <template>
-  <div class="flex flex-col gap-8">
+  <div class="flex flex-col gap-8 pr-8">
     <slot name="header" v-bind="{ handleResetAll }"></slot>
     <Card
       v-for="(conf, index) in plugin.configuration"

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

@@ -176,8 +176,8 @@ if (envStore.env.os === 'windows') {
 </script>
 
 <template>
-  <div class="flex flex-col gap-8 px-8 mb-8">
-    <div class="px-8 py-8 text-18 font-bold">{{ t('settings.personalization') }}</div>
+  <div class="flex flex-col gap-8 pr-20 mb-8">
+    <div class="px-8 py-12 text-18 font-bold">{{ t('settings.personalization') }}</div>
 
     <Card>
       <div class="px-8 py-12 flex items-center justify-between">
@@ -223,7 +223,7 @@ if (envStore.env.os === 'windows') {
       </div>
     </Card>
 
-    <div class="px-8 py-8 text-18 font-bold">{{ t('settings.behavior') }}</div>
+    <div class="px-8 py-12 text-18 font-bold">{{ t('settings.behavior') }}</div>
 
     <Card>
       <div
@@ -311,7 +311,7 @@ if (envStore.env.os === 'windows') {
       </div>
     </Card>
 
-    <div class="px-8 py-8 text-18 font-bold">{{ t('settings.systemProxy') }}</div>
+    <div class="px-8 py-12 text-18 font-bold">{{ t('settings.systemProxy') }}</div>
 
     <Card>
       <div class="px-8 py-12 flex items-center justify-between">
@@ -351,7 +351,7 @@ if (envStore.env.os === 'windows') {
       </div>
     </Card>
 
-    <div class="px-8 py-8 text-18 font-bold">{{ t('settings.advanced') }}</div>
+    <div class="px-8 py-12 text-18 font-bold">{{ t('settings.advanced') }}</div>
 
     <Card>
       <div class="px-8 py-12 flex items-center justify-between">
@@ -380,7 +380,7 @@ if (envStore.env.os === 'windows') {
       </div>
     </Card>
 
-    <div class="px-8 py-8 text-18 font-bold">{{ t('settings.debug') }}</div>
+    <div class="px-8 py-12 text-18 font-bold">{{ t('settings.debug') }}</div>
 
     <Card>
       <div class="px-8 py-12 flex items-center justify-between">

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

@@ -13,7 +13,7 @@ const plugins = computed(() =>
 </script>
 
 <template>
-  <div class="flex flex-col gap-8 px-8 mb-8">
+  <div class="flex flex-col gap-8 pr-12 mb-8">
     <template v-if="plugins.length === 0">
       <div class="px-8 py-8 text-18 font-bold">
         {{ $t('plugins.configuration') }}
@@ -39,7 +39,7 @@ const plugins = computed(() =>
       "
     >
       <template #header="{ handleResetAll }">
-        <div class="flex items-center px-8 py-8">
+        <div class="flex items-center px-8 py-12">
           <Dropdown>
             <Button
               icon="settings"

frontend/src/views/SettingsView/index.vue

@@ -21,7 +21,13 @@ const appStore = useAppStore()
 </script>
 
 <template>
-  <Tabs v-model:active-key="activeKey" :items="settings" height="100%">
+  <Tabs
+    v-model:active-key="activeKey"
+    :items="settings"
+    tab-width="15%"
+    content-width="85%"
+    class="h-full"
+  >
     <template #general>
       <GeneralSettings />
     </template>

frontend/src/views/SubscribesView/components/ProxiesEditor.vue

@@ -91,5 +91,5 @@ defineExpose({ modalSlots })
 </script>
 
 <template>
-  <CodeViewer v-model="proxiesText" lang="yaml" editable class="code" />
+  <CodeViewer v-model="proxiesText" lang="yaml" editable class="h-full" />
 </template>