init: 初始系统模板

src/layouts/components/RightContent.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { useRouter } from 'vue-router';
+import useI18n from '@/hooks/useI18n';
+import useUserStore from '@/store/modules/user';
+const { t, changeLocale } = useI18n();
+const userStore = useUserStore();
+const router = useRouter();
+
+/**头像展开项点击 */
+function fnClick({ key }: MenuInfo) {
+  switch (key) {
+    case 'settings':
+      router.push({ name: 'Settings' });
+      break;
+    case 'profile':
+      router.push({ name: 'Profile' });
+      break;
+    case 'logout':
+      userStore.fnLogOut().finally(() => router.push({ name: 'Login' }));
+      break;
+  }
+}
+
+/**改变多语言 */
+function fnChangeLocale(e: any) {
+  changeLocale(e.key);
+}
+</script>
+
+<template>
+  <a-space :size="12" align="center">
+    <a-popover
+      overlayClassName="head-notice"
+      placement="bottomRight"
+      :trigger="['click']"
+    >
+      <a-button type="text">
+        <template #icon>
+          <a-badge :count="123" :overflow-count="99">
+            <BellOutlined :style="{ fontSize: '20px' }" />
+          </a-badge>
+        </template>
+      </a-button>
+      <template #content :style="{ padding: 0 }">
+        <a-tabs centered :tabBarStyle="{ width: '336px' }">
+          <a-tab-pane key="1" tab="通知（41）">
+            Content of Tab 通知
+            <a-button type="link" block>查看更多</a-button>
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="消息（231）">
+            Content of Tab 消息
+            <a-button type="link" block>查看更多</a-button>
+          </a-tab-pane>
+          <a-tab-pane key="3" tab="待办（1）">
+            Content of Tab 待办
+            <a-button type="link" block>查看更多</a-button>
+          </a-tab-pane>
+        </a-tabs>
+      </template>
+    </a-popover>
+
+    <a-tooltip>
+      <template #title>开源仓库</template>
+      <a-button type="text" href="https://gitee.com/TsMask" target="_blank">
+        <template #icon>
+          <GithubOutlined :style="{ fontSize: '20px' }" />
+        </template>
+      </a-button>
+    </a-tooltip>
+
+    <a-tooltip>
+      <template #title>文档手册</template>
+      <a-button
+        type="text"
+        href="https://juejin.cn/column/7188761626017792056"
+        target="_blank"
+      >
+        <template #icon>
+          <QuestionCircleOutlined :style="{ fontSize: '20px' }" />
+        </template>
+      </a-button>
+    </a-tooltip>
+
+    <a-dropdown :trigger="['click', 'hover']">
+      <a-button size="small" type="default">
+        {{ t('i18n') }}
+        <DownOutlined />
+      </a-button>
+      <template #overlay>
+        <a-menu @click="fnChangeLocale">
+          <a-menu-item key="zh_CN">中文</a-menu-item>
+          <a-menu-item key="en_US">English</a-menu-item>
+        </a-menu>
+      </template>
+    </a-dropdown>
+
+    <a-dropdown placement="bottomRight" :trigger="['click', 'hover']">
+      <div class="user">
+        <a-avatar
+          shape="circle"
+          size="default"
+          :src="userStore.getAvatar"
+          :alt="userStore.userName"
+        ></a-avatar>
+        <span class="nick">
+          {{ userStore.nickName }}
+        </span>
+      </div>
+      <template #overlay>
+        <a-menu @click="fnClick">
+          <a-menu-item key="profile">
+            <template #icon>
+              <UserOutlined />
+            </template>
+            <span>个人中心</span>
+          </a-menu-item>
+          <a-menu-item key="settings">
+            <template #icon>
+              <SettingOutlined />
+            </template>
+            <span>个人设置</span>
+          </a-menu-item>
+          <a-menu-divider />
+          <a-menu-item key="logout">
+            <template #icon>
+              <LogoutOutlined />
+            </template>
+            <span>退出登录</span>
+          </a-menu-item>
+        </a-menu>
+      </template>
+    </a-dropdown>
+  </a-space>
+</template>
+
+<style lang="less" scoped>
+.user {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  .nick {
+    padding-left: 8px;
+    padding-right: 16px;
+    font-size: 16px;
+    max-width: 164px;
+    white-space: nowrap;
+    text-align: start;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+</style>