260720

src/layout/components/header-tools-bak.vue

@@ -74,13 +74,24 @@
   <password-modal v-model:visible="passwordVisible" />
   <!-- 主题设置抽屉 -->
   <setting-drawer v-model:visible="settingVisible" />
+  <a-modal
+    v-model:visible="logoutConfirmVisible"
+    :title="t('layout.logout.title')"
+    :mask-closable="true"
+    @ok="confirmLogout"
+    @cancel="closeLogoutConfirm"
+  >
+    <div class="logout-confirm-content">
+      <ExclamationCircleOutlined class="logout-confirm-icon" />
+      <span>{{ t('layout.logout.message') }}</span>
+    </div>
+  </a-modal>
 </template>
 
 <script lang="ts" setup>
-  import { computed, createVNode, ref } from 'vue';
+  import { computed, ref } from 'vue';
   import { useRouter } from 'vue-router';
   import { useI18n } from 'vue-i18n';
-  import { Modal } from 'ant-design-vue/es';
   import {
     DownOutlined,
     MoreOutlined,
@@ -122,6 +133,7 @@
 
   // 是否显示主题设置抽屉
   const settingVisible = ref(false);
+  const logoutConfirmVisible = ref(false);
 
   // 当前用户信息
   const loginUser = computed(() => userStore.info ?? {});
@@ -133,19 +145,19 @@
     } else if (key === 'profile') {
       push('/user/profile');
     } else if (key === 'logout') {
-      // 退出登录
-      Modal.confirm({
-        title: t('layout.logout.title'),
-        content: t('layout.logout.message'),
-        icon: createVNode(ExclamationCircleOutlined),
-        maskClosable: true,
-        onOk: () => {
-          logout();
-        }
-      });
+      logoutConfirmVisible.value = true;
     }
   };
 
+  const closeLogoutConfirm = () => {
+    logoutConfirmVisible.value = false;
+  };
+
+  const confirmLogout = () => {
+    closeLogoutConfirm();
+    logout();
+  };
+
   /* 切换全屏 */
   const toggleFullscreen = () => {
     emit('fullscreen');
@@ -156,3 +168,17 @@
     settingVisible.value = true;
   };
 </script>
+
+<style lang="less" scoped>
+  .logout-confirm-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 14px;
+  }
+
+  .logout-confirm-icon {
+    color: #faad14;
+    font-size: 18px;
+  }
+</style>

src/layout/components/header-tools.vue

@@ -160,13 +160,24 @@
   <password-modal v-model:visible="passwordVisible" />
   <!-- 主题设置抽屉 -->
   <setting-drawer v-model:visible="settingVisible" />
+  <a-modal
+    v-model:visible="logoutConfirmVisible"
+    title="提示"
+    :mask-closable="true"
+    @ok="confirmLogout"
+    @cancel="closeLogoutConfirm"
+  >
+    <div class="logout-confirm-content">
+      <ExclamationCircleOutlined class="logout-confirm-icon" />
+      <span>确认退出吗</span>
+    </div>
+  </a-modal>
 </template>
 
 <script lang="ts" setup>
-  import { computed, createVNode, ref } from 'vue';
+  import { computed, ref } from 'vue';
   import { useRouter } from 'vue-router';
   import { useI18n } from 'vue-i18n';
-  import { Modal } from 'ant-design-vue/es';
   import {
     DownOutlined,
     MoreOutlined,
@@ -219,6 +230,7 @@
 
   // 是否显示主题设置抽屉
   const settingVisible = ref(false);
+  const logoutConfirmVisible = ref(false);
 
   // 当前用户信息
   const loginUser = computed(() => userStore.info ?? {});
@@ -238,19 +250,19 @@
     } else if (key === 'skin') {
       settingVisible.value = true;
     } else if (key === 'logout') {
-      // 退出登录
-      Modal.confirm({
-        title: '提示',
-        content: '确认退出吗',
-        icon: createVNode(ExclamationCircleOutlined),
-        maskClosable: true,
-        onOk: () => {
-          logout();
-        }
-      });
+      logoutConfirmVisible.value = true;
     }
   };
 
+  const closeLogoutConfirm = () => {
+    logoutConfirmVisible.value = false;
+  };
+
+  const confirmLogout = () => {
+    closeLogoutConfirm();
+    logout();
+  };
+
   const myOrder = () => {
     push('/user/my-balance-log');
   };
@@ -302,6 +314,18 @@
 </script>
 
 <style lang="less" scoped>
+  .logout-confirm-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 14px;
+  }
+
+  .logout-confirm-icon {
+    color: #faad14;
+    font-size: 18px;
+  }
+
   .user-profile {
     display: flex;
     .user-info {

src/layout/index.vue

@@ -48,9 +48,9 @@
     <!-- 路由出口 -->
     <router-layout />
     <!-- logo 图标 -->
-<!--    <template #logo>-->
-<!--      <img :src="logo" alt="logo" />-->
-<!--    </template>-->
+    <template #logo>
+      <img src="@/assets/logo-main.png" alt="logo" style="width: 48px; height: 48px; object-fit: cover;"/>
+    </template>
     <!-- 顶栏右侧区域 -->
     <template #right>
       <header-tools :fullscreen="fullscreen" @fullscreen="onFullscreen" />
@@ -118,12 +118,12 @@
 
   // 项目名
   // const projectName = ref(import.meta.env.VITE_APP_NAME as string);
-  const projectName = ref('贵港市公共法律服务微平台');
+  const projectName = ref('广西医科大学团委智能化管理系统');
   // 企业信息
   const tenantName = localStorage.getItem('tenantName');
   const companyLogo = localStorage.getItem('CompanyLogo');
   const shortName = localStorage.getItem('ShortName');
-  const logo = ref<any>('/assets/logo.svg');
+  // const logo = ref<any>('@/assets/logo-main.png');
 
   // if (tenantName) {
   //   projectName.value = String(tenantName);