feat: add samples and function introduce in welcome page

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1691029402206') format('woff2'),
-       url('iconfont.woff?t=1691029402206') format('woff'),
-       url('iconfont.ttf?t=1691029402206') format('truetype');
+  src: url('iconfont.woff2?t=1691463643989') format('woff2'),
+       url('iconfont.woff?t=1691463643989') format('woff'),
+       url('iconfont.ttf?t=1691463643989') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-plugin:before {
+  content: "\e69d";
+}
+
+.icon-quick-start:before {
+  content: "\e677";
+}
+
+.icon-control:before {
+  content: "\e69e";
+}
+
+.icon-bug:before {
+  content: "\e645";
+}
+
 .icon-export:before {
   content: "\e791";
 }

web/src/assets/iconfont/iconfont.js:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4125778
+HostUrl=https://www.iconfont.cn/api/project/download.zip?spm=a313x.manage_type_myprojects.1998910419.d7543c303.3c973a816X8Dv0&pid=4125778&ctoken=jiQU41iUGSlzlFzLGolvuh03

web/src/assets/iconfont/iconfont.json

@@ -5,6 +5,34 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "5244045",
+      "name": "插件",
+      "font_class": "plugin",
+      "unicode": "e69d",
+      "unicode_decimal": 59037
+    },
+    {
+      "icon_id": "8893244",
+      "name": "高效率 copy",
+      "font_class": "quick-start",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
+    {
+      "icon_id": "16480872",
+      "name": "插件功能",
+      "font_class": "control",
+      "unicode": "e69e",
+      "unicode_decimal": 59038
+    },
+    {
+      "icon_id": "22187612",
+      "name": "缺陷管理",
+      "font_class": "bug",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
     {
       "icon_id": "4765958",
       "name": "export",

web/src/components/Welcome.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="welcome">
+    <div class="container">
+      <h1 class="title">ChatGPT-PLUS</h1>
+
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <div class="grid-content">
+            <div class="item-title">
+              <div><i class="iconfont icon-quick-start"></i></div>
+              <div>小试牛刀</div>
+            </div>
+
+            <div class="item-list">
+              <ul>
+                <li v-for="item in samples"><a @click="send(item)">{{ item }}</a></li>
+              </ul>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="grid-content">
+            <div class="item-title">
+              <div><i class="iconfont icon-plugin"></i></div>
+              <div>插件增强</div>
+            </div>
+
+            <div class="item-list">
+              <ul>
+                <li v-for="item in plugins"><a @click="send(item.value)">{{ item.text }}</a></li>
+              </ul>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="grid-content">
+            <div class="item-title">
+              <div><i class="iconfont icon-control"></i></div>
+              <div>能力扩展</div>
+            </div>
+
+            <div class="item-list">
+              <ul>
+                <li v-for="item in capabilities">{{ item }}</li>
+              </ul>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script setup>
+
+import {ref} from "vue";
+
+const samples = ref([
+  "用小学生都能听懂的术语解释什么是量子纠缠",
+  "能给一位6岁男孩的生日会提供一些创造性的建议吗？",
+  "如何用 Go 语言实现支持代理 Http client 请求?"
+])
+
+const plugins = ref([
+  {
+    value: "今日早报",
+    text: "今日早报：获取当天全球的热门新闻事件列表"
+  },
+  {
+    value: "微博热搜",
+    text: "微博热搜：新浪微博热搜榜，微博当日热搜榜单"
+  },
+  {
+    value: "今日头条",
+    text: "今日头条：给用户推荐当天的头条新闻，周榜热文"
+  }
+])
+
+const capabilities = ref([
+  "轻松扮演翻译专家，程序员，AI 女友，文案高手...",
+  "国产大语言模型支持，GLM2 模型接入中",
+  "Midjourney, Stable Diffusion AI 绘画支持"
+])
+
+const emits = defineEmits(['send']);
+const send = (text) => {
+  emits('send', text)
+}
+</script>
+<style scoped lang="stylus">
+.welcome {
+  text-align center
+  display flex
+  justify-content center
+  margin-top 8vh
+
+  .container {
+    max-width 768px;
+    width 100%
+
+    .title {
+      font-size: 2.25rem
+      line-height: 2.5rem
+      font-weight 600
+      margin-bottom: 4rem
+    }
+
+    .grid-content {
+      .item-title {
+        div {
+          padding 6px 10px;
+
+          .iconfont {
+            font-size 24px;
+          }
+        }
+      }
+
+      .item-list {
+        ul {
+          padding 10px;
+
+          li {
+            font-size 14px;
+            padding .75rem
+            border-radius 5px;
+            background-color: rgba(247, 247, 248, 1);
+
+            line-height 1.5
+            color #666666
+
+            a {
+              cursor pointer
+              display block
+              width 100%
+            }
+            margin-top 10px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/ChatPlus.vue

@@ -149,7 +149,10 @@
           <div>
             <div id="container">
               <div class="chat-box" id="chat-box" :style="{height: chatBoxHeight+'px'}">
-                <div v-for="item in chatData" :key="item.id">
+                <div v-if="showHello">
+                  <welcome @send="autofillPrompt"/>
+                </div>
+                <div v-for="item in chatData" :key="item.id" v-else>
                   <chat-prompt
                       v-if="item.type==='prompt'"
                       :icon="item.icon"
@@ -187,7 +190,7 @@
               <div class="input-box">
                 <div class="input-container">
                   <el-input
-                      ref="text-input"
+                      ref="textInput"
                       v-model="prompt"
                       v-on:keydown="inputKeyDown"
                       autofocus
@@ -273,6 +276,7 @@ import PasswordDialog from "@/components/PasswordDialog.vue";
 import {checkSession} from "@/action/session";
 import BindMobile from "@/components/BindMobile.vue";
 import RewardVerify from "@/components/RewardVerify.vue";
+import Welcome from "@/components/Welcome.vue";
 
 const title = ref('ChatGPT-智能助手');
 const logo = 'images/logo.png';
@@ -298,6 +302,8 @@ const showBindMobileDialog = ref(false);
 const showRewardDialog = ref(false);
 const showRewardVerifyDialog = ref(false);
 const isLogin = ref(false)
+const showHello = ref(true)
+const textInput = ref(null)
 
 if (isMobile()) {
   router.replace("/mobile")
@@ -621,6 +627,13 @@ const inputKeyDown = function (e) {
     sendMessage();
   }
 }
+
+// 自动填充 prompt
+const autofillPrompt = (text) => {
+  prompt.value = text
+  textInput.value.focus()
+  // sendMessage()
+}
 // 发送消息
 const sendMessage = function () {
   if (canSend.value === false) {
@@ -645,6 +658,7 @@ const sendMessage = function () {
     document.getElementById('chat-box').scrollTo(0, document.getElementById('chat-box').scrollHeight)
   })
 
+  showHello.value = false
   canSend.value = false;
   showStopGenerate.value = true;
   showReGenerate.value = false;
@@ -701,6 +715,7 @@ const loadChatHistory = function (chatId) {
       loading.value = false
       return
     }
+    showHello.value = false
 
     const md = require('markdown-it')({breaks: true});
     // md.use(require('markdown-it-copy')); // 代码复制功能