update

e6aa1410 · 64104061f23fda247c679fa8 · 5d7da06f · 5d7da06f · e6aa1410 · e6aa1410
Showing with 78 addition and 41 deletion

.upm/store.json .upm/store.json +0 -1

README.md README.md +2 -24

index.html index.html +1 -1

src/App.vue src/App.vue +72 -15

src/assets/main.css src/assets/main.css +3 -0

未找到文件。
--- a/.upm/store.json
+++ b/.upm/store.json
-{"version":2,"languages":{"nodejs-npm":{"specfileHash":"e682a9a8c76e1e82500a56ab0d19100e","lockfileHash":"4702e36b244fd8c0ebd44b8a643ae992"}}}
--- a/README.md
+++ b/README.md
-## 推荐的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
--- 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>

--- a/src/App.vue
+++ b/src/App.vue
 <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
--- a/src/assets/main.css
+++ b/src/assets/main.css
+html, body, #app{
+    height: 100%;
+}
\ No newline at end of file