feat: integrate platform backend and application interfaces

admin/src/layouts/components/Setting/index.tsx

@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
-import { Row, Col, Switch } from 'tdesign-react';
+import { Row, Col } from '@miragenflow/ui/grid';
+import { Switch } from '@miragenflow/ui';
 import { useAppDispatch, useAppSelector } from 'modules/store';
 import {
   selectGlobal,
@@ -47,15 +48,15 @@ const themeList = [
 const layoutList = [
   {
     value: ELayout.side,
-    image: 'https://tdesign.gtimg.com/starter/setting/side.png',
+    image: <div className={Style.layoutPreview}>侧</div>,
   },
   {
     value: ELayout.top,
-    image: 'https://tdesign.gtimg.com/starter/setting/top.png',
+    image: <div className={Style.layoutPreview}>顶</div>,
   },
   {
     value: ELayout.mix,
-    image: 'https://tdesign.gtimg.com/starter/setting/mix.png',
+    image: <div className={Style.layoutPreview}>混</div>,
   },
 ];
 
@@ -76,25 +77,27 @@ export default memo(() => {
     <div>
       <div className={Style.settingTitle}>主题模式</div>
       <RadioRect
-        defaultValue={globalState.systemTheme ? ESettingTheme.system : globalState.theme}
+        value={globalState.systemTheme ? ESettingTheme.system : globalState.theme}
         onChange={handleThemeSwitch}
         options={themeList}
+        ariaLabel='主题模式'
       />
 
       <div className={Style.settingTitle}>主题色</div>
-      <RadioColor defaultValue={globalState.color} onChange={(value) => dispatch(switchColor(value))} />
+      <RadioColor value={globalState.color} onChange={(value) => dispatch(switchColor(value))} />
 
       <div className={Style.settingTitle}>导航布局</div>
       <RadioRect
-        defaultValue={globalState.layout}
+        value={globalState.layout}
         onChange={(value) => dispatch(switchLayout(value))}
         options={layoutList}
+        ariaLabel='导航布局'
       />
 
       <div className={Style.settingTitle}>元素开关</div>
       <Row justify='space-between'>
         <Col>
-          <div className={Style.settingSubTitle}>显示 Header</div>
+          <div className={Style.settingSubTitle}>显示顶部栏</div>
         </Col>
         <Col>
           <Switch size='large' value={globalState.showHeader} onChange={() => dispatch(toggleShowHeader())} />
@@ -103,7 +106,7 @@ export default memo(() => {
 
       <Row justify='space-between'>
         <Col>
-          <div className={Style.settingSubTitle}>显示 Breadcrumbs</div>
+          <div className={Style.settingSubTitle}>显示面包屑导航</div>
         </Col>
         <Col>
           <Switch size='large' value={globalState.showBreadcrumbs} onChange={() => dispatch(toggleShowBreadcrumbs())} />
@@ -112,7 +115,7 @@ export default memo(() => {
 
       <Row justify='space-between'>
         <Col>
-          <div className={Style.settingSubTitle}>显示 Footer</div>
+          <div className={Style.settingSubTitle}>显示页脚</div>
         </Col>
         <Col>
           <Switch size='large' value={globalState.showFooter} onChange={() => dispatch(toggleShowFooter())} />