diff --git a/src/views/shop/shopArticle/components/search.vue b/src/views/shop/shopArticle/components/search.vue
new file mode 100644
index 0000000..82fea9d
--- /dev/null
+++ b/src/views/shop/shopArticle/components/search.vue
@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
diff --git a/src/views/shop/shopArticle/components/shopArticleEdit.vue b/src/views/shop/shopArticle/components/shopArticleEdit.vue
new file mode 100644
index 0000000..b6bfb47
--- /dev/null
+++ b/src/views/shop/shopArticle/components/shopArticleEdit.vue
@@ -0,0 +1,576 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑商品文章' : '添加商品文章'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="文章标题" name="title">
+        <a-input
+          allow-clear
+          placeholder="请输入文章标题"
+          v-model:value="form.title"
+        />
+      </a-form-item>
+      <a-form-item label="文章类型 0常规 1视频" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入文章类型 0常规 1视频"
+          v-model:value="form.type"
+        />
+      </a-form-item>
+      <a-form-item label="模型" name="model">
+        <a-input
+          allow-clear
+          placeholder="请输入模型"
+          v-model:value="form.model"
+        />
+      </a-form-item>
+      <a-form-item label="详情页模板" name="detail">
+        <a-input
+          allow-clear
+          placeholder="请输入详情页模板"
+          v-model:value="form.detail"
+        />
+      </a-form-item>
+      <a-form-item label="文章分类ID" name="categoryId">
+        <a-input
+          allow-clear
+          placeholder="请输入文章分类ID"
+          v-model:value="form.categoryId"
+        />
+      </a-form-item>
+      <a-form-item label="上级id, 0是顶级" name="parentId">
+        <a-input
+          allow-clear
+          placeholder="请输入上级id, 0是顶级"
+          v-model:value="form.parentId"
+        />
+      </a-form-item>
+      <a-form-item label="话题" name="topic">
+        <a-input
+          allow-clear
+          placeholder="请输入话题"
+          v-model:value="form.topic"
+        />
+      </a-form-item>
+      <a-form-item label="标签" name="tags">
+        <a-input
+          allow-clear
+          placeholder="请输入标签"
+          v-model:value="form.tags"
+        />
+      </a-form-item>
+        <a-form-item
+          label="封面图"
+          name="image">
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="1"
+            :data="images"
+            @done="chooseImage"
+            @del="onDeleteItem"
+          />
+        </a-form-item>
+      <a-form-item label="封面图宽" name="imageWidth">
+        <a-input
+          allow-clear
+          placeholder="请输入封面图宽"
+          v-model:value="form.imageWidth"
+        />
+      </a-form-item>
+      <a-form-item label="封面图高" name="imageHeight">
+        <a-input
+          allow-clear
+          placeholder="请输入封面图高"
+          v-model:value="form.imageHeight"
+        />
+      </a-form-item>
+      <a-form-item label="付费金额" name="price">
+        <a-input
+          allow-clear
+          placeholder="请输入付费金额"
+          v-model:value="form.price"
+        />
+      </a-form-item>
+      <a-form-item label="开始时间" name="startTime">
+        <a-input
+          allow-clear
+          placeholder="请输入开始时间"
+          v-model:value="form.startTime"
+        />
+      </a-form-item>
+      <a-form-item label="结束时间" name="endTime">
+        <a-input
+          allow-clear
+          placeholder="请输入结束时间"
+          v-model:value="form.endTime"
+        />
+      </a-form-item>
+      <a-form-item label="来源" name="source">
+        <a-input
+          allow-clear
+          placeholder="请输入来源"
+          v-model:value="form.source"
+        />
+      </a-form-item>
+      <a-form-item label="产品概述" name="overview">
+        <a-input
+          allow-clear
+          placeholder="请输入产品概述"
+          v-model:value="form.overview"
+        />
+      </a-form-item>
+      <a-form-item label="虚拟阅读量(仅用作展示)" name="virtualViews">
+        <a-input
+          allow-clear
+          placeholder="请输入虚拟阅读量(仅用作展示)"
+          v-model:value="form.virtualViews"
+        />
+      </a-form-item>
+      <a-form-item label="实际阅读量" name="actualViews">
+        <a-input
+          allow-clear
+          placeholder="请输入实际阅读量"
+          v-model:value="form.actualViews"
+        />
+      </a-form-item>
+      <a-form-item label="评分" name="rate">
+        <a-input
+          allow-clear
+          placeholder="请输入评分"
+          v-model:value="form.rate"
+        />
+      </a-form-item>
+      <a-form-item label="列表显示方式(10小图展示 20大图展示)" name="showType">
+        <a-input
+          allow-clear
+          placeholder="请输入列表显示方式(10小图展示 20大图展示)"
+          v-model:value="form.showType"
+        />
+      </a-form-item>
+      <a-form-item label="访问密码" name="password">
+        <a-input
+          allow-clear
+          placeholder="请输入访问密码"
+          v-model:value="form.password"
+        />
+      </a-form-item>
+      <a-form-item label="可见类型 0所有人 1登录可见 2密码可见" name="permission">
+        <a-input
+          allow-clear
+          placeholder="请输入可见类型 0所有人 1登录可见 2密码可见"
+          v-model:value="form.permission"
+        />
+      </a-form-item>
+      <a-form-item label="发布来源客户端 (APP、H5、小程序等)" name="platform">
+        <a-input
+          allow-clear
+          placeholder="请输入发布来源客户端 (APP、H5、小程序等)"
+          v-model:value="form.platform"
+        />
+      </a-form-item>
+      <a-form-item label="文章附件" name="files">
+        <a-input
+          allow-clear
+          placeholder="请输入文章附件"
+          v-model:value="form.files"
+        />
+      </a-form-item>
+      <a-form-item label="视频地址" name="video">
+        <a-input
+          allow-clear
+          placeholder="请输入视频地址"
+          v-model:value="form.video"
+        />
+      </a-form-item>
+      <a-form-item label="接受的文件类型" name="accept">
+        <a-input
+          allow-clear
+          placeholder="请输入接受的文件类型"
+          v-model:value="form.accept"
+        />
+      </a-form-item>
+      <a-form-item label="经度" name="longitude">
+        <a-input
+          allow-clear
+          placeholder="请输入经度"
+          v-model:value="form.longitude"
+        />
+      </a-form-item>
+      <a-form-item label="纬度" name="latitude">
+        <a-input
+          allow-clear
+          placeholder="请输入纬度"
+          v-model:value="form.latitude"
+        />
+      </a-form-item>
+      <a-form-item label="所在省份" name="province">
+        <a-input
+          allow-clear
+          placeholder="请输入所在省份"
+          v-model:value="form.province"
+        />
+      </a-form-item>
+      <a-form-item label="所在城市" name="city">
+        <a-input
+          allow-clear
+          placeholder="请输入所在城市"
+          v-model:value="form.city"
+        />
+      </a-form-item>
+      <a-form-item label="所在辖区" name="region">
+        <a-input
+          allow-clear
+          placeholder="请输入所在辖区"
+          v-model:value="form.region"
+        />
+      </a-form-item>
+      <a-form-item label="街道地址" name="address">
+        <a-input
+          allow-clear
+          placeholder="请输入街道地址"
+          v-model:value="form.address"
+        />
+      </a-form-item>
+      <a-form-item label="点赞数" name="likes">
+        <a-input
+          allow-clear
+          placeholder="请输入点赞数"
+          v-model:value="form.likes"
+        />
+      </a-form-item>
+      <a-form-item label="评论数" name="commentNumbers">
+        <a-input
+          allow-clear
+          placeholder="请输入评论数"
+          v-model:value="form.commentNumbers"
+        />
+      </a-form-item>
+      <a-form-item label="提醒谁看" name="toUsers">
+        <a-input
+          allow-clear
+          placeholder="请输入提醒谁看"
+          v-model:value="form.toUsers"
+        />
+      </a-form-item>
+      <a-form-item label="作者" name="author">
+        <a-input
+          allow-clear
+          placeholder="请输入作者"
+          v-model:value="form.author"
+        />
+      </a-form-item>
+      <a-form-item label="推荐" name="recommend">
+        <a-input
+          allow-clear
+          placeholder="请输入推荐"
+          v-model:value="form.recommend"
+        />
+      </a-form-item>
+      <a-form-item label="报名人数" name="bmUsers">
+        <a-input
+          allow-clear
+          placeholder="请输入报名人数"
+          v-model:value="form.bmUsers"
+        />
+      </a-form-item>
+      <a-form-item label="用户ID" name="userId">
+        <a-input
+          allow-clear
+          placeholder="请输入用户ID"
+          v-model:value="form.userId"
+        />
+      </a-form-item>
+      <a-form-item label="项目ID" name="projectId">
+        <a-input
+          allow-clear
+          placeholder="请输入项目ID"
+          v-model:value="form.projectId"
+        />
+      </a-form-item>
+      <a-form-item label="语言" name="lang">
+        <a-input
+          allow-clear
+          placeholder="请输入语言"
+          v-model:value="form.lang"
+        />
+      </a-form-item>
+      <a-form-item label="关联默认语言的文章ID" name="langArticleId">
+        <a-input
+          allow-clear
+          placeholder="请输入关联默认语言的文章ID"
+          v-model:value="form.langArticleId"
+        />
+      </a-form-item>
+      <a-form-item label="是否自动翻译" name="translation">
+        <a-input
+          allow-clear
+          placeholder="请输入是否自动翻译"
+          v-model:value="form.translation"
+        />
+      </a-form-item>
+      <a-form-item label="编辑器类型 0 Markdown编辑器 1 富文本编辑器 " name="editor">
+        <a-input
+          allow-clear
+          placeholder="请输入编辑器类型 0 Markdown编辑器 1 富文本编辑器 "
+          v-model:value="form.editor"
+        />
+      </a-form-item>
+      <a-form-item label="pdf文件地址" name="pdfUrl">
+        <a-input
+          allow-clear
+          placeholder="请输入pdf文件地址"
+          v-model:value="form.pdfUrl"
+        />
+      </a-form-item>
+      <a-form-item label="版本号" name="version">
+        <a-input
+          allow-clear
+          placeholder="请输入版本号"
+          v-model:value="form.version"
+        />
+      </a-form-item>
+      <a-form-item label="排序(数字越小越靠前)" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="状态, 0已发布, 1待审核 2已驳回 3违规内容" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="是否删除, 0否, 1是" name="deleted">
+        <a-input
+          allow-clear
+          placeholder="请输入是否删除, 0否, 1是"
+          v-model:value="form.deleted"
+        />
+      </a-form-item>
+      <a-form-item label="修改时间" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入修改时间"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addShopArticle, updateShopArticle } from '@/api/shop/shopArticle';
+  import { ShopArticle } from '@/api/shop/shopArticle/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: ShopArticle | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<ShopArticle>({
+    articleId: undefined,
+    title: undefined,
+    type: undefined,
+    model: undefined,
+    detail: undefined,
+    categoryId: undefined,
+    parentId: undefined,
+    topic: undefined,
+    tags: undefined,
+    image: undefined,
+    imageWidth: undefined,
+    imageHeight: undefined,
+    price: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    source: undefined,
+    overview: undefined,
+    virtualViews: undefined,
+    actualViews: undefined,
+    rate: undefined,
+    showType: undefined,
+    password: undefined,
+    permission: undefined,
+    platform: undefined,
+    files: undefined,
+    video: undefined,
+    accept: undefined,
+    longitude: undefined,
+    latitude: undefined,
+    province: undefined,
+    city: undefined,
+    region: undefined,
+    address: undefined,
+    likes: undefined,
+    commentNumbers: undefined,
+    toUsers: undefined,
+    author: undefined,
+    recommend: undefined,
+    bmUsers: undefined,
+    userId: undefined,
+    projectId: undefined,
+    lang: undefined,
+    langArticleId: undefined,
+    translation: undefined,
+    editor: undefined,
+    pdfUrl: undefined,
+    version: undefined,
+    sortNumber: undefined,
+    comments: undefined,
+    status: undefined,
+    deleted: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    shopArticleId: undefined,
+    shopArticleName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    shopArticleName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写商品文章名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateShopArticle : addShopArticle;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/shop/shopArticle/index.vue b/src/views/shop/shopArticle/index.vue
new file mode 100644
index 0000000..a7a9ad9
--- /dev/null
+++ b/src/views/shop/shopArticle/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="shopArticleId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <ShopArticleEdit v-model:visible="showEdit" :data="current" @done="reload" />
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import {getPageTitle} from '@/utils/common';
+  import ShopArticleEdit from './components/shopArticleEdit.vue';
+  import { pageShopArticle, removeShopArticle, removeBatchShopArticle } from '@/api/shop/shopArticle';
+  import type { ShopArticle, ShopArticleParam } from '@/api/shop/shopArticle/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<ShopArticle[]>([]);
+  // 当前编辑数据
+  const current = ref<ShopArticle | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageShopArticle({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置 - 使用 hideInTable 控制默认显示
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '文章ID',
+      dataIndex: 'articleId',
+      key: 'articleId',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '文章标题',
+      dataIndex: 'title',
+      key: 'title',
+      align: 'center',