feat: new WebUI for the main page, add MJ and SD drawing function pages

web/src/assets/css/chat-plus.css

@@ -13,11 +13,6 @@
   color: #fff;
   font-size: 20px;
 }
-#app .common-layout .el-aside .title-box .logo {
-  border-radius: 8px;
-  width: 35px;
-  height: 35px;
-}
 #app .common-layout .el-aside .title-box span {
   padding-top: 5px;
   padding-left: 10px;

web/src/assets/css/chat-plus.styl

@@ -17,14 +17,6 @@ $borderColor = #4676d0;
         display: flex;
         color: #ffffff;
         font-size: 20px;
-
-        .logo {
-          //background-color: #ffffff
-          border-radius: 8px;
-          width: 35px;
-          height: 35px;
-        }
-
         span {
           padding-top: 5px;
           padding-left: 10px;

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1693316408040') format('woff2'),
+  src: url('iconfont.woff2?t=1694420182193') format('woff2'),
-       url('iconfont.woff?t=1693316408040') format('woff'),
+       url('iconfont.woff?t=1694420182193') format('woff'),
-       url('iconfont.ttf?t=1693316408040') format('truetype');
+       url('iconfont.ttf?t=1694420182193') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,38 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-book:before {
+  content: "\e622";
+}
+
+.icon-vip-user:before {
+  content: "\e605";
+}
+
+.icon-vip:before {
+  content: "\e688";
+}
+
+.icon-cart:before {
+  content: "\e603";
+}
+
+.icon-image-list:before {
+  content: "\e601";
+}
+
+.icon-share:before {
+  content: "\e63e";
+}
+
+.icon-palette:before {
+  content: "\e6da";
+}
+
+.icon-palette-pen:before {
+  content: "\e60c";
+}
+
 .icon-image:before {
   content: "\e7de";
 }

web/src/assets/iconfont/iconfont.json

@@ -5,6 +5,62 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "11836501",
+      "name": "知识库",
+      "font_class": "book",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "1105",
+      "name": "认证用户",
+      "font_class": "vip-user",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "1473442",
+      "name": "VIP",
+      "font_class": "vip",
+      "unicode": "e688",
+      "unicode_decimal": 59016
+    },
+    {
+      "icon_id": "1306",
+      "name": "购物车空",
+      "font_class": "cart",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "1210",
+      "name": "多素材",
+      "font_class": "image-list",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "6438267",
+      "name": "分享",
+      "font_class": "share",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "8361893",
+      "name": "绘画",
+      "font_class": "palette",
+      "unicode": "e6da",
+      "unicode_decimal": 59098
+    },
+    {
+      "icon_id": "17832791",
+      "name": "绘图、调色盘",
+      "font_class": "palette-pen",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
     {
       "icon_id": "4766917",
       "name": "image",

web/src/components/Welcome.vue

@@ -55,9 +55,11 @@
 </template>
 <script setup>
 
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
+import {httpGet} from "@/utils/http";
+import {ElMessage} from "element-plus";
 
-const title = process.env.VUE_APP_TITLE
+const title = ref(process.env.VUE_APP_TITLE)
 
 const samples = ref([
   "用小学生都能听懂的术语解释什么是量子纠缠",
@@ -95,6 +97,14 @@ const capabilities = ref([
   }
 ])
 
+onMounted(() => {
+  httpGet("/api/admin/config/get?key=system").then(res => {
+    title.value = res.data.title
+  }).catch(e => {
+    ElMessage.error("获取系统配置失败：" + e.message)
+  })
+})
+
 const emits = defineEmits(['send']);
 const send = (text) => {
   emits('send', text)

web/src/router.js

@@ -22,13 +22,55 @@ const routes = [
                 props: true // 将路由参数传递给组件的 props
             },
             {
-                name: 'chat-export',
+                name: 'image-mj',
-                path: '/chat/export',
+                path: '/mj',
-                meta: {title: '导出会话记录'},
+                meta: {title: 'MidJourney 绘画中心'},
-                component: () => import('@/views/ChatExport.vue'),
+                component: () => import('@/views/ImageMj.vue'),
+            },
+            {
+                name: 'image-sd',
+                path: '/sd',
+                meta: {title: 'Stable Diffusion 绘画中心'},
+                component: () => import('@/views/ImageSd.vue'),
+            },
+            {
+                name: 'member',
+                path: '/member',
+                meta: {title: '会员充值中心'},
+                component: () => import('@/views/Member.vue'),
+            },
+            {
+                name: 'chat-role',
+                path: '/apps',
+                meta: {title: '应用中心'},
+                component: () => import('@/views/ChatRoles.vue'),
+            },
+            {
+                name: 'images',
+                path: '/images',
+                meta: {title: '绘画社区'},
+                component: () => import('@/views/Images.vue'),
+            },
+            {
+                name: 'user-invitation',
+                path: '/invite',
+                meta: {title: '推广计划'},
+                component: () => import('@/views/Invitation.vue'),
+            },
+            {
+                name: 'knowledge',
+                path: '/knowledge',
+                meta: {title: '我的知识库'},
+                component: () => import('@/views/Knowledge.vue'),
             },
         ]
     },
+    {
+        name: 'chat-export',
+        path: '/chat/export',
+        meta: {title: '导出会话记录'},
+        component: () => import('@/views/ChatExport.vue'),
+    },
     {
         name: 'login',
         path: '/login',

web/src/views/ChatPlus.vue

@@ -3,7 +3,6 @@
     <el-container>
       <el-aside>
         <div class="title-box">
-          <el-image :src="logo" class="logo"/>
           <span>{{ title }}</span>
         </div>
         <div class="chat-list">
@@ -285,7 +284,6 @@ import Welcome from "@/components/Welcome.vue";
 import ChatMidJourney from "@/components/ChatMidJourney.vue";
 
 const title = ref('ChatGPT-智能助手');
-const logo = '/images/logo.png';
 const rewardImg = ref('/images/reward.png')
 const models = ref([])
 const modelID = ref(0)
@@ -359,6 +357,12 @@ onMounted(() => {
     router.push('/login')
   });
 
+  httpGet("/api/admin/config/get?key=system").then(res => {
+    title.value = res.data.title
+  }).catch(e => {
+    ElMessage.error("获取系统配置失败：" + e.message)
+  })
+
   const clipboard = new Clipboard('.copy-reply');
   clipboard.on('success', () => {
     ElMessage.success('复制成功！');

web/src/views/ChatRoles.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+    <div class="inner">
+      <h1>MidJourney 绘画中心</h1>
+      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue"
+
+const winHeight = ref(window.innerHeight)
+</script>
+
+<style lang="stylus" scoped>
+.page-mj {
+  display: flex;
+  justify-content: center;
+  align-items center
+  background-color: #282c34;
+
+  .inner {
+    text-align center
+
+    h1 {
+      color: #202020;
+      font-size: 80px;
+      font-weight: bold;
+      letter-spacing: 0.1em;
+      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
+    }
+
+    h2 {
+      color #ffffff;
+      font-weight: bold;
+    }
+  }
+
+}
+</style>

web/src/views/Home.vue

@@ -1,6 +1,26 @@
 <template>
   <div class="home">
-    <div class="navigator"></div>
+    <div class="navigator">
+      <div class="logo">
+        <el-image :src="logo"/>
+
+        <div class="divider"></div>
+      </div>
+
+      <ul class="nav-items">
+        <li v-for="item in navs" :key="item.path">
+          <el-tooltip
+              effect="light"
+              :content="item.title"
+              placement="right"
+          >
+            <a @click="changeNav(item)" :class="item.path === curPath?'active':''">
+              <i :class="'iconfont icon-'+item.icon"></i>
+            </a>
+          </el-tooltip>
+        </li>
+      </ul>
+    </div>
     <div class="content">
       <router-view v-slot="{ Component }">
         <transition name="move" mode="out-in">
@@ -13,30 +33,95 @@
 
 <script setup>
 
-// const router = useRouter();
+import {useRouter} from "vue-router";
-// checkSession().then(() => {
+import {checkSession} from "@/action/session";
-//   if (isMobile()) {
+import {isMobile} from "@/utils/libs";
-//     router.push("/mobile")
+import {ref} from "vue";
-//   } else {
-//     router.push("/chat")
-//   }
-// }).catch(() => {
-//   router.push("/login")
-// })
 
+const router = useRouter();
+checkSession().then(() => {
+  if (isMobile()) {
+    router.push("/mobile")
+  } else {
+    router.push("/chat")
+  }
+}).catch(() => {
+  router.push("/login")
+})
+
+const logo = '/images/logo.png';
+const navs = ref([
+  {path: "/chat", icon: "wechat", title: "对话聊天"},
+  {path: "/mj", icon: "image", title: "MJ 绘画"},
+  {path: "/sd", icon: "palette", title: "SD 绘画"},
+  {path: "/apps", icon: "menu", title: "应用中心"},
+  {path: "/images", icon: "image-list", title: "绘画社区"},
+  {path: "/knowledge", icon: "book", title: "我的知识库"},
+  {path: "/member", icon: "vip-user", title: "会员计划"},
+  {path: "/invite", icon: "share", title: "推广计划"},
+])
+const curPath = ref(navs.value[0].path)
+
+const changeNav = (item) => {
+  curPath.value = item.path
+  router.push(item.path)
+}
 </script>
 
 <style lang="stylus" scoped>
 .home {
   display: flex;
-  background-color: #343540;
+  background-color: #25272D;
   height 100vh
   width 100%
 
   .navigator {
     display flex
-    width 30px
+    flex-flow column
+    width 48px
     padding 10px 6px
+    border-right: 1px solid #3c3c3c
+
+    .logo {
+      display flex
+      flex-flow column
+      align-items center
+      height 60px
+
+      .divider {
+        border-bottom 1px solid #4A4A4A
+        width 80%
+        height 10px
+      }
+    }
+
+    .nav-items {
+      margin-top 20px
+
+      li {
+        margin-bottom 15px
+
+        a {
+          color #DADBDC
+          background-color #40444A
+          border-radius 10px
+          width 44px
+          height 44px
+          display flex
+          justify-content center
+          align-items center
+          cursor pointer
+
+          .iconfont {
+            font-size 20px
+          }
+        }
+
+        a:hover, a.active {
+          color #58D3FF
+        }
+      }
+    }
   }
 
   .content {

web/src/views/ImageMj.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+    <div class="inner">
+      <h1>MidJourney 绘画中心</h1>
+      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue"
+
+const winHeight = ref(window.innerHeight)
+</script>
+
+<style lang="stylus" scoped>
+.page-mj {
+  display: flex;
+  justify-content: center;
+  align-items center
+  background-color: #282c34;
+
+  .inner {
+    text-align center
+
+    h1 {
+      color: #202020;
+      font-size: 80px;
+      font-weight: bold;
+      letter-spacing: 0.1em;
+      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
+    }
+
+    h2 {
+      color #ffffff;
+      font-weight: bold;
+    }
+  }
+
+}
+</style>

web/src/views/ImageSd.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+    <div class="inner">
+      <h1>Stable Diffusion 绘画中心</h1>
+      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue"
+
+const winHeight = ref(window.innerHeight)
+</script>
+
+<style lang="stylus" scoped>
+.page-mj {
+  display: flex;
+  justify-content: center;
+  align-items center
+  background-color: #282c34;
+
+  .inner {
+    text-align center
+
+    h1 {
+      color: #202020;
+      font-size: 80px;
+      font-weight: bold;
+      letter-spacing: 0.1em;
+      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
+    }
+
+    h2 {
+      color #ffffff;
+      font-weight: bold;
+    }
+  }
+
+}
+</style>

web/src/views/Images.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+    <div class="inner">
+      <h1>绘画作品广场</h1>
+      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue"
+
+const winHeight = ref(window.innerHeight)
+</script>
+
+<style lang="stylus" scoped>
+.page-mj {
+  display: flex;
+  justify-content: center;
+  align-items center
+  background-color: #282c34;
+
+  .inner {
+    text-align center
+
+    h1 {
+      color: #202020;
+      font-size: 80px;
+      font-weight: bold;
+      letter-spacing: 0.1em;
+      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
+    }
+
+    h2 {
+      color #ffffff;
+      font-weight: bold;
+    }
+  }
+
+}
+</style>

web/src/views/Invitation.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+    <div class="inner">
+      <h1>会员推广计划</h1>
+      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue"
+
+const winHeight = ref(window.innerHeight)
+</script>
+
+<style lang="stylus" scoped>
+.page-mj {
+  display: flex;
+  justify-content: center;
+  align-items center
+  background-color: #282c34;
+
+  .inner {
+    text-align center
+
+    h1 {
+      color: #202020;
+      font-size: 80px;
+      font-weight: bold;
+      letter-spacing: 0.1em;
+      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
+    }
+
+    h2 {
+      color #ffffff;
+      font-weight: bold;
+    }
+  }
+
+}
+</style>

web/src/views/Knowledge.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+    <div class="inner">
+      <h1>会员知识库搜索</h1>
+      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue"
+
+const winHeight = ref(window.innerHeight)
+</script>
+
+<style lang="stylus" scoped>
+.page-mj {
+  display: flex;
+  justify-content: center;
+  align-items center
+  background-color: #282c34;
+
+  .inner {
+    text-align center
+
+    h1 {
+      color: #202020;
+      font-size: 80px;
+      font-weight: bold;
+      letter-spacing: 0.1em;
+      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
+    }
+
+    h2 {
+      color #ffffff;
+      font-weight: bold;
+    }
+  }
+
+}
+</style>

web/src/views/Member.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+    <div class="inner">
+      <h1>会员充值中心</h1>
+      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue"
+
+const winHeight = ref(window.innerHeight)
+</script>
+
+<style lang="stylus" scoped>
+.page-mj {
+  display: flex;
+  justify-content: center;
+  align-items center
+  background-color: #282c34;
+
+  .inner {
+    text-align center
+
+    h1 {
+      color: #202020;
+      font-size: 80px;
+      font-weight: bold;
+      letter-spacing: 0.1em;
+      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
+    }
+
+    h2 {
+      color #ffffff;
+      font-weight: bold;
+    }
+  }
+
+}
+</style>