From e6aa14104e36dc10e070da0c8ea1b5e290aaa603 Mon Sep 17 00:00:00 2001
From: 64104061f23fda247c679fa8 <64104061f23fda247c679fa8@devide>
Date: Mon, 15 May 2023 03:26:20 +0000
Subject: [PATCH] update

---
 .upm/store.json     |  1 -
 README.md           | 26 ++------------
 index.html          |  2 +-
 src/App.vue         | 87 +++++++++++++++++++++++++++++++++++++--------
 src/assets/main.css |  3 ++
 5 files changed, 78 insertions(+), 41 deletions(-)
 delete mode 100644 .upm/store.json
diff --git a/.upm/store.json b/.upm/store.json
deleted file mode 100644
index 6026e9f..0000000
--- a/.upm/store.json
+++ /dev/null
@@ -1 +0,0 @@
-{"version":2,"languages":{"nodejs-npm":{"specfileHash":"e682a9a8c76e1e82500a56ab0d19100e","lockfileHash":"4702e36b244fd8c0ebd44b8a643ae992"}}}
diff --git a/README.md b/README.md
index 530cdfd..c068c62 100644
--- a/README.md
+++ b/README.md
@@ -1,25 +1,3 @@
-## 推荐的IDE设置
+# Chat GPT Template With Vue
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## 自定义配置
-
-请参阅 [[Vite配置参考](https://vitejs.dev/config/).
-
-## 项目设置
-
-```sh
-npm install
-```
-
-### 在开发环境中启动和热更新
-
-```sh
-npm run dev
-```
-
-### 编译用于生产环境
-
-```sh
-npm run build
-```
+基于 Vue 的 Chat GPT 模板，InsCode 提供了 AI 接口服务，并自动集成在模板中，即刻开始您的 AI 应用。
\ No newline at end of file
diff --git a/index.html b/index.html
index 84d7dab..7a96b40 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ViewDesign App</title>
+    <title>Chat GPT App</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 08a3052..4a35e35 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,76 @@
 <template>
-  <div class="ivu-p">
-    <Alert>
-      当前 Vue 版本为 {{ vueVersion }}，View UI Plus 版本为 {{ version }}
-    </Alert>
-    <Input v-model="msg" />
-    <Button class="ivu-mt" type="primary" @click="handleClick">Click Me!</Button>
+  <div class="container ivu-p">
+    <div class="dialog">
+      <template v-for="(item, index) in dialogs" :key="index">
+        <div class="dialog-item" :class="{ 'dialog-item-me': item.role === 'me', 'dialog-item-ai': item.role === 'ai' }">
+          <div class="dialog-item-main">{{ item.text }}</div>
+        </div>
+      </template>
+    </div>
+    <div class="prompt ivu-mt">
+      <Input
+       v-model="prompt" 
+       type="textarea" 
+       :autosize="{ minRows: 4, maxRows: 6 }" 
+       placeholder="输入你的问题" 
+      />
+      <Button class="ivu-mt" type="primary" size="large" :loading="loading" @click="handleSend">发送</Button>
+    </div>
   </div>
 </template>
-<script setup>
-import { ref, version as vueVersion } from 'vue'
-import { version, Message } from 'view-ui-plus'
-const msg = ref('Hello View Design!')
-
-function handleClick() {
-  Message.info('Welcome to InsCode')
-}
+<script>
+  export default {
+    data () {
+      return {
+        prompt: '',
+        loading: false,
+        dialogs: [
+          {
+            role: 'me',
+            text: 'vscode 的'
+          },
+          {
+            role: 'ai',
+            text: 'dshjfjksdhfkjsdhkjfdsjkhfksdhdfjkjkdsfjkhsdkjfhsddshjfjksdhfkjsdhkjfdsjkhfksdhdfjkjkdsfjkhsdkjfhsddshjfjksdhfkjsdhkjfdsjkhfksdhdfjkjkdsfjkhsdkjfhsd'
+          }
+        ]
+      }
+    },
+    methods: {
+      handleSend () {
+        if (this.loading) return;
+        this.loading = true;
+      }
+    }
+  }
 </script>
-<style></style>
\ No newline at end of file
+<style>
+  .container{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .dialog{
+    flex: 1;
+    overflow: auto;
+  }
+  .dialog-item{
+    display: flex;
+  }
+  .dialog-item-main{
+    max-width: 80%;
+    padding: 8px;
+    word-wrap: break-word;
+    margin-top: 16px;
+    border-radius: 4px;
+  }
+  .dialog-item-me{
+    justify-content: flex-end;
+  }
+  .dialog-item-me .dialog-item-main{
+    background-color: antiquewhite;
+  }
+  .dialog-item-ai .dialog-item-main{
+    background-color: #eee;
+  }
+</style>
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index e69de29..f44b94f 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -0,0 +1,3 @@
+html, body, #app{
+    height: 100%;
+}
\ No newline at end of file
-- 
GitLab

