init:低代码初始化

src/App.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import VueDemo from './components/VueDemo.vue';
+
+
+</script>
+
+<template>
+<VueDemo></VueDemo>
+
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

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>

src/components/VueDemo.vue

@@ -0,0 +1,58 @@
+<template>
+  <a-row style="padding: 20px">
+    <a-col span="10">
+      <h3>列表区域</h3>
+      <draggable
+        class="dragArea list-group"
+        :list="list1"
+        :sort="false"
+        :group="{ name: 'people', pull: 'clone', put: false }"
+      >
+        <div class="list-group-item" v-for="element in list1" :key="element.name" >
+          {{ element.name }}
+        </div>
+      </draggable>
+    </a-col>
+    <a-col span="10" offset="4">
+      <h3>目标区域</h3>
+      <draggable
+        class="dragArea list-group"
+        :list="list2"
+        group="people"
+      >
+        <div class="list-group-item" v-for="element in list2" :key="element.name" >
+          {{ element.name }}
+        </div>
+      </draggable>
+    </a-col>
+  </a-row>
+</template>
+<script>
+import { VueDraggableNext } from 'vue-draggable-next'
+export default {
+  components: {
+    draggable:VueDraggableNext
+  },
+  data() {
+    return {
+      list1: [
+        { name: "组件1", id: 1 },
+        { name: "组件2", id: 2 },
+        { name: "组件3", id: 3 },
+        { name: "组件4", id: 4 }
+      ],
+      list2: [
+        { name: "画布组件1", id: 5 },
+        { name: "画布组件2", id: 6 },
+        { name: "画布组件3", id: 7 }
+      ]
+    };
+  }
+};
+</script>
+<style scoped>
+.list-group-item {
+  height: 30px;
+  border: 1px solid #888888;
+}
+</style>

src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+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 {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/type/IMaterial.ts

@@ -0,0 +1,37 @@
+interface IMaterial {
+    version: string;
+    componentName: string;
+    title: string;
+    icon?: string;
+    group?: string;
+    npm?: {
+      componentName?: string;
+      package: string;
+      version?: string;
+    };
+    props?: Array<{
+      name: string;
+      propType: string;
+      description: string;
+      defaultValue?: any;
+    }>;
+    style?: {
+      width?: string;
+      height?: string;
+      [key: string]: string | number | undefined; // 允许其他样式属性，可以是 string | number | undefined 类型
+    };
+    events?: Array<{
+      name: string;
+      description: string;
+    }>;
+    slots: {
+      default: string; // 默认插槽必须有值
+      [key: string]: string | undefined; // 其他插槽可以是 string | undefined 类型
+    };
+    loop?: {
+      propName: string;
+      description: string;
+    };
+  }
+  
+  

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />