perf: 🍻 Update base copilot

copilot/App.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="flex flex-col absolute inset-fix-0 h-full overflow-hidden">
+    <div class="py-4 px-4 flex items-center flex-none">
+      <a class="block" :href="escrcpyURL" target="_blank">
+        <img src="@electron/resources/build/logo.png" class="h-9" alt="" />
+      </a>
+      <div class="pl-2 text-sm">
+        Escrcpy Copilot
+      </div>
+    </div>
+
+    <div class="flex-1 h-0 overflow-hidden bg-gray-100">
+      <el-tabs v-model="tabValue" class="el-tabs-flex" @tab-click="onTabClick">
+        <el-tab-pane
+          v-for="(item, index) of tabModel"
+          :key="index"
+          :label="item.label"
+          :name="item.value"
+          lazy
+          class=""
+        >
+          <component :is="item.value" />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import Transmission from './components/Transmission/index.vue'
+
+export default {
+  components: {
+    Transmission,
+  },
+  data() {
+    return {
+      escrcpyURL: 'https://github.com/viarotel-org/escrcpy',
+      tabValue: 'Transmission',
+      tabModel: [
+        {
+          label: '传输助手',
+          value: 'Transmission',
+        },
+      ],
+    }
+  },
+  methods: {
+    onTabClick() {},
+  },
+}
+</script>
+
+<style lang="postcss" scoped>
+:deep() {
+  .el-tabs__header {
+    @apply bg-white px-4;
+  }
+  .el-tabs__nav-wrap::after {
+    @apply bg-transparent;
+  }
+}
+</style>

copilot/components/Transmission/Message/Preset.vue

@@ -0,0 +1,55 @@
+<template>
+  <Message v-bind="messageProps">
+    <slot></slot>
+  </Message>
+</template>
+
+<script>
+import Message from './index.vue'
+
+export default {
+  components: {
+    Message,
+  },
+  props: {
+    type: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    messageProps() {
+      let value = {}
+      switch (this.type) {
+        case 'server':
+          value = {
+            name: 'PC',
+            content: this.content,
+            avatar: 'computer',
+          }
+          break
+        case 'client':
+          value = {
+            name: this.$attrs.name || '我的手机',
+            content: this.content,
+            avatar: 'mobile',
+            reversed: true,
+          }
+          break
+
+        default:
+          value = this.$attrs
+          break
+      }
+
+      return value
+    },
+  },
+}
+</script>
+
+<style></style>

copilot/components/Transmission/Message/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="reversed ? 'flex-row-reverse' : ''" class="flex items-start">
+    <img :src="avatarURL" alt="" class="w-12 h-12 flex-none" />
+    <div
+      class="flex flex-col"
+      :class="reversed ? 'mr-4 pl-16 items-end' : 'ml-4 pr-16'"
+    >
+      <div v-if="!reversed" class="mt-1 text-base">
+        {{ name }}
+      </div>
+      <div
+        class="mt-2 shadow-el-light px-4 py-2 rounded-lg break-all overflow-hidden relative"
+      >
+        <slot>
+          <span class="pr-1">
+            {{ content }}
+          </span>
+          <el-icon v-if="loading" class="is-loading relative top-[2px]">
+            <Loading />
+          </el-icon>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import logoURL from '@electron/resources/build/logo.png'
+import userURL from '@/assets/user.png'
+import mobileURL from '@/assets/mobile.png'
+import computerURL from '@/assets/computer.png'
+
+export default {
+  props: {
+    reversed: {
+      type: Boolean,
+      default: false,
+    },
+    avatar: {
+      type: String,
+      default: 'logo',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    avatarURL() {
+      let value = ''
+
+      switch (this.avatar) {
+        case 'logo':
+          value = logoURL
+          break
+        case 'user':
+          value = userURL
+          break
+        case 'mobile':
+          value = mobileURL
+          break
+        case 'computer':
+          value = computerURL
+          break
+      }
+
+      return value
+    },
+  },
+}
+</script>
+
+<style></style>

copilot/components/Transmission/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div
+      ref="chats"
+      class="flex-1 h-0 space-y-4 pb-4 px-4 overflow-auto scroll-smooth"
+    >
+      <Message
+        v-for="(item, index) of messageList"
+        v-bind="{
+          type: item.type,
+          content: item.content,
+        }"
+        :key="index"
+        :loading="item.$loading"
+      >
+      </Message>
+    </div>
+    <div class="flex-none px-4 py-2 bg-white">
+      <el-input
+        v-model="inputValue"
+        placeholder="请输入想要发送的消息"
+        @keyup.enter="handleSubmit"
+      >
+        <template #append>
+          <el-button
+            icon="Promotion"
+            :loading="loading"
+            @click="handleSubmit"
+          />
+        </template>
+      </el-input>
+    </div>
+  </div>
+</template>
+
+<script>
+import Message from './Message/Preset.vue'
+
+export default {
+  components: {
+    Message,
+  },
+  data() {
+    return {
+      messageList: [],
+      inputValue: '',
+      loading: false,
+    }
+  },
+  async created() {
+    await this.getMessageData()
+    await this.$nextTick()
+    this.handleScroll()
+  },
+  methods: {
+    handleScroll() {
+      const chatsEl = this.$refs.chats
+      chatsEl.scrollTop = chatsEl.scrollHeight
+    },
+    async handleSubmit() {
+      if (!this.inputValue) {
+        return false
+      }
+
+      this.loading = true
+
+      const newMessage = {
+        type: 'client',
+        content: this.inputValue,
+        $loading: true,
+      }
+
+      this.messageList.push(newMessage)
+
+      const params = {}
+      const res = await this.$mockAPI(params)
+
+      this.loading = false
+
+      if (res.success) {
+        this.inputValue = ''
+        newMessage.$loading = false
+        await this.$nextTick()
+        this.handleScroll()
+      }
+    },
+    async getMessageData() {
+      const params = {
+        imitate: [
+          {
+            type: 'server',
+            content: '你好啊',
+          },
+          {
+            type: 'client',
+            content: '你也好啊',
+          },
+          {
+            type: 'server',
+            content: '你好啊',
+          },
+          {
+            type: 'client',
+            content: '你也好啊',
+          },
+          {
+            type: 'server',
+            content: '你好啊',
+          },
+          {
+            type: 'client',
+            content: '你也好啊',
+          },
+          {
+            type: 'server',
+            content: '你好啊',
+          },
+          {
+            type: 'client',
+            content: '你也好啊',
+          },
+          {
+            type: 'server',
+            content: '你好啊',
+          },
+          {
+            type: 'client',
+            content: '你也好啊',
+          },
+          {
+            type: 'server',
+            content: '你好啊',
+          },
+          {
+            type: 'client',
+            content: '你也好啊',
+          },
+          {
+            type: 'server',
+            content: '你好啊',
+          },
+          {
+            type: 'client',
+            content: '你也好啊',
+          },
+          {
+            type: 'server',
+            content: '你好啊',
+          },
+          {
+            type: 'client',
+            content: '你也好啊',
+          },
+          {
+            type: 'server',
+            content: '你好啊',
+          },
+          {
+            type: 'client',
+            content: '你也好啊',
+          },
+        ],
+      }
+      const res = await this.$mockAPI(params)
+
+      if (res.success) {
+        this.messageList = res.data.map(item => ({
+          ...item,
+          $loading: false,
+        }))
+      }
+    },
+  },
+}
+</script>
+
+<style></style>

server/index.html → copilot/index.html

@@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en" class="">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Escrcpy-Server</title>
+    <title>Escrcpy Copilot</title>
   </head>
   <body class="">
     <div id="app"></div>
     <script type="module" src="main.js"></script>
   </body>
-</html>
+</html>