布局先提交一波

src/App.vue

@@ -1,33 +1,44 @@
 <template>
-  <div id="app" @mousedown="windowMove(true)" @mouseup="windowMove(false)">
-    <Home/>
+  <div id="app">
+    <el-row class="home">
+      <chat class="fill" :config="setting"/>
+      <settings class="mar-l16" v-show="showSettings" v-model="setting"/>
+    </el-row>
   </div>
 </template>
 
 <script>
-import {isPc} from '@/util/util.js'
-import Home from './view/home.vue'
+import Chat from "./components/chat";
+import Settings from "./components/settings";
+import {ChatGPT} from "./utils/models";
 
 export default {
   name: 'App',
-  components: {
-    Home
+  components: {Settings, Chat},
+  data() {
+    return {
+      showSettings: true,
+      setting: {
+        model: new ChatGPT()
+      },
+    }
   },
   methods: {
-    windowMove(canMove) {
-      if (isPc()) {
-        import("electron").then(({ipcRenderer}) => {
-          ipcRenderer.send('window-move-open', canMove ?? false);
-        });
-      }
-    },
+    handleResize() {
+      console.log("App handleResize")
+      this.showSettings = window.innerWidth > 1150;
+    }
+  },
+  created() {
+    window.addEventListener('resize', this.handleResize)
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize)
   }
 }
 </script>
 
 <style lang="scss">
-@import url(./assets/font/iconfont.css);
-
 @each $v in (333, 666, 888, 999, '26f', 'f46') {
   .color-#{$v} {
     color: \##{$v};
@@ -79,17 +90,6 @@ export default {
   width: 100%;
 }
 
-.iconfont {
-  font-family: "iconfont" !important;
-  font-style: normal;
-  font-size: 25px;
-  vertical-align: middle;
-  color: rgb(117, 120, 137);
-  transition: .3s;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 * {
   padding: 0;
   margin: 0;
@@ -102,7 +102,20 @@ export default {
   position: absolute;
 }
 
-::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
+.home {
+  width: 100vw;
+  height: 100vh;
+  padding: 16px;
+  background-color: #272A37;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.fill {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
 }
 </style>