diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index ae177f92c8a974a119e2ef12a6dd9a3463915891..b5c6c495e2abc7021987bc44b967bccc4421d5dc 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,26 +1,67 @@
+<template>
+    <div>
+        <h1>耗材档案管理</h1>
+        <form @submit.prevent="addMaterial">
+            <input v-model="newmaterial.name"
+            type="text" placeholder="耗材名称"
+            required />
+            <input v-model="newMaterial.quantity" type="number" placeholder="数量"  required/>
+            <button type="submit">添加耗材</button>
+        </form>
+        
+    </div>
+</template> 
+
 <script>
-    export default({
-        data(){
-            name:"123"
-        }
-    })
+import { ref } from 'vue';
+
+export default {
+  name: 'MaterialRecord',
+  setup() {
+    const materials = ref([]);
+    const newMaterial = ref({ name: '', quantity: 1 });
+
+    const addMaterial = () => {
+      if (newMaterial.value.name && newMaterial.value.quantity) {
+        materials.value.push({
+          id: Date.now(),
+          name: newMaterial.value.name,
+          quantity: newMaterial.value.quantity,
+        });
+        newMaterial.value.name = '';
+        newMaterial.value.quantity = 1;
+      }
+    };
+
+    const removeMaterial = (index) => {
+      materials.value.splice(index, 1);
+    };
+
+    return {
+      materials,
+      newMaterial,
+      addMaterial,
+      removeMaterial,
+    };
+  },
+};
 </script>
 
 <style scoped>
-.item-list {
-  list-style-type: none;
-  padding: 0;
+h1 {
+  margin-bottom: 20px;
+}
+
+form {
+  margin-bottom: 20px;
 }
 
-.list-item {
-  margin: 5px 0;
-  padding: 10px;
-  background-color: #f9f9f9;
-  border: 1px solid #ddd;
+input {
+  margin-right: 10px;
 }
 
-.no-items {
-  color: gray;
-  text-align: center;
+ul {
+  list-style-type: none;
+  padding: 0;
 }
-</style>
+</style>
\ No newline at end of file