Compare commits
12 Commits
51c10de95d
...
bb2ad89a75
| Author | SHA1 | Date | |
|---|---|---|---|
| bb2ad89a75 | |||
| 3cfca3be83 | |||
| b4b010cb19 | |||
| 2bd14796a9 | |||
| 7746b7d52d | |||
| 17a7d4fa1f | |||
| 3013cf34e8 | |||
| 9f70fa7d51 | |||
| f05f861757 | |||
| cf31e2014f | |||
| 92af22aa18 | |||
| 359d146d48 |
@@ -6,4 +6,20 @@
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Content Remove="compilerconfig.json" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<None Include="compilerconfig.json" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Folder Include="Constants\" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\..\Library\Acdiu.AspNetCore.Mvc.Commons\Acdiu.AspNetCore.Mvc.Commons.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
<Solution>
|
||||
<Project Path="../../Library/Acdiu.AspNetCore.Mvc.Commons/Acdiu.AspNetCore.Mvc.Commons.csproj" Id="a42045c6-be82-461d-b4fb-3f20bc004abf" />
|
||||
<Project Path="AcdiuTools.csproj" />
|
||||
</Solution>
|
||||
|
||||
@@ -36,9 +36,12 @@ app.UseRouting();
|
||||
|
||||
// 【关键】启用 Session 中间件
|
||||
app.UseSession();
|
||||
// 启用静态文件中间件，确保 wwwroot 中的资源可访问
|
||||
app.UseStaticFiles();
|
||||
|
||||
app.UseAuthorization();
|
||||
|
||||
|
||||
app.MapStaticAssets();
|
||||
|
||||
app.MapControllerRoute(
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@{
|
||||
ViewData["Title"] = "Home Page";
|
||||
ViewData["Title"] = "首页";
|
||||
}
|
||||
|
||||
<div class="text-center">
|
||||
<h1 class="display-4">Welcome</h1>
|
||||
<p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
|
||||
<h1 class="display-4">欢迎</h1>
|
||||
<p>了解更多关于 <a href="https://learn.microsoft.com/aspnet/core">使用 ASP.NET Core 构建 Web 应用</a> 的信息。</p>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@{
|
||||
ViewData["Title"] = "Privacy Policy";
|
||||
ViewData["Title"] = "隐私";
|
||||
}
|
||||
<h1>@ViewData["Title"]</h1>
|
||||
|
||||
<p>Use this page to detail your site's privacy policy.</p>
|
||||
<p>使用此页面详细说明您网站的隐私政策。</p>
|
||||
@@ -1,4 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
@using Acdiu.AspNetCore.Mvc.Commons
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn" data-bs-theme="@ViewBag.CurrentTheme">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
@@ -6,15 +8,15 @@
|
||||
<title>@ViewData["Title"] - AcdiuTools</title>
|
||||
<script type="importmap"></script>
|
||||
|
||||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/AcdiuTools.styles.css" asp-append-version="true" />
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
|
||||
|
||||
<!-- Bootstrap Icons -->
|
||||
<link rel="stylesheet" href="~/lib/bootstrap-icons-1.13.1/font/bootstrap-icons.min.css" />
|
||||
|
||||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/AcdiuTools.styles.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/ac/ac.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/ac/icon/all.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/ac/ac.min.css" asp-append-version="true" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@@ -29,17 +31,21 @@
|
||||
<ul class="navbar-nav flex-grow-1">
|
||||
<!-- 添加 asp-active-link="true" 属性以指示启用自动激活检测 -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-active-link="true" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
|
||||
<a class="nav-link" asp-active-link="true" asp-area="" asp-controller="Home" asp-action="Index">
|
||||
<bsicon cn="p-r-t" i="house-fill" /> 首页
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-active-link="true" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
|
||||
<a class="nav-link" asp-active-link="true" asp-area="" asp-controller="Home" asp-action="Privacy">隐私</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@* 主题切换按钮 *@
|
||||
<theme-toggle />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="container">
|
||||
@@ -48,7 +54,7 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="border-top footer text-muted">
|
||||
<footer class="border-top footer text-muted mt-3">
|
||||
<div class="container">
|
||||
© 2018-@DateTime.Now.Year - <a asp-area="" asp-controller="Home" asp-action="Index">AcdiuTools</a>
|
||||
</div>
|
||||
|
||||
@@ -2,3 +2,4 @@
|
||||
@using AcdiuTools.Models
|
||||
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
||||
@addTagHelper *, AcdiuTools
|
||||
@addTagHelper *, Acdiu.AspNetCore.Mvc.Commons
|
||||
6
compilerconfig.json
Normal file
6
compilerconfig.json
Normal file
@@ -0,0 +1,6 @@
|
||||
[
|
||||
{
|
||||
"outputFile": "wwwroot/ac/ac.css",
|
||||
"inputFile": "wwwroot/ac/ac.scss"
|
||||
}
|
||||
]
|
||||
59
compilerconfig.json.defaults
Normal file
59
compilerconfig.json.defaults
Normal file
@@ -0,0 +1,59 @@
|
||||
{
|
||||
"compilers": {
|
||||
"less": {
|
||||
"autoPrefix": "",
|
||||
"cssComb": "none",
|
||||
"ieCompat": true,
|
||||
"math": null,
|
||||
"strictMath": false,
|
||||
"strictUnits": false,
|
||||
"relativeUrls": true,
|
||||
"rootPath": "",
|
||||
"sourceMapRoot": "",
|
||||
"sourceMapBasePath": "",
|
||||
"sourceMap": false
|
||||
},
|
||||
"sass": {
|
||||
"autoPrefix": "",
|
||||
"loadPaths": "",
|
||||
"style": "expanded",
|
||||
"relativeUrls": true,
|
||||
"sourceMap": false
|
||||
},
|
||||
"stylus": {
|
||||
"sourceMap": false
|
||||
},
|
||||
"babel": {
|
||||
"sourceMap": false
|
||||
},
|
||||
"coffeescript": {
|
||||
"bare": false,
|
||||
"runtimeMode": "node",
|
||||
"sourceMap": false
|
||||
},
|
||||
"handlebars": {
|
||||
"root": "",
|
||||
"noBOM": false,
|
||||
"name": "",
|
||||
"namespace": "",
|
||||
"knownHelpersOnly": false,
|
||||
"forcePartial": false,
|
||||
"knownHelpers": [],
|
||||
"commonjs": "",
|
||||
"amd": false,
|
||||
"sourceMap": false
|
||||
}
|
||||
},
|
||||
"minifiers": {
|
||||
"css": {
|
||||
"enabled": true,
|
||||
"termSemicolons": true,
|
||||
"gzip": false
|
||||
},
|
||||
"javascript": {
|
||||
"enabled": true,
|
||||
"termSemicolons": true,
|
||||
"gzip": false
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,65 +1,159 @@
|
||||
:root {
|
||||
/* --- 基础断点定义 (供参考) --- */
|
||||
/* 手机: < 768px */
|
||||
/* 平板: 768px - 1024px */
|
||||
/* 桌面: 1024px - 1920px */
|
||||
/* 4K屏: 3840px */
|
||||
/* --- 核心字号缩放逻辑 --- */
|
||||
/* 逻辑：在移动端最小为 14px，在 1024px 以上开始线性增长，到 4K 达到 24px */
|
||||
/* 公式：clamp(最小值, 首选值, 最大值) */
|
||||
@charset "UTF-8";
|
||||
:root {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
/* 1.2vw + 10px 是一个经过计算的动态值，确保 1024-3840 之间平滑过渡 */
|
||||
font-size: clamp(16px, 0.35vw + 12.4px, 24px);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 3840px) {
|
||||
:root {
|
||||
/* 针对 4K 以上屏幕，如果想继续缩放可保持 clamp，想锁定则固定 24px */
|
||||
font-size: 24px;
|
||||
font-size: clamp(20px, 0.5208333333vw, 100vw);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 全局布局容器 --- */
|
||||
/* --- 全局布局容器适配 --- */
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
box-sizing: border-box;
|
||||
/* 这里的 1rem 会随着上面定义的 font-size 自动缩放 */
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.container {
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.container {
|
||||
max-width: 2560px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 3800px) {
|
||||
.container {
|
||||
max-width: 3800px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 3840px) {
|
||||
.container {
|
||||
max-width: 3600px;
|
||||
max-width: 93.75vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 为当前激活的 nav-link，增加加粗效果 */
|
||||
/* --- 工具与组件样式 --- */
|
||||
.nav-link:visited {
|
||||
color: inherit;
|
||||
}
|
||||
.nav-link.active {
|
||||
font-weight: bold;
|
||||
color: var(--bs-primary) !important;
|
||||
border-bottom: 2px solid var(--bs-primary);
|
||||
color: var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1))) !important;
|
||||
border-bottom: 2px solid var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)));
|
||||
}
|
||||
|
||||
.p-r-t {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.mg-0 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)));
|
||||
}
|
||||
a:visited {
|
||||
color: var(--bs-purple, rgba(var(--bs-primary), var(--bs-link-opacity, 0.8)));
|
||||
}
|
||||
|
||||
.w-1r {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.h-1r {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.w-1_5r {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.h-1_5r {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.w-2r {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.h-2r {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.w-2_5r {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.h-2_5r {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.w-3r {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.h-3r {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.w-3_5r {
|
||||
width: 3.5rem;
|
||||
}
|
||||
|
||||
.h-3_5r {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.w-4r {
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.h-4r {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.w-4_5r {
|
||||
width: 4.5rem;
|
||||
}
|
||||
|
||||
.h-4_5r {
|
||||
height: 4.5rem;
|
||||
}
|
||||
|
||||
.w-5r {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.h-5r {
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.w-5_5r {
|
||||
width: 5.5rem;
|
||||
}
|
||||
|
||||
.h-5_5r {
|
||||
height: 5.5rem;
|
||||
}
|
||||
1
wwwroot/ac/ac.min.css
vendored
Normal file
1
wwwroot/ac/ac.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
@charset "UTF-8";:root{font-size:14px;}@media(min-width:1024px){:root{font-size:16px;}}@media(min-width:3840px){:root{font-size:clamp(20px,.5208333333vw,100vw);}}.container{width:100%;margin:0 auto;padding:0 1rem;box-sizing:border-box;}@media(min-width:768px){.container{max-width:720px;}}@media(min-width:1024px){.container{max-width:960px;}}@media(min-width:1920px){.container{max-width:1800px;}}@media(min-width:2560px){.container{max-width:2560px;}}@media(min-width:3800px){.container{max-width:3800px;}}@media(min-width:3840px){.container{max-width:93.75vw;}}.nav-link:visited{color:inherit;}.nav-link.active{font-weight:bold;color:var(--bs-link-hover-color,rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)))!important;border-bottom:2px solid var(--bs-link-hover-color,rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)));}.p-r-t{position:relative;top:-1px;}.mg-0{margin:0 auto;}a{text-decoration:none;color:var(--bs-link-hover-color,rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)));}a:visited{color:var(--bs-purple,rgba(var(--bs-primary),var(--bs-link-opacity,.8)));}.w-1r{width:1rem;}.h-1r{height:1rem;}.w-1_5r{width:1.5rem;}.h-1_5r{height:1.5rem;}.w-2r{width:2rem;}.h-2r{height:2rem;}.w-2_5r{width:2.5rem;}.h-2_5r{height:2.5rem;}.w-3r{width:3rem;}.h-3r{height:3rem;}.w-3_5r{width:3.5rem;}.h-3_5r{height:3.5rem;}.w-4r{width:4rem;}.h-4r{height:4rem;}.w-4_5r{width:4.5rem;}.h-4_5r{height:4.5rem;}.w-5r{width:5rem;}.h-5r{height:5rem;}.w-5_5r{width:5.5rem;}.h-5_5r{height:5.5rem;}
|
||||
147
wwwroot/ac/ac.scss
Normal file
147
wwwroot/ac/ac.scss
Normal file
@@ -0,0 +1,147 @@
|
||||
// ========================================================
|
||||
// 1. 变量与断点定义 (集中管理)
|
||||
// ========================================================
|
||||
$breakpoints: ( 'mobile': 768px, 'tablet': 1024px, 'desktop': 1920px, '2k': 2560px, '4k-40': 3800px, '4k': 3840px );
|
||||
|
||||
// 字号常量
|
||||
$font-size-small: 14px; // 手机/平板基准
|
||||
$font-size-standard: 16px; // 桌面基准 (1024px - 3840px)
|
||||
$font-size-4k-base: 20px; // 4K 触发点字号
|
||||
|
||||
// 容器配置
|
||||
$container-paddings: 1rem;
|
||||
|
||||
/// 去除单位函数
|
||||
@function strip-unit($number) {
|
||||
@if type-of($number) == 'number' and not unitless($number) {
|
||||
@return $number / ($number * 0 + 1);
|
||||
}
|
||||
|
||||
@return $number;
|
||||
}
|
||||
|
||||
/// 计算基于屏幕宽度的线性 VW 比例
|
||||
/// @param $size - 目标字号 (如 24px)
|
||||
/// @param $breakpoint - 触发断点 (如 3840)
|
||||
@function get-linear-vw($size, $breakpoint) {
|
||||
$raw-size: strip-unit($size);
|
||||
$raw-breakpoint: strip-unit($breakpoint);
|
||||
@return ($raw-size / $raw-breakpoint) * 100vw;
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// 2. 媒体查询 Mixin
|
||||
// ========================================================
|
||||
@mixin respond-to($breakpoint) {
|
||||
// 如果是预定义的 key (如 'mobile')
|
||||
@if map-has-key($breakpoints, $breakpoint) {
|
||||
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
// 如果是传入的具体数值 (如 3840px)
|
||||
@else {
|
||||
@media (min-width: $breakpoint) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// 3. 核心响应式逻辑
|
||||
// ========================================================
|
||||
:root {
|
||||
// --- [阶段 A] 默认状态 (手机/小屏幕) ---
|
||||
font-size: $font-size-small;
|
||||
// --- [阶段 B] 1024px 以上到 4K 之前: 保持标准 16px ---
|
||||
@include respond-to('tablet') {
|
||||
font-size: $font-size-standard;
|
||||
}
|
||||
// --- [阶段 C] 大于 4K: 开启线性增长 ---
|
||||
@include respond-to('4k') {
|
||||
// 锁定最小字号为 20px，确保在任何情况下都不会比基准值小
|
||||
font-size: clamp(#{$font-size-4k-base}, get-linear-vw($font-size-4k-base, 3840), 100vw);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 全局布局容器适配 --- */
|
||||
// 其中 4k-40 为准 4K (即 3840px - 40px), 以适配 PC 端部分浏览器最大化时边框占位从而影响到 4K 宽度判定
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 $container-paddings;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include respond-to('mobile') {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
@include respond-to('tablet') {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
@include respond-to('desktop') {
|
||||
max-width: 1800px;
|
||||
}
|
||||
|
||||
@include respond-to('2k') {
|
||||
max-width: 2560px;
|
||||
}
|
||||
|
||||
@include respond-to('4k-40') {
|
||||
max-width: 3800px;
|
||||
}
|
||||
// 当容器等于 4K 时，随之线性扩大
|
||||
@include respond-to('4k') {
|
||||
// 保持容器宽度占比: (3600 / 3840) * 100vw = 93.75vw
|
||||
max-width: (3600 / 3840) * 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// 4. 工具类与组件样式
|
||||
// ========================================================
|
||||
// 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放
|
||||
/* --- 工具与组件样式 --- */
|
||||
.nav-link {
|
||||
&:visited {
|
||||
color: inherit;
|
||||
}
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1))) !important;
|
||||
border-bottom: 2px solid var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)));
|
||||
}
|
||||
}
|
||||
|
||||
.p-r-t {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.mg-0 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// 去除 a 标签默认下划线
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)));
|
||||
// 访问过的链接变更颜色，提供视觉反馈
|
||||
&:visited {
|
||||
color: var(--bs-purple, rgba(var(--bs-primary), var(--bs-link-opacity, 0.8)));
|
||||
}
|
||||
}
|
||||
|
||||
// 定义宽与高的工具类，使用 rem 单位以适配响应式字体大小
|
||||
$widthOrheight-map: ( '1r': 1rem, '1_5r': 1.5rem, '2r': 2rem, '2_5r': 2.5rem, '3r': 3rem, '3_5r': 3.5rem, '4r': 4rem, '4_5r': 4.5rem, '5r': 5rem, '5_5r': 5.5rem );
|
||||
|
||||
@each $key, $value in $widthOrheight-map {
|
||||
.w-#{$key} {
|
||||
width: $value;
|
||||
}
|
||||
|
||||
.h-#{$key} {
|
||||
height: $value;
|
||||
}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
body {
|
||||
}
|
||||
Reference in New Issue
Block a user