feat(settings): add debug no animation option in settings

Author: Ayideyia

frontend/src/assets/styles/custom.less

@@ -4,6 +4,12 @@ body[debug-outline='true'] {
   }
 }
 
+body[debug-no-animation='true'] {
+  * {
+    transition: none !important;
+  }
+}
+
 body {
   margin: 0;
   color: var(--color);

frontend/src/lang/locale/en.ts

@@ -598,6 +598,7 @@ export default {
     multipleInstance: 'Allow Multiple APP Instances',
     rollingRelease: 'Enable Rolling Release',
     debugOutline: 'Show interface outline',
+    debugNoAnimation: 'Disable Animation',
     startup: {
       name: 'Startup on boot',
       delay: 'Delay(s)',

frontend/src/lang/locale/zh.ts

@@ -597,6 +597,7 @@ export default {
     multipleInstance: '允许多APP实例运行',
     rollingRelease: '启用滚动发行',
     debugOutline: '显示界面轮廓',
+    debugNoAnimation: '禁用动画',
     startup: {
       name: '开机时启动',
       delay: '延迟(秒)',

frontend/src/stores/appSettings.ts

@@ -83,6 +83,7 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     multipleInstance: false,
     rollingRelease: true,
     debugOutline: false,
+    debugNoAnimation: false,
     pages: ['Overview', 'Profiles', 'Subscriptions', 'Plugins'],
   })
 
@@ -156,6 +157,7 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     document.documentElement.style.setProperty('--secondary-color', secondary)
     document.body.style.fontFamily = settings.fontFamily
     document.body.setAttribute('debug-outline', String(settings.debugOutline))
+    document.body.setAttribute('debug-no-animation', String(settings.debugNoAnimation))
   }
 
   watch(

frontend/src/types/app.d.ts

@@ -90,6 +90,7 @@ type AppSettings = {
   multipleInstance: boolean
   rollingRelease: boolean
   debugOutline: boolean
+  debugNoAnimation: boolean
   pages: string[]
 }
 

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

@@ -321,5 +321,12 @@ if (envStore.env.os === 'windows') {
       </div>
       <Switch v-model="appSettings.app.debugOutline" />
     </div>
+    <div class="px-16 py-8">
+      <div class="text-18 font-bold pt-8 pb-16">
+        {{ t('settings.debugNoAnimation') }}
+        <span class="font-normal text-12">(debug)</span>
+      </div>
+      <Switch v-model="appSettings.app.debugNoAnimation" />
+    </div>
   </div>
 </template>