mirror of https://github.com/halo-dev/halo-admin
Remove useless components.
ruibaby
parent
afd4b387fb
commit
94374960af
|
|
@ -1,46 +0,0 @@
|
||||||
<template>
|
|
||||||
<tooltip v-if="tips !== ''">
|
|
||||||
<template slot="title">{{ tips }}</template>
|
|
||||||
<avatar :size="avatarSize" :src="src" />
|
|
||||||
</tooltip>
|
|
||||||
<avatar v-else :size="avatarSize" :src="src" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Avatar from 'ant-design-vue/es/avatar'
|
|
||||||
import Tooltip from 'ant-design-vue/es/tooltip'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'AvatarItem',
|
|
||||||
components: {
|
|
||||||
Avatar,
|
|
||||||
Tooltip
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
tips: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
src: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
size: this.$parent.size
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
avatarSize() {
|
|
||||||
return this.size !== 'mini' && this.size || 20
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
'$parent.size'(val) {
|
|
||||||
this.size = val
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,99 +0,0 @@
|
||||||
<!--
|
|
||||||
<template>
|
|
||||||
<div :class="[prefixCls]">
|
|
||||||
<ul>
|
|
||||||
<slot></slot>
|
|
||||||
<template v-for="item in filterEmpty($slots.default).slice(0, 3)"></template>
|
|
||||||
|
|
||||||
<template v-if="maxLength > 0 && filterEmpty($slots.default).length > maxLength">
|
|
||||||
<avatar-item :size="size">
|
|
||||||
<avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar>
|
|
||||||
</avatar-item>
|
|
||||||
</template>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Avatar from 'ant-design-vue/es/avatar'
|
|
||||||
import AvatarItem from './Item'
|
|
||||||
import { filterEmpty } from '@/components/_util/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
AvatarItem,
|
|
||||||
name: 'AvatarList',
|
|
||||||
components: {
|
|
||||||
Avatar,
|
|
||||||
AvatarItem
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
prefixCls: {
|
|
||||||
type: String,
|
|
||||||
default: 'ant-pro-avatar-list'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 头像大小 类型: large、small 、mini, default
|
|
||||||
* 默认值: default
|
|
||||||
*/
|
|
||||||
size: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: 'default'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 要显示的最大项目
|
|
||||||
*/
|
|
||||||
maxLength: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 多余的项目风格
|
|
||||||
*/
|
|
||||||
excessItemsStyle: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {
|
|
||||||
return {
|
|
||||||
color: '#f56a00',
|
|
||||||
backgroundColor: '#fde3cf'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getItems(items) {
|
|
||||||
const classString = {
|
|
||||||
[`${this.prefixCls}-item`]: true,
|
|
||||||
[`${this.size}`]: true
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.maxLength > 0) {
|
|
||||||
items = items.slice(0, this.maxLength)
|
|
||||||
items.push((<Avatar size={ this.size } style={ this.excessItemsStyle }>{`+${this.maxLength}`}</Avatar>))
|
|
||||||
}
|
|
||||||
const itemList = items.map((item) => (
|
|
||||||
<li class={ classString }>{ item }</li>
|
|
||||||
))
|
|
||||||
return itemList
|
|
||||||
}
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
const { prefixCls, size } = this.$props
|
|
||||||
const classString = {
|
|
||||||
[`${prefixCls}`]: true,
|
|
||||||
[`${size}`]: true
|
|
||||||
}
|
|
||||||
const items = filterEmpty(this.$slots.default)
|
|
||||||
const itemsDom = items && items.length ? <ul class={`${prefixCls}-items`}>{ this.getItems(items) }</ul> : null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class={ classString }>
|
|
||||||
{ itemsDom }
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
import AvatarList from './List'
|
|
||||||
import './index.less'
|
|
||||||
|
|
||||||
export default AvatarList
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
@import "../index";
|
|
||||||
|
|
||||||
@avatar-list-prefix-cls: ~"@{ant-pro-prefix}-avatar-list";
|
|
||||||
@avatar-list-item-prefix-cls: ~"@{ant-pro-prefix}-avatar-list-item";
|
|
||||||
|
|
||||||
.@{avatar-list-prefix-cls} {
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 0 0 8px;
|
|
||||||
font-size: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{avatar-list-item-prefix-cls} {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: @font-size-base;
|
|
||||||
margin-left: -8px;
|
|
||||||
width: @avatar-size-base;
|
|
||||||
height: @avatar-size-base;
|
|
||||||
|
|
||||||
:global {
|
|
||||||
.ant-avatar {
|
|
||||||
border: 1px solid #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.large {
|
|
||||||
width: @avatar-size-lg;
|
|
||||||
height: @avatar-size-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.small {
|
|
||||||
width: @avatar-size-sm;
|
|
||||||
height: @avatar-size-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mini {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
|
|
||||||
:global {
|
|
||||||
.ant-avatar {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
line-height: 20px;
|
|
||||||
|
|
||||||
.ant-avatar-string {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="result">
|
|
||||||
<div>
|
|
||||||
<a-icon :class="{ 'icon': true, 'success': isSuccess, 'error': !isSuccess }" :type="isSuccess ? 'check-circle' : 'close-circle'"/>
|
|
||||||
</div>
|
|
||||||
<div class="title" v-if="title">{{ title }}</div>
|
|
||||||
<div class="description" v-if="description">{{ description }}</div>
|
|
||||||
<div class="content" v-if="content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
<div class="action">
|
|
||||||
<slot name="action"></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Result',
|
|
||||||
props: {
|
|
||||||
isSuccess: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.result {
|
|
||||||
text-align: center;
|
|
||||||
width: 72%;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 24px 0 8px;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: 72px;
|
|
||||||
line-height: 72px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
.success {
|
|
||||||
color: #52c41a;
|
|
||||||
}
|
|
||||||
.error {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
color: rgba(0, 0, 0, .85);
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 32px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.description {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: rgba(0, 0, 0, 0.45);
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
background: #fafafa;
|
|
||||||
padding: 24px 40px;
|
|
||||||
border-radius: 2px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.action {
|
|
||||||
margin-top: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile {
|
|
||||||
.result {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
import Result from './Result.vue'
|
|
||||||
export default Result
|
|
||||||
|
|
@ -1,124 +0,0 @@
|
||||||
import { Menu, Icon, Input } from 'ant-design-vue'
|
|
||||||
|
|
||||||
const { Item, ItemGroup, SubMenu } = Menu
|
|
||||||
const { Search } = Input
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Tree',
|
|
||||||
props: {
|
|
||||||
dataSource: {
|
|
||||||
type: Array,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
openKeys: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
search: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.localOpenKeys = this.openKeys.slice(0)
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
localOpenKeys: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handlePlus(item) {
|
|
||||||
this.$emit('add', item)
|
|
||||||
},
|
|
||||||
handleTitleClick(...args) {
|
|
||||||
this.$emit('titleClick', { args })
|
|
||||||
},
|
|
||||||
|
|
||||||
renderSearch() {
|
|
||||||
return (
|
|
||||||
<Search
|
|
||||||
placeholder="input search text"
|
|
||||||
style="width: 100%; margin-bottom: 1rem"
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
renderIcon(icon) {
|
|
||||||
return icon && (<Icon type={icon} />) || null
|
|
||||||
},
|
|
||||||
renderMenuItem(item) {
|
|
||||||
return (
|
|
||||||
<Item key={item.key}>
|
|
||||||
{ this.renderIcon(item.icon) }
|
|
||||||
{ item.title }
|
|
||||||
<a class="btn" style="width: 20px;z-index:1300" {...{ on: { click: () => this.handlePlus(item) } }}><a-icon type="plus"/></a>
|
|
||||||
</Item>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
renderItem(item) {
|
|
||||||
return item.children ? this.renderSubItem(item, item.key) : this.renderMenuItem(item, item.key)
|
|
||||||
},
|
|
||||||
renderItemGroup(item) {
|
|
||||||
const childrenItems = item.children.map(o => {
|
|
||||||
return this.renderItem(o, o.key)
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ItemGroup key={item.key}>
|
|
||||||
<template slot="title">
|
|
||||||
<span>{ item.title }</span>
|
|
||||||
<a-dropdown>
|
|
||||||
<a class="btn"><a-icon type="ellipsis" /></a>
|
|
||||||
<a-menu slot="overlay">
|
|
||||||
<a-menu-item key="1">新增</a-menu-item>
|
|
||||||
<a-menu-item key="2">合并</a-menu-item>
|
|
||||||
<a-menu-item key="3">移除</a-menu-item>
|
|
||||||
</a-menu>
|
|
||||||
</a-dropdown>
|
|
||||||
</template>
|
|
||||||
{ childrenItems }
|
|
||||||
</ItemGroup>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
renderSubItem(item, key) {
|
|
||||||
const childrenItems = item.children && item.children.map(o => {
|
|
||||||
return this.renderItem(o, o.key)
|
|
||||||
})
|
|
||||||
|
|
||||||
const title = (
|
|
||||||
<span slot="title">
|
|
||||||
{ this.renderIcon(item.icon) }
|
|
||||||
<span>{ item.title }</span>
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
|
|
||||||
if (item.group) {
|
|
||||||
return this.renderItemGroup(item)
|
|
||||||
}
|
|
||||||
// titleClick={this.handleTitleClick(item)}
|
|
||||||
return (
|
|
||||||
<SubMenu key={key}>
|
|
||||||
{ title }
|
|
||||||
{ childrenItems }
|
|
||||||
</SubMenu>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
const { dataSource, search } = this.$props
|
|
||||||
|
|
||||||
// this.localOpenKeys = openKeys.slice(0)
|
|
||||||
const list = dataSource.map(item => {
|
|
||||||
return this.renderItem(item)
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="tree-wrapper">
|
|
||||||
{ search ? this.renderSearch() : null }
|
|
||||||
<Menu mode="inline" class="custom-tree" {...{ on: { click: item => this.$emit('click', item), 'update:openKeys': val => { this.localOpenKeys = val } } }} openKeys={this.localOpenKeys}>
|
|
||||||
{ list }
|
|
||||||
</Menu>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<template>
|
|
||||||
<div :class="[prefixCls, reverseColor && 'reverse-color' ]">
|
|
||||||
<span>
|
|
||||||
<slot name="term"></slot>
|
|
||||||
<span class="item-text">
|
|
||||||
<slot></slot>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span :class="[flag]"><a-icon :type="`caret-${flag}`"/></span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Trend',
|
|
||||||
props: {
|
|
||||||
prefixCls: {
|
|
||||||
type: String,
|
|
||||||
default: 'ant-pro-trend'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 上升下降标识：up|down
|
|
||||||
*/
|
|
||||||
flag: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 颜色反转
|
|
||||||
*/
|
|
||||||
reverseColor: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
@import "index";
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
import Trend from './Trend.vue'
|
|
||||||
|
|
||||||
export default Trend
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
@import "../index";
|
|
||||||
|
|
||||||
@trend-prefix-cls: ~"@{ant-pro-prefix}-trend";
|
|
||||||
|
|
||||||
.@{trend-prefix-cls} {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: @font-size-base;
|
|
||||||
line-height: 22px;
|
|
||||||
|
|
||||||
.up,
|
|
||||||
.down {
|
|
||||||
margin-left: 4px;
|
|
||||||
position: relative;
|
|
||||||
top: 1px;
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: 12px;
|
|
||||||
transform: scale(0.83);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-text {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 8px;
|
|
||||||
color: rgba(0,0,0,.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.up {
|
|
||||||
color: @red-6;
|
|
||||||
}
|
|
||||||
.down {
|
|
||||||
color: @green-6;
|
|
||||||
top: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.reverse-color .up {
|
|
||||||
color: @green-6;
|
|
||||||
}
|
|
||||||
&.reverse-color .down {
|
|
||||||
color: @red-6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
# Trend 趋势标记
|
|
||||||
|
|
||||||
趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
引用方式：
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
import Trend from '@/components/Trend'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
Trend
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 代码演示 [demo](https://pro.loacg.com/test/home)
|
|
||||||
|
|
||||||
```html
|
|
||||||
<trend flag="up">5%</trend>
|
|
||||||
```
|
|
||||||
或
|
|
||||||
```html
|
|
||||||
<trend flag="up">
|
|
||||||
<span slot="term">工资</span>
|
|
||||||
5%
|
|
||||||
</trend>
|
|
||||||
```
|
|
||||||
或
|
|
||||||
```html
|
|
||||||
<trend flag="up" term="工资">5%</trend>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
|----------|------------------------------------------|-------------|-------|
|
|
||||||
| flag | 上升下降标识：`up|down` | string | - |
|
|
||||||
| reverseColor | 颜色反转 | Boolean | false |
|
|
||||||
|
|
||||||
|
|
@ -1,26 +1,18 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
// pro components
|
// pro components
|
||||||
import AvatarList from '@/components/AvatarList'
|
|
||||||
import Ellipsis from '@/components/Ellipsis'
|
import Ellipsis from '@/components/Ellipsis'
|
||||||
import FooterToolbar from '@/components/FooterToolbar'
|
import FooterToolbar from '@/components/FooterToolbar'
|
||||||
import NumberInfo from '@/components/NumberInfo'
|
import NumberInfo from '@/components/NumberInfo'
|
||||||
import DescriptionList from '@/components/DescriptionList'
|
import DescriptionList from '@/components/DescriptionList'
|
||||||
import Tree from '@/components/Tree/Tree'
|
|
||||||
import Trend from '@/components/Trend'
|
|
||||||
import Result from '@/components/Result'
|
|
||||||
import ExceptionPage from '@/components/Exception'
|
import ExceptionPage from '@/components/Exception'
|
||||||
import Upload from '@/components/Upload/Upload'
|
import Upload from '@/components/Upload/Upload'
|
||||||
|
|
||||||
const _components = {
|
const _components = {
|
||||||
AvatarList,
|
|
||||||
Trend,
|
|
||||||
Ellipsis,
|
Ellipsis,
|
||||||
FooterToolbar,
|
FooterToolbar,
|
||||||
NumberInfo,
|
NumberInfo,
|
||||||
DescriptionList,
|
DescriptionList,
|
||||||
Tree,
|
|
||||||
Result,
|
|
||||||
ExceptionPage,
|
ExceptionPage,
|
||||||
Upload
|
Upload
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,18 +47,6 @@
|
||||||
layout="horizontal"
|
layout="horizontal"
|
||||||
v-show="stepCurrent == 0"
|
v-show="stepCurrent == 0"
|
||||||
>
|
>
|
||||||
<a-form-item
|
|
||||||
label="博客名称"
|
|
||||||
v-bind="formItemLayout"
|
|
||||||
>
|
|
||||||
<a-input />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="博客地址"
|
|
||||||
v-bind="formItemLayout"
|
|
||||||
>
|
|
||||||
<a-input />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="用户名"
|
label="用户名"
|
||||||
v-bind="formItemLayout"
|
v-bind="formItemLayout"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue