fix Bug or add example

src/views/setting/system/system.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <n-grid :x-gap="24">
+      <n-grid-item span="6">
+        <n-card :bordered="false" size="small" class="proCard">
+          <n-thing
+              class="thing-cell"
+              v-for="item in typeTabList" :key="item.key"
+              :class="{'thing-cell-on':type===item.key}"
+              @click="switchType(item)"
+          >
+            <template #header>{{ item.name }}</template>
+            <template #description>{{ item.desc }}</template>
+          </n-thing>
+        </n-card>
+      </n-grid-item>
+      <n-grid-item span="18">
+        <n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
+          <BasicSetting v-if="type === 1"></BasicSetting>
+          <RevealSetting v-if="type === 2"></RevealSetting>
+          <EmailSetting v-if="type === 3"></EmailSetting>
+        </n-card>
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from 'vue'
+import { useRouter } from 'vue-router'
+import BasicSetting from "./BasicSetting.vue"
+import RevealSetting from "./RevealSetting.vue"
+import EmailSetting from "./EmailSetting.vue"
+
+const typeTabList = [
+  {
+    name: '基本设置',
+    desc: '系统常规设置',
+    key: 1
+  },
+  {
+    name: '显示设置',
+    desc: '系统显示设置',
+    key: 2
+  },
+  {
+    name: '邮件设置',
+    desc: '系统邮件设置',
+    key: 3
+  }
+]
+export default defineComponent({
+  components: { BasicSetting, RevealSetting, EmailSetting },
+  setup() {
+    const router = useRouter()
+    const state = reactive({
+      type: 1,
+      typeTitle: '基本设置'
+    })
+
+    function switchType(e) {
+      state.type = e.key
+      state.typeTitle = e.name
+    }
+
+    return {
+      ...toRefs(state),
+      switchType,
+      typeTabList
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.thing-cell {
+  margin: 0 -16px 10px;
+  padding: 5px 16px;
+
+  &:hover {
+    background: #f3f3f3;
+    cursor: pointer
+  }
+}
+
+.thing-cell-on {
+  background: #f0faff;
+  color: #2d8cf0;
+
+  ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
+    color: #2d8cf0
+  }
+
+  &:hover {
+    background: #f0faff;
+  }
+}
+</style>