feat(manager): 新增文章列表装修组件

manager/src/views/page-decoration/wap/config-panel/PanelArticle.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="panel-article">
+    <div class="ctrl-row">
+      <div class="ctrl-label">标题</div>
+      <div class="ctrl-body">
+        <el-input v-model="firstItem.title" style="width: 200px" />
+      </div>
+    </div>
+    <div class="ctrl-row">
+      <div class="ctrl-label">文章分类</div>
+      <div class="ctrl-body">
+        <el-select
+          v-model="firstItem.categoryId"
+          placeholder="全部分类"
+          clearable
+          style="width: 200px"
+        >
+          <el-option
+            v-for="cat in categories"
+            :key="cat.id"
+            :label="cat.name"
+            :value="cat.id"
+          />
+        </el-select>
+      </div>
+    </div>
+    <slider-field
+      v-model="firstItem.count"
+      label="显示数量"
+      :min="1"
+      :max="20"
+    />
+    <color-field
+      v-model="res.options.bgColor"
+      label="背景颜色"
+      :default-value="defaults.bgColor"
+    />
+    <slider-field
+      v-model="res.options.paddingX"
+      label="左右边距"
+      :min="0"
+      :max="30"
+    />
+    <slider-field
+      v-model="res.options.pageGap"
+      label="页面间距"
+      :min="0"
+      :max="100"
+    />
+    <slider-field
+      v-model="res.options.borderRadius"
+      label="背景圆角"
+      :min="0"
+      :max="30"
+    />
+  </div>
+</template>
+
+<script>
+import { getArticleCategory } from "@/api/pages";
+import ColorField from "../controls/ColorField.vue";
+import SliderField from "../controls/SliderField.vue";
+
+const DEFAULTS = {
+  bgColor: "#FFFFFF",
+  paddingX: 0,
+  pageGap: 10,
+  borderRadius: 0,
+};
+const DEFAULT_ITEM = { title: "文章列表", categoryId: "", count: 3 };
+
+function flattenCategories(tree, level = 0) {
+  const result = [];
+  (tree || []).forEach((node) => {
+    result.push({ id: node.id, name: "　".repeat(level) + node.name });
+    if (node.children && node.children.length) {
+      result.push(...flattenCategories(node.children, level + 1));
+    }
+  });
+  return result;
+}
+
+export default {
+  name: "PanelArticle",
+  components: { ColorField, SliderField },
+  props: {
+    res: { type: Object, required: true },
+  },
+  data() {
+    return { defaults: DEFAULTS, categories: [] };
+  },
+  computed: {
+    firstItem() {
+      return this.res.options.list[0];
+    },
+  },
+  created() {
+    this.res.options = Object.assign({}, DEFAULTS, this.res.options);
+    if (!Array.isArray(this.res.options.list) || !this.res.options.list[0]) {
+      this.res.options.list = [{ ...DEFAULT_ITEM }];
+    }
+    getArticleCategory().then((res) => {
+      if (res.success) {
+        this.categories = flattenCategories(res.result);
+      }
+    });
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../controls/field-common.scss";
+</style>

manager/src/views/page-decoration/wap/config-panel/index.js

@@ -5,6 +5,7 @@ import PanelLine from "./PanelLine.vue";
 import PanelRichText from "./PanelRichText.vue";
 import PanelIntegral from "./PanelIntegral.vue";
 import PanelCoupon from "./PanelCoupon.vue";
+import PanelArticle from "./PanelArticle.vue";
 
 export default {
   blank: PanelBlank,
@@ -12,4 +13,5 @@ export default {
   richText: PanelRichText,
   integral: PanelIntegral,
   coupon: PanelCoupon,
+  article: PanelArticle,
 };

manager/src/views/page-decoration/wap/config.js

@@ -755,5 +755,18 @@ export const modelData = [
       pageGap: 10,
       borderRadius: 0
     }
+  },
+  {
+    type: "article",
+    name: "文章列表",
+    group: "base",
+    img: "md-image",
+    options: {
+      list: [{ title: "文章列表", categoryId: "", count: 3 }],
+      bgColor: "#FFFFFF",
+      paddingX: 0,
+      pageGap: 10,
+      borderRadius: 0
+    }
   }
 ];

manager/src/views/page-decoration/wap/template/index.js

@@ -27,6 +27,7 @@ import tpl_blank from "./tpl_blank";
 import tpl_line from "./tpl_line";
 import tpl_rich_text from "./tpl_rich_text";
 import tpl_coupon from "./tpl_coupon";
+import tpl_article from "./tpl_article";
 
 export default {
   notice: tpl_notice,
@@ -58,4 +59,5 @@ export default {
   line: tpl_line,
   richText: tpl_rich_text,
   coupon: tpl_coupon,
+  article: tpl_article,
 };

manager/src/views/page-decoration/wap/template/tpl_article.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="tpl-article" :style="wrapperStyle">
+    <div class="article-title" v-if="title">{{ title }}</div>
+    <div class="article-item" v-for="i in 3" :key="i">
+      <div class="article-text">
+        <div class="article-name">文章标题示例文章标题示例</div>
+        <div class="article-time">2026-10-12</div>
+      </div>
+      <div class="article-thumb"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "tpl_article",
+  props: {
+    res: { type: Object, default: () => ({}) },
+  },
+  computed: {
+    title() {
+      return (this.res.list && this.res.list[0] && this.res.list[0].title) || "";
+    },
+    wrapperStyle() {
+      return {
+        background: this.res.bgColor || "#FFFFFF",
+        padding: `10px ${this.res.paddingX || 0}px`,
+        marginBottom: `${this.res.pageGap !== undefined ? this.res.pageGap : 10}px`,
+        borderRadius: `${this.res.borderRadius || 0}px`,
+        overflow: "hidden",
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.article-title {
+  font-size: 15px;
+  font-weight: 600;
+  padding: 4px 12px 10px;
+}
+.article-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-top: 1px solid #f5f5f5;
+}
+.article-text {
+  flex: 1;
+  min-width: 0;
+}
+.article-name {
+  font-size: 13px;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.article-time {
+  font-size: 11px;
+  color: #999;
+  margin-top: 4px;
+}
+.article-thumb {
+  width: 56px;
+  height: 42px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  margin-left: 10px;
+  flex-shrink: 0;
+}
+</style>