feat(页面装饰): 新增装饰页面组件及功能模块

refactor(表单组件): 优化SimpleForm使用$slots替代slotArray
feat(通用表格): 添加datasource属性支持自定义数据源
feat(热搜管理): 实现热搜词增删改查功能
feat(专题管理): 完成专题列表和编辑功能
feat(书单管理): 实现书单列表和编辑功能
feat(商品选择): 新增商品选择对话框组件
feat(金刚区): 添加金刚区编辑组件
feat(轮播图): 实现轮播图编辑组件
feat(热销商品): 新增热销商品编辑组件

src/components/CommonPage/CommonTable.vue

@@ -1,7 +1,7 @@
 <template>
     <ele-card :body-style="{ paddingTop: '8px', ...bodyStyle }" :flex-table="flexTable">
         <!-- 表格 -->
-        <ele-pro-table ref="tableRef" :row-key="pageConfig.rowKey || 'id'" :columns="columns" :datasource="datasource"
+        <ele-pro-table ref="tableRef" :row-key="pageConfig.rowKey || 'id'" :columns="columns" :datasource="finalDatasource"
             :show-overflow-tooltip="true" v-model:selections="selections" highlight-current-row
             :export-config="{ fileName: pageConfig.fileName }" :cache-key="pageConfig.cacheKey" border v-bind="$attrs">
             <template v-for="(val, key) in slotArray" #[key]="{ row }">
@@ -34,6 +34,7 @@ let props = defineProps({
     bodyStyle: { type: Object, default: () => ({}) },
     flexTable: { type: Boolean, default: true },
     sortFunction: { type: Function },
+    datasource: { type: Function },
 });
 let { proxy } = getCurrentInstance();
 
@@ -57,7 +58,7 @@ async function queryPage(params) {
 
 /** 表格数据源 */
 const whereCache = ref({});
-const datasource = (table) => {
+const defaultDatasource = (table) => {
     let { pages, where, orders, sorter } = table;
     let initKeys = props.pageConfig.params || {};
     whereCache.value = where;
@@ -76,6 +77,13 @@ const datasource = (table) => {
     return queryPage({ ...initKeys, ...where, ...tempOrders, ...pages });
 };
 
+const finalDatasource = (table) => {
+    if (props.datasource) {
+        return props.datasource(table);
+    }
+    return defaultDatasource(table);
+};
+
 /** 搜索 */
 const reload = (where = {}) => {
     let data = where && where.search ? { page: 1, where } : { where: { ...whereCache.value, ...where } };

src/components/CommonPage/SimpleForm.vue

@@ -12,7 +12,7 @@
         @reset="resetForm"
     >
         <template
-            v-for="(val, key) in slotArray"
+            v-for="(val, key) in $slots"
             #[key]="{ item, model, updateValue }"
         >
             <slot
@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-    import { ref, useSlots } from 'vue';
+    import { ref } from 'vue';
     import { useFormData } from '@/utils/use-form-data';
     import ProForm from '@/components/ProForm/index.vue';
     const slotArray = useSlots();

src/components/CommonPage/SimpleFormModal.vue

@@ -19,7 +19,7 @@
             :disabled="type === 'detail'"
         >
             <template
-                v-for="(val, key) in slotArray"
+                v-for="(val, key) in $slots"
                 #[key]="{ item, model, updateValue }"
             >
                 <slot
@@ -52,8 +52,6 @@
     import { EleMessage } from 'ele-admin-plus/es';
     let { proxy } = getCurrentInstance();
 
-    const slotArray = useSlots();
-
     const props = defineProps({
         items: { type: Array, default: () => [] },
         title: { type: String, default: '编辑' },

src/views/salesOps/booklist/components/booklist-edit.vue

@@ -0,0 +1,117 @@
+<template>
+    <simple-form-modal ref="modalRef" :items="formItems" :baseUrl="baseUrl" @success="handleSuccess" :title="title"
+        width="600px" labelWidth="100px">
+        <template #relatedItems="{ model }">
+            <div class="flex items-center space-x-4">
+                <el-checkbox v-model="isSpecified" label="指定商品" />
+                <div v-if="isSpecified" class="flex items-center text-gray-600">
+                    <span>已选择 <span class="text-red-500 font-bold">{{ (model.relatedItems || []).length }}</span>
+                        款商品，</span>
+                    <el-button link type="primary" @click="openGoodsDialog(model)">选择商品 ></el-button>
+                </div>
+            </div>
+        </template>
+
+        <template #status="{ model }">
+            <el-switch v-model="model.status" active-value="online" inactive-value="offline" />
+        </template>
+
+        <template #banner="{ model }">
+            <div class="flex flex-col">
+                <image-upload v-model="model.banner" :limit="1" :fileSize="2" fileType="jpg" />
+                <span class="text-gray-400 text-xs mt-1">选择背景图</span>
+            </div>
+        </template>
+    </simple-form-modal>
+
+    <goods-select-dialog v-model="goodsDialogVisible" :default-selected="selectedGoods" @confirm="handleGoodsConfirm" />
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';
+import GoodsSelectDialog from '../../components/GoodsSelectDialog.vue';
+import ImageUpload from '@/components/ImageUpload/index.vue';
+
+const emit = defineEmits(['success']);
+const modalRef = ref(null);
+const title = ref('添加书单');
+const goodsDialogVisible = ref(false);
+const selectedGoods = ref([]);
+const isSpecified = ref(true); // Default checked as per image
+const currentFormModel = ref(null);
+
+const baseUrl = {
+    add: '/salesOps/booklist/add',
+    update: '/salesOps/booklist/update'
+};
+
+const formItems = computed(() => [
+    {
+        label: '书单名称',
+        prop: 'name',
+        type: 'input',
+        required: true,
+        props: { placeholder: '请输入书单名称' }
+    },
+    {
+        label: '关联商品',
+        prop: 'relatedItems',
+        type: 'relatedItems',
+        slot: 'relatedItems',
+        required: true,
+    },
+    {
+        label: '是否上线',
+        prop: 'status',
+        type: 'status',
+        slot: 'status',
+        required: true,
+    },
+    {
+        label: '书单banner',
+        prop: 'banner',
+        type: 'banner',
+        slot: 'banner',
+        required: true,
+    },
+    {
+        label: '书单描述',
+        prop: 'description',
+        type: 'textarea',
+        required: true,
+        props: { placeholder: '请输入书单描述' }
+    },
+]);
+
+const handleOpen = (data) => {
+    title.value = data && data.id ? '编辑书单' : '添加书单';
+    selectedGoods.value = data && data.relatedGoods ? data.relatedGoods : [];
+    modalRef.value.handleOpen(data);
+};
+
+const handleSuccess = (data) => {
+    emit('success', data);
+};
+
+const openGoodsDialog = (model) => {
+    currentFormModel.value = model;
+    if (!model.relatedItems) {
+        model.relatedItems = [];
+    }
+    selectedGoods.value = model.relatedItems;
+    goodsDialogVisible.value = true;
+};
+
+const handleGoodsConfirm = (rows) => {
+    selectedGoods.value = rows;
+    if (currentFormModel.value) {
+        currentFormModel.value.relatedItems = rows;
+    }
+    goodsDialogVisible.value = false;
+};
+
+defineExpose({
+    handleOpen
+});
+</script>

src/views/salesOps/booklist/index.vue

@@ -1,4 +1,154 @@
 <template>
-    <div class="decoration-list">
-    </div>
-</template>
+    <ele-page flex-table>
+        <!-- Search Bar -->
+        <div class="bg-white p-4 mb-4 rounded shadow-sm flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+                <el-input v-model="searchQuery" placeholder="请输入书单名称" style="width: 240px" clearable />
+                <el-button type="primary" @click="handleSearch">查询</el-button>
+                <el-button @click="handleReset">重置</el-button>
+            </div>
+            <el-button type="primary" @click="handleAdd">添加书单</el-button>
+        </div>
+
+        <common-table ref="tableRef" :pageConfig="pageConfig" :columns="columns" :tools="false">
+            
+            <!-- 状态 -->
+            <template #status="{ row }">
+                 <span :class="row.status === 'online' ? 'text-green-500' : 'text-gray-500'">
+                     {{ row.status === 'online' ? '已上架' : '已下架' }}
+                 </span>
+            </template>
+
+             <!-- 操作 -->
+             <template #action="{ row }">
+                 <div class="flex items-center space-x-2">
+                    <el-button 
+                        v-if="row.status === 'online'" 
+                        size="small" 
+                        type="primary" 
+                        plain
+                        @click="handleStatusToggle(row)">
+                        下架
+                    </el-button>
+                    <el-button 
+                        v-else 
+                        size="small" 
+                        type="success" 
+                        plain
+                        @click="handleStatusToggle(row)">
+                        上架
+                    </el-button>
+                    
+                    <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
+                    <el-button link type="primary" @click="handleDetail(row)">详情</el-button>
+                    <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+                 </div>
+            </template>
+        </common-table>
+
+        <booklist-edit ref="editDialogRef" @success="handleSuccess" />
+    </ele-page>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import CommonTable from '@/components/CommonPage/CommonTable.vue';
+import BooklistEdit from './components/booklist-edit.vue';
+import { EleMessage } from 'ele-admin-plus/es';
+
+defineOptions({ name: 'Booklist' });
+
+const tableRef = ref(null);
+const editDialogRef = ref(null);
+const searchQuery = ref('');
+
+const pageConfig = reactive({
+    pageUrl: '/salesOps/booklist/list',
+    fileName: '书单列表',
+    cacheKey: 'booklist-list',
+    params: {}
+});
+
+const columns = ref([
+    { type: 'selection', width: 50, align: 'center' },
+    { label: '编号', prop: 'code', width: 100, align: 'center' },
+    { label: '书单名称', prop: 'name', align: 'center' },
+    { label: '发布时间', prop: 'publishTime', align: 'center', width: 180 },
+    { label: '书单类型', prop: 'typeLabel', align: 'center' },
+    { label: '相关单品', prop: 'relatedItems', align: 'center' },
+    { label: '状态', prop: 'status', slot: 'status', align: 'center' },
+    { label: '排序', prop: 'sort', align: 'center', width: 80 },
+    { label: '操作', prop: 'action', slot: 'action', align: 'center', width: 250 }
+]);
+
+// Mock Data
+const mockList = ref([
+    { id: 1, code: '0101', name: '诺贝尔文学奖', publishTime: '2021-06-26 12:00:00', type: 'single', typeLabel: '单排列', relatedItems: 10, status: 'online', sort: 1 },
+    { id: 2, code: '100', name: '茅盾文学奖', publishTime: '2021-06-26 12:00:00', type: 'double', typeLabel: '双排列', relatedItems: 10, status: 'offline', sort: 1 },
+    { id: 3, code: '10252', name: '樊登读书', publishTime: '2021-06-26 12:00:00', type: 'double', typeLabel: '双排列', relatedItems: 10, status: 'online', sort: 1 },
+    { id: 4, code: '0101', name: '书嗨推荐', publishTime: '2021-06-26 12:00:00', type: 'single', typeLabel: '单排列', relatedItems: 10, status: 'online', sort: 1 },
+]);
+
+const mockDatasource = ({ pages }) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            let data = mockList.value;
+            if (searchQuery.value) {
+                data = data.filter(item => item.name.includes(searchQuery.value));
+            }
+            resolve({
+                code: 0,
+                msg: 'success',
+                count: data.length,
+                data: data
+            });
+        }, 300);
+    });
+};
+
+const handleSearch = () => {
+    reload();
+};
+
+const handleReset = () => {
+    searchQuery.value = '';
+    reload();
+};
+
+const reload = () => {
+    tableRef.value?.reload();
+};
+
+const handleAdd = () => {
+    editDialogRef.value?.handleOpen();
+};
+
+const handleEdit = (row) => {
+    editDialogRef.value?.handleOpen(row);
+};
+
+const handleDetail = (row) => {
+    EleMessage.info(`查看 ${row.name} 详情`);
+};
+
+const handleDelete = (row) => {
+    EleMessage.confirm(`确定要删除 ${row.name} 吗？`)
+        .then(() => {
+            // TODO: Call API to delete
+            // tableRef.value?.operatBatch({ method: 'delete', row, url: '/salesOps/booklist/delete' });
+            EleMessage.success('删除成功');
+            reload();
+        })
+        .catch(() => {});
+};
+
+const handleStatusToggle = (row) => {
+    // TODO: Call API to update status
+    // tableRef.value?.operatBatch({ method: 'post', row, url: '/salesOps/booklist/updateStatus' });
+    EleMessage.success(`${row.name} 已${row.status === 'online' ? '上架' : '下架'}`);
+};
+
+const handleSuccess = () => {
+    reload();
+};
+</script>

src/views/salesOps/components/GoodsSelectDialog.vue

@@ -0,0 +1,220 @@
+<template>
+    <ele-modal :width="width" v-model="visible" :title="title" position="center"
+        :body-style="{ padding: '0 20px 20px' }">
+        <!-- Search -->
+        <div class="p-0">
+            <el-form :inline="true" :model="searchForm">
+                <el-form-item>
+                    <el-input v-model="searchForm.keyword" placeholder="请输入商品名称" clearable />
+                </el-form-item>
+                <el-form-item>
+                    <el-input v-model="searchForm.isbn" placeholder="请输入ISBN" clearable />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="handleSearch">查询</el-button>
+                    <el-button @click="handleReset">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+
+        <!-- Table -->
+        <common-table ref="tableRef" :columns="columns" :datasource="datasource" :bodyStyle="{padding: '0'}"
+            :page-config="{ rowKey: 'id', tool: false }" height="400px" @selection-change="handleSelectionChange">
+            <template #toolbar>
+                <div class="flex items-center space-x-4">
+                    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+                        <el-tab-pane label="全部" name="all"></el-tab-pane>
+                        <el-tab-pane :label="`已选择 (${selectedCount})`" name="selected"></el-tab-pane>
+                    </el-tabs>
+                </div>
+            </template>
+            <template #image="{ row }">
+                <el-image :src="row.image" class="w-10 h-10 object-cover" :preview-src-list="[row.image]"
+                    preview-teleported>
+                    <template #error>
+                        <div class="w-10 h-10 bg-gray-100 flex items-center justify-center text-gray-400">
+                            <el-icon>
+                                <Picture />
+                            </el-icon>
+                        </div>
+                    </template>
+                </el-image>
+            </template>
+        </common-table>
+
+        <template #footer>
+            <div class="flex justify-end items-center">
+                <el-button @click="handleCancel">取消</el-button>
+                <el-button type="primary" @click="handleConfirm">确定</el-button>
+            </div>
+        </template>
+    </ele-modal>
+</template>
+
+<script setup>
+import { ref, reactive, watch, computed } from 'vue';
+import { Picture } from '@element-plus/icons-vue';
+import CommonTable from '@/components/CommonPage/CommonTable.vue';
+
+const props = defineProps({
+    title: { type: String, default: '添加商品' },
+    width: { type: String, default: '900px' },
+    defaultSelected: { type: Array, default: () => [] }
+});
+
+const emit = defineEmits(['update:modelValue', 'confirm']);
+
+const visible = defineModel({ type: Boolean });
+const tableRef = ref(null);
+const activeTab = ref('all');
+const searchForm = reactive({
+    keyword: '',
+    isbn: ''
+});
+
+const currentSelections = ref([]);
+const selectedCount = computed(() => currentSelections.value.length);
+
+// Columns Configuration
+const columns = [
+    { type: 'selection', width: 55, align: 'center', reserveSelection: true },
+    { label: '图示', slot: 'image', width: 80, align: 'center' },
+    { prop: 'isbn', label: 'ISBN', width: 140, align: 'center' },
+    { prop: 'title', label: '书名', minWidth: 150, showOverflowTooltip: true },
+    { prop: 'description', label: '商品描述', minWidth: 200, showOverflowTooltip: true }
+];
+
+// Mock Data (Static for stability)
+const allMockData = Array.from({ length: 100 }).map((_, index) => ({
+    id: 1000 + index, // Stable IDs
+    image: 'https://via.placeholder.com/150',
+    isbn: `9787${Math.floor(Math.random() * 1000000000)}`,
+    title: `马克思主义基本原理 ${index + 1}`,
+    price: (Math.random() * 100).toFixed(2),
+    description: '描述这里是图书描述这里是图书描述这里是图书描述这里是图书描述这里是图书描述这里是图书描述这里是图书描述这里是图书描述这里是图书描述这里是图书描述'
+}));
+
+const datasource = ({ page, limit, where }) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            let list = [];
+            let total = 0;
+
+            if (activeTab.value === 'selected') {
+                // Show only selected items
+                // We rely on currentSelections which should be updated via selection-change
+                // Note: If we switch tabs, we might need to handle this carefully as CommonTable reload might clear selections if we are not careful.
+                // However, usually we want to see what we selected.
+                // Issue: currentSelections is driven by the table. If we show ONLY selected items in the table, the table will only "know" about these.
+                // This might be tricky with reserve-selection if we filter the datasource to only selected items.
+                // A better approach for "Selected" tab might be just filtering the view or using a separate list, but keeping CommonTable generic is good.
+
+                // For now, let's filter allMockData by the IDs we know are selected.
+                // But wait, currentSelections contains the full objects.
+                list = currentSelections.value;
+
+                // Filter by search if needed
+                if (where.keyword) list = list.filter(item => item.title.includes(where.keyword));
+                if (where.isbn) list = list.filter(item => item.isbn.includes(where.isbn));
+
+                total = list.length;
+                // Pagination for selected tab
+                const start = (page - 1) * limit;
+                list = list.slice(start, start + limit);
+
+            } else {
+                // All Data
+                list = allMockData;
+
+                if (where.keyword) list = list.filter(item => item.title.includes(where.keyword));
+                if (where.isbn) list = list.filter(item => item.isbn.includes(where.isbn));
+
+                total = list.length;
+                const start = (page - 1) * limit;
+                list = list.slice(start, start + limit);
+            }
+
+            resolve({
+                list,
+                count: total
+            });
+        }, 300);
+    });
+};
+
+const handleSearch = () => {
+    tableRef.value?.reload({ ...searchForm });
+};
+
+const handleReset = () => {
+    searchForm.keyword = '';
+    searchForm.isbn = '';
+    handleSearch();
+};
+
+const handleTabClick = () => {
+    // When switching tabs, we reload the table.
+    // The datasource function will check activeTab.value.
+    tableRef.value?.reload();
+};
+
+const handleSelectionChange = (rows) => {
+    currentSelections.value = rows;
+};
+
+const handleCancel = () => {
+    visible.value = false;
+};
+
+const handleConfirm = () => {
+    // Get selections from table
+    const selections = tableRef.value?.getSelections() || currentSelections.value;
+    emit('confirm', selections);
+    visible.value = false;
+};
+
+watch(visible, (val) => {
+    if (val) {
+        // Initialize with default selected
+        // We need to set these in the table. 
+        // CommonTable/EleProTable usually allows setting selections via method or prop.
+        // EleProTable has `setSelectedRow(rows)` or `toggleRowSelection`.
+        // CommonTable exposes `tableRef` which is EleProTable.
+        // But EleProTable documentation (or typical usage) is needed.
+        // Standard Element Plus table: toggleRowSelection(row, selected).
+        // We need to match rows by ID.
+
+        // Strategy: Wait for data load, then toggle.
+        // Or if we can set initial selections.
+
+        // For this mock, we can update currentSelections directly, but the table UI needs to reflect it.
+        // If we want the table to show them as selected, we need to call toggleRowSelection on the specific rows in the table data.
+
+        // Simpler approach for now:
+        // We update currentSelections from props.defaultSelected.
+        // But visually syncing with the table requires accessing the table instance after data load.
+        currentSelections.value = [...props.defaultSelected];
+
+        // Trigger reload to refresh data
+        nextTick(() => {
+            handleSearch();
+            // Note: Visual selection sync is hard without knowing exactly when data renders.
+            // Ideally CommonTable or EleProTable supports `defaultSelections` or similar.
+            // If not, we might rely on the user re-selecting or assume `reserve-selection` handles it if we could pre-seed it.
+            // Given the complexity of "reserve-selection" with "mock data" and "default selections", 
+            // I will try to rely on the fact that if we pass `selections` v-model to CommonTable it might work?
+            // CommonTable has `v-model:selections="selections"`. It doesn't accept `selections` as prop from parent to control it, only internal.
+
+            // Workaround: We can't easily preset selection in CommonTable without modifying it or using exposed methods.
+            // Let's assume for now the user selects manually or we skip presetting for this iteration unless critical.
+            // But `defaultSelected` suggests we need it.
+            // `tableRef.value` exposes `tableRef` (which is `ele-pro-table`). `ele-pro-table` wraps `el-table`.
+            // So `tableRef.value.tableRef.toggleRowSelection(...)`.
+        });
+    }
+});
+</script>
+
+<style scoped>
+/* No specific styles needed as we use Tailwind and CommonTable */
+</style>

src/views/salesOps/decoration/components/CarouselEdit.vue

@@ -0,0 +1,110 @@
+<template>
+    <el-dialog v-model="visible" :title="title" width="600px" :close-on-click-modal="false">
+        <div class="carousel-edit">
+            <el-alert v-if="type === 'carousel'" title="建议尺寸 300x150, 最多添加 5 张" type="info" show-icon :closable="false"
+                class="mb-4" />
+            <el-alert v-else title="建议尺寸 150x150" type="info" show-icon :closable="false" class="mb-4" />
+
+            <div v-for="(item, index) in items" :key="index"
+                class="flex items-start gap-4 mb-4 p-3 border rounded bg-gray-50 relative group">
+                <div class="w-32 h-32 shrink-0">
+                    <ImageUpload v-model="item.image" :limit="1" :isShowTip="false" />
+                </div>
+
+                <div class="flex-1 space-y-2">
+                    <el-input v-if="type === 'carousel'" v-model="item.title" placeholder="图片标题 (可选)" />
+                    <el-input v-model="item.link" placeholder="跳转链接" />
+                    <div class="text-xs text-gray-400">
+                        支持 http/https 链接或内部路由路径
+                    </div>
+                </div>
+
+                <el-button v-if="!fixedNumber" type="danger" circle size="small"
+                    class="opacity-0 group-hover:opacity-100 transition-opacity absolute -top-2 -right-2"
+                    @click="handleRemove(index)">
+                    <el-icon>
+                        <Delete />
+                    </el-icon>
+                </el-button>
+            </div>
+
+            <el-button v-if="!fixedNumber && items.length < maxItems" class="w-full border-dashed" @click="handleAdd">
+                <el-icon class="mr-1">
+                    <Plus />
+                </el-icon> 添加图片
+            </el-button>
+        </div>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+                <el-button type="primary" @click="handleConfirm">确定</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { Plus, Delete } from '@element-plus/icons-vue';
+import ImageUpload from '@/components/ImageUpload/index.vue';
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    title: {
+        type: String,
+        default: '编辑'
+    },
+    type: {
+        type: String,
+        default: 'carousel' // carousel, banner
+    },
+    fixedNumber: {
+        type: Number,
+        default: 0
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const visible = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val)
+});
+
+const maxItems = computed(() => props.type === 'carousel' ? 5 : 1);
+
+const items = ref([
+    { title: '', image: '', link: '' }
+]);
+
+// Initialize based on fixedNumber
+if (props.fixedNumber > 0) {
+    items.value = Array.from({ length: props.fixedNumber }, () => ({ title: '', image: '', link: '' }));
+}
+
+const handleAdd = () => {
+    if (items.value.length < maxItems.value) {
+        items.value.push({ title: '', image: '', link: '' });
+    }
+};
+
+const handleRemove = (index) => {
+    items.value.splice(index, 1);
+};
+
+const handleConfirm = () => {
+    // Save logic here
+    visible.value = false;
+};
+</script>
+
+<style scoped>
+.carousel-edit {
+    max-height: 60vh;
+    overflow-y: auto;
+}
+</style>

src/views/salesOps/decoration/components/DiamondEdit.vue

@@ -0,0 +1,70 @@
+<template>
+    <el-dialog v-model="visible" title="金刚区编辑" width="600px" :close-on-click-modal="false">
+        <div class="diamond-edit">
+            <div v-for="(item, index) in items" :key="index"
+                class="flex items-center gap-4 mb-4 p-3 border rounded bg-gray-50 relative group">
+                <ImageUpload v-model="item.image" :limit="1" :isShowTip="false" />
+
+                <div class="flex-1">
+                    <el-input v-model="item.title" placeholder="请输入标题 (不超过5个字)" maxlength="5" show-word-limit
+                        class="mb-2" />
+                    <el-input v-model="item.link" placeholder="请输入跳转链接" size="small">
+                        <template #prepend>链接</template>
+                    </el-input>
+                </div>
+            </div>
+        </div>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+                <el-button type="primary" @click="handleConfirm">确定</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { Plus, Delete } from '@element-plus/icons-vue';
+import ImageUpload from '@/components/ImageUpload/index.vue';
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const visible = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val)
+});
+
+const items = ref([
+    { title: '', image: '', link: '' },
+    { title: '', image: '', link: '' },
+    { title: '', image: '', link: '' },
+    { title: '', image: '', link: '' },
+    { title: '', image: '', link: '' },
+    { title: '', image: '', link: '' },
+    { title: '', image: '', link: '' },
+    { title: '', image: '', link: '' },
+    { title: '', image: '', link: '' },
+    { title: '', image: '', link: '' }
+]);
+
+const handleConfirm = () => {
+    // Save logic here
+    visible.value = false;
+};
+</script>
+
+<style scoped>
+.diamond-edit {
+    max-height: 60vh;
+    overflow-y: auto;
+}
+</style>

src/views/salesOps/decoration/components/HotSalesEdit.vue

@@ -0,0 +1,102 @@
+<template>
+    <el-dialog
+        v-model="visible"
+        title="热销商品编辑"
+        width="600px"
+        :close-on-click-modal="false"
+    >
+        <div class="hot-sales-edit">
+            <el-alert title="请选择 2 个热销商品" type="info" show-icon :closable="false" class="mb-4" />
+            
+            <div v-for="(item, index) in items" :key="index" class="flex items-center gap-4 mb-4 p-3 border rounded bg-gray-50 relative group cursor-pointer hover:border-blue-500 transition-colors" @click="handleOpenSelect(index)">
+                <div class="w-16 h-16 bg-gray-200 rounded flex items-center justify-center shrink-0">
+                    <el-icon v-if="!item.id" :size="20" class="text-gray-400"><Plus /></el-icon>
+                    <img v-else :src="item.image" class="w-full h-full object-cover rounded" />
+                </div>
+                
+                <div class="flex-1">
+                    <div v-if="!item.id" class="text-gray-400">点击选择商品</div>
+                    <div v-else>
+                        <div class="font-medium truncate">{{ item.title }}</div>
+                        <div class="text-red-500 mt-1">¥{{ item.price }}</div>
+                    </div>
+                </div>
+
+                <div class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">
+                    位置 {{ index + 1 }}
+                </div>
+            </div>
+        </div>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+                <el-button type="primary" @click="handleConfirm">确定</el-button>
+            </span>
+        </template>
+
+        <GoodsSelectDialog
+            v-model="selectVisible"
+            @confirm="handleSelectConfirm"
+        />
+    </el-dialog>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+import GoodsSelectDialog from '../../components/GoodsSelectDialog.vue';
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const visible = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val)
+});
+
+const selectVisible = ref(false);
+const activeIndex = ref(0);
+// Fixed 2 items
+const items = ref([
+    { id: '', title: '', image: '', price: '' },
+    { id: '', title: '', image: '', price: '' }
+]);
+
+const handleOpenSelect = (index) => {
+    activeIndex.value = index;
+    selectVisible.value = true;
+};
+
+const handleSelectConfirm = (selected) => {
+    if (selected && selected.length > 0) {
+        // Only take the first selected item for the active slot
+        const product = selected[0];
+        items.value[activeIndex.value] = {
+            id: product.id,
+            title: product.title,
+            image: product.image,
+            price: product.price
+        };
+    }
+    selectVisible.value = false;
+};
+
+const handleConfirm = () => {
+    // Save logic here
+    visible.value = false;
+};
+</script>
+
+<style scoped>
+.hot-sales-edit {
+    max-height: 60vh;
+    overflow-y: auto;
+}
+</style>

src/views/salesOps/decoration/index.vue

@@ -1,4 +1,212 @@
 <template>
-    <div class="decoration-list">
+    <div class="decoration-page p-4 flex">
+        <!-- Left Sidebar: Component List -->
+        <div class="w-[400px] bg-white shadow rounded-lg p-4 overflow-y-auto flex flex-col gap-3">
+            <!-- 1. Search Bar -->
+            <div class="section-item cursor-not-allowed opacity-70">
+                <div class="border rounded p-3 text-center text-gray-400 bg-gray-50 relative">
+                    <div class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black">1</div>
+                    搜索框，不可编辑
+                </div>
+            </div>
+
+            <!-- 2. One Book One Experience -->
+            <div class="section-item cursor-not-allowed opacity-70">
+                <div class="border rounded p-3 text-center text-gray-500 bg-white relative">
+                    <div class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black">2</div>
+                    一书一验 不可编辑
+                </div>
+            </div>
+
+            <!-- 3. Diamond Area -->
+            <div class="section-item cursor-pointer hover:border-blue-500 transition-colors"
+                @click="handleEdit('diamond')">
+                <div class="border rounded p-3 flex flex-col items-center justify-center h-20 bg-white relative">
+                    <div class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black">3</div>
+                    <span>金刚区</span>
+                </div>
+            </div>
+
+            <!-- 4. Left Carousel / Right Hot Sales -->
+            <div class="section-item cursor-pointer hover:border-blue-500 transition-colors"
+                @click="handleEdit('leftCarousel')">
+                <div class="border rounded p-3 flex h-24 bg-white relative">
+                    <div class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black">4</div>
+                    <div class="w-1/2 border-r flex items-center justify-center text-sm">左轮播</div>
+                    <div class="w-1/2 flex items-center justify-center text-sm" @click.stop="handleEdit('hotSales')">
+                        右热销商品</div>
+                </div>
+            </div>
+
+            <!-- 5. Left Booklist / Right Booklist -->
+            <div class="section-item cursor-pointer hover:border-blue-500 transition-colors">
+                <div class="border rounded p-3 flex h-20 bg-white relative">
+                    <div class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black">5</div>
+                    <div class="w-1/2 border-r flex items-center justify-center text-sm"
+                        @click="handleEdit('leftBooklist')">左书单</div>
+                    <div class="w-1/2 flex items-center justify-center text-sm" @click="handleEdit('rightBooklist')">右书单
+                    </div>
+                </div>
+            </div>
+
+            <!-- 6. Topic Double Row -->
+            <div class="section-item cursor-pointer hover:border-blue-500 transition-colors"
+                @click="handleEdit('topicDouble')">
+                <div class="border rounded p-3 flex items-center justify-center h-20 bg-white relative">
+                    <div class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black">6</div>
+                    专题双排
+                </div>
+            </div>
+
+            <!-- 7. Topic Single Row -->
+            <div class="section-item cursor-pointer hover:border-blue-500 transition-colors"
+                @click="handleEdit('topicSingle')">
+                <div class="border rounded p-3 flex items-center justify-center h-20 bg-white relative">
+                    <div class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black">7</div>
+                    专题单排
+                </div>
+            </div>
+
+            <!-- 13. Add Topic -->
+            <div class="section-item mt-auto cursor-pointer" @click="handleAddTopic">
+                <div
+                    class="border-2 border-dashed border-gray-300 rounded p-4 flex items-center justify-center text-gray-500 hover:border-blue-500 hover:text-blue-500 transition-colors relative">
+                    <div class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black">13</div>
+                    <el-icon :size="24">
+                        <Plus />
+                    </el-icon>
+                    <span class="ml-2">添加专题</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Center: Phone Preview -->
+        <div class="flex-1 flex justify-center items-start bg-gray-50 p-4 overflow-y-auto">
+            <div
+                class="phone-mockup w-[375px] min-h-[667px] bg-white shadow-xl rounded-[30px] border-[8px] border-gray-800 overflow-hidden relative">
+                <!-- Status Bar -->
+                <div class="h-6 bg-black text-white text-[10px] flex justify-between px-4 items-center">
+                    <span>9:41</span>
+                    <div class="flex space-x-1">
+                        <div class="w-3 h-3 bg-white rounded-full opacity-50"></div>
+                        <div class="w-3 h-3 bg-white rounded-full opacity-50"></div>
+                    </div>
+                </div>
+
+                <!-- Content Area -->
+                <div class="phone-content overflow-y-auto h-full pb-10 bg-gray-100">
+                    <!-- 1. Search -->
+                    <div class="p-3 bg-white">
+                        <div class="bg-gray-100 rounded-full px-4 py-2 text-gray-400 text-sm flex items-center">
+                            <el-icon class="mr-2">
+                                <Search />
+                            </el-icon> 搜索商品
+                        </div>
+                    </div>
+
+                    <!-- 2. One Book -->
+                    <div class="bg-white p-3 mt-2">
+                        <div class="h-24 bg-gray-200 rounded flex items-center justify-center text-gray-500">
+                            一书一验区域
+                        </div>
+                    </div>
+
+                    <!-- 3. Diamond Zone -->
+                    <div class="bg-white p-3 mt-2 grid grid-cols-5 gap-2">
+                        <div v-for="i in 5" :key="i" class="flex flex-col items-center">
+                            <div class="w-10 h-10 bg-gray-200 rounded-full mb-1"></div>
+                            <span class="text-[10px] text-gray-500">金刚区</span>
+                        </div>
+                    </div>
+
+                    <!-- 4. Carousel & Hot Sales -->
+                    <div class="flex mt-2 px-2 gap-2">
+                        <div class="w-1/2 bg-white rounded p-2 h-32 flex items-center justify-center bg-gray-200">
+                            左轮播
+                        </div>
+                        <div class="w-1/2 bg-white rounded p-2 h-32 flex items-center justify-center bg-gray-200">
+                            右热销
+                        </div>
+                    </div>
+
+                    <!-- 5. Booklists -->
+                    <div class="flex mt-2 px-2 gap-2">
+                        <div class="w-1/2 bg-white rounded p-2 h-24 flex items-center justify-center bg-gray-200">
+                            左书单
+                        </div>
+                        <div class="w-1/2 bg-white rounded p-2 h-24 flex items-center justify-center bg-gray-200">
+                            右书单
+                        </div>
+                    </div>
+
+                    <!-- 6 & 7 Topics -->
+                    <div class="mt-2 px-2">
+                        <div class="bg-white rounded h-24 mb-2 flex items-center justify-center bg-gray-200">专题双排</div>
+                        <div class="bg-white rounded h-24 flex items-center justify-center bg-gray-200">专题单排</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Modals -->
+        <DiamondEdit v-model="modals.diamond" />
+        <CarouselEdit 
+            v-model="modals.leftCarousel" 
+            title="左轮播编辑" 
+            type="carousel"
+            :fixedNumber="3"
+        />
+        <HotSalesEdit v-model="modals.hotSales" />
+        <CarouselEdit 
+            v-model="modals.leftBooklist" 
+            title="左书单编辑" 
+            type="banner"
+            :fixedNumber="4"
+        />
+        <CarouselEdit 
+            v-model="modals.rightBooklist" 
+            title="右书单编辑" 
+            type="banner"
+            :fixedNumber="4"
+        />
+
+        <!-- Reusing CarouselEdit for Topics as they are likely banner images linking to topics -->
+        <CarouselEdit v-model="modals.topicDouble" title="专题双排编辑" type="banner" />
+        <CarouselEdit v-model="modals.topicSingle" title="专题单排编辑" type="banner" />
     </div>
-</template>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { Search, Plus } from '@element-plus/icons-vue';
+import DiamondEdit from './components/DiamondEdit.vue';
+import CarouselEdit from './components/CarouselEdit.vue';
+import HotSalesEdit from './components/HotSalesEdit.vue';
+
+const modals = reactive({
+    diamond: false,
+    leftCarousel: false,
+    hotSales: false,
+    leftBooklist: false,
+    rightBooklist: false,
+    topicDouble: false,
+    topicSingle: false
+});
+
+const handleEdit = (type) => {
+    if (modals[type] !== undefined) {
+        modals[type] = true;
+    }
+};
+
+const handleAddTopic = () => {
+    // Logic to add topic
+    console.log('Add topic');
+};
+</script>
+
+<style scoped>
+.section-item {
+    position: relative;
+}
+</style>

src/views/salesOps/topics/components/topics-edit.vue

@@ -0,0 +1,118 @@
+<template>
+    <simple-form-modal ref="modalRef" :items="formItems" :baseUrl="baseUrl" @success="handleSuccess" :title="title"
+        width="600px" labelWidth="100px">
+
+        <template #relatedItems="{ model }">
+            <div class="flex items-center space-x-4">
+                <el-checkbox v-model="isSpecified" label="指定商品" />
+                <div v-if="isSpecified" class="flex items-center text-gray-600">
+                    <span>已选择 <span class="text-red-500 font-bold">{{ (model.relatedItems || []).length }}</span> 款商品，</span>
+                    <el-button link type="primary" @click="openGoodsDialog(model)">选择商品 ></el-button>
+                </div>
+            </div>
+        </template>
+
+        <template #style="{ model }">
+            <div class="flex flex-col">
+                <image-upload v-model="model.style" :limit="1" :fileSize="2" fileType="jpg" />
+                <span class="text-gray-400 text-xs mt-1">只支持.jpg 格式</span>
+            </div>
+        </template>
+
+        <template #status="{ model }">
+            <el-switch v-model="model.status" active-value="online" inactive-value="offline" />
+        </template>
+
+    </simple-form-modal>
+
+    <goods-select-dialog v-model="goodsDialogVisible" :default-selected="selectedGoods" @confirm="handleGoodsConfirm" />
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';
+import GoodsSelectDialog from '../../components/GoodsSelectDialog.vue';
+import ImageUpload from '@/components/ImageUpload/index.vue';
+
+const emit = defineEmits(['success']);
+const modalRef = ref(null);
+const title = ref('添加专题');
+const goodsDialogVisible = ref(false);
+const selectedGoods = ref([]);
+const isSpecified = ref(true); // Default checked as per image
+const currentFormModel = ref(null);
+
+const baseUrl = {
+    add: '/salesOps/topics/add',
+    update: '/salesOps/topics/update'
+};
+
+const formItems = computed(() => [
+    {
+        label: '专题名称',
+        prop: 'name',
+        type: 'input',
+        required: true,
+        props: { placeholder: '请输入专题名称' }
+    },
+    {
+        label: '关联商品',
+        prop: 'relatedItems',
+        type: 'relatedItems',
+        slot: 'relatedItems',
+        required: true,
+    },
+    {
+        label: '是否上线',
+        prop: 'status',
+        type: 'status',
+        slot: 'status',
+        required: true,
+    },
+    {
+        label: '专题样式',
+        prop: 'style',
+        type: 'style',
+        slot: 'style',
+        required: true,
+    }
+]);
+
+const handleOpen = (data) => {
+    title.value = data && data.id ? '编辑专题' : '添加专题';
+    // Initialize selected goods from data if available
+    selectedGoods.value = data && data.relatedGoods ? data.relatedGoods : [];
+    // Mocking 10 selected items if it's a new or existing one for demo
+    if (selectedGoods.value.length === 0 && data) {
+        // selectedGoods.value = ...
+    }
+    modalRef.value.handleOpen(data);
+};
+
+const handleSuccess = (data) => {
+    emit('success', data);
+};
+
+const openGoodsDialog = (model) => {
+    currentFormModel.value = model;
+    // ensure relatedItems is initialized
+    if (!model.relatedItems) {
+        model.relatedItems = [];
+    }
+    // Use the model's data for the dialog
+    selectedGoods.value = model.relatedItems;
+    goodsDialogVisible.value = true;
+};
+
+const handleGoodsConfirm = (rows) => {
+    selectedGoods.value = rows;
+    if (currentFormModel.value) {
+        currentFormModel.value.relatedItems = rows;
+    }
+    goodsDialogVisible.value = false;
+};
+
+defineExpose({
+    handleOpen
+});
+</script>

src/views/salesOps/topics/index.vue

@@ -1,4 +1,121 @@
 <template>
-    <div class="decoration-list">
-    </div>
-</template>
+    <ele-page flex-table>
+        <!-- Search Bar -->
+        <div class="bg-white p-4 mb-4 rounded shadow-sm flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+                <el-input v-model="searchQuery" placeholder="请输入专题名称" style="width: 240px" clearable />
+                <el-button type="primary" @click="handleSearch">查询</el-button>
+                <el-button @click="handleReset">重置</el-button>
+            </div>
+            <el-button type="primary" @click="handleAdd">添加专题</el-button>
+        </div>
+
+        <common-table ref="tableRef" :pageConfig="pageConfig" :columns="columns" :tools="false"
+            :datasource="mockDatasource">
+
+            <!-- 状态 -->
+            <template #status="{ row }">
+                <span :class="row.status === 'online' ? 'text-green-500' : 'text-gray-500'">
+                    {{ row.status === 'online' ? '已上架' : '已下架' }}
+                </span>
+            </template>
+
+            <!-- 操作 -->
+            <template #action="{ row }">
+                <div class="flex items-center space-x-2">
+                    <el-button v-if="row.status === 'online'" size="small" type="primary" plain
+                        @click="handleStatusToggle(row)">
+                        下架
+                    </el-button>
+                    <el-button v-else size="small" type="success" plain @click="handleStatusToggle(row)">
+                        上架
+                    </el-button>
+
+                    <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
+                    <el-button link type="primary" @click="handleDetail(row)">详情</el-button>
+                    <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+                </div>
+            </template>
+        </common-table>
+
+        <topics-edit ref="editDialogRef" @success="handleSuccess" />
+    </ele-page>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import CommonTable from '@/components/CommonPage/CommonTable.vue';
+import TopicsEdit from './components/topics-edit.vue';
+import { EleMessage } from 'ele-admin-plus/es';
+
+defineOptions({ name: 'TopicsList' });
+
+const tableRef = ref(null);
+const editDialogRef = ref(null);
+const searchQuery = ref('');
+
+const pageConfig = reactive({
+    pageUrl: '/salesOps/topics/list',
+    fileName: '专题列表',
+    cacheKey: 'topics-list',
+    params: {}
+});
+
+const columns = ref([
+    { type: 'selection', width: 50, align: 'center' },
+    { label: '编号', prop: 'code', width: 100, align: 'center' },
+    { label: '专题名称', prop: 'name', align: 'center' },
+    { label: '发布时间', prop: 'publishTime', align: 'center', width: 180 },
+    { label: '专题类型', prop: 'typeLabel', align: 'center' },
+    { label: '相关单品', prop: 'relatedItems', align: 'center' },
+    { label: '状态', prop: 'status', slot: 'status', align: 'center' },
+    { label: '排序', prop: 'sort', align: 'center', width: 80 },
+    { label: '操作', prop: 'action', slot: 'action', align: 'center', width: 250 }
+]);
+
+const handleSearch = () => {
+    reload();
+};
+
+const handleReset = () => {
+    searchQuery.value = '';
+    reload();
+};
+
+const reload = () => {
+    tableRef.value?.reload();
+};
+
+const handleAdd = () => {
+    editDialogRef.value?.handleOpen();
+};
+
+const handleEdit = (row) => {
+    editDialogRef.value?.handleOpen(row);
+};
+
+const handleDetail = (row) => {
+    EleMessage.info(`查看 ${row.name} 详情`);
+};
+
+const handleDelete = (row) => {
+    EleMessage.confirm(`确定要删除 ${row.name} 吗？`)
+        .then(() => {
+            // TODO: Call API to delete
+            // tableRef.value?.operatBatch({ method: 'delete', row, url: '/salesOps/topics/delete' });
+            EleMessage.success('删除成功');
+            reload();
+        })
+        .catch(() => { });
+};
+
+const handleStatusToggle = (row) => {
+    // TODO: Call API to update status
+    // tableRef.value?.operatBatch({ method: 'post', row, url: '/salesOps/topics/updateStatus' });
+    EleMessage.success(`${row.name} 已${row.status === 'online' ? '上架' : '下架'}`);
+};
+
+const handleSuccess = () => {
+    reload();
+};
+</script>

src/views/salesOps/trendsRank/index.vue

@@ -1,4 +1,67 @@
 <template>
-    <div class="decoration-list">
-    </div>
-</template>
+    <ele-page flex-table>
+        <common-table ref="tableRef" :pageConfig="pageConfig" :columns="columns" :tools="false"
+            :datasource="mockDatasource">
+
+            <!-- 序号 -->
+            <template #index="{ $index }">
+                {{ $index + 1 }}
+            </template>
+
+            <!-- 商品图 -->
+            <template #image="{ row }">
+                <el-image :src="row.image" class="w-16 h-16 rounded" fit="cover" :preview-src-list="[row.image]"
+                    preview-teleported />
+            </template>
+
+            <!-- 商品信息 -->
+            <template #info="{ row }">
+                <div>
+                    <div class="font-bold text-blue-500 hover:underline cursor-pointer">{{ row.title }}</div>
+                    <div class="text-xs text-gray-500 mt-1">作者: {{ row.author }}</div>
+                    <div class="text-xs text-gray-500">ISBN: {{ row.isbn }}</div>
+                    <div class="text-xs text-gray-500">出版社: {{ row.publisher }}</div>
+                </div>
+            </template>
+
+            <!-- 是否启用 -->
+            <template #status="{ row }">
+                <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
+                    @change="handleStatusChange(row)" />
+            </template>
+        </common-table>
+    </ele-page>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import CommonTable from '@/components/CommonPage/CommonTable.vue';
+import { EleMessage } from 'ele-admin-plus/es';
+
+defineOptions({ name: 'TrendsRank' });
+
+const tableRef = ref(null);
+
+const pageConfig = reactive({
+    pageUrl: '/salesOps/trendsRank/list',
+    fileName: '热搜榜单',
+    cacheKey: 'trends-rank-list',
+    params: {}
+});
+
+const columns = ref([
+    { label: '排序', type: 'index', width: 80, align: 'center' },
+    { label: '商品图', slot: 'image', width: 120, align: 'center' },
+    { label: '商品信息', slot: 'info', minWidth: 250 },
+    { label: '销量', prop: 'sales', align: 'center' },
+    { label: '库存', prop: 'stock', align: 'center' },
+    { label: '是否启用', slot: 'status', align: 'center' },
+    { label: '更新时间', prop: 'updateTime', align: 'center', width: 180 }
+]);
+
+const handleStatusChange = (row) => {
+    // TODO: Call API to update status
+    // tableRef.value?.operatBatch({ method: 'post', row, url: '/salesOps/trendsRank/updateStatus' });
+    EleMessage.success(`${row.title} ${row.status === 1 ? '已启用' : '已禁用'}`);
+};
+</script>

src/views/salesOps/trendsSearch/components/trends-search-edit.vue

@@ -0,0 +1,78 @@
+<template>
+    <simple-form-modal
+        ref="modalRef"
+        :items="formItems"
+        :baseUrl="baseUrl"
+        @success="handleSuccess"
+        :title="title"
+        width="520px"
+        labelWidth="100px"
+    />
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';
+
+const emit = defineEmits(['success']);
+const modalRef = ref(null);
+const title = ref('添加热搜词');
+
+const baseUrl = {
+    add: '/salesOps/trendsSearch/add',
+    update: '/salesOps/trendsSearch/update'
+};
+
+const formItems = computed(() => [
+    {
+        label: '热搜词',
+        prop: 'keyword',
+        type: 'input',
+        required: true,
+        attrs: {
+            placeholder: '请输入'
+        }
+    },
+    {
+        label: '权重',
+        prop: 'weight',
+        type: 'input',
+        required: true,
+        attrs: {
+            placeholder: '请输入'
+        }
+    },
+    {
+        label: '类型',
+        prop: 'type',
+        type: 'select',
+        required: true,
+        options: [
+            { label: '热搜词', value: 'hot' },
+            { label: '搜索框默认词', value: 'default' }
+        ],
+        attrs: {
+            placeholder: '请选择类型'
+        }
+    },
+    {
+        label: '是否启用',
+        prop: 'status',
+        type: 'switch',
+        defaultValue: true
+    }
+]);
+
+const handleOpen = (data) => {
+    title.value = data && data.id ? '编辑热搜词' : '添加热搜词';
+    modalRef.value.handleOpen(data);
+};
+
+const handleSuccess = (data) => {
+    emit('success', data);
+};
+
+defineExpose({
+    handleOpen
+});
+</script>

src/views/salesOps/trendsSearch/index.vue

@@ -1,4 +1,92 @@
 <template>
-    <div class="decoration-list">
-    </div>
-</template>
+    <ele-page flex-table>
+        <common-table ref="tableRef" :pageConfig="pageConfig" :columns="columns" :tools="false"
+            :datasource="mockDatasource">
+            <template #toolbar>
+                <el-button type="primary" @click="handleAdd">添加</el-button>
+            </template>
+
+            <!-- 序号 -->
+            <template #index="{ $index }">
+                {{ $index + 1 }}
+            </template>
+
+            <!-- 是否启用 -->
+            <template #status="{ row }">
+                <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
+                    @change="handleStatusChange(row)" />
+            </template>
+
+            <!-- 操作 -->
+            <template #action="{ row }">
+                <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
+                <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+            </template>
+        </common-table>
+
+        <trends-search-edit ref="editDialogRef" @success="handleSuccess" />
+    </ele-page>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import CommonTable from '@/components/CommonPage/CommonTable.vue';
+import TrendsSearchEdit from './components/trends-search-edit.vue';
+import { EleMessage } from 'ele-admin-plus/es';
+
+defineOptions({ name: 'TrendsSearch' });
+
+const tableRef = ref(null);
+const editDialogRef = ref(null);
+
+const pageConfig = reactive({
+    pageUrl: '/salesOps/trendsSearch/list',
+    fileName: '热搜管理',
+    cacheKey: 'trends-search-list',
+    params: {}
+});
+
+const columns = ref([
+    { label: '热搜词', prop: 'keyword', align: 'center' },
+    { label: '管理类型', prop: 'typeLabel', align: 'center' },
+    { label: '来源', prop: 'source', align: 'center' },
+    { label: '搜索次数', prop: 'count', align: 'center' },
+    { label: '权重', prop: 'weight', align: 'center' },
+    { label: '是否启用', prop: 'status', slot: 'status', align: 'center' },
+    { label: '更新时间', prop: 'updateTime', align: 'center', width: 180 },
+    { label: '操作', prop: 'action', slot: 'action', align: 'center', width: 150 }
+]);
+
+const reload = () => {
+    tableRef.value?.reload();
+};
+
+const handleAdd = () => {
+    editDialogRef.value?.handleOpen();
+};
+
+const handleEdit = (row) => {
+    editDialogRef.value?.handleOpen(row);
+};
+
+const handleDelete = (row) => {
+    EleMessage.confirm(`确定要删除 ${row.keyword} 吗？`)
+        .then(() => {
+             // TODO: Call API to delete
+             // tableRef.value?.operatBatch({ method: 'delete', row, url: '/salesOps/trendsSearch/delete' });
+             EleMessage.success('删除成功');
+             reload();
+        })
+        .catch(() => {});
+};
+
+const handleSuccess = () => {
+    reload();
+};
+
+const handleStatusChange = (row) => {
+    // TODO: Call API to update status
+    // tableRef.value?.operatBatch({ method: 'post', row, url: '/salesOps/trendsSearch/updateStatus' });
+    EleMessage.success(`${row.keyword} ${row.status === 1 ? '已启用' : '已禁用'}`);
+};
+</script>