didong
/
owl-admin


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
							@php
    use Knuckles\Scribe\Tools\WritingUtils as u;
@endphp

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{!! $metadata['title'] !!}</title>

    <link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="{!! $assetPathPrefix !!}css/theme-elements.style.css" media="screen">

    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/styles/docco.min.css">
    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/highlight.min.js"></script>
    <script>
        hljs.highlightAll();
    </script>
    <script type="module">
        import {
            CodeJar
        } from 'https://medv.io/codejar/codejar.js'
        window.CodeJar = CodeJar;
    </script>

    @if ($tryItOut['enabled'] ?? true)
        <script>
            var tryItOutBaseUrl = "{{ $tryItOut['base_url'] ?? config('app.url') }}";
            var useCsrf = Boolean({{ $tryItOut['use_csrf'] ?? null }});
            var csrfUrl = "{{ $tryItOut['csrf_url'] ?? null }}";
        </script>
        <script src="{{ u::getVersionedAsset($assetPathPrefix . 'js/tryitout.js') }}"></script>
        <style>
            .code-editor,
            .resp-content {
                color: whitesmoke;
                background-color: transparent;
            }

            /*
             Problem: we want syntax highlighting for the Try It Out JSON body code editor
             However, the Try It Out area uses a dark background, while request and response samples
             (which are already highlighted) use a light background. HighlightJS can only use one theme per document.
             Our options:
             1. Change the bg of one. => No, it looks out of place on the page.
             2. Use the same highlighting for both. => Nope, one would be unreadable.
             3. Copy styles for a dark-bg h1js theme and prefix them for the CodeEditor, which is what we're doing.
             Since it's only JSON, we only need a few styles anyway.
             Styles taken from the Nord theme: https://github.com/highlightjs/highlight.js/blob/3997c9b430a568d5ad46d96693b90a74fc01ea7f/src/styles/nord.css#L2
             */
            .code-editor>.hljs-attr {
                color: #8FBCBB;
            }

            .code-editor>.hljs-string {
                color: #A3BE8C;
            }

            .code-editor>.hljs-number {
                color: #B48EAD;
            }

            .code-editor>.hljs-literal {
                color: #81A1C1;
            }
        </style>

        <script>
            function tryItOut(btnElement) {
                btnElement.disabled = true;

                let endpointId = btnElement.dataset.endpoint;

                let errorPanel = document.querySelector(`.tryItOut-error[data-endpoint=${endpointId}]`);
                errorPanel.hidden = true;
                let responsePanel = document.querySelector(`.tryItOut-response[data-endpoint=${endpointId}]`);
                responsePanel.hidden = true;

                let form = btnElement.form;
                let {
                    method,
                    path,
                    hasjsonbody: hasJsonBody
                } = form.dataset;
                let body = {};
                if (hasJsonBody === "1") {
                    body = form.querySelector('.code-editor').textContent;
                } else if (form.dataset.hasfiles === "1") {
                    body = new FormData();
                    form.querySelectorAll('input[data-component=body]')
                        .forEach(el => {
                            if (el.type === 'file') {
                                if (el.files[0]) body.append(el.name, el.files[0])
                            } else body.append(el.name, el.value);
                        });
                } else {
                    form.querySelectorAll('input[data-component=body]').forEach(el => {
                        _.set(body, el.name, el.value);
                    });
                }

                const urlParameters = form.querySelectorAll('input[data-component=url]');
                urlParameters.forEach(el => (path = path.replace(new RegExp(`\\{${el.name}\\??}`), el.value)));

                const headers = Object.fromEntries(Array.from(form.querySelectorAll('input[data-component=header]'))
                    .map(el => [el.name, (el.dataset.prefix || '') + el.value]));

                const query = {}
                form.querySelectorAll('input[data-component=query]').forEach(el => {
                    _.set(query, el.name, el.value);
                });

                let preflightPromise = Promise.resolve();
                if (window.useCsrf && window.csrfUrl) {
                    preflightPromise = makeAPICall('GET', window.csrfUrl).then(() => {
                        headers['X-XSRF-TOKEN'] = getCookie('XSRF-TOKEN');
                    });
                }

                // content type has to be unset otherwise file upload won't work
                if (form.dataset.hasfiles === "1") {
                    delete headers['Content-Type'];
                }

                return preflightPromise
                    .then(() => makeAPICall(method, path, body, query, headers, endpointId))
                    .catch(err => {
                        console.error('API调用失败:', err);
                        errorPanel.hidden = false;
                        errorPanel.querySelector('.error-message').textContent =
                            `请求失败: ${err.message}\n请确保服务器正在运行且配置正确`;
                    })
                    .finally(() => {
                        btnElement.disabled = false;
                    });
            }

            window.addEventListener('DOMContentLoaded', () => {
                document.querySelectorAll('.tryItOut-btn').forEach(el => {
                    el.addEventListener('click', () => tryItOut(el));
                });
            })
        </script>
    @endif

</head>

<body>

    @if ($metadata['example_languages'])
        <script>
            function switchExampleLanguage(lang) {
                document.querySelectorAll(`.example-request`).forEach(el => el.style.display = 'none');
                document.querySelectorAll(`.example-request-${lang}`).forEach(el => el.style.display = 'initial');
                document.querySelectorAll(`.example-request-lang-toggle`).forEach(el => el.value = lang);
            }
        </script>
    @endif

    <script>
        function switchExampleResponse(endpointId, index) {
            document.querySelectorAll(`.example-response-${endpointId}`).forEach(el => el.style.display = 'none');
            document.querySelectorAll(`.example-response-${endpointId}-${index}`).forEach(el => el.style.display =
                'initial');
            document.querySelectorAll(`.example-response-${endpointId}-toggle`).forEach(el => el.value = index);
        }


        /*
         * Requirement: a div with class `expansion-chevrons`
         *   (or `expansion-chevrons-solid` to use the solid version).
         * Also add the `expanded` class if your div is expanded by default.
         */
        function toggleExpansionChevrons(evt) {
            let elem = evt.currentTarget;

            let chevronsArea = elem.querySelector('.expansion-chevrons');
            const solid = chevronsArea.classList.contains('expansion-chevrons-solid');
            const newState = chevronsArea.classList.contains('expanded') ? 'expand' : 'expanded';
            if (newState === 'expanded') {
                const selector = solid ? '#expanded-chevron-solid' : '#expanded-chevron';
                const template = document.querySelector(selector);
                const chevron = template.content.cloneNode(true);
                chevronsArea.replaceChildren(chevron);
                chevronsArea.classList.add('expanded');
            } else {
                const selector = solid ? '#expand-chevron-solid' : '#expand-chevron';
                const template = document.querySelector(selector);
                const chevron = template.content.cloneNode(true);
                chevronsArea.replaceChildren(chevron);
                chevronsArea.classList.remove('expanded');
            }

        }

        /**
         * 1. Make sure the children are inside the parent element
         * 2. Add `expandable` class to the parent
         * 3. Add `children` class to the children.
         * 4. Wrap the default chevron SVG in a div with class `expansion-chevrons`
         *   (or `expansion-chevrons-solid` to use the solid version).
         *   Also add the `expanded` class if your div is expanded by default.
         */
        function toggleElementChildren(evt) {
            let elem = evt.currentTarget;
            let children = elem.querySelector(`.children`);
            if (!children) return;

            if (children.contains(event.target)) return;

            let oldState = children.style.display
            if (oldState === 'none') {
                children.style.removeProperty('display');
                toggleExpansionChevrons(evt);
            } else {
                children.style.display = 'none';
                toggleExpansionChevrons(evt);
            }

            evt.stopPropagation();
        }

        function highlightSidebarItem(evt = null) {
            if (evt && evt.oldURL) {
                let oldHash = new URL(evt.oldURL).hash.slice(1);
                if (oldHash) {
                    let previousItem = window['sidebar'].querySelector(`#toc-item-${oldHash}`);
                    previousItem.classList.remove('sl-bg-primary-tint');
                    previousItem.classList.add('sl-bg-canvas-100');
                }
            }

            let newHash = location.hash.slice(1);
            if (newHash) {
                let item = window['sidebar'].querySelector(`#toc-item-${newHash}`);
                item.classList.remove('sl-bg-canvas-100');
                item.classList.add('sl-bg-primary-tint');
            }
        }

        addEventListener('DOMContentLoaded', () => {
            highlightSidebarItem();

            document.querySelectorAll('.code-editor').forEach(elem => CodeJar(elem, (editor) => {
                // highlight.js does not trim old tags,
                // which means highlighting doesn't update on type (only on paste)
                // See https://github.com/antonmedv/codejar/issues/18
                editor.textContent = editor.textContent
                return hljs.highlightElement(editor)
            }));

            document.querySelectorAll('.expandable').forEach(el => {
                el.addEventListener('click', toggleElementChildren);
            });

            document.querySelectorAll('details').forEach(el => {
                el.addEventListener('toggle', toggleExpansionChevrons);
            });
        });

        addEventListener('hashchange', highlightSidebarItem);
    </script>

    <div class="sl-elements sl-antialiased sl-h-full sl-text-base sl-font-ui sl-text-body sl-flex sl-inset-0">

        @include('scribe::themes.elements.sidebar')

        <div class="sl-overflow-y-auto sl-flex-1 sl-w-full sl-px-16 sl-bg-canvas sl-py-16" style="max-width: 1500px;">

            <div class="sl-mb-10">
                <div class="sl-mb-4">
                    <h1 class="sl-text-5xl sl-leading-tight sl-font-prose sl-font-semibold sl-text-heading">
                        {!! $metadata['title'] !!}
                    </h1>
                    @if ($metadata['postman_collection_url'])
                        <a title="Download Postman collection" class="sl-mx-1" href="{!! $metadata['postman_collection_url'] !!}"
                            target="_blank">
                            <small>Postman collection →</small>
                        </a>
                    @endif
                    @if ($metadata['openapi_spec_url'])
                        <a title="Download OpenAPI spec" class="sl-mx-1" href="{!! $metadata['openapi_spec_url'] !!}" target="_blank">
                            <small>OpenAPI spec →</small>
                        </a>
                    @endif
                </div>

                <div class="sl-prose sl-markdown-viewer sl-my-4">
                    {!! $intro !!}

                    {!! $auth !!}
                </div>
            </div>

            @include('scribe::themes.elements.groups')

            <div class="sl-prose sl-markdown-viewer sl-my-5">
                {!! $append !!}
            </div>
        </div>

    </div>

    <template id="expand-chevron">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right"
            class="svg-inline--fa fa-chevron-right fa-fw sl-icon sl-text-muted" xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 320 512">
            <path fill="currentColor"
                d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z">
            </path>
        </svg>
    </template>

    <template id="expanded-chevron">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down"
            class="svg-inline--fa fa-chevron-down fa-fw sl-icon sl-text-muted" xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 448 512">
            <path fill="currentColor"
                d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z">
            </path>
        </svg>
    </template>

    <template id="expand-chevron-solid">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right"
            class="svg-inline--fa fa-caret-right fa-fw sl-icon" role="img" xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 256 512">
            <path fill="currentColor"
                d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z">
            </path>
        </svg>
    </template>

    <template id="expanded-chevron-solid">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down"
            class="svg-inline--fa fa-caret-down fa-fw sl-icon" role="img" xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 320 512">
            <path fill="currentColor"
                d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z">
            </path>
        </svg>
    </template>
</body>

</html>