refactor: 更新 iconfont 图标，增加打赏二维码弹窗

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1687320603149') format('woff2'),
+  src: url('iconfont.woff2?t=1687330009953') format('woff2'),
-       url('iconfont.woff?t=1687320603149') format('woff'),
+       url('iconfont.woff?t=1687330009953') format('woff'),
-       url('iconfont.ttf?t=1687320603149') format('truetype');
+       url('iconfont.ttf?t=1687330009953') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-wechat-pay:before {
+  content: "\e639";
+}
+
+.icon-donate:before {
+  content: "\e7ee";
+}
+
+.icon-reward:before {
+  content: "\e6c7";
+}
+
+.icon-bell:before {
+  content: "\e887";
+}
+
 .icon-home:before {
   content: "\e6cb";
 }

web/src/assets/iconfont/iconfont.json

@@ -5,6 +5,34 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1487626",
+      "name": "微信支付",
+      "font_class": "wechat-pay",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "7791019",
+      "name": "捐赠",
+      "font_class": "donate",
+      "unicode": "e7ee",
+      "unicode_decimal": 59374
+    },
+    {
+      "icon_id": "14593731",
+      "name": "打赏",
+      "font_class": "reward",
+      "unicode": "e6c7",
+      "unicode_decimal": 59079
+    },
+    {
+      "icon_id": "8623603",
+      "name": "bell",
+      "font_class": "bell",
+      "unicode": "e887",
+      "unicode_decimal": 59527
+    },
     {
       "icon_id": "673799",
       "name": "首页",

web/src/components/admin/AdminHeader.vue

@@ -9,6 +9,7 @@
         <Fold/>
       </el-icon>
     </div>
+
     <div class="logo">后台管理系统</div>
     <div class="header-right">
       <div class="header-user-con">
@@ -19,14 +20,14 @@
               :content="message ? `有${message}条未读消息` : `消息中心`"
               placement="bottom"
           >
-            <i class="el-icon-lx-notice"></i>
+            <i class="iconfont icon-bell"></i>
           </el-tooltip>
           <span class="btn-bell-badge" v-if="message"></span>
         </div>
         <!-- 用户头像 -->
-        <el-avatar class="user-avatar" :size="30" :src="imgUrl"/>
+        <el-avatar class="user-avatar" :size="30" :src="avatar"/>
         <!-- 用户名下拉菜单 -->
-        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
+        <el-dropdown class="user-name" :hide-on-click="true" trigger="click">
 					<span class="el-dropdown-link">
 						{{ username }}
 						<el-icon class="el-icon--right">
@@ -35,27 +36,56 @@
 					</span>
           <template #dropdown>
             <el-dropdown-menu>
-              <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
+
-                <el-dropdown-item>项目仓库</el-dropdown-item>
+              <a href="https://github.com/yangjian102621/chatgpt-plus" target="_blank">
+                <el-dropdown-item>
+                  <i class="iconfont icon-github"></i>
+                  <span>ChatGPT-Plus-V3</span>
+                </el-dropdown-item>
               </a>
-              <el-dropdown-item command="user">个人中心</el-dropdown-item>
+              <el-dropdown-item @click="showDialog = true">
-              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
+                <i class="iconfont icon-reward"></i>
+                <span>打赏作者</span>
+              </el-dropdown-item>
+              <el-dropdown-item divided @click="logout">
+                <i class="iconfont icon-logout"></i>
+                <span>退出登录</span>
+              </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
       </div>
     </div>
+
+    <el-dialog
+        v-model="showDialog"
+        :show-close="true"
+        custom-class="donate-dialog"
+        width="400px"
+        title="请作者喝杯咖啡"
+    >
+      <el-alert type="info" :closable="false">
+        <p>如果你觉得这个项目对你有帮助，并且情况允许的话，可以请作者喝杯咖啡，非常感谢你的支持～</p>
+      </el-alert>
+      <p>
+        <el-image :src="donateImg"/>
+      </p>
+    </el-dialog>
   </div>
 </template>
 <script setup>
 import {onMounted, ref} from 'vue';
 import {useSidebarStore} from '@/store/sidebar';
 import {useRouter} from 'vue-router';
-import imgUrl from '../../assets/img/avatar.jpg';
 import {ArrowDown, Expand, Fold} from "@element-plus/icons-vue";
+import {httpGet} from "@/utils/http";
+import {ElMessage} from "element-plus";
 
 const message = ref(5);
 const username = ref('极客学长')
+const avatar = ref('/images/user-info.jpg')
+const donateImg = ref('/images/wechat-pay.png')
+const showDialog = ref(false)
 const sidebar = useSidebarStore();
 // 侧边栏折叠
 const collapseChange = () => {
@@ -68,16 +98,16 @@ onMounted(() => {
   }
 });
 
-// 用户名下拉菜单选择事件
 const router = useRouter();
-const handleCommand = (command) => {
+const logout = function () {
-  if (command === 'logout') {
+  httpGet("/api/admin/logout").then(() => {
-    localStorage.removeItem('ms_username');
+    router.push('/admin/login')
-    router.push('/login');
+  }).catch((e) => {
-  }
+    ElMessage.error("注销失败: " + e.message);
-};
+  })
+}
 </script>
-<style scoped>
+<style scoped lang="stylus">
 .header {
   position: relative;
   box-sizing: border-box;
@@ -85,74 +115,67 @@ const handleCommand = (command) => {
   height: 70px;
   font-size: 22px;
   color: #fff;
-}
 
-.collapse-btn {
+  .collapse-btn {
-  display: flex;
+    display: flex;
-  justify-content: center;
+    justify-content: center;
-  align-items: center;
+    align-items: center;
-  height: 100%;
+    height: 100%;
-  float: left;
+    float: left;
-  padding: 0 21px;
+    padding: 0 21px;
-  cursor: pointer;
+    cursor: pointer;
-}
+  }
 
-.header .logo {
+  .logo {
-  float: left;
+    float: left;
-  width: 250px;
+    width: 250px;
-  line-height: 70px;
+    line-height: 70px;
-}
+  }
 
-.header-right {
+  .header-right {
-  float: right;
+    float: right;
-  padding-right: 50px;
+    padding-right: 50px;
-}
 
-.header-user-con {
+    .header-user-con {
-  display: flex;
+      display: flex;
-  height: 70px;
+      height: 70px;
-  align-items: center;
+      align-items: center;
-}
 
-.btn-fullscreen {
+      .btn-bell {
-  transform: rotate(45deg);
+        position: relative;
-  margin-right: 5px;
+        width: 30px;
-  font-size: 24px;
+        height: 30px;
-}
+        text-align: center;
+        border-radius: 15px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
 
-.btn-bell,
+        .btn-bell-badge {
-.btn-fullscreen {
+          position: absolute;
-  position: relative;
+          right: 4px;
-  width: 30px;
+          top: 0;
-  height: 30px;
+          width: 8px;
-  text-align: center;
+          height: 8px;
-  border-radius: 15px;
+          border-radius: 4px;
-  cursor: pointer;
+          background: #f56c6c;
-  display: flex;
+          color: #fff;
-  align-items: center;
+        }
-}
 
-.btn-bell-badge {
+        .icon-bell {
-  position: absolute;
+          font-size: 24px;
-  right: 4px;
+        }
-  top: 0px;
+      }
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-  background: #f56c6c;
-  color: #fff;
-}
 
-.btn-bell .el-icon-lx-notice {
+      .user-name {
-  color: #fff;
+        margin-left: 10px;
-}
+      }
 
-.user-name {
+      .user-avatar {
-  margin-left: 10px;
+        margin-left: 20px;
-}
+      }
-
+    }
-.user-avatar {
+  }
-  margin-left: 20px;
 }
 
 .el-dropdown-link {
@@ -164,5 +187,25 @@ const handleCommand = (command) => {
 
 .el-dropdown-menu__item {
   text-align: center;
+
+  .icon-reward {
+    font-size 18px;
+    font-weight bold;
+    color #F56C6C
+  }
+}
+</style>
+
+<style lang="stylus">
+.donate-dialog {
+  .el-dialog__body {
+    text-align center;
+
+    .el-alert__description {
+      text-align left
+      font-size 14px;
+      line-height 1.5
+    }
+  }
 }
 </style>

web/src/views/admin/demo/Editor.vue

@@ -10,11 +10,16 @@
 </template>
 
 <script setup>
-import {MdEditor} from 'md-editor-v3';
+import MdEditor from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
 import {ref} from "vue";
 
-const text = ref('Hello Editor!');
+const text = ref(`
+ChatGPT-PLUS 是基于 OpenAI API 实现的 ChatGPT Web 系统。主要有如下特性：
+* 完整的开源系统，前端应用和后台管理系统皆可开箱即用。
+* 聊天体验跟 ChatGPT 官方版本完全一致。
+* 内置了各种预训练好的角色，比如小红书写手，英语翻译大师，苏格拉底，孔子，乔布斯，周报助手等。轻松满足你的各种聊天和应用需求。
+`);
 const onUploadImg = (files) => {
   console.log(files);
 };

web/src/views/admin/demo/Table.vue

@@ -42,10 +42,10 @@
         <el-table-column prop="date" label="注册时间"></el-table-column>
         <el-table-column label="操作" width="220" align="center">
           <template #default="scope">
-            <el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
+            <el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)">
               编辑
             </el-button>
-            <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" v-permiss="16">
+            <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)">
               删除
             </el-button>
           </template>
@@ -94,7 +94,7 @@ const query = reactive({
   pageIndex: 1,
   pageSize: 10
 });
-const tableData = ref();
+const tableData = ref([]);
 const pageTotal = ref(0);
 // 获取表格数据
 const getData = () => {