chore: update web layout

frontend/web/src/layout/components/appMain.vue

@@ -129,6 +129,6 @@ const transitionMain = defineComponent({
 }
 
 .main-content {
-  margin: 24px;
+  margin: 8px;
 }
 </style>

frontend/web/src/layout/components/headerDarkSwitch.vue

@@ -5,25 +5,50 @@ import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
 
 const { dataTheme, dataThemeChange } = useDataThemeChange();
+
+function handleThemeToggle() {
+  dataTheme.value = !dataTheme.value;
+  dataThemeChange();
+}
 </script>
 
 <template>
-  <span class="header-dark-switch navbar-bg-hover" title="切换暗黑模式">
+  <button
-    <el-switch
+    type="button"
-      v-model="dataTheme"
+    class="header-dark-switch navbar-bg-hover"
-      inline-prompt
+    title="切换暗黑模式"
-      :active-icon="dayIcon"
+    aria-label="切换暗黑模式"
-      :inactive-icon="darkIcon"
+    @click="handleThemeToggle"
-      @change="dataThemeChange"
+  >
+    <component
+      :is="dataTheme ? dayIcon : darkIcon"
+      class="header-dark-switch__icon"
     />
-  </span>
+  </button>
 </template>
 
 <style lang="scss" scoped>
 .header-dark-switch {
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 40px;
   height: 48px;
-  padding: 0 10px;
+  padding: 0;
+  color: var(--el-text-color-primary);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  outline: none;
+}
+
+.header-dark-switch__icon {
+  width: 16px;
+  height: 16px;
+  fill: currentcolor;
+}
+
+:global(html.dark) .header-dark-switch {
+  color: #fff;
 }
 </style>

frontend/web/src/layout/components/navbar.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Search from "./search/index.vue";
-import Notice from "./notice/index.vue";
 import mixNav from "./sidebar/mixNav.vue";
 import HeaderDarkSwitch from "./headerDarkSwitch.vue";
 import { useNav } from "@/layout/hooks/useNav";
@@ -41,7 +40,6 @@ const {
 
     <div v-if="layout === 'vertical'" class="vertical-header-right">
       <Search />
-      <Notice id="header-notice" />
       <HeaderDarkSwitch />
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover select-none">

frontend/web/src/layout/components/notice/data.ts

@@ -1,146 +0,0 @@
-export interface ListItem {
-  avatar: string;
-  title: string;
-  datetime: string;
-  type: string;
-  description: string;
-  status?: "" | "success" | "warning" | "info" | "danger";
-  extra?: string;
-}
-
-export interface TabItem {
-  key: string;
-  name: string;
-  list: ListItem[];
-}
-
-export const noticesData: TabItem[] = [
-  {
-    key: "1",
-    name: "通知",
-    list: [
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
-        title: "你收到了 12 份新周报",
-        datetime: "一年前",
-        description: "",
-        type: "1"
-      },
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
-        title: "你推荐的 前端高手 已通过第三轮面试",
-        datetime: "一年前",
-        description: "",
-        type: "1"
-      },
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
-        title: "这种模板可以区分多种通知类型",
-        datetime: "一年前",
-        description: "",
-        type: "1"
-      },
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
-        title:
-          "展示标题内容超过一行后的处理方式，如果内容超过1行将自动截断并支持tooltip显示完整标题。",
-        datetime: "一年前",
-        description: "",
-        type: "1"
-      },
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
-        title: "左侧图标用于区分不同的类型",
-        datetime: "一年前",
-        description: "",
-        type: "1"
-      },
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
-        title: "左侧图标用于区分不同的类型",
-        datetime: "一年前",
-        description: "",
-        type: "1"
-      }
-    ]
-  },
-  {
-    key: "2",
-    name: "消息",
-    list: [
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
-        title: "李白 评论了你",
-        description: "长风破浪会有时,直挂云帆济沧海",
-        datetime: "一年前",
-        type: "2"
-      },
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
-        title: "李白 回复了你",
-        description: "行路难，行路难，多歧路，今安在。",
-        datetime: "一年前",
-        type: "2"
-      },
-      {
-        avatar:
-          "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
-        title: "标题",
-        description:
-          "请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容",
-        datetime: "一年前",
-        type: "2"
-      }
-    ]
-  },
-  {
-    key: "3",
-    name: "代办",
-    list: [
-      {
-        avatar: "",
-        title: "任务名称",
-        description: "任务需要在 2022-11-16 20:00 前启动",
-        datetime: "",
-        extra: "未开始",
-        status: "info",
-        type: "3"
-      },
-      {
-        avatar: "",
-        title: "第三方紧急代码变更",
-        description:
-          "一拳提交于 2022-11-16，需在 2022-11-18 前完成代码变更任务",
-        datetime: "",
-        extra: "马上到期",
-        status: "danger",
-        type: "3"
-      },
-      {
-        avatar: "",
-        title: "信息安全考试",
-        description: "指派小仙于 2022-12-12 前完成更新并发布",
-        datetime: "",
-        extra: "已耗时 8 天",
-        status: "warning",
-        type: "3"
-      },
-      {
-        avatar: "",
-        title: "vue-pure-admin 版本发布",
-        description: "vue-pure-admin 版本发布",
-        datetime: "",
-        extra: "进行中",
-        type: "3"
-      }
-    ]
-  }
-];

frontend/web/src/layout/components/notice/index.vue

@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { noticesData } from "./data";
-import NoticeList from "./noticeList.vue";
-import Bell from "@iconify-icons/ep/bell";
-
-const noticesNum = ref(0);
-const notices = ref(noticesData);
-const activeKey = ref(noticesData[0].key);
-
-notices.value.map(v => (noticesNum.value += v.list.length));
-</script>
-
-<template>
-  <el-dropdown trigger="click" placement="bottom-end">
-    <span class="dropdown-badge navbar-bg-hover select-none">
-      <el-badge :value="noticesNum" :max="99">
-        <span class="header-notice-icon">
-          <IconifyIconOffline :icon="Bell" />
-        </span>
-      </el-badge>
-    </span>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-tabs
-          :stretch="true"
-          v-model="activeKey"
-          class="dropdown-tabs"
-          :style="{ width: notices.length === 0 ? '200px' : '330px' }"
-        >
-          <el-empty
-            v-if="notices.length === 0"
-            description="暂无消息"
-            :image-size="60"
-          />
-          <span v-else>
-            <template v-for="item in notices" :key="item.key">
-              <el-tab-pane
-                :label="`${item.name}(${item.list.length})`"
-                :name="`${item.key}`"
-              >
-                <el-scrollbar max-height="330px">
-                  <div class="noticeList-container">
-                    <NoticeList :list="item.list" />
-                  </div>
-                </el-scrollbar>
-              </el-tab-pane>
-            </template>
-          </span>
-        </el-tabs>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
-</template>
-
-<style lang="scss" scoped>
-.dropdown-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 48px;
-  margin-right: 10px;
-  cursor: pointer;
-
-  .header-notice-icon {
-    font-size: 18px;
-  }
-}
-
-.dropdown-tabs {
-  .noticeList-container {
-    padding: 15px 24px 0;
-  }
-
-  :deep(.el-tabs__header) {
-    margin: 0;
-  }
-
-  :deep(.el-tabs__nav-wrap)::after {
-    height: 1px;
-  }
-
-  :deep(.el-tabs__nav-wrap) {
-    padding: 0 36px;
-  }
-}
-</style>

frontend/web/src/layout/components/notice/noticeItem.vue

@@ -1,177 +0,0 @@
-<script setup lang="ts">
-import { ListItem } from "./data";
-import { ref, PropType, nextTick } from "vue";
-import { useNav } from "@/layout/hooks/useNav";
-import { deviceDetection } from "@pureadmin/utils";
-
-const props = defineProps({
-  noticeItem: {
-    type: Object as PropType<ListItem>,
-    default: () => {}
-  }
-});
-
-const titleRef = ref(null);
-const titleTooltip = ref(false);
-const descriptionRef = ref(null);
-const descriptionTooltip = ref(false);
-const { tooltipEffect } = useNav();
-const isMobile = deviceDetection();
-
-function hoverTitle() {
-  nextTick(() => {
-    titleRef.value?.scrollWidth > titleRef.value?.clientWidth
-      ? (titleTooltip.value = true)
-      : (titleTooltip.value = false);
-  });
-}
-
-function hoverDescription(event, description) {
-  // currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除
-  const tempTag = document.createElement("span");
-  tempTag.innerText = description;
-  tempTag.className = "getDescriptionWidth";
-  document.querySelector("body").appendChild(tempTag);
-  const currentWidth = (
-    document.querySelector(".getDescriptionWidth") as HTMLSpanElement
-  ).offsetWidth;
-  document.querySelector(".getDescriptionWidth").remove();
-
-  // cellWidth为容器的宽度
-  const cellWidth = event.target.offsetWidth;
-
-  // 当文本宽度大于容器宽度两倍时，代表文本显示超过两行
-  currentWidth > 2 * cellWidth
-    ? (descriptionTooltip.value = true)
-    : (descriptionTooltip.value = false);
-}
-</script>
-
-<template>
-  <div
-    class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
-  >
-    <el-avatar
-      v-if="props.noticeItem.avatar"
-      :size="30"
-      :src="props.noticeItem.avatar"
-      class="notice-container-avatar"
-    />
-    <div class="notice-container-text">
-      <div class="notice-text-title text-[#000000d9] dark:text-white">
-        <el-tooltip
-          popper-class="notice-title-popper"
-          :effect="tooltipEffect"
-          :disabled="!titleTooltip"
-          :content="props.noticeItem.title"
-          placement="top-start"
-          :enterable="!isMobile"
-        >
-          <div
-            ref="titleRef"
-            class="notice-title-content"
-            @mouseover="hoverTitle"
-          >
-            {{ props.noticeItem.title }}
-          </div>
-        </el-tooltip>
-        <el-tag
-          v-if="props.noticeItem?.extra"
-          :type="props.noticeItem?.status"
-          size="small"
-          class="notice-title-extra"
-        >
-          {{ props.noticeItem?.extra }}
-        </el-tag>
-      </div>
-
-      <el-tooltip
-        popper-class="notice-title-popper"
-        :effect="tooltipEffect"
-        :disabled="!descriptionTooltip"
-        :content="props.noticeItem.description"
-        placement="top-start"
-      >
-        <div
-          ref="descriptionRef"
-          class="notice-text-description"
-          @mouseover="hoverDescription($event, props.noticeItem.description)"
-        >
-          {{ props.noticeItem.description }}
-        </div>
-      </el-tooltip>
-      <div class="notice-text-datetime text-[#00000073] dark:text-white">
-        {{ props.noticeItem.datetime }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<style>
-.notice-title-popper {
-  max-width: 238px;
-}
-</style>
-<style scoped lang="scss">
-.notice-container {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 12px 0;
-
-  // border-bottom: 1px solid #f0f0f0;
-
-  .notice-container-avatar {
-    margin-right: 16px;
-    background: #fff;
-  }
-
-  .notice-container-text {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    justify-content: space-between;
-
-    .notice-text-title {
-      display: flex;
-      margin-bottom: 8px;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 1.5715;
-      cursor: pointer;
-
-      .notice-title-content {
-        flex: 1;
-        width: 200px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .notice-title-extra {
-        float: right;
-        margin-top: -1.5px;
-        font-weight: 400;
-      }
-    }
-
-    .notice-text-description,
-    .notice-text-datetime {
-      font-size: 12px;
-      line-height: 1.5715;
-    }
-
-    .notice-text-description {
-      display: -webkit-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-    }
-
-    .notice-text-datetime {
-      margin-top: 4px;
-    }
-  }
-}
-</style>

frontend/web/src/layout/components/notice/noticeList.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { PropType } from "vue";
-import { ListItem } from "./data";
-import NoticeItem from "./noticeItem.vue";
-
-const props = defineProps({
-  list: {
-    type: Array as PropType<Array<ListItem>>,
-    default: () => []
-  }
-});
-</script>
-
-<template>
-  <div v-if="props.list.length">
-    <NoticeItem
-      v-for="(item, index) in props.list"
-      :noticeItem="item"
-      :key="index"
-    />
-  </div>
-  <el-empty v-else description="暂无数据" />
-</template>

frontend/web/src/layout/components/sidebar/horizontal.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Search from "../search/index.vue";
-import Notice from "../notice/index.vue";
 import SidebarItem from "./sidebarItem.vue";
 import HeaderDarkSwitch from "../headerDarkSwitch.vue";
 import { isAllEmpty } from "@pureadmin/utils";
@@ -55,7 +54,6 @@ nextTick(() => {
     </el-menu>
     <div class="horizontal-header-right">
       <Search />
-      <Notice id="header-notice" />
       <HeaderDarkSwitch />
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover">

frontend/web/src/layout/components/sidebar/mixNav.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import extraIcon from "./extraIcon.vue";
 import Search from "../search/index.vue";
-import Notice from "../notice/index.vue";
 import HeaderDarkSwitch from "../headerDarkSwitch.vue";
 import { isAllEmpty } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
@@ -87,7 +86,6 @@ watch(
     </el-menu>
     <div class="horizontal-header-right">
       <Search />
-      <Notice id="header-notice" />
       <HeaderDarkSwitch />
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover select-none">

frontend/web/src/style/sidebar.scss

@@ -440,8 +440,8 @@
 
       /* 搜索 */
       .search-container,
-      /* 告警 */
+      /* 暗黑模式 */
-      .dropdown-badge,
+      .header-dark-switch,
       /* 用户名 */
       .el-dropdown-link,
       /* 设置 */
@@ -451,11 +451,6 @@
         }
       }
 
-      .dropdown-badge {
-        height: 48px;
-        color: $subMenuActiveText;
-      }
-
       .el-dropdown-link {
         display: flex;
         align-items: center;
@@ -611,8 +606,8 @@ body[layout="vertical"] {
 
   /* 搜索 */
   .search-container,
-  /* 告警 */
+  /* 暗黑模式 */
-  .dropdown-badge,
+  .header-dark-switch,
   /* 用户名 */
   .el-dropdown-link,
   /* 设置 */

frontend/web/src/views/login/index.vue

@@ -65,7 +65,7 @@ dataThemeChange();
 const { title } = useNav();
 
 const ruleForm = reactive({
-  username: "admin",
+  username: "",
   password: getPassword(),
   captchaCode: "",
   captchaCodeKey: ""