mirror of
https://github.com/AIDotNet/AntSK.git
synced 2026-02-17 22:10:14 +08:00
add 默认路由
This commit is contained in:
zyxucp
@@ -1,59 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
|
||||
<AntList TItem="ListItemDataType"
|
||||
Class="filterCardList"
|
||||
Grid="_listGridType"
|
||||
DataSource="List">
|
||||
<ListItem NoFlex>
|
||||
<Card Bordered
|
||||
Hoverable
|
||||
BodyStyle="padding-bottom: 20px;"
|
||||
Actions="Actions">
|
||||
<CardMeta>
|
||||
<AvatarTemplate>
|
||||
<Avatar Size="small" Src="@context.Avatar" />
|
||||
</AvatarTemplate>
|
||||
<TitleTemplate>@context.Title</TitleTemplate>
|
||||
</CardMeta>
|
||||
<div class="cardItemContent">
|
||||
<div class="cardInfo">
|
||||
<div>
|
||||
<p>Active User</p>
|
||||
<p>@FormatWan(context.ActiveUser)</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>New Users</p>
|
||||
<p>@context.NewUser.ToString("0,0")</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</ListItem>
|
||||
</AntList>
|
||||
|
||||
@code
|
||||
{
|
||||
|
||||
private static readonly RenderFragment Download =@<AntDesign.Tooltip Title="@("下载")">
|
||||
<Icon Type="download" Theme="outline" />
|
||||
</AntDesign.Tooltip>;
|
||||
|
||||
private static readonly IList<RenderFragment> Actions = new List<RenderFragment>
|
||||
{
|
||||
Download,
|
||||
@<AntDesign.Tooltip Title="@("Edit")"><Icon Type="edit" Theme="outline" /></AntDesign.Tooltip>,
|
||||
@<AntDesign.Tooltip Title="@("Share")"><Icon Type="share-alt" Theme="outline" /></AntDesign.Tooltip>,
|
||||
@<Dropdown><Icon Type="ellipsis" Theme="outline" /></Dropdown>
|
||||
};
|
||||
|
||||
private static RenderFragment FormatWan(int val) {
|
||||
if (val > 10000) {
|
||||
val = (int) Math.Floor((double) val / 10000);
|
||||
}
|
||||
|
||||
return @<span>
|
||||
@val
|
||||
<span style="position: relative; top: -2px; font-size: 14px; font-style: normal; margin-left: 2px;">万</span>
|
||||
</span>;
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
using AntDesign;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System.Collections.Generic;
|
||||
using Xzy.KnowledgeBase.Models;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
{
|
||||
public partial class Applications
|
||||
{
|
||||
private readonly ListGridType _listGridType = new ListGridType
|
||||
{
|
||||
Gutter = 24,
|
||||
Column = 4
|
||||
};
|
||||
|
||||
[Parameter] public IList<ListItemDataType> List { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.filterCardList {
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
.filterCardList :global .ant-card-meta-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
.filterCardList :global .ant-card-meta-avatar {
|
||||
font-size: 0;
|
||||
}
|
||||
.filterCardList :global .ant-list .ant-list-item-content-single {
|
||||
max-width: 100%;
|
||||
}
|
||||
.filterCardList .cardInfo {
|
||||
margin-top: 16px;
|
||||
margin-left: 40px;
|
||||
zoom: 1;
|
||||
}
|
||||
.filterCardList .cardInfo::before,
|
||||
.filterCardList .cardInfo::after {
|
||||
display: table;
|
||||
content: ' ';
|
||||
}
|
||||
.filterCardList .cardInfo::after {
|
||||
clear: both;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.filterCardList .cardInfo > div {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
.filterCardList .cardInfo > div p {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.filterCardList .cardInfo > div p:first-child {
|
||||
margin-bottom: 4px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
@using Xzy.KnowledgeBase.Models
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
|
||||
<div class="listContent">
|
||||
<div class="description">@Data.Content</div>
|
||||
<div class="extra">
|
||||
<Avatar Src="@Data.Avatar" Size="small" />
|
||||
<a href="@Data.Href">@Data.Owner</a> Posted on <a href="@Data.Href">@Data.Href</a>
|
||||
<em>@Data.UpdatedAt.ToString("yyyy-MM-dd HH:mm:ss")</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code
|
||||
{
|
||||
[Parameter] public ListItemDataType Data { get; set; }
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.listContent .description {
|
||||
max-width: 720px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.listContent .extra {
|
||||
margin-top: 16px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
line-height: 22px;
|
||||
}
|
||||
.listContent .extra > :global(.ant-avatar) {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.listContent .extra > em {
|
||||
margin-left: 16px;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
font-style: normal;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
.listContent .extra > em {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
|
||||
<AntList
|
||||
TItem="ListItemDataType"
|
||||
Size="large"
|
||||
Class="articleList"
|
||||
DataSource="List">
|
||||
<ListItem NoFlex>
|
||||
<ListItemMeta Description="">
|
||||
<TitleTemplate>
|
||||
<a href="https://ng.ant.design">@context.Title</a>
|
||||
</TitleTemplate>
|
||||
</ListItemMeta>
|
||||
<ArticleListContent Data="@context" />
|
||||
</ListItem>
|
||||
</AntList>
|
||||
@@ -1,11 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System.Collections.Generic;
|
||||
using Xzy.KnowledgeBase.Models;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
{
|
||||
public partial class Articles
|
||||
{
|
||||
[Parameter] public IList<ListItemDataType> List { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.articleList :global .ant-list-item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
a.listItemMetaTitle {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
|
||||
<div class="avatarList">
|
||||
<ul>
|
||||
@ChildContent
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1,9 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
{
|
||||
public partial class AvatarList
|
||||
{
|
||||
[Parameter] public RenderFragment ChildContent { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.avatarList {
|
||||
display: inline-block;
|
||||
}
|
||||
.avatarList ul {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
font-size: 0;
|
||||
}
|
||||
.avatarItem {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: -8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.avatarItem :global .ant-avatar {
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
.avatarItemLarge {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.avatarItemSmall {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.avatarItemMini {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.avatarItemMini :global .ant-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.avatarItemMini :global .ant-avatar .ant-avatar-string {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
@inherits AntDomComponentBase
|
||||
|
||||
<li class="@ClassMapper.Class" @onclick="OnClick">
|
||||
@if (string.IsNullOrEmpty(Tips))
|
||||
{
|
||||
<AntDesign.Tooltip Title="@Tips">
|
||||
<Unbound>
|
||||
<Avatar Src="@Src" Size="@Size" Style="cursor: pointer;" RefBack="@context"/>
|
||||
</Unbound>
|
||||
</AntDesign.Tooltip>
|
||||
}
|
||||
else
|
||||
{
|
||||
<Avatar Src="@Src" Size="@Size" />
|
||||
}
|
||||
</li>
|
||||
@@ -1,28 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
{
|
||||
public partial class AvatarListItem
|
||||
{
|
||||
[Parameter] public string Size { get; set; }
|
||||
[Parameter] public string Tips { get; set; }
|
||||
[Parameter] public string Src { get; set; }
|
||||
[Parameter] public EventCallback OnClick { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
SetClassMap();
|
||||
}
|
||||
|
||||
protected void SetClassMap()
|
||||
{
|
||||
ClassMapper
|
||||
.Clear()
|
||||
.Add("avatarItem")
|
||||
.If("avatarItemLarge", () => Size == "large")
|
||||
.If("avatarItemSmall", () => Size == "small")
|
||||
.If("avatarItemMini", () => Size == "mini");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
|
||||
<AntList
|
||||
TItem="ListItemDataType"
|
||||
Class="coverCardList"
|
||||
Grid="_listGridType"
|
||||
DataSource="List">
|
||||
<ListItem NoFlex>
|
||||
<Card Class="card" Hoverable Bordered>
|
||||
<Cover>
|
||||
<img alt="@context.Title" src="@context.Cover"/>
|
||||
</Cover>
|
||||
<ChildContent>
|
||||
<CardMeta>
|
||||
<DescriptionTemplate>@context.SubDescription</DescriptionTemplate>
|
||||
<TitleTemplate><a>@context.Title</a></TitleTemplate>
|
||||
</CardMeta>
|
||||
<div class="cardItemContent">
|
||||
<span>@context.UpdatedAt.ToFriendlyDisplay()</span>
|
||||
<div class="avatarList">
|
||||
<AvatarList>
|
||||
@foreach (var member in context.Members)
|
||||
{
|
||||
<AvatarListItem
|
||||
Size="small"
|
||||
Src="@member.Avatar"
|
||||
Tips="@member.Name"/>
|
||||
}
|
||||
</AvatarList>
|
||||
</div>
|
||||
</div>
|
||||
</ChildContent>
|
||||
</Card>
|
||||
</ListItem>
|
||||
</AntList>
|
||||
@@ -1,19 +0,0 @@
|
||||
using AntDesign;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System.Collections.Generic;
|
||||
using Xzy.KnowledgeBase.Models;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
{
|
||||
public partial class Projects
|
||||
{
|
||||
private readonly ListGridType _listGridType = new ListGridType
|
||||
{
|
||||
Gutter = 24,
|
||||
Column = 4
|
||||
};
|
||||
|
||||
[Parameter]
|
||||
public IList<ListItemDataType> List { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.coverCardList .card .ant-card-meta-title {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.coverCardList .card .ant-card-meta-title > a {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.coverCardList .card .ant-card-meta-description {
|
||||
height: 44px;
|
||||
overflow: hidden;
|
||||
line-height: 22px;
|
||||
}
|
||||
.coverCardList .card:hover .ant-card-meta-title > a {
|
||||
color: #1890ff;
|
||||
}
|
||||
.coverCardList .cardItemContent {
|
||||
display: flex;
|
||||
height: 20px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: -4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.coverCardList .cardItemContent > span {
|
||||
flex: 1;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12px;
|
||||
}
|
||||
.coverCardList .cardItemContent .avatarList {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.coverCardList .cardList {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.coverCardList .ant-list .ant-list-item-content-single {
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
@page "/account/center"
|
||||
|
||||
<GridContent>
|
||||
<Row Gutter="24">
|
||||
<AntDesign.Col Lg="7" Md="24">
|
||||
<Card Style="margin-bottom: 24px;">
|
||||
<div class="avatarHolder">
|
||||
<img alt="" src="@_currentUser.Avatar" />
|
||||
<div className="name">@_currentUser.Name</div>
|
||||
<div>@_currentUser.Signature</div>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
<p>
|
||||
<Icon Type="contacts" Theme="outline" Style="margin-right:8px;" />
|
||||
@_currentUser.Title
|
||||
</p>
|
||||
<p>
|
||||
<Icon Type="cluster" Theme="outline" Style="margin-right:8px;" />
|
||||
@_currentUser.Group
|
||||
</p>
|
||||
<p>
|
||||
<Icon Type="home" Theme="outline" Style="margin-right:8px;" />
|
||||
<!--todo: add userinfo-->
|
||||
@_currentUser.Geographic.Province.Label
|
||||
@_currentUser.Geographic.City.Label
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Divider Dashed />
|
||||
|
||||
<div class="tags">
|
||||
<div class="tagsTitle">Tags</div>
|
||||
@foreach (var tag in _currentUser.Tags) {
|
||||
<Tag>@tag.Label</Tag>
|
||||
}
|
||||
|
||||
@if (_inputVisible) {
|
||||
<AntDesign.Input Type="text"
|
||||
Size="small"
|
||||
Style="width: 78px"
|
||||
@bind-Value="InputValue"
|
||||
OnBlur="HandleInputConfirm" />
|
||||
}
|
||||
else {
|
||||
<Tag OnClick="ShowInput" Style="border-style: dashed">
|
||||
<Icon Type="plus" Theme="outline" />
|
||||
</Tag>
|
||||
}
|
||||
</div>
|
||||
|
||||
<Divider Dashed Style="margin-top: 16px;" />
|
||||
|
||||
<div class="team">
|
||||
<div class="teamTitle">Team</div>
|
||||
<!--todo: add notice-->
|
||||
</div>
|
||||
</Card>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Lg="17" Md="24">
|
||||
<Card Class="tabsCard">
|
||||
<CardTabs>
|
||||
<Tabs DefaultActiveKey="1">
|
||||
<TabPane Key="1">
|
||||
<TabTemplate>Articles (@_fakeList.Count)</TabTemplate>
|
||||
<ChildContent>
|
||||
<Articles List="_fakeList" />
|
||||
</ChildContent>
|
||||
</TabPane>
|
||||
<TabPane Key="2">
|
||||
<TabTemplate>Applications (@_fakeList.Count)</TabTemplate>
|
||||
<ChildContent>
|
||||
<Applications List="_fakeList" />
|
||||
</ChildContent>
|
||||
</TabPane>
|
||||
<TabPane Key="3">
|
||||
<TabTemplate>Projects (@_fakeList.Count)</TabTemplate>
|
||||
<ChildContent>
|
||||
<Projects List="_fakeList" />
|
||||
</ChildContent>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</CardTabs>
|
||||
</Card>
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
</GridContent>
|
||||
@@ -1,40 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System.Collections.Generic;
|
||||
using System.Threading.Tasks;
|
||||
using Xzy.KnowledgeBase.Models;
|
||||
using Xzy.KnowledgeBase.Services;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Account.Center
|
||||
{
|
||||
public partial class Index
|
||||
{
|
||||
private CurrentUser _currentUser = new CurrentUser
|
||||
{
|
||||
Geographic = new GeographicType { City = new TagType(), Province = new TagType() }
|
||||
};
|
||||
|
||||
private IList<ListItemDataType> _fakeList = new List<ListItemDataType>();
|
||||
private bool _inputVisible;
|
||||
public string InputValue { get; set; }
|
||||
|
||||
[Inject] public IProjectService ProjectService { get; set; }
|
||||
[Inject] public IUserService UserService { get; set; }
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await base.OnInitializedAsync();
|
||||
_currentUser = await UserService.GetCurrentUserAsync();
|
||||
_fakeList = await ProjectService.GetFakeListAsync();
|
||||
}
|
||||
|
||||
protected void ShowInput()
|
||||
{
|
||||
_inputVisible = true;
|
||||
}
|
||||
|
||||
protected void HandleInputConfirm()
|
||||
{
|
||||
_inputVisible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.avatarHolder {
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatarHolder > img {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.avatarHolder .name {
|
||||
margin-bottom: 4px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.detail p {
|
||||
position: relative;
|
||||
margin-bottom: 8px;
|
||||
padding-left: 26px;
|
||||
}
|
||||
.detail p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.detail i {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.tagsTitle,
|
||||
.teamTitle {
|
||||
margin-bottom: 12px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: 500;
|
||||
}
|
||||
.tags .ant-tag {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.team .ant-avatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.team a {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.team a:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
.tabsCard .ant-card-head {
|
||||
padding: 0 16px;
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Settings
|
||||
|
||||
<div class="baseView">
|
||||
<div class="left" style="min-width: 310px;">
|
||||
<Form
|
||||
Layout="vertical"
|
||||
OnFinish="HandleFinish"
|
||||
Model="@_currentUser">
|
||||
<FormItem Label="Email">
|
||||
<AntDesign.Input @bind-Value="@context.Email" />
|
||||
</FormItem>
|
||||
<FormItem Label="Nickname">
|
||||
<AntDesign.Input @bind-Value="@context.Name" />
|
||||
</FormItem>
|
||||
<FormItem Label="Personal profile">
|
||||
<AntDesign.TextArea @bind-Value="@context.Signature" />
|
||||
</FormItem>
|
||||
<FormItem Label="Country/Region">
|
||||
<Select
|
||||
TItem="string"
|
||||
TItemValue="string"
|
||||
Style="max-width: 220px;"
|
||||
@bind-Value="@context.Country">
|
||||
<SelectOptions>
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("China")" Label="中国"/>
|
||||
</SelectOptions>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem Label="Province or city">
|
||||
<GeographicView />
|
||||
</FormItem>
|
||||
<FormItem Label="Street Address">
|
||||
<AntDesign.Input @bind-Value="@context.Address" />
|
||||
</FormItem>
|
||||
<FormItem Label="Phone Number">
|
||||
<PhoneView />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button HtmlType="submit" Type="primary">
|
||||
Update Information
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="right__b__1">
|
||||
<div class="avatar_title">
|
||||
Avatar
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img src="@_currentUser.Avatar" alt="avatar" />
|
||||
</div>
|
||||
<Upload ShowUploadList="false">
|
||||
<div class="button_view">
|
||||
<Button Icon="upload">
|
||||
Change avatar
|
||||
</Button>
|
||||
</div>
|
||||
</Upload>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,24 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System.Threading.Tasks;
|
||||
using Xzy.KnowledgeBase.Models;
|
||||
using Xzy.KnowledgeBase.Services;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Account.Settings
|
||||
{
|
||||
public partial class BaseView
|
||||
{
|
||||
private CurrentUser _currentUser = new CurrentUser();
|
||||
|
||||
[Inject] protected IUserService UserService { get; set; }
|
||||
|
||||
private void HandleFinish()
|
||||
{
|
||||
}
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await base.OnInitializedAsync();
|
||||
_currentUser = await UserService.GetCurrentUserAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.baseView {
|
||||
display: flex;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.baseView :global .ant-legacy-form-item .ant-legacy-form-item-control-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.baseView .left {
|
||||
min-width: 224px;
|
||||
max-width: 448px;
|
||||
}
|
||||
.baseView .right__b__1 {
|
||||
flex: 1;
|
||||
padding-left: 104px;
|
||||
}
|
||||
.baseView .right__b__1 .avatar_title {
|
||||
height: 22px;
|
||||
margin-bottom: 8px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.baseView .right__b__1 .avatar {
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.baseView .right__b__1 .avatar img {
|
||||
width: 100%;
|
||||
}
|
||||
.baseView .right__b__1 .button_view {
|
||||
width: 144px;
|
||||
text-align: center;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.baseView {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.baseView .right__b__1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 448px;
|
||||
padding: 20px;
|
||||
}
|
||||
.baseView .right__b__1 .avatar_title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Settings
|
||||
|
||||
<AntList
|
||||
TItem="UserLiteItem"
|
||||
ItemLayout="ListItemLayout.Horizontal"
|
||||
DataSource="_data">
|
||||
<ListItem Actions="_actions">
|
||||
<ListItemMeta Title="@context.Title" Description="@context.Description">
|
||||
<AvatarTemplate>
|
||||
<Icon Type="@context.Avater" Theme="outline" Class="@context.Avater" />
|
||||
</AvatarTemplate>
|
||||
</ListItemMeta>
|
||||
</ListItem>
|
||||
</AntList>
|
||||
|
||||
@code
|
||||
{
|
||||
private static RenderFragment _modify = @<a key="bind">Bind</a>;
|
||||
|
||||
private readonly RenderFragment[] _actions = {_modify};
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
using Xzy.KnowledgeBase.Models;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Account.Settings
|
||||
{
|
||||
public partial class BindingView
|
||||
{
|
||||
private readonly UserLiteItem[] _data =
|
||||
{
|
||||
new UserLiteItem
|
||||
{
|
||||
Avater = "taobao",
|
||||
Title = "Binding Taobao",
|
||||
Description = "Currently unbound Taobao account"
|
||||
},
|
||||
new UserLiteItem
|
||||
{
|
||||
Avater = "alipay",
|
||||
Title = "Binding Alipay",
|
||||
Description = "Currently unbound Alipay account"
|
||||
},
|
||||
new UserLiteItem
|
||||
{
|
||||
Avater = "dingding",
|
||||
Title = "Binding DingTalk",
|
||||
Description = "Currently unbound DingTalk account"
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Settings
|
||||
|
||||
<h1>
|
||||
GeographicView
|
||||
</h1>
|
||||
@@ -1,18 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.row .item {
|
||||
width: 50%;
|
||||
max-width: 220px;
|
||||
}
|
||||
.row .item:first-child {
|
||||
width: calc(50% - 8px);
|
||||
margin-right: 8px;
|
||||
}
|
||||
@media screen and (max-width: 576px) {
|
||||
.item:first-child {
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Settings
|
||||
|
||||
<AntList
|
||||
TItem="UserLiteItem"
|
||||
ItemLayout="ListItemLayout.Horizontal"
|
||||
DataSource="_data">
|
||||
<ListItem Actions="_actions">
|
||||
<ListItemMeta Avatar="" Description="@context.Description">
|
||||
<TitleTemplate>@context.Title</TitleTemplate>
|
||||
</ListItemMeta>
|
||||
</ListItem>
|
||||
</AntList>
|
||||
|
||||
@code
|
||||
{
|
||||
private static RenderFragment _switch = @<Switch CheckedChildren="@("Open")" UnCheckedChildren="@("Close")" Checked="true"/>;
|
||||
private readonly RenderFragment[] _actions = {_switch};
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
using Xzy.KnowledgeBase.Models;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Account.Settings
|
||||
{
|
||||
public partial class NotificationView
|
||||
{
|
||||
private readonly UserLiteItem[] _data =
|
||||
{
|
||||
new UserLiteItem
|
||||
{
|
||||
Title = "Account Password",
|
||||
Description = "Messages from other users will be notified in the form of a station letter"
|
||||
},
|
||||
new UserLiteItem
|
||||
{
|
||||
Title = "System Messages",
|
||||
Description = "System messages will be notified in the form of a station letter"
|
||||
},
|
||||
new UserLiteItem
|
||||
{
|
||||
Title = "To-do Notification",
|
||||
Description = "The to-do list will be notified in the form of a letter from the station"
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Settings
|
||||
|
||||
<h1>
|
||||
PhoneView
|
||||
</h1>
|
||||
@@ -1,13 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.area_code {
|
||||
width: 30%;
|
||||
max-width: 128px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.phone_number {
|
||||
width: calc(70% - 8px);
|
||||
max-width: 312px;
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Settings
|
||||
|
||||
<AntList
|
||||
TItem="UserLiteItem"
|
||||
ItemLayout="ListItemLayout.Horizontal"
|
||||
DataSource="_data">
|
||||
<ListItem Actions="_actions">
|
||||
<ListItemMeta Avatar="" Description="@context.Description">
|
||||
<TitleTemplate>@context.Title</TitleTemplate>
|
||||
</ListItemMeta>
|
||||
</ListItem>
|
||||
</AntList>
|
||||
|
||||
@code
|
||||
{
|
||||
private static RenderFragment _modify = @<a key="modify">Modify</a>;
|
||||
private readonly RenderFragment[] _actions = {_modify};
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
using Xzy.KnowledgeBase.Models;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Account.Settings
|
||||
{
|
||||
public partial class SecurityView
|
||||
{
|
||||
private readonly UserLiteItem[] _data =
|
||||
{
|
||||
new UserLiteItem
|
||||
{
|
||||
Title = "Account Password",
|
||||
Description = "Current password strength: : Strong"
|
||||
},
|
||||
new UserLiteItem
|
||||
{
|
||||
Title = "Security Phone",
|
||||
Description = "Bound phone: : 138****8293"
|
||||
},
|
||||
new UserLiteItem
|
||||
{
|
||||
Title = "Security Question",
|
||||
Description =
|
||||
"The security question is not set, and the security policy can effectively protect the account security"
|
||||
},
|
||||
new UserLiteItem
|
||||
{
|
||||
Title = "Backup Email",
|
||||
Description = "Bound Email: : ant***sign.com"
|
||||
},
|
||||
new UserLiteItem
|
||||
{
|
||||
Title = "MFA Device",
|
||||
Description = "Unbound MFA device, after binding, can be confirmed twice"
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Account.Settings
|
||||
@page "/account/settings"
|
||||
|
||||
<GridContent>
|
||||
<div class="main__b__2">
|
||||
<div class="leftMenu">
|
||||
<Menu
|
||||
Mode="MenuMode.Inline"
|
||||
SelectedKeys="new []{_selectKey}"
|
||||
OnMenuItemClicked="SelectKey">
|
||||
@foreach (var item in _menuMap)
|
||||
{
|
||||
<MenuItem Key="@item.Key">@item.Value</MenuItem>
|
||||
}
|
||||
</Menu>
|
||||
</div>
|
||||
<div class="right__b__0">
|
||||
<div class="title">@_menuMap[_selectKey]</div>
|
||||
@switch (_selectKey)
|
||||
{
|
||||
case "base":
|
||||
<BaseView />
|
||||
break;
|
||||
case "security":
|
||||
<SecurityView />
|
||||
break;
|
||||
case "binding":
|
||||
<BindingView />
|
||||
break;
|
||||
case "notification":
|
||||
<NotificationView />
|
||||
break;
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</GridContent>
|
||||
@@ -1,21 +0,0 @@
|
||||
using AntDesign;
|
||||
using System.Collections.Generic;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Account.Settings
|
||||
{
|
||||
public partial class Index
|
||||
{
|
||||
private readonly Dictionary<string, string> _menuMap = new Dictionary<string, string>
|
||||
{
|
||||
{"base", "Basic Settings"}
|
||||
|
||||
};
|
||||
|
||||
private string _selectKey = "base";
|
||||
|
||||
private void SelectKey(MenuItem item)
|
||||
{
|
||||
_selectKey = item.Key;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.main__b__2 {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
.main__b__2 .leftMenu {
|
||||
width: 224px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.main__b__2 .leftMenu :global .ant-menu-inline {
|
||||
border: none;
|
||||
}
|
||||
.main__b__2 .leftMenu :global .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
.main__b__2 .right__b__0 {
|
||||
flex: 1;
|
||||
padding-top: 8px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
.main__b__2 .right__b__0 .title {
|
||||
margin-bottom: 12px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.main__b__2 .ant-list-split .ant-list-item:last-child {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.main__b__2 .ant-list-item {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.ant-list-item-meta .taobao {
|
||||
display: block;
|
||||
color: #ff4000;
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.ant-list-item-meta .dingding {
|
||||
margin: 2px;
|
||||
padding: 6px;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
background-color: #2eabff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.ant-list-item-meta .alipay {
|
||||
color: #2eabff;
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
font.strong {
|
||||
color: #52c41a;
|
||||
}
|
||||
font.medium {
|
||||
color: #faad14;
|
||||
}
|
||||
font.weak {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.main__b__2 {
|
||||
flex-direction: column;
|
||||
}
|
||||
.main__b__2 .leftMenu {
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
.main__b__2 .right__b__0 {
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis.Bar
|
||||
@@ -1,26 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
@inherits AntDomComponentBase
|
||||
|
||||
<Card>
|
||||
<div class="chartCard">
|
||||
<div class="chartTop">
|
||||
<div class="avatar">@Avatar</div>
|
||||
<div class="metaWrap">
|
||||
<div class="meta">
|
||||
<span>@Title</span>
|
||||
<span class="action"><Icon Type="info-circle" /></span>
|
||||
</div>
|
||||
<div class="total">
|
||||
<span>@Total</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" style="height: @(string.IsNullOrEmpty(ContentHeight) ? "auto" : ContentHeight+"px")">
|
||||
<div class="@(string.IsNullOrEmpty(ContentHeight) ? "" : "contentFixed")">@ChildContent</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
@Footer
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
{
|
||||
public partial class ChartCard
|
||||
{
|
||||
[Parameter]
|
||||
public string Avatar { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string Title { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment Action { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string Total { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment ChildContent { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment Footer { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string ContentHeight { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.chartCard {
|
||||
position: relative;
|
||||
}
|
||||
.chartCard .chartTop {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chartCard .chartTopMargin {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.chartCard .chartTopHasMargin {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.chartCard .metaWrap {
|
||||
float: left;
|
||||
}
|
||||
.chartCard .avatar {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.chartCard .avatar img {
|
||||
border-radius: 100%;
|
||||
}
|
||||
.chartCard .meta {
|
||||
height: 22px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.chartCard .action {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chartCard .total {
|
||||
height: 38px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.chartCard .content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.chartCard .contentFixed {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.chartCard .footer {
|
||||
margin-top: 8px;
|
||||
padding-top: 9px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
.chartCard .footer > * {
|
||||
position: relative;
|
||||
}
|
||||
.chartCard .footerMargin {
|
||||
margin-top: 20px;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
@inherits AntDomComponentBase
|
||||
|
||||
<div class="field">
|
||||
<span class="label">@Label</span>
|
||||
<span class="number">@Value</span>
|
||||
</div>
|
||||
@@ -1,13 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
{
|
||||
public partial class Field
|
||||
{
|
||||
[Parameter]
|
||||
public string Label { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string Value { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.field {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.field .label,
|
||||
.field .number {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.field .number {
|
||||
margin-left: 8px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
@using Xzy.KnowledgeBase.Services
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
@inject IChartService ChartService
|
||||
|
||||
<Area @ref="_visitChart" Config="_visitChartConfig" />
|
||||
|
||||
@code
|
||||
{
|
||||
private IChartComponent _visitChart;
|
||||
|
||||
private readonly AreaConfig _visitChartConfig = new AreaConfig
|
||||
{
|
||||
XField = "x",
|
||||
YField = "y",
|
||||
Height = 45,
|
||||
Padding = new[] { 8, 8, 8, 8 },
|
||||
AutoFit = true,
|
||||
XAxis = new ValueCatTimeAxis
|
||||
{
|
||||
Visible = false
|
||||
},
|
||||
YAxis = new ValueAxis
|
||||
{
|
||||
Visible = false
|
||||
}
|
||||
};
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await base.OnInitializedAsync();
|
||||
var data = await ChartService.GetVisitDataAsync();
|
||||
await _visitChart.ChangeData(data);
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
@using Xzy.KnowledgeBase.Services
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
@inject IChartService ChartService
|
||||
<AntDesign.Charts.Column @ref="_chart" Config="_chartConfig" />
|
||||
|
||||
@code
|
||||
{
|
||||
private IChartComponent _chart;
|
||||
private ColumnConfig _chartConfig = new ColumnConfig
|
||||
{
|
||||
XField = "x",
|
||||
YField = "y",
|
||||
Height = 45,
|
||||
Padding = new[] { 8, 8, 8, 8 },
|
||||
AutoFit = true,
|
||||
XAxis = new CatAxis
|
||||
{
|
||||
Visible = false
|
||||
},
|
||||
YAxis = new ValueAxis
|
||||
{
|
||||
Visible = false
|
||||
}
|
||||
};
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await base.OnInitializedAsync();
|
||||
var data = await ChartService.GetVisitDataAsync();
|
||||
await _chart.ChangeData(data);
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
@inherits AntDomComponentBase
|
||||
|
||||
<div class="miniProgress">
|
||||
<AntDesign.Tooltip Title="@("TargetLabel")">
|
||||
<Unbound>
|
||||
<div @ref="@context.Current" class="target" style="left: @(Target.HasValue ? $"{Target}%" : "")">
|
||||
<span style="background-color: @Color" />
|
||||
<span style="background-color: @Color" />
|
||||
</div>
|
||||
</Unbound>
|
||||
</AntDesign.Tooltip>
|
||||
<div class="progressWrap">
|
||||
<div class="progress"
|
||||
style="
|
||||
background-color: @Color;
|
||||
width: @(Percent.HasValue ? $"{Percent}%" : "");
|
||||
height: @(StrokeWidth.HasValue ? $"{StrokeWidth}px" : "");" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code
|
||||
{
|
||||
[Parameter]
|
||||
public int? Target { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string TargetLabel { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string Color { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public int? StrokeWidth { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public int? Percent { get; set; }
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.miniProgress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.miniProgress .progressWrap {
|
||||
position: relative;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.miniProgress .progress {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: #1890ff;
|
||||
border-radius: 1px 0 0 1px;
|
||||
transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
|
||||
}
|
||||
.miniProgress .target {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 9;
|
||||
width: 20px;
|
||||
}
|
||||
.miniProgress .target span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.miniProgress .target span:last-child {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.pie {
|
||||
position: relative;
|
||||
}
|
||||
.pie .chart {
|
||||
position: relative;
|
||||
}
|
||||
.pie.hasLegend .chart {
|
||||
width: calc(100% - 240px);
|
||||
}
|
||||
.pie .legend {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
min-width: 200px;
|
||||
margin: 0 20px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.pie .legend li {
|
||||
height: 22px;
|
||||
margin-bottom: 16px;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pie .legend li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.pie .dot {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.pie .line {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.pie .legendTitle {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.pie .percent {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.pie .value {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.pie .title {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.pie .total {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
max-height: 62px;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.pie .total > h4 {
|
||||
height: 22px;
|
||||
margin-bottom: 8px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.pie .total > p {
|
||||
display: block;
|
||||
height: 32px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 1.2em;
|
||||
line-height: 32px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.legendBlock.hasLegend .chart {
|
||||
width: 100%;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
.legendBlock .legend {
|
||||
position: relative;
|
||||
transform: none;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
.tagCloud {
|
||||
overflow: hidden;
|
||||
}
|
||||
.tagCloud canvas {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.timelineChart {
|
||||
background: #fff;
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.waterWave {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
transform-origin: left;
|
||||
}
|
||||
.waterWave .text {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.waterWave .text span {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.waterWave .text h4 {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.waterWave .waterWaveCanvasWrapper {
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
.miniChart {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.miniChart .chartContent {
|
||||
position: absolute;
|
||||
bottom: -28px;
|
||||
width: 100%;
|
||||
}
|
||||
.miniChart .chartContent > div {
|
||||
margin: 0 -5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.miniChart .chartLoading {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.numberInfo .suffix {
|
||||
margin-left: 4px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
}
|
||||
.numberInfo .numberInfoTitle {
|
||||
margin-bottom: 16px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 16px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.numberInfo .numberInfoSubTitle {
|
||||
height: 22px;
|
||||
overflow: hidden;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.numberInfo .numberInfoValue {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.numberInfo .numberInfoValue > span {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
margin-right: 32px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.numberInfo .numberInfoValue .subTotal {
|
||||
margin-right: 0;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 16px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.numberInfo .numberInfoValue .subTotal .anticon {
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
transform: scale(0.82);
|
||||
}
|
||||
.numberInfo .numberInfoValue .subTotal :global .anticon-caret-up {
|
||||
color: #f5222d;
|
||||
}
|
||||
.numberInfo .numberInfoValue .subTotal :global .anticon-caret-down {
|
||||
color: #52c41a;
|
||||
}
|
||||
.numberInfolight .numberInfoValue > span {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
{
|
||||
public partial class SalesCard
|
||||
{
|
||||
public class SaleItem
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string Title { get; set; }
|
||||
public string Total { get; set; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
@inherits AntDomComponentBase
|
||||
|
||||
<Card>
|
||||
<CardTabs>
|
||||
<div class="salesCard">
|
||||
<Tabs ActiveKeyChanged="OnTabChanged" TabBarStyle="margin-bottom: 24px;">
|
||||
<TabPane Key="1" Tab="Sales">
|
||||
<Row>
|
||||
<AntDesign.Col Xl="16" Lg="12" Md="12" Sm="24" Xs="24">
|
||||
<AntDesign.Charts.Column @ref="_saleChart" Config="_saleChartConfig" />
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="8" Lg="12" Md="12" Sm="24" Xs="24">
|
||||
<div class="salesRank">
|
||||
<h1 class="rankingTitle">
|
||||
Sales Ranking
|
||||
</h1>
|
||||
<ul class="rankingList">
|
||||
@foreach (var item in Items)
|
||||
{
|
||||
<li key="@item.Title">
|
||||
<span class="rankingItemNumber @(item.Id <= 3 ? "active" : "")">
|
||||
@item.Id
|
||||
</span>
|
||||
<span class="rankingItemTitle" title="@item.Title">
|
||||
@item.Title
|
||||
</span>
|
||||
<span class="rankingItemValue">
|
||||
@item.Total
|
||||
</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane Key="2" Tab="Visits">
|
||||
<Row>
|
||||
<AntDesign.Col Xl="16" Lg="12" Md="12" Sm="24" Xs="24">
|
||||
<AntDesign.Charts.Column @ref="_visitChart" Config="_visitChartConfig" />
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="8" Lg="12" Md="12" Sm="24" Xs="24">
|
||||
<div class="salesRank">
|
||||
<h1 class="rankingTitle">
|
||||
Visits Ranking
|
||||
</h1>
|
||||
<ul class="rankingList">
|
||||
@foreach (var item in Items)
|
||||
{
|
||||
<li key="@item.Title">
|
||||
<span class="rankingItemNumber @(item.Id <= 3 ? "active" : "")">
|
||||
@item.Id
|
||||
</span>
|
||||
<span class="rankingItemTitle" title="@item.Title">
|
||||
@item.Title
|
||||
</span>
|
||||
<span class="rankingItemValue">
|
||||
@item.Total
|
||||
</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</CardTabs>
|
||||
</Card>
|
||||
@@ -1,61 +0,0 @@
|
||||
using AntDesign.Charts;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System.Threading.Tasks;
|
||||
using Xzy.KnowledgeBase.Services;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
{
|
||||
public partial class SalesCard
|
||||
{
|
||||
private readonly ColumnConfig _saleChartConfig = new ColumnConfig
|
||||
{
|
||||
AutoFit = true,
|
||||
Padding = "auto",
|
||||
XField = "x",
|
||||
YField = "y"
|
||||
};
|
||||
|
||||
private readonly ColumnConfig _visitChartConfig = new ColumnConfig
|
||||
{
|
||||
AutoFit = true,
|
||||
Padding = "auto",
|
||||
XField = "x",
|
||||
YField = "y"
|
||||
};
|
||||
|
||||
private IChartComponent _saleChart;
|
||||
private IChartComponent _visitChart;
|
||||
|
||||
[Parameter]
|
||||
public SaleItem[] Items { get; set; } =
|
||||
{
|
||||
new SaleItem {Id = 1, Title = "Gongzhuan No.0 shop", Total = "323,234"},
|
||||
new SaleItem {Id = 2, Title = "Gongzhuan No.1 shop", Total = "323,234"},
|
||||
new SaleItem {Id = 3, Title = "Gongzhuan No.2 shop", Total = "323,234"},
|
||||
new SaleItem {Id = 4, Title = "Gongzhuan No.3 shop", Total = "323,234"},
|
||||
new SaleItem {Id = 5, Title = "Gongzhuan No.4 shop", Total = "323,234"},
|
||||
new SaleItem {Id = 6, Title = "Gongzhuan No.5 shop", Total = "323,234"},
|
||||
new SaleItem {Id = 7, Title = "Gongzhuan No.6 shop", Total = "323,234"}
|
||||
};
|
||||
|
||||
[Inject] public IChartService ChartService { get; set; }
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
await base.OnAfterRenderAsync(firstRender);
|
||||
if (firstRender)
|
||||
{
|
||||
await OnTabChanged("1");
|
||||
}
|
||||
}
|
||||
|
||||
private async Task OnTabChanged(string activeKey)
|
||||
{
|
||||
var data = await ChartService.GetSalesDataAsync();
|
||||
if (activeKey == "1")
|
||||
await _saleChart.ChangeData(data);
|
||||
else
|
||||
await _visitChart.ChangeData(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
@inherits AntDomComponentBase
|
||||
|
||||
<div class="trendItem">
|
||||
<span>@ChildContent</span>
|
||||
<span class="@Flag">
|
||||
@if(Flag == "up"){
|
||||
<Icon Type="caret-up" />
|
||||
} else {
|
||||
<Icon Type="caret-down" />
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
@@ -1,13 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
{
|
||||
public partial class Trend
|
||||
{
|
||||
[Parameter]
|
||||
public RenderFragment ChildContent { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string Flag { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.trendItem {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.trendItem .up,
|
||||
.trendItem .down {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.trendItem .up span,
|
||||
.trendItem .down span {
|
||||
font-size: 12px;
|
||||
transform: scale(0.83);
|
||||
}
|
||||
.trendItem .up {
|
||||
color: #f5222d;
|
||||
}
|
||||
.trendItem .down {
|
||||
top: -1px;
|
||||
color: #52c41a;
|
||||
}
|
||||
.trendItem.trendItemGrey .up,
|
||||
.trendItem.trendItemGrey .down {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.trendItem.reverseColor .up {
|
||||
color: #52c41a;
|
||||
}
|
||||
.trendItem.reverseColor .down {
|
||||
color: #f5222d;
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Analysis
|
||||
@page "/"
|
||||
@attribute [ReuseTabsPage(Title ="Home", Pin =true, Closable =false, Order =0)]
|
||||
|
||||
<GridContent>
|
||||
<Row Type="flex" Gutter="24">
|
||||
<AntDesign.Col Xs="24" Sm="12" Md="12" Lg="12" Xl="6" Style="margin-bottom: 24px;">
|
||||
<ChartCard Title="Total Sales"
|
||||
Total="$ 126,560"
|
||||
ContentHeight="46">
|
||||
<ChildContent>
|
||||
<Trend Flag="up">
|
||||
WoW Change
|
||||
<span class="trendText">12%</span>
|
||||
</Trend>
|
||||
<Trend Flag="down">
|
||||
DoD Change
|
||||
<span class="trendText">11%</span>
|
||||
</Trend>
|
||||
</ChildContent>
|
||||
<Footer>
|
||||
<Field Label="Daily Sale" Value="$12,423" />
|
||||
</Footer>
|
||||
</ChartCard>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xs="24" Sm="12" Md="12" Lg="12" Xl="6" Style="margin-bottom: 24px;">
|
||||
<ChartCard Title="Visits"
|
||||
Total="8846"
|
||||
ContentHeight="46">
|
||||
<ChildContent>
|
||||
<MiniArea />
|
||||
</ChildContent>
|
||||
<Footer>
|
||||
<Field Label="Daily Visits" Value="1243" />
|
||||
</Footer>
|
||||
</ChartCard>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xs="24" Sm="12" Md="12" Lg="12" Xl="6" Style="margin-bottom: 24px;">
|
||||
<ChartCard Title="Payments"
|
||||
Total="6560"
|
||||
ContentHeight="46">
|
||||
<ChildContent>
|
||||
<MiniBar />
|
||||
</ChildContent>
|
||||
<Footer>
|
||||
<Field Label="Conversion Rate" Value="60%" />
|
||||
</Footer>
|
||||
</ChartCard>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xs="24" Sm="12" Md="12" Lg="12" Xl="6" Style="margin-bottom: 24px;">
|
||||
<ChartCard Title="Operational Effect"
|
||||
Total="78%"
|
||||
ContentHeight="46">
|
||||
<ChildContent>
|
||||
<MiniProgress
|
||||
Percent="78"
|
||||
StrokeWidth="8"
|
||||
Target="80"
|
||||
Color="#13C2C2" />
|
||||
</ChildContent>
|
||||
<Footer>
|
||||
<Field Label="Conversion Rate" Value="60%" />
|
||||
</Footer>
|
||||
</ChartCard>
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
|
||||
<SalesCard />
|
||||
</GridContent>
|
||||
@@ -1,161 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.iconGroup span.anticon {
|
||||
margin-left: 16px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
cursor: pointer;
|
||||
transition: color 0.32s;
|
||||
}
|
||||
.iconGroup span.anticon:hover {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.rankingList {
|
||||
margin: 25px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.rankingList li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
zoom: 1;
|
||||
}
|
||||
.rankingList li::before,
|
||||
.rankingList li::after {
|
||||
display: table;
|
||||
content: ' ';
|
||||
}
|
||||
.rankingList li::after {
|
||||
clear: both;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.rankingList li span {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.rankingList li .rankingItemNumber {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 1.5px;
|
||||
margin-right: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
background-color: #fafafa;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.rankingList li .rankingItemNumber.active {
|
||||
color: #fff;
|
||||
background-color: #314659;
|
||||
}
|
||||
.rankingList li .rankingItemTitle {
|
||||
flex: 1;
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.salesExtra {
|
||||
display: inline-block;
|
||||
margin-right: 24px;
|
||||
}
|
||||
.salesExtra a {
|
||||
margin-left: 24px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.salesExtra a:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
.salesExtra a.currentDate {
|
||||
color: #1890ff;
|
||||
}
|
||||
.salesCard .salesBar {
|
||||
padding: 0 0 32px 32px;
|
||||
}
|
||||
.salesCard .salesRank {
|
||||
padding: 0 32px 32px 72px;
|
||||
}
|
||||
.salesCard :global .ant-tabs-bar,
|
||||
.salesCard :global .ant-tabs-nav-wrap {
|
||||
padding-left: 16px;
|
||||
}
|
||||
.salesCard :global .ant-tabs-bar .ant-tabs-nav .ant-tabs-tab,
|
||||
.salesCard :global .ant-tabs-nav-wrap .ant-tabs-nav .ant-tabs-tab {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.salesCard :global .ant-tabs-extra-content {
|
||||
padding-right: 24px;
|
||||
line-height: 55px;
|
||||
}
|
||||
.salesCard :global .ant-card-head {
|
||||
position: relative;
|
||||
}
|
||||
.salesCard :global .ant-card-head-title {
|
||||
align-items: normal;
|
||||
}
|
||||
.salesCardExtra {
|
||||
height: inherit;
|
||||
}
|
||||
.salesTypeRadio {
|
||||
position: absolute;
|
||||
right: 54px;
|
||||
bottom: 12px;
|
||||
}
|
||||
.offlineCard :global .ant-tabs-ink-bar {
|
||||
bottom: auto;
|
||||
}
|
||||
.offlineCard :global .ant-tabs-bar {
|
||||
border-bottom: none;
|
||||
}
|
||||
.offlineCard :global .ant-tabs-nav-container-scrolling {
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
.offlineCard :global .ant-tabs-tab-prev-icon::before {
|
||||
position: relative;
|
||||
left: 6px;
|
||||
}
|
||||
.offlineCard :global .ant-tabs-tab-next-icon::before {
|
||||
position: relative;
|
||||
right: 6px;
|
||||
}
|
||||
.offlineCard :global .ant-tabs-tab-active h4 {
|
||||
color: #1890ff;
|
||||
}
|
||||
.trendText {
|
||||
margin-left: 8px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
.salesExtra {
|
||||
display: none;
|
||||
}
|
||||
.rankingList li span:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.rankingTitle {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.salesCard .salesBar {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 576px) {
|
||||
.salesExtraWrap {
|
||||
display: none;
|
||||
}
|
||||
.salesCard :global .ant-tabs-content {
|
||||
padding-top: 30px;
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Monitor
|
||||
@using Xzy.KnowledgeBase.Models
|
||||
@inherits AntDomComponentBase
|
||||
|
||||
<div class="activeChart">
|
||||
<Statistic Title="@("Goal evaluation")" Value="@("Expected to meet expectations")" />
|
||||
<div style="margin-top: 32px">
|
||||
<MiniArea Data="ActiveData" />
|
||||
</div>
|
||||
@if (ActiveData != null) {
|
||||
<div>
|
||||
<div class="activeChartGrid">
|
||||
<p>@(ActiveData.OrderBy(x => x.Y).Last().Y + 200) Billion</p>
|
||||
<p>@(ActiveData.OrderBy(x=>x.Y).ToArray()[ActiveData.Length/2].Y) Billion</p>
|
||||
</div>
|
||||
<div class="dashedLine">
|
||||
<div class="line" />
|
||||
</div>
|
||||
<div class="dashedLine">
|
||||
<div class="line" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="activeChartLegend">
|
||||
<span>00:00</span>
|
||||
<span>@ActiveData[ActiveData.Length / 2].X</span>
|
||||
<span>@ActiveData.Last().X</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
@code
|
||||
{
|
||||
public ChartDataItem[] ActiveData { get; set; }
|
||||
|
||||
protected override void OnInitialized() {
|
||||
base.OnInitializedAsync();
|
||||
ActiveData = GetActiveData();
|
||||
}
|
||||
|
||||
private ChartDataItem[] GetActiveData() {
|
||||
var activeData = new ChartDataItem[24];
|
||||
var random = new Random();
|
||||
for (var i = 0; i < 24; i++) {
|
||||
activeData[i] = new ChartDataItem {
|
||||
X = $"{i.ToString().PadRight(2, '0')}: 00",
|
||||
Y = (int) (Math.Floor(random.NextDouble() * 200) + i * 50)
|
||||
};
|
||||
}
|
||||
return activeData;
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
.activeChart {
|
||||
position: relative;
|
||||
}
|
||||
.activeChartGrid p {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
}
|
||||
.activeChartGrid p:last-child {
|
||||
top: 115px;
|
||||
}
|
||||
.activeChartLegend {
|
||||
position: relative;
|
||||
height: 20px;
|
||||
margin-top: 8px;
|
||||
font-size: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
.activeChartLegend span {
|
||||
display: inline-block;
|
||||
width: 33.33%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.activeChartLegend span:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
.activeChartLegend span:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
.dashedLine {
|
||||
position: relative;
|
||||
top: -70px;
|
||||
left: -3px;
|
||||
height: 1px;
|
||||
}
|
||||
.dashedLine .line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, transparent 50%, #e9e9e9 50%);
|
||||
background-size: 6px;
|
||||
}
|
||||
.dashedLine:last-child {
|
||||
top: -36px;
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Monitor
|
||||
@inherits AntDomComponentBase
|
||||
|
||||
<div id="container-gauge"></div>
|
||||
@@ -1,25 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Dashboard.Monitor
|
||||
{
|
||||
public partial class Gauge
|
||||
{
|
||||
[Parameter]
|
||||
public string Title { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string Color { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public int? Height { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public int? BgColor { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public int Percent { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public bool? ForceFit { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Monitor
|
||||
@inherits AntDomComponentBase
|
||||
|
||||
<div id="container-map"></div>
|
||||
|
||||
@code
|
||||
{
|
||||
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
@using Xzy.KnowledgeBase.Models
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Monitor
|
||||
|
||||
<Area @ref="_chart" Data="Data" Config="_chartConfig" />
|
||||
|
||||
@code
|
||||
{
|
||||
private IChartComponent _chart;
|
||||
|
||||
private readonly AreaConfig _chartConfig = new AreaConfig
|
||||
{
|
||||
XField = "x",
|
||||
YField = "y",
|
||||
Height = 84,
|
||||
Padding = new[] { 8, 8, 8, 8 },
|
||||
AutoFit = true,
|
||||
XAxis = new ValueCatTimeAxis
|
||||
{
|
||||
Visible = false
|
||||
},
|
||||
YAxis = new ValueAxis
|
||||
{
|
||||
Visible = false
|
||||
}
|
||||
};
|
||||
|
||||
[Parameter]
|
||||
public ChartDataItem[] Data { get; set; }
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Monitor
|
||||
|
||||
<div id="container-pie"></div>
|
||||
@@ -1,13 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Dashboard.Monitor
|
||||
{
|
||||
public partial class Pie
|
||||
{
|
||||
[Parameter]
|
||||
public bool? Animate { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public int? LineWidth { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Monitor
|
||||
@@ -1,13 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Dashboard.Monitor
|
||||
{
|
||||
public partial class TagCloud
|
||||
{
|
||||
[Parameter]
|
||||
public object[] Data { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public int? Height { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Monitor
|
||||
|
||||
<div></div>
|
||||
@@ -1,16 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Dashboard.Monitor
|
||||
{
|
||||
public partial class WaterWave
|
||||
{
|
||||
[Parameter]
|
||||
public string Title { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public int Percent { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public int? Height { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Monitor
|
||||
@page "/dashboard/monitor"
|
||||
|
||||
<GridContent>
|
||||
<Row Gutter="24">
|
||||
<AntDesign.Col Xl="18" Lg="24" Md="24" Sm="24" Xs="24" Style="margin-bottom: 24px;">
|
||||
<Card>
|
||||
<Row>
|
||||
<AntDesign.Col Md="6" Sm="12" Xs="24">
|
||||
<Statistic Title="@("Total transactions today")" Value="124543233" Suffix="@("yuan")" />
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Md="6" Sm="12" Xs="24">
|
||||
<Statistic Title="@("Sales target completion rate")" Value="92" Suffix="@("%")" />
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Md="6" Sm="12" Xs="24">
|
||||
<CountDown Title="@("Remaining time of activity")" Value="@_deadline" Format="hh:mm:ss:fff" />
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Md="6" Sm="12" Xs="24">
|
||||
<Statistic Title="@("Total transactions per second")" Value="234" Suffix="@("yuan")" />
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
<div class="mapChart">
|
||||
<Map />
|
||||
</div>
|
||||
</Card>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="6" Lg="24" Md="24" Sm="24" Xs="24" Style="margin-bottom: 24px;">
|
||||
<Card Title="@("Activity forecast")">
|
||||
<ActiveChart />
|
||||
</Card>
|
||||
<Card Title="@("Efficiency")">
|
||||
@* <AntDesign.Pro.Pages.Monitor.Gauge Title="Ratio" Height="180" Percent="81" /> *@
|
||||
</Card>
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
|
||||
<Row Gutter="24">
|
||||
<AntDesign.Col Xl="12" Lg="24" Sm="24" Xs="24" Style="margin-bottom: 24px;">
|
||||
<Card Title="@("Proportion Per Category")" Class="pieCard">
|
||||
<Row Style="padding: 16px 0;">
|
||||
<AntDesign.Col Span="8">
|
||||
@* <AntDesign.Pro.Pages.Monitor.Pie LineWidth="2" /> *@
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Span="8">
|
||||
@* <AntDesign.Pro.Pages.Monitor.Pie LineWidth="2" /> *@
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Span="8">
|
||||
@* <AntDesign.Pro.Pages.Monitor.Pie LineWidth="2" /> *@
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="6" Lg="12" Sm="24" Xs="24" Style="margin-bottom: 24px;">
|
||||
<Card Title="@("Popular Searches")">
|
||||
@* <TagCloud Data="Tags" Height="161" /> *@
|
||||
</Card>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="6" Lg="12" Sm="24" Xs="24" Style="margin-bottom: 24px;">
|
||||
<Card Title="@("Resource Surplus")">
|
||||
@* <WaterWave Height="161" Title="Fund Surplus" Percent="34" /> *@
|
||||
</Card>
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
</GridContent>
|
||||
|
||||
@code
|
||||
{
|
||||
private readonly DateTime _deadline = DateTime.Now.AddMilliseconds(1000 * 60 * 60 * 24 * 2 + 1000 * 30);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.mapChart {
|
||||
height: 452px;
|
||||
padding-top: 24px;
|
||||
}
|
||||
.mapChart img {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
max-height: 437px;
|
||||
}
|
||||
.pieCard :global(.pie-stat) {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
.mapChart {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Workplace
|
||||
|
||||
<div class="linkGroup">
|
||||
@foreach (var link in Links)
|
||||
{
|
||||
<a href="@link.Href">@link.Title</a>
|
||||
}
|
||||
|
||||
<Button Size="small" Type="primary" Ghost>
|
||||
<Icon Type="plus" /> Add
|
||||
</Button>
|
||||
</div>
|
||||
@@ -1,16 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Dashboard.Workplace
|
||||
{
|
||||
public class EditableLink
|
||||
{
|
||||
public string Title { get; set; }
|
||||
public string Href { get; set; }
|
||||
public string Id { get; set; }
|
||||
}
|
||||
|
||||
public partial class EditableLinkGroup
|
||||
{
|
||||
[Parameter] public EditableLink[] Links { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.linkGroup {
|
||||
padding: 20px 0 8px 24px;
|
||||
font-size: 0;
|
||||
}
|
||||
.linkGroup > a {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
margin-bottom: 13px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 14px;
|
||||
}
|
||||
.linkGroup > a:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Workplace
|
||||
@@ -1,58 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Workplace
|
||||
|
||||
<AntDesign.Charts.Radar @ref="_chart" Config="_chartConfig" />
|
||||
|
||||
@if (HasLegend)
|
||||
{
|
||||
<Row Class="legend">
|
||||
<AntDesign.Col>
|
||||
<div class="legendItem">
|
||||
<p>
|
||||
<span class="dot" style="background-color: #aaa"></span>
|
||||
<span></span>
|
||||
</p>
|
||||
<h6></h6>
|
||||
</div>
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
}
|
||||
|
||||
@inject IChartService ChartService
|
||||
@code
|
||||
{
|
||||
[Parameter] public bool HasLegend { get; set; }
|
||||
|
||||
[Parameter] public int Height { get; set; } = 343;
|
||||
|
||||
private IChartComponent _chart;
|
||||
|
||||
private readonly RadarConfig _chartConfig = new RadarConfig
|
||||
{
|
||||
Height = 343,
|
||||
AutoFit = true,
|
||||
XField="label",
|
||||
YField="value",
|
||||
RadiusAxis = new ValueAxis
|
||||
{
|
||||
Grid = new BaseAxisGrid
|
||||
{
|
||||
AlternateColor = new[] { "rgba(0, 0, 0, 0.04)", null }
|
||||
}
|
||||
},
|
||||
Area = new RadarViewConfigArea
|
||||
{
|
||||
Visible = false
|
||||
},
|
||||
Point = new RadarViewConfigPoint
|
||||
{
|
||||
Visible = true
|
||||
}
|
||||
};
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await base.OnInitializedAsync();
|
||||
var data = await ChartService.GetRadarDataAsync();
|
||||
await _chart.ChangeData(data);
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.radar .legend {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.radar .legend .legendItem {
|
||||
position: relative;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radar .legend .legendItem p {
|
||||
margin: 0;
|
||||
}
|
||||
.radar .legend .legendItem h6 {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
padding-left: 16px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.radar .legend .legendItem::after {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background-color: #f0f0f0;
|
||||
content: '';
|
||||
}
|
||||
.radar .legend > :last-child .legendItem::after {
|
||||
display: none;
|
||||
}
|
||||
.radar .legend .dot {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Dashboard.Workplace
|
||||
@using System.Text.RegularExpressions
|
||||
@page "/dashboard/workplace"
|
||||
|
||||
<PageContainer Title="Workplace">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem>Home</BreadcrumbItem>
|
||||
<BreadcrumbItem>Dashboard</BreadcrumbItem>
|
||||
<BreadcrumbItem>Workplace</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
</Breadcrumb>
|
||||
<Content>
|
||||
<div class="pageHeaderContent__b__0">
|
||||
<div class="avatar">
|
||||
<Avatar size="large" src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="contentTitle">
|
||||
Good Morning, Serati Ma. Have a great day!
|
||||
</div>
|
||||
<div>
|
||||
Interaction Expert | Ant Financial Service-XX Business Group-XX Platform Department-XX Technology Department-UED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Content>
|
||||
<ExtraContent>
|
||||
<div class="extraContent">
|
||||
<div class="statItem">
|
||||
<Statistic Title="@("Number of Items")" Value="56" />
|
||||
</div>
|
||||
<div class="statItem">
|
||||
<Statistic Title="@("Rank within the Team")" Value="8" Suffix="@("/ 24")" />
|
||||
</div>
|
||||
<div class="statItem">
|
||||
<Statistic Title="@("Project Visit")" Value="2223" />
|
||||
</div>
|
||||
</div>
|
||||
</ExtraContent>
|
||||
<ChildContent>
|
||||
<Row Gutter="24">
|
||||
<AntDesign.Col Xl="16" Lg="24" Md="24" Sm="24" Xs="24">
|
||||
<Card Class="projectList"
|
||||
Style="margin-bottom: 24px;"
|
||||
Title="Project in Progress"
|
||||
BodyStyle="padding: 0px;">
|
||||
<Extra>
|
||||
<a href="/">All items</a>
|
||||
</Extra>
|
||||
<ChildContent>
|
||||
@foreach (var item in _projectNotice) {
|
||||
<CardGrid Hoverable>
|
||||
<Card BodyStyle="padding: 0px;" Bordered="false">
|
||||
<CardMeta>
|
||||
<TitleTemplate>
|
||||
<div class="cardTitle">
|
||||
<Avatar Size="small" Src="@item.Logo"></Avatar>
|
||||
<a href="@item.Href">@item.Title</a>
|
||||
</div>
|
||||
</TitleTemplate>
|
||||
<DescriptionTemplate>
|
||||
<!--todo: submit a pr to card component-->
|
||||
<div class="ant-card-meta-description">
|
||||
@item.Description
|
||||
</div>
|
||||
</DescriptionTemplate>
|
||||
</CardMeta>
|
||||
<div class="projectItemContent">
|
||||
<a href="@item.MemberLink">@item.Member</a>
|
||||
@if (!string.IsNullOrEmpty(item.UpdatedAt)) {
|
||||
<span class="datetime" title="@item.UpdatedAt">
|
||||
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
}
|
||||
</ChildContent>
|
||||
</Card>
|
||||
|
||||
<Card BodyStyle="padding: 0px;"
|
||||
Class="activeCard"
|
||||
Title="Dynamic">
|
||||
<AntList TItem="ActivitiesType"
|
||||
DataSource="@_activities"
|
||||
Class="activitiesList"
|
||||
Size="large"
|
||||
ItemLayout="ListItemLayout.Horizontal">
|
||||
<ListItem>
|
||||
<ListItemMeta Avatar="@context.User.Avatar" Description="@context.UpdatedAt.ToFriendlyDisplay()">
|
||||
<TitleTemplate>
|
||||
<span>
|
||||
<a class="username">@context.User.Name</a>
|
||||
|
||||
<span class="event">
|
||||
@foreach (var str in Regex.Split(context.Template, @"@\{([^{}]*)\}")) {
|
||||
if (str == "group") {
|
||||
<a href="@context.Group.Link" key="@context.Group.Name">
|
||||
@context.Group.Name
|
||||
</a>
|
||||
}
|
||||
else if (str == "project") {
|
||||
<a href="@context.Project.Link" key="@context.Project.Name">
|
||||
@context.Project.Name
|
||||
</a>
|
||||
}
|
||||
else {
|
||||
@str
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</span>
|
||||
</TitleTemplate>
|
||||
</ListItemMeta>
|
||||
</ListItem>
|
||||
</AntList>
|
||||
</Card>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="8" Lg="24" Md="24" Sm="24" Xs="24">
|
||||
<Card Style="margin-bottom: 24px;"
|
||||
Title="Quick Start / Quick Navigation"
|
||||
BodyStyle="padding: 0px;">
|
||||
<EditableLinkGroup Links="_links" />
|
||||
</Card>
|
||||
|
||||
<Card Style="margin-bottom: 24px;"
|
||||
Title="XX Index">
|
||||
<div class="chart">
|
||||
<Xzy.KnowledgeBase.Pages.Dashboard.Workplace.Radar />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card BodyStyle="padding-top: 12px; padding-bottom: 12px;"
|
||||
Title="Team">
|
||||
<div class="members">
|
||||
<Row Gutter="48">
|
||||
@foreach (var item in _projectNotice) {
|
||||
<AntDesign.Col Span="12" Style="padding-left: 24px; padding-right: 24px;">
|
||||
<a href="@item.Href">
|
||||
<Avatar Src="@item.Logo" Size="small" />
|
||||
<span class="member">@item.Member</span>
|
||||
</a>
|
||||
</AntDesign.Col>
|
||||
}
|
||||
</Row>
|
||||
</div>
|
||||
</Card>
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
</ChildContent>
|
||||
</PageContainer>
|
||||
@@ -1,32 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System.Threading.Tasks;
|
||||
using Xzy.KnowledgeBase.Models;
|
||||
using Xzy.KnowledgeBase.Services;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Dashboard.Workplace
|
||||
{
|
||||
public partial class Index
|
||||
{
|
||||
private readonly EditableLink[] _links =
|
||||
{
|
||||
new EditableLink {Title = "Operation 1", Href = ""},
|
||||
new EditableLink {Title = "Operation 2", Href = ""},
|
||||
new EditableLink {Title = "Operation 3", Href = ""},
|
||||
new EditableLink {Title = "Operation 4", Href = ""},
|
||||
new EditableLink {Title = "Operation 5", Href = ""},
|
||||
new EditableLink {Title = "Operation 6", Href = ""}
|
||||
};
|
||||
|
||||
private ActivitiesType[] _activities = { };
|
||||
private NoticeType[] _projectNotice = { };
|
||||
|
||||
[Inject] public IProjectService ProjectService { get; set; }
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await base.OnInitializedAsync();
|
||||
_projectNotice = await ProjectService.GetProjectNoticeAsync();
|
||||
_activities = await ProjectService.GetActivitiesAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,224 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.activitiesList {
|
||||
padding: 0 24px 8px 24px;
|
||||
}
|
||||
.activitiesList .username {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.activitiesList .event {
|
||||
font-weight: normal;
|
||||
}
|
||||
.pageHeaderContent__b__0 {
|
||||
display: flex;
|
||||
}
|
||||
.pageHeaderContent__b__0 .avatar {
|
||||
flex: 0 1 72px;
|
||||
}
|
||||
.pageHeaderContent__b__0 .avatar > span {
|
||||
display: block;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 72px;
|
||||
}
|
||||
.pageHeaderContent__b__0 .content {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
flex: 1 1 auto;
|
||||
margin-left: 24px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
line-height: 22px;
|
||||
}
|
||||
.pageHeaderContent__b__0 .content .contentTitle {
|
||||
margin-bottom: 12px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.extraContent {
|
||||
zoom: 1;
|
||||
float: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.extraContent::before,
|
||||
.extraContent::after {
|
||||
display: table;
|
||||
content: ' ';
|
||||
}
|
||||
.extraContent::after {
|
||||
clear: both;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.extraContent .statItem {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 32px;
|
||||
}
|
||||
.extraContent .statItem > p:first-child {
|
||||
margin-bottom: 4px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.extraContent .statItem > p {
|
||||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
}
|
||||
.extraContent .statItem > p > span {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 20px;
|
||||
}
|
||||
.extraContent .statItem::after {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background-color: #f0f0f0;
|
||||
content: '';
|
||||
}
|
||||
.extraContent .statItem:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
.extraContent .statItem:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
.members a {
|
||||
display: block;
|
||||
height: 24px;
|
||||
margin: 12px 0;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.members a .member {
|
||||
margin-left: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.members a:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
.projectList .ant-card-meta-description {
|
||||
height: 44px;
|
||||
overflow: hidden;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
line-height: 22px;
|
||||
}
|
||||
.projectList .cardTitle {
|
||||
font-size: 0;
|
||||
}
|
||||
.projectList .cardTitle a {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin-left: 12px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.projectList .cardTitle a:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
.projectList .projectGrid {
|
||||
width: 33.33%;
|
||||
}
|
||||
.projectList .projectItemContent {
|
||||
display: flex;
|
||||
height: 20px;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.projectList .projectItemContent a {
|
||||
display: inline-block;
|
||||
flex: 1 1 0;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.projectList .projectItemContent a:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
.projectList .projectItemContent .datetime {
|
||||
flex: 0 0 auto;
|
||||
float: right;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.datetime {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
@media screen and (max-width: 1200px) and (min-width: 992px) {
|
||||
.activeCard {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.members {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.extraContent {
|
||||
margin-left: -44px;
|
||||
}
|
||||
.extraContent .statItem {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
.activeCard {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.members {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.extraContent {
|
||||
float: none;
|
||||
margin-right: 0;
|
||||
}
|
||||
.extraContent .statItem {
|
||||
padding: 0 16px;
|
||||
text-align: left;
|
||||
}
|
||||
.extraContent .statItem::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.extraContent {
|
||||
margin-left: -16px;
|
||||
}
|
||||
.projectList .projectGrid {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 576px) {
|
||||
.pageHeaderContent {
|
||||
display: block;
|
||||
}
|
||||
.pageHeaderContent .content {
|
||||
margin-left: 0;
|
||||
}
|
||||
.extraContent .statItem {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
.projectList .projectGrid {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,166 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Form
|
||||
@page "/form/advanced-form"
|
||||
@using OneOf
|
||||
|
||||
<Form Layout="@FormLayout.Vertical"
|
||||
Model="@_model">
|
||||
<PageContainer>
|
||||
<Content>Advanced forms are commonly used in scenarios where large quantities of data are entered and submitted at once.</Content>
|
||||
<ChildContent>
|
||||
<Card Title="@("Warehouse Management ")" Class="CARD">
|
||||
<Row Gutter="16">
|
||||
<AntDesign.Col Lg="6" Md="12" Sm="24">
|
||||
<FormItem Label="Warehouse name">
|
||||
<Input Placeholder="Please enter the warehouse name" @bind-Value="@context.Name" />
|
||||
</FormItem>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="new EmbeddedProperty{Span = 6, Offset = 2}"
|
||||
Lg="new EmbeddedProperty{Span = 8}"
|
||||
Md="new EmbeddedProperty{Span = 12}"
|
||||
Sm="24">
|
||||
<FormItem Label="Warehouse domain">
|
||||
<AntDesign.Input Style="width: 100%" Placeholder="website" @bind-Value="@context.Url">
|
||||
<AddOnBefore>http://</AddOnBefore>
|
||||
<AddOnAfter>.com</AddOnAfter>
|
||||
</AntDesign.Input>
|
||||
</FormItem>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="new EmbeddedProperty{Span = 8, Offset = 2}"
|
||||
Lg="new EmbeddedProperty{Span = 10}"
|
||||
Md="new EmbeddedProperty{Span = 24}"
|
||||
Sm="24">
|
||||
<FormItem Label="Warehouse Manager">
|
||||
<Select TItem="string"
|
||||
TItemValue="string"
|
||||
Placeholder="Please select an administrator"
|
||||
@bind-Value="@context.Owner">
|
||||
<SelectOptions>
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("xiao")" Label="Fu Xiaoxiao" />
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("mao")" Label="Zhou Maomao" />
|
||||
</SelectOptions>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
<Row Gutter="16">
|
||||
<AntDesign.Col Lg="6" Md="12" Sm="24">
|
||||
<FormItem Label="Approver">
|
||||
<Select TItem="string"
|
||||
TItemValue="string"
|
||||
Placeholder="Please select an approver"
|
||||
@bind-Value="@context.Approver">
|
||||
<SelectOptions>
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("xiao")" Label="Fu Xiaoxiao" />
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("mao")" Label="Zhou Maomao" />
|
||||
</SelectOptions>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="new EmbeddedProperty{Span = 6, Offset = 2}"
|
||||
Lg="new EmbeddedProperty{Span = 8}"
|
||||
Md="new EmbeddedProperty{Span = 12}"
|
||||
Sm="24">
|
||||
<FormItem Label="Effectivity Date">
|
||||
<RangePicker Placeholder="@(new [] {"Start date", "End date"})" Style="width: 100%" @bind-Value="@context.DateRange" />
|
||||
</FormItem>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="new EmbeddedProperty{Span = 8, Offset = 2}"
|
||||
Lg="new EmbeddedProperty{Span = 10}"
|
||||
Md="new EmbeddedProperty{Span = 24}"
|
||||
Sm="24">
|
||||
<FormItem Label="Warehouse type">
|
||||
<Select TItem="string"
|
||||
TItemValue="string"
|
||||
Placeholder="Please select warehouse type"
|
||||
@bind-Value="@context.Type">
|
||||
<SelectOptions>
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("private")" Label="Private" />
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("public")" Label="Public" />
|
||||
</SelectOptions>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Card Title="@("Task Management")">
|
||||
<Row Gutter="16">
|
||||
<AntDesign.Col Lg="6" Md="12" Sm="24">
|
||||
<FormItem Label="Task Name">
|
||||
<Input Placeholder="Please enter task name" @bind-Value="@context.Name2" />
|
||||
</FormItem>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="new EmbeddedProperty{Span = 6, Offset = 2}"
|
||||
Lg="new EmbeddedProperty{Span = 8}"
|
||||
Md="new EmbeddedProperty{Span = 12}"
|
||||
Sm="24">
|
||||
<FormItem Label="Assignment Details">
|
||||
<Input Placeholder="Please enter assignment details" @bind-Value="@context.Url2" />
|
||||
</FormItem>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="new EmbeddedProperty{Span = 8, Offset = 2}"
|
||||
Lg="new EmbeddedProperty{Span = 10}"
|
||||
Md="new EmbeddedProperty{Span = 24}"
|
||||
Sm="24">
|
||||
<FormItem Label="Facilitator">
|
||||
<Select TItem="string"
|
||||
TItemValue="string"
|
||||
Placeholder="Please select the facilitator"
|
||||
@bind-Value="@context.Owner2">
|
||||
<SelectOptions>
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("xiao")" Label="Fu Xiaoxiao" />
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("mao")" Label="Zhou Maomao" />
|
||||
</SelectOptions>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
<Row Gutter="16">
|
||||
<AntDesign.Col Lg="6" Md="12" Sm="24">
|
||||
<FormItem Label="Assigned Personel">
|
||||
<Select TItem="string"
|
||||
TItemValue="string"
|
||||
Placeholder="Please choose the assigned personel"
|
||||
@bind-Value="@context.Approver2">
|
||||
<SelectOptions>
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("xiao")" Label="Fu Xiaoxiao" />
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("mao")" Label="Zhou Maomao" />
|
||||
</SelectOptions>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="new EmbeddedProperty{Span = 6, Offset = 2}"
|
||||
Lg="new EmbeddedProperty{Span = 8}"
|
||||
Md="new EmbeddedProperty{Span = 12}"
|
||||
Sm="24">
|
||||
<FormItem Label="Deadline">
|
||||
<TimePicker Placeholder="@("Deadline")" Style="width: 100%" @bind-Value="@context.DateRange2" />
|
||||
</FormItem>
|
||||
</AntDesign.Col>
|
||||
<AntDesign.Col Xl="new EmbeddedProperty{Span = 8, Offset = 2}"
|
||||
Lg="new EmbeddedProperty{Span = 10}"
|
||||
Md="new EmbeddedProperty{Span = 24}"
|
||||
Sm="24">
|
||||
<FormItem Label="Task Type">
|
||||
<Select TItem="string"
|
||||
TItemValue="string"
|
||||
Placeholder="Please select task type"
|
||||
@bind-Value="@context.Type2">
|
||||
<SelectOptions>
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("private")" Label="Private" />
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("public")" Label="Public" />
|
||||
</SelectOptions>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</AntDesign.Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Card Title="@("Member management")">
|
||||
<FormItem>
|
||||
<!--todo: Table Form-->
|
||||
</FormItem>
|
||||
</Card>
|
||||
</ChildContent>
|
||||
</PageContainer>
|
||||
</Form>
|
||||
@@ -1,9 +0,0 @@
|
||||
using Xzy.KnowledgeBase.Models;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Form
|
||||
{
|
||||
public partial class AdvancedForm
|
||||
{
|
||||
private readonly AdvancedFormModel _model = new AdvancedFormModel();
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.card {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.card :global .ant-legacy-form-item .ant-legacy-form-item-control-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.errorIcon {
|
||||
margin-right: 24px;
|
||||
color: #ff4d4f;
|
||||
cursor: pointer;
|
||||
}
|
||||
.errorIcon span.anticon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.errorPopover :global .ant-popover-inner-content {
|
||||
min-width: 256px;
|
||||
max-height: 290px;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.errorListItem {
|
||||
padding: 8px 16px;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.errorListItem:hover {
|
||||
background: #e6f7ff;
|
||||
}
|
||||
.errorListItem:last-child {
|
||||
border: 0;
|
||||
}
|
||||
.errorListItem .errorIcon {
|
||||
float: left;
|
||||
margin-top: 4px;
|
||||
margin-right: 12px;
|
||||
padding-bottom: 22px;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
.errorListItem .errorField {
|
||||
margin-top: 2px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12px;
|
||||
}
|
||||
.editable td {
|
||||
padding-top: 13px !important;
|
||||
padding-bottom: 12.5px !important;
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Form
|
||||
@page "/form/basic-form"
|
||||
|
||||
<PageContainer Title="Basic Form">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem>Home</BreadcrumbItem>
|
||||
<BreadcrumbItem>Form</BreadcrumbItem>
|
||||
<BreadcrumbItem>Basic Form</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
</Breadcrumb>
|
||||
<Content>
|
||||
<span>Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.</span>
|
||||
</Content>
|
||||
<ChildContent>
|
||||
<Card>
|
||||
<Form
|
||||
Model="@_model"
|
||||
Style="margin-top: 8px;"
|
||||
OnFinish="HandleSubmit">
|
||||
<FormItem Label="Title" LabelCol="_formItemLayout.LabelCol" WrapperCol="_formItemLayout.WrapperCol">
|
||||
<Input Placeholder="Give the target a name" @bind-Value="@context.Title" />
|
||||
</FormItem>
|
||||
<FormItem Label="Start and end date" LabelCol="_formItemLayout.LabelCol" WrapperCol="_formItemLayout.WrapperCol">
|
||||
<RangePicker Style="width:100%;" TValue="DateTime?[]" @bind-Value="@context.DateRange" />
|
||||
</FormItem>
|
||||
<FormItem Label="Goal description" LabelCol="_formItemLayout.LabelCol" WrapperCol="_formItemLayout.WrapperCol">
|
||||
<TextArea MinRows="4" @bind-Value="@context.Goal"></TextArea>
|
||||
</FormItem>
|
||||
<FormItem Label="Metrics" LabelCol="_formItemLayout.LabelCol" WrapperCol="_formItemLayout.WrapperCol">
|
||||
<TextArea MinRows="4" @bind-Value="@context.Standard"></TextArea>
|
||||
</FormItem>
|
||||
<FormItem Label="Client" LabelCol="_formItemLayout.LabelCol" WrapperCol="_formItemLayout.WrapperCol">
|
||||
<Input Placeholder="Please describe your customer service, internal customers directly Name job number" @bind-Value="@context.Client" />
|
||||
</FormItem>
|
||||
<FormItem Label="Inviting critics" LabelCol="_formItemLayout.LabelCol" WrapperCol="_formItemLayout.WrapperCol">
|
||||
<Input Placeholder="Please describe your customer service, internal customers directly Name job number" @bind-Value="@context.Invites" />
|
||||
</FormItem>
|
||||
<FormItem Label="Weight" LabelCol="_formItemLayout.LabelCol" WrapperCol="_formItemLayout.WrapperCol">
|
||||
<AntDesign.InputNumber @bind-Value="@context.Weight" Min="0" Max="100" DefaultValue="0" />
|
||||
<span class="ant-form-text">%</span>
|
||||
</FormItem>
|
||||
<FormItem Label="Target disclosure" LabelCol="_formItemLayout.LabelCol" WrapperCol="_formItemLayout.WrapperCol">
|
||||
<RadioGroup @bind-Value="@context.Disclosure">
|
||||
<Radio Value="1">Public</Radio>
|
||||
<Radio Value="2">Partially public</Radio>
|
||||
<Radio Value="3">Private</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem Label=" " Style="margin-top:32px" WrapperCol="_submitFormLayout.WrapperCol">
|
||||
<Button Type="primary" HtmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
<Button Style="margin-left:8px">
|
||||
Save
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
</ChildContent>
|
||||
</PageContainer>
|
||||
@@ -1,45 +0,0 @@
|
||||
using AntDesign;
|
||||
using Xzy.KnowledgeBase.Models;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Form
|
||||
{
|
||||
public class FormItemLayout
|
||||
{
|
||||
public ColLayoutParam LabelCol { get; set; }
|
||||
public ColLayoutParam WrapperCol { get; set; }
|
||||
}
|
||||
|
||||
public partial class BasicForm
|
||||
{
|
||||
private readonly BasicFormModel _model = new BasicFormModel();
|
||||
|
||||
private readonly FormItemLayout _formItemLayout = new FormItemLayout
|
||||
{
|
||||
LabelCol = new ColLayoutParam
|
||||
{
|
||||
Xs = new EmbeddedProperty { Span = 24 },
|
||||
Sm = new EmbeddedProperty { Span = 7 },
|
||||
},
|
||||
|
||||
WrapperCol = new ColLayoutParam
|
||||
{
|
||||
Xs = new EmbeddedProperty { Span = 24 },
|
||||
Sm = new EmbeddedProperty { Span = 12 },
|
||||
Md = new EmbeddedProperty { Span = 10 },
|
||||
}
|
||||
};
|
||||
|
||||
private readonly FormItemLayout _submitFormLayout = new FormItemLayout
|
||||
{
|
||||
WrapperCol = new ColLayoutParam
|
||||
{
|
||||
Xs = new EmbeddedProperty { Span = 24, Offset = 0 },
|
||||
Sm = new EmbeddedProperty { Span = 10, Offset = 7 },
|
||||
}
|
||||
};
|
||||
|
||||
private void HandleSubmit()
|
||||
{
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.card {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.card :global .ant-legacy-form-item .ant-legacy-form-item-control-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.errorIcon {
|
||||
margin-right: 24px;
|
||||
color: #ff4d4f;
|
||||
cursor: pointer;
|
||||
}
|
||||
.errorIcon span.anticon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.errorPopover :global .ant-popover-inner-content {
|
||||
min-width: 256px;
|
||||
max-height: 290px;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.errorListItem {
|
||||
padding: 8px 16px;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.errorListItem:hover {
|
||||
background: #e6f7ff;
|
||||
}
|
||||
.errorListItem:last-child {
|
||||
border: 0;
|
||||
}
|
||||
.errorListItem .errorIcon {
|
||||
float: left;
|
||||
margin-top: 4px;
|
||||
margin-right: 12px;
|
||||
padding-bottom: 22px;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
.errorListItem .errorField {
|
||||
margin-top: 2px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12px;
|
||||
}
|
||||
.editable td {
|
||||
padding-top: 13px !important;
|
||||
padding-bottom: 12.5px !important;
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
@namespace Xzy.KnowledgeBase.Pages.Form
|
||||
|
||||
<Form LabelCol="new ColLayoutParam{ Span = 5 }"
|
||||
WrapperCol="new ColLayoutParam{ Span = 19 }"
|
||||
Layout="@FormLayout.Horizontal"
|
||||
Class="stepForm"
|
||||
Model="_model">
|
||||
<FormItem Label="Account">
|
||||
<Select TItem="string"
|
||||
TItemValue="string"
|
||||
Placeholder="test@example.com"
|
||||
@bind-Value="@context.PayAccount">
|
||||
<SelectOptions>
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("ant - design @alipay.com")" Label="ant-design@alipay.com" />
|
||||
</SelectOptions>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem Label="Recipient">
|
||||
<InputGroup Compact Style="display: table">
|
||||
<Select TItem="string"
|
||||
TItemValue="string"
|
||||
DefaultValue="@("alipay")"
|
||||
Style="width: 100px;"
|
||||
@bind-Value="@context.ReceiverAccountType">
|
||||
<SelectOptions>
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("alipay")" Label="Alipay" />
|
||||
<SelectOption TItem="string" TItemValue="string" Value="@("bank")" Label="Bank Account" />
|
||||
</SelectOptions>
|
||||
</Select>
|
||||
<Input Style="width: calc(100% - 100px);" Placeholder="test@example.com" @bind-Value="@context.ReceiverAccount" />
|
||||
</InputGroup>
|
||||
</FormItem>
|
||||
<FormItem Label="Payee Name">
|
||||
<Input Placeholder="Please enter the payee name" @bind-Value="@context.ReceiverName" />
|
||||
</FormItem>
|
||||
<FormItem Label=" Amount">
|
||||
<Input Placeholder="Please enter the transfer amount" @bind-Value="@context.Amount" />
|
||||
</FormItem>
|
||||
<FormItem WrapperCol="_formLayout.WrapperCol">
|
||||
<Button Type="primary" OnClick="OnValidateForm">
|
||||
Next Step
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Divider Style="margin: 40px 0 24px 0;" />
|
||||
<div class="desc">
|
||||
<h3>Description</h3>
|
||||
<h4>Transfer to Alipay account</h4>
|
||||
<p>
|
||||
If necessary, some common questions about the product can be put here.If necessary, some common questions about the product can be put here.If necessary, some common questions about the product can be put here.
|
||||
</p>
|
||||
<h4>Transfer To Bank Card</h4>
|
||||
<p>
|
||||
If necessary, some common questions about the product can be put here.If necessary, some common questions about the product can be put here.If necessary, some common questions about the product can be put here.
|
||||
</p>
|
||||
</div>
|
||||
@@ -1,26 +0,0 @@
|
||||
using AntDesign;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Xzy.KnowledgeBase.Models;
|
||||
|
||||
namespace Xzy.KnowledgeBase.Pages.Form
|
||||
{
|
||||
public partial class Step1
|
||||
{
|
||||
private readonly StepFormModel _model = new StepFormModel();
|
||||
private readonly FormItemLayout _formLayout = new FormItemLayout
|
||||
{
|
||||
WrapperCol = new ColLayoutParam
|
||||
{
|
||||
Xs = new EmbeddedProperty { Span = 24, Offset = 0 },
|
||||
Sm = new EmbeddedProperty { Span = 19, Offset = 5 },
|
||||
}
|
||||
};
|
||||
|
||||
[CascadingParameter] public StepForm StepForm { get; set; }
|
||||
|
||||
public void OnValidateForm()
|
||||
{
|
||||
StepForm.Next();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
||||
.stepForm {
|
||||
max-width: 500px;
|
||||
margin: 40px auto 0;
|
||||
}
|
||||
.stepFormText {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.stepFormText :global .ant-form-item-label,
|
||||
.stepFormText :global .ant-form-item-control {
|
||||
line-height: 22px;
|
||||
}
|
||||
.result {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 0 8px;
|
||||
}
|
||||
.desc {
|
||||
padding: 0 56px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.desc h3 {
|
||||
margin: 0 0 12px 0;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.desc h4 {
|
||||
margin: 0 0 4px 0;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.desc p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.desc {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.information {
|
||||
line-height: 22px;
|
||||
}
|
||||
.information :global .ant-row:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.information .label {
|
||||
padding-right: 8px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
text-align: right;
|
||||
}
|
||||
@media screen and (max-width: 576px) {
|
||||
.information .label {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.money {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-family: 'Helvetica Neue', sans-serif;
|
||||
line-height: 14px;
|
||||
}
|
||||
.uppercase {
|
||||
font-size: 12px;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user