增加原料管理界面

src/views/feed/RawMaterialList.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="raw-material-list-container">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="title-container">
+            <h2 class="page-title">原料管理</h2>
+            <el-button type="text" @click="refreshList" class="refresh-btn" title="刷新原料列表">
+              <el-icon :size="20"><Refresh /></el-icon>
+            </el-button>
+          </div>
+          <el-button type="primary" @click="addRawMaterial">添加原料</el-button>
+        </div>
+      </template>
+      <raw-material-table ref="rawMaterialTableRef"></raw-material-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { Refresh } from '@element-plus/icons-vue';
+import RawMaterialTable from '../../components/feed/RawMaterialTable.vue';
+
+export default {
+  name: 'RawMaterialList',
+  components: {
+    RawMaterialTable,
+    Refresh,
+  },
+  setup() {
+    const rawMaterialTableRef = ref(null);
+
+    const refreshList = () => {
+      if (rawMaterialTableRef.value) {
+        rawMaterialTableRef.value.fetchRawMaterials();
+      }
+    };
+
+    const addRawMaterial = () => {
+      // 待实现
+      console.log('add raw material');
+    };
+
+    return {
+      rawMaterialTableRef,
+      refreshList,
+      addRawMaterial,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.raw-material-list-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 0;
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.refresh-btn {
+  color: black;
+  background-color: transparent;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+@media (max-width: 768px) {
+  .raw-material-list-container {
+    padding: 10px;
+  }
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+  }
+}
+</style>