Initial commit

src/views/booking/account/components/merchantAccountEdit.vue

@@ -0,0 +1,249 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="600"
+    :visible="visible"
+    :maskClosable="false"
+    :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="merchantId">
+        <SelectMerchant
+          :placeholder="`选择商户`"
+          class="input-item"
+          v-model:value="form.merchantName"
+          @done="chooseMerchantId"
+        />
+      </a-form-item>
+      <a-form-item label="选择角色" name="roleId">
+        <SelectRole
+          :placeholder="`选择角色`"
+          class="input-item"
+          :type="`merchant`"
+          v-model:value="form.roleName"
+          @done="chooseRoleId"
+        />
+      </a-form-item>
+      <a-form-item label="账号" name="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入手机号码"
+          maxlength="11"
+          :disabled="isUpdate"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="密码" name="password" v-if="!isUpdate">
+        <a-input
+          allow-clear
+          placeholder="请输入登录密码"
+          :disabled="isUpdate"
+          v-model:value="form.password"
+        />
+      </a-form-item>
+      <a-form-item label="真实姓名" name="realName">
+        <a-input
+          allow-clear
+          placeholder="请输入真实姓名"
+          v-model:value="form.realName"
+        />
+      </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 { addMerchantAccount, updateMerchantAccount } from '@/api/shop/merchantAccount';
+  import { MerchantAccount } from '@/api/shop/merchantAccount/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';
+  import {DictData} from "@/api/system/dict-data/model";
+  import {Merchant} from "@/api/shop/merchant/model";
+  import {Role} from "@/api/system/role/model";
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: MerchantAccount | 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<MerchantAccount>({
+    id: undefined,
+    phone: undefined,
+    realName: undefined,
+    merchantId: undefined,
+    merchantName: '',
+    userId: undefined,
+    roleId: undefined,
+    roleName: '',
+    comments: undefined,
+    status: undefined,
+    sortNumber: undefined,
+    tenantId: undefined,
+    createTime: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    merchantAccountName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写商户账号名称',
+        trigger: 'blur'
+      }
+    ],
+    merchantId: [
+      {
+        required: true,
+        type: 'number',
+        message: '请选择商户',
+        trigger: 'blur'
+      }
+    ],
+    roleId: [
+      {
+        required: true,
+        type: 'number',
+        message: '请选择角色',
+        trigger: 'blur'
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写手机号码',
+        trigger: 'blur'
+      }
+    ],
+    password: [
+      {
+        required: true,
+        type: 'string',
+        message: '请输入登录密码',
+        trigger: 'blur'
+      }
+    ],
+    realName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写真实姓名',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 搜索 */
+  const chooseMerchantId = (item: Merchant) => {
+    form.merchantName = item.merchantName;
+    form.merchantId = item.merchantId;
+  };
+
+  const chooseRoleId = (item: Role) => {
+    form.roleId = item.roleId;
+    form.roleName = item.roleName;
+  }
+
+  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 ? updateMerchantAccount : addMerchantAccount;
+        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 {
+          resetFields();
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/booking/account/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/booking/account/index.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <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 === '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>
+
+      <!-- 编辑弹窗 -->
+      <MerchantAccountEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import MerchantAccountEdit from './components/merchantAccountEdit.vue';
+  import { pageMerchantAccount, removeMerchantAccount, removeBatchMerchantAccount } from '@/api/shop/merchantAccount';
+  import type { MerchantAccount, MerchantAccountParam } from '@/api/shop/merchantAccount/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<MerchantAccount[]>([]);
+  // 当前编辑数据
+  const current = ref<MerchantAccount | 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 pageMerchantAccount({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '账号',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+    },
+    {
+      title: '真实姓名',
+      dataIndex: 'realName',
+      key: 'realName',
+      align: 'center',
+    },
+    {
+      title: '角色',
+      dataIndex: 'roleName',
+      key: 'roleName',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: MerchantAccountParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: MerchantAccount) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: MerchantAccount) => {
+    const hide = message.loading('请求中..', 0);
+    removeMerchantAccount(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);
+        removeBatchMerchantAccount(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: MerchantAccount) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'MerchantAccount'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/booking/category/components/category-edit.vue

@@ -0,0 +1,300 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="620"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改分类' : '新建分类'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 4, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 18, sm: 20, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 24, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="上级分类" name="parentId">
+            <a-tree-select
+              allow-clear
+              :tree-data="categoryList"
+              tree-default-expand-all
+              placeholder="请选择上级分类"
+              :value="form.parentId || undefined"
+              :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+              @update:value="(value?: number) => (form.parentId = value)"
+            />
+          </a-form-item>
+          <a-form-item label="分类名称" name="title">
+            <a-input
+              allow-clear
+              placeholder="请输入分类名称"
+              v-model:value="form.title"
+              @pressEnter="save"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 24, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="排序号" name="sortNumber">
+            <a-input-number
+              :min="0"
+              :max="99999"
+              class="ele-fluid"
+              placeholder="请输入排序号"
+              v-model:value="form.sortNumber"
+            />
+          </a-form-item>
+          <a-form-item label="是否展示">
+            <a-switch
+              checked-children="是"
+              un-checked-children="否"
+              :checked="form.status === 0"
+              @update:checked="updateHideValue"
+            />
+          </a-form-item>
+          <a-form-item label="分类图标" name="image" extra="尺寸180*180">
+            <SelectFile
+              :placeholder="`请选择图片`"
+              :limit="1"
+              :data="images"
+              @done="chooseFile"
+              @del="onDeleteItem"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <div style="margin-bottom: 22px">
+        <a-divider />
+      </div>
+      <a-form-item
+        label="备注"
+        name="comments"
+        :label-col="
+          styleResponsive ? { md: 3, sm: 4, xs: 24 } : { flex: '90px' }
+        "
+        :wrapper-col="
+          styleResponsive ? { md: 21, sm: 20, xs: 24 } : { flex: '1' }
+        "
+      >
+        <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 { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { GoodsCategory } from '@/api/shop/goodsCategory/model';
+  import {
+    addGoodsCategory,
+    updateGoodsCategory
+  } from '@/api/shop/goodsCategory';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  // 已上传数据
+  const images = ref<ItemType[]>([]);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: GoodsCategory | null;
+    // 上级分类id
+    parentId?: number;
+    // 全部分类数据
+    categoryList: GoodsCategory[];
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<GoodsCategory>({
+    categoryId: undefined,
+    title: '',
+    parentId: undefined,
+    image: '',
+    status: 0,
+    sortNumber: 100
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    title: [
+      {
+        required: true,
+        message: '请输入分类名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    meta: [
+      {
+        type: 'string',
+        validator: async (_rule: Rule, value: string) => {
+          if (value) {
+            const msg = '请输入正确的JSON格式';
+            try {
+              const obj = JSON.parse(value);
+              if (typeof obj !== 'object' || obj === null) {
+                return Promise.reject(msg);
+              }
+            } catch (_e) {
+              return Promise.reject(msg);
+            }
+          }
+          return Promise.resolve();
+        },
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseFile = (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 save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const categoryForm = {
+          ...form,
+          // menuType 对应的值与后端不一致在前端处理
+          // menuType: form.menuType === 2 ? 1 : 0,
+          parentId: form.parentId || 0
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateGoodsCategory
+          : addGoodsCategory;
+        saveOrUpdate(categoryForm)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const updateHideValue = (value: boolean) => {
+    form.status = value ? 0 : 1;
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields({
+            ...props.data,
+            parentId:
+              props.data.parentId === 0 ? undefined : props.data.parentId
+          });
+          images.value = [];
+          if (props.data.image) {
+            images.value.push({
+              uid: `${props.data.categoryId}`,
+              url: props.data.image,
+              status: 'done'
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          images.value = [];
+          form.parentId = props.parentId;
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
+
+<script lang="ts">
+  import * as icons from '@/layout/menu-icons';
+
+  export default {
+    components: icons,
+    data() {
+      return {
+        iconData: [
+          {
+            title: '已引入的图标',
+            icons: Object.keys(icons)
+          }
+        ]
+      };
+    }
+  };
+</script>

src/views/booking/category/index.vue

@@ -0,0 +1,406 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="categoryId"
+        :columns="columns"
+        :datasource="datasource"
+        :parse-data="parseData"
+        :need-page="false"
+        :customRow="customRow"
+        :expand-icon-column-index="1"
+        :expanded-row-keys="expandedRowKeys"
+        :scroll="{ x: 1200 }"
+        cache-key="proGoodsCategoryTable"
+        @done="onDone"
+        @expand="onExpand"
+      >
+        <template #toolbar>
+          <a-space>
+            <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
+              <template #icon>
+                <plus-outlined />
+              </template>
+              <span>新建</span>
+            </a-button>
+            <a-button type="dashed" class="ele-btn-icon" @click="expandAll">
+              展开全部
+            </a-button>
+            <a-button type="dashed" class="ele-btn-icon" @click="foldAll">
+              折叠全部
+            </a-button>
+            <!-- 搜索表单 -->
+            <a-input-search
+              allow-clear
+              v-model:value="searchText"
+              placeholder="请输入搜索关键词"
+              @search="reload"
+              @pressEnter="reload"
+            />
+          </a-space>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'path'">
+            <span class="ele-text-placeholder">{{ record.path }}</span>
+          </template>
+          <template v-if="column.key === 'component'">
+            <span class="ele-text-placeholder">{{ record.component }}</span>
+          </template>
+          <template v-if="column.key === 'type'">
+            <a-tag v-if="isExternalLink(record.path)" color="red">外链</a-tag>
+            <a-tag v-else-if="isExternalLink(record.component)" color="orange">
+              内链
+            </a-tag>
+            <a-tag v-else-if="isDirectory(record)" color="blue">目录</a-tag>
+            <a-tag v-else-if="record.type === 0">列表</a-tag>
+            <a-tag v-else-if="record.type === 1" color="purple">页面</a-tag>
+            <a-tag v-else-if="record.type === 2" color="orange">链接</a-tag>
+          </template>
+          <template v-else-if="column.key === 'title'">
+            <a-avatar
+              :size="26"
+              shape="square"
+              :src="`${record.image}`"
+              style="margin-right: 10px"
+              v-if="record.image"
+            />
+            <a @click="openPreview(`/goods/search?categoryId=${record.categoryId}`)">{{
+              record.title
+            }}</a>
+          </template>
+          <template v-if="column.key === 'showIndex'">
+            <a-space @click="onShowIndex(record)">
+              <span v-if="record.showIndex === 1" class="ele-text-success"
+                ><CheckOutlined
+              /></span>
+              <span v-else class="ele-text-placeholder"><CloseOutlined /></span>
+            </a-space>
+          </template>
+          <template v-if="column.key === 'recommend'">
+            <a-space @click="onRecommend(record)">
+              <span v-if="record.recommend === 1" class="ele-text-success"
+                ><CheckOutlined
+              /></span>
+              <span v-else class="ele-text-placeholder"><CloseOutlined /></span>
+            </a-space>
+          </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="orange">隐藏</a-tag>
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(null, record.categoryId)">添加</a>
+              <a-divider type="vertical" />
+              <a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
+              <a-divider type="vertical" />
+              <a @click="openEdit(record)">修改</a>
+              <a-divider type="vertical" />
+              <a-popconfirm
+                placement="topRight"
+                title="确定要删除此分类吗？"
+                @confirm="remove(record)"
+              >
+                <a class="ele-text-danger">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <category-edit
+      v-model:visible="showEdit"
+      :data="current"
+      :parent-id="parentId"
+      :category-list="categoryData"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import {
+    ArrowUpOutlined,
+    PlusOutlined,
+    CheckOutlined,
+    CloseOutlined
+  } from '@ant-design/icons-vue';
+  import type {
+    DatasourceFunction,
+    ColumnItem,
+    EleProTableDone
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import {
+    messageLoading,
+    toDateString,
+    isExternalLink,
+    toTreeData,
+    eachTreeData
+  } from 'ele-admin-pro/es';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import CategoryEdit from './components/category-edit.vue';
+  import {
+    listGoodsCategory,
+    removeGoodsCategory,
+    updateGoodsCategory
+  } from '@/api/shop/goodsCategory';
+  import type {
+    GoodsCategory,
+    GoodsCategoryParam
+  } from '@/api/shop/goodsCategory/model';
+  import { openNew, openPreview } from '@/utils/common';
+  import { getSiteInfo } from '@/api/layout';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'categoryId',
+      width: 80
+    },
+    {
+      title: '分类名称',
+      dataIndex: 'title',
+      key: 'title',
+      showSorterTooltip: false,
+      ellipsis: true
+    },
+    // {
+    //   title: '路由地址',
+    //   dataIndex: 'path',
+    //   key: 'path'
+    // },
+    // {
+    //   title: '组件路径',
+    //   dataIndex: 'component',
+    //   key: 'component'
+    // },
+    // {
+    //   title: '类型',
+    //   dataIndex: 'type',
+    //   key: 'type',
+    //   align: 'center',
+    //   width: 120
+    // },
+    {
+      title: '首页显示',
+      dataIndex: 'showIndex',
+      key: 'showIndex',
+      align: 'center',
+      width: 120,
+      hideInTable: false
+    },
+    {
+      title: '推荐',
+      dataIndex: 'recommend',
+      key: 'recommend',
+      align: 'center',
+      width: 120,
+      hideInTable: false
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      align: 'center',
+      width: 120,
+      showSorterTooltip: false
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 120,
+      showSorterTooltip: false,
+      customRender: ({ text }) => ['显示', '隐藏'][text]
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      showSorterTooltip: false,
+      ellipsis: true,
+      width: 180,
+      customRender: ({ text }) => toDateString(text)
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 200,
+      align: 'center'
+    }
+  ]);
+
+  // 当前编辑数据
+  const current = ref<GoodsCategory | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 上级分类id
+  const parentId = ref<number>();
+  // 分类数据
+  const categoryData = ref<GoodsCategory[]>([]);
+  // 表格展开的行
+  const expandedRowKeys = ref<number[]>([]);
+  const searchText = ref('');
+  const tenantId = ref<number>();
+  const domain = ref<string>();
+
+  getSiteInfo().then((data) => {
+    tenantId.value = data.tenantId;
+    domain.value = data.domain;
+  });
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ where }) => {
+    where.title = searchText.value;
+    return listGoodsCategory({ ...where });
+  };
+
+  const linkTo = (item: GoodsCategory) => {
+    if (item.children) {
+      return false;
+    }
+    const url = `http://${tenantId.value}.${domain.value}${item.path}`;
+    return openNew(url.replace(':id', String(item.categoryId)));
+  };
+
+  // 上移
+  const moveUp = (row?: GoodsCategory) => {
+    updateGoodsCategory({
+      categoryId: row?.categoryId,
+      sortNumber: Number(row?.sortNumber) - 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 数据转为树形结构 */
+  const parseData = (data: GoodsCategory[]) => {
+    return toTreeData({
+      data: data.map((d) => {
+        return { ...d, key: d.categoryId, value: d.categoryId };
+      }),
+      idField: 'categoryId',
+      parentIdField: 'parentId'
+    });
+  };
+
+  /* 表格渲染完成回调 */
+  const onDone: EleProTableDone<GoodsCategory> = ({ data }) => {
+    categoryData.value = data;
+  };
+
+  /* 刷新表格 */
+  const reload = (where?: GoodsCategoryParam) => {
+    tableRef?.value?.reload({ where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: GoodsCategory | null, id?: number) => {
+    current.value = row ?? null;
+    parentId.value = id;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: GoodsCategory) => {
+    if (row.children?.length) {
+      message.error('请先删除子节点');
+      return;
+    }
+    const hide = messageLoading('请求中..', 0);
+    removeGoodsCategory(row.categoryId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 展开全部 */
+  const expandAll = () => {
+    let keys: number[] = [];
+    eachTreeData(categoryData.value, (d) => {
+      if (d.children && d.children.length && d.categoryId) {
+        keys.push(d.categoryId);
+      }
+    });
+    expandedRowKeys.value = keys;
+  };
+
+  /* 折叠全部 */
+  const foldAll = () => {
+    expandedRowKeys.value = [];
+  };
+
+  /* 点击展开图标时触发 */
+  const onExpand = (expanded: boolean, record: GoodsCategory) => {
+    if (expanded) {
+      expandedRowKeys.value = [
+        ...expandedRowKeys.value,
+        record.categoryId as number
+      ];
+    } else {
+      expandedRowKeys.value = expandedRowKeys.value.filter(
+        (d) => d !== record.categoryId
+      );
+    }
+  };
+
+  /* 判断是否是目录 */
+  const isDirectory = (d: GoodsCategory) => {
+    return !!d.children?.length;
+  };
+
+  const onShowIndex = (row: GoodsCategory) => {
+    updateGoodsCategory({
+      ...row,
+      showIndex: row.showIndex == 1 ? 0 : 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  const onRecommend = (row: GoodsCategory) => {
+    updateGoodsCategory({
+      ...row,
+      recommend: row.recommend == 1 ? 0 : 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: GoodsCategory) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'GoodsCategory'
+  };
+</script>

src/views/booking/category/preview/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <a-card :title="title" class="ele-body">
+    <a-list item-layout="vertical" :pagination="pagination" :data-source="list">
+      <template #renderItem="{ item }">
+        <a-list-item key="item.title">
+          <template #actions>
+            <span v-for="{ icon, text } in actions" :key="icon">
+              <component :is="icon" style="margin-right: 8px" />
+              {{ text }}
+            </span>
+          </template>
+          <template #extra>
+            <img
+              width="100"
+              height="100"
+              alt="logo"
+              v-if="item.image"
+              :src="item.image"
+            />
+          </template>
+          <a-list-item-meta :description="item.title">
+            <template #title>
+              <a @click="openNew('/cms/article/' + item.articleId)">{{
+                item.title
+              }}</a>
+            </template>
+          </a-list-item-meta>
+        </a-list-item>
+      </template>
+    </a-list>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { pageArticle } from '@/api/cms/article';
+  import { Article } from '@/api/cms/article/model';
+  import { getArticleCategory } from '@/api/cms/category';
+  import { ArticleCategory } from '@/api/cms/category/model';
+
+  import {
+    StarOutlined,
+    LikeOutlined,
+    MessageOutlined
+  } from '@ant-design/icons-vue';
+  import { openNew } from '@/utils/common';
+  const { currentRoute } = useRouter();
+  const title = ref<string>('');
+  const categoryId = ref(0);
+  const category = ref<ArticleCategory | any>();
+  const list = ref<Article[]>([]);
+  const spinning = ref(true);
+  const page = ref(1);
+
+  const pagination = {
+    onChange: (index: number) => {
+      page.value = index;
+      reload();
+    },
+    total: 10,
+    pageSize: 10
+  };
+
+  const actions: Record<string, any>[] = [
+    { icon: StarOutlined, text: '156' },
+    { icon: LikeOutlined, text: '156' },
+    { icon: MessageOutlined, text: '2' }
+  ];
+
+  /**
+   * 加载数据
+   */
+  const reload = () => {
+    // 加载文章分类
+    getArticleCategory(categoryId.value).then((data) => {
+      category.value = data;
+      // 修改页签标题
+      if (data.title) {
+        title.value = data.title;
+        setPageTabTitle(data.title);
+      }
+    });
+    // 加载文章列表
+    pageArticle({ categoryId: categoryId.value, page: page.value }).then(
+      (data) => {
+        if (data?.list) {
+          pagination.total = data.count;
+          list.value = data.list;
+        }
+        spinning.value = false;
+      }
+    );
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { params } = unref(route);
+      const { id } = params;
+      if (id) {
+        categoryId.value = Number(id);
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ArticleCategoryPreview'
+  };
+</script>
+<style>
+  body {
+    background: #f0f2f5;
+  }
+  .ele-body {
+    margin: 0 auto;
+    max-width: 1000px;
+  }
+</style>

src/views/booking/goods/components/goodsEdit.vue

@@ -0,0 +1,361 @@
+<!-- 编辑弹窗 -->
+<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="adType">
+        <a-select
+          ref="select"
+          v-model:value="form.adType"
+          style="width: 120px"
+        >
+          <a-select-option value="图片广告">图片广告</a-select-option>
+          <a-select-option value="幻灯片">幻灯片</a-select-option>
+          <a-select-option value="视频广告">视频广告</a-select-option>
+        </a-select>
+      </a-form-item>
+      <template v-if="form.adType == '幻灯片'">
+        <a-form-item label="广告图片" name="images" extra="请上传广告图片,最多可上传9张图">
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="9"
+            :data="images"
+            @done="chooseFile"
+            @del="onDeleteItem"
+          />
+<!--          <ele-image-upload-->
+<!--            v-model:value="images"-->
+<!--            :limit="9"-->
+<!--            :drag="true"-->
+<!--            :accept="'image/png,image/jpeg'"-->
+<!--            :item-style="{ maxWidth: '160px', maxHeight: '160px' }"-->
+<!--            :upload-handler="uploadHandler"-->
+<!--            @upload="onUpload"-->
+<!--          />-->
+        </a-form-item>
+      </template>
+      <template v-if="form.adType == '图片广告'">
+        <a-form-item label="广告图片" name="images" extra="请上传广告图片">
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="1"
+            :data="images"
+            @done="chooseFile"
+            @del="onDeleteItem"
+          />
+<!--          <ele-image-upload-->
+<!--            v-model:value="images"-->
+<!--            :limit="1"-->
+<!--            :accept="'image/png,image/jpeg'"-->
+<!--            :drag="true"-->
+<!--            :item-style="{ maxWidth: '160px', maxHeight: '160px' }"-->
+<!--            :upload-handler="uploadHandler"-->
+<!--            @upload="onUpload"-->
+<!--          />-->
+        </a-form-item>
+      </template>
+      <template v-if="form.adType == '视频广告'">
+        <a-form-item label="上传视频" name="images" extra="请上传视频文件，仅支持mp4格式，大小200M以内">
+          <SelectFile
+            :placeholder="`请选择视频文件`"
+            :limit="1"
+            :data="images"
+            @done="chooseFile"
+            @del="onDeleteItem"
+          />
+<!--          <ele-image-upload-->
+<!--            v-model:value="images"-->
+<!--            :limit="1"-->
+<!--            :accept="'video/mp4'"-->
+<!--            :drag="true"-->
+<!--            :item-style="{ maxWidth: '160px', maxHeight: '160px' }"-->
+<!--            :upload-handler="uploadHandler"-->
+<!--            @upload="onUpload"-->
+<!--          />-->
+        </a-form-item>
+      </template>
+      <a-form-item label="广告位名称" name="name">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入广告位名称"
+          v-model:value="form.name"
+        />
+      </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="path">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入路由/链接地址"
+          v-model:value="form.path"
+        />
+      </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="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, isChinese} from 'ele-admin-pro';
+  import { addAd, updateAd } from '@/api/cms/ad';
+  import { Ad } from '@/api/cms/ad/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import {FormInstance, RuleObject} from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { uploadFile } from '@/api/system/file';
+  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?: Ad | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 已上传数据
+  const images = ref<ItemType[]>([]);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+
+  // 用户信息
+  const form = reactive<Ad>({
+    adId: undefined,
+    name: '',
+    adType: '图片广告',
+    images: '',
+    width: '',
+    height: '',
+    path: '',
+    type: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    name: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写广告位名称',
+        trigger: 'blur'
+      }
+    ],
+    adType: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择广告类型',
+        trigger: 'blur'
+      }
+    ],
+    images: [
+      {
+        required: true,
+        type: 'string',
+        message: '请上传图片或视频',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject, value: string) => {
+          if (images.value.length == 0) {
+            return Promise.reject('请上传图片或视频');
+          }
+          return Promise.resolve();
+        }
+      }
+    ]
+  });
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 上传事件 */
+  const uploadHandler = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    };
+    if (file.type.startsWith('video')) {
+      if (file.size / 1024 / 1024 > 200) {
+        message.error('大小不能超过 200MB');
+        return;
+      }
+    }
+    if (file.type.startsWith('image')) {
+      if (file.size / 1024 / 1024 > 5) {
+        message.error('大小不能超过 5MB');
+        return;
+      }
+    }
+
+    onUpload(item);
+  };
+
+  // 上传文件
+  const onUpload = (item: any) => {
+    const { file } = item;
+    uploadFile(file)
+      .then((data) => {
+        images.value.push({
+          uid: data.id,
+          url: file.type == 'video/mp4' ? 'https://oss.wsdns.cn/20240301/6e4e32cb808245d4be336b9486961145.png' : data.path,
+          status: 'done'
+        });
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const chooseFile = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.images = data.path;
+  }
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index,1)
+    form.images = '';
+  }
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          images: JSON.stringify(images.value)
+        };
+        const saveOrUpdate = isUpdate.value ? updateAd : addAd;
+        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) {
+        if (props.data) {
+          assignObject(form, props.data);
+          images.value = [];
+          if (props.data.images) {
+            const arr = JSON.parse(props.data.images);
+            arr.map((d) => {
+              images.value.push({
+                uid: d.uid,
+                url: d.url,
+                status: 'done'
+              });
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          images.value = [];
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+<style lang="less">
+  .tab-pane {
+    min-height: 300px;
+  }
+  .ml-10 {
+    margin-left: 5px;
+  }
+  .upload-text {
+    margin-right: 70px;
+  }
+  .icon-bg {
+    width: 50px;
+    height: 50px;
+    display: block;
+    border-radius: 50px;
+    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
+  }
+</style>

src/views/booking/goods/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/booking/goods/index.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="goodsId"
+          :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 === 'title'">
+              <a @click="openPreview(`/goods/detail/${record.goodsId}`)">{{
+                record.title
+              }}</a>
+            </template>
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="80" />
+            </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">已下架</a-tag>
+              <a-tag v-if="record.status === 2" 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>
+
+      <!-- 编辑弹窗 -->
+      <GoodsEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { EleProTable, toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import GoodsEdit from './components/goodsEdit.vue';
+  import { pageGoods, removeGoods, removeBatchGoods } from '@/api/shop/goods';
+  import type { Goods, GoodsParam } from '@/api/shop/goods/model';
+  import { openPreview, openUrl } from '@/utils/common';
+  import { useRouter } from 'vue-router';
+  const { currentRoute } = useRouter();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Goods[]>([]);
+  // 当前编辑数据
+  const current = ref<Goods | 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 pageGoods({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      width: 90,
+      dataIndex: 'goodsId'
+    },
+    {
+      title: '封面图',
+      dataIndex: 'image',
+      width: 120,
+      align: 'center',
+      key: 'image'
+    },
+    {
+      title: '课程名称',
+      dataIndex: 'title',
+      key: 'title'
+    },
+    {
+      title: '课程售价',
+      dataIndex: 'price',
+      width: 120,
+      align: 'center',
+      sorter: true,
+      key: 'price'
+    },
+    {
+      title: '销量',
+      dataIndex: 'sales',
+      width: 120,
+      align: 'center',
+      sorter: true,
+      key: 'sales'
+    },
+    {
+      title: '库存',
+      dataIndex: 'stock',
+      width: 120,
+      align: 'center',
+      sorter: true,
+      key: 'stock'
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 120,
+      align: 'center',
+      key: 'status'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      width: 120,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: GoodsParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Goods) => {
+    current.value = row ?? null;
+    openUrl(`/goods/add`);
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Goods) => {
+    const hide = message.loading('请求中..', 0);
+    removeGoods(row.goodsId)
+      .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);
+        removeBatchGoods(selection.value.map((d) => d.goodsId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Goods) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openUrl(`/booking/goods/add?goodsId=${record.goodsId}`);
+      }
+    };
+  };
+
+  watch(
+    currentRoute,
+    () => {
+      reload();
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Goods'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/booking/school/components/merchantEdit.vue

@@ -0,0 +1,474 @@
+<!-- 编辑弹窗 -->
+<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="image">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseImage"
+          @del="onDeleteItem"
+        />
+      </a-form-item>
+      <a-form-item label="校区名称" name="merchantName">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="xxx校区"
+          v-model:value="form.merchantName"
+        />
+      </a-form-item>
+      <a-form-item
+        label="手机号码"
+        name="phone"
+        extra="手机号码将用做于校区端的登录账号请填写真实手机号码"
+      >
+        <a-input
+          allow-clear
+          :maxlength="11"
+          placeholder="请输入校区手机号"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="负责人姓名" name="realName">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入校区负责人姓名"
+          v-model:value="form.realName"
+        />
+      </a-form-item>
+      <a-form-item label="校区类型" name="shopType">
+        <SelectMerchantType
+          :placeholder="`请选择校区类型`"
+          v-model:value="form.shopType"
+          @done="chooseShopType"
+        />
+      </a-form-item>
+      <a-form-item label="所属行业" name="category">
+        <industry-select
+          v-model:value="form.category"
+          valueField="label"
+          placeholder="请选择所属行业"
+          class="ele-fluid"
+          @change="onIndustry"
+        />
+      </a-form-item>
+      <a-form-item label="校区坐标" name="lngAndLat">
+        <div class="flex-sb">
+          <a-input
+            allow-clear
+            placeholder="请选择所在位置"
+            v-model:value="form.lngAndLat"
+            disabled
+          />
+          <a-button
+            class="ele-btn-icon"
+            style="margin-left: 10px"
+            @click="openMapPicker"
+          >
+            打开地图位置选择器
+          </a-button>
+        </div>
+      </a-form-item>
+      <a-form-item label="校区地址" name="address">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入校区地址"
+          v-model:value="form.address"
+        />
+      </a-form-item>
+      <a-form-item label="手续费(%)" name="commission">
+        <a-input-number
+          :step="1"
+          :max="100"
+          :min="0.0"
+          :precision="2"
+          class="ele-fluid"
+          placeholder="请输入手续费"
+          v-model:value="form.commission"
+        />
+      </a-form-item>
+      <a-form-item label="关键字" name="keywords">
+        <a-select
+          v-model:value="form.keywords"
+          mode="tags"
+          placeholder="输入关键词后回车"
+        />
+      </a-form-item>
+      <a-form-item label="资质图片" name="files">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="9"
+          :data="files"
+          @done="chooseFiles"
+          @del="onDeleteFiles"
+        />
+      </a-form-item>
+      <a-form-item label="是否自营" name="ownStore">
+        <a-switch
+          checked-children="是"
+          un-checked-children="否"
+          :checked="form.ownStore === 1"
+          @update:checked="updateOwnStore"
+        />
+      </a-form-item>
+      <a-form-item label="是否推荐" name="recommend">
+        <a-switch
+          checked-children="是"
+          un-checked-children="否"
+          :checked="form.recommend === 1"
+          @update:checked="updateRecommend"
+        />
+      </a-form-item>
+      <a-form-item label="是否需要审核" name="goodsReview">
+        <a-switch
+          checked-children="是"
+          un-checked-children="否"
+          :checked="form.goodsReview === 1"
+          @update:checked="updateGoodsReview"
+        />
+      </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-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>
+  <!-- 地图位置选择弹窗 -->
+  <ele-map-picker
+    :need-city="true"
+    :dark-mode="darkMode"
+    v-model:visible="showMap"
+    :center="[108.374959, 22.767024]"
+    :search-type="1"
+    :zoom="12"
+    @done="onDone"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid, phoneReg } from 'ele-admin-pro';
+  import { addMerchant, updateMerchant } from '@/api/shop/merchant';
+  import { Merchant } from '@/api/shop/merchant/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';
+  import { MerchantType } from '@/api/shop/merchantType/model';
+  import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
+  import { listRoles } from '@/api/system/role';
+  import { getTenantId } from '@/utils/domain';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive, darkMode } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Merchant | 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 files = ref<ItemType[]>([]);
+  // 是否显示地图选择弹窗
+  const showMap = ref(false);
+
+  // 用户信息
+  const form = reactive<Merchant>({
+    merchantId: undefined,
+    merchantName: undefined,
+    image: undefined,
+    phone: undefined,
+    realName: undefined,
+    shopType: undefined,
+    category: undefined,
+    province: '',
+    city: '',
+    region: '',
+    address: '',
+    lngAndLat: '',
+    commission: 0,
+    keywords: undefined,
+    files: undefined,
+    ownStore: undefined,
+    recommend: undefined,
+    goodsReview: 1,
+    comments: '',
+    adminUrl: '',
+    status: 0,
+    sortNumber: 100,
+    roleId: undefined,
+    roleName: '',
+    tenantId: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    merchantName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写校区名称',
+        trigger: 'blur'
+      }
+    ],
+    category: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写校区分类',
+        trigger: 'blur'
+      }
+    ],
+    lngAndLat: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写校区坐标',
+        trigger: 'blur'
+      }
+    ],
+    realName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写校区姓名',
+        trigger: 'blur'
+      }
+    ],
+    shopType: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择店铺类型',
+        trigger: 'blur'
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        message: '请输入手机号',
+        trigger: 'blur'
+      },
+      {
+        pattern: phoneReg,
+        message: '手机号格式不正确',
+        type: 'string'
+      }
+    ]
+  });
+
+  const chooseShopType = (data: MerchantType) => {
+    form.shopType = data.name;
+  };
+
+  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 chooseFiles = (data: FileRecord) => {
+    files.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+  };
+
+  /* 打开位置选择 */
+  const openMapPicker = () => {
+    showMap.value = true;
+  };
+
+  /* 地图选择后回调 */
+  const onDone = (location: CenterPoint) => {
+    // city.value = [
+    //   `${location.city?.province}`,
+    //   `${location.city?.city}`,
+    //   `${location.city?.district}`
+    // ];
+    form.province = `${location.city?.province}`;
+    form.city = `${location.city?.city}`;
+    form.region = `${location.city?.district}`;
+    form.address = `${location.address}`;
+    form.lngAndLat = `${location.lng},${location.lat}`;
+    showMap.value = false;
+  };
+
+  const onDeleteFiles = (index: number) => {
+    files.value.splice(index, 1);
+  };
+
+  const updateOwnStore = (value: boolean) => {
+    form.ownStore = value ? 1 : 0;
+  };
+
+  const updateRecommend = (value: boolean) => {
+    form.recommend = value ? 1 : 0;
+  };
+
+  const updateGoodsReview = (value: boolean) => {
+    form.goodsReview = value ? 1 : 0;
+  };
+
+  const onIndustry = (item: any) => {
+    form.category = item[0] + '/' + item[1];
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          keywords: JSON.stringify(form.keywords),
+          files: JSON.stringify(files.value)
+        };
+        const saveOrUpdate = isUpdate.value ? updateMerchant : addMerchant;
+        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 = [];
+        files.value = [];
+        if (props.data) {
+          isUpdate.value = true;
+          assignObject(form, props.data);
+          if (props.data.image) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            });
+          }
+          if (props.data.files) {
+            const arr = JSON.parse(props.data.files);
+            arr.map((item) => {
+              files.value.push({
+                uid: uuid(),
+                url: item.url,
+                status: 'done'
+              });
+            });
+          }
+          if (props.data.keywords) {
+            form.keywords = JSON.parse(props.data.keywords);
+          }
+        } else {
+          isUpdate.value = false;
+        }
+        // 获取校区管理员的roleId
+        listRoles({ roleCode: 'merchant' }).then((res) => {
+          form.roleId = res[0].roleId;
+          form.roleName = res[0].roleName;
+          form.tenantId = Number(localStorage.getItem('TenantId'));
+        });
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<style lang="less" scoped>
+  .flex-sb {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>

src/views/booking/school/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加校区</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/booking/school/index.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="merchantId"
+          :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="openNew(record.adminUrl)">管理后台</a>
+                <a-divider type="vertical" />
+                <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>
+
+      <!-- 编辑弹窗 -->
+      <MerchantEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import MerchantEdit from './components/merchantEdit.vue';
+  import { pageMerchant, removeMerchant, removeBatchMerchant } from '@/api/shop/merchant';
+  import type { Merchant, MerchantParam } from '@/api/shop/merchant/model';
+  import {openNew, openPreview} from "@/utils/common";
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Merchant[]>([]);
+  // 当前编辑数据
+  const current = ref<Merchant | 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 pageMerchant({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'merchantId',
+      key: 'merchantId',
+      width: 90
+    },
+    {
+      title: '校区名称',
+      dataIndex: 'merchantName',
+      key: 'merchantName',
+      align: 'center'
+    },
+    {
+      title: '校区图标',
+      dataIndex: 'image',
+      key: 'image',
+      align: 'center'
+    },
+    {
+      title: '负责人',
+      dataIndex: 'realName',
+      key: 'realName',
+      align: 'center'
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center'
+    },
+    {
+      title: '类型',
+      dataIndex: 'shopType',
+      key: 'shopType',
+      align: 'center'
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center'
+    },
+    {
+      title: '排序号',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: MerchantParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Merchant) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Merchant) => {
+    const hide = message.loading('请求中..', 0);
+    removeMerchant(row.merchantId)
+      .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);
+        removeBatchMerchant(selection.value.map((d) => d.merchantId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Merchant) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Merchant'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/booking/schoolType/components/merchantTypeEdit.vue

@@ -0,0 +1,197 @@
+<!-- 编辑弹窗 -->
+<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
+          :maxlength="100"
+          placeholder="请输入校区类型"
+          v-model:value="form.name"
+        />
+      </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-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>
+  </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 { addMerchantType, updateMerchantType } from '@/api/shop/merchantType';
+  import { MerchantType } from '@/api/shop/merchantType/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?: MerchantType | 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<MerchantType>({
+    id: undefined,
+    name: undefined,
+    comments: undefined,
+    status: undefined,
+    sortNumber: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    merchantTypeId: undefined,
+    merchantTypeName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    merchantTypeName: [
+      {
+        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 ? updateMerchantType : addMerchantType;
+        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>

src/views/booking/schoolType/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/booking/schoolType/index.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="merchantTypeId"
+          :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>
+
+      <!-- 编辑弹窗 -->
+      <MerchantTypeEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import MerchantTypeEdit from './components/merchantTypeEdit.vue';
+  import { pageMerchantType, removeMerchantType, removeBatchMerchantType } from '@/api/shop/merchantType';
+  import type { MerchantType, MerchantTypeParam } from '@/api/shop/merchantType/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<MerchantType[]>([]);
+  // 当前编辑数据
+  const current = ref<MerchantType | 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 pageMerchantType({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: '入驻条件',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center'
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center'
+    },
+    {
+      title: '排序号',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: MerchantTypeParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: MerchantType) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: MerchantType) => {
+    const hide = message.loading('请求中..', 0);
+    removeMerchantType(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);
+        removeBatchMerchantType(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: MerchantType) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'MerchantType'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/booking/student/components/org-select.vue

@@ -0,0 +1,39 @@
+<!-- 机构选择下拉框 -->
+<template>
+  <a-tree-select
+    allow-clear
+    tree-default-expand-all
+    :placeholder="placeholder"
+    :value="value || undefined"
+    :tree-data="data"
+    :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+    @update:value="updateValue"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { Organization } from '@/api/system/organization/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value?: number): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      // 选中的数据(v-modal)
+      value?: number;
+      // 提示信息
+      placeholder?: string;
+      // 机构数据
+      data: Organization[];
+    }>(),
+    {
+      placeholder: '请选择角色'
+    }
+  );
+
+  /* 更新选中数据 */
+  const updateValue = (value?: number) => {
+    emit('update:value', value);
+  };
+</script>

src/views/booking/student/components/role-select.vue

@@ -0,0 +1,71 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <a-select
+    allow-clear
+    mode="multiple"
+    :value="roleIds"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  >
+    <a-select-option
+      v-for="item in data"
+      :key="item.roleId"
+      :value="item.roleId"
+    >
+      {{ item.roleName }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { listRoles } from '@/api/system/role';
+  import type { Role } from '@/api/system/role/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: Role[]): void;
+    (e: 'blur'): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      value?: Role[];
+      //
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择角色'
+    }
+  );
+
+  // 选中的角色id
+  const roleIds = computed(() => props.value?.map((d) => d.roleId as number));
+
+  // 角色数据
+  const data = ref<Role[]>([]);
+
+  /* 更新选中数据 */
+  const updateValue = (value: number[]) => {
+    emit(
+      'update:value',
+      value.map((v) => ({ roleId: v }))
+    );
+  };
+
+  /* 获取角色数据 */
+  listRoles()
+    .then((list) => {
+      data.value = list;
+    })
+    .catch((e) => {
+      message.error(e.message);
+    });
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/views/booking/student/components/sex-select.vue

@@ -0,0 +1,45 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <a-select
+    show-search
+    optionFilterProp="label"
+    :options="data"
+    allow-clear
+    :value="value"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { getDictionaryOptions } from '@/utils/common';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择性别'
+    }
+  );
+
+  // 字典数据
+  const data = getDictionaryOptions('sex');
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    emit('update:value', value);
+  };
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/views/booking/student/components/user-edit.vue

@@ -0,0 +1,313 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '用户详情' : '新建用户'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 5, sm: 4, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 17, sm: 20, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="手机号" v-if="isUpdate" name="mobile">
+            <a-input
+              allow-clear
+              :maxlength="11"
+              placeholder="请输入手机号"
+              v-model:value="form.mobile"
+              :disabled="isUpdate"
+            />
+          </a-form-item>
+          <a-form-item label="昵称" name="nickname">
+            <a-input
+              allow-clear
+              :maxlength="20"
+              placeholder="请输入昵称"
+              v-model:value="form.nickname"
+            />
+          </a-form-item>
+          <a-form-item label="真实姓名" name="realName">
+            <a-input
+              allow-clear
+              :maxlength="20"
+              placeholder="请输入真实姓名"
+              v-model:value="form.realName"
+            />
+          </a-form-item>
+          <a-form-item label="性别" name="sex">
+            <span v-if="form.sex == 1">男</span>
+            <span v-else-if="form.sex == 2">女</span>
+            <span v-else>未知</span>
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="会员等级">
+            <SelectGrade
+              :placeholder="`请选择会员等级`"
+              v-model:value="form.gradeName"
+              :disabled="isUpdate"
+              @done="chooseGradeId"
+            />
+          </a-form-item>
+          <a-form-item label="邮箱" name="email">
+            <a-input
+              allow-clear
+              :maxlength="100"
+              placeholder="请输入邮箱"
+              v-model:value="form.email"
+            />
+          </a-form-item>
+          <a-form-item label="出生日期">
+            <a-date-picker
+              class="ele-fluid"
+              value-format="YYYY-MM-DD"
+              placeholder="请选择出生日期"
+              v-model:value="form.birthday"
+            />
+          </a-form-item>
+          <a-form-item v-if="!isUpdate" label="登录密码" name="password">
+            <a-input-password
+              :maxlength="20"
+              v-model:value="form.password"
+              placeholder="请输入登录密码"
+            />
+          </a-form-item>
+          <a-form-item label="个人简介">
+            <a-textarea
+              :rows="4"
+              :maxlength="200"
+              placeholder="请输入个人简介"
+              v-model:value="form.introduction"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { emailReg, phoneReg } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import RoleSelect from './role-select.vue';
+  import SexSelect from './sex-select.vue';
+  import { addUser, updateUser, checkExistence } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+  import OrgSelect from './org-select.vue';
+  // import { getDictionaryOptions } from '@/utils/common';
+  import { Organization } from '@/api/system/organization/model';
+  import { Grade } from '@/api/user/grade/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  // 获取字典数据
+  // const userTypeData = getDictionaryOptions('userType');
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: User | null;
+    // 全部机构
+    organizationList: Organization[];
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<User>({
+    type: undefined,
+    userId: undefined,
+    username: '',
+    nickname: '',
+    realName: '',
+    companyName: '',
+    sex: undefined,
+    roles: [],
+    email: '',
+    phone: '',
+    mobile: '',
+    password: '',
+    introduction: '',
+    organizationId: undefined,
+    birthday: '',
+    idCard: '',
+    comments: '',
+    gradeName: '',
+    gradeId: undefined
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    username: [
+      {
+        required: true,
+        type: 'string',
+        validator: (_rule: Rule, value: string) => {
+          return new Promise<void>((resolve, reject) => {
+            if (!value) {
+              return reject('请输入用户账号');
+            }
+            checkExistence('username', value, props.data?.userId)
+              .then(() => {
+                reject('账号已经存在');
+              })
+              .catch(() => {
+                resolve();
+              });
+          });
+        },
+        trigger: 'blur'
+      }
+    ],
+    nickname: [
+      {
+        required: true,
+        message: '请输入昵称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    // realName: [
+    //   {
+    //     required: true,
+    //     message: '请输入真实姓名',
+    //     type: 'string',
+    //     trigger: 'blur'
+    //   }
+    // ],
+    // sex: [
+    //   {
+    //     required: true,
+    //     message: '请选择性别',
+    //     type: 'string',
+    //     trigger: 'blur'
+    //   }
+    // ],
+    roles: [
+      {
+        required: true,
+        message: '请选择角色',
+        type: 'array',
+        trigger: 'blur'
+      }
+    ],
+    email: [
+      {
+        pattern: emailReg,
+        message: '邮箱格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    password: [
+      {
+        required: true,
+        type: 'string',
+        validator: async (_rule: Rule, value: string) => {
+          if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
+            return Promise.resolve();
+          }
+          return Promise.reject('密码必须为5-18位非空白字符');
+        },
+        trigger: 'blur'
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        pattern: phoneReg,
+        message: '手机号格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseGradeId = (data: Grade) => {
+    form.gradeName = data.name;
+    form.gradeId = data.gradeId;
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const saveOrUpdate = isUpdate.value ? updateUser : addUser;
+        saveOrUpdate(form)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields({
+            ...props.data,
+            password: ''
+          });
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>

src/views/booking/student/components/user-import.vue

@@ -0,0 +1,88 @@
+<!-- 用户导入弹窗 -->
+<template>
+  <ele-modal
+    :width="520"
+    :footer="null"
+    title="导入用户"
+    :visible="visible"
+    @update:visible="updateVisible"
+  >
+    <a-spin :spinning="loading">
+      <a-upload-dragger
+        accept=".xls,.xlsx"
+        :show-upload-list="false"
+        :customRequest="doUpload"
+        style="padding: 24px 0; margin-bottom: 16px"
+      >
+        <p class="ant-upload-drag-icon">
+          <cloud-upload-outlined />
+        </p>
+        <p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
+      </a-upload-dragger>
+    </a-spin>
+    <div class="ele-text-center">
+      <span>只能上传xls、xlsx文件，</span>
+      <a
+        href="https://cdn.eleadmin.com/20200610/用户导入模板.xlsx"
+        download="用户导入模板.xlsx"
+      >
+        下载模板
+      </a>
+    </div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { CloudUploadOutlined } from '@ant-design/icons-vue';
+  import { importUsers } from '@/api/system/user';
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  defineProps<{
+    // 是否打开弹窗
+    visible: boolean;
+  }>();
+
+  // 导入请求状态
+  const loading = ref(false);
+
+  /* 上传 */
+  const doUpload = ({ file }) => {
+    if (
+      ![
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      ].includes(file.type)
+    ) {
+      message.error('只能选择 excel 文件');
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 10) {
+      message.error('大小不能超过 10MB');
+      return false;
+    }
+    loading.value = true;
+    importUsers(file)
+      .then((msg) => {
+        loading.value = false;
+        message.success(msg);
+        updateVisible(false);
+        emit('done');
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+    return false;
+  };
+
+  /* 更新 visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+</script>

src/views/booking/student/components/user-info.vue

@@ -0,0 +1,143 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <a-drawer
+    :width="680"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="'基本信息'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    :footer="null"
+  >
+    <a-form
+      :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
+      :wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="账号">
+            <span class="ele-text">{{ user.username }}</span>
+          </a-form-item>
+          <a-form-item label="昵称">
+            <span class="ele-text">{{ user.nickname }}</span>
+          </a-form-item>
+          <a-form-item label="性别">
+            <span class="ele-text">{{ user.sexName }}</span>
+          </a-form-item>
+          <a-form-item label="手机号">
+            <span class="ele-text">{{ user.phone }}</span>
+          </a-form-item>
+          <a-form-item label="角色">
+            <a-tag v-for="item in user.roles" :key="item.roleId" color="blue">
+              {{ item.roleName }}
+            </a-tag>
+          </a-form-item>
+          <a-form-item label="状态">
+            <a-badge
+              v-if="typeof user.status === 'number'"
+              :status="(['processing', 'error'][user.status] as any)"
+              :text="['正常', '冻结'][user.status]"
+            />
+          </a-form-item>
+          <a-form-item label="地址">
+            <span class="ele-text">{{ user.address }}</span>
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="可用余额">
+            <span class="ele-text-success">￥{{ formatNumber(user.balance) }}</span>
+          </a-form-item>
+          <a-form-item label="可用积分">
+            <span class="ele-text">{{ user.points }}</span>
+          </a-form-item>
+          <a-form-item label="实际消费">
+            <span class="ele-text">{{ user.payMoney }}</span>
+          </a-form-item>
+          <a-form-item label="机构/部门">
+            <span class="ele-text">{{ user.organizationName }}</span>
+          </a-form-item>
+          <a-form-item label="头像">
+            <a-image :src="user.avatar" :width="36" />
+          </a-form-item>
+          <a-form-item label="生日">
+            <span class="ele-text">{{ user.birthday }}</span>
+          </a-form-item>
+          <a-form-item label="创建时间">
+            <span class="ele-text">{{ user.createTime }}</span>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import type { User } from '@/api/system/user/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: User | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 用户信息
+  const user = reactive<User>({
+    username: '',
+    nickname: '',
+    sexName: '',
+    phone: '',
+    avatar: '',
+    balance: undefined,
+    points: 0,
+    payMoney: 0,
+    birthday: '',
+    address: '',
+    roles: [],
+    createTime: undefined,
+    status: undefined
+  });
+
+  // 请求状态
+  const loading = ref(true);
+
+  const { resetFields } = useForm(user);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          loading.value = false;
+          assignObject(user, props.data);
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>

src/views/booking/student/components/user-search.vue

@@ -0,0 +1,111 @@
+<!-- 搜索表单 -->
+<template>
+  <a-form
+    :label-col="
+      styleResponsive ? { xl: 7, lg: 5, md: 7, sm: 4 } : { flex: '90px' }
+    "
+    :wrapper-col="
+      styleResponsive ? { xl: 17, lg: 19, md: 17, sm: 20 } : { flex: '1' }
+    "
+  >
+    <a-row :gutter="8">
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <a-form-item label="用户账号">
+          <a-input
+            v-model:value.trim="form.username"
+            placeholder="请输入"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <a-form-item label="昵称">
+          <a-input
+            v-model:value.trim="form.nickname"
+            placeholder="请输入"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <a-form-item label="性别">
+          <a-select v-model:value="form.sex" placeholder="请选择" allow-clear>
+            <a-select-option value="1">男</a-select-option>
+            <a-select-option value="2">女</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
+          <a-space>
+            <a-button type="primary" @click="search">查询</a-button>
+            <a-button @click="reset">重置</a-button>
+          </a-space>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import type { UserParam } from '@/api/system/user/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 默认搜索条件
+    where?: UserParam;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'search', where?: UserParam): void;
+  }>();
+
+  // 表单数据
+  const { form, resetFields } = useFormData<UserParam>({
+    username: '',
+    nickname: '',
+    sex: undefined,
+    ...props.where
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', form);
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+</script>

src/views/booking/student/details/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="ele-body">
+    <a-card title="基本信息" :bordered="false">
+      <a-form
+        class="ele-form-detail"
+        :label-col="
+          styleResponsive ? { md: 2, sm: 4, xs: 6 } : { flex: '90px' }
+        "
+        :wrapper-col="
+          styleResponsive ? { md: 22, sm: 20, xs: 18 } : { flex: '1' }
+        "
+      >
+        <a-form-item label="账号">
+          <div class="ele-text-secondary">{{ form.username }}</div>
+        </a-form-item>
+        <a-form-item label="昵称">
+          <div class="ele-text-secondary">{{ form.nickname }}</div>
+        </a-form-item>
+        <a-form-item label="性别">
+          <div class="ele-text-secondary">{{ form.sexName }}</div>
+        </a-form-item>
+        <a-form-item label="手机号">
+          <div class="ele-text-secondary">{{ form.phone }}</div>
+        </a-form-item>
+        <a-form-item label="真实姓名">
+          <div class="ele-text-secondary">{{ form.realName }}</div>
+        </a-form-item>
+        <a-form-item label="别名">
+          <div class="ele-text-secondary">{{ form.alias }}</div>
+        </a-form-item>
+        <a-form-item label="角色">
+          <a-tag v-for="item in form.roles" :key="item.roleId" color="blue">
+            {{ item.roleName }}
+          </a-tag>
+        </a-form-item>
+        <a-form-item label="创建时间">
+          <div class="ele-text-secondary">{{ form.createTime }}</div>
+        </a-form-item>
+        <a-form-item label="状态">
+          <a-badge
+            v-if="typeof form.status === 'number'"
+            :status="(['processing', 'error'][form.status] as any)"
+            :text="['正常', '冻结'][form.status]"
+          />
+        </a-form-item>
+      </a-form>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, unref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { message } from 'ant-design-vue/es';
+  import { toDateString } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { getUser } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+  const ROUTE_PATH = '/system/user/details';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const { currentRoute } = useRouter();
+
+  // 用户信息
+  const { form, assignFields } = useFormData<User>({
+    userId: undefined,
+    alias: '',
+    realName: '',
+    username: '',
+    nickname: '',
+    sexName: '',
+    phone: '',
+    roles: [],
+    createTime: undefined,
+    status: undefined
+  });
+
+  // 请求状态
+  const loading = ref(true);
+
+  /*  */
+  const query = () => {
+    const { query } = unref(currentRoute);
+    const id = query.id;
+    if (!id || form.userId === Number(id)) {
+      return;
+    }
+    loading.value = true;
+    getUser(Number(id))
+      .then((data) => {
+        loading.value = false;
+        assignFields({
+          ...data,
+          createTime: toDateString(data.createTime)
+        });
+        // 修改页签标题
+        if (unref(currentRoute).path === ROUTE_PATH) {
+          setPageTabTitle(data.nickname + '的信息');
+        }
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { path } = unref(route);
+      if (path !== ROUTE_PATH) {
+        return;
+      }
+      query();
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'SystemUserDetails'
+  };
+</script>

src/views/booking/student/index.vue

@@ -0,0 +1,503 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="userId"
+        :columns="columns"
+        :datasource="datasource"
+        :scroll="{ x: 1300 }"
+        :where="defaultWhere"
+        :customRow="customRow"
+        cache-key="proSystemUserTable"
+      >
+        <template #toolbar>
+          <a-space>
+            <a-input-search
+              allow-clear
+              v-model:value="searchText"
+              placeholder="请输入关键词"
+              @search="reload"
+              @pressEnter="reload"
+            />
+          </a-space>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'nickname'">
+            <div class="user-box">
+              <a-avatar
+                :size="30"
+                :src="`${record.avatar}`"
+                style="margin-right: 4px"
+              >
+                <template #icon>
+                  <UserOutlined />
+                </template>
+              </a-avatar>
+              <div class="user-info" @click="openEdit(record)">
+                <span>{{ record.nickname }}</span>
+                <!--                <span class="ele-text-placeholder">{{ record.nickname }}</span>-->
+              </div>
+            </div>
+          </template>
+          <template v-if="column.key === 'mobile'">
+            <span>{{ record.mobile }}</span>
+          </template>
+          <template v-else-if="column.key === 'roles'">
+            <a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
+              {{ item.roleName }}
+            </a-tag>
+          </template>
+          <template v-if="column.key === 'balance'">
+            <span class="ele-text-success">
+              ￥{{ formatNumber(record.balance) }}
+            </span>
+          </template>
+          <template v-if="column.key === 'expendMoney'">
+            <span class="ele-text-warning">
+              ￥{{ formatNumber(record.expendMoney) }}
+            </span>
+          </template>
+          <template v-else-if="column.key === 'status'">
+            <a-switch
+              :checked="record.status === 0"
+              @change="(checked: boolean) => editStatus(checked, record)"
+            />
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(record)">详情</a>
+<!--              <a-divider type="vertical" />-->
+              <!--              <a-popconfirm-->
+              <!--                placement="topRight"-->
+              <!--                title="确定要删除此用户吗？"-->
+              <!--                @confirm="remove(record)"-->
+              <!--              >-->
+              <!--                <a class="ele-text-danger">删除</a>-->
+              <!--              </a-popconfirm>-->
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <user-edit
+      v-model:visible="showEdit"
+      :data="current"
+      :organization-list="data"
+      @done="reload"
+    />
+    <!-- 用户详情 -->
+    <user-info v-model:visible="showInfo" :data="current" @done="reload" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, reactive } from 'vue';
+  import { message, Modal } from 'ant-design-vue/es';
+  import {
+    PlusOutlined,
+    DeleteOutlined,
+    UploadOutlined,
+    EditOutlined,
+    UserOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { messageLoading, formatNumber } from 'ele-admin-pro/es';
+  import { timeAgo } from 'ele-admin-pro';
+  import UserEdit from './components/user-edit.vue';
+  import UserImport from './components/user-import.vue';
+  import UserInfo from './components/user-info.vue';
+  import {
+    pageUsers,
+    removeUser,
+    removeUsers,
+    updateUserStatus,
+    updateUserPassword
+  } from '@/api/system/user';
+  import type { User, UserParam } from '@/api/system/user/model';
+  import { toTreeData, uuid } from 'ele-admin-pro';
+  import { listRoles } from '@/api/system/role';
+  import { listOrganizations } from '@/api/system/organization';
+  import { Organization } from '@/api/system/organization/model';
+  import { hasRole } from '@/utils/permission';
+
+  // 加载状态
+  const loading = ref(true);
+  // 树形数据
+  const data = ref<Organization[]>([]);
+  // 树展开的key
+  const expandedRowKeys = ref<number[]>([]);
+  // 树选中的key
+  const selectedRowKeys = ref<number[]>([]);
+  // 表格选中数据
+  const selection = ref<User[]>([]);
+  // 当前编辑数据
+  const current = ref<User | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示用户详情
+  const showInfo = ref(false);
+  // 是否显示用户导入弹窗
+  const showImport = ref(false);
+  const userType = ref<number>();
+  const searchText = ref('');
+
+  // 加载角色
+  const roles = ref<any[]>([]);
+  const filters = () => {
+    listRoles().then((result) => {
+      result.map((d) => {
+        roles.value.push({
+          text: d.roleName,
+          value: d.roleId
+        });
+      });
+    });
+  };
+  filters();
+  // 加载机构
+  listOrganizations()
+    .then((list) => {
+      loading.value = false;
+      const eks: number[] = [];
+      list.forEach((d) => {
+        d.key = d.organizationId;
+        d.value = d.organizationId;
+        d.title = d.organizationName;
+        if (typeof d.key === 'number') {
+          eks.push(d.key);
+        }
+      });
+      expandedRowKeys.value = eks;
+      data.value = toTreeData({
+        data: list,
+        idField: 'organizationId',
+        parentIdField: 'parentId'
+      });
+      if (list.length) {
+        if (typeof list[0].key === 'number') {
+          selectedRowKeys.value = [list[0].key];
+        }
+        // current.value = list[0];
+      } else {
+        selectedRowKeys.value = [];
+        // current.value = null;
+      }
+    })
+    .catch((e) => {
+      loading.value = false;
+      message.error(e.message);
+    });
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'userId',
+      width: 80,
+      showSorterTooltip: false
+    },
+    {
+      title: '昵称',
+      key: 'nickname',
+      dataIndex: 'nickname',
+      width: 240,
+      showSorterTooltip: false
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'mobile',
+      key: 'mobile',
+      showSorterTooltip: false
+    },
+    // {
+    //   title: '客户分组',
+    //   dataIndex: 'type',
+    //   key: 'type',
+    //   align: 'center',
+    //   width: 120
+    // },
+    {
+      title: '性别',
+      dataIndex: 'sexName',
+      align: 'center',
+      width: 180,
+      showSorterTooltip: false
+    },
+    {
+      title: '邮箱',
+      dataIndex: 'email',
+      hideInTable: true,
+      width: 180,
+      showSorterTooltip: false
+    },
+    {
+      title: '可用余额',
+      dataIndex: 'balance',
+      key: 'balance',
+      align: 'center',
+      width: 180,
+      sorter: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '实际消费金额',
+      dataIndex: 'expendMoney',
+      key: 'expendMoney',
+      sorter: true,
+      hideInTable: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '可用积分',
+      dataIndex: 'points',
+      hideInTable: true,
+      sorter: true
+    },
+    {
+      title: '注册来源',
+      key: 'platform',
+      align: 'center',
+      dataIndex: 'platform',
+      hideInTable: true,
+      customRender: ({ text }) => ['未知', '网站', '小程序', 'APP'][text]
+    },
+    {
+      title: '证件号码',
+      dataIndex: 'idCard',
+      hideInTable: true
+    },
+    {
+      title: '出生日期',
+      dataIndex: 'birthday',
+      key: 'birthday',
+      hideInTable: true
+    },
+    {
+      title: '省份',
+      dataIndex: 'province',
+      key: 'province',
+      hideInTable: true
+    },
+    {
+      title: '城市',
+      dataIndex: 'city',
+      key: 'city',
+      hideInTable: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '地区',
+      dataIndex: 'region',
+      key: 'region',
+      hideInTable: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '个人简介',
+      dataIndex: 'introduction',
+      key: 'introduction',
+      hideInTable: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '邮箱认证',
+      dataIndex: 'emailVerified',
+      hideInTable: true,
+      showSorterTooltip: false,
+      customRender: ({ text }) => ['未认证', '已认证'][text]
+    },
+    {
+      title: '实名认证',
+      dataIndex: 'certification',
+      sorter: true,
+      hideInTable: true,
+      customRender: ({ text }) => ['未认证', '已认证'][text]
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'createTime',
+      sorter: true,
+      align: 'center',
+      width: 200,
+      showSorterTooltip: false,
+      ellipsis: true,
+      customRender: ({ text }) => timeAgo(text)
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      fixed: 'right',
+      align: 'center'
+    }
+  ]);
+
+  // 默认搜索条件
+  const defaultWhere = reactive({
+    username: '',
+    nickname: ''
+  });
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    where = {};
+    where.roleId = filters.roles;
+    where.keywords = searchText.value;
+    where.groupId = 23;
+    return pageUsers({ page, limit, ...where, ...orders });
+  };
+
+  /* 搜索 */
+  const reload = (where?: UserParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: User) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开用户详情弹窗 */
+  const openInfo = (row?: User) => {
+    current.value = row ?? null;
+    showInfo.value = true;
+  };
+
+  /* 打开编辑弹窗 */
+  const openImport = () => {
+    showImport.value = true;
+  };
+
+  const handleTabs = (e) => {
+    userType.value = Number(e.target.value);
+    reload();
+  };
+
+  /* 删除单个 */
+  const remove = (row: User) => {
+    const hide = messageLoading('请求中..', 0);
+    removeUser(row.userId)
+      .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 = messageLoading('请求中..', 0);
+        removeUsers(selection.value.map((d) => d.userId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 重置用户密码 */
+  const resetPsw = (row: User) => {
+    Modal.confirm({
+      title: '提示',
+      content: '确定要重置此用户的密码吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        const password = uuid(8);
+        updateUserPassword(row.userId, password)
+          .then((msg) => {
+            hide();
+            message.success(msg + '，新密码：' + password);
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 修改用户状态 */
+  const editStatus = (checked: boolean, row: User) => {
+    const status = checked ? 0 : 1;
+    updateUserStatus(row.userId, status)
+      .then((msg) => {
+        row.status = status;
+        message.success(msg);
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: User) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'SystemUser'
+  };
+</script>
+
+<style lang="less" scoped>
+  .user-box {
+    display: flex;
+    align-items: center;
+    .user-info {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+    }
+  }
+</style>

src/views/booking/teacher/components/merchantEdit.vue

@@ -0,0 +1,474 @@
+<!-- 编辑弹窗 -->
+<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="image">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseImage"
+          @del="onDeleteItem"
+        />
+      </a-form-item>
+      <a-form-item label="校区名称" name="merchantName">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="xxx校区"
+          v-model:value="form.merchantName"
+        />
+      </a-form-item>
+      <a-form-item
+        label="手机号码"
+        name="phone"
+        extra="手机号码将用做于校区端的登录账号请填写真实手机号码"
+      >
+        <a-input
+          allow-clear
+          :maxlength="11"
+          placeholder="请输入校区手机号"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="负责人姓名" name="realName">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入校区负责人姓名"
+          v-model:value="form.realName"
+        />
+      </a-form-item>
+      <a-form-item label="校区类型" name="shopType">
+        <SelectMerchantType
+          :placeholder="`请选择校区类型`"
+          v-model:value="form.shopType"
+          @done="chooseShopType"
+        />
+      </a-form-item>
+      <a-form-item label="所属行业" name="category">
+        <industry-select
+          v-model:value="form.category"
+          valueField="label"
+          placeholder="请选择所属行业"
+          class="ele-fluid"
+          @change="onIndustry"
+        />
+      </a-form-item>
+      <a-form-item label="校区坐标" name="lngAndLat">
+        <div class="flex-sb">
+          <a-input
+            allow-clear
+            placeholder="请选择所在位置"
+            v-model:value="form.lngAndLat"
+            disabled
+          />
+          <a-button
+            class="ele-btn-icon"
+            style="margin-left: 10px"
+            @click="openMapPicker"
+          >
+            打开地图位置选择器
+          </a-button>
+        </div>
+      </a-form-item>
+      <a-form-item label="校区地址" name="address">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入校区地址"
+          v-model:value="form.address"
+        />
+      </a-form-item>
+      <a-form-item label="手续费(%)" name="commission">
+        <a-input-number
+          :step="1"
+          :max="100"
+          :min="0.0"
+          :precision="2"
+          class="ele-fluid"
+          placeholder="请输入手续费"
+          v-model:value="form.commission"
+        />
+      </a-form-item>
+      <a-form-item label="关键字" name="keywords">
+        <a-select
+          v-model:value="form.keywords"
+          mode="tags"
+          placeholder="输入关键词后回车"
+        />
+      </a-form-item>
+      <a-form-item label="资质图片" name="files">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="9"
+          :data="files"
+          @done="chooseFiles"
+          @del="onDeleteFiles"
+        />
+      </a-form-item>
+      <a-form-item label="是否自营" name="ownStore">
+        <a-switch
+          checked-children="是"
+          un-checked-children="否"
+          :checked="form.ownStore === 1"
+          @update:checked="updateOwnStore"
+        />
+      </a-form-item>
+      <a-form-item label="是否推荐" name="recommend">
+        <a-switch
+          checked-children="是"
+          un-checked-children="否"
+          :checked="form.recommend === 1"
+          @update:checked="updateRecommend"
+        />
+      </a-form-item>
+      <a-form-item label="是否需要审核" name="goodsReview">
+        <a-switch
+          checked-children="是"
+          un-checked-children="否"
+          :checked="form.goodsReview === 1"
+          @update:checked="updateGoodsReview"
+        />
+      </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-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>
+  <!-- 地图位置选择弹窗 -->
+  <ele-map-picker
+    :need-city="true"
+    :dark-mode="darkMode"
+    v-model:visible="showMap"
+    :center="[108.374959, 22.767024]"
+    :search-type="1"
+    :zoom="12"
+    @done="onDone"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid, phoneReg } from 'ele-admin-pro';
+  import { addMerchant, updateMerchant } from '@/api/shop/merchant';
+  import { Merchant } from '@/api/shop/merchant/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';
+  import { MerchantType } from '@/api/shop/merchantType/model';
+  import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
+  import { listRoles } from '@/api/system/role';
+  import { getTenantId } from '@/utils/domain';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive, darkMode } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Merchant | 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 files = ref<ItemType[]>([]);
+  // 是否显示地图选择弹窗
+  const showMap = ref(false);
+
+  // 用户信息
+  const form = reactive<Merchant>({
+    merchantId: undefined,
+    merchantName: undefined,
+    image: undefined,
+    phone: undefined,
+    realName: undefined,
+    shopType: undefined,
+    category: undefined,
+    province: '',
+    city: '',
+    region: '',
+    address: '',
+    lngAndLat: '',
+    commission: 0,
+    keywords: undefined,
+    files: undefined,
+    ownStore: undefined,
+    recommend: undefined,
+    goodsReview: 1,
+    comments: '',
+    adminUrl: '',
+    status: 0,
+    sortNumber: 100,
+    roleId: undefined,
+    roleName: '',
+    tenantId: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    merchantName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写校区名称',
+        trigger: 'blur'
+      }
+    ],
+    category: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写校区分类',
+        trigger: 'blur'
+      }
+    ],
+    lngAndLat: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写校区坐标',
+        trigger: 'blur'
+      }
+    ],
+    realName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写校区姓名',
+        trigger: 'blur'
+      }
+    ],
+    shopType: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择店铺类型',
+        trigger: 'blur'
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        message: '请输入手机号',
+        trigger: 'blur'
+      },
+      {
+        pattern: phoneReg,
+        message: '手机号格式不正确',
+        type: 'string'
+      }
+    ]
+  });
+
+  const chooseShopType = (data: MerchantType) => {
+    form.shopType = data.name;
+  };
+
+  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 chooseFiles = (data: FileRecord) => {
+    files.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+  };
+
+  /* 打开位置选择 */
+  const openMapPicker = () => {
+    showMap.value = true;
+  };
+
+  /* 地图选择后回调 */
+  const onDone = (location: CenterPoint) => {
+    // city.value = [
+    //   `${location.city?.province}`,
+    //   `${location.city?.city}`,
+    //   `${location.city?.district}`
+    // ];
+    form.province = `${location.city?.province}`;
+    form.city = `${location.city?.city}`;
+    form.region = `${location.city?.district}`;
+    form.address = `${location.address}`;
+    form.lngAndLat = `${location.lng},${location.lat}`;
+    showMap.value = false;
+  };
+
+  const onDeleteFiles = (index: number) => {
+    files.value.splice(index, 1);
+  };
+
+  const updateOwnStore = (value: boolean) => {
+    form.ownStore = value ? 1 : 0;
+  };
+
+  const updateRecommend = (value: boolean) => {
+    form.recommend = value ? 1 : 0;
+  };
+
+  const updateGoodsReview = (value: boolean) => {
+    form.goodsReview = value ? 1 : 0;
+  };
+
+  const onIndustry = (item: any) => {
+    form.category = item[0] + '/' + item[1];
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          keywords: JSON.stringify(form.keywords),
+          files: JSON.stringify(files.value)
+        };
+        const saveOrUpdate = isUpdate.value ? updateMerchant : addMerchant;
+        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 = [];
+        files.value = [];
+        if (props.data) {
+          isUpdate.value = true;
+          assignObject(form, props.data);
+          if (props.data.image) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            });
+          }
+          if (props.data.files) {
+            const arr = JSON.parse(props.data.files);
+            arr.map((item) => {
+              files.value.push({
+                uid: uuid(),
+                url: item.url,
+                status: 'done'
+              });
+            });
+          }
+          if (props.data.keywords) {
+            form.keywords = JSON.parse(props.data.keywords);
+          }
+        } else {
+          isUpdate.value = false;
+        }
+        // 获取校区管理员的roleId
+        listRoles({ roleCode: 'merchant' }).then((res) => {
+          form.roleId = res[0].roleId;
+          form.roleName = res[0].roleName;
+          form.tenantId = Number(localStorage.getItem('TenantId'));
+        });
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<style lang="less" scoped>
+  .flex-sb {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>

src/views/booking/teacher/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <!--    <a-button type="primary" class="ele-btn-icon" @click="add">-->
+    <!--      <template #icon>-->
+    <!--        <PlusOutlined />-->
+    <!--      </template>-->
+    <!--      <span>添加</span>-->
+    <!--    </a-button>-->
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/booking/teacher/components/teacherEdit.vue

@@ -0,0 +1,278 @@
+<!-- 编辑弹窗 -->
+<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="teacherName">
+        <a-input
+          allow-clear
+          placeholder="请输入老师姓名"
+          v-model:value="form.teacherName"
+        />
+      </a-form-item>
+      <a-form-item label="老师照片" name="image">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseImage"
+          @del="onDeleteItem"
+        />
+      </a-form-item>
+      <a-form-item label="老师介绍" name="content">
+        <!-- 编辑器 -->
+        <tinymce-editor
+          ref="editorRef"
+          class="content"
+          v-model:value="content"
+          :disabled="disabled"
+          :init="config"
+          placeholder="请填写内容"
+        />
+      </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-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>
+  </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 { addTeacher, updateTeacher } from '@/api/booking/teacher';
+  import { Teacher } from '@/api/booking/teacher/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';
+  import { uploadOss } from '@/api/system/file';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Teacher | 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 disabled = ref(false);
+  // 编辑器内容，双向绑定
+  const content = ref<any>('');
+
+  // 用户信息
+  const form = reactive<Teacher>({
+    teacherId: undefined,
+    teacherName: undefined,
+    image: undefined,
+    content: undefined,
+    comments: undefined,
+    status: undefined,
+    sortNumber: undefined,
+    tenantId: undefined,
+    createTime: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    teacherName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写老师管理名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+  const config = ref({
+    height: 450,
+    images_upload_handler: (blobInfo, success, error) => {
+      const file = blobInfo.blob();
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      uploadOss(file)
+        .then((res) => {
+          success(res.path);
+        })
+        .catch((msg) => {
+          error(msg);
+        });
+    },
+    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+    file_picker_callback: (callback: any, _value: any, meta: any) => {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      // 设定文件可选类型
+      if (meta.filetype === 'image') {
+        input.setAttribute('accept', 'image/*');
+      } else if (meta.filetype === 'media') {
+        input.setAttribute('accept', 'video/*,.pdf');
+      }
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (!file) {
+          return;
+        }
+        if (meta.filetype === 'media') {
+          if (file.size / 1024 / 1024 > 200) {
+            editorRef.value?.alert({ content: '大小不能超过 200MB' });
+            return;
+          }
+          if (file.type.startsWith('application/pdf')) {
+            uploadOss(file).then((res) => {
+              const addPath = `<a href="${res.downloadUrl}" target="_blank">${res.name}</a>`;
+              content.value = content.value + addPath;
+            });
+            return;
+          }
+          if (!file.type.startsWith('video/')) {
+            editorRef.value?.alert({ content: '只能选择视频文件' });
+            return;
+          }
+          uploadOss(file).then((res) => {
+            callback(res.path);
+          });
+        }
+      };
+      input.click();
+    }
+  });
+
+  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,
+          content: content.value
+        };
+        const saveOrUpdate = isUpdate.value ? updateTeacher : addTeacher;
+        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 = [];
+        content.value = '';
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.image) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            });
+          }
+          if (props.data.content) {
+            content.value = props.data.content;
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/booking/teacher/index.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="teacherId"
+          :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>
+
+      <!-- 编辑弹窗 -->
+      <TeacherEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import TeacherEdit from './components/teacherEdit.vue';
+  import { pageTeacher, removeTeacher, removeBatchTeacher } from '@/api/booking/teacher';
+  import type { Teacher, TeacherParam } from '@/api/booking/teacher/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Teacher[]>([]);
+  // 当前编辑数据
+  const current = ref<Teacher | 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 pageTeacher({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'teacherId',
+      key: 'teacherId',
+      width: 90,
+    },
+    {
+      title: '老师照片',
+      dataIndex: 'image',
+      key: 'image',
+      align: 'center',
+      width: 120
+    },
+    {
+      title: '老师姓名',
+      dataIndex: 'teacherName',
+      key: 'teacherName'
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 120,
+      align: 'center',
+    },
+    {
+      title: '排序号',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      width: 120,
+      align: 'center',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 120,
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: TeacherParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Teacher) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Teacher) => {
+    const hide = message.loading('请求中..', 0);
+    removeTeacher(row.teacherId)
+      .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);
+        removeBatchTeacher(selection.value.map((d) => d.teacherId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Teacher) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Teacher'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/booking/teacher3/components/org-select.vue

@@ -0,0 +1,39 @@
+<!-- 机构选择下拉框 -->
+<template>
+  <a-tree-select
+    allow-clear
+    tree-default-expand-all
+    :placeholder="placeholder"
+    :value="value || undefined"
+    :tree-data="data"
+    :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+    @update:value="updateValue"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { Organization } from '@/api/system/organization/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value?: number): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      // 选中的数据(v-modal)
+      value?: number;
+      // 提示信息
+      placeholder?: string;
+      // 机构数据
+      data: Organization[];
+    }>(),
+    {
+      placeholder: '请选择角色'
+    }
+  );
+
+  /* 更新选中数据 */
+  const updateValue = (value?: number) => {
+    emit('update:value', value);
+  };
+</script>

src/views/booking/teacher3/components/role-select.vue

@@ -0,0 +1,71 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <a-select
+    allow-clear
+    mode="multiple"
+    :value="roleIds"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  >
+    <a-select-option
+      v-for="item in data"
+      :key="item.roleId"
+      :value="item.roleId"
+    >
+      {{ item.roleName }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { listRoles } from '@/api/system/role';
+  import type { Role } from '@/api/system/role/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: Role[]): void;
+    (e: 'blur'): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      value?: Role[];
+      //
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择角色'
+    }
+  );
+
+  // 选中的角色id
+  const roleIds = computed(() => props.value?.map((d) => d.roleId as number));
+
+  // 角色数据
+  const data = ref<Role[]>([]);
+
+  /* 更新选中数据 */
+  const updateValue = (value: number[]) => {
+    emit(
+      'update:value',
+      value.map((v) => ({ roleId: v }))
+    );
+  };
+
+  /* 获取角色数据 */
+  listRoles()
+    .then((list) => {
+      data.value = list;
+    })
+    .catch((e) => {
+      message.error(e.message);
+    });
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/views/booking/teacher3/components/sex-select.vue

@@ -0,0 +1,45 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <a-select
+    show-search
+    optionFilterProp="label"
+    :options="data"
+    allow-clear
+    :value="value"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { getDictionaryOptions } from '@/utils/common';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择性别'
+    }
+  );
+
+  // 字典数据
+  const data = getDictionaryOptions('sex');
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    emit('update:value', value);
+  };
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/views/booking/teacher3/components/user-edit.vue

@@ -0,0 +1,312 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '用户详情' : '新建用户'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 5, sm: 4, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 17, sm: 20, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="手机号" v-if="isUpdate" name="mobile">
+            <a-input
+              allow-clear
+              :maxlength="11"
+              placeholder="请输入手机号"
+              v-model:value="form.mobile"
+            />
+          </a-form-item>
+          <a-form-item label="昵称" name="nickname">
+            <a-input
+              allow-clear
+              :maxlength="20"
+              placeholder="请输入昵称"
+              v-model:value="form.nickname"
+            />
+          </a-form-item>
+          <a-form-item label="真实姓名" name="realName">
+            <a-input
+              allow-clear
+              :maxlength="20"
+              placeholder="请输入真实姓名"
+              v-model:value="form.realName"
+            />
+          </a-form-item>
+          <a-form-item label="性别" name="sex">
+            <span v-if="form.sex == 1">男</span>
+            <span v-else-if="form.sex == 2">女</span>
+            <span v-else>未知</span>
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+<!--          <a-form-item label="会员等级">-->
+<!--            <SelectGrade-->
+<!--              :placeholder="`请选择会员等级`"-->
+<!--              v-model:value="form.gradeName"-->
+<!--              :disabled="isUpdate"-->
+<!--              @done="chooseGradeId"-->
+<!--            />-->
+<!--          </a-form-item>-->
+          <a-form-item label="邮箱" name="email">
+            <a-input
+              allow-clear
+              :maxlength="100"
+              placeholder="请输入邮箱"
+              v-model:value="form.email"
+            />
+          </a-form-item>
+          <a-form-item label="出生日期">
+            <a-date-picker
+              class="ele-fluid"
+              value-format="YYYY-MM-DD"
+              placeholder="请选择出生日期"
+              v-model:value="form.birthday"
+            />
+          </a-form-item>
+          <a-form-item v-if="!isUpdate" label="登录密码" name="password">
+            <a-input-password
+              :maxlength="20"
+              v-model:value="form.password"
+              placeholder="请输入登录密码"
+            />
+          </a-form-item>
+          <a-form-item label="个人简介">
+            <a-textarea
+              :rows="4"
+              :maxlength="200"
+              placeholder="请输入个人简介"
+              v-model:value="form.introduction"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { emailReg, phoneReg } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import RoleSelect from './role-select.vue';
+  import SexSelect from './sex-select.vue';
+  import { addUser, updateUser, checkExistence } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+  import OrgSelect from './org-select.vue';
+  // import { getDictionaryOptions } from '@/utils/common';
+  import { Organization } from '@/api/system/organization/model';
+  import { Grade } from '@/api/user/grade/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  // 获取字典数据
+  // const userTypeData = getDictionaryOptions('userType');
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: User | null;
+    // 全部机构
+    organizationList: Organization[];
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<User>({
+    type: undefined,
+    userId: undefined,
+    username: '',
+    nickname: '',
+    realName: '',
+    companyName: '',
+    sex: undefined,
+    roles: [],
+    email: '',
+    phone: '',
+    mobile: '',
+    password: '',
+    introduction: '',
+    organizationId: undefined,
+    birthday: '',
+    idCard: '',
+    comments: '',
+    gradeName: '',
+    gradeId: undefined
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    username: [
+      {
+        required: true,
+        type: 'string',
+        validator: (_rule: Rule, value: string) => {
+          return new Promise<void>((resolve, reject) => {
+            if (!value) {
+              return reject('请输入用户账号');
+            }
+            checkExistence('username', value, props.data?.userId)
+              .then(() => {
+                reject('账号已经存在');
+              })
+              .catch(() => {
+                resolve();
+              });
+          });
+        },
+        trigger: 'blur'
+      }
+    ],
+    nickname: [
+      {
+        required: true,
+        message: '请输入昵称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    // realName: [
+    //   {
+    //     required: true,
+    //     message: '请输入真实姓名',
+    //     type: 'string',
+    //     trigger: 'blur'
+    //   }
+    // ],
+    // sex: [
+    //   {
+    //     required: true,
+    //     message: '请选择性别',
+    //     type: 'string',
+    //     trigger: 'blur'
+    //   }
+    // ],
+    roles: [
+      {
+        required: true,
+        message: '请选择角色',
+        type: 'array',
+        trigger: 'blur'
+      }
+    ],
+    email: [
+      {
+        pattern: emailReg,
+        message: '邮箱格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    password: [
+      {
+        required: true,
+        type: 'string',
+        validator: async (_rule: Rule, value: string) => {
+          if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
+            return Promise.resolve();
+          }
+          return Promise.reject('密码必须为5-18位非空白字符');
+        },
+        trigger: 'blur'
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        pattern: phoneReg,
+        message: '手机号格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseGradeId = (data: Grade) => {
+    form.gradeName = data.name;
+    form.gradeId = data.gradeId;
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const saveOrUpdate = isUpdate.value ? updateUser : addUser;
+        saveOrUpdate(form)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields({
+            ...props.data,
+            password: ''
+          });
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>

src/views/booking/teacher3/components/user-import.vue

@@ -0,0 +1,88 @@
+<!-- 用户导入弹窗 -->
+<template>
+  <ele-modal
+    :width="520"
+    :footer="null"
+    title="导入用户"
+    :visible="visible"
+    @update:visible="updateVisible"
+  >
+    <a-spin :spinning="loading">
+      <a-upload-dragger
+        accept=".xls,.xlsx"
+        :show-upload-list="false"
+        :customRequest="doUpload"
+        style="padding: 24px 0; margin-bottom: 16px"
+      >
+        <p class="ant-upload-drag-icon">
+          <cloud-upload-outlined />
+        </p>
+        <p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
+      </a-upload-dragger>
+    </a-spin>
+    <div class="ele-text-center">
+      <span>只能上传xls、xlsx文件，</span>
+      <a
+        href="https://cdn.eleadmin.com/20200610/用户导入模板.xlsx"
+        download="用户导入模板.xlsx"
+      >
+        下载模板
+      </a>
+    </div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { CloudUploadOutlined } from '@ant-design/icons-vue';
+  import { importUsers } from '@/api/system/user';
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  defineProps<{
+    // 是否打开弹窗
+    visible: boolean;
+  }>();
+
+  // 导入请求状态
+  const loading = ref(false);
+
+  /* 上传 */
+  const doUpload = ({ file }) => {
+    if (
+      ![
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      ].includes(file.type)
+    ) {
+      message.error('只能选择 excel 文件');
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 10) {
+      message.error('大小不能超过 10MB');
+      return false;
+    }
+    loading.value = true;
+    importUsers(file)
+      .then((msg) => {
+        loading.value = false;
+        message.success(msg);
+        updateVisible(false);
+        emit('done');
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+    return false;
+  };
+
+  /* 更新 visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+</script>

src/views/booking/teacher3/components/user-info.vue

@@ -0,0 +1,143 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <a-drawer
+    :width="680"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="'基本信息'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    :footer="null"
+  >
+    <a-form
+      :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
+      :wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="账号">
+            <span class="ele-text">{{ user.username }}</span>
+          </a-form-item>
+          <a-form-item label="昵称">
+            <span class="ele-text">{{ user.nickname }}</span>
+          </a-form-item>
+          <a-form-item label="性别">
+            <span class="ele-text">{{ user.sexName }}</span>
+          </a-form-item>
+          <a-form-item label="手机号">
+            <span class="ele-text">{{ user.phone }}</span>
+          </a-form-item>
+          <a-form-item label="角色">
+            <a-tag v-for="item in user.roles" :key="item.roleId" color="blue">
+              {{ item.roleName }}
+            </a-tag>
+          </a-form-item>
+          <a-form-item label="状态">
+            <a-badge
+              v-if="typeof user.status === 'number'"
+              :status="(['processing', 'error'][user.status] as any)"
+              :text="['正常', '冻结'][user.status]"
+            />
+          </a-form-item>
+          <a-form-item label="地址">
+            <span class="ele-text">{{ user.address }}</span>
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="可用余额">
+            <span class="ele-text-success">￥{{ formatNumber(user.balance) }}</span>
+          </a-form-item>
+          <a-form-item label="可用积分">
+            <span class="ele-text">{{ user.points }}</span>
+          </a-form-item>
+          <a-form-item label="实际消费">
+            <span class="ele-text">{{ user.payMoney }}</span>
+          </a-form-item>
+          <a-form-item label="机构/部门">
+            <span class="ele-text">{{ user.organizationName }}</span>
+          </a-form-item>
+          <a-form-item label="头像">
+            <a-image :src="user.avatar" :width="36" />
+          </a-form-item>
+          <a-form-item label="生日">
+            <span class="ele-text">{{ user.birthday }}</span>
+          </a-form-item>
+          <a-form-item label="创建时间">
+            <span class="ele-text">{{ user.createTime }}</span>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import type { User } from '@/api/system/user/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: User | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 用户信息
+  const user = reactive<User>({
+    username: '',
+    nickname: '',
+    sexName: '',
+    phone: '',
+    avatar: '',
+    balance: undefined,
+    points: 0,
+    payMoney: 0,
+    birthday: '',
+    address: '',
+    roles: [],
+    createTime: undefined,
+    status: undefined
+  });
+
+  // 请求状态
+  const loading = ref(true);
+
+  const { resetFields } = useForm(user);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          loading.value = false;
+          assignObject(user, props.data);
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>

src/views/booking/teacher3/components/user-search.vue

@@ -0,0 +1,111 @@
+<!-- 搜索表单 -->
+<template>
+  <a-form
+    :label-col="
+      styleResponsive ? { xl: 7, lg: 5, md: 7, sm: 4 } : { flex: '90px' }
+    "
+    :wrapper-col="
+      styleResponsive ? { xl: 17, lg: 19, md: 17, sm: 20 } : { flex: '1' }
+    "
+  >
+    <a-row :gutter="8">
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <a-form-item label="用户账号">
+          <a-input
+            v-model:value.trim="form.username"
+            placeholder="请输入"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <a-form-item label="昵称">
+          <a-input
+            v-model:value.trim="form.nickname"
+            placeholder="请输入"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <a-form-item label="性别">
+          <a-select v-model:value="form.sex" placeholder="请选择" allow-clear>
+            <a-select-option value="1">男</a-select-option>
+            <a-select-option value="2">女</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
+          <a-space>
+            <a-button type="primary" @click="search">查询</a-button>
+            <a-button @click="reset">重置</a-button>
+          </a-space>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import type { UserParam } from '@/api/system/user/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 默认搜索条件
+    where?: UserParam;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'search', where?: UserParam): void;
+  }>();
+
+  // 表单数据
+  const { form, resetFields } = useFormData<UserParam>({
+    username: '',
+    nickname: '',
+    sex: undefined,
+    ...props.where
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', form);
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+</script>

src/views/booking/teacher3/details/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="ele-body">
+    <a-card title="基本信息" :bordered="false">
+      <a-form
+        class="ele-form-detail"
+        :label-col="
+          styleResponsive ? { md: 2, sm: 4, xs: 6 } : { flex: '90px' }
+        "
+        :wrapper-col="
+          styleResponsive ? { md: 22, sm: 20, xs: 18 } : { flex: '1' }
+        "
+      >
+        <a-form-item label="账号">
+          <div class="ele-text-secondary">{{ form.username }}</div>
+        </a-form-item>
+        <a-form-item label="昵称">
+          <div class="ele-text-secondary">{{ form.nickname }}</div>
+        </a-form-item>
+        <a-form-item label="性别">
+          <div class="ele-text-secondary">{{ form.sexName }}</div>
+        </a-form-item>
+        <a-form-item label="手机号">
+          <div class="ele-text-secondary">{{ form.phone }}</div>
+        </a-form-item>
+        <a-form-item label="真实姓名">
+          <div class="ele-text-secondary">{{ form.realName }}</div>
+        </a-form-item>
+        <a-form-item label="别名">
+          <div class="ele-text-secondary">{{ form.alias }}</div>
+        </a-form-item>
+        <a-form-item label="角色">
+          <a-tag v-for="item in form.roles" :key="item.roleId" color="blue">
+            {{ item.roleName }}
+          </a-tag>
+        </a-form-item>
+        <a-form-item label="创建时间">
+          <div class="ele-text-secondary">{{ form.createTime }}</div>
+        </a-form-item>
+        <a-form-item label="状态">
+          <a-badge
+            v-if="typeof form.status === 'number'"
+            :status="(['processing', 'error'][form.status] as any)"
+            :text="['正常', '冻结'][form.status]"
+          />
+        </a-form-item>
+      </a-form>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, unref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { message } from 'ant-design-vue/es';
+  import { toDateString } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { getUser } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+  const ROUTE_PATH = '/system/user/details';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const { currentRoute } = useRouter();
+
+  // 用户信息
+  const { form, assignFields } = useFormData<User>({
+    userId: undefined,
+    alias: '',
+    realName: '',
+    username: '',
+    nickname: '',
+    sexName: '',
+    phone: '',
+    roles: [],
+    createTime: undefined,
+    status: undefined
+  });
+
+  // 请求状态
+  const loading = ref(true);
+
+  /*  */
+  const query = () => {
+    const { query } = unref(currentRoute);
+    const id = query.id;
+    if (!id || form.userId === Number(id)) {
+      return;
+    }
+    loading.value = true;
+    getUser(Number(id))
+      .then((data) => {
+        loading.value = false;
+        assignFields({
+          ...data,
+          createTime: toDateString(data.createTime)
+        });
+        // 修改页签标题
+        if (unref(currentRoute).path === ROUTE_PATH) {
+          setPageTabTitle(data.nickname + '的信息');
+        }
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { path } = unref(route);
+      if (path !== ROUTE_PATH) {
+        return;
+      }
+      query();
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'SystemUserDetails'
+  };
+</script>

src/views/booking/teacher3/index.vue

@@ -0,0 +1,511 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="userId"
+        :columns="columns"
+        :datasource="datasource"
+        :scroll="{ x: 1300 }"
+        :where="defaultWhere"
+        :customRow="customRow"
+        cache-key="proSystemUserTable"
+      >
+        <template #toolbar>
+          <a-space>
+            <a-button type="primary" class="ele-btn-icon" @click="openEdit">
+              <template #icon>
+                <PlusOutlined />
+              </template>
+              <span>添加</span>
+            </a-button>
+            <a-input-search
+              allow-clear
+              v-model:value="searchText"
+              placeholder="请输入关键词"
+              @search="reload"
+              @pressEnter="reload"
+            />
+          </a-space>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'nickname'">
+            <div class="user-box">
+              <a-avatar
+                :size="30"
+                :src="`${record.avatar}`"
+                style="margin-right: 4px"
+              >
+                <template #icon>
+                  <UserOutlined />
+                </template>
+              </a-avatar>
+              <div class="user-info" @click="openEdit(record)">
+                <span>{{ record.nickname }}</span>
+                <!--                <span class="ele-text-placeholder">{{ record.nickname }}</span>-->
+              </div>
+            </div>
+          </template>
+          <template v-if="column.key === 'mobile'">
+            <span>{{ record.mobile }}</span>
+          </template>
+          <template v-else-if="column.key === 'roles'">
+            <a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
+              {{ item.roleName }}
+            </a-tag>
+          </template>
+          <template v-if="column.key === 'balance'">
+            <span class="ele-text-success">
+              ￥{{ formatNumber(record.balance) }}
+            </span>
+          </template>
+          <template v-if="column.key === 'expendMoney'">
+            <span class="ele-text-warning">
+              ￥{{ formatNumber(record.expendMoney) }}
+            </span>
+          </template>
+          <template v-else-if="column.key === 'status'">
+            <a-switch
+              :checked="record.status === 0"
+              @change="(checked: boolean) => editStatus(checked, record)"
+            />
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(record)">修改</a>
+              <a-divider type="vertical" />
+              <!--              <a @click="resetPsw(record)">重置</a>-->
+              <!--              <a-divider type="vertical" />-->
+              <a-popconfirm
+                placement="topRight"
+                title="确定要删除此用户吗？"
+                @confirm="remove(record)"
+              >
+                <a class="ele-text-danger">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <user-edit
+      v-model:visible="showEdit"
+      :data="current"
+      :organization-list="data"
+      @done="reload"
+    />
+    <!-- 用户详情 -->
+    <user-info v-model:visible="showInfo" :data="current" @done="reload" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, reactive } from 'vue';
+  import { message, Modal } from 'ant-design-vue/es';
+  import {
+    PlusOutlined,
+    DeleteOutlined,
+    UploadOutlined,
+    EditOutlined,
+    UserOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { messageLoading, formatNumber } from 'ele-admin-pro/es';
+  import { timeAgo } from 'ele-admin-pro';
+  import UserEdit from './components/user-edit.vue';
+  import UserImport from './components/user-import.vue';
+  import UserInfo from './components/user-info.vue';
+  import {
+    pageUsers,
+    removeUser,
+    removeUsers,
+    updateUserStatus,
+    updateUserPassword
+  } from '@/api/system/user';
+  import type { User, UserParam } from '@/api/system/user/model';
+  import { toTreeData, uuid } from 'ele-admin-pro';
+  import { listRoles } from '@/api/system/role';
+  import { listOrganizations } from '@/api/system/organization';
+  import { Organization } from '@/api/system/organization/model';
+  import { hasRole } from '@/utils/permission';
+
+  // 加载状态
+  const loading = ref(true);
+  // 树形数据
+  const data = ref<Organization[]>([]);
+  // 树展开的key
+  const expandedRowKeys = ref<number[]>([]);
+  // 树选中的key
+  const selectedRowKeys = ref<number[]>([]);
+  // 表格选中数据
+  const selection = ref<User[]>([]);
+  // 当前编辑数据
+  const current = ref<User | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示用户详情
+  const showInfo = ref(false);
+  // 是否显示用户导入弹窗
+  const showImport = ref(false);
+  const userType = ref<number>();
+  const searchText = ref('');
+
+  // 加载角色
+  const roles = ref<any[]>([]);
+  const filters = () => {
+    listRoles().then((result) => {
+      result.map((d) => {
+        roles.value.push({
+          text: d.roleName,
+          value: d.roleId
+        });
+      });
+    });
+  };
+  filters();
+  // 加载机构
+  listOrganizations()
+    .then((list) => {
+      loading.value = false;
+      const eks: number[] = [];
+      list.forEach((d) => {
+        d.key = d.organizationId;
+        d.value = d.organizationId;
+        d.title = d.organizationName;
+        if (typeof d.key === 'number') {
+          eks.push(d.key);
+        }
+      });
+      expandedRowKeys.value = eks;
+      data.value = toTreeData({
+        data: list,
+        idField: 'organizationId',
+        parentIdField: 'parentId'
+      });
+      if (list.length) {
+        if (typeof list[0].key === 'number') {
+          selectedRowKeys.value = [list[0].key];
+        }
+        // current.value = list[0];
+      } else {
+        selectedRowKeys.value = [];
+        // current.value = null;
+      }
+    })
+    .catch((e) => {
+      loading.value = false;
+      message.error(e.message);
+    });
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'userId',
+      width: 80,
+      showSorterTooltip: false
+    },
+    {
+      title: '老师',
+      key: 'nickname',
+      dataIndex: 'nickname',
+      width: 240,
+      showSorterTooltip: false
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'phone',
+      key: 'phone',
+      showSorterTooltip: false
+    },
+    // {
+    //   title: '客户分组',
+    //   dataIndex: 'type',
+    //   key: 'type',
+    //   align: 'center',
+    //   width: 120
+    // },
+    {
+      title: '性别',
+      dataIndex: 'sexName',
+      align: 'center',
+      width: 180,
+      showSorterTooltip: false
+    },
+    {
+      title: '邮箱',
+      dataIndex: 'email',
+      hideInTable: true,
+      width: 180,
+      showSorterTooltip: false
+    },
+    {
+      title: '可用余额',
+      dataIndex: 'balance',
+      key: 'balance',
+      align: 'center',
+      width: 180,
+      sorter: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '实际消费金额',
+      dataIndex: 'expendMoney',
+      key: 'expendMoney',
+      sorter: true,
+      hideInTable: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '可用积分',
+      dataIndex: 'points',
+      hideInTable: true,
+      sorter: true
+    },
+    {
+      title: '注册来源',
+      key: 'platform',
+      align: 'center',
+      dataIndex: 'platform',
+      hideInTable: true,
+      customRender: ({ text }) => ['未知', '网站', '小程序', 'APP'][text]
+    },
+    {
+      title: '证件号码',
+      dataIndex: 'idCard',
+      hideInTable: true
+    },
+    {
+      title: '出生日期',
+      dataIndex: 'birthday',
+      key: 'birthday',
+      hideInTable: true
+    },
+    {
+      title: '省份',
+      dataIndex: 'province',
+      key: 'province',
+      hideInTable: true
+    },
+    {
+      title: '城市',
+      dataIndex: 'city',
+      key: 'city',
+      hideInTable: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '地区',
+      dataIndex: 'region',
+      key: 'region',
+      hideInTable: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '个人简介',
+      dataIndex: 'introduction',
+      key: 'introduction',
+      hideInTable: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '邮箱认证',
+      dataIndex: 'emailVerified',
+      hideInTable: true,
+      showSorterTooltip: false,
+      customRender: ({ text }) => ['未认证', '已认证'][text]
+    },
+    {
+      title: '实名认证',
+      dataIndex: 'certification',
+      sorter: true,
+      hideInTable: true,
+      customRender: ({ text }) => ['未认证', '已认证'][text]
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'createTime',
+      sorter: true,
+      align: 'center',
+      width: 200,
+      showSorterTooltip: false,
+      ellipsis: true,
+      customRender: ({ text }) => timeAgo(text)
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      fixed: 'right',
+      align: 'center'
+    }
+  ]);
+
+  // 默认搜索条件
+  const defaultWhere = reactive({
+    username: '',
+    nickname: ''
+  });
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    where = {};
+    where.roleId = filters.roles;
+    where.keywords = searchText.value;
+    where.groupId = 22;
+    return pageUsers({ page, limit, ...where, ...orders });
+  };
+
+  /* 搜索 */
+  const reload = (where?: UserParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: User) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开用户详情弹窗 */
+  const openInfo = (row?: User) => {
+    current.value = row ?? null;
+    showInfo.value = true;
+  };
+
+  /* 打开编辑弹窗 */
+  const openImport = () => {
+    showImport.value = true;
+  };
+
+  const handleTabs = (e) => {
+    userType.value = Number(e.target.value);
+    reload();
+  };
+
+  /* 删除单个 */
+  const remove = (row: User) => {
+    const hide = messageLoading('请求中..', 0);
+    removeUser(row.userId)
+      .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 = messageLoading('请求中..', 0);
+        removeUsers(selection.value.map((d) => d.userId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 重置用户密码 */
+  const resetPsw = (row: User) => {
+    Modal.confirm({
+      title: '提示',
+      content: '确定要重置此用户的密码吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        const password = uuid(8);
+        updateUserPassword(row.userId, password)
+          .then((msg) => {
+            hide();
+            message.success(msg + '，新密码：' + password);
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 修改用户状态 */
+  const editStatus = (checked: boolean, row: User) => {
+    const status = checked ? 0 : 1;
+    updateUserStatus(row.userId, status)
+      .then((msg) => {
+        row.status = status;
+        message.success(msg);
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: User) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'SystemUser'
+  };
+</script>
+
+<style lang="less" scoped>
+  .user-box {
+    display: flex;
+    align-items: center;
+    .user-info {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+    }
+  }
+</style>

src/views/cms/ad/components/ad-edit.vue

@@ -0,0 +1,368 @@
+<!-- 编辑弹窗 -->
+<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="adType">
+        <a-select ref="select" v-model:value="form.adType" style="width: 120px">
+          <a-select-option value="图片广告">图片广告</a-select-option>
+          <a-select-option value="幻灯片">幻灯片</a-select-option>
+          <a-select-option value="视频广告">视频广告</a-select-option>
+        </a-select>
+      </a-form-item>
+      <template v-if="form.adType == '幻灯片'">
+        <a-form-item
+          label="广告图片"
+          name="images"
+          extra="请上传广告图片,最多可上传9张图"
+        >
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="9"
+            :data="images"
+            @done="chooseFile"
+            @del="onDeleteItem"
+          />
+          <!--          <ele-image-upload-->
+          <!--            v-model:value="images"-->
+          <!--            :limit="9"-->
+          <!--            :drag="true"-->
+          <!--            :accept="'image/png,image/jpeg'"-->
+          <!--            :item-style="{ maxWidth: '160px', maxHeight: '160px' }"-->
+          <!--            :upload-handler="uploadHandler"-->
+          <!--            @upload="onUpload"-->
+          <!--          />-->
+        </a-form-item>
+      </template>
+      <template v-if="form.adType == '图片广告'">
+        <a-form-item label="广告图片" name="images" extra="请上传广告图片">
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="1"
+            :data="images"
+            @done="chooseFile"
+            @del="onDeleteItem"
+          />
+          <!--          <ele-image-upload-->
+          <!--            v-model:value="images"-->
+          <!--            :limit="1"-->
+          <!--            :accept="'image/png,image/jpeg'"-->
+          <!--            :drag="true"-->
+          <!--            :item-style="{ maxWidth: '160px', maxHeight: '160px' }"-->
+          <!--            :upload-handler="uploadHandler"-->
+          <!--            @upload="onUpload"-->
+          <!--          />-->
+        </a-form-item>
+      </template>
+      <template v-if="form.adType == '视频广告'">
+        <a-form-item
+          label="上传视频"
+          name="images"
+          extra="请上传视频文件，仅支持mp4格式，大小200M以内"
+        >
+          <SelectFile
+            :placeholder="`请选择视频文件`"
+            :limit="1"
+            :data="images"
+            @done="chooseFile"
+            @del="onDeleteItem"
+          />
+          <!--          <ele-image-upload-->
+          <!--            v-model:value="images"-->
+          <!--            :limit="1"-->
+          <!--            :accept="'video/mp4'"-->
+          <!--            :drag="true"-->
+          <!--            :item-style="{ maxWidth: '160px', maxHeight: '160px' }"-->
+          <!--            :upload-handler="uploadHandler"-->
+          <!--            @upload="onUpload"-->
+          <!--          />-->
+        </a-form-item>
+      </template>
+      <a-form-item label="广告位名称" name="name">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入广告位名称"
+          v-model:value="form.name"
+        />
+      </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="path">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入路由/链接地址"
+          v-model:value="form.path"
+        />
+      </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="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, isChinese } from 'ele-admin-pro';
+  import { addAd, updateAd } from '@/api/cms/ad';
+  import { Ad } from '@/api/cms/ad/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { uploadFile } from '@/api/system/file';
+  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?: Ad | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 已上传数据
+  const images = ref<ItemType[]>([]);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+
+  // 用户信息
+  const form = reactive<Ad>({
+    adId: undefined,
+    name: '',
+    adType: '图片广告',
+    images: '',
+    width: '',
+    height: '',
+    path: '',
+    type: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    name: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写广告位名称',
+        trigger: 'blur'
+      }
+    ],
+    adType: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择广告类型',
+        trigger: 'blur'
+      }
+    ],
+    images: [
+      {
+        required: true,
+        type: 'string',
+        message: '请上传图片或视频',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject, value: string) => {
+          if (images.value.length == 0) {
+            return Promise.reject('请上传图片或视频');
+          }
+          return Promise.resolve();
+        }
+      }
+    ]
+  });
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 上传事件 */
+  const uploadHandler = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    };
+    if (file.type.startsWith('video')) {
+      if (file.size / 1024 / 1024 > 200) {
+        message.error('大小不能超过 200MB');
+        return;
+      }
+    }
+    if (file.type.startsWith('image')) {
+      if (file.size / 1024 / 1024 > 5) {
+        message.error('大小不能超过 5MB');
+        return;
+      }
+    }
+
+    onUpload(item);
+  };
+
+  // 上传文件
+  const onUpload = (item: any) => {
+    const { file } = item;
+    uploadFile(file)
+      .then((data) => {
+        images.value.push({
+          uid: data.id,
+          url:
+            file.type == 'video/mp4'
+              ? 'https://oss.wsdns.cn/20240301/6e4e32cb808245d4be336b9486961145.png'
+              : data.path,
+          status: 'done'
+        });
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const chooseFile = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.downloadUrl,
+      status: 'done'
+    });
+    form.images = data.downloadUrl;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.images = '';
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          images: JSON.stringify(images.value)
+        };
+        const saveOrUpdate = isUpdate.value ? updateAd : addAd;
+        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) {
+        if (props.data) {
+          assignObject(form, props.data);
+          images.value = [];
+          if (props.data.images) {
+            const arr = JSON.parse(props.data.images);
+            arr.map((d) => {
+              images.value.push({
+                uid: d.uid,
+                url: d.url,
+                status: 'done'
+              });
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          images.value = [];
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+<style lang="less">
+  .tab-pane {
+    min-height: 300px;
+  }
+  .ml-10 {
+    margin-left: 5px;
+  }
+  .upload-text {
+    margin-right: 70px;
+  }
+  .icon-bg {
+    width: 50px;
+    height: 50px;
+    display: block;
+    border-radius: 50px;
+    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
+  }
+</style>

src/views/cms/ad/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/cms/ad/index.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="adId"
+          :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 === 'images'">
+              <template
+                v-for="(item, index) in JSON.parse(record.images)"
+                :key="index"
+              >
+                <a-image :src="item.url" :width="80" />
+              </template>
+              <span></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>
+
+      <!-- 编辑弹窗 -->
+      <AdEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</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 AdEdit from './components/ad-edit.vue';
+  import { pageAd, removeAd, removeBatchAd } from '@/api/cms/ad';
+  import type { Ad, AdParam } from '@/api/cms/ad/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Ad[]>([]);
+  // 当前编辑数据
+  const current = ref<Ad | null>(null);
+  // 是否显示资产详情
+  const showInfo = ref(false);
+  // 是否显示编辑弹窗
+  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 pageAd({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      width: 90,
+      dataIndex: 'adId'
+    },
+    {
+      title: '类型',
+      dataIndex: 'adType',
+      key: 'adType'
+    },
+    {
+      title: '广告位名称',
+      dataIndex: 'name'
+    },
+    {
+      title: '广告图片',
+      dataIndex: 'images',
+      key: 'images'
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: AdParam) => {
+    console.log(where);
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Ad) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 打开用户详情弹窗 */
+  const openInfo = (row?: Ad) => {
+    current.value = row ?? null;
+    showInfo.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Ad) => {
+    const hide = message.loading('请求中..', 0);
+    removeAd(row.adId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量转移 */
+  const batchMove = (userId) => {
+    console.log(userId, '批量转移0000');
+    console.log(selection.value);
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchAd(selection.value.map((d) => d.adId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Ad) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Ad'
+  };
+</script>
+
+<style lang="less" scoped>
+  .sys-org-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-org-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+  .ad-item {
+    margin: auto;
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 70px;
+    height: 70px;
+    border-radius: 70px;
+    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
+  }
+</style>

src/views/cms/article/components/article-edit.vue

@@ -0,0 +1,590 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="980px"
+    :visible="visible"
+    :confirm-loading="loading"
+    :maxable="maxAble"
+    :title="isUpdate ? '编辑文章' : '添加文章'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    :maskClosable="false"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
+      :wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
+      layout="vertical"
+    >
+      <a-form-item label="文章分类" name="categoryId">
+        <category-select
+          :data="categoryList"
+          placeholder="请选择文章分类"
+          v-model:value="form.categoryId"
+        />
+      </a-form-item>
+      <a-form-item label="文章标题" name="title">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入文章标题"
+          v-model:value="form.title"
+        />
+      </a-form-item>
+      <a-form-item label="封面图" name="images">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseFile"
+          @del="onDeleteItem"
+        />
+      </a-form-item>
+      <a-form-item label="文章内容" name="content">
+        <!-- 编辑器 -->
+        <tinymce-editor
+          ref="editorRef"
+          class="content"
+          v-model:value="content"
+          :disabled="disabled"
+          :init="config"
+          placeholder="图片直接粘贴自动上传"
+          @paste="onPaste"
+        />
+      </a-form-item>
+      <a-form-item label="摘要">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          show-count
+          placeholder="请输入文章摘要"
+          @focus="onComments"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="文章来源" name="source">
+        <source-select
+          v-model:value="form.source"
+        />
+      </a-form-item>
+      <a-form-item label="虚拟阅读量" name="virtualViews" :extra="`用户看到的阅读量(${form.actualViews + form.virtualViews}) = 实际阅读量(${form.actualViews}) + 虚拟阅读量(${form.virtualViews})`">
+        <a-input-number
+          :min="0"
+          class="ele-fluid"
+          placeholder="请输入虚拟阅读量"
+          v-model:value="form.virtualViews"
+        />
+      </a-form-item>
+      <a-form-item label="上传附件（选填）" name="files">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="9"
+          :data="files"
+          @done="chooseFile2"
+          @del="onDeleteItem2"
+        />
+<!--        <a-upload-->
+<!--          v-model:file-list="fileList"-->
+<!--          :max-count="1"-->
+<!--          class="upload-list-inline"-->
+<!--          list-type="picture"-->
+<!--          :before-upload="beforeUpload"-->
+<!--        >-->
+<!--          <a-button>-->
+<!--            <UploadOutlined />-->
+<!--            上传附件-->
+<!--          </a-button>-->
+<!--        </a-upload>-->
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="99999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="创建时间" name="createTime" v-if="isUpdate">
+        <a-date-picker
+          v-model:value="form.createTime"
+          show-time
+          placeholder="Select Time"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          class="ele-fluid"
+        />
+      </a-form-item>
+      <a-form-item label="展现方式" name="showType">
+        <a-radio-group v-model:value="form.showType">
+          <a-radio :value="10">小图模式(300 * 188)</a-radio>
+          <a-radio :value="20">大图模式(750 * 455)</a-radio>
+        </a-radio-group>
+      </a-form-item>
+    </a-form>
+
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch, computed } from "vue";
+import { Form, message, Modal } from "ant-design-vue";
+import { useUserStore } from "@/store/modules/user";
+import type { Article } from "@/api/cms/article/model";
+import {addArticle, getArticle, updateArticle} from "@/api/cms/article";
+import { FILE_SERVER, FILE_THUMBNAIL } from "@/config/setting";
+import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
+import {uploadFile, uploadOss} from "@/api/system/file";
+import TinymceEditor from "@/components/TinymceEditor/index.vue";
+import { FormInstance, Rule, RuleObject } from "ant-design-vue/es/form";
+import CategorySelect from "./category-select.vue";
+import { ArticleCategory } from "@/api/cms/category/model";
+import SourceSelect from "../dictionary/source-select.vue";
+import useFormData from "@/utils/use-form-data";
+import {htmlToText, uuid} from "ele-admin-pro";
+import {isImage} from "@/utils/common";
+import {DocsBook} from "@/api/cms/docs-book/model";
+import {FileRecord} from "@/api/system/file/model";
+
+const useForm = Form.useForm;
+const props = defineProps<{
+  // 弹窗是否打开
+  visible: boolean;
+  categoryId?: number;
+  // 修改回显的数据
+  data?: Article | null;
+  categoryList?: any;
+}>();
+
+const emit = defineEmits<{
+  (e: "done"): void;
+  (e: "update:visible", visible: boolean): void;
+}>();
+
+// 是否是修改
+const isUpdate = ref(false);
+const disabled = ref(false);
+// 是否显示最大化切换按钮
+const maxAble = ref(true);
+// 选项卡位置
+const activeKey = ref("1");
+// 已上传数据
+const images = ref<ItemType[]>([]);
+// 附件
+const fileList = ref<any[]>([]);
+const files = ref<ItemType[]>([]);
+
+// 当前用户信息
+const userStore = useUserStore();
+const loginUser = computed(() => userStore.info ?? {});
+// 编辑器内容，双向绑定
+const content = ref<any>('');
+const uploadImgContent = ref<string>('');
+const formRef = ref<FormInstance | null>(null);
+
+// 已上传数据, 可赋初始值用于回显
+const avatar = ref(<any>[]);
+// 提交状态
+const loading = ref(false);
+// 表单数据
+const { form, resetFields, assignFields } = useFormData<Article>({
+  articleId: undefined,
+  // 封面图
+  image: '',
+  // 文章标题
+  title: '',
+  type: undefined,
+  // 展现方式
+  showType: 10,
+  // 文章来源
+  source: undefined,
+  // 文章类型
+  categoryId: undefined,
+  // 文章内容
+  content: '',
+  // 虚拟阅读量
+  virtualViews: 0,
+  // 实际阅读量
+  actualViews: 0,
+  // 用户ID
+  userId: undefined,
+  // 所属门店ID
+  shopId: undefined,
+  files: '',
+  // 排序
+  sortNumber: 100,
+  // 备注
+  comments: undefined,
+  // 状态
+  status: 0,
+  // 创建时间
+  createTime: '',
+  // 更新时间
+  updateTime: ''
+});
+
+/* 更新visible */
+const updateVisible = (value: boolean) => {
+  emit("update:visible", value);
+};
+
+// 表单验证规则
+const rules = reactive<Record<string, Rule[]>>({
+  title: [
+    {
+      required: true,
+      type: "string",
+      message: "请输入文章标题",
+      trigger: "blur"
+    }
+  ],
+  content: [
+    {
+      required: true,
+      type: "string",
+      message: "请输入文章内容",
+      trigger: "blur",
+      validator: async (_rule: RuleObject, value: string) => {
+        if (content.value == "") {
+          return Promise.reject("请输入文字内容");
+        }
+        return Promise.resolve();
+      }
+    }
+  ],
+  categoryId: [
+    {
+      required: true,
+      type: "number",
+      message: "请选择文章分类",
+      trigger: "blur"
+    }
+  ],
+  // images: [
+  //   {
+  //     required: true,
+  //     type: "string",
+  //     message: "请上传文章封面图",
+  //     trigger: "blur",
+  //     validator: async (_rule: RuleObject, value: string) => {
+  //       if (images.value.length == 0) {
+  //         return Promise.reject('请上传封面图');
+  //       }
+  //       return Promise.resolve();
+  //     }
+  //   }
+  // ],
+  sortNumber: [
+    {
+      required: true,
+      type: "number",
+      message: "请输入排序",
+      trigger: "blur"
+    }
+  ],
+  source: [
+    {
+      required: false,
+      type: "string",
+      message: "请输入文章来源",
+      trigger: "blur"
+    }
+  ]
+});
+
+const onComments = () => {
+  if (form.comments == undefined) {
+    form.comments = htmlToText(content.value)
+    form.comments = form.comments.slice(0, 120)
+  }
+}
+
+const chooseFile = (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 chooseFile2 = (data: FileRecord) => {
+  files.value.push({
+    uid: data.id,
+    url: data.path,
+    status: 'done'
+  });
+}
+
+const onDeleteItem2 = (index: number) => {
+  files.value.splice(index,1)
+}
+
+/* 上传事件 */
+const uploadHandler = (file: File) => {
+  const item: ItemType = {
+    file,
+    uid: (file as any).uid,
+    name: file.name
+  };
+  if (!file.type.startsWith('image')) {
+    message.error('只能选择图片');
+    return;
+  }
+  if (file.size / 1024 / 1024 > 2) {
+    message.error('大小不能超过 2MB');
+    return;
+  }
+  onUpload(item);
+};
+
+// 上传文件
+const onUpload = (item) => {
+  const { file } = item;
+  uploadFile(file)
+    .then((data) => {
+      images.value.push({
+        uid: data.id,
+        url: data.url,
+        status: 'done'
+      });
+      form.image = data.url;
+      message.success('上传成功');
+    })
+    .catch((e) => {
+      message.error(e.message);
+    });
+};
+
+const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+const config = ref({
+  height: 450,
+  images_upload_handler: (blobInfo, success, error) => {
+    const file = blobInfo.blob();
+    const formData = new FormData();
+    formData.append('file', file, file.name);
+    uploadOss(file).then(res => {
+      success(res.path)
+    }).catch((msg) => {
+      error(msg);
+    })
+  },
+  // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+  file_picker_callback: (callback: any, _value: any, meta: any) => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    // 设定文件可选类型
+    if (meta.filetype === 'image') {
+      input.setAttribute('accept', 'image/*');
+    } else if (meta.filetype === 'media') {
+      input.setAttribute('accept', 'video/*,.pdf');
+    }
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (!file) {
+        return;
+      }
+      if (meta.filetype === 'media') {
+        if (file.size / 1024 / 1024 > 200) {
+          editorRef.value?.alert({ content: '大小不能超过 200MB' });
+          return;
+        }
+        if(file.type.startsWith('application/pdf')){
+          uploadOss(file).then(res => {
+            const addPath = `<a href="${res.downloadUrl}" target="_blank">${res.name}</a>`;
+            content.value = content.value + addPath
+          })
+          return;
+        }
+        if (!file.type.startsWith('video/')) {
+          editorRef.value?.alert({ content: '只能选择视频文件' });
+          return;
+        }
+        uploadOss(file).then(res => {
+          callback(res.path)
+        });
+      }
+      // const reader = new FileReader();
+      // reader.onload = (e) => {
+      //   if (e.target?.result != null) {
+      //     const blob = new Blob([e.target.result], { type: file.type });
+      //     callback(URL.createObjectURL(blob));
+      //   }
+      // };
+      // reader.readAsArrayBuffer(file);
+    };
+    input.click();
+  }
+});
+
+/* 粘贴图片上传服务器并插入编辑器 */
+const onPaste = (e) => {
+  const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+  let hasFile = false;
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].type.indexOf('image') !== -1) {
+      let file = items[i].getAsFile();
+      const item: ItemType = {
+        file,
+        uid: (file as any).lastModified,
+        name: file.name
+      };
+      uploadFile(<File>item.file)
+        .then((result) => {
+          const addPath = `<p><img class="content-img" src="${result.url}"></p>`;
+          content.value = content.value + addPath
+        })
+        .catch((e) => {
+          message.error(e.message);
+        });
+      hasFile = true;
+    }
+  }
+  if (hasFile) {
+    e.preventDefault();
+  }
+}
+
+// 文件上传事件
+// const beforeUpload = (file: File) => {
+//   const item: ItemType = {
+//     file,
+//     uid: (file as any).uid,
+//     name: file.name
+//   }
+//   if (!file.type.startsWith("image")) {
+//     if (file.size / 1024 / 1024 > 100) {
+//       message.error("大小不能超过 100MB");
+//       return;
+//     }
+//   }
+//   onUploadFile(item);
+// };
+
+// const onUploadFile = (d: ItemType) => {
+//   uploadOss(<File>d.file)
+//     .then((result) => {
+//       files.value.push({
+//         uid: result.id,
+//         url: result.path,
+//         name: isImage(result.path) ? 'image' : result.name,
+//         status: "done"
+//       });
+//       message.success("上传成功");
+//     })
+//     .catch((e) => {
+//       message.error(e.message);
+//     });
+// };
+
+/* 保存编辑 */
+const save = () => {
+  if (!formRef.value) {
+    return;
+  }
+  formRef.value
+    .validate()
+    .then(() => {
+      loading.value = true;
+      const formData = {
+        ...form,
+        content: content.value,
+        files: JSON.stringify(files.value)
+      };
+      const saveOrUpdate = isUpdate.value ? updateArticle : addArticle;
+      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) {
+      form.categoryId = props.categoryId;
+      content.value = '';
+      if (props.data) {
+        loading.value = false;
+        assignFields({
+          ...props.data
+        });
+        images.value = [];
+        files.value = [];
+        fileList.value = [];
+        if(props.data.image){
+          images.value.push({
+            uid: 1,
+            url: props.data.image,
+            status: 'done'
+          });
+        }
+        if(props.data.files){
+          files.value = JSON.parse(props.data.files)
+          fileList.value = JSON.parse(props.data.files)
+        }
+        if(props.data.articleId){
+          getArticle(props.data.articleId).then(data => {
+            content.value = data.content;
+          })
+        }
+        isUpdate.value = true;
+      } else {
+        isUpdate.value = false;
+        images.value = [];
+        files.value = [];
+        content.value = '';
+      }
+    } else {
+      resetFields();
+      formRef.value?.clearValidate();
+    }
+  }
+);
+</script>
+<style lang="less">
+.tab-pane {
+  min-height: 300px;
+}
+
+.form-item-help {
+  font-size: 12px;
+  // line-height: 2;
+  line-height: 1.5;
+  padding-top: 4px;
+  min-height: 22px;
+  // margin-top: -2px;
+  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+
+  a {
+    margin: 0 3px;
+  }
+
+  .extra,
+  small {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12.5px !important;
+  }
+
+  .extra {
+    margin-bottom: 4px !important;
+  }
+}
+</style>

src/views/cms/article/components/article-info.vue

@@ -0,0 +1,173 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <a-drawer
+    width="60%"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="'文章预览'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    :footer="null"
+  >
+    <a-form
+      :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
+      :wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
+    >
+      <div class="base-form" style="margin-bottom: 20px">
+        <div class="card-head">
+          <h2>{{ record.title }}</h2>
+        </div>
+        <div class="card-desc">
+          <a-descriptions :column="4" :labelStyle="{ color: '#999999' }">
+            <a-descriptions-item label="作者">
+              <a-tooltip :title="`${record.nickname}`">
+                <a-avatar :src="record.userAvatar" size="small" />
+                {{ record.nickname }}
+              </a-tooltip>
+            </a-descriptions-item>
+            <a-descriptions-item label="文章ID">
+              <span>{{ record.articleId }}</span>
+            </a-descriptions-item>
+            <a-descriptions-item label="来源">
+              <span>{{ record.source }}</span>
+            </a-descriptions-item>
+            <a-descriptions-item label="发布时间">
+              <span>{{ timeAgo(record.createTime) }}</span>
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
+        <div class="content">
+          <!-- 编辑器 -->
+          <tinymce-editor
+            v-model:value="record.content"
+            :disabled="disabled"
+            :init="config"
+          />
+        </div>
+      </div>
+    </a-form>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { timeAgo } from 'ele-admin-pro';
+  import { ref, reactive, watch } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import type { Article } from '@/api/cms/article/model';
+  import { FILE_SERVER } from '@/config/setting';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+  import { getArticle } from "@/api/cms/article";
+
+  const useForm = Form.useForm;
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Article | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 文章信息
+  const record = reactive<Article>({
+    // 文章id
+    articleId: 0,
+    // 文章标题
+    title: '',
+    // 文章类型
+    categoryId: 0,
+    // 封面图
+    avatar: '',
+    // 文章内容
+    content: '',
+    // 虚拟阅读量
+    virtualViews: '',
+    // 实际阅读量
+    actualViews: '',
+    // 文章来源
+    source: '',
+    // 用户ID
+    userId: '',
+    nickname: '',
+    userAvatar: '',
+    // 所属门店ID
+    shopId: '',
+    // 排序
+    sortNumber: 100,
+    // 备注
+    comments: '',
+    // 状态
+    status: 0,
+    // 创建时间
+    createTime: '',
+    // 更新时间
+    updateTime: ''
+  });
+
+  // 请求状态
+  const loading = ref(true);
+  const { resetFields } = useForm(record);
+  const disabled = ref(true);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  /* 打开外部链接 */
+  const openUrl = (record) => {
+    window.open(record.panel);
+  };
+
+  const config = ref({
+    toolbar: false,
+    menubar: false,
+    height: 620,
+    darkTheme: true,
+    inline: true
+    // quickbars_insert_toolbar: false
+  });
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          loading.value = false;
+          getArticle(Number(props.data.articleId)).then((data) => {
+            assignObject(record, data);
+          });
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
+<style lang="less">
+  .tab-pane {
+    min-height: 100px;
+  }
+  .card-head {
+    display: flex;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 30px;
+  }
+  .base-form {
+    .card-desc {
+      color: #e3e3e3;
+    }
+    .content {
+      margin-top: 20px;
+      line-height: 2em;
+      font-size: 17px;
+      color: #333333;
+    }
+  }
+</style>

src/views/cms/article/components/article-search.vue

@@ -0,0 +1,104 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button
+      type="primary"
+      class="ele-btn-icon"
+      @click="add"
+    >
+      <template #icon>
+        <plus-outlined />
+      </template>
+      <span>新建</span>
+    </a-button>
+    <a-button
+      danger
+      type="primary"
+      class="ele-btn-icon"
+      @click="removeBatch"
+      :disabled="props.selection.length === 0"
+    >
+      <template #icon>
+        <delete-outlined />
+      </template>
+      <span>批量删除</span>
+    </a-button>
+    <a-input-search
+      allow-clear
+      v-model:value="searchText"
+      placeholder="请输入关键词"
+      @search="search"
+      @pressEnter="search"
+    >
+      <template #addonBefore>
+        <a-select v-model:value="type" style="width: 100px; margin: -5px -12px">
+          <a-select-option value="title">文章标题</a-select-option>
+          <a-select-option value="articleId">文章ID</a-select-option>
+          <a-select-option value="userId">用户ID</a-select-option>
+        </a-select>
+      </template>
+    </a-input-search>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import {
+    PlusOutlined,
+    SearchOutlined,
+    DeleteOutlined
+  } from '@ant-design/icons-vue';
+  import useSearch from '@/utils/use-search';
+  import type { ArticleParam } from '@/api/cms/article/model';
+  import { ref, watch } from 'vue';
+  import { assignObject } from 'ele-admin-pro';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: ArticleParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+  }>();
+
+  const props = defineProps<{
+    // 勾选的项目
+    selection?: [];
+  }>();
+
+  // 表单数据
+  const { where } = useSearch<ArticleParam>({
+    title: ''
+  });
+
+  // 搜索内容
+  const searchText = ref('');
+  const type = ref('title');
+  /* 搜索 */
+  const search = () => {
+    assignObject(where, {});
+    if (type.value == 'title') {
+      where.title = searchText.value;
+    }
+    if (type.value == 'articleId') {
+      where.articleId = Number(searchText.value);
+    }
+    if (type.value == 'userId') {
+      where.userId = Number(searchText.value);
+    }
+    emit('search', where);
+  };
+
+  /*  添加 */
+  const add = () => {
+    emit('add');
+  };
+
+  // 批量删除
+  const removeBatch = () => {
+    emit('remove');
+  };
+
+  // 监听变化
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/cms/article/components/category-edit.bak.vue

@@ -0,0 +1,350 @@
+<!-- 分类编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="620"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改分类' : '添加分类'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 6, sm: 4, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 18, sm: 20, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="上级分类" name="parentId">
+            <a-tree-select
+              allow-clear
+              :tree-data="categoryList"
+              tree-default-expand-all
+              placeholder="请选择上级分类"
+              :value="form.parentId || undefined"
+              :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+              @update:value="(value?: number) => (form.parentId = value)"
+            />
+          </a-form-item>
+          <a-form-item label="分类名称" name="title">
+            <a-input
+              allow-clear
+              placeholder="请输入分类名称"
+              v-model:value="form.title"
+              @pressEnter="save"
+            />
+          </a-form-item>
+          <a-form-item label="类型" name="type">
+            <a-select
+              ref="select"
+              v-model:value="form.type"
+              style="width: 208px"
+              @change="onType"
+            >
+              <a-select-option :value="0">文章列表</a-select-option>
+              <a-select-option :value="1">单页内容</a-select-option>
+              <a-select-option :value="2">外部链接</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="选择页面" name="path" v-if="form.type == 1">
+            <SelectDesign
+              :placeholder="`请选择页面`"
+              v-model:value="form.pageName"
+              @done="choosePageId"
+            />
+          </a-form-item>
+          <a-form-item
+            :label="form.type == 2 ? '链接地址' : '路由地址'"
+            name="path"
+            v-if="form.type == 0 || form.type == 2"
+          >
+            <a-input
+              allow-clear
+              :placeholder="
+                form.type == 2 ? '请输入链接地址' : '请输入路由地址'
+              "
+              v-model:value="form.path"
+              @pressEnter="save"
+            />
+          </a-form-item>
+          <a-form-item
+            label="组件路径"
+            name="component"
+            v-if="form.type != 2 && form.type != 1"
+          >
+            <a-input
+              allow-clear
+              placeholder="请输入组件地址"
+              v-model:value="form.component"
+              @pressEnter="save"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="排序号" name="sortNumber">
+            <a-input-number
+              :min="0"
+              :max="99999"
+              class="ele-fluid"
+              placeholder="请输入排序号"
+              v-model:value="form.sortNumber"
+            />
+          </a-form-item>
+          <a-form-item label="是否展示" name="status">
+            <a-switch
+              checked-children="是"
+              un-checked-children="否"
+              :checked="form.status === 0"
+              @update:checked="updateHideValue"
+            />
+          </a-form-item>
+          <a-form-item label="首页显示">
+            <a-switch
+              checked-children="是"
+              un-checked-children="否"
+              :checked="form.showIndex === 1"
+              @update:checked="updateIndexValue"
+            />
+          </a-form-item>
+          <a-form-item label="是否推荐">
+            <a-switch
+              checked-children="是"
+              un-checked-children="否"
+              :checked="form.recommend === 1"
+              @update:checked="updateRecommendValue"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <div style="margin-bottom: 22px">
+        <a-divider />
+      </div>
+      <a-form-item
+        label="备注"
+        name="comments"
+        :label-col="
+          styleResponsive ? { md: 3, sm: 4, xs: 24 } : { flex: '90px' }
+        "
+        :wrapper-col="
+          styleResponsive ? { md: 21, sm: 20, xs: 24 } : { flex: '1' }
+        "
+      >
+        <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 } from 'ele-admin-pro';
+  import {
+    addArticleCategory,
+    updateArticleCategory
+  } from '@/api/cms/category';
+  import type { ArticleCategory } from '@/api/cms/category/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { Design } from '@/api/cms/design/model';
+  import type { Rule } from 'ant-design-vue/es/form';
+
+  const useForm = Form.useForm;
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: ArticleCategory | null;
+    // 分类id
+    categoryId?: number;
+    // 全部分类
+    categoryList: ArticleCategory[];
+  }>();
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const form = reactive<ArticleCategory>({
+    categoryId: undefined,
+    type: 0,
+    title: '',
+    parentId: undefined,
+    image: '',
+    path: '/article/:id',
+    component: '/article/index',
+    pageId: undefined,
+    pageName: '',
+    status: 0,
+    showIndex: 0,
+    recommend: 0,
+    sortNumber: 100
+  });
+
+  // 表单验证规则
+  const rules = reactive({
+    type: [
+      {
+        required: true,
+        message: '请选择分类类型',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    title: [
+      {
+        required: true,
+        message: '请输入分类名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    status: [
+      {
+        required: true,
+        message: '请设置是否展示',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    meta: [
+      {
+        type: 'string',
+        validator: async (_rule: Rule, value: string) => {
+          if (value) {
+            const msg = '请输入正确的JSON格式';
+            try {
+              const obj = JSON.parse(value);
+              if (typeof obj !== 'object' || obj === null) {
+                return Promise.reject(msg);
+              }
+            } catch (_e) {
+              return Promise.reject(msg);
+            }
+          }
+          return Promise.resolve();
+        },
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const { resetFields, validate } = useForm(form, rules);
+
+  const onType = (index: number) => {
+    if (index == 0) {
+      form.path = '/article/:id';
+      form.component = '/article/index';
+    }
+    if (index == 1) {
+      form.path = '/page/:id';
+      form.component = '/about/index';
+    }
+    if (index == 2) {
+      form.path = undefined;
+      form.component = '';
+    }
+  };
+
+  const choosePageId = (data: Design) => {
+    form.pageName = data.name;
+    form.pageId = data.pageId;
+    form.title = data.name;
+  };
+
+  const updateHideValue = (value: boolean) => {
+    form.status = value ? 0 : 1;
+  };
+
+  const updateIndexValue = (value: boolean) => {
+    form.showIndex = value ? 1 : 0;
+  };
+
+  const updateRecommendValue = (value: boolean) => {
+    form.recommend = value ? 1 : 0;
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    validate()
+      .then(() => {
+        loading.value = true;
+        const categoryData = {
+          ...form,
+          parentId: form.parentId || 0
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateArticleCategory
+          : addArticleCategory;
+        saveOrUpdate(categoryData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignObject(form, props.data);
+          isUpdate.value = true;
+        } else {
+          form.parentId = props.categoryId;
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>

src/views/cms/article/components/category-edit.vue

@@ -0,0 +1,289 @@
+<!-- 分类编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="620"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改分类' : '添加分类'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 7, sm: 4, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 18, sm: 20, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="上级分类" name="parentId">
+            <a-tree-select
+              allow-clear
+              :tree-data="categoryList"
+              tree-default-expand-all
+              placeholder="请选择上级分类"
+              :value="form.parentId || undefined"
+              :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+              @update:value="(value?: number) => (form.parentId = value)"
+            />
+          </a-form-item>
+          <a-form-item label="分类名称" name="title">
+            <a-input
+              allow-clear
+              placeholder="请输入分类名称"
+              v-model:value="form.title"
+              @pressEnter="save"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="排序号" name="sortNumber">
+            <a-input-number
+              :min="0"
+              :max="99999"
+              class="ele-fluid"
+              placeholder="请输入排序号"
+              v-model:value="form.sortNumber"
+            />
+          </a-form-item>
+          <a-form-item label="是否展示" name="status">
+            <a-switch
+              checked-children="是"
+              un-checked-children="否"
+              :checked="form.status === 0"
+              @update:checked="updateHideValue"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <div style="margin-bottom: 22px">
+        <a-divider />
+      </div>
+      <a-form-item
+        label="备注"
+        name="comments"
+        :label-col="
+          styleResponsive ? { md: 3, sm: 4, xs: 24 } : { flex: '90px' }
+        "
+        :wrapper-col="
+          styleResponsive ? { md: 21, sm: 20, xs: 24 } : { flex: '1' }
+        "
+      >
+        <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 } from 'ele-admin-pro';
+  import {
+    addArticleCategory,
+    updateArticleCategory
+  } from '@/api/cms/category';
+  import type { ArticleCategory } from '@/api/cms/category/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { Design } from '@/api/cms/design/model';
+  import type { Rule } from 'ant-design-vue/es/form';
+
+  const useForm = Form.useForm;
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: ArticleCategory | null;
+    // 分类id
+    categoryId?: number;
+    // 全部分类
+    categoryList: ArticleCategory[];
+  }>();
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const form = reactive<ArticleCategory>({
+    categoryId: undefined,
+    type: 0,
+    title: '',
+    parentId: undefined,
+    image: '',
+    path: '/article/:id',
+    component: '/article/index',
+    pageId: undefined,
+    pageName: '',
+    status: 0,
+    showIndex: 0,
+    recommend: 0,
+    sortNumber: 100
+  });
+
+  // 表单验证规则
+  const rules = reactive({
+    type: [
+      {
+        required: true,
+        message: '请选择分类类型',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    title: [
+      {
+        required: true,
+        message: '请输入分类名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    status: [
+      {
+        required: true,
+        message: '请设置是否展示',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    meta: [
+      {
+        type: 'string',
+        validator: async (_rule: Rule, value: string) => {
+          if (value) {
+            const msg = '请输入正确的JSON格式';
+            try {
+              const obj = JSON.parse(value);
+              if (typeof obj !== 'object' || obj === null) {
+                return Promise.reject(msg);
+              }
+            } catch (_e) {
+              return Promise.reject(msg);
+            }
+          }
+          return Promise.resolve();
+        },
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const { resetFields, validate } = useForm(form, rules);
+
+  const onType = (index: number) => {
+    if (index == 0) {
+      form.path = '/article/:id';
+      form.component = '/article/index';
+    }
+    if (index == 1) {
+      form.path = '/page/:id';
+      form.component = '/about/index';
+    }
+    if (index == 2) {
+      form.path = undefined;
+      form.component = '';
+    }
+  };
+
+  const choosePageId = (data: Design) => {
+    form.pageName = data.name;
+    form.pageId = data.pageId;
+    form.title = data.name;
+  };
+
+  const updateHideValue = (value: boolean) => {
+    form.status = value ? 0 : 1;
+  };
+
+  const updateIndexValue = (value: boolean) => {
+    form.showIndex = value ? 1 : 0;
+  };
+
+  const updateRecommendValue = (value: boolean) => {
+    form.recommend = value ? 1 : 0;
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    validate()
+      .then(() => {
+        loading.value = true;
+        const categoryData = {
+          ...form,
+          parentId: form.parentId || 0
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateArticleCategory
+          : addArticleCategory;
+        saveOrUpdate(categoryData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignObject(form, props.data);
+          isUpdate.value = true;
+        } else {
+          form.parentId = props.categoryId;
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>

src/views/cms/article/components/category-select.vue

@@ -0,0 +1,39 @@
+<!-- 目录选择下拉框 -->
+<template>
+  <a-tree-select
+    allow-clear
+    tree-default-expand-all
+    :placeholder="placeholder"
+    :value="value || undefined"
+    :tree-data="data"
+    :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+    @update:value="updateValue"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { Article } from '@/api/cms/article/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value?: number): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      // 选中的数据(v-modal)
+      value?: number;
+      // 提示信息
+      placeholder?: any;
+      // 文章分类
+      data: Article[];
+    }>(),
+    {
+      placeholder: '请选择上级分类'
+    }
+  );
+
+  /* 更新选中数据 */
+  const updateValue = (value?: number) => {
+    emit('update:value', value);
+  };
+</script>

src/views/cms/article/dictionary/source-select.vue

@@ -0,0 +1,51 @@
+<!-- 文章来源选择下拉框 -->
+<template>
+  <a-select
+    optionFilterProp="label"
+    :options="data"
+    allow-clear
+    :value="value"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+    @change="onChange"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { getDictionaryOptions } from '@/utils/common';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+    (e: 'change'): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择文章来源'
+    }
+  );
+
+  // 字典数据
+  const data = getDictionaryOptions('articleSource');
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    emit('update:value', value);
+  };
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+
+  /* 选择事件 */
+  const onChange = (e) => {
+    emit('change', e);
+  };
+</script>

src/views/cms/article/index.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false" :body-style="{ padding: '16px' }">
+      <ele-split-layout
+        width="266px"
+        allow-collapse
+        :right-style="{ overflow: 'hidden' }"
+        :style="{ minHeight: 'calc(100vh - 152px)' }"
+      >
+        <div>
+          <ele-toolbar theme="default">
+            <a-space :size="10">
+              <a-button
+                type="primary"
+                :size="`small`"
+                class="ele-btn-icon"
+                @click="openEdit()"
+              >
+                <template #icon>
+                  <plus-outlined />
+                </template>
+              </a-button>
+              <a-button
+                type="primary"
+                :size="`small`"
+                :disabled="!current"
+                class="ele-btn-icon"
+                @click="openEdit(current)"
+              >
+                <template #icon>
+                  <edit-outlined />
+                </template>
+              </a-button>
+              <a-button
+                danger
+                type="primary"
+                :size="`small`"
+                :disabled="!current"
+                class="ele-btn-icon"
+                @click="remove"
+              >
+                <template #icon>
+                  <delete-outlined />
+                </template>
+              </a-button>
+            </a-space>
+          </ele-toolbar>
+          <div class="ele-border-split sys-category-list">
+            <a-tree
+              :tree-data="data"
+              v-model:expanded-keys="expandedRowKeys"
+              v-model:selected-keys="selectedRowKeys"
+              @select="onTreeSelect"
+            >
+              <template #title="{ type, key: treeKey, title }">
+                <a-dropdown :trigger="['contextmenu']">
+                  <span>{{ title }}</span>
+                  <template #overlay v-if="type == 0">
+                    <a-menu
+                      @click="
+                        ({ key: menuKey }) =>
+                          onContextMenuClick(treeKey, menuKey)
+                      "
+                    >
+                      <a-menu-item key="1">修改</a-menu-item>
+                      <a-menu-item key="2">删除</a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+              </template>
+            </a-tree>
+          </div>
+        </div>
+        <template #content>
+          <list
+            v-if="current"
+            :category-list="data"
+            :data="current"
+            :category-id="current.categoryId"
+          />
+        </template>
+      </ele-split-layout>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <category-edit
+      v-model:visible="showEdit"
+      :data="editData"
+      :category-list="data"
+      :category-id="current?.categoryId"
+      @done="query"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import { toTreeData, eachTreeData } from 'ele-admin-pro';
+  import List from './list.vue';
+  import CategoryEdit from './components/category-edit.vue';
+  import {
+    listArticleCategory,
+    removeArticleCategory
+  } from '@/api/cms/category';
+  import { ArticleCategory } from '@/api/cms/category/model';
+
+  // 加载状态
+  const loading = ref(true);
+
+  // 树形数据
+  const data = ref<ArticleCategory[]>([]);
+
+  // 树展开的key
+  const expandedRowKeys = ref<number[]>([]);
+
+  // 树选中的key
+  const selectedRowKeys = ref<number[]>([]);
+
+  // 选中数据
+  const current = ref<ArticleCategory | any>(null);
+
+  // 是否显示表单弹窗
+  const showEdit = ref(false);
+
+  // 编辑回显数据
+  const editData = ref<ArticleCategory | null>(null);
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+    listArticleCategory()
+      .then((list) => {
+        loading.value = false;
+        const eks: number[] = [];
+        list.forEach((d) => {
+          d.key = d.categoryId;
+          d.value = d.categoryId;
+          if (typeof d.categoryId === 'number') {
+            eks.push(d.categoryId);
+          }
+        });
+        expandedRowKeys.value = eks;
+        data.value = toTreeData({
+          data: list.map((d) => {
+            d.disabled = d.type != 0;
+            return d;
+          }),
+          idField: 'categoryId',
+          parentIdField: 'parentId'
+        });
+        if (list.length) {
+          if (typeof list[0].categoryId === 'number') {
+            selectedRowKeys.value = [list[0].categoryId];
+          }
+          current.value = list[0];
+        } else {
+          selectedRowKeys.value = [];
+          current.value = null;
+        }
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  /* 选择数据 */
+  const onTreeSelect = () => {
+    current.value = {};
+    eachTreeData(data.value, (d) => {
+      if (
+        typeof d.categoryId === 'number' &&
+        selectedRowKeys.value.includes(d.categoryId)
+      ) {
+        current.value = d;
+        return false;
+      }
+    });
+  };
+
+  const onContextMenuClick = (treeKey: number, menuKey: number) => {
+    // 修改
+    if (menuKey == 1) {
+      openEdit(current.value);
+    }
+    // 删除
+    if (menuKey == 2) {
+      remove();
+    }
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (item?: ArticleCategory | null) => {
+    editData.value = item ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除 */
+  const remove = () => {
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的分类吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeArticleCategory(current.value?.categoryId)
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            query();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ArticleIndex'
+  };
+</script>
+
+<style lang="less" scoped>
+  .sys-category-list {
+    padding: 12px 6px;
+    height: calc(100vh - 242px);
+    border-width: 1px;
+    border-style: solid;
+    overflow: auto;
+  }
+</style>

src/views/cms/article/list.vue

@@ -0,0 +1,324 @@
+<template>
+  <!-- 表格 -->
+  <ele-pro-table
+    ref="tableRef"
+    row-key="articleId"
+    :columns="columns"
+    :datasource="datasource"
+    v-model:selection="selection"
+    :customRow="customRow"
+    height="calc(100vh - 290px)"
+    tool-class="ele-toolbar-form"
+    :scroll="{ x: 800 }"
+  >
+    <template #toolbar>
+      <article-search
+        :selection="selection"
+        @search="reload"
+        @add="openEdit()"
+        @remove="removeBatch"
+      />
+    </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'title'">
+        <a-space class="title">
+          <a-avatar shape="square" :width="45" :src="record.image">
+            <template #icon>
+              <AntDesignOutlined />
+            </template>
+          </a-avatar>
+          <a @click="openPreview('/a/' + record.articleId)">{{
+            record.title
+          }}</a>
+        </a-space>
+      </template>
+      <template v-if="column.key === 'image'"> </template>
+      <template v-if="column.key === 'status'">
+        <a-tag
+          v-if="record.status === 0"
+          color="green"
+          @click="(checked: boolean) => editStatus(record.status, record)"
+          >显示</a-tag
+        >
+        <a-tag
+          v-if="record.status === 1"
+          color="red"
+          @click="(checked: boolean) => editStatus(record.status, record)"
+          >隐藏</a-tag
+        >
+      </template>
+      <template v-if="column.key === 'comments'">
+        <a-tooltip :title="record.comments" placement="topLeft">
+          {{ record.comments }}
+        </a-tooltip>
+      </template>
+      <template v-if="column.key === 'nickname'">
+        <a-tooltip
+          :title="`${record.nickname} ${toDateString(record.createTime)}`"
+        >
+          <a-avatar :src="record.userAvatar" size="small" />
+          {{ timeAgo(record.createTime) }}
+        </a-tooltip>
+      </template>
+      <!--      <template v-if="column.key === 'createTime'">-->
+      <!--        <a-tooltip :title="`${toDateString(record.createTime)}`">-->
+      <!--          <span>{{ timeAgo(record.createTime) }}</span>-->
+      <!--        </a-tooltip>-->
+      <!--      </template>-->
+      <template v-else-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>
+  <!-- 编辑弹窗 -->
+  <article-edit
+    :data="current"
+    v-model:visible="showEdit"
+    :category-list="categoryList"
+    :category-id="categoryId"
+    @done="reload"
+  />
+  <!-- 文章预览 -->
+  <article-info v-model:visible="showInfo" :data="current" @done="reload" />
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { AntDesignOutlined } from '@ant-design/icons-vue';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { toDateString } from 'ele-admin-pro';
+  import ArticleSearch from './components/article-search.vue';
+  import ArticleEdit from './components/article-edit.vue';
+  import ArticleInfo from './components/article-info.vue';
+  import { timeAgo } from 'ele-admin-pro';
+  import {
+    pageArticle,
+    removeArticle,
+    removeBatchArticle,
+    updateArticleStatus
+  } from '@/api/cms/article';
+  import type { Article, ArticleParam } from '@/api/cms/article/model';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  // import router from '@/router';
+  import { ArticleCategory } from '@/api/cms/category/model';
+  import { openPreview } from '@/utils/common';
+
+  const props = defineProps<{
+    // 文章 id
+    categoryId?: number;
+    // 全部分类
+    categoryList: ArticleCategory[];
+  }>();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<any[]>([]);
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    // {
+    //   key: 'index',
+    //   width: 48,
+    //   align: 'center',
+    //   fixed: 'left',
+    //   hideInSetting: true,
+    //   customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    // },
+    {
+      title: 'ID',
+      width: 80,
+      dataIndex: 'articleId'
+    },
+    {
+      title: '文章标题',
+      dataIndex: 'title',
+      key: 'title'
+    },
+    {
+      title: '点击',
+      dataIndex: 'actualViews',
+      hideInTable: true,
+      sorter: true
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      width: 100,
+      align: 'center',
+      sorter: true
+    },
+    {
+      title: '状态',
+      key: 'status',
+      filters: [
+        {
+          text: '显示',
+          value: 0
+        },
+        {
+          text: '隐藏',
+          value: 1
+        }
+      ],
+      hideInTable: true,
+      filterMultiple: false,
+      align: 'center'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 120,
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 100,
+      align: 'center'
+    }
+  ]);
+
+  // 当前编辑数据
+  const current = ref<Article | null>(null);
+  // 是否显示文章详情
+  const showInfo = ref(false);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (props.categoryId) {
+      where.categoryId = props.categoryId;
+    }
+    // 按条件排序
+    if (filters) {
+      where.virtualViews = filters.virtualViews;
+      where.actualViews = filters.actualViews;
+      where.sortNumber = filters.sortNumber;
+      where.status = filters.status;
+    }
+    return pageArticle({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: ArticleParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开用户详情弹窗 */
+  const openInfo = (row?: Article) => {
+    current.value = row ?? null;
+    showInfo.value = true;
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Article) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Article) => {
+    const hide = message.loading('请求中..', 0);
+    removeArticle(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);
+        removeBatchArticle(selection.value.map((d) => d.articleId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 修改文章状态 */
+  const editStatus = (checked: boolean, row: Article) => {
+    const status = checked ? 0 : 1;
+    updateArticleStatus(row.articleId, status)
+      .then((msg) => {
+        row.status = status;
+        message.success(msg);
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Article) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  // 监听文章 id 变化
+  watch(
+    () => props.categoryId,
+    () => {
+      reload();
+    }
+  );
+</script>

src/views/cms/article/preview/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <a-card class="ele-body">
+    <a-spin :spinning="spinning">
+      <a-typography-title :level="3" class="ele-text-center">{{
+        form.title
+      }}</a-typography-title>
+      <a-divider dashed />
+      <div class="content" v-html="form.content"></div>
+    </a-spin>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { getArticle } from '@/api/cms/article';
+  import { Article } from '@/api/cms/article/model';
+  import useFormData from '@/utils/use-form-data';
+
+  const { currentRoute } = useRouter();
+  // 是否开启响应式布局
+  const title = ref('');
+  const spinning = ref(true);
+  // 应用信息
+  const { form, assignFields } = useFormData<Article>({
+    articleId: undefined,
+    title: '',
+    content: '',
+    createTime: ''
+  });
+
+  /**
+   * 加载数据
+   */
+  const reload = (id: number) => {
+    console.log(id);
+    // 加载项目详情
+    getArticle(id).then((data) => {
+      assignFields(data);
+      if (data.title) {
+        title.value = data.title;
+        // 修改页签标题
+        setPageTabTitle(data.title);
+      }
+      spinning.value = false;
+    });
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { params } = unref(route);
+      const { id } = params;
+      if (id) {
+        reload(Number(id));
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ArticlePreview'
+  };
+</script>
+<style>
+  body {
+    background: #f0f2f5;
+  }
+  .ele-body {
+    margin: 0 auto;
+    max-width: 1000px;
+  }
+  .content {
+    padding: 10px;
+  }
+  * {
+    max-width: 100%;
+  }
+</style>

src/views/cms/category/components/category-edit.vue

@@ -0,0 +1,264 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="620"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改分类' : '新建分类'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 7, sm: 4, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 18, sm: 20, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="上级分类" name="parentId">
+            <a-tree-select
+              allow-clear
+              :tree-data="categoryList"
+              tree-default-expand-all
+              placeholder="请选择上级分类"
+              :value="form.parentId || undefined"
+              :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+              @update:value="(value?: number) => (form.parentId = value)"
+            />
+          </a-form-item>
+          <a-form-item label="分类名称" name="title">
+            <a-input
+              allow-clear
+              placeholder="请输入分类名称"
+              v-model:value="form.title"
+              @pressEnter="save"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="排序号" name="sortNumber">
+            <a-input-number
+              :min="0"
+              :max="99999"
+              class="ele-fluid"
+              placeholder="请输入排序号"
+              v-model:value="form.sortNumber"
+            />
+          </a-form-item>
+          <a-form-item label="是否展示">
+            <a-switch
+              checked-children="是"
+              un-checked-children="否"
+              :checked="form.status === 0"
+              @update:checked="updateHideValue"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <div style="margin-bottom: 22px">
+        <a-divider />
+      </div>
+      <a-form-item
+        label="备注"
+        name="comments"
+        :label-col="
+          styleResponsive ? { md: 3, sm: 4, xs: 24 } : { flex: '90px' }
+        "
+        :wrapper-col="
+          styleResponsive ? { md: 21, sm: 20, xs: 24 } : { flex: '1' }
+        "
+      >
+        <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 { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { ArticleCategory } from '@/api/cms/category/model';
+  import {
+    addArticleCategory,
+    updateArticleCategory
+  } from '@/api/cms/category';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: ArticleCategory | null;
+    // 上级分类id
+    parentId?: number;
+    // 全部分类数据
+    categoryList: ArticleCategory[];
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<ArticleCategory>({
+    categoryId: undefined,
+    title: '',
+    parentId: undefined,
+    image: '',
+    status: 0,
+    sortNumber: 100
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    title: [
+      {
+        required: true,
+        message: '请输入分类名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    meta: [
+      {
+        type: 'string',
+        validator: async (_rule: Rule, value: string) => {
+          if (value) {
+            const msg = '请输入正确的JSON格式';
+            try {
+              const obj = JSON.parse(value);
+              if (typeof obj !== 'object' || obj === null) {
+                return Promise.reject(msg);
+              }
+            } catch (_e) {
+              return Promise.reject(msg);
+            }
+          }
+          return Promise.resolve();
+        },
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const categoryForm = {
+          ...form,
+          // menuType 对应的值与后端不一致在前端处理
+          menuType: form.menuType === 2 ? 1 : 0,
+          parentId: form.parentId || 0
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateArticleCategory
+          : addArticleCategory;
+        saveOrUpdate(categoryForm)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const updateHideValue = (value: boolean) => {
+    form.status = value ? 0 : 1;
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields({
+            ...props.data,
+            parentId:
+              props.data.parentId === 0 ? undefined : props.data.parentId
+          });
+          isUpdate.value = true;
+        } else {
+          form.parentId = props.parentId;
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
+
+<script lang="ts">
+  import * as icons from '@/layout/menu-icons';
+
+  export default {
+    components: icons,
+    data() {
+      return {
+        iconData: [
+          {
+            title: '已引入的图标',
+            icons: Object.keys(icons)
+          }
+        ]
+      };
+    }
+  };
+</script>

src/views/cms/category/index.vue

@@ -0,0 +1,406 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="categoryId"
+        :columns="columns"
+        :datasource="datasource"
+        :parse-data="parseData"
+        :need-page="false"
+        :customRow="customRow"
+        :expand-icon-column-index="1"
+        :expanded-row-keys="expandedRowKeys"
+        :scroll="{ x: 1200 }"
+        cache-key="proArticleCategoryTable"
+        @done="onDone"
+        @expand="onExpand"
+      >
+        <template #toolbar>
+          <a-space>
+            <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
+              <template #icon>
+                <plus-outlined />
+              </template>
+              <span>新建</span>
+            </a-button>
+            <a-button type="dashed" class="ele-btn-icon" @click="expandAll">
+              展开全部
+            </a-button>
+            <a-button type="dashed" class="ele-btn-icon" @click="foldAll">
+              折叠全部
+            </a-button>
+            <!-- 搜索表单 -->
+            <a-input-search
+              allow-clear
+              v-model:value="searchText"
+              placeholder="请输入搜索关键词"
+              @search="reload"
+              @pressEnter="reload"
+            />
+          </a-space>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'path'">
+            <span class="ele-text-placeholder">{{ record.path }}</span>
+          </template>
+          <template v-if="column.key === 'component'">
+            <span class="ele-text-placeholder">{{ record.component }}</span>
+          </template>
+          <template v-if="column.key === 'type'">
+            <a-tag v-if="isExternalLink(record.path)" color="red">外链</a-tag>
+            <a-tag v-else-if="isExternalLink(record.component)" color="orange">
+              内链
+            </a-tag>
+            <a-tag v-else-if="isDirectory(record)" color="blue">目录</a-tag>
+            <a-tag v-else-if="record.type === 0">列表</a-tag>
+            <a-tag v-else-if="record.type === 1" color="purple">页面</a-tag>
+            <a-tag v-else-if="record.type === 2" color="orange">链接</a-tag>
+          </template>
+          <template v-else-if="column.key === 'title'">
+            <a-avatar
+              :size="22"
+              shape="square"
+              :src="`${record.image}`"
+              style="margin-right: 10px"
+              v-if="record.image"
+            />
+            <a @click="openPreview('/article/' + record.categoryId)">{{
+              record.title
+            }}</a>
+          </template>
+          <template v-if="column.key === 'showIndex'">
+            <a-space @click="onShowIndex(record)">
+              <span v-if="record.showIndex === 1" class="ele-text-success"
+                ><CheckOutlined
+              /></span>
+              <span v-else class="ele-text-placeholder"><CloseOutlined /></span>
+            </a-space>
+          </template>
+          <template v-if="column.key === 'recommend'">
+            <a-space @click="onRecommend(record)">
+              <span v-if="record.recommend === 1" class="ele-text-success"
+                ><CheckOutlined
+              /></span>
+              <span v-else class="ele-text-placeholder"><CloseOutlined /></span>
+            </a-space>
+          </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="orange">隐藏</a-tag>
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(null, record.categoryId)">添加</a>
+              <a-divider type="vertical" />
+              <a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
+              <a-divider type="vertical" />
+              <a @click="openEdit(record)">修改</a>
+              <a-divider type="vertical" />
+              <a-popconfirm
+                placement="topRight"
+                title="确定要删除此分类吗？"
+                @confirm="remove(record)"
+              >
+                <a class="ele-text-danger">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <category-edit
+      v-model:visible="showEdit"
+      :data="current"
+      :parent-id="parentId"
+      :category-list="categoryData"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import {
+    ArrowUpOutlined,
+    PlusOutlined,
+    CheckOutlined,
+    CloseOutlined
+  } from '@ant-design/icons-vue';
+  import type {
+    DatasourceFunction,
+    ColumnItem,
+    EleProTableDone
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import {
+    messageLoading,
+    toDateString,
+    isExternalLink,
+    toTreeData,
+    eachTreeData
+  } from 'ele-admin-pro/es';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import CategoryEdit from './components/category-edit.vue';
+  import {
+    listArticleCategory,
+    removeArticleCategory,
+    updateArticleCategory
+  } from '@/api/cms/category';
+  import type {
+    ArticleCategory,
+    ArticleCategoryParam
+  } from '@/api/cms/category/model';
+  import { openNew, openPreview } from '@/utils/common';
+  import { getSiteInfo } from '@/api/layout';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'categoryId',
+      width: 80
+    },
+    {
+      title: '分类名称',
+      dataIndex: 'title',
+      key: 'title',
+      showSorterTooltip: false,
+      ellipsis: true
+    },
+    // {
+    //   title: '路由地址',
+    //   dataIndex: 'path',
+    //   key: 'path'
+    // },
+    // {
+    //   title: '组件路径',
+    //   dataIndex: 'component',
+    //   key: 'component'
+    // },
+    // {
+    //   title: '类型',
+    //   dataIndex: 'type',
+    //   key: 'type',
+    //   align: 'center',
+    //   width: 120
+    // },
+    {
+      title: '首页显示',
+      dataIndex: 'showIndex',
+      key: 'showIndex',
+      align: 'center',
+      width: 120,
+      hideInTable: false
+    },
+    {
+      title: '推荐',
+      dataIndex: 'recommend',
+      key: 'recommend',
+      align: 'center',
+      width: 120,
+      hideInTable: false
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      align: 'center',
+      width: 120,
+      showSorterTooltip: false
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 120,
+      showSorterTooltip: false,
+      customRender: ({ text }) => ['显示', '隐藏'][text]
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      showSorterTooltip: false,
+      ellipsis: true,
+      width: 180,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 200,
+      align: 'center'
+    }
+  ]);
+
+  // 当前编辑数据
+  const current = ref<ArticleCategory | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 上级分类id
+  const parentId = ref<number>();
+  // 分类数据
+  const categoryData = ref<ArticleCategory[]>([]);
+  // 表格展开的行
+  const expandedRowKeys = ref<number[]>([]);
+  const searchText = ref('');
+  const tenantId = ref<number>();
+  const domain = ref<string>();
+
+  getSiteInfo().then((data) => {
+    tenantId.value = data.tenantId;
+    domain.value = data.domain;
+  });
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ where }) => {
+    where.title = searchText.value;
+    return listArticleCategory({ ...where });
+  };
+
+  const linkTo = (item: ArticleCategory) => {
+    if (item.children) {
+      return false;
+    }
+    const url = `http://${tenantId.value}.${domain.value}${item.path}`;
+    return openNew(url.replace(':id', String(item.categoryId)));
+  };
+
+  // 上移
+  const moveUp = (row?: ArticleCategory) => {
+    updateArticleCategory({
+      categoryId: row?.categoryId,
+      sortNumber: Number(row?.sortNumber) - 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 数据转为树形结构 */
+  const parseData = (data: ArticleCategory[]) => {
+    return toTreeData({
+      data: data.map((d) => {
+        return { ...d, key: d.categoryId, value: d.categoryId };
+      }),
+      idField: 'categoryId',
+      parentIdField: 'parentId'
+    });
+  };
+
+  /* 表格渲染完成回调 */
+  const onDone: EleProTableDone<ArticleCategory> = ({ data }) => {
+    categoryData.value = data;
+  };
+
+  /* 刷新表格 */
+  const reload = (where?: ArticleCategoryParam) => {
+    tableRef?.value?.reload({ where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: ArticleCategory | null, id?: number) => {
+    current.value = row ?? null;
+    parentId.value = id;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: ArticleCategory) => {
+    if (row.children?.length) {
+      message.error('请先删除子节点');
+      return;
+    }
+    const hide = messageLoading('请求中..', 0);
+    removeArticleCategory(row.categoryId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 展开全部 */
+  const expandAll = () => {
+    let keys: number[] = [];
+    eachTreeData(categoryData.value, (d) => {
+      if (d.children && d.children.length && d.categoryId) {
+        keys.push(d.categoryId);
+      }
+    });
+    expandedRowKeys.value = keys;
+  };
+
+  /* 折叠全部 */
+  const foldAll = () => {
+    expandedRowKeys.value = [];
+  };
+
+  /* 点击展开图标时触发 */
+  const onExpand = (expanded: boolean, record: ArticleCategory) => {
+    if (expanded) {
+      expandedRowKeys.value = [
+        ...expandedRowKeys.value,
+        record.categoryId as number
+      ];
+    } else {
+      expandedRowKeys.value = expandedRowKeys.value.filter(
+        (d) => d !== record.categoryId
+      );
+    }
+  };
+
+  /* 判断是否是目录 */
+  const isDirectory = (d: ArticleCategory) => {
+    return !!d.children?.length;
+  };
+
+  const onShowIndex = (row: ArticleCategory) => {
+    updateArticleCategory({
+      ...row,
+      showIndex: row.showIndex == 1 ? 0 : 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  const onRecommend = (row: ArticleCategory) => {
+    updateArticleCategory({
+      ...row,
+      recommend: row.recommend == 1 ? 0 : 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: ArticleCategory) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ArticleCategory'
+  };
+</script>

src/views/cms/category/preview/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <a-card :title="title" class="ele-body">
+    <a-list item-layout="vertical" :pagination="pagination" :data-source="list">
+      <template #renderItem="{ item }">
+        <a-list-item key="item.title">
+          <template #actions>
+            <span v-for="{ icon, text } in actions" :key="icon">
+              <component :is="icon" style="margin-right: 8px" />
+              {{ text }}
+            </span>
+          </template>
+          <template #extra>
+            <img
+              width="100"
+              height="100"
+              alt="logo"
+              v-if="item.image"
+              :src="item.image"
+            />
+          </template>
+          <a-list-item-meta :description="item.title">
+            <template #title>
+              <a @click="openNew('/cms/article/' + item.articleId)">{{
+                item.title
+              }}</a>
+            </template>
+          </a-list-item-meta>
+        </a-list-item>
+      </template>
+    </a-list>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { pageArticle } from '@/api/cms/article';
+  import { Article } from '@/api/cms/article/model';
+  import { getArticleCategory } from '@/api/cms/category';
+  import { ArticleCategory } from '@/api/cms/category/model';
+
+  import {
+    StarOutlined,
+    LikeOutlined,
+    MessageOutlined
+  } from '@ant-design/icons-vue';
+  import { openNew } from '@/utils/common';
+  const { currentRoute } = useRouter();
+  const title = ref<string>('');
+  const categoryId = ref(0);
+  const category = ref<ArticleCategory | any>();
+  const list = ref<Article[]>([]);
+  const spinning = ref(true);
+  const page = ref(1);
+
+  const pagination = {
+    onChange: (index: number) => {
+      page.value = index;
+      reload();
+    },
+    total: 10,
+    pageSize: 10
+  };
+
+  const actions: Record<string, any>[] = [
+    { icon: StarOutlined, text: '156' },
+    { icon: LikeOutlined, text: '156' },
+    { icon: MessageOutlined, text: '2' }
+  ];
+
+  /**
+   * 加载数据
+   */
+  const reload = () => {
+    // 加载文章分类
+    getArticleCategory(categoryId.value).then((data) => {
+      category.value = data;
+      // 修改页签标题
+      if (data.title) {
+        title.value = data.title;
+        setPageTabTitle(data.title);
+      }
+    });
+    // 加载文章列表
+    pageArticle({ categoryId: categoryId.value, page: page.value }).then(
+      (data) => {
+        if (data?.list) {
+          pagination.total = data.count;
+          list.value = data.list;
+        }
+        spinning.value = false;
+      }
+    );
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { params } = unref(route);
+      const { id } = params;
+      if (id) {
+        categoryId.value = Number(id);
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ArticleCategoryPreview'
+  };
+</script>
+<style>
+  body {
+    background: #f0f2f5;
+  }
+  .ele-body {
+    margin: 0 auto;
+    max-width: 1000px;
+  }
+</style>

src/views/cms/clear-cache/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <div style="max-width: 960px; margin: 0 auto">
+        <a-result :status="success ? 'success' : ''" :title="title">
+          <template #extra>
+            <a-space size="middle">
+              <a-button danger @click="reload">清除缓存</a-button>
+            </a-space>
+          </template>
+        </a-result>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { removeSiteInfoCache } from '@/api/cms/website';
+  import { ref } from 'vue';
+
+  const success = ref<boolean>(false);
+  const title = ref<string>();
+
+  const reload = () => {
+    removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId')).then(
+      (msg) => {
+        if (msg) {
+          success.value = true;
+          title.value = '操作成功';
+        }
+      }
+    );
+  };
+
+  reload();
+</script>
+<script lang="ts">
+  export default {
+    name: 'ClearCache'
+  };
+</script>

src/views/cms/dashboard/components/activities-card.vue

@@ -0,0 +1,138 @@
+<!-- 最新动态 -->
+<template>
+  <a-card :title="title" :bordered="false" :body-style="{ padding: '6px 0' }">
+    <template #extra>
+      <more-icon @remove="onRemove" @edit="onEdit" />
+    </template>
+    <div
+      style="height: 346px; padding: 22px 20px 0 20px"
+      class="ele-scrollbar-hover"
+    >
+      <a-timeline>
+        <a-timeline-item
+          v-for="item in activities"
+          :key="item.id"
+          :color="item.color"
+        >
+          <em>{{ item.time }}</em>
+          <em>{{ item.title }}</em>
+        </a-timeline-item>
+      </a-timeline>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import MoreIcon from './more-icon.vue';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'remove'): void;
+    (e: 'edit'): void;
+  }>();
+
+  interface Activitie {
+    id: number;
+    title: string;
+    time: string;
+    color?: string;
+  }
+
+  // 最新动态数据
+  const activities = ref<Activitie[]>([]);
+
+  /* 查询最新动态 */
+  const queryActivities = () => {
+    activities.value = [
+      {
+        id: 1,
+        title: 'SunSmile 解决了bug 登录提示操作失败',
+        time: '20:30',
+        color: 'gray'
+      },
+      {
+        id: 2,
+        title: 'Jasmine 解决了bug 按钮颜色与设计不符',
+        time: '19:30',
+        color: 'gray'
+      },
+      {
+        id: 3,
+        title: '项目经理 指派了任务 解决项目一的bug',
+        time: '18:30'
+      },
+      {
+        id: 4,
+        title: '项目经理 指派了任务 解决项目二的bug',
+        time: '17:30'
+      },
+      {
+        id: 5,
+        title: '项目经理 指派了任务 解决项目三的bug',
+        time: '16:30'
+      },
+      {
+        id: 6,
+        title: '项目经理 指派了任务 解决项目四的bug',
+        time: '15:30',
+        color: 'gray'
+      },
+      {
+        id: 7,
+        title: '项目经理 指派了任务 解决项目五的bug',
+        time: '14:30',
+        color: 'gray'
+      },
+      {
+        id: 8,
+        title: '项目经理 指派了任务 解决项目六的bug',
+        time: '12:30',
+        color: 'gray'
+      },
+      {
+        id: 9,
+        title: '项目经理 指派了任务 解决项目七的bug',
+        time: '11:30'
+      },
+      {
+        id: 10,
+        title: '项目经理 指派了任务 解决项目八的bug',
+        time: '10:30',
+        color: 'gray'
+      },
+      {
+        id: 11,
+        title: '项目经理 指派了任务 解决项目九的bug',
+        time: '09:30',
+        color: 'green'
+      },
+      {
+        id: 12,
+        title: '项目经理 指派了任务 解决项目十的bug',
+        time: '08:30',
+        color: 'red'
+      }
+    ];
+  };
+
+  const onRemove = () => {
+    emit('remove');
+  };
+
+  const onEdit = () => {
+    emit('edit');
+  };
+
+  queryActivities();
+</script>
+
+<style lang="less" scoped>
+  .ele-scrollbar-hover
+    :deep(.ant-timeline-item-last > .ant-timeline-item-content) {
+    min-height: auto;
+  }
+</style>

src/views/cms/dashboard/components/app-list.vue

@@ -0,0 +1,81 @@
+<template>
+  <a-card :title="title" :bordered="false" :body-style="{ padding: '2px' }">
+    <template #extra
+      ><a @click="openUrl('/oa/app/index')" class="ele-text-placeholder"
+        >更多<RightOutlined /></a
+    ></template>
+    <a-list :size="`small`" :split="false" :data-source="list">
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <div class="app-box">
+            <a-image
+              :height="45"
+              :width="45"
+              :preview="false"
+              :src="item.appIcon"
+              fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
+            />
+            <div class="app-info">
+              <a
+                class="ele-text-heading"
+              >
+                {{ item.appName }}
+              </a>
+              <span class="ele-text-placeholder">
+                {{ item.appCode }}
+              </span>
+            </div>
+          </div>
+        </a-list-item>
+      </template>
+    </a-list>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Article } from '@/api/cms/article/model';
+  import { openUrl } from '@/utils/common';
+  import { pageApp } from '@/api/oa/app';
+  import { RightOutlined } from '@ant-design/icons-vue';
+
+  const props = defineProps<{
+    title: string;
+  }>();
+
+  const list = ref<Article[]>([]);
+  /**
+   * 加载数据
+   */
+  const reload = () => {
+    const { title } = props;
+    // 加载文章列表
+    pageApp({
+      limit: 5,
+      status: 0,
+      appStatus: '开发中'
+    }).then((data) => {
+      if (data?.list) {
+        list.value = data.list;
+      }
+    });
+  };
+  reload();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'DashboardArticleList'
+  };
+</script>
+
+<style lang="less" scoped>
+  .app-box {
+    display: flex;
+    .app-info {
+      display: flex;
+      margin-left: 5px;
+      flex-direction: column;
+    }
+  }
+</style>

src/views/cms/dashboard/components/article-list.vue

@@ -0,0 +1,56 @@
+<template>
+  <a-card :title="title" :bordered="false" :body-style="{ padding: '2px', minHeight: '252px' }">
+    <template #extra
+      ><a
+        @click="openPreview('/article/' + categoryId)"
+        class="ele-text-placeholder"
+        >更多<RightOutlined /></a
+    ></template>
+    <a-list :size="`small`" :split="false" :data-source="list">
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <a
+            class="ele-text-secondary"
+            @click="openUrl('/cms/article/' + item.articleId)"
+          >
+            {{ item.title }}
+          </a>
+        </a-list-item>
+      </template>
+    </a-list>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { pageArticle } from '@/api/cms/article';
+  import { Article } from '@/api/cms/article/model';
+  import {openNew, openPreview, openUrl} from '@/utils/common';
+  import { RightOutlined } from '@ant-design/icons-vue';
+  const list = ref<Article[]>([]);
+
+  const props = defineProps<{
+    title: string;
+    categoryId: number;
+  }>();
+
+  /**
+   * 加载数据
+   */
+  const reload = () => {
+    const { categoryId } = props;
+    // 加载文章列表
+    pageArticle({ categoryId, limit: 6 }).then((data) => {
+      if (data?.list) {
+        list.value = data.list;
+      }
+    });
+  };
+  reload();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'DashboardArticleList'
+  };
+</script>

src/views/cms/dashboard/components/count-user.vue

@@ -0,0 +1,80 @@
+<template>
+  <a-card :bordered="false" title="小组成员">
+    <template #extra>
+      <a-tooltip>
+        <template #title>邀请加入</template>
+        <UserAddOutlined @click="onShowQrcode" :style="{ fontSize: '18px' }" />
+      </a-tooltip>
+    </template>
+    <a-list
+      class="demo-loadmore-list"
+      item-layout="horizontal"
+      :data-source="list"
+    >
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <template #actions>
+            <a-popover>
+              <template #content> 待处理 </template>
+              <a class="ele-text-danger">{{ item.pending }}</a>
+            </a-popover>
+            <a-popover>
+              <template #content> 本月已处理 </template>
+              <a class="ele-text-secondary">{{ item.month }}</a>
+            </a-popover>
+          </template>
+          <a-skeleton avatar :title="false" :loading="!!item.loading" active>
+            <a-list-item-meta>
+              <template #title>
+                {{ item.nickname }}
+              </template>
+              <template #avatar>
+                <a-avatar :src="item.avatar" />
+              </template>
+            </a-list-item-meta>
+          </a-skeleton>
+        </a-list-item>
+      </template>
+    </a-list>
+    <!-- 工单二维码 -->
+    <Qrcode v-model:visible="showQrcode" />
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { pageTaskCount } from '@/api/oa/task-count';
+  import { TaskCount } from '@/api/oa/task-count/model';
+  import { UserAddOutlined } from '@ant-design/icons-vue';
+  import Qrcode from './qrcode.vue';
+
+  const showQrcode = ref(false);
+  const list = ref<TaskCount[]>([]);
+
+  pageTaskCount({ limit: 10, roleCode: 'commander' }).then((res) => {
+    if (res) {
+      list.value = res?.list;
+    }
+  });
+
+  const onShowQrcode = () => {
+    showQrcode.value = true;
+  };
+</script>
+
+<style lang="less" scoped>
+  .monitor-evaluate-text {
+    width: 90px;
+    flex-shrink: 0;
+    white-space: nowrap;
+    opacity: 0.8;
+
+    & > .anticon {
+      font-size: 12px;
+      margin: 0 6px 0 8px;
+    }
+  }
+  /deep/.ant-list-item {
+    padding: 7px 0;
+  }
+</style>

src/views/cms/dashboard/components/docs.vue

@@ -0,0 +1,70 @@
+<!-- 本月目标 -->
+<template>
+  <a-card :title="title" :bordered="false">
+    <template #extra>
+      <more-icon @remove="onRemove" @edit="onEdit" />
+    </template>
+    <div class="workplace-goal-group">
+      <a-progress
+        :width="180"
+        :percent="80"
+        type="dashboard"
+        :stroke-width="4"
+        :show-info="false"
+      />
+      <div class="workplace-goal-content">
+        <ele-tag color="blue" size="large" shape="circle">
+          <trophy-outlined />
+        </ele-tag>
+        <div class="workplace-goal-num">285</div>
+      </div>
+      <div class="workplace-goal-text">恭喜, 本月目标已达标!</div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { TrophyOutlined } from '@ant-design/icons-vue';
+  import MoreIcon from './more-icon.vue';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'remove'): void;
+    (e: 'edit'): void;
+  }>();
+
+  const onRemove = () => {
+    emit('remove');
+  };
+
+  const onEdit = () => {
+    emit('edit');
+  };
+</script>
+
+<style lang="less" scoped>
+  .workplace-goal-group {
+    height: 310px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    .workplace-goal-content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 180px;
+      margin: -50px 0 0 -90px;
+      text-align: center;
+    }
+
+    .workplace-goal-num {
+      font-size: 40px;
+    }
+  }
+</style>

src/views/cms/dashboard/components/goal-card.vue

@@ -0,0 +1,70 @@
+<!-- 本月目标 -->
+<template>
+  <a-card :title="title" :bordered="false">
+    <template #extra>
+      <more-icon @remove="onRemove" @edit="onEdit" />
+    </template>
+    <div class="workplace-goal-group">
+      <a-progress
+        :width="180"
+        :percent="80"
+        type="dashboard"
+        :stroke-width="4"
+        :show-info="false"
+      />
+      <div class="workplace-goal-content">
+        <ele-tag color="blue" size="large" shape="circle">
+          <trophy-outlined />
+        </ele-tag>
+        <div class="workplace-goal-num">285</div>
+      </div>
+      <div class="workplace-goal-text">恭喜, 本月目标已达标!</div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { TrophyOutlined } from '@ant-design/icons-vue';
+  import MoreIcon from './more-icon.vue';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'remove'): void;
+    (e: 'edit'): void;
+  }>();
+
+  const onRemove = () => {
+    emit('remove');
+  };
+
+  const onEdit = () => {
+    emit('edit');
+  };
+</script>
+
+<style lang="less" scoped>
+  .workplace-goal-group {
+    height: 310px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    .workplace-goal-content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 180px;
+      margin: -50px 0 0 -90px;
+      text-align: center;
+    }
+
+    .workplace-goal-num {
+      font-size: 40px;
+    }
+  }
+</style>

src/views/cms/dashboard/components/link-card.vue

@@ -0,0 +1,178 @@
+<!-- 快捷方式 -->
+<template>
+  <a-row :gutter="16" ref="wrapRef">
+    <a-col v-for="item in data" :key="item.url" :lg="3" :md="6" :sm="9" :xs="8">
+      <a-card :bordered="false" hoverable :body-style="{ padding: 0 }">
+        <div class="app-link-block" @click="navTo(item)">
+          <component
+            :is="item.icon"
+            class="app-link-icon"
+            :style="{ color: item.color }"
+          />
+          <div class="app-link-title">{{ item.title }}</div>
+        </div>
+      </a-card>
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, onBeforeUnmount } from 'vue';
+  import SortableJs from 'sortablejs';
+  import type { Row as ARow } from 'ant-design-vue';
+  import { openNew, openUrl } from '@/utils/common';
+  import { getOriginDomain } from '@/utils/domain';
+  const CACHE_KEY = 'workplace-links';
+  // 当前开发环境
+  const env = import.meta.env.MODE;
+
+  interface LinkItem {
+    icon: string;
+    title: string;
+    url: string;
+    color?: string;
+  }
+
+  // 默认顺序
+  const DEFAULT: LinkItem[] = [
+    {
+      icon: 'settingOutlined',
+      title: '网站设置',
+      url: '/website/setting'
+    },
+    {
+      icon: 'LayoutOutlined',
+      title: '单页管理',
+      url: '/cms/design'
+    },
+    {
+      icon: 'FileSearchOutlined',
+      title: '文章管理',
+      url: '/cms/article'
+    },
+    {
+      icon: 'AntDesignOutlined',
+      title: '广告管理',
+      url: '/website/ad'
+    },
+    {
+      icon: 'InstagramOutlined',
+      title: '图片素材',
+      url: '/cms/photo'
+    },
+    {
+      icon: 'ShoppingOutlined',
+      title: '表单数据',
+      url: '/cms/form-record'
+    },
+    {
+      icon: 'ChromeOutlined',
+      title: '友情链接',
+      url: '/oa/link'
+    },
+    {
+      icon: 'DesktopOutlined',
+      title: '网站首页',
+      url: `${localStorage.getItem('TenantId')}.${localStorage.getItem(
+        'domain'
+      )}`
+    }
+  ];
+
+  // 获取缓存的顺序
+  const cache = (() => {
+    const str = localStorage.getItem(CACHE_KEY);
+    try {
+      return str ? JSON.parse(str) : null;
+    } catch (e) {
+      return null;
+    }
+  })();
+
+  const data = ref<LinkItem[]>([...(cache ?? DEFAULT)]);
+
+  const wrapRef = ref<InstanceType<typeof ARow> | null>(null);
+
+  let sortableIns: SortableJs | null = null;
+
+  /* 重置布局 */
+  const reset = () => {
+    data.value = [...DEFAULT];
+    cacheData();
+  };
+
+  /* 缓存布局 */
+  const cacheData = () => {
+    localStorage.setItem(CACHE_KEY, JSON.stringify(data.value));
+  };
+
+  const navTo = (item) => {
+    if (item.icon == 'DesktopOutlined') {
+      // if (env == 'development') {
+      //   return openUrl(getOriginDomain());
+      // }
+      return openNew(`${domain.value}`);
+    }
+    openUrl(item.url);
+  };
+
+  onMounted(() => {
+    const isTouchDevice = 'ontouchstart' in document.documentElement;
+    if (isTouchDevice) {
+      return;
+    }
+    sortableIns = new SortableJs(wrapRef.value?.$el, {
+      animation: 300,
+      onUpdate: ({ oldIndex, newIndex }) => {
+        if (typeof oldIndex === 'number' && typeof newIndex === 'number') {
+          const temp = [...data.value];
+          temp.splice(newIndex, 0, temp.splice(oldIndex, 1)[0]);
+          data.value = temp;
+          cacheData();
+        }
+      },
+      setData: () => {}
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (sortableIns) {
+      sortableIns.destroy();
+    }
+  });
+
+  defineExpose({ reset });
+</script>
+
+<script lang="ts">
+  import * as icons from './link-icons';
+  import { getSiteInfo } from '@/api/layout';
+  import { ref } from 'vue';
+
+  const tenantId = ref<number>();
+  const domain = ref<string>();
+
+  getSiteInfo().then((data) => {
+    tenantId.value = data.tenantId;
+    domain.value = data.domain;
+  });
+
+  export default {
+    components: icons
+  };
+</script>
+
+<style lang="less" scoped>
+  .app-link-block {
+    padding: 12px;
+    text-align: center;
+    display: block;
+    color: inherit;
+
+    .app-link-icon {
+      color: #666666;
+      font-size: 30px;
+      margin: 6px 0 10px 0;
+    }
+  }
+</style>

src/views/cms/dashboard/components/link-icons.ts

@@ -0,0 +1,14 @@
+export {
+  UserOutlined,
+  TeamOutlined,
+  FileSearchOutlined,
+  ChromeOutlined,
+  ShoppingOutlined,
+  LaptopOutlined,
+  AppstoreAddOutlined,
+  DesktopOutlined,
+  AntDesignOutlined,
+  SettingOutlined,
+  InstagramOutlined,
+  LayoutOutlined
+} from '@ant-design/icons-vue';

src/views/cms/dashboard/components/link-list.vue

@@ -0,0 +1,54 @@
+<template>
+  <a-card :title="linkType" :bordered="false" :body-style="{ padding: '2px' }">
+    <template #extra
+      ><a @click="openNew('/oa/link')" class="ele-text-placeholder"
+        >更多<RightOutlined /></a
+    ></template>
+    <a-list :size="`small`" :split="false" :data-source="list">
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <a-list-item-meta>
+            <template #avatar>
+              <a-avatar :src="item.icon" />
+            </template>
+            <template #title>
+              <a @click="openUrl(item.url)">{{ item.name }}</a>
+            </template>
+          </a-list-item-meta>
+        </a-list-item>
+      </template>
+    </a-list>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { openNew, openUrl } from '@/utils/common';
+  import { pageLink } from '@/api/oa/link';
+  import { RightOutlined } from '@ant-design/icons-vue';
+  const list = ref<any[]>([]);
+
+  const props = defineProps<{
+    linkType: string;
+  }>();
+
+  /**
+   * 加载数据
+   */
+  const reload = () => {
+    const { linkType } = props;
+    // 加载文章列表
+    pageLink({ linkType, limit: 5 }).then((data) => {
+      if (data?.list) {
+        list.value = data.list;
+      }
+    });
+  };
+  reload();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'DashboardArticleList'
+  };
+</script>

src/views/cms/dashboard/components/more-icon.vue

@@ -0,0 +1,38 @@
+<template>
+  <a-dropdown placement="bottomRight">
+    <more-outlined class="ele-text-secondary" style="font-size: 18px" />
+    <template #overlay>
+      <a-menu :selectable="false" @click="onClick">
+        <a-menu-item key="edit">
+          <div class="ele-cell">
+            <edit-outlined />
+            <div class="ele-cell-content">编辑</div>
+          </div>
+        </a-menu-item>
+        <a-menu-item key="remove">
+          <div class="ele-cell ele-text-danger">
+            <delete-outlined />
+            <div class="ele-cell-content">删除</div>
+          </div>
+        </a-menu-item>
+      </a-menu>
+    </template>
+  </a-dropdown>
+</template>
+
+<script lang="ts" setup>
+  import {
+    MoreOutlined,
+    EditOutlined,
+    DeleteOutlined
+  } from '@ant-design/icons-vue';
+
+  const emit = defineEmits<{
+    (e: 'edit'): void;
+    (e: 'remove'): void;
+  }>();
+
+  const onClick = ({ key }) => {
+    emit(key);
+  };
+</script>

src/views/cms/dashboard/components/profile-card.vue

@@ -0,0 +1,121 @@
+<!-- 用户信息 -->
+<template>
+  <a-card :bordered="false" :body-style="{ padding: '20px' }">
+    <div class="ele-cell workplace-user-card">
+      <div class="ele-cell-content ele-cell">
+        <a-avatar :size="68" :src="loginUser.avatar">
+          <template v-if="!loginUser.avatar" #icon>
+            <user-outlined />
+          </template>
+        </a-avatar>
+        <div class="ele-cell-content">
+          <h4 class="ele-elip">
+            早安, {{ loginUser.nickname }}, 开始您一天的工作吧!
+          </h4>
+          <div class="ele-elip ele-text-secondary">
+            <cloud-outlined />
+            <em>{{ elip[Math.floor(Math.random() * elip.length)] }}</em>
+            <!--            <em>今日多云转阴，18℃ - 22℃，出门记得穿外套哦~</em>-->
+          </div>
+        </div>
+      </div>
+      <div class="workplace-count-group">
+        <!--        <div class="workplace-count-item">-->
+        <!--          <div class="workplace-count-header">-->
+        <!--            <ele-tag color="blue" shape="circle" size="small">-->
+        <!--              <appstore-filled />-->
+        <!--            </ele-tag>-->
+        <!--            <span class="workplace-count-name">项目数</span>-->
+        <!--          </div>-->
+        <!--          <h2>0</h2>-->
+        <!--        </div>-->
+        <!--        <div class="workplace-count-item">-->
+        <!--          <div class="workplace-count-header">-->
+        <!--            <ele-tag color="orange" shape="circle" size="small">-->
+        <!--              <check-square-outlined />-->
+        <!--            </ele-tag>-->
+        <!--            <span class="workplace-count-name">待办项</span>-->
+        <!--          </div>-->
+        <!--          <h2>6 / 24</h2>-->
+        <!--        </div>-->
+        <!--        <div class="workplace-count-item">-->
+        <!--          <div class="workplace-count-header">-->
+        <!--            <ele-tag color="green" shape="circle" size="small">-->
+        <!--              <bell-filled />-->
+        <!--            </ele-tag>-->
+        <!--            <span class="workplace-count-name">消息</span>-->
+        <!--          </div>-->
+        <!--          <h2>0</h2>-->
+        <!--        </div>-->
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import {
+    UserOutlined,
+    CloudOutlined,
+    AppstoreFilled,
+    CheckSquareOutlined,
+    BellFilled
+  } from '@ant-design/icons-vue';
+  import { useUserStore } from '@/store/modules/user';
+
+  const userStore = useUserStore();
+
+  // 当前登录用户信息
+  const loginUser = computed(() => userStore.info ?? {});
+  const elip = ref<string[]>([
+    '小事成就大事，细节成就完美~',
+    '心态决定命运，自信走向成功',
+    '人生能有几回博，今日不博何时博',
+    '成功需要成本，时间也是一种成本，对时间的珍惜就是对成本的节约',
+    '有志者自有千方百计，无志者只感千难万难',
+    '积一时之跬步，臻千里之遥程'
+  ]);
+</script>
+
+<style lang="less" scoped>
+  .workplace-user-card {
+    .ele-cell-content {
+      overflow: hidden;
+    }
+
+    h4 {
+      margin-bottom: 6px;
+    }
+  }
+
+  .workplace-count-group {
+    white-space: nowrap;
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  .workplace-count-item {
+    display: inline-block;
+    margin: 0 4px 0 24px;
+  }
+
+  .workplace-count-name {
+    margin-left: 8px;
+  }
+
+  @media screen and (max-width: 992px) {
+    .workplace-count-item {
+      margin: 0 2px 0 12px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .workplace-user-card {
+      display: block;
+    }
+
+    .workplace-count-group {
+      margin-top: 8px;
+    }
+  }
+</style>

src/views/cms/dashboard/components/qrcode.vue

@@ -0,0 +1,66 @@
+<template>
+  <ele-modal
+    :width="400"
+    :visible="visible"
+    :title="`邀请新成员`"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    :footer="null"
+    @ok="save"
+  >
+    <div
+      class="qrcode-list"
+      style="display: flex; justify-content: space-around"
+    >
+      <div>
+        <img :src="qrcode" width="240" height="240" />
+        <div
+          style="
+            display: flex;
+            justify-content: center;
+            font-size: 26px;
+            padding-top: 20px;
+          "
+          >使用微信扫一扫</div
+        >
+      </div>
+    </div>
+  </ele-modal>
+</template>
+<script lang="ts" setup>
+  import { User } from '@/api/system/user/model';
+  import { reactive, ref } from 'vue';
+  import { taskJoinQRCode } from '@/api/oa/task';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', user: User): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const qrcode = ref('');
+
+  // 用户信息
+  const form = reactive<User>({
+    userId: undefined,
+    nickname: undefined
+  });
+
+  const save = () => {
+    emit('done', form);
+  };
+
+  taskJoinQRCode({}).then((text) => {
+    qrcode.value = String(text);
+  });
+</script>
+<style scoped lang="less"></style>

src/views/cms/dashboard/components/task-card.vue

@@ -0,0 +1,112 @@
+<template>
+  <a-card :title="title" :bordered="false" :body-style="{ padding: '2px' }">
+    <template #extra
+      ><a @click="openUrl('/oa/task')" class="ele-text-placeholder"
+        >更多<RightOutlined /></a
+    ></template>
+    <a-list :size="`small`" :split="false" :data-source="list">
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <div class="app-box">
+            <div class="app-info">
+              <a
+                class="ele-text-secondary"
+                @click="openNew('/oa/task/detail/' + item.taskId)"
+              >
+                <a-typography-paragraph
+                  ellipsis
+                  :content="`【${item.taskType}】${item.name}`"
+                />
+              </a>
+            </div>
+            <a class="ele-text-placeholder">
+              <a-tag v-if="item.progress === TOBEARRANGED" color="red"
+                >待安排</a-tag
+              >
+              <a-tag v-if="item.progress === PENDING" color="orange"
+                >待处理</a-tag
+              >
+              <a-tag v-if="item.progress === PROCESSING" color="purple"
+                >处理中</a-tag
+              >
+              <a-tag v-if="item.progress === TOBECONFIRMED" color="cyan"
+                >待评价</a-tag
+              >
+              <a-tag v-if="item.progress === COMPLETED" color="green"
+                >已完成</a-tag
+              >
+              <a-tag v-if="item.progress === CLOSED">已关闭</a-tag>
+              <div class="ele-text-danger" v-if="item.overdueDays">
+                已逾期{{ item.overdueDays }}天
+              </div>
+            </a>
+          </div>
+        </a-list-item>
+      </template>
+    </a-list>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { openUrl } from '@/utils/common';
+  import { Task } from '@/api/oa/task/model';
+  import { pageTask } from '@/api/oa/task';
+  import { useUserStore } from '@/store/modules/user';
+  import {
+    CLOSED,
+    COMPLETED,
+    PENDING,
+    PROCESSING,
+    TOBEARRANGED,
+    TOBECONFIRMED
+  } from '@/api/oa/task/model/progress';
+  import { RightOutlined } from '@ant-design/icons-vue';
+
+  const props = defineProps<{
+    title: string;
+  }>();
+
+  const list = ref<Task[]>([]);
+  /**
+   * 加载数据
+   */
+  const reload = () => {
+    const { title } = props;
+    const userStore = useUserStore();
+    const where = {
+      userId: undefined,
+      commander: userStore.info?.userId,
+      limit: 6,
+      status: 0
+    };
+    // 加载列表
+    pageTask(where).then((data) => {
+      if (data?.list) {
+        list.value = data.list;
+      }
+    });
+  };
+  reload();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'DashboardArticleList'
+  };
+</script>
+
+<style lang="less" scoped>
+  .app-box {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    overflow: hidden;
+    .app-info {
+      display: flex;
+      margin-left: 5px;
+      flex-direction: column;
+      width: 400px;
+    }
+  }
+</style>

src/views/cms/dashboard/components/user-list.vue

@@ -0,0 +1,84 @@
+<!-- 小组成员 -->
+<template>
+  <a-card :title="title" :bordered="false" :body-style="{ padding: '2px 0px' }">
+    <template #extra>
+      <more-icon @remove="onRemove" @edit="onEdit" />
+    </template>
+    <div
+      v-for="(item, index) in userList"
+      :key="index"
+      class="ele-cell user-list-item"
+    >
+      <div style="flex-shrink: 0">
+        <a-avatar :size="46" :src="item.avatar" />
+      </div>
+      <div class="ele-cell-content">
+        <span class="ele-cell-title ele-elip">{{ item.nickname }}</span>
+        <div class="ele-cell-desc ele-elip">{{ item.phone }}</div>
+      </div>
+      <div style="flex-shrink: 0">
+        <a-tag :color="['green', 'red'][item.status]">
+          {{ ['在线', '离线'][item.status] }}
+        </a-tag>
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import MoreIcon from './more-icon.vue';
+  import { pageUsers } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'remove'): void;
+    (e: 'edit'): void;
+  }>();
+
+  // 小组成员数据
+  const userList = ref<User[]>([]);
+
+  /* 查询小组成员 */
+  const queryUserList = () => {
+    pageUsers({ parentId: 11, limit: 5 }).then((data: any) => {
+      userList.value = data.list;
+    });
+  };
+
+  const onRemove = () => {
+    emit('remove');
+  };
+
+  const onEdit = () => {
+    emit('edit');
+  };
+
+  queryUserList();
+</script>
+
+<style lang="less" scoped>
+  .user-list-item {
+    padding: 12px 18px;
+
+    & + .user-list-item {
+      border-top: 1px solid hsla(0, 0%, 60%, 0.15);
+    }
+
+    .ele-cell-content {
+      overflow: hidden;
+    }
+
+    .ele-cell-desc {
+      margin-top: 0;
+    }
+
+    .ant-tag {
+      margin: 0;
+    }
+  }
+</style>

src/views/cms/dashboard/index.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="ele-body ele-body-card">
+    <a-card :bordered="false">
+      <template #title>
+        <SoundOutlined class="ele-text-danger" />
+        <span class="gg-title ele-text-heading">公告</span>
+        <a @click="openNew(`${domain}`)" class="ele-text-heading"
+          >网站首页</a
+        >
+      </template>
+      <template #extra>
+        <a @click="openNew('/cms/category/92')" class="ele-text-placeholder"
+          >更多<RightOutlined
+        /></a>
+      </template>
+    </a-card>
+    <LinkCard />
+    <a-row :gutter="16" ref="wrapRef">
+      <a-col :md="6">
+        <Article title="通知公告" :categoryId="92" />
+      </a-col>
+      <a-col :md="6">
+        <Article title="公司动态" :categoryId="37" />
+      </a-col>
+      <a-col :md="6">
+        <Article title="经验分享" :categoryId="93" />
+      </a-col>
+      <a-col :md="6">
+        <Article title="API文档" :categoryId="90" />
+      </a-col>
+    </a-row>
+    <!--    <a-row :gutter="16" ref="wrapRef">-->
+    <!--      <a-col-->
+    <!--        v-for="(item, index) in data"-->
+    <!--        :key="item.name"-->
+    <!--        :lg="item.lg"-->
+    <!--        :md="item.md"-->
+    <!--        :sm="item.sm"-->
+    <!--        :xs="item.xs"-->
+    <!--      >-->
+    <!--        <component-->
+    <!--          :is="item.name"-->
+    <!--          :title="item.title"-->
+    <!--          @remove="onRemove(index)"-->
+    <!--          @edit="onEdit(index)"-->
+    <!--        />-->
+    <!--      </a-col>-->
+    <!--    </a-row>-->
+    <!--    <a-card :bordered="false" :body-style="{ padding: 0 }">-->
+    <!--      <div class="ele-cell" style="line-height: 42px">-->
+    <!--        <div-->
+    <!--          class="ele-cell-content ele-text-primary workplace-bottom-btn"-->
+    <!--          @click="add"-->
+    <!--        >-->
+    <!--          <PlusCircleOutlined /> 添加视图-->
+    <!--        </div>-->
+    <!--        <a-divider type="vertical" />-->
+    <!--        <div-->
+    <!--          class="ele-cell-content ele-text-primary workplace-bottom-btn"-->
+    <!--          @click="reset"-->
+    <!--        >-->
+    <!--          <UndoOutlined /> 重置布局-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </a-card>-->
+    <ele-modal
+      :width="680"
+      v-model:visible="visible"
+      title="未添加的视图"
+      :footer="null"
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-for="item in notAddedData"
+          :key="item.name"
+          :md="8"
+          :sm="12"
+          :xs="24"
+        >
+          <div
+            class="workplace-card-item ele-border-split"
+            @click="addView(item)"
+          >
+            <div class="workplace-card-header ele-border-split">
+              {{ item.title }}
+            </div>
+            <div class="workplace-card-body ele-text-placeholder">
+              <plus-circle-outlined />
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+      <a-empty v-if="!notAddedData.length" description="已添加所有视图" />
+    </ele-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+  import SortableJs from 'sortablejs';
+  import type { Row as ARow } from 'ant-design-vue';
+  import { message } from 'ant-design-vue';
+  import Article from './components/article-list.vue';
+  import Link from './components/link-list.vue';
+  import App from './components/app-list.vue';
+  import Task from './components/task-card.vue';
+  import {
+    PlusCircleOutlined,
+    SoundOutlined,
+    RightOutlined
+  } from '@ant-design/icons-vue';
+  import { openNew } from '@/utils/common';
+  const CACHE_KEY = 'workplace-layout';
+  const domain = ref('');
+
+  import { getSiteInfo } from '@/api/layout';
+
+  getSiteInfo().then((data) => {
+    if (data?.domain) {
+      domain.value = data.domain;
+      if (data.domain.indexOf('http') == 0) {
+        localStorage.setItem('Domain', domain.value);
+      } else {
+        localStorage.setItem('Domain', `http://${domain.value}`);
+      }
+    }
+  });
+
+  interface ViewItem {
+    name: string;
+    title: string;
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+  }
+
+  // 默认布局
+  const DEFAULT: ViewItem[] = [
+    {
+      name: 'link',
+      title: '网址导航',
+      lg: 24,
+      md: 24,
+      sm: 24,
+      xs: 24
+    },
+    {
+      name: 'task-card',
+      title: '我的工单',
+      lg: 18,
+      md: 24,
+      sm: 24,
+      xs: 24
+    },
+    // {
+    //   name: 'project-card',
+    //   title: '项目管理',
+    //   lg: 16,
+    //   md: 24,
+    //   sm: 24,
+    //   xs: 24
+    // },
+    {
+      name: 'user-list',
+      title: '小组成员',
+      lg: 6,
+      md: 24,
+      sm: 24,
+      xs: 24
+    }
+    // {
+    //   name: 'activities-card',
+    //   title: '最新动态',
+    //   lg: 6,
+    //   md: 24,
+    //   sm: 24,
+    //   xs: 24
+    // },
+    // {
+    //   name: 'goal-card',
+    //   title: '本月目标',
+    //   lg: 8,
+    //   md: 24,
+    //   sm: 24,
+    //   xs: 24
+    // },
+    // {
+    //   name: 'docs',
+    //   title: '知识库',
+    //   lg: 8,
+    //   md: 24,
+    //   sm: 24,
+    //   xs: 24
+    // }
+  ];
+
+  // 获取缓存的顺序
+  const cache = (() => {
+    const str = localStorage.getItem(CACHE_KEY);
+    try {
+      return str ? JSON.parse(str) : null;
+    } catch (e) {
+      return null;
+    }
+  })();
+
+  const data = ref<ViewItem[]>([...(cache ?? DEFAULT)]);
+
+  const visible = ref(false);
+
+  const wrapRef = ref<InstanceType<typeof ARow> | null>(null);
+
+  let sortableIns: SortableJs | null = null;
+
+  // 未添加的数据
+  const notAddedData = computed(() => {
+    return DEFAULT.filter((d) => !data.value.some((t) => t.name === d.name));
+  });
+
+  /* 添加 */
+  const add = () => {
+    visible.value = true;
+  };
+
+  /* 重置布局 */
+  const reset = () => {
+    data.value = [...DEFAULT];
+    cacheData();
+    message.success('已重置');
+  };
+
+  /* 缓存布局 */
+  const cacheData = () => {
+    localStorage.setItem(CACHE_KEY, JSON.stringify(data.value));
+  };
+
+  /* 删除视图 */
+  const onRemove = (index: number) => {
+    data.value = data.value.filter((_d, i) => i !== index);
+    cacheData();
+  };
+
+  /* 编辑视图 */
+  const onEdit = (index: number) => {
+    data.value.map((d) => {
+      if (d.name == 'user-list') {
+      }
+    });
+    // message.info('点击了编辑');
+  };
+
+  /* 添加视图 */
+  const addView = (item) => {
+    data.value.push(item);
+    cacheData();
+    message.success('已添加');
+  };
+
+  onMounted(() => {
+    const isTouchDevice = 'ontouchstart' in document.documentElement;
+    if (isTouchDevice) {
+      return;
+    }
+    sortableIns = new SortableJs(wrapRef.value?.$el, {
+      handle: '.ant-card-head',
+      animation: 300,
+      onUpdate: ({ oldIndex, newIndex }) => {
+        if (typeof oldIndex === 'number' && typeof newIndex === 'number') {
+          const temp = [...data.value];
+          temp.splice(newIndex, 0, temp.splice(oldIndex, 1)[0]);
+          data.value = temp;
+          cacheData();
+        }
+      },
+      setData: () => {}
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (sortableIns) {
+      sortableIns.destroy();
+    }
+  });
+</script>
+
+<script lang="ts">
+  import ActivitiesCard from './components/activities-card.vue';
+  import TaskCard from './components/task-card.vue';
+  import GoalCard from './components/goal-card.vue';
+  import UserList from './components/count-user.vue';
+  import Docs from './components/docs.vue';
+  import LinkCard from './components/link-card.vue';
+  import ProfileCard from './components/profile-card.vue';
+
+  export default {
+    name: 'DashboardWorkplace',
+    components: {
+      LinkCard,
+      UserList,
+      ActivitiesCard,
+      TaskCard,
+      GoalCard,
+      Docs,
+      ProfileCard
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  .ele-body :deep(.ant-card-head) {
+    cursor: move;
+    position: relative;
+  }
+
+  .ele-body :deep(.ant-row > .ant-col.sortable-chosen > .ant-card) {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  .workplace-bottom-btn {
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+
+  .workplace-bottom-btn:hover {
+    background: hsla(0, 0%, 60%, 0.05);
+  }
+
+  /* 添加弹窗 */
+  .workplace-card-item {
+    margin-bottom: 15px;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 4px;
+    position: relative;
+    cursor: pointer;
+    transition: box-shadow 0.2s, background-color 0.2s;
+  }
+
+  .workplace-card-item:hover {
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+    background: hsla(0, 0%, 60%, 0.05);
+  }
+
+  .workplace-card-item .workplace-card-header {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    padding: 8px;
+  }
+  .gg-title {
+    padding: 0 5px;
+    margin-right: 20px;
+  }
+  .workplace-card-body {
+    font-size: 26px;
+    padding: 24px 10px;
+    text-align: center;
+  }
+</style>

src/views/cms/design/components/design-edit.vue

@@ -0,0 +1,387 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="1000"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="true"
+    :title="isUpdate ? '编辑页面' : '添加页面'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 2, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 21, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="页面名称" name="name">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="关于我们"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="路由地址" name="path" :extra="form.path ? `${form.path}` : ''">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="/about"
+          v-model:value="form.path"
+        />
+      </a-form-item>
+      <a-form-item label="组件路径" name="component" :extra="form.component ? `@/views${form.component}` : ''">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入组件路径"
+          v-model:value="form.component"
+        />
+      </a-form-item>
+      <a-form-item label="Banner" name="photo">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseFile"
+          @del="onDeleteItem"
+        />
+<!--        <ele-image-upload-->
+<!--          v-model:value="images"-->
+<!--          :limit="1"-->
+<!--          :drag="true"-->
+<!--          :upload-handler="uploadHandler"-->
+<!--          @upload="onUpload"-->
+<!--        />-->
+      </a-form-item>
+      <a-form-item label="页面内容" name="content">
+        <!-- 编辑器 -->
+        <div class="content">
+          <tinymce-editor
+            v-model:value="content"
+            :disabled="disabled"
+            :init="config"
+            placeholder="图片直接粘贴自动上传"
+            @paste="onPaste"
+          />
+        </div>
+      </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="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 { addDesign, updateDesign } from '@/api/cms/design';
+  import { Design } from '@/api/cms/design/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import {uploadFile, uploadOss} from '@/api/system/file';
+  import TinymceEditor from "@/components/TinymceEditor/index.vue";
+  import useFormData from "@/utils/use-form-data";
+  import type {Article} from "@/api/cms/article/model";
+  import {ArticleCategory} from "@/api/cms/category/model";
+  import {removeSiteInfoCache} from "@/api/cms/website";
+  import success from "@/views/result/success/index.vue";
+  import {FileRecord} from "@/api/system/file/model";
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  const disabled = ref(false);
+  // 编辑器内容，双向绑定
+  const content = ref<any>('');
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Design | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 已上传数据
+  const images = ref<ItemType[]>([]);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<Design>({
+    pageId: undefined,
+    name: '',
+    images: '',
+    path: '',
+    component: '/about/index',
+    content: '',
+    type: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+  const config = ref({
+    height: 500,
+    images_upload_handler: (blobInfo, success, error) => {
+      const file = blobInfo.blob();
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      uploadOss(file).then(res => {
+        success(res.url)
+      }).catch((msg) => {
+        error(msg);
+      })
+      return false;
+    },
+    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+    file_picker_callback: (callback: any, _value: any, meta: any) => {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      // 设定文件可选类型
+      if (meta.filetype === 'image') {
+        input.setAttribute('accept', 'image/*');
+      } else if (meta.filetype === 'media') {
+        input.setAttribute('accept', 'video/*,.pdf');
+      }
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (!file) {
+          return;
+        }
+        if (meta.filetype === 'media') {
+          if (file.size / 1024 / 1024 > 200) {
+            editorRef.value?.alert({ content: '大小不能超过 200MB' });
+            return;
+          }
+          if (!file.type.startsWith('video/')) {
+            editorRef.value?.alert({ content: '只能选择视频文件' });
+            return;
+          }
+          uploadOss(file).then(res => {
+            callback(res.downloadUrl);
+          })
+        }
+      };
+      input.click();
+    }
+  });
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadFile(<File>item.file)
+          .then((result) => {
+            const addPath = `<p><img class="content-img" src="${result.url}"></p>`;
+            content.value = content.value + addPath
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    name: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写页面名称',
+        trigger: 'blur'
+      }
+    ],
+    path: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写路由地址',
+        trigger: 'blur'
+      }
+    ],
+    component: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写组件路径',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 上传事件 */
+  const uploadHandler = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    };
+    if (file.type.startsWith('video')) {
+      if (file.size / 1024 / 1024 > 200) {
+        message.error('大小不能超过 200MB');
+        return;
+      }
+    }
+    if (file.type.startsWith('image')) {
+      if (file.size / 1024 / 1024 > 5) {
+        message.error('大小不能超过 5MB');
+        return;
+      }
+    }
+
+    onUpload(item);
+  };
+
+  // 上传文件
+  const onUpload = (item: any) => {
+    const { file } = item;
+    uploadFile(file)
+      .then((data) => {
+        form.photo = data.path;
+        images.value.push({
+          uid: data.id,
+          url:
+            file.type == 'video/mp4'
+              ? 'https://oss.wsdns.cn/20240301/6e4e32cb808245d4be336b9486961145.png'
+              : data.path,
+          status: 'done'
+        });
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const chooseFile = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.downloadUrl,
+      status: 'done'
+    });
+    form.photo = data.downloadUrl;
+  }
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index,1)
+    form.photo = '';
+  }
+
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          content: content.value
+        };
+        const saveOrUpdate = isUpdate.value ? updateDesign : addDesign;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            // 清除缓存
+            removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId'));
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        content.value = ''
+        images.value = []
+        if (props.data) {
+          assignFields(props.data);
+          if(props.data.content){
+            content.value = props.data.content
+          }
+          if(props.data.photo){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.photo,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+          content.value = '';
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+<style lang="less">
+.sdf{
+  display: none;
+}
+</style>

src/views/cms/design/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/cms/design/detail/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <a-page-header
+    v-if="siteInfo"
+    :title="form.name"
+    :style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
+    @back="() => $router.go(-1)"
+  >
+    <template #extra>
+      <a-button key="1" type="primary" @click="save">保存</a-button>
+      <a-button key="2" @click="openPreview(`${form.path}`)">预览</a-button>
+    </template>
+    <a-spin :spinning="spinning">
+      <div class="ele-cell ele-cell-align-top">
+        <!-- 设计画布 -->
+        <div class="body ele-cell-content ele-bg-white">
+          {{ form }}
+          <a-divider />
+          layout: {{ layout }}
+          <template v-for="(item, index) in layout" :key="index">
+            <template v-if="item.name == 'header'">
+              <!--              <DesignHeader :data="item" @done="onDone" />-->
+            </template>
+            <template v-if="item.name == 'banner'">
+              <!--              <DesignHeader :data="item" @done="onDone" />-->
+              <!--              <DesignBanner :data="item" @done="onDone" />-->
+            </template>
+          </template>
+        </div>
+        <!-- 中间间隙 -->
+        <div v-if="showTools" style="width: 20px"></div>
+        <div v-else style="width: 10px"></div>
+        <!-- 设计工具 -->
+        <DesignTools
+          v-model:visible="showTools"
+          :data="form"
+          @update="openTools"
+          @done="doTools"
+        />
+      </div>
+    </a-spin>
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, ref, unref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import useFormData from '@/utils/use-form-data';
+  import { getDesign, updateDesign } from '@/api/cms/design';
+  import { Design } from '@/api/cms/design/model';
+  import { message } from 'ant-design-vue';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { openPreview } from '@/utils/common';
+  import { getSiteInfo } from '@/api/layout';
+  import { Website } from '@/api/cms/website/model';
+  import { Layout } from '@/api/layout/model';
+
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const { currentRoute } = useRouter();
+  const { query } = unref(currentRoute);
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { screenWidth } = storeToRefs(themeStore);
+  const current = ref<any>(null);
+  const spinning = ref(true);
+  const showTools = ref(true);
+  const siteInfo = ref<Website>();
+
+  const layout = ref<Layout>();
+
+  // 服务器信息
+  const { form, assignFields, resetFields } = useFormData<Design>({
+    pageId: undefined,
+    name: '',
+    images: '',
+    path: '',
+    component: '',
+    content: '',
+    type: undefined,
+    status: 0,
+    comments: '',
+    sortNumber: 100,
+    layout: undefined,
+    home: undefined
+  });
+
+  const openTools = (e) => {
+    showTools.value = !showTools.value;
+  };
+
+  const onDone = (item) => {
+    current.value = item;
+  };
+
+  const doTools = (item: any) => {
+    console.log(item, 'doTools');
+    current.value = item;
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    const formData = {
+      ...form,
+      layout: JSON.stringify(form.layout)
+    };
+    updateDesign(formData)
+      .then((msg) => {
+        message.success('保存成功');
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const { contentWidth } = storeToRefs(themeStore);
+  // 使用 watch 监听 contentWidth 改变
+  watch(contentWidth, (e) => {
+    console.log(e);
+  });
+
+  /**
+   * 加载数据
+   */
+  const reload = (id: number) => {
+    // 加载网站信息
+    getSiteInfo().then((data) => {
+      siteInfo.value = data;
+    });
+    getDesign(id).then((data) => {
+      if (data) {
+        spinning.value = false;
+        if (data.layout) {
+          try {
+            layout.value = JSON.parse(data.layout);
+          } catch (e) {
+            console.log('JSON格式有误');
+          }
+        }
+        assignFields(data);
+      }
+    });
+  };
+
+  watch(
+    () => query.id,
+    (id) => {
+      if (id) {
+        reload(Number(id));
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'DesignDetail'
+  };
+</script>
+
+<style lang="less">
+  .body {
+    width: 80vw;
+    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
+  }
+  .header {
+    height: 120px;
+  }
+</style>

src/views/cms/design/index.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="designId"
+          :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 === 'name'">
+              <a @click="openPreview(record.path)">{{ record.name }}</a>
+            </template>
+            <template v-if="column.key === 'path'">
+              <span class="ele-text-placeholder">{{ record.path }}</span>
+            </template>
+            <template v-if="column.key === 'component'">
+              <span class="ele-text-placeholder">{{ record.component }}</span>
+            </template>
+            <template v-if="column.key === 'photo'">
+              <a-image :src="record.photo" :width="180" />
+            </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="openDesign(record)">设计</a>
+                <a-divider type="vertical" />
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  :disabled="record.home == 1"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <DesignEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</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 DesignEdit from './components/design-edit.vue';
+  import {
+    pageDesign,
+    removeDesign,
+    removeBatchDesign
+  } from '@/api/cms/design';
+  import type { Design, DesignParam } from '@/api/cms/design/model';
+  import { useRouter } from 'vue-router';
+  import { openPreview } from '@/utils/common';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Design[]>([]);
+  // 当前编辑数据
+  const current = ref<Design | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  const domain = localStorage.getItem('Domain');
+
+  // 加载状态
+  const loading = ref(true);
+  const { push } = useRouter();
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageDesign({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      width: 90,
+      dataIndex: 'pageId'
+    },
+    {
+      title: '页面名称',
+      dataIndex: 'name',
+      key: 'name'
+    },
+    {
+      title: '路由地址',
+      dataIndex: 'path',
+      key: 'path'
+    },
+    {
+      title: '组件路径',
+      dataIndex: 'component',
+      key: 'component'
+    },
+    {
+      title: '配图',
+      dataIndex: 'photo',
+      key: 'photo',
+      width: 220
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 120,
+      align: 'center',
+      key: 'status'
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      align: 'center',
+      width: 120,
+      showSorterTooltip: false
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: DesignParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Design) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const openDesign = (row?: Design) => {
+    push({
+      path: '/cms/design/detail',
+      query: { id: row?.pageId }
+    });
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Design) => {
+    const hide = message.loading('请求中..', 0);
+    removeDesign(row.pageId)
+      .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);
+        removeBatchDesign(selection.value.map((d) => d.pageId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Design) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Design'
+  };
+</script>
+
+<style lang="less" scoped>
+  .sys-org-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-org-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+  .design-item {
+    margin: auto;
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 70px;
+    height: 70px;
+    border-radius: 70px;
+    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
+  }
+  :deep(.ant-image-img) {
+    max-height: 80px;
+  }
+</style>

src/views/cms/dict/components/dict-edit.vue

@@ -0,0 +1,177 @@
+<!-- 文章来源编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="460"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改文章来源' : '添加文章来源'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="字典名称" name="dictCode">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          disabled
+          placeholder="请输入字典名称"
+          v-model:value="form.dictCode"
+        />
+      </a-form-item>
+      <a-form-item label="字典值" name="dictDataName">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          placeholder="请输入字典值"
+          v-model:value="form.dictDataName"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="99999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="备注">
+        <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 { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { addDictData, updateDictData } from '@/api/system/dict-data';
+  import { DictData } from '@/api/system/dict-data/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: DictData | null;
+    // 字典ID
+    dictId?: number | 0;
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<DictData>({
+    dictId: undefined,
+    dictDataId: undefined,
+    dictDataName: '',
+    dictCode: 'articleSource',
+    dictDataCode: '',
+    sortNumber: 100,
+    comments: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    dictDataCode: [
+      {
+        required: true,
+        message: '请输入属性名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    dictCode: [
+      {
+        required: true,
+        message: '请输入属性值',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const saveOrUpdate = isUpdate.value ? updateDictData : addDictData;
+        form.dictDataCode = form.dictDataName;
+        form.dictId = props.dictId;
+        saveOrUpdate(form)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            const key = form.dictCode + ':' + localStorage.getItem('TenantId');
+            localStorage.removeItem(key);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>

src/views/cms/dict/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="dictDataId"
+        :columns="columns"
+        :datasource="datasource"
+        :customRow="customRow"
+        :scroll="{ x: 800 }"
+        cache-key="goodsDictTable"
+      >
+        <template #toolbar>
+          <a-space>
+            <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
+              <template #icon>
+                <plus-outlined />
+              </template>
+              <span>新建</span>
+            </a-button>
+          </a-space>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(record)">修改</a>
+              <a-divider type="vertical" />
+              <a-popconfirm
+                placement="topRight"
+                title="确定要删除此分类吗？"
+                @confirm="remove(record)"
+              >
+                <a class="ele-text-danger">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <dict-edit
+      v-model:visible="showEdit"
+      :dictId="dictId"
+      :data="current"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue/es';
+  import {
+    PlusOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { messageLoading } from 'ele-admin-pro/es';
+  import DictEdit from './components/dict-edit.vue';
+  import {
+    pageDictData,
+    removeDictData,
+    removeDictDataBatch
+  } from '@/api/system/dict-data';
+  import { DictParam } from '@/api/system/dict/model';
+  import { DictData } from '@/api/system/dict-data/model';
+  import { addDict, listDictionaries } from '@/api/system/dict';
+  import { Dictionary } from '@/api/system/dictionary/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const dictId = ref(0);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '名称',
+      dataIndex: 'dictDataName',
+      showSorterTooltip: false
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      sorter: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '排序号',
+      width: 180,
+      align: 'center',
+      dataIndex: 'sortNumber'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      align: 'center'
+    }
+  ]);
+
+  // 表格选中数据
+  const selection = ref<DictData[]>([]);
+
+  // 当前编辑数据
+  const current = ref<Dictionary | null>(null);
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where.dictCode = 'articleSource';
+    return pageDictData({ ...where, ...orders, page, limit });
+  };
+
+  /* 搜索 */
+  const reload = (where?: DictParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: DictData) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: DictData) => {
+    const hide = messageLoading('请求中..', 0);
+    removeDictData(row.dictDataId)
+      .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 = messageLoading('请求中..', 0);
+        removeDictDataBatch(selection.value.map((d) => d.dictDataId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  // 初始化字典
+  const loadDict = () => {
+    listDictionaries({ dictCode: 'articleSource' }).then(async (data) => {
+      if (data?.length == 0) {
+        await addDict({ dictCode: 'articleSource', dictName: '文章来源' });
+      }
+      await listDictionaries({ dictCode: 'articleSource' }).then((list) => {
+        list?.map((d) => {
+          dictId.value = Number(d.dictId);
+        });
+      });
+    });
+  };
+
+  loadDict();
+
+  /* 自定义行属性 */
+  const customRow = (record: DictData) => {
+    return {
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'TaskDictData'
+  };
+</script>

src/views/cms/docs-book/components/docs-book-edit.vue

@@ -0,0 +1,266 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="550"
+    :visible="visible"
+    :maskClosable="false"
+    :title="isUpdate ? '编辑书籍' : '添加书籍'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 5, sm: 7, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 18, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="书籍名称" name="name">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="书籍名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="英文标识" name="code">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="cms"
+          v-model:value="form.code"
+        />
+      </a-form-item>
+      <a-form-item label="排序号" name="sortNumber" v-if="isUpdate">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="状态" name="status" v-if="isUpdate">
+        <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="备注">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入备注"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="封面图" name="photo">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseFile"
+          @del="onDeleteItem"
+        />
+<!--        <ele-image-upload-->
+<!--          v-model:value="images"-->
+<!--          :limit="1"-->
+<!--          :accept="'image/png,image/jpeg'"-->
+<!--          :drag="true"-->
+<!--          :upload-handler="uploadHandler"-->
+<!--          @upload="onUpload"-->
+<!--        />-->
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { uuid } from 'ele-admin-pro';
+  import { addDocsBook, updateDocsBook } from '@/api/cms/docs-book';
+  import { DocsBook } from '@/api/cms/docs-book/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import useFormData from '@/utils/use-form-data';
+  import { uploadFile } from '@/api/system/file';
+  import {FileRecord} from "@/api/system/file/model";
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  // 编辑器内容，双向绑定
+  const content = ref<any>('');
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: DocsBook | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 已上传数据
+  const images = ref<ItemType[]>([]);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<DocsBook>({
+    bookId: undefined,
+    name: '',
+    code: '',
+    photo: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    name: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写书籍名称',
+        trigger: 'blur'
+      }
+    ],
+    code: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写英文标识',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 上传事件 */
+  const uploadHandler = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    };
+    if (file.type.startsWith('video')) {
+      return;
+    }
+    if (file.type.startsWith('image')) {
+      if (file.size / 1024 / 1024 > 1) {
+        message.error('大小不能超过 1MB');
+        return;
+      }
+    }
+    onUpload(item);
+  };
+
+  // 上传文件
+  const onUpload = (item: any) => {
+    const { file } = item;
+    uploadFile(file)
+      .then((data) => {
+        form.photo = data.path;
+        images.value.push({
+          uid: data.id,
+          url:
+            file.type == 'video/mp4'
+              ? 'https://oss.wsdns.cn/20240301/6e4e32cb808245d4be336b9486961145.png'
+              : data.path,
+          status: 'done'
+        });
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const chooseFile = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.photo = data.path;
+  }
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index,1)
+    form.photo = '';
+  }
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          content: content.value
+        };
+        const saveOrUpdate = isUpdate.value ? updateDocsBook : addDocsBook;
+        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) {
+          assignFields(props.data);
+          if (props.data.photo) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.photo,
+              status: 'done'
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+          content.value = '';
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/cms/docs-book/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/cms/docs-book/index.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookId"
+          :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 === 'name'">
+              <a @click="openPreview('/docs/' + record.code)">{{
+                record.name
+              }}</a>
+            </template>
+            <template v-if="column.key === 'path'">
+              <span class="ele-text-placeholder">{{ record.path }}</span>
+            </template>
+            <template v-if="column.key === 'component'">
+              <span class="ele-text-placeholder">{{ record.component }}</span>
+            </template>
+            <template v-if="column.key === 'photo'">
+              <a-image :src="record.photo" />
+            </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="openUrl('/cms/docs/' + record.code)"
+                  class="ele-text-warning"
+                  >管理</a
+                >
+                <a-divider type="vertical" />
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  :disabled="record.home == 1"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <DocsBookEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</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 DocsBookEdit from './components/docs-book-edit.vue';
+  import {
+    pageDocsBook,
+    removeDocsBook,
+    removeBatchDocsBook
+  } from '@/api/cms/docs-book';
+  import type { DocsBook, DocsBookParam } from '@/api/cms/docs-book/model';
+  import { useRouter } from 'vue-router';
+  import { openPreview, openUrl } from '@/utils/common';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<DocsBook[]>([]);
+  // 当前编辑数据
+  const current = ref<DocsBook | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+
+  // 加载状态
+  const loading = ref(true);
+  const { push } = useRouter();
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageDocsBook({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      width: 90,
+      dataIndex: 'bookId'
+    },
+    {
+      title: '封面图',
+      dataIndex: 'photo',
+      width: 120,
+      key: 'photo'
+    },
+    {
+      title: '书籍名称',
+      dataIndex: 'name',
+      key: 'name'
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 120,
+      align: 'center',
+      key: 'status'
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      align: 'center',
+      width: 120,
+      showSorterTooltip: false
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: DocsBookParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: DocsBook) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const openDocsBook = (row?: DocsBook) => {
+    push({
+      path: '/cms/book/detail',
+      query: { id: row?.bookId }
+    });
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: DocsBook) => {
+    const hide = message.loading('请求中..', 0);
+    removeDocsBook(row.bookId)
+      .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);
+        removeBatchDocsBook(selection.value.map((d) => d.bookId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: DocsBook) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openUrl('/cms/docs/' + record.code)
+      }
+    };
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'DocsBook'
+  };
+</script>
+
+<style lang="less" scoped>
+  .sys-org-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-org-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+  .design-item {
+    margin: auto;
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 70px;
+    height: 70px;
+    border-radius: 70px;
+    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
+  }
+  :deep(.ant-image-img) {
+    max-height: 80px;
+  }
+</style>

src/views/cms/docs-md-bak/components/docs-edit.vue

@@ -0,0 +1,184 @@
+<!-- 文档编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="400"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改文档' : '添加文档'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      :label-col="{ md: { span: 24 }, sm: { span: 24 } }"
+      :wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
+      layout="vertical"
+    >
+      <a-form-item label="上级目录" v-bind="validateInfos.parentId">
+        <docs-select
+          :data="docs"
+          placeholder="请选择上级目录"
+          v-model:value="form.parentId"
+        />
+      </a-form-item>
+      <a-form-item label="文档标题" v-bind="validateInfos.title">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          placeholder="请输入文档标题"
+          v-model:value="form.title"
+          @pressEnter="save"
+        />
+      </a-form-item>
+      <a-form-item label="排序号" v-bind="validateInfos.sortNumber">
+        <a-input-number
+          :min="0"
+          :max="99999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+    </a-form>
+    <!--    <a-alert-->
+    <!--      message="文档内容应该放在最后一级"-->
+    <!--      banner-->
+    <!--      style="margin-bottom: 12px"-->
+    <!--    />-->
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import DocsSelect from './docs-select.vue';
+  import { addDocs, updateDocs } from '@/api/cms/docs';
+  import type { Docs } from '@/api/cms/docs/model';
+
+  const useForm = Form.useForm;
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Docs | null;
+    // 文档id
+    docsId?: number;
+    // 全部文档
+    docs: Docs[];
+  }>();
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const form = reactive<Docs>({
+    // 文档id
+    docsId: 0,
+    // 文档标题
+    title: '',
+    // 文档类型 0目录 1文档
+    type: 0,
+    // 上级文档
+    parentId: 0,
+    // 封面图
+    avatar: '',
+    // 用户ID
+    userId: '',
+    // 所属门店ID
+    shopId: '',
+    // 排序
+    sortNumber: 100,
+    // 备注
+    comments: '',
+    // 内容
+    content: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive({
+    title: [
+      {
+        required: true,
+        message: '请输入文档标题',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* type选择改变 */
+  const onTypeChange = (e) => {
+    if (e.target.value === 1) {
+      form.type = 0;
+    } else {
+      form.type = 1;
+    }
+  };
+
+  const { resetFields, validate, validateInfos } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    validate()
+      .then(() => {
+        loading.value = true;
+        const docsData = {
+          ...form,
+          parentId: form.parentId || 0
+        };
+        const saveOrUpdate = isUpdate.value ? updateDocs : addDocs;
+        saveOrUpdate(docsData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignObject(form, props.data);
+          isUpdate.value = true;
+        } else {
+          form.parentId = props.docsId;
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>

src/views/cms/docs-md-bak/components/docs-select.vue

@@ -0,0 +1,39 @@
+<!-- 目录选择下拉框 -->
+<template>
+  <a-tree-select
+    allow-clear
+    tree-default-expand-all
+    :placeholder="placeholder"
+    :value="value || undefined"
+    :tree-data="data"
+    :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+    @update:value="updateValue"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { Docs } from '@/api/cms/docs/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value?: number): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      // 选中的数据(v-modal)
+      value?: number;
+      // 提示信息
+      placeholder?: string;
+      // 目录数据
+      data: Docs[];
+    }>(),
+    {
+      placeholder: '请选择目录'
+    }
+  );
+
+  /* 更新选中数据 */
+  const updateValue = (value?: number) => {
+    emit('update:value', value);
+  };
+</script>

src/views/cms/docs-md-bak/content.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="page">
+    <a-card v-if="current" :bordered="false" :title="`${current.title}`">
+      <template #extra>
+        <a-space>
+          <a @click="onEdit">{{ isUpdate ? '预览' : '编辑' }}</a>
+          <a-divider v-if="isUpdate" type="vertical" />
+          <a v-if="isUpdate" type="primary" @click="save">保存</a>
+        </a-space>
+      </template>
+      <div class="content">
+        <!-- 编辑器 -->
+        <byte-md-editor
+            v-if="isUpdate"
+            v-model:value="content"
+            placeholder="请输入您的内容，图片请直接粘贴"
+            :locale="zh_Hans"
+            mode="split"
+            :plugins="plugins"
+            :editorConfig="{ lineNumbers: true }"
+            @paste="onPaste"
+        />
+        <byte-md-viewer v-else :value="content" :plugins="plugins" />
+      </div>
+    </a-card>
+    <div class="docs-sumbit" v-if="isUpdate">
+      <a-button type="primary" @click="save">保存</a-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import 'bytemd/dist/index.min.css';
+  import { reactive, ref, watch } from 'vue';
+  import 'github-markdown-css/github-markdown-light.css';
+  import type { Docs } from '@/api/cms/docs/model';
+  import { message } from 'ant-design-vue';
+  import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
+  import highlight from '@bytemd/plugin-highlight';
+  // 中文语言文件
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  // // 链接、删除线、复选框、表格等的插件
+  import gfm from '@bytemd/plugin-gfm';
+  // // 插件的中文语言文件
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  // // 预览界面的样式，这里用的 github 的 markdown 主题
+  import 'github-markdown-css/github-markdown-light.css';
+  import { addDocs, updateDocs } from '@/api/cms/docs';
+  import {ItemType} from "ele-admin-pro/es/ele-image-upload/types";
+  import {uploadFile} from "@/api/system/file";
+
+  const props = defineProps<{
+    // 文档 id
+    current?: Docs | null;
+  }>();
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  // 提交状态
+  const loading = ref(false);
+  // 编辑器内容，双向绑定
+  const content = ref('');
+  const editStatus = ref(false);
+  // const disabled = ref(false);
+  // 是否是修改
+  const isUpdate = ref(false);
+  // const docsContentId = ref(0);
+
+  const form = reactive<Docs>({
+    docsId: 0,
+    content: ''
+  });
+
+  const onEdit = () => {
+    isUpdate.value = !isUpdate.value;
+  }
+
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    console.log(e);
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    console.log(items);
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadFile(<File>item.file)
+            .then((result) => {
+              const addPath = '!['+result.name+']('+ result.url+')\n\r';
+              content.value = content.value + addPath
+            })
+            .catch((e) => {
+              message.error(e.message);
+            });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  // 保存文档
+  const save = () => {
+    loading.value = true;
+    const docsData = {
+      ...form,
+      docsId: props.current?.docsId,
+      content: content.value
+    };
+    const saveOrUpdate = isUpdate.value ? updateDocs : addDocs;
+    saveOrUpdate(docsData)
+      .then((msg) => {
+        loading.value = false;
+        isUpdate.value = false;
+        message.success(msg);
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  // 监听文档 id 变化
+  watch(
+    () => props.current?.docsId,
+    () => {
+      content.value = props.current?.content + '';
+    }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Markdown'
+  };
+</script>
+<style lang="less" scoped>
+  /deep/.markdown-body{
+    background-color: transparent; /* 设置背景透明 */
+  }
+  .sys-category-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-category-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+  .content *{
+      max-width: 80%;
+  }
+  .docs-sumbit {
+    margin: 20px 0;
+  }
+</style>

src/views/cms/docs-md-bak/index.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="ele-body">
+    <a-card
+      :bordered="false"
+      class="transparent-bg"
+      :body-style="{ padding: '16px' }"
+    >
+      <ele-split-layout
+        width="266px"
+        allow-collapse
+        :right-style="{ overflow: 'hidden' }"
+        :style="{ minHeight: 'calc(100vh - 152px)' }"
+      >
+        <a-card :body-style="{ padding: '0' }">
+          <ele-toolbar theme="default">
+            <a-space :size="10">
+              <span>目录</span>
+              <a-button
+                v-permission="'cms:docs:save'"
+                type="primary"
+                :size="`small`"
+                class="ele-btn-icon"
+                @click="openEdit()"
+              >
+                <template #icon>
+                  <plus-outlined />
+                </template>
+              </a-button>
+              <a-button
+                v-permission="'cms:docs:update'"
+                type="primary"
+                :size="`small`"
+                :disabled="!current"
+                class="ele-btn-icon"
+                @click="openEdit(current)"
+              >
+                <template #icon>
+                  <edit-outlined />
+                </template>
+              </a-button>
+              <a-button
+                v-permission="'cms:docs:remove'"
+                danger
+                type="primary"
+                :size="`small`"
+                :disabled="!current"
+                class="ele-btn-icon"
+                @click="remove"
+              >
+                <template #icon>
+                  <delete-outlined />
+                </template>
+              </a-button>
+            </a-space>
+          </ele-toolbar>
+          <div class="ele-border-split sys-docs-list">
+            <a-tree
+              :tree-data="data"
+              v-model:expanded-keys="expandedRowKeys"
+              v-model:selected-keys="selectedRowKeys"
+              @select="onTreeSelect"
+            >
+              <template #title="{ key: treeKey, title }">
+                <a-dropdown :trigger="['contextmenu']">
+                  <span>{{ title }}</span>
+                  <template #overlay>
+                    <a-menu
+                      @click="
+                        ({ key: menuKey }) =>
+                          onContextMenuClick(treeKey, menuKey)
+                      "
+                    >
+                      <a-menu-item key="1">添加</a-menu-item>
+                      <a-menu-item key="2">修改</a-menu-item>
+                      <a-menu-item key="3">删除</a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+              </template>
+            </a-tree>
+          </div>
+        </a-card>
+        <template #content>
+          <content :data="data" :current="current" @done="query"></content>
+        </template>
+      </ele-split-layout>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <docs-edit
+      v-model:visible="showEdit"
+      :data="editData"
+      :docs="data"
+      :docs-id="current?.docsId"
+      @done="query"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import { toTreeData, eachTreeData } from 'ele-admin-pro';
+  import Content from './content.vue';
+  import DocsEdit from './components/docs-edit.vue';
+  import { listDocs, getDocs, removeDocs } from '@/api/cms/docs';
+  import type { Docs, DocsParam } from '@/api/cms/docs/model';
+  import useSearch from '@/utils/use-search';
+
+  // 加载状态
+  const loading = ref(true);
+
+  // 树形数据
+  const data = ref<any[]>([]);
+
+  // 树展开的key
+  const expandedRowKeys = ref<number[]>([]);
+
+  // 树选中的key
+  const selectedRowKeys = ref<number[]>([]);
+
+  // 选中数据
+  const current = ref<Docs | null>();
+
+  // 是否显示表单弹窗
+  const showEdit = ref(false);
+
+  // 编辑回显数据
+  const editData = ref<Docs | null>(null);
+
+  // 表单数据
+  const { where } = useSearch<DocsParam>({
+    title: ''
+  });
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+    listDocs()
+      .then((list) => {
+        loading.value = false;
+        const eks: number[] = [];
+        list.forEach((d, i) => {
+          d.key = d.docsId;
+          d.value = d.docsId;
+          if (typeof d.docsId === 'number') {
+            eks.push(d.docsId);
+          }
+        });
+        expandedRowKeys.value = eks;
+        data.value = toTreeData({
+          data: list,
+          idField: 'docsId',
+          parentIdField: 'parentId'
+        });
+        if (list.length) {
+          if (typeof list[0].docsId === 'number') {
+            selectedRowKeys.value = [list[0].docsId];
+          }
+          queryDocs(list[0].docsId);
+        }
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  /* 选择数据 */
+  const onTreeSelect = () => {
+    eachTreeData(data.value, (d) => {
+      if (
+        typeof d.docsId === 'number' &&
+        selectedRowKeys.value.includes(d.docsId)
+      ) {
+        queryDocs(d.docsId);
+        return false;
+      }
+    });
+  };
+
+  // 查询文档
+  const queryDocs = (docsId) => {
+    getDocs(docsId).then((detail) => {
+      current.value = detail;
+    });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (item?: Docs | null) => {
+    editData.value = item ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除 */
+  const remove = () => {
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的文档吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeDocs(current.value?.docsId)
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            query();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  const onContextMenuClick = (treeKey: string, menuKey: string | number) => {
+    // 添加操作
+    if (menuKey == 1) {
+      openEdit();
+    }
+    // 编辑操作
+    if (menuKey == 2) {
+      openEdit(current.value);
+    }
+    // 删除操作
+    if (menuKey == 3) {
+      remove();
+    }
+    console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Docs'
+  };
+</script>
+<style lang="less" scoped>
+  .transparent-bg {
+    background-color: transparent; /* 设置背景透明 */
+  }
+  .sys-docs-list {
+    padding: 12px 6px;
+    height: calc(100vh - 242px);
+    border-width: 1px;
+    border-style: solid;
+    overflow: auto;
+  }
+</style>

src/views/cms/docs-md-bak/markdown.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="page">
+    <a-card v-if="current" :bordered="false" :title="`${current.title}`">
+      <!-- 编辑器 -->
+      <tinymce-editor
+        v-model:value="content"
+        :disabled="disabled"
+        :init="config"
+      />
+      <div class="ele-text-info" style="margin-top: 10px">
+        <a-space :size="100">
+          <div>文档ID: {{ current.docsId }}</div>
+          <div>预览地址: {{ `/docs?id=${current.docsId}` }}</div>
+          <div>发布时间: {{ current.createTime }}</div>
+        </a-space>
+      </div>
+      <div class="docs-sumbit" v-permission="'cms:docs:update'">
+        <a-space>
+          <a-button type="primary" @click="save">保存</a-button>
+          <!--          <router-link :to="'/content/docs?id=' + current.docsId" @click.stop="">-->
+          <!--            <a-button>预览</a-button>-->
+          <!--          </router-link>-->
+        </a-space>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, ref, watch } from 'vue';
+  import 'github-markdown-css/github-markdown-light.css';
+  import type { Docs } from '@/api/cms/docs/model';
+  import { message } from 'ant-design-vue';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+  import {
+    addDocsContent,
+    getDocsContent,
+    updateDocsContent
+  } from '@/api/cms/docs-content';
+  import { DocsContent } from '@/api/cms/docs-content/model';
+
+  const props = defineProps<{
+    // 文档 id
+    current?: Docs | null;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 编辑器内容，双向绑定
+  const content = ref('');
+  const disabled = ref(false);
+  // 是否是修改
+  const isUpdate = ref(false);
+  const docsContentId = ref(0);
+
+  const form = reactive<DocsContent>({
+    docsContentId: 0,
+    docsId: 0,
+    content: ''
+  });
+
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+  const config = ref({
+    height: 690,
+    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+    file_picker_callback: (callback: any, _value: any, meta: any) => {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      // 设定文件可选类型
+      if (meta.filetype === 'image') {
+        input.setAttribute('accept', 'image/*');
+      } else if (meta.filetype === 'media') {
+        input.setAttribute('accept', 'video/*');
+      }
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (!file) {
+          return;
+        }
+        if (meta.filetype === 'media') {
+          if (!file.type.startsWith('video/')) {
+            editorRef.value?.alert({ content: '只能选择视频文件' });
+            return;
+          }
+        }
+        if (file.size / 1024 / 1024 > 20) {
+          editorRef.value?.alert({ content: '大小不能超过 20MB' });
+          return;
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          if (e.target?.result != null) {
+            const blob = new Blob([e.target.result], { type: file.type });
+            callback(URL.createObjectURL(blob));
+          }
+        };
+        reader.readAsArrayBuffer(file);
+      };
+      input.click();
+    }
+  });
+
+  /* 搜索 */
+  const reload = () => {
+    getDocsContent(Number(props.current?.docsId))
+      .then((res) => {
+        content.value = String(res.content);
+        docsContentId.value = Number(res.docsContentId);
+        isUpdate.value = true;
+      })
+      .catch(() => {
+        loading.value = false;
+        content.value = '';
+        isUpdate.value = false;
+      });
+  };
+
+  // 保存文档
+  const save = () => {
+    loading.value = true;
+    const docsData = {
+      ...form,
+      docsContentId: docsContentId.value,
+      docsId: props.current?.docsId,
+      content: content.value
+    };
+    const saveOrUpdate = isUpdate.value ? updateDocsContent : addDocsContent;
+    saveOrUpdate(docsData)
+      .then((msg) => {
+        loading.value = false;
+        message.success(msg);
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  // 监听文档 id 变化
+  watch(
+    () => props.current?.docsId,
+    () => {
+      reload();
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  .sys-category-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-category-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+
+  .docs-sumbit {
+    margin: 10px 0;
+  }
+</style>

src/views/cms/docs-md-bak/tinymce.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="page">
+    <a-card v-if="current" :bordered="false" :title="`${current.title}`">
+      <!-- 编辑器 -->
+      <tinymce-editor
+        v-model:value="content"
+        :disabled="disabled"
+        :init="config"
+      />
+      <div class="ele-text-info" style="margin-top: 10px">
+        <a-space :size="100">
+          <div>文档ID: {{ current.docsId }}</div>
+          <div>预览地址: {{ `/docs?id=${current.docsId}` }}</div>
+          <div>发布时间: {{ current.createTime }}</div>
+        </a-space>
+      </div>
+      <div class="docs-sumbit" v-permission="'cms:docs:update'">
+        <a-space>
+          <a-button type="primary" @click="save">保存</a-button>
+          <!--          <router-link :to="'/content/docs?id=' + current.docsId" @click.stop="">-->
+          <!--            <a-button>预览</a-button>-->
+          <!--          </router-link>-->
+        </a-space>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, ref, watch } from 'vue';
+  import 'github-markdown-css/github-markdown-light.css';
+  import type { Docs } from '@/api/cms/docs/model';
+  import { message } from 'ant-design-vue';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+  import {
+    addDocsContent,
+    getDocsContent,
+    updateDocsContent
+  } from '@/api/cms/docs-content';
+  import { DocsContent } from '@/api/cms/docs-content/model';
+
+  const props = defineProps<{
+    // 文档 id
+    current?: Docs | null;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 编辑器内容，双向绑定
+  const content = ref('');
+  const disabled = ref(false);
+  // 是否是修改
+  const isUpdate = ref(false);
+  const docsContentId = ref(0);
+
+  const form = reactive<DocsContent>({
+    docsContentId: 0,
+    docsId: 0,
+    content: ''
+  });
+
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+  const config = ref({
+    height: 690,
+    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+    file_picker_callback: (callback: any, _value: any, meta: any) => {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      // 设定文件可选类型
+      if (meta.filetype === 'image') {
+        input.setAttribute('accept', 'image/*');
+      } else if (meta.filetype === 'media') {
+        input.setAttribute('accept', 'video/*');
+      }
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (!file) {
+          return;
+        }
+        if (meta.filetype === 'media') {
+          if (!file.type.startsWith('video/')) {
+            editorRef.value?.alert({ content: '只能选择视频文件' });
+            return;
+          }
+        }
+        if (file.size / 1024 / 1024 > 20) {
+          editorRef.value?.alert({ content: '大小不能超过 20MB' });
+          return;
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          if (e.target?.result != null) {
+            const blob = new Blob([e.target.result], { type: file.type });
+            callback(URL.createObjectURL(blob));
+          }
+        };
+        reader.readAsArrayBuffer(file);
+      };
+      input.click();
+    }
+  });
+
+  /* 搜索 */
+  const reload = () => {
+    getDocsContent(Number(props.current?.docsId))
+      .then((res) => {
+        content.value = String(res.content);
+        docsContentId.value = Number(res.docsContentId);
+        isUpdate.value = true;
+      })
+      .catch(() => {
+        loading.value = false;
+        content.value = '';
+        isUpdate.value = false;
+      });
+  };
+
+  // 保存文档
+  const save = () => {
+    loading.value = true;
+    const docsData = {
+      ...form,
+      docsContentId: docsContentId.value,
+      docsId: props.current?.docsId,
+      content: content.value
+    };
+    const saveOrUpdate = isUpdate.value ? updateDocsContent : addDocsContent;
+    saveOrUpdate(docsData)
+      .then((msg) => {
+        loading.value = false;
+        message.success(msg);
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  // 监听文档 id 变化
+  watch(
+    () => props.current?.docsId,
+    () => {
+      reload();
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  .sys-category-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-category-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+
+  .docs-sumbit {
+    margin: 10px 0;
+  }
+</style>

src/views/cms/docs/components/docs-edit.vue

@@ -0,0 +1,167 @@
+<!-- 文档编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="400"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改文档' : '添加文档'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ md: { span: 24 }, sm: { span: 24 } }"
+      :wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
+      layout="vertical"
+    >
+      <a-form-item label="上级目录" name="parentId">
+        <docs-select
+          :data="docs"
+          placeholder="请选择上级目录"
+          v-model:value="form.parentId"
+        />
+      </a-form-item>
+      <a-form-item label="文档标题" name="title">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          placeholder="请输入文档标题"
+          v-model:value="form.title"
+          @pressEnter="save"
+        />
+      </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 } from 'ele-admin-pro';
+  import DocsSelect from './docs-select.vue';
+  import { addDocs, updateDocs } from '@/api/cms/docs';
+  import type { Docs } from '@/api/cms/docs/model';
+  import { FormInstance } from 'ant-design-vue/es/form';
+
+  const useForm = Form.useForm;
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 分类
+    docs?: Docs[];
+    // 修改回显的数据
+    data?: Docs | null;
+  }>();
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 提交状态
+  const loading = ref(false);
+  const formRef = ref<FormInstance | null>(null);
+
+  // 表单数据
+  const form = reactive<Docs>({
+    // 文档id
+    docsId: 0,
+    // 文档标题
+    title: '',
+    bookId: undefined,
+    // 上级文档
+    parentId: 0,
+    // 用户ID
+    userId: '',
+    // 所属门店ID
+    shopId: '',
+    // 排序
+    sortNumber: 100,
+    // 备注
+    comments: '',
+    // 内容
+    content: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive({
+    title: [
+      {
+        required: true,
+        message: '请输入文档标题',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const { resetFields, validate, validateInfos } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const docsData = {
+          ...form,
+          parentId: form.parentId || 0
+        };
+        const saveOrUpdate = isUpdate.value ? updateDocs : addDocs;
+        saveOrUpdate(docsData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if(props.data){
+          assignObject(form, props.data);
+          if (props.data?.isUpdate) {
+            isUpdate.value = true;
+          } else {
+            form.title = '';
+            form.parentId = form.docsId;
+            form.docsId = undefined;
+            form.content = undefined;
+            isUpdate.value = false;
+          }
+        }
+      }
+    }
+  );
+</script>

src/views/cms/docs/components/docs-select.vue

@@ -0,0 +1,39 @@
+<!-- 目录选择下拉框 -->
+<template>
+  <a-tree-select
+    allow-clear
+    tree-default-expand-all
+    :placeholder="placeholder"
+    :value="value || undefined"
+    :tree-data="data"
+    :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+    @update:value="updateValue"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { Docs } from '@/api/cms/docs/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value?: number): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      // 选中的数据(v-modal)
+      value?: number;
+      // 提示信息
+      placeholder?: string;
+      // 目录数据
+      data: Docs[];
+    }>(),
+    {
+      placeholder: '请选择目录'
+    }
+  );
+
+  /* 更新选中数据 */
+  const updateValue = (value?: number) => {
+    emit('update:value', value);
+  };
+</script>

src/views/cms/docs/content.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="page">
+    <a-card v-if="current" :bordered="false" :title="`${current.title}`">
+      <template #extra>
+        <a-space>
+          <a @click="onEdit">{{ isUpdate ? '预览' : '编辑' }}</a>
+          <a-divider v-if="isUpdate" type="vertical" />
+          <a v-if="isUpdate" type="primary" @click="save">保存</a>
+        </a-space>
+      </template>
+      <div class="content">
+        <!-- 编辑器 -->
+        <byte-md-editor
+            v-if="isUpdate"
+            v-model:value="content"
+            placeholder="请输入您的内容，图片请直接粘贴"
+            :locale="zh_Hans"
+            mode="split"
+            :plugins="plugins"
+            :editorConfig="{ lineNumbers: true }"
+            @paste="onPaste"
+        />
+        <byte-md-viewer v-else :value="content" :plugins="plugins" />
+      </div>
+    </a-card>
+    <div class="docs-sumbit" v-if="isUpdate">
+      <a-button type="primary" @click="save">保存</a-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import 'bytemd/dist/index.min.css';
+  import { reactive, ref, watch } from 'vue';
+  import 'github-markdown-css/github-markdown-light.css';
+  import type { Docs } from '@/api/cms/docs/model';
+  import { message } from 'ant-design-vue';
+  import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
+  import highlight from '@bytemd/plugin-highlight';
+  // 中文语言文件
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  // // 链接、删除线、复选框、表格等的插件
+  import gfm from '@bytemd/plugin-gfm';
+  // // 插件的中文语言文件
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  // // 预览界面的样式，这里用的 github 的 markdown 主题
+  import 'github-markdown-css/github-markdown-light.css';
+  import { addDocs, updateDocs } from '@/api/cms/docs';
+  import {ItemType} from "ele-admin-pro/es/ele-image-upload/types";
+  import {uploadFile} from "@/api/system/file";
+
+  const props = defineProps<{
+    // 文档 id
+    current?: Docs | null;
+  }>();
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  // 提交状态
+  const loading = ref(false);
+  // 编辑器内容，双向绑定
+  const content = ref('');
+  const editStatus = ref(false);
+  // const disabled = ref(false);
+  // 是否是修改
+  const isUpdate = ref(false);
+  // const docsContentId = ref(0);
+
+  const form = reactive<Docs>({
+    docsId: 0,
+    content: ''
+  });
+
+  const onEdit = () => {
+    isUpdate.value = !isUpdate.value;
+  }
+
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    console.log(e);
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    console.log(items);
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadFile(<File>item.file)
+            .then((result) => {
+              const addPath = '!['+result.name+']('+ result.url+')\n\r';
+              content.value = content.value + addPath
+            })
+            .catch((e) => {
+              message.error(e.message);
+            });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  // 保存文档
+  const save = () => {
+    loading.value = true;
+    const docsData = {
+      ...form,
+      docsId: props.current?.docsId,
+      content: content.value
+    };
+    const saveOrUpdate = isUpdate.value ? updateDocs : addDocs;
+    saveOrUpdate(docsData)
+      .then((msg) => {
+        loading.value = false;
+        isUpdate.value = false;
+        message.success(msg);
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  // 监听文档 id 变化
+  watch(
+    () => props.current?.docsId,
+    () => {
+      content.value = props.current?.content + '';
+    }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Markdown'
+  };
+</script>
+<style lang="less" scoped>
+  /deep/.markdown-body{
+    background-color: transparent; /* 设置背景透明 */
+  }
+  .sys-category-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-category-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+  .content *{
+      max-width: 80%;
+  }
+  .docs-sumbit {
+    margin: 20px 0;
+  }
+</style>

src/views/cms/docs/index.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="ele-body">
+    <ele-split-layout
+      width="266px"
+      allow-collapse
+      :right-style="{ overflow: 'hidden' }"
+      :style="{ height: 'calc(100vh - 152px)' }"
+    >
+      <a-card :body-style="{ padding: '0' }">
+        <ele-toolbar theme="default">
+          <a-space :size="10">
+            <b>目录</b>
+            <a-button
+              type="primary"
+              :size="`small`"
+              class="ele-btn-icon"
+              @click="openAdd()"
+            >
+              <template #icon>
+                <plus-outlined />
+              </template>
+            </a-button>
+            <a-button
+              type="primary"
+              :size="`small`"
+              :disabled="!current"
+              class="ele-btn-icon"
+              @click="openEdit()"
+            >
+              <template #icon>
+                <edit-outlined />
+              </template>
+            </a-button>
+            <a-button
+              danger
+              type="primary"
+              :size="`small`"
+              :disabled="!current"
+              class="ele-btn-icon"
+              @click="remove"
+            >
+              <template #icon>
+                <delete-outlined />
+              </template>
+            </a-button>
+          </a-space>
+        </ele-toolbar>
+        <div class="ele-border-split sys-docs-list">
+          <a-tree
+            :tree-data="data"
+            v-model:expanded-keys="expandedRowKeys"
+            v-model:selected-keys="selectedRowKeys"
+            @select="onTreeSelect"
+          />
+        </div>
+      </a-card>
+      <template #content>
+        <tinymce v-if="form.docsId" @done="reload" @echo="onEcho" />
+      </template>
+    </ele-split-layout>
+    <!-- 编辑弹窗 -->
+    <DocsEdit
+      :docs="data"
+      :data="form"
+      v-model:visible="showEdit"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, unref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import {assignObject, eachTreeData, toTreeData} from 'ele-admin-pro';
+  import DocsEdit from './components/docs-edit.vue';
+  import { listDocs, removeDocs } from '@/api/cms/docs';
+  import type { Docs, DocsParam } from '@/api/cms/docs/model';
+  import useSearch from '@/utils/use-search';
+  import { useRouter } from 'vue-router';
+  import { openUrl } from '@/utils/common';
+  import Tinymce from '@/views/cms/docs/tinymce.vue';
+  import useFormData from "@/utils/use-form-data";
+
+  const { currentRoute } = useRouter();
+  // 加载状态
+  const loading = ref(true);
+  // 书籍编号
+  const bookCode = ref<string>();
+  // 书籍ID
+  const bookId = ref<number>();
+  // 文档ID
+  const docsId = ref<number>(0);
+  // 树形数据
+  const data = ref<any[]>([]);
+  // 树展开的key
+  const expandedRowKeys = ref<number[]>([]);
+  // 树选中的key
+  const selectedRowKeys = ref<number[]>([]);
+  // 选中数据
+  const current = ref<Docs | null>(null);
+  // 是否显示表单弹窗
+  const showEdit = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<Docs>({
+    docsId: undefined,
+    title: '',
+    parentId: 0,
+    userId: '',
+    content: '',
+    shopId: '',
+    sortNumber: 100,
+    comments: '',
+    bookId: undefined,
+    code: '',
+    isUpdate: false
+  });
+
+  // 表单数据
+  const { where } = useSearch<DocsParam>({
+    bookId: undefined,
+    docsId: undefined,
+    title: '',
+    code: ''
+  });
+
+  const openAdd = () => {
+    form.isUpdate = false
+    showEdit.value = true;
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = () => {
+    form.isUpdate = true
+    showEdit.value = true;
+  };
+
+  /* 选择数据 */
+  const onTreeSelect = (e) => {
+    eachTreeData(
+      data.value,
+      (item, index, parent) => {
+        // index 是当前循环索引, parent 是父级数据
+        if (item.docsId == e[0]) {
+          if(!item.children){
+            openUrl(`/cms/docs/${bookCode.value}?id=${e[0]}`);
+          }else {
+            expandedRowKeys.value.push(item.docsId);
+            assignObject(form,item);
+          }
+        }
+      },
+      'children'
+    );
+  };
+
+  const onEcho = (item: Docs) => {
+    current.value = item;
+  };
+
+  /* 查询 */
+  const reload = () => {
+    loading.value = true;
+    if (bookCode.value) {
+      where.code = bookCode.value;
+      listDocs(where)
+        .then((list) => {
+          loading.value = false;
+          const eks: number[] = [];
+          if (list.length == 0) {
+            return;
+          }
+          list.forEach((d, i) => {
+            // 设置模块的bookId
+            if(i == 0 && !form.docsId){
+              form.bookId = d.bookId;
+            }
+            d.key = d.docsId;
+            d.value = d.docsId;
+          });
+          data.value = toTreeData({
+            data: list,
+            idField: 'docsId',
+            parentIdField: 'parentId',
+            addParentIds: true
+          });
+          queryDocs();
+
+          // 加载默认文档
+          // if (docsId.value == 0) {
+          //   let selectId = 0;
+          //   selectedRowKeys.value = [];
+          //   // 一级分类
+          //   const p1 = data.value[0];
+          //   eks.push(p1.docsId);
+          //   selectId = p1.docsId;
+          //   if (p1.children) {
+          //     // 二级分类
+          //     const p2 = p1.children[0];
+          //     eks.push(p2.docsId);
+          //     selectId = p2.docsId;
+          //     if (p2.children) {
+          //       const p3 = p2.children[0];
+          //       eks.push(p3.docsId);
+          //       selectId = p3.docsId;
+          //     }
+          //   }
+          //   selectedRowKeys.value.push(selectId);
+          //   expandedRowKeys.value = eks;
+          //   current.value = data.value[0];
+          //   docsId.value = data.value[0].docsId;
+          // }
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.error(e.message);
+        });
+    }
+  };
+
+  // 查询文档
+  const queryDocs = () => {
+    selectedRowKeys.value = [];
+    const eks: number[] = [];
+    // 展开当前分类及选中当前分类
+    selectedRowKeys.value.push(Number(form.docsId));
+    eachTreeData(
+      data.value,
+      (item, index, parent) => {
+        // index 是当前循环索引, parent 是父级数据
+        if (item.docsId == form.docsId) {
+          expandedRowKeys.value = item.parentIds;
+          assignObject(form,item);
+        }
+      },
+      'children'
+    );
+  };
+
+  /* 删除 */
+  const remove = () => {
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的文档吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeDocs(current.value?.docsId)
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { params, query } = unref(route);
+      // 获取书籍的英文标识
+      if (params.name) {
+        bookCode.value = String(params.name);
+        reload();
+      }
+      // 获取当前文档ID
+      const id = Number(query.id);
+      if (id > 0) {
+        form.docsId = id;
+      } else {
+        form.docsId = undefined;
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Docs'
+  };
+</script>
+<style lang="less" scoped>
+  .transparent-bg {
+    background-color: transparent; /* 设置背景透明 */
+  }
+  .sys-docs-list {
+    padding: 12px 6px;
+    height: calc(100vh - 160px);
+    border-width: 1px;
+    border-style: solid;
+    overflow: auto;
+  }
+  :deep(.ant-tree-node-selected) {
+    color: var(--orange-7);
+    font-weight: 700;
+    background: none !important;
+  }
+</style>

src/views/cms/docs/markdown.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="page">
+    <a-card v-if="current" :bordered="false" :title="`${current.title}`">
+      <!-- 编辑器 -->
+      <tinymce-editor
+        v-model:value="content"
+        :disabled="disabled"
+        :init="config"
+      />
+      <div class="ele-text-info" style="margin-top: 10px">
+        <a-space :size="100">
+          <div>文档ID: {{ current.docsId }}</div>
+          <div>预览地址: {{ `/docs?id=${current.docsId}` }}</div>
+          <div>发布时间: {{ current.createTime }}</div>
+        </a-space>
+      </div>
+      <div class="docs-sumbit" v-permission="'cms:docs:update'">
+        <a-space>
+          <a-button type="primary" @click="save">保存</a-button>
+          <!--          <router-link :to="'/content/docs?id=' + current.docsId" @click.stop="">-->
+          <!--            <a-button>预览</a-button>-->
+          <!--          </router-link>-->
+        </a-space>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, ref, watch } from 'vue';
+  import 'github-markdown-css/github-markdown-light.css';
+  import type { Docs } from '@/api/cms/docs/model';
+  import { message } from 'ant-design-vue';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+  import {
+    addDocsContent,
+    getDocsContent,
+    updateDocsContent
+  } from '@/api/cms/docs-content';
+  import { DocsContent } from '@/api/cms/docs-content/model';
+
+  const props = defineProps<{
+    // 文档 id
+    current?: Docs | null;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 编辑器内容，双向绑定
+  const content = ref('');
+  const disabled = ref(false);
+  // 是否是修改
+  const isUpdate = ref(false);
+  const docsContentId = ref(0);
+
+  const form = reactive<DocsContent>({
+    docsContentId: 0,
+    docsId: 0,
+    content: ''
+  });
+
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+  const config = ref({
+    height: 690,
+    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+    file_picker_callback: (callback: any, _value: any, meta: any) => {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      // 设定文件可选类型
+      if (meta.filetype === 'image') {
+        input.setAttribute('accept', 'image/*');
+      } else if (meta.filetype === 'media') {
+        input.setAttribute('accept', 'video/*');
+      }
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (!file) {
+          return;
+        }
+        if (meta.filetype === 'media') {
+          if (!file.type.startsWith('video/')) {
+            editorRef.value?.alert({ content: '只能选择视频文件' });
+            return;
+          }
+        }
+        if (file.size / 1024 / 1024 > 20) {
+          editorRef.value?.alert({ content: '大小不能超过 20MB' });
+          return;
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          if (e.target?.result != null) {
+            const blob = new Blob([e.target.result], { type: file.type });
+            callback(URL.createObjectURL(blob));
+          }
+        };
+        reader.readAsArrayBuffer(file);
+      };
+      input.click();
+    }
+  });
+
+  /* 搜索 */
+  const reload = () => {
+    getDocsContent(Number(props.current?.docsId))
+      .then((res) => {
+        content.value = String(res.content);
+        docsContentId.value = Number(res.docsContentId);
+        isUpdate.value = true;
+      })
+      .catch(() => {
+        loading.value = false;
+        content.value = '';
+        isUpdate.value = false;
+      });
+  };
+
+  // 保存文档
+  const save = () => {
+    loading.value = true;
+    const docsData = {
+      ...form,
+      docsContentId: docsContentId.value,
+      docsId: props.current?.docsId,
+      content: content.value
+    };
+    const saveOrUpdate = isUpdate.value ? updateDocsContent : addDocsContent;
+    saveOrUpdate(docsData)
+      .then((msg) => {
+        loading.value = false;
+        message.success(msg);
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  // 监听文档 id 变化
+  watch(
+    () => props.current?.docsId,
+    () => {
+      reload();
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  .sys-category-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-category-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+
+  .docs-sumbit {
+    margin: 10px 0;
+  }
+</style>

src/views/cms/docs/tinymce.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="page" v-if="docsId > 0">
+    <a-card v-if="form" :bordered="false" :title="`${form.title}`">
+      <!-- 编辑器 -->
+      <tinymce-editor
+        v-model:value="content"
+        :disabled="disabled"
+        :init="config"
+        placeholder="图片直接粘贴自动上传"
+      />
+      <div class="docs-sumbit" style="margin-top: 20px">
+        <a-space>
+          <a-button
+            type="primary"
+            :disabled="loading || content == ''"
+            @click="save"
+            >保存</a-button
+          >
+          <a-button @click="openPreview(`/docs/${form.code}?id=${form.docsId}`)"
+            >预览</a-button
+          >
+        </a-space>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, ref, unref, watch } from 'vue';
+  import 'github-markdown-css/github-markdown-light.css';
+  import type { Docs } from '@/api/cms/docs/model';
+  import { Form, message } from 'ant-design-vue';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+  import { uploadOss } from '@/api/system/file';
+  import { addDocs, getDocs, updateDocs } from '@/api/cms/docs';
+  import { useRouter } from 'vue-router';
+  import { assignObject } from 'ele-admin-pro';
+  import { openPreview } from '@/utils/common';
+
+  const emit = defineEmits<{
+    (e: 'echo', data: Docs): void;
+  }>();
+
+  const { currentRoute } = useRouter();
+  const useForm = Form.useForm;
+  // 提交状态
+  const loading = ref(false);
+  // 编辑器内容，双向绑定
+  const content = ref('');
+  const disabled = ref(false);
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 文档ID
+  const docsId = ref<number>(0);
+
+  const form = reactive<Docs>({
+    docsId: 0,
+    title: '',
+    content: '',
+    bookId: undefined,
+    code: '',
+    parentId: undefined,
+    parentName: '',
+    createTime: '',
+    updateTime: ''
+  });
+
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+  const config = ref({
+    height: 520,
+    images_upload_handler: (blobInfo, success, error) => {
+      const file = blobInfo.blob();
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      uploadOss(file)
+        .then((res) => {
+          success(res.url);
+        })
+        .catch((msg) => {
+          error(msg);
+        });
+      return false;
+    },
+    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+    file_picker_callback: (callback: any, _value: any, meta: any) => {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      // 设定文件可选类型
+      if (meta.filetype === 'image') {
+        input.setAttribute('accept', 'image/*');
+      } else if (meta.filetype === 'media') {
+        input.setAttribute('accept', 'video/*,.pdf');
+      }
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (!file) {
+          return;
+        }
+        if (meta.filetype === 'media') {
+          if (file.size / 1024 / 1024 > 200) {
+            editorRef.value?.alert({ content: '大小不能超过 200MB' });
+            return;
+          }
+          if (!file.type.startsWith('video/')) {
+            editorRef.value?.alert({ content: '只能选择视频文件' });
+            return;
+          }
+          uploadOss(file).then((res) => {
+            callback(res.url);
+          });
+        }
+      };
+      input.click();
+    }
+  });
+
+  const { resetFields } = useForm(form);
+  /* 搜索 */
+  const reload = () => {
+    resetFields();
+    content.value = '';
+    getDocs(docsId.value)
+      .then((data) => {
+        assignObject(form, data);
+        if (data.content) {
+          content.value = String(form.content);
+        }
+        emit('echo', form);
+        isUpdate.value = true;
+      })
+      .catch(() => {
+        loading.value = false;
+        isUpdate.value = false;
+      });
+  };
+
+  // 保存文档
+  const save = () => {
+    loading.value = true;
+    const docsData = {
+      ...form,
+      content: content.value
+    };
+    const saveOrUpdate = isUpdate.value ? updateDocs : addDocs;
+    saveOrUpdate(docsData)
+      .then((msg) => {
+        setTimeout(() => {
+          loading.value = false;
+          message.success(msg);
+        },500)
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  // 监听文档 id 变化
+  watch(
+    currentRoute,
+    (route) => {
+      const { query } = unref(route);
+      const id = Number(query.id);
+      if (id > 0) {
+        docsId.value = id;
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/cms/domain/components/domain-edit.vue

@@ -0,0 +1,227 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="isUpdate ? 880 : 500"
+    :visible="visible"
+    :maskClosable="false"
+    :title="isUpdate ? '域名DNS解析验证' : '添加域名'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    :confirmLoading="loading"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 5, sm: 7, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 18, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="https://" name="domain">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="example.com"
+          :disabled="isUpdate"
+          v-model:value="form.domain"
+          @pressEnter="save"
+        />
+      </a-form-item>
+      <a-form-item label="添加DNS解析" name="check" v-if="isUpdate">
+        <a-space direction="vertical">
+          <div class="ele-text-placeholder" style="line-height: 2.2em"
+            >请按以下提示，在您的域名控制台添加DNS解析配置</div
+          >
+          <table
+            class="ele-table ele-table-border ele-table-stripe ele-table-medium"
+          >
+            <colgroup>
+              <col width="180" />
+              <col width="120" />
+              <col />
+            </colgroup>
+            <thead>
+              <tr>
+                <th>主机记录</th>
+                <th>记录类型</th>
+                <th>记录值</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>{{ form.hostName }}</td>
+                <td>CNAME</td>
+                <td>{{ form.hostValue }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </a-space>
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="99999"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="操作" v-if="isUpdate && form.status == 0">
+        <a-button type="primary" @click="save">验证域名</a-button>
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { addDomain, resolvable } from '@/api/cms/domain';
+  import { Domain } from '@/api/cms/domain/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { FormInstance, type Rule } from 'ant-design-vue/es/form';
+  import useFormData from '@/utils/use-form-data';
+  import { isUrl } from 'ele-admin-pro';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Domain | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  const disabled = ref(false);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<Domain>({
+    id: undefined,
+    domain: '',
+    hostName: '',
+    hostValue: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    domain: [
+      {
+        required: true,
+        type: 'string',
+        message: '请输入合法域名',
+        trigger: 'blur',
+        validator: (_rule: Rule, value: string) => {
+          return new Promise<void>((resolve, reject) => {
+            if (!isUrl(`https://${value}`)) {
+              if (value.includes('http')) {
+                return reject('不含http开头');
+              }
+              return reject('请输入合法域名');
+            }
+            disabled.value = true;
+            return resolve();
+          });
+        }
+      }
+    ]
+  });
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        if (form.domain) {
+          form.domain = form.domain.trim();
+          form.domain = form.domain.replace('https://', '');
+          form.domain = form.domain.replace('http://', '');
+          const split = form.domain.split('.');
+          if (split.length == 2) {
+            form.hostName = '@';
+          }
+          if (split.length > 2) {
+            const suffix = split[split.length - 1];
+            const name = split[split.length - 2];
+            form.hostName = form.domain.replace(`.${name}.${suffix}`, '');
+          }
+        }
+        const formData = {
+          ...form
+        };
+        if (isUpdate.value) {
+          setTimeout(() => {
+            resolvable(Number(form.id))
+              .then((data) => {
+                loading.value = false;
+                message.success(data.message);
+                updateVisible(false);
+                emit('done');
+              })
+              .catch((res) => {
+                loading.value = false;
+                message.error(res.message);
+              });
+          }, 1000);
+        }
+        if (!isUpdate.value) {
+          addDomain(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) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/cms/domain/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/cms/domain/index.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="id"
+          :columns="columns"
+          :datasource="datasource"
+          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 === 'domain'">
+              <a
+                v-if="record.status == 1"
+                class="ele-text-success"
+                @click="openPreview(`http://${record.domain}`)"
+                >{{ record.domain }}</a
+              >
+              <span v-else>
+                <a-space>
+                  {{ record.domain }}
+                  <a @click="openEdit(record)">查看验证</a>
+                </a-space>
+              </span>
+            </template>
+            <template v-if="column.key === 'hostName'">
+              <span class="ele-text-placeholder">{{ record.hostName }}</span>
+            </template>
+            <template v-if="column.key === 'hostType'">
+              <span class="ele-text-placeholder">CNAME</span>
+            </template>
+            <template v-if="column.key === 'hostValue'">
+              <span class="ele-text-placeholder">{{ record.hostValue }}</span>
+            </template>
+            <template v-if="column.key === 'photo'">
+              <a-image :src="record.photo" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag
+                v-if="record.status === 0"
+                color="orange"
+                style="cursor: pointer"
+                @click="openEdit(record)"
+                >验证中</a-tag
+              >
+              <a-tag v-if="record.status === 1" color="green">绑定成功</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a-button @click="openEdit(record)" size="small">管理</a-button>
+                <a-popconfirm
+                  title="确定要删除此域名吗？"
+                  :disabled="record.home == 1"
+                  @confirm="remove(record)"
+                >
+                  <a-button size="small">删除</a-button>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <DomainEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</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 DomainEdit from './components/domain-edit.vue';
+  import {
+    pageDomain,
+    removeDomain,
+    removeBatchDomain,
+    updateDomain
+  } from '@/api/cms/domain';
+  import type { Domain, DomainParam } from '@/api/cms/domain/model';
+  import { openPreview } from '@/utils/common';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Domain[]>([]);
+  // 当前编辑数据
+  const current = ref<Domain | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageDomain({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '域名',
+      dataIndex: 'domain',
+      width: 240,
+      key: 'domain'
+    },
+    {
+      title: '主机记录',
+      dataIndex: 'hostName',
+      align: 'center',
+      key: 'hostName'
+    },
+    {
+      title: '主机类型',
+      dataIndex: 'hostType',
+      align: 'center',
+      key: 'hostType'
+    },
+    {
+      title: '主机记录值',
+      dataIndex: 'hostValue',
+      align: 'center',
+      key: 'hostValue'
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 120,
+      align: 'center',
+      key: 'status'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: DomainParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Domain) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Domain) => {
+    const hide = message.loading('请求中..', 0);
+    removeDomain(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);
+        removeBatchDomain(selection.value.map((d) => d.id))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+</script>
+<script lang="ts">
+  export default {
+    name: 'Domain'
+  };
+</script>

src/views/cms/down/components/video-edit.vue

@@ -0,0 +1,223 @@
+<!-- 角色编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="600"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '编辑内容' : '上传文件'"
+    :body-style="{ paddingBottom: '8px' }"
+    @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="fileName" v-if="!isUpdate">
+        <span
+          class="ele-text-success"
+          v-if="fileName"
+          style="margin-right: 10px"
+        >
+          {{ fileName }}
+        </span>
+        <a-upload
+          :show-upload-list="false"
+          :accept="'video/*'"
+          v-if="!fileName"
+          :customRequest="onUpload"
+        >
+          <a-button type="primary" class="ele-btn-icon">
+            <template #icon>
+              <UploadOutlined />
+            </template>
+            <span>上传文件</span>
+          </a-button>
+        </a-upload>
+      </a-form-item>
+      <a-form-item label="文件名称" name="name">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          placeholder="请输入文件名称"
+          v-model:value="form.name"
+        />
+      </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="images">-->
+      <!--        <ele-image-upload-->
+      <!--          v-model:value="images"-->
+      <!--          :limit="1"-->
+      <!--          :drag="true"-->
+      <!--          :item-style="{ width: '60px', height: '60px' }"-->
+      <!--          :accept="'image/*'"-->
+      <!--          :upload-handler="uploadHandler"-->
+      <!--          @upload="onUpload"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import type { FileRecord } from '@/api/system/file/model';
+  import { messageLoading } from 'ele-admin-pro';
+  import { addFiles, updateFiles, uploadFile } from '@/api/system/file';
+  import { UploadOutlined } from '@ant-design/icons-vue';
+  import { RuleObject } from 'ant-design-vue/es/form';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: FileRecord | null;
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+  const fileName = ref('');
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<FileRecord>({
+    id: 0,
+    name: '',
+    comments: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    fileName: [
+      {
+        required: true,
+        message: '请上传文件',
+        type: 'string',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject) => {
+          if (!isUpdate.value && fileName.value.length == 0) {
+            return Promise.reject('请上传文件');
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
+    name: [
+      {
+        required: true,
+        message: '请输入文件名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    if (!file.type.startsWith('video')) {
+      message.error('文件格式不正确！');
+      return;
+    }
+    if (file.size / 1024 / 1024 > 100) {
+      message.error('大小不能超过 100MB');
+      return;
+    }
+    const hide = messageLoading({
+      content: '上传中..',
+      duration: 0,
+      mask: true
+    });
+    uploadFile(file)
+      .then((data) => {
+        hide();
+        fileName.value = String(data.name);
+        // images.value.push({
+        //   uid: data.id,
+        //   url: FILE_THUMBNAIL + data.path,
+        //   status: 'done'
+        // });
+        message.success('上传成功');
+      })
+      .catch((e) => {
+        message.error(e.message);
+        hide();
+      });
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const saveOrUpdate = isUpdate.value ? updateFiles : addFiles;
+        saveOrUpdate(form)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>

src/views/cms/down/index.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="page">
+    <a-page-header :ghost="false" title="文件库">
+      <div class="ele-text-secondary"> 上传、分享、存档有价值的文件素材 </div>
+    </a-page-header>
+    <div class="ele-body">
+      <a-card :bordered="false">
+        <!-- 表格 -->
+        <ele-pro-table
+          ref="tableRef"
+          row-key="id"
+          :columns="columns"
+          :datasource="datasource"
+          v-model:selection="selection"
+          :scroll="{ x: 800 }"
+          cache-key="proCmsVideoTable"
+        >
+          <template #toolbar>
+            <a-space>
+              <a-upload
+                :show-upload-list="false"
+                :accept="'application/*'"
+                :customRequest="onUpload"
+              >
+                <a-button type="primary" class="ele-btn-icon">
+                  <template #icon>
+                    <UploadOutlined />
+                  </template>
+                  <span>上传文件</span>
+                </a-button>
+              </a-upload>
+              <a-button
+                danger
+                type="primary"
+                class="ele-btn-icon"
+                v-if="selection.length > 0"
+                @click="removeBatch"
+              >
+                <template #icon>
+                  <delete-outlined />
+                </template>
+                <span>删除</span>
+              </a-button>
+              <a-input-search
+                allow-clear
+                v-model:value="searchText"
+                placeholder="请输入关键词"
+                @search="reload"
+                @pressEnter="reload"
+              >
+                <template #addonBefore>
+                  <a-select
+                    v-model:value="type"
+                    style="width: 100px; margin: -5px -12px"
+                  >
+                    <a-select-option value="name">文件名称</a-select-option>
+                    <a-select-option value="createNickname">
+                      上传人
+                    </a-select-option>
+                  </a-select>
+                </template>
+              </a-input-search>
+            </a-space>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'name'">
+              <span :href="record.url" target="_blank">{{ record.name }}</span>
+              <a-tooltip :title="`复制链接地址`">
+                <copy-outlined
+                  style="padding-left: 4px"
+                  @click="copyText(record.url)"
+                />
+              </a-tooltip>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a :href="record.url" target="_blank">下载</a>
+                <a-divider type="vertical" />
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  placement="topRight"
+                  title="确定要删除此评价吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+      <!-- 编辑弹窗 -->
+      <video-edit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue/es';
+  import {
+    UploadOutlined,
+    DeleteOutlined,
+    CopyOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { messageLoading, toDateString } from 'ele-admin-pro/es';
+  import VideoEdit from './components/video-edit.vue';
+  import {
+    pageFiles,
+    removeFile,
+    removeFiles,
+    uploadFile
+  } from '@/api/system/file/index';
+  import type {
+    FileRecord,
+    FileRecordParam
+  } from '@/api/system/file/model/index';
+  import { copyText } from '@/utils/common';
+  // import { FILE_SERVER } from '@/config/setting';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  // 表格选中数据
+  const selection = ref<FileRecord[]>([]);
+  // 当前编辑数据
+  const current = ref<FileRecord | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  const type = ref('name');
+  const searchText = ref('');
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '文件名称',
+      dataIndex: 'name',
+      ellipsis: true
+    },
+    {
+      title: '描述',
+      dataIndex: 'comments',
+      ellipsis: true
+    },
+    {
+      title: '文件大小',
+      dataIndex: 'length',
+      sorter: true,
+      showSorterTooltip: false,
+      ellipsis: true,
+      customRender: ({ text }) => {
+        if (text < 1024) {
+          return text + 'B';
+        } else if (text < 1024 * 1024) {
+          return (text / 1024).toFixed(1) + 'KB';
+        } else if (text < 1024 * 1024 * 1024) {
+          return (text / 1024 / 1024).toFixed(1) + 'M';
+        } else {
+          return (text / 1024 / 1024 / 1024).toFixed(1) + 'G';
+        }
+      },
+      width: 120
+    },
+    {
+      title: '发布者',
+      width: 120,
+      dataIndex: 'createNickname'
+    },
+    {
+      title: '发布时间',
+      dataIndex: 'createTime',
+      sorter: true,
+      width: 180,
+      showSorterTooltip: false,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text)
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 200,
+      align: 'center'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    if (type.value == 'name') {
+      where.name = searchText.value;
+    }
+    if (type.value == 'createNickname') {
+      where.createNickname = searchText.value;
+    }
+    where.contentType = 'application';
+    return pageFiles({ ...where, ...orders, page, limit });
+  };
+
+  /* 搜索 */
+  const reload = (where?: FileRecordParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: FileRecord) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: FileRecord) => {
+    const hide = messageLoading('请求中..', 0);
+    removeFile(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 = messageLoading('请求中..', 0);
+        removeFiles(selection.value.map((d) => d.id))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    if (!file.type.startsWith('application')) {
+      message.error('只能选择文件');
+      return;
+    }
+    if (file.size / 1024 / 1024 > 100) {
+      message.error('大小不能超过 100MB');
+      return;
+    }
+    const hide = messageLoading({
+      content: '上传中..',
+      duration: 0,
+      mask: true
+    });
+    uploadFile(file)
+      .then((data) => {
+        hide();
+        message.success('上传成功');
+        reload();
+      })
+      .catch((e) => {
+        message.error(e.message);
+        hide();
+      });
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'VideoIndex'
+  };
+</script>

src/views/cms/down/player/index.vue

@@ -0,0 +1,124 @@
+<!-- 角色编辑弹窗 -->
+<template>
+  <div class="page">
+    <a-page-header :ghost="false" :title="form.name">
+      <div class="ele-text-secondary">
+        {{ form.comments }}
+      </div>
+    </a-page-header>
+
+    <div class="ele-body">
+      <a-card :bordered="false" style="width: 70%">
+        <ele-xg-player
+          :config="{
+            id: 'demoPlayer1',
+            lang: 'zh-cn',
+            fluid: true,
+            // 视频地址
+            url: FILE_SERVER + form.path,
+            // 封面
+            poster: '',
+            // 开启倍速播放
+            playbackRate: [0.5, 1, 1.5, 2],
+            // 开启画中画
+            pip: true
+          }"
+          @player="onPlayer1"
+        />
+      </a-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch, unref } from 'vue';
+  import Player from 'xgplayer';
+  import { useRouter } from 'vue-router';
+  import { toDateString } from 'ele-admin-pro';
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { message } from 'ant-design-vue/es';
+  import useFormData from '@/utils/use-form-data';
+  import { FileRecord } from '@/api/system/file/model';
+  import { getFile } from '@/api/system/file';
+  const { currentRoute } = useRouter();
+  import { FILE_SERVER } from '@/config/setting';
+  const ROUTE_PATH = '/cms/video/player';
+
+  // 视频播放器一实例
+  let player1: Player;
+  // 视频播放器一是否实例化完成
+  const ready1 = ref(false);
+
+  // 视频播放器一配置
+  const config1 = reactive({
+    id: 'demoPlayer1',
+    lang: 'zh-cn',
+    fluid: true,
+    // 视频地址
+    url: 'https://file.wsdns.cn/20221126/cf17ef352db54bf28efeda268107714f.mp4',
+    // 封面
+    poster:
+      'https://file.wsdns.cn//20221125/49f0c461d61e48f28b324366a0a63a2e.jpg',
+    // 开启倍速播放
+    playbackRate: [0.5, 1, 1.5, 2],
+    // 开启画中画
+    pip: true
+  });
+
+  /* 播放器一渲染完成 */
+  const onPlayer1 = (player: Player) => {
+    player1 = player;
+    player1.on('play', () => {
+      ready1.value = true;
+    });
+  };
+  // 视频信息
+  const { form, assignFields } = useFormData<FileRecord>({
+    id: 0,
+    name: '',
+    url: '',
+    path: '',
+    comments: '',
+    createNickname: '',
+    createTime: ''
+  });
+  // 请求状态
+  const loading = ref(true);
+  /*  */
+  const query = () => {
+    const { query } = unref(currentRoute);
+    const id = query.id;
+    if (!id || form.id === Number(id)) {
+      return;
+    }
+    loading.value = true;
+    getFile(Number(id))
+      .then((data) => {
+        loading.value = false;
+        assignFields({
+          ...data,
+          createTime: toDateString(data.createTime)
+        });
+        // 修改页签标题
+        if (unref(currentRoute).path === ROUTE_PATH) {
+          setPageTabTitle(String(data.comments));
+        }
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { path } = unref(route);
+      if (path !== ROUTE_PATH) {
+        return;
+      }
+      query();
+    },
+    { immediate: true }
+  );
+</script>

src/views/cms/form-record/components/form-record-edit.vue

@@ -0,0 +1,168 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="1000"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="true"
+    :title="'处理'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 2, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 21, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="备注">
+        <a-textarea
+          :rows="4"
+          :maxlength="500"
+          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="1">已处理</a-radio>
+          <a-radio :value="0">待处理</a-radio>
+        </a-radio-group>
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { addFormRecord, updateFormRecord } from '@/api/cms/form-record';
+  import { FormRecord } from '@/api/cms/form-record/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import useFormData from '@/utils/use-form-data';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  // 编辑器内容，双向绑定
+  const content = ref<any>('');
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: FormRecord | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 已上传数据
+  const images = ref<ItemType[]>([]);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<FormRecord>({
+    formRecordId: undefined,
+    formId: undefined,
+    status: 0,
+    comments: ''
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    name: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写页面名称',
+        trigger: 'blur'
+      }
+    ],
+    path: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写路由地址',
+        trigger: 'blur'
+      }
+    ],
+    component: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写组件路径',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          formData: JSON.stringify(form.formData)
+        };
+        const saveOrUpdate = isUpdate.value ? updateFormRecord : addFormRecord;
+        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) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+          form.status = 1;
+        } else {
+          isUpdate.value = false;
+          content.value = '';
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+<style lang="less"></style>

src/views/cms/form-record/components/search.vue

@@ -0,0 +1,74 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-input-search
+      allow-clear
+      placeholder="请输入关键词"
+      v-model:value="where.keywords"
+      @pressEnter="search"
+      @search="search"
+    />
+    <FormSelect
+      v-model:value="where.formId"
+      :placeholder="`选择表单名称`"
+      style="width: 220px"
+      @change="chooseFormName"
+    />
+    <a-button @click="reset">重置</a-button>
+    <a-button type="primary" class="ele-btn-icon">
+      <span>导出xls</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { watch } from 'vue';
+  import useSearch from '@/utils/use-search';
+  import { FormRecordParam } from '@/api/cms/form-record/model';
+  import { Form } from '@/api/cms/form/model';
+  import {assignObject} from "ele-admin-pro";
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+      data?: Form;
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: FormRecordParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 表单数据
+  const { where, resetFields } = useSearch<FormRecordParam>({
+    formRecordId: undefined,
+    formId: undefined,
+    phone: undefined,
+    keywords: undefined
+  });
+
+  const chooseFormName = (id: number) => {
+    where.formId = id;
+    emit('search', where);
+  };
+
+  const search = () => {
+    emit('search', where);
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/cms/form-record/index.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="formRecordId"
+          :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 === 'name'">
+              <a @click="openPreview(record.path)">{{ record.name }}</a>
+            </template>
+            <template v-if="column.key === 'path'">
+              <span class="ele-text-placeholder">{{ record.path }}</span>
+            </template>
+            <template v-if="column.key === 'component'">
+              <span class="ele-text-placeholder">{{ record.component }}</span>
+            </template>
+            <template v-if="column.key === 'photo'">
+              <a-image :src="record.photo" :width="180" />
+            </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
+                  v-if="record.status == 1"
+                  @click="openEdit(record)"
+                  class="ele-text-success"
+                  >已处理</a
+                >
+                <template v-if="record.status == 0">
+                  <a
+                    v-if="record.status == 0"
+                    @click="openEdit(record)"
+                    class="ele-text-warning"
+                    >待处理</a
+                  >
+                  <a-divider type="vertical" />
+                  <a-popconfirm
+                    title="确定要删除此记录吗？"
+                    @confirm="remove(record)"
+                  >
+                    <a class="ele-text-danger">删除</a>
+                  </a-popconfirm>
+                </template>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <FormRecordEdit
+        v-model:visible="showEdit"
+        :data="current"
+        @done="reload"
+      />
+    </div>
+  </div>
+</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 FormRecordEdit from './components/form-record-edit.vue';
+  import {
+    pageFormRecord,
+    removeFormRecord,
+    removeBatchFormRecord
+  } from '@/api/cms/form-record';
+  import type {
+    FormRecord,
+    FormRecordParam
+  } from '@/api/cms/form-record/model';
+  import { useRouter } from 'vue-router';
+  import { openPreview } from '@/utils/common';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<FormRecord[]>([]);
+  // 当前编辑数据
+  const current = ref<FormRecord | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  const domain = localStorage.getItem('Domain');
+
+  // 加载状态
+  const loading = ref(true);
+  const { push } = useRouter();
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageFormRecord({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      width: 90,
+      dataIndex: 'formRecordId'
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'phone',
+      width: 180,
+      key: 'phone'
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name'
+    },
+    {
+      title: '其他数据',
+      dataIndex: 'component',
+      key: 'component'
+    },
+    // {
+    //   title: '状态',
+    //   dataIndex: 'status',
+    //   width: 120,
+    //   align: 'center',
+    //   key: 'status'
+    // },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      align: 'center',
+      width: 120,
+      showSorterTooltip: false
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: FormRecordParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: FormRecord) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const openFormRecord = (row?: FormRecord) => {
+    push({
+      path: '/cms/form-record/detail',
+      query: { id: row?.formRecordId }
+    });
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: FormRecord) => {
+    const hide = message.loading('请求中..', 0);
+    removeFormRecord(row.formRecordId)
+      .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);
+        removeBatchFormRecord(selection.value.map((d) => d.formRecordId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: FormRecord) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'FormRecord'
+  };
+</script>
+
+<style lang="less" scoped>
+  .sys-org-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-org-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+  :deep(.ant-image-img) {
+    max-height: 80px;
+  }
+</style>