diff --git a/src/components/Setting/components/assistant.vue b/src/components/Setting/components/assistant.vue
new file mode 100644
index 0000000..cbe2d3b
--- /dev/null
+++ b/src/components/Setting/components/assistant.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="common-page">
+    <div class="pb_12">
+      <div class="title">使 Microsoft Edge 更易于查看</div>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'在页面上的焦点区域周围显示高可见性大纲'"
+        :type="'switch'"
+        class="ptb_8"
+      />
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'页面缩放'"
+        :options="selectOptions"
+        :type="'select'"
+        :selectWidth="'100px'"
+        class="ptb_8"
+      >
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            所有网站的默认缩放级别。若要查看某些网站的缩放级别，请转到
+            <a href="" class="a_style">缩放级别</a>
+          </p>
+        </template>
+      </common-line>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'页面颜色'"
+        :options="selectColorOptions"
+        :type="'select'"
+        :selectWidth="'100px'"
+        class="ptb_8"
+      >
+        <template #bottomcontent>
+          <p class="title_12_gray"> 通过修改页面上的颜色，使网站更易于阅读 </p>
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line :title="'仅在开启高对比度主题时应用页面颜色'" :type="'switch'" class="ptb_8" />
+      <hr class="divider" />
+      <common-line
+        :title="'指定站点'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'arrow_left_icon.png',
+          text: true
+        }"
+        class="ptb_8"
+      >
+        <template #bottomcontent>
+          <p class="title_12_gray"> 从页面颜色中排除的网站列表 </p>
+        </template>
+      </common-line>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'打开字幕的系统首选项'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'share_icon.png',
+          text: true
+        }"
+        class="ptb_8"
+      >
+        <template #bottomcontent>
+          <p class="title_12_gray"> 更改支持此设置的网站描述文字显示方式 </p>
+        </template>
+      </common-line>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'关闭自定义滚动条'"
+        :type="'switch'"
+        class="ptb_8"
+      >
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            关闭自定义滚动条
+          </p>
+        </template>
+      </common-line>
+    </div>
+    <div class="pb_12">
+      <div class="title">使 Microsoft Edge 更易于使用</div>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'从 Microsoft 获取屏幕阅读器的图像说明'"
+        :type="'switch'"
+        class="ptb_8"
+      />
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'在关闭具有多个选项卡的窗口之前询问'"
+        :type="'switch'"
+        class="ptb_8"
+      />
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'选择文本时显示迷你菜单'"
+        :type="'switch'"
+        class="ptb_8"
+      />
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'下载开始时显示下载菜单'"
+        :type="'switch'"
+        class="ptb_8"
+      >
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            关闭此设置会使人更难知道文件何时开始下载
+          </p>
+        </template>
+      </common-line>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'在支持的菜单中添加辅助功能操作'"
+        :type="'switch'"
+        class="ptb_8"
+      >
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            在某些菜单中启用其他辅助功能，以增强导航和控制功能。
+          </p>
+        </template>
+      </common-line>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'在页面之间轻扫'"
+        :type="'switch'"
+        class="ptb_8"
+      >
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            使用轻扫手势向后和向前导航
+          </p>
+        </template>
+      </common-line>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'了解 Microsoft Edge 中的辅助功能'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'share_icon.png',
+          text: true
+        }"
+        class="ptb_4"
+      />
+    </div>
+    <div class="pb_12">
+      <div class="title">键盘</div>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line :title="'使用文本光标导航页面'" :type="'switch'" class="ptb_8">
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            若要打开或关闭“插入光标”浏览，请按 F7。
+            <a href="" class="a_style">了解更多信息</a>
+          </p>
+        </template>
+      </common-line>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'使用 F12 键打开开发人员工具'"
+        :type="'switch'"
+        class="ptb_8"
+      />
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'了解 Microsoft Edge 中的键盘快捷方式'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'share_icon.png',
+          text: true
+        }"
+        class="ptb_4"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import commonLine from './commonLine.vue'
+import completeIcon from '../img/complete_icon.png'
+
+const selectOptions = [
+  {
+    value: '0',
+    label: '25%'
+  },
+  {
+    value: '1',
+    label: '50%'
+  },
+  {
+    value: '2',
+    label: '100%'
+  }
+]
+const selectColorOptions = [
+  {
+    value: '0',
+    label: '关'
+  },
+  {
+    value: '1',
+    label: '沙漠'
+  },
+  {
+    value: '2',
+    label: '黄昏'
+  }
+]
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/components/Setting/components/commonLine.vue b/src/components/Setting/components/commonLine.vue
new file mode 100644
index 0000000..70e6fc1
--- /dev/null
+++ b/src/components/Setting/components/commonLine.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="common-line">
+    <div class="line">
+      <div class="left">
+        <slot name="image"></slot>
+        <div class="content">
+          <div class="top">
+            <div class="title_14">{{ title }}</div>
+          </div>
+          <div class="bottom">
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div v-if="type === 'switch'" class="switch">
+          <el-switch v-model="switchVal" />
+        </div>
+        <div v-if="type === 'button'" class="button">
+          <el-button :text="buttonOne.text ?? false"
+            ><i
+              v-if="buttonOne.icon"
+              class="btn-icon"
+              :style="{ backgroundImage: `url(${getAssetsFile(buttonOne.icon)})` }"
+            ></i
+            >{{ buttonOne.name ?? '' }}</el-button
+          >
+        </div>
+        <div v-if="type === 'buttonGroup'" class="button-group">
+          <div v-for="btn in btnGroupOptions" :key="btn.name" class="btn-group_one">
+            <el-button
+              ><i
+                v-if="btn.icon"
+                class="btn-icon"
+                :style="{ backgroundImage: `url(${getAssetsFile(btn.icon)})` }"
+              ></i
+              >{{ btn.name ?? '' }}</el-button
+            >
+          </div>
+        </div>
+        <div v-if="type === 'select'">
+          <el-select v-model="selectValue" class="m-2" :style="{ width: selectWidth }">
+            <el-option
+              v-for="item in selectOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </div>
+    </div>
+    <slot name="bottomcontent"></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: ''
+  },
+  imgUrl: {
+    type: String,
+    default: ''
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  buttonOne: {
+    type: Object,
+    default: () => ({})
+  },
+  btnGroup: {
+    type: Array,
+    default: () => []
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  selectWidth: {
+    type: String,
+    default: '',
+  }
+})
+
+const getAssetsFile = (url: string) => {
+  return new URL(`../img/${url}`, import.meta.url).href
+}
+
+let switchVal = ref(false)
+let selectValue = ref('')
+let selectOptions = ref([] as any)
+let btnGroupOptions = ref([] as any)
+watch(
+  [() => props.btnGroup, () => props.options],
+  () => {
+    btnGroupOptions.value = props.btnGroup
+    if (props.options && props.options.length > 0) {
+      selectOptions.value = props.options
+      selectValue.value = selectOptions.value[0].value
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.common-line {
+  width: 100%;
+  padding-left: 16px;
+  padding-right: 16px;
+  .line {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left {
+      display: flex;
+      align-items: center;
+      .content {
+        .top {
+        }
+        .bottom {
+        }
+      }
+    }
+    .right {
+      .button-group {
+        display: flex;
+        .btn-group_one {
+          margin-right: 8px;
+        }
+        .btn-group_one:nth-last-child(1) {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  :deep(.el-button) {
+    height: 32px;
+    padding: 0 9px;
+    .btn-icon {
+      display: block;
+      width: 20px;
+      height: 20px;
+      background-size: 100%;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+  }
+}
+</style>
diff --git a/src/components/Setting/components/personal.vue b/src/components/Setting/components/personal.vue
new file mode 100644
index 0000000..618c62d
--- /dev/null
+++ b/src/components/Setting/components/personal.vue
@@ -0,0 +1,269 @@
+<template>
+  <div class="personal-page common-page">
+    <div class="flex-between pb_12">
+      <div class="title">你的用户配置</div>
+      <el-button text><i class="add-icon"></i><span>添加用户配置</span></el-button>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 12px">
+      <common-line :type="'buttonGroup'" :btnGroup="btnGroup" style="padding: 20px">
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 52px; height: 52px; border-radius: 50%; margin-right: 20px"
+          />
+        </template>
+        <template #content>
+          <p class="title_16">个人</p>
+          <p class="title_12">123@test.com</p>
+          <p class="title_12 flex" style="color: #107c10"
+            ><i
+              class="icon_style"
+              :style="{
+                width: '12px',
+                height: '12px',
+                backgroundImage: `url(${completeIcon})`,
+                marginRight: '4px'
+              }"
+            ></i
+            >同步已启用</p
+          >
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'管理账户'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'share_icon.png',
+          text: true
+        }"
+      >
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
+          />
+        </template>
+      </common-line>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 12px">
+      <common-line :title="'个人资料设置'" class="ptb_16">
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 52px; height: 35px; margin-right: 12px"
+          />
+        </template>
+        <template #content>
+          <p class="title_12">这些浏览器设置适用于 Microsoft Edge 中的配置文件</p>
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'同步'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'arrow_left_icon.png',
+          text: true
+        }"
+        class="ptb_4"
+      >
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 20px; height: 20px; margin-right: 16px"
+          />
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'Microsoft Rewards'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'arrow_left_icon.png',
+          text: true
+        }"
+        class="ptb_4"
+      >
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 20px; height: 20px; margin-right: 16px"
+          />
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'导入浏览器数据'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'arrow_left_icon.png',
+          text: true
+        }"
+        class="ptb_4"
+      >
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 20px; height: 20px; margin-right: 16px"
+          />
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'用户配置偏好设置'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'arrow_left_icon.png',
+          text: true
+        }"
+        class="ptb_4"
+      >
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 20px; height: 20px; margin-right: 16px"
+          />
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'与其他 Windows 功能共享浏览数据'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'arrow_left_icon.png',
+          text: true
+        }"
+        class="ptb_4"
+      >
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 20px; height: 20px; margin-right: 16px"
+          />
+        </template>
+      </common-line>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line
+        :title="'Microsoft 电子钱包'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'share_icon.png',
+          name: '打开电子钱包'
+        }"
+        class="ptb_16"
+      >
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 52px; height: 35px; margin-right: 12px"
+          />
+        </template>
+        <template #content>
+          <p class="title_12">电子钱包可安全地存储你的所有个人信息和资产</p>
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'付款信息'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'share_icon.png',
+          text: true
+        }"
+        class="ptb_4"
+      >
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 20px; height: 20px; margin-right: 16px"
+          />
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'密码'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'share_icon.png',
+          text: true
+        }"
+        class="ptb_4"
+      >
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 20px; height: 20px; margin-right: 16px"
+          />
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'个人信息'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'share_icon.png',
+          text: true
+        }"
+        class="ptb_4"
+      >
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 20px; height: 20px; margin-right: 16px"
+          />
+        </template>
+      </common-line>
+    </div>
+    <div class="pb_12">
+      <div class="title">其他用户配置</div>
+    </div>
+    <div class="outer-frame">
+      <common-line :type="'buttonGroup'" :btnGroup="btnGroupConfig" class="ptb_16">
+        <template #image>
+          <img
+            src="../img/edge-new-fill.png"
+            style="width: 52px; height: 52px; border-radius: 50%; margin-right: 20px"
+          />
+        </template>
+        <template #content>
+          <p class="title_16">用户配置1</p>
+        </template>
+      </common-line>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import commonLine from './commonLine.vue'
+import completeIcon from '../img/complete_icon.png'
+
+const btnGroup = [
+  {
+    name: '',
+    icon: 'edit_icon.png'
+  },
+  {
+    name: '',
+    icon: 'del_icon.png'
+  },
+  {
+    name: '退出登录'
+  }
+]
+const btnGroupConfig = [
+  {
+    name: '切换'
+  },
+  {
+    name: '',
+    icon: 'del_icon.png'
+  }
+]
+</script>
+
+<style lang="scss" scoped>
+.personal-page {
+}
+</style>
diff --git a/src/components/Setting/components/system.vue b/src/components/Setting/components/system.vue
new file mode 100644
index 0000000..594eab7
--- /dev/null
+++ b/src/components/Setting/components/system.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="common-page">
+    <div class="pb_12">
+      <div class="title">系统</div>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line :title="'启动增强'" :type="'switch'" class="ptb_8">
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            快速转到浏览。启用此功能后，有助于启动设备时更快打开 Microsoft Edge。
+            <a href="" class="a_style">了解更多信息</a>
+          </p>
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'在 Microsoft Edge 关闭后继续运行后台扩展和应用'"
+        :type="'switch'"
+        class="ptb_8"
+      />
+      <hr class="divider" />
+      <common-line :title="'在可用时使用图形加速'" :type="'switch'" class="ptb_8" />
+      <hr class="divider" />
+      <common-line :title="'增强 Microsoft Edge 中的视频'" :type="'switch'" class="ptb_8">
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            插入设备时锐化视频并改进颜色、照明和对比度。受保护视频和屏幕上较小的视频将不会得到增强。当多个视频在一个网站上处于活动状态时，只会增强最近播放的视频。
+          </p>
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'视频增强的首选方法：'"
+        :options="selectOptions"
+        :type="'select'"
+        :selectWidth="'200px'"
+        class="ptb_8"
+      >
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            插入设备时锐化视频并改进颜色、照明和对比度。受保护视频和屏幕上较小的视频将不会得到增强。当多个视频在一个网站上处于活动状态时，只会增强最近播放的视频。
+          </p>
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'打开计算机的代理设置'"
+        :type="'button'"
+        :buttonOne="{
+          icon: 'share_icon.png',
+          text: true
+        }"
+        class="ptb_4"
+      />
+    </div>
+    <div class="pb_12">
+      <div class="title">优化性能</div>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line :title="'效率模式'" :type="'switch'" class="ptb_8">
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            快速转到浏览。启用此功能后，有助于启动设备时更快打开 Microsoft
+            Edge。快速转到浏览。启用此功能后，有助于启动设备时更快打开 Microsoft
+            Edge。快速转到浏览。启用此功能后，有助于启动设备时更快打开 Microsoft Edge。
+          </p>
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line :title="'使用效率模式改善电脑游戏体验'" :type="'switch'" class="ptb_8">
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            当你玩电脑游戏时，Microsoft Edge减少其计算机资源 （CPU） 使用量，以创建更好的游戏体验。
+          </p>
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line :title="'使用标签页休眠功能节约资源'" :type="'switch'" class="ptb_8">
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            启用此选项后，不活动的标签页将在指定时间后进入休眠状态以节约系统资源。
+            <a href="" class="a_style">了解更多信息</a>
+          </p>
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line :title="'淡出睡眠标签页'" :type="'switch'" class="ptb_8">
+        <template #bottomcontent>
+          <p class="title_12_gray"> 保存内存和 CPU 以提高性能时，标签页将显示为淡出。 </p>
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'在指定一段时间后，将非活动标签页置于睡眠状态：'"
+        :options="selectTimeOptions"
+        :type="'select'"
+        :selectWidth="'200px'"
+        class="ptb_8"
+      >
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            当效率模式打开时，非活动选项卡将在 5
+            分钟或更短时间后进入睡眠状态。实际时间可能因资源使用情况和阻止站点睡眠的活动（例如播放音频）而异。
+          </p>
+        </template>
+      </common-line>
+      <hr class="divider" />
+      <common-line
+        :title="'从不让这些站点进入睡眠状态'"
+        :type="'button'"
+        :buttonOne="{
+          name: '添加'
+        }"
+        class="ptb_4"
+      >
+        <template #bottomcontent>
+          <common-line
+            :title="'https://baidu.com'"
+            :type="'button'"
+            :buttonOne="{
+              text: true,
+              icon: 'edit_icon.png'
+            }"
+            class="ptb_8"
+          >
+            <template #image>
+              <img :src="completeIcon" style="width: 12px; height: 12px; margin-right: 10px" />
+            </template>
+          </common-line>
+        </template>
+      </common-line>
+    </div>
+    <div class="pb_12">
+      <div class="title">管理你的性能</div>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line :title="'性能检测器'" :type="'switch'" class="ptb_8">
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            当此项打开时，浏览器将检测到选项卡性能问题并推荐一个操作以修复此问题。
+          </p>
+        </template>
+      </common-line>
+    </div>
+    <div class="pb_12">
+      <div class="title">开发人员工具</div>
+    </div>
+    <div class="outer-frame" style="margin-bottom: 30px">
+      <common-line :title="'使用 F12 键打开开发人员工具'" :type="'switch'" class="ptb_8"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import commonLine from './commonLine.vue'
+import completeIcon from '../img/complete_icon.png'
+
+const selectOptions = [
+  {
+    value: '0',
+    label: '生动模式'
+  },
+  {
+    value: '1',
+    label: '图形驱动程序增强功能'
+  }
+]
+const selectTimeOptions = [
+  {
+    value: '0',
+    label: '不活动30秒'
+  },
+  {
+    value: '1',
+    label: '5分钟不活动'
+  },
+  {
+    value: '2',
+    label: '15分钟不活动'
+  }
+]
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/components/Setting/img/add_icon.png b/src/components/Setting/img/add_icon.png
new file mode 100644
index 0000000..c5ad63d
Binary files /dev/null and b/src/components/Setting/img/add_icon.png differ
diff --git a/src/components/Setting/img/arrow_left_icon.png b/src/components/Setting/img/arrow_left_icon.png
new file mode 100644
index 0000000..03a91d5
Binary files /dev/null and b/src/components/Setting/img/arrow_left_icon.png differ
diff --git a/src/components/Setting/img/complete_icon.png b/src/components/Setting/img/complete_icon.png
new file mode 100644
index 0000000..90f8b43
Binary files /dev/null and b/src/components/Setting/img/complete_icon.png differ
diff --git a/src/components/Setting/img/del_icon.png b/src/components/Setting/img/del_icon.png
new file mode 100644
index 0000000..5808efc
Binary files /dev/null and b/src/components/Setting/img/del_icon.png differ
diff --git a/src/components/Setting/img/edge-new-fill.png b/src/components/Setting/img/edge-new-fill.png
new file mode 100644
index 0000000..5278541
Binary files /dev/null and b/src/components/Setting/img/edge-new-fill.png differ
diff --git a/src/components/Setting/img/edit_icon.png b/src/components/Setting/img/edit_icon.png
new file mode 100644
index 0000000..1b641e3
Binary files /dev/null and b/src/components/Setting/img/edit_icon.png differ
diff --git a/src/components/Setting/img/share_icon.png b/src/components/Setting/img/share_icon.png
new file mode 100644
index 0000000..47d2c61
Binary files /dev/null and b/src/components/Setting/img/share_icon.png differ
diff --git a/src/components/Setting/index.vue b/src/components/Setting/index.vue
new file mode 100644
index 0000000..debafbe
--- /dev/null
+++ b/src/components/Setting/index.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="setting">
+    <div class="left-tabs">
+      <div class="title">设置</div>
+      <el-input
+        v-model="searchValue"
+        class="search-input"
+        placeholder="搜索设置"
+        :prefix-icon="Search"
+      />
+      <div class="tabs">
+        <div v-for="(tab, tIndex) in tabsList" :key="tIndex" class="tabs-block">
+          <div
+            v-for="(item, index) in tab.children"
+            :key="index"
+            class="tab"
+            :class="{ 'active-tab': activeTab === item.value }"
+            @click="changeTab(item.value)"
+          >
+            <div v-if="activeTab === item.value" class="active-flag"></div>
+            <div
+              class="tab-icon"
+              :style="{ backgroundImage: `url(${getAssetsFile(item.icon)})` }"
+            ></div>
+            <div class="tab-label">{{ item.label }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right-contents">
+      <Personal v-if="activeTab === 'personal'" />
+      <Assistant v-if="activeTab === 'assistant'" />
+      <System v-if="activeTab === 'system'" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import Personal from './components/personal.vue'
+import Assistant from './components/assistant.vue'
+import System from './components/system.vue'
+
+import './style/common.scss'
+
+const searchValue = ref('')
+
+const tabsList = ref([
+  {
+    name: 'first',
+    children: [
+      {
+        label: '个人资料',
+        value: 'personal',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '隐私、搜索和服务',
+        value: 'security',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '外观',
+        value: 'outlook',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '侧栏',
+        value: 'sidebar',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '启动、主页和新建选项卡页',
+        value: 'tabs',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '共享、复制和粘贴',
+        value: 'operate',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: 'Cookie 和网站权限',
+        value: 'cookie',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '默认浏览器',
+        value: 'default',
+        icon: 'edge-new-fill.png'
+      }
+    ]
+  },
+  {
+    name: 'second',
+    children: [
+      {
+        label: '语言',
+        value: 'language',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '下载',
+        value: 'download',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '辅助功能',
+        value: 'assistant',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '系统和性能',
+        value: 'system',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '家庭安全',
+        value: 'safe',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '打印机',
+        value: 'print',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '手机和其他设备',
+        value: 'device',
+        icon: 'edge-new-fill.png'
+      },
+      {
+        label: '重置设置',
+        value: 'reset',
+        icon: 'edge-new-fill.png'
+      }
+    ]
+  },
+  {
+    name: 'third',
+    children: [
+      {
+        label: '关于 Microsoft Edge',
+        value: 'about',
+        icon: 'edge-new-fill.png'
+      }
+    ]
+  }
+])
+const getAssetsFile = (url: string) => {
+  return new URL(`./img/${url}`, import.meta.url).href
+}
+const activeTab = ref('personal')
+const changeTab = (value: string) => {
+  activeTab.value = value
+}
+</script>
+
+<style lang="scss" scoped>
+.setting {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  background-color: rgb(247, 247, 247);
+  .left-tabs {
+    width: 29%;
+    height: 100%;
+    overflow-y: auto;
+    padding: 30px 25px 20px 50px;
+    border-right: 1px solid #b6b6b6;
+    .title {
+      font-size: 24px;
+      font-weight: 600;
+    }
+    .search-input {
+      margin-top: 14px;
+    }
+    .tabs {
+      margin-top: 10px;
+      .tabs-block {
+        .tab {
+          height: 32px;
+          cursor: pointer;
+          padding-left: 10px;
+          display: flex;
+          align-items: center;
+          position: relative;
+          .active-flag {
+            width: 3px;
+            height: 20px;
+            background: #0072c9;
+            position: absolute;
+            left: 2px;
+          }
+          .tab-icon {
+            width: 20px;
+            height: 20px;
+            background-size: 100% 100%;
+            background-position: center;
+            background-repeat: no-repeat;
+            margin-right: 10px;
+          }
+          .tab-label {
+            margin-bottom: 4px;
+            margin-top: 4px;
+            font-size: 14px;
+            line-height: 20px;
+            font-weight: 400;
+            color: #262626;
+          }
+        }
+        .active-tab,
+        .tab:hover {
+          background: #e5e5e5;
+        }
+      }
+      .tabs-block:not(:first-child) {
+        margin-top: 20px;
+      }
+    }
+  }
+  .right-contents {
+    flex: 1;
+    height: 100%;
+    overflow-y: auto;
+  }
+}
+</style>
diff --git a/src/components/Setting/style/common.scss b/src/components/Setting/style/common.scss
new file mode 100644
index 0000000..96a297b
--- /dev/null
+++ b/src/components/Setting/style/common.scss
@@ -0,0 +1,110 @@
+.common-page {
+  height: 100%;
+  padding: 36px 50px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+.pb_12 {
+  padding-bottom: 12px;
+}
+.ptb_16 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.ptb_8 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.ptb_4 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.outer-frame {
+  width: 100%;
+  margin-bottom: 12px;
+  background: #ffffff;
+  border-radius: 4px;
+  box-shadow:
+    0px 1.6px 3.6px rgba(0, 0, 0, 0.13),
+    0px 0px 2.9px rgba(0, 0, 0, 0.11);
+}
+
+.divider {
+  margin: 0;
+  margin: 4px 0px;
+  height: 0;
+  border: none;
+  box-sizing: content-box;
+  transition: all 0.2s ease-in-out;
+  border-top: 1px solid #eaeaea;
+}
+
+.title {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  color: #262626;
+}
+.title_16 {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+}
+.title_14 {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  color: #2b2b2b;
+}
+.title_12 {
+  font-size: 12px;
+  line-height: 16px;
+}
+.title_12_gray {
+  font-size: 12px;
+  line-height: 16px;
+  color: #767676;
+}
+
+.icon_style {
+  display: inline-block;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.a_style {
+  border-bottom: 1px solid #0078D4;
+  color: #0078D4;
+  text-decoration: none;
+}
+
+.el-button {
+  height: 32px;
+  padding: 0 9px;
+  > span {
+    display: flex;
+    align-items: center;
+  }
+  .add-icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+    background-image: url('../img/add_icon.png');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    margin-right: 10px;
+  }
+}