feat(Compact): add DevUI compact style file (#4919)

* refactor: 改造主题选择器

* refactor: 更新样式

* chore: 更新依赖

* style: 样式参数变量化

* style: 更新样式

* style: 更新组件样式变量

* style: 调整组件样式变量

* chore: 更新依赖包

* style: 更新 Display 组件样式

* style: 调整组件样式

* style: 增加日历组件样式

* style: 更新多选下拉框样式

* style: 更新 radio-list 样式

* refactor: 重构脚本

* chore: 更新配置文件

Co-Authored-By: YSMC <[email protected]>

---------

Co-authored-by: YSMC <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css

@@ -85,8 +85,8 @@
     font-weight: var(--bb-font-weight);
     color: var(--bs-body-color);
     font-size: var(--bb-sub-font-size);
-    margin-top: 1rem;
-    margin-bottom: .5rem;
+    margin-top: var(--bb-demo-block-margin-top);
+    margin-bottom: var(--bb-demo-block-margin-bottom);
 }
 
 ::deep .table-cell .progress {

src/BootstrapBlazor.Server/Components/Components/Pre.razor.css

@@ -8,7 +8,7 @@
 }
 
     .pre-code:not(:last-child) {
-        margin-bottom: 1rem;
+        margin-bottom: var(--bb-pre-margin-bottom);
     }
 
     .pre-code .loading {
@@ -30,7 +30,7 @@
     }
 
 code {
-    line-height: 1.8;
+    line-height: var(--bb-code-line-height);
     font-size: 0.75rem;
     padding: 10px 65px 10px 16px;
     display: block;

src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor

@@ -2,6 +2,13 @@
 @attribute [JSModuleAutoLoader("Components/ThemeChooser.razor.js")]
 @inject IOptionsMonitor<WebsiteOptions> WebsiteOption
 
+<HeadContent>
+    @foreach (var css in _currentTheme)
+    {
+        <link rel="stylesheet" href="@css" />
+    }
+</HeadContent>
+
 <div id="@Id" class="theme">
     <PulseButton class="btn-fade btn-theme" Color="Color.None" ImageUrl="@WebsiteOption.CurrentValue.GetAssetUrl("images/m.svg")" TooltipText="@Title" TooltipPlacement="Placement.Left" />
     <div class="theme-list">

src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.cs

@@ -23,6 +23,8 @@ public partial class ThemeChooser
     [NotNull]
     private IStringLocalizer<ThemeChooser>? Localizer { get; set; }
 
+    private readonly List<string> _currentTheme = [];
+
     /// <summary>
     /// OnInitialized 方法
     /// </summary>
@@ -36,13 +38,14 @@ protected override void OnInitialized()
         WebsiteOption.CurrentValue.CurrentTheme = "bootstrap";
     }
 
-    private async Task OnClickTheme(SelectedItem item)
+    private void OnClickTheme(SelectedItem item)
     {
+        _currentTheme.Clear();
         WebsiteOption.CurrentValue.CurrentTheme = item.Value;
         var theme = WebsiteOption.CurrentValue.Themes.Find(i => i.Key == item.Value);
-        if (theme != null)
+        if (theme is { Files: not null })
         {
-            await InvokeVoidAsync("updateTheme", [theme.Files]);
+            _currentTheme.AddRange(theme.Files);
         }
     }
 

src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css

@@ -64,5 +64,5 @@
 }
 
     ::deep .btn-theme img {
-        width: 20px;
+        width: 100%;
     }

src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.js

@@ -9,41 +9,18 @@ export function init(id) {
     }
     const themeList = el.querySelector('.theme-list')
 
-    const chooser = { el, themeList }
-    Data.set(id, chooser);
+    Data.set(id, { el });
 
     EventHandler.on(el, 'click', () => {
         themeList.classList.toggle('is-open')
     })
 }
 
-export function updateTheme(args) {
-    const links = document.querySelectorAll('link')
-    if (links) {
-        const link = [].slice.call(links).filter(function (item) {
-            const href = item.getAttribute('href')
-            return href.indexOf('css/site.css') > -1
-        });
-        const original = link[0];
-        while (original.nextElementSibling && original.nextElementSibling.nodeName === 'LINK') {
-            original.nextElementSibling.remove()
-        }
-
-        args.forEach(function (c) {
-            const link = document.createElement('link')
-            link.setAttribute('rel', 'stylesheet')
-            link.setAttribute('href', c)
-
-            insertAfter(original, link)
-        });
-    }
-}
-
 export function dispose(id) {
-    const chooser = Data.get(id)
+    const theme = Data.get(id)
     Data.remove(id)
 
-    if (chooser) {
-        EventHandler.off(chooser.el, 'click')
+    if (theme) {
+        EventHandler.off(theme.el, 'click')
     }
 }

src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css

@@ -1,6 +1,4 @@
 ::deep .btn-fade {
-    --bb-button-circle-width: 40px;
-    --bb-button-circle-height: 40px;
     opacity: 0.7;
     box-shadow: var(--bb-layout-button-shadow);
     transition: opacity .3s linear;

src/BootstrapBlazor.Server/appsettings.json

@@ -104,7 +104,7 @@
       },
       {
         "key": "devui",
-        "name": "DevUI (制作中)",
+        "name": "DevUI",
         "files": [
           "./css/devui.css"
         ]

src/BootstrapBlazor.Server/wwwroot/css/devui.css

@@ -1,6 +1,158 @@
 :root {
-    /*    --bs-border-radius: 5px;
+    --bs-border-radius: 4px;
     --bb-font-size: .75rem;
-    --bs-nav-link-font-size: .875rem;
-*/
+    --bs-nav-link-font-size: .75rem;
+    --bb-sub-font-size: .75rem;
+    --bb-mb-3: .25rem;
+    --bb-space: .25rem;
+    --bb-row-control-padding: 4px;
+    --bb-header-font-size: 0.875rem;
+    --bb-padding: 0.1875rem 0.375rem;
+    --bb-title-font-size: 0.875rem;
+    --bb-pre-margin-bottom: .5rem;
+    --bb-row-control-padding: 3px;
+    --bb-height: 26px;
+}
+
+p {
+    margin-bottom: var(--bb-mb-3);
+}
+
+code {
+    --bb-code-line-height: 1.5;
+}
+
+pre code.hljs {
+    padding: var(--bb-space);
+}
+
+.navbar-header {
+    --bs-nav-link-font-size: var(--bb-header-font-size);
+    --bb-font-size: var(--bb-header-font-size);
+}
+
+    .navbar-header .bb-g-search {
+        --bb-global-search-padding: var(--bb-padding);
+    }
+
+.mb-3 {
+    margin-bottom: var(--bb-mb-3) !important;
+}
+
+.btn {
+    font-size: var(--bb-font-size);
+    --bs-btn-padding-x: 0.5rem;
+    --bs-btn-padding-y: 0.1875rem;
+    --bs-btn-xs-padding-x: 0.3125rem;
+    --bs-btn-xs-padding-y: 0.0625rem;
+    --bs-btn-xs-font-size: 0.75rem;
+    --bs-btn-xl-padding-x: 1.25rem;
+    --bs-btn-xl-padding-y: 0.8rem;
+    --bs-btn-xl-font-size: 1.25rem;
+    --bs-btn-xxl-padding-x: 1.25rem;
+    --bs-btn-xxl-padding-y: 0.8rem;
+    --bs-btn-xxl-font-size: 1.5rem;
+}
+
+.btn-circle {
+    --bb-button-circle-width: 35px;
+    --bb-button-circle-height: 35px;
+}
+
+.form-check {
+    --bb-checkbox-label-padding-y: 3px;
+}
+
+.form-control-color {
+    height: 26px;
+}
+
+.card {
+    --bs-card-spacer-x: var(--bb-space);
+    --bs-card-spacer-y: var(--bb-space);
+    --bs-card-cap-padding-x: var(--bb-space);
+}
+
+.col-form-label {
+    padding: 4px 2px;
+}
+
+.alert {
+    --bs-alert-margin-bottom: var(--bb-mb-3);
+}
+
+.datetime-picker {
+    --bb-dt-picker-input-padding: 3px 33px 3px 12px;
+    --bb-dt-picker-input-icon-padding: 3px 33px
+}
+
+.demo-block {
+    --bb-demo-block-margin-top: .5rem;
+    --bb-demo-block-margin-bottom: .25rem;
+}
+
+.my-3 {
+    margin: .5rem !important;
+}
+
+.g-3, .gy-3 {
+    --bs-gutter-y: .25rem;
+}
+
+.g-3, .gx-3 {
+    --bs-gutter-x: .5rem;
+}
+
+.groupbox {
+    --bb-groupbox-padding: 1rem .5rem .5rem .5rem
+}
+
+.form-control {
+    --bb-form-control-padding: var(--bb-padding);
+}
+
+.form-label {
+    margin-bottom: .25rem;
+}
+
+.input-group-text {
+    padding: var(--bb-padding);
+}
+
+.input-group > .switch {
+    --bb-switch-padding: 2px .5rem;
+}
+
+.popover {
+    --bs-popover-font-size: var(--bb-font-size);
+}
+
+.select {
+    --bb-select-padding: var(--bb-padding);
+}
+
+.switch {
+    --bb-switch-padding: 3px 0;
+}
+
+.multiselect {
+    --bb-multi-select-item-margin-x: 1px;
+    --bb-multi-select-item-margin-y: 1px;
+    --bb-multi-select-item-padding: 1px 4px;
+    --bb-multi-select-min-height: 26px;
+    --bb-multi-select-max-height: 26px;
+}
+
+.radio-list {
+    --bb-radio-item-padding: 2px 0.75rem;
+}
+
+.table-container {
+    --bb-table-td-padding-x: .25rem;
+    --bb-table-td-padding-y: .25rem;
+}
+
+.tabs {
+    --bb-tabs-item-height: 29px;
+    --bb-tabs-body-padding: .5rem;
 }

src/BootstrapBlazor.Server/wwwroot/css/site.css

@@ -37,6 +37,8 @@
     --bb-sidebar-body-hover-bg: rgba(175, 184, 193, 0.2);
     --bb-sidebar-body-drag-hover-bg: rgb(9, 105, 218);
     --bb-code-bg: #e9ecef;
+    --bb-mb-3: 1rem;
+    --bb-pre-margin-bottom: 1rem;
     --bb-header-select-width: 230px;
     --bb-header-search-margin-bottom: .5rem;
 }
@@ -56,7 +58,7 @@ html .search-dialog-mask {
 }
 
 h3, h4, h5 {
-    margin-bottom: 1rem;
+    margin-bottom: var(--bb-mb-3);
 }
 
 #blazor-error-ui {
@@ -224,11 +226,11 @@ code {
 
 .code-label + img,
 .pre-code + img {
-    margin-bottom: 1rem;
+    margin-bottom: var(--bb-mb-3);
 }
 
 .code-quest {
-    margin-bottom: 1rem;
+    margin-bottom: var(--bb-mb-3);
     font-weight: bold;
 }
 
@@ -287,11 +289,11 @@ code {
 }
 
 .card-body > section:not(:first-child) {
-    margin-top: 1rem;
+    margin-top: var(--bb-mb-3);
 }
 
 .card-body > section:not(:last-child) {
-    margin-bottom: 1rem;
+    margin-bottom: var(--bb-mb-3);
 }
 
 .custom-clock {
@@ -301,6 +303,15 @@ code {
     width: 320px;
 }
 
+.demo-block {
+    --bb-demo-block-margin-top: 1rem;
+    --bb-demo-block-margin-bottom: .5rem;
+}
+
+code {
+    --bb-code-line-height: 1.6;
+}
+
 @media (min-width: 768px) {
     :root {
         --bs-header-height: 50px;