chore: 改为setup写法 优化样式

apps/web-antd/src/views/_core/profile/components/account-bind.vue

@@ -31,12 +31,6 @@ const bindList = computed<BindItem[]>(() => {
 });
 
 const gridOptions: VxeGridProps = {
-  checkboxConfig: {
-    // 高亮
-    highlight: true,
-    // 翻页时保留选中状态
-    reserve: true,
-  },
   columns: [
     {
       field: 'source',
@@ -132,14 +126,12 @@ function handleUnbind(record: Record<string, any>) {
           <ListItem>
             <Card>
               <div class="flex w-full items-center gap-4">
-                <div>
+                <component
-                  <component
+                  :is="item.avatar"
-                    :is="item.avatar"
+                  v-if="item.avatar"
-                    v-if="item.avatar"
+                  :style="item?.style ?? {}"
-                    :style="item?.style ?? {}"
+                  class="size-[40px]"
-                    class="size-[40px]"
+                />
-                  />
-                </div>
                 <div class="flex flex-1 items-center justify-between">
                   <div class="flex flex-col">
                     <h4

apps/web-antd/src/views/_core/profile/setting-panel.vue

@@ -1,6 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
-
 import { TabPane, Tabs } from 'ant-design-vue';
 
 import AccountBind from './components/account-bind.vue';
@@ -8,52 +6,34 @@ import BaseSetting from './components/base-setting.vue';
 import OnlineDevice from './components/online-device.vue';
 import SecureSetting from './components/secure-setting.vue';
 
-export default defineComponent({
+const settingList = [
-  components: {
+  {
-    AccountBind,
+    component: BaseSetting,
-    BaseSetting,
+    key: '1',
-    OnlineDevice,
+    name: '基本设置',
-    SecureSetting,
-    TabPane,
-    Tabs,
   },
-  setup() {
+  {
-    const settingList = [
+    component: SecureSetting,
-      {
+    key: '2',
-        component: 'BaseSetting',
+    name: '安全设置',
-        key: '1',
-        name: '基本设置',
-      },
-      {
-        component: 'SecureSetting',
-        key: '2',
-        name: '安全设置',
-      },
-      {
-        component: 'AccountBind',
-        key: '3',
-        name: '账号绑定',
-      },
-      {
-        component: 'OnlineDevice',
-        key: '4',
-        name: '在线设备',
-      },
-    ];
-
-    return {
-      settingList,
-    };
   },
-});
+  {
+    component: AccountBind,
+    key: '3',
+    name: '账号绑定',
+  },
+  {
+    component: OnlineDevice,
+    key: '4',
+    name: '在线设备',
+  },
+];
 </script>
 
 <template>
   <Tabs class="bg-background rounded-[var(--radius)] px-[16px] lg:flex-1">
-    <template v-for="item in settingList" :key="item.key">
+    <TabPane v-for="item in settingList" :key="item.key" :tab="item.name">
-      <TabPane :tab="item.name">
+      <component :is="item.component" v-bind="$attrs" />
-        <component :is="item.component" v-bind="$attrs" />
+    </TabPane>
-      </TabPane>
-    </template>
   </Tabs>
 </template>