文件夹改名
Former-commit-id: 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 1e795e1614aaf94f23ad99354f6ca9be303a1b1e [formerly 9ce21aef6b043d8bfcb2849dd7c6bc34e4625387]]]]] Former-commit-id: c92d7410adc4138c7903c0067860fc3d190f54b0 Former-commit-id: 9f0ab819a505e341a6edf210efb107df8b8efe33 Former-commit-id: 3006c0d2ccda4133203372c30ffee34a73fa8944 [formerly f340ca4127e4578b3c53747d13bbaba223ed4e83] Former-commit-id: 9624c2aaa99880b5e37f1e60f1f36ac673e021ed Former-commit-id: 7923489f2c3c637782d9d4a1707bc48dfe3b1acf Former-commit-id: 2375e080a7f715bc48da40d4c56235efad3f0d5d Former-commit-id: c41402e6c0266a07e974efad41feed7c6fb7d0b6 Former-commit-id: b8814b31619151361c91ed37cb1ee7f3813853c1
This commit is contained in:
liyang
36
src/views/demo/playground/db/all/index.vue
Normal file
36
src/views/demo/playground/db/all/index.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="这个页面展示的是全部数据的存储结构，包括系统区域和存储区域，涵盖所有用户，也就是整个 D2Admin 的数据存储结构"/>
|
||||
</template>
|
||||
<d2-highlight :code="dbData"/>
|
||||
<template slot="footer">
|
||||
<el-button type="primary" @click="load">
|
||||
重新获取本地数据
|
||||
</el-button>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import util from '@/libs/util'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
dbData: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load () {
|
||||
this.dbData = JSON.stringify(util.db.value(), null, 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
128
src/views/demo/playground/db/page-public/index.vue
Normal file
128
src/views/demo/playground/db/page-public/index.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="路由存储指当前路由的存储区域，
|
||||
不同路由之间存储不会相互干扰，
|
||||
使用 await this.$store.dispatch('d2admin/db/databasePage') 获得存储实例进行操作，
|
||||
不同路由条件下获取的存储实例指向位置不同，
|
||||
可以指定路由区分依据 name | path | fullPath，
|
||||
默认根据路由的 name 区分不同的路由"/>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">增加不重复字段</p>
|
||||
<el-button @click="handleSetRandom">增加</el-button>
|
||||
<p>增加自定义字段</p>
|
||||
<el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-button @click="handleSet">增加</el-button>
|
||||
<p>删除字段</p>
|
||||
<el-select
|
||||
v-model="keyNameToDelete"
|
||||
placeholder="请选择要删除的 key">
|
||||
<el-option
|
||||
v-for="item in keyNameList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p>清空当前用户数据</p>
|
||||
<el-button @click="handleClear">清空</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<d2-highlight :code="dataDisplay"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uniqueId } from 'lodash'
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
dataDisplay: '',
|
||||
keyNameToSet: '',
|
||||
valueToSet: '',
|
||||
keyNameList: [],
|
||||
keyNameToDelete: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keyNameToDelete (value) {
|
||||
if (value) {
|
||||
this.handleDelete(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'databasePage',
|
||||
'databasePageClear'
|
||||
]),
|
||||
/**
|
||||
* 加载本地数据
|
||||
*/
|
||||
async load () {
|
||||
const db = await this.databasePage()
|
||||
this.dataDisplay = JSON.stringify(db.value(), null, 2)
|
||||
this.keyNameList = Object.keys(db.value()).map(k => ({
|
||||
value: k,
|
||||
label: k
|
||||
}))
|
||||
},
|
||||
/**
|
||||
* 删除一个字段
|
||||
*/
|
||||
async handleDelete (name) {
|
||||
const db = await this.databasePage()
|
||||
db
|
||||
.unset(name)
|
||||
.write()
|
||||
this.load()
|
||||
this.keyNameToDelete = ''
|
||||
},
|
||||
/**
|
||||
* 清空当前用户的数据
|
||||
*/
|
||||
async handleClear () {
|
||||
await this.databasePageClear()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个数据
|
||||
*/
|
||||
async handleSet () {
|
||||
if (this.keyNameToSet === '') {
|
||||
this.$message.error('字段名不能为空')
|
||||
return
|
||||
}
|
||||
const db = await this.databasePage()
|
||||
db
|
||||
.set(this.keyNameToSet, this.valueToSet)
|
||||
.write()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个随机数据
|
||||
*/
|
||||
async handleSetRandom () {
|
||||
const id = uniqueId()
|
||||
const db = await this.databasePage()
|
||||
db
|
||||
.set(`uniqueKey${id}`, `value${id}`)
|
||||
.write()
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
115
src/views/demo/playground/db/page-snapshot-public/index.vue
Normal file
115
src/views/demo/playground/db/page-snapshot-public/index.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="路由快照相当于路由存储一种快捷操作，
|
||||
会将传入的 vue instance 携带的 $data 全部持久化，
|
||||
下面的表单来自 Element 的表单示例，
|
||||
在 D2Admin 的本页示例中你可以随意填写这个表单，
|
||||
表单内容会自动实时持久化，
|
||||
无论是切换标签页、重新打开标签页、刷新浏览器、重开浏览器、重开浏览器标签页等，
|
||||
该页面数据都会自动恢复到上次填写的状态，
|
||||
这些都只需要你使用 D2Admin 提供的两个方法，
|
||||
总共只需要多写十几行代码"/>
|
||||
</template>
|
||||
<el-form ref="form" :model="form" label-width="80px" style="max-width: 600px; margin: 0px auto;">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col :span="2" style="text-align: center;">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送">
|
||||
<el-switch v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="线上品牌商赞助"></el-radio>
|
||||
<el-radio label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button
|
||||
slot="footer"
|
||||
type="danger"
|
||||
@click="handleClear">
|
||||
<d2-icon name="trash-o"/>
|
||||
删除当前页面快照
|
||||
</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
const data = await this.pageGet({ instance: this })
|
||||
for (const key in data) {
|
||||
if (data.hasOwnProperty(key)) this[key] = data[key]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$data: {
|
||||
handler () {
|
||||
this.pageSet({ instance: this })
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'pageSet',
|
||||
'pageGet',
|
||||
'pageClear'
|
||||
]),
|
||||
async handleClear () {
|
||||
await this.pageClear({ instance: this })
|
||||
this.$message.success('此页面快照已经删除，请重新进入该页面或者关闭选项卡重新打开')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
115
src/views/demo/playground/db/page-snapshot-user/index.vue
Normal file
115
src/views/demo/playground/db/page-snapshot-user/index.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="私有路由快照相当于私有路由存储一种快捷操作，
|
||||
会将传入的 vue instance 携带的 $data 全部根据用户区分持久化，
|
||||
下面的表单来自 Element 的表单示例，
|
||||
在 D2Admin 的本页示例中你可以随意填写这个表单，
|
||||
表单内容会自动实时持久化，
|
||||
无论是切换标签页、重新打开标签页、刷新浏览器、重开浏览器、重开浏览器标签页等，
|
||||
该页面数据都会自动恢复到上次填写的状态，
|
||||
这些都只需要你使用 D2Admin 提供的两个方法，
|
||||
总共只需要多写十几行代码"/>
|
||||
</template>
|
||||
<el-form ref="form" :model="form" label-width="80px" style="max-width: 600px; margin: 0px auto;">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col :span="2" style="text-align: center;">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送">
|
||||
<el-switch v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="线上品牌商赞助"></el-radio>
|
||||
<el-radio label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button
|
||||
slot="footer"
|
||||
type="danger"
|
||||
@click="handleClear">
|
||||
<d2-icon name="trash-o"/>
|
||||
删除当前页面快照
|
||||
</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
const data = await this.pageGet({ instance: this, user: true })
|
||||
for (const key in data) {
|
||||
if (data.hasOwnProperty(key)) this[key] = data[key]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$data: {
|
||||
handler () {
|
||||
this.pageSet({ instance: this, user: true })
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'pageSet',
|
||||
'pageGet',
|
||||
'pageClear'
|
||||
]),
|
||||
async handleClear () {
|
||||
await this.pageClear({ instance: this, user: true })
|
||||
this.$message.success('此页面快照已经删除，请重新进入该页面或者关闭选项卡重新打开')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
140
src/views/demo/playground/db/page-user/index.vue
Normal file
140
src/views/demo/playground/db/page-user/index.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="私有路由存储指当前路由的存储区域，
|
||||
并且同时还根据用户区分，
|
||||
相当于结合了 “路由存储” 和 “私有存储”，
|
||||
不同路由以及不同用户之间存储不会相互干扰，
|
||||
使用 await this.$store.dispatch('d2admin/db/databasePage', { user: true }) 获得存储实例进行操作，
|
||||
不同路由和用户条件下获取的存储实例指向位置不同，
|
||||
可以指定路由区分依据 name | path | fullPath，
|
||||
默认根据路由的 name 区分不同的路由"/>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">增加不重复字段</p>
|
||||
<el-button @click="handleSetRandom">增加</el-button>
|
||||
<p>增加自定义字段</p>
|
||||
<el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-button @click="handleSet">增加</el-button>
|
||||
<p>删除字段</p>
|
||||
<el-select
|
||||
v-model="keyNameToDelete"
|
||||
placeholder="请选择要删除的 key">
|
||||
<el-option
|
||||
v-for="item in keyNameList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p>清空当前用户数据</p>
|
||||
<el-button @click="handleClear">清空</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<d2-highlight :code="dataDisplay"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uniqueId } from 'lodash'
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
dataDisplay: '',
|
||||
keyNameToSet: '',
|
||||
valueToSet: '',
|
||||
keyNameList: [],
|
||||
keyNameToDelete: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keyNameToDelete (value) {
|
||||
if (value) {
|
||||
this.handleDelete(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'databasePage',
|
||||
'databasePageClear'
|
||||
]),
|
||||
/**
|
||||
* 加载本地数据
|
||||
*/
|
||||
async load () {
|
||||
const db = await this.databasePage({
|
||||
user: true
|
||||
})
|
||||
this.dataDisplay = JSON.stringify(db.value(), null, 2)
|
||||
this.keyNameList = Object.keys(db.value()).map(k => ({
|
||||
value: k,
|
||||
label: k
|
||||
}))
|
||||
},
|
||||
/**
|
||||
* 删除一个字段
|
||||
*/
|
||||
async handleDelete (name) {
|
||||
const db = await this.databasePage({
|
||||
user: true
|
||||
})
|
||||
db
|
||||
.unset(name)
|
||||
.write()
|
||||
this.load()
|
||||
this.keyNameToDelete = ''
|
||||
},
|
||||
/**
|
||||
* 清空当前用户的数据
|
||||
*/
|
||||
async handleClear () {
|
||||
await this.databasePageClear({
|
||||
user: true
|
||||
})
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个数据
|
||||
*/
|
||||
async handleSet () {
|
||||
if (this.keyNameToSet === '') {
|
||||
this.$message.error('字段名不能为空')
|
||||
return
|
||||
}
|
||||
const db = await this.databasePage({
|
||||
user: true
|
||||
})
|
||||
db
|
||||
.set(this.keyNameToSet, this.valueToSet)
|
||||
.write()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个随机数据
|
||||
*/
|
||||
async handleSetRandom () {
|
||||
const id = uniqueId()
|
||||
const db = await this.databasePage({
|
||||
user: true
|
||||
})
|
||||
db
|
||||
.set(`uniqueKey${id}`, `value${id}`)
|
||||
.write()
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
124
src/views/demo/playground/db/public/index.vue
Normal file
124
src/views/demo/playground/db/public/index.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="公用存储指所有用户共用的存储区域，
|
||||
使用 await this.$store.dispatch('d2admin/db/database') 获得存储实例进行操作"/>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">增加不重复字段</p>
|
||||
<el-button @click="handleSetRandom">增加</el-button>
|
||||
<p>增加自定义字段</p>
|
||||
<el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-button @click="handleSet">增加</el-button>
|
||||
<p>删除字段</p>
|
||||
<el-select
|
||||
v-model="keyNameToDelete"
|
||||
placeholder="请选择要删除的 key">
|
||||
<el-option
|
||||
v-for="item in keyNameList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p>清空当前用户数据</p>
|
||||
<el-button @click="handleClear">清空</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<d2-highlight :code="dataDisplay"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uniqueId } from 'lodash'
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
dataDisplay: '',
|
||||
keyNameToSet: '',
|
||||
valueToSet: '',
|
||||
keyNameList: [],
|
||||
keyNameToDelete: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keyNameToDelete (value) {
|
||||
if (value) {
|
||||
this.handleDelete(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'database',
|
||||
'databaseClear'
|
||||
]),
|
||||
/**
|
||||
* 加载本地数据
|
||||
*/
|
||||
async load () {
|
||||
const db = await this.database()
|
||||
this.dataDisplay = JSON.stringify(db.value(), null, 2)
|
||||
this.keyNameList = Object.keys(db.value()).map(k => ({
|
||||
value: k,
|
||||
label: k
|
||||
}))
|
||||
},
|
||||
/**
|
||||
* 删除一个字段
|
||||
*/
|
||||
async handleDelete (name) {
|
||||
const db = await this.database()
|
||||
db
|
||||
.unset(name)
|
||||
.write()
|
||||
this.load()
|
||||
this.keyNameToDelete = ''
|
||||
},
|
||||
/**
|
||||
* 清空当前用户的数据
|
||||
*/
|
||||
async handleClear () {
|
||||
await this.databaseClear()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个数据
|
||||
*/
|
||||
async handleSet () {
|
||||
if (this.keyNameToSet === '') {
|
||||
this.$message.error('字段名不能为空')
|
||||
return
|
||||
}
|
||||
const db = await this.database()
|
||||
db
|
||||
.set(this.keyNameToSet, this.valueToSet)
|
||||
.write()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个随机数据
|
||||
*/
|
||||
async handleSetRandom () {
|
||||
const id = uniqueId()
|
||||
const db = await this.database()
|
||||
db
|
||||
.set(`uniqueKey${id}`, `value${id}`)
|
||||
.write()
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
126
src/views/demo/playground/db/user/index.vue
Normal file
126
src/views/demo/playground/db/user/index.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="私有存储指当前用户专用的存储区域，
|
||||
不同用户之间存储不会相互干扰，
|
||||
使用 await this.$store.dispatch('d2admin/db/database', { user: true }) 获得存储实例进行操作，
|
||||
不同用户条件下获取的存储实例指向位置不同"/>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">增加不重复字段</p>
|
||||
<el-button @click="handleSetRandom">增加</el-button>
|
||||
<p>增加自定义字段</p>
|
||||
<el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-button @click="handleSet">增加</el-button>
|
||||
<p>删除字段</p>
|
||||
<el-select
|
||||
v-model="keyNameToDelete"
|
||||
placeholder="请选择要删除的 key">
|
||||
<el-option
|
||||
v-for="item in keyNameList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p>清空当前用户数据</p>
|
||||
<el-button @click="handleClear">清空</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<d2-highlight :code="dataDisplay"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uniqueId } from 'lodash'
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
dataDisplay: '',
|
||||
keyNameToSet: '',
|
||||
valueToSet: '',
|
||||
keyNameList: [],
|
||||
keyNameToDelete: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keyNameToDelete (value) {
|
||||
if (value) {
|
||||
this.handleDelete(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'database',
|
||||
'databaseClear'
|
||||
]),
|
||||
/**
|
||||
* 加载本地数据
|
||||
*/
|
||||
async load () {
|
||||
const db = await this.database({ user: true })
|
||||
this.dataDisplay = JSON.stringify(db.value(), null, 2)
|
||||
this.keyNameList = Object.keys(db.value()).map(k => ({
|
||||
value: k,
|
||||
label: k
|
||||
}))
|
||||
},
|
||||
/**
|
||||
* 删除一个字段
|
||||
*/
|
||||
async handleDelete (name) {
|
||||
const db = await this.database({ user: true })
|
||||
db
|
||||
.unset(name)
|
||||
.write()
|
||||
this.load()
|
||||
this.keyNameToDelete = ''
|
||||
},
|
||||
/**
|
||||
* 清空当前用户的数据
|
||||
*/
|
||||
async handleClear () {
|
||||
await this.databaseClear({ user: true })
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个数据
|
||||
*/
|
||||
async handleSet () {
|
||||
if (this.keyNameToSet === '') {
|
||||
this.$message.error('字段名不能为空')
|
||||
return
|
||||
}
|
||||
const db = await this.database({ user: true })
|
||||
db
|
||||
.set(this.keyNameToSet, this.valueToSet)
|
||||
.write()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个随机数据
|
||||
*/
|
||||
async handleSetRandom () {
|
||||
const id = uniqueId()
|
||||
const db = await this.database({ user: true })
|
||||
db
|
||||
.set(`uniqueKey${id}`, `value${id}`)
|
||||
.write()
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
17
src/views/demo/playground/env/index.vue
vendored
Normal file
17
src/views/demo/playground/env/index.vue
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<template slot="header">process.env</template>
|
||||
<d2-highlight :code="env"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
env: JSON.stringify(process.env, null, 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
22
src/views/demo/playground/index/index.vue
Normal file
22
src/views/demo/playground/index/index.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="ghost">
|
||||
<d2-module-index-banner slot="header" v-bind="banner"/>
|
||||
<d2-module-index-menu :menu="menu"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menu from '@/menu/modules/demo-playground'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
menu,
|
||||
banner: {
|
||||
title: 'PLAYGROUND',
|
||||
subTitle: '在这里可以测试一些 D2Admin 的系统功能'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1 @@
|
||||
35a5c716cffd640daf38b058ac428e434cd440bc
|
||||
72
src/views/demo/playground/log/console/index.vue
Normal file
72
src/views/demo/playground/log/console/index.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" class="page">
|
||||
<p class="d2-mt-0">$log.capsule</p>
|
||||
<el-button size="small" type="primary" @click="$log.capsule('title', 'primary')">
|
||||
$log.capsule('title', 'primary')
|
||||
</el-button>
|
||||
<el-button size="small" type="success" @click="$log.capsule('title', 'success', 'success')">
|
||||
$log.capsule('title', 'success', 'success')
|
||||
</el-button>
|
||||
<el-button size="small" type="warning" @click="$log.capsule('title', 'warning', 'warning')">
|
||||
$log.capsule('title', 'warning', 'warning')
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click="$log.capsule('title', 'danger', 'danger')">
|
||||
$log.capsule('title', 'danger', 'danger')
|
||||
</el-button>
|
||||
<p>$log.colorful</p>
|
||||
<el-button size="small" @click="handleColorful">
|
||||
colorful
|
||||
</el-button>
|
||||
<p>$log.default | primary | success | warning | danger</p>
|
||||
<el-button size="small" @click="$log.default('default style')">
|
||||
$log.default('default style')
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="$log.primary('primary style')">
|
||||
$log.primary('primary style')
|
||||
</el-button>
|
||||
<el-button size="small" type="success" @click="$log.success('success style')">
|
||||
$log.success('success style')
|
||||
</el-button>
|
||||
<el-button size="small" type="warning" @click="$log.warning('warning style')">
|
||||
$log.warning('warning style')
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click="$log.danger('danger style')">
|
||||
$log.danger('danger style')
|
||||
</el-button>
|
||||
<p>效果 ( Chrome )</p>
|
||||
<img
|
||||
class="page__image-demo"
|
||||
src="./image/demo.png">
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleColorful () {
|
||||
this.$log.colorful([
|
||||
{ text: 'H', type: 'default' },
|
||||
{ text: 'e', type: 'primary' },
|
||||
{ text: 'l', type: 'success' },
|
||||
{ text: 'l', type: 'warning' },
|
||||
{ text: 'o', type: 'danger' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
.page__image-demo {
|
||||
border-radius: 4px;
|
||||
width: 260px;
|
||||
border: 1px solid $color-border-1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
src/views/demo/playground/log/error/index.vue
Normal file
22
src/views/demo/playground/log/error/index.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">捕获错误信息</template>
|
||||
<p class="d2-mt-0">请打开浏览器控制台，然后点击下面的按钮</p>
|
||||
<el-button type="danger" @click="handleNewError">触发一个错误</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleNewError () {
|
||||
console.log(a) // eslint-disable-line
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
28
src/views/demo/playground/log/log/index.vue
Normal file
28
src/views/demo/playground/log/log/index.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">记录日志内容</template>
|
||||
<p class="d2-mt-0">在下方输入你要记录的日志，然后点击记录按钮</p>
|
||||
<el-input
|
||||
v-model="text"
|
||||
placeholder="日志内容"
|
||||
class="d2-mr-10"
|
||||
style="width: 200px;"/>
|
||||
<el-button type="primary" @click="handleAdd">记录</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
text: 'D2Admin log info'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAdd () {
|
||||
this.$logAdd(this.text)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
21
src/views/demo/playground/page-argu/get.vue
Normal file
21
src/views/demo/playground/page-argu/get.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<h2 class="d2-mt-0">$route.params.username: {{$route.params.username}}</h2>
|
||||
<h2>$route.query.userid: {{$route.query.userid}}</h2>
|
||||
<p>你可以尝试返回发送数据页面修改数据重新发送，或者切换到其它页面后刷新浏览器再返回本业观察参数保留</p>
|
||||
<el-button type="primary" @click="$router.push({ name: 'demo-playground-page-argu-send' })">返回发送数据的页面</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('this.$route', this.$route)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
56
src/views/demo/playground/page-argu/send.vue
Normal file
56
src/views/demo/playground/page-argu/send.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<el-form :model="sendForm" :rules="rules" label-position="top" ref="sendForm">
|
||||
<el-form-item label="username 通过动态路由匹配发送" prop="username">
|
||||
<el-input v-model="sendForm.username" style="width: 300px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="userid 通过参数发送" prop="userid">
|
||||
<el-input v-model="sendForm.userid" style="width: 300px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit('sendForm')">跳转到接收页面</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
sendForm: {
|
||||
username: 'FairyEver',
|
||||
userid: '001'
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: '请输入要发送的用户名', trigger: 'blur' }
|
||||
],
|
||||
userid: [
|
||||
{ required: true, message: '请输入要发送的用户ID', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
this.$router.push({
|
||||
name: 'demo-playground-page-argu-get',
|
||||
params: {
|
||||
username: this.sendForm.username
|
||||
},
|
||||
query: {
|
||||
userid: this.sendForm.userid
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
18
src/views/demo/playground/page-cache/off.vue
Normal file
18
src/views/demo/playground/page-cache/off.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<template slot="header">这个页面不会被 keep-alive</template>
|
||||
<p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字消失，证明没有被缓存</p>
|
||||
<el-input v-model="value" placeholder="input here"></el-input>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
19
src/views/demo/playground/page-cache/on.vue
Normal file
19
src/views/demo/playground/page-cache/on.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<template slot="header">这个页面会被 keep-alive</template>
|
||||
<p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存</p>
|
||||
<el-input v-model="value" placeholder="input here"></el-input>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'demo-playground-page-cache-on',
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
63
src/views/demo/playground/page-cache/params.vue
Normal file
63
src/views/demo/playground/page-cache/params.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<template slot="header">这个页面会被 keep-alive</template>
|
||||
<h2 class="d2-mt-0">编号：{{id}}</h2>
|
||||
<p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存</p>
|
||||
<el-input v-model="data.value" placeholder="input here" />
|
||||
<input v-model="data.value" placeholder="input here" />
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 带参路由多组参数使用同一个组件实例，需要在组件内部对多个参数的情况进行统一处理
|
||||
* 这里简单演示如何根据 id 管理多组数据对象
|
||||
*/
|
||||
export default {
|
||||
name: 'demo-playground-page-cache-params',
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
datas: [],
|
||||
data: { value: '' }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchData (id) {
|
||||
let data = this.datas[id]
|
||||
if (!data) {
|
||||
data = { value: '' }
|
||||
this.datas[id] = data
|
||||
}
|
||||
this.data = data
|
||||
}
|
||||
},
|
||||
// 第一次进入或从其他组件对应路由进入时触发
|
||||
beforeRouteEnter (to, from, next) {
|
||||
console.log('beforeRouteEnter => ', to)
|
||||
const id = to.params.id
|
||||
if (id) {
|
||||
next(instance => instance.switchData(id))
|
||||
} else {
|
||||
next(new Error('未指定ID'))
|
||||
}
|
||||
},
|
||||
// 在同一组件对应的多个路由间切换时触发
|
||||
beforeRouteUpdate (to, from, next) {
|
||||
console.log('beforeRouteUpdate => ', to)
|
||||
const id = to.params.id
|
||||
if (id) {
|
||||
this.switchData(id)
|
||||
next()
|
||||
} else {
|
||||
next(new Error('未指定ID'))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
24
src/views/demo/playground/store/fullscreen/index.vue
Normal file
24
src/views/demo/playground/store/fullscreen/index.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card" class="page-demo-playground-fullscreen">
|
||||
<template slot="header">全屏</template>
|
||||
<el-button type="primary" @click="toggle">
|
||||
toggle 切换全屏
|
||||
</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/fullscreen', [
|
||||
'toggle'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
88
src/views/demo/playground/store/gray/index.vue
Normal file
88
src/views/demo/playground/store/gray/index.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card" class="page">
|
||||
<template slot="header">
|
||||
<div class="colorful">{{grayActive ? 'GRAY' : 'COLORFUL'}}</div>
|
||||
</template>
|
||||
<el-button-group>
|
||||
<el-button @click="grayToggle">切换灰度模式</el-button>
|
||||
<el-button @click="graySet(true)">打开灰度模式</el-button>
|
||||
<el-button @click="graySet(false)">关闭灰度模式</el-button>
|
||||
<el-button @click="dialogVisible = true">模拟报错提示框</el-button>
|
||||
</el-button-group>
|
||||
<el-dialog
|
||||
title="错误"
|
||||
:visible.sync="dialogVisible"
|
||||
:append-to-body="true"
|
||||
width="30%"
|
||||
@open="handleDialogOpen"
|
||||
@closed="handleDialogClosed">
|
||||
<div
|
||||
style="
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
color: #FFF;
|
||||
font-size: 64px;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
background-color: #F56C6C;
|
||||
margin: -20px 0px;
|
||||
">
|
||||
Error
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false" style="width: 100%;">
|
||||
我看到后面的内容已经变为灰度模式
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
dialogVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/gray', {
|
||||
grayActive: 'active'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('d2admin/gray', {
|
||||
grayToggle: 'toggle',
|
||||
graySet: 'set'
|
||||
}),
|
||||
handleDialogOpen () {
|
||||
this.graySet(true)
|
||||
},
|
||||
handleDialogClosed () {
|
||||
this.graySet(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
.colorful {
|
||||
@extend %unable-select;
|
||||
line-height: 300px;
|
||||
font-size: 100px;
|
||||
font-weight: bold;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #333;
|
||||
background-color: #ffff00;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
144
src/views/demo/playground/store/menu/index.vue
Normal file
144
src/views/demo/playground/store/menu/index.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="顶栏菜单">
|
||||
<el-button-group class="d2-mb">
|
||||
<el-button @click="handleHeaderSet">设置顶栏空菜单</el-button>
|
||||
<el-button @click="headerReset">恢复顶栏菜单</el-button>
|
||||
</el-button-group>
|
||||
<d2-highlight :code="JSON.stringify(header, null, 2)"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="侧栏菜单">
|
||||
<el-button-group class="d2-mb">
|
||||
<el-button @click="handleAsideSet">设置侧栏空菜单</el-button>
|
||||
<el-button @click="asideReset">恢复侧栏菜单</el-button>
|
||||
</el-button-group>
|
||||
<d2-highlight :code="JSON.stringify(aside, null, 2)"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
menuEmpty: [
|
||||
{
|
||||
title: '空菜单演示',
|
||||
icon: 'folder-o',
|
||||
children: [
|
||||
{
|
||||
title: '空菜单 1',
|
||||
children: [
|
||||
{ title: '空菜单 1-1' },
|
||||
{ title: '空菜单 1-2' }
|
||||
]
|
||||
},
|
||||
{ title: '空菜单 2' },
|
||||
{ title: '空菜单 3' }
|
||||
]
|
||||
}
|
||||
],
|
||||
headerChanged: false,
|
||||
asideChanged: false,
|
||||
headerBak: [],
|
||||
asideBak: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/menu', [
|
||||
'header',
|
||||
'aside'
|
||||
])
|
||||
},
|
||||
created () {
|
||||
this.headerBak = cloneDeep(this.header)
|
||||
this.asideBak = cloneDeep(this.aside)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.headerChanged && this.asideChanged) {
|
||||
this.headerSet(this.headerBak)
|
||||
this.asideSet(this.asideBak)
|
||||
this.$notify({
|
||||
title: '菜单恢复',
|
||||
message: '对侧边栏和顶栏菜单的修改已经复原',
|
||||
type: 'success'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.headerChanged) {
|
||||
this.headerSet(this.headerBak)
|
||||
this.$notify({
|
||||
title: '菜单恢复',
|
||||
message: '对顶栏菜单的修改已经复原',
|
||||
type: 'success'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.asideChanged) {
|
||||
this.asideSet(this.asideBak)
|
||||
this.$notify({
|
||||
title: '菜单恢复',
|
||||
message: '对侧边栏菜单的修改已经复原',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('d2admin/menu', [
|
||||
'headerSet',
|
||||
'asideSet'
|
||||
]),
|
||||
/**
|
||||
* 修改顶栏菜单
|
||||
*/
|
||||
handleHeaderSet () {
|
||||
this.headerChanged = true
|
||||
this.headerSet(this.menuEmpty)
|
||||
this.$notify({
|
||||
title: '菜单修改',
|
||||
message: '对顶栏菜单的修改已经生效',
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 修改侧边栏菜单
|
||||
*/
|
||||
handleAsideSet () {
|
||||
this.asideChanged = true
|
||||
this.asideSet(this.menuEmpty)
|
||||
this.$notify({
|
||||
title: '菜单修改',
|
||||
message: '对侧边栏菜单的修改已经生效',
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 恢复顶栏菜单
|
||||
*/
|
||||
headerReset () {
|
||||
this.headerSet(this.headerBak)
|
||||
this.$notify({
|
||||
title: '菜单恢复',
|
||||
message: '对顶栏菜单的修改已经复原',
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 恢复侧边栏菜单
|
||||
*/
|
||||
asideReset () {
|
||||
this.asideSet(this.asideBak)
|
||||
this.$notify({
|
||||
title: '菜单恢复',
|
||||
message: '对侧边栏菜单的修改已经复原',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
97
src/views/demo/playground/store/page/index.vue
Normal file
97
src/views/demo/playground/store/page/index.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<!-- 证明有缓存 -->
|
||||
<p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存</p>
|
||||
<el-input v-model="value" placeholder="input here"></el-input>
|
||||
<!-- 页签操作 -->
|
||||
<p>关闭标签页</p>
|
||||
<el-button-group>
|
||||
<el-button @click="handleCloseCurrent">
|
||||
<d2-icon name="times"/> 当前
|
||||
</el-button>
|
||||
<el-button @click="handleCloseLeft">
|
||||
<d2-icon name="arrow-left"/> 左侧
|
||||
</el-button>
|
||||
<el-button @click="handleCloseRight">
|
||||
右侧 <d2-icon name="arrow-right"/>
|
||||
</el-button>
|
||||
<el-button @click="handleCloseOther">
|
||||
其它 <d2-icon name="times"/>
|
||||
</el-button>
|
||||
<el-button @click="closeAll">
|
||||
全部 <d2-icon name="times-circle"/>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<p>刷新</p>
|
||||
<el-button-group>
|
||||
<el-button @click="handleCleanCacheAndRefreshCurrent">
|
||||
<d2-icon name="refresh"/>
|
||||
清空当前页缓存并刷新
|
||||
</el-button>
|
||||
<el-button @click="handleCleanCacheAndRefreshAll">
|
||||
<d2-icon name="refresh"/>
|
||||
清空所有缓存并刷新
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapActions } from 'vuex'
|
||||
export default {
|
||||
name: 'demo-playground-store-page',
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('d2admin/page', [
|
||||
'keepAliveRemove',
|
||||
'keepAliveClean'
|
||||
]),
|
||||
...mapActions('d2admin/page', [
|
||||
'close',
|
||||
'closeLeft',
|
||||
'closeRight',
|
||||
'closeOther',
|
||||
'closeAll'
|
||||
]),
|
||||
// 关闭当前
|
||||
handleCloseCurrent () {
|
||||
this.close({
|
||||
tagName: this.$route.fullPath
|
||||
})
|
||||
},
|
||||
// 关闭左侧
|
||||
handleCloseLeft () {
|
||||
this.closeLeft({
|
||||
tagName: this.$route.fullPath
|
||||
})
|
||||
},
|
||||
// 关闭右侧
|
||||
handleCloseRight () {
|
||||
this.closeRight({
|
||||
tagName: this.$route.fullPath
|
||||
})
|
||||
},
|
||||
// 关闭其他
|
||||
handleCloseOther () {
|
||||
this.closeOther({
|
||||
tagName: this.$route.fullPath
|
||||
})
|
||||
},
|
||||
// 清空当前页缓存并刷新此页面
|
||||
handleCleanCacheAndRefreshCurrent () {
|
||||
this.keepAliveRemove(this.$route.fullPath)
|
||||
this.$nextTick(this.$router.replace('/refresh'))
|
||||
},
|
||||
// 清空所有的缓存并刷新此页面
|
||||
handleCleanCacheAndRefreshAll () {
|
||||
this.keepAliveClean()
|
||||
this.$nextTick(this.$router.replace('/refresh'))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
40
src/views/demo/playground/store/size/index.vue
Normal file
40
src/views/demo/playground/store/size/index.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<el-radio-group v-model="currentValue" @change="set">
|
||||
<el-radio-button label="default"></el-radio-button>
|
||||
<el-radio-button label="medium"></el-radio-button>
|
||||
<el-radio-button label="small"></el-radio-button>
|
||||
<el-radio-button label="mini"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
currentValue: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/size', [
|
||||
'value'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler (val) {
|
||||
this.currentValue = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/size', [
|
||||
'set'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
72
src/views/demo/playground/store/theme/index.vue
Normal file
72
src/views/demo/playground/store/theme/index.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card" class="page">
|
||||
<template slot="header">主题</template>
|
||||
<el-table :data="list" v-bind="table">
|
||||
<el-table-column prop="name" align="center" width="260"/>
|
||||
<el-table-column label="预览" width="120">
|
||||
<div
|
||||
slot-scope="scope"
|
||||
class="theme-preview"
|
||||
:style="{'backgroundImage': `url(${$baseUrl}${scope.row.preview})`}">
|
||||
</div>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="activeName === scope.row.name" type="success" icon="el-icon-check" round>已激活</el-button>
|
||||
<el-button v-else round @click="handleSelectTheme(scope.row.name)">使用</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div>
|
||||
<p>尝试激活一个不存在的主题（主题不存在 <d2-icon name="arrow-right"/> 默认主题）</p>
|
||||
<el-button type="danger" @click="handleSelectTheme('err-theme')">
|
||||
<d2-icon name="hand-o-right" class="d2-mr-10"/>
|
||||
尝试激活主题 'err-theme'
|
||||
</el-button>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<el-button type="primary" size="small">当前激活主题 {{activeName}}</el-button>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
table: {
|
||||
showHeader: false,
|
||||
border: true
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/theme', [
|
||||
'list',
|
||||
'activeName'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/theme', [
|
||||
'set'
|
||||
]),
|
||||
handleSelectTheme (name) {
|
||||
this.set(name)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
.theme-preview {
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
border-radius: 4px;
|
||||
background-size: cover;
|
||||
border: 1px solid $color-border-1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
31
src/views/demo/playground/store/transition/index.vue
Normal file
31
src/views/demo/playground/store/transition/index.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<template slot="header">
|
||||
当前状态 {{active ? '开启过渡动画' : '关闭过渡动画'}}
|
||||
</template>
|
||||
<el-button type="primary" @click="set(!active)">
|
||||
{{active ? '关闭页面过渡动画' : '打开页面过渡动画'}}
|
||||
</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState('d2admin/transition', [
|
||||
'active'
|
||||
])
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
filename: __filename
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/transition', [
|
||||
'set'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
28
src/views/demo/playground/store/ua/index.vue
Normal file
28
src/views/demo/playground/store/ua/index.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<p class="d2-mt-0">useragent</p>
|
||||
<el-input :value="uaData.ua"></el-input>
|
||||
<p>格式化数据 in vuex: state.d2admin.ua.data</p>
|
||||
<d2-highlight :code="uaStr"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/ua', {
|
||||
uaData: 'data'
|
||||
}),
|
||||
uaStr () {
|
||||
const { browser, engine, os, device, cpu } = this.uaData
|
||||
return JSON.stringify({ browser, engine, os, device, cpu }, null, 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user