feat(layout): 混合布局和双列布局 补充版权信息组件和弹窗组件

Co-authored-by: kiki1373639299<zkai0106@163.com>



# message auto-generated for no-merge-commit merge:
!15 merge layout-fix into dev

feat(layout): 混合布局和双列布局 补充版权信息组件和弹窗组件

Created-by: kiki1373639299
Commit-by: kiki1373639299
Merged-by: Charles_7c
Description: <!--
  非常感谢您的 PR！在提交之前，请务必确保您 PR 的代码经过了完整测试，并且通过了代码规范检查。
-->

<!-- 在 [] 中输入 x 来勾选) -->

## PR 类型

<!-- 您的 PR 引入了哪种类型的变更？ -->
<!-- 只支持选择一种类型，如果有多种类型，可以在更新日志中增加 “类型” 列。 -->

- [X] 新 feature
- [ ] Bug 修复
- [ ] 功能增强
- [ ] 文档变更
- [ ] 代码样式变更
- [ ] 重构
- [ ] 性能改进
- [ ] 单元测试
- [ ] CI/CD
- [ ] 其他

## PR 目的

<!-- 描述一下您的 PR 解决了什么问题。如果可以，请链接到相关 issues。 -->

## 解决方案

<!-- 详细描述您是如何解决的问题 -->

## PR 测试

<!-- 如果可以，请为您的 PR 添加或更新单元测试。 -->
<!-- 请描述一下您是如何测试 PR 的。例如：创建/更新单元测试或添加相关的截图。 -->

## Changelog

| 模块  | Changelog | Related issues |
|-----|-----------| -------------- |
|   src/layout  |      layoutMix 和 layoutColumns 增加 GiFooter 和  NoticePopup     |                |

<!-- 如果有多种类型的变更，可以在变更日志表中增加 “类型” 列，该列的值与上方 “PR 类型” 相同。 -->
<!-- Related issues 格式为 Closes #<issue号>，或者 Fixes #<issue号>，或者 Resolves #<issue号>。 -->

## 其他信息

<!-- 请描述一下还有哪些注意事项。例如：如果引入了一个不向下兼容的变更，请描述其影响。 -->

## 提交前确认

- [X] PR 代码经过了完整测试，并且通过了代码规范检查
- [X] 已经完整填写 Changelog，并链接到了相关 issues
- [X] PR 代码将要提交到 dev 分支

See merge request: continew/continew-admin-ui!15

src/layout/LayoutMix.vue

@@ -11,6 +11,7 @@
     >
       <Logo :collapsed="appStore.menuCollapse" />
       <Menu :menus="twoLevelMenus" :menu-style="{ width: '200px', flex: 1 }" />
+      <WwAds class="ads" />
     </section>
 
     <!-- 右侧内容区域 -->
@@ -32,7 +33,11 @@
       </header>
       <Tabs v-if="appStore.tab" />
       <Main />
+      <GiFooter v-if="appStore.copyrightDisplay" />
     </section>
+
+    <!-- 公告弹窗 -->
+    <NoticePopup ref="noticePopupRef" />
   </div>
 </template>
 
@@ -47,6 +52,10 @@ import Tabs from './components/Tabs/index.vue'
 import { useAppStore } from '@/stores'
 import { useLevelMenu } from '@/layout/hooks/useLevelMenu'
 import { useDevice } from '@/hooks'
+import { getToken } from '@/utils/auth'
+
+import WwAds from '@/layout/components/WwAds.vue'
+import NoticePopup from '@/views/user/message/components/NoticePopup.vue'
 
 /** 组件名称 */
 defineOptions({ name: 'LayoutMix' })
@@ -64,9 +73,27 @@ getOneLevelMenus()
 
 const activeMenu = computed(() => [oneLevelMenuActiveRoute.value?.path ?? ''])
 
+// 公告弹窗引用
+const noticePopupRef = ref<InstanceType<typeof NoticePopup>>()
+
+// 检查并显示未读公告
+const checkAndShowNotices = () => {
+  const token = getToken()
+
+  // 如果有token，检查未读公告
+  if (token) {
+    setTimeout(() => {
+      console.log(noticePopupRef.value)
+      noticePopupRef.value?.open()
+    }, 1000) // 延迟1秒显示，让页面先加载完成
+  }
+}
 const getMenuIcon = (item: RouteRecordRaw) => {
   return item.meta?.icon || item.children?.[0]?.meta?.icon
 }
+onMounted(() => {
+  checkAndShowNotices()
+})
 </script>
 
 <style lang="scss" scoped>