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
-# gitignore template for Vue.js projects
-#
-# Recommended template: Node.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*

-# TODO: where does this rule come from?
-docs/_book
-
-# TODO: where does this rule come from?
-test/
+node_modules
+dist
+dist-ssr
+*.local

+# 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>`