修复软件更新模块

src/views/system/version/components/version-edit.vue

@@ -1,7 +1,7 @@
 <!-- 角色编辑弹窗 -->
 <template>
   <ele-modal
-    :width="460"
+    :width="800"
     :visible="visible"
     :confirm-loading="loading"
     :title="isUpdate ? '修改版本' : '更新版本'"
@@ -34,13 +34,25 @@
       <a-form-item label="版本号" name="versionCode">
         <a-input placeholder="100" v-model:value="form.versionCode" />
       </a-form-item>
-      <a-form-item label="更新日志">
+      <a-form-item label="更新日志" name="updateInfo">
-        <a-textarea
+        <!-- 编辑器 -->
-          :rows="4"
+        <byte-md-editor
-          :maxlength="200"
+          v-model:value="content"
-          placeholder="请输入更新日志"
+          placeholder="请描述您的问题，支持图片粘贴"
-          v-model:value="form.updateInfo"
+          :locale="zh_Hans"
+          :plugins="plugins"
+          mode="tab"
+          height="300px"
+          maxLength="500"
+          :editorConfig="{ lineNumbers: true }"
+          @paste="onPaste"
         />
+<!--        <a-textarea-->
+<!--          :rows="4"-->
+<!--          :maxlength="200"-->
+<!--          placeholder="请输入更新日志"-->
+<!--          v-model:value="form.updateInfo"-->
+<!--        />-->
       </a-form-item>
     </a-form>
   </ele-modal>
@@ -55,9 +67,15 @@
   import useFormData from '@/utils/use-form-data';
   import { UploadOutlined } from '@ant-design/icons-vue';
   import { messageLoading } from 'ele-admin-pro';
-  import { uploadFileLocal } from '@/api/system/file';
   import { Version } from '@/api/system/version/model';
+  import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
   import { addVersion, updateVersion } from '@/api/system/version';
+  // 中文语言文件
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  import zh_HansGfm from "@bytemd/plugin-gfm/locales/zh_Hans.json";
+  import highlight from "@bytemd/plugin-highlight";
+  import gfm from "@bytemd/plugin-gfm";
+  import { uploadOss } from "@/api/system/file";
 
   // 是否开启响应式布局
   const themeStore = useThemeStore();
@@ -84,6 +102,10 @@
   // 提交状态
   const loading = ref(false);
 
+  const content = ref('');
+
+  const files = ref<ItemType[]>([]);
+
   // 表单数据
   const { form, resetFields, assignFields } = useFormData<Version>({
     id: undefined,
@@ -124,6 +146,14 @@
     ]
   });
 
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
   /* 保存编辑 */
   const save = () => {
     if (!formRef.value) {
@@ -135,7 +165,11 @@
         loading.value = true;
         const saveOrUpdate = isUpdate.value ? updateVersion : addVersion;
         console.log(form);
-        saveOrUpdate(form)
+        const data = {
+          ...form,
+          updateInfo: content.value
+        };
+        saveOrUpdate(data)
           .then((msg) => {
             loading.value = false;
             message.success(msg);
@@ -166,7 +200,7 @@
       duration: 0,
       mask: true
     });
-    uploadFileLocal(file, 5)
+    uploadOss(file)
       .then((res) => {
         console.log(res);
         hide();
@@ -182,12 +216,43 @@
     return false;
   };
 
+  /* 粘贴图片上传服务器并插入编辑器 */
+  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
+        };
+        uploadOss(<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();
+    }
+  }
+
   watch(
     () => props.visible,
     (visible) => {
       if (visible) {
         if (props.data) {
           assignFields(props.data);
+          if(props.data.updateInfo){
+            content.value = props.data.updateInfo;
+          }
           isUpdate.value = true;
         } else {
           isUpdate.value = false;

src/views/system/version/index.vue

@@ -32,7 +32,7 @@
             <a-timeline-item v-for="(item,index) in list" :key="index" :color="index == 0 ? 'blue' : 'gray'">
               <div class="version-name">
                 <span class="title ele-text-heading">{{ item.versionName }}</span>
-                <span class="time ele-text-placeholder">{{ toDateString(item.createTime, 'YYYY-MM-dd') }}</span>
+                <span class="time ele-text-placeholder">{{ toDateString(item.createTime, "YYYY-MM-dd") }}</span>
                 <a-space :size="12">
                   <template v-if="hasRole('superAdmin') || hasRole('admin')">
                     <a @click="download(item)">下载</a>
@@ -52,8 +52,8 @@
                 </a-space>
               </div>
               <a-typography-text>
-                <div class="update-info ele-text-secondary" v-html="item.updateInfo"></div>
+<!--                <div class="update-info ele-text-secondary" v-html="item.updateInfo"></div>-->
-
+                <byte-md-viewer :value="item.updateInfo" :plugins="plugins" />
               </a-typography-text>
             </a-timeline-item>
           </a-timeline>
@@ -65,65 +65,79 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, computed} from 'vue';
+import { ref, reactive, computed } from "vue";
 import { message } from "ant-design-vue";
-  import { storeToRefs } from 'pinia';
+import { storeToRefs } from "pinia";
-  import { useThemeStore } from '@/store/modules/theme';
+import { useThemeStore } from "@/store/modules/theme";
 import { getCompany, updateCompany } from "@/api/system/company";
-  import {assignObject, toDateString} from 'ele-admin-pro';
+import { assignObject, toDateString } from "ele-admin-pro";
-  import { Company } from '@/api/system/company/model';
+import { Company } from "@/api/system/company/model";
 import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
 import { uploadFile } from "@/api/system/file";
 import { useTenantStore } from "@/store/modules/tenant";
 import { listVersion, removeVersion } from "@/api/system/version";
 import { Version } from "@/api/system/version/model";
-  import versionEdit from './components/version-edit.vue';
+import versionEdit from "./components/version-edit.vue";
 import { messageLoading } from "ele-admin-pro/es";
 import { openNew } from "@/utils/common";
 import { onClone } from "@/utils/plug-uitl";
 import { hasRole } from "@/utils/permission";
+// 中文语言文件
+import zh_Hans from "bytemd/locales/zh_Hans.json";
+import zh_HansGfm from "@bytemd/plugin-gfm/locales/zh_Hans.json";
+import highlight from "@bytemd/plugin-highlight";
+import gfm from "@bytemd/plugin-gfm";
+import { uploadOss } from "@/api/system/file";
 
 // 是否开启响应式布局
 const themeStore = useThemeStore();
 const { styleResponsive } = storeToRefs(themeStore);
 const tenantStore = useTenantStore();
 // tab 页选中
-  const active = ref('info');
+const active = ref("info");
 // 保存按钮 loading
 const loading = ref(false);
 // 是否显示裁剪弹窗
 const visible = ref(false);
-  const title = ref('');
+const title = ref("");
 // 是否显示编辑弹窗
 const showEdit = ref(false);
 // 当前编辑数据
 const current = ref<Version | null>(null);
 const list = ref<Version[]>([]);
 // 当前版本
-  const versionName = ref<string>('');
+const versionName = ref<string>("");
 // 登录用户信息
 const company = computed(() => tenantStore.company ?? {});
 
 // 表单数据
 const form = reactive<Company>({
   companyId: undefined,
-    shortName: '',
+  shortName: "",
-    companyName: '',
+  companyName: "",
   companyType: undefined,
-    companyLogo: '',
+  companyLogo: "",
-    domain: '',
+  domain: "",
   version: undefined,
-    versionName: '',
+  versionName: "",
-    versionCode: '',
+  versionCode: "",
-    createTime: '',
+  createTime: "",
-    updateTime: ''
+  updateTime: ""
 });
 
+// 插件
+const plugins = ref([
+  gfm({
+    locale: zh_HansGfm
+  }),
+  highlight()
+]);
+
 const download = (row?: Version) => {
   if (row?.vueDownloadUrl) {
     openNew(row?.vueDownloadUrl);
   }
-  }
+};
 
 /* 打开编辑弹窗 */
 const openEdit = (row?: Version) => {
@@ -133,7 +147,7 @@ import {hasRole} from "@/utils/permission";
 
 /* 删除单个 */
 const remove = (row: Version) => {
-    const hide = messageLoading('请求中..', 0);
+  const hide = messageLoading("请求中..", 0);
   removeVersion(row.id)
     .then((msg) => {
       hide();
@@ -148,16 +162,16 @@ import {hasRole} from "@/utils/permission";
 
 const update = () => {
   company.value.tenantId = 5;
-    company.value.tenantName = '最新版本'
+  company.value.tenantName = "最新版本";
   onClone(company.value);
-  }
+};
 
 
 const onUpload = (d: ItemType) => {
   const file = d.file;
   if (file) {
     if (file.size / 1024 > 100) {
-        message.error('大小不能超过 100k');
+      message.error("大小不能超过 100k");
       return;
     }
   }
@@ -165,8 +179,8 @@ import {hasRole} from "@/utils/permission";
     .then((result) => {
       form.companyLogo = result.url;
       updateCompany(form).then(res => {
-          message.success('上传成功');
+        message.success("上传成功");
-        })
+      });
 
     })
     .catch((e) => {
@@ -179,13 +193,13 @@ import {hasRole} from "@/utils/permission";
     if (data) {
       list.value = data;
       list.value.map((d, i) => {
-          const tenantId = localStorage.getItem('TenantId');
+        const tenantId = localStorage.getItem("TenantId");
         if (i == 0) {
           versionName.value = `${d.versionName}`;
         }
-        })
+      });
     }
-    })
+  });
   getCompany().then((response) => {
     assignObject(form, response);
   });
@@ -196,7 +210,7 @@ import {hasRole} from "@/utils/permission";
 
 <script lang="ts">
 export default {
-    name: 'SystemVersion'
+  name: "SystemVersion"
 };
 </script>
 <style>
@@ -204,16 +218,20 @@ import {hasRole} from "@/utils/permission";
   display: flex !important;
   justify-content: space-between;
 }
+
 .update-info {
   max-width: 600px;
 }
+
 .version-name {
   .ele-text-heading {
     font-weight: bold;
     font-size: 16px;
     margin-right: 10px;
   }
+
   margin-bottom: 10px;
+
   .time {
     margin-right: 20px;
   }