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> |
|||
<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"> |
|||
{{ settingStore.isSame }}--{{ settingStore.diffKeys }} |
|||
<input v-model="settingStore.config['update.repo']" type="text" /> |
|||
{{ settingStore.config["update.repo"] }} |
|||
<button v-if="!settingStore.isSame" :disabled="settingStore.isSaving" @click="settingStore.save()">保存</button> |
|||
<div class="form"> |
|||
<div class="form-item" :class="{ ['not-save']: settingStore.diffKeys.includes('storagePath') }"> |
|||
<div class="form-item__label">存储地址</div> |
|||
<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> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { useSettingStore } from "common/event/Setting/hook" |
|||
|
|||
const settingStore = useSettingStore() |
|||
console.log(settingStore.config) |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.form { |
|||
padding: 20px; |
|||
.form-item { |
|||
display: flex; |
|||
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