Commit 93ed56a2 authored by 季圣华's avatar 季圣华
Browse files

去除多余的文件

parent 35482c7b
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1361px" height="609px" viewBox="0 0 1361 609" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Group 21</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Ant-Design-Pro-3.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="账户密码登录-校验" transform="translate(-79.000000, -82.000000)">
<g id="Group-21" transform="translate(77.000000, 73.000000)">
<g id="Group-18" opacity="0.8" transform="translate(74.901416, 569.699158) rotate(-7.000000) translate(-74.901416, -569.699158) translate(4.901416, 525.199158)">
<ellipse id="Oval-11" fill="#CFDAE6" opacity="0.25" cx="63.5748792" cy="32.468367" rx="21.7830479" ry="21.766008"></ellipse>
<ellipse id="Oval-3" fill="#CFDAE6" opacity="0.599999964" cx="5.98746479" cy="13.8668601" rx="5.2173913" ry="5.21330997"></ellipse>
<path d="M38.1354514,88.3520215 C43.8984227,88.3520215 48.570234,83.6838647 48.570234,77.9254015 C48.570234,72.1669383 43.8984227,67.4987816 38.1354514,67.4987816 C32.3724801,67.4987816 27.7006688,72.1669383 27.7006688,77.9254015 C27.7006688,83.6838647 32.3724801,88.3520215 38.1354514,88.3520215 Z" id="Oval-3-Copy" fill="#CFDAE6" opacity="0.45"></path>
<path d="M64.2775582,33.1704963 L119.185836,16.5654915" id="Path-12" stroke="#CFDAE6" stroke-width="1.73913043" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M42.1431708,26.5002681 L7.71190162,14.5640702" id="Path-16" stroke="#E0B4B7" stroke-width="0.702678964" opacity="0.7" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
<path d="M63.9262187,33.521561 L43.6721326,69.3250951" id="Path-15" stroke="#BACAD9" stroke-width="0.702678964" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
<g id="Group-17" transform="translate(126.850922, 13.543654) rotate(30.000000) translate(-126.850922, -13.543654) translate(117.285705, 4.381889)" fill="#CFDAE6">
<ellipse id="Oval-4" opacity="0.45" cx="9.13482653" cy="9.12768076" rx="9.13482653" ry="9.12768076"></ellipse>
<path d="M18.2696531,18.2553615 C18.2696531,13.2142826 14.1798519,9.12768076 9.13482653,9.12768076 C4.08980114,9.12768076 0,13.2142826 0,18.2553615 L18.2696531,18.2553615 Z" id="Oval-4" transform="translate(9.134827, 13.691521) scale(-1, -1) translate(-9.134827, -13.691521) "></path>
</g>
</g>
<g id="Group-14" transform="translate(216.294700, 123.725600) rotate(-5.000000) translate(-216.294700, -123.725600) translate(106.294700, 35.225600)">
<ellipse id="Oval-2" fill="#CFDAE6" opacity="0.25" cx="29.1176471" cy="29.1402439" rx="29.1176471" ry="29.1402439"></ellipse>
<ellipse id="Oval-2" fill="#CFDAE6" opacity="0.3" cx="29.1176471" cy="29.1402439" rx="21.5686275" ry="21.5853659"></ellipse>
<ellipse id="Oval-2-Copy" stroke="#CFDAE6" opacity="0.4" cx="179.019608" cy="138.146341" rx="23.7254902" ry="23.7439024"></ellipse>
<ellipse id="Oval-2" fill="#BACAD9" opacity="0.5" cx="29.1176471" cy="29.1402439" rx="10.7843137" ry="10.7926829"></ellipse>
<path d="M29.1176471,39.9329268 L29.1176471,18.347561 C23.1616351,18.347561 18.3333333,23.1796097 18.3333333,29.1402439 C18.3333333,35.1008781 23.1616351,39.9329268 29.1176471,39.9329268 Z" id="Oval-2" fill="#BACAD9"></path>
<g id="Group-9" opacity="0.45" transform="translate(172.000000, 131.000000)" fill="#E6A1A6">
<ellipse id="Oval-2-Copy-2" cx="7.01960784" cy="7.14634146" rx="6.47058824" ry="6.47560976"></ellipse>
<path d="M0.549019608,13.6219512 C4.12262681,13.6219512 7.01960784,10.722722 7.01960784,7.14634146 C7.01960784,3.56996095 4.12262681,0.670731707 0.549019608,0.670731707 L0.549019608,13.6219512 Z" id="Oval-2-Copy-2" transform="translate(3.784314, 7.146341) scale(-1, 1) translate(-3.784314, -7.146341) "></path>
</g>
<ellipse id="Oval-10" fill="#CFDAE6" cx="218.382353" cy="138.685976" rx="1.61764706" ry="1.61890244"></ellipse>
<ellipse id="Oval-10-Copy-2" fill="#E0B4B7" opacity="0.35" cx="179.558824" cy="175.381098" rx="1.61764706" ry="1.61890244"></ellipse>
<ellipse id="Oval-10-Copy" fill="#E0B4B7" opacity="0.35" cx="180.098039" cy="102.530488" rx="2.15686275" ry="2.15853659"></ellipse>
<path d="M28.9985381,29.9671598 L171.151018,132.876024" id="Path-11" stroke="#CFDAE6" opacity="0.8"></path>
</g>
<g id="Group-10" opacity="0.799999952" transform="translate(1054.100635, 36.659317) rotate(-11.000000) translate(-1054.100635, -36.659317) translate(1026.600635, 4.659317)">
<ellipse id="Oval-7" stroke="#CFDAE6" stroke-width="0.941176471" cx="43.8135593" cy="32" rx="11.1864407" ry="11.2941176"></ellipse>
<g id="Group-12" transform="translate(34.596774, 23.111111)" fill="#BACAD9">
<ellipse id="Oval-7" opacity="0.45" cx="9.18534718" cy="8.88888889" rx="8.47457627" ry="8.55614973"></ellipse>
<path d="M9.18534718,17.4450386 C13.8657264,17.4450386 17.6599235,13.6143199 17.6599235,8.88888889 C17.6599235,4.16345787 13.8657264,0.332739156 9.18534718,0.332739156 L9.18534718,17.4450386 Z" id="Oval-7"></path>
</g>
<path d="M34.6597385,24.809694 L5.71666084,4.76878945" id="Path-2" stroke="#CFDAE6" stroke-width="0.941176471"></path>
<ellipse id="Oval" stroke="#CFDAE6" stroke-width="0.941176471" cx="3.26271186" cy="3.29411765" rx="3.26271186" ry="3.29411765"></ellipse>
<ellipse id="Oval-Copy" fill="#F7E1AD" cx="2.79661017" cy="61.1764706" rx="2.79661017" ry="2.82352941"></ellipse>
<path d="M34.6312443,39.2922712 L5.06366663,59.785082" id="Path-10" stroke="#CFDAE6" stroke-width="0.941176471"></path>
</g>
<g id="Group-19" opacity="0.33" transform="translate(1282.537219, 446.502867) rotate(-10.000000) translate(-1282.537219, -446.502867) translate(1142.537219, 327.502867)">
<g id="Group-17" transform="translate(141.333539, 104.502742) rotate(275.000000) translate(-141.333539, -104.502742) translate(129.333539, 92.502742)" fill="#BACAD9">
<circle id="Oval-4" opacity="0.45" cx="11.6666667" cy="11.6666667" r="11.6666667"></circle>
<path d="M23.3333333,23.3333333 C23.3333333,16.8900113 18.1099887,11.6666667 11.6666667,11.6666667 C5.22334459,11.6666667 0,16.8900113 0,23.3333333 L23.3333333,23.3333333 Z" id="Oval-4" transform="translate(11.666667, 17.500000) scale(-1, -1) translate(-11.666667, -17.500000) "></path>
</g>
<circle id="Oval-5-Copy-6" fill="#CFDAE6" cx="201.833333" cy="87.5" r="5.83333333"></circle>
<path d="M143.5,88.8126685 L155.070501,17.6038544" id="Path-17" stroke="#BACAD9" stroke-width="1.16666667"></path>
<path d="M17.5,37.3333333 L127.466252,97.6449735" id="Path-18" stroke="#BACAD9" stroke-width="1.16666667"></path>
<polyline id="Path-19" stroke="#CFDAE6" stroke-width="1.16666667" points="143.902597 120.302281 174.935455 231.571342 38.5 147.510847 126.366941 110.833333"></polyline>
<path d="M159.833333,99.7453842 L195.416667,89.25" id="Path-20" stroke="#E0B4B7" stroke-width="1.16666667" opacity="0.6"></path>
<path d="M205.333333,82.1372105 L238.719406,36.1666667" id="Path-24" stroke="#BACAD9" stroke-width="1.16666667"></path>
<path d="M266.723424,132.231988 L207.083333,90.4166667" id="Path-25" stroke="#CFDAE6" stroke-width="1.16666667"></path>
<circle id="Oval-5" fill="#C1D1E0" cx="156.916667" cy="8.75" r="8.75"></circle>
<circle id="Oval-5-Copy-3" fill="#C1D1E0" cx="39.0833333" cy="148.75" r="5.25"></circle>
<circle id="Oval-5-Copy-2" fill-opacity="0.6" fill="#D1DEED" cx="8.75" cy="33.25" r="8.75"></circle>
<circle id="Oval-5-Copy-4" fill-opacity="0.6" fill="#D1DEED" cx="243.833333" cy="30.3333333" r="5.83333333"></circle>
<circle id="Oval-5-Copy-5" fill="#E0B4B7" cx="175.583333" cy="232.75" r="5.25"></circle>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import store from '@/store'
/**
* 单点登录
*/
const init = (callback) => {
console.log("-------单点登录开始-------");
let token = Vue.ls.get(ACCESS_TOKEN);
let st = getUrlParam("ticket");
let sevice = "http://"+window.location.host+"/";
if(token){
loginSuccess(callback);
}else{
if(st){
validateSt(st,sevice,callback);
}else{
let serviceUrl = encodeURIComponent(sevice);
window.location.href = window._CONFIG['casPrefixUrl']+"/login?service="+serviceUrl;
}
}
console.log("-------单点登录结束-------");
};
const SSO = {
init: init
};
function getUrlParam(paraName) {
let url = document.location.toString();
let arrObj = url.split("?");
if (arrObj.length > 1) {
let arrPara = arrObj[1].split("&");
let arr;
for (let i = 0; i < arrPara.length; i++) {
arr = arrPara[i].split("=");
if (arr != null && arr[0] == paraName) {
return arr[1];
}
}
return "";
}
else {
return "";
}
}
function validateSt(ticket,service,callback){
let params = {
ticket: ticket,
service:service
};
store.dispatch('ValidateLogin',params).then(res => {
//this.departConfirm(res)
if(res.success){
loginSuccess(callback);
}else{
let sevice = "http://"+window.location.host+"/";
let serviceUrl = encodeURIComponent(sevice);
window.location.href = window._CONFIG['casPrefixUrl']+"/login?service="+serviceUrl;
}
}).catch((err) => {
console.log(err);
//that.requestFailed(err);
});
}
function loginSuccess (callback) {
callback();
}
export default SSO;
\ No newline at end of file
Table 重封装组件说明
====
封装说明
----
> 基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致,在其基础上,封装了加载数据的方法。
>
> 你无需在你是用表格的页面进行分页逻辑处理,仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可
例子1
----
(基础使用)
```vue
<template>
<s-table
ref="table"
:rowKey="(record) => record.data.id"
size="default"
:columns="columns"
:data="loadData"
>
</s-table>
</template>
<script>
import STable from '@/components/table/'
export default {
components: {
STable
},
data() {
return {
columns: [
{
title: '规则编号',
dataIndex: 'no'
},
{
title: '描述',
dataIndex: 'description'
},
{
title: '服务调用次数',
dataIndex: 'callNo',
sorter: true,
needTotal: true,
customRender: (text) => text + ''
},
{
title: '状态',
dataIndex: 'status',
needTotal: true
},
{
title: '更新时间',
dataIndex: 'updatedAt',
sorter: true
}
],
// 查询条件参数
queryParam: {},
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return this.$http.get('/service', {
params: Object.assign(parameter, this.queryParam)
}).then(res => {
return res.result
})
},
}
}
}
</script>
```
例子2
----
(简单的表格,最后一列是各种操作)
```vue
<template>
<s-table
ref="table"
size="default"
:columns="columns"
:data="loadData"
>
<span slot="action" slot-scope="text, record">
<a>编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">
更多 <a-icon type="down"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">1st menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">2nd menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">3rd menu item</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</s-table>
</template>
<script>
import STable from '@/components/table/'
export default {
components: {
STable
},
data() {
return {
columns: [
{
title: '规则编号',
dataIndex: 'no'
},
{
title: '描述',
dataIndex: 'description'
},
{
title: '服务调用次数',
dataIndex: 'callNo',
},
{
title: '状态',
dataIndex: 'status',
},
{
title: '更新时间',
dataIndex: 'updatedAt',
},
{
table: '操作',
dataIndex: 'action',
scopedSlots: {customRender: 'action'},
}
],
// 查询条件参数
queryParam: {},
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return this.$http.get('/service', {
params: Object.assign(parameter, this.queryParam)
}).then(res => {
return res.result
})
},
}
},
methods: {
edit(row) {
// axios 发送数据到后端 修改数据成功后
// 调用 refresh() 重新加载列表数据
// 这里 setTimeout 模拟发起请求的网络延迟..
setTimeout(() => {
this.$refs.table.refresh()
}, 1500)
}
}
}
</script>
```
内置方法
----
通过 `this.$refs.table` 调用
`this.$refs.table.refresh()` 刷新列表 (用户新增/修改数据后,重载列表数据)
> 注意:要调用 `refresh()` 需要给表格组件设定 `ref` 值
注意事项
----
> 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码:
(需要注意的是,这里的修改是全局性的,意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。)
修改 `@/components/table/index.js` 第 106 行起
```javascript
result.then(r => {
this.localPagination = Object.assign({}, this.localPagination, {
current: r.pageNo, // 返回结果中的当前分页数
total: r.totalCount, // 返回结果中的总记录数
showSizeChanger: this.showSizeChanger,
pageSize: (pagination && pagination.pageSize) ||
this.localPagination.pageSize
});
!r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
this.localDataSource = r.data; // 返回结果中的数组数据
this.localLoading = false
});
```
返回 JSON 例子:
```json
{
"message": "",
"result": {
"data": [{
id: 1,
cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
title: 'Alipay',
description: '那是一种内在的东西, 他们到达不了,也无法触及的',
status: 1,
updatedAt: '2018-07-26 00:00:00'
},
{
id: 2,
cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
title: 'Angular',
description: '希望是一个好东西,也许是最好的,好东西是不会消亡的',
status: 1,
updatedAt: '2018-07-26 00:00:00'
},
{
id: 3,
cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
title: 'Ant Design',
description: '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆',
status: 1,
updatedAt: '2018-07-26 00:00:00'
},
{
id: 4,
cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
title: 'Ant Design Pro',
description: '那时候我只会想自己想要什么,从不想自己拥有什么',
status: 1,
updatedAt: '2018-07-26 00:00:00'
},
{
id: 5,
cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
title: 'Bootstrap',
description: '凛冬将至',
status: 1,
updatedAt: '2018-07-26 00:00:00'
},
{
id: 6,
cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png',
title: 'Vue',
description: '生命就像一盒巧克力,结果往往出人意料',
status: 1,
updatedAt: '2018-07-26 00:00:00'
}
],
"pageSize": 10,
"pageNo": 0,
"totalPage": 6,
"totalCount": 57
},
"status": 200,
"timestamp": 1534955098193
}
```
更新时间
----
该文档最后更新于: 2018-10-31 PM 08:15
\ No newline at end of file
/**
*
*/
import { disabledAuthFilter } from "@/utils/authFilter"
export const DisabledAuthFilterMixin = {
props: ['formData'],
data(){
return {
}
},
methods:{
isDisabledAuth(code){
return disabledAuthFilter(code,this.formData);
},
}
}
\ No newline at end of file
<template>
<div class="page-header-index-wide page-header-wrapper-grid-content-main">
<a-row :gutter="24">
<a-col :md="24" :lg="7">
<a-card :bordered="false">
<div class="account-center-avatarHolder">
<div class="avatar">
<img :src="getAvatar()"/>
</div>
<div class="username">{{ nickname() }}</div>
<div class="bio">海纳百川,有容乃大</div>
</div>
<div class="account-center-detail">
<p>
<i class="title"></i>交互专家
</p>
<p>
<i class="group"></i>蚂蚁金服-某某某事业群-某某平台部-某某技术部-UED
</p>
<p>
<i class="address"></i><span>浙江省</span><span>杭州市</span>
</p>
</div>
<a-divider />
<div class="account-center-tags">
<div class="tagsTitle">标签</div>
<div>
<template v-for="(tag, index) in tags">
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
<a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
{{ `${tag.slice(0, 20)}...` }}
</a-tag>
</a-tooltip>
<a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">{{ tag }}</a-tag>
</template>
<a-input
v-if="tagInputVisible"
ref="tagInput"
type="text"
size="small"
:style="{ width: '78px' }"
:value="tagInputValue"
@change="handleInputChange"
@blur="handleTagInputConfirm"
@keyup.enter="handleTagInputConfirm"
/>
<a-tag v-else @click="showTagInput" style="background: #fff; borderStyle: dashed;">
<a-icon type="plus" /> New Tag
</a-tag>
</div>
</div>
<a-divider :dashed="true" />
<div class="account-center-team">
<div class="teamTitle">团队</div>
<a-spin :spinning="teamSpinning">
<div class="members">
<a-row>
<a-col :span="12" v-for="(item, index) in teams" :key="index">
<a>
<a-avatar size="small" :src="item.avatar" />
<span class="member">{{ item.name }}</span>
</a>
</a-col>
</a-row>
</div>
</a-spin>
</div>
</a-card>
</a-col>
<a-col :md="24" :lg="17">
<a-card
style="width:100%"
:bordered="false"
:tabList="tabListNoTitle"
:activeTabKey="noTitleKey"
@tabChange="key => handleTabChange(key, 'noTitleKey')"
>
<article-page v-if="noTitleKey === 'article'"></article-page>
<app-page v-else-if="noTitleKey === 'app'"></app-page>
<project-page v-else-if="noTitleKey === 'project'"></project-page>
</a-card>
</a-col>
</a-row>
</div>
</template>
<script>
import PageLayout from '@/components/page/PageLayout'
import RouteView from "@/components/layouts/RouteView"
import { AppPage, ArticlePage, ProjectPage } from './page'
import { mapGetters } from 'vuex'
import { getFileAccessHttpUrl } from '@/api/manage';
export default {
components: {
RouteView,
PageLayout,
AppPage,
ArticlePage,
ProjectPage
},
data() {
return {
tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
tagInputVisible: false,
tagInputValue: '',
teams: [],
teamSpinning: true,
tabListNoTitle: [{
key: 'article',
tab: '文章(8)',
}, {
key: 'app',
tab: '应用(8)',
}, {
key: 'project',
tab: '项目(8)',
}
],
noTitleKey: 'app',
}
},
mounted () {
this.getTeams()
},
methods: {
...mapGetters(["nickname", "avatar"]),
getAvatar(){
return getFileAccessHttpUrl(this.avatar());
},
getTeams() {
this.$http.get('/api/workplace/teams')
.then(res => {
this.teams = res.result
this.teamSpinning = false
})
},
handleTabChange (key, type) {
this[type] = key
},
handleTagClose (removeTag) {
const tags = this.tags.filter(tag => tag != removeTag)
this.tags = tags
},
showTagInput () {
this.tagInputVisible = true
this.$nextTick(() => {
this.$refs.tagInput.focus()
})
},
handleInputChange (e) {
this.tagInputValue = e.target.value
},
handleTagInputConfirm () {
const inputValue = this.tagInputValue
let tags = this.tags
if (inputValue && tags.indexOf(inputValue) === -1) {
tags = [...tags, inputValue]
}
Object.assign(this, {
tags,
tagInputVisible: false,
tagInputValue: ''
})
}
},
}
</script>
<style lang="less" scoped>
.page-header-wrapper-grid-content-main {
width: 100%;
height: 100%;
min-height: 100%;
transition: .3s;
.account-center-avatarHolder {
text-align: center;
margin-bottom: 24px;
& > .avatar {
margin: 0 auto;
width: 104px;
height: 104px;
margin-bottom: 20px;
border-radius: 50%;
overflow: hidden;
img {
height: 100%;
width: 100%;
}
}
.username {
color: rgba(0, 0, 0, 0.85);
font-size: 20px;
line-height: 28px;
font-weight: 500;
margin-bottom: 4px;
}
}
.account-center-detail {
p {
margin-bottom: 8px;
padding-left: 26px;
position: relative;
}
i {
position: absolute;
height: 14px;
width: 14px;
left: 0;
top: 4px;
background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg)
}
.title {
background-position: 0 0;
}
.group {
background-position: 0 -22px;
}
.address {
background-position: 0 -44px;
}
}
.account-center-tags {
.ant-tag {
margin-bottom: 8px;
}
}
.account-center-team {
.members {
a {
display: block;
margin: 12px 0;
line-height: 24px;
height: 24px;
.member {
font-size: 14px;
color: rgba(0, 0, 0, .65);
line-height: 24px;
max-width: 100px;
vertical-align: top;
margin-left: 12px;
transition: all 0.3s;
display: inline-block;
}
&:hover {
span {
color: #1890ff;
}
}
}
}
}
.tagsTitle, .teamTitle {
font-weight: 500;
color: rgba(0,0,0,.85);
margin-bottom: 12px;
}
}
</style>
\ No newline at end of file
<template>
<div class="app-list">
<a-list
:grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
:dataSource="dataSource">
<a-list-item slot="renderItem" slot-scope="item, index">
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="small"/>
<div class="meta-cardInfo" slot="description">
<div>
<p>活跃用户</p>
<p>
<span>{{ item.activeUser }}<span></span></span>
</p>
</div>
<div>
<p>新增用户</p>
<p>{{ item.newUser | NumberFormat }}</p>
</div>
</div>
</a-card-meta>
<template class="ant-card-actions" slot="actions">
<a>
<a-icon type="download"/>
</a>
<a>
<a-icon type="edit"/>
</a>
<a>
<a-icon type="share-alt"/>
</a>
<a>
<a-dropdown>
<a class="ant-dropdown-link" href="javascript:;">
<a-icon type="ellipsis"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">1st menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">2nd menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">3rd menu item</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</a>
</template>
</a-card>
</a-list-item>
</a-list>
</div>
</template>
<script>
const dataSource = []
for (let i = 0; i < 11; i++) {
dataSource.push({
title: 'Alipay',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
activeUser: 17,
newUser: 1700
})
}
export default {
name: "Article",
components: {},
data() {
return {
dataSource,
}
}
}
</script>
<style lang="less" scoped>
.app-list {
.meta-cardInfo {
zoom: 1;
margin-top: 16px;
> div {
position: relative;
text-align: left;
float: left;
width: 50%;
p {
line-height: 32px;
font-size: 24px;
margin: 0;
&:first-child {
color: rgba(0, 0, 0, .45);
font-size: 12px;
line-height: 20px;
margin-bottom: 4px;
}
}
}
}
}
</style>
\ No newline at end of file
<template>
<a-list>
<a-list-item>
</a-list-item>
</a-list>
</template>
<script>
import AList from 'ant-design-vue/es/list'
import AListItem from 'ant-design-vue/es/list/Item'
export default {
name: "Article",
components: {
AList,
AListItem
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-list>
<a-list-item>
</a-list-item>
</a-list>
</template>
<script>
export default {
name: "Project"
}
</script>
<style scoped>
</style>
\ No newline at end of file
import AppPage from './App'
import ArticlePage from './Article'
import ProjectPage from './Project'
export { AppPage, ArticlePage, ProjectPage }
\ No newline at end of file
<template>
<a-modal :visible="visible" title="修改头像" :maskClosable="false" :confirmLoading="confirmLoading" :width="800">
<a-row>
<a-col :xs="24" :md="12" :style="{height: '350px'}">
<vue-cropper
ref="cropper"
:img="options.img"
:info="true"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
@realTime="realTime"
>
</vue-cropper>
</a-col>
<a-col :xs="24" :md="12" :style="{height: '350px'}">
<div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img"/>
</div>
</a-col>
</a-row>
<template slot="footer">
<a-button key="back" @click="cancelHandel">取消</a-button>
<a-button key="submit" type="primary" :loading="confirmLoading" @click="okHandel">保存</a-button>
</template>
</a-modal>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
components: {
VueCropper
},
data() {
return {
visible: false,
id: null,
confirmLoading: false,
options: {
img: '/avatar2.jpg',
autoCrop: true,
autoCropWidth: 200,
autoCropHeight: 200,
fixedBox: true
},
previews: {},
};
},
methods: {
edit(id) {
this.visible = true;
this.id = id;
/* 获取原始头像 */
},
close() {
this.id = null;
this.visible = false;
},
cancelHandel() {
this.close();
},
okHandel() {
const vm = this
vm.confirmLoading = true
setTimeout(() => {
vm.confirmLoading = false
vm.close()
vm.$message.success('上传头像成功');
}, 2000)
},
realTime(data) {
this.previews = data
}
}
};
</script>
<style lang="less" scoped>
.avatar-upload-preview {
position: absolute;
top: 50%;
transform: translate(50%, -50%);
width: 180px;
height: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file
<template>
<div class="account-settings-info-view">
<a-row :gutter="16">
<a-col :md="24" :lg="16">
<a-form layout="vertical">
<a-form-item
label="昵称"
>
<a-input placeholder="给自己起个名字" />
</a-form-item>
<a-form-item
label="Bio"
>
<a-textarea rows="4" placeholder="You are not alone."/>
</a-form-item>
<a-form-item
label="电子邮件"
:required="false"
>
<a-input placeholder="exp@admin.com"/>
</a-form-item>
<a-form-item
label="加密方式"
:required="false"
>
<a-select defaultValue="aes-256-cfb">
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
<a-select-option value="chacha20">chacha20</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="连接密码"
:required="false"
>
<a-input placeholder="h3gSbecd"/>
</a-form-item>
<a-form-item
label="登陆密码"
:required="false"
>
<a-input placeholder="密码"/>
</a-form-item>
<a-form-item>
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-col>
<a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
<div class="ant-upload-preview" @click="$refs.modal.edit(1)" >
<a-icon type="cloud-upload-o" class="upload-icon"/>
<div class="mask">
<a-icon type="plus" />
</div>
<img :src="option.img"/>
</div>
</a-col>
</a-row>
<avatar-modal ref="modal">
</avatar-modal>
</div>
</template>
<script>
import AvatarModal from './AvatarModal'
export default {
components: {
AvatarModal
},
data () {
return {
// cropper
preview: {},
option: {
img: '/avatar2.jpg',
info: true,
size: 1,
outputType: 'jpeg',
canScale: false,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 180,
autoCropHeight: 180,
fixedBox: true,
// 开启宽度和高度比例
fixed: true,
fixedNumber: [1, 1]
}
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.avatar-upload-wrapper {
height: 200px;
width: 100%;
}
.ant-upload-preview {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
.upload-icon {
position: absolute;
top: 0;
right: 10px;
font-size: 1.4rem;
padding: 0.5rem;
background: rgba(222, 221, 221, 0.7);
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.mask {
opacity: 0;
position: absolute;
background: rgba(0,0,0,0.4);
cursor: pointer;
transition: opacity 0.4s;
&:hover {
opacity: 1;
}
i {
font-size: 2rem;
position: absolute;
top: 50%;
left: 50%;
margin-left: -1rem;
margin-top: -1rem;
color: #d6d6d6;
}
}
img, .mask {
width: 100%;
max-width: 180px;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
}
</style>
\ No newline at end of file
<template>
<a-list
itemLayout="horizontal"
:dataSource="data"
>
</a-list>
</template>
<script>
export default {
data () {
return {
data: []
}
},
methods: {
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<script>
import { colorList } from '@/components/tools/setting'
import ASwitch from 'ant-design-vue/es/switch'
import AList from "ant-design-vue/es/list"
import AListItem from "ant-design-vue/es/list/Item"
import { mixin } from '@/utils/mixin.js'
const Meta = AListItem.Meta
export default {
components: {
AListItem,
AList,
ASwitch,
Meta
},
mixins: [mixin],
data () {
return {
}
},
filters: {
themeFilter(theme) {
const themeMap = {
'dark': '暗色',
'light': '白色'
}
return themeMap[theme]
},
},
methods: {
colorFilter(color) {
const c = colorList.filter(o => o.color === color)[0]
return c && c.key
},
onChange (checked) {
if (checked) {
this.$store.dispatch('ToggleTheme', 'dark')
} else {
this.$store.dispatch('ToggleTheme', 'light')
}
}
},
render () {
return (
<AList itemLayout="horizontal">
<AListItem>
<Meta>
<a slot="title">风格配色</a>
<span slot="description">
整体风格配色设置
</span>
</Meta>
<div slot="actions">
<ASwitch checkedChildren="暗色" unCheckedChildren="白色" defaultChecked={this.navTheme === 'dark' && true || false} onChange={this.onChange} />
</div>
</AListItem>
<AListItem>
<Meta>
<a slot="title">主题色</a>
<span slot="description">
页面风格配色 <a domPropsInnerHTML={ this.colorFilter(this.primaryColor) }/>
</span>
</Meta>
</AListItem>
</AList>
)
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<div class="page-header-index-wide">
<a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
<div class="account-settings-info-main" :class="device" :style=" 'min-height:'+ mainInfoHeight ">
<div class="account-settings-info-left">
<a-menu
:mode="device == 'mobile' ? 'horizontal' : 'inline'"
:style="{ border: '0', width: device == 'mobile' ? '560px' : 'auto'}"
:defaultSelectedKeys="defaultSelectedKeys"
type="inner"
@openChange="onOpenChange"
>
<a-menu-item key="/account/settings/base">
<router-link :to="{ name: 'account-settings-base' }">
基本设置
</router-link>
</a-menu-item>
<a-menu-item key="/account/settings/security">
<router-link :to="{ name: 'account-settings-security' }">
安全设置
</router-link>
</a-menu-item>
<a-menu-item key="/account/settings/custom">
<router-link :to="{ name: 'account-settings-custom' }">
个性化
</router-link>
</a-menu-item>
<a-menu-item key="/account/settings/binding">
<router-link :to="{ name: 'account-settings-binding' }">
账户绑定
</router-link>
</a-menu-item>
<a-menu-item key="/account/settings/notification">
<router-link :to="{ name: 'account-settings-notification' }">
新消息通知
</router-link>
</a-menu-item>
</a-menu>
</div>
<div class="account-settings-info-right">
<div class="account-settings-info-title">
<span>{{ $route.meta.title }}</span>
</div>
<route-view></route-view>
</div>
</div>
</a-card>
</div>
</template>
<script>
import PageLayout from '@/components/page/PageLayout'
import RouteView from "@/components/layouts/RouteView"
import { mixinDevice } from '@/utils/mixin.js'
export default {
components: {
RouteView,
PageLayout
},
mixins: [mixinDevice],
data () {
return {
// horizontal inline
mode: 'inline',
mainInfoHeight:"100%",
openKeys: [],
defaultSelectedKeys: [],
// cropper
preview: {},
option: {
img: '/avatar2.jpg',
info: true,
size: 1,
outputType: 'jpeg',
canScale: false,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 180,
autoCropHeight: 180,
fixedBox: true,
// 开启宽度和高度比例
fixed: true,
fixedNumber: [1, 1]
},
pageTitle: ''
}
},
created () {
this.updateMenu()
},
mounted(){
this.mainInfoHeight = (window.innerHeight-285)+"px";
},
methods: {
onOpenChange (openKeys) {
this.openKeys = openKeys
},
updateMenu () {
let routes = this.$route.matched.concat()
this.defaultSelectedKeys = [ routes.pop().path ]
}
},
}
</script>
<style lang="less" scoped>
.account-settings-info-main {
width: 100%;
display: flex;
height: 100%;
overflow: auto;
&.mobile {
display: block;
.account-settings-info-left {
border-right: unset;
border-bottom: 1px solid #e8e8e8;
width: 100%;
height: 50px;
overflow-x: auto;
overflow-y: scroll;
}
.account-settings-info-right {
padding: 20px 40px;
}
}
.account-settings-info-left {
border-right: 1px solid #e8e8e8;
width: 224px;
}
.account-settings-info-right {
flex: 1 1;
padding: 8px 40px;
.account-settings-info-title {
color: rgba(0,0,0,.85);
font-size: 20px;
font-weight: 500;
line-height: 28px;
margin-bottom: 12px;
}
.account-settings-info-view {
padding-top: 12px;
}
}
}
</style>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment