doc(Web): use css variable (#3284)

* refactor: 移除 footer-link 字体样式 * style: 更新 footer 样式 * style: 更新 footer-body 背景色与前景色变量 * refactor: 移动分割条到 MainLayout * chore: 更新配置 * refactor: 增加 scss 识别策略 * refactor: 增加接口实现 * test: 增加单元测试 * style: 调整图标主题样式 * style: Main 样式变量化 * style: 拖动条样式变量化
2024-11-29 10:38:29 +08:00 · 2024-04-14 12:12:07 +08:00 · 2024-04-14 12:12:07 +08:00 · 6a0abbb9c9
commit 6a0abbb9c9
parent f7feee65bd
14 changed files with 119 additions and 90 deletions
--- a/.gitattributes
+++ b/.gitattributes
@ -1,9 +1,13 @@
-###############################################################################
+###############################################################################
 # Set default behavior to automatically normalize line endings.
 ###############################################################################
 * text=auto

 *.razor linguist-language=C#
+*.cs linguist-detectable=true  
+*.js linguist-detectable=false  
+*.html linguist-detectable=false  
+*.scss linguist-detectable=false

 ###############################################################################
 # Set default behavior for command prompt diff.
--- a/src/BootstrapBlazor.Server/Components/Components/Header.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Components/Header.razor.css
@ -2,8 +2,8 @@
    background-color: transparent;
    background-image: linear-gradient(to right, rgba(var(--bb-primary-color-rgb), 1), rgba(var(--bb-primary-color-rgb), 0.9));
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
-    font-size: 1rem;
    transition: transform .3s ease;
+    font-size: var(--bb-header-font-size);
 }

 .navbar-brand span {
--- a/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor
+++ b/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor
@ -21,9 +21,9 @@
    <ImageViewer Alt="coverage" IsAsync="true" Url="https://codecov.io/gh/dotnetcore/BootstrapBlazor/branch/main/graph/badge.svg?token=5SXIWHXZC3" />
 </div>

-<div class="d-flex justify-content-center">
-    <div class="me-3" style="line-height: 35px;">@Localizer["IconTheme"]</div>
-    <div class=""><RadioList TValue="string" Items="IconThemes" Value="@IconThemeKey" OnValueChanged="OnIconThemeChanged"></RadioList></div>
+<div class="d-flex justify-content-center align-items-center">
+    <div class="bb-theme-label">@Localizer["IconTheme"]</div>
+    <div><RadioList TValue="string" Items="IconThemes" Value="@IconThemeKey" OnValueChanged="OnIconThemeChanged"></RadioList></div>
 </div>

 <hr />
--- a/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor.css
@ -1,11 +1,16 @@
 .bb-title {
-    font-size: 1.1rem;
+    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
 }

+.bb-theme-label {
+    margin-right: 1rem;
+    white-space: nowrap;
+}
+
 .tab-navigators {
    position: fixed;
    right: 1rem;
@ -46,10 +51,6 @@
 }

@media (min-width: 576px) {
-    .bb-title {
-        font-size: 1.2rem;
-    }
-
    ::deep .bb-icon {
        display: inline-block;
    }
--- a/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor.css
@ -1,7 +1,7 @@
 .footer-body {
    padding: 1rem;
-    color: #fff;
-    background-color: #5b6e84;
+    color: var(--bb-footer-body-color);
+    background-color: var(--bb-footer-body-bg);
    margin: 0;
    display: flex;
    flex-direction: column;
@ -22,7 +22,6 @@
        transition: all .3s linear;
        color: rgba(255,255,255,.9);
        text-decoration: none;
-        font-size: 0.875rem;
        line-height: 2;
        display: block;
        cursor: pointer;
@ -44,8 +43,7 @@

 .footer-info {
    background-color: #222;
-    padding: 0 8px;
-    line-height: 42px;
+    padding: var(--bb-footer-padding);
    color: #9d9d9d;
 }

@ -69,7 +67,7 @@

@media (min-width: 768px) {
    .footer-body {
-        padding: 3rem;
+        padding: 2rem;
        flex-direction: row;
    }
 }
--- a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor
+++ b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor
@ -10,6 +10,9 @@
            <span class="sidebar-text">Bootstrap Blazor</span>
        </div>
        <NavMenu />
+        <div class="sidebar-bar">
+            <div class="sidebar-body"></div>
+        </div>
    </aside>

    <section class="main">
--- a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css
@ -1,5 +1,5 @@
 .main {
-    padding: 1rem;
+    padding: var(--bb-main-pading);
 }

 .section {
@ -10,7 +10,7 @@
    height: 50px;
    align-items: center;
    padding: 1rem;
-    border-bottom: solid 1px #c0c4cc;
+    border-bottom: solid 1px var(--bs-border-color);
    display: none;
 }

@ -39,10 +39,33 @@
    margin-top: 0;
 }

-::deep .alert-info .fa-lightbulb-o {
-    color: #17a2b8
+.sidebar-bar {
+    width: 1px;
+    position: absolute;
+    top: 0;
+    right: -1px;
+    bottom: 0;
+    background-color: var(--bs-border-color);
+    display: none;
 }

+    .sidebar-bar .sidebar-body {
+        position: absolute;
+        inset: 0px -2px;
+        cursor: col-resize;
+        background-color: transparent;
+        border-radius: 4px;
+    }
+
+        .sidebar-bar .sidebar-body:hover {
+            background-color: var(--bb-sidebar-body-hover-bg);
+        }
+
+        .sidebar-bar .sidebar-body.drag,
+        .sidebar-bar .sidebar-body.drag:hover {
+            background-color: var(--bb-sidebar-body-drag-hover-bg);
+        }
+
 ::deep .wwads-cn {
    --ad-min-height: 120px;
    --ad-margin-bottom: 1rem;
@ -74,11 +97,15 @@
        position: sticky;
        top: 0;
        border-right: solid 1px var(--bs-border-color);
-        margin-top: calc(var(--bs-header-height)*-1);
+        margin-top: calc(var(--bs-header-height) * -1);
    }

    .main {
        height: 100%;
        width: calc(100% - var(--bb-sidebar-width));
    }
+
+    .sidebar-bar {
+        display: block;
+    }
 }
--- a/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor
+++ b/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor
@ -17,7 +17,4 @@
    <div class="scroll">
        <Menu Items="@Menus" IsVertical="true" IsAccordion="@IsAccordion" IsExpandAll="@IsExpandAll" OnClick="@OnClickMenu" />
    </div>
-    <div class="sidebar-bar">
-        <div class="sidebar-body"></div>
-    </div>
 </nav>
--- a/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.css
@ -25,32 +25,6 @@
    position: relative;
 }

-.sidebar-bar {
-    width: 1px;
-    position: absolute;
-    top: 0;
-    right: -1px;
-    bottom: 0;
-    background-color: var(--bs-border-color);
-}
-
-    .sidebar-bar .sidebar-body {
-        position: absolute;
-        inset: 0px -2px;
-        cursor: col-resize;
-        background-color: transparent;
-        border-radius: 4px;
-    }
-
-        .sidebar-bar .sidebar-body:hover {
-            background-color: rgba(175, 184, 193, 0.2);
-        }
-
-        .sidebar-bar .sidebar-body.drag,
-        .sidebar-bar .sidebar-body.drag:hover {
-            background-color: rgb(9, 105, 218);
-        }
-
 ::deep .badge-menu {
    background-color: var(--bb-primary-color);
 }
--- a/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.css
@ -1,9 +1,9 @@
 .navbar {
-    background-color: #8548ff;
+    background-color: var(--bb-sidebar-navbar-bg);
 }

 .navbar-toggler {
-    background-color: var(--bs-indigo);
+    background-color: var(--bb-sidebar-navbar-bar-bg);
 }

 ::deep .arrow {
--- a/src/BootstrapBlazor.Server/wwwroot/css/devui.css
+++ b/src/BootstrapBlazor.Server/wwwroot/css/devui.css
@ -1,37 +1,6 @@
 :root {
-    --bs-border-radius: 4px;
-}
-
-.btn {
-    --bs-btn-padding-x: 16px;
-    --bs-btn-padding-y: 4px;
-}
-
-.btn-xs, .btn-group-xs > .btn {
-    --bs-btn-padding-x: 8px;
-    --bs-btn-padding-y: 0;
-}
-
-.btn-group-sm > .btn, .btn-sm {
-    --bs-btn-padding-x: 12px;
-    --bs-btn-padding-y: 2px;
-}
-
-.btn-primary {
-    --bs-primary: #5e7ce0;
-    --bs-btn-hover-bg: #7693f5;
-    --bs-btn-active-bg: #344899;
-    --bs-btn-border-color: transparent;
-}
-
-.btn-danger {
-    --bs-danger: #c7000b;
-    --bs-btn-hover-bg: #d64a52;
-    --bs-btn-active-bg: #b12220;
-    --bs-btn-border-color: transparent;
-}
-
-.table-container {
-    --bb-table-td-padding-x: .5rem;
-    --bb-table-td-padding-y: .25rem;
+    /*    --bs-border-radius: 5px;
+    --bb-font-size: .75rem;
+    --bs-nav-link-font-size: .875rem;
+*/
 }
--- a/src/BootstrapBlazor.Server/wwwroot/css/site.css
+++ b/src/BootstrapBlazor.Server/wwwroot/css/site.css
@ -27,6 +27,13 @@
    --bb-header-dropdown-border-color: rgba(255,255,255,.5);
    --bb-header-dropdown-border-hover-color: rgba(255,255,255,.8);
    --bb-header-dropdown-color: #fff;
+    --bb-header-font-size: 1rem;
+    --bb-footer-body-bg: #404850;
+    --bb-footer-body-color: #fff;
+    --bb-footer-padding: 10px 8px;
+    --bb-main-pading: 1rem;
+    --bb-sidebar-body-hover-bg: rgba(175, 184, 193, 0.2);
+    --bb-sidebar-body-drag-hover-bg: rgb(9, 105, 218);
 }

 .navbar {
--- a/src/BootstrapBlazor/Services/ITableExport.cs
+++ b/src/BootstrapBlazor/Services/ITableExport.cs
@ -17,6 +17,15 @@ public interface ITableExport
    /// <param name="fileName">文件名 默认 null ExportData_{DateTime.Now:yyyyMMddHHmmss}.xlsx</param>
    Task<bool> ExportAsync<TModel>(IEnumerable<TModel> items, IEnumerable<ITableColumn>? cols, string? fileName = null);

+    /// <summary>
+    /// 导出 方法
+    /// </summary>
+    /// <param name="items">导出数据集合</param>
+    /// <param name="cols">当前可见列数据集合 默认 null 导出全部列</param>
+    /// <param name="options">导出配置实例</param>
+    /// <param name="fileName">文件名 默认 null ExportData_{DateTime.Now:yyyyMMddHHmmss}.xlsx</param>
+    Task<bool> ExportAsync<TModel>(IEnumerable<TModel> items, IEnumerable<ITableColumn>? cols, TableExportOptions options, string? fileName = null) => ExportAsync(items, cols, fileName);
+
    /// <summary>
    /// 导出 Excel 方法
    /// </summary>
@ -32,7 +41,7 @@ public interface ITableExport
    /// <param name="cols">当前可见列数据集合 默认 null 导出全部列</param>
    /// <param name="options">导出配置实例</param>
    /// <param name="fileName">文件名 默认 null ExportData_{DateTime.Now:yyyyMMddHHmmss}.xlsx</param>
-    Task<bool> ExportExcelAsync<TModel>(IEnumerable<TModel> items, IEnumerable<ITableColumn>? cols, TableExportOptions options, string? fileName = null) => Task.FromResult(false);
+    Task<bool> ExportExcelAsync<TModel>(IEnumerable<TModel> items, IEnumerable<ITableColumn>? cols, TableExportOptions options, string? fileName = null) => ExportExcelAsync(items, cols, fileName);

    /// <summary>
    /// 导出 Csv 方法
@ -49,7 +58,7 @@ public interface ITableExport
    /// <param name="cols">当前可见列数据集合 默认 null 导出全部列</param>
    /// <param name="options">导出配置实例</param>
    /// <param name="fileName">文件名 默认 null ExportData_{DateTime.Now:yyyyMMddHHmmss}.xlsx</param>
-    Task<bool> ExportCsvAsync<TModel>(IEnumerable<TModel> items, IEnumerable<ITableColumn>? cols, TableExportOptions options, string? fileName = null) => Task.FromResult(false);
+    Task<bool> ExportCsvAsync<TModel>(IEnumerable<TModel> items, IEnumerable<ITableColumn>? cols, TableExportOptions options, string? fileName = null) => ExportCsvAsync(items, cols, fileName);

    /// <summary>
    /// 导出 Pdf 方法
@ -66,5 +75,5 @@ public interface ITableExport
    /// <param name="cols">当前可见列数据集合 默认 null 导出全部列</param>
    /// <param name="options">导出配置实例</param>
    /// <param name="fileName">文件名 默认 null ExportData_{DateTime.Now:yyyyMMddHHmmss}.xlsx</param>
-    Task<bool> ExportPdfAsync<TModel>(IEnumerable<TModel> items, IEnumerable<ITableColumn>? cols, TableExportOptions options, string? fileName = null) => Task.FromResult(false);
+    Task<bool> ExportPdfAsync<TModel>(IEnumerable<TModel> items, IEnumerable<ITableColumn>? cols, TableExportOptions options, string? fileName = null) => ExportPdfAsync(items, cols, fileName);
 }
--- a/test/UnitTest/Components/TableExportTest.cs
+++ b/test/UnitTest/Components/TableExportTest.cs
@ -0,0 +1,40 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace UnitTest.Components;
+public class TableExportTest
+{
+    [Fact]
+    public async Task Export_Ok()
+    {
+        ITableExport exporter = new MockTableExport();
+        IEnumerable<Foo> items = Enumerable.Range(1, 10).Select(i => new Foo { Id = i, Name = $"Name {i}" });
+        IEnumerable<ITableColumn> cols = new ITableColumn[]
+        {
+            new TableColumn<Foo, string>()
+        };
+        var actual = await exporter.ExportAsync(items, cols, new TableExportOptions(), null);
+        Assert.True(actual);
+
+        actual = await exporter.ExportExcelAsync(items, cols, new TableExportOptions(), null);
+        Assert.True(actual);
+
+        actual = await exporter.ExportCsvAsync(items, cols, new TableExportOptions(), null);
+        Assert.True(actual);
+
+        actual = await exporter.ExportPdfAsync(items, cols, new TableExportOptions(), null);
+        Assert.True(actual);
+    }
+
+    class MockTableExport : ITableExport
+    {
+        public Task<bool> ExportAsync<TModel>(IEnumerable<TModel> items, IEnumerable<ITableColumn>? cols, string? fileName = null) => Task.FromResult(true);
+
+        public Task<bool> ExportCsvAsync<TModel>(IEnumerable<TModel> items, IEnumerable<ITableColumn>? cols, string? fileName = null) => Task.FromResult(true);
+
+        public Task<bool> ExportExcelAsync<TModel>(IEnumerable<TModel> items, IEnumerable<ITableColumn>? cols, string? fileName = null) => Task.FromResult(true);
+
+        public Task<bool> ExportPdfAsync<TModel>(IEnumerable<TModel> items, IEnumerable<ITableColumn>? cols, string? fileName = null) => Task.FromResult(true);
+    }
+}