初始版本提交

src/views/system/setting/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <ScrollContainer>
+    <PageWrapper dense contentFullHeight fixedHeight>
+      <div ref="wrapperRef" :class="prefixCls">
+        <Tabs tab-position="left" :tabBarStyle="tabBarStyle" class="h-full">
+          <template v-for="item in settingList" :key="item.key">
+            <TabPane :tab="item.name" class="h-full">
+              <component :is="item.component" />
+            </TabPane>
+          </template>
+        </Tabs>
+      </div>
+    </PageWrapper>
+  </ScrollContainer>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Tabs } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { ScrollContainer } from '/@/components/Container/index';
+  import { settingList } from './data';
+
+  import BaseSetting from './BaseSetting.vue';
+  import SecureSetting from './SecureSetting.vue';
+  import AccountBind from './AccountBind.vue';
+  import MsgNotify from './MsgNotify.vue';
+  import UpdatePassword from './UpdatePassword.vue';
+  import HomeSetting from './HomeSetting.vue';
+  export default defineComponent({
+    components: {
+      ScrollContainer,
+      Tabs,
+      TabPane: Tabs.TabPane,
+      BaseSetting,
+      SecureSetting,
+      AccountBind,
+      MsgNotify,
+      UpdatePassword,
+      HomeSetting,
+      PageWrapper,
+    },
+    setup() {
+      return {
+        prefixCls: 'account-setting',
+        settingList,
+        tabBarStyle: {
+          width: '220px',
+        },
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .account-setting {
+    height: 100%;
+    background-color: @component-background;
+    margin-right: 7px;
+
+    .base-title {
+      padding-left: 0;
+    }
+
+    .ant-tabs-tab-active {
+      background-color: @item-active-bg;
+    }
+
+    :deep(.ant-tabs-content-holder),
+    :deep(.ant-tabs-content) {
+      height: 100%;
+    }
+  }
+</style>