feat: 原料库-添加标签管理功能和相关组件

- 在 `raw-material` 组件中添加标签管理按钮和模态框
- 新增 `tags-manage-modal` 组件及其子组件 `add-tag` 和 `delete-tag`
- 添加原料库标签相关的 API 接口
- 更新样式文件以支持新的标签管理界面

src/views/material-center/components/raw-material/index.vue

@@ -1,14 +1,18 @@
 <script lang="tsx">
-import { provide } from 'vue';
-import { Tabs, TabPane, Button, Pagination } from 'ant-design-vue';
+import { provide, ref } from 'vue';
 import { TABS_LIST, RawMaterialType, INITIAL_QUERY, TABLE_COLUMNS } from './constants';
+
+import { Tabs, TabPane, Button, Pagination } from 'ant-design-vue';
 import FilterBlock from './components/filter-block/index.vue';
 import RawMaterialTable from './components/table/index.vue';
 import DeleteRawMaterialModal from './components/table/delete-file-modal.vue';
+import TagsManageModal from './components/tags-manage-modal';
 
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
 import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
 
+import icon3 from '@/assets/img/media-account/icon-tag.png';
+
 export default defineComponent({
   setup(_, { attrs, slots, expose }) {
     const {
@@ -27,6 +31,8 @@ export default defineComponent({
     });
 
     const deleteRawMaterialModalRef = ref(null);
+    const tagsManageModalRef = ref(null);
+
     const query = ref(cloneDeep(INITIAL_QUERY));
     const handleSearch = () => {
       getData();
@@ -81,6 +87,13 @@ export default defineComponent({
       getData();
     };
 
+    const handleOpenTagsModal = () => {
+      tagsManageModalRef.value?.open();
+    };
+    const handleAddMaterial = () => {
+      console.log('handleAddMaterial');
+    };
+
     onMounted(() => {
       getData();
     });
@@ -88,7 +101,37 @@ export default defineComponent({
     return () => (
       <div class="raw-material-wrap h-full flex flex-col">
         <div class="bg-white rounded-t-8px">
-          <Tabs v-model:activeKey={query.value.type} onTabClick={handleTabClick}>
+          <Tabs
+            v-model:activeKey={query.value.type}
+            onTabClick={handleTabClick}
+            v-slots={{
+              rightExtra: () => (
+                <div class="flex items-center">
+                  <Button
+                    type="primary"
+                    ghost
+                    size="medium"
+                    onClick={handleOpenTagsModal}
+                    v-slots={{
+                      icon: () => <img src={icon3} width="16" height="16" class="mr-8px" />,
+                    }}
+                  >
+                    标签管理
+                  </Button>
+                  <Button
+                    type="primary"
+                    size="medium"
+                    class="ml-12px"
+                    onClick={handleAddMaterial}
+                    v-slots={{
+                      icon: () => <icon-plus size="16" class="mr-8px" />,
+                      default: () => '上传原料',
+                    }}
+                  />
+                </div>
+              ),
+            }}
+          >
             {TABS_LIST.map((item) => (
               <TabPane key={item.value} tab={item.label}>
                 {item.label}
@@ -137,6 +180,8 @@ export default defineComponent({
             </div>
           )}
         </div>
+
+        <TagsManageModal ref={tagsManageModalRef} />
         <DeleteRawMaterialModal ref={deleteRawMaterialModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
       </div>
     );