web-class-frontend/app/pages/base/index.vue

<script setup lang="ts">
  import resolveConfig from 'tailwindcss/resolveConfig';
  import tailwindConfig from '~/tailwind.config';
  import type { Config } from 'tailwindcss';
  import { useWindowSize } from '@vueuse/core';

  const theme = useThemeStore();
  const config = resolveConfig(tailwindConfig as Config);
  const { collapsed, manualCollapsed } = storeToRefs(useSystemStore());
  const lg = parseFloat(
    config.theme.screens.lg.substring(0, config.theme.screens.lg.length - 2),
  );
  const store = useUserStore();
  const modeName = ref('sunny');
  // watch()
  // computed(())
  watch(useWindowSize().width, (val) => {
    console.log(val);
    console.log(collapsed.value);
    console.log(manualCollapsed.value);
    setCollapsed(val);
  });
  function setCollapsed(val: number) {
    if ((val > lg && !collapsed.value) || (val < lg && collapsed.value)) {
      manualCollapsed.value = false;
      return;
    }

    if (val > lg && collapsed.value) {
      if (manualCollapsed.value) return;
      collapsed.value = false;
    } else if (val < lg && !collapsed.value) {
      if (manualCollapsed.value) return;
      collapsed.value = true;
    }
  }
  function changeCollapsed() {
    collapsed.value = !collapsed.value;
    manualCollapsed.value = true;
  }
  const { currentPage } = storeToRefs(useSystemStore());

  function changeMode() {
    const x = useColorMode();
    console.log(x.preference);
    console.log(x.value);
    if (x.preference === 'light') {
      x.preference = 'dark';
      modeName.value = 'moon';
    } else if (x.preference === 'dark') {
      x.preference = 'sepia';
      modeName.value = 'tea';
    } else {
      x.preference = 'light';
      modeName.value = 'sunny';
    }
  }
  function changeTheme() {
    console.log(theme.theme);
    if (theme.theme === 'default') {
      theme.setTheme('test');
    } else if (theme.theme === 'test') {
      theme.setTheme('self');
    } else if (theme.theme === 'self') {
      theme.setTheme('default');
    }
  }

  let lastPage = '';

  function toCalendar() {
    const router = useRouter();
    lastPage = currentPage.value;
    currentPage.value = 'calendar';
    router.push('/base/calendar');
  }

  function backToLastPage() {
    const router = useRouter();
    currentPage.value = lastPage;
    router.back();
  }

  function backToLogin() {
    useLoginStore().logout();
  }

  watch(currentPage, (val) => {
    const router = useRouter();
    router.push('/base/' + val);
  });

  onMounted(() => setCollapsed(useWindowSize().width.value));
  onMounted(async () => {
    await store.getUserInfo();
    await store.getAvatarURL();
  });
</script>

<template>
  <t-layout class="h-full">
    <t-header>
      <t-head-menu value="item1" height="120px">
        <span class="text-xl">李晨鑫 的 Web 实验</span>
        <template #operations>
          <a @click="changeMode">
            <t-icon class="t-menu__operations-icon" :name="modeName" />
          </a>
          <a @click="changeTheme">
            <t-icon class="t-menu__operations-icon" name="fill-color" />
          </a>
          <a v-if="currentPage != 'calendar'" @click="toCalendar">
            <t-icon class="t-menu__operations-icon" name="calendar" />
          </a>
          <a v-else @click="backToLastPage">
            <t-icon class="t-menu__operations-icon" name="rollback" />
          </a>
          <a @click="backToLogin">
            <t-icon class="t-menu__operations-icon" name="logout" />
          </a>
        </template>
      </t-head-menu>
    </t-header>
    <t-layout :class="{ collapsed: collapsed, 'non-collapsed': !collapsed }">
      <t-aside class="border-t border-gray-100 dark:border-gray-700">
        <t-menu
          v-model="currentPage"
          theme="light"
          value="dashboard"
          height="550px"
          :collapsed="collapsed"
        >
          <t-menu-item value="home">
            <template #icon>
              <t-icon name="home" />
            </template>
            首页
          </t-menu-item>
          <t-submenu value="resource" title="功能菜单">
            <template #icon>
              <t-icon name="server" />
            </template>
            <t-menu-item value="peopleManage">
              <span>用户管理</span>
            </t-menu-item>
            <t-menu-item value="articleManage">
              <span>文件管理</span>
            </t-menu-item>
          </t-submenu>
          <t-menu-item value="root">
            <template #icon>
              <t-icon name="root-list" />
            </template>
            导航三
          </t-menu-item>
          <t-menu-item value="control-platform">
            <template #icon>
              <t-icon name="control-platform" />
            </template>
            导航四
          </t-menu-item>
          <t-menu-item value="precise-monitor">
            <template #icon>
              <t-icon name="precise-monitor" />
            </template>
            导航五
          </t-menu-item>
          <t-menu-item value="mail">
            <template #icon>
              <t-icon name="mail" />
            </template>
            导航六
          </t-menu-item>
          <t-menu-item value="user-circle">
            <template #icon>
              <t-icon name="user-circle" />
            </template>
            导航七
          </t-menu-item>
          <t-menu-item value="play-circle">
            <template #icon>
              <t-icon name="play-circle" />
            </template>
            导航八
          </t-menu-item>
          <t-menu-item value="edit1">
            <template #icon>
              <t-icon name="edit-1" />
            </template>
            导航九
          </t-menu-item>
          <template #operations>
            <t-button
              class="t-demo-collapse-btn"
              variant="text"
              shape="square"
              @click="changeCollapsed"
            >
              <template #icon>
                <t-icon name="view-list" />
              </template>
            </t-button>
          </template>
        </t-menu>
      </t-aside>
      <t-layout>
        <t-content class="overflow-auto">
          <NuxtPage />
        </t-content>
        <t-footer class="m-auto">
          Copyright @ 2019-{{ new Date().getFullYear() }} Tencent. All Rights
          Reserved
        </t-footer>
      </t-layout>
    </t-layout>
  </t-layout>
</template>

<style scoped lang="less">
  .collapsed {
    :deep(.t-layout__sider) {
      @apply w-16;
    }
  }
  .non-collapsed {
    :deep(.t-layout__sider) {
      @apply w-60;
    }
  }
</style>