完成前后端框架搭建，完成聊天页面布局

2025-11-11 03:33:48 +08:00 · 2023-03-17 14:17:27 +08:00
commit c25cc97450
35 changed files with 21044 additions and 0 deletions
--- a/web/.env.development
+++ b/web/.env.development
@@ -0,0 +1 @@
+VUE_APP_API_HOST=127.0.0.1:5678
--- a/web/.env.production
+++ b/web/.env.production
@@ -0,0 +1 @@
+VUE_APP_WS_HOST=ws://127.0.0.1:5678
--- a/web/README.md
+++ b/web/README.md
@@ -0,0 +1,21 @@
+# qark-webssh
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
--- a/web/babel.config.js
+++ b/web/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/web/index.html
+++ b/web/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="favicon.ico">
+    <title>ChatGPT 助手</title>
+</head>
+
+<body>
+<noscript>
+    <strong>请开启JavaScript支持</strong>
+</noscript>
+<div id="app"></div>
+<script type="module" src="src/main.js"></script>
+</body>
+
+</html>
--- a/web/jsconfig.json
+++ b/web/jsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "yycloud-webssh",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "core-js": "^3.8.3",
+    "element-plus": "^2.1.11",
+    "good-storage": "^1.1.1",
+    "json-bigint": "^1.0.0",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.15"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "stylus": "^0.58.1",
+    "stylus-loader": "^7.0.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}
--- a/web/public/favicon.ico
+++ b/web/public/favicon.ico
--- a/web/public/images/gpt-icon.png
+++ b/web/public/images/gpt-icon.png
--- a/web/public/images/user-icon.png
+++ b/web/public/images/user-icon.png
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -0,0 +1,28 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    // TODO: 获取会话
+  },
+})
+</script>
+
+
+<style lang="stylus">
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  margin: 0 !important;
+  padding: 0 !important;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+}
+</style>
--- a/web/src/actions/chat.js
+++ b/web/src/actions/chat.js
@@ -0,0 +1,3 @@
+/**
+ * actions for chat page
+ */
--- a/web/src/components/ChatPrompt.vue
+++ b/web/src/components/ChatPrompt.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="chat-line chat-line-right">
+    <div class="chat-item">
+      <span class="content">{{ content }}</span>
+      <div class="triangle"></div>
+    </div>
+
+    <div class="chat-icon">
+      <img :src="icon" alt="User"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import {defineComponent} from "vue"
+
+export default defineComponent({
+  name: 'ChatPrompt',
+  props: {
+    content: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: 'images/user-icon.png',
+    }
+  },
+  data() {
+    return {}
+  },
+})
+</script>
+
+<style lang="stylus">
+.chat-line-right {
+  justify-content: end;
+
+  .chat-icon {
+    margin-left 5px;
+  }
+
+  .chat-item {
+    position: relative;
+    padding: 0 5px 0 0;
+    overflow: hidden;
+
+    .triangle {
+      width: 0;
+      height: 0;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-left: 5px solid #98E165;
+      position: absolute;
+      right: 0;
+      top: 10px;
+    }
+
+    .content {
+      float: right;
+      padding: 5px 10px;
+      background-color: #98E165;
+      color var(--content-color);
+      font-size: var(--content-font-size);
+      border-radius: 5px;
+    }
+  }
+}
+</style>
--- a/web/src/components/ChatReply.vue
+++ b/web/src/components/ChatReply.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="chat-line chat-line-left">
+    <div class="chat-icon">
+      <img :src="icon" alt="ChatGPT">
+    </div>
+
+    <div class="chat-item">
+      <div class="triangle"></div>
+      <span class="content">{{ content }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import {defineComponent} from "vue"
+
+export default defineComponent({
+  name: 'ChatReply',
+  props: {
+    content: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: 'images/gpt-icon.png',
+    }
+  },
+  data() {
+    return {}
+  },
+})
+</script>
+
+<style lang="stylus">
+.chat-line-left {
+  justify-content: start;
+
+  .chat-icon {
+    margin-right 5px;
+  }
+
+  .chat-item {
+    display: inline-block;
+    position: relative;
+    padding: 0 0 0 5px;
+    overflow: hidden;
+
+    .triangle {
+      width: 0;
+      height: 0;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-right: 5px solid #fff;
+      position: absolute;
+      left: 0;
+      top: 13px;
+    }
+
+    .content {
+      float: left;
+      padding: 8px 10px;
+      color var(--content-color)
+      background-color: #fff;
+      font-size: var(--content-font-size);
+      border-radius: 5px;
+    }
+  }
+}
+
+</style>
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -0,0 +1,40 @@
+import {createRouter, createWebHashHistory} from 'vue-router'
+import {createApp} from 'vue'
+import ElementPlus from "element-plus"
+import "element-plus/dist/index.css"
+import App from './App.vue'
+import Home from './views/Chat.vue'
+import NotFound from './views/404.vue'
+import './utils/prototype'
+
+
+const routes = [
+    {
+        name: 'home', path: '/', component: Home, meta: {
+            title: 'ChatGPT-Console'
+        }
+    },
+    {
+        name: 'NotFound', path: '/:all(.*)', component: NotFound, meta: {
+            title: '页面没有找到'
+        }
+    },
+]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: routes,
+})
+
+// dynamic change the title when router change
+router.beforeEach((to, from, next) => {
+    if (to.meta.title) {
+        document.title = to.meta.title
+    }
+    next()
+})
+
+const app = createApp(App)
+app.use(router).use(ElementPlus).mount('#app')
+
+
--- a/web/src/utils/http.js
+++ b/web/src/utils/http.js
@@ -0,0 +1,77 @@
+import axios from 'axios'
+import JSONBigInt from 'json-bigint'
+import qs from 'qs'
+
+import { ElMessageBox } from 'element-plus'
+
+axios.defaults.timeout = 5000
+axios.defaults.baseURL = process.env.VUE_APP_API_SECURE === true ? 'https://' + process.env.VUE_APP_API_HOST : 'http://' + process.env.VUE_APP_API_HOST
+axios.defaults.withCredentials = true
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
+axios.defaults.transformResponse = [(data, headers) => {
+  if (headers['content-type'].indexOf('application/json') !== -1) {
+    try {
+      data = JSONBigInt.parse(data)
+    } catch (e) { /* Ignore */ }
+  }
+  return data
+}]
+
+
+// HTTP拦截器
+axios.interceptors.request.use(
+  config => {
+    // set session-name
+    config.headers['Session-Name'] = "xwebssh-sess-token"
+    return config
+  }, error => {
+    return Promise.reject(error)
+  })
+axios.interceptors.response.use(
+  response => {
+    if (response.data.code == 0) {
+      return response
+    } else {
+      return Promise.reject(response.data)
+    }
+  }, error => {
+    if (error.response.status === 401) {
+      ElMessageBox.alert('您未登录或者登录已退出，请先登录再操作。', '登录提醒', {
+        confirmButtonText: '确定',
+        callback: () => {
+          // TODO: goto login page
+        },
+      })
+    }
+
+    if (error.response.status === 400) {
+      return Promise.reject(error.response.data)
+    }
+    return Promise.reject(error)
+  })
+
+
+// send a http get request
+export function httpGet (url, params = {}) {
+  return new Promise((resolve, reject) => {
+    axios.get(url, {
+      params: params
+    }).then(response => {
+      resolve(response.data)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
+
+
+// send a http post request
+export function httpPost (url, data = {}, options = {}) {
+  return new Promise((resolve, reject) => {
+    axios.post(url, qs.stringify(data), options).then(response => {
+      resolve(response.data)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
--- a/web/src/utils/libs.js
+++ b/web/src/utils/libs.js
@@ -0,0 +1,15 @@
+/**
+ * Util lib functions
+ */
+
+// generate a random string
+export function randString(length) {
+    const str = "0123456789abcdefghijklmnopqrstuvwxyz"
+    const size = str.length
+    let buf = []
+    for (let i = 0; i < length; i++) {
+        const rand = Math.random() * size
+        buf.push(str.charAt(rand))
+    }
+    return buf.join("")
+}
--- a/web/src/utils/prototype.js
+++ b/web/src/utils/prototype.js
@@ -0,0 +1,8 @@
+// add prototype method for array to insert item
+Array.prototype.insert = function (index, item) {
+  this.splice(index, 0, item)
+}
+
+Array.prototype.remove = function (index) {
+  this.splice(index, 1)
+}
--- a/web/src/utils/storage.js
+++ b/web/src/utils/storage.js
@@ -0,0 +1,7 @@
+/* eslint-disable no-constant-condition */
+/**
+ * storage handler
+ */
+// import Storage from 'good-storage'
+
+
--- a/web/src/views/404.vue
+++ b/web/src/views/404.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>{{ title }}</div>
+</template>
+
+<script>
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: 'NotFound',
+  data () {
+    return {
+      title: "404 Page",
+
+    }
+  },
+})
+</script>
--- a/web/src/views/Chat.vue
+++ b/web/src/views/Chat.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="common-layout">
+    <div class="chat-box" :style="{height: chatBoxHeight+'px'}">
+      <div v-for="chat in chatData" :key="chat.id">
+        <chat-prompt
+            v-if="chat.type==='prompt'"
+            :icon="chat.icon"
+            :content="chat.content"/>
+        <chat-reply v-else-if="chat.type==='reply'"
+                    :icon="chat.icon"
+                    :content="chat.content"/>
+      </div>
+
+    </div>
+
+    <div class="input-box" :style="{width: inputBoxWidth+'px'}" id="input-box">
+      <div class="input-container">
+        <textarea class="input-text" id="input-text" rows="1" :style="{minHeight:'24px', height: textHeight+'px'}"
+                  v-on:keyup="inputKeyUp"
+                  v-model="inputValue"
+                  placeholder="Input any thing here..."
+                  autofocus></textarea>
+      </div>
+      <div class="btn-container">
+        <button type="button">发送</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {defineComponent} from 'vue'
+import ChatPrompt from "@/components/ChatPrompt.vue";
+import ChatReply from "@/components/ChatReply.vue";
+import {randString} from "@/utils/libs";
+
+export default defineComponent({
+  name: "XChat",
+  components: {ChatPrompt, ChatReply},
+  data() {
+    return {
+      title: "ChatGPT 控制台",
+      chatData: [
+        {
+          id: "1",
+          type: 'prompt',
+          icon: 'images/user-icon.png',
+          content: '请问棒球棒可以放进人的耳朵里面吗'
+        },
+        {
+          id: "2",
+          type: 'reply',
+          icon: 'images/gpt-icon.png',
+          content: '不可以。棒球棒的直径通常都比人的耳道大得多，而且人的耳朵是非常敏感和易受伤的，如果硬塞棒球棒可能会导致耳道损伤、出血和疼痛等问题。此外，塞入耳道的物体还可能引起耳屎的囤积和感染等问题，因此强烈建议不要将任何非耳朵医学用品的物品插入耳朵。如果您有耳道不适或者其他耳朵健康问题，应该咨询专业医生的建议。'
+        }
+      ],
+      inputBoxHeight: 63,
+      inputBoxWidth: window.innerWidth - 20,
+      inputValue: '',
+      textHeight: 24,
+      textWidth: 0,
+      chatBoxHeight: 0,
+      isMobile: false
+    }
+  },
+
+  computed: {},
+
+  mounted: function () {
+    this.inputBoxHeight = document.getElementById("input-box").offsetHeight;
+    this.textWidth = document.getElementById("input-text").offsetWidth;
+    this.chatBoxHeight = window.innerHeight - this.inputBoxHeight - 40;
+
+    //判断是否手机端访问
+    const userAgentInfo = navigator.userAgent.toLowerCase();
+    const Agents = ["android", "iphone", "windows phone", "ipad", "ipod"];
+    for (let v = 0; v < Agents.length; v++) {
+      if (userAgentInfo.indexOf(Agents[v]) >= 0) {
+        this.isMobile = true;
+      }
+    }
+
+    window.addEventListener('resize', this.windowResize);
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.windowResize);
+  },
+
+  methods: {
+    inputKeyUp: function (e) {
+      // PC 端按回车键直接提交数据
+      if (e.keyCode === 13 && !this.isMobile) {
+        this.chatData.push({
+          type: "prompt",
+          id: randString(32),
+          icon: 'images/user-icon.png',
+          content: this.inputValue
+        });
+        this.inputValue = '';
+        console.log("提交数据")
+      }
+
+      this.inputResize();
+    },
+
+    // 初始化
+    inputResize: function () {
+      // 根据输入的字数自动调整输入框的大小
+      let line = 1;
+      let textWidth = 0;
+      for (let i in this.inputValue) {
+        if (this.inputValue[i] === '\n') {
+          line++;
+          textWidth = 0; // 换行之后前面字数清零
+        }
+        if (this.inputValue.charCodeAt(Number(i)) < 128) {
+          textWidth += 9.65; // 英文字符宽度
+        } else {
+          textWidth += 16.07; // 中文字符宽度
+        }
+      }
+      line = line + (Math.ceil(textWidth / this.textWidth)) - 1;
+      this.inputBoxHeight = 63 + (line - 1) * 24;
+      this.textHeight = line * 24;
+    },
+
+    windowResize: function () {
+      this.inputResize();
+      this.chatBoxHeight = window.innerHeight - this.inputBoxHeight - 40;
+      this.inputBoxWidth = window.innerWidth - 20;
+    }
+  },
+
+})
+</script>
+
+<style lang="stylus">
+.chat-box {
+  // 变量定义
+  --content-font-size: 16px;
+  --content-color: #374151;
+
+  background-color: rgba(247, 247, 248, 1);
+  font-family 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  padding: 20px 10px;
+
+  .chat-line {
+    padding 10px;
+    font-size 14px;
+    display: flex;
+    align-items: flex-start;
+
+    .chat-icon {
+      img {
+        width 32px;
+        height 32px;
+      }
+    }
+  }
+
+}
+
+.input-box {
+  background-color: rgba(255, 255, 255, 1);
+  padding 10px;
+
+  position: absolute;
+  bottom: 0
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .input-container {
+    overflow hidden
+    width 100%
+    margin: 0;
+    background #ffffff
+    border: none;
+    border-radius: 6px;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+    padding: 5px 10px;
+
+    .input-text {
+      font-size: 16px;
+      padding 0
+      margin 0
+      outline: none;
+      width 100%;
+      border none
+      background transparent
+      resize none
+      line-height 24px;
+      color #333;
+    }
+
+    .input-text::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+  }
+
+  .btn-container {
+    margin-left 10px;
+
+    button {
+      width 70px;
+      outline none
+      border none
+      cursor pointer
+      background-color: #07c160
+      position: relative;
+      margin-left: auto;
+      margin-right: auto;
+      font-size 16px
+      box-sizing: border-box;
+      font-weight: 700;
+      text-align: center;
+      text-decoration: none;
+      color: #fff;
+      line-height: 2.25;
+      border-radius: 8px;
+    }
+  }
+
+}
+</style>
--- a/web/vue.config.js
+++ b/web/vue.config.js
@@ -0,0 +1,29 @@
+const {defineConfig} = require('@vue/cli-service')
+let webpack = require('webpack')
+// const fs = require('fs')
+// const path = require('path')
+// const os = require('os')
+
+module.exports = defineConfig({
+    transpileDependencies: true,
+    configureWebpack: {
+        // disable performance hints
+        performance: {
+            hints: false
+        },
+        plugins: [
+            new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})
+        ]
+    },
+
+    publicPath: process.env.NODE_ENV === 'production'
+        ? '/web'
+        : '/',
+
+    outputDir: 'dist',
+    crossorigin: "anonymous",
+    devServer: {
+        allowedHosts: ['127.0.0.1:5678'],
+        port: 8888,
+    }
+})