diff --git a/.gitignore b/.gitignore
index dce76c4..5c5538a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+/node_modules
 dist
 /dist
 /dist-ssr
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 7727736..139e7d9 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -4,7 +4,7 @@
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="8">
+          <list size="9">
             <item index="0" class="java.lang.String" itemvalue="nobr" />
             <item index="1" class="java.lang.String" itemvalue="noembed" />
             <item index="2" class="java.lang.String" itemvalue="comment" />
@@ -13,6 +13,7 @@
             <item index="5" class="java.lang.String" itemvalue="script" />
             <item index="6" class="java.lang.String" itemvalue="ele-map-picker" />
             <item index="7" class="java.lang.String" itemvalue="a-page-header" />
+            <item index="8" class="java.lang.String" itemvalue="ele-modal" />
           </list>
         </value>
       </option>
diff --git a/src/views/bsyx/bsyxClass/components/bszxClassEdit.vue b/src/views/bsyx/bsyxClass/components/bszxClassEdit.vue
new file mode 100644
index 0000000..f82ef60
--- /dev/null
+++ b/src/views/bsyx/bsyxClass/components/bszxClassEdit.vue
@@ -0,0 +1,199 @@
+<!-- 编辑弹窗 -->
+<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="gradeId">
+        <a-select
+          v-model:value="form.gradeName"
+          show-search
+          placeholder="选择年级"
+          style="width: 200px"
+          :options="options"
+          @change="handleChange"
+        ></a-select>
+      </a-form-item>
+      <a-form-item label="班级" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入班级"
+          v-model:value="form.name"
+          @pressEnter="save"
+        />
+      </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>
+  </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 { addBszxClass, updateBszxClass } from '@/api/bszx/bszxClass';
+  import { BszxClass } from '@/api/bszx/bszxClass/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 {BszxGrade} from "@/api/bszx/bszxGrade/model";
+  import {listBszxGrade} from "@/api/bszx/bszxGrade";
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BszxClass | 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 options = ref<BszxGrade[]>([]);
+
+  // 用户信息
+  const form = reactive<BszxClass>({
+    id: undefined,
+    name: undefined,
+    gradeId: undefined,
+    gradeName: undefined,
+    branch: 2,
+    sortNumber: 100,
+    comments: undefined,
+    status: undefined,
+    tenantId: undefined,
+    createTime: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    appBszxClassName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写应用-百色中学-班级名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const handleChange = (value: string, item: any) => {
+    form.gradeName = value;
+    form.gradeId = item.id;
+  };
+
+  const handleBranch = () => {
+    getBszxGradeList();
+  }
+
+  const getBszxGradeList = () => {
+    listBszxGrade({branch: form.branch}).then((list) => {
+      options.value = list.map(d => {
+        d.value = d.name;
+        d.label = d.name;
+        return d;
+      });
+    })
+  }
+  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 ? updateBszxClass : addBszxClass;
+        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) {
+        getBszxGradeList()
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        // resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/bsyx/bsyxClass/components/search.vue b/src/views/bsyx/bsyxClass/components/search.vue
new file mode 100644
index 0000000..7f935dc
--- /dev/null
+++ b/src/views/bsyx/bsyxClass/components/search.vue
@@ -0,0 +1,98 @@
+<!-- 搜索表单 -->
+<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-select
+      show-search
+      v-model:value="where.gradeId"
+      style="width: 240px"
+      placeholder="选择年级"
+      :options="gradeList"
+      @change="onGrade"
+    ></a-select>
+    <a-input-search
+      allow-clear
+      placeholder="请输入关键词"
+      style="width: 240px"
+      v-model:value="where.keywords"
+      @search="handleSearch"
+    />
+    <a-button @click="reset">重置</a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+import {PlusOutlined} from '@ant-design/icons-vue';
+import {watch,ref} from 'vue';
+import useSearch from "@/utils/use-search";
+import {BszxClassParam} from "@/api/bszx/bszxClass/model";
+import {listBszxGrade} from "@/api/bszx/bszxGrade";
+
+const props = withDefaults(
+  defineProps<{
+    // 选中的角色
+    selection?: [];
+  }>(),
+  {}
+);
+
+const gradeList = ref<BszxClassParam[]>([]);
+
+
+const emit = defineEmits<{
+  (e: 'search', where?: BszxClassParam): void;
+  (e: 'add'): void;
+  (e: 'remove'): void;
+  (e: 'batchMove'): void;
+}>();
+
+// 表单数据
+const {where, resetFields} = useSearch<BszxClassParam>({
+  gradeId: undefined,
+  eraId: undefined,
+  branch: undefined,
+  keywords: ''
+});
+
+// 新增
+const add = () => {
+  emit('add');
+};
+
+const handleSearch = () => {
+  emit('search', where);
+}
+
+/*  重置 */
+const reset = () => {
+  resetFields();
+  handleSearch();
+};
+
+const onGrade = (gradeId: number) => {
+  where.gradeId = gradeId;
+  handleSearch();
+}
+
+const reload = () => {
+  listBszxGrade({}).then(res => {
+    gradeList.value = res.map(d => {
+      d.value = Number(d.id);
+      d.label = d.name;
+      return d;
+    });
+  })
+}
+reload();
+watch(
+  () => props.selection,
+  () => {
+  },
+  { immediate: true }
+);
+</script>
diff --git a/src/views/bsyx/bsyxClass/index.vue b/src/views/bsyx/bsyxClass/index.vue
new file mode 100644
index 0000000..7d558de
--- /dev/null
+++ b/src/views/bsyx/bsyxClass/index.vue
@@ -0,0 +1,237 @@
+<template>
+  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
+    <template #extra>
+      <a-button
+        type="text"
+        @click="openUrl('/bsyx/grade')"
+      >年级设置
+      </a-button
+      >
+      <a-button
+        type="text"
+        @click="openUrl('/bsyx/class')"
+      >班级设置
+      </a-button
+      >
+    </template>
+    <a-card :bordered="false" :body-style="{ padding: '16px' }">
+      <ele-pro-table
+        ref="tableRef"
+        row-key="id"
+        :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 === 'era'">
+            <span>{{ record.era }}级</span>
+          </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>
+
+    <!-- 编辑弹窗 -->
+    <BszxClassEdit 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 type {
+  DatasourceFunction,
+  ColumnItem
+} from 'ele-admin-pro/es/ele-pro-table/types';
+import Search from './components/search.vue';
+import BszxClassEdit from './components/bszxClassEdit.vue';
+import {pageBszxClass, removeBszxClass, removeBatchBszxClass} from '@/api/bszx/bszxClass';
+import type {BszxClass, BszxClassParam} from '@/api/bszx/bszxClass/model';
+import {getPageTitle, openUrl} from "@/utils/common";
+
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+// 表格选中数据
+const selection = ref<BszxClass[]>([]);
+// 当前编辑数据
+const current = ref<BszxClass | 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 pageBszxClass({
+    ...where,
+    ...orders,
+    page,
+    limit
+  });
+};
+
+// 表格列配置
+const columns = ref<ColumnItem[]>([
+  // {
+  //   title: 'ID',
+  //   dataIndex: 'id',
+  //   key: 'id',
+  //   width: 120,
+  // },
+  {
+    title: '年级',
+    dataIndex: 'gradeName',
+    key: 'gradeName',
+    width: 120
+  },
+  // {
+  //   title: '年级',
+  //   dataIndex: 'gradeId',
+  //   key: 'gradeId',
+  //   width: 120
+  // },
+  {
+    title: '班级',
+    dataIndex: 'name',
+    key: 'name'
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 180,
+    fixed: 'right',
+    align: 'center',
+    hideInSetting: true
+  }
+]);
+
+/* 搜索 */
+const reload = (where?: BszxClassParam) => {
+  selection.value = [];
+  tableRef?.value?.reload({where: where});
+};
+
+/* 打开编辑弹窗 */
+const openEdit = (row?: BszxClass) => {
+  current.value = row ?? null;
+  showEdit.value = true;
+};
+
+/* 打开批量移动弹窗 */
+const openMove = () => {
+  showMove.value = true;
+};
+
+/* 删除单个 */
+const remove = (row: BszxClass) => {
+  const hide = message.loading('请求中..', 0);
+  removeBszxClass(row.id)
+    .then((msg) => {
+      hide();
+      message.success(msg);
+      reload();
+    })
+    .catch((e) => {
+      hide();
+      message.error(e.message);
+    });
+};
+
+/* 批量删除 */
+const removeBatch = () => {
+  if (!selection.value.length) {
+    message.error('请至少选择一条数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除选中的记录吗?',
+    icon: createVNode(ExclamationCircleOutlined),
+    maskClosable: true,
+    onOk: () => {
+      const hide = message.loading('请求中..', 0);
+      removeBatchBszxClass(selection.value.map((d) => d.id))
+        .then((msg) => {
+          hide();
+          message.success(msg);
+          reload();
+        })
+        .catch((e) => {
+          hide();
+          message.error(e.message);
+        });
+    }
+  });
+};
+
+/* 查询 */
+const query = () => {
+  loading.value = true;
+};
+
+/* 自定义行属性 */
+const customRow = (record: BszxClass) => {
+  return {
+    // 行点击事件
+    onClick: () => {
+      // console.log(record);
+    },
+    // 行双击事件
+    onDblclick: () => {
+      openEdit(record);
+    }
+  };
+};
+query();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'BszxClass'
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/bsyx/bsyxGrade/components/bszxGradeEdit.vue b/src/views/bsyx/bsyxGrade/components/bszxGradeEdit.vue
new file mode 100644
index 0000000..1908dd0
--- /dev/null
+++ b/src/views/bsyx/bsyxGrade/components/bszxGradeEdit.vue
@@ -0,0 +1,164 @@
+<!-- 编辑弹窗 -->
+<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="name">
+        <a-input
+          allow-clear
+          placeholder="请输入年级"
+          v-model:value="form.name"
+        />
+      </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>
+  </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 { addBszxGrade, updateBszxGrade } from '@/api/bszx/bszxGrade';
+  import { BszxGrade } from '@/api/bszx/bszxGrade/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';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BszxGrade | 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<BszxGrade>({
+    id: undefined,
+    branch: 2,
+    name: undefined,
+    comments: undefined,
+    status: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    appBszxGradeName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写应用-百色中学-年级名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  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 ? updateBszxGrade : addBszxGrade;
+        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);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/bsyx/bsyxGrade/components/search.vue b/src/views/bsyx/bsyxGrade/components/search.vue
new file mode 100644
index 0000000..0e4397c
--- /dev/null
+++ b/src/views/bsyx/bsyxGrade/components/search.vue
@@ -0,0 +1,52 @@
+<!-- 搜索表单 -->
+<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 useSearch from "@/utils/use-search";
+  import { watch } from 'vue';
+  import {BszxGradeParam} from "@/api/bszx/bszxGrade/model";
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: BszxGradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 表单数据
+  const {where} = useSearch<BszxGradeParam>({
+    branch: undefined,
+    keywords: ''
+  });
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  const handleSearch = () => {
+    emit('search', where);
+  }
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
diff --git a/src/views/bsyx/bsyxGrade/index.vue b/src/views/bsyx/bsyxGrade/index.vue
new file mode 100644
index 0000000..4a9a7f3
--- /dev/null
+++ b/src/views/bsyx/bsyxGrade/index.vue
@@ -0,0 +1,230 @@
+<template>
+  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
+    <template #extra>
+      <a-button
+        type="text"
+        @click="openUrl('/bsyx/grade')"
+      >年级设置
+      </a-button
+      >
+      <a-button
+        type="text"
+        @click="openUrl('/bsyx/class')"
+      >班级设置
+      </a-button
+      >
+    </template>
+    <a-card :bordered="false" :body-style="{ padding: '16px' }">
+      <ele-pro-table
+        ref="tableRef"
+        row-key="appBszxGradeId"
+        :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>
+
+    <!-- 编辑弹窗 -->
+    <BszxGradeEdit 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 type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BszxGradeEdit from './components/bszxGradeEdit.vue';
+  import { pageBszxGrade, removeBszxGrade, removeBatchBszxGrade } from '@/api/bszx/bszxGrade';
+  import type { BszxGrade, BszxGradeParam } from '@/api/bszx/bszxGrade/model';
+  import {getPageTitle, openUrl} from "@/utils/common";
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BszxGrade[]>([]);
+  // 当前编辑数据
+  const current = ref<BszxGrade | 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 pageBszxGrade({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    // {
+    //   title: 'ID',
+    //   dataIndex: 'id',
+    //   key: 'id',
+    //   align: 'center',
+    //   width: 90,
+    // },
+    {
+      title: '年级',
+      dataIndex: 'name',
+      key: 'name'
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+      width: 120,
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BszxGradeParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BszxGrade) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BszxGrade) => {
+    const hide = message.loading('请求中..', 0);
+    removeBszxGrade(row.id)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBszxGrade(selection.value.map((d) => d.id))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BszxGrade) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BszxGrade'
+  };
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/bsyx/bsyxPay/components/bszxPayEdit.vue b/src/views/bsyx/bsyxPay/components/bszxPayEdit.vue
new file mode 100644
index 0000000..876727d
--- /dev/null
+++ b/src/views/bsyx/bsyxPay/components/bszxPayEdit.vue
@@ -0,0 +1,249 @@
+<!-- 编辑弹窗 -->
+<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="age">
+        <a-input
+          allow-clear
+          placeholder="请输入年龄"
+          v-model:value="form.age"
+        />
+      </a-form-item>
+      <a-form-item label="姓名" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入姓名"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="性别 1男 2女" name="sex">
+        <a-input
+          allow-clear
+          placeholder="请输入性别 1男 2女"
+          v-model:value="form.sex"
+        />
+      </a-form-item>
+      <a-form-item label="手机号码" name="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入手机号码"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="班级" name="className">
+        <a-input
+          allow-clear
+          placeholder="请输入班级"
+          v-model:value="form.className"
+        />
+      </a-form-item>
+      <a-form-item label="年级" name="gradeName">
+        <a-input
+          allow-clear
+          placeholder="请输入年级"
+          v-model:value="form.gradeName"
+        />
+      </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="workUnit">
+        <a-input
+          allow-clear
+          placeholder="请输入工作单位"
+          v-model:value="form.workUnit"
+        />
+      </a-form-item>
+      <a-form-item label="职务" name="position">
+        <a-input
+          allow-clear
+          placeholder="请输入职务"
+          v-model:value="form.position"
+        />
+      </a-form-item>
+      <a-form-item label="捐赠证书" name="certificate">
+        <a-input
+          allow-clear
+          placeholder="请输入捐赠证书"
+          v-model:value="form.certificate"
+        />
+      </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="状态" 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>
+  </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 { addBszxPay, updateBszxPay } from '@/api/bszx/bszxPay';
+  import { BszxPay } from '@/api/bszx/bszxPay/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?: BszxPay | 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<BszxPay>({
+    id: undefined,
+    age: undefined,
+    name: undefined,
+    sex: undefined,
+    phone: undefined,
+    className: undefined,
+    gradeName: undefined,
+    address: undefined,
+    workUnit: undefined,
+    position: undefined,
+    number: undefined,
+    extra: undefined,
+    dateTime: undefined,
+    certificate: undefined,
+    formData: undefined,
+    formId: undefined,
+    userId: undefined,
+    comments: undefined,
+    status: undefined,
+    deleted: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    appBszxPayName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写应用-百色中学-捐款记录名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  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 ? updateBszxPay : addBszxPay;
+        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);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/bsyx/bsyxPay/components/search.vue b/src/views/bsyx/bsyxPay/components/search.vue
new file mode 100644
index 0000000..7c9ed1c
--- /dev/null
+++ b/src/views/bsyx/bsyxPay/components/search.vue
@@ -0,0 +1,230 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-select
+      show-search
+      v-model:value="where.gradeName"
+      style="width: 240px"
+      placeholder="选择年级"
+      :options="gradeList"
+      @change="onGrade"
+    ></a-select>
+    <a-select
+      v-if="where.gradeName"
+      show-search
+      v-model:value="where.className"
+      style="width: 240px"
+      placeholder="选择年级"
+      :options="classList"
+      @change="onClass"
+    ></a-select>
+    <a-range-picker
+      v-model:value="dateRange"
+      @change="search"
+      value-format="YYYY-MM-DD"
+    />
+    <a-input-search
+      allow-clear
+      placeholder="请输入关键词"
+      style="width: 220px"
+      v-model:value="where.keywords"
+      @search="reload"
+    />
+    <a-button @click="handleExport">导出</a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+import {ref, watch} from 'vue';
+import {utils, writeFile} from 'xlsx';
+import dayjs from 'dayjs';
+import {message} from 'ant-design-vue';
+import useSearch from "@/utils/use-search";
+import {BszxPayParam} from "@/api/bszx/bszxPay/model";
+import {BszxBm} from "@/api/bszx/bszxBm/model";
+import {listBszxPay} from "@/api/bszx/bszxPay";
+import {BszxClassParam} from "@/api/bszx/bszxClass/model";
+import {listBszxGrade} from "@/api/bszx/bszxGrade";
+import {listBszxClass} from "@/api/bszx/bszxClass";
+
+const props = withDefaults(
+  defineProps<{
+    // 选中的角色
+    selection?: [];
+  }>(),
+  {}
+);
+
+const emit = defineEmits<{
+  (e: 'search', where?: BszxPayParam): void;
+  (e: 'add'): void;
+  (e: 'remove'): void;
+  (e: 'batchMove'): void;
+}>();
+
+// 表单数据
+const {where} = useSearch<BszxPayParam>({
+  id: undefined,
+  keywords: '',
+  gradeName: undefined,
+  className: undefined,
+  createTimeStart: undefined,
+  createTimeEnd: undefined,
+  userId: undefined
+});
+
+const reload = () => {
+  emit('search', where);
+};
+
+/* 搜索 */
+const search = () => {
+  const [d1, d2] = dateRange.value ?? [];
+  where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
+  where.createTimeEnd = d2 ? d2 + ' 23:59:59' : undefined;
+  emit('search', {
+    ...where
+  });
+};
+
+
+const dateRange = ref<[string, string]>(['', '']);
+// 变量
+const loading = ref(false);
+const bmList = ref<BszxBm[]>([])
+const xlsFileName = ref<string>();
+const branchId = ref<number>();
+const gradeId = ref<number>();
+const gradeList = ref<BszxClassParam[]>([]);
+const classList = ref<BszxClassParam[]>([]);
+
+
+const getGradeList = () => {
+  listBszxGrade({branch: branchId.value}).then(res => {
+    gradeList.value = res.map(d => {
+      d.value = Number(d.id);
+      d.label = d.name;
+      return d;
+    });
+  })
+};
+
+const getClassList = () => {
+  listBszxClass({gradeId: gradeId.value}).then(res => {
+    classList.value = res.map(d => {
+      d.value = Number(d.id);
+      d.label = d.name;
+      return d;
+    });
+  })
+}
+
+const onGrade = (gradeName: number, item: any) => {
+  where.gradeName = item.name;
+  if (gradeName) {
+    console.log(item)
+    gradeId.value = item.id;
+    getClassList();
+  }
+  emit('search', where);
+}
+
+const onBranchId = () => {
+  getGradeList();
+}
+
+const onClass = (classId, item) => {
+  console.log(classId);
+  where.className = item.name;
+  reload();
+}
+
+// 导出
+const handleExport = async () => {
+  loading.value = true;
+  const array: (string | number)[][] = [
+    [
+      '订单编号',
+      '姓名',
+      '手机号码',
+      '捐款金额',
+      '性别',
+      '年级',
+      '班级',
+      '居住地址',
+      '工作单位',
+      '职务',
+      '捐款时间'
+    ]
+  ];
+
+  // 按搜索结果导出
+  where.sceneType = 'Content';
+  await listBszxPay(where)
+    .then((list) => {
+      bmList.value = list;
+      list?.forEach((d: BszxBm) => {
+        array.push([
+          `${d.orderNo}`,
+          `${d.name}`,
+          `${d.mobile}`,
+          `${d.price}`,
+          `${d.sex == 1 ? '男' : ''}${d.sex == 2 ? '女' : '-'}`,
+          `${d.gradeName ? d.gradeName : '-'}`,
+          `${d.className ? d.className : '-'}`,
+          `${d.address ? d.address : '-'}`,
+          `${d.workUnit ? d.workUnit : '-'}`,
+          `${d.position ? d.position : '-'}`,
+          `${d.createTime}`
+        ]);
+      });
+      const sheetName = `导出捐款记录${dayjs(new Date()).format('YYYYMMDD')}`;
+      const workbook = {
+        SheetNames: [sheetName],
+        Sheets: {}
+      };
+      const sheet = utils.aoa_to_sheet(array);
+      workbook.Sheets[sheetName] = sheet;
+      // 设置列宽
+      sheet['!cols'] = [
+        {wch: 10},
+        {wch: 40},
+        {wch: 20},
+        {wch: 20},
+        {wch: 60},
+        {wch: 15},
+        {wch: 10},
+        {wch: 10},
+        {wch: 20},
+        {wch: 10},
+        {wch: 20}
+      ];
+      message.loading('正在导出...');
+      setTimeout(() => {
+        writeFile(
+          workbook,
+          `${
+            where.createTimeEnd ? xlsFileName.value + '_' : ''
+          }${sheetName}.xlsx`
+        );
+        loading.value = false;
+      }, 1000);
+    })
+    .catch((msg) => {
+      message.error(msg);
+      loading.value = false;
+    })
+    .finally(() => {
+    });
+
+};
+
+getGradeList();
+
+watch(
+  () => props.totalPriceAmount,
+  (totalPriceAmount) => {
+    console.log(totalPriceAmount, 'totalPriceAmount')
+  }
+);
+</script>
diff --git a/src/views/bsyx/bsyxPay/index.vue b/src/views/bsyx/bsyxPay/index.vue
new file mode 100644
index 0000000..7c9ab08
--- /dev/null
+++ b/src/views/bsyx/bsyxPay/index.vue
@@ -0,0 +1,336 @@
+<template>
+  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
+    <template #extra>
+      <Extra/>
+    </template>
+    <a-card :bordered="false" :body-style="{ padding: '16px' }">
+      <ele-pro-table
+        ref="tableRef"
+        row-key="id"
+        :columns="columns"
+        :datasource="datasource"
+        :customRow="customRow"
+        :parse-data="parseData"
+        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 === 'name'">
+            <div @click="onSearch(record)" class="cursor-pointer">{{ record.name || '匿名' }}</div>
+          </template>
+          <template v-if="column.key === 'phone'">
+            <div v-if="record.mobile" class="text-gray-400">{{ record.mobile }}</div>
+            <div v-else class="text-gray-600">{{ record.phone }}</div>
+          </template>
+          <template v-if="column.key === 'image'">
+            <a-image :src="record.image" :width="50"/>
+          </template>
+          <template v-if="column.key === 'sex'">
+            <a-tag v-if="record.sex === 1">男</a-tag>
+            <a-tag v-if="record.sex === 2">女</a-tag>
+          </template>
+          <template v-if="column.key === 'present'">
+            <a-tag v-if="record.present">能</a-tag>
+            <a-tag v-else>不能</a-tag>
+          </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>
+        <template #footer>
+          <span v-if="totalPriceAmount" class="text-red-500 font-bold">小计：￥{{ totalPriceAmount.toFixed(2) }}</span>
+        </template>
+      </ele-pro-table>
+    </a-card>
+
+    <!-- 编辑弹窗 -->
+    <BszxPayEdit 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 type {
+  DatasourceFunction,
+  ColumnItem
+} from 'ele-admin-pro/es/ele-pro-table/types';
+import Search from './components/search.vue';
+import BszxPayEdit from './components/bszxPayEdit.vue';
+import {pageBszxPay, removeBszxPay, removeBatchBszxPay} from '@/api/bszx/bszxPay';
+import type {BszxPay, BszxPayParam} from '@/api/bszx/bszxPay/model';
+import {getPageTitle} from "@/utils/common";
+import Extra from "@/views/bsyx/extra.vue";
+import {PageResult} from "@/api";
+
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+// 表格选中数据
+const selection = ref<BszxPay[]>([]);
+// 当前编辑数据
+const current = ref<BszxPay | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 是否显示批量移动弹窗
+const showMove = ref(false);
+// 加载状态
+const loading = ref(true);
+const totalPriceAmount = ref<number>(0);
+
+// 表格数据源
+const datasource: DatasourceFunction = ({
+                                          page,
+                                          limit,
+                                          where,
+                                          orders,
+                                          filters
+                                        }) => {
+  if (filters) {
+    where.status = filters.status;
+  }
+  return pageBszxPay({
+    ...where,
+    ...orders,
+    page,
+    limit
+  });
+};
+
+// 整理数据
+const parseData = (data: PageResult<BszxPay>) => {
+  totalPriceAmount.value = 0;
+  data.list?.map((item) => {
+    if(item.price){
+      totalPriceAmount.value += Number(item.price)
+    }
+  })
+  return data;
+};
+
+// 表格列配置
+const columns = ref<ColumnItem[]>([
+  {
+    title: '订单编号',
+    dataIndex: 'orderNo',
+    key: 'orderNo',
+    align: 'center',
+    width: 200,
+  },
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '手机号码',
+    dataIndex: 'phone',
+    key: 'phone',
+    align: 'center',
+    width: 120
+  },
+  {
+    title: '捐款金额',
+    dataIndex: 'price',
+    key: 'price',
+    width: 120,
+    align: 'center',
+    sorter: true,
+    customRender: ({text}) => '￥' + text
+  },
+  {
+    title: '性别',
+    dataIndex: 'sex',
+    key: 'sex',
+    align: 'center',
+    customRender: ({text}) => ['', '男', '女'][text]
+  },
+  {
+    title: '分部',
+    dataIndex: 'branchName',
+    key: 'branchName',
+    align: 'center',
+  },
+  {
+    title: '年级',
+    dataIndex: 'gradeName',
+    key: 'gradeName',
+    align: 'center',
+  },
+  {
+    title: '班级',
+    dataIndex: 'className',
+    key: 'className',
+    align: 'center',
+  },
+  {
+    title: '居住地址',
+    dataIndex: 'address',
+    key: 'address',
+    align: 'center',
+  },
+  {
+    title: '工作单位',
+    dataIndex: 'workUnit',
+    key: 'workUnit',
+    align: 'center',
+  },
+  {
+    title: '职务',
+    dataIndex: 'position',
+    key: 'position',
+    align: 'center',
+  },
+  // {
+  //   title: '捐赠证书',
+  //   dataIndex: 'certificate',
+  //   key: 'certificate',
+  //   align: 'center',
+  // },
+  {
+    title: '心愿',
+    dataIndex: 'comments',
+    key: 'comments',
+    align: 'center',
+  },
+  // {
+  //   title: '状态',
+  //   dataIndex: 'status',
+  //   key: 'status',
+  //   align: 'center',
+  // },
+  {
+    title: '捐款时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    align: 'center',
+    width: 180,
+    sorter: true,
+    ellipsis: true
+  },
+  // {
+  //   title: '操作',
+  //   key: 'action',
+  //   width: 180,
+  //   fixed: 'right',
+  //   align: 'center',
+  //   hideInSetting: true
+  // }
+]);
+
+/* 搜索 */
+const reload = (where?: BszxPayParam) => {
+  selection.value = [];
+  tableRef?.value?.reload({where: where});
+};
+
+const onSearch = (item: BszxPay) => {
+  reload({userId: item.userId})
+}
+
+/* 打开编辑弹窗 */
+const openEdit = (row?: BszxPay) => {
+  current.value = row ?? null;
+  showEdit.value = true;
+};
+
+/* 打开批量移动弹窗 */
+const openMove = () => {
+  showMove.value = true;
+};
+
+/* 删除单个 */
+const remove = (row: BszxPay) => {
+  const hide = message.loading('请求中..', 0);
+  removeBszxPay(row.id)
+    .then((msg) => {
+      hide();
+      message.success(msg);
+      reload();
+    })
+    .catch((e) => {
+      hide();
+      message.error(e.message);
+    });
+};
+
+/* 批量删除 */
+const removeBatch = () => {
+  if (!selection.value.length) {
+    message.error('请至少选择一条数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除选中的记录吗?',
+    icon: createVNode(ExclamationCircleOutlined),
+    maskClosable: true,
+    onOk: () => {
+      const hide = message.loading('请求中..', 0);
+      removeBatchBszxPay(selection.value.map((d) => d.id))
+        .then((msg) => {
+          hide();
+          message.success(msg);
+          reload();
+        })
+        .catch((e) => {
+          hide();
+          message.error(e.message);
+        });
+    }
+  });
+};
+
+/* 查询 */
+const query = () => {
+  loading.value = true;
+};
+
+/* 自定义行属性 */
+const customRow = (record: BszxPay) => {
+  return {
+    // 行点击事件
+    onClick: () => {
+      // console.log(record);
+    },
+    // 行双击事件
+    onDblclick: () => {
+      // openEdit(record);
+    }
+  };
+};
+query();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'BszxPay'
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/bsyx/bsyxPayRanking/components/bszxPayRankingEdit.vue b/src/views/bsyx/bsyxPayRanking/components/bszxPayRankingEdit.vue
new file mode 100644
index 0000000..bf1a27d
--- /dev/null
+++ b/src/views/bsyx/bsyxPayRanking/components/bszxPayRankingEdit.vue
@@ -0,0 +1,220 @@
+<!-- 编辑弹窗 -->
+<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="来源表ID（项目名称）" name="formId">
+        <a-input
+          allow-clear
+          placeholder="请输入来源表ID（项目名称）"
+          v-model:value="form.formId"
+        />
+      </a-form-item>
+      <a-form-item label="数量" name="number">
+        <a-input
+          allow-clear
+          placeholder="请输入数量"
+          v-model:value="form.number"
+        />
+      </a-form-item>
+      <a-form-item label="获得捐款总金额" name="totalPrice">
+        <a-input
+          allow-clear
+          placeholder="请输入获得捐款总金额"
+          v-model:value="form.totalPrice"
+        />
+      </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冻结" 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>
+  </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 { addBszxPayRanking, updateBszxPayRanking } from '@/api/bszx/bszxPayRanking';
+  import { BszxPayRanking } from '@/api/bszx/bszxPayRanking/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?: BszxPayRanking | 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<BszxPayRanking>({
+    id: undefined,
+    formId: undefined,
+    number: undefined,
+    totalPrice: undefined,
+    sortNumber: undefined,
+    comments: undefined,
+    status: undefined,
+    deleted: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    bszxPayRankingId: undefined,
+    bszxPayRankingName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bszxPayRankingName: [
+      {
+        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 ? updateBszxPayRanking : addBszxPayRanking;
+        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/bsyx/bsyxPayRanking/components/search.vue b/src/views/bsyx/bsyxPayRanking/components/search.vue
new file mode 100644
index 0000000..c35d491
--- /dev/null
+++ b/src/views/bsyx/bsyxPayRanking/components/search.vue
@@ -0,0 +1,69 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-range-picker
+      v-model:value="dateRange"
+      @change="search"
+      value-format="YYYY-MM-DD"
+    />
+    <a-tooltip title="获得捐款总金额" class="flex px-4">
+      <span class="text-gray-400">捐款总金额：</span>
+      <span class="text-gray-700 font-bold">￥{{ formatNumber(totalPriceAmount) }}</span>
+    </a-tooltip>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import useSearch from "@/utils/use-search";
+  import { watch,ref } from 'vue';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import {BszxPayRankingParam} from "@/api/bszx/bszxPayRanking/model";
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+      totalPriceAmount?: number;
+    }>(),
+    {}
+  );
+
+  // 日期范围选择
+  const dateRange = ref<[string, string]>(['', '']);
+
+  const emit = defineEmits<{
+    (e: 'search', where?: BszxPayRankingParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 表单数据
+  const {where,resetFields} = useSearch<BszxPayRankingParam>({
+    id: undefined,
+    userId: undefined,
+    createTimeStart: undefined,
+    createTimeEnd: undefined,
+    keywords: ''
+  });
+
+  /* 搜索 */
+  const search = () => {
+    const [d1, d2] = dateRange.value ?? [];
+    emit('search', {
+      ...where,
+      createTimeStart: d1 ? d1 + ' 00:00:00' : '',
+      createTimeEnd: d2 ? d2 + ' 23:59:59' : ''
+    });
+  };
+
+  const onSearch = (text: string) => {
+    where.sceneType = text
+    search();
+  }
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
diff --git a/src/views/bsyx/bsyxPayRanking/index.vue b/src/views/bsyx/bsyxPayRanking/index.vue
new file mode 100644
index 0000000..3702292
--- /dev/null
+++ b/src/views/bsyx/bsyxPayRanking/index.vue
@@ -0,0 +1,223 @@
+<template>
+  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
+    <template #extra>
+      <Extra/>
+    </template>
+    <a-card :bordered="false" :body-style="{ padding: '16px' }">
+      <ele-pro-table
+        ref="tableRef"
+        row-key="id"
+        :columns="columns"
+        :datasource="datasource"
+        :customRow="customRow"
+        tool-class="ele-toolbar-form"
+        class="sys-org-table"
+      >
+        <template #toolbar>
+          <search
+            @search="reload"
+            :selection="selection"
+            :totalPriceAmount="totalPriceAmount.toFixed(2)"
+            @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>
+
+    <!-- 编辑弹窗 -->
+    <BszxPayRankingEdit 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 type {
+  DatasourceFunction,
+  ColumnItem
+} from 'ele-admin-pro/es/ele-pro-table/types';
+import Search from './components/search.vue';
+import BszxPayRankingEdit from './components/bszxPayRankingEdit.vue';
+import {removeBszxPayRanking, removeBatchBszxPayRanking, ranking} from '@/api/bszx/bszxPayRanking';
+import type {BszxPayRanking, BszxPayRankingParam} from '@/api/bszx/bszxPayRanking/model';
+import {getPageTitle} from "@/utils/common";
+import Extra from "@/views/bsyx/extra.vue";
+
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+// 表格选中数据
+const selection = ref<BszxPayRanking[]>([]);
+// 当前编辑数据
+const current = ref<BszxPayRanking | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 是否显示批量移动弹窗
+const showMove = ref(false);
+// 加载状态
+const loading = ref(true);
+// 合计总金额
+const totalPriceAmount = ref<number>(0);
+
+// 表格数据源
+const datasource: DatasourceFunction = ({where}) => {
+  return ranking({...where}).then(data => {
+    totalPriceAmount.value = 0;
+    data.map((item) => {
+      if (item.totalPrice) {
+        totalPriceAmount.value += item.totalPrice
+      }
+    })
+    return data;
+  });
+};
+
+// 表格列配置
+const columns = ref<ColumnItem[]>([
+  {
+    key: 'index',
+    width: 48,
+    align: 'center',
+    fixed: 'left',
+    hideInSetting: true,
+    customRender: ({index}) => index + (tableRef.value?.tableIndex ?? 0)
+  },
+  {
+    title: '项目名称',
+    dataIndex: 'formName',
+    key: 'formName'
+  },
+  {
+    title: '捐款人数',
+    dataIndex: 'number',
+    key: 'number',
+    align: 'center',
+  },
+  {
+    title: '获得捐款总金额',
+    dataIndex: 'totalPrice',
+    key: 'totalPrice',
+    align: 'center',
+  }
+  // {
+  //   title: '操作',
+  //   key: 'action',
+  //   width: 180,
+  //   fixed: 'right',
+  //   align: 'center',
+  //   hideInSetting: true
+  // }
+]);
+
+/* 搜索 */
+const reload = (where?: BszxPayRankingParam) => {
+  selection.value = [];
+  tableRef?.value?.reload({where: where});
+};
+
+/* 打开编辑弹窗 */
+const openEdit = (row?: BszxPayRanking) => {
+  current.value = row ?? null;
+  showEdit.value = true;
+};
+
+/* 打开批量移动弹窗 */
+const openMove = () => {
+  showMove.value = true;
+};
+
+/* 删除单个 */
+const remove = (row: BszxPayRanking) => {
+  const hide = message.loading('请求中..', 0);
+  removeBszxPayRanking(row.bszxPayRankingId)
+    .then((msg) => {
+      hide();
+      message.success(msg);
+      reload();
+    })
+    .catch((e) => {
+      hide();
+      message.error(e.message);
+    });
+};
+
+/* 批量删除 */
+const removeBatch = () => {
+  if (!selection.value.length) {
+    message.error('请至少选择一条数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除选中的记录吗?',
+    icon: createVNode(ExclamationCircleOutlined),
+    maskClosable: true,
+    onOk: () => {
+      const hide = message.loading('请求中..', 0);
+      removeBatchBszxPayRanking(selection.value.map((d) => d.bszxPayRankingId))
+        .then((msg) => {
+          hide();
+          message.success(msg);
+          reload();
+        })
+        .catch((e) => {
+          hide();
+          message.error(e.message);
+        });
+    }
+  });
+};
+
+/* 查询 */
+const query = () => {
+  loading.value = true;
+};
+
+/* 自定义行属性 */
+const customRow = (record: BszxPayRanking) => {
+  return {
+    // 行点击事件
+    onClick: () => {
+      // console.log(record);
+    },
+    // 行双击事件
+    onDblclick: () => {
+      openEdit(record);
+    }
+  };
+};
+query();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'BszxPayRanking'
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/bsyx/extra.vue b/src/views/bsyx/extra.vue
new file mode 100644
index 0000000..a178ce5
--- /dev/null
+++ b/src/views/bsyx/extra.vue
@@ -0,0 +1,60 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space style="flex-wrap: wrap" v-if="hasRole('superAdmin') || hasRole('admin') || hasRole('foundation')">
+    <a-button
+      type="text"
+      @click="openUrl('/bsyx/ranking')"
+    >捐款排行榜
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+import {watch,nextTick} from 'vue';
+import {CmsWebsite} from '@/api/cms/cmsWebsite/model';
+import {openUrl} from "@/utils/common";
+import {message} from 'ant-design-vue';
+import {removeSiteInfoCache} from "@/api/cms/cmsWebsite";
+import {hasRole} from "@/utils/permission";
+
+const props = withDefaults(
+  defineProps<{
+    // 选中的角色
+    selection?: [];
+    website?: CmsWebsite;
+    count?: 0;
+  }>(),
+  {}
+);
+
+const emit = defineEmits<{
+  (e: 'add'): void;
+}>();
+
+const add = () => {
+  emit('add');
+};
+
+// 清除缓存
+const clearSiteInfoCache = () => {
+  removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId') + "*").then(
+    (msg) => {
+      if (msg) {
+        message.success(msg);
+      }
+    }
+  );
+};
+
+nextTick(() => {
+  if(localStorage.getItem('NotActive')){
+    // IsActive.value = false
+  }
+})
+
+watch(
+  () => props.selection,
+  () => {
+  }
+);
+</script>
diff --git a/src/views/cms/cmsArticle/index.vue b/src/views/cms/cmsArticle/index.vue
index f82b331..c218eaf 100644
--- a/src/views/cms/cmsArticle/index.vue
+++ b/src/views/cms/cmsArticle/index.vue
@@ -26,30 +26,14 @@
         </template>
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'title'">
-            <a
-              class="cursor-pointer text-black"
-              :href="detail(record)"
-              target="_blank"
-              >{{ record.title }}</a
-            >
+            <span class="text-black">{{ record.title }}</span>
           </template>
           <template v-if="column.key === 'categoryName'">
             <a-tooltip>
               <template #title>
                 {{ record.categoryId }}
               </template>
-              <a
-                class="text-gray-400"
-                :href="
-                  navTo(
-                    record,
-                    `/${record.model}/${record.categoryId}.html`,
-                    true
-                  )
-                "
-                target="_blank"
-                >{{ record.categoryName }}</a
-              >
+              <span class="text-gray-400">{{ record.categoryName }}</span>
             </a-tooltip>
           </template>
           <template v-if="column.key === 'type'">
@@ -74,22 +58,22 @@
               :color="record.status == 0 ? 'green' : 'red'"
               class="cursor-pointer"
               @click="onUpdate(record)"
-              >{{ record.statusText }}
+            >{{ record.statusText }}
             </a-tag>
           </template>
           <template v-if="column.key === 'recommend'">
             <a-space @click="onRecommend(record)">
               <span v-if="record.recommend === 1" class="ele-text-success"
-                ><CheckOutlined
+              ><CheckOutlined
               /></span>
-              <span v-else class="ele-text-placeholder"><CloseOutlined /></span>
+              <span v-else class="ele-text-placeholder"><CloseOutlined/></span>
             </a-space>
           </template>
           <template v-if="column.key === 'action'">
             <a @click="onShare(record)">预览</a>
-            <a-divider type="vertical" />
+            <a-divider type="vertical"/>
             <a @click="openEdit(record)">修改</a>
-            <a-divider type="vertical" />
+            <a-divider type="vertical"/>
             <a-popconfirm
               title="确定要删除此记录吗？"
               @confirm="remove(record)"
@@ -129,356 +113,356 @@
 </template>
 
 <script lang="ts" setup>
-  import { createVNode, ref, watch } from 'vue';
-  import { message, Modal } from 'ant-design-vue';
-  import { useI18n } from 'vue-i18n';
-  import {
-    CheckOutlined,
-    CloseOutlined,
-    ExclamationCircleOutlined
-  } from '@ant-design/icons-vue';
-  import type { EleProTable } from 'ele-admin-pro';
-  import type {
-    DatasourceFunction,
-    ColumnItem
-  } from 'ele-admin-pro/es/ele-pro-table/types';
-  import Search from './components/search.vue';
-  import ArticleEdit from './components/articleEdit.vue';
-  import ArticleUpdate from './components/articleUpdate.vue';
-  import {
-    pageCmsArticle,
-    removeCmsArticle,
-    removeBatchCmsArticle,
-    updateCmsArticle
-  } from '@/api/cms/cmsArticle';
-  import type { CmsArticle, CmsArticleParam } from '@/api/cms/cmsArticle/model';
-  import { formatNumber } from 'ele-admin-pro/es';
-  import router from '@/router';
-  import { toTreeData } from 'ele-admin-pro';
-  import { toDateString } from 'ele-admin-pro';
-  import {
-    detail,
-    getPageTitle,
-    navTo
-  } from '@/utils/common';
-  import { listCmsNavigation } from '@/api/cms/cmsNavigation';
-  import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
-  import { CmsArticleCategory } from '@/api/cms/cmsArticleCategory/model';
-  import { listCmsArticleCategory } from '@/api/cms/cmsArticleCategory';
-  import Qrcode from '@/components/QrCode/index.vue';
-  import { getCmsWebsiteSetting } from '@/api/cms/cmsWebsiteSetting';
-  import { useWebsiteSettingStore } from '@/store/modules/setting';
+import {createVNode, ref, watch} from 'vue';
+import {message, Modal} from 'ant-design-vue';
+import {useI18n} from 'vue-i18n';
+import {
+  CheckOutlined,
+  CloseOutlined,
+  ExclamationCircleOutlined
+} from '@ant-design/icons-vue';
+import type {EleProTable} from 'ele-admin-pro';
+import type {
+  DatasourceFunction,
+  ColumnItem
+} from 'ele-admin-pro/es/ele-pro-table/types';
+import Search from './components/search.vue';
+import ArticleEdit from './components/articleEdit.vue';
+import ArticleUpdate from './components/articleUpdate.vue';
+import {
+  pageCmsArticle,
+  removeCmsArticle,
+  removeBatchCmsArticle,
+  updateCmsArticle
+} from '@/api/cms/cmsArticle';
+import type {CmsArticle, CmsArticleParam} from '@/api/cms/cmsArticle/model';
+import {formatNumber} from 'ele-admin-pro/es';
+import router from '@/router';
+import {toTreeData} from 'ele-admin-pro';
+import {toDateString} from 'ele-admin-pro';
+import {
+  detail,
+  getPageTitle,
+  navTo
+} from '@/utils/common';
+import {listCmsNavigation} from '@/api/cms/cmsNavigation';
+import {CmsNavigation} from '@/api/cms/cmsNavigation/model';
+import {CmsArticleCategory} from '@/api/cms/cmsArticleCategory/model';
+import {listCmsArticleCategory} from '@/api/cms/cmsArticleCategory';
+import Qrcode from '@/components/QrCode/index.vue';
+import {getCmsWebsiteSetting} from '@/api/cms/cmsWebsiteSetting';
+import {useWebsiteSettingStore} from '@/store/modules/setting';
 
-  // 表格实例
-  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
-  // 国际化
-  const { locale } = useI18n();
-  // 表格选中数据
-  const selection = ref<CmsArticle[]>([]);
-  // 当前编辑数据
-  const current = ref<CmsArticle | null>(null);
-  // 是否显示编辑弹窗
-  const showEdit = ref(false);
-  // 是否显示批量移动弹窗
-  const showMove = ref(false);
-  // 店铺ID
-  const merchantId = ref<number>();
-  // 栏目ID
-  const categoryId = ref<number>();
-  // 栏目数据
-  const navigationList = ref<CmsNavigation[]>();
-  // 文章分类
-  const categoryList = ref<CmsArticleCategory[]>();
-  // 是否显示二维码
-  const showQrcode = ref(false);
-  // 网站设置信息
-  const setting = useWebsiteSettingStore();
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+// 国际化
+const {locale} = useI18n();
+// 表格选中数据
+const selection = ref<CmsArticle[]>([]);
+// 当前编辑数据
+const current = ref<CmsArticle | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 是否显示批量移动弹窗
+const showMove = ref(false);
+// 店铺ID
+const merchantId = ref<number>();
+// 栏目ID
+const categoryId = ref<number>();
+// 栏目数据
+const navigationList = ref<CmsNavigation[]>();
+// 文章分类
+const categoryList = ref<CmsArticleCategory[]>();
+// 是否显示二维码
+const showQrcode = ref(false);
+// 网站设置信息
+const setting = useWebsiteSettingStore();
 
-  // 表格数据源
-  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
-    if (categoryId.value) {
-      where.categoryId = categoryId.value;
-    }
-    where.lang = locale.value || undefined;
-    return pageCmsArticle({
-      ...where,
-      ...orders,
-      page,
-      limit
-    });
-  };
+// 表格数据源
+const datasource: DatasourceFunction = ({page, limit, where, orders}) => {
+  if (categoryId.value) {
+    where.categoryId = categoryId.value;
+  }
+  where.lang = locale.value || undefined;
+  return pageCmsArticle({
+    ...where,
+    ...orders,
+    page,
+    limit
+  });
+};
 
-  // 表格列配置
-  const columns = ref<ColumnItem[]>([
-    // {
-    //   title: 'ID',
-    //   dataIndex: 'articleId',
-    //   key: 'articleId',
-    //   align: 'center',
-    //   width: 90
-    // },
-    {
-      title: '封面图',
-      dataIndex: 'image',
-      key: 'image',
-      width: 120,
-      align: 'center'
-    },
-    {
-      title: '文章标题',
-      dataIndex: 'title',
-      key: 'title'
-    },
-    {
-      title: '栏目名称',
-      dataIndex: 'categoryName',
-      key: 'categoryName',
-      width: 120,
-      align: 'center'
-    },
-    {
-      title: '所属栏目',
-      dataIndex: 'categoryId',
-      key: 'categoryId',
-      align: 'center',
-      hideInTable: true
-    },
-    {
-      title: '实际阅读量',
-      dataIndex: 'actualViews',
-      key: 'actualViews',
-      sorter: true,
-      width: 120,
-      align: 'center'
-    },
-    {
-      title: '虚拟阅读量',
-      dataIndex: 'virtualViews',
-      key: 'virtualViews',
-      width: 120,
-      align: 'center',
-      hideInTable: true
-    },
-    {
-      title: '推荐',
-      dataIndex: 'recommend',
-      key: 'recommend',
-      sorter: true,
-      width: 120,
-      align: 'center'
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      key: 'status',
-      sorter: true,
-      width: 120,
-      align: 'center'
-    },
-    {
-      title: '排序号',
-      dataIndex: 'sortNumber',
-      key: 'sortNumber',
-      sorter: true,
-      width: 120,
-      align: 'center'
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createTime',
-      key: 'createTime',
-      align: 'center',
-      width: 180,
-      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd'),
-      sorter: true
-    },
-    {
-      title: '操作',
-      key: 'action',
-      width: 180,
-      fixed: 'right',
-      align: 'center',
-      hideInSetting: true
-    }
-  ]);
+// 表格列配置
+const columns = ref<ColumnItem[]>([
+  // {
+  //   title: 'ID',
+  //   dataIndex: 'articleId',
+  //   key: 'articleId',
+  //   align: 'center',
+  //   width: 90
+  // },
+  {
+    title: '封面图',
+    dataIndex: 'image',
+    key: 'image',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '文章标题',
+    dataIndex: 'title',
+    key: 'title'
+  },
+  {
+    title: '栏目名称',
+    dataIndex: 'categoryName',
+    key: 'categoryName',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '所属栏目',
+    dataIndex: 'categoryId',
+    key: 'categoryId',
+    align: 'center',
+    hideInTable: true
+  },
+  {
+    title: '实际阅读量',
+    dataIndex: 'actualViews',
+    key: 'actualViews',
+    sorter: true,
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '虚拟阅读量',
+    dataIndex: 'virtualViews',
+    key: 'virtualViews',
+    width: 120,
+    align: 'center',
+    hideInTable: true
+  },
+  {
+    title: '推荐',
+    dataIndex: 'recommend',
+    key: 'recommend',
+    sorter: true,
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    sorter: true,
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '排序号',
+    dataIndex: 'sortNumber',
+    key: 'sortNumber',
+    sorter: true,
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    align: 'center',
+    width: 180,
+    customRender: ({text}) => toDateString(text, 'yyyy-MM-dd'),
+    sorter: true
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 180,
+    fixed: 'right',
+    align: 'center',
+    hideInSetting: true
+  }
+]);
 
-  /* 搜索 */
-  const reload = (where?: CmsArticleParam) => {
-    selection.value = [];
-    tableRef?.value?.reload({ where: where });
-  };
+/* 搜索 */
+const reload = (where?: CmsArticleParam) => {
+  selection.value = [];
+  tableRef?.value?.reload({where: where});
+};
 
-  /* 打开编辑弹窗 */
-  const openEdit = (row?: CmsArticle) => {
-    current.value = row ?? null;
-    showEdit.value = true;
-  };
+/* 打开编辑弹窗 */
+const openEdit = (row?: CmsArticle) => {
+  current.value = row ?? null;
+  showEdit.value = true;
+};
 
-  /* 打开批量移动弹窗 */
-  const openMove = () => {
-    showMove.value = true;
-  };
+/* 打开批量移动弹窗 */
+const openMove = () => {
+  showMove.value = true;
+};
 
-  // 分享二维码
-  const onShare = (row?: CmsArticle) => {
-    const data = {
-      isMobile: true,
-      ...row
-    };
-    data.qrcode = `${detail(data)}`;
-    data.url = `${detail(row)}`;
-    current.value = data ?? null;
-    showQrcode.value = true;
+// 分享二维码
+const onShare = (row?: CmsArticle) => {
+  const data = {
+    isMobile: true,
+    ...row
   };
+  data.qrcode = `${detail(data)}`;
+  data.url = `${detail(row)}`;
+  current.value = data ?? null;
+  showQrcode.value = true;
+};
 
-  const hideShare = () => {
-    showQrcode.value = false;
-  };
+const hideShare = () => {
+  showQrcode.value = false;
+};
 
-  const onUpdate = (row?: CmsArticle) => {
-    const status = row?.status == 0 ? 1 : 0;
-    updateCmsArticle({ ...row, status }).then((msg) => {
-      message.success(msg);
-      reload();
-    });
-  };
+const onUpdate = (row?: CmsArticle) => {
+  const status = row?.status == 0 ? 1 : 0;
+  updateCmsArticle({...row, status}).then((msg) => {
+    message.success(msg);
+    reload();
+  });
+};
 
-  const onRecommend = (row: CmsArticle) => {
-    updateCmsArticle({
-      ...row,
-      recommend: row.recommend == 1 ? 0 : 1
-    }).then((msg) => {
+const onRecommend = (row: CmsArticle) => {
+  updateCmsArticle({
+    ...row,
+    recommend: row.recommend == 1 ? 0 : 1
+  }).then((msg) => {
+    message.success(msg);
+    reload();
+  });
+};
+
+/* 删除单个 */
+const remove = (row: CmsArticle) => {
+  const hide = message.loading('请求中..', 0);
+  removeCmsArticle(row.articleId)
+    .then((msg) => {
+      hide();
       message.success(msg);
       reload();
+    })
+    .catch((e) => {
+      hide();
+      message.error(e.message);
     });
-  };
-
-  /* 删除单个 */
-  const remove = (row: CmsArticle) => {
-    const hide = message.loading('请求中..', 0);
-    removeCmsArticle(row.articleId)
-      .then((msg) => {
-        hide();
-        message.success(msg);
-        reload();
-      })
-      .catch((e) => {
-        hide();
-        message.error(e.message);
-      });
-  };
+};
 
-  /* 批量删除 */
-  const removeBatch = () => {
-    if (!selection.value.length) {
-      message.error('请至少选择一条数据');
-      return;
+/* 批量删除 */
+const removeBatch = () => {
+  if (!selection.value.length) {
+    message.error('请至少选择一条数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除选中的记录吗?',
+    icon: createVNode(ExclamationCircleOutlined),
+    maskClosable: true,
+    onOk: () => {
+      const hide = message.loading('请求中..', 0);
+      removeBatchCmsArticle(selection.value.map((d) => d.articleId))
+        .then((msg) => {
+          hide();
+          message.success(msg);
+          reload();
+        })
+        .catch((e) => {
+          hide();
+          message.error(e.message);
+        });
     }
-    Modal.confirm({
-      title: '提示',
-      content: '确定要删除选中的记录吗?',
-      icon: createVNode(ExclamationCircleOutlined),
-      maskClosable: true,
-      onOk: () => {
-        const hide = message.loading('请求中..', 0);
-        removeBatchCmsArticle(selection.value.map((d) => d.articleId))
-          .then((msg) => {
-            hide();
-            message.success(msg);
-            reload();
-          })
-          .catch((e) => {
-            hide();
-            message.error(e.message);
-          });
-      }
-    });
-  };
+  });
+};
 
-  /* 自定义行属性 */
-  const customRow = (record: CmsArticle) => {
-    return {
-      // 行点击事件
-      onClick: () => {
-        // console.log(record);
-      },
-      // 行双击事件
-      onDblclick: () => {
-        openEdit(record);
-      }
-    };
+/* 自定义行属性 */
+const customRow = (record: CmsArticle) => {
+  return {
+    // 行点击事件
+    onClick: () => {
+      // console.log(record);
+    },
+    // 行双击事件
+    onDblclick: () => {
+      openEdit(record);
+    }
   };
+};
 
-  // 加载栏目数据
-  if (!navigationList.value) {
-    listCmsNavigation({
-      lang: localStorage.getItem('i18n-lang') || undefined
-    }).then((res) => {
-      navigationList.value = toTreeData({
-        data: res?.map((d) => {
-          d.value = d.navigationId;
-          d.label = d.title;
-          if (!d.component) {
-            d.disabled = true;
-          }
-          if (
-            d.model == 'index' ||
-            d.model == 'page' ||
-            d.model == 'order' ||
-            d.model == 'links'
-          ) {
-            d.disabled = true;
-          }
-          return d;
-        }),
-        idField: 'navigationId',
-        parentIdField: 'parentId'
-      });
+// 加载栏目数据
+if (!navigationList.value) {
+  listCmsNavigation({
+    lang: localStorage.getItem('i18n-lang') || undefined
+  }).then((res) => {
+    navigationList.value = toTreeData({
+      data: res?.map((d) => {
+        d.value = d.navigationId;
+        d.label = d.title;
+        if (!d.component) {
+          d.disabled = true;
+        }
+        if (
+          d.model == 'index' ||
+          d.model == 'page' ||
+          d.model == 'order' ||
+          d.model == 'links'
+        ) {
+          d.disabled = true;
+        }
+        return d;
+      }),
+      idField: 'navigationId',
+      parentIdField: 'parentId'
     });
-  }
+  });
+}
 
-  // 加载文章分类
-  if (!categoryList.value) {
-    listCmsArticleCategory({}).then((res) => {
-      categoryList.value = toTreeData({
-        data: res?.map((d) => {
-          d.value = d.categoryId;
-          d.label = d.title;
-          return d;
-        }),
-        idField: 'categoryId',
-        parentIdField: 'parentId'
-      });
+// 加载文章分类
+if (!categoryList.value) {
+  listCmsArticleCategory({}).then((res) => {
+    categoryList.value = toTreeData({
+      data: res?.map((d) => {
+        d.value = d.categoryId;
+        d.label = d.title;
+        return d;
+      }),
+      idField: 'categoryId',
+      parentIdField: 'parentId'
     });
-  }
+  });
+}
 
-  const getSetting = () => {
-    // 网站设置信息
-    getCmsWebsiteSetting(Number(localStorage.getItem('WebsiteId'))).then(
-      (res) => {
-        if (res.editor) {
-          setting.value = res;
-          localStorage.setItem('Editor', res.editor);
-        }
-      }
-    );
-  };
-
-  watch(
-    () => router.currentRoute.value.query,
-    (query) => {
-      if (query) {
-        categoryId.value = Number(query.id);
-        getSetting();
-        reload();
+const getSetting = () => {
+  // 网站设置信息
+  getCmsWebsiteSetting(Number(localStorage.getItem('WebsiteId'))).then(
+    (res) => {
+      if (res.editor) {
+        setting.value = res;
+        localStorage.setItem('Editor', res.editor);
       }
-    },
-    { immediate: true }
+    }
   );
+};
+
+watch(
+  () => router.currentRoute.value.query,
+  (query) => {
+    if (query) {
+      categoryId.value = Number(query.id);
+      getSetting();
+      reload();
+    }
+  },
+  {immediate: true}
+);
 </script>
 
 <script lang="ts">
-  export default {
-    name: 'CmsArticleV2'
-  };
+export default {
+  name: 'CmsArticleV2'
+};
 </script>
diff --git a/src/views/cms/cmsWebsite/components/websiteEdit.vue b/src/views/cms/cmsWebsite/components/websiteEdit.vue
index 19ec1e0..b668ae3 100644
--- a/src/views/cms/cmsWebsite/components/websiteEdit.vue
+++ b/src/views/cms/cmsWebsite/components/websiteEdit.vue
@@ -5,7 +5,7 @@
     :visible="visible"
     :maskClosable="false"
     :maxable="maxable"
-    :title="isUpdate ? '编辑网站' : '创建网站'"
+    :title="isUpdate ? '编辑小程序' : '创建小程序'"
     :body-style="{ paddingBottom: '28px' }"
     @update:visible="updateVisible"
     :confirm-loading="loading"
@@ -29,14 +29,14 @@
           @del="onDeleteItem"
         />
       </a-form-item>
-      <a-form-item label="网站名称" name="websiteName">
+      <a-form-item label="小程序名称" name="websiteName">
         <a-input
           allow-clear
-          placeholder="请输入网站名称"
+          placeholder="请输入小程序名称"
           v-model:value="form.websiteName"
         />
       </a-form-item>
-      <a-form-item label="网站域名" name="domain">
+      <a-form-item label="网站域名" name="domain" v-if="form.type  == 10">
         <a-input
           v-model:value="form.domain"
           placeholder="huawei.com"
@@ -49,11 +49,18 @@
           </template>
         </a-input>
       </a-form-item>
-      <a-form-item label="网站描述" name="comments">
+      <a-form-item label="AppId" name="websiteCode" v-if="form.type  == 20">
+        <a-input
+          allow-clear
+          placeholder="请输入AppId"
+          v-model:value="form.websiteCode"
+        />
+      </a-form-item>
+      <a-form-item label="小程序描述" name="comments">
         <a-textarea
           :rows="4"
           :maxlength="200"
-          placeholder="请输入网站描述"
+          placeholder="请输入小程序描述"
           v-model:value="form.comments"
         />
       </a-form-item>
@@ -65,36 +72,27 @@
           v-model:value="form.keywords"
         />
       </a-form-item>
-<!--      <a-form-item label="全局样式" name="style">-->
-<!--        <a-textarea-->
-<!--          :rows="4"-->
-<!--          :maxlength="200"-->
-<!--          placeholder="全局样式"-->
-<!--          v-model:value="form.style"-->
-<!--        />-->
-<!--      </a-form-item>-->
-<!--      <a-form-item :label="`网站截图`" name="files">-->
-<!--        <SelectFile-->
-<!--          :placeholder="`请上传网站预览图`"-->
-<!--          :limit="6"-->
-<!--          :data="files"-->
-<!--          @done="chooseFile"-->
-<!--          @del="onDeleteFile"-->
-<!--        />-->
-<!--      </a-form-item>-->
-<!--      <a-form-item label="网站类型" name="websiteType">-->
-<!--        <a-select-->
-<!--          :options="websiteType"-->
-<!--          :value="form.websiteType"-->
-<!--          placeholder="请选择主体类型"-->
-<!--          @change="onCmsWebsiteType"-->
-<!--        />-->
-<!--      </a-form-item>-->
-<!--      <a-form-item label="当前版本" name="version">-->
-<!--        <a-tag color="red" v-if="form.version === 10">标准版</a-tag>-->
-<!--        <a-tag color="green" v-if="form.version === 20">专业版</a-tag>-->
-<!--        <a-tag color="cyan" v-if="form.version === 30">永久授权</a-tag>-->
-<!--      </a-form-item>-->
+      <!--      <a-form-item label="全局样式" name="style">-->
+      <!--        <a-textarea-->
+      <!--          :rows="4"-->
+      <!--          :maxlength="200"-->
+      <!--          placeholder="全局样式"-->
+      <!--          v-model:value="form.style"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="小程序类型" name="websiteType">-->
+      <!--        <a-select-->
+      <!--          :options="websiteType"-->
+      <!--          :value="form.websiteType"-->
+      <!--          placeholder="请选择主体类型"-->
+      <!--          @change="onCmsWebsiteType"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="当前版本" name="version">-->
+      <!--        <a-tag color="red" v-if="form.version === 10">标准版</a-tag>-->
+      <!--        <a-tag color="green" v-if="form.version === 20">专业版</a-tag>-->
+      <!--        <a-tag color="cyan" v-if="form.version === 30">永久授权</a-tag>-->
+      <!--      </a-form-item>-->
       <a-form-item label="状态" name="running">
         <a-radio-group
           v-model:value="form.running"
@@ -119,282 +117,294 @@
 </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 { addCmsWebsite, updateCmsWebsite } from '@/api/cms/cmsWebsite';
-  import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
-  import { useThemeStore } from '@/store/modules/theme';
-  import { storeToRefs } from 'pinia';
-  import { FormInstance, type Rule } from 'ant-design-vue/es/form';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
-  import { FileRecord } from '@/api/system/file/model';
-  import { checkExistence } from '@/api/cms/cmsDomain';
-  import { updateCmsDomain } from '@/api/cms/cmsDomain';
-  import {updateTenant} from "@/api/system/tenant";
+import {ref, reactive, watch} from 'vue';
+import {Form, message} from 'ant-design-vue';
+import {assignObject, uuid} from 'ele-admin-pro';
+import {addCmsWebsite, updateCmsWebsite} from '@/api/cms/cmsWebsite';
+import {CmsWebsite} from '@/api/cms/cmsWebsite/model';
+import {useThemeStore} from '@/store/modules/theme';
+import {storeToRefs} from 'pinia';
+import {FormInstance, type Rule} from 'ant-design-vue/es/form';
+import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
+import {FileRecord} from '@/api/system/file/model';
+import {checkExistence} from '@/api/cms/cmsDomain';
+import {updateCmsDomain} from '@/api/cms/cmsDomain';
+import {updateTenant} from "@/api/system/tenant";
 
-  // 是否是修改
-  const isUpdate = ref(false);
-  const useForm = Form.useForm;
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const {styleResponsive} = storeToRefs(themeStore);
 
-  const props = defineProps<{
-    // 弹窗是否打开
-    visible: boolean;
-    // 修改回显的数据
-    data?: CmsWebsite | null;
-  }>();
+const props = defineProps<{
+  // 弹窗是否打开
+  visible: boolean;
+  // 修改回显的数据
+  data?: CmsWebsite | null;
+}>();
 
-  const emit = defineEmits<{
-    (e: 'done'): void;
-    (e: 'update:visible', visible: boolean): void;
-  }>();
+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 websiteQrcode = ref<ItemType[]>([]);
-  const oldDomain = ref();
-  const files = ref<ItemType[]>([]);
+// 提交状态
+const loading = ref(false);
+// 是否显示最大化切换按钮
+const maxable = ref(true);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);
+const images = ref<ItemType[]>([]);
+const websiteQrcode = ref<ItemType[]>([]);
+const oldDomain = ref();
+const files = ref<ItemType[]>([]);
 
-  // 用户信息
-  const form = reactive<CmsWebsite>({
-    websiteId: undefined,
-    websiteLogo: undefined,
-    websiteName: undefined,
-    websiteCode: undefined,
-    type: 20,
-    files: undefined,
-    keywords: '',
-    prefix: '',
-    domain: '',
-    adminUrl: '',
-    style: '',
-    icpNo: undefined,
-    email: undefined,
-    version: undefined,
-    websiteType: '',
-    running: 1,
-    expirationTime: undefined,
-    sortNumber: undefined,
-    comments: undefined,
-    status: undefined,
-    statusText: undefined
-  });
+// 用户信息
+const form = reactive<CmsWebsite>({
+  websiteId: undefined,
+  websiteLogo: undefined,
+  websiteName: undefined,
+  websiteCode: undefined,
+  type: 20,
+  files: undefined,
+  keywords: '',
+  prefix: '',
+  domain: '',
+  adminUrl: '',
+  style: '',
+  icpNo: undefined,
+  email: undefined,
+  version: undefined,
+  websiteType: '',
+  running: 1,
+  expirationTime: undefined,
+  sortNumber: undefined,
+  comments: undefined,
+  status: undefined,
+  statusText: undefined
+});
 
-  /* 更新visible */
-  const updateVisible = (value: boolean) => {
-    emit('update:visible', value);
-  };
+/* 更新visible */
+const updateVisible = (value: boolean) => {
+  emit('update:visible', value);
+};
 
-  // 表单验证规则
-  const rules = reactive({
-    // comments: [
-    //   {
-    //     required: true,
-    //     type: 'string',
-    //     message: '请填写网站描述',
-    //     trigger: 'blur'
-    //   }
-    // ],
-    keywords: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写SEO关键词',
-        trigger: 'blur'
-      }
-    ],
-    running: [
-      {
-        required: true,
-        type: 'number',
-        message: '请选择网站状态',
-        trigger: 'change'
-      }
-    ],
-    domain: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写网站域名',
-        trigger: 'blur'
-      }
-    ],
-    websiteCode: [
-      {
-        required: true,
-        type: 'string',
-        message: '该域名已被使用',
-        validator: (_rule: Rule, value: string) => {
-          return new Promise<void>((resolve, reject) => {
-            if (!value) {
-              return reject('请输入二级域名');
-            }
-            checkExistence('domain', `${value}.wsdns.cn`)
-              .then(() => {
-                if (value === oldDomain.value) {
-                  return resolve();
-                }
-                reject('已存在');
-              })
-              .catch(() => {
-                resolve();
-              });
-          });
-        },
-        trigger: 'blur'
-      }
-    ],
-    adminUrl: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写网站后台管理地址',
-        trigger: 'blur'
-      }
-    ],
-    icpNo: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写ICP备案号',
-        trigger: 'blur'
-      }
-    ],
-    appSecret: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写网站秘钥',
-        trigger: 'blur'
-      }
-    ],
-    websiteName: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写网站信息名称',
-        trigger: 'blur'
-      }
-    ]
-  });
+// 表单验证规则
+const rules = reactive({
+  // comments: [
+  //   {
+  //     required: true,
+  //     type: 'string',
+  //     message: '请填写小程序描述',
+  //     trigger: 'blur'
+  //   }
+  // ],
+  keywords: [
+    {
+      required: true,
+      type: 'string',
+      message: '请填写SEO关键词',
+      trigger: 'blur'
+    }
+  ],
+  running: [
+    {
+      required: true,
+      type: 'number',
+      message: '请选择小程序状态',
+      trigger: 'change'
+    }
+  ],
+  domain: [
+    {
+      required: true,
+      type: 'string',
+      message: '请填写小程序域名',
+      trigger: 'blur'
+    }
+  ],
+  websiteCode: [
+    {
+      required: true,
+      type: 'string',
+      message: '请填写小程序码',
+      trigger: 'blur'
+    }
+  ],
+  // websiteCode: [
+  //   {
+  //     required: true,
+  //     type: 'string',
+  //     message: '该域名已被使用',
+  //     validator: (_rule: Rule, value: string) => {
+  //       return new Promise<void>((resolve, reject) => {
+  //         if (!value) {
+  //           return reject('请输入二级域名');
+  //         }
+  //         checkExistence('domain', `${value}.wsdns.cn`)
+  //           .then(() => {
+  //             if (value === oldDomain.value) {
+  //               return resolve();
+  //             }
+  //             reject('已存在');
+  //           })
+  //           .catch(() => {
+  //             resolve();
+  //           });
+  //       });
+  //     },
+  //     trigger: 'blur'
+  //   }
+  // ],
+  adminUrl: [
+    {
+      required: true,
+      type: 'string',
+      message: '请填写小程序后台管理地址',
+      trigger: 'blur'
+    }
+  ],
+  icpNo: [
+    {
+      required: true,
+      type: 'string',
+      message: '请填写ICP备案号',
+      trigger: 'blur'
+    }
+  ],
+  appSecret: [
+    {
+      required: true,
+      type: 'string',
+      message: '请填写小程序秘钥',
+      trigger: 'blur'
+    }
+  ],
+  websiteName: [
+    {
+      required: true,
+      type: 'string',
+      message: '请填写小程序信息名称',
+      trigger: 'blur'
+    }
+  ]
+});
 
-  const chooseImage = (data: FileRecord) => {
-    images.value.push({
-      uid: data.id,
-      url: data.path,
-      status: 'done'
-    });
-    form.websiteLogo = data.downloadUrl;
-  };
+const chooseImage = (data: FileRecord) => {
+  images.value.push({
+    uid: data.id,
+    url: data.path,
+    status: 'done'
+  });
+  form.websiteLogo = data.downloadUrl;
+};
 
-  const onDeleteItem = (index: number) => {
-    images.value.splice(index, 1);
-    form.websiteLogo = '';
-  };
+const onDeleteItem = (index: number) => {
+  images.value.splice(index, 1);
+  form.websiteLogo = '';
+};
 
-  const chooseFile = (data: FileRecord) => {
-    files.value.push({
-      uid: data.id,
-      url: data.url,
-      status: 'done'
-    });
-  };
+const chooseFile = (data: FileRecord) => {
+  form.websiteCode = data.url;
+  files.value.push({
+    uid: data.id,
+    url: data.url,
+    status: 'done'
+  });
+};
 
-  const onDeleteFile = (index: number) => {
-    files.value.splice(index, 1);
-  };
+const onDeleteFile = (index: number) => {
+  files.value.splice(index, 1);
+};
 
-  // const onWebsiteType = (text: string) => {
-  //   form.websiteType = text;
-  // };
+// const onWebsiteType = (text: string) => {
+//   form.websiteType = text;
+// };
 
-  const { resetFields } = useForm(form, rules);
+const {resetFields} = useForm(form, rules);
 
-  /* 保存编辑 */
-  const save = () => {
-    if (!formRef.value) {
-      return;
-    }
-    formRef.value
-      .validate()
-      .then(() => {
-        loading.value = true;
-        const saveOrUpdate = isUpdate.value ? updateCmsWebsite : addCmsWebsite;
-        if(!isUpdate.value){
+/* 保存编辑 */
+const save = () => {
+  if (!formRef.value) {
+    return;
+  }
+  formRef.value
+    .validate()
+    .then(() => {
+      loading.value = true;
+      const saveOrUpdate = isUpdate.value ? updateCmsWebsite : addCmsWebsite;
+      if (!isUpdate.value) {
+        updateVisible(false);
+        message.loading('创建过程中请勿刷新页面！', 0)
+      }
+      const formData = {
+        ...form,
+        type: 20,
+        adminUrl: `mp.websoft.top`,
+        files: JSON.stringify(files.value),
+      };
+      saveOrUpdate(formData)
+        .then((msg) => {
+          loading.value = false;
           updateVisible(false);
-          message.loading('创建过程中请勿刷新页面！',0)
-        }
-        const formData = {
-          ...form,
-          type: 20,
-          files: JSON.stringify(files.value),
-        };
-        saveOrUpdate(formData)
-          .then((msg) => {
-            loading.value = false;
-            updateVisible(false);
-            updateCmsDomain({
-              websiteId: form.websiteId,
-              domain: `${localStorage.getItem('TenantId')}.shoplnk.cn`
-            });
-            updateTenant({
-              tenantName: `${form.websiteName}`
-            }).then(() => {})
-            localStorage.setItem('Domain', `${form.websiteCode}.shoplnk.cn`);
-            localStorage.setItem('WebsiteId', `${form.websiteId}`);
-            localStorage.setItem('WebsiteName', `${form.websiteName}`);
-            message.destroy();
-            message.success(msg);
-            // window.location.reload();
-            emit('done');
-          })
-          .catch((e) => {
-            loading.value = false;
-            message.destroy();
-            message.error(e.message);
+          updateCmsDomain({
+            websiteId: form.websiteId,
+            domain: `${localStorage.getItem('TenantId')}.shoplnk.cn`
           });
-      })
-      .catch(() => {});
-  };
+          updateTenant({
+            tenantName: `${form.websiteName}`
+          }).then(() => {
+          })
+          localStorage.setItem('Domain', `${form.websiteCode}.shoplnk.cn`);
+          localStorage.setItem('WebsiteId', `${form.websiteId}`);
+          localStorage.setItem('WebsiteName', `${form.websiteName}`);
+          message.destroy();
+          message.success(msg);
+          // window.location.reload();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.destroy();
+          message.error(e.message);
+        });
+    })
+    .catch(() => {
+    });
+};
 
-  watch(
-    () => props.visible,
-    (visible) => {
-      if (visible) {
-        images.value = [];
-        files.value = [];
-        websiteQrcode.value = [];
-        if (props.data?.websiteId) {
-          assignObject(form, props.data);
-          if (props.data.websiteLogo) {
-            images.value.push({
-              uid: uuid(),
-              url: props.data.websiteLogo,
-              status: 'done'
-            });
-          }
-          if (props.data.files) {
-            files.value = JSON.parse(props.data.files);
-          }
-          if (props.data.websiteCode) {
-            oldDomain.value = props.data.websiteCode;
-          }
-          isUpdate.value = true;
-        } else {
-          isUpdate.value = false;
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      images.value = [];
+      files.value = [];
+      websiteQrcode.value = [];
+      if (props.data?.websiteId) {
+        assignObject(form, props.data);
+        if (props.data.websiteLogo) {
+          images.value.push({
+            uid: uuid(),
+            url: props.data.websiteLogo,
+            status: 'done'
+          });
+        }
+        if (props.data.files) {
+          files.value = JSON.parse(props.data.files);
         }
+        if (props.data.websiteCode) {
+          oldDomain.value = props.data.websiteCode;
+        }
+        isUpdate.value = true;
       } else {
-        resetFields();
+        isUpdate.value = false;
       }
-    },
-    { immediate: true }
-  );
+    } else {
+      resetFields();
+    }
+  },
+  {immediate: true}
+);
 </script>
diff --git a/src/views/cms/cmsWebsite/index.vue b/src/views/cms/cmsWebsite/index.vue
index 076d7f0..f2aedc5 100644
--- a/src/views/cms/cmsWebsite/index.vue
+++ b/src/views/cms/cmsWebsite/index.vue
@@ -154,9 +154,9 @@ const showQrcode = ref(false);
 const qrcode = ref();
 // 加载状态
 const loading = ref(true);
-// 当前网站项目
+// 当前小程序项目
 const website = ref<CmsWebsite>();
-// 已购买且未安装的网站
+// 已购买且未安装的小程序
 const orderGoods = ref<OrderGoods>();
 // 默认域名
 const domain = ref<string>();
@@ -185,27 +185,27 @@ const columns = ref<ColumnItem[]>([
   //   width: 90
   // },
   {
-    title: 'LOGO',
+    title: '头像',
     dataIndex: 'websiteLogo',
     key: 'websiteLogo',
     align: 'center'
   },
   {
-    title: '网站名称',
+    title: '小程序名称',
     dataIndex: 'websiteName',
     key: 'websiteName',
     align: 'center'
   },
   {
-    title: '网站描述',
+    title: '小程序描述',
     dataIndex: 'comments',
     key: 'comments',
     hideInTable: true
   },
   {
-    title: '访问域名',
-    dataIndex: 'domain',
-    key: 'domain',
+    title: 'AppId',
+    dataIndex: 'websiteCode',
+    key: 'websiteCode',
     align: 'center'
   },
   {
diff --git a/src/views/cms/help/components/articleEdit.vue b/src/views/cms/help/components/articleEdit.vue
new file mode 100644
index 0000000..6fc6515
--- /dev/null
+++ b/src/views/cms/help/components/articleEdit.vue
@@ -0,0 +1,237 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="1000"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    title="文章详情"
+    :body-style="{ paddingBottom: '18px' }"
+    @update:visible="updateVisible"
+    :confirm-loading="loading"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :label-col="styleResponsive ? { md: 2, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 20, sm: 20, xs: 20 } : { flex: '1' }
+      "
+    >
+      <a-spin :spinning="loading">
+        <div v-html="content"></div>
+      </a-spin>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import {
+    addCmsArticle,
+    getCmsArticle,
+    updateCmsArticle
+  } from '@/api/cms/cmsArticle';
+  import { CmsArticle } from '@/api/cms/cmsArticle/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { useI18n } from 'vue-i18n';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { useWebsiteSettingStore } from '@/store/modules/setting';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const setting = useWebsiteSettingStore();
+  const { locale } = useI18n();
+  const editor = ref<number>(1);
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: CmsArticle | null;
+    categoryId?: number;
+  }>();
+
+  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 content = ref('');
+  const files = ref<ItemType[]>([]);
+  const category = ref<string[]>([]);
+  const password = ref();
+
+  // 用户信息
+  const form = reactive<CmsArticle>({
+    articleId: undefined,
+    // 文章模型
+    model: 'detail',
+    // 封面图
+    image: '',
+    // 文章标题
+    title: '',
+    type: 0,
+    // 展现方式
+    showType: 10,
+    // 文章来源
+    source: undefined,
+    // 产品概述
+    overview: undefined,
+    // 标签集
+    tags: undefined,
+    // 父级栏目ID
+    parentId: undefined,
+    // 栏目ID
+    categoryId: undefined,
+    // 栏目名称
+    categoryName: undefined,
+    // 文章内容
+    content: '',
+    // 虚拟阅读量
+    virtualViews: 0,
+    // 实际阅读量
+    actualViews: 0,
+    recommend: undefined,
+    translation: true,
+    permission: 0,
+    password: undefined,
+    password2: undefined,
+    // 用户ID
+    userId: undefined,
+    files: '',
+    lang: locale.value || undefined,
+    // 排序
+    sortNumber: 100,
+    // 备注
+    comments: undefined,
+    // 状态
+    status: 1,
+    // 创建时间
+    createTime: '',
+    // 更新时间
+    updateTime: ''
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        if (password.value) {
+          form.password = password.value;
+        }
+        if (form.tags) {
+          form.tags = JSON.stringify(form.tags);
+        }
+        const formData = {
+          ...form,
+          editor: editor.value || 1,
+          status: setting.setting?.articleReview ? 1 : 0,
+          content: content.value
+        };
+        const saveOrUpdate = isUpdate.value ? updateCmsArticle : addCmsArticle;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            message.error(e.message);
+          })
+          .finally(() => {
+            loading.value = false;
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (props.categoryId) {
+        form.categoryId = props.categoryId;
+      }
+      if (localStorage.getItem('Editor')) {
+        editor.value = Number(localStorage.getItem('Editor'));
+      }
+
+      if (visible) {
+        images.value = [];
+        category.value = [];
+        files.value = [];
+        content.value = '';
+        if (props.data) {
+          loading.value = true;
+          // 文章详情
+          getCmsArticle(Number(props.data?.articleId)).then((data) => {
+            assignObject(form, data);
+            if (data.content) {
+              content.value = data.content;
+            }
+
+            if (data.image) {
+              images.value.push({
+                uid: uuid(),
+                url: data.image,
+                status: 'done'
+              });
+            }
+            if (!data.source) {
+              form.source = undefined;
+            }
+            if (data.tags) {
+              form.tags = JSON.parse(form.tags);
+            } else {
+              form.tags = undefined;
+            }
+            if (data.editor) {
+              editor.value = data.editor;
+            }
+            if (data.files) {
+              const arr = JSON.parse(data.files);
+              arr.map((url: string) => {
+                files.value.push({
+                  uid: uuid(),
+                  url: url,
+                  status: 'done'
+                });
+              });
+            }
+            loading.value = false;
+          });
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/cms/help/components/search.vue b/src/views/cms/help/components/search.vue
new file mode 100644
index 0000000..31f7000
--- /dev/null
+++ b/src/views/cms/help/components/search.vue
@@ -0,0 +1,69 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-input-search
+      allow-clear
+      placeholder="请输入关键词"
+      style="width: 240px"
+      v-model:value="where.keywords"
+      @search="reload"
+    />
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+import {watch} from 'vue';
+import type {CmsArticle, CmsArticleParam} from '@/api/cms/cmsArticle/model';
+import useSearch from '@/utils/use-search';
+import {CmsNavigation} from '@/api/cms/cmsNavigation/model';
+
+const props = withDefaults(
+  defineProps<{
+    // 选中的角色
+    selection?: CmsArticle[];
+    merchantId?: number;
+    navigationList?: CmsNavigation[];
+    categoryId?: number;
+  }>(),
+  {}
+);
+
+// 表单数据
+const {where} = useSearch<CmsArticleParam>({
+  articleId: undefined,
+  model: undefined,
+  categoryId: undefined,
+  merchantId: undefined,
+  keywords: '',
+  sceneType: undefined,
+  userId: undefined
+});
+
+const emit = defineEmits<{
+  (e: 'search', where?: CmsArticleParam): void;
+  (e: 'add'): void;
+  (e: 'remove'): void;
+  (e: 'batchMove'): void;
+}>();
+
+const reload = () => {
+  emit('search', where);
+};
+
+// 按分类查询
+const onCategoryId = (id: number) => {
+  where.categoryId = id;
+  emit('search', where);
+};
+
+watch(
+  () => props.merchantId,
+  () => {
+    if (props.categoryId) {
+      where.categoryId = props.categoryId;
+    }
+    reload();
+  },
+  {immediate: true}
+);
+</script>
diff --git a/src/views/cms/help/index.vue b/src/views/cms/help/index.vue
new file mode 100644
index 0000000..cdda049
--- /dev/null
+++ b/src/views/cms/help/index.vue
@@ -0,0 +1,383 @@
+<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="articleId"
+        :columns="columns"
+        :datasource="datasource"
+        :customRow="customRow"
+        :scroll="{ x: 1200 }"
+        tool-class="ele-toolbar-form"
+        class="sys-org-table"
+      >
+        <template #toolbar>
+          <search
+            @search="reload"
+            :selection="selection"
+            :navigationList="navigationList"
+            :merchantId="merchantId"
+            :categoryId="categoryId"
+            @add="openEdit"
+            @remove="removeBatch"
+            @batchMove="openMove"
+          />
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'title'">
+            <span class="text-black">{{ record.title }}</span>
+          </template>
+          <template v-if="column.key === 'image'">
+            <a-image
+              :src="record.image"
+              :width="50"
+              fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
+            />
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+
+    <!-- 编辑弹窗 -->
+    <ArticleEdit
+      v-model:visible="showEdit"
+      :navigationList="navigationList"
+      :categoryList="categoryList"
+      :categoryId="categoryId"
+      :data="current"
+      @done="reload"
+    />
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+import {createVNode, ref, watch} from 'vue';
+import {message, Modal} from 'ant-design-vue';
+import {
+  CheckOutlined,
+  CloseOutlined,
+  ExclamationCircleOutlined
+} from '@ant-design/icons-vue';
+import type {EleProTable} from 'ele-admin-pro';
+import type {
+  DatasourceFunction,
+  ColumnItem
+} from 'ele-admin-pro/es/ele-pro-table/types';
+import Search from './components/search.vue';
+import ArticleEdit from './components/articleEdit.vue';
+import {
+  pageCmsArticle,
+  removeCmsArticle,
+  removeBatchCmsArticle,
+  updateCmsArticle
+} from '@/api/cms/cmsArticle';
+import type {CmsArticle, CmsArticleParam} from '@/api/cms/cmsArticle/model';
+import {formatNumber} from 'ele-admin-pro/es';
+import router from '@/router';
+import {toTreeData} from 'ele-admin-pro';
+import {toDateString} from 'ele-admin-pro';
+import {
+  detail,
+  getPageTitle
+} from '@/utils/common';
+import {listCmsNavigation} from '@/api/cms/cmsNavigation';
+import {CmsNavigation} from '@/api/cms/cmsNavigation/model';
+import {CmsArticleCategory} from '@/api/cms/cmsArticleCategory/model';
+import {listCmsArticleCategory} from '@/api/cms/cmsArticleCategory';
+import {getCmsWebsiteSetting} from '@/api/cms/cmsWebsiteSetting';
+import {useWebsiteSettingStore} from '@/store/modules/setting';
+
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+// 表格选中数据
+const selection = ref<CmsArticle[]>([]);
+// 当前编辑数据
+const current = ref<CmsArticle | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 是否显示批量移动弹窗
+const showMove = ref(false);
+// 店铺ID
+const merchantId = ref<number>();
+// 栏目ID
+const categoryId = ref<number>();
+// 栏目数据
+const navigationList = ref<CmsNavigation[]>();
+// 文章分类
+const categoryList = ref<CmsArticleCategory[]>();
+// 是否显示二维码
+const showQrcode = ref(false);
+// 网站设置信息
+const setting = useWebsiteSettingStore();
+
+// 表格数据源
+const datasource: DatasourceFunction = ({page, limit, where, orders}) => {
+  if (categoryId.value) {
+    where.categoryId = categoryId.value;
+  }
+  where.model = 'help';
+  return pageCmsArticle({
+    ...where,
+    ...orders,
+    page,
+    limit
+  });
+};
+
+// 表格列配置
+const columns = ref<ColumnItem[]>([
+  // {
+  //   title: 'ID',
+  //   dataIndex: 'articleId',
+  //   key: 'articleId',
+  //   align: 'center',
+  //   width: 90
+  // },
+  {
+    title: '封面图',
+    dataIndex: 'image',
+    key: 'image',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '文章标题',
+    dataIndex: 'title',
+    key: 'title'
+  },
+  // {
+  //   title: '栏目名称',
+  //   dataIndex: 'categoryName',
+  //   key: 'categoryName',
+  //   width: 120,
+  //   align: 'center'
+  // },
+  // {
+  //   title: '所属栏目',
+  //   dataIndex: 'categoryId',
+  //   key: 'categoryId',
+  //   align: 'center',
+  //   hideInTable: true
+  // },
+  // {
+  //   title: '实际阅读量',
+  //   dataIndex: 'actualViews',
+  //   key: 'actualViews',
+  //   sorter: true,
+  //   width: 120,
+  //   align: 'center'
+  // },
+  // {
+  //   title: '虚拟阅读量',
+  //   dataIndex: 'virtualViews',
+  //   key: 'virtualViews',
+  //   width: 120,
+  //   align: 'center',
+  //   hideInTable: true
+  // },
+  // {
+  //   title: '推荐',
+  //   dataIndex: 'recommend',
+  //   key: 'recommend',
+  //   sorter: true,
+  //   width: 120,
+  //   align: 'center'
+  // },
+  // {
+  //   title: '状态',
+  //   dataIndex: 'status',
+  //   key: 'status',
+  //   sorter: true,
+  //   width: 120,
+  //   align: 'center'
+  // },
+  // {
+  //   title: '排序号',
+  //   dataIndex: 'sortNumber',
+  //   key: 'sortNumber',
+  //   sorter: true,
+  //   width: 120,
+  //   align: 'center'
+  // },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    align: 'center',
+    width: 180,
+    customRender: ({text}) => toDateString(text, 'yyyy-MM-dd'),
+    sorter: true
+  },
+  // {
+  //   title: '操作',
+  //   key: 'action',
+  //   width: 180,
+  //   fixed: 'right',
+  //   align: 'center',
+  //   hideInSetting: true
+  // }
+]);
+
+/* 搜索 */
+const reload = (where?: CmsArticleParam) => {
+  selection.value = [];
+  tableRef?.value?.reload({where: where});
+};
+
+/* 打开编辑弹窗 */
+const openEdit = (row?: CmsArticle) => {
+  current.value = row ?? null;
+  showEdit.value = true;
+};
+
+/* 打开批量移动弹窗 */
+const openMove = () => {
+  showMove.value = true;
+};
+
+// 分享二维码
+const onShare = (row?: CmsArticle) => {
+  const data = {
+    isMobile: true,
+    ...row
+  };
+  data.qrcode = `${detail(data)}`;
+  data.url = `${detail(row)}`;
+  current.value = data ?? null;
+  showQrcode.value = true;
+};
+
+const onUpdate = (row?: CmsArticle) => {
+  const status = row?.status == 0 ? 1 : 0;
+  updateCmsArticle({...row, status}).then((msg) => {
+    message.success(msg);
+    reload();
+  });
+};
+
+const onRecommend = (row: CmsArticle) => {
+  updateCmsArticle({
+    ...row,
+    recommend: row.recommend == 1 ? 0 : 1
+  }).then((msg) => {
+    message.success(msg);
+    reload();
+  });
+};
+
+/* 删除单个 */
+const remove = (row: CmsArticle) => {
+  const hide = message.loading('请求中..', 0);
+  removeCmsArticle(row.articleId)
+    .then((msg) => {
+      hide();
+      message.success(msg);
+      reload();
+    })
+    .catch((e) => {
+      hide();
+      message.error(e.message);
+    });
+};
+
+/* 批量删除 */
+const removeBatch = () => {
+  if (!selection.value.length) {
+    message.error('请至少选择一条数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除选中的记录吗?',
+    icon: createVNode(ExclamationCircleOutlined),
+    maskClosable: true,
+    onOk: () => {
+      const hide = message.loading('请求中..', 0);
+      removeBatchCmsArticle(selection.value.map((d) => d.articleId))
+        .then((msg) => {
+          hide();
+          message.success(msg);
+          reload();
+        })
+        .catch((e) => {
+          hide();
+          message.error(e.message);
+        });
+    }
+  });
+};
+
+/* 自定义行属性 */
+const customRow = (record: CmsArticle) => {
+  return {
+    // 行点击事件
+    onClick: () => {
+      openEdit(record);
+    },
+    // 行双击事件
+    onDblclick: () => {
+      openEdit(record);
+    }
+  };
+};
+
+// 加载栏目数据
+if (!navigationList.value) {
+  listCmsNavigation({
+    lang: localStorage.getItem('i18n-lang') || undefined
+  }).then((res) => {
+    navigationList.value = toTreeData({
+      data: res?.map((d) => {
+        d.value = d.navigationId;
+        d.label = d.title;
+        if (!d.component) {
+          d.disabled = true;
+        }
+        if (
+          d.model == 'index' ||
+          d.model == 'page' ||
+          d.model == 'order' ||
+          d.model == 'links'
+        ) {
+          d.disabled = true;
+        }
+        return d;
+      }),
+      idField: 'navigationId',
+      parentIdField: 'parentId'
+    });
+  });
+}
+
+// 加载文章分类
+if (!categoryList.value) {
+  listCmsArticleCategory({}).then((res) => {
+    categoryList.value = toTreeData({
+      data: res?.map((d) => {
+        d.value = d.categoryId;
+        d.label = d.title;
+        return d;
+      }),
+      idField: 'categoryId',
+      parentIdField: 'parentId'
+    });
+  });
+}
+
+watch(
+  () => router.currentRoute.value.query,
+  (query) => {
+    if (query) {
+      categoryId.value = Number(query.id);
+      reload();
+    }
+  },
+  {immediate: true}
+);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CmsArticleV2'
+};
+</script>