diff --git a/static/vue-app.js b/static/vue-app.js
index 1daa8c7..797fcf7 100644
--- a/static/vue-app.js
+++ b/static/vue-app.js
@@ -1472,6 +1472,7 @@ const InventoryView = {
     const route = useRoute();
     const state = reactive({
       activeTab: 'dashboard',
+      productCategory: 'finished',
       dashboard: null,
       financeSummary: null,
       financePeriod: {
@@ -1746,6 +1747,24 @@ const InventoryView = {
       }
     };
 
+    const switchProductCategory = (category) => {
+      state.productCategory = category;
+    };
+
+    const openCreateProduct = (itemType) => {
+      state.modalType = 'product';
+      state.editingItem = null;
+      state.form = {
+        item_type: itemType,
+        unit: itemType === 'material' ? 'kg' : '件',
+        min_stock: 0,
+        max_stock: 1000,
+        cost_price: 0,
+        sale_price: 0
+      };
+      state.showModal = true;
+    };
+
     const loadOrderProductionPlan = async (orderId) => {
       try {
         state.productionPlan = await apiRequest(`/api/sales-orders/${orderId}/production-plan`);
@@ -2243,6 +2262,8 @@ const InventoryView = {
       formatCurrency, 
       formatDateTime,
       openModal,
+      switchProductCategory,
+      openCreateProduct,
       closeModal,
       saveProduct,
       deleteProduct,
@@ -2345,8 +2366,15 @@ const InventoryView = {
         </div>
         
         <div v-else-if="state.activeTab === 'products'">
+          <div class="table-container" style="margin-bottom: 12px;">
+            <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
+              <button :class="['btn', state.productCategory === 'finished' ? 'btn-primary' : 'btn-secondary']" @click="switchProductCategory('finished')">成品</button>
+              <button :class="['btn', state.productCategory === 'material' ? 'btn-primary' : 'btn-secondary']" @click="switchProductCategory('material')">物料</button>
+            </div>
+          </div>
           <div class="table-header">
-            <button class="btn btn-primary" @click="openModal('product')">+ 新增产品</button>
+            <button v-if="state.productCategory === 'finished'" class="btn btn-primary" @click="openCreateProduct('finished')">+ 新增成品</button>
+            <button v-else class="btn btn-primary" @click="openCreateProduct('material')">+ 新增物料</button>
           </div>
           <div class="table-container">
             <table class="data-table">
@@ -2364,7 +2392,7 @@ const InventoryView = {
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="product in state.products" :key="product.id">
+                <tr v-for="product in state.products.filter(p => p.item_type === state.productCategory)" :key="product.id">
                   <td>{{ product.item_type === 'material' ? '物料' : '成品' }}</td>
                   <td>{{ product.sku }}</td>
                   <td>{{ product.name }}</td>