初始化

src/views/Basic/Library/Comp/DialogLibrary.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-dialog :title="title" v-model="dialogVisible" width="800px">
+    <el-form :model="form" ref="addForm" :rules="rules" label-width="100px">
+      <el-form-item label="知识库名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入" />
+      </el-form-item>
+      <el-form-item label="资源类型" prop="type">
+        <el-radio-group v-model="form.type">
+          <el-radio :label="1"> 文件 </el-radio>
+          <el-radio :label="2"> 纯图片 </el-radio>
+          <el-radio :label="3"> 自主编辑 </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <Editor v-model:modelValue="form.remark" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleSave">保 存</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+const dialogVisible = ref(false) // 弹窗的是否展示
+
+const form = ref()
+const rules = ref({
+  name: { required: true, message: '名称不可为空', trigger: 'blur' }
+})
+
+const title = ref('')
+
+const addForm = ref()
+
+const emit = defineEmits(['update'])
+
+const open = (val) => {
+  dialogVisible.value = true
+  if (val) {
+    title.value = '修改知识库'
+    form.value = { ...val }
+  } else {
+    title.value = '新增知识库'
+    form.value = {
+      name: '',
+      type: 1,
+      remark: undefined
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+function handleSave() {
+  addForm.value.validate((valid) => {
+    if (valid) {
+      emit('update', form.value)
+      dialogVisible.value = false
+    }
+  })
+}
+</script>
+
+<style scoped></style>

src/views/Basic/Library/Comp/DialogResource.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-dialog :title="title" v-model="show" width="800px">
+    <el-form :model="form" ref="resourceForm" :rules="rules" label-width="60px">
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="标题" prop="title">
+            <el-input v-model="form.title" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="标签" prop="tipList">
+            <el-select
+              v-model="form.tipList"
+              multiple
+              filterable
+              allow-create
+              default-first-option
+              :reserve-keyword="false"
+              placeholder="请选择标签或输入"
+              clearable
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in tipOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24" :offset="0">
+          <el-form-item label="内容" prop="content">
+            <UploadFile
+              v-if="form.type == 1"
+              v-model="form.sliderPicUrls"
+              :isShowTip="false"
+              :fileType="[]"
+            />
+            <UploadImgs
+              v-else-if="form.type == 2"
+              v-model:modelValue="form.sliderPicUrls"
+              width="100px"
+              height="100px"
+            />
+            <Editor v-else v-model:modelValue="form.content" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24" :offset="0">
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span>
+        <el-button @click="show = false">取 消</el-button>
+        <el-button type="primary" @click="handleSave">保 存</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+const show = ref(false)
+const title = ref('')
+const form = ref({})
+const rules = ref({})
+
+const tipOptions = ref([{ label: '绿色', value: '绿色' }])
+
+function open(type, val) {
+  show.value = true
+  if (val) {
+    title.value = '修改资源'
+    form.value = { ...val, type }
+  } else {
+    title.value = '新增资源'
+    form.value = {
+      type,
+      title: '',
+      tipList: [],
+      sliderPicUrls: [],
+      content: '',
+      remark: null
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+function handleSave() {
+  console.log('保存成功')
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/Basic/Library/Comp/ImagePreview.vue

@@ -0,0 +1,120 @@
+<template>
+  <teleport v-if="show" to="#app">
+    <div class="container">
+      <!-- <Icon class="ep:circle-close close-icon" /> -->
+      <el-icon class="close-icon" @click="show = false"><CircleClose /></el-icon>
+      <el-drawer
+        v-model="showDrawer"
+        direction="ltr"
+        size="20%"
+        :show-close="false"
+        :modal="false"
+        :lock-scroll="false"
+        :close-on-press-escape="false"
+        style="background-color: rgba(0, 0, 0, 0.6)"
+      >
+        <template #header>
+          <span style="color: #fff">资源详情</span>
+        </template>
+        <el-form style="flex: 1" :model="info" label-width="80px" label-position="left">
+          <el-form-item label="标题:">
+            {{ info.title }}
+          </el-form-item>
+          <el-form-item label="文件名称:">
+            {{ info.fileName }}
+          </el-form-item>
+          <el-form-item label="标签:">
+            <el-tag class="mr-5px mb-5px" v-for="(item, index) in info.tipList" :key="index">{{
+              item
+            }}</el-tag>
+          </el-form-item>
+          <el-form-item label="备注:">
+            {{ info.remark }}
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <div class="flex justify-between">
+            <el-button plain :disabled="imgIndex <= 0" @click="imgIndex--">上一张</el-button>
+            <el-button plain :disabled="imgIndex >= imgList.length - 1" @click="imgIndex++"
+              >下一张</el-button
+            >
+          </div>
+        </template>
+      </el-drawer>
+
+      <img :src="info.fileUrl" :alt="info.fileName" srcset="" class="width-fit img" />
+      <div class="img-idx">{{ imgIndex + 1 }} / {{ imgList.length }}</div>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
+import { ElIcon } from 'element-plus'
+import { CircleClose } from '@element-plus/icons-vue'
+
+const show = ref(false)
+const imgIndex = ref(0)
+const imgList = ref([])
+const showDrawer = ref(true)
+
+function open(idx = 0, arr = []) {
+  show.value = true
+  imgIndex.value = idx
+  imgList.value = arr
+}
+
+const info = computed(() => {
+  return imgList.value[imgIndex.value]
+})
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style lang="scss" scoped>
+.container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba($color: #000000, $alpha: 0.5);
+  z-index: 9999999;
+  max-width: 100%;
+
+  .close-icon {
+    position: absolute;
+    top: 40px;
+    right: 40px;
+    font-size: 40px;
+    color: #fff;
+    cursor: pointer;
+    z-index: 9999;
+  }
+
+  :deep(.el-form-item__label) {
+    color: #fff;
+  }
+
+  .img {
+    position: absolute;
+    top: 50%;
+    left: 60%;
+    transform: translate3d(-50%, -50%, 0);
+    width: 30%;
+  }
+
+  .img-idx {
+    position: absolute;
+    bottom: 50px;
+    left: 60%;
+    transform: translateX(-50%);
+    width: 100px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 30px;
+    color: #fff;
+    text-align: center;
+    background-color: rgba($color: #000000, $alpha: 0.6);
+  }
+}
+</style>