feat: optimize settings UI and introduce v-platform directive

Author: Ayideyia

frontend/src/components/Icon/LogIcon.vue

@@ -2,7 +2,7 @@
   <svg viewBox="0 0 1024 1024">
     <path
       d="M291.328 377.344h391.68c33.28 0 60.416 27.136 60.416 60.416v361.472c0 33.28-27.136 60.416-60.416 60.416H291.328c-33.28 0-60.416-27.136-60.416-60.416V437.76c0.512-33.28 27.136-60.416 60.416-60.416z"
-      fill="var(--secondary-color)"
+      fill="var(--primary-color)"
     ></path>
     <path
       d="M869.888 248.832l-154.112-150.528c-12.8-12.8-29.696-19.456-47.616-19.456H178.688c-52.736 0.512-94.72 43.008-94.72 95.744v683.008c0 52.736 42.496 95.232 94.72 95.232h616.448c52.736 0 95.232-43.008 95.232-95.232V297.984c0-18.432-7.168-35.84-20.48-49.152z m-46.592 608.768c0 15.36-12.8 28.16-28.16 28.16H178.688c-15.36 0-27.648-12.8-27.648-28.16V174.08c0-15.36 12.288-28.16 27.648-28.16l442.88 0.512v118.784c0 55.808 45.056 100.864 100.352 100.864h100.864l0.512 491.52z m0-558.08h-100.864c-18.432 0-33.28-14.336-33.792-32.768V165.888l134.656 131.584v2.048z"

frontend/src/components/Input/index.vue

@@ -113,7 +113,7 @@ defineExpose({
     class="gui-input inline-flex items-center rounded-4 cursor-pointer px-4"
   >
     <div v-if="$slots.prefix" class="flex items-center shrink-0">
-      <slot name="prefix"></slot>
+      <slot name="prefix" v-bind="{ showInput }"></slot>
     </div>
     <Icon v-if="disabled" icon="forbidden" class="shrink-0" />
     <div
@@ -159,7 +159,7 @@ defineExpose({
       />
     </template>
     <div v-if="$slots.suffix" class="flex items-center shrink-0">
-      <slot name="suffix"></slot>
+      <slot name="suffix" v-bind="{ showInput }"></slot>
     </div>
   </div>
 </template>

frontend/src/constant/app.ts

@@ -28,6 +28,8 @@ export const PluginHubFilePath = 'data/.cache/plugin-list.json'
 
 export const RulesetHubFilePath = 'data/.cache/ruleset-list.json'
 
+export const RollingReleaseDirectory = 'data/rolling-release'
+
 export const DefaultFontFamily =
   'system-ui, "Microsoft YaHei UI", "Source Han Sans CN", "Twemoji Mozilla", sans-serif'
 

frontend/src/directives/index.ts

@@ -1,13 +1,15 @@
 import { vDraggable } from 'vue-draggable-plus'
 
 import menu from './menu'
+import platform from './platform'
 import tips from './tips'
 
 import type { Plugin, App } from 'vue'
 
 const directives: any = {
   menu,
   tips,
+  platform,
   draggable: vDraggable,
 }
 

frontend/src/directives/platform.ts

@@ -0,0 +1,13 @@
+import { useEnvStore } from '@/stores'
+
+import type { Directive, DirectiveBinding } from 'vue'
+
+export default {
+  mounted(el: any, binding: DirectiveBinding) {
+    const envStore = useEnvStore()
+    const supports = binding.value
+    if (!supports.includes(envStore.env.os)) {
+      el.remove()
+    }
+  },
+} as Directive

frontend/src/lang/locale/en.ts

@@ -261,7 +261,7 @@ export default {
     local: 'Local',
     remote: 'Remote',
     update: 'Update',
-    restart: 'Restart Kernel',
+    restart: 'Restart Core',
   },
   router: {
     overview: 'Overview',
@@ -271,7 +271,7 @@ export default {
     settings: 'Settings',
     about: 'About',
     profiles: 'Profiles',
-    kernel: 'Kernel',
+    kernel: 'Core',
     scheduledtasks: 'Tasks',
   },
   home: {
@@ -287,8 +287,8 @@ export default {
       collapseAll: 'Collapse All',
       refresh: 'Refresh',
       delayTest: 'Delay Test',
-      stop: 'Stop Kernel',
-      restart: 'Restart Kernel',
+      stop: 'Stop Core',
+      restart: 'Restart Core',
       viewlog: 'view log',
       start: 'Click to Start',
       noLogs: 'Log is empty',
@@ -301,7 +301,7 @@ export default {
       memory: 'Memory',
       transmit: 'Transmit',
       receive: 'Receive',
-      settings: 'Kernel Settings',
+      settings: 'Core Settings',
       settingsTips:
         'Takes effect temporarily. For persistent changes, please modify the `profile` settings.',
       updateGEO: 'Update GEO',
@@ -654,9 +654,10 @@ export default {
     userAgent: {
       name: 'User-Agent',
       reset: 'Reset User-Agent',
+      tips: 'Used for this app’s network requests',
     },
     githubapi: {
-      name: 'Authenticating to the REST API',
+      name: 'GitHub REST API Token',
       tips: 'Provides a higher rate limit',
     },
   },
@@ -691,11 +692,11 @@ export default {
     tun: 'Tun Mode',
     enableTunMode: 'Enable Tun Mode',
     disableTunMode: 'Disable Tun Mode',
-    kernel: 'Kernel',
+    kernel: 'Core',
     proxy: 'System Proxy',
-    startKernel: 'Start Kernel',
-    stopKernel: 'Stop Kernel',
-    restartKernel: 'Restart Kernel',
+    startKernel: 'Start Core',
+    stopKernel: 'Stop Core',
+    restartKernel: 'Restart Core',
     plugins: 'Plugins',
   },
   commands: {

frontend/src/lang/locale/zh.ts

@@ -256,12 +256,12 @@ export default {
     always: '开启',
     strict: '自动',
     off: '关闭',
-    notFound: '无内核',
+    notFound: '无核心',
     requestFailed: '获取失败',
     local: '本地',
     remote: '远程',
     update: '更新',
-    restart: '重启内核',
+    restart: '重启核心',
   },
   router: {
     overview: '概览',
@@ -271,7 +271,7 @@ export default {
     settings: '设置',
     about: '关于',
     profiles: '配置',
-    kernel: '内核',
+    kernel: '核心',
     scheduledtasks: '计划任务',
   },
   home: {
@@ -287,10 +287,10 @@ export default {
       collapseAll: '收缩全部',
       refresh: '刷新',
       delayTest: '延迟测试',
-      stop: '停止内核',
-      restart: '重启内核',
+      stop: '停止核心',
+      restart: '重启核心',
       viewlog: '查看日志',
-      start: '启动内核',
+      start: '启动核心',
       noLogs: '日志为空',
       systemProxy: '系统代理',
       tunMode: 'TUN模式',
@@ -301,7 +301,7 @@ export default {
       memory: '内存',
       transmit: '上行速率',
       receive: '下行速率',
-      settings: '内核设置',
+      settings: '核心设置',
       settingsTips: '暂时生效，持久化请修改配置文件',
       updateGEO: '更新 GEO',
       needPort: '请先设置代理端口',
@@ -653,10 +653,11 @@ export default {
     userAgent: {
       name: '用户代理(User-Agent)',
       reset: ' 重置用户代理',
+      tips: '用于此应用程序的网络请求',
     },
     githubapi: {
-      name: '向 REST API 进行身份验证',
-      tips: '拥有更高的速率限制',
+      name: 'GitHub REST API 访问令牌',
+      tips: '可获得更高的速率限制',
     },
   },
   about: {
@@ -690,11 +691,11 @@ export default {
     tun: 'Tun模式',
     enableTunMode: '启用TUN模式',
     disableTunMode: '禁用TUN模式',
-    kernel: '内核管理',
+    kernel: '核心管理',
     proxy: '系统代理',
-    startKernel: '开启内核',
-    stopKernel: '关闭内核',
-    restartKernel: '重启内核',
+    startKernel: '开启核心',
+    stopKernel: '关闭核心',
+    restartKernel: '重启核心',
     plugins: '插件',
   },
   commands: {

frontend/src/stores/app.ts

@@ -12,6 +12,7 @@ import {
   HttpCancel,
   OpenDir,
 } from '@/bridge'
+import { RollingReleaseDirectory } from '@/constant/app'
 import {
   APP_TITLE,
   APP_VERSION,
@@ -130,8 +131,7 @@ export const useAppStore = defineStore('app', () => {
       }
 
       await RemoveFile(downloadCacheFile)
-      await ignoredError(RemoveFile, 'data/rolling-release')
-      await ignoredError(RemoveFile, 'data/rolling-release-alpha')
+      await ignoredError(RemoveFile, RollingReleaseDirectory)
     } catch (error: any) {
       console.log(error)
       message.error(error.message || error, 5_000)

frontend/src/utils/command.ts

@@ -53,7 +53,7 @@ export const getCommands = () => {
   const rawCommands: Command[] = [
     {
       label: 'tray.kernel',
-      cmd: 'Kernel',
+      cmd: 'Core',
       children: [
         {
           label: 'tray.startKernel',
@@ -92,7 +92,7 @@ export const getCommands = () => {
         },
         {
           label: 'kernel.mode',
-          cmd: 'Kernel Mode',
+          cmd: 'Core Mode',
           children: ModeOptions.map((mode) => ({
             label: mode.label,
             cmd: mode.value,

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { OpenDir } from '@/bridge'
+import { MakeDir, OpenDir } from '@/bridge'
+import { RollingReleaseDirectory } from '@/constant/app'
 import { useAppSettingsStore, useEnvStore } from '@/stores'
 import { APP_TITLE, APP_VERSION } from '@/utils'
 
@@ -10,6 +11,11 @@ const handleOpenFolder = async () => {
   await OpenDir(envStore.env.basePath)
 }
 
+const handleOpenRollingReleaseFolder = async () => {
+  await MakeDir(RollingReleaseDirectory)
+  await OpenDir(RollingReleaseDirectory)
+}
+
 const handleClearApiToken = () => {
   appSettings.app.githubApiToken = ''
 }
@@ -34,7 +40,10 @@ const handleClearUserAgent = () => {
         {{ $t('settings.rollingRelease') }}
         <span class="font-normal text-12">({{ $t('settings.needRestart') }})</span>
       </div>
-      <Switch v-model="appSettings.app.rollingRelease" />
+      <div class="flex items-center gap-4">
+        <Button @click="handleOpenRollingReleaseFolder" type="primary" icon="folder" size="small" />
+        <Switch v-model="appSettings.app.rollingRelease" />
+      </div>
     </div>
     <div class="px-8 py-12 flex items-center justify-between">
       <div class="text-16 font-bold">{{ $t('settings.realMemoryUsage') }}</div>
@@ -65,7 +74,10 @@ const handleClearUserAgent = () => {
       </Input>
     </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="text-16 font-bold">
+        {{ $t('settings.userAgent.name') }}
+        <span class="font-normal text-12">({{ $t('settings.userAgent.tips') }})</span>
+      </div>
       <Input
         v-model.lazy="appSettings.app.userAgent"
         :placeholder="APP_TITLE + '/' + APP_VERSION"
@@ -83,5 +95,12 @@ const handleClearUserAgent = () => {
         </template>
       </Input>
     </div>
+    <div class="px-8 py-12 flex items-center justify-between">
+      <div class="text-16 font-bold">
+        {{ $t('settings.multipleInstance') }}
+        <span class="font-normal text-12">({{ $t('settings.needRestart') }})</span>
+      </div>
+      <Switch v-model="appSettings.app.multipleInstance" />
+    </div>
   </Card>
 </template>