15 changed files with 314 additions and 112 deletions
@ -0,0 +1,5 @@ |
|||||
|
@use "bulma/sass/base"; |
||||
|
@use "bulma/sass/themes"; |
||||
|
|
||||
|
@use "bulma/sass/elements/button"; |
||||
|
@use "bulma/sass/form/input-textarea"; |
||||
@ -1,18 +1,126 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import Simplebar from "simplebar-vue" |
||||
|
import { useSettingStore } from "common/event/Setting/hook" |
||||
|
|
||||
|
const settingStore = useSettingStore() |
||||
|
console.log(settingStore.config) |
||||
|
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<div h-full flex> |
<div h-full flex> |
||||
<div w="200px" border-r="#E5E5E5 solid 1px">左侧菜单</div> |
<Simplebar w="100px" border-r="#E5E5E5 solid 1px"> |
||||
|
<div py-2 hover:bg-gray-100 cursor-pointer text-center text-sm>基础设置</div> |
||||
|
<div py-2 hover:bg-gray-100 cursor-pointer text-center text-sm>更新设置</div> |
||||
|
</Simplebar> |
||||
<div flex="1" w="0"> |
<div flex="1" w="0"> |
||||
{{ settingStore.isSame }}--{{ settingStore.diffKeys }} |
<div class="form"> |
||||
<input v-model="settingStore.config['update.repo']" type="text" /> |
<div class="form-item" :class="{ ['not-save']: settingStore.diffKeys.includes('storagePath') }"> |
||||
{{ settingStore.config["update.repo"] }} |
<div class="form-item__label">存储地址</div> |
||||
<button v-if="!settingStore.isSame" :disabled="settingStore.isSaving" @click="settingStore.save()">保存</button> |
<div class="form-item__value"> |
||||
|
<div class="input-wrapper"> |
||||
|
<input v-model="settingStore.config['storagePath']" class="input" readonly type="text" placeholder="请输入存储地址" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-item" :class="{ ['not-save']: settingStore.diffKeys.includes('common.theme') }"> |
||||
|
<div class="form-item__label">主题</div> |
||||
|
<div class="form-item__value"> |
||||
|
<div class="radio-group"> |
||||
|
<div |
||||
|
class="radio" |
||||
|
:class="{ active: settingStore.config['common.theme'] === 'auto' }" |
||||
|
@click="settingStore.config['common.theme'] = 'auto'" |
||||
|
> |
||||
|
Auto |
||||
|
</div> |
||||
|
<div |
||||
|
class="radio" |
||||
|
:class="{ active: settingStore.config['common.theme'] === 'light' }" |
||||
|
@click="settingStore.config['common.theme'] = 'light'" |
||||
|
> |
||||
|
亮色 |
||||
|
</div> |
||||
|
<div |
||||
|
class="radio" |
||||
|
:class="{ active: settingStore.config['common.theme'] === 'dark' }" |
||||
|
@click="settingStore.config['common.theme'] = 'dark'" |
||||
|
> |
||||
|
暗色 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="!settingStore.isSame" text-center> |
||||
|
<button class="submit" :disabled="settingStore.isSaving" @click="settingStore.save()">保存</button> |
||||
|
<button :disabled="settingStore.isSaving" @click="settingStore.reset()">重置</button> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts"> |
<style lang="scss" scoped> |
||||
import { useSettingStore } from "common/event/Setting/hook" |
.form { |
||||
|
padding: 20px; |
||||
const settingStore = useSettingStore() |
.form-item { |
||||
console.log(settingStore.config) |
display: flex; |
||||
</script> |
align-items: center; |
||||
|
+ .form-item { |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
.form-item__label { |
||||
|
width: 100px; |
||||
|
font-weight: bold; |
||||
|
flex-basis: 100px; |
||||
|
} |
||||
|
.form-item__value { |
||||
|
width: 300px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.submit { |
||||
|
margin: 20px; |
||||
|
padding: 10px 20px; |
||||
|
background-color: #007bff; |
||||
|
color: white; |
||||
|
border: none; |
||||
|
border-radius: 5px; |
||||
|
cursor: pointer; |
||||
|
&:disabled { |
||||
|
background-color: #ccc; |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
} |
||||
|
// .input-wrapper { |
||||
|
// .input { |
||||
|
// width: 100%; |
||||
|
// padding: 8px; |
||||
|
// border: 1px solid #ccc; |
||||
|
// border-radius: 4px; |
||||
|
// } |
||||
|
// } |
||||
|
.radio-group { |
||||
|
display: inline-flex; |
||||
|
border: 1px solid #ccc; |
||||
|
border-radius: 5px; |
||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
||||
|
.radio { |
||||
|
flex: 1; |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 10px; |
||||
|
&:hover { |
||||
|
background-color: #f0f0f0; |
||||
|
} |
||||
|
&.active { |
||||
|
background-color: #e0e0e0; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
+ .radio { |
||||
|
border-left: 1px solid #ccc; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|||||
@ -0,0 +1,78 @@ |
|||||
|
<template> |
||||
|
<div |
||||
|
v-if="UpdaterStore.isNeedUpdate" |
||||
|
text-sm |
||||
|
px-2 |
||||
|
py-1 |
||||
|
flex |
||||
|
items-center |
||||
|
hover:bg-gray-2 |
||||
|
hover:cursor-pointer |
||||
|
text="hover:hover" |
||||
|
@click="UpdaterStore.checkForUpdates" |
||||
|
> |
||||
|
<icon-grommet-icons:update |
||||
|
v-if=" |
||||
|
UpdaterStore.status === UpdaterStatus.StartChecking || |
||||
|
UpdaterStore.status === UpdaterStatus.Checking || |
||||
|
UpdaterStore.status === UpdaterStatus.UpdateAvailable |
||||
|
" |
||||
|
:class="{ rotate: UpdaterStore.status === UpdaterStatus.Checking }" |
||||
|
></icon-grommet-icons:update> |
||||
|
<icon-bxs:error v-if="UpdaterStore.status === UpdaterStatus.Error" title="更新失败" class="text-red-400"></icon-bxs:error> |
||||
|
</div> |
||||
|
<div |
||||
|
v-if="UpdaterStore.status === UpdaterStatus.Downloading" |
||||
|
class="progress" |
||||
|
style="font-size: 12px" |
||||
|
px-2 |
||||
|
flex |
||||
|
items-center |
||||
|
bg-gray-2 |
||||
|
hover:cursor-pointer |
||||
|
text="hover:hover" |
||||
|
> |
||||
|
<div class="line" :style="{ width: UpdaterStore.percent + '%' }"></div> |
||||
|
<div class="speed">{{ UpdaterStore.speed }} KB/s</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { UpdaterStatus, useUpdaterStore } from "common/event/Updater/hook" |
||||
|
|
||||
|
const UpdaterStore = useUpdaterStore() |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.rotate { |
||||
|
animation: rotate 1.5s linear infinite forwards running; |
||||
|
} |
||||
|
|
||||
|
@keyframes rotate { |
||||
|
from { |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
to { |
||||
|
transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
.progress { |
||||
|
background-color: rgba(229, 231, 235, 100); |
||||
|
position: relative; |
||||
|
.speed { |
||||
|
position: relative; |
||||
|
z-index: 3; |
||||
|
color: red; |
||||
|
} |
||||
|
.line { |
||||
|
content: ""; |
||||
|
z-index: 2; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
width: 0; |
||||
|
background-color: rgb(239, 156, 156); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue