<template>
  <div class="navbar">
    <!-- 左侧区域 -->
    <div class="navbar-left">
      <hamburger
          id="hamburger-container"
          :is-active="appStore.sidebar.opened"
          class="hamburger-container"
          @toggleClick="toggleSideBar"
      />
      <breadcrumb
          v-if="!settingsStore.topNav"
          id="breadcrumb-container"
          class="breadcrumb-container"
      />
      <top-nav
          v-if="settingsStore.topNav"
          id="topmenu-container"
          class="topmenu-container"
      />
    </div>

    <!-- 右侧菜单区域 -->
    <div class="right-menu">
      <template v-if="appStore.device !== 'mobile'">
        <!-- 通知铃铛 -->
        <div class="notification-wrapper">
          <el-tooltip :content="noticeContent" effect="dark" placement="bottom">
            <div class="right-menu-item notification-item" @click="showDetail">
              <el-badge
                  :value="noticeCount"
                  :max="99"
                  :offset="[5, 5]"
                  :hidden="noticeCount == 0"
                  class="badge-container"
              >
                <div class="notification-bell">
                  <el-icon class="bell-icon" :class="{ 'bell-shake': noticeCount > 0 }">
                    <BellFilled/>
                  </el-icon>
<!--                  <div v-if="noticeCount > 0" class="notification-dot"></div>-->
                </div>
              </el-badge>
            </div>
          </el-tooltip>
        </div>

        <!-- 搜索 -->
        <header-search id="header-search" class="right-menu-item"/>

        <!-- 全屏 -->
        <screenfull id="screenfull" class="right-menu-item hover-effect"/>

        <!-- 主题切换 -->
        <el-tooltip content="主题模式" effect="dark" placement="bottom">
          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
            <transition name="theme-rotate" mode="out-in">
              <svg-icon
                  v-if="settingsStore.isDark"
                  icon-class="sunny"
                  key="light"
                  class="theme-icon"
              />
              <svg-icon
                  v-else
                  icon-class="moon"
                  key="dark"
                  class="theme-icon"
              />
            </transition>
          </div>
        </el-tooltip>

        <!-- 布局大小 -->
        <el-tooltip content="布局大小" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect"/>
        </el-tooltip>
      </template>

      <!-- 用户头像下拉菜单 -->
      <div class="avatar-container">
        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect user-dropdown" trigger="click">
          <div class="avatar-wrapper">
            <div class="avatar-image-wrapper">
              <img :src="userStore.avatar" class="user-avatar" alt="用户头像"/>
              <div class="avatar-status"></div>
            </div>
            <div class="user-info" v-if="appStore.device !== 'mobile'">
              <span class="user-name">{{ userStore.name || '用户' }}</span>
              <span class="user-role">管理员</span>
            </div>
            <el-icon class="dropdown-arrow">
              <caret-bottom/>
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu class="user-dropdown-menu">
              <el-dropdown-item class="dropdown-item-custom">
                <router-link to="/user/profile" class="dropdown-link">
                  <el-icon class="dropdown-icon"><User /></el-icon>
                  <span>个人中心</span>
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings" class="dropdown-item-custom">
                <el-icon class="dropdown-icon"><Setting /></el-icon>
                <span>布局设置</span>
              </el-dropdown-item>
              <el-dropdown-item divided command="logout" class="dropdown-item-custom logout-item">
                <el-icon class="dropdown-icon"><SwitchButton /></el-icon>
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 通知列表弹框 -->
    <el-dialog
        v-model="dialogVisible"
        title="通知列表"
        width="70%"
        :before-close="closeListDialog"
        class="notice-list-dialog"
        destroy-on-close
    >
      <div class="dialog-header">
        <div class="header-info">
          <el-icon class="info-icon"><InfoFilled /></el-icon>
          <span>共有 {{ noticeList.length }} 条通知</span>
        </div>
        <div class="header-actions">
          <el-button type="primary" size="small" @click="markAllAsRead" :disabled="noticeCount === 0">
            全部已读
          </el-button>
        </div>
      </div>

      <el-table
          v-loading="loading"
          :data="noticeList"
          :default-sort="defaultSort"
          @sort-change="handleSortChange"
          class="notice-table"
          stripe
          highlight-current-row
          height="600"
          style="width: 100%"
      >
        <el-table-column type="selection" width="55" align="center" />

        <el-table-column
            label="公告标题"
            align="left"
            prop="notice_title"
            :show-overflow-tooltip="true"
            min-width="200"
        >
          <template #default="scope">
            <div class="notice-title-cell">
<!--              <el-tag v-if="!scope.row.isRead" type="danger" size="small" class="unread-tag">
                NEW
              </el-tag>-->
              <span class="title-text" :class="{ 'unread-title': !scope.row.isRead }">
                {{ scope.row.notice_title }}
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="公告类型" align="center" prop="notice_type" width="120">
          <template #default="scope">
            <dict-tag :options="sys_notice_type" :value="scope.row.notice_type"/>
          </template>
        </el-table-column>

        <el-table-column label="创建者" align="center" prop="create_by" width="120">
          <template #default="scope">
            <div class="creator-cell">
              <el-avatar :size="24" class="creator-avatar">
                {{ scope.row.create_by?.charAt(0) || 'U' }}
              </el-avatar>
              <span>{{ scope.row.create_by }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
            label="创建时间"
            align="center"
            prop="create_time"
            width="160"
            sortable="custom"
        >
          <template #default="scope">
            <div class="time-cell">
              <el-icon class="time-icon"><Clock /></el-icon>
              <span>{{ parseTime(scope.row.create_time, '{y}-{m}-{d}') }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template #default="scope">
            <div class="action-buttons">
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['system:notice:query']"
              >
                <el-icon><View /></el-icon>
                查看
              </el-button>
              <el-button
                  link
                  type="success"
                  size="small"
                  @click="readInfo(scope.row)"
                  :disabled="scope.row.isRead"
              >
                <el-icon><Check /></el-icon>
                {{ scope.row.isRead ? '已读' : '标记已读' }}
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeListDialog">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 通知详情弹框 -->
    <el-dialog
        v-model="dialogVisible2"
        title="通知详情"
        width="50%"
        :before-close="closeDetailDialog"
        class="notice-detail-dialog"
        destroy-on-close
    >
      <div class="detail-content">
        <el-form :model="noticeForm" label-width="80px" class="notice-form">
          <el-form-item label="标题">
            <div class="form-item-content">
              <el-icon class="form-icon"><Document /></el-icon>
              <el-input
                  v-model="noticeTitle"
                  readonly
                  class="readonly-input"
                  style="width: 835px;"
              />
            </div>
          </el-form-item>

          <el-form-item label="类型">
            <div class="form-item-content">
              <el-icon class="form-icon"><Collection /></el-icon>
              <el-select
                  v-model="noticeType"
                  disabled
                  style="width: 835px;"
                  class="readonly-select"
              >
                <el-option
                    v-for="dict in sys_notice_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="内容">
            <div class="content-wrapper">
              <editor
                  v-model="noticeContentV"
                  readonly
                  disabled
                  :min-height="200"
                  style="width: 100%;"
                  class="content-editor"
              />
            </div>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDetailDialog">关闭</el-button>
          <el-button type="primary" @click="readInfo2">
            <el-icon><Check /></el-icon>
            标记已读
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessageBox, ElNotification } from 'element-plus'
import {
  BellFilled,
  CaretBottom,
  User,
  Setting,
  SwitchButton,
  InfoFilled,
  Clock,
  View,
  Check,
  Document,
  Collection
} from '@element-plus/icons-vue'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch'
import { listNoticeRead } from "@/api/system/menu"
import { getNotice, show } from "@/api/system/notice"
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
import { h, ref, computed, getCurrentInstance } from 'vue'
import { connectToWebSocket } from "@/layout/components/websocket"

const { proxy } = getCurrentInstance()
const { sys_notice_status, sys_notice_type } = proxy.useDict("sys_notice_status", "sys_notice_type")

const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()

// 响应式数据
const announcements = ref([])
const noticeList = ref([])
const loading = ref(true)
const noticeContentV = ref('暂无消息')
const noticeContent = ref('')
const noticeCount = ref(0)
const intervalId = ref(null)
const notice_id = ref(null)
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const noticeTitle = ref('')
const noticeType = ref('')
const uniqueKey = ref(0)
const defaultSort = ref({ prop: 'create_time', order: 'descending' })

const queryParams = ref({
  pageNum: 1,
  pageSize: 10000,
  orderByColumn: 'create_time',
  isAsc: 'desc'
})

const noticeForm = computed(() => ({
  title: noticeTitle.value,
  type: noticeType.value,
  content: noticeContentV.value
}))

// WebSocket 连接
connectToWebSocket((newAnnounce) => {
  announcements.value.unshift(newAnnounce)
  if (newAnnounce) {
    if (newAnnounce !== "del" && newAnnounce !== "update") {
      txt2("新公告", "您有新的公告，请注意查收", 'warning', 3000)
    }
    getlistNotice()
  }
})

// 方法定义
function txt2(title, msg, type, time) {
  ElNotification({
    title: title,
    message: h('div', { style: 'display: flex; align-items: center;' }, [
      msg,
      h('a', {
        style: 'margin-left: 5px; color: #409eff; text-decoration: underline; cursor: pointer;',
        onClick: () => showDetail()
      }, '查看')
    ]),
    type: type,
    duration: time,
    position: 'top-right',
    customClass: 'custom-notification'
  })
}

function showDetail() {
  dialogVisible.value = true
}

function toggleSideBar() {
  appStore.toggleSideBar()
}

function handleCommand(command) {
  switch (command) {
    case "setLayout":
      setLayout()
      break
    case "logout":
      logout()
      break
    default:
      break
  }
}

function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    customClass: 'custom-message-box'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/index'
    })
  }).catch(() => {})
}

function readInfo(row) {
  show({ noticeId: row.notice_id }).then(response => {
    getlistNotice()
    txt("操作成功", "已标记为已读", 'success', 2000)
  })
}

function readInfo2() {
  dialogVisible2.value = false
  show({ noticeId: notice_id.value }).then(response => {
    getlistNotice()
    txt("操作成功", "已标记为已读", 'success', 2000)
  })
}

function markAllAsRead() {
  const unreadNotices = noticeList.value.filter(item => !item.isRead)
  if (unreadNotices.length === 0) {
    txt("提示", "没有未读消息", 'info', 2000)
    return
  }

  ElMessageBox.confirm(`确定要将所有 ${unreadNotices.length} 条未读消息标记为已读吗？`, '批量操作确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该调用批量标记已读的API，暂时用循环模拟
    unreadNotices.forEach(notice => {
      show({ noticeId: notice.notice_id })
    })
    getlistNotice()
    txt("操作成功", `已将 ${unreadNotices.length} 条消息标记为已读`, 'success', 3000)
  })
}

function closeListDialog() {
  dialogVisible.value = false
}

function closeDetailDialog() {
  dialogVisible2.value = false
}

function getlistNotice() {
  loading.value = true
  listNoticeRead(queryParams.value).then((response) => {
    noticeCount.value = response.data.length
    loading.value = false
    noticeList.value = response.data
    noticeContent.value = noticeCount.value > 0
        ? `您有 ${noticeCount.value} 条未读消息 (点击查看详情)`
        : "暂无未读消息"
  }).catch(() => {
    loading.value = false
  })
}

function handleSortChange({ column, prop, order }) {
  queryParams.value.orderByColumn = prop
  queryParams.value.isAsc = order === 'ascending' ? 'asc' : 'desc'
  getlistNotice()
}

function handleUpdate(row) {
  const noticeId = row.notice_id
  getNotice(noticeId).then(response => {
    dialogVisible2.value = true
    noticeContentV.value = response.data.noticeContent
    noticeTitle.value = response.data.noticeTitle
    noticeType.value = response.data.noticeType
    notice_id.value = response.data.noticeId
  })
}

const emits = defineEmits(['setLayout'])

function setLayout() {
  emits('setLayout')
}

function toggleTheme() {
  settingsStore.toggleTheme()
}

function txt(title, msg, type, time) {
  ElNotification({
    title: title,
    message: msg,
    type: type,
    duration: time,
    position: 'top-right'
  })
}

// 初始化
getlistNotice()
</script>

<style lang='scss' scoped>
.navbar {
  height: 60px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--el-bg-color) 0%, var(--el-bg-color-page) 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid var(--el-border-color-lighter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  transition: all 0.3s ease;

  .navbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 0 8px;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: var(--el-color-primary-light-9);
      transform: scale(1.05);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .topmenu-container {
    position: absolute;
    left: 50px;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 0px;
    display: flex;
    align-items: center;
    gap: 1px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      height: 40px;
      font-size: 16px;
      color: var(--el-text-color-regular);
      vertical-align: text-bottom;
      border-radius: 8px;
      transition: all 0.3s ease;
      position: relative;

      &.hover-effect {
        cursor: pointer;

        &:hover {
          background: var(--el-color-primary-light-9);
          color: var(--el-color-primary);
          transform: translateY(-1px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
      }
    }

    .notification-wrapper {
      .notification-item {
        cursor: pointer;
        position: relative;

        .notification-bell {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;

          .bell-icon {
            font-size: 18px;
            transition: all 0.3s ease;

            &.bell-shake {
              animation: bellShake 2s infinite;
            }
          }

          .notification-dot {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 8px;
            height: 8px;
            background: var(--el-color-danger);
            border-radius: 50%;
            animation: pulse 2s infinite;
          }
        }

        &:hover {
          .bell-icon {
            color: var(--el-color-primary);
            transform: scale(1.1);
          }
        }
      }

      .badge-container {
        // 修复徽章位置问题
        :deep(.el-badge) {
          display: inline-block;
          position: relative;
        }

        :deep(.el-badge__content) {
          background: linear-gradient(45deg, var(--el-color-danger), #ff6b6b);
          border: 2px solid var(--el-bg-color);
          font-weight: 600;
          font-size: 10px;
          min-width: 18px;
          height: 18px;
          line-height: 14px;
          // 关键修复：直接定位到右上角，禁用动画
          position: absolute !important;
          margin-top: 0px !important;
          margin-right: -10px !important;
          transform: translate(50%, -50%) !important;
          transition: none !important; // 禁用过渡动画
          animation: none !important; // 禁用初始动画

          // 如果你想要数字变化时的动画，可以只保留这个
          &.el-badge__content--is-fixed {
            animation: badgeBounceIn 0.3s ease-out;
          }
        }

        // 当徽章内容更新时的动画（可选）
        :deep(.el-badge__content.is-dot) {
          width: 8px;
          height: 8px;
          right: 5px;
          top: 5px;
        }
      }
    }

    .theme-switch-wrapper {
      .theme-icon {
        transition: all 0.3s ease;
      }

      .theme-rotate-enter-active,
      .theme-rotate-leave-active {
        transition: all 0.3s ease;
      }

      .theme-rotate-enter-from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.8);
      }

      .theme-rotate-leave-to {
        opacity: 0;
        transform: rotate(180deg) scale(0.8);
      }

      &:hover .theme-icon {
        transform: scale(1.15) rotate(15deg);
      }
    }

    .avatar-container {
      margin-left: 16px;

      .user-dropdown {
        .avatar-wrapper {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 6px 12px;
          border-radius: 20px;
          cursor: pointer;
          transition: all 0.3s ease;
          border: 1px solid transparent;

          &:hover {
            background: var(--el-color-primary-light-9);
            border-color: var(--el-color-primary-light-7);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }

          .avatar-image-wrapper {
            position: relative;

            .user-avatar {
              width: 36px;
              height: 36px;
              border-radius: 50%;
              border: 2px solid var(--el-color-primary-light-8);
              transition: all 0.3s ease;
              object-fit: cover;
            }

            .avatar-status {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 10px;
              height: 10px;
              background: var(--el-color-success);
              border: 2px solid var(--el-bg-color);
              border-radius: 50%;
            }
          }

          .user-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            .user-name {
              font-size: 14px;
              font-weight: 600;
              color: var(--el-text-color-primary);
              line-height: 1.2;
            }

            .user-role {
              font-size: 12px;
              color: var(--el-text-color-secondary);
              line-height: 1.2;
            }
          }

          .dropdown-arrow {
            font-size: 12px;
            color: var(--el-text-color-secondary);
            transition: transform 0.3s ease;
          }

          &:hover {
            .user-avatar {
              border-color: var(--el-color-primary);
              transform: scale(1.05);
            }

            .dropdown-arrow {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
}

// 下拉菜单样式
:deep(.user-dropdown-menu) {
  min-width: 180px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--el-border-color-lighter);
  padding: 8px 0;

  .dropdown-item-custom {
    padding: 12px 16px;
    margin: 2px 8px;
    border-radius: 8px;
    transition: all 0.3s ease;

    .dropdown-link {
      display: flex;
      align-items: center;
      gap: 10px;
      color: inherit;
      text-decoration: none;
      width: 100%;
    }

    .dropdown-icon {
      font-size: 16px;
      color: var(--el-text-color-secondary);
    }

    &:hover {
      background: var(--el-color-primary-light-9);
      color: var(--el-color-primary);

      .dropdown-icon {
        color: var(--el-color-primary);
      }
    }

    &.logout-item {
      &:hover {
        background: var(--el-color-danger-light-9);
        color: var(--el-color-danger);

        .dropdown-icon {
          color: var(--el-color-danger);
        }
      }
    }
  }
}

// 通知列表弹窗样式
:deep(.notice-list-dialog) {
  .el-dialog {
    border-radius: 16px;
    overflow: hidden;
    // 设置弹窗最大高度
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }

  .el-dialog__header {
    background: linear-gradient(135deg, var(--el-color-primary-light-9), var(--el-color-primary-light-8));
    padding: 20px 24px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    flex-shrink: 0; // 防止头部被压缩

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: var(--el-color-primary);
    }
  }

  .el-dialog__body {
    padding: 24px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .el-dialog__footer {
    flex-shrink: 0; // 防止底部被压缩
  }

  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--el-bg-color-page);
    border-radius: 12px;
    border: 1px solid var(--el-border-color-lighter);
    flex-shrink: 0; // 防止被压缩

    .header-info {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--el-text-color-regular);

      .info-icon {
        color: var(--el-color-primary);
        font-size: 16px;
      }
    }

    .header-actions {
      .el-button {
        border-radius: 8px;
      }
    }
  }

  // 关键修改：设置表格容器的固定高度和滚动
  .notice-table {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--el-border-color-lighter);
    flex: 1;
    display: flex;
    flex-direction: column;

    // 设置表格的最大高度和滚动
    :deep(.el-table) {
      height: 100%;
      max-height: 500px; // 设置最大高度
      display: flex;
      flex-direction: column;
    }

    :deep(.el-table__header-wrapper) {
      flex-shrink: 0;
    }

    :deep(.el-table__body-wrapper) {
      flex: 1;
      overflow-y: auto; // 垂直滚动
      overflow-x: auto; // 水平滚动（如果需要）
      max-height: 400px; // 表格内容区域最大高度

      // 自定义滚动条样式
      &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      &::-webkit-scrollbar-track {
        background: var(--el-fill-color-lighter);
        border-radius: 4px;
        margin: 2px;
      }

      &::-webkit-scrollbar-thumb {
        background: var(--el-border-color-dark);
        border-radius: 4px;
        transition: background 0.3s ease;

        &:hover {
          background: var(--el-border-color-darker);
        }
      }

      &::-webkit-scrollbar-corner {
        background: var(--el-fill-color-lighter);
      }

      // 滚动条在暗色主题下的样式
      @media (prefers-color-scheme: dark) {
        &::-webkit-scrollbar-track {
          background: rgba(255, 255, 255, 0.1);
        }

        &::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.3);

          &:hover {
            background: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }

    // 表格行样式保持不变
    .notice-title-cell {
      display: flex;
      align-items: center;
      gap: 8px;

      .unread-tag {
        flex-shrink: 0;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 600;
      }

      .title-text {
        &.unread-title {
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
      }
    }

    .creator-cell {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: center;

      .creator-avatar {
        font-size: 12px;
        font-weight: 600;
        background: var(--el-color-primary-light-8);
        color: var(--el-color-primary);
      }
    }

    .time-cell {
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: center;

      .time-icon {
        color: var(--el-text-color-secondary);
        font-size: 14px;
      }
    }

    .action-buttons {
      display: flex;
      gap: 8px;
      justify-content: center;

      .el-button {
        border-radius: 6px;
        padding: 4px 8px;

        .el-icon {
          margin-right: 4px;
        }
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0 0;
    border-top: 1px solid var(--el-border-color-lighter);
    margin-top: 16px;
  }
}

// 通知详情弹窗样式
:deep(.notice-detail-dialog) {
  .el-dialog {
    border-radius: 16px;
    overflow: hidden;
  }

  .el-dialog__header {
    background: linear-gradient(135deg, var(--el-color-success-light-9), var(--el-color-success-light-8));
    padding: 20px 24px;
    border-bottom: 1px solid var(--el-border-color-lighter);

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: var(--el-color-success);
    }
  }

  .el-dialog__body {
    padding: 24px;
  }

  .detail-content {
    .notice-form {
      .el-form-item {
        margin-bottom: 24px;

        .el-form-item__label {
          font-weight: 600;
          color: var(--el-text-color-primary);
        }

        .form-item-content {
          display: flex;
          align-items: center;
          gap: 12px;

          .form-icon {
            color: var(--el-color-primary);
            font-size: 16px;
            flex-shrink: 0;
          }

          .readonly-input {
            flex: 1;

            :deep(.el-input__wrapper) {
              background-color: var(--el-fill-color-light);
              border: 1px solid var(--el-border-color-light);
              border-radius: 8px;
              box-shadow: none;

              .el-input__inner {
                color: var(--el-text-color-primary);
                font-weight: 500;
              }
            }
          }

          .readonly-select {
            flex: 1;

            :deep(.el-select__wrapper) {
              background-color: var(--el-fill-color-light);
              border: 1px solid var(--el-border-color-light);
              border-radius: 8px;
              box-shadow: none;
            }
          }
        }

        .content-wrapper {
          .content-editor {
            border: 1px solid var(--el-border-color-light);
            border-radius: 8px;
            overflow: hidden;
            background-color: var(--el-fill-color-light);

            :deep(.ql-editor) {
              padding: 16px;
              min-height: 200px;
              font-size: 14px;
              line-height: 1.6;
              color: var(--el-text-color-primary);
            }
          }
        }
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 0 0;
    border-top: 1px solid var(--el-border-color-lighter);

    .el-button {
      border-radius: 8px;
      padding: 8px 20px;

      .el-icon {
        margin-right: 6px;
      }
    }
  }
}

// 动画效果
@keyframes bellShake {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  10%, 30% {
    transform: rotate(-10deg);
  }
  20%, 40% {
    transform: rotate(10deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

// 自定义通知样式
:deep(.custom-notification) {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--el-border-color-lighter);

  .el-notification__title {
    font-weight: 600;
  }

  .el-notification__content {
    font-size: 14px;
    line-height: 1.5;
  }
}

// 自定义消息框样式
:deep(.custom-message-box) {
  border-radius: 16px;
  overflow: hidden;

  .el-message-box__header {
    background: var(--el-bg-color-page);
    padding: 20px 24px 16px;
  }

  .el-message-box__title {
    font-weight: 600;
    color: var(--el-text-color-primary);
  }

  .el-message-box__content {
    padding: 16px 24px 20px;
  }

  .el-message-box__btns {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--el-border-color-lighter);

    .el-button {
      border-radius: 8px;
      padding: 8px 20px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .navbar {
    height: 50px;
    padding: 0 12px;

    .right-menu {
      gap: 4px;

      .right-menu-item {
        padding: 6px 8px;
        height: 36px;
        font-size: 14px;
      }

      .avatar-container {
        margin-left: 8px;

        .user-dropdown .avatar-wrapper {
          padding: 4px 8px;
          gap: 8px;

          .avatar-image-wrapper .user-avatar {
            width: 32px;
            height: 32px;
          }

          .user-info {
            display: none;
          }
        }
      }
    }
  }

  :deep(.notice-list-dialog) {
    .el-dialog {
      width: 95% !important;
      margin: 5vh auto;
    }

    .dialog-header {
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
    }

    .notice-table {
      .el-table__body-wrapper {
        overflow-x: auto;
      }
    }
  }

  :deep(.notice-detail-dialog) {
    .el-dialog {
      width: 95% !important;
      margin: 5vh auto;
    }
  }
}

// 暗色主题适配
@media (prefers-color-scheme: dark) {
  .navbar {
    background: linear-gradient(135deg, var(--el-bg-color) 0%, var(--el-bg-color-page) 100%);
    border-bottom-color: var(--el-border-color);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }

  :deep(.notice-list-dialog) {
    .el-dialog__header {
      background: linear-gradient(135deg, var(--el-color-primary-dark-2), var(--el-color-primary-light-3));
    }
  }

  :deep(.notice-detail-dialog) {
    .el-dialog__header {
      background: linear-gradient(135deg, var(--el-color-success-dark-2), var(--el-color-success-light-3));
    }
  }
}

// 表格行悬停效果
:deep(.notice-table) {
  .el-table__row {
    transition: all 0.3s ease;

    &:hover {
      background-color: var(--el-color-primary-light-9) !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  }

  .el-table__header {
    .el-table__cell {
      background-color: var(--el-bg-color-page);
      color: var(--el-text-color-primary);
      font-weight: 600;
    }
  }
}

// 加载状态优化
:deep(.el-loading-mask) {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);

  .el-loading-spinner {
    .el-loading-text {
      color: var(--el-color-primary);
      font-weight: 500;
    }
  }
}

// 滚动条样式
:deep(.el-table__body-wrapper) {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: var(--el-fill-color-lighter);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--el-border-color-dark);
    border-radius: 3px;

    &:hover {
      background: var(--el-border-color-darker);
    }
  }
}

// 徽章数字动画
:deep(.el-badge__content) {
  animation: badgeBounce 0.5s ease-out;
}

@keyframes badgeBounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

// 按钮悬停效果增强
.el-button {
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  &:active {
    transform: translateY(0);
  }
}

// 输入框聚焦效果
:deep(.el-input__wrapper) {
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 0 0 1px var(--el-color-primary-light-7);
  }

  &.is-focus {
    box-shadow: 0 0 0 2px var(--el-color-primary-light-3);
  }
}

// 选择器悬停效果
:deep(.el-select__wrapper) {
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 0 0 1px var(--el-color-primary-light-7);
  }

  &.is-focus {
    box-shadow: 0 0 0 2px var(--el-color-primary-light-3);
  }
}
</style>
