From e8437b33919eaf2bdf125bbfd827aee61a1aa28f Mon Sep 17 00:00:00 2001
From: "maghny@126.com" <maghny@126.com>
Date: Tue, 20 May 2025 08:30:51 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E7=BB=84=E4=BB=B6=E9=83=A8=E5=88=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Setting/components/assistant.vue          | 229 +++++++++++++++
 .../Setting/components/commonLine.vue         | 160 +++++++++++
 .../Setting/components/personal.vue           | 269 ++++++++++++++++++
 src/components/Setting/components/system.vue  | 185 ++++++++++++
 src/components/Setting/img/add_icon.png       | Bin 0 -> 2529 bytes
 .../Setting/img/arrow_left_icon.png           | Bin 0 -> 3226 bytes
 src/components/Setting/img/complete_icon.png  | Bin 0 -> 6841 bytes
 src/components/Setting/img/del_icon.png       | Bin 0 -> 3847 bytes
 src/components/Setting/img/edge-new-fill.png  | Bin 0 -> 6259 bytes
 src/components/Setting/img/edit_icon.png      | Bin 0 -> 6560 bytes
 src/components/Setting/img/share_icon.png     | Bin 0 -> 6306 bytes
 src/components/Setting/index.vue              | 231 +++++++++++++++
 src/components/Setting/style/common.scss      | 110 +++++++
 13 files changed, 1184 insertions(+)
 create mode 100644 src/components/Setting/components/assistant.vue
 create mode 100644 src/components/Setting/components/commonLine.vue
 create mode 100644 src/components/Setting/components/personal.vue
 create mode 100644 src/components/Setting/components/system.vue
 create mode 100644 src/components/Setting/img/add_icon.png
 create mode 100644 src/components/Setting/img/arrow_left_icon.png
 create mode 100644 src/components/Setting/img/complete_icon.png
 create mode 100644 src/components/Setting/img/del_icon.png
 create mode 100644 src/components/Setting/img/edge-new-fill.png
 create mode 100644 src/components/Setting/img/edit_icon.png
 create mode 100644 src/components/Setting/img/share_icon.png
 create mode 100644 src/components/Setting/index.vue
 create mode 100644 src/components/Setting/style/common.scss

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 0000000000000000000000000000000000000000..c5ad63dde632cb15f2bb0fb759729020ce4c3f42
GIT binary patch
literal 2529
zcmeHJeKgZ+9G`8mX)-UJ8RB<YN4m;HrK~pYVtVm1-5XM@vN=|pQF)iSH+f5vI22J=
zT_@w<2x0S@<z<dmW2hBLh{R@C+WqzKy`6Lax_{i4Kc44%p6B^|U!KqTexL7?>gD04
zqiw7Wfk1TJDP$@rg<l6k6P$Uz6-A)Xh@iT;Kq^G0QxFL9mOI(`Xw=EsTY`td$FRwR
zd-GDmj%*$99Xc?OayiSe0Knb+E-A$Fy?GW%yUH=L(CMZdnl9o$Sa0FZq|s==a!u;x
z0z+3XZ_5w{t>kL=(Fmo)ggVq4B~r2Ywvn@wE|1qfuqzpT?FBnWpSS61;=?>)8+RME
zv^49W5tsJj!^~muHgjDRxX{EGV_(Aunw+<FK)5z%?)lxPCz2f4UhC~hz<Oy&ZW$Ip
z_nAC*L7{~%y9$CsH4)@R%~~`JUY&K7o?oB={kv5gL+)LnEejovJnW+{K8PG(Y+Lm~
z;G$LF=G#j|n$r=nL9Ik7SlpxDTKf4>&O)DL_}UF3XJ8zO<ESDVUk--y8mZkd<w{14
zWO)B4d(6H9Qud=u0vT~v=6K}>tiYdV7FapRHe0ai?`0;E-YKHzN0Mn#WjPC@+?F0*
z?WAs8ZWrBw1lV^I<UfwgF13oq;)k(MT8WW!qtPLaFTbdQ615m0Uo|0wxy|i(0`=g^
zBIoEz7<1OvZ3ls644{3AlVtpORqBgSMf&L>j_Dl&k*J=qL-ns}B03_Y<R+|_j}_0K
zK7GpUO3cg4^OQA3FEYCDgc%b6EqgP-2D0wmEY*N#7Z;KAe@(YUk_{(=;A2DS!AP7$
zIU+{joF6-8lgOM6u0Uq9Z!YOnd_)p%`J$_S%4yFtdz{G}q!AZKvC4u^jZvU_oqLS9
zj!UQfps9+!O}N%N`)rbFtVIvfBJEHMXlgGA#klFGY!S60I;t=|`jm3^9Dw8(UI$$o
z_<5kc1E8(|@)`0QUbWokXESi<t|DQ0Qp%V<9_pUu0YW>k!!6Px@KDZ&&T6>+%q=HM
z5}SbogCOS`kPY(^^(aZ_LFo2O9NPQ#&w44RZF4tg`N~F}_2Zl@ksVc5)whAW_3#Yv
z_68u7gX5-*nPz}dSJ`koR^M&Nem#P92Qv3vpMdLiZVrNH1BHJkYIkH7TqdG`L8RJP
zrEJ-*VF~g9LQj~w19u&@EYV#jZ4Lod{Dz<ZHPrdQ8tUt#*wz!U(j47a&9TaTB9{u2
z*zoX$VLMq|bo7ecu0K%8V2{>+s#C<Q{j{`~3YC6TUb{NJ9AG^$O-#Ut*}~X|#qt|{
z^qM}Zp_!0X7h57(<(03qSNa<-)0ndn*g!L5VS+%t?3gLoUTQO4>4P;HdD9!uoVAHL
zQNl&F&#zItF?TUfn^>s0(%Pk$!WU$%1tqmxWq}cvSD@k=YnNQ!rnNz(vlp*P{MG0N
zN4g@oSh6}Tl}aZqk8Q*X-I%;7^;wK{o?neg6lkJTDvP;;NnRJO&}qkiuE|;OdJD~e
zag&QV&J4U7;C&t-+LjWq4J7)7;MXgX;hyW?r)_wfPwl?;)guelB=wIa#Oy5LHZ2a8
zU$CCAh$-o9lxQXl`>W1A(Qbn^_~Qhj*;OwF*>s*__qZd!`nSNHE3$LLtUBGIqN4qT
z%<*=y!@jV!M_%ev34Wix%!TsQj$lO>vZBm(Ou+Le#g!kAFRPs^`d{f$+D?AW?mwh#
zLagyOs?6g*m!SXG_Fp`U^0fqY6~|N^)%zZ79`9qC6K0H(8Syaqm{ZOxJgR-BG{<uj
zLNMU3l5_hPhB7n}XI%5UnnLSF&M|p`#9zv4S^XjrpChax*jH*m^9Lur*(S+vv`TXr
zYF)WXGHjI@W2f5>HhsEJS#yX{ayqqp)l9DRX9hldh1z)qRB6Avl1Ve-2OL~E%v1bu
ztg_(#RHfLVnJ+!dKg~BD1v}$?(mY=WO_8a3rVqp5r?lZ8M<85zv!Gn`4?CPU9~_Kc
VHxqbI2L9O~?gu=`6)r(ZzXKwUXuSXc

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..03a91d517424c2547efd477d92544832d983015f
GIT binary patch
literal 3226
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
O03bJS*P5MSjQ;|w`<KoD

literal 0
HcmV?d00001

diff --git a/src/components/Setting/img/complete_icon.png b/src/components/Setting/img/complete_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..90f8b433b2f9828718ff905c15b4bfad743fdb51
GIT binary patch
literal 6841
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
Y9o#eV7h^Z=CjdZQSzD?65i00^00un8X8-^I

literal 0
HcmV?d00001

diff --git a/src/components/Setting/img/del_icon.png b/src/components/Setting/img/del_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..5808efc627a00bf8866926bae9e8934bd4dd569f
GIT binary patch
literal 3847
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

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..52785416f1c0fcb68f45e2c476b0644a9dfdb582
GIT binary patch
literal 6259
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
Z6iiIS(W)Pd-~S@uX{zcWYZ3OS{{vyUjS&C<

literal 0
HcmV?d00001

diff --git a/src/components/Setting/img/edit_icon.png b/src/components/Setting/img/edit_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b641e3bf1f286c39203e2864a9e3f0d921ec0e7
GIT binary patch
literal 6560
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

literal 0
HcmV?d00001

diff --git a/src/components/Setting/img/share_icon.png b/src/components/Setting/img/share_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..47d2c61bc67a070e035b5b9813f41c1253135bdc
GIT binary patch
literal 6306
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
I(6WE>KXgILWdHyG

literal 0
HcmV?d00001

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;
+  }
+}