feat: 初始化素材中心页面路由结构

src/views/material-center/components/finished-products/constants.ts

@@ -0,0 +1,26 @@
+export enum AuditStatus {
+  All = '0',
+  Pending = '1',
+  Auditing = '2',
+  Passed = '3',
+}
+
+export const TABS_LIST = [
+  {
+    label: '全部',
+    value: AuditStatus.All,
+  },
+  {
+    label: '待审核',
+    value: AuditStatus.Pending,
+  },
+  {
+    label: '审核中',
+    value: AuditStatus.Auditing,
+  },
+  {
+    label: '已通过',
+    value: AuditStatus.Passed,
+  },
+];
+

src/views/material-center/components/finished-products/index.vue

@@ -0,0 +1,35 @@
+<script lang="tsx">
+import { Tabs, TabPane } from 'ant-design-vue';
+
+import { TABS_LIST, AuditStatus } from './constants';
+
+export default defineComponent({
+  setup(_, { attrs, slots, expose }) {
+    const activeKey = ref(AuditStatus.All);
+    
+    return () => (
+      <div class="finished-products-wrap h-full flex flex-col">
+        <div class="bg-#fff rounded-8px mb-16px">
+          <Tabs v-model:activeKey={activeKey.value} v-slots={{
+            'rightExtra': () => (
+              <div class="flex items-center">
+                123
+              </div>
+            )
+          }}>
+            {TABS_LIST.map((item) => (
+              <TabPane key={item.value} tab={item.label}>
+                {item.label}
+              </TabPane>
+            ))}
+          </Tabs>
+        </div>
+      </div>
+    );
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/material-center/components/finished-products/style.scss

@@ -0,0 +1,37 @@
+.finished-products-wrap {
+  :deep(.ant-tabs) {
+    .ant-tabs-nav {
+      margin-bottom: 0;
+      padding: 0 24px;
+      .ant-tabs-nav-wrap {
+        height: 56px;
+        .ant-tabs-nav-list {
+          .ant-tabs-tab {
+            .ant-tabs-tab-btn {
+              color: var(--Text-2, #55585f);
+              font-family: $font-family-regular;
+              font-size: 16px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: 24px;
+            }
+            &.ant-tabs-tab-active {
+              .ant-tabs-tab-btn {
+                color: var(--Brand-6, #6d4cfe);
+                font-weight: 500;
+                font-family: $font-family-medium;
+                text-shadow: none;
+              }
+            }
+          }
+          .ant-tabs-ink-bar {
+            background: #6D4CFE;
+          }
+        }
+      }
+    }
+    .ant-tabs-content-holder {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+<script lang="tsx">
+export default defineComponent({
+  setup(_, { attrs, slots, expose }) {
+
+    return () => (
+      <div class="raw-material-wrap h-full flex flex-col">
+      原材料库
+      </div>
+    );
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/material-center/components/raw-material/style.scss

@@ -0,0 +1,3 @@
+.raw-material-wrap {
+    
+}

src/views/material-center/index.vue

@@ -0,0 +1,54 @@
+<script lang="tsx">
+import FinishedProducts from './components/finished-products/index.vue';
+import RawMaterial from './components/raw-material/index.vue';
+
+const TABS = [
+  {
+    label: '成品库',
+    key: '1',
+    routeName: 'MaterialCenterFinishedProducts',
+  },
+  {
+    label: '原料库',
+    key: '2',
+    routeName: 'MaterialCenterRawMaterial',
+  },
+];
+export default defineComponent({
+  setup(_, { attrs, slots, expose }) {
+    const route = useRoute();
+    const router = useRouter();
+
+    const activeKey = ref('1');
+
+    onMounted(() => {
+      activeKey.value = TABS.find((item) => item.routeName === route.name)?.key;
+    });
+    return () => (
+      <div class="material-center-wrap h-full flex flex-col">
+        <header class="py-16px px-24px rounded-8px bg-#fff flex items-center mb-16px">
+          {TABS.map((item) => (
+            <p
+              key={item.key}
+              class={`font-family-medium color-#737478 font-400 text-16px lh-24px cursor-pointer mr-32px ${
+                item.key === activeKey.value ? '!color-#6D4CFE font-500' : ''
+              }`}
+              onClick={() => {
+                activeKey.value = item.key;
+                router.push({ name: item.routeName });
+              }}
+            >
+              {item.label}
+            </p>
+          ))}
+        </header>
+        {activeKey.value === '1' ? <FinishedProducts /> : <RawMaterial />}
+      </div>
+    );
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/material-center/style.scss

@@ -0,0 +1,2 @@
+.material-center-wrap {
+}