vic/vic-team-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tables

Browse Source
This commit is contained in:
saplf
2018-10-15 00:41:25 +08:00
parent be7755c0f3
commit 19eacdc5a0
14 changed files with 594 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/i18n/en.js
View File

@@ -12,4 +12,35 @@ export default {
titleNetwork: 'Network',
titleMarket: 'Market',
},
owner: {
tableHeader: '我的交易',
searchHolder: '请输入该输入的',
thId: '交易 ID',
thType: '类型',
thSender: '发送者',
thReceiver: '接收者',
thDate: '日期',
thAmount: '金额',
thFee: '手续费',
thRemark: '备注',
tableNone: '暂无数据',
},
network: {
tableHeader: '当前邻居',
searchHolder: '请输入该输入的',
thIndex: '序号',
thAddress: '连接地址',
thStatus: '连接状态',
thNeighbour: '邻居主人的账户地址',
tableNone: '暂无数据',
},
chain: {
tableHeader: '区块列表',
searchHolder: '请输入该输入的',
thHeight: '区块高度',
thTimestamp: '时间戳',
thType: '区块类型',
thId: '区块 ID',
tableNone: '暂无数据',
},
}

35
src/i18n/zh-CN.js
View File

@@ -7,9 +7,40 @@ export default {
},
home: {
titleOwner: '个人中心',
titleChain: '区块/交易',
titleChain: '链内数据',
titleNode: '当前节点',
titleNetwork: '网络链接',
titleNetwork: '对等网络',
titleMarket: '应用商城',
},
owner: {
tableHeader: '我的交易',
searchHolder: '请输入该输入的',
thId: '交易 ID',
thType: '类型',
thSender: '发送者',
thReceiver: '接收者',
thDate: '日期',
thAmount: '金额',
thFee: '手续费',
thRemark: '备注',
tableNone: '暂无数据',
},
network: {
tableHeader: '当前邻居',
searchHolder: '请输入该输入的',
thIndex: '序号',
thAddress: '连接地址',
thStatus: '连接状态',
thNeighbour: '邻居主人的账户地址',
tableNone: '暂无数据',
},
chain: {
tableHeader: '区块列表',
searchHolder: '请输入该输入的',
thHeight: '区块高度',
thTimestamp: '时间戳',
thType: '区块类型',
thId: '区块 ID',
tableNone: '暂无数据',
},
}

12
src/services/ui.js
View File

@@ -5,9 +5,14 @@ import {
VBtn,
VMenu,
VIcon,
VDialog,
VSelect,
VTextField,
VPagination,
} from 'vuetify/es5/components'
import { VSpacer } from 'vuetify/es5/components/VGrid'
import { VDataTable } from 'vuetify/es5/components/VDataTable'
import { VCard, VCardTitle, VCardActions } from 'vuetify/es5/components/VCard'
import { Ripple } from 'vuetify/es5/directives'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
@@ -22,9 +27,16 @@ Vue.use(Vuetify, {
Vue.component('VApp', VApp)
Vue.component('VBtn', VBtn)
Vue.component('VCard', VCard)
Vue.component('VMenu', VMenu)
Vue.component('VIcon', VIcon)
Vue.component('VDialog', VDialog)
Vue.component('VSpacer', VSpacer)
Vue.component('VSelect', VSelect)
Vue.component('VTextField', VTextField)
Vue.component('VDataTable', VDataTable)
Vue.component('VPagination', VPagination)
Vue.component('VCardTitle', VCardTitle)
Vue.component('VCardActions', VCardActions)
Vue.directive('Ripple', Ripple)

36
src/store/modules/chain.js
View File

@@ -1,8 +1,42 @@
export default {
namespaced: true,
state: {
pageEntity: [5, 10, 25],
headers: [
{ text: 'chain.thHeight', value: 'height', align: 'center' },
{ text: 'chain.thTimestamp', value: 'timestamp', align: 'center' },
{ text: 'chain.thType', value: 'type', align: 'center' },
{ text: 'chain.thId', value: 'id', align: 'center' },
],
desserts: [
{
height: '1',
timestamp: '2011-11-20',
type: '0',
id: 'ajlk;gaklewklgjqwejj',
},
mutations: {},
],
fetching: false,
filter: '',
modal: false,
},
mutations: {
inputFilter(state, filter) {
state.filter = filter
},
showModal(state) {
state.modal = true
},
hideModal(state) {
state.modal = false
},
},
actions: {},
getters: {},
}

30
src/store/modules/network.js
View File

@@ -1,7 +1,33 @@
export default {
namespaced: true,
state: {},
mutations: {},
state: {
pageEntity: [5, 10, 25],
headers: [
{ text: 'network.thIndex', value: 'index', align: 'center' },
{ text: 'network.thAddress', value: 'address', align: 'center' },
{ text: 'network.thStatus', value: 'status', align: 'center' },
{ text: 'network.thNeighbour', value: 'neighbour', align: 'center' },
],
desserts: [
{
index: '1',
address: '192.168.0.1',
status: '0',
neighbour: 'ajlk;gaklewklgjqwejj',
},
],
fetching: false,
filter: '',
},
mutations: {
inputFilter(state, filter) {
state.filter = filter
},
},
actions: {},
getters: {},
}

41
src/store/modules/owner.js
View File

@@ -1,7 +1,42 @@
export default {
namespaced: true,
state: {},
mutations: {},
actions: {},
state: {
pageEntity: [5, 10, 25],
headers: [
{ text: 'owner.thId', value: 'id', align: 'center' },
{ text: 'owner.thType', value: 'type', align: 'center' },
{ text: 'owner.thSender', value: 'sender', align: 'center' },
{ text: 'owner.thReceiver', value: 'receiver', align: 'center' },
{ text: 'owner.thDate', value: 'date', align: 'center' },
{ text: 'owner.thAmount', value: 'amount', align: 'center' },
{ text: 'owner.thFee', value: 'fee', align: 'center' },
{ text: 'owner.thRemark', value: 'remark', align: 'center' },
],
desserts: [
// {
// id: 'xxxxx',
// type: 'zzz',
// sender: 'xxx',
// receiver: 'dddd',
// date: '333',
// amount: '12',
// fee: 32,
// remark: 'xxxx',
// },
],
fetching: false,
filter: '',
},
mutations: {
inputFilter(state, filter) {
state.filter = filter
},
},
actions: {
},
getters: {},
}

12
src/store/rootStore.js
View File

@@ -26,11 +26,6 @@ const sideMenus = [
icon: 'group',
path: '/owner',
},
{
title: 'home.titleChain',
icon: 'public',
path: '/chain',
},
{
title: 'home.titleNode',
icon: 'all_inclusive',
@@ -38,9 +33,14 @@ const sideMenus = [
},
{
title: 'home.titleNetwork',
icon: 'language',
icon: 'public',
path: '/network',
},
{
title: 'home.titleChain',
icon: 'timeline',
path: '/chain',
},
{
title: 'home.titleMarket',
icon: 'apps',

5
src/styles/_share.scss
View File

@@ -7,6 +7,11 @@ $accentColor: #FFCDD2;
height: 100%;
}
@mixin app-normal-card {
@extend .elevation-1;
background-color: white;
}
.v-icon {
user-select: none;
}

144
src/views/Chain.vue
View File

@@ -1,16 +1,158 @@
<template>
<div class="chain-page">
Chain
<div class="card-content">
<div @click="showModal" class="app-card elevation-1"></div>
<div class="app-sep"></div>
<div class="app-card elevation-1"></div>
<div class="app-sep"></div>
<div class="app-card elevation-1"></div>
</div>
<div class="table-content elevation-1">
<div class="panel-header">
<h3>{{ $t('chain.tableHeader') }}</h3>
<div class="search-input">
<v-text-field
:placeholder="$t('chain.searchHolder')"
:value="filter"
@input="inputFilter"
append-icon="search" />
</div>
</div>
<template>
<v-data-table
:headers="headers"
:items="desserts"
:total-items="100"
:rows-per-page-items="pageEntity"
:loading="fetching"
class="panel-content elevation-1"
>
<template slot="headerCell" slot-scope="props">
<span>{{ $t(props.header.text) }}</span>
</template>
<template slot="items" slot-scope="props">
<td>{{ props.item.height }}</td>
<td>{{ props.item.timestamp }}</td>
<td>{{ props.item.type }}</td>
<td>{{ props.item.id }}</td>
</template>
<template slot="no-results">
{{ $t('chain.tableNone') }}
</template>
</v-data-table>
</template>
</div>
<v-dialog v-model="modal" persistent>
<v-card class="app-modal">
<v-card-title>事务列表</v-card-title>
<v-data-table
:headers="headers"
:items="desserts"
:total-items="100"
:rows-per-page-items="pageEntity"
:loading="fetching"
class="panel-content elevation-1"
>
<template slot="headerCell" slot-scope="props">
<span>{{ $t(props.header.text) }}</span>
</template>
<template slot="items" slot-scope="props">
<td>{{ props.item.height }}</td>
<td>{{ props.item.timestamp }}</td>
<td>{{ props.item.type }}</td>
<td>{{ props.item.id }}</td>
</template>
<template slot="no-results">
{{ $t('chain.tableNone') }}
</template>
</v-data-table>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary darken-1" flat @click.native="hideModal">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import {
createNamespacedHelpers,
} from 'vuex'
const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('chain')
export default {
name: 'Chain',
computed: {
...mapState([
'headers',
'desserts',
'pageEntity',
'fetching',
'filter',
'modal',
]),
...mapGetters([]),
},
methods: {
...mapActions([
]),
...mapMutations([
'inputFilter',
'showModal',
'hideModal',
]),
},
}
</script>
<style scoped lang="scss">
.chain-page {
.card-content {
display: flex;
padding: 20px;
.app-card {
flex: 1;
height: 100px;
background-color: white;
}
.app-sep {
width: 20px;
}
}
.table-content {
flex: 1;
margin: 0 20px 20px;
background-color: white;
display: flex;
flex-direction: column;
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 20px;
.search-input {
width: 400px;
}
}
.panel-content {
margin: 0 20px 20px;
}
}
}
</style>

15
src/views/Home.vue
View File

@@ -41,7 +41,9 @@
<v-icon @click="logout">power_settings_new</v-icon>
</div>
<transition name="fade">
<router-view class="app-container" />
</transition>
</div>
</div>
</template>
@@ -251,5 +253,18 @@ export default {
flex-grow: 1;
}
}
.fade-enter-active, .fade-leave-active {
transition-property: opacity;
transition-duration: .25s;
}
.fade-enter-active {
transition-delay: .4s;
}
.fade-enter, .fade-leave-active {
opacity: 0
}
}
</style>

1
src/views/Login.vue
View File

@@ -13,6 +13,7 @@
:value="mnemonic"
:loading="signing"
@input="updateMnemonic"
@keyup.13="login"
:label="$t('login.inputLabel')" />
<v-select

110
src/views/Network.vue
View File

@@ -1,16 +1,124 @@
<template>
<div class="network-page">
Network
<div class="card-content">
<div class="app-card elevation-1"></div>
<div class="app-sep"></div>
<div class="app-card elevation-1"></div>
<div class="app-sep"></div>
<div class="app-card elevation-1"></div>
<div class="app-sep"></div>
<div class="app-card elevation-1"></div>
</div>
<div class="table-content elevation-1">
<div class="panel-header">
<h3>{{ $t('network.tableHeader') }}</h3>
<div class="search-input">
<v-text-field
:placeholder="$t('network.searchHolder')"
:value="filter"
@input="inputFilter"
append-icon="search" />
</div>
</div>
<template>
<v-data-table
:headers="headers"
:items="desserts"
:total-items="100"
:rows-per-page-items="pageEntity"
:loading="fetching"
class="panel-content elevation-1"
>
<template slot="headerCell" slot-scope="props">
<span>{{ $t(props.header.text) }}</span>
</template>
<template slot="items" slot-scope="props">
<td>{{ props.item.index }}</td>
<td>{{ props.item.address }}</td>
<td>{{ props.item.status }}</td>
<td>{{ props.item.neighbour }}</td>
</template>
<template slot="no-results">
{{ $t('network.tableNone') }}
</template>
</v-data-table>
</template>
</div>
</div>
</template>
<script>
import {
createNamespacedHelpers,
} from 'vuex'
const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('network')
export default {
name: 'Network',
computed: {
...mapState([
'headers',
'desserts',
'pageEntity',
'fetching',
'filter',
]),
...mapGetters([]),
},
methods: {
...mapActions([
]),
...mapMutations([
'inputFilter',
]),
},
}
</script>
<style scoped lang="scss">
.network-page {
.card-content {
display: flex;
padding: 20px;
.app-card {
flex: 1;
height: 100px;
background-color: white;
}
.app-sep {
width: 20px;
}
}
.table-content {
flex: 1;
margin: 0 20px 20px;
background-color: white;
display: flex;
flex-direction: column;
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 20px;
.search-input {
width: 400px;
}
}
.panel-content {
margin: 0 20px 20px;
}
}
}
</style>

22
src/views/Node.vue
View File

@@ -1,6 +1,10 @@
<template>
<div class="node-page">
Node
<div class="card-content">
<div class="app-card elevation-1"></div>
<div class="app-sep"></div>
<div class="app-card elevation-1"></div>
</div>
</div>
</template>
@@ -12,5 +16,21 @@ export default {
<style scoped lang="scss">
.node-page {
.card-content {
display: flex;
padding: 20px;
.app-card {
flex: 1;
height: 200px;
background-color: white;
}
.app-sep {
width: 20px;
}
}
}
</style>

117
src/views/Owner.vue
View File

@@ -1,16 +1,131 @@
<template>
<div class="owner-page">
Owner
<div class="card-content">
<div class="app-card elevation-1"></div>
<div class="app-sep"></div>
<div class="app-card elevation-1"></div>
</div>
<div class="table-content elevation-1">
<div class="panel-header">
<h3>{{ $t('owner.tableHeader') }}</h3>
<div class="search-input">
<v-text-field
:placeholder="$t('owner.searchHolder')"
:value="filter"
@input="inputFilter"
append-icon="search" />
</div>
</div>
<template>
<v-data-table
:headers="headers"
:items="desserts"
:total-items="100"
:rows-per-page-items="pageEntity"
:loading="fetching"
class="panel-content elevation-1"
>
<template slot="headerCell" slot-scope="props">
<span>{{ $t(props.header.text) }}</span>
</template>
<template slot="items" slot-scope="props">
<td>{{ props.item.id }}</td>
<td>{{ props.item.type }}</td>
<td>{{ props.item.sender }}</td>
<td>{{ props.item.receiver }}</td>
<td>{{ props.item.date }}</td>
<td>{{ props.item.amount }}</td>
<td>{{ props.item.fee }}</td>
<td>{{ props.item.remark }}</td>
</template>
<template slot="no-results">
{{ $t('owner.tableNone') }}
</template>
</v-data-table>
</template>
</div>
</div>
</template>
<script>
import {
createNamespacedHelpers,
} from 'vuex'
const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('owner')
export default {
name: 'Owner',
computed: {
...mapState([
'headers',
'desserts',
'pageEntity',
'fetching',
'filter',
]),
...mapGetters([]),
},
methods: {
...mapActions([
]),
...mapMutations([
'inputFilter',
]),
},
}
</script>
<style scoped lang="scss">
@import "../styles/share";
.owner-page {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
.card-content {
display: flex;
padding: 20px;
.app-card {
flex: 1;
height: 200px;
background-color: white;
}
.app-sep {
width: 20px;
}
}
.table-content {
flex: 1;
margin: 0 20px 20px;
background-color: white;
display: flex;
flex-direction: column;
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 20px;
.search-input {
width: 400px;
}
}
.panel-content {
margin: 0 20px 20px;
}
}
}
</style>