feat: 流水账插件全屏

src/plugins/p-daily-account/p-daily-account-detail.vue

@@ -6,8 +6,8 @@
       <div class="flex items-center">
         <a-button type="primary" :disabled="morningStatus">{{ morningStatus ? '已打卡' : '早打卡' }}</a-button>
         <a-button class="mx-5" type="primary" :disabled="nightStatus">{{ nightStatus ? '已打卡' : '晚打卡' }}</a-button>
-        <FullscreenExitOutlined v-if="isFullScreen" class="text-lg" style="color: #777" @click="isFullScreen = !isFullScreen" />
-        <FullscreenOutlined v-else class="text-lg" style="color: #777" @click="isFullScreen = !isFullScreen" />
+        <FullscreenExitOutlined v-if="isFullScreen" class="text-lg" style="color: #777" @click="changeIsFullScreen(false)" />
+        <FullscreenOutlined v-else class="text-lg" style="color: #777" @click="changeIsFullScreen(true)" />
       </div>
     </div>
 
@@ -216,7 +216,7 @@ const projectId = computed(() => store.getters['project/projectId']);
 const sessionProjectId = sessionStorage.getItem('projectId');
 const roleId = computed(() => store.state.role.roleId);
 const members = computed(() => store.state.role.members);
-const isFullScreen = ref(false); // 是否全屏
+const isFullScreen = computed(() => store.state.layout.isFullScreen); // 是否全屏
 const visible = ref(false); // 是否显示弹框表单
 const isDisabled = ref(false); // 是否允许编辑
 const morningStatus = ref(false); // 早打卡
@@ -270,6 +270,11 @@ onMounted(async () => {
   await getQueryTasks({});
 });
 
+// 改变全屏状态
+function changeIsFullScreen(data) {
+  store.commit('layout/setIsFullScreen', data);
+}
+
 // 获取基本信息（成员列表、项目列表）
 async function getInfo() {
   try {

src/store/tall/layout/mutations.js

@@ -42,6 +42,10 @@ const mutations = {
   setAllPlugin(state, data) {
     state.allPlugin = data;
   },
+
+  setIsFullScreen(state, data) {
+    state.isFullScreen = data;
+  },
 };
 
 export default mutations;

src/store/tall/layout/state.js

@@ -9,6 +9,7 @@ const state = {
   deviceId: '', // 唯一标识
   businessPlugin: '', // 所有服务
   allPlugin: '', // 所有插件
+  isFullScreen: false, // 流水账插件详情页是否全屏
 };
 
 export default state;

src/views/home/Index.vue

@@ -1,15 +1,15 @@
 <template>
   <a-config-provider :locale="locale">
     <a-layout>
-      <a-layout-header style="background: #fff"> <TopNavbar /> </a-layout-header>
+      <a-layout-header v-if="!isFullScreen" style="background: #fff"> <TopNavbar /> </a-layout-header>
       <a-layout>
         <!-- 日历页 -->
-        <a-layout-sider v-show="collapsed" style="background: #fff"><Left /></a-layout-sider>
+        <a-layout-sider v-if="!isFullScreen" v-show="collapsed" style="background: #fff"><Left /></a-layout-sider>
 
         <a-layout>
-          <Intro v-if="!projectInfo.id" />
+          <Intro v-if="!projectInfo.id && !isFullScreen" />
 
-          <a-layout-sider v-if="projectInfo.id" class="project-detail"><Center /></a-layout-sider>
+          <a-layout-sider v-if="projectInfo.id && !isFullScreen" class="project-detail"><Center /></a-layout-sider>
 
           <a-layout v-if="projectInfo.id">
             <!-- 导航栏 - 详情页导航 -->
@@ -53,6 +53,8 @@ const targetUrl = sessionStorage.getItem('targetUrl'); // 缓存的详情页链
 const taskDetailShow = computed(() => store.state.task.taskDetailShow); // 内置组件详情页是否显示
 const sessionTaskDetailShow = sessionStorage.getItem('taskDetailShow'); // 缓存的显示内置组件详情页的组件标签
 
+const isFullScreen = computed(() => store.state.layout.isFullScreen); // 流水账插件是否全屏
+
 // if (sessionProject && !projectInfo.value.id) {
 //   const info = JSON.parse(sessionProject);
 //   console.log(`info`, info);