first commit

2024-11-04 13:36:10 +08:00 · 2024-11-04 13:36:10 +08:00 · 40aefca742
commit 40aefca742
parent fde81d55b2
25 changed files with 778 additions and 11 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,3 @@
 # .env.development
 VITE_APP_PROXY_BASE_API = 127.0.0.1:8080
 VITE_APP_SOCKET_BASE_URl = ws://192.168.8.12:8080/websocket/message
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,3 @@
 # .env.production
 VITE_APP_PROXY_BASE_API =
 VITE_APP_SOCKET_BASE_URl = ws://49.232.62.212:8020/websocket/message
--- a/.gitignore
+++ b/.gitignore
@ -1,11 +1,24 @@
-# ---> Vue
+# Logs
-# gitignore template for Vue.js projects
+logs
-#
+*.log
-# Recommended template: Node.gitignore
+npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-# TODO: where does this rule come from?
+node_modules
-docs/_book
+dist
-
+dist-ssr
-# TODO: where does this rule come from?
+*.local
 test/
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/README.md
+++ b/README.md
@ -1,3 +1,5 @@
-# eacychatting
+# Vue 3 + Vite
-文件传输助手
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/wechat.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文件传输助手</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,19 @@
 {
  "name": "easychatting",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.29",
    "vue-clipboard3": "^2.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }
 }
--- a/public/images/default.png
+++ b/public/images/default.png
--- a/public/images/doc.png
+++ b/public/images/doc.png
--- a/public/images/pdf.png
+++ b/public/images/pdf.png
--- a/public/images/xls.png
+++ b/public/images/xls.png
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/public/wechat.svg
+++ b/public/wechat.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path fill="#8BC34A" d="M18,6C9.2,6,2,12,2,19.5c0,4.3,2.3,8,6,10.5l-2,6l6.3-3.9C14,32.7,16,33,18,33c8.8,0,16-6,16-13.5C34,12,26.8,6,18,6z"/><path fill="#7CB342" d="M20,29c0-6.1,5.8-11,13-11c0.3,0,0.6,0,0.9,0c-0.1-0.7-0.3-1.4-0.5-2c-0.1,0-0.3,0-0.4,0c-8.3,0-15,5.8-15,13c0,1.4,0.3,2.7,0.7,4c0.7,0,1.4-0.1,2.1-0.2C20.3,31.6,20,30.3,20,29z"/><path fill="#CFD8DC" d="M46,29c0-6.1-5.8-11-13-11c-7.2,0-13,4.9-13,11s5.8,11,13,11c1.8,0,3.5-0.3,5-0.8l5,2.8l-1.4-4.8C44.3,35.2,46,32.3,46,29z"/><path fill="#33691E" d="M14,15c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2S14,13.9,14,15z M24,13c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S25.1,13,24,13z"/><path fill="#546E7A" d="M30,26.5c0,0.8-0.7,1.5-1.5,1.5S27,27.3,27,26.5s0.7-1.5,1.5-1.5S30,25.7,30,26.5z M37.5,25c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5S38.3,25,37.5,25z"/></svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,501 @@
 <script setup>
 import {onMounted, reactive, ref, watch} from "vue";
 import useClipboard from 'vue-clipboard3';
 // import.meta.env
 let ws = new WebSocket(`${import.meta.env.VITE_APP_SOCKET_BASE_URl}`);
 ws.onerror = (event) => {
  console.error("ws链接错误：", event);
 }
 ws.onopen = (event) => {
  heartCheck.reset().start();
  console.log("ws链接成功：", event)
 }
 ws.onmessage = (messageEvent) => {
  heartCheck.reset().start();
  const message = JSON.parse(messageEvent.data);
  console.log(message)
  switch (message.messageType) {
    case "heartbeat":
      if (message.status) {
        state.sessionId = message.id;
      }else {
        ws = new WebSocket(`${import.meta.env.VITE_APP_SOCKET_BASE_URl}`);
        return
      }
      if (message.onlineNumber) {
        state.onlineNumber = message.onlineNumber;
      }
      break
    case "receive":
      state.messageList.push({
        ...message
      })
      setTimeout( () => {
        const div = document.querySelector(".message-list");
        div.scrollTop = div.scrollHeight;
      }, 100)
      break
    case "refresh":
      getMessageList()
  }
 }
 ws.onclose = (event) => {
  console.log("ws链接断开：", event)
 }
 // 心跳检测, 每隔一段时间检测连接状态，如果处于连接中，就向server端主动发送消息，来重置server端与客户端的最大连接时间，如果已经断开了，发起重连。
 const heartCheck = {
  timeout: 30000,
  serverTimeoutObj: null,
  reset: function () {
    clearTimeout(this.serverTimeoutObj);
    return this;
  },
  start: function () {
    this.serverTimeoutObj = setInterval(function () {
      if (ws.readyState === 1) {
        ws.send(JSON.stringify({
          messageType:'heartbeat',
          sessionId: state.sessionId
        }));
        heartCheck.reset().start();    // 如果获取到消息，说明连接是正常的，重置心跳检测
      } else {
        ws = new WebSocket("/socket/message");
      }
    }, this.timeout)
  }
 };
 const rightMenuVisible = ref(false);
 const state = reactive({
  sessionId:"",
  messageList:[],
  message:"",
  visible:false,
  left:0,
  top:0,
  rightMenuItem:{},
  onlineNumber:0,
  showModal:false,
  modalImageUUID:'',
 })
 onMounted(() => {
  getMessageList()
 })
 const getMessageList = () => {
  let url = '/papi/message/get';
  let options = {
    method: 'GET',
  };
  fetch(url, options)
      .then(res => res.json())
      .then(json => {
        state.messageList = json.data
        setTimeout( () => {
          const div = document.querySelector(".message-list");
          if (div)  {
            div.scrollTop = div.scrollHeight;
          }
        }, 200)
      })
      .catch(err => console.error('error:' + err));
 }
 const handleSendMessage = () => {
  const message = {
    "messageType":"send",
    "sessionId": state.sessionId,
    "content": state.message,
    "type": "text",
    "time": Date.now()
  }
  ws.send(JSON.stringify(message))
  state.message = ""
 }
 const handleDeleteMsg = () => {
  const message = {
    ...state.rightMenuItem,
    sessionId:state.sessionId,
    messageType: 'delete',
    isDelete:1
  }
  const index = state.messageList.findIndex(item => item.id === state.rightMenuItem.id)
  state.messageList.splice(index, 1)
  ws.send(JSON.stringify(message))
 }
 const keyDown = (e) => {
  if(e.ctrlKey && e.keyCode === 13) {   //用户点击了ctrl+enter触发
    state.message += '\n';
  }else if (state.message.trim().length > 0){ //用户点击了enter触发
    handleSendMessage();
  }
  e.preventDefault();
 }
 const formatDate = (dateForm) => {
  if (dateForm === "") {
    return "";
  }else{
    return new Date(+new Date(new Date(dateForm).toJSON()) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
  }
 }
 const openMenu = (event, item) => {
  rightMenuVisible.value = true;
  state.top = event.pageY;
  state.left = event.pageX;
  state.rightMenuItem = item
 }
 watch(rightMenuVisible, (newVisible) => {
  if (newVisible) {
    document.body.addEventListener('click', () => {rightMenuVisible.value = false})
    document.querySelector(".message-list").addEventListener('scroll', () => {rightMenuVisible.value = false})
  } else {
    document.body.removeEventListener('click', () => {rightMenuVisible.value = false})
  }
 })
 const handleFileUpload = (event) => {
  const file = event.target.files[0];
  uploadFileMessage(file)
 }
 const handleInputPaste = (event) => {
  if (event.clipboardData.files.length === 0) {
    return
  }
  event.preventDefault();
  const file = event.clipboardData.files[0];
  uploadFileMessage(file)
 }
 const uploadFileMessage = (file) => {
  if (file.name.indexOf(".") === -1) {
    window.alert("该类型文件禁止上传！")
    return
  }
  if (file.size >= 1024 * 1024 * 20) {
    window.alert("文件上传最大20M！")
    return
  }
  const formData = new FormData();
  formData.append('file', file);
  fetch('/papi/file/upload', {
    method: 'POST',
    body: formData
  }).then(res => res.json())
      .then(json => {
        console.log(json)
        const uuid = json.uuid;
        const message = {
          "messageType":"send",
          "sessionId": state.sessionId,
          "type": "file",
          "fileMimeType": json.fileMimeType,
          "time": Date.now(),
          "file": uuid
        }
        ws.send(JSON.stringify(message))
      })
      .catch(err => console.error('error:' + err));
 }
 const handleInputDrop = (event) => {
  event.preventDefault();
  if (event.dataTransfer.files.length === 0) {
    return
  }
  const file = event.dataTransfer.files[0];
  uploadFileMessage(file)
 }
 const isImageFile = (fileMimetype) => {
  if (fileMimetype) {
    return fileMimetype.startsWith("image/");
  }
  return false;
 }
 const isVideoFile = (fileMimetype) => {
  if (fileMimetype) {
    return fileMimetype.startsWith("video/");
  }
  return false;
 }
 const isAudioFile = (fileMimetype) => {
  if (fileMimetype) {
    return fileMimetype.startsWith("audio/");
  }
  return false;
 }
 const downloadFile = (message) => {
  message ? window.open('/papi/file/' + message.file, '_blank') : window.open('/papi/file/' + state.rightMenuItem.file, '_blank')
 }
 const getIconUrl = (message) => {
  const baseUrl = '/images/'
  if (message.fileMimeType.indexOf('doc') !== -1) {
    return new URL(baseUrl + 'doc.png', import.meta.url).href
  } else if (message.fileMimeType.indexOf('pdf') !== -1) {
    return new URL(baseUrl + 'pdf.png', import.meta.url).href
  } else if (message.fileMimeType.indexOf('xls') !== -1) {
    return new URL(baseUrl + 'xls.png', import.meta.url).href
  } else{
    return new URL(baseUrl + 'default.png', import.meta.url).href
  }
 }
 const openModal = (message) => {
  console.log(message)
  state.showModal = true;
  state.modalImageUUID = message.file
 }
 </script>
 <template>
  <div class="chat">
    <div class="chat-header">
      <h3>文件传输助手</h3>
      <p>在线人数：{{ state.onlineNumber }}</p>
    </div>
    <div class="chat-body">
      <p v-if="state.messageList.length === 0">你可以使用「手机微信>文件传输助手」与电脑互传文件</p>
      <div class="message-list">
        <div :class="message.sessionId != null && message.sessionId === state.sessionId ? 'message-content message-content-right' : 'message-content'" v-for="message in state.messageList"
             @contextmenu.prevent="openMenu($event, message)">
          <span v-if="message.sessionId != null && message.sessionId === state.sessionId" class="message-text-time">{{formatDate(message.time)}}</span>
          <div :class="message.sessionId != null && message.sessionId === state.sessionId ? 'message-text-right' : 'message-text-left'"
               class="message-text"
               v-if="message.type === 'text'"
               v-html="message.content"
          ></div>
          <div :class="message.sessionId != null && message.sessionId === state.sessionId ? 'message-text-right' : 'message-text-left'"
               class="message-text"
               v-if="message.type === 'file'">
            <img v-if="isImageFile(message.fileMimeType)" @click="openModal(message)" :src="'/papi/file/' + message.file" alt="picture"/>
            <video width="300" controls v-else-if="isVideoFile(message.fileMimeType)" :src="'/papi/file/' + message.file"/>
            <audio preload width="300" controls v-else-if="isAudioFile(message.fileMimeType)" :src="'/papi/file/' + message.file"/>
            <div v-else class="message-file" @click="downloadFile(message)">
              <img width="60" :src="getIconUrl(message)" :alt="getIconUrl(message)">
              <span v-html="message.fileName"></span>
            </div>
          </div>
          <span v-if="message.sessionId == null || message.sessionId !== state.sessionId" class="message-text-time">{{formatDate(message.time)}}</span>
        </div>
        <div v-show="rightMenuVisible" :style="{left:state.left+'px',top:state.top+'px'}" class="right-menu">
          <button v-if="state.rightMenuItem?.type === 'text'" @click="useClipboard().toClipboard(state.rightMenuItem.content)">复制</button>
          <button v-if="state.rightMenuItem?.type === 'file' || state.rightMenuItem?.type === 'image'" @click="downloadFile(null)">下载</button>
          <button @click="handleDeleteMsg">删除</button>
        </div>
      </div>
    </div>
    <div class="chat-input">
      <div class="chat-input-operation">
        <div class="operation-item">
          <input class="file-input" title="上传文件"  type="file" @change="handleFileUpload">
          <img class="file-upload" src="/src/assets/file.svg" alt="file"/>
        </div>
      </div>
      <textarea @drop="handleInputDrop" placeholder="回车发送消息，ctrl+enter换行，支持粘贴、拖拽上传附件" @paste="handleInputPaste" rows="4" @keydown.enter="keyDown" v-model="state.message"/>
      <div class="message-send">
        <button @click="handleSendMessage" :disabled="state.message.length === 0">发送</button>
      </div>
    </div>
  </div>
  <div v-show="state.showModal" class="modal" @click="state.showModal = false">
    <img v-if="state.modalImageUUID !== ''" class="modal-image" :src="'/papi/file/' + state.modalImageUUID" alt="message"/>
  </div>
 </template>
 <style scoped>
 .chat {
  height: 90vh;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 4px;
  margin: 0 auto;
  max-width: 960px;
  transition: width .2s ease-in;
  width: 960px;
 }
 .chat-body {
  height: 68vh;
 }
 .message-list {
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;
 }
 .chat-body p {
  align-items: center;
  color: #9e9e9e;
  display: flex;
  font-size: 14px;
  height: 100%;
  justify-content: center;
 }
 .chat-input {
  border-top: 1px solid #e3e4e5;
  display: flex;
  flex-direction: column;
 }
 .chat-header {
  border-bottom: 1px solid #e3e4e5;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .chat-input-operation {
  display: flex;
  padding: 10px 16px;
 }
 .file-input {
  font-size: 0;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  cursor: pointer;
 }
 .operation-item {
  display: inline-block;
  height: 15px;
  position: relative;
  width: 17px;
 }
 textarea {
  border: none;
  flex: 1;
  font-size: 14px;
  padding: 0 18px;
  resize: none;
  outline: none;
  color:black;
  background-color: #ffffff;
  max-height: 10vh;
 }
 button {
  outline: none;
 }
 .message-send {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px 8px;
 }
 .message-content {
  display: flex;
  padding: 8px 24px 8px;
  gap: 14px;
 }
 .message-text {
  background-color: #95ec69;
  max-width: 400px;
  text-align: left;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 7px 12px;
  position: relative;
  height: fit-content;
  font-family: monospace;
  unicode-bidi: isolate;
  white-space: break-spaces;
  word-break: break-word;
  min-height: 35px;
 }
 .message-text:before {
  background-color: #95ec69;
  border-radius: 0 2px 0 0;
  content: "";
  height: 10px;
  margin-right: -5px;
  position: absolute;
  right: 0;
  top: 12px;
  transform: rotate(45deg);
  transform-origin: 50%;
  width: 10px;
 }
 .message-text-left:before {
  left: 0;
  margin-left: -5px;
 }
 .message-content-right {
  justify-content: flex-end;
 }
 .message-text-time {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: flex-end;
 }
 .right-menu {
  border: 1px solid #eee;
  border-radius: 10px;
  z-index: 999;
  position: fixed;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
 }
@media (max-width: 960px) {
  .chat {
    width: 80vw !important;
  }
 }
 .message-list img {
  max-width: 376px;
  cursor: zoom-in;
 }
 .message-file {
  display: flex;
  gap: 12px;
  flex-direction: row;
  align-items: flex-end;
  cursor: pointer;
 }
 .modal {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
 }
 .modal-image {
  display: flex;
  max-width: 90%;
  margin: 5vh auto;
  height: 90vh;
  object-fit: contain;
  cursor: zoom-out;
 }
 </style>
--- a/src/assets/copy.png
+++ b/src/assets/copy.png
--- a/src/assets/doc.png
+++ b/src/assets/doc.png
--- a/src/assets/file.svg
+++ b/src/assets/file.svg
@ -0,0 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="17px" height="15px" viewBox="0 0 17 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.5">
        <g id="" transform="translate(-28.000000, -490.000000)" fill="#000000">
            <g transform="translate(0.000000, 476.000000)">
                <g transform="translate(24.000000, 9.000000)">
                    <path d="M9.45283013,5 L12.1458333,6.99454036 L20.0555556,6.99454036 C20.5771578,6.99454036 21,7.36954558 21,7.89051435 L21,9.99392742 L21,10.9927129 L21,19.0567026 C21,19.5776714 20.5771578,20 20.0555556,20 L4.94444444,20 C4.42284218,20 4,19.5776714 4,19.0567026 L4,5.9432974 C4,5.42232863 4.42284218,5 4.94444444,5 L9.45283013,5 Z M20.013,10.992 L5.005,10.992 L5.00592564,18.979286 L20.0132997,18.979286 L20.013,10.992 Z M9.05527826,6.02143247 L5.00592564,6.02143247 L5.005,9.993 L20.013,9.993 L20.0132997,8.00380965 L11.7482815,8.00380965 L9.05527826,6.02143247 Z" id="图标颜色"></path>
                </g>
            </g>
        </g>
    </g>
 </svg>
--- a/src/assets/pdf.png
+++ b/src/assets/pdf.png
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/assets/xls.png
+++ b/src/assets/xls.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,43 @@
 <script setup>
 import { ref } from 'vue'
 defineProps({
  msg: String,
 })
 const count = ref(0)
 </script>
 <template>
  <h1>{{ msg }}</h1>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>
  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a
      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
      target="_blank"
      >Vue Docs Scaling up Guide</a
    >.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
 </template>
 <style scoped>
 .read-the-docs {
  color: #888;
 }
 </style>
--- a/src/components/NewApp.vue
+++ b/src/components/NewApp.vue
@ -0,0 +1,20 @@
 <script setup>
 import SlotComp from "./SlotComp.js";
 </script>
 <template>
  <SlotComp>
    <p>111</p>
    <template #custom_slot>
      <p>111</p>
    </template>
    <template #custom="{msg}">
      <p>{{msg}}</p>
    </template>
  </SlotComp>
 </template>
 <style scoped>
 </style>
--- a/src/components/SlotComp.js
+++ b/src/components/SlotComp.js
@ -0,0 +1,13 @@
 import {createElementVNode} from "vue";
 export default {
    setup(props, {slots}) {
        console.log('slots', slots);
        const slot_default = slots.default();
        const customSlot = slots.custom_slot();
        console.log(slot_default);
        return () => {
            return createElementVNode('div', null, [...slot_default,...customSlot]);
        }
    }
 }
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,7 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 import NewApp from "./components/NewApp.vue";
 createApp(NewApp).mount('#app')
--- a/src/style.css
+++ b/src/style.css
@ -0,0 +1,94 @@
 :root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: var(--color-text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --color-global: #242424;
  --color-text: #FFFFFFDD;
  --font-size-global: 14px;
 }
 a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
 }
 a:hover {
  color: #535bf2;
 }
 body {
  margin: 0;
  display: flex;
  place-items: center;
  height: 100%;
  min-width: 320px;
  min-height: 100vh;
 }
 html {
  background-attachment: fixed;
  background-color: #2c2c2c;
  color: var(--color-global);
  font-family: Helvetica Neue, Hiragino Sans GB, Microsoft YaHei, "\9ED1\4F53", Arial, sans-serif;
  font-size: var(--font-size-global);
  line-height: 1.6;
  overflow: hidden;
 }
 button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
 }
 button:hover {
  border-color: #646cff;
 }
 button:focus,
 button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
 }
 .card {
  padding: 2em;
 }
 #app {
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
 }
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #f9f9f9;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
 }
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: black
  }
 }
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,20 @@
 import {defineConfig, loadEnv} from 'vite'
 import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig(({mode}) => {
  const env = loadEnv(mode, process.cwd(), "")
  return ({
    plugins: [vue()],
    server: {
      proxy: {
        '/papi': {
          target: `http://${env.VITE_APP_PROXY_BASE_API}/api`,
          secure: false, // 如果是https接口，需要配置这个参数
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/papi/, ''),
        }
      }
    }
  })
 })
		`@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
		`@ -0,0 +1 @@`
							`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`