diff --git a/src/views/image/index.vue b/src/views/shapes/image/index.vue
similarity index 100%
rename from src/views/image/index.vue
rename to src/views/shapes/image/index.vue
diff --git a/src/views/line/index.vue b/src/views/shapes/line/index.vue
similarity index 100%
rename from src/views/line/index.vue
rename to src/views/shapes/line/index.vue
diff --git a/src/views/overview/index.vue b/src/views/shapes/overview/index.vue
similarity index 100%
rename from src/views/overview/index.vue
rename to src/views/shapes/overview/index.vue
diff --git a/src/views/path/index.vue b/src/views/shapes/path/index.vue
similarity index 100%
rename from src/views/path/index.vue
rename to src/views/shapes/path/index.vue
diff --git a/src/views/shape/index.vue b/src/views/shapes/shape/index.vue
similarity index 60%
rename from src/views/shape/index.vue
rename to src/views/shapes/shape/index.vue
index bed6d01..a703c33 100644
--- a/src/views/shape/index.vue
+++ b/src/views/shapes/shape/index.vue
@@ -4,5 +4,5 @@
 </template>
 
 <script setup lang="ts">
-import Rect from '@/views/shape/rect.vue';
+import Rect from '@/views/shapes/shape/rect.vue';
 </script>
diff --git a/src/views/shape/rect.vue b/src/views/shapes/shape/rect.vue
similarity index 100%
rename from src/views/shape/rect.vue
rename to src/views/shapes/shape/rect.vue
diff --git a/src/views/sprite/index.vue b/src/views/shapes/sprite/index.vue
similarity index 100%
rename from src/views/sprite/index.vue
rename to src/views/shapes/sprite/index.vue
diff --git a/src/views/text/index.vue b/src/views/shapes/text/index.vue
similarity index 100%
rename from src/views/text/index.vue
rename to src/views/shapes/text/index.vue
diff --git a/src/views/shapes/图形/index.vue b/src/views/shapes/图形/index.vue
new file mode 100644
index 0000000..5b75da3
--- /dev/null
+++ b/src/views/shapes/图形/index.vue
@@ -0,0 +1,38 @@
+<template>
+	<div id="container"></div>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
+import Konva from 'konva/lib/index';
+import { onMounted } from 'vue';
+
+const { width, height } = useWindowSize();
+const initial = () => {
+	const stage = new Konva.Stage({
+		container: 'container',
+		width: width.value,
+		height: height.value,
+	});
+
+	const layer = new Konva.Layer({ draggable: true });
+
+	layer.add(
+		new Konva.RegularPolygon({
+			x: 100,
+			y: 150,
+			sides: 6,
+			radius: 70,
+			fill: 'red',
+			stroke: 'black',
+			strokeWidth: 4,
+		}),
+	);
+
+	stage.add(layer);
+};
+
+onMounted(() => {
+	initial();
+});
+</script>
diff --git a/src/views/shapes/箭头/index.vue b/src/views/shapes/箭头/index.vue
new file mode 100644
index 0000000..4271f4d
--- /dev/null
+++ b/src/views/shapes/箭头/index.vue
@@ -0,0 +1,38 @@
+<template>
+	<div id="container"></div>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
+import Konva from 'konva/lib';
+import { onMounted } from 'vue';
+
+const { width, height } = useWindowSize();
+const initial = () => {
+	const stage = new Konva.Stage({
+		container: 'container',
+		width: width.value,
+		height: height.value,
+	});
+
+	const layer = new Konva.Layer({ draggable: true });
+
+	layer.add(
+		new Konva.Arrow({
+			x: 100,
+			y: 150,
+			points: [0, 10, 100, 100],
+			pointerLength: 20,
+			fill: 'red',
+			stroke: 'black',
+			strokeWidth: 2,
+		}),
+	);
+
+	stage.add(layer);
+};
+
+onMounted(() => {
+	initial();
+});
+</script>
diff --git a/src/views/shapes/自定义图形/index.vue b/src/views/shapes/自定义图形/index.vue
new file mode 100644
index 0000000..015dcad
--- /dev/null
+++ b/src/views/shapes/自定义图形/index.vue
@@ -0,0 +1,44 @@
+<template>
+	<div id="container"></div>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
+import Konva from 'konva/lib';
+import { onMounted } from 'vue';
+
+const { width, height } = useWindowSize();
+
+const initial = () => {
+	const stage = new Konva.Stage({
+		container: 'container',
+		width: width.value,
+		height: height.value,
+	});
+
+	const layer = new Konva.Layer({ draggable: true });
+
+	const cuttomShape = new Konva.Shape({
+		x: 16,
+		y: 30,
+		width: width.value/2,
+		height: height.value/2,
+		sceneFunc(context, shape) {
+			context.beginPath();
+
+			context.rect(0, 0, shape.getAttr('width'), shape.getAttr('height'));
+			context.fillStrokeShape(shape);
+		},
+		fill: '#00D2FF',
+		stroke: 'black',
+		strokeWidth: 4,
+	});
+
+	layer.add(cuttomShape);
+	stage.add(layer);
+};
+
+onMounted(() => {
+	initial();
+});
+</script>
diff --git a/src/views/styling/fill/index.vue b/src/views/styling/fill/index.vue
new file mode 100644
index 0000000..bb7b8c1
--- /dev/null
+++ b/src/views/styling/fill/index.vue
@@ -0,0 +1,7 @@
+<template>
+<div id="container"></div>
+</template>
+
+<script setup lang="ts">
+	
+</script>
\ No newline at end of file