feat(debug): add option to disable rounded corners

Author: Ayideyia

frontend/src/assets/styles/custom.less

@@ -10,6 +10,19 @@ body[debug-no-animation='true'] {
   }
 }
 
+body[debug-no-rounded='true'] {
+  .rounded-2,
+  .rounded-4,
+  .rounded-6,
+  .rounded-8,
+  .rounded-16,
+  .rounded-32,
+  .rounded-9999,
+  .rounded-full {
+    border-radius: 0;
+  }
+}
+
 body[debug-border='true'] {
   box-shadow: inset 0 0 1px var(--color);
 }

frontend/src/lang/locale/en.ts

@@ -269,8 +269,6 @@ export default {
     rulesets: 'Rulesets',
     plugins: 'Plugins',
     settings: 'Settings',
-    debug: 'Debug',
-    components: 'Components',
     about: 'About',
     profiles: 'Profiles',
     kernel: 'Kernel',
@@ -559,7 +557,7 @@ export default {
     behavior: 'Behavior',
     systemProxy: 'System Proxy',
     advanced: 'Advanced',
-    debug: 'Debug',
+    features: 'Features',
     general: 'General',
     theme: {
       name: 'Theme',
@@ -622,7 +620,8 @@ export default {
     multipleInstance: 'Allow multiple app instances',
     rollingRelease: 'Enable Rolling Release',
     debugOutline: 'Show interface outline',
-    debugNoAnimation: 'Disable Animation',
+    debugNoAnimation: 'Disable animations',
+    debugNoRounded: 'Disable rounded corners',
     debugBorder: 'Show window border',
     startup: {
       name: 'Run at startup',

frontend/src/lang/locale/zh.ts

@@ -269,8 +269,6 @@ export default {
     rulesets: '规则集',
     plugins: '插件',
     settings: '设置',
-    debug: '调试',
-    components: '组件预览',
     about: '关于',
     profiles: '配置',
     kernel: '内核',
@@ -558,7 +556,7 @@ export default {
     behavior: '行为',
     systemProxy: '系统代理',
     advanced: '高级',
-    debug: '调试',
+    features: '特性',
     general: '通用',
     theme: {
       name: '主题',
@@ -622,6 +620,7 @@ export default {
     rollingRelease: '启用滚动发行',
     debugOutline: '显示界面轮廓',
     debugNoAnimation: '禁用动画',
+    debugNoRounded: '禁用圆角',
     debugBorder: '显示窗口边框',
     startup: {
       name: '自启动',

frontend/src/stores/appSettings.ts

@@ -92,6 +92,7 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     rollingRelease: true,
     debugOutline: false,
     debugNoAnimation: false,
+    debugNoRounded: false,
     debugBorder: false,
     pages: ['Overview', 'Profiles', 'Subscriptions', 'Plugins'],
   })
@@ -189,6 +190,7 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     document.body.style.fontFamily = settings.fontFamily
     document.body.setAttribute('debug-outline', String(settings.debugOutline))
     document.body.setAttribute('debug-no-animation', String(settings.debugNoAnimation))
+    document.body.setAttribute('debug-no-rounded', String(settings.debugNoRounded))
     document.body.setAttribute('debug-border', String(settings.debugBorder))
   }
 

frontend/src/types/app.d.ts

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

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

@@ -4,7 +4,7 @@ const appSettings = useAppSettingsStore()
 </script>
 
 <template>
-  <div class="px-8 py-12 text-18 font-bold">{{ $t('settings.debug') }}</div>
+  <div class="px-8 py-12 text-18 font-bold">{{ $t('settings.features') }}</div>
 
   <Card>
     <div class="px-8 py-12 flex items-center justify-between">
@@ -19,5 +19,9 @@ const appSettings = useAppSettingsStore()
       <div class="text-16 font-bold">{{ $t('settings.debugNoAnimation') }}</div>
       <Switch v-model="appSettings.app.debugNoAnimation" />
     </div>
+    <div class="px-8 py-12 flex items-center justify-between">
+      <div class="text-16 font-bold">{{ $t('settings.debugNoRounded') }}</div>
+      <Switch v-model="appSettings.app.debugNoRounded" />
+    </div>
   </Card>
 </template>