完善部分内容

.vscode/settings.json

+{
+}
\ No newline at end of file

package.json

@@ -7,15 +7,16 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "element-plus": "^2.0.2",
     "sass": "^1.35.1",
-    "vue": "^3.0.5",
+    "vue": "^3.2.31",
     "vue-i18n": "^9.1.7",
     "vue-router": "^4.0.10",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^1.2.3",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@vitejs/plugin-vue": "^2.2.0",
+    "@vue/compiler-sfc": "^3.2.31",
     "vite": "^2.3.8"
   }
 }

src/App.vue

 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
   <hello-world msg="Hello Vue 3 + Vite" >111</hello-world>
+  <element-plus-use></element-plus-use>
+  <element-plus-form></element-plus-form>
   <router-view></router-view>
 </template>
 
 <script setup>
+
+setTimeout(()=>{
+  const el = document.documentElement
+  el.setAttribute("data-theme","dark")
+
+  console.log(getComputedStyle(el).getPropertyValue(`--el-color-primary`))
+  el.style.setProperty("--el-color-primary", "red");
+},5000)
 import { ref,provide, onMounted, readonly , watch, toRefs,computed,reactive ,watchEffect  } from 'vue'
 import helloWorld from './components/HelloWorld.vue'
+import elementPlusUse from '@/components/element-plus-use.vue'
+import elementPlusForm from '@/components/element-plus-form.vue'
 //响应式provide ，如果改动inject里面的数据也会改动，如果非响应就不会改动
  const location = ref('North Pole')
   const geolocation = reactive({
@@ -27,12 +39,13 @@ import helloWorld from './components/HelloWorld.vue'
 </script>
 
 <style>
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: var(--font-color);
   margin-top: 60px;
 }
 </style>

src/assets/item.css

+:root {
+    --el-color-primary: red;
+    --el-color-success: #67c23a;
+    --el-color-warning: #e6a23c;
+    --el-color-danger: #f56c6c;
+    --el-color-error: #f56c6c;
+    --el-color-info: #909399;
+    --font-color: #000;
+  }
+
+
+
+  [data-theme="dark"]{
+    --font-color: red;
+  }
\ No newline at end of file

src/components/HelloWorld.vue

@@ -49,6 +49,9 @@ export default {
     axios.get(`/shzl/api/v1/party/personnel`).then(res=>{
       console.log(res);
     })
+    axios.get(`/apaas/backmgt/user/getCurrentUser`).then(res=>{
+      console.log(res);
+    })
   }
 }
 </script>

src/components/element-plus-form.vue

+<template>
+  <el-form ref="formRef" :model="form" label-width="120px">
+    <el-form-item label="Activity name">
+      <el-input v-model="form.name"></el-input>
+    </el-form-item>
+    <el-form-item label="Activity zone">
+      <el-select v-model="form.region" placeholder="please select your zone">
+        <el-option label="Zone one" value="shanghai"></el-option>
+        <el-option label="Zone two" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="Activity time">
+      <el-col :span="11">
+        <el-date-picker
+          v-model="form.date1"
+          type="date"
+          placeholder="Pick a date"
+          style="width: 100%"
+        ></el-date-picker>
+      </el-col>
+      <el-col :span="2" class="text-center">
+        <span class="text-gray-500">-</span>
+      </el-col>
+      <el-col :span="11">
+        <el-time-picker
+          v-model="form.date2"
+          placeholder="Pick a time"
+          style="width: 100%"
+        ></el-time-picker>
+      </el-col>
+    </el-form-item>
+    <el-form-item label="Instant delivery">
+      <el-switch v-model="form.delivery"></el-switch>
+    </el-form-item>
+    <el-form-item label="Activity type">
+      <el-checkbox-group v-model="form.type">
+        <el-checkbox label="Online activities" name="type"></el-checkbox>
+        <el-checkbox label="Promotion activities" name="type"></el-checkbox>
+        <el-checkbox label="Offline activities" name="type"></el-checkbox>
+        <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
+    <el-form-item label="Resources">
+      <el-radio-group v-model="form.resource">
+        <el-radio label="Sponsor"></el-radio>
+        <el-radio label="Venue"></el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="Activity form">
+      <el-input v-model="form.desc" type="textarea"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit">Create</el-button>
+      <el-button>Cancel</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+// do not use same name with ref
+const form = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+})
+
+const onSubmit = () => {
+  console.log('submit!')
+}
+</script>

src/components/element-plus-use.vue

+<template>
+  <el-row class="mb-4">
+    <el-button>Default</el-button>
+    <el-button type="primary">Primary</el-button>
+    <el-button type="success">Success</el-button>
+    <el-button type="info">Info</el-button>
+    <el-button type="warning">Warning</el-button>
+    <el-button type="danger">Danger</el-button>
+    <el-button>中文</el-button>
+  </el-row>
+
+  <el-row class="mb-4">
+    <el-button plain>Plain</el-button>
+    <el-button type="primary" plain>Primary</el-button>
+    <el-button type="success" plain>Success</el-button>
+    <el-button type="info" plain>Info</el-button>
+    <el-button type="warning" plain>Warning</el-button>
+    <el-button type="danger" plain>Danger</el-button>
+  </el-row>
+
+  <el-row class="mb-4">
+    <el-button round>Round</el-button>
+    <el-button type="primary" round>Primary</el-button>
+    <el-button type="success" round>Success</el-button>
+    <el-button type="info" round>Info</el-button>
+    <el-button type="warning" round>Warning</el-button>
+    <el-button type="danger" round>Danger</el-button>
+  </el-row>
+
+  <el-row>
+    <el-button :icon="Search" circle></el-button>
+    <el-button type="primary" :icon="Edit" circle></el-button>
+    <el-button type="success" :icon="Check" circle></el-button>
+    <el-button type="info" :icon="Message" circle></el-button>
+    <el-button type="warning" :icon="Star" circle></el-button>
+    <el-button type="danger" :icon="Delete" circle></el-button>
+  </el-row>
+
+  
+</template>
+
+<script setup>
+import {
+  Search,
+  Edit,
+  Check,
+  Message,
+  Star,
+  Delete,
+} from '@element-plus/icons-vue'
+</script>
+
+<style>
+
+</style>

src/components/virtual-scroll.vue

+<template>
+    <div class="virtual-box">
+      <div class="virtual-content" @scroll="load_data($event)">
+        <div class="virtual-long-content" :style="{height:data.length*minHeight+'px'}">
+          <div class="virtual-min-box" :ref="'virtual'+index" :style="{top:get_top(index),height:minHeight+'px'}" :data-set="index" v-for="(item,index) in now_arr" :key="index">
+              <slot :item="item"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        minHeight:{
+            type:Number,
+            default:50
+        },
+        data:{
+            type:Array,
+            default:()=>[]
+        }
+    },
+    components: {
+
+    },
+    data() {
+        return {
+            now_arr:[],
+            now_data:0,
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+        for(let i=0;i<=20;i++){
+            this.now_arr.push(this.data[i])
+        }
+    },
+    mounted() {
+
+    },
+    methods: {
+        load_data(e){
+            console.log(e.target.scrollTop);//滚动距离
+            this.now_arr = []
+            this.now_data = Math.ceil(e.target.scrollTop/this.minHeight)//滚动的数据数量
+            console.log(this.now_data);
+            let start = 0 //起始数据index
+            let end = this.now_data+20 //终止数据index
+            if(this.now_data-10>0){
+                start = this.now_data-10
+            }
+            if(end>=this.data.length){
+                end = this.data.length
+            }
+            for(let i=start;i<end;i++){
+                this.now_arr.push(this.data[i])
+            }
+        },
+        get_top(index){
+            let start = 0
+            if(this.now_data-10>0){
+                start = this.now_data-10
+            }
+            return this.minHeight*(index+start)+'px'
+        }
+    },
+};
+</script>
+
+<style scoped>
+.virtual-content{
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+.virtual-long-content{
+    width: 100%;
+    position: relative;
+}
+.virtual-min-box{
+    width: 100%;
+    /* height: 50px; */
+    position: absolute;
+    left: 0;
+    /* line-height: 50px; */
+    color: #000;
+    text-align: center;
+}
+</style>

src/main.js

 import { createApp } from 'vue'
+
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
 import App from './App.vue'
 
 import router from './router'
 
+import './assets/item.css'
+
 import store from '@/store';
 
 import api from '@/request/api.js'
 
 import i18n from './i18n/i18n.js'
 
+import axios from 'axios';
+
 const createVue = createApp(App)
 
 createVue.config.globalProperties.$api = api
 
-createVue.use(store).use(api).use(router).use(i18n)
+createVue.config.globalProperties.$axios = axios
+
+
+//后期加入权限处理，参考msg/ui
+createVue.use(ElementPlus).use(store).use(api).use(router).use(i18n)
 console.log(i18n);
 createVue.mount('#app')
 
+
+

src/pages/home.vue

@@ -15,13 +15,17 @@
                 </div>
             </div>
         </teleport>
-        
+        <virtual-scroll v-slot="{ item }" style="width:200px;height:500px;" :minHeight="40" :data="virtual_data">
+            <div class="virtual-box">{{item.name}}</div>
+        </virtual-scroll>
     </div>
 </template>
 
 <script>
 import { ref, inject,onMounted, readonly , watch, toRefs,computed,reactive ,watchEffect  } from 'vue'
 
+import virtualScroll from '@/components/virtual-scroll.vue'
+
 export default {
     setup (props,context) {
         //setup inject的使用
@@ -66,11 +70,12 @@ export default {
         user:''
     },
     components: {
-
+        virtualScroll
     },
     data() {
         return {
             modalOpen:false,
+            virtual_data:[],
         };
     },
     watch: {
@@ -80,6 +85,24 @@ export default {
 
     },
     created() {
+        for(let i=0;i<=10000;i++){
+            this.virtual_data.push({
+                name:'王五',
+                age:16
+            },{
+                name:'lisi',
+                age:13
+            },{
+                name:'wangheng',
+                age:6
+            },{
+                name:'wweee',
+                age:44
+            })
+        }
+
+
+
         console.log(this.counttt);
         this.modalOpen = true
         /**
@@ -186,4 +209,9 @@ export default {
     margin: 0 auto;
     background-color: #fff;
 }
+.virtual-box{
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+}
 </style>

src/pages/index.vue

@@ -37,6 +37,7 @@ export default {
     },
     methods: {
         gotopage(){
+            console.log(this.$router);
             this.$router.push('/home')
         }
     },

vite.config.js

@@ -18,13 +18,23 @@ export default defineConfig({
       '@':resolve_path('src'),
     }
   },
+  css:{
+    devSourcemap:true
+  },
   server:{
     proxy:{
       '/shzl/api': {
         target: 'https://sjgl.wodcloud.com/shzl/api',  // 接口域名
         changeOrigin: true,  // 是否跨域
         rewrite: (path) => path.replace('/shzl/api', ''),
+        secure: false,//解决证书缺失问题
       },
+      '/apaas':{
+        target: 'https://www.gzdex.com.cn/apaas/', // 所要代理的目标地址
+        rewrite: path => path.replace('/apaas', ''), // 重写传过来的path路径，比如 `/api/index/1?id=10&name=zs`（注意:path路径最前面有斜杠（/），因此，正则匹配的时候不要忘了是斜杠（/）开头的；选项的 key 也是斜杠（/）开头的）
+        changeOrigin: true,  // true/false, Default: false - changes the origin of the host header to the target URL
+        secure: false,//解决证书缺失问题
+      }
     }
   },
   build:{