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