VberAdmin_V4/SourceCode/Src/VberAdmin.Web.Mvc/Views/Shared/Layout/_Help.cshtml

<button id="vb_help_toggle" class=" btn btn-sm bg-body btn-color-gray-700 btn-active-primary shadow-sm position-fixed px-5 fw-bolder z-index-2 top-50 mt-10 end-0 transform-90 fs-6 rounded-top-0" title="系统帮助" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-trigger="hover">
    <span id="vb_help_toggle_label">Help</span>
</button>
<div id="vb_help" class="bg-body drawer drawer-end" data-kt-drawer="true" data-kt-drawer-name="help" data-kt-drawer-activate="true" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'350px', 'lg': '475px'}" data-kt-drawer-direction="end" data-kt-drawer-toggle="#vb_help_toggle" data-kt-drawer-close="#vb_help_close">
	<div class="card shadow-none rounded-0 w-100">
		<div class="card-header" id="vb_help_header">
			<h3 class="card-title fw-bolder text-gray-700">系统帮助</h3>
			<div class="card-toolbar">
				<button type="button" class="btn btn-sm btn-icon btn-active-light-primary me-n5" id="vb_help_close">
					<!--begin::Svg Icon | path: icons/duotone/Navigation/Close.svg-->
					<span class="svg-icon svg-icon-2">
						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
							<g transform="translate(12.000000, 12.000000) rotate(-45.000000) translate(-12.000000, -12.000000) translate(4.000000, 4.000000)" fill="#000000">
								<rect fill="#000000" x="0" y="7" width="16" height="2" rx="1"></rect>
								<rect fill="#000000" opacity="0.5" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000)" x="0" y="7" width="16" height="2" rx="1"></rect>
							</g>
						</svg>
					</span>
				</button>
			</div>
		</div>
		
		<div class="card-body" id="vb_help_body">
			<div id="vb_help_scroll" class="scroll-y me-n5 pe-5" data-kt-scroll="true" data-kt-scroll-height="auto" data-kt-scroll-wrappers="#vb_help_body" data-kt-scroll-dependencies="#vb_help_header" data-kt-scroll-offset="5px">
				<div class="mb-0"  id="vb_help_body-container">
					
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(function() {
        var $bodyContainer = $('#vb_help_body-container');
        var helpDrawer = KTDrawer.getInstance(document.querySelector("#vb_help"));
        helpDrawer.on('kt.drawer.show', ()=> {
            if (!$('#vb_help').data("init")) {
                $.vbAjax4({
                    url: abp.appUrl + "Query/QueryHelpByPerm?id=@(ViewBag.ActiveMenu)",
                    success: function (res) {
                        formatter(res);
                        $('#vb_help').data("init", true);
                    }
                });
            }
        });
        function formatter(data) {
            if (data && data.length) {
                var i = 0;
                $bodyContainer.empty();
                data.forEach(function (h) {
                    i++;
                    let str = "",style=i%3==1?'primary':i%3==2?'warning':'success';
                    str += `<div class="rounded border d-flex flex-column flex-center mb-5">
                                <div class="alert bg-light-${style} d-flex flex-column w-100 m-0 p-5">
                                    <div class="d-flex align-items-center my-2 text-${style} fw-bolder fs-3"><span class="bullet bullet-vertical h-30px bg-${style}"></span><span class="ps-3">${i}.</span>${h.title}</div>
                                    <div class="help-content" data-id="${h.id}">
                                        <div class="w-100 h-100px  d-flex justify-content-center align-items-center fs-4 text-${style}">
                                        加载中... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>`;
                    $bodyContainer.append(str);
                });
                $bodyContainer.find('.help-content').each(function () {
                    let $this = $(this);
                    let id = $(this).data('id');
                    $.vbAjax4({
                        url: abp.appUrl + "Query/QueryHelpDto?id=" + id,
                        success: function(res) {
                            $this.hide().addClass("ps-4").html(res.content).fadeIn();
                        }
                    });
                });
            } else {
                $bodyContainer.html(`<div class="rounded  d-flex flex-column flex-center p-0" style="padding-top:50%!important;">
										<div class="alert border bg-light-danger d-flex flex-center flex-column w-100 m-0">
											<!--Svg Icon | path: icons/duotone/Code/Warning-2.svg-->
											<span class="svg-icon svg-icon-5tx svg-icon-danger mb-5">
												<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<path d="M11.1669899,4.49941818 L2.82535718,19.5143571 C2.557144,19.9971408 2.7310878,20.6059441 3.21387153,20.8741573 C3.36242953,20.9566895 3.52957021,21 3.69951446,21 L21.2169432,21 C21.7692279,21 22.2169432,20.5522847 22.2169432,20 C22.2169432,19.8159952 22.1661743,19.6355579 22.070225,19.47855 L12.894429,4.4636111 C12.6064401,3.99235656 11.9909517,3.84379039 11.5196972,4.13177928 C11.3723594,4.22181902 11.2508468,4.34847583 11.1669899,4.49941818 Z" fill="#000000" opacity="0.3"></path>
													<rect fill="#000000" x="11" y="9" width="2" height="7" rx="1"></rect>
													<rect fill="#000000" x="11" y="17" width="2" height="2" rx="1"></rect>
												</svg>
											</span>
											<div class="text-center">
												<h1 class="fw-bolder mb-5 text-danger">当前页面没有帮助信息!</h1>
											</div>
										</div>
									</div>`);
            }
        }
    })
</script>