@sugarat/easypicker2-client 2.4.1

package/src/pages/dashboard/tasks/components/infoPanel/tip.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="tip tc">
+    <div>
+      <slot></slot>
+    </div>
+    <div v-if="imgs?.length" class="preview">
+      <el-image
+        hide-on-click-modal
+        class="img-container"
+        :src="imgs[0]"
+        :preview-src-list="imgs"
+        :initial-index="0"
+        fit="cover"
+      />
+      <el-icon class="icon">
+        <opportunity />
+      </el-icon>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { Opportunity } from '@element-plus/icons-vue'
+
+defineProps<{
+  imgs?: string[]
+}>()
+</script>
+
+<style scoped>
+.tip {
+  color: #909399;
+  padding-bottom: 10px;
+  font-size: 12px;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  top: 4px;
+}
+.preview {
+  position: relative;
+}
+.icon {
+  position: absolute;
+  pointer-events: none;
+  background-color: #fff;
+  left: 0;
+  top: 1px;
+  font-size: 14px;
+  color: #53a8ff;
+}
+.img-container {
+  width: 10px;
+  height: 10px;
+}
+</style>

package/src/pages/dashboard/tasks/components/infoPanel/tipInfo.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="tc ddl">
+    <tip
+      :imgs="[
+        'https://img.cdn.sugarat.top/mdImg/MTY1MTQ5NjI2OTI0MQ==651496269241'
+      ]"
+      >设置注意事项，供用户提交时查看</tip
+    >
+    <tip>注意控制字数和换行，避免展示异常，建议内容不超过5行</tip>
+    <div class="tc flex fc fac">
+      <el-input
+        v-model="textValue"
+        :rows="5"
+        clearable
+        :max="500"
+        show-word-limit
+        type="textarea"
+        placeholder="请输入要展示的批注信息"
+      />
+    </div>
+    <div class="p10">
+      <el-button size="default" @click="updateTip" type="success"
+        >保存</el-button
+      >
+      <el-button size="default" @click="textValue = ''" type="danger"
+        >清空</el-button
+      >
+    </div>
+    <tip v-if="needSave"> 有变动记得保存 </tip>
+    <tip> 可以设置图片啦↓ 最多3张 </tip>
+    <el-upload
+      accept="image/*"
+      :limit="MaxImgCount"
+      v-model:file-list="imageList"
+      action=""
+      ref="imgUpload"
+      list-type="picture-card"
+      :on-change="handleChangeFile"
+      :on-exceed="handleExceedFile"
+      :on-preview="handlePictureCardPreview"
+      :on-remove="handleRemove"
+      :auto-upload="false"
+    >
+      <el-icon><Plus /></el-icon>
+    </el-upload>
+    <ElImageViewer
+      hide-on-click-modal
+      :initial-index="previewIdx"
+      :url-list="previewList"
+      @close="imageViewerVisible = false"
+      teleported
+      v-if="imageViewerVisible"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, watch, computed, reactive } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+import { ElMessage, UploadProps, UploadUserFile } from 'element-plus'
+import { updateTaskInfo } from '../../public'
+import Tip from './tip.vue'
+import { FileApi, PublicApi, TaskApi } from '@/apis'
+import { qiniuUpload } from '@/utils/networkUtil'
+import { getTipImageKey } from '@/utils/stringUtil'
+
+const props = defineProps({
+  tip: {
+    type: String,
+    default: '',
+    required: false
+  },
+  k: {
+    type: String,
+    default: ''
+  }
+})
+const textValue = ref('')
+
+const tipData = reactive<{
+  text: string
+  imgs: {
+    uid: number
+    name: string
+  }[]
+}>({
+  text: '',
+  imgs: []
+})
+const MaxImgCount = ref(3)
+const imageList = ref<UploadUserFile[]>([])
+const previewList = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return imageList.value.map((v) => v!.preview || v.url)
+})
+const previewIdx = ref(0)
+
+watch(
+  () => props.tip,
+  () => {
+    // 初始化
+    try {
+      const parseData = JSON.parse(props.tip)
+      tipData.imgs = parseData.imgs
+      tipData.text = parseData.text || ''
+      imageList.value = tipData.imgs.map((v) => {
+        return {
+          ...v,
+          url: 'https://img.cdn.sugarat.top/mdImg/MTY3NzkxMDI1NTU1Nw==20140524124237518.gif'
+        }
+      })
+      if (imageList.value.length) {
+        // 异步填充url
+        PublicApi.getTipImageUrl(
+          props.k,
+          imageList.value.map((v) => ({
+            uid: v.uid,
+            name: v.name
+          }))
+        ).then((v) => {
+          v.data.forEach((url, idx) => {
+            imageList.value[idx].url = url.cover
+            Object.assign(imageList.value[idx], {
+              preview: url.preview
+            })
+          })
+        })
+      }
+    } catch {
+      tipData.text = props.tip || ''
+      tipData.imgs = []
+      imageList.value = []
+    }
+
+    // 外部变动
+    if (tipData.text) {
+      textValue.value = tipData.text
+    } else {
+      textValue.value = ''
+    }
+  },
+  {
+    immediate: true
+  }
+)
+const needSave = computed(() => tipData.text !== textValue.value)
+
+// 更新批注信息
+const updateTip = (notify = true) => {
+  if (tipData.text !== textValue.value) {
+    tipData.text = textValue.value
+  }
+  updateTaskInfo(props.k, { tip: JSON.stringify(tipData) }, notify)
+}
+
+const imageViewerVisible = ref(false)
+const handleChangeFile = (file: UploadUserFile) => {
+  if (!props.k) {
+    return
+  }
+  const { name, uid } = file
+  const key = getTipImageKey(props.k, name, uid)
+  if (file.status === 'ready') {
+    file.status = 'success'
+    // qiniu上传
+    FileApi.getUploadToken().then((res) => {
+      qiniuUpload(res.data.token, file.raw, key, {
+        success() {
+          tipData.imgs.push({
+            uid,
+            name
+          })
+          updateTip()
+        }
+      })
+    })
+  }
+}
+const handleRemove: UploadProps['onRemove'] = (file) => {
+  const { uid, name } = file
+  const idx = tipData.imgs.findIndex((v) => v.uid === uid)
+  tipData.imgs.splice(idx, 1)
+  updateTip()
+  TaskApi.delTipImage(props.k, uid, name)
+}
+
+const handlePictureCardPreview = (file) => {
+  imageViewerVisible.value = true
+  const idx = imageList.value.findIndex((v) => v.uid === file.uid)
+  previewIdx.value = idx
+}
+// 超出选择的文件个数
+const handleExceedFile = () => {
+  ElMessage.error(`只能选择${MaxImgCount.value}个图片,可删除后重新选择`)
+}
+</script>

package/src/pages/dashboard/tasks/index.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="tasks">
+    <!-- 分类管理 -->
+    <div class="categorys-area">
+      <CategoryPanel v-model:category="selectCategory"></CategoryPanel>
+    </div>
+
+    <!-- 任务管理 -->
+    <div class="panel task-panel">
+      <!-- 创建任务 -->
+      <create-task :activeCategoryKey="selectCategory"></create-task>
+
+      <!-- 任务列表 -->
+      <div class="task-list">
+        <TaskInfo
+          @edit="editBaseInfo"
+          @delete="deleteTask"
+          @share="shareTask"
+          @more="editMore"
+          v-for="item in filterTasks"
+          :key="item.key"
+          :item="item"
+        ></TaskInfo>
+        <el-empty
+          v-if="filterTasks.length === 0"
+          description="此分类下没有任务哟，快去创建吧"
+        ></el-empty>
+      </div>
+    </div>
+
+    <!-- 任务基本信息维护弹窗 -->
+    <el-dialog
+      draggable
+      :fullscreen="isMobile"
+      title="基本信息修改"
+      v-model="showBaseInfoDialog"
+    >
+      <el-form :model="taskBaseInfo">
+        <el-form-item label="任务名称" label-width="100px">
+          <el-input v-model="taskBaseInfo.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="新的分类" label-width="100px">
+          <el-select v-model="taskBaseInfo.category" placeholder="请选择新分类">
+            <el-option label="默认" value="default"></el-option>
+            <el-option
+              v-for="c in categorys"
+              :key="c.k"
+              :label="c.name"
+              :value="c.k"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showBaseInfoDialog = false">取 消</el-button>
+          <el-button type="primary" @click="handleSaveEditInfo"
+            >确 定</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 分享链接弹窗(二维码/链接/短链) -->
+    <LinkDialog
+      v-model:value="showLinkModal"
+      :download="false"
+      title="收取链接"
+      :link="shareTaskLink"
+    >
+    </LinkDialog>
+    <!-- 附加属性编辑弹窗 -->
+    <el-dialog
+      :fullscreen="isMobile"
+      title="更多设置"
+      v-model="showTaskInfoPanel"
+      center
+    >
+      <div>
+        <h3 class="tc" style="font-size: 14px; color: #9e9e9e">
+          任务名：<strong style="color: #000000">{{ activeTask.name }}</strong
+          >，
+          <el-button type="primary" text @click="openTaskPage"
+            >去查看效果</el-button
+          >
+        </h3>
+        <el-tabs v-model="activeInfo">
+          <el-tab-pane label="截止日期" name="ddl">
+            <DDlPanel :ddl="taskInfo.ddl" :k="activeTask.key" />
+          </el-tab-pane>
+          <el-tab-pane label="批注信息" name="tip">
+            <TipInfoPanel
+              :rewrite="taskInfo.rewrite"
+              :tip="taskInfo.tip"
+              :k="activeTask.key"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="限制人员" name="people">
+            <PeoplePanel
+              :name="activeTask.name"
+              :value="taskInfo.people"
+              :k="activeTask.key"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="必填信息" name="info">
+            <InfoPanel
+              :rewrite="taskInfo.rewrite"
+              :info="taskInfo.info"
+              :k="activeTask.key"
+              :format="taskInfo.format"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="模板文件" name="template">
+            <TemplatePanel :value="taskInfo.template" :k="activeTask.key" />
+          </el-tab-pane>
+          <el-tab-pane label="文件属性" name="attr">
+            <FileInfoPanel :format="taskInfo.format" :k="activeTask.key" />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
+import { useStore } from 'vuex'
+import LinkDialog from '@components/linkDialog.vue'
+import { TaskApi } from '@/apis'
+import { copyRes } from '@/utils/stringUtil'
+import CategoryPanel from './components/CategoryPanel.vue'
+import CreateTask from './components/CreateTask.vue'
+import TaskInfo from './components/TaskInfo.vue'
+import DDlPanel from './components/infoPanel/ddl.vue'
+import PeoplePanel from './components/infoPanel/people.vue'
+import TemplatePanel from './components/infoPanel/template.vue'
+import InfoPanel from './components/infoPanel/info.vue'
+import TipInfoPanel from './components/infoPanel/tipInfo.vue'
+import FileInfoPanel from './components/infoPanel/file.vue'
+
+const $store = useStore()
+const isMobile = computed(() => $store.getters['public/isMobile'])
+// 分类相关
+const categorys = computed(() => $store.state.category.categoryList)
+
+// 任务相关
+const selectCategory = ref('default')
+const tasks = computed<TaskApiTypes.TaskItem[]>(
+  () => $store.state.task.taskList
+)
+const filterTasks = computed(() => {
+  const t = tasks.value.filter((v) => v.category === selectCategory.value)
+  return t
+})
+
+// 删除任务
+const deleteTask = (k: string, isTrash = false) => {
+  if (!k) return
+  ElMessageBox.confirm(
+    '确认删除此任务吗?',
+    isTrash ? '!!回收站的删除后无法再恢复' : '数据无价，请谨慎操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: isTrash ? 'error' : 'info'
+    }
+  )
+    .then(() => {
+      $store.dispatch('task/deleteTask', k).then(() => {
+        ElMessage.success('删除成功')
+      })
+    })
+    .catch(() => {
+      ElMessage.info('取消删除')
+    })
+}
+
+// 基本信息编辑
+const showBaseInfoDialog = ref(false)
+const taskBaseInfo = reactive({ name: '', category: '', key: '' })
+const editBaseInfo = (task: any) => {
+  taskBaseInfo.name = task.name
+  taskBaseInfo.category = task.category
+  taskBaseInfo.key = task.key
+  showBaseInfoDialog.value = true
+}
+const handleSaveEditInfo = () => {
+  showBaseInfoDialog.value = false
+  if (!taskBaseInfo.name.trim()) {
+    ElMessage.warning('不能为空')
+    return
+  }
+  $store.dispatch('task/updateTask', taskBaseInfo).then(() => {
+    ElMessage.success('更新成功')
+  })
+}
+
+// 生成分享链接
+const shareTaskLink = ref('')
+const showLinkModal = ref(false)
+const shareTask = (k: string) => {
+  shareTaskLink.value = 'default'
+  const { origin } = window.location
+  shareTaskLink.value = `${origin}/task/${k}`
+  copyRes(shareTaskLink.value, '收集链接已自动复制到粘贴板')
+  showLinkModal.value = true
+}
+
+// 附加属性编辑
+const taskInfo = reactive<TaskApiTypes.TaskInfo>({})
+const showTaskInfoPanel = ref(false)
+const activeInfo = ref('info')
+const activeTask: TaskApiTypes.TaskItem = reactive({
+  category: '',
+  key: '',
+  name: '',
+  recentLog: []
+})
+const editMore = (item: any) => {
+  Object.assign(activeTask, item)
+  TaskApi.getTaskMoreInfo(item.key).then((res) => {
+    // 先初始化,再赋值
+    taskInfo.info = '[]'
+    taskInfo.ddl = ''
+    taskInfo.tip = ''
+    taskInfo.format = ''
+    setTimeout(() => {
+      Object.assign(taskInfo, res.data)
+      showTaskInfoPanel.value = true
+    })
+  })
+}
+
+// TODO: 有需要再优化，目前像bug
+// 用于选择默认展示项目
+// const taskCount = (c: string) => {
+//   const count = tasks.value.filter((t: any) => t.category === c).length
+//   return count
+// }
+
+// 选中一个有任务数据的分类
+// watchEffect(() => {
+//   if (taskCount('default') > 0) {
+//     return
+//   }
+//   if (categorys.value.length > 0) {
+//     for (const c of categorys.value) {
+//       if (taskCount(c.k) > 0) {
+//         selectCategory.value = c.k
+//         break
+//       }
+//     }
+//   }
+// })
+
+onMounted(() => {
+  $store.dispatch('category/getCategory')
+  $store.dispatch('task/getTask')
+})
+
+const openTaskPage = () => {
+  window.open(`/task/${activeTask.key}`)
+}
+</script>
+<style scoped lang="scss">
+.tasks {
+  max-width: 1024px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+.tasks :deep(.el-dialog__body) {
+  padding-top: 10px;
+}
+
+.panel {
+  padding: 1em;
+  background-color: #fff;
+  margin: 10px auto;
+  box-sizing: border-box;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.task-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+@media screen and (max-width: 700px) {
+  .categorys-area {
+    margin-top: 20px;
+  }
+  :deep(.el-tabs__nav-scroll) {
+    overflow-x: scroll;
+    &::-webkit-scrollbar {
+      display: none; /* Chrome Safari */
+    }
+  }
+}
+</style>

package/src/pages/dashboard/tasks/public.ts

@@ -0,0 +1,32 @@
+import { ElMessage } from 'element-plus'
+import { TaskApi } from '@/apis'
+import { debounce } from '@/utils/other'
+
+export const updateTaskInfo: (
+  key: string,
+  options: TaskApiTypes.TaskInfo,
+  successInfo?: boolean
+) => void = debounce(
+  (key, options, successInfo = true) => {
+    if (key) {
+      TaskApi.updateTaskMoreInfo(key, options)
+        .then(() => {
+          if (successInfo) {
+            ElMessage.success({
+              message: '设置成功',
+              zIndex: 4000,
+              duration: 1000
+            })
+          }
+        })
+        .catch(() => {
+          ElMessage.error({
+            message: '设置失败',
+            zIndex: 4000
+          })
+        })
+    }
+  },
+  1000,
+  true
+)

package/src/pages/disabled/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="not-found">
+    <h1>EasyPicker | 轻取</h1>
+    <h2>{{ $route.query.title }}：已被网站管理员禁用</h2>
+    <h3><a @click="handleToHome">查看应用介绍</a></h3>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+
+const $route = useRoute()
+const handleToHome = () => {
+  window.location.href = 'https://docs.ep.sugarat.top/'
+}
+</script>
+<style lang="scss" scoped>
+.not-found {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
+  min-height: 100vh;
+}
+h1,
+h2,
+h3,
+a {
+  color: aliceblue;
+  text-align: center;
+  font-weight: lighter;
+}
+a {
+  margin-left: 10px;
+  border-bottom: 2px solid aliceblue;
+  cursor: pointer;
+}
+h1 {
+  font-size: 48px;
+  padding-top: 10%;
+}
+h2 {
+  font-size: 30px;
+  padding-top: 2vh;
+}
+h3 {
+  font-size: 28px;
+  padding-top: 1vh;
+}
+</style>

package/src/pages/feedback/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h1>反馈页</h1>
+    </div>
+</template>