diff --git a/.env.local b/.env.local
index 3576558..8e9004b 100644
--- a/.env.local
+++ b/.env.local
@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://localhost:48080'
+VITE_BASE_URL='http://8.153.195.62:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server
diff --git a/src/components/Setting/children/components/clear.vue b/src/components/Setting/children/components/clear.vue
index 06be6d4..99f42b7 100644
--- a/src/components/Setting/children/components/clear.vue
+++ b/src/components/Setting/children/components/clear.vue
@@ -7,6 +7,7 @@
       <common-line
         :title="'浏览历史记录'"
         :type="'switch'"
+        @switch="val => { browsingHistory = val; sendMsg(name, '浏览历史记录', 'clearOnClose', 'browsingHistory', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -19,6 +20,7 @@
       <common-line
         :title="'下载历史记录'"
         :type="'switch'"
+        @switch="val => { downloadHistory = val; sendMsg(name, '下载历史记录', 'clearOnClose', 'downloadHistory', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -31,6 +33,7 @@
       <common-line
         :title="'Cookie 和其他站点数据'"
         :type="'switch'"
+        @switch="val => { cookiesAndData = val; sendMsg(name, 'Cookie 和其他站点数据', 'clearOnClose', 'cookiesAndData', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -43,6 +46,7 @@
       <common-line
         :title="'缓存的图像和文件'"
         :type="'switch'"
+        @switch="val => { cachedImages = val; sendMsg(name, '缓存的图像和文件', 'clearOnClose', 'cachedImages', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -55,6 +59,7 @@
       <common-line
         :title="'密码'"
         :type="'switch'"
+        @switch="val => { passwords = val; sendMsg(name, '密码', 'clearOnClose', 'passwords', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -67,6 +72,7 @@
       <common-line
         :title="'自动填充表单数据(包括表单和卡)'"
         :type="'switch'"
+        @switch="val => { autofillData = val; sendMsg(name, '自动填充表单数据', 'clearOnClose', 'autofillData', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -79,6 +85,7 @@
       <common-line
         :title="'站点权限'"
         :type="'switch'"
+        @switch="val => { sitePermissions = val; sendMsg(name, '站点权限', 'clearOnClose', 'sitePermissions', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -93,7 +100,19 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from '../../components/commonLine.vue'
+import { sendMsg } from '../../index'
+
+const name = ref('关闭时清除浏览器数据')
+
+let browsingHistory = ref(false)
+let downloadHistory = ref(false)
+let cookiesAndData = ref(false)
+let cachedImages = ref(false)
+let passwords = ref(false)
+let autofillData = ref(false)
+let sitePermissions = ref(false)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Setting/children/components/dictionary.vue b/src/components/Setting/children/components/dictionary.vue
index 46e2297..2a862f5 100644
--- a/src/components/Setting/children/components/dictionary.vue
+++ b/src/components/Setting/children/components/dictionary.vue
@@ -1,24 +1,27 @@
 <template>
   <div class="dictionary-page">
-    <div class="outer-frame" style="margin-bottom: 30px; padding: 16px;">
+    <div class="outer-frame" style="margin-bottom: 30px; padding: 16px">
       <div class="flex">
-        <el-input v-model="input" placeholder="添加新字词" />
-        <el-button style="margin-left: 10px">添加字词</el-button>
+        <el-input
+          v-model="input"
+          placeholder="添加新字词"
+          @input="val => sendMsg(name, '输入新字词', 'dictionary', 'inputWord', val)"
+        />
+        <el-button style="margin-left: 10px" @click="addWord">添加字词</el-button>
       </div>
     </div>
-    <div class="outer-frame" style="margin-bottom: 30px; padding: 16px;">
-      <p class="title_14" style="margin-bottom: 10px;">已添加的字词</p>
+    <div class="outer-frame" style="margin-bottom: 30px; padding: 16px">
+      <p class="title_14" style="margin-bottom: 10px">已添加的字词</p>
       <hr class="divider" />
-      <div style="margin-top: 10px;">
-        <div class="flex-between">
-          <p class="title_14">微软雅黑</p>
-          <p class="title_14">×</p>
-        </div>
+      <div v-if="wordList.length === 0" class="empty-list">
+        <p>没有要显示的字词</p>
       </div>
-      <div style="margin-top: 10px;">
-        <div class="flex-between">
-          <p class="title_14">黑体</p>
-          <p class="title_14">×</p>
+      <div v-else>
+        <div v-for="(word, index) in wordList" :key="word" style="margin-top: 10px">
+          <div class="flex-between">
+            <p class="title_14">{{ word }}</p>
+            <p class="title_14 del-icon" @click="deleteWord(word, index)">×</p>
+          </div>
         </div>
       </div>
     </div>
@@ -26,10 +29,38 @@
 </template>
 
 <script lang="ts" setup>
-import commonLine from '../../components/commonLine.vue'
+import { ref } from 'vue'
+import { sendMsg } from '../../index'
 
+const name = ref('自定义词典')
 const input = ref('')
+const wordList = ref(['微软雅黑', '黑体'])
+
+const addWord = () => {
+  if (input.value.trim()) {
+    wordList.value.push(input.value.trim())
+    sendMsg(name.value, '添加字词', 'dictionary', 'addWord', input.value.trim())
+    input.value = ''
+  }
+}
+
+const deleteWord = (word: string, index: number) => {
+  wordList.value.splice(index, 1)
+  sendMsg(name.value, '删除字词', 'dictionary', 'deleteWord', word)
+}
 </script>
 
 <style lang="scss" scoped>
+.dictionary-page {
+  .empty-list {
+    text-align: center;
+    color: #717171;
+    padding: 20px 0;
+  }
+  .del-icon {
+    cursor: pointer;
+    padding: 0 5px;
+    font-weight: bold;
+  }
+}
 </style>
diff --git a/src/components/Setting/children/components/exception.vue b/src/components/Setting/children/components/exception.vue
index 1eb32ef..8b13e7f 100644
--- a/src/components/Setting/children/components/exception.vue
+++ b/src/components/Setting/children/components/exception.vue
@@ -9,7 +9,32 @@
         @button-group="handleException"
       />
       <hr class="divider" />
-      <div class="add-list"></div>
+      <div class="add-list">
+        <div v-if="exceptionList.length === 0" class="empty-list">
+          <p>没有要显示的站点</p>
+        </div>
+        <div v-else>
+          <div v-for="(site, index) in exceptionList" :key="site" class="item flex-between">
+            <div class="flex">
+              <img
+                src="../../img/edge-new-fill.png"
+                style="width: 20px; height: 20px; margin-right: 10px"
+              />
+              <p class="title_14">{{ site }}</p>
+            </div>
+            <div class="more">
+              <el-dropdown trigger="click">
+                <div class="more-btn"></div>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="deleteSite(site, index)">删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <Dialog
@@ -17,15 +42,20 @@
       :dialog-top="'30vh'"
       :dialog-width="'40%'"
       :visible="exceptionVisible"
+      @close="cancelAdd"
     >
       <template #content>
-        <p style="margin-bottom: 10px;">添加站点</p>
-        <el-input v-model="input" placeholder="Please input" />
+        <p style="margin-bottom: 10px">站点</p>
+        <el-input
+          v-model="input"
+          placeholder="例如: www.example.com"
+          @input="val => sendMsg(name, '输入例外站点', 'exception', 'inputSite', val)"
+        />
       </template>
       <template #foot>
         <div class="foot-btn">
-          <el-button type="primary" @click="exceptionVisible = false">添加</el-button>
-          <el-button type="primary" @click="exceptionVisible = false">取消</el-button>
+          <el-button type="primary" @click="addSite">添加</el-button>
+          <el-button @click="cancelAdd">取消</el-button>
         </div>
       </template>
     </Dialog>
@@ -33,8 +63,12 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from '../../components/commonLine.vue'
 import Dialog from '../../common/dialog.vue'
+import { sendMsg } from '../../index'
+
+const name = ref('跟踪防护例外')
 
 const btnGroupConfig = [
   {
@@ -46,14 +80,37 @@ const btnGroupConfig = [
 ]
 
 const exceptionVisible = ref(false)
-const handleException = (item: any) => {
+const input = ref('')
+const exceptionList = ref(['https://www.bing.com'])
+
+const handleException = (item: { name: string }) => {
   if (item.name === '添加站点') {
     exceptionVisible.value = true
-  } else {
-    console.log(item)
+    sendMsg(name.value, '打开添加站点弹窗', 'exception', 'openAddSiteDialog', true)
+  } else if (item.name === '全部删除') {
+    exceptionList.value = []
+    sendMsg(name.value, '全部删除', 'exception', 'deleteAllSites', true)
   }
 }
-const input = ref('')
+
+const addSite = () => {
+  if (input.value.trim()) {
+    exceptionList.value.push(input.value.trim())
+    sendMsg(name.value, '确认添加站点', 'exception', 'addSite', input.value.trim())
+    input.value = ''
+    exceptionVisible.value = false
+  }
+}
+
+const cancelAdd = () => {
+  exceptionVisible.value = false
+  sendMsg(name.value, '取消添加站点', 'exception', 'cancelAddSite', true)
+}
+
+const deleteSite = (site: string, index: number) => {
+  exceptionList.value.splice(index, 1)
+  sendMsg(name.value, '删除单个站点', 'exception', 'deleteSite', site)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -68,7 +125,28 @@ const input = ref('')
     }
   }
   .add-list {
-    min-height: 10px;
+    padding: 8px 16px;
+    .empty-list {
+      text-align: center;
+      color: #717171;
+      padding: 20px 0;
+    }
+    .item {
+      padding: 8px 0;
+    }
+    .more {
+      .more-btn {
+        width: 20px;
+        height: 20px;
+        background: url('../../img/more_icon.png') no-repeat center center;
+        background-size: 100%;
+        cursor: pointer;
+      }
+    }
+  }
+  .foot-btn {
+    display: flex;
+    justify-content: flex-end;
   }
 }
 </style>
diff --git a/src/components/Setting/children/components/import.vue b/src/components/Setting/children/components/import.vue
index 51382f9..8b48551 100644
--- a/src/components/Setting/children/components/import.vue
+++ b/src/components/Setting/children/components/import.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="security-page">
+  <div class="import-page">
     <div class="pb_12">
       <div class="title">将所有凭据保存在Microsoft Edge</div>
       <p class="title_12_gray" style="margin-bottom: 30px">
@@ -14,11 +14,11 @@
           name: '导入'
         }"
         class="ptb_16"
-        @button-one="openImportDialog"
+        @button-one="openImportDialog('Google Chrome')"
       >
         <template #image>
           <img
-            src="../../img/edge-new-fill.png"
+            src="../../img/chrome_icon.png"
             style="width: 32px; height: 35px; margin-right: 12px"
           />
         </template>
@@ -34,11 +34,11 @@
           name: '导入'
         }"
         class="ptb_16"
-        @button-one="openImportDialog"
+        @button-one="openImportDialog('IE11')"
       >
         <template #image>
           <img
-            src="../../img/edge-new-fill.png"
+            src="../../img/ie_icon.png"
             style="width: 32px; height: 35px; margin-right: 12px"
           />
         </template>
@@ -59,7 +59,7 @@
           name: '选择要导入的内容'
         }"
         class="ptb_16"
-        @button-one="openImportDialog"
+        @button-one="openImportDialog('Other')"
       >
         <template #content>
           <p class="title_12"
@@ -80,7 +80,7 @@
           name: '导入密码'
         }"
         class="ptb_16"
-        @button-one="openImportDialog"
+        @button-one="openImportDialog('PasswordManager')"
       >
         <template #content>
           <p class="title_12">从第三方密码管理器应用程序导入密码</p>
@@ -93,17 +93,19 @@
       :dialog-top="'30vh'"
       :dialog-width="'40%'"
       :visible="importVisible"
+      @close="handleCancel"
     >
       <template #content>
         <p>导入位置</p>
         <el-select
-          v-model="value"
+          v-model="importSource"
           class="m-2"
           placeholder="Select"
           style="margin: 0; margin-top: 10px"
+          @change="val => sendMsg(name, '选择导入位置', 'import', 'selectImportSource', val)"
         >
           <el-option
-            v-for="item in options"
+            v-for="item in sourceOptions"
             :key="item.value"
             :label="item.label"
             :value="item.value"
@@ -111,15 +113,19 @@
         </el-select>
         <p style="margin-top: 20px">选择要导入的内容</p>
         <div class="list">
-          <div v-for="item in options" :key="item.value" class="item">
-            <el-checkbox v-model="item.checked" :label="item.label" />
+          <div v-for="item in importItems" :key="item.value" class="item">
+            <el-checkbox
+              v-model="item.checked"
+              :label="item.label"
+              @change="val => handleCheckboxChange(item, val)"
+            />
           </div>
         </div>
       </template>
       <template #foot>
         <div class="foot-btn">
-          <el-button type="primary" @click="importVisible = false">导入</el-button>
-          <el-button type="primary" @click="importVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleImport">导入</el-button>
+          <el-button @click="handleCancel">取消</el-button>
         </div>
       </template>
     </Dialog>
@@ -127,29 +133,67 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from '../../components/commonLine.vue'
 import Dialog from '../../common/dialog.vue'
+import { sendMsg } from '../../index'
 
+const name = ref('导入浏览器数据')
 const importVisible = ref(false)
-const openImportDialog = () => {
+
+const openImportDialog = (from: string) => {
   importVisible.value = true
+  sendMsg(name.value, `打开导入弹窗(来自${from})`, 'import', 'openImportDialog', from)
 }
 
-const value = ref('')
-
-const options = [
-  {
-    value: 'Option1',
-    label: 'Option1',
-    checked: false
-  },
-  {
-    value: 'Option2',
-    label: 'Option2',
-    checked: false
-  }
+const importSource = ref('Google Chrome')
+const sourceOptions = [
+  { value: 'Google Chrome', label: 'Google Chrome' },
+  { value: 'Internet Explorer', label: 'Internet Explorer' },
+  { value: 'Mozilla Firefox', label: 'Mozilla Firefox' },
+  { value: '收藏夹或书签 HTML 文件', label: '收藏夹或书签 HTML 文件' }
 ]
+
+const importItems = ref([
+  { value: 'favorites', label: '收藏夹或书签', checked: true },
+  { value: 'passwords', label: '已保存的密码', checked: true },
+  { value: 'addresses', label: '地址等', checked: true },
+  { value: 'payment', label: '付款信息', checked: false },
+  { value: 'history', label: '浏览历史记录', checked: false },
+  { value: 'settings', label: '设置', checked: false },
+  { value: 'tabs', label: '固定的和打开的标签页', checked: false }
+])
+
+const handleCheckboxChange = (item: { label: string; value: string }, checked: boolean | string | number) => {
+  sendMsg(name.value, `勾选导入项: ${item.label}`, 'import', `check_${item.value}`, checked)
+}
+
+const handleImport = () => {
+  const selectedItems = importItems.value.filter(item => item.checked).map(item => item.label)
+  sendMsg(name.value, '确认导入', 'import', 'confirmImport', {
+    source: importSource.value,
+    items: selectedItems
+  })
+  importVisible.value = false
+}
+
+const handleCancel = () => {
+  sendMsg(name.value, '取消导入', 'import', 'cancelImport', true)
+  importVisible.value = false
+}
 </script>
 
 <style lang="scss" scoped>
+.import-page {
+  .list {
+    margin-top: 10px;
+    .item {
+      padding: 5px 0;
+    }
+  }
+  .foot-btn {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
 </style>
diff --git a/src/components/Setting/children/components/manage.vue b/src/components/Setting/children/components/manage.vue
index d8d63b1..2405ded 100644
--- a/src/components/Setting/children/components/manage.vue
+++ b/src/components/Setting/children/components/manage.vue
@@ -1,9 +1,19 @@
 <template>
   <div class="manage-page">
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'允许站点保存和读取 Cookie 数据(推荐)'" :type="'switch'" class="ptb_8" />
+      <common-line
+        :title="'允许站点保存和读取 Cookie 数据(推荐)'"
+        :type="'switch'"
+        @switch="val => { allowCookie = val; sendMsg(name, '允许站点保存和读取Cookie', 'manage', 'allowCookie', val); }"
+        class="ptb_8"
+      />
       <hr class="divider" />
-      <common-line :title="'阻止第三方 Cookie'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'阻止第三方 Cookie'"
+        :type="'switch'"
+        @switch="val => { blockThirdPartyCookie = val; sendMsg(name, '阻止第三方Cookie', 'manage', 'blockThirdPartyCookie', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             阻止站点使用跨 Web 跟踪你的 Cookie。某些网站上的功能可能会中断。
@@ -11,7 +21,12 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'预加载页面以更快浏览和搜索'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'预加载页面以更快浏览和搜索'"
+        :type="'switch'"
+        @switch="val => { preloadPages = val; sendMsg(name, '预加载页面', 'manage', 'preloadPages', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray"> 使用 cookie 记住你的首选项，即使你不访问这些页面 </p>
         </template>
@@ -25,6 +40,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="sendMsg(name, '查看所有Cookie和站点数据', 'manage', 'viewAllCookies', true)"
       />
     </div>
 
@@ -32,26 +48,25 @@
       <common-line
         :title="'阻止'"
         :type="'button'"
-        :buttonOne="{
-          name: '添加'
-        }"
+        :buttonOne="{ name: '添加' }"
         class="ptb_8"
+        @button-one="openDialog('block')"
       >
         <template #bottomcontent>
           <p class="title_12_gray"> 你已阻止以下网站在你的设备上保存和读取 Cookie。 </p>
         </template>
       </common-line>
       <hr class="divider" />
+      <site-list :list="blockList" @delete="deleteSite('block', $event)" />
     </div>
 
     <div class="outer-frame" style="margin-bottom: 30px">
       <common-line
         :title="'允许'"
         :type="'button'"
-        :buttonOne="{
-          name: '添加'
-        }"
+        :buttonOne="{ name: '添加' }"
         class="ptb_8"
+        @button-one="openDialog('allow')"
       >
         <template #bottomcontent>
           <p class="title_12_gray">
@@ -61,16 +76,16 @@
         </template>
       </common-line>
       <hr class="divider" />
+      <site-list :list="allowList" @delete="deleteSite('allow', $event)" />
     </div>
 
     <div class="outer-frame" style="margin-bottom: 30px">
       <common-line
         :title="'退出时清除'"
         :type="'button'"
-        :buttonOne="{
-          name: '添加'
-        }"
+        :buttonOne="{ name: '添加' }"
         class="ptb_8"
+        @button-one="openDialog('clearOnExit')"
       >
         <template #bottomcontent>
           <p class="title_12_gray">
@@ -80,6 +95,7 @@
         </template>
       </common-line>
       <hr class="divider" />
+      <site-list :list="clearOnExitList" @delete="deleteSite('clearOnExit', $event)" />
     </div>
 
     <div class="outer-frame" style="margin-bottom: 30px">
@@ -92,20 +108,123 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line class="ptb_8">
-        <template #bottomcontent>
-          <p class="title_12_gray">
-            未添加站点
-          </p>
-        </template>
-      </common-line>
+      <site-list :list="tempAllowList" :show-delete="false" />
     </div>
+
+    <Dialog
+      :dialog-title="dialogTitle"
+      :dialog-top="'30vh'"
+      :dialog-width="'40%'"
+      :visible="dialogVisible"
+      @close="handleCancel"
+    >
+      <template #content>
+        <p style="margin-bottom: 10px">站点</p>
+        <el-input
+          v-model="input"
+          placeholder="例如: www.example.com"
+          @input="val => sendMsg(name, `输入站点(${dialogType})`, 'manage', `inputSite_${dialogType}`, val)"
+        />
+      </template>
+      <template #foot>
+        <div class="foot-btn">
+          <el-button type="primary" @click="addSite">添加</el-button>
+          <el-button @click="handleCancel">取消</el-button>
+        </div>
+      </template>
+    </Dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from 'vue'
 import commonLine from '../../components/commonLine.vue'
+import Dialog from '../../common/dialog.vue'
+import { sendMsg } from '../../index'
+
+const name = ref('Cookie和站点权限')
+
+// Switches
+const allowCookie = ref(true)
+const blockThirdPartyCookie = ref(false)
+const preloadPages = ref(true)
+
+// Site Lists
+const blockList = ref(['[*.]google.com'])
+const allowList = ref<any>([])
+const clearOnExitList = ref<any>([])
+const tempAllowList = ref<any>([])
+
+// Dialog
+const dialogVisible = ref(false)
+const dialogType = ref<'block' | 'allow' | 'clearOnExit'>('block')
+const input = ref('')
+
+const dialogTitle = computed(() => {
+  switch (dialogType.value) {
+    case 'block':
+      return '添加要阻止的站点'
+    case 'allow':
+      return '添加要允许的站点'
+    case 'clearOnExit':
+      return '添加退出时要清除的站点'
+    default:
+      return '添加站点'
+  }
+})
+
+const openDialog = (type: 'block' | 'allow' | 'clearOnExit') => {
+  dialogType.value = type
+  dialogVisible.value = true
+  sendMsg(name.value, `打开添加站点弹窗(${type})`, 'manage', `openDialog_${type}`, true)
+}
+
+const addSite = () => {
+  if (input.value.trim()) {
+    const site = input.value.trim()
+    switch (dialogType.value) {
+      case 'block':
+        blockList.value.push(site)
+        break
+      case 'allow':
+        allowList.value.push(site)
+        break
+      case 'clearOnExit':
+        clearOnExitList.value.push(site)
+        break
+    }
+    sendMsg(name.value, `确认添加站点(${dialogType.value})`, 'manage', `addSite_${dialogType.value}`, site)
+    input.value = ''
+    dialogVisible.value = false
+  }
+}
+
+const handleCancel = () => {
+  dialogVisible.value = false
+  sendMsg(name.value, `取消添加站点(${dialogType.value})`, 'manage', `cancelAdd_${dialogType.value}`, true)
+}
+
+const deleteSite = (type: 'block' | 'allow' | 'clearOnExit', { site, index }: { site: string; index: number }) => {
+  switch (type) {
+    case 'block':
+      blockList.value.splice(index, 1)
+      break
+    case 'allow':
+      allowList.value.splice(index, 1)
+      break
+    case 'clearOnExit':
+      clearOnExitList.value.splice(index, 1)
+      break
+  }
+  sendMsg(name.value, `删除站点(${type})`, 'manage', `deleteSite_${type}`, site)
+}
 </script>
 
 <style lang="scss" scoped>
+.manage-page {
+  .foot-btn {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
 </style>
diff --git a/src/components/Setting/children/components/mouse.vue b/src/components/Setting/children/components/mouse.vue
index 694e5d6..3649ea2 100644
--- a/src/components/Setting/children/components/mouse.vue
+++ b/src/components/Setting/children/components/mouse.vue
@@ -1,11 +1,26 @@
 <template>
   <div class="mouse-page">
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'启用鼠标手势'" :type="'switch'" class="ptb_8" />
+      <common-line
+        :title="'启用鼠标手势'"
+        :type="'switch'"
+        @switch="val => { enableGestures = val; sendMsg(name, '启用鼠标手势', 'mouse', 'enableGestures', val); }"
+        class="ptb_8"
+      />
       <hr class="divider" />
-      <common-line :title="'显示鼠标轨迹'" :type="'switch'" class="ptb_8" />
+      <common-line
+        :title="'显示鼠标轨迹'"
+        :type="'switch'"
+        @switch="val => { showTrail = val; sendMsg(name, '显示鼠标轨迹', 'mouse', 'showTrail', val); }"
+        class="ptb_8"
+      />
       <hr class="divider" />
-      <common-line :title="'显示操作提示'" :type="'switch'" class="ptb_8" />
+      <common-line
+        :title="'显示操作提示'"
+        :type="'switch'"
+        @switch="val => { showTips = val; sendMsg(name, '显示操作提示', 'mouse', 'showTips', val); }"
+        class="ptb_8"
+      />
     </div>
 
     <div class="outer-frame" style="margin-bottom: 30px">
@@ -16,247 +31,28 @@
           name: '重置所有手势'
         }"
         class="ptb_8"
+        @button-one="resetGestures"
       />
       <hr class="divider" />
-      <common-line
-        :title="'左'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'右'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'向上'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'下移'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'先向下再向右'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'先向左再向上'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'先向右再向上'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'向右然后向下'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'先向上再向左'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'先向上再向右'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'向下然后向左'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'向左然后向下'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'先向上再向下'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'先向下再向上'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'先向左再向右'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
-      <hr class="divider" />
-      <common-line
-        :title="'先向右再向左'"
-        :options="selectOptions"
-        :type="'select'"
-        :selectWidth="'150px'"
-        class="ptb_8"
-      >
-        <template #image>
-          <img
-            src="../../img/edge-new-fill.png"
-            style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
-          />
-        </template>
-      </common-line>
+      <div v-for="(gesture, index) in gestures" :key="gesture.id">
+        <common-line
+          :title="gesture.name"
+          :options="selectOptions"
+          :type="'select'"
+          :selectWidth="'150px'"
+          v-model="gesture.action"
+          @select="val => handleGestureChange(gesture, val)"
+          class="ptb_8"
+        >
+          <template #image>
+            <img
+              src="../../img/edge-new-fill.png"
+              style="width: 20px; height: 20px; border-radius: 50%; margin-right: 16px"
+            />
+          </template>
+        </common-line>
+        <hr v-if="index < gestures.length - 1" class="divider" />
+      </div>
     </div>
 
     <div class="outer-frame" style="margin-bottom: 30px">
@@ -267,25 +63,134 @@
           name: '添加'
         }"
         class="ptb_8"
+        @button-one="openBlockDialog"
       >
         <template #bottomcontent>
           <p class="title_12_gray"> 可在此处添加网站以禁用鼠标手势。 </p>
         </template>
       </common-line>
+      <hr class="divider" />
+      <site-list :list="blockList" @delete="deleteBlockedSite" />
     </div>
+
+    <Dialog
+      :dialog-title="'添加要阻止的站点'"
+      :dialog-top="'30vh'"
+      :dialog-width="'40%'"
+      :visible="dialogVisible"
+      @close="cancelAdd"
+    >
+      <template #content>
+        <p style="margin-bottom: 10px">站点</p>
+        <el-input
+          v-model="input"
+          placeholder="例如: www.example.com"
+          @input="val => sendMsg(name, '输入要阻止的站点', 'mouse', 'inputBlockSite', val)"
+        />
+      </template>
+      <template #foot>
+        <div class="foot-btn">
+          <el-button type="primary" @click="addBlockedSite">添加</el-button>
+          <el-button @click="cancelAdd">取消</el-button>
+        </div>
+      </template>
+    </Dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from '../../components/commonLine.vue'
+import Dialog from '../../common/dialog.vue'
+import { sendMsg } from '../../index'
+
+const name = ref('鼠标手势')
+
+// Switches
+const enableGestures = ref(true)
+const showTrail = ref(true)
+const showTips = ref(true)
+
+// Gestures
+const gestures = ref([
+  { id: 'left', name: '左', action: 'back' },
+  { id: 'right', name: '右', action: 'forward' },
+  { id: 'up', name: '向上', action: 'scrollTop' },
+  { id: 'down', name: '下移', action: 'scrollBottom' },
+  { id: 'down_right', name: '先向下再向右', action: 'closeTab' },
+  { id: 'left_up', name: '先向左再向上', action: 'none' },
+  { id: 'right_up', name: '先向右再向上', action: 'none' },
+  { id: 'right_down', name: '向右然后向下', action: 'none' },
+  { id: 'up_left', name: '先向上再向左', action: 'none' },
+  { id: 'up_right', name: '先向上再向右', action: 'none' },
+  { id: 'down_left', name: '向下然后向左', action: 'none' },
+  { id: 'left_down', name: '向左然后向下', action: 'none' },
+  { id: 'up_down', name: '先向上再向下', action: 'refresh' },
+  { id: 'down_up', name: '先向下再向上', action: 'none' },
+  { id: 'left_right', name: '先向左再向右', action: 'switchToLeftTab' },
+  { id: 'right_left', name: '先向右再向左', action: 'switchToRightTab' }
+])
 
 const selectOptions = [
-  {
-    value: '0',
-    label: '返回'
-  }
+  { value: 'none', label: '无' },
+  { value: 'back', label: '返回' },
+  { value: 'forward', label: '前进' },
+  { value: 'refresh', label: '刷新' },
+  { value: 'scrollTop', label: '滚动到顶部' },
+  { value: 'scrollBottom', label: '滚动到底部' },
+  { value: 'closeTab', label: '关闭标签页' },
+  { value: 'switchToLeftTab', label: '切换到左侧标签页' },
+  { value: 'switchToRightTab', label: '切换到右侧标签页' }
 ]
+
+const resetGestures = () => {
+  // 这里可以根据需要实现重置逻辑
+  sendMsg(name.value, '重置所有手势', 'mouse', 'resetAllGestures', true)
+}
+
+const handleGestureChange = (gesture: { id: string; name: string }, value: string) => {
+  const g = gestures.value.find(g => g.id === gesture.id)
+  if (g) {
+    g.action = value
+    sendMsg(name.value, `配置手势: ${gesture.name}`, 'mouse', `gesture_${gesture.id}`, value)
+  }
+}
+
+// Block List
+const blockList = ref<any>([])
+const dialogVisible = ref(false)
+const input = ref<any>('')
+
+const openBlockDialog = () => {
+  dialogVisible.value = true
+  sendMsg(name.value, '打开添加阻止站点弹窗', 'mouse', 'openBlockDialog', true)
+}
+
+const addBlockedSite = () => {
+  if (input.value.trim()) {
+    blockList.value.push(input.value.trim())
+    sendMsg(name.value, '确认添加阻止站点', 'mouse', 'addBlockedSite', input.value.trim())
+    input.value = ''
+    dialogVisible.value = false
+  }
+}
+
+const cancelAdd = () => {
+  dialogVisible.value = false
+  sendMsg(name.value, '取消添加阻止站点', 'mouse', 'cancelAddBlockSite', true)
+}
+
+const deleteBlockedSite = ({ site, index }: { site: string; index: number }) => {
+  blockList.value.splice(index, 1)
+  sendMsg(name.value, '删除阻止的站点', 'mouse', 'deleteBlockedSite', site)
+}
 </script>
 
 <style lang="scss" scoped>
+.mouse-page {
+  .foot-btn {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
 </style>
diff --git a/src/components/Setting/children/components/preference.vue b/src/components/Setting/children/components/preference.vue
index f939c77..c61dec1 100644
--- a/src/components/Setting/children/components/preference.vue
+++ b/src/components/Setting/children/components/preference.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="preference-page">
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'自动登录 Microsoft Edge'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'自动登录 Microsoft Edge'"
+        :type="'switch'"
+        @switch="val => { autoLogin = val; sendMsg(name, '自动登录Microsoft Edge', 'preference', 'autoLogin', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             如果你当前未登录 Microsoft Edge，我们将使用来自其他 Microsoft 站点(如
@@ -14,7 +19,9 @@
         :title="'外部链接的默认工作区'"
         :options="linkSelectOptions"
         :type="'select'"
-        :selectWidth="'150px'"
+        :selectWidth="'250px'"
+        v-model="defaultWorkspace"
+        @select="val => sendMsg(name, '外部链接的默认工作区', 'preference', 'defaultWorkspace', val)"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -27,6 +34,7 @@
       <common-line
         :title="'使用此配置文件允许工作或学校网站单一登录'"
         :type="'switch'"
+        @switch="val => { allowSSO = val; sendMsg(name, '允许工作或学校网站单一登录', 'preference', 'allowSSO', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -42,7 +50,12 @@
       <div class="title">自动配置文件切换</div>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'基于账户的个人资料切换'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'基于账户的个人资料切换'"
+        :type="'switch'"
+        @switch="val => { accountBasedSwitch = val; sendMsg(name, '基于账户的个人资料切换', 'preference', 'accountBasedSwitch', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             访问需要工作或个人账户的网站时，自动切换到工作或个人配置文件。
@@ -50,7 +63,12 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'基于特选网站的个人资料切换'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'基于特选网站的个人资料切换'"
+        :type="'switch'"
+        @switch="val => { curatedSiteSwitch = val; sendMsg(name, '基于特选网站的个人资料切换', 'preference', 'curatedSiteSwitch', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             Microsoft Edge 的特选网站将自动切换到相关个人资料。这包括在个人资料中打开购物网站。
@@ -58,19 +76,34 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'基于Internet的个人资料切换'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'基于Internet的个人资料切换'"
+        :type="'switch'"
+        @switch="val => { internetBasedSwitch = val; sendMsg(name, '基于Internet的个人资料切换', 'preference', 'internetBasedSwitch', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray"> Internet站点将自动切换到工作配置文件。 </p>
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'基于 IE 模式的个人资料切换'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'基于 IE 模式的个人资料切换'"
+        :type="'switch'"
+        @switch="val => { ieModeSwitch = val; sendMsg(name, '基于IE模式的个人资料切换', 'preference', 'ieModeSwitch', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray"> 在IE模式网站列表中配置的站点将自动切换到工作配置文件 </p>
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'在自动个人资料切换后显示通知'" :type="'switch'" class="ptb_8" />
+      <common-line
+        :title="'在自动个人资料切换后显示通知'"
+        :type="'switch'"
+        @switch="val => { showSwitchNotification = val; sendMsg(name, '显示自动切换通知', 'preference', 'showSwitchNotification', val); }"
+        class="ptb_8"
+      />
     </div>
 
     <div class="outer-frame" style="margin-bottom: 30px">
@@ -81,6 +114,7 @@
           name: '添加'
         }"
         class="ptb_8"
+        @button-one="openAddDialog"
       >
         <template #bottomcontent>
           <p class="title_12_gray">
@@ -88,32 +122,157 @@
             Edge首选浏览器设置。如果组织使用应用程序防护且链接不受信任，则应用程序防护设置将
             替代这些设置。
           </p>
-
-          <p class="title_12_gray" style="margin: 20px 20px 0;">你选择自动切换配置文件的站点将显示在此处</p>
         </template>
       </common-line>
+      <hr class="divider" />
+      <div v-if="preferredSites.length === 0" class="empty-list">
+        <p>你选择自动切换配置文件的站点将显示在此处</p>
+      </div>
+      <div v-else>
+        <div v-for="(item, index) in preferredSites" :key="index" class="item flex-between">
+          <div class="flex">
+            <p class="title_14" style="width: 200px">{{ item.site }}</p>
+            <p class="title_14">{{ item.profileLabel }}</p>
+          </div>
+          <div class="more">
+            <el-dropdown trigger="click">
+              <div class="more-btn"></div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="deleteSite(item, index)">删除</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+      </div>
     </div>
+
+    <Dialog
+      :dialog-title="'添加首选个人资料'"
+      :dialog-top="'30vh'"
+      :dialog-width="'40%'"
+      :visible="dialogVisible"
+      @close="handleCancel"
+    >
+      <template #content>
+        <p style="margin-bottom: 10px">站点</p>
+        <el-input
+          v-model="inputSite"
+          placeholder="例如: www.example.com"
+          @input="val => sendMsg(name, '输入首选站点', 'preference', 'inputSite', val)"
+        />
+        <p style="margin-top: 20px; margin-bottom: 10px">个人资料</p>
+        <el-select
+          v-model="inputProfile"
+          placeholder="选择个人资料"
+          style="width: 100%"
+          @change="val => sendMsg(name, '选择首选个人资料', 'preference', 'selectProfile', val)"
+        >
+          <el-option
+            v-for="item in linkSelectOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </template>
+      <template #foot>
+        <div class="foot-btn">
+          <el-button type="primary" @click="handleAddSite">添加</el-button>
+          <el-button @click="handleCancel">取消</el-button>
+        </div>
+      </template>
+    </Dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from '../../components/commonLine.vue'
+import Dialog from '../../common/dialog.vue'
+import { sendMsg } from '../../index'
+
+const name = ref('个人资料首选项')
+
+// States
+const autoLogin = ref(true)
+const defaultWorkspace = ref('0')
+const allowSSO = ref(true)
+const accountBasedSwitch = ref(true)
+const curatedSiteSwitch = ref(true)
+const internetBasedSwitch = ref(false)
+const ieModeSwitch = ref(false)
+const showSwitchNotification = ref(true)
 
 const linkSelectOptions = [
-  {
-    value: '0',
-    label: '上次使用(默认)'
-  },
-  {
-    value: '1',
-    label: '个人(demo@wwjt.com.cn)'
-  },
-  {
-    value: '2',
-    label: '用户配置1'
-  }
+  { value: '0', label: '上次使用(默认)' },
+  { value: '1', label: '个人(demo@wwjt.com.cn)' },
+  { value: '2', label: '用户配置1' }
 ]
+
+// Preferred Sites List
+const preferredSites = ref<{ site: string; profile: string; profileLabel: string }[]>([])
+
+// Dialog
+const dialogVisible = ref(false)
+const inputSite = ref('')
+const inputProfile = ref('')
+
+const openAddDialog = () => {
+  dialogVisible.value = true
+  sendMsg(name.value, '打开添加首选个人资料弹窗', 'preference', 'openAddDialog', true)
+}
+
+const handleAddSite = () => {
+  if (inputSite.value.trim() && inputProfile.value) {
+    const profileLabel = linkSelectOptions.find(opt => opt.value === inputProfile.value)?.label || ''
+    const newSite = {
+      site: inputSite.value.trim(),
+      profile: inputProfile.value,
+      profileLabel: profileLabel
+    }
+    preferredSites.value.push(newSite)
+    sendMsg(name.value, '确认添加首选个人资料', 'preference', 'addPreferredSite', newSite)
+    inputSite.value = ''
+    inputProfile.value = ''
+    dialogVisible.value = false
+  }
+}
+
+const handleCancel = () => {
+  dialogVisible.value = false
+  sendMsg(name.value, '取消添加首选个人资料', 'preference', 'cancelAddPreferredSite', true)
+}
+
+const deleteSite = (item: { site: string }, index: number) => {
+  preferredSites.value.splice(index, 1)
+  sendMsg(name.value, '删除首选个人资料', 'preference', 'deletePreferredSite', item.site)
+}
 </script>
 
 <style lang="scss" scoped>
+.preference-page {
+  .empty-list {
+    text-align: center;
+    color: #717171;
+    padding: 20px 16px;
+  }
+  .item {
+    padding: 8px 16px;
+    .more {
+      .more-btn {
+        width: 20px;
+        height: 20px;
+        background: url('../../img/more_icon.png') no-repeat center center;
+        background-size: 100%;
+        cursor: pointer;
+      }
+    }
+  }
+  .foot-btn {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
 </style>
diff --git a/src/components/Setting/children/components/rewards.vue b/src/components/Setting/children/components/rewards.vue
index aed3166..3baa786 100644
--- a/src/components/Setting/children/components/rewards.vue
+++ b/src/components/Setting/children/components/rewards.vue
@@ -8,6 +8,7 @@
       <common-line
         :title="'在 Microsoft Edge 中赚取 Microsoft Rewards'"
         :type="'switch'"
+        @switch="val => { earnRewards = val; sendMsg(name, '在 Microsoft Edge 中赚取 Microsoft Rewards', 'rewards', 'earnRewards', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -21,7 +22,12 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from '../../components/commonLine.vue'
+import { sendMsg } from '../../index'
+
+const name = ref('奖励')
+const earnRewards = ref(true)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Setting/children/components/share.vue b/src/components/Setting/children/components/share.vue
index 89e81e4..96af16c 100644
--- a/src/components/Setting/children/components/share.vue
+++ b/src/components/Setting/children/components/share.vue
@@ -4,6 +4,7 @@
       <common-line
         :title="'与其他 Windows 功能共享浏览数据'"
         :type="'switch'"
+        @switch="val => { shareData = val; sendMsg(name, '与其他 Windows 功能共享浏览数据', 'share', 'shareData', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -17,7 +18,12 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from '../../components/commonLine.vue'
+import { sendMsg } from '../../index'
+
+const name = ref('共享、复制和粘贴')
+const shareData = ref(true)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Setting/children/components/split.vue b/src/components/Setting/children/components/split.vue
index e76e496..ed6e2fa 100644
--- a/src/components/Setting/children/components/split.vue
+++ b/src/components/Setting/children/components/split.vue
@@ -1,13 +1,23 @@
 <template>
   <div class="split-page">
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'启用拆分屏幕'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'启用拆分屏幕'"
+        :type="'switch'"
+        @switch="val => { enableSplitScreen = val; sendMsg(name, '启用拆分屏幕', 'split', 'enableSplitScreen', val); }"
+        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">
+      <common-line
+        :title="'链接选项卡'"
+        :type="'switch'"
+        @switch="val => { linkTabs = val; sendMsg(name, '链接选项卡', 'split', 'linkTabs', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray"> 单击左侧标签页上的链接以默认在每个拆分屏幕标签页的右侧标签页上打开它们。 </p>
         </template>
@@ -17,7 +27,13 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from '../../components/commonLine.vue'
+import { sendMsg } from '../../index'
+
+const name = ref('拆分屏幕')
+const enableSplitScreen = ref(true)
+const linkTabs = ref(true)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Setting/children/components/sync.vue b/src/components/Setting/children/components/sync.vue
index d78dbc4..770e421 100644
--- a/src/components/Setting/children/components/sync.vue
+++ b/src/components/Setting/children/components/sync.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="sync-page">
-    <p class="title_12_gray" style="margin-bottom: 12px;">
+    <p class="title_12_gray" style="margin-bottom: 12px">
       Microsoft Edge 可以在所有已登录设备上同步你的历史记录、收藏夹、密码和其他浏览器数据。
       <a href="" class="a_style">了解更多信息</a>
     </p>
@@ -18,8 +18,8 @@
         <template #content>
           <p class="title_16">个人</p>
           <p class="title_12">123@test.com</p>
-          <p class="title_12 flex" style="color: #107c10"
-            ><i
+          <p class="title_12 flex" style="color: #107c10">
+            <i
               class="icon_style"
               :style="{
                 width: '12px',
@@ -27,31 +27,55 @@
                 backgroundImage: `url(${completeIcon})`,
                 marginRight: '4px'
               }"
-            ></i
-            >同步已启用</p
-          >
+            ></i>
+            同步已启用
+          </p>
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'收藏夹'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'收藏夹'"
+        :type="'switch'"
+        :switchState="syncFavorites"
+        @switch="val => { syncFavorites = val; sendMsg(name, '同步收藏夹', 'sync', 'syncFavorites', val); }"
+        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">
+      <common-line
+        :title="'设置'"
+        :type="'switch'"
+        :switchState="syncSettings"
+        @switch="val => { syncSettings = val; sendMsg(name, '同步设置', 'sync', 'syncSettings', val); }"
+        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">
+      <common-line
+        :title="'个人信息'"
+        :type="'switch'"
+        :switchState="syncPersonalInfo"
+        @switch="val => { syncPersonalInfo = val; sendMsg(name, '同步个人信息', 'sync', 'syncPersonalInfo', val); }"
+        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">
+      <common-line
+        :title="'密码'"
+        :type="'switch'"
+        :switchState="syncPasswords"
+        @switch="val => { syncPasswords = val; sendMsg(name, '同步密码', 'sync', 'syncPasswords', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray"> 已安全保存，可在所有设备上使用 </p>
           <p class="title_12_gray">
@@ -60,25 +84,49 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'历史记录'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'历史记录'"
+        :type="'switch'"
+        :switchState="syncHistory"
+        @switch="val => { syncHistory = val; sendMsg(name, '同步历史记录', 'sync', 'syncHistory', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray"> 查看你在 Microsoft Edge 中访问过的网页 </p>
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'扩展'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'扩展'"
+        :type="'switch'"
+        :switchState="syncExtensions"
+        @switch="val => { syncExtensions = val; sendMsg(name, '同步扩展', 'sync', 'syncExtensions', val); }"
+        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">
+      <common-line
+        :title="'应用'"
+        :type="'switch'"
+        :switchState="syncApps"
+        @switch="val => { syncApps = val; sendMsg(name, '同步应用', 'sync', 'syncApps', val); }"
+        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">
+      <common-line
+        :title="'电子钱包资产'"
+        :type="'switch'"
+        :switchState="syncWallet"
+        @switch="val => { syncWallet = val; sendMsg(name, '同步电子钱包资产', 'sync', 'syncWallet', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             保存在 Microsoft 帐户中的电子钱包资产（成员身份和票证）可在已登录设备上使用
@@ -86,7 +134,13 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'功能使用情况'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'功能使用情况'"
+        :type="'switch'"
+        :switchState="syncFeatureUsage"
+        @switch="val => { syncFeatureUsage = val; sendMsg(name, '同步功能使用情况', 'sync', 'syncFeatureUsage', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             保存有关如何跨设备使用 Edge 功能的信息，以确定适合你的最佳布局
@@ -162,14 +216,15 @@
       :dialog-top="'30vh'"
       :dialog-width="'30%'"
       :visible="againVisible"
+      @close="handleAgainCancel"
     >
       <template #content>
         <p>我们会将本地浏览数据与存储在 Microsoft 服务器上的同步数据合并。</p>
       </template>
       <template #foot>
         <div class="foot-btn">
-          <el-button type="primary" @click="againVisible = false">重新同步</el-button>
-          <el-button type="primary" @click="againVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleAgainConfirm">重新同步</el-button>
+          <el-button @click="handleAgainCancel">取消</el-button>
         </div>
       </template>
     </Dialog>
@@ -180,20 +235,21 @@
       :dialog-top="'30vh'"
       :dialog-width="'30%'"
       :visible="resetVisible"
+      @close="handleResetCancel"
     >
       <template #content>
-        <p
-          >我们将从 Microsoft
-          服务器中删除你的同步数据，然后将你的浏览数据从此设备重新同步到服务器。</p
-        >
-        <p style="margin-top: 10px"
-          >如果此设备上的同步数据出现问题，请先尝试将数据重新同步到此设备，然后再从服务器中删除同步数据。</p
-        >
+        <p>
+          我们将从 Microsoft
+          服务器中删除你的同步数据，然后将你的浏览数据从此设备重新同步到服务器。
+        </p>
+        <p style="margin-top: 10px">
+          如果此设备上的同步数据出现问题，请先尝试将数据重新同步到此设备，然后再从服务器中删除同步数据。
+        </p>
       </template>
       <template #foot>
         <div class="foot-btn">
-          <el-button type="primary" @click="resetVisible = false">重置</el-button>
-          <el-button type="primary" @click="resetVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleResetConfirm">重置</el-button>
+          <el-button @click="handleResetCancel">取消</el-button>
         </div>
       </template>
     </Dialog>
@@ -201,28 +257,66 @@
 </template>
 
 <script lang="ts" setup>
+// ...existing code...
+import { ref } from 'vue'
 import commonLine from '../../components/commonLine.vue'
 import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 import completeIcon from '../../img/complete_icon.png'
 import Dialog from '../../common/dialog.vue'
+import { sendMsg } from '../../index'
+
+const name = ref('同步')
+
+// Sync switches
+const syncFavorites = ref(false)
+const syncSettings = ref(false)
+const syncPersonalInfo = ref(false)
+const syncPasswords = ref(false)
+const syncHistory = ref(false)
+const syncExtensions = ref(false)
+const syncApps = ref(false)
+const syncWallet = ref(false)
+const syncFeatureUsage = ref(false)
 
 const isExpand = ref(false)
 const expandReset = () => {
   isExpand.value = !isExpand.value
+  sendMsg(name.value, '展开/折叠重置选项', 'sync', 'expandReset', isExpand.value)
 }
 
+// Resync Dialog
 const againVisible = ref(false)
 const openAgainDialog = () => {
   againVisible.value = true
+  sendMsg(name.value, '打开重新同步弹窗', 'sync', 'openAgainDialog', true)
+}
+const handleAgainConfirm = () => {
+  againVisible.value = false
+  sendMsg(name.value, '确认重新同步', 'sync', 'confirmResync', true)
+}
+const handleAgainCancel = () => {
+  againVisible.value = false
+  sendMsg(name.value, '取消重新同步', 'sync', 'cancelResync', true)
 }
 
+// Reset Dialog
 const resetVisible = ref(false)
 const openResetDialog = () => {
   resetVisible.value = true
+  sendMsg(name.value, '打开重置同步弹窗', 'sync', 'openResetDialog', true)
+}
+const handleResetConfirm = () => {
+  resetVisible.value = false
+  sendMsg(name.value, '确认重置同步', 'sync', 'confirmReset', true)
+}
+const handleResetCancel = () => {
+  resetVisible.value = false
+  sendMsg(name.value, '取消重置同步', 'sync', 'cancelReset', true)
 }
 </script>
 
 <style lang="scss" scoped>
+// ...existing code...
 .sync-page {
   .avator {
     width: 52px;
@@ -256,5 +350,9 @@ const openResetDialog = () => {
     color: #0078d4;
     cursor: pointer;
   }
+  .foot-btn {
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 </style>
diff --git a/src/components/Setting/children/components/urlsearch.vue b/src/components/Setting/children/components/urlsearch.vue
index 9ec78dd..c0edd18 100644
--- a/src/components/Setting/children/components/urlsearch.vue
+++ b/src/components/Setting/children/components/urlsearch.vue
@@ -58,6 +58,7 @@
         :options="selectOptions"
         :type="'select'"
         :selectWidth="'200px'"
+        @select="val => { searchEngine = val; sendMsg(name, '地址栏中使用的搜索引擎', 'urlsearch', 'searchEngine', val); }"
         class="ptb_8"
       />
       <hr class="divider" />
@@ -68,6 +69,7 @@
           icon: 'arrow_left_icon.png',
           text: true
         }"
+        @button-one="() => sendMsg(name, '点击管理搜索引擎', 'urlsearch', 'manageSearchEngines', true)"
         class="ptb_4"
       />
       <hr class="divider" />
@@ -78,6 +80,7 @@
           icon: 'arrow_left_icon.png',
           text: true
         }"
+        @button-one="() => sendMsg(name, '点击搜索建议和筛选器', 'urlsearch', 'manageSuggestions', true)"
         class="ptb_4"
       />
     </div>
@@ -85,7 +88,12 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from '../../components/commonLine.vue'
+import { sendMsg } from '../../index'
+
+const name = ref('地址栏和搜索')
+const searchEngine = ref('0')
 
 const selectOptions = [
   {
diff --git a/src/components/Setting/components/about.vue b/src/components/Setting/components/about.vue
index afeaed0..efa2616 100644
--- a/src/components/Setting/components/about.vue
+++ b/src/components/Setting/components/about.vue
@@ -24,6 +24,7 @@
       <common-line
         :title="'通过按流量计费的连接下载更新'"
         :type="'switch'"
+        @switch="val => { downloadUpdatesOnMetered = val; sendMsg(name, '通过按流量计费的连接下载更新', 'about', 'downloadUpdatesOnMetered', val); }"
         class="ptb_8"
         style="padding-left: 20px; padding-right: 20px"
       >
@@ -64,6 +65,7 @@
           icon: 'share_icon_white.png',
           name: '了解更多信息'
         }"
+        @button-one="sendMsg(name, '了解更多信息', 'about', 'learnMoreInsider', true)"
         class="ptb_8"
         style="padding: 20px"
       />
@@ -96,7 +98,12 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
+import { sendMsg } from '../index'
+
+const name = ref('关于')
+let downloadUpdatesOnMetered = ref(false)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Setting/components/assistant.vue b/src/components/Setting/components/assistant.vue
index cbe2d3b..0db4984 100644
--- a/src/components/Setting/components/assistant.vue
+++ b/src/components/Setting/components/assistant.vue
@@ -7,6 +7,7 @@
       <common-line
         :title="'在页面上的焦点区域周围显示高可见性大纲'"
         :type="'switch'"
+        @switch="val => { highVisibilityOutline = val; sendMsg(name, '高可见性大纲', 'accessibility', 'highVisibilityOutline', val); }"
         class="ptb_8"
       />
     </div>
@@ -16,6 +17,7 @@
         :options="selectOptions"
         :type="'select'"
         :selectWidth="'100px'"
+        @select-change="val => { pageZoom = val; sendMsg(name, '页面缩放', 'accessibility', 'pageZoom', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -32,6 +34,7 @@
         :options="selectColorOptions"
         :type="'select'"
         :selectWidth="'100px'"
+        @select-change="val => { pageColor = val; sendMsg(name, '页面颜色', 'accessibility', 'pageColor', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -39,7 +42,12 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'仅在开启高对比度主题时应用页面颜色'" :type="'switch'" class="ptb_8" />
+      <common-line
+        :title="'仅在开启高对比度主题时应用页面颜色'"
+        :type="'switch'"
+        @switch="val => { applyColorOnHighContrast = val; sendMsg(name, '仅高对比度时应用页面颜色', 'accessibility', 'applyColorOnHighContrast', val); }"
+        class="ptb_8"
+      />
       <hr class="divider" />
       <common-line
         :title="'指定站点'"
@@ -49,6 +57,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('specifiedSites', '辅助功能', '指定站点')"
       >
         <template #bottomcontent>
           <p class="title_12_gray"> 从页面颜色中排除的网站列表 </p>
@@ -64,6 +73,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="sendMsg(name, '打开字幕的系统首选项', 'accessibility', 'openCaptionPreferences', true)"
       >
         <template #bottomcontent>
           <p class="title_12_gray"> 更改支持此设置的网站描述文字显示方式 </p>
@@ -74,6 +84,7 @@
       <common-line
         :title="'关闭自定义滚动条'"
         :type="'switch'"
+        @switch="val => { closeCustomScrollbars = val; sendMsg(name, '关闭自定义滚动条', 'accessibility', 'closeCustomScrollbars', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -90,6 +101,7 @@
       <common-line
         :title="'从 Microsoft 获取屏幕阅读器的图像说明'"
         :type="'switch'"
+        @switch="val => { imageDescriptions = val; sendMsg(name, '获取图像说明', 'accessibility', 'imageDescriptions', val); }"
         class="ptb_8"
       />
     </div>
@@ -97,6 +109,7 @@
       <common-line
         :title="'在关闭具有多个选项卡的窗口之前询问'"
         :type="'switch'"
+        @switch="val => { askBeforeClosingTabs = val; sendMsg(name, '关闭多标签页前询问', 'accessibility', 'askBeforeClosingTabs', val); }"
         class="ptb_8"
       />
     </div>
@@ -104,6 +117,7 @@
       <common-line
         :title="'选择文本时显示迷你菜单'"
         :type="'switch'"
+        @switch="val => { showMiniMenuOnSelect = val; sendMsg(name, '选择文本时显示迷你菜单', 'accessibility', 'showMiniMenuOnSelect', val); }"
         class="ptb_8"
       />
     </div>
@@ -111,6 +125,7 @@
       <common-line
         :title="'下载开始时显示下载菜单'"
         :type="'switch'"
+        @switch="val => { showDownloadMenu = val; sendMsg(name, '下载开始时显示下载菜单', 'accessibility', 'showDownloadMenu', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -124,6 +139,7 @@
       <common-line
         :title="'在支持的菜单中添加辅助功能操作'"
         :type="'switch'"
+        @switch="val => { addAccessibilityActions = val; sendMsg(name, '添加辅助功能操作', 'accessibility', 'addAccessibilityActions', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -137,6 +153,7 @@
       <common-line
         :title="'在页面之间轻扫'"
         :type="'switch'"
+        @switch="val => { swipeToNavigate = val; sendMsg(name, '在页面之间轻扫', 'accessibility', 'swipeToNavigate', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -154,6 +171,7 @@
           icon: 'share_icon.png',
           text: true
         }"
+        @button-one="sendMsg(name, '了解辅助功能', 'accessibility', 'learnMoreAccessibility', true)"
         class="ptb_4"
       />
     </div>
@@ -161,7 +179,7 @@
       <div class="title">键盘</div>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'使用文本光标导航页面'" :type="'switch'" class="ptb_8">
+      <common-line :title="'使用文本光标导航页面'" :type="'switch'" @switch="val => { useTextCursor = val; sendMsg(name, '使用文本光标导航页面', 'accessibility', 'useTextCursor', val); }" class="ptb_8">
         <template #bottomcontent>
           <p class="title_12_gray">
             若要打开或关闭“插入光标”浏览，请按 F7。
@@ -174,6 +192,7 @@
       <common-line
         :title="'使用 F12 键打开开发人员工具'"
         :type="'switch'"
+        @switch="val => { useF12DevTools = val; sendMsg(name, '使用F12打开开发者工具', 'accessibility', 'useF12DevTools', val); }"
         class="ptb_8"
       />
     </div>
@@ -185,6 +204,7 @@
           icon: 'share_icon.png',
           text: true
         }"
+        @button-one="sendMsg(name, '了解键盘快捷方式', 'accessibility', 'learnMoreKeyboardShortcuts', true)"
         class="ptb_4"
       />
     </div>
@@ -192,38 +212,47 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
-import completeIcon from '../img/complete_icon.png'
+import { sendMsg } from '../index'
+
+const name = ref('辅助功能')
+
+// 查看
+let highVisibilityOutline = ref(false)
+let pageZoom = ref('2')
+let pageColor = ref('0')
+let applyColorOnHighContrast = ref(false)
+let closeCustomScrollbars = ref(false)
+
+// 使用
+let imageDescriptions = ref(false)
+let askBeforeClosingTabs = ref(false)
+let showMiniMenuOnSelect = ref(false)
+let showDownloadMenu = ref(false)
+let addAccessibilityActions = ref(false)
+let swipeToNavigate = ref(false)
+
+// 键盘
+let useTextCursor = ref(false)
+let useF12DevTools = ref(false)
 
 const selectOptions = [
-  {
-    value: '0',
-    label: '25%'
-  },
-  {
-    value: '1',
-    label: '50%'
-  },
-  {
-    value: '2',
-    label: '100%'
-  }
+  { value: '0', label: '25%' },
+  { value: '1', label: '50%' },
+  { value: '2', label: '100%' }
 ]
 const selectColorOptions = [
-  {
-    value: '0',
-    label: '关'
-  },
-  {
-    value: '1',
-    label: '沙漠'
-  },
-  {
-    value: '2',
-    label: '黄昏'
-  }
+  { value: '0', label: '关' },
+  { value: '1', label: '沙漠' },
+  { value: '2', label: '黄昏' }
 ]
+
+const emit = defineEmits(['routeHandle'])
+const goChildPage = (val: string, pTitle: string, cTitle: string) => {
+  emit('routeHandle', val, pTitle, cTitle)
+  sendMsg(name.value, `导航到 ${cTitle}`, 'accessibility', `navigateTo${val}`, true)
+}
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/Setting/components/commonLine.vue b/src/components/Setting/components/commonLine.vue
index 175a2d4..5559daf 100644
--- a/src/components/Setting/components/commonLine.vue
+++ b/src/components/Setting/components/commonLine.vue
@@ -47,7 +47,12 @@
               </div>
             </div>
             <div v-if="opt.type === 'select'">
-              <el-select v-model="selectValue" class="m-2" :style="{ width: opt.selectWidth }">
+              <el-select
+                v-model="selectValue"
+                class="m-2"
+                :style="{ width: opt.selectWidth }"
+                @change="selectChangeHandle"
+              >
                 <el-option
                   v-for="item in opt.selectOptions"
                   :key="item.value"
@@ -85,7 +90,12 @@
             </div>
           </div>
           <div v-if="type === 'select'">
-            <el-select v-model="selectValue" class="m-2" :style="{ width: selectWidth }">
+            <el-select
+              v-model="selectValue"
+              class="m-2"
+              :style="{ width: selectWidth }"
+              @change="selectChangeHandle"
+            >
               <el-option
                 v-for="item in selectOptions"
                 :key="item.value"
@@ -144,6 +154,10 @@ const props = defineProps({
   optGroup: {
     type: Array,
     default: () => []
+  },
+  switchState: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -173,10 +187,16 @@ watch(
   }
 )
 
-const emit = defineEmits(['switch', 'buttonOne', 'buttonGroup'])
+const emit = defineEmits(['switch', 'buttonOne', 'buttonGroup', 'select-change'])
 
 // 切换
-let switchVal = ref(false)
+let switchVal = ref(props.switchState)
+watch(
+  () => props.switchState,
+  (newVal) => {
+    switchVal.value = newVal
+  }
+)
 const switchHandle = (val: boolean) => {
   emit('switch', val)
 }
@@ -188,9 +208,15 @@ const handleOperate = () => {
 const handleGroupOperate = (item: any) => {
   emit('buttonGroup', item)
 }
+
+// 下拉框
+const selectChangeHandle = (val: any) => {
+  emit('select-change', val)
+}
 </script>
 
 <style lang="scss" scoped>
+// ...existing code...
 .common-line {
   width: 100%;
   padding-left: 16px;
diff --git a/src/components/Setting/components/cookie.vue b/src/components/Setting/components/cookie.vue
index e5cf10b..a67e292 100644
--- a/src/components/Setting/components/cookie.vue
+++ b/src/components/Setting/components/cookie.vue
@@ -31,6 +31,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('allSites', 'Cookie 和已存储数据', '所有网站')"
       >
         <template #bottomcontent>
           <p class="title_12_gray"> 查看你访问的网站的权限 </p>
@@ -63,6 +64,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('location', 'Cookie 和已存储数据', '位置')"
       >
         <template #image>
           <img
@@ -71,7 +73,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 首先询问 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 首先询问 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -83,6 +85,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('camera', 'Cookie 和已存储数据', '摄像头')"
       >
         <template #image>
           <img
@@ -91,7 +94,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 首先询问 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 首先询问 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -103,6 +106,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('microphone', 'Cookie 和已存储数据', '麦克风')"
       >
         <template #image>
           <img
@@ -111,7 +115,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 首先询问 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 首先询问 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -123,6 +127,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('sensors', 'Cookie 和已存储数据', '运动或光传感器')"
       >
         <template #image>
           <img
@@ -131,7 +136,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 允许站点使用运动传感器和光传感器 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 允许站点使用运动传感器和光传感器 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -143,6 +148,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('notifications', 'Cookie 和已存储数据', '通知')"
       >
         <template #image>
           <img
@@ -151,7 +157,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 首先询问 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 首先询问 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -163,6 +169,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('javascript', 'Cookie 和已存储数据', 'JavaScript')"
       >
         <template #image>
           <img
@@ -171,7 +178,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 已允许 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 已允许 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -183,6 +190,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('images', 'Cookie 和已存储数据', '图像')"
       >
         <template #image>
           <img
@@ -191,7 +199,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 全部显示 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 全部显示 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -203,6 +211,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('popups', 'Cookie 和已存储数据', '弹出窗口和重定向')"
       >
         <template #image>
           <img
@@ -211,7 +220,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 已阻止 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 已阻止 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -223,6 +232,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('intrusiveAds', 'Cookie 和已存储数据', '侵入性广告')"
       >
         <template #image>
           <img
@@ -231,7 +241,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 已阻止 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 已阻止 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -243,6 +253,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('backgroundSync', 'Cookie 和已存储数据', '后台同步')"
       >
         <template #image>
           <img
@@ -251,7 +262,9 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 允许最近关闭的站点完成数据的发送和接收 </p>
+          <p class="title_12_gray" style="padding-left: 36px">
+            允许最近关闭的站点完成数据的发送和接收
+          </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -263,6 +276,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('autoDownloads', 'Cookie 和已存储数据', '自动下载')"
       >
         <template #image>
           <img
@@ -271,7 +285,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 站点尝试自动下载多个文件时询问 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 站点尝试自动下载多个文件时询问 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -283,6 +297,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('protocolHandlers', 'Cookie 和已存储数据', '协议处理程序')"
       >
         <template #image>
           <img
@@ -291,7 +306,9 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 允许站点请求成为协议的默认处理程序 </p>
+          <p class="title_12_gray" style="padding-left: 36px">
+            允许站点请求成为协议的默认处理程序
+          </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -303,6 +320,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('midi', 'Cookie 和已存储数据', 'MIDI 设备')"
       >
         <template #image>
           <img
@@ -311,7 +329,9 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 站点要使用系统独占消息访问 MIDI 设备时询问 </p>
+          <p class="title_12_gray" style="padding-left: 36px">
+            站点要使用系统独占消息访问 MIDI 设备时询问
+          </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -323,6 +343,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('zoomLevels', 'Cookie 和已存储数据', '缩放级别')"
       >
         <template #image>
           <img
@@ -340,6 +361,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('usb', 'Cookie 和已存储数据', 'USB 设备')"
       >
         <template #image>
           <img
@@ -348,7 +370,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 站点要访问 USB 设备时询问 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 站点要访问 USB 设备时询问 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -360,6 +382,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('serialPorts', 'Cookie 和已存储数据', '串行端口')"
       >
         <template #image>
           <img
@@ -368,7 +391,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 站点要访问串行端口时询问 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 站点要访问串行端口时询问 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -380,6 +403,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('fileEditing', 'Cookie 和已存储数据', '文件编辑')"
       >
         <template #image>
           <img
@@ -388,7 +412,9 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 在站点想要编辑设备上的文件或文件夹时进行询问 </p>
+          <p class="title_12_gray" style="padding-left: 36px">
+            在站点想要编辑设备上的文件或文件夹时进行询问
+          </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -400,6 +426,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('pdf', 'Cookie 和已存储数据', 'PDF 文档')"
       >
         <template #image>
           <img
@@ -417,6 +444,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('pip', 'Cookie 和已存储数据', '画中画')"
       >
         <template #image>
           <img
@@ -434,6 +462,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('magnifyImages', 'Cookie 和已存储数据', '放大图像')"
       >
         <template #image>
           <img
@@ -451,6 +480,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('handwriting', 'Cookie 和已存储数据', '手写转文本')"
       >
         <template #image>
           <img
@@ -468,6 +498,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('protectedContent', 'Cookie 和已存储数据', '受保护的内容')"
       >
         <template #image>
           <img
@@ -485,6 +516,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('clipboard', 'Cookie 和已存储数据', '剪贴板')"
       >
         <template #image>
           <img
@@ -493,7 +525,9 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 站点要查看复制到剪贴板的文本和图像时询问 </p>
+          <p class="title_12_gray" style="padding-left: 36px">
+            站点要查看复制到剪贴板的文本和图像时询问
+          </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -505,6 +539,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('paymentHandlers', 'Cookie 和已存储数据', '付款处理程序')"
       >
         <template #image>
           <img
@@ -513,7 +548,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 允许站点安装付款处理程序 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 允许站点安装付款处理程序 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -525,6 +560,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('mediaAutoplay', 'Cookie 和已存储数据', '媒体自动播放')"
       >
         <template #image>
           <img
@@ -542,6 +578,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('insecureContent', 'Cookie 和已存储数据', '不安全的内容')"
       >
         <template #image>
           <img
@@ -550,7 +587,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 默认情况下，安全站点会阻止不安全的内容 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 默认情况下，安全站点会阻止不安全的内容 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -562,6 +599,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('vr', 'Cookie 和已存储数据', '虚拟现实')"
       >
         <template #image>
           <img
@@ -570,7 +608,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 站点要使用虚拟现实设备和数据时询问 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 站点要使用虚拟现实设备和数据时询问 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -582,6 +620,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('ar', 'Cookie 和已存储数据', '增强现实')"
       >
         <template #image>
           <img
@@ -590,7 +629,9 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 站点要创建周围环境的 3D 地图或跟踪摄像头位置时询问 </p>
+          <p class="title_12_gray" style="padding-left: 36px">
+            站点要创建周围环境的 3D 地图或跟踪摄像头位置时询问
+          </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -602,6 +643,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('deviceUse', 'Cookie 和已存储数据', '你的设备使用')"
       >
         <template #image>
           <img
@@ -610,7 +652,9 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 你的网站可询问你何时积极使用设备设备使用 </p>
+          <p class="title_12_gray" style="padding-left: 36px">
+            你的网站可询问你何时积极使用设备设备使用
+          </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -622,6 +666,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('appLinks', 'Cookie 和已存储数据', '应用程序链接')"
       >
         <template #image>
           <img
@@ -639,6 +684,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('windowManagement', 'Cookie 和已存储数据', '窗口管理')"
       >
         <template #image>
           <img
@@ -647,7 +693,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 网站可以要求管理所有显示器上的窗口 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 网站可以要求管理所有显示器上的窗口 </p>
         </template>
       </common-line>
       <hr class="divider" />
@@ -659,6 +705,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('fonts', 'Cookie 和已存储数据', '字体')"
       >
         <template #image>
           <img
@@ -667,7 +714,7 @@
           />
         </template>
         <template #bottomcontent>
-          <p class="title_12_gray" style="padding-left: 36px;"> 网站可要求使用设备上安装的字体 </p>
+          <p class="title_12_gray" style="padding-left: 36px"> 网站可要求使用设备上安装的字体 </p>
         </template>
       </common-line>
     </div>
@@ -675,13 +722,17 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
+import { sendMsg } from '../index'
+
+const name = ref('Cookie 和站点权限')
 
 const emit = defineEmits(['routeHandle'])
 const goChildPage = (val: string, pTitle: string, cTitle: string) => {
   emit('routeHandle', val, pTitle, cTitle)
+  sendMsg(name.value, `导航到 ${cTitle}`, 'cookie', `navigateTo${val}`, true)
 }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/Setting/components/default.vue b/src/components/Setting/components/default.vue
index 8c95f3b..6f5b3fd 100644
--- a/src/components/Setting/components/default.vue
+++ b/src/components/Setting/components/default.vue
@@ -11,10 +11,10 @@
           name: '设为默认值'
         }"
         class="ptb_8"
+        @button-one="() => sendMsg(name, '设为默认浏览器', 'default', 'setAsDefault', true)"
       />
     </div>
 
-    
     <div class="pb_12">
       <div class="title">Internet Explorer 兼容性</div>
     </div>
@@ -26,10 +26,14 @@
         :type="'select'"
         :selectWidth="'130px'"
         class="ptb_8"
+        @select-change="
+          val => sendMsg(name, '允许在IE模式下重新加载网站', 'default', 'allowReloadInIEMode', val)
+        "
       >
         <template #bottomcontent>
           <p class="title_12_gray">
-            在 Microsoft Edge 中浏览时，如果某个网站因兼容问题需要使用 Internet Explorer，则可以选择在 Internet Explorer 模式下重新加载网站
+            在 Microsoft Edge 中浏览时，如果某个网站因兼容问题需要使用 Internet
+            Explorer，则可以选择在 Internet Explorer 模式下重新加载网站
           </p>
         </template>
       </common-line>
@@ -41,10 +45,12 @@
           name: '添加'
         }"
         class="ptb_8"
+        @button-one="() => sendMsg(name, '添加IE模式页面', 'default', 'addIEModePage', true)"
       >
         <template #bottomcontent>
           <p class="title_12_gray">
-            这些页面将从你添加的那天起在 Internet Explorer 模式下打开 30 天. 尚未将任何页面添加到 Internet Explorer 模式列表中.
+            这些页面将从你添加的那天起在 Internet Explorer 模式下打开 30 天. 尚未将任何页面添加到
+            Internet Explorer 模式列表中.
           </p>
         </template>
       </common-line>
@@ -57,15 +63,20 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="() => sendMsg(name, '打开Internet选项', 'default', 'openInternetOptions', true)"
       />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
+import { sendMsg } from '../index'
 
-// 触控模式
+const name = ref('默认浏览器')
+
+// IE 模式选项
 const IESelectOptions = [
   {
     value: '0',
@@ -82,5 +93,4 @@ const IESelectOptions = [
 ]
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/Setting/components/device.vue b/src/components/Setting/components/device.vue
index d6de995..8a5599e 100644
--- a/src/components/Setting/components/device.vue
+++ b/src/components/Setting/components/device.vue
@@ -24,27 +24,74 @@
         <p style="margin-top: 8px"
           >登录并打开同步，以便在任何已登录的设备上查看收藏夹、密码等。登录后，你可以自定义同步设置。</p
         >
-        <el-button style="margin-top: 8px">自定义同步设置</el-button>
+        <el-button
+          style="margin-top: 8px"
+          @click="() => sendMsg(name, '自定义同步设置', 'device', 'customizeSyncSettings', true)"
+          >自定义同步设置</el-button
+        >
       </el-timeline-item>
       <el-timeline-item>
         <div class="title">将应用下载到手机</div>
         <p style="margin-top: 8px"
           >在常用的 App Store 中搜索 "Microsoft Edge"，或使用你的手机扫描 QR
-          码，我们将指导你进行下载。<a href="" class="a_style">获取应用的更多方法</a></p
+          码，我们将指导你进行下载。<a
+            href=""
+            class="a_style"
+            @click.prevent="() => sendMsg(name, '获取应用的更多方法', 'device', 'getAppMoreWays', true)"
+            >获取应用的更多方法</a
+          ></p
         >
         <img src="../img/edge-new-fill.png" style="width: 100px; height: 100px; margin-top: 8px" />
       </el-timeline-item>
       <el-timeline-item>
         <div class="title">在手机上登录 Microsoft Edge </div>
         <p style="margin-top: 8px"
-          ><a href="" class="a_style">在你的手机上打开同步</a
+          ><a
+            href=""
+            class="a_style"
+            @click.prevent="() => sendMsg(name, '在你的手机上打开同步', 'device', 'openSyncOnPhone', true)"
+            >在你的手机上打开同步</a
           >后，你将可以查看和管理其他已登录设备上的信息:</p
         >
         <ul style="list-style: none">
-          <li style="padding-left: 40px; margin-top: 8px"><span>·</span><a href="" class="a_style">收藏夹</a></li>
-          <li style="padding-left: 40px"><span>·</span><a href="" class="a_style">密码</a></li>
-          <li style="padding-left: 40px"><span>·</span><a href="" class="a_style">个人信息</a></li>
-          <li style="padding-left: 40px"><span>·</span><a href="" class="a_style">来自其他设备的标签页</a></li>
+          <li style="padding-left: 40px; margin-top: 8px"
+            ><span>·</span
+            ><a
+              href=""
+              class="a_style"
+              @click.prevent="() => sendMsg(name, '查看收藏夹', 'device', 'viewFavorites', true)"
+              >收藏夹</a
+            ></li
+          >
+          <li style="padding-left: 40px"
+            ><span>·</span
+            ><a
+              href=""
+              class="a_style"
+              @click.prevent="() => sendMsg(name, '查看密码', 'device', 'viewPasswords', true)"
+              >密码</a
+            ></li
+          >
+          <li style="padding-left: 40px"
+            ><span>·</span
+            ><a
+              href=""
+              class="a_style"
+              @click.prevent="() => sendMsg(name, '查看个人信息', 'device', 'viewPersonalInfo', true)"
+              >个人信息</a
+            ></li
+          >
+          <li style="padding-left: 40px"
+            ><span>·</span
+            ><a
+              href=""
+              class="a_style"
+              @click.prevent="
+                () => sendMsg(name, '查看其他设备标签页', 'device', 'viewTabsFromOtherDevices', true)
+              "
+              >来自其他设备的标签页</a
+            ></li
+          >
         </ul>
       </el-timeline-item>
     </el-timeline>
@@ -52,6 +99,10 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
+import { sendMsg } from '../index'
+
+const name = ref('手机和其他设备')
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Setting/components/download.vue b/src/components/Setting/components/download.vue
index 168a363..83572e8 100644
--- a/src/components/Setting/components/download.vue
+++ b/src/components/Setting/components/download.vue
@@ -11,25 +11,44 @@
           name: '更改'
         }"
         class="ptb_8"
+        @button-one="() => sendMsg(name, '更改下载位置', 'download', 'changeLocation', true)"
       >
         <template #bottomcontent>
           <p class="title_12_gray"> C:\ </p>
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'每次下载都询问我该做些什么'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'每次下载都询问我该做些什么'"
+        :type="'switch'"
+        class="ptb_8"
+        @switch="val => { askWhatToDo = val; sendMsg(name, '每次下载都询问我该做些什么', 'download', 'askWhatToDo', val); }"
+      >
         <template #bottomcontent>
           <p class="title_12_gray"> 始终询问我是要保存文件还是打开它而不保存 </p>
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'在浏览器中打开 Office 文件'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'在浏览器中打开 Office 文件'"
+        :type="'switch'"
+        class="ptb_8"
+        @switch="val => { openOfficeFiles = val; sendMsg(name, '在浏览器中打开 Office 文件', 'download', 'openOfficeFiles', val); }"
+      >
         <template #bottomcontent>
-          <p class="title_12_gray"> 如果启用此设置，Office 文件（演示文稿、电子表格、文档）将在Microsoft Edge中自动打开，而不是下载到设备 </p>
+          <p class="title_12_gray">
+            如果启用此设置，Office 文件（演示文稿、电子表格、文档）将在Microsoft
+            Edge中自动打开，而不是下载到设备
+          </p>
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'下载开始时显示下载菜单'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'下载开始时显示下载菜单'"
+        :type="'switch'"
+        class="ptb_8"
+        @switch="val => { showDownloadMenu = val; sendMsg(name, '下载开始时显示下载菜单', 'download', 'showDownloadMenu', val); }"
+      >
         <template #bottomcontent>
           <p class="title_12_gray"> 关闭此设置会使人更难知道文件何时开始下载 </p>
         </template>
@@ -39,8 +58,15 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
+import { sendMsg } from '../index'
+
+const name = ref('下载')
+
+let askWhatToDo = ref(false)
+let openOfficeFiles = ref(false)
+let showDownloadMenu = ref(false)
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/Setting/components/kong-template.vue b/src/components/Setting/components/kong-template.vue
index 01f6ce0..5b6c587 100644
--- a/src/components/Setting/components/kong-template.vue
+++ b/src/components/Setting/components/kong-template.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script lang="ts" setup>
-import commonLine from '../../components/commonLine.vue'
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Setting/components/language.vue b/src/components/Setting/components/language.vue
index b0a84c2..6011c2c 100644
--- a/src/components/Setting/components/language.vue
+++ b/src/components/Setting/components/language.vue
@@ -11,6 +11,7 @@
           name: '添加语言'
         }"
         class="ptb_8"
+        @button-one="() => sendMsg(name, '添加语言', 'language', 'addLanguage', true)"
       >
         <template #bottomcontent>
           <p class="title_12_gray">
@@ -28,6 +29,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="() => sendMsg(name, '更多操作', 'language', 'moreActions', 'zh-CN')"
       />
       <common-line
         :title="'英语'"
@@ -37,6 +39,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="() => sendMsg(name, '更多操作', 'language', 'moreActions', 'en')"
       />
       <common-line
         :title="'英语（英国）'"
@@ -46,6 +49,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="() => sendMsg(name, '更多操作', 'language', 'moreActions', 'en-GB')"
       />
       <common-line
         :title="'英语（美国）'"
@@ -55,10 +59,16 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="() => sendMsg(name, '更多操作', 'language', 'moreActions', 'en-US')"
       />
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'让我选择翻译不是我所阅读的语言的页面'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'让我选择翻译不是我所阅读的语言的页面'"
+        :type="'switch'"
+        class="ptb_8"
+        @switch="val => { offerToTranslate = val; sendMsg(name, '让我选择翻译不是我所阅读的语言的页面', 'language', 'offerToTranslate', val); }"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             启用此设置时，Microsoft
@@ -74,12 +84,22 @@
       <div class="title">写作帮助</div>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'在 Web 上编写时与 Copilot 协作'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'在 Web 上编写时与 Copilot 协作'"
+        :type="'switch'"
+        class="ptb_8"
+        @switch="val => { useCopilot = val; sendMsg(name, '在 Web 上编写时与 Copilot 协作', 'language', 'useCopilot', val); }"
+      >
         <template #bottomcontent>
           <p class="title_12_gray"> 使用 AI 写作助手帮助你撰写草稿、改写文本和调整风格。 </p>
         </template>
       </common-line>
-      <common-line :title="'使用文本预测'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'使用文本预测'"
+        :type="'switch'"
+        class="ptb_8"
+        @switch="val => { useTextPrediction = val; sendMsg(name, '使用文本预测', 'language', 'useTextPrediction', val); }"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             启用此功能后，Web 上某些文本框中键入的字符将发送到 Microsoft Cloud 以提供文本预测服务。
@@ -87,7 +107,12 @@
           >
         </template>
       </common-line>
-      <common-line :title="'启用语法和拼写检查帮助'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'启用语法和拼写检查帮助'"
+        :type="'switch'"
+        class="ptb_8"
+        @switch="val => { enableGrammarCheck = val; sendMsg(name, '启用语法和拼写检查帮助', 'language', 'enableGrammarCheck', val); }"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             使用 Microsoft 编辑器时，Web 上某些文本框中键入的文本将发送到 Microsoft
@@ -132,7 +157,12 @@
           </div>
         </template>
       </common-line>
-      <common-line :title="'将同义词用于拼音建议'" :type="'switch'" class="ptb_8" />
+      <common-line
+        :title="'将同义词用于拼音建议'"
+        :type="'switch'"
+        class="ptb_8"
+        @switch="val => { useSynonyms = val; sendMsg(name, '将同义词用于拼音建议', 'language', 'useSynonyms', val); }"
+      />
       <hr class="divider" />
       <common-line :title="'使用文本预测'" class="ptb_8">
         <template #bottomcontent>
@@ -150,7 +180,13 @@
         @button-one="expandLanguage"
       >
         <template #bottomcontent>
-          <common-line v-if="expandFlag" :title="'增强型拼写检查'" :type="'switch'" class="ptb_8" />
+          <common-line
+            v-if="expandFlag"
+            :title="'增强型拼写检查'"
+            :type="'switch'"
+            class="ptb_8"
+            @switch="val => { enhancedSpellCheckZh = val; sendMsg(name, '中文增强型拼写检查', 'language', 'enhancedSpellCheckZh', val); }"
+          />
         </template>
       </common-line>
       <common-line
@@ -164,7 +200,13 @@
         @button-one="expandEnLanguage"
       >
         <template #bottomcontent>
-          <common-line v-if="expandEnFlag" :title="'增强型拼写检查'" :type="'switch'" class="ptb_8" />
+          <common-line
+            v-if="expandEnFlag"
+            :title="'增强型拼写检查'"
+            :type="'switch'"
+            class="ptb_8"
+            @switch="val => { enhancedSpellCheckEn = val; sendMsg(name, '英语增强型拼写检查', 'language', 'enhancedSpellCheckEn', val); }"
+          />
         </template>
       </common-line>
     </div>
@@ -192,6 +234,7 @@
         :selectWidth="'150px'"
         :showHelpIcon="true"
         class="ptb_8"
+        @select="val => { osRegionFormat = val; sendMsg(name, '共享其他操作系统区域', 'language', 'osRegionFormat', val); }"
       >
         <template #bottomcontent>
           <p class="title_12_gray">
@@ -204,13 +247,41 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
+import { sendMsg } from '../index'
 
+const name = ref('语言')
+
+// 语言
+let offerToTranslate = ref(false)
+
+// 写作帮助
+let useCopilot = ref(false)
+let useTextPrediction = ref(false)
+let enableGrammarCheck = ref(false)
 const helpType = ref('base')
 const handleHelp = (type: string) => {
   helpType.value = type
+  sendMsg(name.value, '写作帮助类型', 'language', 'writingHelpType', type)
+}
+let useSynonyms = ref(false)
+let enhancedSpellCheckZh = ref(false)
+let enhancedSpellCheckEn = ref(false)
+
+const expandFlag = ref(false)
+const expandLanguage = () => {
+  expandFlag.value = !expandFlag.value
+  sendMsg(name.value, '展开/折叠中文设置', 'language', 'toggleChineseSettings', expandFlag.value)
+}
+const expandEnFlag = ref(false)
+const expandEnLanguage = () => {
+  expandEnFlag.value = !expandEnFlag.value
+  sendMsg(name.value, '展开/折叠英文设置', 'language', 'toggleEnglishSettings', expandEnFlag.value)
 }
 
+// 共享其他 OS 区域格式
+let osRegionFormat = ref('0')
 const selectOptions = [
   {
     value: '0',
@@ -226,20 +297,10 @@ const selectOptions = [
   }
 ]
 
-const expandFlag = ref(false)
-const expandLanguage = () => {
-  expandFlag.value = !expandFlag.value
-}
-const expandEnFlag = ref(false)
-const expandEnLanguage = () => {
-  expandEnFlag.value = !expandEnFlag.value
-}
-
 const emit = defineEmits(['routeHandle'])
 const goChildPage = (val: string, pTitle: string, cTitle: string) => {
   emit('routeHandle', val, pTitle, cTitle)
 }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/Setting/components/newtabs.vue b/src/components/Setting/components/newtabs.vue
index 53f80e8..4c58cda 100644
--- a/src/components/Setting/components/newtabs.vue
+++ b/src/components/Setting/components/newtabs.vue
@@ -8,7 +8,7 @@
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
       <div class="radio-group choose-tab" style="padding: 10px">
-        <el-radio-group v-model="radioStart" class="ml-4">
+        <el-radio-group v-model="radioStart" class="ml-4" @change="handleRadioStartChange">
           <el-radio label="1" size="large">
             <p class="radio-title">打开新标签页</p>
           </el-radio>
@@ -40,8 +40,8 @@
                 <div class="more-btn"></div>
                 <template #dropdown>
                   <el-dropdown-menu>
-                    <el-dropdown-item>编辑</el-dropdown-item>
-                    <el-dropdown-item>删除</el-dropdown-item>
+                    <el-dropdown-item @click="editPage(link)">编辑</el-dropdown-item>
+                    <el-dropdown-item @click="deletePage(link)">删除</el-dropdown-item>
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
@@ -50,15 +50,16 @@
         </div>
         <div class="add">
           <p>清除列表并将其设置为当前打开的所有标签页</p>
-          <el-button @click="clearAllTab">使用所有已打开的标签页</el-button>
+          <el-button @click="useAllTabs">使用所有已打开的标签页</el-button>
         </div>
       </div>
     </div>
     <Dialog
-      :dialog-title="'添加新页面'"
+      :dialog-title="dialogTitle"
       :dialog-top="'30vh'"
       :dialog-width="'30%'"
       :visible="addVisible"
+      @close="addVisible = false"
     >
       <template #content>
         <p style="margin-bottom: 5px">输入URL：</p>
@@ -66,8 +67,8 @@
       </template>
       <template #foot>
         <div class="foot-btn">
-          <el-button type="primary" @click="addVisible = false">确定</el-button>
-          <el-button type="primary" @click="addVisible = false">取消</el-button>
+          <el-button type="primary" @click="addPage">确定</el-button>
+          <el-button @click="addVisible = false">取消</el-button>
         </div>
       </template>
     </Dialog>
@@ -79,13 +80,18 @@
       </div>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'在工具栏上显示“首页”按钮'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'在工具栏上显示“首页”按钮'"
+        :type="'switch'"
+        class="ptb_8"
+        @switch="val => { showHomeButton = val; sendMsg(name, '在工具栏上显示“首页”按钮', 'newtabs', 'showHomeButton', val); }"
+      >
         <template #bottomcontent>
           <p class="title_12_gray"> 设置“首页”按钮打开的以下内容： </p>
         </template>
       </common-line>
       <div class="radio-group" style="padding: 10px">
-        <el-radio-group v-model="radioTab" class="ml-4">
+        <el-radio-group v-model="radioTab" class="ml-4" @change="handleRadioTabChange">
           <el-radio label="1" size="large">
             <p class="radio-title">新标签页</p>
           </el-radio>
@@ -96,8 +102,11 @@
                 :disabled="radioTab != '2'"
                 placeholder="输入 URL"
                 style="margin-right: 10px"
+                @input="handleInputTab"
               />
-              <el-button :disabled="radioTab != '2' || !inputTab">保存</el-button>
+              <el-button :disabled="radioTab != '2' || !inputTab" @click="saveInputTab"
+                >保存</el-button
+              >
             </div>
           </el-radio>
         </el-radio-group>
@@ -118,15 +127,24 @@
           name: '自定义'
         }"
         class="ptb_8"
+        @button-one="customizeNewTabPage"
       >
         <template #bottomcontent>
           <p class="title_12_gray"> 控制新闻源、背景图像、主题等 </p>
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'预加载新标签页以获得更快的体验'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'预加载新标签页以获得更快的体验'"
+        :type="'switch'"
+        class="ptb_8"
+        @switch="val => { preloadNewTab = val; sendMsg(name, '预加载新标签页', 'newtabs', 'preloadNewTab', val); }"
+      >
         <template #bottomcontent>
-          <p class="title_12_gray"> 在后台打开 Microsoft 新选项卡页，以便更快访问。如果允许 Cookie，则新选项卡页上的内容可能包括 Cookie。 </p>
+          <p class="title_12_gray">
+            在后台打开 Microsoft 新选项卡页，以便更快访问。如果允许 Cookie，则新选项卡页上的内容可能包括
+            Cookie。
+          </p>
         </template>
       </common-line>
     </div>
@@ -134,27 +152,72 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
 import edgeIcon from '../img/edge-new-fill.png'
 import Dialog from '../common/dialog.vue'
+import { sendMsg } from '../index'
 
+const name = ref('启动、主页和新标签页')
+
+// 启动时
 let radioStart = ref('1')
+const handleRadioStartChange = (val: string) => {
+  sendMsg(name.value, '启动时选项', 'newtabs', 'startupOption', val)
+}
 const addVisible = ref(false)
+const dialogTitle = ref('添加新页面')
+const urlVal = ref('')
+const addList = ref([
+  {
+    url: 'https://www.bing.com'
+  }
+])
 const openAddDialog = () => {
+  dialogTitle.value = '添加新页面'
+  urlVal.value = ''
   addVisible.value = true
 }
-const urlVal = ref('')
-const addList = [
-  {
-    url: '123'
+const addPage = () => {
+  if (dialogTitle.value === '添加新页面') {
+    sendMsg(name.value, '添加启动页面', 'newtabs', 'addStartupPage', urlVal.value)
+  } else {
+    sendMsg(name.value, '编辑启动页面确认', 'newtabs', 'confirmEditStartupPage', urlVal.value)
   }
-]
-const clearAllTab = () => {
-  console.log(111)
+  addVisible.value = false
+}
+const editPage = (link: { url: string }) => {
+  dialogTitle.value = '编辑页面'
+  urlVal.value = link.url
+  addVisible.value = true
+  sendMsg(name.value, '编辑启动页面', 'newtabs', 'editStartupPage', link)
+}
+const deletePage = (link: { url: string }) => {
+  sendMsg(name.value, '删除启动页面', 'newtabs', 'deleteStartupPage', link)
+}
+const useAllTabs = () => {
+  sendMsg(name.value, '使用所有已打开的标签页', 'newtabs', 'useAllOpenTabs', true)
 }
 
+// "开始" 按钮
+let showHomeButton = ref(false)
 let radioTab = ref('1')
 let inputTab = ref('')
+const handleRadioTabChange = (val: string) => {
+  sendMsg(name.value, '首页按钮选项', 'newtabs', 'homeButtonOption', val)
+}
+const handleInputTab = (val: string) => {
+  sendMsg(name.value, '首页按钮URL输入', 'newtabs', 'homeButtonUrlInput', val)
+}
+const saveInputTab = () => {
+  sendMsg(name.value, '保存首页按钮URL', 'newtabs', 'saveHomeButtonUrl', inputTab.value)
+}
+
+// 新标签页
+const customizeNewTabPage = () => {
+  sendMsg(name.value, '自定义新标签页', 'newtabs', 'customizeNewTab', true)
+}
+let preloadNewTab = ref(false)
 </script>
 
 <style lang="scss" scoped>
@@ -179,6 +242,9 @@ let inputTab = ref('')
     .add-list {
       padding-left: 90px;
       margin-top: 15px;
+      .item {
+        margin-bottom: 10px;
+      }
       .more {
         .more-btn {
           width: 20px;
diff --git a/src/components/Setting/components/operate.vue b/src/components/Setting/components/operate.vue
index e6f0ddd..4f17c44 100644
--- a/src/components/Setting/components/operate.vue
+++ b/src/components/Setting/components/operate.vue
@@ -10,33 +10,47 @@
     <div class="outer-frame" style="margin-bottom: 30px">
       <common-line :title="'URL 复制和粘贴格式默认'" class="ptb_8">
         <template #bottomcontent>
-          <div class="flex-between" style="margin-top: 10px;">
+          <div class="flex-between" style="margin-top: 10px">
             <div
               class="flex-block flex-block_2"
               :class="{ 'flex-block_active': pasteType === 'link' }"
-              style="height: 208px; position: relative;"
+              style="height: 208px; position: relative"
               @click="handlePaste('link')"
             >
-              <p class="title_14" style="margin-bottom: 10px;">链接</p>
-              <img src="../img/edge-new-fill.png" alt="" style="width: 100px; height: 67px;" />
-              <p class="title_14" style="position: absolute; bottom: 16px; right: 16px;">Ctrl+V</p>
+              <p class="title_14" style="margin-bottom: 10px">链接</p>
+              <img src="../img/edge-new-fill.png" alt="" style="width: 100px; height: 67px" />
+              <p class="title_14" style="position: absolute; bottom: 16px; right: 16px">Ctrl+V</p>
             </div>
             <div
               class="flex-block flex-block_2"
               :class="{ 'flex-block_active': pasteType === 'text' }"
-              style="height: 208px; position: relative;"
+              style="height: 208px; position: relative"
               @click="handlePaste('text')"
             >
-              <p class="title_14" style="margin-bottom: 10px;">纯文本</p>
-              <img src="../img/edge-new-fill.png" alt="" style="width: 100px; height: 67px;" />
-              <p class="title_14" style="position: absolute; bottom: 16px; right: 16px;">Ctrl+Shift+V</p>
+              <p class="title_14" style="margin-bottom: 10px">纯文本</p>
+              <img src="../img/edge-new-fill.png" alt="" style="width: 100px; height: 67px" />
+              <p class="title_14" style="position: absolute; bottom: 16px; right: 16px"
+                >Ctrl+Shift+V</p
+              >
             </div>
           </div>
         </template>
       </common-line>
-      <common-line :title="'在网页中复制链接时使用上面选择的格式'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'在网页中复制链接时使用上面选择的格式'"
+        :type="'switch'"
+        class="ptb_8"
+        @switch="
+          val => {
+            useSelectedFormat = val
+            sendMsg(name, '在网页中复制链接时使用上面选择的格式', 'operate', 'useSelectedFormat', val)
+          }
+        "
+      >
         <template #bottomcontent>
-          <p class="title_12_gray"> 如果在网页中复制链接时使用“链接”格式，则会在后台加载目标页面以获取目标页面的标题。在后台加载目标页面将具有访问服务器页面的效果。但是，对页面的访问不会显示在浏览历史记录中。 </p>
+          <p class="title_12_gray">
+            如果在网页中复制链接时使用“链接”格式，则会在后台加载目标页面以获取目标页面的标题。在后台加载目标页面将具有访问服务器页面的效果。但是，对页面的访问不会显示在浏览历史记录中。
+          </p>
         </template>
       </common-line>
     </div>
@@ -44,13 +58,19 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
+import { sendMsg } from '../index'
+
+const name = ref('共享、复制和粘贴')
 
 let pasteType = ref('text')
 const handlePaste = (type: string) => {
   pasteType.value = type
+  sendMsg(name.value, 'URL 复制和粘贴格式默认', 'operate', 'pasteType', type)
 }
+
+let useSelectedFormat = ref(false)
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/Setting/components/outlook.vue b/src/components/Setting/components/outlook.vue
index f9e9b90..fa1f03e 100644
--- a/src/components/Setting/components/outlook.vue
+++ b/src/components/Setting/components/outlook.vue
@@ -44,7 +44,7 @@
               </div>
             </div>
           </div>
-          <div class="see-more"> 发现更多主题 </div>
+          <div class="see-more" @click="() => sendMsg(name, '发现更多主题', 'outlook', 'discoverThemes', true)"> 发现更多主题 </div>
           <p class="title_12_gray" style="margin-top: 10px"
             >没有找到你想要的内容？在
             <a href="" class="a_style">Chrome Web Store</a>中发现更多主题</p
@@ -59,13 +59,14 @@
         :type="'select'"
         :selectWidth="'100px'"
         class="ptb_8"
+        @select="val => { pageColor = val; sendMsg(name, '页面颜色', 'outlook', 'pageColor', val); }"
       >
         <template #bottomcontent>
           <p class="title_12_gray"> 通过修改页面上的颜色，使网站更易于阅读 </p>
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'仅在开启高对比度主题时应用页面颜色'" :type="'switch'" class="ptb_8" />
+      <common-line :title="'仅在开启高对比度主题时应用页面颜色'" :type="'switch'" class="ptb_8" @switch="val => { highContrastOnly = val; sendMsg(name, '仅在开启高对比度主题时应用页面颜色', 'outlook', 'highContrastOnly', val); }" />
       <hr class="divider" />
       <common-line
         :title="'指定站点'"
@@ -83,7 +84,7 @@
       </common-line>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'试用 Microsoft Edge 的全新外观'" :type="'switch'" class="ptb_8" />
+      <common-line :title="'试用 Microsoft Edge 的全新外观'" :type="'switch'" class="ptb_8" @switch="val => { newLook = val; sendMsg(name, '试用 Microsoft Edge 的全新外观', 'outlook', 'newLook', val); }" />
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
       <common-line
@@ -93,6 +94,7 @@
           name: '安装小组件'
         }"
         class="ptb_8"
+        @button-one="() => sendMsg(name, '安装游戏助手小组件', 'outlook', 'installGameAssist', true)"
       >
         <template #bottomcontent>
           <p class="title_12_gray">
@@ -112,6 +114,7 @@
         :type="'select'"
         :selectWidth="'100px'"
         class="ptb_8"
+        @select="val => { pageZoom = val; sendMsg(name, '页面缩放', 'outlook', 'pageZoom', val); }"
       >
         <template #bottomcontent>
           <p class="title_12_gray">
@@ -132,6 +135,7 @@
         :type="'select'"
         :selectWidth="'130px'"
         class="ptb_8"
+        @select="val => { touchMode = val; sendMsg(name, '触控模式', 'outlook', 'touchMode', val); }"
       >
         <template #bottomcontent>
           <p class="title_12_gray">
@@ -144,7 +148,7 @@
       <div class="title">自定义工具栏</div>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'显示选项卡操作菜单'" :type="'switch'" class="ptb_8">
+      <common-line :title="'显示选项卡操作菜单'" :type="'switch'" class="ptb_8" @switch="val => { showTabActions = val; sendMsg(name, '显示选项卡操作菜单', 'outlook', 'showTabActions', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -153,26 +157,27 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'在垂直选项卡中隐藏标题栏'" :type="'switch'" class="ptb_8" />
+      <common-line :title="'在垂直选项卡中隐藏标题栏'" :type="'switch'" class="ptb_8" @switch="val => { hideTitleInVerticalTabs = val; sendMsg(name, '在垂直选项卡中隐藏标题栏', 'outlook', 'hideTitleInVerticalTabs', val); }" />
       <hr class="divider" />
       <common-line
         :title="'显示当前所有浏览器窗口的垂直标签'"
         :type="'buttonGroup'"
         :btnGroup="btnGroupConfig"
         class="ptb_16"
+        @button-group-click="handleVerticalTabs"
       />
       <hr class="divider" />
-      <common-line :title="'悬停时显示标签页预览'" :type="'switch'" class="ptb_8" />
+      <common-line :title="'悬停时显示标签页预览'" :type="'switch'" class="ptb_8" @switch="val => { showTabPreviewOnHover = val; sendMsg(name, '悬停时显示标签页预览', 'outlook', 'showTabPreviewOnHover', val); }" />
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'在标题栏中显示个人资料图标'" :type="'switch'" class="ptb_8" />
+      <common-line :title="'在标题栏中显示个人资料图标'" :type="'switch'" class="ptb_8" @switch="val => { showProfileIconInTitleBar = val; sendMsg(name, '在标题栏中显示个人资料图标', 'outlook', 'showProfileIconInTitleBar', val); }" />
       <hr class="divider" />
-      <common-line :title="'在配置文件按钮中显示配置文件类型'" :type="'switch'" class="ptb_8" />
+      <common-line :title="'在配置文件按钮中显示配置文件类型'" :type="'switch'" class="ptb_8" @switch="val => { showProfileTypeInButton = val; sendMsg(name, '在配置文件按钮中显示配置文件类型', 'outlook', 'showProfileTypeInButton', val); }" />
       <hr class="divider" />
-      <common-line :title="'在工作配置文件上显示公文包图标'" :type="'switch'" class="ptb_8" />
+      <common-line :title="'在工作配置文件上显示公文包图标'" :type="'switch'" class="ptb_8" @switch="val => { showBriefcaseIcon = val; sendMsg(name, '在工作配置文件上显示公文包图标', 'outlook', 'showBriefcaseIcon', val); }" />
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'显示工作区'" :type="'switch'" class="ptb_8" />
+      <common-line :title="'显示工作区'" :type="'switch'" class="ptb_8" @switch="val => { showWorkspaces = val; sendMsg(name, '显示工作区', 'outlook', 'showWorkspaces', val); }" />
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
       <common-line
@@ -181,6 +186,7 @@
         :type="'select'"
         :selectWidth="'100px'"
         class="ptb_8"
+        @select="val => { showFavoritesBar = val; sendMsg(name, '显示收藏夹栏', 'outlook', 'showFavoritesBar', val); }"
       />
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
@@ -190,6 +196,7 @@
         :title="`&quot;开始&quot;按钮`"
         :optGroup="[{ type: 'button', name: '设置按钮 URL' }, { type: 'switch' }]"
         class="ptb_8"
+        @opt-group-click="handleStartButton"
       >
         <template #image>
           <img
@@ -205,6 +212,7 @@
         :type="'select'"
         :selectWidth="'100px'"
         class="ptb_8"
+        @select="val => { forwardButton = val; sendMsg(name, '前进按钮', 'outlook', 'forwardButton', val); }"
       >
         <template #image>
           <img
@@ -223,6 +231,7 @@
         :type="'select'"
         :selectWidth="'100px'"
         class="ptb_8"
+        @select="val => { extensionsButton = val; sendMsg(name, '扩展按钮', 'outlook', 'extensionsButton', val); }"
       >
         <template #image>
           <img
@@ -235,7 +244,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'收藏按钮'" :type="'switch'" class="ptb_8">
+      <common-line :title="'收藏按钮'" :type="'switch'" class="ptb_8" @switch="val => { favoritesButton = val; sendMsg(name, '收藏按钮', 'outlook', 'favoritesButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -244,7 +253,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="`&quot;锦集&quot;按钮`" :type="'switch'" class="ptb_8">
+      <common-line :title="`&quot;锦集&quot;按钮`" :type="'switch'" class="ptb_8" @switch="val => { collectionsButton = val; sendMsg(name, '锦集按钮', 'outlook', 'collectionsButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -253,7 +262,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="`&quot;拆分屏幕&quot;按钮`" :type="'switch'" class="ptb_8">
+      <common-line :title="`&quot;拆分屏幕&quot;按钮`" :type="'switch'" class="ptb_8" @switch="val => { splitScreenButton = val; sendMsg(name, '拆分屏幕按钮', 'outlook', 'splitScreenButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -262,7 +271,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'历史按钮'" :type="'switch'" class="ptb_8">
+      <common-line :title="'历史按钮'" :type="'switch'" class="ptb_8" @switch="val => { historyButton = val; sendMsg(name, '历史按钮', 'outlook', 'historyButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -271,7 +280,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="`&quot;应用&quot;按钮`" :type="'switch'" class="ptb_8">
+      <common-line :title="`&quot;应用&quot;按钮`" :type="'switch'" class="ptb_8" @switch="val => { appsButton = val; sendMsg(name, '应用按钮', 'outlook', 'appsButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -280,7 +289,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'下载按钮'" :type="'switch'" class="ptb_8">
+      <common-line :title="'下载按钮'" :type="'switch'" class="ptb_8" @switch="val => { downloadsButton = val; sendMsg(name, '下载按钮', 'outlook', 'downloadsButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -289,7 +298,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'浏览器健康助手按钮'" :type="'switch'" class="ptb_8">
+      <common-line :title="'浏览器健康助手按钮'" :type="'switch'" class="ptb_8" @switch="val => { healthHelperButton = val; sendMsg(name, '浏览器健康助手按钮', 'outlook', 'healthHelperButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -298,7 +307,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'Internet Explorer 模式 (IE 模式) 按钮'" :type="'switch'" class="ptb_8">
+      <common-line :title="'Internet Explorer 模式 (IE 模式) 按钮'" :type="'switch'" class="ptb_8" @switch="val => { ieModeButton = val; sendMsg(name, 'IE模式按钮', 'outlook', 'ieModeButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -313,7 +322,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'屏幕截图按钮'" :type="'switch'" class="ptb_8">
+      <common-line :title="'屏幕截图按钮'" :type="'switch'" class="ptb_8" @switch="val => { screenshotButton = val; sendMsg(name, '屏幕截图按钮', 'outlook', 'screenshotButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -322,7 +331,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'&quot;学习工具包&quot;按钮'" :type="'switch'" class="ptb_8">
+      <common-line :title="'&quot;学习工具包&quot;按钮'" :type="'switch'" class="ptb_8" @switch="val => { learningToolsButton = val; sendMsg(name, '学习工具包按钮', 'outlook', 'learningToolsButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -331,7 +340,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'共享按钮'" :type="'switch'" class="ptb_8">
+      <common-line :title="'共享按钮'" :type="'switch'" class="ptb_8" @switch="val => { shareButton = val; sendMsg(name, '共享按钮', 'outlook', 'shareButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -340,7 +349,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'&quot;反馈&quot;按钮'" :type="'switch'" class="ptb_8">
+      <common-line :title="'&quot;反馈&quot;按钮'" :type="'switch'" class="ptb_8" @switch="val => { feedbackButton = val; sendMsg(name, '反馈按钮', 'outlook', 'feedbackButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -349,7 +358,7 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'显示&quot;边栏&quot;按钮'" :type="'switch'" class="ptb_8">
+      <common-line :title="'显示&quot;边栏&quot;按钮'" :type="'switch'" class="ptb_8" @switch="val => { sidebarButton = val; sendMsg(name, '显示边栏按钮', 'outlook', 'sidebarButton', val); }">
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -366,7 +375,7 @@
     <div class="outer-frame" style="margin-bottom: 30px">
       <common-line :title="'选择文本时的微型菜单'" class="ptb_8" />
       <hr class="divider" />
-      <common-line :title="'选择文本时显示迷你菜单'" :type="'switch'" class="ptb_8" />
+      <common-line :title="'选择文本时显示迷你菜单'" :type="'switch'" class="ptb_8" @switch="val => { showMiniMenuOnSelect = val; sendMsg(name, '选择文本时显示迷你菜单', 'outlook', 'showMiniMenuOnSelect', val); }" />
       <common-line
         :title="'不允许的站点'"
         :type="'button'"
@@ -375,6 +384,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="() => sendMsg(name, '微型菜单不允许的站点', 'outlook', 'miniMenuDisallowedSites', true)"
       >
         <template #bottomcontent>
           <p class="title_12_gray"> 已禁用微型上下文菜单的网站的列表 </p>
@@ -387,26 +397,27 @@
       </div>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'在关闭具有多个选项卡的窗口之前询问'" :type="'switch'" class="ptb_8" />
-      <common-line :title="'关闭自定义滚动条'" :type="'switch'" class="ptb_8">
+      <common-line :title="'在关闭具有多个选项卡的窗口之前询问'" :type="'switch'" class="ptb_8" @switch="val => { askBeforeClosingMultipleTabs = val; sendMsg(name, '在关闭具有多个选项卡的窗口之前询问', 'outlook', 'askBeforeClosingMultipleTabs', val); }" />
+      <common-line :title="'关闭自定义滚动条'" :type="'switch'" class="ptb_8" @switch="val => { disableCustomScrollbars = val; sendMsg(name, '关闭自定义滚动条', 'outlook', 'disableCustomScrollbars', val); }">
         <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" />
+      <common-line :title="'使用双击关闭浏览器选项卡'" :type="'switch'" class="ptb_8" @switch="val => { doubleClickToCloseTab = val; sendMsg(name, '使用双击关闭浏览器选项卡', 'outlook', 'doubleClickToCloseTab', val); }" />
       <hr class="divider" />
       <common-line
         :title="'关闭最后一个标签页时保持 Edge 窗口打开'"
         :type="'switch'"
         class="ptb_8"
+        @switch="val => { keepWindowOpenOnLastTabClose = val; sendMsg(name, '关闭最后一个标签页时保持 Edge 窗口打开', 'outlook', 'keepWindowOpenOnLastTabClose', val); }"
       />
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
       <common-line :title="'鼠标手势'" class="ptb_8" />
       <hr class="divider" />
-      <common-line :title="'启用鼠标手势'" :type="'switch'" class="ptb_8" />
+      <common-line :title="'启用鼠标手势'" :type="'switch'" class="ptb_8" @switch="val => { enableMouseGestures = val; sendMsg(name, '启用鼠标手势', 'outlook', 'enableMouseGestures', val); }" />
       <hr class="divider" />
       <common-line
         :title="'配置鼠标手势'"
@@ -426,7 +437,7 @@
     <div class="outer-frame" style="margin-bottom: 30px">
       <common-line :title="'分屏'" class="ptb_8" />
       <hr class="divider" />
-      <common-line :title="'启用拆分屏幕'" :type="'switch'" class="ptb_8">
+      <common-line :title="'启用拆分屏幕'" :type="'switch'" class="ptb_8" @switch="val => { enableSplitScreen = val; sendMsg(name, '启用拆分屏幕', 'outlook', 'enableSplitScreen', val); }">
         <template #bottomcontent>
           <p class="title_12_gray"> 在一个浏览选项卡上跨并排屏幕高效地进行多任务处理。 </p>
         </template>
@@ -460,6 +471,7 @@
         :type="'select'"
         :selectWidth="'100px'"
         class="ptb_8"
+        @select="val => { fontSize = val; sendMsg(name, '字体大小', 'outlook', 'fontSize', val); }"
       >
         <template #bottomcontent>
           <p class="title_12_gray"> 在一个浏览选项卡上跨并排屏幕高效地进行多任务处理。 </p>
@@ -474,13 +486,18 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="() => sendMsg(name, '自定义字体', 'outlook', 'customizeFonts', true)"
       />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
+import { sendMsg } from '../index'
+
+const name = ref('外观')
 
 // 自定义外观
 const outlookList = [
@@ -503,6 +520,7 @@ const outlookList = [
 let outlookColor = ref('default')
 const handleOutlook = (val: string) => {
   outlookColor.value = val
+  sendMsg(name.value, '整体外观', 'outlook', 'outlookColor', val)
 }
 
 // 主题
@@ -571,9 +589,12 @@ const themeList = [
 let themeColor = ref('default')
 const handleTheme = (val: string) => {
   themeColor.value = val
+  sendMsg(name.value, '主题', 'outlook', 'themeColor', val)
 }
 
 // 页面颜色
+let pageColor = ref('0')
+let highContrastOnly = ref(false)
 const colorSelectOptions = [
   {
     value: '0',
@@ -585,7 +606,11 @@ const colorSelectOptions = [
   }
 ]
 
+// 全新外观
+let newLook = ref(false)
+
 // 缩放比例
+let pageZoom = ref('0')
 const scaleSelectOptions = [
   {
     value: '0',
@@ -602,6 +627,7 @@ const scaleSelectOptions = [
 ]
 
 // 触控模式
+let touchMode = ref('0')
 const touchSelectOptions = [
   {
     value: '0',
@@ -617,16 +643,28 @@ const touchSelectOptions = [
   }
 ]
 
+// 自定义工具栏
+let showTabActions = ref(false)
+let hideTitleInVerticalTabs = ref(false)
 const btnGroupConfig = [
   {
-    name: '启用'
+    name: '启用',
+    action: 'enable'
   },
   {
-    name: '关闭'
+    name: '关闭',
+    action: 'disable'
   }
 ]
-
-// 显示收藏夹栏
+const handleVerticalTabs = (btn: { action: string }) => {
+  sendMsg(name.value, '显示当前所有浏览器窗口的垂直标签', 'outlook', 'verticalTabsForAll', btn.action)
+}
+let showTabPreviewOnHover = ref(false)
+let showProfileIconInTitleBar = ref(false)
+let showProfileTypeInButton = ref(false)
+let showBriefcaseIcon = ref(false)
+let showWorkspaces = ref(false)
+let showFavoritesBar = ref('0')
 const displaySelectOptions = [
   {
     value: '0',
@@ -641,8 +679,14 @@ const displaySelectOptions = [
     label: '仅在新标签页上'
   }
 ]
-
-// 前进
+const handleStartButton = (opt: { type: string, value: any }) => {
+  if (opt.type === 'button') {
+    sendMsg(name.value, '设置开始按钮URL', 'outlook', 'setStartButtonUrl', true)
+  } else if (opt.type === 'switch') {
+    sendMsg(name.value, '显示开始按钮', 'outlook', 'showStartButton', opt.value)
+  }
+}
+let forwardButton = ref('0')
 const goSelectOptions = [
   {
     value: '0',
@@ -653,8 +697,7 @@ const goSelectOptions = [
     label: '始终显示'
   }
 ]
-
-// 前进
+let extensionsButton = ref('0')
 const extendSelectOptions = [
   {
     value: '0',
@@ -669,8 +712,33 @@ const extendSelectOptions = [
     label: '始终显示'
   }
 ]
+let favoritesButton = ref(false)
+let collectionsButton = ref(false)
+let splitScreenButton = ref(false)
+let historyButton = ref(false)
+let appsButton = ref(false)
+let downloadsButton = ref(false)
+let healthHelperButton = ref(false)
+let ieModeButton = ref(false)
+let screenshotButton = ref(false)
+let learningToolsButton = ref(false)
+let shareButton = ref(false)
+let feedbackButton = ref(false)
+let sidebarButton = ref(false)
 
-// 字体大小
+// 上下文菜单
+let showMiniMenuOnSelect = ref(false)
+
+// 自定义浏览器
+let askBeforeClosingMultipleTabs = ref(false)
+let disableCustomScrollbars = ref(false)
+let doubleClickToCloseTab = ref(false)
+let keepWindowOpenOnLastTabClose = ref(false)
+let enableMouseGestures = ref(false)
+let enableSplitScreen = ref(false)
+
+// 字体
+let fontSize = ref('1')
 const fontsizeSelectOptions = [
   {
     value: '0',
@@ -683,7 +751,7 @@ const fontsizeSelectOptions = [
   {
     value: '2',
     label: '大'
-  },
+  }
 ]
 
 const emit = defineEmits(['routeHandle'])
@@ -700,6 +768,10 @@ const goChildPage = (val: string, pTitle: string, cTitle: string) => {
     background: blue;
     margin-top: 15px;
     cursor: pointer;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 </style>
diff --git a/src/components/Setting/components/personal.vue b/src/components/Setting/components/personal.vue
index 58e5610..9b2d01b 100644
--- a/src/components/Setting/components/personal.vue
+++ b/src/components/Setting/components/personal.vue
@@ -2,12 +2,19 @@
   <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>
+      <el-button text @click="addUserProfile"
+        ><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">
+      <common-line
+        :type="'buttonGroup'"
+        :btnGroup="btnGroup"
+        style="padding: 20px"
+        @button-group-click="handleProfileActions"
+      >
         <template #image>
-          <div class="avator">
+          <div class="avator" @click="editAvatar">
             <img
               src="../img/temp_avatar.jpg"
               style="width: 52px; height: 52px; border-radius: 50%"
@@ -40,6 +47,7 @@
           icon: 'share_icon.png',
           text: true
         }"
+        @button-one="() => sendMsg(name, '管理账户', 'personal', 'manageAccount', true)"
       >
         <template #image>
           <img
@@ -161,6 +169,7 @@
           name: '打开电子钱包'
         }"
         class="ptb_16"
+        @button-one="() => sendMsg(name, '打开电子钱包', 'personal', 'openWallet', true)"
       >
         <template #image>
           <img
@@ -181,6 +190,7 @@
           text: true
         }"
         class="ptb_4"
+        @button-one="() => sendMsg(name, '付款信息', 'personal', 'paymentInfo', true)"
       >
         <template #image>
           <img
@@ -198,6 +208,7 @@
           text: true
         }"
         class="ptb_4"
+        @button-one="() => sendMsg(name, '密码', 'personal', 'passwords', true)"
       >
         <template #image>
           <img
@@ -215,6 +226,7 @@
           text: true
         }"
         class="ptb_4"
+        @button-one="() => sendMsg(name, '个人信息', 'personal', 'personalInfo', true)"
       >
         <template #image>
           <img
@@ -228,7 +240,12 @@
       <div class="title">其他用户配置</div>
     </div>
     <div class="outer-frame">
-      <common-line :type="'buttonGroup'" :btnGroup="btnGroupConfig" class="ptb_16">
+      <common-line
+        :type="'buttonGroup'"
+        :btnGroup="btnGroupConfig"
+        class="ptb_16"
+        @button-group-click="handleOtherProfileActions"
+      >
         <template #image>
           <img
             src="../img/user-setting_icon.png"
@@ -244,32 +261,74 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
 import completeIcon from '../img/complete_icon.png'
+import { sendMsg } from '../index'
+
+const name = ref('个人资料')
 
 const btnGroup = [
   {
     name: '',
-    icon: 'edit_icon.png'
+    icon: 'edit_icon.png',
+    action: 'edit'
   },
   {
     name: '',
-    icon: 'del_icon.png'
+    icon: 'del_icon.png',
+    action: 'delete'
   },
   {
-    name: '退出登录'
+    name: '退出登录',
+    action: 'logout'
   }
 ]
 const btnGroupConfig = [
   {
-    name: '切换'
+    name: '切换',
+    action: 'switch'
   },
   {
     name: '',
-    icon: 'del_icon.png'
+    icon: 'del_icon.png',
+    action: 'delete'
   }
 ]
 
+const addUserProfile = () => {
+  sendMsg(name.value, '添加用户配置', 'personal', 'addUserProfile', true)
+}
+
+const editAvatar = () => {
+  sendMsg(name.value, '编辑头像', 'personal', 'editAvatar', true)
+}
+
+const handleProfileActions = (btn: { action: string }) => {
+  switch (btn.action) {
+    case 'edit':
+      sendMsg(name.value, '编辑当前用户', 'personal', 'editCurrentUser', true)
+      break
+    case 'delete':
+      sendMsg(name.value, '删除当前用户', 'personal', 'deleteCurrentUser', true)
+      break
+    case 'logout':
+      sendMsg(name.value, '退出登录', 'personal', 'logout', true)
+      break
+  }
+}
+
+const handleOtherProfileActions = (btn: { action: string }) => {
+  switch (btn.action) {
+    case 'switch':
+      sendMsg(name.value, '切换其他用户', 'personal', 'switchOtherUser', true)
+      break
+    case 'delete':
+      sendMsg(name.value, '删除其他用户', 'personal', 'deleteOtherUser', true)
+      break
+  }
+}
+
 const emit = defineEmits(['routeHandle'])
 const goChildPage = (val: string, pTitle: string, cTitle: string) => {
   emit('routeHandle', val, pTitle, cTitle)
@@ -284,6 +343,7 @@ const goChildPage = (val: string, pTitle: string, cTitle: string) => {
     border-radius: 50%;
     margin-right: 20px;
     position: relative;
+    cursor: pointer;
     .edit-mask {
       width: 100%;
       height: 100%;
@@ -296,7 +356,6 @@ const goChildPage = (val: string, pTitle: string, cTitle: string) => {
       position: absolute;
       left: 0;
       top: 0;
-      cursor: pointer;
       display: none;
     }
   }
diff --git a/src/components/Setting/components/print.vue b/src/components/Setting/components/print.vue
index c0ba7bb..af83745 100644
--- a/src/components/Setting/components/print.vue
+++ b/src/components/Setting/components/print.vue
@@ -12,13 +12,22 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="managePrinters"
       />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
+import { sendMsg } from '../index'
+
+const name = ref('打印机')
+
+const managePrinters = () => {
+  sendMsg(name.value, '管理打印机', 'print', 'managePrinters', true)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Setting/components/reset.vue b/src/components/Setting/components/reset.vue
index 6c70033..383bb31 100644
--- a/src/components/Setting/components/reset.vue
+++ b/src/components/Setting/components/reset.vue
@@ -8,18 +8,32 @@
         :title="'将设置还原为其默认值'"
         :type="'button'"
         :buttonOne="{
-          icon: 'arrow_left_icon.png',
-          text: true
+          name: '重置设置'
         }"
         class="ptb_8"
-      />
+        @button-one="handleResetClick"
+      >
+        <template #bottomcontent>
+          <p class="title_12_gray">
+            这将重置你的启动页面、新标签页、搜索引擎和固定的标签页。它还将禁用所有扩展并清除临时数据，如
+            cookie。你的收藏夹、历史记录和已保存的密码不会被清除。
+          </p>
+        </template>
+      </common-line>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
+import { sendMsg } from '../index'
+
+const name = ref('重置设置')
+
+const handleResetClick = () => {
+  sendMsg(name.value, '将设置还原为其默认值', 'reset', 'resetToDefault', true)
+}
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/Setting/components/safe.vue b/src/components/Setting/components/safe.vue
index f977244..da099c6 100644
--- a/src/components/Setting/components/safe.vue
+++ b/src/components/Setting/components/safe.vue
@@ -5,7 +5,7 @@
       <div style="margin-left: 32px">
         <div class="title">使用 Microsoft Edge 帮助你的家人提高安全性</div>
         <p style="margin-top: 4px">对于家庭组，每个人都可以更轻松地在线浏览。</p>
-        <el-button>立即开始</el-button>
+        <el-button @click="handleStartClick">立即开始</el-button>
       </div>
     </div>
     <div style="margin-bottom: 30px">
@@ -16,7 +16,9 @@
       <div style="margin-left: 16px">
         <div class="title_14 flex"
           >活动报告
-          <img src="../img/help_icon.png" style="width: 20px; height: 20px; margin-left: 10px; cursor: pointer;"
+          <img
+            src="../img/help_icon.png"
+            style="width: 20px; height: 20px; margin-left: 10px; cursor: pointer"
         /></div>
         <p class="title_12_gray" style="margin-top: 4px"
           >查看你的孩子在Microsoft Edge上访问的网站，以及他们在Microsoft必应上搜索的内容。</p
@@ -28,7 +30,9 @@
       <div style="margin-left: 16px">
         <div class="title_14 flex"
           >内容筛选器
-          <img src="../img/help_icon.png" style="width: 20px; height: 20px; margin-left: 10px; cursor: pointer;"
+          <img
+            src="../img/help_icon.png"
+            style="width: 20px; height: 20px; margin-left: 10px; cursor: pointer"
         /></div>
         <p class="title_12_gray" style="margin-top: 4px"
           >通过在 Microsoft Edge 上筛选掉不适当的网站并在 Microsoft Bing
@@ -41,7 +45,9 @@
       <div style="margin-left: 16px">
         <div class="title_14 flex"
           >可安心无忧地跨设备使用
-          <img src="../img/help_icon.png" style="width: 20px; height: 20px; margin-left: 10px; cursor: pointer;"
+          <img
+            src="../img/help_icon.png"
+            style="width: 20px; height: 20px; margin-left: 10px; cursor: pointer"
         /></div>
         <p class="title_12_gray" style="margin-top: 4px"
           >使用 Microsoft 帐户登录，以使设置在 Windows、Xbox 和 Android 中生效</p
@@ -51,14 +57,23 @@
     <div style="margin-top: 50px">
       <div class="title_14 flex">获取更多提示和信息></div>
       <p class="title_12_gray" style="margin-top: 4px"
-        >想要获得有关如何保持在线互动安全且充满趣味的更多提示? 我们提供了相关资源。<a href="" class="a_style">请试一试</a></p
+        >想要获得有关如何保持在线互动安全且充满趣味的更多提示?
+        我们提供了相关资源。<a href="" class="a_style">请试一试</a></p
       >
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
+import { sendMsg } from '../index'
+
+const name = ref('家庭安全')
+
+const handleStartClick = () => {
+  sendMsg(name.value, '立即开始', 'safe', 'startNow', true)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Setting/components/security.vue b/src/components/Setting/components/security.vue
index 7dd139a..a0cf360 100644
--- a/src/components/Setting/components/security.vue
+++ b/src/components/Setting/components/security.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="common-page">
     <div style="margin-bottom: 30px">
-      <button @click="sendMsg">确定保存</button>
       <div class="title">Demo 你好，我们尊重你的隐私</div>
       <p class="title_12_gray" style="margin-top: 5px">
         我们将始终保护和尊重你的隐私，同时提供应得的透明度和控制。
@@ -28,7 +27,7 @@
               class="flex-block flex-block_3"
               :class="{ 'flex-block_active': protectionLevel === 'basic' }"
               style="height: 208px"
-              @click="handleProtectionLevel('basic')"
+              @click="() => { protectionLevel = 'basic'; sendMsg(name, '跟踪防护级别', 'security', 'protectionLevel', 'basic'); }"
             >
               <div class="top-line">
                 <img src="../img/edge-new-fill.png" />
@@ -57,7 +56,7 @@
               class="flex-block flex-block_3"
               :class="{ 'flex-block_active': protectionLevel === 'balance' }"
               style="height: 208px"
-              @click="handleProtectionLevel('balance')"
+              @click="() => { protectionLevel = 'balance'; sendMsg(name, '跟踪防护级别', 'security', 'protectionLevel', 'balance'); }"
             >
               <div class="top-line">
                 <img src="../img/edge-new-fill.png" />
@@ -89,7 +88,7 @@
               class="flex-block flex-block_3"
               :class="{ 'flex-block_active': protectionLevel === 'strict' }"
               style="height: 208px"
-              @click="handleProtectionLevel('strict')"
+              @click="() => { protectionLevel = 'strict'; sendMsg(name, '跟踪防护级别', 'security', 'protectionLevel', 'strict'); }"
             >
               <div class="top-line">
                 <img src="../img/edge-new-fill.png" />
@@ -147,6 +146,7 @@
       <common-line
         :title="'浏览 InPrivate 时始终使用“严格”跟踪防护'"
         :type="'switch'"
+        @switch="val => { inPrivateStrictTracking = val; sendMsg(name, 'InPrivate时使用严格跟踪防护', 'security', 'inPrivateStrictTracking', val); }"
         class="ptb_8"
       />
       <div v-if="!maskDisplay" class="mask" style="height: calc(100% - 40px)"></div>
@@ -199,6 +199,7 @@
       <common-line
         :title="'每次退出 Microsoft Edge 时，清除 Internet Explorer 和 Internet Explorer 模式的所选数据'"
         :type="'switch'"
+        @switch="val => { clearIEDataOnExit = val; sendMsg(name, '关闭时清除IE数据', 'security', 'clearIEDataOnExit', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -216,9 +217,19 @@
       </p>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'发送“禁止跟踪”请求'" :type="'switch'" class="ptb_8" />
+      <common-line
+        :title="'发送“禁止跟踪”请求'"
+        :type="'switch'"
+        @switch="val => { sendDoNotTrack = val; sendMsg(name, '发送“禁止跟踪”请求', 'security', 'sendDoNotTrack', val); }"
+        class="ptb_8"
+      />
       <hr class="divider" />
-      <common-line :title="'允许站点检查是否已保存付款方式'" :type="'switch'" class="ptb_8" />
+      <common-line
+        :title="'允许站点检查是否已保存付款方式'"
+        :type="'switch'"
+        @switch="val => { allowSiteCheckPayment = val; sendMsg(name, '允许站点检查付款方式', 'security', 'allowSiteCheckPayment', val); }"
+        class="ptb_8"
+      />
     </div>
     <div class="pb_12">
       <div class="title">必需诊断数据</div>
@@ -227,6 +238,7 @@
       <common-line
         :title="'Microsoft 收集必要的诊断数据以确保 Microsoft Edge 安全、保持最新并正常运行。'"
         :type="'switch'"
+        @switch="val => { requiredDiagnosticData = val; sendMsg(name, '必需诊断数据', 'security', 'requiredDiagnosticData', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -245,6 +257,7 @@
       <common-line
         :title="'通过发送有关使用浏览器的方式、访问的网站和崩溃报告的可选诊断数据，帮助改进 Microsoft 产品。'"
         :type="'switch'"
+        @switch="val => { optionalDiagnosticData = val; sendMsg(name, '可选诊断数据', 'security', 'optionalDiagnosticData', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -261,6 +274,7 @@
       <common-line
         :title="'为了提升产品和服务的用户体验，允许我们收集您在本浏览器上使用搜索服务时看到的搜索结果'"
         :type="'switch'"
+        @switch="val => { searchResultDataForImprovement = val; sendMsg(name, '用于产品改进的搜索结果数据', 'security', 'searchResultDataForImprovement', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -283,6 +297,7 @@
       <common-line
         :title="'允许 Microsoft 保存你的浏览活动，包括历史记录、使用情况、收藏夹、网页内容和其他浏览数据，以便对 Microsoft Edge 和 Microsoft 服务(例如广告、搜索、购物和资讯)进行个性化设置。'"
         :type="'switch'"
+        @switch="val => { allowPersonalization = val; sendMsg(name, '个性化和广告', 'security', 'allowPersonalization', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -313,7 +328,12 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'Microsoft Defender Smartscreen'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'Microsoft Defender Smartscreen'"
+        :type="'switch'"
+        @switch="val => { defenderSmartscreen = val; sendMsg(name, 'Microsoft Defender Smartscreen', 'security', 'defenderSmartscreen', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             使用 Microsoft Defender SmartScreen 帮助我抵御恶意网站和下载的侵害
@@ -321,13 +341,24 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'阻止可能不需要的应用'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'阻止可能不需要的应用'"
+        :type="'switch'"
+        @switch="val => { blockUnwantedApps = val; sendMsg(name, '阻止可能不需要的应用', 'security', 'blockUnwantedApps', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray"> 阻止下载可能导致意外行为的低信誉度应用 </p>
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'网站拼写错误保护'" :showHelpIcon="true" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'网站拼写错误保护'"
+        :showHelpIcon="true"
+        :type="'switch'"
+        @switch="val => { typoProtection = val; sendMsg(name, '网站拼写错误保护', 'security', 'typoProtection', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             如果我键入了错误的网站地址，可能会定向到潜在的恶意网站，请提醒我。
@@ -346,6 +377,7 @@
       <common-line
         :title="'使用安全的 DNS 指定如何查找网站的网络地址'"
         :type="'switch'"
+        @switch="val => { useSecureDNS = val; sendMsg(name, '使用安全的DNS', 'security', 'useSecureDNS', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -354,7 +386,7 @@
             提供商可能会导致某些站点无法访问。
           </p>
           <div class="radio-group" style="margin-top: 15px">
-            <el-radio-group v-model="radioDNS" class="ml-4">
+            <el-radio-group v-model="radioDNS" @change="val => sendMsg(name, '安全DNS提供商选项', 'security', 'radioDNS', val)" class="ml-4">
               <el-radio label="1" size="large">
                 <p class="radio-title">使用当前服务提供商</p>
                 <p class="radio-tip">你当前的服务提供商可能未提供安全的 DNS</p>
@@ -367,6 +399,7 @@
             <el-input
               v-model="inputDNS"
               :disabled="radioDNS === '1'"
+              @input="val => sendMsg(name, '自定义DNS提供商', 'security', 'inputDNS', val)"
               placeholder="输入自定义提供程序"
               style="width: 34%; margin-left: 26px"
             />
@@ -392,7 +425,7 @@
                 class="flex-block flex-block_2"
                 :class="{ 'flex-block_active': webSafeLevel === 'balance' }"
                 style="height: 152px"
-                @click="handleWebSafeLevel('balance')"
+                @click="() => { webSafeLevel = 'balance'; sendMsg(name, 'Web安全级别', 'security', 'webSafeLevel', 'balance'); }"
               >
                 <div class="top-line">
                   <div>
@@ -419,7 +452,7 @@
                 class="flex-block flex-block_2"
                 :class="{ 'flex-block_active': webSafeLevel === 'strict' }"
                 style="height: 152px"
-                @click="handleWebSafeLevel('strict')"
+                @click="() => { webSafeLevel = 'strict'; sendMsg(name, 'Web安全级别', 'security', 'webSafeLevel', 'strict'); }"
               >
                 <div class="top-line">
                   <div>
@@ -460,6 +493,7 @@
         <common-line
           :title="'浏览 InPrivate 时，始终使用“严格”级别，以增强安全性'"
           :type="'switch'"
+          @switch="val => { inPrivateStrictSecurity = val; sendMsg(name, 'InPrivate时使用严格安全级别', 'security', 'inPrivateStrictSecurity', val); }"
           class="ptb_8"
         />
         <div v-if="maskDisplayDNS" class="mask" style="height: calc(100% - 60px)"></div>
@@ -474,9 +508,19 @@
       </p>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'使用 Web 服务帮助解决导航错误'" :type="'switch'" class="ptb_8" />
+      <common-line
+        :title="'使用 Web 服务帮助解决导航错误'"
+        :type="'switch'"
+        @switch="val => { useWebServiceForNavError = val; sendMsg(name, '使用WebService解决导航错误', 'security', 'useWebServiceForNavError', val); }"
+        class="ptb_8"
+      />
       <hr class="divider" />
-      <common-line :title="'找不到网站时建议类似的站点'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'找不到网站时建议类似的站点'"
+        :type="'switch'"
+        @switch="val => { suggestSimilarSites = val; sendMsg(name, '建议类似的站点', 'security', 'suggestSimilarSites', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             如果找不到网站，则 Web 地址将发送给 Microsoft 以尝试查找正确的网站
@@ -489,6 +533,7 @@
         :title2="' 中购物，节省时间和金钱'"
         :showHelpIcon="true"
         :type="'switch'"
+        @switch="val => { shoppingInEdge = val; sendMsg(name, '在Edge中购物', 'security', 'shoppingInEdge', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -506,6 +551,7 @@
         :title2="' 中使用集锦保存内容'"
         :showHelpIcon="true"
         :type="'switch'"
+        @switch="val => { useCollections = val; sendMsg(name, '使用集锦', 'security', 'useCollections', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -513,7 +559,12 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'获取有关使用“发现”浏览相关内容的通知'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'获取有关使用“发现”浏览相关内容的通知'"
+        :type="'switch'"
+        @switch="val => { discoverNotifications = val; sendMsg(name, '“发现”通知', 'security', 'discoverNotifications', val); }"
+        class="ptb_8"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             我们将向你显示有关可以浏览内容的建议，例如旅行目的地、天气、食谱、旅行卡等
@@ -524,6 +575,7 @@
       <common-line
         :title="'让 Microsoft Edge 帮助保持标签页井然有序'"
         :type="'switch'"
+        @switch="val => { organizeTabs = val; sendMsg(name, '帮助整理标签页', 'security', 'organizeTabs', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -549,6 +601,7 @@
       <common-line
         :title="'保存历史记录网站的屏幕截图'"
         :type="'switch'"
+        @switch="val => { saveHistoryScreenshots = val; sendMsg(name, '保存历史记录网站截图', 'security', 'saveHistoryScreenshots', val); }"
         class="ptb_8"
       >
         <template #bottomcontent>
@@ -562,63 +615,66 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import commonLine from './commonLine.vue'
-import { emitter } from '@/utils/eventBus'
+import { sendMsg } from '../index'
 
 let name = ref('隐私、搜索和服务')
 
-function sendMsg() {
-  console.log(maskDisplay.value)
-  // 获取值
-  if (maskDisplay.value) {
-    let datas = {
-      contentIn: "设置" + name.value + "防止跟踪: 打开",
-      content: 'security@maskDisplay@true'
-    }
-    formList.value.push(datas)
-  } else {
-    let datas = {
-      contentIn: "设置" + name.value + "防止跟踪: 关闭",
-      content: 'security@maskDisplay@false'
-    }
-    formList.value.push(datas)
-  }
-  emitter.emit('maskDisplay', formList)
-}
-// 每个表单对象是普通对象
-const formList = ref([])
-
 // 跟踪防护-遮罩层
 let maskDisplay = ref(true)
 // 跟踪防护
 const protectionSwitch = (val: boolean) => {
   maskDisplay.value = val
-  
+  sendMsg(name.value, '跟踪防护', 'security', 'maskDisplay', val)
 }
 let protectionLevel = ref('basic')
-const handleProtectionLevel = (level: string) => {
-  protectionLevel.value = level
-}
+let inPrivateStrictTracking = ref(false)
+
+// 清除浏览数据
+let clearIEDataOnExit = ref(false)
+
+// 隐私
+let sendDoNotTrack = ref(false)
+let allowSiteCheckPayment = ref(false)
+
+// 诊断数据
+let requiredDiagnosticData = ref(false)
+let optionalDiagnosticData = ref(false)
+let searchResultDataForImprovement = ref(false)
+
+// 个性化和广告
+let allowPersonalization = ref(false)
+
+// 安全性
+let defenderSmartscreen = ref(false)
+let blockUnwantedApps = ref(false)
+let typoProtection = ref(false)
+let useSecureDNS = ref(false)
+let inPrivateStrictSecurity = ref(false)
 
 // DNS
 let radioDNS = ref('1')
 let inputDNS = ref('')
 
-// 跟踪防护-遮罩层
-let maskDisplayDNS = ref(false)
+// Web安全性-遮罩层
+let maskDisplayDNS = ref(true)
 // Web安全性
 const webSafeSwitch = (val: boolean) => {
   maskDisplayDNS.value = !val
+  sendMsg(name.value, '增强Web安全性', 'security', 'webSafeEnabled', !val)
 }
 let webSafeLevel = ref('balance')
-const handleWebSafeLevel = (level: string) => {
-  webSafeLevel.value = level
-}
+
+// 服务
+let useWebServiceForNavError = ref(false)
+let suggestSimilarSites = ref(false)
+let shoppingInEdge = ref(false)
+let useCollections = ref(false)
+let discoverNotifications = ref(false)
+let organizeTabs = ref(false)
+let saveHistoryScreenshots = ref(false)
 
 const emit = defineEmits(['routeHandle'])
 const goChildPage = (val: string, pTitle: string, cTitle: string) => {
   emit('routeHandle', val, pTitle, cTitle)
 }
 </script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/src/components/Setting/components/sidebar.vue b/src/components/Setting/components/sidebar.vue
index 532c4a6..e986d2f 100644
--- a/src/components/Setting/components/sidebar.vue
+++ b/src/components/Setting/components/sidebar.vue
@@ -4,7 +4,13 @@
       <div class="title">边栏可见性</div>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'显示&quot;边栏&quot;按钮'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'显示&quot;边栏&quot;按钮'"
+        :type="'switch'"
+        class="ptb_8"
+        v-model="showSidebarButton"
+        @switch="(val) => sendMsg(name, '显示边栏按钮', 'sidebar', 'showSidebarButton', val)"
+      >
         <template #image>
           <img
             src="../img/edge-new-fill.png"
@@ -14,7 +20,13 @@
       </common-line>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'始终显示边栏'" :type="'switch'" class="ptb_8" />
+      <common-line
+        :title="'始终显示边栏'"
+        :type="'switch'"
+        class="ptb_8"
+        v-model="alwaysShowSidebar"
+        @switch="(val) => sendMsg(name, '始终显示边栏', 'sidebar', 'alwaysShowSidebar', val)"
+      />
     </div>
     <div style="margin-bottom: 30px">
       <div class="title">应用和通知设置</div>
@@ -28,6 +40,7 @@
           text: true
         }"
         class="ptb_8"
+        @button-one="goChildPage('copilot', '边栏', 'Copilot')"
       >
         <template #image>
           <img
@@ -41,8 +54,20 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
+import { sendMsg } from '../index'
+
+const name = ref('边栏')
+
+// 边栏可见性
+const showSidebarButton = ref(false)
+const alwaysShowSidebar = ref(false)
+
+const emit = defineEmits(['routeHandle'])
+const goChildPage = (val: string, pTitle: string, cTitle: string) => {
+  emit('routeHandle', val, pTitle, cTitle)
+}
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/Setting/components/system.vue b/src/components/Setting/components/system.vue
index 594eab7..68f2d0b 100644
--- a/src/components/Setting/components/system.vue
+++ b/src/components/Setting/components/system.vue
@@ -4,7 +4,13 @@
       <div class="title">系统</div>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'启动增强'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'启动增强'"
+        :type="'switch'"
+        class="ptb_8"
+        v-model="startupBoost"
+        @switch="(val) => sendMsg(name, '启动增强', 'system', 'startupBoost', val)"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             快速转到浏览。启用此功能后，有助于启动设备时更快打开 Microsoft Edge。
@@ -17,11 +23,25 @@
         :title="'在 Microsoft Edge 关闭后继续运行后台扩展和应用'"
         :type="'switch'"
         class="ptb_8"
+        v-model="runInBackground"
+        @switch="(val) => sendMsg(name, '后台运行', 'system', 'runInBackground', val)"
       />
       <hr class="divider" />
-      <common-line :title="'在可用时使用图形加速'" :type="'switch'" class="ptb_8" />
+      <common-line
+        :title="'在可用时使用图形加速'"
+        :type="'switch'"
+        class="ptb_8"
+        v-model="useGraphicsAcceleration"
+        @switch="(val) => sendMsg(name, '图形加速', 'system', 'useGraphicsAcceleration', val)"
+      />
       <hr class="divider" />
-      <common-line :title="'增强 Microsoft Edge 中的视频'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'增强 Microsoft Edge 中的视频'"
+        :type="'switch'"
+        class="ptb_8"
+        v-model="enhanceVideos"
+        @switch="(val) => sendMsg(name, '增强视频', 'system', 'enhanceVideos', val)"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             插入设备时锐化视频并改进颜色、照明和对比度。受保护视频和屏幕上较小的视频将不会得到增强。当多个视频在一个网站上处于活动状态时，只会增强最近播放的视频。
@@ -35,10 +55,14 @@
         :type="'select'"
         :selectWidth="'200px'"
         class="ptb_8"
+        v-model="videoEnhancementMethod"
+        @change="
+          (val) => sendMsg(name, '视频增强方法', 'system', 'videoEnhancementMethod', val)
+        "
       >
         <template #bottomcontent>
           <p class="title_12_gray">
-            插入设备时锐化视频并改进颜色、照明和对比度。受保护视频和屏幕上较小的视频将不会得到增强。当多个视频在一个网站上处于活动状态时，只会增强最近播放的视频。
+            插入设备时锐化视频并改进颜色、照明和对比度。受保护视频和屏幕上较小的视频将不会得到增强。当多个视频在一个网站上处于活动状态时，只会增强最近播放的_视频。
           </p>
         </template>
       </common-line>
@@ -57,7 +81,13 @@
       <div class="title">优化性能</div>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'效率模式'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'效率模式'"
+        :type="'switch'"
+        class="ptb_8"
+        v-model="efficiencyMode"
+        @switch="(val) => sendMsg(name, '效率模式', 'system', 'efficiencyMode', val)"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             快速转到浏览。启用此功能后，有助于启动设备时更快打开 Microsoft
@@ -67,7 +97,15 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'使用效率模式改善电脑游戏体验'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'使用效率模式改善电脑游戏体验'"
+        :type="'switch'"
+        class="ptb_8"
+        v-model="improveGamingExperience"
+        @switch="
+          (val) => sendMsg(name, '改善游戏体验', 'system', 'improveGamingExperience', val)
+        "
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             当你玩电脑游戏时，Microsoft Edge减少其计算机资源 （CPU） 使用量，以创建更好的游戏体验。
@@ -75,7 +113,13 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'使用标签页休眠功能节约资源'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'使用标签页休眠功能节约资源'"
+        :type="'switch'"
+        class="ptb_8"
+        v-model="useSleepingTabs"
+        @switch="(val) => sendMsg(name, '标签页休眠', 'system', 'useSleepingTabs', val)"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             启用此选项后，不活动的标签页将在指定时间后进入休眠状态以节约系统资源。
@@ -84,7 +128,13 @@
         </template>
       </common-line>
       <hr class="divider" />
-      <common-line :title="'淡出睡眠标签页'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'淡出睡眠标签页'"
+        :type="'switch'"
+        class="ptb_8"
+        v-model="fadeOutSleepingTabs"
+        @switch="(val) => sendMsg(name, '淡出睡眠标签页', 'system', 'fadeOutSleepingTabs', val)"
+      >
         <template #bottomcontent>
           <p class="title_12_gray"> 保存内存和 CPU 以提高性能时，标签页将显示为淡出。 </p>
         </template>
@@ -96,6 +146,8 @@
         :type="'select'"
         :selectWidth="'200px'"
         class="ptb_8"
+        v-model="sleepTabsAfter"
+        @change="(val) => sendMsg(name, '标签页休眠时间', 'system', 'sleepTabsAfter', val)"
       >
         <template #bottomcontent>
           <p class="title_12_gray">
@@ -134,7 +186,13 @@
       <div class="title">管理你的性能</div>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'性能检测器'" :type="'switch'" class="ptb_8">
+      <common-line
+        :title="'性能检测器'"
+        :type="'switch'"
+        class="ptb_8"
+        v-model="performanceDetector"
+        @switch="(val) => sendMsg(name, '性能检测器', 'system', 'performanceDetector', val)"
+      >
         <template #bottomcontent>
           <p class="title_12_gray">
             当此项打开时，浏览器将检测到选项卡性能问题并推荐一个操作以修复此问题。
@@ -146,15 +204,31 @@
       <div class="title">开发人员工具</div>
     </div>
     <div class="outer-frame" style="margin-bottom: 30px">
-      <common-line :title="'使用 F12 键打开开发人员工具'" :type="'switch'" class="ptb_8"/>
+      <common-line
+        :title="'使用 F12 键打开开发人员工具'"
+        :type="'switch'"
+        class="ptb_8"
+        v-model="useF12ForDevTools"
+        @switch="(val) => sendMsg(name, 'F12打开开发者工具', 'system', 'useF12ForDevTools', val)"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import commonLine from './commonLine.vue'
 import completeIcon from '../img/complete_icon.png'
+import { sendMsg } from '../index'
 
+const name = ref('系统')
+
+// 系统
+const startupBoost = ref(false)
+const runInBackground = ref(false)
+const useGraphicsAcceleration = ref(false)
+const enhanceVideos = ref(false)
+const videoEnhancementMethod = ref('0')
 const selectOptions = [
   {
     value: '0',
@@ -165,6 +239,13 @@ const selectOptions = [
     label: '图形驱动程序增强功能'
   }
 ]
+
+// 优化性能
+const efficiencyMode = ref(false)
+const improveGamingExperience = ref(false)
+const useSleepingTabs = ref(false)
+const fadeOutSleepingTabs = ref(false)
+const sleepTabsAfter = ref('1')
 const selectTimeOptions = [
   {
     value: '0',
@@ -179,7 +260,12 @@ const selectTimeOptions = [
     label: '15分钟不活动'
   }
 ]
+
+// 管理你的性能
+const performanceDetector = ref(false)
+
+// 开发人员工具
+const useF12ForDevTools = ref(false)
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/Setting/index.ts b/src/components/Setting/index.ts
new file mode 100644
index 0000000..8e2a455
--- /dev/null
+++ b/src/components/Setting/index.ts
@@ -0,0 +1,44 @@
+import { useSettingStore } from "@/store/modules/settings"
+/**
+ * 通用的消息发送函数，用于将设置更改添加到全局状态
+ * @param pageName 设置页面的顶级标题, e.g., '隐私、搜索和服务'
+ * @param description 更改项的具体描述, e.g., 'InPrivate时使用严格跟踪防护'
+ * @param category 更改项的分类, e.g., 'security'
+ * @param key 更改项的唯一标识, e.g., 'inPrivateStrictTracking'
+ * @param value 更改项的值 (可以是 boolean, string, number 等)
+ */
+export const sendMsg = (pageName: string, description: string, category: string, key: string, value: any) => {
+  const settingStore = useSettingStore()
+
+  let displayValue: string;
+  
+  // 根据值的类型格式化显示文本
+  if (typeof value === 'boolean') {
+    displayValue = value ? '打开' : '关闭';
+  } else {
+    displayValue = value;
+  }
+
+  // 拼接 contentIn 字符串
+  const contentIn = `设置${pageName}${description}: ${displayValue}`
+  
+  // 拼接 content 字符串
+  const content = `${category}@${key}@${value}`
+
+  // 创建数据对象并添加到 store
+  const data = { contentIn, content };
+  
+  // 为了避免重复，可以先查找并更新，如果不存在再添加
+  const existingIndex = settingStore.settingsFormList.findIndex(item => item.content.startsWith(`${category}@${key}@`));
+
+  if (existingIndex !== -1) {
+    // 如果已存在，则替换
+    settingStore.settingsFormList[existingIndex] = data;
+  } else {
+    // 如果不存在，则添加
+    settingStore.settingsFormList.push(data);
+  }
+
+  console.log('Updated settings data:', data);
+  console.log('Current form list:', settingStore.settingsFormList);
+}
diff --git a/src/components/Setting/index.vue b/src/components/Setting/index.vue
index 87b3316..96e564f 100644
--- a/src/components/Setting/index.vue
+++ b/src/components/Setting/index.vue
@@ -79,7 +79,6 @@ import Reset from './components/reset.vue'
 import About from './components/about.vue'
 
 import './style/common.scss'
-
 const searchValue = ref('')
 
 const tabsList = ref([
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
new file mode 100644
index 0000000..55eff7c
--- /dev/null
+++ b/src/store/modules/settings.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useSettingStore = defineStore('settings', () => {
+  const settingsFormList = ref<any[]>([])
+  // 清除所有 settings 相关数据
+  const clearSettingData = () => {
+    settingsFormList.value = []
+  }
+
+  return {
+    settingsFormList,
+    clearSettingData
+  }
+})
diff --git a/src/views/paper/question/EmailForm.vue b/src/views/paper/question/EmailForm.vue
index 590d635..0d5532a 100644
--- a/src/views/paper/question/EmailForm.vue
+++ b/src/views/paper/question/EmailForm.vue
@@ -278,7 +278,7 @@
   </div>
   <!-- 表单弹窗：添加/修改 -->
   <FileForm ref="FileRef" @success="handleUploadSuccess" />
-  <el-dialog v-model="dialogFormVisibleWordInfo" title="考点设置" width="1500px">
+  <el-dialog v-model="dialogFormVisibleWordInfo" title="考点设置" width="1500px" style="overflow: scroll;">
     <Email />
   </el-dialog>
 </template>
@@ -909,4 +909,4 @@ const openPoints = async () => {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/paper/question/SettingForm.vue b/src/views/paper/question/SettingForm.vue
index 97be2b2..1199633 100644
--- a/src/views/paper/question/SettingForm.vue
+++ b/src/views/paper/question/SettingForm.vue
@@ -196,75 +196,6 @@
                     </el-table>
                   </div>
                 </el-tab-pane> -->
-                <el-tab-pane name="annex">
-                  <template #label>
-                    <div class="custom-tabs-label">
-                      <p>试题附件</p>
-                    </div>
-                  </template>
-                  <!-- 提示 -->
-                  <el-alert type="warning" show-icon :closable="false">
-                    <template #default>
-                      <span>提示：文件名称可默认不设置</span>
-                    </template>
-                  </el-alert>
-                  <div class="block">
-                    <el-table :data="documentList" style="width: 100%">
-                      <el-table-column type="index" label="#" width="50" />
-                      <el-table-column label="文件名称" width="250">
-                        <template #default="scope">
-                          <el-input
-                            v-model="scope.row.fileName"
-                            size="small"
-                            placeholder="请输入文件名称(未输入自动命名)"
-                          />
-                        </template>
-                      </el-table-column>
-                      <el-table-column
-                        prop="fileType"
-                        label="类型"
-                        :formatter="fileTypeFormatter"
-                      />
-                      <el-table-column prop="url" label="地址" width="200">
-                        <template #default="{ row }">
-                          <div
-                            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
-                            :title="row.url"
-                          >
-                            {{ row.url }}
-                          </div>
-                        </template>
-                      </el-table-column>
-                      <el-table-column label="操作" width="150">
-                        <template #default="scope">
-                          <el-button
-                            type="primary"
-                            plain
-                            @click="openForm(scope.row.fileType)"
-                            size="small"
-                          >
-                            <Icon icon="ep:upload" class="mr-5px" /> 上传
-                          </el-button>
-                          <el-button
-                            type="success"
-                            plain
-                            @click="downloadFile(scope.row.url)"
-                            size="small"
-                          >
-                            <Icon icon="ep:download" class="mr-5px" /> 下载
-                          </el-button>
-                          <el-button
-                            type="danger"
-                            plain
-                            @click="deleteUrl(scope.$index)"
-                            size="small"
-                            ><Icon icon="ep:download" class="mr-5px" />删除
-                          </el-button>
-                        </template>
-                      </el-table-column>
-                    </el-table>
-                  </div>
-                </el-tab-pane>
               </el-tabs>
             </div>
           </div>
@@ -278,54 +209,37 @@
   </div>
   <!-- 表单弹窗：添加/修改 -->
   <FileForm ref="FileRef" @success="handleUploadSuccess" />
-  <el-dialog v-model="dialogFormVisibleWordInfo" title="考点设置" width="1100px">
+  <el-dialog v-model="dialogFormVisibleWordInfo" title="考点设置" width="1100px" @close="handleFrom">
     <Setting />
   </el-dialog>
 </template>
 <script lang="ts" setup>
-import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { FormRules } from 'element-plus'
 import * as QuestionApi from '@/api/paper/question'
-import * as WordApi from '@/api/wps/word'
 import FileForm from './components/FileForm.vue'
 import Setting from '@/components/Setting/index.vue'
 import * as SpecialtyApi from '@/api/points'
-import { defaultProps, handleTree } from '@/utils/tree'
-import { cloneDeep } from 'lodash-es'
+import {  handleTree } from '@/utils/tree'
+import { useSettingStore } from '@/store/modules/settings'
+const settingStore = useSettingStore()
 // import { emitter } from '@/utils/eventBus'
 
 defineOptions({ name: 'WpsWordFrom' })
-const wordPointsList = ref<Tree[]>([]) // 树形结构
-const wordPointsInfoList = ref<Tree[]>([]) // 树形结构
+
 // onMounted(() => {
 //   emitter.on('maskDisplay', handleFromC)
 // })
-
-function handleFromC(data: any) {
-  console.log(data.value)
-  let index = 0
-  for (let i = 0; i < data.value.length; i++) {
-    var indexFlag = false
-    for (let x = 0; x < list.value.length; x++) {
-      if (data.value[i].content == list.value[x].content) {
-        // 如果存在相同的数据话 不进入
-        indexFlag = true
-      }
-    }
-    if (!indexFlag) {
-      index += 1
-      data.value[i].sort = index
-      data.value[i].scoreRate = "1"
-      list.value.push(data.value[i])
-    }
-  }
+const list = ref<any>([]) // 列表的数
+const handleFrom  = () => {
+  list.value = [...settingStore.settingsFormList]
+  // settingStore.clearSettingData()
 }
-const list = ref([]) // 列表的数
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const loading = ref(false) // 列表的加载中
 const dialogVisible = ref(false) // 弹窗的是否展示
-const isLoading = ref(false)
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
@@ -373,29 +287,8 @@ const formData = ref({
     }
   ]
 })
-const wordPointsFun = ref({
-  chineseName: '',
-  function: ''
-})
-const wordPoints = ref({
-  name: '',
-  englishName: '',
-  filePath: '',
-  type: '',
-  belongTo: '',
-  isboo: '',
-  function: '',
-  unit: '',
-  isExam: ''
-})
-let wordPointsInfosList: (typeof wordPoints)[] = []
 
-function fileTypeFormatter(row, column, cellValue) {
-  if (cellValue === '0') return '素材文件(上传ZIP)'
-  if (cellValue === '1') return '考试文件'
-  if (cellValue === '2') return '结果文件'
-  return '未知类型'
-}
+
 const documentList = ref([
   {
     quId: '',
@@ -417,70 +310,11 @@ const documentList = ref([
   }
 ])
 const dialogFormVisibleWordInfo = ref(false)
-const dialogFormVisibleWordInfos = ref(false)
-const nodeFunction = ref('')
-const titles = ref('')
-const englishName = ref('')
-const filePath = ref('')
-const upFilePath = ref('')
-
-const functionList = ref<string[]>([])
-const wordData = reactive({
-  chineseName: '',
-  englishName: '',
-  filePath: '',
-  function: [] as string[]
-})
-
-const handleCheckChange = (data: Tree, checked: boolean, indeterminate: boolean) => {
-  // if (checked || indeterminate) {
-  //   wordPoints.value.belongTo = data.belongTo
-  //   wordPoints.value.parameter = data.isboo
-  //   wordPoints.value.type = data.type
-  //   wordPointsFun.value = {
-  //     chineseName: '',
-  //     function: ''
-  //   }
-  //   wordPointsFun.value.chineseName = data.toChinese
-  //   wordPointsFun.value.function = data.nodeFunction
-  //   wordPoints.value.function.push(cloneDeep(wordPointsFun.value))
-  //   console.log(wordPoints)
-  // }
-  if (data.titleType == '2') {
-    wordPoints.value.name = chineseName.value + data.toChinese
-    wordPoints.value.filePath = filePath.value
-    wordPoints.value.function = englishNames.value + data.nodeFunction
-    wordPoints.value.englishName = englishNames.value
-    wordPoints.value.belongTo = data.belongTo
-    wordPoints.value.isboo = data.isboo
-    wordPoints.value.type = data.type
-    wordPoints.value.unit = data.unit
-    wordPoints.value.isExam = '0'
-    wordPointsInfosList.push(cloneDeep(wordPoints.value))
-  }
-  console.log(data, checked, indeterminate)
-}
 
 const addWordInfo = async () => {
   dialogFormVisibleWordInfo.value = true
 }
-const queryParams = reactive({
-  nodeFunction: undefined
-})
-const chineseName = ref('')
-const nodeFunctions = ref('')
-const englishNames = ref('')
-const handleNodelClick = async (row: any) => {
-  queryParams.nodeFunction = row.selectName
-  chineseName.value = '【' + row.name + '】'
-  filePath.value = row.filePath
-  nodeFunctions.value = row.selectName
-  englishNames.value = row.englishName
-  const res = await WordApi.getWordInfos(queryParams)
-  wordPointsInfoList.value = []
-  wordPointsInfoList.value.push(...handleTree(res))
-  dialogFormVisibleWordInfos.value = true
-}
+
 const handleDelete = (row) => {
   for (let i = 0; i < list.value.length; i++) {
     if (row.content == list.value[i].content) {
@@ -489,26 +323,6 @@ const handleDelete = (row) => {
   }
 }
 
-const submitWordPoints = async () => {
-  const res = await WordApi.getWordListInfos(wordPointsInfosList)
-  wordPoints.value = {
-    name: '',
-    englishName: '',
-    filePath: '',
-    type: '',
-    belongTo: '',
-    isboo: '',
-    function: '',
-    unit: '',
-    isExam: ''
-  }
-  
-  wordPointsInfosList = []
-  
-  dialogFormVisibleWordInfo.value = false
-  dialogFormVisibleWordInfos.value = false
-  wordPointsList.value = []
-}
 const formRules = reactive<FormRules>({
   status: [{ required: true, message: '启用状态必填', trigger: 'blur' }]
 })
@@ -593,6 +407,7 @@ const handleUploadSuccess = ({ url, fileType }) => {
 /** 打开弹窗 */
 const open = async (queryParams: any, type: string, id?: number) => {
   dialogVisible.value = true
+  settingStore.settingsFormList = []
   dialogTitle.value = t('action.' + type)
   formType.value = type
 
@@ -604,6 +419,7 @@ const open = async (queryParams: any, type: string, id?: number) => {
       formData.value = res
       console.log(formData.value)
       list.value = formData.value.answerList
+      settingStore.settingsFormList = [...list.value]
       documentList.value = res.fileUploads
     } finally {
       formLoading.value = false
@@ -620,16 +436,6 @@ const open = async (queryParams: any, type: string, id?: number) => {
   }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-// 转换函数：将大写字母 A-Z 映射为 0-25
-const mappedNumber = computed(() => {
-  const char = radio.value.toUpperCase()
-  const code = char.charCodeAt(0)
-  if (code >= 65 && code <= 90) {
-    return code - 65
-  } else {
-    return '请输入 A-Z 的字母'
-  }
-})
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
@@ -662,48 +468,7 @@ const submitForm = async () => {
 
 /** 重置表单 */
 const resetForm = () => {
-  formData.value = {
-    content: '',
-    specialtyName: '',
-    courseName: '',
-    quBankName: '',
-    required: '',
-    chapteridDictText: '',
-    analysis: '',
-    quLevel: 0,
-    pointNames: '',
-    subjectName: '',
-    status: '0',
-    resourceValue: '',
-    answerList: [
-      {
-        image: '',
-        content: '',
-        contentIn: '',
-        scoreRate: ''
-      }
-    ],
-    fileUploads: [
-      {
-        quId: '',
-        url: '',
-        fileType: '0',
-        fileName: ''
-      },
-      {
-        quId: '',
-        url: '',
-        fileType: '1',
-        fileName: ''
-      },
-      {
-        quId: '',
-        url: '',
-        fileType: '2',
-        fileName: ''
-      }
-    ]
-  }
+
   documentList.value = [
     {
       quId: '',
@@ -775,6 +540,7 @@ const openPoints = async () => {
   await getTree()
   dialogVisiblePoints.value = true
 }
+
 </script>
 <style lang="scss" scoped>
 .edit-dialog {
@@ -918,4 +684,4 @@ const openPoints = async () => {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/paper/question/index.vue b/src/views/paper/question/index.vue
index 4fdb5ff..e8927f5 100644
--- a/src/views/paper/question/index.vue
+++ b/src/views/paper/question/index.vue
@@ -316,7 +316,7 @@
   <FdesignForm ref="fformRef" @success="getList" />
   <WpsWordForm ref="wformRef" @success="getList" />
   <WpsPptxForm ref="pformRef" @success="getList" />
-  <SettingForm ref="setformRef" @success="getList" />
+  <SettingForm ref="setformRef" @success="getList"/>
   <EmailForm ref="emailformRef" @success="getList" />
   <WpsExcelForm ref="xlsxformRef" @success="getList" />
   <PsForm ref="psformRef" @success="getList" />
@@ -347,6 +347,8 @@ import DeptTree from './DeptTree.vue'
 import SpecialtyTree from './SpecialtyTree.vue'
 import { handleTree } from '@/utils/tree'
 import * as SpecialtyApi from '@/api/points'
+import { useSettingStore } from '@/store/modules/settings'
+const settingStore = useSettingStore()
 defineOptions({ name: 'SystemUser' })
 
 const message = useMessage() // 消息弹窗
@@ -403,6 +405,7 @@ const getList = async () => {
   } finally {
     loading.value = false
   }
+  settingStore.clearSettingData() // 清除设置数据
 }
 /** 用户导入 */
 const handleImport = () => {