diff --git a/yudao-admin-vue3/src/views/mall/promotion/diy/template/decoratePerson.vue b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decoratePerson.vue
new file mode 100644
index 0000000..bf60c7b
--- /dev/null
+++ b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decoratePerson.vue
@@ -0,0 +1,137 @@
+<template>
+    <div class="main">
+        <div class="mainTop">
+            <div>商品分类</div>
+            <div class="right">
+                <div class="save" @click="save">保存</div>
+                <div class="cz" @click="cz">重置</div>
+            </div>
+        </div>
+
+        <div class="mainBottom">
+            <div class='item' :class="currItem == 1 ? 'on' : ''" @click="clickItem(1)">
+                <img class="img"
+                    src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/9349d776503051646314323aced460314415a04c943dc220e9e5b86362f864dd.png" />
+                <div class="text">样式1</div>
+            </div>
+            <!-- <div class='item' :class="currItem == 2 ? 'on' : ''" @click="clickItem(2)">
+                <img class="img"
+                    src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/909ef630cff7cdc957962ae782ee9a882c86c35732140b1c9e013341fa559126.jpg" />
+                <div class="text">样式2</div>
+            </div> -->
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
+import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+import { useTagsdivStore } from '@/store/modules/tagsdiv'
+import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
+import { toNumber } from 'lodash-es'
+const message = useMessage() // 消息弹窗
+const currItem = ref();
+
+function clickItem(val) {
+    currItem.value = val;
+}
+
+function cz(val) {
+    currItem.value = 1;
+}
+
+function save() {
+    setProjuctClass(currItem.value);
+    // console.log("请求接口还没有写啊！！！！快让后端提供啊")
+}
+
+// 设置商品分类
+const setProjuctClass = async (id) => {
+    // const res = await DiyTemplateApi.setDiyProjuctClass(id);
+    // console.log(res, "sssss");
+    // if (res) {
+    message.success('保存成功')
+    // }
+}
+
+// 获取商品分类
+const getProjuctClass = async () => {
+    const res = await DiyTemplateApi.getDiyProjuctClass();
+    currItem.value = res
+}
+getProjuctClass()
+</script>
+
+<style lang="scss" scoped>
+.main {
+    display: flex;
+    flex-wrap: wrap;
+
+    .mainTop {
+        width: 100%;
+        margin: 10px 10px;
+        background: white;
+        padding: 10px 20px;
+        font-weight: 700;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .right {
+            display: flex;
+
+            div {
+                padding: 5px 15px;
+                font-weight: 400;
+                font-size: 14px;
+            }
+
+            .save {
+                background: #0256FF;
+                margin-right: 10px;
+                color: white;
+                cursor: pointer;
+            }
+
+            .cz {
+                border: 1px solid #cccccc;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .mainBottom {
+        width: 100%;
+        margin: 10px 10px;
+        background: white;
+        padding: 30px 30px;
+        display: flex;
+
+        .item {
+            margin-right: 20px;
+            text-align: center;
+            border-radius: 12px;
+            cursor: pointer;
+
+            &.on {
+                .text {
+                    color: #0256ff;
+                }
+
+                .img {
+                    border: 2px solid #0256ff;
+                }
+            }
+
+            .img {
+                width: 260px;
+                border-radius: 12px;
+                border: 2px solid white;
+            }
+
+            .text {
+                margin-top: 10px;
+            }
+        }
+    }
+}
+</style>