feat: admin login page is ready

api/go/handler/admin/admin_handler.go

@@ -5,6 +5,7 @@ import (
 	"chatplus/core/types"
 	"chatplus/handler"
 	logger2 "chatplus/logger"
+	"chatplus/utils"
 	"chatplus/utils/resp"
 
 	"github.com/gin-contrib/sessions"
@@ -35,7 +36,12 @@ func (h *ManagerHandler) Login(c *gin.Context) {
 	}
 	manager := h.App.AppConfig.Manager
 	if data.Username == manager.Username && data.Password == manager.Password {
-		manager.Password = "" // 清空密码
+		err := utils.SetLoginAdmin(c, manager)
+		if err != nil {
+			resp.ERROR(c, "Save session failed")
+			return
+		}
+		manager.Password = "" // 清空密码]
 		resp.SUCCESS(c, manager)
 	} else {
 		resp.ERROR(c, "用户名或者密码错误")

api/go/main.go

@@ -128,6 +128,7 @@ func main() {
 			group := s.Engine.Group("/api/admin/")
 			group.POST("login", h.Login)
 			group.GET("logout", h.Logout)
+			group.GET("session", h.Session)
 		}),
 		fx.Invoke(func(s *core.AppServer, h *admin.ApiKeyHandler) {
 			group := s.Engine.Group("/api/admin/apikey/")

api/go/utils/user.go

@@ -19,7 +19,7 @@ func SetLoginUser(c *gin.Context, user model.User) error {
 
 func SetLoginAdmin(c *gin.Context, admin types.Manager) error {
 	session := sessions.Default(c)
-	session.Set(types.SessionAdmin, admin)
+	session.Set(types.SessionAdmin, admin.Username)
 	return session.Save()
 }
 

web/.env.production

@@ -1,2 +1,3 @@
 VUE_APP_API_HOST=
 VUE_APP_WS_HOST=
+VUE_APP_BASE_URL=

web/src/actions/chat.js

@@ -1,3 +0,0 @@
-/**
- * actions for chat page
- */

web/src/main.js

@@ -18,11 +18,12 @@ const routes = [
     {name: 'register', path: '/register', component: Register, meta: {title: '用户注册'}},
     {name: 'plus', path: '/chat', component: ChatPlus, meta: {title: 'ChatGPT-智能助手V3'}},
     {name: 'admin', path: '/admin', component: Admin, meta: {title: 'Chat-Plus 控制台'}},
-    {name: 'admin/login', path: '/admin/login', component: AdminLogin, meta: {title: 'Chat-Plus 控制台登录'}},
+    {name: 'admin-login', path: '/admin/login', component: AdminLogin, meta: {title: 'Chat-Plus 控制台登录'}},
     {name: 'test', path: '/test', component: TestPage, meta: {title: '测试页面'}},
     {name: 'NotFound', path: '/:all(.*)', component: NotFound, meta: {title: '页面没有找到'}},
 ]
 
+// console.log(MY_VARIABLE)
 const router = createRouter({
     history: createWebHistory(),
     routes: routes,

web/src/utils/storage.js

@@ -5,20 +5,14 @@
  */
 
 const SessionUserKey = 'LOGIN_USER';
-const SessionAdminKey = 'LOGIN_ADMIN';
 
 export function getSessionId() {
     const user = getLoginUser();
     return user ? user['session_id'] : '';
 }
 
-export function getLoginAdmin() {
-    const value = sessionStorage.getItem(SessionAdminKey);
-    if (value) {
-        return JSON.parse(value);
-    } else {
-        return null;
-    }
+export function removeLoginUser() {
+    sessionStorage.removeItem(SessionUserKey)
 }
 
 export function getLoginUser() {
@@ -33,7 +27,3 @@ export function getLoginUser() {
 export function setLoginUser(user) {
     sessionStorage.setItem(SessionUserKey, JSON.stringify(user))
 }
-
-export function setLoginAdmin(admin) {
-    sessionStorage.setItem(SessionAdminKey, JSON.stringify(admin))
-}

web/src/views/ChatPlus.vue

@@ -183,9 +183,9 @@
       </el-main>
     </el-container>
 
-    <config-dialog :show="showConfigDialog" :models="models" @hide="showConfigDialog = false"
+    <config-dialog v-if="user" :show="showConfigDialog" :models="models" @hide="showConfigDialog = false"
                    @update-user="updateUser"/>
-    <password-dialog :show="showPasswordDialog" @hide="showPasswordDialog = false" @logout="logout"/>
+    <password-dialog v-if="user" :show="showPasswordDialog" @hide="showPasswordDialog = false" @logout="logout"/>
   </div>
 
 
@@ -200,7 +200,6 @@ import {
   Close,
   Delete,
   Edit,
-  Monitor,
   Plus, Promotion,
   RefreshRight,
   Search,
@@ -211,7 +210,7 @@ import 'highlight.js/styles/a11y-dark.css'
 import {dateFormat, randString, removeArrayItem, renderInputText, UUID} from "@/utils/libs";
 import {ElMessage, ElMessageBox} from "element-plus";
 import hl from "highlight.js";
-import {getLoginUser, getSessionId} from "@/utils/storage";
+import {getLoginUser, getSessionId, removeLoginUser} from "@/utils/storage";
 import {httpGet, httpPost} from "@/utils/http";
 import {useRouter} from "vue-router";
 import Clipboard from "clipboard";
@@ -269,15 +268,15 @@ if (!user.value) {
       ElMessage.error('复制失败！');
     })
   });
-}
 
-// 加载系统配置
-httpGet('/api/config/get?key=system').then(res => {
+  // 加载系统配置
+  httpGet('/api/config/get?key=system').then(res => {
     title.value = res.data.title;
     models.value = res.data.models;
-}).catch(e => {
+  }).catch(e => {
     ElMessage.error("加载系统配置失败: " + e.message)
-})
+  })
+}
 
 const checkSession = function () {
   return new Promise((resolve, reject) => {
@@ -631,6 +630,7 @@ const clearAllChats = function () {
 const logout = function () {
   activelyClose.value = true;
   httpGet('/api/user/logout').then(() => {
+    removeLoginUser();
     router.push('login');
   }).catch(() => {
     ElMessage.error('注销失败！');
@@ -720,8 +720,10 @@ const updateUser = function (data) {
 }
 </script>
 
-<style lang="stylus">
+<style scoped lang="stylus">
 @import '@/assets/iconfont/iconfont.css';
+$sideBgColor = #252526;
+$borderColor = #4676d0;
 #app {
   height: 100%;
 
@@ -729,8 +731,8 @@ const updateUser = function (data) {
     height: 100%;
 
     // left side
-
     .el-aside {
+      background-color: $sideBgColor;
       .title-box {
         padding: 6px 10px;
         display: flex;
@@ -859,19 +861,14 @@ const updateUser = function (data) {
               display flex
 
               .el-image {
-                display flex
-
-                img {
                 width: 20px;
                 height: 20px;
                 border-radius: 5px;
               }
-              }
-
 
               .username {
                 display flex
-                line-height 24px;
+                line-height 22px;
                 width 230px;
                 padding-left 10px;
 
@@ -890,6 +887,8 @@ const updateUser = function (data) {
 
     .el-main {
       overflow: hidden;
+      --el-main-padding: 0;
+      margin: 0;
 
       .chat-head {
         width: 100%;

web/src/views/admin/Admin.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="common-layout">
+  <div class="admin-body common-layout">
     <el-container>
       <el-container>
         <el-aside
@@ -13,7 +13,7 @@
             <span class="text">{{ title }}</span>
             <span
                 class="fold"
-                @click="hideSidebar()"
+                @click="showSidebar = !showSidebar"
                 :style="{ right: foldIconRight + 'px' }"
             >
               <el-icon>
@@ -44,8 +44,16 @@
             </li>
           </ul>
 
-          <el-row class="tool-box">
-            <el-button type="primary" plain @click="logout" v-show="isLogin">退出登录</el-button>
+          <el-row class="nav-footer">
+            <div class="source">
+              <i class="iconfont icon-github"></i>
+              <el-link href="https://github.com/yangjian102621/chatgpt-plus" target="_blank">ChatGPT-Plus-V3</el-link>
+            </div>
+
+            <div class="logout" @click="logout">
+              <i class="iconfont icon-logout"></i>
+              <span>退出登录</span>
+            </div>
           </el-row>
         </el-aside>
 
@@ -80,47 +88,13 @@
             </div>
           </div>
         </el-main>
-
-        <el-dialog
-            v-model="showDialog"
-            title="管理后台登录"
-            width="30%"
-            :destroy-on-close="true"
-        >
-          <el-form :model="user" label-width="80px">
-            <el-form-item label="用户名：">
-              <el-input
-                  v-model.trim="user.username"
-                  autocomplete="off"
-                  placeholder="请输入用户名"
-              />
-            </el-form-item>
-
-            <el-form-item label="密码：">
-              <el-input
-                  v-model.trim="user.password"
-                  autocomplete="off"
-                  type="password"
-                  placeholder="请输入密码"
-                  @keyup="loginInputKeyup"
-              />
-            </el-form-item>
-          </el-form>
-
-          <template #footer>
-            <span class="dialog-footer">
-              <el-button @click="showDialog = false">取消</el-button>
-              <el-button type="primary" @click="login">提交</el-button>
-            </span>
-          </template>
-        </el-dialog>
       </el-container>
     </el-container>
   </div>
 </template>
 
-<script>
-import {defineComponent} from 'vue'
+<script setup>
+import {computed, defineComponent, onMounted, ref} from 'vue'
 import {Fold, Menu} from "@element-plus/icons-vue"
 import XWelcome from "@/views/admin/Welcome.vue";
 import SysConfig from "@/views/admin/SysConfig.vue";
@@ -130,17 +104,12 @@ import RoleList from "@/views/admin/RoleList.vue";
 import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {setLoginUser} from "@/utils/storage";
+import {useRouter} from "vue-router";
 
-
-export default defineComponent({
-  name: "XAdmin",
-  components: {RoleList, UserList, SysConfig, XWelcome, Fold, Menu},
-  data() {
-    return {
-      title: "Chat-Plus 控制台",
-      logo: 'images/logo.png',
-      user: {},
-      navs: [
+const title = ref('Chat-Plus 控制台')
+const logo = ref('images/logo.png')
+const user = ref({})
+const navs = ref([
   {
     id: 1,
     title: '系统配置',
@@ -159,140 +128,90 @@ export default defineComponent({
     tab: 'role',
     active: false,
   }
-      ],
+])
+const tabs= ref([])
+const curNav = ref(null)
+const curTab = ref('welcome')
+const winHeight = ref(window.innerHeight)
+const showSidebar = ref(true)
 
-      curNav: null,
-      curTab: 'welcome',
-      tabs: [],
-      isLogin: false,
+const sideWidth = computed(() =>{
+  return showSidebar.value ? 250 : 30
+})
+const foldIconRight = computed(() =>{
+  return showSidebar.value ? 3 : 0
+})
+const nodeListPaddingLeft = computed(() =>{
+  return showSidebar.value ?  20 : 5
+})
+const router = useRouter()
 
-      showDialog: false,
-
-      // window height
-      winHeight: window.innerHeight,
-      showSidebar: true
-    }
-  },
-
-  computed: {
-    sideWidth: function () {
-      return this.showSidebar ? 250 : 30
-    },
-
-    foldIconRight: function () {
-      return this.showSidebar ? 3 : 0
-    },
-
-    nodeListPaddingLeft: function () {
-      return this.showSidebar ? 20 : 5
-    }
-  },
-
-  mounted: function () {
-    // bind window resize event
+onMounted(() => {
   window.addEventListener("resize", function () {
-      this.winHeight = window.innerHeight
+    winHeight.value = window.innerHeight
   })
-    this.checkSession()
-  },
 
-  methods: {
-    checkSession: function () {
-      httpGet("/api/session/get").then(() => {
-        this.isLogin = true
-      }).catch(() => {
-        this.showDialog = true
+  httpGet("/api/admin/session").catch(() => {
+   router.push('/admin/login')
   })
-    },
+})
 
-    // 登录输入框输入事件处理
-    loginInputKeyup: function (e) {
-      if (e.keyCode === 13) {
-        this.login();
-      }
-    },
-
-    // 登录
-    login: function () {
-      if (!this.user.username || !this.user.password) {
-        ElMessage.error('请输入用户名和密码')
-        return
-      }
-      httpPost('/api/admin/login', this.user).then((res) => {
-        setLoginUser(res.data)
-        this.showDialog = false
-        this.isLogin = true
-        this.user = {}
+const logout = function () {
+  httpGet("/api/admin/logout").then(() => {
+    router.push('/admin/login')
   }).catch((e) => {
-        ElMessage.error('登录失败，' + e.message)
+    ElMessage.error("注销失败: "+ e.message);
   })
-    },
+}
 
-    logout: function () {
-      httpPost("/api/logout", {opt: "logout"}).then(() => {
-        this.checkSession();
-        this.isLogin = false
-      }).catch(() => {
-        ElMessage.error("注销失败");
-      })
-    },
-
-    arrayContains(array, value, compare) {
-      return arrayContains(array, value, compare);
-    },
-
-    hideSidebar: function () {
-      this.showSidebar = !this.showSidebar
-    },
-
-    // 添加 tab 窗口
-    addTab: function (nav) {
-      if (this.curNav) {
-        this.curNav.active = false
+// 添加 tab 窗口
+const addTab= function (nav) {
+  if (curNav.value) {
+    curNav.value.active = false
   }
-      this.curNav = nav;
-      this.curNav.active = true;
-      this.curTab = nav.tab;
-      if (!arrayContains(this.tabs, nav.tab)) {
+  nav.active = true
+  curNav.value = nav;
+  curTab.value = nav.tab;
+  if (!arrayContains(tabs.value, nav.tab)) {
     this.tabs.push(nav.tab);
   }
-    },
+}
 
-    changeTab: function (name) {
-      for (let i = 0; i < this.navs.length; i++) {
-        if (this.navs[i].tab === name) {
-          this.curNav.active = false
-          this.curNav = this.navs[i];
-          this.curNav.active = true;
+// 切换 tab 窗口
+const changeTab= function (name) {
+  for (let i = 0; i < navs.value.length; i++) {
+    let _nav = navs.value[i]
+    if (_nav.tab === name) {
+      curNav.value.active = false // 取消上一个 active 窗口的激活状态
+      _nav.active = true
+      curNav.value = _nav;
       break;
     }
   }
-    },
+}
 
-    // 删除 tab 窗口
-    removeTab: function (name) {
-      this.tabs = removeArrayItem(this.tabs, name);
-      if (this.tabs.length === 0) {
-        this.curTab = 'welcome';
+// 删除 tab 窗口
+const removeTab= function (name) {
+  tabs.value = removeArrayItem(tabs.value, name);
+  if (tabs.value.length === 0) {
+    curTab.value = 'welcome';
     return;
   }
 
-      for (let i = 0; i < this.navs.length; i++) {
-        if (this.navs[i].tab === this.tabs[this.tabs.length - 1]) {
-          this.addTab(this.navs[i]);
+  for (let i = 0; i < navs.value.length; i++) {
+    if (navs.value[i].tab === tabs.value[tabs.value.length - 1]) {
+      addTab(navs.value[i]);
     }
   }
 
-    }
-  },
-
-})
+}
 </script>
 
-<style lang="stylus">
+<style scoped lang="stylus">
 $sideBgColor = #252526;
 $borderColor = #4676d0;
-.el-aside {
+.admin-body {
+  .el-aside {
     background-color: $sideBgColor;
 
     .title {
@@ -343,7 +262,7 @@ $borderColor = #4676d0;
 
       li {
         line-height: 40px;
-      color: #aaa;
+        color: #ffffff;
         font-size: 14px;
         cursor: pointer;
         padding: 0 10px 0 10px;
@@ -365,14 +284,31 @@ $borderColor = #4676d0;
       }
     }
 
-  .tool-box {
-    display flex
-    justify-content center
+    .nav-footer {
+      flex-direction column
+      div {
         padding 10px 20px;
-  }
-}
+        font-size 14px;
+        color #aaaaaa
 
-.el-main {
+        .el-link {
+          color #aaaaaa
+        }
+
+        .iconfont {
+          margin-right 5px
+          position relative
+          top 1px
+        }
+      }
+
+      .logout {
+        cursor pointer
+      }
+    }
+  }
+
+  .el-main {
     --el-main-padding: 0;
     margin: 0;
     background-image url("~@/assets/img/bg_01.jpeg")
@@ -392,5 +328,9 @@ $borderColor = #4676d0;
       }
 
     }
+  }
 }
+
+
+
 </style>

web/src/views/admin/Login.vue

@@ -75,7 +75,7 @@ const login = function () {
 
   httpPost('/api/admin/login', {username: username.value.trim(), password: password.value.trim()}).then((res) => {
     setLoginUser(res.data)
-    router.push("admin")
+    router.push("/admin")
   }).catch((e) => {
     ElMessage.error('登录失败，' + e.message)
   })

web/src/views/admin/Welcome.vue

@@ -4,22 +4,14 @@
   </div>
 </template>
 
-<script>
-import {defineComponent} from "vue"
+<script setup>
+import {defineComponent, onMounted, ref} from "vue"
 
-export default defineComponent({
-  name: 'XWelcome',
-  data() {
-    return {
-      winHeight: window.innerHeight,
-    }
-  },
-  mounted: function () {
-    const that = this
+const winHeight = ref(window.innerHeight)
+onMounted(() => {
   window.addEventListener("resize", function () {
-      that.winHeight = window.innerHeight
+    winHeight.value = window.innerHeight
   })
-  }
 })
 </script>
 

web/vue.config.js

@@ -10,16 +10,11 @@ module.exports = defineConfig({
         },
         plugins: [
             new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})
-        ],
-        // resolve: {
-        //     fallback: {
-        //         fs: false,
-        //         path: require.resolve('path-browserify')
-        //     }
-        // }
+        ]
     },
 
-    publicPath: '/',
+    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
+
     outputDir: 'dist',
     crossorigin: "anonymous",
     devServer: {