前端添加用户信息界面
This commit is contained in:
橙子
Binary file not shown.
@@ -33,11 +33,11 @@ namespace Yi.Framework.WebCore
|
||||
{
|
||||
IEnumerable<Claim> claimlist = httpContext.AuthenticateAsync().Result.Principal.Claims;
|
||||
|
||||
Int32.TryParse(claimlist.FirstOrDefault(u => u.Type == "id").Value,out int resId);
|
||||
Int32.TryParse(claimlist.FirstOrDefault(u => u.Type == ClaimTypes.Sid).Value,out int resId);
|
||||
return new user()
|
||||
{
|
||||
id =resId,
|
||||
username = claimlist.FirstOrDefault(u => u.Type == "username").Value ?? "匿名"
|
||||
username = claimlist.FirstOrDefault(u => u.Type == ClaimTypes.Name).Value ?? "匿名"
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
@@ -113,7 +112,6 @@
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
import itemApi from "./TableApi.js";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<app-btn dark class="ma-2" @click="dialog = true"> 添加新项 </app-btn>
|
||||
<app-btn dark class="ma-2" color="secondary" @click="deleteItem(null)">
|
||||
<app-btn dark class="ma-4" @click="dialog = true"> 添加新项 </app-btn>
|
||||
<app-btn dark class="ma-4" color="secondary" @click="deleteItem(null)">
|
||||
删除所选
|
||||
</app-btn>
|
||||
|
||||
|
||||
@@ -85,7 +85,7 @@ export default {
|
||||
},
|
||||
{
|
||||
title: "角色管理",
|
||||
icon: "mdi-account",
|
||||
icon: "mdi-account-tie",
|
||||
to: "/admrole/",
|
||||
children: [],
|
||||
},
|
||||
@@ -116,6 +116,19 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "测试路由",
|
||||
icon: "mdi-clipboard-outline",
|
||||
to: "",
|
||||
children: [
|
||||
{
|
||||
title: "用户信息",
|
||||
icon: "mdi-account",
|
||||
to: "/userinfo/",
|
||||
children: [],
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
}),
|
||||
name: "DefaultDrawer",
|
||||
|
||||
@@ -49,10 +49,10 @@
|
||||
|
||||
data: () => ({
|
||||
profile: [
|
||||
{ title: 'Profile' },
|
||||
{ title: 'Settings' },
|
||||
{ title: '用户信息' },
|
||||
{ title: '设置' },
|
||||
{ divider: true },
|
||||
{ title: 'Log out' },
|
||||
{ title: '登出' },
|
||||
],
|
||||
}),
|
||||
}
|
||||
|
||||
@@ -51,11 +51,11 @@
|
||||
|
||||
data: () => ({
|
||||
notifications: [
|
||||
'Mike John Responded to your email',
|
||||
'You have 5 new tasks',
|
||||
'You\'re now friends with Andrew',
|
||||
'Another Notification',
|
||||
'Another one',
|
||||
'临时消息1，请检查邮箱',
|
||||
'临时消息2，请检查邮箱',
|
||||
'临时消息3，请检查邮箱',
|
||||
'临时消息4，请检查邮箱',
|
||||
'临时消息5，请检查邮箱',
|
||||
],
|
||||
}),
|
||||
}
|
||||
|
||||
@@ -5,7 +5,6 @@ import store from './store/index'
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
const user = store.state.user.user; //获取是有user
|
||||
console.log(user)
|
||||
if (!user) { //如果没有登入
|
||||
if (to.path == '/login/' || to.path == '/register/' || to.path == '/reset_password/' || to.path == '/qq/') {
|
||||
next();
|
||||
|
||||
@@ -28,6 +28,7 @@ const router = new VueRouter({
|
||||
route('AdmMenu', null, 'AdmMenu'),
|
||||
route('AdmMould', null, 'AdmMould'),
|
||||
route('AdmRoleMenu', null, 'AdmRoleMenu'),
|
||||
route('userInfo', null, 'userInfo'),
|
||||
]),
|
||||
layout('Login', [
|
||||
route('login', null, 'login'),
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
<template>
|
||||
<v-card class="mx-auto" width="100%">
|
||||
<ccTreeview></ccTreeview>
|
||||
</v-card>
|
||||
<material-card color="primary" icon="mdi-account-outline">
|
||||
<template #title>
|
||||
菜单管理 — <small class="text-body-1">菜单可分配一个接口</small>
|
||||
</template>
|
||||
<ccTreeview></ccTreeview>
|
||||
</material-card>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<v-card class="mx-auto" width="100%">
|
||||
<ccTable :defaultItem="defaultItem" :headers="headers" :axiosUrls="axiosUrls" ></ccTable>
|
||||
</v-card>
|
||||
|
||||
<material-card color="primary" icon="mdi-account-outline">
|
||||
<template #title>
|
||||
接口管理 — <small class="text-body-1">接口可被菜单拥有</small>
|
||||
</template>
|
||||
<ccTable :defaultItem="defaultItem" :headers="headers" :axiosUrls="axiosUrls" ></ccTable>
|
||||
</material-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@@ -1,26 +1,32 @@
|
||||
<template>
|
||||
<v-card class="mx-auto" width="100%">
|
||||
<ccTable :defaultItem="defaultItem" :headers="headers" :axiosUrls="axiosUrls" >
|
||||
</ccTable>
|
||||
</v-card>
|
||||
|
||||
<material-card color="primary" icon="mdi-account-tie">
|
||||
<template #title>
|
||||
角色管理 — <small class="text-body-1">角色可分配多个菜单</small>
|
||||
</template>
|
||||
<ccTable
|
||||
:defaultItem="defaultItem"
|
||||
:headers="headers"
|
||||
:axiosUrls="axiosUrls"
|
||||
>
|
||||
</ccTable>
|
||||
</material-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
axiosUrls:{
|
||||
get:"role/getrole",
|
||||
update:"role/updaterole",
|
||||
del:"role/delListrole",
|
||||
add:"role/addrole"
|
||||
},
|
||||
axiosUrls: {
|
||||
get: "role/getrole",
|
||||
update: "role/updaterole",
|
||||
del: "role/delListrole",
|
||||
add: "role/addrole",
|
||||
},
|
||||
headers: [
|
||||
{text: "编号",align: "start",value: "id"},
|
||||
{ text: "编号", align: "start", value: "id" },
|
||||
{ text: "角色名", value: "role_name", sortable: false },
|
||||
{ text: "简介", value: "introduce", sortable: false },
|
||||
{ text: "操作", value: "actions", sortable: false }
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
defaultItem: {
|
||||
defaultItem: {
|
||||
role_name: "test",
|
||||
introduce: "用于测试",
|
||||
},
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-card class="mx-auto" width="100%"><app-btn class="ma-2" @click="setMenu">确定分配</app-btn></v-card>
|
||||
<material-card color="primary" icon="mdi-account-outline">
|
||||
<template #title>
|
||||
角色菜单分配管理 — <small class="text-body-1">你可以在这里多角色分配多菜单</small>
|
||||
</template><app-btn class="ma-4" @click="setMenu">确定分配</app-btn></material-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" lg="4">
|
||||
<v-card class="mx-auto" width="100%">
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<v-card class="mx-auto" width="100%">
|
||||
<ccCombobox
|
||||
<material-card color="primary" icon="mdi-account-outline">
|
||||
<template #title>
|
||||
用户管理 — <small class="text-body-1">用户可拥有多个角色</small>
|
||||
</template>
|
||||
<ccCombobox
|
||||
headers="设置角色"
|
||||
:items="roleItems"
|
||||
@select="getSelect"
|
||||
@@ -20,7 +23,9 @@
|
||||
<v-icon small class="mr-2" @click="showItem(item)"> mdi-eye </v-icon>
|
||||
</template>
|
||||
</ccTable>
|
||||
</v-card>
|
||||
</material-card>
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import userApi from "../api/userApi";
|
||||
|
||||
@@ -1,25 +1,442 @@
|
||||
<template>
|
||||
<div>
|
||||
<MaterialCard
|
||||
title="首页卡片"
|
||||
subtitle="微软（Microsoft）是一家美国跨国科技企业，由比尔·盖茨和保罗·艾伦于1975年4月4日创立。"
|
||||
heading="头部"
|
||||
color="#E91E63"
|
||||
:fullHeader="false"
|
||||
icon="mdi-view-dashboard"
|
||||
></MaterialCard>
|
||||
<MaterialCharCard></MaterialCharCard>
|
||||
<MaterialSnackbar></MaterialSnackbar>
|
||||
<MaterialStatCard
|
||||
value="微软（Microsoft）是一家美国跨国科技企业，由比尔·盖茨和保罗·艾伦于1975年4月4日创立。"
|
||||
>
|
||||
<template v-slot> 还有什么呢？ </template>
|
||||
</MaterialStatCard>
|
||||
</div>
|
||||
<v-container
|
||||
id="dashboard-view"
|
||||
fluid
|
||||
tag="section"
|
||||
>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="(chart, i) in charts"
|
||||
:key="`chart-${i}`"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<material-chart-card
|
||||
:color="chart.color"
|
||||
:data="chart.data"
|
||||
:options="chart.options"
|
||||
:responsive-options="chart.responsiveOptions"
|
||||
:title="chart.title"
|
||||
:type="chart.type"
|
||||
>
|
||||
<template #subtitle>
|
||||
<div class="font-weight-light text--secondary">
|
||||
<div v-html="chart.subtitle" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<v-icon
|
||||
class="mr-1"
|
||||
small
|
||||
>
|
||||
mdi-clock-outline
|
||||
</v-icon>
|
||||
|
||||
<span
|
||||
class="text-caption grey--text font-weight-light"
|
||||
v-text="chart.time"
|
||||
/>
|
||||
</template>
|
||||
</material-chart-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
v-for="({ actionIcon, actionText, ...attrs }, i) in stats"
|
||||
:key="i"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="3"
|
||||
>
|
||||
<material-stat-card v-bind="attrs">
|
||||
<template #actions>
|
||||
<v-icon
|
||||
class="mr-2"
|
||||
small
|
||||
v-text="actionIcon"
|
||||
/>
|
||||
<div class="text-truncate">
|
||||
{{ actionText }}
|
||||
</div>
|
||||
</template>
|
||||
</material-stat-card>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<material-card
|
||||
color="orange"
|
||||
full-header
|
||||
>
|
||||
<template #heading>
|
||||
<div class="pa-8 white--text">
|
||||
<div class="text-h4 font-weight-light">
|
||||
Employees Stats
|
||||
</div>
|
||||
<div class="text-caption">
|
||||
New employees on 15th September, 2016
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items"
|
||||
/>
|
||||
</v-card-text>
|
||||
</material-card>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<material-card
|
||||
color="accent"
|
||||
full-header
|
||||
>
|
||||
<template #heading>
|
||||
<v-tabs
|
||||
v-model="tabs"
|
||||
background-color="transparent"
|
||||
slider-color="white"
|
||||
class="pa-8"
|
||||
>
|
||||
<span
|
||||
class="subheading font-weight-light mx-3"
|
||||
style="align-self: center"
|
||||
>Tasks:</span>
|
||||
<v-tab class="mr-3">
|
||||
<v-icon class="mr-2">
|
||||
mdi-bug
|
||||
</v-icon>
|
||||
Bugs
|
||||
</v-tab>
|
||||
<v-tab class="mr-3">
|
||||
<v-icon class="mr-2">
|
||||
mdi-code-tags
|
||||
</v-icon>
|
||||
Website
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
<v-icon class="mr-2">
|
||||
mdi-cloud
|
||||
</v-icon>
|
||||
Server
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</template>
|
||||
<v-tabs-items
|
||||
v-model="tabs"
|
||||
background-color="transparent"
|
||||
>
|
||||
<v-tab-item
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
>
|
||||
<v-card-text>
|
||||
<template v-for="(task, i) in tasks[tabs]">
|
||||
<v-row
|
||||
:key="i"
|
||||
align="center"
|
||||
class="flex-nowrap"
|
||||
>
|
||||
<v-col cols="1">
|
||||
<v-list-item-action>
|
||||
<v-simple-checkbox
|
||||
v-model="task.value"
|
||||
color="secondary"
|
||||
/>
|
||||
</v-list-item-action>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="font-weight-light"
|
||||
cols="8"
|
||||
v-text="task.text"
|
||||
/>
|
||||
|
||||
<v-col
|
||||
cols="auto"
|
||||
class="text-right"
|
||||
>
|
||||
<v-icon class="mx-1">
|
||||
mdi-pencil
|
||||
</v-icon>
|
||||
|
||||
<v-icon
|
||||
class="mx-1"
|
||||
color="error"
|
||||
>
|
||||
mdi-close
|
||||
</v-icon>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-card-text>
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</material-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({}),
|
||||
created() {},
|
||||
};
|
||||
</script>
|
||||
// Utilities
|
||||
// import { get } from 'vuex-pathify'
|
||||
import Vue from 'vue'
|
||||
|
||||
const lineSmooth = Vue.chartist.Interpolation.cardinal({
|
||||
tension: 0,
|
||||
})
|
||||
|
||||
export default {
|
||||
name: 'DashboardView',
|
||||
|
||||
data: () => ({
|
||||
charts: [{
|
||||
type: 'Bar',
|
||||
color: 'primary',
|
||||
title: 'Website Views',
|
||||
subtitle: 'Last Campaign Performance',
|
||||
time: 'updated 10 minutes ago',
|
||||
data: {
|
||||
labels: ['Ja', 'Fe', 'Ma', 'Ap', 'Mai', 'Ju', 'Jul', 'Au', 'Se', 'Oc', 'No', 'De'],
|
||||
series: [
|
||||
[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
|
||||
],
|
||||
},
|
||||
options: {
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
},
|
||||
low: 0,
|
||||
high: 1000,
|
||||
chartPadding: {
|
||||
top: 0,
|
||||
right: 5,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px)', {
|
||||
seriesBarDistance: 5,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value[0]
|
||||
},
|
||||
},
|
||||
}],
|
||||
],
|
||||
}, {
|
||||
type: 'Line',
|
||||
color: 'success',
|
||||
title: 'Daily Sales',
|
||||
subtitle: '<i class="mdi mdi-arrow-up green--text"></i><span class="green--text">55%</span> increase in today\'s sales',
|
||||
time: 'updated 4 minutes ago',
|
||||
data: {
|
||||
labels: ['12am', '3pm', '6pm', '9pm', '12pm', '3am', '6am', '9am'],
|
||||
series: [
|
||||
[230, 750, 450, 300, 280, 240, 200, 190],
|
||||
],
|
||||
},
|
||||
options: {
|
||||
lineSmooth,
|
||||
low: 0,
|
||||
high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||
chartPadding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
type: 'Line',
|
||||
color: 'info',
|
||||
title: 'Completed Tasks',
|
||||
subtitle: 'Last Campaign Performance',
|
||||
time: 'campaign sent 26 minutes ago',
|
||||
data: {
|
||||
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||
series: [
|
||||
[12, 17, 7, 17, 23, 18, 38],
|
||||
],
|
||||
},
|
||||
options: {
|
||||
lineSmooth,
|
||||
low: 0,
|
||||
high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||
chartPadding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
}],
|
||||
headers: [
|
||||
{
|
||||
sortable: false,
|
||||
text: 'ID',
|
||||
value: 'id',
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Name',
|
||||
value: 'name',
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Salary',
|
||||
value: 'salary',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Country',
|
||||
value: 'country',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'City',
|
||||
value: 'city',
|
||||
align: 'right',
|
||||
},
|
||||
],
|
||||
items: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dakota Rice',
|
||||
country: 'Niger',
|
||||
city: 'Oud-Tunrhout',
|
||||
salary: '$35,738',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Minerva Hooper',
|
||||
country: 'Curaçao',
|
||||
city: 'Sinaai-Waas',
|
||||
salary: '$23,738',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Sage Rodriguez',
|
||||
country: 'Netherlands',
|
||||
city: 'Overland Park',
|
||||
salary: '$56,142',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Philip Chanley',
|
||||
country: 'Korea, South',
|
||||
city: 'Gloucester',
|
||||
salary: '$38,735',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Doris Greene',
|
||||
country: 'Malawi',
|
||||
city: 'Feldkirchen in Kārnten',
|
||||
salary: '$63,542',
|
||||
},
|
||||
],
|
||||
stats: [
|
||||
{
|
||||
actionIcon: 'mdi-alert',
|
||||
actionText: 'Get More Space...',
|
||||
color: '#FD9A13',
|
||||
icon: 'mdi-sofa-single',
|
||||
title: 'Bookings',
|
||||
value: '184',
|
||||
},
|
||||
{
|
||||
actionIcon: 'mdi-tag',
|
||||
actionText: 'Tracked from Google Analytics',
|
||||
color: 'primary',
|
||||
icon: 'mdi-chart-bar',
|
||||
title: 'Website Visits',
|
||||
value: '75.521',
|
||||
},
|
||||
{
|
||||
actionIcon: 'mdi-calendar-range',
|
||||
actionText: 'Last 24 Hours',
|
||||
color: 'success',
|
||||
icon: 'mdi-store',
|
||||
title: 'Revenue',
|
||||
value: '$34,245',
|
||||
},
|
||||
{
|
||||
actionIcon: 'mdi-history',
|
||||
actionText: 'Just Updated',
|
||||
color: 'info',
|
||||
icon: 'mdi-twitter',
|
||||
title: 'Followers',
|
||||
value: '+245',
|
||||
},
|
||||
],
|
||||
tabs: 0,
|
||||
tasks: {
|
||||
0: [
|
||||
{
|
||||
text: 'Sign contract for "What are conference organizers afraid of?"',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
text: 'Lines From Great Russian Literature? Or E-mails From My Boss?',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
text: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
text: 'Create 4 Invisible User Experiences you Never Knew About',
|
||||
value: true,
|
||||
},
|
||||
],
|
||||
1: [
|
||||
{
|
||||
text: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
text: 'Sign contract for "What are conference organizers afraid of?"',
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
2: [
|
||||
{
|
||||
text: 'Lines From Great Russian Literature? Or E-mails From My Boss?',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
text: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
text: 'Sign contract for "What are conference organizers afraid of?"',
|
||||
value: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
// sales: get('sales/sales'),
|
||||
// totalSales () {
|
||||
// return this.sales.reduce((acc, val) => acc + val.salesInM, 0)
|
||||
// },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
25
Yi.Vue/src/views/Index2.vue
Normal file
25
Yi.Vue/src/views/Index2.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
<MaterialCard
|
||||
title="首页卡片"
|
||||
subtitle="微软（Microsoft）是一家美国跨国科技企业，由比尔·盖茨和保罗·艾伦于1975年4月4日创立。"
|
||||
heading="头部"
|
||||
color="#E91E63"
|
||||
:fullHeader="false"
|
||||
icon="mdi-view-dashboard"
|
||||
></MaterialCard>
|
||||
<MaterialCharCard></MaterialCharCard>
|
||||
<MaterialSnackbar></MaterialSnackbar>
|
||||
<MaterialStatCard
|
||||
value="微软（Microsoft）是一家美国跨国科技企业，由比尔·盖茨和保罗·艾伦于1975年4月4日创立。"
|
||||
>
|
||||
<template v-slot> 还有什么呢？ </template>
|
||||
</MaterialStatCard>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({}),
|
||||
created() {},
|
||||
};
|
||||
</script>
|
||||
254
Yi.Vue/src/views/userInfo.vue
Normal file
254
Yi.Vue/src/views/userInfo.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<v-container id="user-profile-view" fluid tag="section">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" md="4">
|
||||
<app-card class="mt-4 text-center">
|
||||
<v-img
|
||||
class="rounded-circle elevation-6 mt-n12 d-inline-block"
|
||||
src="https://demos.creative-tim.com/vue-material-dashboard/img/marc.aba54d65.jpg"
|
||||
width="128"
|
||||
/>
|
||||
|
||||
<v-card-text class="text-center">
|
||||
<h6 class="text-h6 mb-2 text--secondary">橙子</h6>
|
||||
|
||||
<h4 class="text-h4 mb-3 text--primary">橙子大大</h4>
|
||||
|
||||
<p class="text--secondary">我认为世界有我而更精彩！难道不是吗？</p>
|
||||
|
||||
<v-btn class="mr-4" color="primary" min-width="100" rounded>
|
||||
编辑头像
|
||||
</v-btn>
|
||||
<v-btn color="primary" min-width="100" rounded> 绑定QQ </v-btn>
|
||||
</v-card-text>
|
||||
</app-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="8">
|
||||
<material-card color="primary" icon="mdi-account-outline">
|
||||
<template #title>
|
||||
用户信息 — <small class="text-body-1">编辑属于你的一切</small>
|
||||
</template>
|
||||
|
||||
<v-form>
|
||||
<v-tabs class="pl-4" v-model="tab">
|
||||
<v-tab href="#tab-1">
|
||||
账户信息
|
||||
<v-icon>mdi-phone</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="#tab-2">
|
||||
额外信息
|
||||
<v-icon>mdi-account-box</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="#tab-3">
|
||||
修改密码
|
||||
<v-icon>mdi-account-box</v-icon>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item :value="'tab-1'">
|
||||
<v-card class="py-0">
|
||||
<v-card-text>
|
||||
<div>Account Information</div>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field color="purple" label="用户名" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field color="purple" label="昵称" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field color="purple" label="邮箱" />
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field color="purple" label="住址" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field color="purple" label="电话" type="number" />
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-textarea
|
||||
color="purple"
|
||||
label="简介"
|
||||
value="空空如也，Ta什么也没有留下"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item :value="'tab-2'">
|
||||
|
||||
<v-card class="py-0 mx-auto">
|
||||
<v-card-text>
|
||||
<div>Extra Information</div>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-list two-line>
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon color="secondary"> mdi-phone </v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>等级：</v-list-item-title>
|
||||
<v-list-item-subtitle>100</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-message-text</v-icon>
|
||||
</v-list-item-icon>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-action></v-list-item-action>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>经验：</v-list-item-title>
|
||||
<v-list-item-subtitle>1000</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-message-text</v-icon>
|
||||
</v-list-item-icon>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider inset></v-divider>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon color="secondary"> mdi-lock </v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>拥有角色：</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="6"
|
||||
sm="3"
|
||||
md="1"
|
||||
>管理员</v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-action></v-list-item-action>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>拥有接口：</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="6"
|
||||
sm="3"
|
||||
md="1"
|
||||
>增删改查</v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider inset></v-divider>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon color="secondary"> mdi-email </v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>发帖总数：</v-list-item-title>
|
||||
<v-list-item-subtitle>1000</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-action></v-list-item-action>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>评论总数：</v-list-item-title>
|
||||
<v-list-item-subtitle>500</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-action></v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-btn
|
||||
dark
|
||||
color="primary"
|
||||
|
||||
class="ml-0"
|
||||
dense
|
||||
>
|
||||
查看主题
|
||||
</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider inset></v-divider>
|
||||
</v-list>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
</v-tab-item>
|
||||
<v-tab-item :value="'tab-3'">
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<div>Password Information</div>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
style="width: 80%"
|
||||
label="原密码"
|
||||
outlined
|
||||
clearable
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
required
|
||||
style="width: 80%"
|
||||
:counter="120"
|
||||
label="新密码"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
|
||||
|
||||
|
||||
|
||||
<v-col cols="12" class="text-right">
|
||||
<v-btn color="primary" class="ma-4" min-width="100">
|
||||
清空
|
||||
</v-btn>
|
||||
<v-btn color="secondary" min-width="100"> 保存 </v-btn>
|
||||
</v-col>
|
||||
</v-form>
|
||||
</material-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UserProfileView",
|
||||
data: () => ({
|
||||
tab: "tab-1",
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user