feat(ul): 顶部信息

gpt-vue/pnpm-lock.yaml

@@ -65,6 +65,9 @@ importers:
       '@gpt-vue/packages':
         specifier: workspace:^1.0.0
         version: link:../../packages
+      echarts:
+        specifier: ^5.5.0
+        version: 5.5.0
       md-editor-v3:
         specifier: ^2.2.1
         version: 2.11.3(vue@3.4.21)
@@ -93,6 +96,9 @@ importers:
       '@vitejs/plugin-vue-jsx':
         specifier: ^3.1.0
         version: 3.1.0(vite@5.1.5)(vue@3.4.21)
+      '@vue/eslint-config-prettier':
+        specifier: ^7.0.0
+        version: 7.1.0(eslint@8.57.0)(prettier@3.2.5)
       '@vue/eslint-config-typescript':
         specifier: ^12.0.0
         version: 12.0.0(eslint-plugin-vue@9.22.0)(eslint@8.57.0)(typescript@5.3.3)
@@ -1283,6 +1289,18 @@ packages:
     resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
     dev: false
 
+  /@vue/eslint-config-prettier@7.1.0(eslint@8.57.0)(prettier@3.2.5):
+    resolution: {integrity: sha512-Pv/lVr0bAzSIHLd9iz0KnvAr4GKyCEl+h52bc4e5yWuDVtLgFwycF7nrbWTAQAS+FU6q1geVd07lc6EWfJiWKQ==}
+    peerDependencies:
+      eslint: '>= 7.28.0'
+      prettier: '>= 2.0.0'
+    dependencies:
+      eslint: 8.57.0
+      eslint-config-prettier: 8.10.0(eslint@8.57.0)
+      eslint-plugin-prettier: 4.2.1(eslint-config-prettier@8.10.0)(eslint@8.57.0)(prettier@3.2.5)
+      prettier: 3.2.5
+    dev: true
+
   /@vue/eslint-config-typescript@12.0.0(eslint-plugin-vue@9.22.0)(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-StxLFet2Qe97T8+7L8pGlhYBBr8Eg05LPuTDVopQV6il+SK6qqom59BA/rcFipUef2jD8P2X44Vd8tMFytfvlg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -1637,6 +1655,13 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
 
+  /echarts@5.5.0:
+    resolution: {integrity: sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==}
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.5.0
+    dev: false
+
   /electron-to-chromium@1.4.692:
     resolution: {integrity: sha512-d5rZRka9n2Y3MkWRN74IoAsxR0HK3yaAt7T50e3iT9VZmCCQDT3geXUO5ZRMhDToa1pkCeQXuNo+0g+NfDOVPA==}
     dev: true
@@ -1708,6 +1733,15 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /eslint-config-prettier@8.10.0(eslint@8.57.0):
+    resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      eslint: 8.57.0
+    dev: true
+
   /eslint-config-prettier@9.1.0(eslint@8.57.0):
     resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==}
     hasBin: true
@@ -1717,6 +1751,23 @@ packages:
       eslint: 8.57.0
     dev: true
 
+  /eslint-plugin-prettier@4.2.1(eslint-config-prettier@8.10.0)(eslint@8.57.0)(prettier@3.2.5):
+    resolution: {integrity: sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      eslint: '>=7.28.0'
+      eslint-config-prettier: '*'
+      prettier: '>=2.0.0'
+    peerDependenciesMeta:
+      eslint-config-prettier:
+        optional: true
+    dependencies:
+      eslint: 8.57.0
+      eslint-config-prettier: 8.10.0(eslint@8.57.0)
+      prettier: 3.2.5
+      prettier-linter-helpers: 1.0.0
+    dev: true
+
   /eslint-plugin-prettier@5.1.3(eslint-config-prettier@9.1.0)(eslint@8.57.0)(prettier@3.2.5):
     resolution: {integrity: sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -2797,6 +2848,10 @@ packages:
       typescript: 5.3.3
     dev: true
 
+  /tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+    dev: false
+
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
     dev: true
@@ -3008,3 +3063,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+  /zrender@5.5.0:
+    resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==}
+    dependencies:
+      tslib: 2.3.0
+    dev: false

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;