Merge branch 'i18n' into deploy

This commit is contained in:
花裤衩 2019-12-16 10:34:18 +08:00
commit 2d27251f2e
15 changed files with 219 additions and 135 deletions

View File

@ -30,9 +30,9 @@ English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Spa
## Introduction ## Introduction
[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is a production-ready front-end solution for admin interfaces. It based on [vue](https://github.com/vuejs/vue) and use the UI Toolkit [element-ui](https://github.com/ElemeFE/element). [vue-element-admin](https://panjiachen.github.io/vue-element-admin) is a production-ready front-end solution for admin interfaces. It is based on [vue](https://github.com/vuejs/vue) and uses the UI Toolkit [element-ui](https://github.com/ElemeFE/element).
It is a magical vue admin based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you. [vue-element-admin](https://panjiachen.github.io/vue-element-admin) is based on the newest development stack of vue and it has a built-in i18n solution, typical templates for enterprise applications, and lots of awesome features. It helps you build large and complex Single-Page Applications. I believe whatever your needs are, this project will help you.
- [Preview](https://panjiachen.github.io/vue-element-admin) - [Preview](https://panjiachen.github.io/vue-element-admin)

View File

@ -0,0 +1,16 @@
{{#if state}}
const state = {}
{{/if}}
{{#if mutations}}
const mutations = {}
{{/if}}
{{#if actions}}
const actions = {}
{{/if}}
export default {
namespaced: true,
{{options}}
}

View File

@ -0,0 +1,62 @@
const { notEmpty } = require('../utils.js')
module.exports = {
description: 'generate store',
prompts: [{
type: 'input',
name: 'name',
message: 'store name please',
validate: notEmpty('name')
},
{
type: 'checkbox',
name: 'blocks',
message: 'Blocks:',
choices: [{
name: 'state',
value: 'state',
checked: true
},
{
name: 'mutations',
value: 'mutations',
checked: true
},
{
name: 'actions',
value: 'actions',
checked: true
}
],
validate(value) {
if (!value.includes('state') || !value.includes('mutations')) {
return 'store require at least state and mutations'
}
return true
}
}
],
actions(data) {
const name = '{{name}}'
const { blocks } = data
const options = ['state', 'mutations']
const joinFlag = `,
`
if (blocks.length === 3) {
options.push('actions')
}
const actions = [{
type: 'add',
path: `src/store/modules/${name}.js`,
templateFile: 'plop-templates/store/index.hbs',
data: {
options: options.join(joinFlag),
state: blocks.includes('state'),
mutations: blocks.includes('mutations'),
actions: blocks.includes('actions')
}
}]
return actions
}
}

View File

@ -1,7 +1,9 @@
const viewGenerator = require('./plop-templates/view/prompt') const viewGenerator = require('./plop-templates/view/prompt')
const componentGenerator = require('./plop-templates/component/prompt') const componentGenerator = require('./plop-templates/component/prompt')
const storeGenerator = require('./plop-templates/store/prompt.js')
module.exports = function(plop) { module.exports = function(plop) {
plop.setGenerator('view', viewGenerator) plop.setGenerator('view', viewGenerator)
plop.setGenerator('component', componentGenerator) plop.setGenerator('component', componentGenerator)
plop.setGenerator('store', storeGenerator)
} }

View File

@ -12,7 +12,7 @@ import Editor from 'tui-editor'
import defaultOptions from './default-options' import defaultOptions from './default-options'
export default { export default {
name: 'MarddownEditor', name: 'MarkdownEditor',
props: { props: {
value: { value: {
type: String, type: String,

View File

@ -44,6 +44,7 @@ $t: .1s;
width: 250px; width: 250px;
position: relative; position: relative;
z-index: 1; z-index: 1;
height: auto!important;
&-title { &-title {
width: 100%; width: 100%;
display: block; display: block;
@ -65,10 +66,12 @@ $t: .1s;
position: absolute; position: absolute;
width: 100%; width: 100%;
background: #e0e0e0; background: #e0e0e0;
color: #000;
line-height: 60px; line-height: 60px;
height: 60px; height: 60px;
cursor: pointer; cursor: pointer;
font-size: 20px; font-size: 18px;
overflow: hidden;
opacity: 1; opacity: 1;
transition: transform 0.28s ease; transition: transform 0.28s ease;
&:hover { &:hover {
@ -90,7 +93,7 @@ $t: .1s;
.share-dropdown-menu-item { .share-dropdown-menu-item {
@for $i from 1 through $n { @for $i from 1 through $n {
&:nth-of-type(#{$i}) { &:nth-of-type(#{$i}) {
transition-delay: ($n - $i)*$t; transition-delay: ($n - $i)*$t;
transform: translate3d(0, ($i - 1)*60px, 0); transform: translate3d(0, ($i - 1)*60px, 0);
} }
} }

View File

@ -77,3 +77,8 @@
.el-range-editor.el-input__inner { .el-range-editor.el-input__inner {
display: inline-flex !important; display: inline-flex !important;
} }
// to fix el-date-picker css style
.el-range-separator {
box-sizing: content-box;
}

View File

@ -1,26 +1,10 @@
<template> <template>
<div class="app-container documentation-container"> <div class="app-container documentation-container">
<a <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">Documentation</a>
class="document-btn" <a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">Github Repository</a>
target="_blank" <a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
href="https://panjiachen.github.io/vue-element-admin-site/" <dropdown-menu class="document-btn" :items="articleList" title="系列文章" />
>Documentation</a> <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/">内推招聘</a>
<a
class="document-btn"
target="_blank"
href="https://github.com/PanJiaChen/vue-element-admin/"
>Github Repository</a>
<a
class="document-btn"
target="_blank"
href="https://panjiachen.gitee.io/vue-element-admin-site/zh/"
>国内文档</a>
<dropdown-menu :items="articleList" style="float:left;margin-left:50px;" title="系列文章" />
<a
class="document-btn"
target="_blank"
href="https://panjiachen.github.io/vue-element-admin-site/zh/job/"
>内推招聘</a>
</div> </div>
</template> </template>
@ -53,8 +37,10 @@ export default {
margin: 50px; margin: 50px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-evenly;
.document-btn { .document-btn {
margin-left: 50px; flex-shrink: 0;
display: block; display: block;
cursor: pointer; cursor: pointer;
background: black; background: black;

View File

@ -13,7 +13,7 @@
</a> </a>
</div> </div>
<el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row> <el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
<el-table-column align="center" label="Id" width="95"> <el-table-column align="center" label="Id" width="95">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.$index }} {{ scope.$index }}

View File

@ -6,29 +6,33 @@
</aside> </aside>
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane label="Icons"> <el-tab-pane label="Icons">
<div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)"> <div class="grid">
<el-tooltip placement="top"> <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
<div slot="content"> <el-tooltip placement="top">
{{ generateIconCode(item) }} <div slot="content">
</div> {{ generateIconCode(item) }}
<div class="icon-item"> </div>
<svg-icon :icon-class="item" class-name="disabled" /> <div class="icon-item">
<span>{{ item }}</span> <svg-icon :icon-class="item" class-name="disabled" />
</div> <span>{{ item }}</span>
</el-tooltip> </div>
</el-tooltip>
</div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Element-UI Icons"> <el-tab-pane label="Element-UI Icons">
<div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)"> <div class="grid">
<el-tooltip placement="top"> <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
<div slot="content"> <el-tooltip placement="top">
{{ generateElementIconCode(item) }} <div slot="content">
</div> {{ generateElementIconCode(item) }}
<div class="icon-item"> </div>
<i :class="'el-icon-' + item" /> <div class="icon-item">
<span>{{ item }}</span> <i :class="'el-icon-' + item" />
</div> <span>{{ item }}</span>
</el-tooltip> </div>
</el-tooltip>
</div>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@ -67,6 +71,12 @@ export default {
margin: 10px 20px 0; margin: 10px 20px 0;
overflow: hidden; overflow: hidden;
.grid {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.icon-item { .icon-item {
margin: 20px; margin: 20px;
height: 85px; height: 85px;

View File

@ -26,17 +26,17 @@ export default {
}, },
methods: { methods: {
fetchData() { fetchData() {
import('./content.js').then(data => { import('./content.js').then(data => {
const { title } = data.default const { title } = data.default
document.title = title document.title = title
this.article = data.default this.article = data.default
setTimeout(() => { setTimeout(() => {
this.fullscreenLoading = false this.fullscreenLoading = false
this.$nextTick(() => { this.$nextTick(() => {
window.print() window.print()
}) })
}, 3000) }, 3000)
}) })
} }
} }
} }

View File

@ -74,61 +74,61 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box-center { .box-center {
margin: 0 auto; margin: 0 auto;
display: table; display: table;
} }
.text-muted { .text-muted {
color: #777; color: #777;
} }
.user-profile { .user-profile {
.user-name { .user-name {
font-weight: bold; font-weight: bold;
} }
.box-center { .box-center {
padding-top: 10px; padding-top: 10px;
} }
.user-role { .user-role {
padding-top: 10px; padding-top: 10px;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
.box-social { .box-social {
padding-top: 30px; padding-top: 30px;
.el-table { .el-table {
border-top: 1px solid #dfe6ec; border-top: 1px solid #dfe6ec;
} }
} }
.user-follow { .user-follow {
padding-top: 20px; padding-top: 20px;
} }
} }
.user-bio { .user-bio {
margin-top: 20px; margin-top: 20px;
color: #606266; color: #606266;
span { span {
padding-left: 4px; padding-left: 4px;
} }
.user-bio-section { .user-bio-section {
font-size: 14px; font-size: 14px;
padding: 15px 0; padding: 15px 0;
.user-bio-section-header { .user-bio-section-header {
border-bottom: 1px solid #dfe6ec; border-bottom: 1px solid #dfe6ec;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 10px; margin-bottom: 10px;
font-weight: bold; font-weight: bold;
} }
} }
} }
</style> </style>

View File

@ -36,13 +36,13 @@
@sort-change="sortChange" @sort-change="sortChange"
> >
<el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')"> <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
<template slot-scope="scope"> <template slot-scope="{row}">
<span>{{ scope.row.id }}</span> <span>{{ row.id }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('table.date')" width="150px" align="center"> <el-table-column :label="$t('table.date')" width="150px" align="center">
<template slot-scope="scope"> <template slot-scope="{row}">
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span> <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('table.title')" min-width="150px"> <el-table-column :label="$t('table.title')" min-width="150px">
@ -52,18 +52,18 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('table.author')" width="110px" align="center"> <el-table-column :label="$t('table.author')" width="110px" align="center">
<template slot-scope="scope"> <template slot-scope="{row}">
<span>{{ scope.row.author }}</span> <span>{{ row.author }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center"> <el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
<template slot-scope="scope"> <template slot-scope="{row}">
<span style="color:red;">{{ scope.row.reviewer }}</span> <span style="color:red;">{{ row.reviewer }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('table.importance')" width="80px"> <el-table-column :label="$t('table.importance')" width="80px">
<template slot-scope="scope"> <template slot-scope="{row}">
<svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" /> <svg-icon v-for="n in +row.importance" :key="n" icon-class="star" class="meta-item__icon" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('table.readings')" align="center" width="95"> <el-table-column :label="$t('table.readings')" align="center" width="95">

View File

@ -3,38 +3,38 @@
<!-- Note that row-key is necessary to get a correct row order. --> <!-- Note that row-key is necessary to get a correct row order. -->
<el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%"> <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" label="ID" width="65"> <el-table-column align="center" label="ID" width="65">
<template slot-scope="scope"> <template slot-scope="{row}">
<span>{{ scope.row.id }}</span> <span>{{ row.id }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="180px" align="center" label="Date"> <el-table-column width="180px" align="center" label="Date">
<template slot-scope="scope"> <template slot-scope="{row}">
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span> <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="300px" label="Title"> <el-table-column min-width="300px" label="Title">
<template slot-scope="scope"> <template slot-scope="{row}">
<span>{{ scope.row.title }}</span> <span>{{ row.title }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="110px" align="center" label="Author"> <el-table-column width="110px" align="center" label="Author">
<template slot-scope="scope"> <template slot-scope="{row}">
<span>{{ scope.row.author }}</span> <span>{{ row.author }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="100px" label="Importance"> <el-table-column width="100px" label="Importance">
<template slot-scope="scope"> <template slot-scope="{row}">
<svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="icon-star" /> <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="icon-star" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="Readings" width="95"> <el-table-column align="center" label="Readings" width="95">
<template slot-scope="scope"> <template slot-scope="{row}">
<span>{{ scope.row.pageviews }}</span> <span>{{ row.pageviews }}</span>
</template> </template>
</el-table-column> </el-table-column>

View File

@ -2,26 +2,26 @@
<div class="app-container"> <div class="app-container">
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%"> <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" label="ID" width="80"> <el-table-column align="center" label="ID" width="80">
<template slot-scope="scope"> <template slot-scope="{row}">
<span>{{ scope.row.id }}</span> <span>{{ row.id }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="180px" align="center" label="Date"> <el-table-column width="180px" align="center" label="Date">
<template slot-scope="scope"> <template slot-scope="{row}">
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span> <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="120px" align="center" label="Author"> <el-table-column width="120px" align="center" label="Author">
<template slot-scope="scope"> <template slot-scope="{row}">
<span>{{ scope.row.author }}</span> <span>{{ row.author }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="100px" label="Importance"> <el-table-column width="100px" label="Importance">
<template slot-scope="scope"> <template slot-scope="{row}">
<svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" /> <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="meta-item__icon" />
</template> </template>
</el-table-column> </el-table-column>