koa3-demo/src/views/layouts/base.pug

mixin include()
  if block
        block

mixin css(url, extranl = false)
  if extranl || url.startsWith('http') || url.startsWith('//')
    link(rel="stylesheet" type="text/css" href=url)
  else
    link(rel="stylesheet", href=($config && $config.base || "") + url)

mixin js(url, extranl = false)
  if extranl || url.startsWith('http') || url.startsWith('//')
    script(type="text/javascript" src=url)
  else
    script(src=($config && $config.base || "") + url)

mixin link(href, name)
  //- attributes == {class: "btn"}
  a(href=href)&attributes(attributes)= name

doctype html
html(lang="zh-CN")
  head
    block head
    title #{site_title || $site && $site.site_title || ''}
    meta(name="description" content=site_description || $site && $site.site_description || '')
    meta(name="keywords" content=keywords || $site && $site.keywords || '')
    if $site && $site.site_favicon
      link(rel="shortcut icon", href=$site.site_favicon)
    meta(charset="utf-8")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    +css('reset.css')
    +js('lib/htmx.min.js')
    +js('https://cdn.tailwindcss.com')
    +css('https://unpkg.com/simplebar@latest/dist/simplebar.css', true)
    +css('simplebar-shim.css')
    +js('https://unpkg.com/simplebar@latest/dist/simplebar.min.js', true)
  //- body(style="--bg:url("+($site && $site.site_bg || '#fff')+")")
  //- body(style="--bg:url(./static/bg2.webp)")
  body
    noscript
      style.
        .simplebar-content-wrapper {
          scrollbar-width: auto;
          -ms-overflow-style: auto;
        }

        .simplebar-content-wrapper::-webkit-scrollbar,
        .simplebar-hide-scrollbar::-webkit-scrollbar {
          display: initial;
          width: initial;
          height: initial;
        }
    div(data-simplebar style="height: 100%")
      div(style="height: 100%; display: flex; flex-direction: column" id="aaaa")
        block content
        block scripts
      +js('lib/bg-change.js')
      script.
        const el = document.querySelector('.simplebar-content-wrapper')
        const scrollTop = sessionStorage.getItem('scrollTop-'+location.pathname)
        el.scrollTop = scrollTop
        el.addEventListener("scroll", function(e) {
          sessionStorage.setItem('scrollTop-'+location.pathname, e.target.scrollTop)
        })
        function getCookie(cname) {
          var name = cname + "=";
          var decodedCookie = decodeURIComponent(document.cookie);
          var ca = decodedCookie.split(';');
          for(var i = 0; i <ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') {
          c = c.substring(1);
          }
          if (c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
          }
          }
          return "";
        }
        let have = false
        const queryMsg = (new URLSearchParams(location.search)).get('msg')
        let msg = getCookie('toast')
        if(!msg) {
          msg = JSON.stringify({type:'success',message: queryMsg})
          have = !!queryMsg
        } else {
          have = true
        }
        if (have) {
            function showToast(message, type = 'info') {
            const containerId = 'toast-container';
            let container = document.getElementById(containerId);
            if (!container) {
              container = document.createElement('div');
              container.id = containerId;
              container.style.position = 'fixed';
              container.style.top = '24px';
              container.style.right = '24px';
              container.style.zIndex = '9999';
              container.style.display = 'flex';
              container.style.flexDirection = 'column';
              container.style.gap = '12px';
              document.body.appendChild(container);
            }

            const toast = document.createElement('div');
            toast.className = 'toast-message';
            toast.textContent = message;

            // Set style based on type
            let bg = '#409eff';
            if (type === 'error') bg = '#f56c6c';
            else if (type === 'warning') bg = '#e6a23c';
            else if (type === 'success') bg = '#67c23a';

            toast.style.background = bg;
            toast.style.color = '#fff';
            toast.style.padding = '14px 28px';
            toast.style.borderRadius = '6px';
            toast.style.boxShadow = '0 2px 8px rgba(0,0,0,0.12)';
            toast.style.fontSize = '1rem';
            toast.style.cursor = 'pointer';
            toast.style.transition = 'opacity 0.3s';
            toast.style.opacity = '1';

            let timer;
            const removeToast = () => {
              toast.style.opacity = '0';
              setTimeout(() => {
              if (toast.parentNode) toast.parentNode.removeChild(toast);
              }, 300);
            };

            const resetTimer = () => {
              clearTimeout(timer);
              timer = setTimeout(removeToast, 5000);
            };

            toast.addEventListener('mouseenter', resetTimer);
            toast.addEventListener('mouseleave', resetTimer);

            container.appendChild(toast);
            resetTimer();
            }

            try {
            const toastObj = JSON.parse(msg);
            showToast(toastObj.message, toastObj.type);
            } catch (e) {
            showToast(msg);
            }
        }