app.vue

<template>
  <div class="flex flex-col lg:h-screen">
    <input type="checkbox" id="contact-me-modal" class="modal-toggle" />
    <div class="modal modal-bottom sm:modal-middle" :class="{ 'modal-open': modal }">
      <div class="modal-box w-11/12 max-w-5xl min-w-fit">
        <h3 class="font-bold text-lg">联系我</h3>
        <Contact />
      </div>
    </div>
    <!-- Navbar -->
    <div class="navbar w-screen justify-between bg-base-100">
      <div class="navbar-start">
        <div class="dropdown lg:hidden">
          <label tabindex="0" class="btn btn-square btn-ghost">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
              class="inline-block w-6 h-6 stroke-current">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </label>
          <ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
            <li tabindex="0">
              <NuxtLink to="/RealmDetail?realm=A">
                <a @click="activeRealm = 'A'">
                  <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" class="w-6 h-6 mr-1 stroke-[#2C3E50]">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802" />
                    </svg>
                    <div>语言类</div>
                  </div>
                </a>
              </NuxtLink>
            </li>
            <li tabindex="0">
              <NuxtLink to="/RealmDetail?realm=B">
                <a @click="activeRealm = 'B'">
                  <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" class="w-6 h-6 mr-1 stroke-[#2C3E50]">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z" />
                    </svg>
                    <div>工程类</div>
                  </div>
                </a>
              </NuxtLink>
            </li>
            <li tabindex="0">
              <NuxtLink to="/RealmDetail?realm=C">
                <a @click="activeRealm = 'C'">
                  <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" class="w-6 h-6 mr-1 stroke-[#2C3E50]">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
                    </svg>
                    <div>咨询与服务类</div>
                  </div>
                </a>
              </NuxtLink>
            </li>
            <li tabindex="0">
              <NuxtLink to="/About">
                <a>
                  <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" class="w-6 h-6 mr-1 stroke-[#2C3E50]">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                    </svg>
                    <div>关于Alive</div>
                  </div>
                </a>
              </NuxtLink>
            </li>
            <li tabindex="0">
              <NuxtLink to="/PageList">
                <a>
                  <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" class="w-6 h-6 mr-1 stroke-[#2C3E50]">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                    </svg>
                    <div>专题列表</div>
                  </div>
                </a>
              </NuxtLink>
            </li>
            <li tabindex="0">
              <NuxtLink to="/PostList">
                <a>
                  <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" class="w-6 h-6 mr-1 stroke-[#2C3E50]">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" />
                    </svg>
                    <div>文章列表</div>
                  </div>
                </a>
              </NuxtLink>
            </li>
          </ul>
        </div>
        <NuxtLink to="/">
          <a class="btn btn-ghost normal-case text-lg lg:text-xl whitespace-nowrap">
            Alive的工作台
          </a>
        </NuxtLink>
      </div>
      <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1">
          <li tabindex="0">
            <NuxtLink to="/RealmDetail?realm=A">
              <a @click="activeRealm = 'A'">语言类</a>
            </NuxtLink>
          </li>
          <li tabindex="0">
            <NuxtLink to="/RealmDetail?realm=B">
              <a @click="activeRealm = 'B'">工程类</a>
            </NuxtLink>
          </li>
          <li tabindex="0">
            <NuxtLink to="/RealmDetail?realm=C">
              <a @click="activeRealm = 'C'">咨询与服务类</a>
            </NuxtLink>
          </li>
          <!-- <li tabindex="0">
              <a>
                合作衍生类
              </a>
            </li> -->
          <li tabindex="0">
            <NuxtLink to="/About">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
              </svg>
            </NuxtLink>
            <NuxtLink to="/PageList">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
              </svg>
            </NuxtLink>
            <NuxtLink to="/PostList">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" />
              </svg>
            </NuxtLink>
          </li>
        </ul>
      </div>
      <div class="navbar-end">
        <label tabindex="0" class="hidden swap swap-rotate btn btn-ghost rounded-btn">
          <!-- ToDo: Hidden here for the dark mode switch to be implemented: https://color-mode.nuxtjs.org/-->
          <!-- this hidden checkbox controls the state -->
          <input type="checkbox" />
          <!-- sun icon -->
          <svg class="swap-on fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path
              d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
          </svg>
          <!-- moon icon -->
          <svg class="swap-off fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path
              d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
          </svg>
        </label>
        <div class="hidden dropdown dropdown-end">
          <!-- ToDo: Hidden here for the dual lingual feature to be implemented -->
          <label tabindex="0" class="btn btn-ghost rounded-btn">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802" />
            </svg>
          </label>
          <ul tabindex="0" class="menu dropdown-content p-2 shadow bg-base-100 rounded-box w-30 mt-4">
            <li><a @click="locale = 'cn'">中文</a></li>
            <li><a @click="locale = 'en'">English</a></li>
          </ul>
        </div>
        <label @click="modal = true" class="btn btn-primary"> 联系我</label>
      </div>
    </div>
    <!-- Page content here -->
    <div class="items-center h-[100%] overflow-y-auto" style="scrollbar-width: thin;">
      <NuxtPage class="content-center" />
      <div class="flex justify-center prose-sm bg-transparent mt-[20px] text-xs gap-x-5">
        <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2023007677号-1</a>
        <a  class='h-[16px]' target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030802000641">
          <img src="/image/gongan.png" style="float:left; height: 16px; margin: 0"/>
          粤公网安备44030802000641号
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
const locale = useLocale();
const route = useRoute();
const modal = useModal();
const activeRealm = useActiveRealm();

</script>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}

body {
  font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB",
    "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
}

.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
  quotes: none;
  font-style: normal;
}

.prose :where(a):not(:where([class~="not-prose"] *)) {
  text-decoration-line: underline;
  font-weight: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"] *)) a {
  font-weight: bold;
  text-decoration-line: none;
}
.prose :where(h3):not(:where([class~="not-prose"] *)) a {
  font-weight: bold;
  text-decoration-line: none;
}
.prose :where(h4):not(:where([class~="not-prose"] *)) a {
  font-weight: bold;
  text-decoration-line: none;
}

.prose :where(code):not(:where([class~="not-prose"] *)) {
  font-weight: 600;
  font-size:0.9em;
}



::-webkit-scrollbar {
  width: 3px;
  background-color: #F5F5F5;
}

/*定义滚动条轨道：内阴影+圆角*/
::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}

/*定义滑块：内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #555;
}
</style>