垃圾分类项目初始化
|
|
@ -0,0 +1,12 @@
|
|||
/Waste.Application/bin
|
||||
/Waste.Application/obj
|
||||
/Waste.Core/obj
|
||||
/Waste.Core/bin
|
||||
/Waste.Doc/obj
|
||||
/Waste.Doc/bin
|
||||
/Waste.Domain/bin
|
||||
/Waste.Domain/obj
|
||||
/Waste.Web/bin
|
||||
/Waste.Web/obj
|
||||
/Waste.Web.Core/bin
|
||||
/Waste.Web.Core/obj
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
using Furion.DynamicApiController;
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Waste.Application
|
||||
{
|
||||
/// <summary>
|
||||
/// 账户接口
|
||||
/// </summary>
|
||||
public class AccountAppService: IDynamicApiController
|
||||
{
|
||||
private readonly IAccountService _accountService;
|
||||
|
||||
public AccountAppService(IAccountService accountService)
|
||||
{
|
||||
_accountService = accountService;
|
||||
}
|
||||
/// <summary>
|
||||
/// 测试接口
|
||||
/// </summary>
|
||||
public async Task<int> GetTest()
|
||||
{
|
||||
return await _accountService.LoginAsync(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
using Furion.DependencyInjection;
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Waste.Application
|
||||
{
|
||||
public class AccountService : IAccountService, ITransient
|
||||
{
|
||||
public Task<int> LoginAsync(LoginModel model)
|
||||
{
|
||||
throw new NotImplementedException();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Waste.Application
|
||||
{
|
||||
/// <summary>
|
||||
/// 用户登录
|
||||
/// </summary>
|
||||
public class LoginModel
|
||||
{
|
||||
/// <summary>
|
||||
/// 用户名
|
||||
/// </summary>
|
||||
public string username { get; set; }
|
||||
/// <summary>
|
||||
/// 密码
|
||||
/// </summary>
|
||||
public string pwd { get; set; }
|
||||
/// <summary>
|
||||
/// 验证码
|
||||
/// </summary>
|
||||
public string code { get; set; } = "";
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Waste.Application
|
||||
{
|
||||
public interface IAccountService
|
||||
{
|
||||
Task<int> LoginAsync(LoginModel model);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
using Furion.DependencyInjection;
|
||||
using Furion.FriendlyException;
|
||||
using Microsoft.AspNetCore.Mvc.Filters;
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Waste.Application
|
||||
{
|
||||
public class LogExceptionHandler : IGlobalExceptionHandler, ISingleton
|
||||
{
|
||||
/// <summary>
|
||||
/// 全局异常处理提供器
|
||||
/// </summary>
|
||||
/// <param name="context"></param>
|
||||
/// <returns></returns>
|
||||
public Task OnExceptionAsync(ExceptionContext context)
|
||||
{
|
||||
// 写日志
|
||||
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<Project Sdk="Microsoft.NET.Sdk">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net5.0</TargetFramework>
|
||||
</PropertyGroup>
|
||||
|
||||
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
|
||||
<DocumentationFile>Waste.Application.xml</DocumentationFile>
|
||||
<NoWarn>1701;1702;1591</NoWarn>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\Waste.Core\Waste.Core.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<?xml version="1.0"?>
|
||||
<doc>
|
||||
<assembly>
|
||||
<name>Waste.Application</name>
|
||||
</assembly>
|
||||
<members>
|
||||
<member name="T:Waste.Application.AccountAppService">
|
||||
<summary>
|
||||
账户接口
|
||||
</summary>
|
||||
</member>
|
||||
<member name="M:Waste.Application.AccountAppService.GetTest">
|
||||
<summary>
|
||||
测试接口
|
||||
</summary>
|
||||
</member>
|
||||
<member name="T:Waste.Application.LoginModel">
|
||||
<summary>
|
||||
用户登录
|
||||
</summary>
|
||||
</member>
|
||||
<member name="P:Waste.Application.LoginModel.username">
|
||||
<summary>
|
||||
用户名
|
||||
</summary>
|
||||
</member>
|
||||
<member name="P:Waste.Application.LoginModel.pwd">
|
||||
<summary>
|
||||
密码
|
||||
</summary>
|
||||
</member>
|
||||
<member name="P:Waste.Application.LoginModel.code">
|
||||
<summary>
|
||||
验证码
|
||||
</summary>
|
||||
</member>
|
||||
<member name="M:Waste.Application.LogExceptionHandler.OnExceptionAsync(Microsoft.AspNetCore.Mvc.Filters.ExceptionContext)">
|
||||
<summary>
|
||||
全局异常处理提供器
|
||||
</summary>
|
||||
<param name="context"></param>
|
||||
<returns></returns>
|
||||
</member>
|
||||
</members>
|
||||
</doc>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
using Furion;
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using SqlSugar;
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Waste.Core
|
||||
{
|
||||
public class Startup : AppStartup
|
||||
{
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddSqlSugar(new ConnectionConfig
|
||||
{
|
||||
ConnectionString = App.Configuration["NirvanaConnection"],//连接字符串
|
||||
DbType = DbType.SqlServer,
|
||||
IsAutoCloseConnection = true,
|
||||
InitKeyType = InitKeyType.Attribute //从特性读取主键自增信息
|
||||
},
|
||||
db =>
|
||||
{
|
||||
//处理日志事务
|
||||
db.Aop.OnLogExecuting = (sql, pars) =>
|
||||
{
|
||||
//App.PrintToMiniProfiler("SqlSugar", "Info", sql + "\r\n" + string.Join(",", pars?.Select(it => it.ParameterName + ":" + it.Value)));
|
||||
App.PrintToMiniProfiler("SqlSugar", "Info", SqlProfiler.ParameterFormat(sql, pars));
|
||||
Console.WriteLine(sql);
|
||||
Console.WriteLine(string.Join(",", pars?.Select(it => it.ParameterName + ":" + it.Value)));
|
||||
Console.WriteLine();
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<Project Sdk="Microsoft.NET.Sdk">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net5.0</TargetFramework>
|
||||
</PropertyGroup>
|
||||
|
||||
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
|
||||
<DocumentationFile>Waste.Core.xml</DocumentationFile>
|
||||
<NoWarn>1701;1702;1591</NoWarn>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Furion" Version="2.2.0" />
|
||||
<PackageReference Include="Furion.Extras.Authentication.JwtBearer" Version="2.2.1" />
|
||||
<PackageReference Include="Furion.Extras.DatabaseAccessor.SqlSugar" Version="2.2.0" />
|
||||
<PackageReference Include="Furion.Extras.Logging.Serilog" Version="2.2.0" />
|
||||
<PackageReference Include="Furion.Extras.ObjectMapper.Mapster" Version="2.2.0" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0"?>
|
||||
<doc>
|
||||
<assembly>
|
||||
<name>Waste.Core</name>
|
||||
</assembly>
|
||||
<members>
|
||||
</members>
|
||||
</doc>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<Project Sdk="Microsoft.NET.Sdk">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net5.0</TargetFramework>
|
||||
</PropertyGroup>
|
||||
|
||||
</Project>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<Project Sdk="Microsoft.NET.Sdk">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net5.0</TargetFramework>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Folder Include="DataModel\" />
|
||||
<Folder Include="EnumModel\" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
using Furion.Authorization;
|
||||
using Microsoft.AspNetCore.Authorization;
|
||||
using Microsoft.AspNetCore.Http;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Waste.Web.Core
|
||||
{
|
||||
public class JwtHandler : AppAuthorizeHandler
|
||||
{
|
||||
public override Task<bool> PipelineAsync(AuthorizationHandlerContext context, DefaultHttpContext httpContext)
|
||||
{
|
||||
// 这里写您的授权判断逻辑,授权通过返回 true,否则返回 false
|
||||
|
||||
return Task.FromResult(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
using Furion.DataValidation;
|
||||
using Furion.DependencyInjection;
|
||||
using Furion.UnifyResult;
|
||||
using Microsoft.AspNetCore.Http;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Microsoft.AspNetCore.Mvc.Filters;
|
||||
using Microsoft.AspNetCore.Mvc.ModelBinding;
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Waste.Web.Core
|
||||
{
|
||||
/// <summary>
|
||||
/// RESTFUL 风格返回值
|
||||
/// </summary>
|
||||
[SkipScan, UnifyModel(typeof(RESTfulResult<>))]
|
||||
public class RESTfulResultProvider : IUnifyResultProvider
|
||||
{
|
||||
/// <summary>
|
||||
/// 异常返回值
|
||||
/// </summary>
|
||||
/// <param name="context"></param>
|
||||
/// <returns></returns>
|
||||
public IActionResult OnException(ExceptionContext context)
|
||||
{
|
||||
//解析异常信息
|
||||
var (StatusCode, ErrorCode, Errors) = UnifyContext.GetExceptionMetadata(context);
|
||||
return new JsonResult(new RESTfulResult<object>
|
||||
{
|
||||
StatusCode = StatusCode,
|
||||
Succeeded = false,
|
||||
Data = null,
|
||||
Errors = Errors,
|
||||
Extras = UnifyContext.Take(),
|
||||
Timestamp = DateTimeOffset.UtcNow.ToUnixTimeMilliseconds()
|
||||
});
|
||||
}
|
||||
/// <summary>
|
||||
/// 处理输出状态码
|
||||
/// </summary>
|
||||
/// <param name="context"></param>
|
||||
/// <param name="statusCode"></param>
|
||||
/// <param name="options"></param>
|
||||
/// <returns></returns>
|
||||
public async Task OnResponseStatusCodes(HttpContext context, int statusCode, UnifyResultStatusCodesOptions options = null)
|
||||
{
|
||||
switch (statusCode)
|
||||
{
|
||||
// 处理 401 状态码
|
||||
case StatusCodes.Status401Unauthorized:
|
||||
await context.Response.WriteAsJsonAsync(new RESTfulResult<object>
|
||||
{
|
||||
StatusCode = StatusCodes.Status401Unauthorized,
|
||||
Succeeded = false,
|
||||
Data = null,
|
||||
Errors = "401 Unauthorized",
|
||||
Extras = UnifyContext.Take(),
|
||||
Timestamp = DateTimeOffset.UtcNow.ToUnixTimeMilliseconds()
|
||||
});
|
||||
break;
|
||||
// 处理 403 状态码
|
||||
case StatusCodes.Status403Forbidden:
|
||||
await context.Response.WriteAsJsonAsync(new RESTfulResult<object>
|
||||
{
|
||||
StatusCode = StatusCodes.Status403Forbidden,
|
||||
Succeeded = false,
|
||||
Data = null,
|
||||
Errors = "403 Forbidden",
|
||||
Extras = UnifyContext.Take(),
|
||||
Timestamp = DateTimeOffset.UtcNow.ToUnixTimeMilliseconds()
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 成功返回值
|
||||
/// </summary>
|
||||
/// <param name="context"></param>
|
||||
/// <returns></returns>
|
||||
public IActionResult OnSucceeded(ActionExecutedContext context)
|
||||
{
|
||||
object data;
|
||||
// 处理内容结果
|
||||
if (context.Result is ContentResult contentResult) data = contentResult.Content;
|
||||
// 处理对象结果
|
||||
else if (context.Result is ObjectResult objectResult) data = objectResult.Value;
|
||||
else if (context.Result is EmptyResult) data = null;
|
||||
else return null;
|
||||
|
||||
return new JsonResult(new RESTfulResult<object>
|
||||
{
|
||||
StatusCode = context.Result is EmptyResult ? StatusCodes.Status204NoContent : StatusCodes.Status200OK, // 处理没有返回值情况 204
|
||||
Succeeded = true,
|
||||
Data = data,
|
||||
Errors = null,
|
||||
Extras = UnifyContext.Take(),
|
||||
Timestamp = DateTimeOffset.UtcNow.ToUnixTimeMilliseconds()
|
||||
});
|
||||
}
|
||||
/// <summary>
|
||||
/// 验证失败返回值
|
||||
/// </summary>
|
||||
/// <param name="context"></param>
|
||||
/// <param name="modelStates"></param>
|
||||
/// <param name="validationResults"></param>
|
||||
/// <param name="validateFailedMessage"></param>
|
||||
/// <returns></returns>
|
||||
public IActionResult OnValidateFailed(ActionExecutingContext context, ModelStateDictionary modelStates, IEnumerable<ValidateFailedModel> validationResults, string validateFailedMessage)
|
||||
{
|
||||
return new JsonResult(new RESTfulResult<object>
|
||||
{
|
||||
StatusCode = StatusCodes.Status400BadRequest,
|
||||
Succeeded = false,
|
||||
Data = null,
|
||||
Errors = validationResults,
|
||||
Extras = UnifyContext.Take(),
|
||||
Timestamp = DateTimeOffset.UtcNow.ToUnixTimeMilliseconds()
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
using Furion;
|
||||
using Microsoft.AspNetCore.Builder;
|
||||
using Microsoft.AspNetCore.Hosting;
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using Microsoft.Extensions.Hosting;
|
||||
using Serilog;
|
||||
|
||||
namespace Waste.Web.Core
|
||||
{
|
||||
public class Startup : AppStartup
|
||||
{
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddJwt<JwtHandler>();
|
||||
|
||||
services.AddCorsAccessor();
|
||||
|
||||
services.AddControllers()
|
||||
.AddInjectWithUnifyResult<RESTfulResultProvider>();
|
||||
}
|
||||
|
||||
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
|
||||
{
|
||||
if (env.IsDevelopment())
|
||||
{
|
||||
app.UseDeveloperExceptionPage();
|
||||
}
|
||||
|
||||
app.UseHttpsRedirection();
|
||||
app.UseSerilogRequestLogging(); //记录请求日志,必须在 UseStaticFiles 和 UseRouting 之间
|
||||
app.UseRouting();
|
||||
|
||||
app.UseCorsAccessor();
|
||||
|
||||
app.UseAuthentication();
|
||||
app.UseAuthorization();
|
||||
|
||||
app.UseInject(string.Empty);
|
||||
|
||||
app.UseEndpoints(endpoints =>
|
||||
{
|
||||
endpoints.MapControllers();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<Project Sdk="Microsoft.NET.Sdk">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net5.0</TargetFramework>
|
||||
</PropertyGroup>
|
||||
|
||||
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
|
||||
<DocumentationFile>Waste.Web.Core.xml</DocumentationFile>
|
||||
<NoWarn>1701;1702;1591</NoWarn>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\Waste.Application\Waste.Application.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<?xml version="1.0"?>
|
||||
<doc>
|
||||
<assembly>
|
||||
<name>Waste.Web.Core</name>
|
||||
</assembly>
|
||||
<members>
|
||||
<member name="T:Waste.Web.Core.RESTfulResultProvider">
|
||||
<summary>
|
||||
RESTFUL 风格返回值
|
||||
</summary>
|
||||
</member>
|
||||
<member name="M:Waste.Web.Core.RESTfulResultProvider.OnException(Microsoft.AspNetCore.Mvc.Filters.ExceptionContext)">
|
||||
<summary>
|
||||
异常返回值
|
||||
</summary>
|
||||
<param name="context"></param>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="M:Waste.Web.Core.RESTfulResultProvider.OnResponseStatusCodes(Microsoft.AspNetCore.Http.HttpContext,System.Int32,Furion.UnifyResult.UnifyResultStatusCodesOptions)">
|
||||
<summary>
|
||||
处理输出状态码
|
||||
</summary>
|
||||
<param name="context"></param>
|
||||
<param name="statusCode"></param>
|
||||
<param name="options"></param>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="M:Waste.Web.Core.RESTfulResultProvider.OnSucceeded(Microsoft.AspNetCore.Mvc.Filters.ActionExecutedContext)">
|
||||
<summary>
|
||||
成功返回值
|
||||
</summary>
|
||||
<param name="context"></param>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="M:Waste.Web.Core.RESTfulResultProvider.OnValidateFailed(Microsoft.AspNetCore.Mvc.Filters.ActionExecutingContext,Microsoft.AspNetCore.Mvc.ModelBinding.ModelStateDictionary,System.Collections.Generic.IEnumerable{Furion.DataValidation.ValidateFailedModel},System.String)">
|
||||
<summary>
|
||||
验证失败返回值
|
||||
</summary>
|
||||
<param name="context"></param>
|
||||
<param name="modelStates"></param>
|
||||
<param name="validationResults"></param>
|
||||
<param name="validateFailedMessage"></param>
|
||||
<returns></returns>
|
||||
</member>
|
||||
</members>
|
||||
</doc>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
using Furion;
|
||||
using Microsoft.AspNetCore.Hosting;
|
||||
using Microsoft.Extensions.Hosting;
|
||||
using Serilog;
|
||||
using Serilog.Events;
|
||||
using System;
|
||||
using System.Text;
|
||||
|
||||
namespace Waste.Web
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static void Main(string[] args)
|
||||
{
|
||||
CreateHostBuilder(args).Build().Run();
|
||||
}
|
||||
|
||||
public static IHostBuilder CreateHostBuilder(string[] args) =>
|
||||
Host.CreateDefaultBuilder(args)
|
||||
.ConfigureWebHostDefaults(webBuilder =>
|
||||
{
|
||||
webBuilder.Inject()
|
||||
.UseStartup<Startup>()
|
||||
.UseSerilogDefault(config =>
|
||||
{
|
||||
var filepath = App.Configuration["logfile"];
|
||||
string date = DateTime.Now.ToString("yyyy-MM-dd");//按时间创建文件夹
|
||||
string outputTemplate = "{NewLine}【{Level:u3}】{Timestamp:yyyy-MM-dd HH:mm:ss.fff}" +
|
||||
"{NewLine}#Msg#{Message:lj}" +
|
||||
"{NewLine}#Pro #{Properties:j}" +
|
||||
"{NewLine}#Exc#{Exception}" +
|
||||
new string('-', 50);//输出模板
|
||||
///1.输出所有restrictedToMinimumLevel:LogEventLevel类型
|
||||
config
|
||||
//.MinimumLevel.Debug() // 所有Sink的最小记录级别
|
||||
//.MinimumLevel.Override("Microsoft", LogEventLevel.Fatal)
|
||||
//.Enrich.FromLogContext()
|
||||
.WriteTo.Console(outputTemplate: outputTemplate)
|
||||
|
||||
//2.1仅输出 LogEventLevel.Debug 类型
|
||||
.WriteTo.Logger(lg => lg.Filter.ByIncludingOnly(evt => evt.Level == LogEventLevel.Debug)//筛选过滤
|
||||
.WriteTo.File($"{filepath}/{date}/{LogEventLevel.Debug}.log",
|
||||
outputTemplate: outputTemplate,
|
||||
rollingInterval: RollingInterval.Day,//日志按日保存,这样会在文件名称后自动加上日期后缀
|
||||
encoding: Encoding.UTF8 // 文件字符编码
|
||||
)
|
||||
)
|
||||
|
||||
//2.2仅输出 LogEventLevel.Error 类型
|
||||
.WriteTo.Logger(lg => lg.Filter.ByIncludingOnly(evt => evt.Level == LogEventLevel.Error)//筛选过滤
|
||||
.WriteTo.File($"{filepath}/{date}/{LogEventLevel.Error}.log",
|
||||
outputTemplate: outputTemplate,
|
||||
rollingInterval: RollingInterval.Day,//日志按日保存,这样会在文件名称后自动加上日期后缀
|
||||
encoding: Encoding.UTF8 // 文件字符编码
|
||||
)
|
||||
)
|
||||
.WriteTo.Logger(lg => lg.Filter.ByIncludingOnly(evt => evt.Level == LogEventLevel.Information)//筛选过滤
|
||||
.WriteTo.File($"{filepath}/{date}/{LogEventLevel.Information}.log",
|
||||
outputTemplate: outputTemplate,
|
||||
rollingInterval: RollingInterval.Day,//日志按日保存,这样会在文件名称后自动加上日期后缀
|
||||
encoding: Encoding.UTF8 // 文件字符编码
|
||||
)
|
||||
)
|
||||
.WriteTo.Logger(lg => lg.Filter.ByIncludingOnly(evt => evt.Level == LogEventLevel.Fatal)//筛选过滤
|
||||
.WriteTo.File($"{filepath}/{date}/{LogEventLevel.Fatal}.log",
|
||||
outputTemplate: outputTemplate,
|
||||
rollingInterval: RollingInterval.Day,//日志按日保存,这样会在文件名称后自动加上日期后缀
|
||||
encoding: Encoding.UTF8 // 文件字符编码
|
||||
)
|
||||
)
|
||||
.WriteTo.Logger(lg => lg.Filter.ByIncludingOnly(evt => evt.Level == LogEventLevel.Warning)//筛选过滤
|
||||
.WriteTo.File($"{filepath}/{date}/{LogEventLevel.Warning}.log",
|
||||
outputTemplate: outputTemplate,
|
||||
rollingInterval: RollingInterval.Day,//日志按日保存,这样会在文件名称后自动加上日期后缀
|
||||
encoding: Encoding.UTF8 // 文件字符编码
|
||||
)
|
||||
)
|
||||
;
|
||||
})
|
||||
;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"$schema": "http://json.schemastore.org/launchsettings.json",
|
||||
"iisSettings": {
|
||||
"windowsAuthentication": false,
|
||||
"anonymousAuthentication": true,
|
||||
"iisExpress": {
|
||||
"applicationUrl": "http://localhost:52219",
|
||||
"sslPort": 44378
|
||||
}
|
||||
},
|
||||
"profiles": {
|
||||
"IIS Express": {
|
||||
"commandName": "IISExpress",
|
||||
"launchBrowser": true,
|
||||
"launchUrl": "",
|
||||
"environmentVariables": {
|
||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||
}
|
||||
},
|
||||
"Waste.Web": {
|
||||
"commandName": "Project",
|
||||
"dotnetRunMessages": "true",
|
||||
"launchBrowser": true,
|
||||
"launchUrl": "",
|
||||
"applicationUrl": "https://localhost:5001;http://localhost:5000",
|
||||
"environmentVariables": {
|
||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
using Microsoft.AspNetCore.Builder;
|
||||
using Microsoft.AspNetCore.Hosting;
|
||||
using Microsoft.AspNetCore.HttpsPolicy;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Microsoft.Extensions.Configuration;
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using Microsoft.Extensions.Hosting;
|
||||
using Microsoft.Extensions.Logging;
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Waste.Web
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<Project Sdk="Microsoft.NET.Sdk.Web">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net5.0</TargetFramework>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\Waste.Web.Core\Waste.Web.Core.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"Logging": {
|
||||
"LogLevel": {
|
||||
"Default": "Information",
|
||||
"Microsoft": "Warning",
|
||||
"Microsoft.Hosting.Lifetime": "Information"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"SpecificationDocumentSettings": {
|
||||
"DocumentTitle": "垃圾分类接口"
|
||||
},
|
||||
"DynamicApiControllerSettings": {
|
||||
"KeepName": false,
|
||||
"KeepVerb": false,
|
||||
"LowercaseRoute": true
|
||||
},
|
||||
"Serilog": {
|
||||
"MinimumLevel": {
|
||||
"Default": "Information",
|
||||
"Override": {
|
||||
"System": "Warning",
|
||||
"Microsoft": "Warning",
|
||||
"Microsoft.Hosting.Lifetime": "Information",
|
||||
"Microsoft.EntityFrameworkCore": "Information"
|
||||
}
|
||||
}
|
||||
},
|
||||
"AppSettings": {
|
||||
"InjectSpecificationDocument": true
|
||||
},
|
||||
"logfile": "e:/errlog/waste.ybhdmob.com" //日志文件路径
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
> 1%
|
||||
last 2 versions
|
||||
not ie <= 10
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
[*]
|
||||
charset=utf-8
|
||||
end_of_line=lf
|
||||
insert_final_newline=false
|
||||
indent_style=space
|
||||
indent_size=2
|
||||
|
||||
[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
|
||||
indent_style=space
|
||||
indent_size=2
|
||||
|
||||
[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
|
||||
indent_style=space
|
||||
indent_size=2
|
||||
|
||||
[{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
|
||||
indent_style=space
|
||||
indent_size=2
|
||||
|
||||
[*.svg]
|
||||
indent_style=space
|
||||
indent_size=2
|
||||
|
||||
[*.js.map]
|
||||
indent_style=space
|
||||
indent_size=2
|
||||
|
||||
[*.less]
|
||||
indent_style=space
|
||||
indent_size=2
|
||||
|
||||
[*.vue]
|
||||
indent_style=space
|
||||
indent_size=2
|
||||
|
||||
[{.analysis_options,*.yml,*.yaml}]
|
||||
indent_style=space
|
||||
indent_size=2
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
NODE_ENV=production
|
||||
VUE_APP_PREVIEW=false
|
||||
VUE_APP_API_BASE_URL=https://localhost:44354/api
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
NODE_ENV=development
|
||||
VUE_APP_PREVIEW=true
|
||||
VUE_APP_API_BASE_URL=https://localhost:44354/api
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
NODE_ENV=production
|
||||
VUE_APP_PREVIEW=true
|
||||
VUE_APP_API_BASE_URL=/api
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
module.exports = {
|
||||
root: false,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
'extends': [
|
||||
'plugin:vue/strongly-recommended',
|
||||
// '@vue/standard'
|
||||
],
|
||||
rules: {
|
||||
'no-console': 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'generator-star-spacing': 'off',
|
||||
'no-mixed-operators': 0,
|
||||
'vue/max-attributes-per-line': [
|
||||
2,
|
||||
{
|
||||
'singleline': 5,
|
||||
'multiline': {
|
||||
'max': 1,
|
||||
'allowFirstLine': false
|
||||
}
|
||||
}
|
||||
],
|
||||
'vue/attribute-hyphenation': 0,
|
||||
'vue/html-self-closing': 0,
|
||||
'vue/component-name-in-template-casing': 0,
|
||||
'vue/html-closing-bracket-spacing': 0,
|
||||
'vue/singleline-html-element-content-newline': 0,
|
||||
'vue/no-unused-components': 0,
|
||||
'vue/multiline-html-element-content-newline': 0,
|
||||
'vue/no-use-v-if-with-v-for': 0,
|
||||
'vue/html-closing-bracket-newline': 0,
|
||||
'vue/no-parsing-error': 0,
|
||||
'no-tabs': 0,
|
||||
'quotes': [
|
||||
2,
|
||||
'single',
|
||||
{
|
||||
'avoidEscape': true,
|
||||
'allowTemplateLiterals': true
|
||||
}
|
||||
],
|
||||
'semi': [
|
||||
2,
|
||||
'never',
|
||||
{
|
||||
'beforeStatementContinuationChars': 'never'
|
||||
}
|
||||
],
|
||||
'no-delete-var': 2,
|
||||
'prefer-const': [
|
||||
2,
|
||||
{
|
||||
'ignoreReadBeforeAssign': false
|
||||
}
|
||||
],
|
||||
'template-curly-spacing': 'off',
|
||||
'indent': 'off'
|
||||
},
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: [
|
||||
'**/__tests__/*.{j,t}s?(x)',
|
||||
'**/tests/unit/**/*.spec.{j,t}s?(x)'
|
||||
],
|
||||
env: {
|
||||
jest: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
public/* linguist-vendored
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw*
|
||||
package-lock.json
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"printWidth": 120,
|
||||
"semi": false,
|
||||
"singleQuote": true
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
language: node_js
|
||||
node_js:
|
||||
- 10.15.0
|
||||
cache: yarn
|
||||
script:
|
||||
- yarn
|
||||
- yarn run lint --no-fix && yarn run build
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2018 Anan Yang
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
English | [简体中文](./README.zh-CN.md)
|
||||
|
||||
<h1 align="center">Ant Design Vue Pro</h1>
|
||||
<div align="center">
|
||||
An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/" target="_blank">Ant Design of Vue</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
|
||||
[](https://github.com/vueComponent/ant-design-vue-pro/blob/master/LICENSE)
|
||||
[](https://github.com/vueComponent/ant-design-vue-pro/releases/latest)
|
||||
[](https://travis-ci.org/vueComponent/ant-design-vue-pro)
|
||||
|
||||
</div>
|
||||
|
||||
- Preview: https://preview.pro.antdv.com
|
||||
- Home Page: https://pro.antdv.com
|
||||
- Documentation: https://pro.antdv.com/docs/getting-started
|
||||
- ChangeLog: https://pro.antdv.com/docs/changelog
|
||||
- FAQ: https://pro.antdv.com/docs/faq
|
||||
|
||||
Overview
|
||||
----
|
||||
|
||||

|
||||
|
||||
### Env and dependencies
|
||||
|
||||
- node
|
||||
- yarn
|
||||
- webpack
|
||||
- eslint
|
||||
- @vue/cli ~3
|
||||
- [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue
|
||||
- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - Picture edit
|
||||
- [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - AntV G2
|
||||
- [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation) - Antv/G2 of Vue
|
||||
|
||||
> Note: [Yarn](https://yarnpkg.com/) package management is recommended, the exact same version loaded with the demo site of this project (yarn.lock) . but you can also use npm
|
||||
|
||||
|
||||
### Project setup
|
||||
|
||||
- Clone repo
|
||||
```bash
|
||||
git clone https://github.com/vueComponent/ant-design-vue-pro.git
|
||||
cd ant-design-vue-pro
|
||||
```
|
||||
|
||||
- Install dependencies
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
- Compiles and hot-reloads for development
|
||||
```
|
||||
yarn run serve
|
||||
```
|
||||
|
||||
- Compiles and minifies for production
|
||||
```
|
||||
yarn run build
|
||||
```
|
||||
|
||||
- Lints and fixes files
|
||||
```
|
||||
yarn run lint
|
||||
```
|
||||
|
||||
|
||||
### Other
|
||||
|
||||
- **IMPORTANT : About Issue feedback !! when opening Issue read [Issue / PR Contributing](https://github.com/vueComponent/ant-design-vue-pro/issues/90)**
|
||||
|
||||
- [Vue-cli3](https://cli.vuejs.org/guide/) used by the project.
|
||||
|
||||
- Disable Eslint (not recommended): remove `eslintConfig` field in `package.json` and `vue.config.js` field `lintOnSave: false`
|
||||
|
||||
- Load on Demand `/src/main.js` L14, in `import './core/lazy_use'`, `import './core/use''`. more [load-on-demand.md](./docs/load-on-demand.md)
|
||||
|
||||
- Customize Theme: [Custom Theme Config (@kokoroli)](https://github.com/kokoroli/antd-awesome/blob/master/docs/Ant_Design_%E6%A0%B7%E5%BC%8F%E8%A6%86%E7%9B%96.md)
|
||||
|
||||
- I18n: [locales (@musnow)](./src/locales/index.js)
|
||||
|
||||
- Production env `mock` is disabled. use `src/mock/index.js`
|
||||
|
||||
- pls use `release` version
|
||||
|
||||
## Browsers support
|
||||
|
||||
Modern browsers and IE10.
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
|
||||
## Contributors
|
||||
|
||||
This project exists thanks to all the people who contribute.
|
||||
<a href="https://github.com/vueComponent/ant-design-vue-pro/graphs/contributors"><img src="https://opencollective.com/ant-design-pro-vue/contributors.svg?width=890&button=false" /></a>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
[English](./README.md) | 简体中文
|
||||
|
||||
<h1 align="center">Ant Design Vue Pro</h1>
|
||||
<div align="center">
|
||||
An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/" target="_blank">Ant Design of Vue</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
|
||||
[](https://github.com/vueComponent/ant-design-vue-pro/blob/master/LICENSE)
|
||||
[](https://github.com/vueComponent/ant-design-vue-pro/releases/latest)
|
||||
[](https://travis-ci.org/vueComponent/ant-design-vue-pro)
|
||||
|
||||
</div>
|
||||
|
||||
- 预览: https://preview.pro.antdv.com
|
||||
- 首页: https://pro.antdv.com
|
||||
- 文档: https://pro.antdv.com/docs/getting-started
|
||||
- 更新日志: https://pro.antdv.com/docs/changelog
|
||||
- 常见问题: https://pro.antdv.com/docs/faq
|
||||
|
||||
|
||||
Overview
|
||||
----
|
||||
|
||||
基于 [Ant Design of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 实现的 [Ant Design Pro](https://pro.ant.design/)
|
||||
|
||||

|
||||
|
||||
环境和依赖
|
||||
----
|
||||
|
||||
- node
|
||||
- yarn
|
||||
- webpack
|
||||
- eslint
|
||||
- @vue/cli ~3
|
||||
- [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 实现
|
||||
- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
|
||||
- [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表
|
||||
- [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation) - antv/g2 封装实现
|
||||
|
||||
> 请注意,我们强烈建议本项目使用 [Yarn](https://yarnpkg.com/) 包管理工具,这样可以与本项目演示站所加载完全相同的依赖版本 (yarn.lock) 。由于我们没有对依赖进行强制的版本控制,采用非 yarn 包管理进行引入时,可能由于 Pro 所依赖的库已经升级版本而引入了新版本所导致的问题。作者可能会由于时间问题无法及时排查而导致您采用本项目作为基项目而出现问题。
|
||||
|
||||
|
||||
|
||||
项目下载和运行
|
||||
----
|
||||
|
||||
- 拉取项目代码
|
||||
```bash
|
||||
git clone https://github.com/vueComponent/ant-design-vue-pro.git
|
||||
cd ant-design-vue-pro
|
||||
```
|
||||
|
||||
- 安装依赖
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
- 开发模式运行
|
||||
```
|
||||
yarn run serve
|
||||
```
|
||||
|
||||
- 编译项目
|
||||
```
|
||||
yarn run build
|
||||
```
|
||||
|
||||
- Lints and fixes files
|
||||
```
|
||||
yarn run lint
|
||||
```
|
||||
|
||||
|
||||
|
||||
其他说明
|
||||
----
|
||||
|
||||
- **关于 Issue 反馈 (重要!重要!重要!) 请在开 *Issue* 前,先阅读该内容:[Issue / PR 编写建议](https://github.com/vueComponent/ant-design-vue-pro/issues/90)**
|
||||
|
||||
- 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请确保你所使用的 vue-cli 是新版,并且已经学习 cli 官方文档使用教程
|
||||
|
||||
- 关闭 Eslint (不推荐) 移除 `package.json` 中 `eslintConfig` 整个节点代码, `vue.config.js` 下的 `lintOnSave` 值改为 `false`
|
||||
|
||||
- 组件按需加载 `/src/main.js` L14 相关代码 `import './core/lazy_use'` / `import './core/use'`
|
||||
|
||||
- [修改 Ant Design 配色 (@kokoroli)](https://github.com/kokoroli/antd-awesome/blob/master/docs/Ant_Design_%E6%A0%B7%E5%BC%8F%E8%A6%86%E7%9B%96.md)
|
||||
|
||||
- I18n: [多语言支持 (@musnow)](./src/locales/index.js)
|
||||
|
||||
- 生成环境默认不加载 `mock`,更多详情请看 `src/mock/index.js`
|
||||
|
||||
- **用于生产环境,请使用 `release` 版本代码,使用 master 代码出现的任何问题需要你自行解决**
|
||||
|
||||
## 浏览器兼容
|
||||
|
||||
Modern browsers and IE10.
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
|
||||
## Contributors
|
||||
|
||||
This project exists thanks to all the people who contribute.
|
||||
<a href="https://github.com/vueComponent/ant-design-vue-pro/graphs/contributors"><img src="https://opencollective.com/ant-design-pro-vue/contributors.svg?width=890&button=false" /></a>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
|
||||
|
||||
const plugins = []
|
||||
if (IS_PROD) {
|
||||
plugins.push('transform-remove-console')
|
||||
}
|
||||
|
||||
// lazy load ant-design-vue
|
||||
// if your use import on Demand, Use this code
|
||||
plugins.push(['import', {
|
||||
'libraryName': 'ant-design-vue',
|
||||
'libraryDirectory': 'es',
|
||||
'style': true // `style: true` 会加载 less 文件
|
||||
}])
|
||||
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset',
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
'useBuiltIns': 'entry',
|
||||
'corejs': 3
|
||||
}
|
||||
]
|
||||
],
|
||||
plugins
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
const ThemeColorReplacer = require('webpack-theme-color-replacer')
|
||||
const generate = require('@ant-design/colors/lib/generate').default
|
||||
|
||||
const getAntdSerials = (color) => {
|
||||
// 淡化(即less的tint)
|
||||
const lightens = new Array(9).fill().map((t, i) => {
|
||||
return ThemeColorReplacer.varyColor.lighten(color, i / 10)
|
||||
})
|
||||
const colorPalettes = generate(color)
|
||||
const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',')
|
||||
return lightens.concat(colorPalettes).concat(rgb)
|
||||
}
|
||||
|
||||
const themePluginOption = {
|
||||
fileName: 'css/theme-colors-[contenthash:8].css',
|
||||
matchColors: getAntdSerials('#1890ff'), // 主色系列
|
||||
// 改变样式选择器,解决样式覆盖问题
|
||||
changeSelector (selector) {
|
||||
switch (selector) {
|
||||
case '.ant-calendar-today .ant-calendar-date':
|
||||
return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
|
||||
case '.ant-btn:focus,.ant-btn:hover':
|
||||
return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'
|
||||
case '.ant-btn.active,.ant-btn:active':
|
||||
return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'
|
||||
case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
|
||||
case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
|
||||
return ':not(.ant-steps-item-process)' + selector
|
||||
// fixed https://github.com/vueComponent/ant-design-vue-pro/issues/876
|
||||
case '.ant-steps-item-process .ant-steps-item-icon':
|
||||
return ':not(.ant-steps-item-custom)' + selector
|
||||
case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
|
||||
case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
|
||||
return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
|
||||
case '.ant-menu-horizontal > .ant-menu-item-selected > a':
|
||||
case '.ant-menu-horizontal>.ant-menu-item-selected>a':
|
||||
return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a'
|
||||
case '.ant-menu-horizontal > .ant-menu-item > a:hover':
|
||||
case '.ant-menu-horizontal>.ant-menu-item>a:hover':
|
||||
return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover'
|
||||
default :
|
||||
return selector
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const createThemeColorReplacerPlugin = () => new ThemeColorReplacer(themePluginOption)
|
||||
|
||||
module.exports = createThemeColorReplacerPlugin
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
export default {
|
||||
theme: [
|
||||
{
|
||||
key: 'dark',
|
||||
fileName: 'dark.css',
|
||||
theme: 'dark'
|
||||
},
|
||||
{
|
||||
key: '#F5222D',
|
||||
fileName: '#F5222D.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#F5222D'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '#FA541C',
|
||||
fileName: '#FA541C.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#FA541C'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '#FAAD14',
|
||||
fileName: '#FAAD14.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#FAAD14'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '#13C2C2',
|
||||
fileName: '#13C2C2.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#13C2C2'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '#52C41A',
|
||||
fileName: '#52C41A.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#52C41A'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '#2F54EB',
|
||||
fileName: '#2F54EB.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#2F54EB'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '#722ED1',
|
||||
fileName: '#722ED1.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#722ED1'
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
key: '#F5222D',
|
||||
theme: 'dark',
|
||||
fileName: 'dark-#F5222D.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#F5222D'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '#FA541C',
|
||||
theme: 'dark',
|
||||
fileName: 'dark-#FA541C.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#FA541C'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '#FAAD14',
|
||||
theme: 'dark',
|
||||
fileName: 'dark-#FAAD14.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#FAAD14'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '#13C2C2',
|
||||
theme: 'dark',
|
||||
fileName: 'dark-#13C2C2.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#13C2C2'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '#52C41A',
|
||||
theme: 'dark',
|
||||
fileName: 'dark-#52C41A.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#52C41A'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '#2F54EB',
|
||||
theme: 'dark',
|
||||
fileName: 'dark-#2F54EB.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#2F54EB'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '#722ED1',
|
||||
theme: 'dark',
|
||||
fileName: 'dark-#722ED1.css',
|
||||
modifyVars: {
|
||||
'@primary-color': '#722ED1'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
为首屏增加 加载动画
|
||||
====
|
||||
|
||||
|
||||
|
||||
## 需求
|
||||
|
||||
> 为了缓解用户第一次访问时,加载 JS 过大所导致用户等待白屏时间过长导致的用户体验不好,进行的一个优化动效。
|
||||
|
||||
|
||||
|
||||
## 实现方案
|
||||
|
||||
1. 将 动画加载 dom 元素放在 #app 内,Vue 生命周期开始时,会自动清掉 #app 下的所有元素。
|
||||
2. 将 动画加载 dom 元素放在 body 下,Vue 生命周期开始时 App.vue (created, mounted) 调用 `@/utils/utll` 下的 removeLoadingAnimate(#id, timeout) 则会移除加载动画
|
||||
|
||||
最后一步:
|
||||
将样式插入到 `public/index.html` 文件的 `<head></head>` 最好写成内联 `<style>动画样式</style>`
|
||||
|
||||
|
||||
|
||||
----
|
||||
|
||||
目前提供有两个样式,均在 `public/loading` 文件夹内。且 pro 已经默认使用了一套 loading 动画方案,可以直接参考 `public/index.html`
|
||||
|
||||
|
||||
## 写在最后
|
||||
|
||||
目前 pro 有页面 overflow 显示出浏览器滚动条时,页面会抖动一下的问题。
|
||||
|
||||
欢迎各位提供能解决的方案和实现 demo。如果在条件允许的情况下,建议请直接使用 pro 进行改造,也欢迎直接 PR 到 pro 的仓库
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
先增加依赖
|
||||
|
||||
```bash
|
||||
// npm
|
||||
$ npm install --save-dev webpack-bundle-analyzer
|
||||
|
||||
// or yarn
|
||||
$ yarn add webpack-bundle-analyzer -D
|
||||
```
|
||||
|
||||
配置文件 `vue.config.js` 增加 `configureWebpack.plugins` 参数
|
||||
|
||||
```
|
||||
const path = require('path')
|
||||
const webpack = require('webpack')
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
|
||||
|
||||
function resolve (dir) {
|
||||
return path.join(__dirname, dir)
|
||||
}
|
||||
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
configureWebpack: {
|
||||
plugins: [
|
||||
// Ignore all locale files of moment.js
|
||||
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
||||
// 依赖大小分析工具
|
||||
new BundleAnalyzerPlugin(),
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
启动 `cli` 的 `build` 命令进行项目编译,编译完成时,会自动运行一个 http://localhost:8888 的地址,完整显示了支持库依赖
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
module.exports = {
|
||||
moduleFileExtensions: [
|
||||
'js',
|
||||
'jsx',
|
||||
'json',
|
||||
'vue'
|
||||
],
|
||||
transform: {
|
||||
'^.+\\.vue$': 'vue-jest',
|
||||
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
|
||||
'^.+\\.jsx?$': 'babel-jest'
|
||||
},
|
||||
moduleNameMapper: {
|
||||
'^@/(.*)$': '<rootDir>/src/$1'
|
||||
},
|
||||
snapshotSerializers: [
|
||||
'jest-serializer-vue'
|
||||
],
|
||||
testMatch: [
|
||||
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
|
||||
],
|
||||
testURL: 'http://localhost/'
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es6",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"],
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
{
|
||||
"name": "vue-antd-pro",
|
||||
"version": "3.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"test:unit": "vue-cli-service test:unit",
|
||||
"lint": "vue-cli-service lint",
|
||||
"build:preview": "vue-cli-service build --mode preview",
|
||||
"lint:nofix": "vue-cli-service lint --no-fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design-vue/pro-layout": "^0.3.12",
|
||||
"@antv/data-set": "^0.10.2",
|
||||
"ant-design-vue": "^1.6.2",
|
||||
"axios": "^0.19.0",
|
||||
"core-js": "^3.1.2",
|
||||
"enquire.js": "^2.1.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.get": "^4.4.2",
|
||||
"lodash.pick": "^4.4.0",
|
||||
"md5": "^2.2.1",
|
||||
"mockjs2": "1.0.8",
|
||||
"moment": "^2.24.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"store": "^2.0.12",
|
||||
"viser-vue": "^2.4.6",
|
||||
"vue": "^2.6.10",
|
||||
"vue-clipboard2": "^0.2.1",
|
||||
"vue-cropper": "0.4.9",
|
||||
"vue-i18n": "^8.17.4",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "^3.1.2",
|
||||
"vue-svg-component-runtime": "^1.0.1",
|
||||
"vuex": "^3.1.1",
|
||||
"wangeditor": "^3.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ant-design/colors": "^3.2.1",
|
||||
"@vue/cli-plugin-babel": "^4.0.4",
|
||||
"@vue/cli-plugin-eslint": "^4.0.4",
|
||||
"@vue/cli-plugin-router": "^4.0.4",
|
||||
"@vue/cli-plugin-unit-jest": "^4.0.4",
|
||||
"@vue/cli-plugin-vuex": "^4.0.4",
|
||||
"@vue/cli-service": "^4.0.4",
|
||||
"@vue/eslint-config-standard": "^4.0.0",
|
||||
"@vue/test-utils": "^1.0.0-beta.29",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-plugin-import": "^1.12.2",
|
||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-plugin-html": "^5.0.0",
|
||||
"eslint-plugin-vue": "^5.2.3",
|
||||
"git-revision-webpack-plugin": "^3.0.6",
|
||||
"less": "^3.0.4",
|
||||
"less-loader": "^5.0.0",
|
||||
"opencollective": "^1.0.3",
|
||||
"opencollective-postinstall": "^2.0.2",
|
||||
"vue-svg-icon-loader": "^2.1.1",
|
||||
"vue-template-compiler": "^2.6.10",
|
||||
"webpack-theme-color-replacer": "^1.3.12"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-cmn-Hans">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<script charset="utf-8" src="http://wpa.b.qq.com/cgi/wpa.php"></script>
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>小白家用秤管理平台</title>
|
||||
<style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:420px;height:100%}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
|
||||
<!-- require cdn assets css -->
|
||||
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
|
||||
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
|
||||
<% } %>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to
|
||||
continue.</strong>
|
||||
</noscript>
|
||||
<div id="app">
|
||||
<div class="first-loading-wrp">
|
||||
<div class="loading-wrp">
|
||||
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; align-items: center;">努力加载中....</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- require cdn assets js -->
|
||||
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
|
||||
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
|
||||
<% } %>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<!-- <a-config-provider :locale="locale"> -->
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
<!-- </a-config-provider> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { domTitle, setDocumentTitle } from '@/utils/domUtil'
|
||||
import { i18nRender } from '@/locales'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// Object.assign({}, this.MenberDialogForm);
|
||||
locale () {
|
||||
// 只是为了切换语言时,更新标题
|
||||
const { title } = this.$route.meta
|
||||
title && (setDocumentTitle(`${i18nRender(title)} - ${domTitle}`))
|
||||
|
||||
return this.$i18n.getLocaleMessage(this.$store.getters.lang).antLocale
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.ant-pro-page-header-wrap-children-content{
|
||||
margin: 0!important;
|
||||
padding:20px 20px 0;
|
||||
// background-color: #fff;
|
||||
}
|
||||
.ant-page-header-heading-title{
|
||||
display: none!important
|
||||
}
|
||||
.content,.tableClass{
|
||||
padding:25px;
|
||||
background-color: #fff;
|
||||
min-height: calc(100vh - 180px) !important;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tableClass{
|
||||
overflow: initial;
|
||||
}
|
||||
.ant-table-thead > tr > th, .ant-table-tbody > tr > td{
|
||||
padding: 12px 12px !important;
|
||||
}
|
||||
.ant-breadcrumb + .ant-page-header-heading{
|
||||
margin-top: 0!important
|
||||
}
|
||||
.ant-form-inline .ant-form-item{
|
||||
margin-right: 0!important
|
||||
}
|
||||
.ant-menu-inline > .ant-menu-item,.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title{
|
||||
height: 50px!important;
|
||||
line-height: 50px!important
|
||||
}
|
||||
.inputC{
|
||||
max-width: 30px !important;
|
||||
min-width: 5%!important;
|
||||
border-left:0!important;
|
||||
border-right:0!important;
|
||||
border-radius: 0!important;
|
||||
pointer-events: none!important;
|
||||
background-color: #fff!important;
|
||||
}
|
||||
.inputL{
|
||||
max-width: 80px!important;
|
||||
min-width: 40%!important;
|
||||
text-align: center!important;
|
||||
border-right:0!important;
|
||||
}
|
||||
.inputR{
|
||||
max-width: 80px;
|
||||
min-width: 40%!important;
|
||||
text-align: center!important;
|
||||
border-left: 0!important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import request from '@/utils/request'
|
||||
import tools from '@/utils/tool'
|
||||
const userApi = {
|
||||
Login: '/login/CheckLogin', // 验证登陆
|
||||
Logout: '/user/logout', // 退出登录
|
||||
UserInfo: '/user/UserInfo',
|
||||
UserMenu: '/user/nav'
|
||||
}
|
||||
|
||||
/**
|
||||
* login func
|
||||
* parameter: {
|
||||
* username: '',
|
||||
* password: '',
|
||||
* remember_me: true,
|
||||
* captcha: '12345'
|
||||
* }
|
||||
* @param parameter
|
||||
* @returns {*}
|
||||
*/
|
||||
// 登录
|
||||
export function login (parameter) {
|
||||
return request.post(userApi.Login, parameter)
|
||||
// return request({
|
||||
// url: userApi.Login,
|
||||
// method: 'post',
|
||||
// data: parameter
|
||||
// })
|
||||
}
|
||||
// 退出登录
|
||||
export function logout () {
|
||||
return request.post(userApi.Logout)
|
||||
}
|
||||
//菜单
|
||||
export function UserInfo () {
|
||||
return request.get(userApi.UserInfo)
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const api = {
|
||||
user: '/user',
|
||||
role: '/role',
|
||||
service: '/service',
|
||||
permission: '/permission',
|
||||
permissionNoPager: '/permission/no-pager',
|
||||
orgTree: '/org/tree'
|
||||
}
|
||||
|
||||
export default api
|
||||
|
||||
export function getUserList (parameter) {
|
||||
return request({
|
||||
url: api.user,
|
||||
method: 'get',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
export function getRoleList (parameter) {
|
||||
return request({
|
||||
url: api.role,
|
||||
method: 'get',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
export function getServiceList (parameter) {
|
||||
return request({
|
||||
url: api.service,
|
||||
method: 'get',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
export function getPermissions (parameter) {
|
||||
return request({
|
||||
url: api.permissionNoPager,
|
||||
method: 'get',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
export function getOrgTree (parameter) {
|
||||
return request({
|
||||
url: api.orgTree,
|
||||
method: 'get',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
// id == 0 add post
|
||||
// id != 0 update put
|
||||
export function saveService (parameter) {
|
||||
return request({
|
||||
url: api.service,
|
||||
method: parameter.id === 0 ? 'post' : 'put',
|
||||
data: parameter
|
||||
})
|
||||
}
|
||||
|
||||
export function saveSub (sub) {
|
||||
return request({
|
||||
url: '/sub',
|
||||
method: sub.id === 0 ? 'post' : 'put',
|
||||
data: sub
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="1361px" height="609px" viewBox="0 0 1361 609" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Group 21</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Ant-Design-Pro-3.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="账户密码登录-校验" transform="translate(-79.000000, -82.000000)">
|
||||
<g id="Group-21" transform="translate(77.000000, 73.000000)">
|
||||
<g id="Group-18" opacity="0.8" transform="translate(74.901416, 569.699158) rotate(-7.000000) translate(-74.901416, -569.699158) translate(4.901416, 525.199158)">
|
||||
<ellipse id="Oval-11" fill="#CFDAE6" opacity="0.25" cx="63.5748792" cy="32.468367" rx="21.7830479" ry="21.766008"></ellipse>
|
||||
<ellipse id="Oval-3" fill="#CFDAE6" opacity="0.599999964" cx="5.98746479" cy="13.8668601" rx="5.2173913" ry="5.21330997"></ellipse>
|
||||
<path d="M38.1354514,88.3520215 C43.8984227,88.3520215 48.570234,83.6838647 48.570234,77.9254015 C48.570234,72.1669383 43.8984227,67.4987816 38.1354514,67.4987816 C32.3724801,67.4987816 27.7006688,72.1669383 27.7006688,77.9254015 C27.7006688,83.6838647 32.3724801,88.3520215 38.1354514,88.3520215 Z" id="Oval-3-Copy" fill="#CFDAE6" opacity="0.45"></path>
|
||||
<path d="M64.2775582,33.1704963 L119.185836,16.5654915" id="Path-12" stroke="#CFDAE6" stroke-width="1.73913043" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M42.1431708,26.5002681 L7.71190162,14.5640702" id="Path-16" stroke="#E0B4B7" stroke-width="0.702678964" opacity="0.7" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
|
||||
<path d="M63.9262187,33.521561 L43.6721326,69.3250951" id="Path-15" stroke="#BACAD9" stroke-width="0.702678964" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
|
||||
<g id="Group-17" transform="translate(126.850922, 13.543654) rotate(30.000000) translate(-126.850922, -13.543654) translate(117.285705, 4.381889)" fill="#CFDAE6">
|
||||
<ellipse id="Oval-4" opacity="0.45" cx="9.13482653" cy="9.12768076" rx="9.13482653" ry="9.12768076"></ellipse>
|
||||
<path d="M18.2696531,18.2553615 C18.2696531,13.2142826 14.1798519,9.12768076 9.13482653,9.12768076 C4.08980114,9.12768076 0,13.2142826 0,18.2553615 L18.2696531,18.2553615 Z" id="Oval-4" transform="translate(9.134827, 13.691521) scale(-1, -1) translate(-9.134827, -13.691521) "></path>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Group-14" transform="translate(216.294700, 123.725600) rotate(-5.000000) translate(-216.294700, -123.725600) translate(106.294700, 35.225600)">
|
||||
<ellipse id="Oval-2" fill="#CFDAE6" opacity="0.25" cx="29.1176471" cy="29.1402439" rx="29.1176471" ry="29.1402439"></ellipse>
|
||||
<ellipse id="Oval-2" fill="#CFDAE6" opacity="0.3" cx="29.1176471" cy="29.1402439" rx="21.5686275" ry="21.5853659"></ellipse>
|
||||
<ellipse id="Oval-2-Copy" stroke="#CFDAE6" opacity="0.4" cx="179.019608" cy="138.146341" rx="23.7254902" ry="23.7439024"></ellipse>
|
||||
<ellipse id="Oval-2" fill="#BACAD9" opacity="0.5" cx="29.1176471" cy="29.1402439" rx="10.7843137" ry="10.7926829"></ellipse>
|
||||
<path d="M29.1176471,39.9329268 L29.1176471,18.347561 C23.1616351,18.347561 18.3333333,23.1796097 18.3333333,29.1402439 C18.3333333,35.1008781 23.1616351,39.9329268 29.1176471,39.9329268 Z" id="Oval-2" fill="#BACAD9"></path>
|
||||
<g id="Group-9" opacity="0.45" transform="translate(172.000000, 131.000000)" fill="#E6A1A6">
|
||||
<ellipse id="Oval-2-Copy-2" cx="7.01960784" cy="7.14634146" rx="6.47058824" ry="6.47560976"></ellipse>
|
||||
<path d="M0.549019608,13.6219512 C4.12262681,13.6219512 7.01960784,10.722722 7.01960784,7.14634146 C7.01960784,3.56996095 4.12262681,0.670731707 0.549019608,0.670731707 L0.549019608,13.6219512 Z" id="Oval-2-Copy-2" transform="translate(3.784314, 7.146341) scale(-1, 1) translate(-3.784314, -7.146341) "></path>
|
||||
</g>
|
||||
<ellipse id="Oval-10" fill="#CFDAE6" cx="218.382353" cy="138.685976" rx="1.61764706" ry="1.61890244"></ellipse>
|
||||
<ellipse id="Oval-10-Copy-2" fill="#E0B4B7" opacity="0.35" cx="179.558824" cy="175.381098" rx="1.61764706" ry="1.61890244"></ellipse>
|
||||
<ellipse id="Oval-10-Copy" fill="#E0B4B7" opacity="0.35" cx="180.098039" cy="102.530488" rx="2.15686275" ry="2.15853659"></ellipse>
|
||||
<path d="M28.9985381,29.9671598 L171.151018,132.876024" id="Path-11" stroke="#CFDAE6" opacity="0.8"></path>
|
||||
</g>
|
||||
<g id="Group-10" opacity="0.799999952" transform="translate(1054.100635, 36.659317) rotate(-11.000000) translate(-1054.100635, -36.659317) translate(1026.600635, 4.659317)">
|
||||
<ellipse id="Oval-7" stroke="#CFDAE6" stroke-width="0.941176471" cx="43.8135593" cy="32" rx="11.1864407" ry="11.2941176"></ellipse>
|
||||
<g id="Group-12" transform="translate(34.596774, 23.111111)" fill="#BACAD9">
|
||||
<ellipse id="Oval-7" opacity="0.45" cx="9.18534718" cy="8.88888889" rx="8.47457627" ry="8.55614973"></ellipse>
|
||||
<path d="M9.18534718,17.4450386 C13.8657264,17.4450386 17.6599235,13.6143199 17.6599235,8.88888889 C17.6599235,4.16345787 13.8657264,0.332739156 9.18534718,0.332739156 L9.18534718,17.4450386 Z" id="Oval-7"></path>
|
||||
</g>
|
||||
<path d="M34.6597385,24.809694 L5.71666084,4.76878945" id="Path-2" stroke="#CFDAE6" stroke-width="0.941176471"></path>
|
||||
<ellipse id="Oval" stroke="#CFDAE6" stroke-width="0.941176471" cx="3.26271186" cy="3.29411765" rx="3.26271186" ry="3.29411765"></ellipse>
|
||||
<ellipse id="Oval-Copy" fill="#F7E1AD" cx="2.79661017" cy="61.1764706" rx="2.79661017" ry="2.82352941"></ellipse>
|
||||
<path d="M34.6312443,39.2922712 L5.06366663,59.785082" id="Path-10" stroke="#CFDAE6" stroke-width="0.941176471"></path>
|
||||
</g>
|
||||
<g id="Group-19" opacity="0.33" transform="translate(1282.537219, 446.502867) rotate(-10.000000) translate(-1282.537219, -446.502867) translate(1142.537219, 327.502867)">
|
||||
<g id="Group-17" transform="translate(141.333539, 104.502742) rotate(275.000000) translate(-141.333539, -104.502742) translate(129.333539, 92.502742)" fill="#BACAD9">
|
||||
<circle id="Oval-4" opacity="0.45" cx="11.6666667" cy="11.6666667" r="11.6666667"></circle>
|
||||
<path d="M23.3333333,23.3333333 C23.3333333,16.8900113 18.1099887,11.6666667 11.6666667,11.6666667 C5.22334459,11.6666667 0,16.8900113 0,23.3333333 L23.3333333,23.3333333 Z" id="Oval-4" transform="translate(11.666667, 17.500000) scale(-1, -1) translate(-11.666667, -17.500000) "></path>
|
||||
</g>
|
||||
<circle id="Oval-5-Copy-6" fill="#CFDAE6" cx="201.833333" cy="87.5" r="5.83333333"></circle>
|
||||
<path d="M143.5,88.8126685 L155.070501,17.6038544" id="Path-17" stroke="#BACAD9" stroke-width="1.16666667"></path>
|
||||
<path d="M17.5,37.3333333 L127.466252,97.6449735" id="Path-18" stroke="#BACAD9" stroke-width="1.16666667"></path>
|
||||
<polyline id="Path-19" stroke="#CFDAE6" stroke-width="1.16666667" points="143.902597 120.302281 174.935455 231.571342 38.5 147.510847 126.366941 110.833333"></polyline>
|
||||
<path d="M159.833333,99.7453842 L195.416667,89.25" id="Path-20" stroke="#E0B4B7" stroke-width="1.16666667" opacity="0.6"></path>
|
||||
<path d="M205.333333,82.1372105 L238.719406,36.1666667" id="Path-24" stroke="#BACAD9" stroke-width="1.16666667"></path>
|
||||
<path d="M266.723424,132.231988 L207.083333,90.4166667" id="Path-25" stroke="#CFDAE6" stroke-width="1.16666667"></path>
|
||||
<circle id="Oval-5" fill="#C1D1E0" cx="156.916667" cy="8.75" r="8.75"></circle>
|
||||
<circle id="Oval-5-Copy-3" fill="#C1D1E0" cx="39.0833333" cy="148.75" r="5.25"></circle>
|
||||
<circle id="Oval-5-Copy-2" fill-opacity="0.6" fill="#D1DEED" cx="8.75" cy="33.25" r="8.75"></circle>
|
||||
<circle id="Oval-5-Copy-4" fill-opacity="0.6" fill="#D1DEED" cx="243.833333" cy="30.3333333" r="5.83333333"></circle>
|
||||
<circle id="Oval-5-Copy-5" fill="#E0B4B7" cx="175.583333" cy="232.75" r="5.25"></circle>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.7 KiB |
|
|
@ -0,0 +1,257 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
vertical-align: baseline;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
color: #000;
|
||||
font: 14px/22px Verdana, Arial, sans-serif, "Times New Roman", 思源宋体;
|
||||
width: 100%;
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
font-size: 100%;
|
||||
outline: 0;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
border: none;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.f-12 {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.f-14 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.f-16 {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.f-18 {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.f-20 {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.c-333 {
|
||||
color: #333 !important
|
||||
}
|
||||
|
||||
.c-666 {
|
||||
color: #666
|
||||
}
|
||||
|
||||
.c-999 {
|
||||
color: #999
|
||||
}
|
||||
|
||||
.c-blue {
|
||||
color: #388dfe !important
|
||||
}
|
||||
|
||||
.c-red {
|
||||
color: #eb303f !important;
|
||||
}
|
||||
|
||||
.c-success {
|
||||
color: #5eb95e !important;
|
||||
}
|
||||
|
||||
.c-fff {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.c-yellow {
|
||||
color: rgb(227, 183, 88) !important;
|
||||
}
|
||||
|
||||
.bg-fff {
|
||||
background: #fff !important
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
background: #388dfe !important
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.border-top {
|
||||
border-top: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.border-right {
|
||||
border-right: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.border-left {
|
||||
border-left: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mt-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mr-0 {
|
||||
margin-right: 0;
|
||||
}
|
||||
.ml-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
.pt-0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
.pb-0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.pr-0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.pl-0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.mt-15 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.mb-15 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ml-15 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.mr-15 {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.mt-25 {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.mb-25 {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.ml-25 {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.mr-25 {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.mt-50 {
|
||||
margin-top: 50px!important
|
||||
}
|
||||
|
||||
.mb-50 {
|
||||
margin-bottom: 50px!important
|
||||
}
|
||||
|
||||
.ml-50 {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.mr-50 {
|
||||
margin-right: 50px;
|
||||
}
|
||||
textarea,
|
||||
input {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
span,
|
||||
p,
|
||||
div {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.text-l {
|
||||
text-align: left !important
|
||||
}
|
||||
|
||||
.text-r {
|
||||
text-align: right !important
|
||||
}
|
||||
|
||||
.text-c {
|
||||
text-align: center !important
|
||||
}
|
||||
|
||||
.pos-r {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.pos-a {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.pos-f {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.l,
|
||||
.f-l {
|
||||
float: left !important;
|
||||
_display: inline
|
||||
}
|
||||
|
||||
.r,
|
||||
.f-r {
|
||||
float: right !important;
|
||||
_display: inline
|
||||
}
|
||||
.ant-badge-status-error {
|
||||
background-color: #f5222d;
|
||||
}
|
||||
.textClass{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1551058675966" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7872" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M85.333333 512h85.333334a340.736 340.736 0 0 1 99.712-241.621333 337.493333 337.493333 0 0 1 108.458666-72.96 346.453333 346.453333 0 0 1 261.546667-1.749334A106.154667 106.154667 0 0 0 746.666667 298.666667C805.802667 298.666667 853.333333 251.136 853.333333 192S805.802667 85.333333 746.666667 85.333333c-29.397333 0-55.978667 11.776-75.221334 30.933334-103.722667-41.514667-222.848-40.874667-325.76 2.517333a423.594667 423.594667 0 0 0-135.68 91.264 423.253333 423.253333 0 0 0-91.306666 135.637333A426.88 426.88 0 0 0 85.333333 512z m741.248 133.205333c-17.109333 40.618667-41.685333 77.141333-72.96 108.416s-67.797333 55.850667-108.458666 72.96a346.453333 346.453333 0 0 1-261.546667 1.749334A106.154667 106.154667 0 0 0 277.333333 725.333333C218.197333 725.333333 170.666667 772.864 170.666667 832S218.197333 938.666667 277.333333 938.666667c29.397333 0 55.978667-11.776 75.221334-30.933334A425.173333 425.173333 0 0 0 512 938.666667a425.941333 425.941333 0 0 0 393.258667-260.352A426.325333 426.325333 0 0 0 938.666667 512h-85.333334a341.034667 341.034667 0 0 1-26.752 133.205333z" p-id="7873"></path><path d="M512 318.378667c-106.752 0-193.621333 86.869333-193.621333 193.621333S405.248 705.621333 512 705.621333s193.621333-86.869333 193.621333-193.621333S618.752 318.378667 512 318.378667z m0 301.909333c-59.690667 0-108.288-48.597333-108.288-108.288S452.309333 403.712 512 403.712s108.288 48.597333 108.288 108.288-48.597333 108.288-108.288 108.288z" p-id="7874"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 166 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
|
@ -0,0 +1,29 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Vue</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="69.644116%" y1="0%" x2="69.644116%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#29CDFF" offset="0%"></stop>
|
||||
<stop stop-color="#148EFF" offset="37.8600687%"></stop>
|
||||
<stop stop-color="#0A60FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-19.8191553%" y1="-36.7931464%" x2="138.57919%" y2="157.637507%" id="linearGradient-2">
|
||||
<stop stop-color="#29CDFF" offset="0%"></stop>
|
||||
<stop stop-color="#0F78FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-3">
|
||||
<stop stop-color="#FA8E7D" offset="0%"></stop>
|
||||
<stop stop-color="#F74A5C" offset="51.2635191%"></stop>
|
||||
<stop stop-color="#F51D2C" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Group" transform="translate(19.000000, 9.000000)">
|
||||
<path d="M89.96,90.48 C78.58,93.48 68.33,83.36 67.62,82.48 L46.6604487,62.2292258 C45.5023849,61.1103236 44.8426845,59.5728835 44.8296987,57.9626396 L44.5035564,17.5209948 C44.4948861,16.4458744 44.0537714,15.4195095 43.2796864,14.6733517 L29.6459999,1.53153737 C28.055475,-0.00160504005 25.5232423,0.0449126588 23.9900999,1.63543756 C23.2715121,2.38092066 22.87,3.37600834 22.87,4.41143746 L22.87,64.3864751 C22.87,67.0807891 23.9572233,69.6611067 25.885409,71.5429748 L63.6004615,108.352061 C65.9466323,110.641873 69.6963584,110.624605 72.0213403,108.313281" id="Path-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(56.415000, 54.831157) scale(-1, 1) translate(-56.415000, -54.831157) "></path>
|
||||
<path d="M68,90.1163122 C56.62,93.1163122 45.46,83.36 44.75,82.48 L23.7904487,62.2292258 C22.6323849,61.1103236 21.9726845,59.5728835 21.9596987,57.9626396 L21.6335564,17.5209948 C21.6248861,16.4458744 21.1837714,15.4195095 20.4096864,14.6733517 L6.7759999,1.53153737 C5.185475,-0.00160504005 2.65324232,0.0449126588 1.12009991,1.63543756 C0.401512125,2.38092066 3.90211878e-13,3.37600834 3.90798505e-13,4.41143746 L3.94351218e-13,64.3864751 C3.94681177e-13,67.0807891 1.08722326,69.6611067 3.01540903,71.5429748 L40.7807092,108.401101 C43.1069304,110.671444 46.8180151,110.676525 49.1504445,108.412561" id="Path" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
|
||||
<path d="M43.2983488,19.0991931 L27.5566079,3.88246244 C26.7624281,3.11476967 26.7409561,1.84862177 27.5086488,1.05444194 C27.8854826,0.664606611 28.4044438,0.444472651 28.9466386,0.444472651 L60.3925021,0.444472651 C61.4970716,0.444472651 62.3925021,1.33990315 62.3925021,2.44447265 C62.3925021,2.9858375 62.1730396,3.50407742 61.7842512,3.88079942 L46.0801285,19.0975301 C45.3051579,19.8484488 44.0742167,19.8491847 43.2983488,19.0991931 Z" id="Path" fill="url(#linearGradient-3)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div class="antd-pro-components-article-list-content-index-listContent">
|
||||
<div class="description">
|
||||
<slot>
|
||||
{{ description }}
|
||||
</slot>
|
||||
</div>
|
||||
<div class="extra">
|
||||
<a-avatar :src="avatar" size="small" />
|
||||
<a :href="href">{{ owner }}</a> 发布在 <a :href="href">{{ href }}</a>
|
||||
<em>{{ updateAt | moment }}</em>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ArticleListContent',
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: 'antd-pro-components-article-list-content-index-listContent'
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
owner: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
updateAt: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../index.less';
|
||||
|
||||
.antd-pro-components-article-list-content-index-listContent {
|
||||
.description {
|
||||
max-width: 720px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.extra {
|
||||
margin-top: 16px;
|
||||
color: @text-color-secondary;
|
||||
line-height: 22px;
|
||||
|
||||
& /deep/ .ant-avatar {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
& > em {
|
||||
margin-left: 16px;
|
||||
color: @disabled-color;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs) {
|
||||
.antd-pro-components-article-list-content-index-listContent {
|
||||
.extra {
|
||||
& > em {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import ArticleListContent from './ArticleListContent'
|
||||
|
||||
export default ArticleListContent
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import PropTypes from 'ant-design-vue/es/_util/vue-types'
|
||||
import { Tooltip, Avatar } from 'ant-design-vue'
|
||||
import { getSlotOptions } from 'ant-design-vue/lib/_util/props-util'
|
||||
import { warning } from 'ant-design-vue/lib/vc-util/warning'
|
||||
|
||||
export const AvatarListItemProps = {
|
||||
tips: PropTypes.string.def(null),
|
||||
src: PropTypes.string.def('')
|
||||
}
|
||||
|
||||
const Item = {
|
||||
__ANT_AVATAR_CHILDREN: true,
|
||||
name: 'AvatarListItem',
|
||||
props: AvatarListItemProps,
|
||||
created () {
|
||||
warning(getSlotOptions(this.$parent).__ANT_AVATAR_LIST, 'AvatarListItem must be a subcomponent of AvatarList')
|
||||
},
|
||||
render () {
|
||||
const AvatarDom = <Avatar size={this.$parent.size} src={this.src} />
|
||||
return this.tips && <Tooltip title={this.tips}>{AvatarDom}</Tooltip> || <AvatarDom />
|
||||
}
|
||||
}
|
||||
|
||||
export default Item
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import './index.less'
|
||||
|
||||
import PropTypes from 'ant-design-vue/es/_util/vue-types'
|
||||
import Avatar from 'ant-design-vue/es/avatar'
|
||||
import Item from './Item.jsx'
|
||||
import { filterEmpty } from '@/components/_util/util'
|
||||
|
||||
/**
|
||||
* size: `number`、 `large`、`small`、`default` 默认值: default
|
||||
* maxLength: number
|
||||
* excessItemsStyle: CSSProperties
|
||||
*/
|
||||
const AvatarListProps = {
|
||||
prefixCls: PropTypes.string.def('ant-pro-avatar-list'),
|
||||
size: {
|
||||
validator: val => {
|
||||
return typeof val === 'number' || ['small', 'large', 'default'].includes(val)
|
||||
},
|
||||
default: 'default'
|
||||
},
|
||||
maxLength: PropTypes.number.def(0),
|
||||
excessItemsStyle: PropTypes.object.def({
|
||||
color: '#f56a00',
|
||||
backgroundColor: '#fde3cf'
|
||||
})
|
||||
}
|
||||
|
||||
const AvatarList = {
|
||||
__ANT_AVATAR_LIST: true,
|
||||
Item,
|
||||
name: 'AvatarList',
|
||||
props: AvatarListProps,
|
||||
render (h) {
|
||||
const { prefixCls, size } = this.$props
|
||||
const className = {
|
||||
[`${prefixCls}`]: true,
|
||||
[`${size}`]: true
|
||||
}
|
||||
const items = filterEmpty(this.$slots.default)
|
||||
const itemsDom = items && items.length ? <ul class={`${prefixCls}-items`}>{this.getItems(items)}</ul> : null
|
||||
|
||||
return (
|
||||
<div class={className}>
|
||||
{itemsDom}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
methods: {
|
||||
getItems (items) {
|
||||
const className = {
|
||||
[`${this.prefixCls}-item`]: true,
|
||||
[`${this.size}`]: true
|
||||
}
|
||||
const totalSize = items.length
|
||||
|
||||
if (this.maxLength > 0) {
|
||||
items = items.slice(0, this.maxLength)
|
||||
items.push((<Avatar size={this.size} style={this.excessItemsStyle}>{`+${totalSize - this.maxLength}`}</Avatar>))
|
||||
}
|
||||
return items.map((item) => (
|
||||
<li class={className}>{item}</li>
|
||||
))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
AvatarList.install = function (Vue) {
|
||||
Vue.component(AvatarList.name, AvatarList)
|
||||
Vue.component(AvatarList.Item.name, AvatarList.Item)
|
||||
}
|
||||
|
||||
export default AvatarList
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import AvatarList from './List'
|
||||
import Item from './Item'
|
||||
|
||||
export {
|
||||
AvatarList,
|
||||
Item as AvatarListItem
|
||||
}
|
||||
|
||||
export default AvatarList
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
@import "../index";
|
||||
|
||||
@avatar-list-prefix-cls: ~"@{ant-pro-prefix}-avatar-list";
|
||||
@avatar-list-item-prefix-cls: ~"@{ant-pro-prefix}-avatar-list-item";
|
||||
|
||||
.@{avatar-list-prefix-cls} {
|
||||
display: inline-block;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0 0 0 8px;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{avatar-list-item-prefix-cls} {
|
||||
display: inline-block;
|
||||
font-size: @font-size-base;
|
||||
margin-left: -8px;
|
||||
width: @avatar-size-base;
|
||||
height: @avatar-size-base;
|
||||
|
||||
:global {
|
||||
.ant-avatar {
|
||||
border: 1px solid #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
width: @avatar-size-lg;
|
||||
height: @avatar-size-lg;
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: @avatar-size-sm;
|
||||
height: @avatar-size-sm;
|
||||
}
|
||||
|
||||
&.mini {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
:global {
|
||||
.ant-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
|
||||
.ant-avatar-string {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
# AvatarList 用户头像列表
|
||||
|
||||
|
||||
一组用户头像,常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。
|
||||
|
||||
|
||||
|
||||
引用方式:
|
||||
|
||||
```javascript
|
||||
import AvatarList from '@/components/AvatarList'
|
||||
const AvatarListItem = AvatarList.Item
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AvatarList,
|
||||
AvatarListItem
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 代码演示 [demo](https://pro.loacg.com/test/home)
|
||||
|
||||
```html
|
||||
<avatar-list size="mini">
|
||||
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
|
||||
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
</avatar-list>
|
||||
```
|
||||
或
|
||||
```html
|
||||
<avatar-list :max-length="3">
|
||||
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
|
||||
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
</avatar-list>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### AvatarList
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------- | ---------------------------------- | --------- |
|
||||
| size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` |
|
||||
| maxLength | 要显示的最大项目 | number | - |
|
||||
| excessItemsStyle | 多余的项目风格 | CSSProperties | - |
|
||||
|
||||
### AvatarList.Item
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---- | ------ | --------- | --- |
|
||||
| tips | 头像展示文案 | string | - |
|
||||
| src | 头像图片连接 | string | - |
|
||||
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
<v-chart :forceFit="true" :height="height" :data="data" >
|
||||
<v-tooltip />
|
||||
<v-axis />
|
||||
<v-legend />
|
||||
<v-bar position="x*y" color="x"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
scale: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [{
|
||||
dataKey: 'x',
|
||||
min: 2
|
||||
}, {
|
||||
dataKey: 'y',
|
||||
title: '时间',
|
||||
min: 1,
|
||||
max: 22
|
||||
}]
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
'x*y',
|
||||
(x, y) => ({
|
||||
name: x,
|
||||
value: y
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 400,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
|
||||
<div class="chart-card-header">
|
||||
<div class="meta">
|
||||
<span class="chart-card-title">
|
||||
<slot name="title">
|
||||
{{ title }}
|
||||
</slot>
|
||||
</span>
|
||||
<span class="chart-card-action">
|
||||
<slot name="action"></slot>
|
||||
</span>
|
||||
</div>
|
||||
<div class="total">
|
||||
<slot name="total">
|
||||
<span>{{ typeof total === 'function' && total() || total }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-card-content">
|
||||
<div class="content-fix">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-card-footer">
|
||||
<div class="field">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChartCard',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
total: {
|
||||
type: [Function, Number, String],
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart-card-header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
.meta {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
color: rgba(0, 0, 0, .45);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card-action {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.chart-card-footer {
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding-top: 9px;
|
||||
margin-top: 8px;
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.field {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card-content {
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
height: 46px;
|
||||
width: 100%;
|
||||
|
||||
.content-fix {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-chart
|
||||
:forceFit="true"
|
||||
:height="height"
|
||||
:width="width"
|
||||
:data="data"
|
||||
:scale="scale"
|
||||
:padding="0">
|
||||
<v-tooltip />
|
||||
<v-interval
|
||||
:shape="['liquid-fill-gauge']"
|
||||
position="transfer*value"
|
||||
color=""
|
||||
:v-style="{
|
||||
lineWidth: 10,
|
||||
opacity: 0.75
|
||||
}"
|
||||
:tooltip="[
|
||||
'transfer*value',
|
||||
(transfer, value) => {
|
||||
return {
|
||||
name: transfer,
|
||||
value,
|
||||
};
|
||||
},
|
||||
]"
|
||||
></v-interval>
|
||||
<v-guide
|
||||
v-for="(row, index) in data"
|
||||
:key="index"
|
||||
type="text"
|
||||
:top="true"
|
||||
:position="{
|
||||
gender: row.transfer,
|
||||
value: 45
|
||||
}"
|
||||
:content="row.value + '%'"
|
||||
:v-style="{
|
||||
fontSize: 100,
|
||||
textAlign: 'center',
|
||||
opacity: 0.75,
|
||||
}"
|
||||
/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Liquid',
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div class="antv-chart-mini">
|
||||
<div class="chart-wrapper" :style="{ height: 46 }">
|
||||
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 0, 18, 0]">
|
||||
<v-tooltip />
|
||||
<v-smooth-area position="x*y" />
|
||||
</v-chart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
const data = []
|
||||
const beginDay = new Date().getTime()
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
data.push({
|
||||
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
|
||||
y: Math.round(Math.random() * 10)
|
||||
})
|
||||
}
|
||||
|
||||
const tooltip = [
|
||||
'x*y',
|
||||
(x, y) => ({
|
||||
name: x,
|
||||
value: y
|
||||
})
|
||||
]
|
||||
const scale = [{
|
||||
dataKey: 'x',
|
||||
min: 2
|
||||
}, {
|
||||
dataKey: 'y',
|
||||
title: '时间',
|
||||
min: 1,
|
||||
max: 22
|
||||
}]
|
||||
|
||||
export default {
|
||||
name: 'MiniArea',
|
||||
data () {
|
||||
return {
|
||||
data,
|
||||
tooltip,
|
||||
scale,
|
||||
height: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "chart";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div class="antv-chart-mini">
|
||||
<div class="chart-wrapper" :style="{ height: 46 }">
|
||||
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
|
||||
<v-tooltip />
|
||||
<v-bar position="x*y" />
|
||||
</v-chart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
const data = []
|
||||
const beginDay = new Date().getTime()
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
data.push({
|
||||
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
|
||||
y: Math.round(Math.random() * 10)
|
||||
})
|
||||
}
|
||||
|
||||
const tooltip = [
|
||||
'x*y',
|
||||
(x, y) => ({
|
||||
name: x,
|
||||
value: y
|
||||
})
|
||||
]
|
||||
|
||||
const scale = [{
|
||||
dataKey: 'x',
|
||||
min: 2
|
||||
}, {
|
||||
dataKey: 'y',
|
||||
title: '时间',
|
||||
min: 1,
|
||||
max: 30
|
||||
}]
|
||||
|
||||
export default {
|
||||
name: 'MiniBar',
|
||||
data () {
|
||||
return {
|
||||
data,
|
||||
tooltip,
|
||||
scale,
|
||||
height: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "chart";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div class="chart-mini-progress">
|
||||
<div class="target" :style="{ left: target + '%'}">
|
||||
<span :style="{ backgroundColor: color }" />
|
||||
<span :style="{ backgroundColor: color }"/>
|
||||
</div>
|
||||
<div class="progress-wrapper">
|
||||
<div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MiniProgress',
|
||||
props: {
|
||||
target: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '10px'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#13C2C2'
|
||||
},
|
||||
percentage: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart-mini-progress {
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.target {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
span {
|
||||
border-radius: 100px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
width: 2px;
|
||||
|
||||
&:last-child {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress-wrapper {
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
|
||||
.progress {
|
||||
transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
|
||||
border-radius: 1px 0 0 1px;
|
||||
background-color: #1890ff;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div :class="prefixCls">
|
||||
<div class="chart-wrapper" :style="{ height: 46 }">
|
||||
<v-chart :force-fit="true" :height="100" :data="dataSource" :scale="scale" :padding="[36, 0, 18, 0]">
|
||||
<v-tooltip />
|
||||
<v-smooth-line position="x*y" :size="2" />
|
||||
<v-smooth-area position="x*y" />
|
||||
</v-chart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MiniSmoothArea',
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: 'ant-pro-smooth-area'
|
||||
},
|
||||
scale: {
|
||||
type: [Object, Array],
|
||||
required: true
|
||||
},
|
||||
dataSource: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
height: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "smooth.area.less";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
|
||||
<v-tooltip></v-tooltip>
|
||||
<v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
|
||||
<v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
|
||||
<v-legend dataKey="user" marker="circle" :offset="30" />
|
||||
<v-coord type="polar" radius="0.8" />
|
||||
<v-line position="item*score" color="user" :size="2" />
|
||||
<v-point position="item*score" color="user" :size="4" shape="circle" />
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const axis1Opts = {
|
||||
dataKey: 'item',
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
lineStyle: {
|
||||
lineDash: null
|
||||
},
|
||||
hideFirstLine: false
|
||||
}
|
||||
}
|
||||
const axis2Opts = {
|
||||
dataKey: 'score',
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
type: 'polygon',
|
||||
lineStyle: {
|
||||
lineDash: null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const scale = [
|
||||
{
|
||||
dataKey: 'score',
|
||||
min: 0,
|
||||
max: 80
|
||||
}, {
|
||||
dataKey: 'user',
|
||||
alias: '类型'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Radar',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
axis1Opts,
|
||||
axis2Opts,
|
||||
scale
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div class="rank">
|
||||
<h4 class="title">{{ title }}</h4>
|
||||
<ul class="list">
|
||||
<li :key="index" v-for="(item, index) in list">
|
||||
<span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.total }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RankList',
|
||||
// ['title', 'list']
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.rank {
|
||||
padding: 0 32px 32px 72px;
|
||||
|
||||
.list {
|
||||
margin: 25px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin-top: 16px;
|
||||
|
||||
span {
|
||||
color: rgba(0, 0, 0, .65);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
|
||||
&:first-child {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-right: 24px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
&.active {
|
||||
background-color: #314659;
|
||||
color: #fff;
|
||||
}
|
||||
&:last-child {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile .rank {
|
||||
padding: 0 32px 32px 32px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<v-chart :width="width" :height="height" :padding="[0]" :data="data" :scale="scale">
|
||||
<v-tooltip :show-title="false" />
|
||||
<v-coord type="rect" direction="TL" />
|
||||
<v-point position="x*y" color="category" shape="cloud" tooltip="value*category" />
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { registerShape } from 'viser-vue'
|
||||
const DataSet = require('@antv/data-set')
|
||||
|
||||
const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png'
|
||||
|
||||
const scale = [
|
||||
{ dataKey: 'x', nice: false },
|
||||
{ dataKey: 'y', nice: false }
|
||||
]
|
||||
|
||||
registerShape('point', 'cloud', {
|
||||
draw (cfg, container) {
|
||||
return container.addShape('text', {
|
||||
attrs: {
|
||||
fillOpacity: cfg.opacity,
|
||||
fontSize: cfg.origin._origin.size,
|
||||
rotate: cfg.origin._origin.rotate,
|
||||
text: cfg.origin._origin.text,
|
||||
textAlign: 'center',
|
||||
fontFamily: cfg.origin._origin.font,
|
||||
fill: cfg.color,
|
||||
textBaseline: 'Alphabetic',
|
||||
...cfg.style,
|
||||
x: cfg.x,
|
||||
y: cfg.y
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
export default {
|
||||
name: 'TagCloud',
|
||||
props: {
|
||||
tagList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 400
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 640
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [],
|
||||
scale
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tagList: function (val) {
|
||||
if (val.length > 0) {
|
||||
this.initTagCloud(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.tagList.length > 0) {
|
||||
this.initTagCloud(this.tagList)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initTagCloud (dataSource) {
|
||||
const { height, width } = this
|
||||
|
||||
const dv = new DataSet.View().source(dataSource)
|
||||
const range = dv.range('value')
|
||||
const min = range[0]
|
||||
const max = range[1]
|
||||
const imageMask = new Image()
|
||||
imageMask.crossOrigin = ''
|
||||
imageMask.src = imgUrl
|
||||
imageMask.onload = () => {
|
||||
dv.transform({
|
||||
type: 'tag-cloud',
|
||||
fields: ['name', 'value'],
|
||||
size: [width, height],
|
||||
imageMask,
|
||||
font: 'Verdana',
|
||||
padding: 0,
|
||||
timeInterval: 5000, // max execute time
|
||||
rotate () {
|
||||
let random = ~~(Math.random() * 4) % 4
|
||||
if (random === 2) {
|
||||
random = 0
|
||||
}
|
||||
return random * 90 // 0, 90, 270
|
||||
},
|
||||
fontSize (d) {
|
||||
if (d.value) {
|
||||
return ((d.value - min) / (max - min)) * (32 - 8) + 8
|
||||
}
|
||||
return 0
|
||||
}
|
||||
})
|
||||
this.data = dv.rows
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
<v-chart
|
||||
height="254"
|
||||
:data="data"
|
||||
:scale="scale"
|
||||
:forceFit="true"
|
||||
:padding="['auto', 'auto', '40', '50']">
|
||||
<v-tooltip />
|
||||
<v-axis />
|
||||
<v-bar position="x*y"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const tooltip = [
|
||||
'x*y',
|
||||
(x, y) => ({
|
||||
name: x,
|
||||
value: y
|
||||
})
|
||||
]
|
||||
const scale = [{
|
||||
dataKey: 'x',
|
||||
title: '日期(天)',
|
||||
alias: '日期(天)',
|
||||
min: 2
|
||||
}, {
|
||||
dataKey: 'y',
|
||||
title: '流量(Gb)',
|
||||
alias: '流量(Gb)',
|
||||
min: 1
|
||||
}]
|
||||
|
||||
export default {
|
||||
name: 'Bar',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [],
|
||||
scale,
|
||||
tooltip
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getMonthBar()
|
||||
},
|
||||
methods: {
|
||||
getMonthBar () {
|
||||
this.$http.get('/analysis/month-bar')
|
||||
.then(res => {
|
||||
this.data = res.result
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<div class="chart-trend">
|
||||
{{ term }}
|
||||
<span>{{ rate }}%</span>
|
||||
<span :class="['trend-icon', trend]"><a-icon :type="'caret-' + trend"/></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Trend',
|
||||
props: {
|
||||
term: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true
|
||||
},
|
||||
percentage: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
type: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
target: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
fixed: {
|
||||
type: Number,
|
||||
default: 2
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
trend: this.type && 'up' || 'down',
|
||||
rate: this.percentage
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const type = this.type === null ? this.value >= this.target : this.type
|
||||
this.trend = type ? 'up' : 'down'
|
||||
this.rate = (this.percentage === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percentage).toFixed(this.fixed)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart-trend {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
|
||||
.trend-icon {
|
||||
font-size: 12px;
|
||||
|
||||
&.up, &.down {
|
||||
margin-left: 4px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
transform: scale(.83);
|
||||
}
|
||||
}
|
||||
|
||||
&.up {
|
||||
color: #f5222d;
|
||||
}
|
||||
&.down {
|
||||
color: #52c41a;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.antv-chart-mini {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.chart-wrapper {
|
||||
position: absolute;
|
||||
bottom: -28px;
|
||||
width: 100%;
|
||||
|
||||
/* margin: 0 -5px;
|
||||
overflow: hidden;*/
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@import "../index";
|
||||
|
||||
@smoothArea-prefix-cls: ~"@{ant-pro-prefix}-smooth-area";
|
||||
|
||||
.@{smoothArea-prefix-cls} {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.chart-wrapper {
|
||||
position: absolute;
|
||||
bottom: -28px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
import Modal from 'ant-design-vue/es/modal'
|
||||
export default (Vue) => {
|
||||
function dialog (component, componentProps, modalProps) {
|
||||
const _vm = this
|
||||
modalProps = modalProps || {}
|
||||
if (!_vm || !_vm._isVue) {
|
||||
return
|
||||
}
|
||||
let dialogDiv = document.querySelector('body>div[type=dialog]')
|
||||
if (!dialogDiv) {
|
||||
dialogDiv = document.createElement('div')
|
||||
dialogDiv.setAttribute('type', 'dialog')
|
||||
document.body.appendChild(dialogDiv)
|
||||
}
|
||||
|
||||
const handle = function (checkFunction, afterHandel) {
|
||||
if (checkFunction instanceof Function) {
|
||||
const res = checkFunction()
|
||||
if (res instanceof Promise) {
|
||||
res.then(c => {
|
||||
c && afterHandel()
|
||||
})
|
||||
} else {
|
||||
res && afterHandel()
|
||||
}
|
||||
} else {
|
||||
// checkFunction && afterHandel()
|
||||
checkFunction || afterHandel()
|
||||
}
|
||||
}
|
||||
|
||||
const dialogInstance = new Vue({
|
||||
data () {
|
||||
return {
|
||||
visible: true
|
||||
}
|
||||
},
|
||||
router: _vm.$router,
|
||||
store: _vm.$store,
|
||||
mounted () {
|
||||
this.$on('close', (v) => {
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleClose () {
|
||||
handle(this.$refs._component.onCancel, () => {
|
||||
this.visible = false
|
||||
this.$refs._component.$emit('close')
|
||||
this.$refs._component.$emit('cancel')
|
||||
dialogInstance.$destroy()
|
||||
})
|
||||
},
|
||||
handleOk () {
|
||||
handle(this.$refs._component.onOK || this.$refs._component.onOk, () => {
|
||||
this.visible = false
|
||||
this.$refs._component.$emit('close')
|
||||
this.$refs._component.$emit('ok')
|
||||
dialogInstance.$destroy()
|
||||
})
|
||||
}
|
||||
},
|
||||
render: function (h) {
|
||||
const that = this
|
||||
const modalModel = modalProps && modalProps.model
|
||||
if (modalModel) {
|
||||
delete modalProps.model
|
||||
}
|
||||
const ModalProps = Object.assign({}, modalModel && { model: modalModel } || {}, {
|
||||
attrs: Object.assign({}, {
|
||||
...(modalProps.attrs || modalProps)
|
||||
}, {
|
||||
visible: this.visible
|
||||
}),
|
||||
on: Object.assign({}, {
|
||||
...(modalProps.on || modalProps)
|
||||
}, {
|
||||
ok: () => {
|
||||
that.handleOk()
|
||||
},
|
||||
cancel: () => {
|
||||
that.handleClose()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const componentModel = componentProps && componentProps.model
|
||||
if (componentModel) {
|
||||
delete componentProps.model
|
||||
}
|
||||
const ComponentProps = Object.assign({}, componentModel && { model: componentModel } || {}, {
|
||||
ref: '_component',
|
||||
attrs: Object.assign({}, {
|
||||
...((componentProps && componentProps.attrs) || componentProps)
|
||||
}),
|
||||
on: Object.assign({}, {
|
||||
...((componentProps && componentProps.on) || componentProps)
|
||||
})
|
||||
})
|
||||
|
||||
return h(Modal, ModalProps, [h(component, ComponentProps)])
|
||||
}
|
||||
}).$mount(dialogDiv)
|
||||
}
|
||||
|
||||
Object.defineProperty(Vue.prototype, '$dialog', {
|
||||
get: () => {
|
||||
return function () {
|
||||
dialog.apply(this, arguments)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div :class="prefixCls">
|
||||
<quill-editor
|
||||
v-model="content"
|
||||
ref="myQuillEditor"
|
||||
:options="editorOption"
|
||||
@blur="onEditorBlur($event)"
|
||||
@focus="onEditorFocus($event)"
|
||||
@ready="onEditorReady($event)"
|
||||
@change="onEditorChange($event)">
|
||||
</quill-editor>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
import { quillEditor } from 'vue-quill-editor'
|
||||
|
||||
export default {
|
||||
name: 'QuillEditor',
|
||||
components: {
|
||||
quillEditor
|
||||
},
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: 'ant-editor-quill'
|
||||
},
|
||||
// 表单校验用字段
|
||||
// eslint-disable-next-line
|
||||
value: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
content: null,
|
||||
editorOption: {
|
||||
// some quill options
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onEditorBlur (quill) {
|
||||
console.log('editor blur!', quill)
|
||||
},
|
||||
onEditorFocus (quill) {
|
||||
console.log('editor focus!', quill)
|
||||
},
|
||||
onEditorReady (quill) {
|
||||
console.log('editor ready!', quill)
|
||||
},
|
||||
onEditorChange ({ quill, html, text }) {
|
||||
console.log('editor change!', quill, html, text)
|
||||
this.$emit('change', html)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
this.content = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../index.less');
|
||||
|
||||
/* 覆盖 quill 默认边框圆角为 ant 默认圆角,用于统一 ant 组件风格 */
|
||||
.ant-editor-quill {
|
||||
line-height: initial;
|
||||
/deep/ .ql-toolbar.ql-snow {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
/deep/ .ql-container.ql-snow {
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div :class="prefixCls">
|
||||
<div ref="editor" class="editor-wrapper"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WEditor from 'wangeditor'
|
||||
|
||||
export default {
|
||||
name: 'WangEditor',
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: 'ant-editor-wang'
|
||||
},
|
||||
// eslint-disable-next-line
|
||||
value: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
editor: null,
|
||||
editorContent: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
this.editorContent = val
|
||||
this.editor.txt.html(val)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initEditor()
|
||||
},
|
||||
methods: {
|
||||
initEditor () {
|
||||
this.editor = new WEditor(this.$refs.editor)
|
||||
// this.editor.onchangeTimeout = 200
|
||||
this.editor.customConfig.onchange = (html) => {
|
||||
this.editorContent = html
|
||||
this.$emit('change', this.editorContent)
|
||||
}
|
||||
this.editor.create()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-editor-wang {
|
||||
.editor-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<script>
|
||||
import Tooltip from 'ant-design-vue/es/tooltip'
|
||||
import { cutStrByFullLength, getStrFullLength } from '@/components/_util/util'
|
||||
/*
|
||||
const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
|
||||
|
||||
const TooltipOverlayStyle = {
|
||||
overflowWrap: 'break-word',
|
||||
wordWrap: 'break-word',
|
||||
};
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'Ellipsis',
|
||||
components: {
|
||||
Tooltip
|
||||
},
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: 'ant-pro-ellipsis'
|
||||
},
|
||||
tooltip: {
|
||||
type: Boolean
|
||||
},
|
||||
length: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
lines: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
fullWidthRecognition: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStrDom (str, fullLength) {
|
||||
return (
|
||||
<span>{ cutStrByFullLength(str, this.length) + (fullLength > this.length ? '...' : '') }</span>
|
||||
)
|
||||
},
|
||||
getTooltip (fullStr, fullLength) {
|
||||
return (
|
||||
<Tooltip>
|
||||
<template slot="title">{ fullStr }</template>
|
||||
{ this.getStrDom(fullStr, fullLength) }
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const { tooltip, length } = this.$props
|
||||
const str = this.$slots.default.map(vNode => vNode.text).join('')
|
||||
const fullLength = getStrFullLength(str)
|
||||
const strDom = tooltip && fullLength > length ? this.getTooltip(str, fullLength) : this.getStrDom(str, fullLength)
|
||||
return (
|
||||
strDom
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Ellipsis from './Ellipsis'
|
||||
|
||||
export default Ellipsis
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
# Ellipsis 文本自动省略号
|
||||
|
||||
文本过长自动处理省略号,支持按照文本长度和最大行数两种方式截取。
|
||||
|
||||
|
||||
|
||||
引用方式:
|
||||
|
||||
```javascript
|
||||
import Ellipsis from '@/components/Ellipsis'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Ellipsis
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 代码演示 [demo](https://pro.loacg.com/test/home)
|
||||
|
||||
```html
|
||||
<ellipsis :length="100" tooltip>
|
||||
There were injuries alleged in three cases in 2015, and a
|
||||
fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
|
||||
</ellipsis>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
|
||||
参数 | 说明 | 类型 | 默认值
|
||||
----|------|-----|------
|
||||
tooltip | 移动到文本展示完整内容的提示 | boolean | -
|
||||
length | 在按照长度截取下的文本最大字符数,超过则截取省略 | number | -
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div :class="prefixCls" :style="{ width: barWidth, transition: '0.3s all' }">
|
||||
<div style="float: left">
|
||||
<slot name="extra">{{ extra }}</slot>
|
||||
</div>
|
||||
<div style="float: right">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FooterToolBar',
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: 'ant-pro-footer-toolbar'
|
||||
},
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isMobile: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
siderWidth: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
extra: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
barWidth () {
|
||||
return this.isMobile ? undefined : `calc(100% - ${this.collapsed ? 80 : this.siderWidth || 256}px)`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import FooterToolBar from './FooterToolBar'
|
||||
import './index.less'
|
||||
|
||||
export default FooterToolBar
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
@import "../index";
|
||||
|
||||
@footer-toolbar-prefix-cls: ~"@{ant-pro-prefix}-footer-toolbar";
|
||||
|
||||
.@{footer-toolbar-prefix-cls} {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
|
||||
background: #fff;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 0 24px;
|
||||
z-index: 9;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
# FooterToolbar 底部工具栏
|
||||
|
||||
固定在底部的工具栏。
|
||||
|
||||
|
||||
|
||||
## 何时使用
|
||||
|
||||
固定在内容区域的底部,不随滚动条移动,常用于长页面的数据搜集和提交工作。
|
||||
|
||||
|
||||
|
||||
引用方式:
|
||||
|
||||
```javascript
|
||||
import FooterToolBar from '@/components/FooterToolbar'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FooterToolBar
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 代码演示
|
||||
|
||||
```html
|
||||
<footer-tool-bar>
|
||||
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
|
||||
</footer-tool-bar>
|
||||
```
|
||||
或
|
||||
```html
|
||||
<footer-tool-bar extra="扩展信息提示">
|
||||
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
|
||||
</footer-tool-bar>
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
参数 | 说明 | 类型 | 默认值
|
||||
----|------|-----|------
|
||||
children (slot) | 工具栏内容,向右对齐 | - | -
|
||||
extra | 额外信息,向左对齐 | String, Object | -
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<!-- <global-footer class="footer custom-render"> -->
|
||||
<!-- <template v-slot:links>
|
||||
<a href="https://www.github.com/vueComponent/pro-layout" target="_blank">Pro Layout</a>
|
||||
<a href="https://www.github.com/vueComponent/ant-design-vue-pro" target="_blank">Github</a>
|
||||
<a href="https://www.github.com/sendya/" target="_blank">@Sendya</a>
|
||||
</template>
|
||||
<template v-slot:copyright>
|
||||
<a href="https://github.com/vueComponent" target="_blank">vueComponent</a>
|
||||
</template> -->
|
||||
<!-- </global-footer> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { GlobalFooter } from '@ant-design-vue/pro-layout'
|
||||
|
||||
export default {
|
||||
name: 'ProGlobalFooter',
|
||||
// components: {
|
||||
// GlobalFooter
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<div :class="wrpCls">
|
||||
<!-- <a-icon type="question-circle" class="icon"/> -->
|
||||
<a-badge :count="99" class="icon">
|
||||
<a-icon type="bell" />
|
||||
</a-badge>
|
||||
<a-dropdown v-if="currentUser && currentUser.name" placement="bottomRight">
|
||||
<span class="ant-pro-account-avatar">
|
||||
<a-avatar size="small" src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" class="antd-pro-global-header-index-avatar" />
|
||||
<span>{{ currentUser.name }}</span>
|
||||
</span>
|
||||
<template v-slot:overlay>
|
||||
<a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
|
||||
<a-menu-item v-if="menu" key="center" @click="handleToCenter">
|
||||
<a-icon type="unlock" />
|
||||
修改密码
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="menu" key="settings" @click="handleToSettings">
|
||||
<a-icon type="qq" />
|
||||
在线客服
|
||||
</a-menu-item>
|
||||
<a-menu-divider v-if="menu" />
|
||||
<a-menu-item key="logout" @click="handleLogout">
|
||||
<a-icon type="poweroff" />
|
||||
退出登录
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<span v-else>
|
||||
<a-spin size="small" :style="{ marginLeft: 8, marginRight: 8 }" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Modal
|
||||
} from 'ant-design-vue'
|
||||
import store from '@/store'
|
||||
|
||||
export default {
|
||||
name: 'AvatarDropdown',
|
||||
props: {
|
||||
menu: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showMenu: true,
|
||||
currentUser: {
|
||||
name: store.getters.nickname
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrpCls () {
|
||||
return {
|
||||
'ant-pro-global-header-index-right': true,
|
||||
[`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToCenter () {
|
||||
this.$router.push({
|
||||
path: '/user/password'
|
||||
})
|
||||
},
|
||||
handleToSettings () {
|
||||
this.$router.push({
|
||||
path: '/user/chat'
|
||||
})
|
||||
},
|
||||
handleLogout (e) {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定退出登录?',
|
||||
cancelText:'取消',
|
||||
okText:'确定',
|
||||
onOk: () => {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// setTimeout(Math.random() > 0.5 ? resolve : reject, 1500)
|
||||
// }).catch(() => console.log('Oops errors!'))
|
||||
window.localStorage.removeItem('wifitoken')
|
||||
this.$router.push({
|
||||
name: 'login'
|
||||
})
|
||||
// return this.$store.dispatch('Logout').then(() => {
|
||||
// this.$router.push({
|
||||
// name: 'login'
|
||||
// })
|
||||
// })
|
||||
},
|
||||
onCancel () {}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-pro-drop-down {
|
||||
/deep/ .action {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/deep/ .ant-dropdown-menu-item {
|
||||
min-width: 160px;
|
||||
}
|
||||
/deep/ .ant-dropdown-menu {
|
||||
right: 20px
|
||||
}
|
||||
}
|
||||
.icon{
|
||||
font-size: 20px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
</style>
|
||||