添加前端
This commit is contained in:
橙子
303
Yi.Vue2.x/src/layouts/default/Settings.vue
Normal file
303
Yi.Vue2.x/src/layouts/default/Settings.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div id="settings-wrapper">
|
||||
<v-card
|
||||
id="settings"
|
||||
class="py-2 px-4"
|
||||
color="rgba(0, 0, 0, .3)"
|
||||
dark
|
||||
flat
|
||||
link
|
||||
min-width="100"
|
||||
style="
|
||||
position: fixed;
|
||||
top: 115px;
|
||||
right: -35px;
|
||||
border-radius: 8px;
|
||||
z-index: 1;
|
||||
"
|
||||
>
|
||||
<v-icon large> mdi-cog </v-icon>
|
||||
</v-card>
|
||||
|
||||
<v-menu
|
||||
v-model="menu"
|
||||
:close-on-content-click="false"
|
||||
activator="#settings"
|
||||
bottom
|
||||
content-class="v-settings"
|
||||
left
|
||||
nudge-left="8"
|
||||
offset-x
|
||||
origin="top right"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<v-card class="text-center mb-0" width="300">
|
||||
<v-card-text>
|
||||
<strong class="mb-3 d-inline-block">主题颜色</strong>
|
||||
|
||||
<v-item-group v-model="color" mandatory>
|
||||
<v-item v-for="color in colors" :key="color" :value="color">
|
||||
<template v-slot="{ active, toggle }">
|
||||
<v-avatar
|
||||
:class="active && 'v-settings__item--active'"
|
||||
:color="color"
|
||||
class="v-settings__item mx-1"
|
||||
size="25"
|
||||
@click="toggle"
|
||||
/>
|
||||
</template>
|
||||
</v-item>
|
||||
</v-item-group>
|
||||
|
||||
<v-divider class="my-4 secondary" />
|
||||
|
||||
<strong class="mb-3 d-inline-block">图层颜色</strong>
|
||||
|
||||
<v-item-group v-model="gradient" mandatory>
|
||||
<v-item
|
||||
v-for="(scrim, index) in gradients"
|
||||
:key="scrim"
|
||||
:value="index"
|
||||
class="mx-1"
|
||||
>
|
||||
<template v-slot="{ active, toggle }">
|
||||
<v-avatar
|
||||
:class="active && 'v-settings__item--active'"
|
||||
:color="scrim"
|
||||
class="v-settings__item"
|
||||
size="24"
|
||||
@click="toggle"
|
||||
/>
|
||||
</template>
|
||||
</v-item>
|
||||
</v-item-group>
|
||||
|
||||
<v-divider class="my-4 secondary" />
|
||||
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col cols="auto"> 主题模式 </v-col>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-col cols="auto">
|
||||
<v-switch
|
||||
v-model="$vuetify.theme.dark"
|
||||
class="ma-0 pa-0"
|
||||
color="secondary"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider class="my-4 secondary" />
|
||||
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col cols="auto"> 迷你菜单 </v-col>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-col cols="auto">
|
||||
<v-switch
|
||||
v-model="$store.state.home.mini"
|
||||
class="ma-0 pa-0"
|
||||
color="secondary"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider class="my-4 secondary" />
|
||||
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col cols="auto"> 图片菜单 </v-col>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-col cols="auto">
|
||||
<v-switch
|
||||
v-model="drawerImage"
|
||||
class="ma-0 pa-0"
|
||||
color="secondary"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider class="my-4 secondary" />
|
||||
|
||||
<strong class="mb-3 d-inline-block">图片</strong>
|
||||
|
||||
<v-card :disabled="!drawerImage" flat>
|
||||
<v-item-group
|
||||
v-model="image"
|
||||
class="d-flex justify-space-between mb-3"
|
||||
>
|
||||
<v-item
|
||||
v-for="(img, index) in images"
|
||||
:key="img"
|
||||
:value="index"
|
||||
class="mx-1"
|
||||
>
|
||||
<template v-slot="{ active, toggle }">
|
||||
<v-sheet
|
||||
:class="active && 'v-settings__item--active'"
|
||||
class="d-inline-block v-settings__item"
|
||||
@click="toggle"
|
||||
>
|
||||
<v-img :src="img" height="100" width="50" />
|
||||
</v-sheet>
|
||||
</template>
|
||||
</v-item>
|
||||
</v-item-group>
|
||||
</v-card>
|
||||
|
||||
<v-btn
|
||||
block
|
||||
class="mb-3"
|
||||
color="grey darken-1"
|
||||
dark
|
||||
href="https://github.com/ccnetcore/yi"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
Github 地址
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
block
|
||||
color="info"
|
||||
href="https://ccnetcore.com"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
加入我们
|
||||
</v-btn>
|
||||
|
||||
<div class="my-12" />
|
||||
|
||||
<div>
|
||||
<strong class="mb-3 d-inline-block">感谢你的支持！</strong>
|
||||
</div>
|
||||
|
||||
<v-btn class="ma-1" color="#55acee" dark rounded>
|
||||
<v-icon>mdi-twitter</v-icon>
|
||||
- 45
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="ma-1" color="#3b5998" dark default rounded>
|
||||
<v-icon>mdi-facebook</v-icon>
|
||||
- 50
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Mixins
|
||||
import Proxyable from "vuetify/lib/mixins/proxyable";
|
||||
|
||||
// Vuex
|
||||
// import { get, sync } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
name: "DashboardCoreSettings",
|
||||
|
||||
mixins: [Proxyable],
|
||||
computed: {
|
||||
|
||||
|
||||
gradients(){
|
||||
return this.$store.state.user.gradients},
|
||||
image:{
|
||||
get(){
|
||||
return this.$store.state.user.drawer.image;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('SetImage',value)
|
||||
}
|
||||
},
|
||||
gradient:{
|
||||
get(){
|
||||
return this.$store.state.user.drawer.gradient;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('SetGradient',value)
|
||||
}
|
||||
},
|
||||
images()
|
||||
{
|
||||
return this.$store.state.user.images;
|
||||
},
|
||||
drawerImage:
|
||||
{
|
||||
get(){
|
||||
return this.$store.state.home.drawerImage;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('SetDrawerImage',value)
|
||||
},
|
||||
|
||||
|
||||
|
||||
},
|
||||
dark()
|
||||
{
|
||||
return this.$store.state.user.dark;
|
||||
},
|
||||
drawer()
|
||||
{
|
||||
return this.$store.state.home.drawer;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
data: () => ({
|
||||
color: "#E91E63",
|
||||
colors: ["#9C27b0", "#00CAE3", "#4CAF50", "#ff9800", "#E91E63", "#FF5252"],
|
||||
menu: false,
|
||||
saveImage: "",
|
||||
}),
|
||||
|
||||
// computed: {
|
||||
// ...sync('app', [
|
||||
// 'drawer',
|
||||
// 'drawerImage',
|
||||
// 'mini',
|
||||
// ]),
|
||||
// ...sync('user', [
|
||||
// 'drawer@gradient',
|
||||
// 'drawer@image',
|
||||
// ]),
|
||||
// ...get('user', [
|
||||
// 'images',
|
||||
// 'gradients',
|
||||
// ]),
|
||||
// },
|
||||
|
||||
watch: {
|
||||
color(val) {
|
||||
|
||||
this.$vuetify.theme.themes[this.isDark ? "dark" : "light"].primary = val;
|
||||
this.$vuetify.theme.dark=true;
|
||||
this.$vuetify.theme.dark=false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-settings
|
||||
.v-item-group > *
|
||||
cursor: pointer
|
||||
|
||||
&__item
|
||||
border-width: 3px
|
||||
border-style: solid
|
||||
border-color: transparent !important
|
||||
|
||||
&--active
|
||||
border-color: #00cae3 !important
|
||||
</style>
|
||||
Reference in New Issue
Block a user