feat(ul): 顶部信息

gpt-vue/projects/vue-admin/src/components/CustomLayout.vue

@@ -1,13 +1,17 @@
 <script lang="ts" setup>
 import { IconDown, IconExport } from "@arco-design/web-vue/es/icon";
 import { useAuthStore } from "@/stores/auth";
+import useState from "@/composables/useState";
 import Logo from "/images/logo.png";
+import avatar from "/images/user-info.jpg";
+import donateImg from "/images/wechat-pay.png";
 
 import SystemMenu from "./SystemMenu.vue";
 import PageWrapper from "./PageWrapper.vue";
 
 const logoWidth = "200px";
 const authStore = useAuthStore();
+const [visible, setVisible] = useState(false);
 </script>
 <template>
   <ALayout class="custom-layout">
@@ -19,18 +23,33 @@ const authStore = useAuthStore();
       <div class="action">
         <ADropdown>
           <ASpace align="center" :size="4">
-            <span></span>
+            <a-avatar class="user-avatar" :size="30">
+              <img :src="avatar" />
+            </a-avatar>
             <IconDown />
           </ASpace>
           <template #content>
-            <ADoption value="changeOwnPwd">更改密码</ADoption>
+            <a
+              class="dropdown-link"
+              href="https://github.com/yangjian102621/chatgpt-plus"
+              target="_blank"
+            >
+              <ADoption value="1">
+                <template #icon>
+                  <icon-github />
+                </template>
+                <span>ChatPlus-AI 创作系统</span>
+              </ADoption>
+            </a>
+            <ADoption value="2" @click="setVisible(true)">
+              <template #icon>
+                <icon-wechatpay />
+              </template>
+              <span>打赏作者</span>
+            </ADoption>
           </template>
           <template #footer>
-            <APopconfirm
-              content="确认退出？"
-              position="br"
-              @ok="authStore.logout"
-            >
+            <APopconfirm content="确认退出？" position="br" @ok="authStore.logout">
               <ASpace align="center" class="logout-area">
                 <IconExport size="16" />
                 <span>退出</span>
@@ -49,6 +68,20 @@ const authStore = useAuthStore();
       </ALayoutContent>
     </ALayout>
   </ALayout>
+  <a-modal
+    v-model:visible="visible"
+    class="donate-dialog"
+    width="400px"
+    title="请作者喝杯咖啡"
+    :footer="false"
+  >
+    <a-alert :closable="false" :show-icon="false">
+      如果你觉得这个项目对你有帮助，并且情况允许的话，可以请作者喝杯咖啡，非常感谢你的支持～
+    </a-alert>
+    <p>
+      <a-image :src="donateImg" />
+    </p>
+  </a-modal>
 </template>
 <style lang="less" scoped>
 .custom-layout {
@@ -81,6 +114,14 @@ const authStore = useAuthStore();
     }
   }
 }
+.dropdown-link {
+  text-decoration: none;
+}
+.donate-dialog {
+  p {
+    text-align: center;
+  }
+}
 .logout-area {
   padding: 8px 0;
   display: flex;

gpt-vue/projects/vue-admin/src/composables/useState.ts

@@ -0,0 +1,10 @@
+import { ref, type Ref } from "vue";
+function useState<T>(defaultValue?: T): [Ref<T>, (newValue: T) => void] {
+  const state = ref<T>(defaultValue) as Ref<T>;
+  const setState = (newValue: T) => {
+    state.value = newValue;
+  };
+  return [state, setState];
+}
+
+export default useState;