init

src/components/chooseImg/index.vue

@@ -0,0 +1,222 @@
+<template>
+  <el-drawer
+    v-model="drawer"
+    title="媒体库"
+    size="650px"
+  >
+    <warning-bar
+      title="点击“文件名/备注”可以编辑文件名或者备注内容。"
+    />
+    <div class="gva-btn-list">
+      <upload-common
+        v-model:imageCommon="imageCommon"
+        class="upload-btn-media-library"
+        @on-success="open"
+      />
+      <upload-image
+        v-model:imageUrl="imageUrl"
+        :file-size="512"
+        :max-w-h="1080"
+        class="upload-btn-media-library"
+        @on-success="open"
+      />
+      <el-form
+        ref="searchForm"
+        :inline="true"
+        :model="search"
+      >
+        <el-form-item label="">
+          <el-input
+            v-model="search.keyword"
+            class="keyword"
+            placeholder="请输入文件名或备注"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="search"
+            @click="open"
+          >查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="media">
+      <div
+        v-for="(item,key) in picList"
+        :key="key"
+        class="media-box"
+      >
+        <div class="header-img-box-list">
+          <el-image
+            :key="key"
+            :src="getUrl(item.url)"
+            @click="chooseImg(item.url,target,targetKey)"
+          >
+            <template #error>
+              <div class="header-img-box-list">
+                <el-icon>
+                  <picture />
+                </el-icon>
+              </div>
+            </template>
+          </el-image>
+        </div>
+        <div
+          class="img-title"
+          @click="editFileNameFunc(item)"
+        >{{ item.name }}</div>
+      </div>
+    </div>
+    <el-pagination
+      :current-page="page"
+      :page-size="pageSize"
+      :total="total"
+      :style="{'justify-content':'center'}"
+      layout="total, prev, pager, next, jumper"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </el-drawer>
+</template>
+
+<script setup>
+import { getUrl } from '@/utils/image'
+import { ref } from 'vue'
+import { getFileList, editFileName } from '@/api/fileUploadAndDownload'
+import UploadImage from '@/components/upload/image.vue'
+import UploadCommon from '@/components/upload/common.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import WarningBar from '@/components/warningBar/warningBar.vue'
+
+const imageUrl = ref('')
+const imageCommon = ref('')
+
+const search = ref({})
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(20)
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  open()
+}
+
+const handleCurrentChange = (val) => {
+  page.value = val
+  open()
+}
+
+const emit = defineEmits(['enterImg'])
+defineProps({
+  target: {
+    type: Object,
+    default: null,
+  },
+  targetKey: {
+    type: String,
+    default: '',
+  },
+})
+
+const drawer = ref(false)
+const picList = ref([])
+
+const chooseImg = (url, target, targetKey) => {
+  if (target && targetKey) {
+    target[targetKey] = url
+  }
+  emit('enterImg', url)
+  drawer.value = false
+}
+
+const open = async() => {
+  const res = await getFileList({ page: page.value, pageSize: pageSize.value, ...search.value })
+  if (res.code === 0) {
+    picList.value = res.data.list
+    total.value = res.data.total
+    page.value = res.data.page
+    pageSize.value = res.data.pageSize
+    drawer.value = true
+  }
+}
+
+/**
+ * 编辑文件名或者备注
+ * @param row
+ * @returns {Promise<void>}
+ */
+const editFileNameFunc = async(row) => {
+  ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /\S/,
+    inputErrorMessage: '不能为空',
+    inputValue: row.name
+  }).then(async({ value }) => {
+    row.name = value
+    // console.log(row)
+    const res = await editFileName(row)
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '编辑成功!',
+      })
+      open()
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '取消修改'
+    })
+  })
+}
+
+defineExpose({ open })
+</script>
+
+<style lang="scss">
+.upload-btn-media-library {
+  margin-left: 20px;
+}
+
+.media {
+  display: flex;
+  flex-wrap: wrap;
+
+  .media-box {
+    width: 120px;
+    margin-left: 20px;
+
+    .img-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 36px;
+      text-align: center;
+      cursor: pointer;
+    }
+
+    .header-img-box-list {
+      width: 120px;
+      height: 120px;
+      border: 1px dashed #ccc;
+      border-radius: 8px;
+      text-align: center;
+      line-height: 120px;
+      cursor: pointer;
+      overflow: hidden;
+      .el-image__inner {
+        max-width: 120px;
+        max-height: 120px;
+        vertical-align: middle;
+        width: unset;
+        height: unset;
+      }
+    }
+  }
+}
+
+</style>

src/components/commandMenu/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    width="30%"
+    class="overlay"
+    :show-close="false"
+  >
+    <template #header>
+      <input
+        v-model="searchInput"
+        class="quick-input"
+        placeholder="请输入你需要快捷到达的功能"
+      >
+    </template>
+
+    <div
+      v-for="(option,index) in options"
+      :key="index"
+    >
+      <div
+        v-if="option.children.length"
+        class="quick-title"
+      >{{ option.label }}</div>
+      <div
+        v-for="(item,key) in option.children"
+        :key="index+'-'+key"
+        class="quick-item"
+        @click="item.func"
+      >
+        {{ item.label }}
+      </div>
+    </div>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="close">关闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useRouterStore } from '@/pinia/modules/router'
+import { useUserStore } from '@/pinia/modules/user'
+
+defineOptions({
+  name: 'CommandMenu',
+})
+
+const router = useRouter()
+const route = useRouter()
+const userStore = useUserStore()
+const routerStore = useRouterStore()
+const dialogVisible = ref(false)
+const searchInput = ref('')
+const options = reactive([])
+const deepMenus = (menus) => {
+  const arr = []
+  menus.forEach(menu => {
+    if (menu.children && menu.children.length > 0) {
+      arr.push(...deepMenus(menu.children))
+    } else {
+      if (menu.meta.title && menu.meta.title.indexOf(searchInput.value) > -1) {
+        arr.push({
+          label: menu.meta.title,
+          func: () => changeRouter(menu)
+        })
+      }
+    }
+  })
+  return arr
+}
+
+const addQuickMenu = () => {
+  const option = {
+    label: '跳转',
+    children: []
+  }
+  const menus = deepMenus(routerStore.asyncRouters[0].children)
+  option.children.push(...menus)
+  options.push(option)
+}
+
+const addQuickOption = () => {
+  const option = {
+    label: '操作',
+    children: []
+  }
+  const quickArr = [
+    {
+      label: '亮色主题',
+      func: () => changeMode('light')
+    }, {
+      label: '暗色主题',
+      func: () => changeMode('dark')
+    }, {
+      label: '退出登录',
+      func: () => userStore.LoginOut()
+    }
+  ]
+  option.children.push(...quickArr.filter(item => item.label.indexOf(searchInput.value) > -1))
+  options.push(option)
+}
+
+addQuickMenu()
+addQuickOption()
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+const changeRouter = (e) => {
+  const index = e.name
+  const query = {}
+  const params = {}
+  routerStore.routeMap[index]?.parameters &&
+  routerStore.routeMap[index]?.parameters.forEach((item) => {
+    if (item.type === 'query') {
+      query[item.key] = item.value
+    } else {
+      params[item.key] = item.value
+    }
+  })
+  if (index === route.name) return
+  if (e.name.indexOf('http://') > -1 || e.name.indexOf('https://') > -1) {
+    window.open(e.name)
+  } else {
+    router.push({ name: index, query, params })
+  }
+  dialogVisible.value = false
+}
+
+const changeMode = (e) => {
+  if (e === null) {
+    userStore.changeSideMode('dark')
+    return
+  }
+  userStore.changeSideMode(e)
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+defineExpose({ open })
+
+watch(searchInput, () => {
+  options.length = 0
+  addQuickMenu()
+  addQuickOption()
+})
+</script>
+
+<style lang="scss">
+.overlay {
+  border-radius: 4px;
+  .el-dialog__header{
+    padding:0 !important;
+    margin-right:0 !important;
+  }
+  .el-dialog__body{
+    padding: 12px !important;
+    height: 50vh;
+    overflow: auto !important;
+  }
+  .quick-title{
+    margin-top: 8px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #666;
+  }
+  .quick-input{
+    color: #666;
+    border-radius: 4px 4px 0 0;
+    border:none;
+    padding: 12px 16px;
+    box-sizing: border-box;
+    width: 100%;
+    font-size: 16px;
+    border-bottom: 1px solid #ddd;
+  }
+  .quick-item{
+    font-size: 14px;
+    padding: 8px;
+    margin: 4px 0;
+    &:hover{
+      cursor: pointer;
+      background: #eee;
+      border-radius: 4px;
+    }
+  }
+}
+
+</style>

src/components/customPic/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <span class="headerAvatar">
+    <template v-if="picType === 'avatar'">
+      <el-avatar
+        v-if="userStore.userInfo.headerImg"
+        :size="30"
+        :src="avatar"
+      />
+      <el-avatar
+        v-else
+        :size="30"
+        :src="noAvatar"
+      />
+    </template>
+    <template v-if="picType === 'img'">
+      <img
+        v-if="userStore.userInfo.headerImg"
+        :src="avatar"
+        class="avatar"
+      >
+      <img
+        v-else
+        :src="noAvatar"
+        class="avatar"
+      >
+    </template>
+    <template v-if="picType === 'file'">
+      <el-image
+        :src="file"
+        class="file"
+        :preview-src-list="previewSrcList"
+        :preview-teleported="true"
+      />
+    </template>
+  </span>
+</template>
+
+<script setup>
+import noAvatarPng from '@/assets/noBody.png'
+import { useUserStore } from '@/pinia/modules/user'
+import { computed, ref } from 'vue'
+
+defineOptions({
+  name: 'CustomPic'
+})
+
+const props = defineProps({
+  picType: {
+    type: String,
+    required: false,
+    default: 'avatar'
+  },
+  picSrc: {
+    type: String,
+    required: false,
+    default: ''
+  },
+  preview: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const path = ref(import.meta.env.VITE_BASE_API + '/')
+const noAvatar = ref(noAvatarPng)
+
+const userStore = useUserStore()
+
+const avatar = computed(() => {
+  if (props.picSrc === '') {
+    if (userStore.userInfo.headerImg !== '' && userStore.userInfo.headerImg.slice(0, 4) === 'http') {
+      return userStore.userInfo.headerImg
+    }
+    return path.value + userStore.userInfo.headerImg
+  } else {
+    if (props.picSrc !== '' && props.picSrc.slice(0, 4) === 'http') {
+      return props.picSrc
+    }
+    return path.value + props.picSrc
+  }
+})
+const file = computed(() => {
+  if (props.picSrc && props.picSrc.slice(0, 4) !== 'http') {
+    return path.value + props.picSrc
+  }
+  return props.picSrc
+})
+const previewSrcList = computed(() => props.preview ? [file.value] : [])
+
+</script>
+
+<style scoped>
+.headerAvatar{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 8px;
+}
+.file{
+    width: 80px;
+    height: 80px;
+    position: relative;
+}
+</style>

src/components/office/docx.vue

@@ -0,0 +1,36 @@
+<template>
+  <vue-office-docx :src="docx" @rendered="rendered">
+
+  </vue-office-docx>
+</template>
+<script>
+export default {
+  name: "Docx"
+}
+</script>
+<script setup>
+import {ref, watch} from 'vue'
+
+// 引入VueOfficeDocx组件
+import VueOfficeDocx from '@vue-office/docx'
+// 引入相关样式
+import '@vue-office/docx/lib/index.css'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: () => ""
+  }
+})
+const docx = ref(null)
+watch(
+    () => props.modelValue,
+    value => docx.value = value,
+    {immediate: true}
+)
+const rendered = () => {
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/components/office/excel.vue

@@ -0,0 +1,33 @@
+<template>
+  <VueOfficeExcel :src="excel" @rendered="renderedHandler" @error="errorHandler" style="height: 100vh;width: 100vh"/>
+</template>
+<script>
+export default {
+  name: 'Excel'
+}
+</script>
+<script setup>
+//引入VueOfficeExcel组件
+import VueOfficeExcel from '@vue-office/excel'
+//引入相关样式
+import '@vue-office/excel/lib/index.css'
+import {ref, watch} from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: () => ""
+  }
+})
+const excel = ref('')
+watch(() => props.modelValue, val => excel.value = val, {immediate: true})
+const renderedHandler = () => {
+
+}
+const errorHandler = () => {
+
+}
+</script>
+<style>
+
+</style>

src/components/office/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="border border-solid border-gray-100 h-full w-full">
+    <el-row>
+      <div v-if="ext==='docx'">
+        <Docx v-model="fullFileURL" />
+      </div>
+      <div v-else-if="ext==='pdf'">
+        <Pdf v-model="fullFileURL" />
+      </div>
+      <div v-else-if="ext==='xlsx'">
+        <Excel v-model="fullFileURL" />
+      </div>
+      <div v-else-if="ext==='image'">
+        <el-image
+          :src="fullFileURL"
+          lazy
+        />
+      </div>
+    </el-row>
+
+  </div>
+</template>
+<script>
+export default {
+  name: 'Office'
+}
+</script>
+<script setup>
+import { ref, watch, computed } from 'vue'
+import Docx from '@/components/office/docx.vue'
+import Pdf from '@/components/office/pdf.vue'
+import Excel from '@/components/office/excel.vue'
+
+const path = ref(import.meta.env.VITE_BASE_API)
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: () => ''
+  }
+})
+const fileUrl = ref('')
+const ext = ref('')
+watch(
+  () => props.modelValue,
+  val => {
+    fileUrl.value = val
+    const fileExt = val.split('.')[1] || ''
+    const image = ['png', 'jpg', 'jpge', 'gif']
+    ext.value = image.includes(fileExt) ? 'image' : fileExt
+  },
+  { immediate: true }
+)
+const fullFileURL = computed(() => {
+  return path.value + '/' + fileUrl.value
+})
+</script>

src/components/office/pdf.vue

@@ -0,0 +1,36 @@
+<template>
+  <vue-office-pdf
+
+      :src="pdf"
+      @rendered="renderedHandler"
+      @error="errorHandler"
+  />
+</template>
+<script>
+export default {
+  name: "Pdf"
+}
+</script>
+<script setup>
+import {ref, watch} from "vue"
+
+//引入VueOfficeDocx组件
+import VueOfficePdf from "@vue-office/pdf";
+//引入相关样式
+import '@vue-office/docx/lib/index.css'
+console.log("pdf===>")
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: () => ""
+  }
+})
+const pdf = ref(null)
+watch(() => props.modelValue, val => pdf.value = val, {immediate: true})
+const renderedHandler = () => {
+  console.log("pdf 加载成功")
+}
+const errorHandler = () => {
+  console.log("pdf 错误")
+}
+</script>

src/components/richtext/rich-edit.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="border border-solid border-gray-100 h-full">
+    <Toolbar
+      :editor="editorRef"
+      :default-config="toolbarConfig"
+      mode="default"
+    />
+    <Editor
+      v-model="valueHtml"
+      class="overflow-y-hidden mt-0.5"
+      style="height: 18rem;"
+      :default-config="editorConfig"
+      mode="default"
+      @onCreated="handleCreated"
+      @onChange="change"
+    />
+  </div>
+</template>
+
+<script setup>
+
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+
+const basePath = import.meta.env.VITE_BASE_API
+
+import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+import { useUserStore } from '@/pinia/modules/user'
+import { ElMessage } from 'element-plus'
+import { getUrl } from '@/utils/image'
+
+const userStore = useUserStore()
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const change = (editor) => {
+  emits('change', editor)
+  emits('update:modelValue', valueHtml.value)
+}
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  }
+})
+
+const editorRef = shallowRef()
+const valueHtml = ref('')
+
+const toolbarConfig = {}
+const editorConfig = {
+  placeholder: '请输入内容...',
+  MENU_CONF: {}
+}
+editorConfig.MENU_CONF['uploadImage'] = {
+  fieldName: 'file',
+  headers: {
+    'x-token': userStore.token,
+  },
+  server: basePath + '/fileUploadAndDownload/upload?noSave=1',
+  customInsert(res, insertFn) {
+    if (res.code === 0) {
+      const urlPath = getUrl(res.data.file.url)
+      insertFn(urlPath, res.data.file.name)
+      return
+    }
+    ElMessage.error(res.msg)
+  }
+}
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+const handleCreated = (editor) => {
+  editorRef.value = editor
+}
+
+watch(() => props.modelValue, () => {
+  valueHtml.value = props.modelValue
+})
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/richtext/rich-view.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="border border-solid border-gray-100 h-full">
+    <Editor
+      v-model="valueHtml"
+      class="overflow-y-hidden mt-0.5"
+      :default-config="editorConfig"
+      mode="default"
+      @onCreated="handleCreated"
+      @onChange="change"
+    />
+  </div>
+</template>
+<script setup>
+
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+
+import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+import { Editor } from '@wangeditor/editor-for-vue'
+
+import { useUserStore } from '@/pinia/modules/user'
+
+const userStore = useUserStore()
+
+const emits = defineEmits(['change', 'update:modelValue'])
+const editorConfig = ref({
+  readOnly: true
+})
+const change = (editor) => {
+  emits('change', editor)
+  emits('update:modelValue', valueHtml.value)
+}
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  }
+})
+
+const editorRef = shallowRef()
+const valueHtml = ref('')
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+const handleCreated = (editor) => {
+  editorRef.value = editor
+}
+
+watch(() => props.modelValue, () => {
+  valueHtml.value = props.modelValue
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/selectFile/selectFile.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <el-upload
+        multiple
+        :action="`${path}/fileUploadAndDownload/upload?noSave=1`"
+        :headers="{ 'x-token': userStore.token }"
+        :on-error="uploadError"
+        :on-success="uploadSuccess"
+        :show-file-list="true"
+        :file-list="fileList"
+        class="upload-btn"
+    >
+      <el-button type="primary">上传文件</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script setup>
+
+import {ref, watch} from 'vue'
+import {ElMessage} from 'element-plus'
+import {useUserStore} from '@/pinia/modules/user'
+
+defineOptions({
+  name: 'UploadCommon',
+})
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const path = ref(import.meta.env.VITE_BASE_API)
+
+const userStore = useUserStore()
+const fullscreenLoading = ref(false)
+
+const fileList = ref(props.modelValue)
+
+const emits = defineEmits(['update:modelValue'])
+
+watch(fileList.value, (val) => {
+  console.log(val)
+  emits('update:modelValue', val)
+})
+
+watch(
+    () => props.modelValue,
+    value => {
+      fileList.value = value
+    },
+    {immediate: true}
+)
+const uploadSuccess = (res) => {
+  const {data} = res
+  if (data.file) {
+    fileList.value.push({
+      name: data.file.name,
+      url: data.file.url
+    })
+    fullscreenLoading.value = false
+  }
+}
+
+const uploadError = () => {
+  ElMessage({
+    type: 'error',
+    message: '上传失败'
+  })
+  fullscreenLoading.value = false
+}
+
+</script>
+

src/components/selectImage/selectImage.vue

@@ -0,0 +1,459 @@
+<template>
+  <div
+    v-if="!multiple"
+    class="update-image"
+    :style="{
+      'background-image': `url(${getUrl(modelValue)})`,
+      'position': 'relative',
+    }"
+  >
+    <el-icon
+      v-if="isVideoExt(modelValue || '')"
+      :size="32"
+      class="video video-icon"
+      style=""
+    ><VideoPlay /></el-icon>
+    <video
+      v-if="isVideoExt(modelValue || '')"
+      class="avatar video-avatar video"
+      muted
+      preload="metadata"
+      style=""
+      @click="openChooseImg"
+    >
+      <source :src="getUrl(modelValue) + '#t=1'">
+    </video>
+    <span
+      v-if="modelValue"
+      class="update"
+      style="position: absolute;"
+      @click="openChooseImg"
+    >
+      <el-icon>
+        <delete />
+      </el-icon>
+      删除</span>
+    <span
+      v-else
+      class="update text-gray-600"
+      @click="openChooseImg"
+    >
+      <el-icon>
+        <plus />
+      </el-icon>
+      上传</span>
+  </div>
+  <div
+    v-else
+    class="multiple-img"
+  >
+    <div
+      v-for="(item, index) in multipleValue"
+      :key="index"
+      class="update-image"
+      :style="{
+        'background-image': `url(${getUrl(item)})`,
+        'position': 'relative',
+      }"
+    >
+      <el-icon
+        v-if="isVideoExt(item || '')"
+        :size="32"
+        class="video video-icon"
+      ><VideoPlay /></el-icon>
+      <video
+        v-if="isVideoExt(item || '')"
+        class="avatar video-avatar video"
+        muted
+        preload="metadata"
+        @click="deleteImg(index)"
+      >
+        <source :src="getUrl(item) + '#t=1'">
+      </video>
+      <span
+        class="update"
+        style="position: absolute;"
+        @click="deleteImg(index)"
+      >
+        <el-icon>
+          <delete />
+        </el-icon>
+        删除</span>
+    </div>
+    <div class="add-image">
+      <span
+        class="update  text-gray-600"
+        @click="openChooseImg"
+      >
+        <el-icon>
+          <Plus />
+        </el-icon>
+        上传</span>
+    </div>
+  </div>
+
+  <el-drawer
+    v-model="drawer"
+    title="媒体库"
+    size="650px"
+  >
+    <warning-bar
+      title="点击“文件名/备注”可以编辑文件名或者备注内容。"
+    />
+    <div class="gva-btn-list">
+      <upload-common
+        v-model:imageCommon="imageCommon"
+        class="upload-btn-media-library"
+        @on-success="getImageList"
+      />
+      <upload-image
+        v-model:imageUrl="imageUrl"
+        :file-size="512"
+        :max-w-h="1080"
+        class="upload-btn-media-library"
+        @on-success="getImageList"
+      />
+      <el-form
+        ref="searchForm"
+        :inline="true"
+        :model="search"
+      >
+        <el-form-item label="">
+          <el-input
+            v-model="search.keyword"
+            class="keyword"
+            placeholder="请输入文件名或备注"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="search"
+            @click="getImageList"
+          >查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="media">
+      <div
+        v-for="(item,key) in picList"
+        :key="key"
+        class="media-box"
+      >
+        <div class="header-img-box-list">
+          <el-image
+            :key="key"
+            :src="getUrl(item.url)"
+            fit="cover"
+            style="width: 100%;height: 100%;"
+            @click="chooseImg(item.url)"
+          >
+            <template #error>
+              <el-icon
+                v-if="isVideoExt(item.url || '')"
+                :size="32"
+                class="video video-icon"
+              ><VideoPlay /></el-icon>
+              <video
+                v-if="isVideoExt(item.url || '')"
+                class="avatar video-avatar video"
+                muted
+                preload="metadata"
+                @click="chooseImg(item.url)"
+              >
+                <source :src="getUrl(item.url) + '#t=1'">
+                您的浏览器不支持视频播放
+              </video>
+              <div
+                v-else
+                class="header-img-box-list"
+              >
+                <el-icon class="lost-image">
+                  <icon-picture />
+                </el-icon>
+              </div>
+            </template>
+          </el-image>
+        </div>
+        <div
+          class="img-title"
+          @click="editFileNameFunc(item)"
+        >{{ item.name }}</div>
+      </div>
+    </div>
+    <el-pagination
+      :current-page="page"
+      :page-size="pageSize"
+      :total="total"
+      :style="{'justify-content':'center'}"
+      layout="total, prev, pager, next, jumper"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </el-drawer>
+</template>
+
+<script setup>
+
+import { getUrl, isVideoExt } from '@/utils/image'
+import { onMounted, ref } from 'vue'
+import { getFileList, editFileName } from '@/api/fileUploadAndDownload'
+import UploadImage from '@/components/upload/image.vue'
+import UploadCommon from '@/components/upload/common.vue'
+import WarningBar from '@/components/warningBar/warningBar.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Delete, FolderAdd, Plus, Picture as IconPicture } from '@element-plus/icons-vue'
+
+const imageUrl = ref('')
+const imageCommon = ref('')
+
+const search = ref({})
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(20)
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Array],
+    default: ''
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  fileType: {
+    type: String,
+    default: ''
+  }
+})
+
+const multipleValue = ref([])
+
+onMounted(() => {
+  if (props.multiple) {
+    multipleValue.value = props.modelValue
+  }
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const deleteImg = (index) => {
+  multipleValue.value.splice(index, 1)
+  emits('update:modelValue', multipleValue.value)
+}
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getImageList()
+}
+
+const handleCurrentChange = (val) => {
+  page.value = val
+  getImageList()
+}
+const editFileNameFunc = async(row) => {
+  ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /\S/,
+    inputErrorMessage: '不能为空',
+    inputValue: row.name
+  }).then(async({ value }) => {
+    row.name = value
+    // console.log(row)
+    const res = await editFileName(row)
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '编辑成功!',
+      })
+      getImageList()
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '取消修改'
+    })
+  })
+}
+
+const drawer = ref(false)
+const picList = ref([])
+
+const imageTypeList = ['png', 'jpg', 'jpge', 'gif', 'bmp', 'webp']
+const videoTyteList = ['mp4', 'avi', 'rmvb', 'rm', 'asf', 'divx', 'mpg', 'mpeg', 'mpe', 'wmv', 'mkv', 'vob']
+
+const listObj = {
+  image: imageTypeList,
+  video: videoTyteList
+}
+
+const chooseImg = (url) => {
+  console.log(url)
+  if (props.fileType) {
+    const typeSuccess = listObj[props.fileType].some(item => {
+      if (url.includes(item)) {
+        return true
+      }
+    })
+    if (!typeSuccess) {
+      ElMessage({
+        type: 'error',
+        message: '当前类型不支持使用'
+      })
+      return
+    }
+  }
+  if (props.multiple) {
+    multipleValue.value.push(url)
+    emits('update:modelValue', multipleValue.value)
+  } else {
+    emits('update:modelValue', url)
+  }
+  drawer.value = false
+}
+const openChooseImg = async() => {
+  if (props.modelValue && !props.multiple) {
+    emits('update:modelValue', '')
+    return
+  }
+  await getImageList()
+  drawer.value = true
+}
+
+const getImageList = async() => {
+  const res = await getFileList({ page: page.value, pageSize: pageSize.value, ...search.value })
+  if (res.code === 0) {
+    picList.value = res.data.list
+    total.value = res.data.total
+    page.value = res.data.page
+    pageSize.value = res.data.pageSize
+  }
+}
+
+</script>
+
+<style scoped lang="scss">
+
+.multiple-img{
+  display: flex;
+  gap:8px;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.add-image{
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  display: flex;
+  justify-content: center;
+  border-radius: 20px;
+  border: 1px dashed #ccc;
+  background-size: cover;
+  cursor: pointer;
+}
+
+.update-image {
+  cursor: pointer;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  display: flex;
+  justify-content: center;
+  border-radius: 20px;
+  border: 1px dashed #ccc;
+   background-repeat: no-repeat;
+   background-size: cover;
+   position: relative;
+  &:hover {
+    color: #fff;
+    background: linear-gradient(
+            to bottom,
+            rgba(255, 255, 255, 0.15) 0%,
+            rgba(0, 0, 0, 0.15) 100%
+    ),
+    radial-gradient(
+            at top center,
+            rgba(255, 255, 255, 0.4) 0%,
+            rgba(0, 0, 0, 0.4) 120%
+    )
+    #989898;
+    background-blend-mode: multiply, multiply;
+    background-size: cover;
+    .update {
+      color: #fff;
+    }
+    .video {
+      opacity: 0.2;
+    }
+  }
+
+  .video-icon {
+    position: absolute; left: calc(50% - 16px); top: calc(50% - 16px);
+  }
+  video {
+    object-fit: cover; max-width:100%; border-radius: 20px;
+  }
+  .update {
+    height: 120px;
+    width: 120px;
+    text-align: center;
+    color: transparent;
+    position: absolute;
+  }
+}
+
+.upload-btn-media-library {
+  margin-left: 20px;
+}
+
+.media {
+  display: flex;
+  flex-wrap: wrap;
+
+  .media-box {
+    width: 120px;
+    margin-left: 20px;
+
+    .img-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 36px;
+      text-align: center;
+      cursor: pointer;
+    }
+
+    .header-img-box-list {
+      width: 120px;
+      height: 120px;
+      border: 1px dashed #ccc;
+      border-radius: 8px;
+      text-align: center;
+      line-height: 120px;
+      cursor: pointer;
+      overflow: hidden;
+      .el-image__inner {
+        max-width: 120px;
+        max-height: 120px;
+        vertical-align: middle;
+        width: unset;
+        height: unset;
+      }
+
+      .el-image {
+        position: relative;
+      }
+      .video-icon {
+        position: absolute; left: calc(50% - 16px); top: calc(50% - 16px);
+      }
+      video {
+        object-fit: cover; max-width:100%; min-height: 100%; border-radius: 8px;
+      }
+    }
+  }
+}
+</style>

src/components/upload/common.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <el-upload
+      :action="`${path}/fileUploadAndDownload/upload`"
+      :before-upload="checkFile"
+      :headers="{ 'x-token': userStore.token }"
+      :on-error="uploadError"
+      :on-success="uploadSuccess"
+      :show-file-list="false"
+      class="upload-btn"
+    >
+      <el-button type="primary">普通上传</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script setup>
+
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/pinia/modules/user'
+import { isVideoMime, isImageMime } from '@/utils/image'
+
+defineOptions({
+  name: 'UploadCommon',
+})
+
+const emit = defineEmits(['on-success'])
+const path = ref(import.meta.env.VITE_BASE_API)
+
+const userStore = useUserStore()
+const fullscreenLoading = ref(false)
+
+const checkFile = (file) => {
+  fullscreenLoading.value = true
+  const isLt500K = file.size / 1024 / 1024 < 0.5 // 500K, @todo 应支持在项目中设置
+  const isLt5M = file.size / 1024 / 1024 < 5 // 5MB, @todo 应支持项目中设置
+  const isVideo = isVideoMime(file.type)
+  const isImage = isImageMime(file.type)
+  let pass = true
+  if (!isVideo && !isImage) {
+    ElMessage.error('上传图片只能是 jpg,png,svg,webp 格式, 上传视频只能是 mp4,webm 格式!')
+    fullscreenLoading.value = false
+    pass = false
+  }
+  if (!isLt5M && isVideo) {
+    ElMessage.error('上传视频大小不能超过 5MB')
+    fullscreenLoading.value = false
+    pass = false
+  }
+  if (!isLt500K && isImage) {
+    ElMessage.error('未压缩的上传图片大小不能超过 500KB，请使用压缩上传')
+    fullscreenLoading.value = false
+    pass = false
+  }
+
+  console.log('upload file check result: ', pass)
+
+  return pass
+}
+
+const uploadSuccess = (res) => {
+  const { data } = res
+  if (data.file) {
+    emit('on-success', data.file.url)
+  }
+}
+
+const uploadError = () => {
+  ElMessage({
+    type: 'error',
+    message: '上传失败'
+  })
+  fullscreenLoading.value = false
+}
+
+</script>
+

src/components/upload/image.vue

@@ -0,0 +1,98 @@
+
+<template>
+  <div>
+    <el-upload
+      :action="`${path}/fileUploadAndDownload/upload`"
+      :headers="{ 'x-token': userStore.token }"
+      :show-file-list="false"
+      :on-success="handleImageSuccess"
+      :before-upload="beforeImageUpload"
+      :multiple="false"
+    >
+      <el-button type="primary">压缩上传</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script setup>
+import ImageCompress from '@/utils/image'
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/pinia/modules/user'
+
+defineOptions({
+  name: 'UploadImage',
+})
+
+const emit = defineEmits(['on-success'])
+const props = defineProps({
+  imageUrl: {
+    type: String,
+    default: ''
+  },
+  fileSize: {
+    type: Number,
+    default: 2048 // 2M 超出后执行压缩
+  },
+  maxWH: {
+    type: Number,
+    default: 1920 // 图片长宽上限
+  }
+})
+
+const path = ref(import.meta.env.VITE_BASE_API)
+
+const userStore = useUserStore()
+
+const beforeImageUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg'
+  const isPng = file.type === 'image/png'
+  if (!isJPG && !isPng) {
+    ElMessage.error('上传头像图片只能是 jpg或png 格式!')
+    return false
+  }
+
+  const isRightSize = file.size / 1024 < props.fileSize
+  if (!isRightSize) {
+    // 压缩
+    const compress = new ImageCompress(file, props.fileSize, props.maxWH)
+    return compress.compress()
+  }
+  return isRightSize
+}
+
+const handleImageSuccess = (res) => {
+  const { data } = res
+  if (data.file) {
+    emit('on-success', data.file.url)
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.image-uploader {
+  border: 1px dashed #d9d9d9;
+  width: 180px;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.image-uploader {
+  border-color: #409eff;
+}
+.image-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.image {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>

src/components/warningBar/warningBar.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="px-1.5 py-2 flex items-center bg-amber-50 rounded gap-2 mb-3 text-amber-500"
+    :class="href&&'cursor-pointer'"
+    @click="open"
+  >
+    <el-icon class="text-xl">
+      <warning-filled />
+    </el-icon>
+    <span>
+      {{ title }}
+    </span>
+  </div>
+</template>
+<script setup>
+import { WarningFilled } from '@element-plus/icons-vue'
+const prop = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  href: {
+    type: String,
+    default: ''
+  }
+})
+
+const open = () => {
+  if (prop.href) {
+    window.open(prop.href)
+  }
+}
+</script>