fix: 协议设置

apps/web-antd/src/components/form/components/editor.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { QuillEditor } from '@vueup/vue-quill';
+// eslint-disable-next-line n/no-extraneous-import
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
+import { useVModel } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+
+import { uploadFile } from '#/api/core/upload';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+});
+const emits = defineEmits(['update:value']);
+// 创建对QuillEditor的引用，用于后续获取Quill实例
+const quillEditorRef = ref(null);
+const isUpload = ref(false);
+const mValue = useVModel(props, 'value', emits, {
+  defaultValue: props.value,
+  passive: true,
+});
+// 富文本编辑器配置选项
+const editorOptions = {
+  theme: 'snow',
+  modules: {
+    toolbar: [
+      ['bold', 'italic', 'underline', 'strike'],
+      ['blockquote', 'code-block'],
+      [{ header: 1 }, { header: 2 }],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      [{ script: 'sub' }, { script: 'super' }],
+      [{ indent: '-1' }, { indent: '+1' }],
+      [{ direction: 'rtl' }],
+      [{ size: ['small', false, 'large', 'huge'] }],
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      [{ color: [] }, { background: [] }],
+      [{ font: [] }],
+      [{ align: [] }],
+      ['clean'],
+      ['link', 'image', 'video'],
+    ],
+  },
+  placeholder: '请输入消息内容',
+};
+
+/**
+ * 直接处理编辑器的粘贴事件
+ * 这是一个备用方法，通过Quill的clipboard模块直接处理粘贴事件
+ */
+const setupQuillPasteHandler = () => {
+  // 确保编辑器已经挂载
+  if (!quillEditorRef.value) return;
+
+  const quill = quillEditorRef.value.getQuill();
+  if (!quill) return;
+
+  // 获取Quill的clipboard模块
+  const clipboard = quill.getModule('clipboard');
+
+  // 保存原始的粘贴处理函数
+  const originalMatchers = clipboard.matchers;
+
+  // 重写粘贴处理函数
+  clipboard.addMatcher('img', (node: any, delta: any) => {
+    // 这里可以处理HTML中的img标签
+    // 但对于直接粘贴的图片文件，这个方法不会被触发
+    return delta;
+  });
+
+  // 监听编辑器的paste事件
+  quill.root.addEventListener('paste', async (e: ClipboardEvent) => {
+    const imageFile = getImageFromClipboard(e);
+
+    if (imageFile) {
+      e.preventDefault();
+
+      if (isUpload.value === true) {
+        return;
+      }
+      isUpload.value = true;
+      const imageUrl = await uploadImage(imageFile);
+
+      if (imageUrl) {
+        insertImageToEditor(quill, imageUrl);
+      }
+    }
+  });
+};
+/**
+ * 从剪贴板数据中提取图片文件
+ * @param {ClipboardEvent} event - 剪贴板事件
+ * @returns {File|null} - 返回图片文件或null
+ */
+const getImageFromClipboard = (event: ClipboardEvent): File | null => {
+  const clipboardData = event.clipboardData;
+  if (!clipboardData) return null;
+
+  // 遍历剪贴板中的所有项目
+  const items = clipboardData.items;
+  for (const item of items) {
+    // 检查是否是图片类型
+    if (item.type.includes('image')) {
+      return item.getAsFile();
+    }
+  }
+
+  return null;
+};
+
+/**
+ * 在编辑器中插入图片
+ * @param {any} quill - Quill编辑器实例
+ * @param {string} imageUrl - 图片URL
+ */
+const insertImageToEditor = (quill: any, imageUrl: string): void => {
+  if (!quill) return;
+
+  // 获取当前光标位置
+  const range = quill.getSelection();
+
+  if (range) {
+    // 在光标位置插入图片
+    quill.insertEmbed(range.index, 'image', imageUrl);
+    // 将光标移动到图片后面
+    quill.setSelection(range.index + 1);
+  } else {
+    // 如果没有选择范围，则在文档末尾插入
+    const length = quill.getLength();
+    quill.insertEmbed(length - 1, 'image', imageUrl);
+    quill.setSelection(length);
+  }
+};
+/**
+ * 图片上传函数
+ * @param {File} file - 要上传的图片文件
+ * @returns {Promise<string>} - 返回上传后的图片URL
+ */
+const uploadImage = async (file: File): Promise<string> => {
+  try {
+    // 创建FormData对象，用于发送文件数据
+    const formData = new FormData();
+    formData.append('file', file);
+
+    // 显示上传中的提示
+    message.loading({ content: '图片上传中...', key: 'imageUpload' });
+
+    return uploadFile({
+      file,
+    }).then((data: any) => {
+      message.success({
+        content: '图片上传成功',
+        key: 'imageUpload',
+        duration: 2,
+      });
+      isUpload.value = false;
+      return data.url;
+    });
+  } catch (error) {
+    // 处理上传错误
+    console.error('图片上传错误:', error);
+    message.error({ content: '图片上传失败', key: 'imageUpload', duration: 2 });
+    return '';
+  }
+};
+</script>
+<template>
+  <div class="editor-container-box">
+    <QuillEditor
+      ref="quillEditorRef"
+      v-model:content="mValue"
+      :options="editorOptions"
+      class="editor-container"
+      content-type="html"
+      theme="snow"
+      @ready="setupQuillPasteHandler"
+    />
+  </div>
+</template>
+
+<style scoped>
+.editor-container-box {
+  width: 100%;
+  height: 100%;
+}
+/* 编辑器容器样式 */
+.editor-container {
+  height: 250px;
+  margin-bottom: 40px;
+  /* 确保编辑器有足够的空间显示工具栏和内容区域 */
+}
+
+/* Markdown编辑器样式 */
+.md-editor-container {
+  min-height: 400px;
+  margin-bottom: 40px;
+}
+
+/* 可以添加额外的样式来自定义编辑器外观 */
+:deep(.ql-editor) {
+  min-height: 200px;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+/* 确保图片在编辑器中显示正常 */
+:deep(.ql-editor img) {
+  max-width: 100%;
+  height: auto;
+}
+
+/* 自定义 Markdown 编辑器样式 */
+:deep(.md-editor) {
+  border-radius: 4px;
+}
+
+:deep(.md-editor-dark) {
+  --md-bk-color: #1e1e1e;
+  --md-border-color: #333;
+}
+</style>

apps/web-antd/src/views/system/base-config/api/index.ts

@@ -0,0 +1,49 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'base-config/';
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getBaseConfigList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getBaseConfigOption(data: any) {
+  return requestClient.get<any>(`${prefix}option`, { params: data });
+}
+
+/**
+ * 获取协议详情
+ * @param id
+ */
+export async function getBaseConfigInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增协议
+ * @param data
+ */
+export async function createBaseConfig(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑协议
+ * @param data
+ */
+export async function updateBaseConfig(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除协议
+ * @param data
+ */
+export async function deleteBaseConfig(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/system/base-config/components/detail.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+const data = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const { values } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        data.value = values;
+      }
+    }
+  },
+});
+// 格式化内容，将换行符转换为<br>
+const formatContent = (content) => {
+  return content ? content.replaceAll('\n', '<br>') : '';
+};
+</script>
+<template>
+  <Modal v-if="data" :title="`${data.desc}-${data.end_txt}-协议详情`" class="w-[60%]">
+
+    <div
+      class="rounded-lg bg-gray-50 p-4 transition-colors dark:bg-gray-700"
+    >
+      <div
+        class="prose prose-sm dark:prose-invert max-w-none text-gray-700 transition-colors dark:text-gray-300"
+        v-html="formatContent(data.content)"
+      ></div>
+    </div>
+  </Modal>
+</template>

apps/web-antd/src/views/system/base-config/components/modal.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createBaseConfig, updateBaseConfig } from '#/views/system/base-config/api';
+import { modalFormProps } from '#/views/system/base-config/config/form';
+
+defineOptions({
+  name: 'FormModelDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value ? updateBaseConfig : createBaseConfig;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}协议`" class="w-[60%]">
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/system/base-config/config/form.ts

@@ -0,0 +1,60 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    // {
+    //   fieldName: 'baseinfo',
+    //   component: 'Divider',
+    //   label: '基础信息',
+    //   formItemClass: 'col-span-12',
+    //   componentProps: {},
+    //   hideLabel: true,
+    //   renderComponentContent: () => {
+    //     return {
+    //       default: () => {
+    //         return '基础信息';
+    //       },
+    //     };
+    //   },
+    // },
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入协议昵称',
+      },
+      fieldName: 'desc',
+      label: '协议名称',
+      rules: 'required',
+    },
+    {
+      component: 'Editor',
+      componentProps: {
+        placeholder: '请输入协议介绍',
+      },
+      fieldName: 'content',
+      label: '协议内容',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/system/base-config/config/search.ts

@@ -0,0 +1,37 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+// import dayjs from 'dayjs';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '输入名称',
+      },
+      defaultValue: '',
+      fieldName: 'name',
+      label: '协议名称',
+    },
+    // {
+    //   component: 'RangePicker',
+    //   componentProps: {
+    //     format: 'YYYY-MM-DD', // 确保格式与你需要的一致
+    //   },
+    //   // defaultValue: [dayjs().startOf('month'), dayjs()],
+    //   fieldName: 'search_time',
+    //   label: '时间范围',
+    // },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/system/base-config/config/table.ts

@@ -0,0 +1,66 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getBaseConfigList } from '#/views/system/base-config/api';
+
+interface RowType {
+  id: string;
+  name: string;
+  logo: string;
+  introduce: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    { field: 'desc', align: 'left', title: '协议名称' },
+    { field: 'content', title: '协议介绍', slots: { default: 'content' } },
+    { field: 'end_txt', title: '协议端口' },
+    { field: 'created_at', title: '创建时间' },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getBaseConfigList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

apps/web-antd/src/views/system/base-config/index.vue

@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import FormModalDemo from './components/modal.vue';
+import Detail from './components/detail.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const [DetailModal, DetailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const showDetail = (row: any) => {
+  DetailModalApi.setData({
+    // 表单值
+    values: row,
+  });
+  DetailModalApi.open();
+};
+</script>
+
+<template>
+  <Page auto-content-height title="协议管理">
+    <FormModal />
+    <DetailModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              // auth: ['超级协议', 'sys:user:save'],
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px">
+              批量操作
+              <Icon icon="ant-design:down-outlined" />
+            </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #content="{ row }">
+        {{ row.content.substring(0, 50) }}...
+      </template>
+      <template #open_business_license="{ row }">
+        <Image :src="row.open_business_license" height="30" width="30" />
+      </template>
+      <template #business_license="{ row }">
+        <Image :src="row.business_license" height="30" width="30" />
+      </template>
+      <template #product_registration_certificate="{ row }">
+        <Image
+          :src="row.product_registration_certificate"
+          height="30"
+          width="30"
+        />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '查看',
+              type: 'link',
+              icon: 'marketeq:eye',
+              size: 'small',
+              // auth: ['base-config', 'sys:role:detail'],
+              onClick: showDetail.bind(null, row),
+            },
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['base-config', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+          ]"
+          :drop-down-actions="[
+            // {
+            //   label: '编辑',
+            //   type: 'link',
+            //   icon: 'ant-design:delete-outlined',
+            //   size: 'small',
+            //   // auth: ['base-config', 'sys:role:detail'],
+            //   onClick: showModal.bind(null, row, true),
+            // },
+            // {
+            //   label: '删除',
+            //   type: 'link',
+            //   icon: 'ant-design:delete-outlined',
+            //   size: 'small',
+            //   // auth: ['base-config', 'sys:role:detail'],
+            //   popConfirm: {
+            //     title: '确定删除吗？',
+            //     confirm: showDetail.bind(null, row.id),
+            //   },
+            // },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>