sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #19 from FairyEver/dev

Browse Source 
404 page

Former-commit-id: ec28bb23c0cd1f95e30e6ad17cba4ae3215acb45 [formerly ec28bb23c0cd1f95e30e6ad17cba4ae3215acb45 [formerly ec28bb23c0cd1f95e30e6ad17cba4ae3215acb45 [formerly ec28bb23c0cd1f95e30e6ad17cba4ae3215acb45 [formerly 074579dadaefc7486914e28f5751b0137697508c [formerly 317deb3b236a6bcd43dc955588ebb92251d0881a]]]]]
Former-commit-id: a6eecd63d69639822b34a5fa9ea949c15854c703
Former-commit-id: bd214f5baa2f0841d01e82b6f079c3e9dbe4471e
Former-commit-id: 76e3546bfa1bf2863dce1571833889ca28b8088d [formerly 8f616e19918279f9f52a14a71718b794df676c81]
Former-commit-id: ad49ab1b1de5de3a1ed34e15db51a1f4ef82ad63
Former-commit-id: 59cac8e7854ff572aaebfb959793a88309091b14
Former-commit-id: 5133235f48c350e634b8f3f91dfa73398c20c61b
Former-commit-id: 5d7dcbe8672ee843d9cbce18f3a0c3fdc3ba8491
Former-commit-id: 498148dea3bd083918c117449a494b2de616dfee
This commit is contained in:
李杨
2018-06-19 16:35:44 +08:00
committed by GitHub
parent a4ab38386f ae7c3b715e
commit 65e4afab79
15 changed files with 242 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
design.sketch.REMOVED.git-id
View File

@@ -1 +1 @@
4b819d117b3b7e87effa763dbb04ba3280622cf1
161855f41fee4ef5f7f2cf7f5285cd68edea3007

23
docs/zh/guide/change-log.md
View File

@@ -6,26 +6,29 @@
这是正在开发的版本，还没有正式发布
:::
* [ 修改 ] 顶栏和侧边栏菜单新的结构生成方式，新的方案使用 `数据` + `递归组件` 实现无限制多级菜单
* [ 修改 ] 顶栏和侧边栏菜单新的结构生成方式，新的方案使用 数据 + 递归组件 实现无限制多级菜单
* [ 修改 ] 路由注册回归最简单的写法
* [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 `d2-app-loading` 前缀
* [ 修改 ] 所有类似 `dd-` 的样式前缀(包括自动注册图标的id前缀)统一改为 `d2-`
* [ 修复 ] 修复 `d2-highlight` 组件和 `d2-markdown` 组件的样式冲突
* [ 修改 ] 内置组件名称统一改为 `d2-` 前缀，统一使用横线连接 (kebab-case) 风格
* [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 d2-app-loading 前缀
* [ 修改 ] 所有类似 dd- 的样式前缀(包括自动注册图标的id前缀)统一改为 d2-
* [ 修复 ] 修复 d2-highlight 组件和 d2-markdown 组件的样式冲突
* [ 修改 ] 内置组件名称统一改为 d2- 前缀，统一使用横线连接 (kebab-case) 风格
* [ 修改 ] 顶栏 logo 阴影删除
* [ 新增 ] 主题系统
* [ 新增 ] 三个主题，分别为 d2admin 经典，简约线条，流星
* [ 修改 ] `d2-markdown` 组件 `md` 参数改名为 `source`
* [ 修改 ] 删除了 `d2-markdown` 组件中图片的白色背景
* [ 修改 ] 删除 `timeago` 插件，更换为更强大的 `dayjs`
* [ 新增 ] `Tomorrow Night Blue` 主题
* [ 修改 ] `src/assets/style/public-class.scss` 写法优化
* [ 修改 ] d2-markdown 组件 md 参数改名为 source
* [ 修改 ] 删除了 d2-markdown 组件中图片的白色背景
* [ 修改 ] 删除 timeago 插件，更换为更强大的 dayjs
* [ 新增 ] Tomorrow Night Blue 主题
* [ 修改 ] src/assets/style/public-class.scss 写法优化
* [ 新增 ] [vue-bigdata-table](https://github.com/lison16/vue-bigdata-table)组件
* [ 修复 ] 侧边栏内容超过一屏后显示错误
* [ 新增 ] 自定义滚动条演示页面
* [ 新增 ] 流星主题新增背景图片上层的半透明遮罩
* [ 修复 ] 主题设置失效bug
* [ 修复 ] router守卫验证登陆部分代码修改
* [ 修复 ] d2-container 组件改为同步注册（之前的异步注册会有 mounted 生命周期问题，即 slot 内的页面在 mounted 生命周期内拿不到 dom）
* [ 修复 ] d2-container 组件重构 flex 布局
* [ 新增 ] 404 page
## v1.0.0

1
package.json
View File

@@ -16,6 +16,7 @@
"@antv/data-set": "^0.8.5",
"@antv/g2": "^3.0.4",
"axios": "^0.17.1",
"better-scroll": "^1.12.1",
"clipboard-polyfill": "^2.4.1",
"countup.js": "^1.9.3",
"dayjs": "^1.6.7",

2
src/assets/style/theme/theme.scss.REMOVED.git-id
View File

@@ -1 +1 @@
76b231c8f2b45f72c095f47ab055fbebb41ff160
7951ca687a987c2f872c6a63ac497cfc58cba7dc

68
src/components/core/d2-container-full/index.vue
View File

@@ -1,68 +0,0 @@
<template>
<div class="d2-container-full" :style="cardStyle">
<div v-if="$slots.header" class="d2-container-full__header" ref="header">
<slot name="header"/>
</div>
<div class="d2-container-full__body" :style="bodyStyle">
<slot/>
</div>
<div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
<slot name="footer"/>
</div>
</div>
</template>
<script>
export default {
name: 'd2-container-full',
props: {
// 定位 上 右 下 左
top: {
type: Number,
required: false,
default: 0
},
right: {
type: Number,
required: false,
default: 0
},
bottom: {
type: Number,
required: false,
default: 0
},
left: {
type: Number,
required: false,
default: 0
}
},
data () {
return {
headerHeight: 0,
footerHeight: 0
}
},
mounted () {
this.headerHeight = this.$slots.header ? this.$refs.header.offsetHeight : 0
this.footerHeight = this.$slots.footer ? this.$refs.footer.offsetHeight : 0
},
computed: {
cardStyle () {
return {
top: `${this.top}px`,
right: `${this.right}px`,
bottom: `${this.bottom}px`,
left: `${this.left}px`
}
},
bodyStyle () {
return {
top: `${this.headerHeight}px`,
bottom: `${this.footerHeight}px`
}
}
}
}
</script>

46
src/components/core/d2-container/components/d2-container-full.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<div class="d2-container-full">
<div v-if="$slots.header" class="d2-container-full__header" ref="header">
<slot name="header"/>
</div>
<div class="d2-container-full__body">
<slot/>
</div>
<div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
<slot name="footer"/>
</div>
</div>
</template>
<script>
export default {
name: 'd2-container-full'
}
</script>
<style lang="scss" scoped>
// [组件] d2-container-full
.d2-container-full {
position: absolute;
top: 0px;
right: 20px;
bottom: 0px;
left: 0px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
display: flex;
flex-direction: column;
overflow: hidden;
.d2-container-full__header {
padding: 20px;
}
.d2-container-full__body {
flex-grow: 1;
padding: 20px;
overflow: auto;
}
.d2-container-full__footer {
padding: 20px;
}
}
</style>

5
src/components/core/d2-container/index.vue
View File

@@ -11,7 +11,7 @@
<slot/>
</div>
<!-- [container-full] 撑满 -->
<d2-container-full v-if="type === 'full'" :right="20" :bottom="0">
<d2-container-full v-if="type === 'full'">
<slot v-if="$slots.header" name="header" slot="header"/>
<slot/>
<slot v-if="$slots.footer" name="footer" slot="footer"/>
@@ -20,6 +20,7 @@
</template>
<script>
import d2ContainerFull from './components/d2-container-full.vue'
export default {
name: 'd2-container',
props: {
@@ -37,7 +38,7 @@ export default {
}
},
components: {
'd2-container-full': () => import('../d2-container-full/index.vue')
'd2-container-full': d2ContainerFull
}
}
</script>

5
src/components/core/register.js
View File

@@ -3,11 +3,14 @@ import Vue from 'vue'
import { GridLayout, GridItem } from 'vue-grid-layout'
import SplitPane from 'vue-splitpane'
// 主容器
import d2Container from '@/components/core/d2-container'
Vue.component('d2-grid-layout', GridLayout)
Vue.component('d2-grid-item', GridItem)
Vue.component('SplitPane', SplitPane)
Vue.component('d2-container', () => import('@/components/core/d2-container'))
Vue.component('d2-container', d2Container)
Vue.component('d2-count-up', () => import('@/components/core/d2-count-up'))
Vue.component('d2-highlight', () => import('@/components/core/d2-highlight'))
Vue.component('d2-icon', () => import('@/components/core/d2-icon'))

10
src/menu/index.js
View File

@@ -38,6 +38,14 @@ const demoPlugins = {
{ path: `${pre}i18n/demo2`, title: '示例2' }
]
},
{
path: `${pre}better-scroll`,
title: '滚动扩展',
children: [
{ path: `${pre}better-scroll/base`, title: '基础用法' },
{ path: `${pre}better-scroll/to`, title: '滚动定位' }
]
},
{ path: `${pre}build`, title: '环境区分' },
{ path: `${pre}clipboard-polyfill`, title: '剪贴板访问' },
{ path: `${pre}day`, title: '日期计算' },
@@ -88,7 +96,7 @@ const demoComponents = {
]
},
{ path: `${pre}bigdata-table`, title: '百万数量级表格' },
{ path: `${pre}scrollbar`, title: '滚动条' },
{ path: `${pre}scrollbar`, title: 'ElementUI 滚动条组件' },
{ path: `${pre}countup`, title: '数字动画' },
{ path: `${pre}editor-quill`, title: '富文本编辑器' },
{ path: `${pre}editor-simpleMDE`, title: 'markdown编辑器' },

24
src/pages/core/404/index.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="page-404">
<img src="/static/image/page/404/cover@2x.png">
<el-button class="d2-mt" @click="$router.replace({ path: '/' })">
返回首页
</el-button>
</div>
</template>
<style lang="scss" scoped>
.page-404 {
background-color: #555555;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
img {
width: 196px;
user-select: none;
}
}
</style>

2
src/pages/demo/components/container/full.vue
View File

@@ -5,7 +5,7 @@
</template>
<d2-markdown :source="doc"/>
<template slot="footer">
我是插入到 footer 中的内容
<d2-demo-link-btn title="D2Admin" link="https://github.com/FairyEver/d2admin-vue-element"/>
</template>
</d2-container>
</template>

47
src/pages/demo/plugins/better-scroll/base.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<d2-container>
<template slot="header">基础用法</template>
<div ref="wrapper" class="demo-bs-wrapper">
<div>
<div v-for="n in 30" :key="n" class="demo-bs-item">n : {{n}}</div>
</div>
</div>
</d2-container>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data () {
return {
BS: null
}
},
mounted () {
this.BS = new BScroll(this.$refs.wrapper, {
mouseWheel: true
})
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.demo-bs-wrapper {
height: 200px;
width: 300px;
position: relative;
overflow: hidden;
border: 1px solid $color-border-1;
border-radius: 4px;
.demo-bs-item {
line-height: 40px;
padding-left: 10px;
border-bottom: 1px solid $color-border-4;
&:last-child {
border-bottom: none;
}
}
}
</style>

90
src/pages/demo/plugins/better-scroll/to.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<d2-container type="full">
<template slot="header">滚动定位</template>
<el-row :gutter="20">
<el-col :span="8">
<div ref="wrapper" class="demo-bs-wrapper">
<div>
<div v-for="n in 100" :key="n" class="demo-bs-item" :id="`demo-bs-item-${n}`">n : {{n}}</div>
</div>
</div>
</el-col>
<el-col :span="16">
<div class="d2-mb">
<p>滚动时间 ms</p>
<el-slider v-model="time" :min="100" :max="3000"></el-slider>
</div>
<div class="d2-mb">
<el-button-group>
<el-button @click="handleScrollTo(100)">滚动到100像素位置</el-button>
<el-button @click="handleScrollTo(300)">滚动到300像素位置</el-button>
</el-button-group>
</div>
<div class="d2-mb">
<el-button-group>
<el-button @click="handleScrollBy(50)">向下滚动50像素</el-button>
<el-button @click="handleScrollBy(-50)">向上滚动50像素</el-button>
</el-button-group>
</div>
<div class="d2-mb">
<el-button-group>
<el-button @click="handleScrollToElement(4)">滚动到第四个</el-button>
<el-button @click="handleScrollToElement(14)">滚动到第十四个</el-button>
<el-button @click="handleScrollToElement(24)">滚动到第二十四个</el-button>
</el-button-group>
</div>
</el-col>
</el-row>
<template slot="footer">
<d2-demo-link-btn title="文档" link="http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/"/>
</template>
</d2-container>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data () {
return {
time: 300,
BS: null
}
},
mounted () {
this.BS = new BScroll(this.$refs.wrapper, {
mouseWheel: true
})
},
methods: {
handleScrollTo (y) {
this.BS.scrollTo(0, -y, this.time)
},
handleScrollBy (y) {
this.BS.scrollBy(0, -y, this.time)
},
handleScrollToElement (n) {
this.BS.scrollToElement(`#demo-bs-item-${n}`, this.time)
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.demo-bs-wrapper {
height: 400px;
position: relative;
overflow: hidden;
border: 1px solid $color-border-1;
border-radius: 4px;
.demo-bs-item {
line-height: 40px;
padding-left: 10px;
border-bottom: 1px solid $color-border-4;
&:last-child {
border-bottom: none;
}
}
}
</style>

2
src/router/index.js.REMOVED.git-id
View File

@@ -1 +1 @@
98262236d74b49a612e6be6ba8cac9307d0fc023
ddf919108dc68f1f7811c033e619dd82d94ef14c

1
static/image/page/404/cover@2x.png.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
139f15ecdee8d06f66d7fb57a30f6ec9e76b6103