feat: 原料库

src/views/writer-material-center/components/raw-material/constants.ts

@@ -0,0 +1,26 @@
+export enum RawMaterialType {
+  All = '0',
+  Image = '0',
+  Video = '1',
+  Text = '2',
+}
+
+export const TABS_LIST = [
+  {
+    label: '全部',
+    value: RawMaterialType.All,
+  },
+  {
+    label: '图片',
+    value: RawMaterialType.Image,
+  },
+  {
+    label: '视频',
+    value: RawMaterialType.Video,
+  },
+  {
+    label: '文本',
+    value: RawMaterialType.Text,
+  },
+];
+

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

@@ -1,10 +1,23 @@
 <script lang="tsx">
+import { Tabs, TabPane } from 'ant-design-vue';
+import { TABS_LIST, RawMaterialType } from './constants';
+
 export default defineComponent({
   setup(_, { attrs, slots, expose }) {
-
+    const rawMaterialType = ref(RawMaterialType.All);
     return () => (
       <div class="raw-material-wrap h-full flex flex-col">
-      原材料库
+        <div class="bg-white rounded-t-8px">
+          <Tabs
+            v-model:activeKey={rawMaterialType.value}
+          >
+            {TABS_LIST.map((item) => (
+              <TabPane key={item.value} tab={item.label}>
+                {item.label}
+              </TabPane>
+            ))}
+          </Tabs>
+        </div>
       </div>
     );
   },