From 67e8c86b5bd800ade73c8ef218aeb02a5313871c Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Thu, 22 Oct 2026 09:15:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=A3=85=E4=BF=AE-=E5=88=86=E7=B1=BB=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B5(=E6=A8=A1=E6=9D=BF=E9=80=89=E6=8B=A9+=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E5=88=97=E8=A1=A8=E5=AD=97=E6=AE=B5=E5=BC=80=E5=85=B3?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page-decoration/category-setting.vue      | 349 ++++++++++++++++++
 1 file changed, 349 insertions(+)
 create mode 100644 manager/src/views/page-decoration/category-setting.vue

diff --git a/manager/src/views/page-decoration/category-setting.vue b/manager/src/views/page-decoration/category-setting.vue
new file mode 100644
index 000000000..7755c76d1
--- /dev/null
+++ b/manager/src/views/page-decoration/category-setting.vue
@@ -0,0 +1,349 @@
+<template>
+  <div class="category-setting" v-loading="loading">
+    <el-card shadow="never" class="panel">
+      <div class="section-title">分类导航</div>
+      <div class="section-sub">选择模板</div>
+      <div class="template-list">
+        <div
+          v-for="tpl in templates"
+          :key="tpl.value"
+          class="template-card"
+          :class="{ active: form.template === tpl.value }"
+          @click="form.template = tpl.value"
+        >
+          <!-- 纯 CSS 示意图 -->
+          <div class="mini-phone">
+            <div class="mini-search"></div>
+            <!-- 模板1:左栏 + 宫格 -->
+            <template v-if="tpl.value === 1">
+              <div class="mini-body">
+                <div class="mini-side">
+                  <i v-for="n in 6" :key="n" :class="{ on: n === 1 }"></i>
+                </div>
+                <div class="mini-grid">
+                  <div class="mini-grid-title"></div>
+                  <div class="mini-grid-cells">
+                    <i v-for="n in 6" :key="n"></i>
+                  </div>
+                </div>
+              </div>
+            </template>
+            <!-- 模板2:顶部图标横排 + 标签行 + 左竖列 + 单列商品 -->
+            <template v-else-if="tpl.value === 2">
+              <div class="mini-icon-row">
+                <i v-for="n in 5" :key="n" :class="{ on: n === 1 }"></i>
+              </div>
+              <div class="mini-tag-row">
+                <i v-for="n in 4" :key="n" :class="{ on: n === 1 }"></i>
+              </div>
+              <div class="mini-body">
+                <div class="mini-side">
+                  <i v-for="n in 5" :key="n" :class="{ on: n === 2 }"></i>
+                </div>
+                <div class="mini-goods">
+                  <i v-for="n in 3" :key="n"></i>
+                </div>
+              </div>
+            </template>
+            <!-- 模板3:顶部图标横排 + 左竖列 + 单列商品(无标签行) -->
+            <template v-else-if="tpl.value === 3">
+              <div class="mini-icon-row">
+                <i v-for="n in 5" :key="n" :class="{ on: n === 1 }"></i>
+              </div>
+              <div class="mini-body">
+                <div class="mini-side">
+                  <i v-for="n in 5" :key="n" :class="{ on: n === 1 }"></i>
+                </div>
+                <div class="mini-goods">
+                  <i v-for="n in 3" :key="n"></i>
+                </div>
+              </div>
+            </template>
+            <!-- 模板4:左竖列(一级) + 右上文字横排(二级) + 单列商品 -->
+            <template v-else>
+              <div class="mini-body">
+                <div class="mini-side">
+                  <i v-for="n in 5" :key="n" :class="{ on: n === 1 }"></i>
+                </div>
+                <div class="mini-right">
+                  <div class="mini-tag-row">
+                    <i v-for="n in 4" :key="n" :class="{ on: n === 1 }"></i>
+                  </div>
+                  <div class="mini-goods">
+                    <i v-for="n in 3" :key="n"></i>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div class="template-name">{{ tpl.name }}</div>
+        </div>
+      </div>
+
+      <div class="section-title">页面设置</div>
+      <div class="section-sub">商品列表展示字段</div>
+      <div class="field-list">
+        <el-checkbox model-value :disabled="true">商品名称</el-checkbox>
+        <el-checkbox
+          v-for="f in fieldOptions"
+          :key="f.key"
+          v-model="form.showFields[f.key]"
+          >{{ f.label }}</el-checkbox
+        >
+      </div>
+
+      <el-button type="primary" :loading="saveLoading" class="save-btn" @click="submit"
+        >保存设置</el-button
+      >
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { getSetting, setSetting } from "@/api/index";
+import { Message } from "@/utils/message";
+
+defineOptions({ name: "category-setting" });
+
+const SETTING_KEY = "CATEGORY_PAGE_SETTING";
+
+const templates = [
+  { value: 1, name: "模板一:左树右宫格" },
+  { value: 2, name: "模板二:图标导航+三级标签" },
+  { value: 3, name: "模板三:图标导航" },
+  { value: 4, name: "模板四:侧栏一级+二级横滑" },
+];
+
+const fieldOptions = [
+  { key: "subTitle", label: "商品副标题" },
+  { key: "spec", label: "规格值" },
+  { key: "tags", label: "标签" },
+  { key: "selfTag", label: "自营标签" },
+  { key: "price", label: "价格(市场价/会员价)" },
+  { key: "linePrice", label: "划线价" },
+  { key: "sales", label: "销量/好评/好评率" },
+  { key: "cart", label: "购物车" },
+];
+
+const loading = ref(false);
+const saveLoading = ref(false);
+
+function defaultForm() {
+  return {
+    template: 1,
+    showFields: {
+      subTitle: true,
+      spec: true,
+      tags: true,
+      selfTag: true,
+      price: true,
+      linePrice: true,
+      sales: true,
+      cart: true,
+    },
+  };
+}
+
+const form = ref(defaultForm());
+
+onMounted(() => {
+  loadSetting();
+});
+
+function loadSetting() {
+  loading.value = true;
+  getSetting(SETTING_KEY)
+    .then((res) => {
+      if (res.success && res.result) {
+        const data = res.result;
+        const merged = defaultForm();
+        if ([1, 2, 3, 4].includes(data.template)) {
+          merged.template = data.template;
+        }
+        Object.assign(merged.showFields, data.showFields || {});
+        form.value = merged;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function submit() {
+  saveLoading.value = true;
+  setSetting(SETTING_KEY, form.value)
+    .then((res) => {
+      if (res.success) {
+        Message.success("保存成功");
+      } else {
+        Message.error("保存失败");
+      }
+    })
+    .finally(() => {
+      saveLoading.value = false;
+    });
+}
+</script>
+
+<style scoped lang="scss">
+.category-setting {
+  padding: 16px;
+}
+.panel {
+  max-width: 960px;
+}
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 8px 0;
+}
+.section-sub {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 12px;
+}
+.template-list {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 24px;
+}
+.template-card {
+  width: 150px;
+  cursor: pointer;
+  border: 2px solid #e4e7ed;
+  border-radius: 8px;
+  padding: 8px;
+  transition: border-color 0.2s;
+  &.active {
+    border-color: var(--el-color-primary);
+  }
+}
+.template-name {
+  text-align: center;
+  font-size: 12px;
+  color: #333;
+  margin-top: 6px;
+}
+
+/* ---- 示意图 ---- */
+.mini-phone {
+  background: #f5f6f8;
+  border-radius: 4px;
+  padding: 4px;
+  height: 180px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow: hidden;
+}
+.mini-search {
+  height: 8px;
+  background: #e4e7ed;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+.mini-body {
+  display: flex;
+  gap: 4px;
+  flex: 1;
+  min-height: 0;
+}
+.mini-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.mini-side {
+  width: 26px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  i {
+    height: 14px;
+    background: #e4e7ed;
+    border-radius: 2px;
+    &.on {
+      background: var(--el-color-primary);
+    }
+  }
+}
+.mini-icon-row {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+  i {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #e4e7ed;
+    &.on {
+      background: var(--el-color-primary);
+    }
+  }
+}
+.mini-tag-row {
+  display: flex;
+  gap: 3px;
+  flex-shrink: 0;
+  i {
+    width: 18px;
+    height: 7px;
+    border-radius: 3px;
+    background: #e4e7ed;
+    &.on {
+      background: var(--el-color-primary);
+    }
+  }
+}
+.mini-grid {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.mini-grid-title {
+  height: 7px;
+  width: 40%;
+  background: #dcdfe6;
+  border-radius: 3px;
+}
+.mini-grid-cells {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  i {
+    width: 22px;
+    height: 22px;
+    background: #e4e7ed;
+    border-radius: 2px;
+  }
+}
+.mini-goods {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  i {
+    height: 30px;
+    background: #e4e7ed;
+    border-radius: 2px;
+  }
+}
+
+.field-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 24px;
+  .el-checkbox {
+    width: 220px;
+  }
+}
+.save-btn {
+  min-width: 140px;
+}
+</style>