refactor(ui): enhance layout consistency

Ayideyia · Ayideyia · commit c8be36b7f4f4 · 2025-10-29T00:37:43.000+08:00
diff --git a/frontend/src/components/Icon/Link2Icon.vue b/frontend/src/components/Icon/Link2Icon.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg viewBox="0 0 1024 1024">
+    <path
+      d="M293.44 981.312a231.936 231.936 0 0 1-168.896-70.592 235.776 235.776 0 0 1-69.12-167.36c0-64.512 24.64-124.352 70.656-168.96l118.272-118.208c18.432-18.368 47.552-18.368 64.448 0 18.432 18.432 18.432 47.616 0 64.512L190.592 638.912a146.24 146.24 0 0 0-43.008 104.448c0 39.936 15.36 75.2 43.008 104.384a146.24 146.24 0 0 0 104.384 43.008c38.4 0 75.264-15.36 104.448-43.008l150.4-150.4a147.328 147.328 0 0 0 0-207.36 169.216 169.216 0 0 0-42.88-30.72 46.656 46.656 0 0 1-23.04-61.44c10.688-23.04 38.336-33.728 61.376-23.04 26.112 12.352 50.688 27.712 70.592 49.216a238.144 238.144 0 0 1 0 337.792l-150.4 150.4a249.344 249.344 0 0 1-172.032 69.12z"
+      v-bind="$attrs"
+    ></path>
+    <path
+      d="M513.024 666.56a40.96 40.96 0 0 1-18.432-4.608c-26.112-12.288-50.688-27.648-70.592-49.088a238.144 238.144 0 0 1-70.656-168.96c0-64.448 24.576-124.352 70.656-168.896l150.4-150.4a238.144 238.144 0 0 1 337.856 0 238.208 238.208 0 0 1 0 337.728l-118.272 118.272c-18.368 18.432-47.552 18.432-64.448 0-18.432-18.432-18.432-47.616 0-64.512l118.208-118.208a147.328 147.328 0 0 0 0-207.296 147.328 147.328 0 0 0-207.296 0l-150.4 150.464a146.24 146.24 0 0 0-43.072 104.384c0 39.936 15.36 75.264 43.008 104.448 12.288 12.288 27.648 23.04 43.008 30.72 23.04 10.752 33.792 38.4 23.04 61.44a50.88 50.88 0 0 1-43.008 24.512z"
+      v-bind="$attrs"
+    ></path>
+  </svg>
+</template>
diff --git a/frontend/src/components/Icon/LinkIcon.vue b/frontend/src/components/Icon/LinkIcon.vue
@@ -1,11 +1,11 @@
 <template>
   <svg viewBox="0 0 1024 1024">
     <path
-      d="M377.6 473.6C377.6 448 384 422.4 403.2 403.2l70.4-70.4 57.6-57.6c19.2-19.2 38.4-25.6 64-25.6 25.6 0 44.8 6.4 64 25.6 38.4 38.4 38.4 89.6 0 128l-128 128C512 550.4 492.8 556.8 467.2 556.8L416 608C428.8 614.4 448 620.8 467.2 620.8 512 620.8 544 601.6 576 576l128-128c57.6-57.6 57.6-153.6 0-211.2-57.6-57.6-153.6-57.6-211.2 0l-128 128C320 403.2 307.2 467.2 326.4 524.8L377.6 473.6z"
+      d="M574 665.4c-3.1-3.1-8.2-3.1-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8c-3.1-3.1-8.2-3.1-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zM832.6 191.4c-84.6-84.6-221.5-84.6-306 0L410.3 307.6c-3.1 3.1-3.1 8.2 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6c-3.1 3.1-3.1 8.2 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1z"
       v-bind="$attrs"
     ></path>
     <path
-      d="M646.4 550.4c0 25.6-6.4 51.2-25.6 70.4l-128 128c-19.2 19.2-38.4 25.6-64 25.6-25.6 0-44.8-6.4-64-25.6-38.4-38.4-38.4-89.6 0-128l128-128c19.2-19.2 44.8-25.6 70.4-25.6l51.2-51.2C588.8 409.6 576 403.2 556.8 403.2 512 403.2 473.6 422.4 448 448L320 576c-57.6 57.6-57.6 153.6 0 211.2 57.6 57.6 153.6 57.6 211.2 0l128-128c44.8-44.8 57.6-108.8 32-160L646.4 550.4z"
+      d="M610.1 372.3c-3.1-3.1-8.2-3.1-11.3 0L372.3 598.7c-3.1 3.1-3.1 8.2 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
       v-bind="$attrs"
     ></path>
   </svg>
diff --git a/frontend/src/components/Icon/icons.ts b/frontend/src/components/Icon/icons.ts
@@ -1,5 +1,6 @@
 const icons = [
   'link',
+  'link2',
   'loading',
   'selected',
   'disabled',
diff --git a/frontend/src/components/Input/index.vue b/frontend/src/components/Input/index.vue
@@ -122,7 +122,7 @@ defineExpose({
       class="w-full overflow-hidden whitespace-nowrap text-ellipsis"
     >
       <slot name="editable" v-bind="{ value: modelValue }">
-        {{ modelValue || t('common.none') }}
+        {{ modelValue || t(placeholder || 'common.none') }}
       </slot>
     </div>
     <template v-else>
diff --git a/frontend/src/stores/appSettings.ts b/frontend/src/stores/appSettings.ts
@@ -41,9 +41,7 @@ import i18n, { loadLocaleMessages, reloadLocale } from '@/lang'
 import {
   debounce,
   updateTrayMenus,
-  APP_TITLE,
   ignoredError,
-  APP_VERSION,
   sleep,
   getKernelFileName,
   GetSystemProxyBypass,
@@ -77,7 +75,7 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     autoSetSystemProxy: true,
     proxyBypassList: '',
     autoStartKernel: false,
-    userAgent: APP_TITLE + '/' + APP_VERSION,
+    userAgent: '',
     startupDelay: 30,
     connections: DefaultConnections(),
     kernel: {
diff --git a/frontend/src/views/PluginsView/components/PluginConfigItem.vue b/frontend/src/views/PluginsView/components/PluginConfigItem.vue
@@ -70,14 +70,14 @@ defineExpose({ reset: handleResetAll })
 </script>
 
 <template>
-  <div>
+  <div class="flex flex-col gap-8">
     <slot name="header" v-bind="{ handleResetAll }"></slot>
     <Card
       v-for="(conf, index) in plugin.configuration"
       :key="conf.id"
       :title="`${index + 1}. ${conf.title}`"
       :class="{ warn: model[conf.key] !== undefined }"
-      class="card mb-8"
+      class="card"
     >
       <template v-if="model[conf.key] !== undefined" #extra>
         <Button
diff --git a/frontend/src/views/SettingsView/components/GeneralSettings.vue b/frontend/src/views/SettingsView/components/GeneralSettings.vue
@@ -96,8 +96,8 @@ const resetFontFamily = () => {
   appSettings.app.fontFamily = DefaultFontFamily
 }
 
-const resetUserAgent = () => {
-  appSettings.app.userAgent = APP_TITLE + '/' + APP_VERSION
+const clearUserAgent = () => {
+  appSettings.app.userAgent = ''
 }
 
 const onPermChange = async (v: boolean) => {
@@ -176,7 +176,7 @@ if (envStore.env.os === 'windows') {
 </script>
 
 <template>
-  <div class="flex flex-col gap-8 pr-8 mb-8">
+  <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>
 
     <Card>
@@ -191,9 +191,7 @@ if (envStore.env.os === 'windows') {
       <div class="px-8 py-12 flex items-center justify-between">
         <div class="text-16 font-bold">
           {{ t('settings.lang.name') }}
-          <Button @click="BrowserOpenURL(APP_LOCALES_URL)" type="text" icon="link" />
-        </div>
-        <div class="flex items-center">
+          <Button @click="BrowserOpenURL(APP_LOCALES_URL)" type="text" icon="link2" />
           <Button @click="handleOpenLocalesFolder" type="text" icon="folder" />
           <Button
             @click="appSettings.loadLocales()"
@@ -202,8 +200,8 @@ if (envStore.env.os === 'windows') {
             type="text"
             icon="refresh"
           />
-          <Radio v-model="appSettings.app.lang" :options="appSettings.locales" class="ml-8" />
         </div>
+        <Radio v-model="appSettings.app.lang" :options="appSettings.locales" />
       </div>
       <div class="px-8 py-12 flex items-center justify-between">
         <div class="text-16 font-bold">{{ t('settings.fontFamily') }}</div>
@@ -249,19 +247,17 @@ if (envStore.env.os === 'windows') {
           <span class="font-normal text-12">({{ t('settings.needAdmin') }})</span>
         </div>
         <div class="flex items-center">
-          <Switch v-model="isTaskScheduled" @change="onTaskSchChange" />
-          <template v-if="isTaskScheduled">
-            <Radio
-              v-model="appSettings.app.windowStartState"
-              :options="windowStates"
-              type="number"
-              class="ml-16"
-            />
-          </template>
+          <Radio
+            v-if="isTaskScheduled"
+            v-model="appSettings.app.windowStartState"
+            :options="windowStates"
+            type="number"
+          />
+          <Switch v-model="isTaskScheduled" @change="onTaskSchChange" class="ml-16" />
         </div>
       </div>
       <div
-        v-if="envStore.env.os === 'windows' && isAdmin"
+        v-if="envStore.env.os === 'windows' && isAdmin && isTaskScheduled"
         class="px-8 py-12 flex items-center justify-between"
       >
         <div class="text-16 font-bold">
@@ -272,8 +268,8 @@ if (envStore.env.os === 'windows') {
           v-model="appSettings.app.startupDelay"
           @submit="onStartupDelayChange"
           :min="0"
+          editable
           type="number"
-          class="ml-4"
         >
           <template #suffix>
             <span class="ml-4">{{ t('settings.startup.delay') }}</span>
@@ -328,15 +324,24 @@ if (envStore.env.os === 'windows') {
           {{ t('settings.proxyBypassList') }}
           <span class="font-normal text-12">({{ t('settings.proxyBypassListTips') }})</span>
         </div>
-        <CodeViewer v-model="appSettings.app.proxyBypassList" editable lang="yaml" />
+        <CodeViewer
+          v-model="appSettings.app.proxyBypassList"
+          editable
+          lang="yaml"
+          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>
         <div class="flex items-center">
-          <Input v-model.lazy="appSettings.app.userAgent" editable>
+          <Input
+            v-model.lazy="appSettings.app.userAgent"
+            :placeholder="APP_TITLE + '/' + APP_VERSION"
+            editable
+          >
             <template #suffix>
               <Button
-                @click="resetUserAgent"
+                @click="clearUserAgent"
                 v-tips="'settings.userAgent.reset'"
                 type="text"
                 size="small"
diff --git a/frontend/src/views/SettingsView/components/PluginSettings.vue b/frontend/src/views/SettingsView/components/PluginSettings.vue
@@ -13,9 +13,9 @@ const plugins = computed(() =>
 </script>
 
 <template>
-  <div class="flex flex-col pr-8">
+  <div class="flex flex-col gap-8 px-8 mb-8">
     <template v-if="plugins.length === 0">
-      <div class="text-18 font-bold pb-12">
+      <div class="px-8 py-8 text-18 font-bold">
         {{ $t('plugins.configuration') }}
       </div>
       <Card>
@@ -39,9 +39,15 @@ const plugins = computed(() =>
       "
     >
       <template #header="{ handleResetAll }">
-        <div class="flex items-center pb-12">
+        <div class="flex items-center px-8 py-8">
           <Dropdown>
-            <Button icon="settings" type="text"></Button>
+            <Button
+              icon="settings"
+              type="text"
+              size="small"
+              class="mr-4"
+              style="margin-left: -8px"
+            />
             <template #overlay="{ close }">
               <div class="flex flex-col gap-4 min-w-64 p-4">
                 <Button
diff --git a/frontend/src/views/SubscribesView/index.vue b/frontend/src/views/SubscribesView/index.vue
@@ -285,10 +285,9 @@ const onSortUpdate = debounce(subscribeStore.saveSubscribes, 1000)
         <Icon
           v-if="s.type !== 'File' && s.website"
           v-tips="'subscribe.website'"
-          icon="link"
-          :size="18"
+          icon="link2"
           @click="BrowserOpenURL(s.website)"
-          style="cursor: pointer"
+          class="mx-4 cursor-pointer shrink-0"
         />
       </template>
 

Original file line number	Diff line number	Diff line change
`@@ -122,7 +122,7 @@ defineExpose({`
`122`	`122`	`class="w-full overflow-hidden whitespace-nowrap text-ellipsis"`
`123`	`123`	`>`
`124`	`124`	`<slot name="editable" v-bind="{ value: modelValue }">`
`125`		`- {{ modelValue \|\| t('common.none') }}`
	`125`	`+ {{ modelValue \|\| t(placeholder \|\| 'common.none') }}`
`126`	`126`	`</slot>`
`127`	`127`	`</div>`
`128`	`128`	`<template v-else>`