feat: add visual configuration editor and YAML handling

- Implemented a new hook `useVisualConfig` for managing visual configuration state and YAML parsing.
- Added types for visual configuration in `visualConfig.ts`.
- Enhanced `ConfigPage` to support switching between visual and source editors.
- Introduced floating action buttons for save and reload actions.
- Updated translations for tab labels in English and Chinese.
- Styled the configuration page with new tab and floating action button styles.

src/i18n/locales/en.json

@@ -833,7 +833,11 @@
     "search_button": "Search",
     "search_no_results": "No results",
     "search_prev": "Previous",
-    "search_next": "Next"
+    "search_next": "Next",
+    "tabs": {
+      "visual": "Visual Editor",
+      "source": "Source Editor"
+    }
   },
   "quota_management": {
     "title": "Quota Management",

src/i18n/locales/zh-CN.json

@@ -833,7 +833,11 @@
     "search_button": "搜索",
     "search_no_results": "无结果",
     "search_prev": "上一个",
-    "search_next": "下一个"
+    "search_next": "下一个",
+    "tabs": {
+      "visual": "可视化编辑",
+      "source": "源代码编辑"
+    }
   },
   "quota_management": {
     "title": "配额管理",