@sugarat/easypicker2-client 2.4.1

package/src/components/loginPanel.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="lay-form">
+        <!-- 登录面板 -->
+        <div class="pannel">
+            <div class="logo">
+                <router-link to="/">
+                    <img src="https://img.cdn.sugarat.top/easypicker/EasyPicker.png" />
+                </router-link>
+                <p class="name">{{ title }}</p>
+                <p class="introduce">{{ introduce }}</p>
+            </div>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'loginPanel',
+  props: {
+    title: {
+      type: String,
+      default: '轻取',
+    },
+    introduce: {
+      type: String,
+      default: '在线文件收取助手',
+    },
+  },
+  setup() {
+    return {
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+// 背景之外的部分
+.lay-form {
+    padding-top: 86px;
+    margin: auto;
+}
+
+.pannel {
+    border-radius: 5px;
+    border: 1px solid #e9e9e9;
+    width: 430px;
+    background-color: #fff;
+    opacity: 0.9;
+    padding: 40px 8px 48px;
+    margin: auto;
+    .logo {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        a{
+            margin: 1rem auto;
+            width: 90%;
+            img {
+                width: 100%;
+                display: block;
+                margin: 0 auto;
+            }
+        }
+        p {
+            margin: 5px;
+            text-align: center;
+        }
+        p.name {
+            font-size: 2rem;
+            font-weight: bold;
+        }
+        p.introduce {
+            color: #595959;
+            font-size: 1rem;
+        }
+    }
+}
+
+@media screen and (max-width: 700px) {
+    .pannel {
+        width: 90%;
+        background-color: rgba(255, 255, 255, 0.65);
+    }
+    .logo {
+        img {
+            width: 60%;
+        }
+    }
+}
+</style>

package/src/constants/index.ts

@@ -0,0 +1,83 @@
+/**
+ * 用户状态
+ */
+export enum USER_STATUS {
+  /**
+   * 正常
+   */
+  NORMAL,
+  /**
+   * 冻结
+   */
+  FREEZE,
+  /**
+   * 封禁
+   */
+  BAN
+}
+
+export enum WishStatus {
+  /**
+   * 审核中
+   */
+  REVIEW,
+  /**
+   * 待开始
+   */
+  WAIT,
+  /**
+   * 开发中
+   */
+  START,
+  /**
+   * 已上线
+   */
+  END,
+  /**
+   * 关闭
+   */
+  CLOSE
+}
+
+export enum ActionType {
+  /**
+   * 点赞
+   */
+  PRAISE,
+
+  /**
+   * 文件下载
+   */
+  Download,
+
+  /**
+   * 文件归档
+   */
+  Compress,
+
+  /**
+   * 路由禁用
+   */
+  DisabledRoute
+}
+
+export enum DownloadStatus {
+  /**
+   * 归档中
+   */
+  ARCHIVE,
+  /**
+   * 链接已失效
+   */
+  EXPIRED,
+  /**
+   * 可下载
+   */
+  SUCCESS,
+  /**
+   * 归档失败
+   */
+  FAIL
+}
+
+export const filenamePattern = /[\\/:*?"<>|]/g

package/src/env.d.ts

@@ -0,0 +1,8 @@
+interface ImportMetaEnv {
+  VITE_APP_TITLE: string
+  VITE_APP_AXIOS_BASE_URL: string
+  // 提交文件表单输入内容最大长度限制
+  VITE_APP_INPUT_MAX_LENGTH: string
+  // PV 上报路径
+  VITE_APP_PV_PATH: string
+}

package/src/main.ts

@@ -0,0 +1,19 @@
+import { createApp } from 'vue'
+import JsonViewer from 'vue-json-viewer'
+import router from './router'
+import store from './store'
+
+import App from './App.vue'
+import Axios from './apis/ajax'
+
+document.title = import.meta.env.VITE_APP_TITLE
+
+const app = createApp(App)
+
+app.provide('$http', Axios)
+
+app.use(router)
+app.use(store)
+app.use(JsonViewer)
+
+app.mount('#app')

package/src/pages/404/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="not-found">
+    <h1>404 Not Found</h1>
+    <h2>糟糕页面走丢了</h2>
+    <h3>{{ time }}s后<a @click="handleToHome">回到首页</a></h3>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const time = ref(3)
+const timer = ref(null)
+const router = useRouter()
+const handleToHome = () => {
+  clearInterval(timer.value)
+  router.replace('/')
+}
+onMounted(() => {
+  timer.value = setInterval(() => {
+    if (time.value === 1) {
+      clearInterval(timer.value)
+      router.replace('/')
+    }
+    time.value -= 1
+  }, 1000)
+})
+</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;
+}
+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/about/index.vue

@@ -0,0 +1,152 @@
+<template>
+    <div class="about">
+        <main>
+            <div class="panel">
+                <router-link to="/">
+                    <img class="logo" src="https://img.cdn.sugarat.top/easypicker/EasyPicker.png">
+                </router-link>
+            </div>
+            <div class="panel">
+                <h1>简介</h1>
+                <p>在线文件收取助手,帮助用户快速的完成一对多的文件收取</p>
+            </div>
+            <div class="panel">
+                <h1>诞生背景</h1>
+                <p>校园学习或者工作场景中会有以下几个场景:</p>
+                <ul>
+                    <li><strong>电子文件:</strong> 班委向同学收取各种实验电子报告</li>
+                    <li><strong>图片:</strong> 收取各种截图证明/活动照片</li>
+                    <li>...</li>
+                </ul>
+                <p>目前最广泛的收取方式为,通过邮箱,QQ,微信等通讯工具传递</p>
+                <p>弊端显而易见,不方便整理统计。还占用电脑/手机内存</p>
+                <p>为了解决这个问题,此项目应运而生</p>
+                <p>当然<span><strong>市面上也有几款类似的办公工具</strong></span> ,功能及使用方式都差不多</p>
+                <p>本项目<strong>是 <a href="https://github.com/ATQQ/easypicker2-client">开源</a> 的</strong> </p>
+                <p>如有私有化的需求,可自行部署使用(也可 <router-link to="/author">联系作者</router-link> 提供帮助)</p>
+            </div>
+            <div class="panel">
+                <h1>现有功能 <span style="color:grey;font-size:0.8rem;">(用户关心的)</span></h1>
+                <h2>收集任务</h2>
+                <ul>
+                    <li><strong>分类管理: </strong> 收集任务支持分类管理</li>
+                    <li><strong>设置DDL(截止日期): </strong> 任务截止后不可再提交文件</li>
+                    <li><strong>限制提交人员: </strong> 非指定的人员(姓名),无法提交文件</li>
+                    <li><strong>设置模板文件: </strong> 提交者可直接在提交页面下载此文件</li>
+                    <li><strong>自动重命名: </strong> 提交的文件按填写表单信息进行自动重名(如:姓名-工号.后缀)</li>
+                </ul>
+                <h2>文件相关</h2>
+                <ul>
+                    <li><strong>上传(提交): </strong>单个/多个</li>
+                    <li><strong>下载: </strong>单个/多个/按收集任务</li>
+                    <li><strong>撤回: </strong>用户可以撤回自己提交的文件</li>
+                    <li><strong>分享: </strong>用户可以将文件下载链接分享给朋友</li>
+                    <li><strong>模板下载: </strong> 下载任务发布者设置的模板文件</li>
+                    <li><strong>导出: </strong> 导出提交记录</li>
+                </ul>
+            </div>
+            <div class="panel">
+                <h1>相关链接</h1>
+                <h2>应用链接相关</h2>
+                <ul>
+                    <li><a href="https://docs.ep.sugarat.top" target="_blank" rel="noopener noreferrer">私有化部署</a></li>
+                    <li><a target="_blank" href="https://ep.sugarat.top">Easypicker1.0</a></li>
+                    <li><a target="_blank" href="https://ep2.sugarat.top">Easypicker2.0</a></li>
+                </ul>
+                <h2>应用源代码 <span style="color:grey;font-size:0.8rem;">(开发者需要的)</span></h2>
+                <ul>
+                    <li><a target="_blank" href="https://github.com/ATQQ/EasyPicker-webpack">Easypicker1.0-客户端</a></li>
+                    <li><a target="_blank" href="https://github.com/ATQQ/easypicker-server">Easypicker1.0-服务端</a></li>
+                </ul>
+                <ul>
+                    <li><a target="_blank" href="https://github.com/ATQQ/easypicker2-client">Easypicker2.0-客户端</a></li>
+                    <li><a target="_blank" href="https://github.com/ATQQ/easypicker2-server">Easypicker2.0-服务端</a></li>
+                </ul>
+                <ul>
+                    <li><a target="_blank" href="https://github.com/ATQQ/vite-vue3-template">Easypicker2.0-客户端模板仓库</a></li>
+                    <li><a target="_blank" href="https://github.com/ATQQ/node-server">Easypicker2.0-服务端模板仓库</a></li>
+                </ul>
+                <h2>作者 <span style="color:grey;font-size:0.8rem;">(夹带私货)</span></h2>
+                <ul>
+                    <li><a target="_blank" href="https://sugarat.top">博客</a></li>
+                    <li><a target="_blank" href="https://github.com/ATQQ">GitHub</a></li>
+                    <li><a target="_blank" href="https://juejin.cn/user/1028798615918983">掘金</a></li>
+                </ul>
+            </div>
+            <!-- <div class="panel">
+                <h1>开发计划</h1>
+                <h2>...未完待续</h2>
+            </div>
+            <div class="panel">
+                <h1>涉及技术</h1>
+                <h2>...未完待续</h2>
+            </div> -->
+        </main>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {
+
+    }
+  },
+})
+</script>
+<style lang="scss" scoped>
+h1,
+h2,
+h3,
+h4 {
+    font-weight: 500;
+}
+.about {
+    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+    min-height: 100vh;
+}
+main {
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 20px;
+    .panel {
+        position: relative;
+        margin: 0 auto 10px;
+        padding: 16px 20px;
+        width: 100%;
+        overflow: hidden;
+        border-radius: 0.25rem;
+        box-shadow: #eee;
+        box-sizing: border-box;
+        transition: all 0.3s;
+        background-color: #fff;
+    }
+    .logo{
+        width: 100%;
+        max-width: 520px;
+        margin: 0 auto;
+        display: block;
+    }
+    h1 {
+        font-size: 1.6rem;
+        margin-bottom: 10px;
+    }
+    h2{
+        font-size: 1.3rem;
+        margin-bottom: 12px;
+    }
+    ul,ol{
+        margin-left: 20px;
+        font-size: 15px;
+        margin-bottom: 1em;
+    }
+    p{
+        font-size: 15px;
+        margin-bottom: 1em;
+    }
+    a{
+        color: #409eff;
+    }
+}
+</style>

package/src/pages/callme/index.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="callme">
+        <main>
+            <div class="panel">
+                <h1>联系作者</h1>
+                <!-- 基本信息 -->
+                <div class="baseinfo">
+                    <span v-for="(info, idx) in baseInfo" :key="idx" class="info-item">
+                        <el-icon>
+                            <component :is="info.icon" />
+                        </el-icon>
+                        <i :class="info.icon"></i>
+                        <a target="_blank" :href="info.href">{{ info.text }}</a>
+                    </span>
+                </div>
+                <hr />
+                <!-- 一堆二维码 -->
+                <div class="qq-wechat">
+                    <ul>
+                        <li v-for="(qrcode, idx) in qrCOdes" :key="idx">
+                            <div class="title">{{ qrcode.text }}</div>
+                            <div class="content">
+                                <img :src="qrcode.img" />
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="description">
+                    <p>如遇无法解决的账号/使用问题,欢迎小窗联系我</p>
+                </div>
+                <div class="links">
+                    <router-link to="/">回到首页</router-link>
+                </div>
+            </div>
+        </main>
+    </div>
+</template>
+<script lang="ts" setup>
+import { UserFilled, Promotion } from '@element-plus/icons-vue'
+
+const baseInfo = [
+  {
+    icon: UserFilled,
+    text: '粥里有勺糖',
+    href: 'https://sugarat.top',
+  },
+  {
+    icon: Promotion,
+    text: 'engineerzjl@foxmail.com',
+    href: 'mailto:engineerzjl@foxmail.com',
+  },
+]
+
+const qrCOdes = [
+  {
+    text: '微信',
+    img: 'https://img.cdn.sugarat.top/mdImg/MTYxOTE1NTk3MTkyNA==619155971925',
+  },
+  {
+    text: '公众号',
+    img: 'https://img.cdn.sugarat.top/mdImg/MTYxOTE1NTYwNzQ5MQ==619155607491',
+  },
+  {
+    text: 'QQ',
+    img: 'https://img.cdn.sugarat.top/mdImg/MTYxOTE1NjQ5ODczOQ==619156498739',
+  },
+  {
+    text: '交流群',
+    img: 'https://img.cdn.sugarat.top/mdImg/MTY0Nzc2MTE2MTE2NA==ep-group.png',
+  },
+]
+
+</script>
+<style lang="scss" scoped>
+h1,
+h2,
+h3,
+h4 {
+    font-weight: 500;
+}
+.callme {
+    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+    min-height: 100vh;
+}
+main {
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 20px;
+    .panel {
+        position: relative;
+        margin: 0 auto 20px;
+        padding: 16px 20px;
+        width: 100%;
+        overflow: hidden;
+        border-radius: 0.25rem;
+        box-shadow: #eee;
+        box-sizing: border-box;
+        transition: all 0.3s;
+        background-color: #fff;
+    }
+    h1 {
+        font-size: 1.6rem;
+        font-weight: 500;
+        margin-bottom: 10px;
+    }
+    .baseinfo {
+        color: #7f7f7f;
+        font-size: 1rem;
+        display: flex;
+        flex-wrap: wrap;
+        a {
+            color: #7f7f7f;
+            font-size: 1rem;
+            margin-left: 10px;
+        }
+        .info-item {
+            margin-right: 20px;
+        }
+        margin-bottom: 10px;
+    }
+    hr {
+        margin-bottom: 10px;
+    }
+    .qq-wechat ul {
+        list-style: none;
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 10px;
+        li {
+            text-align: center;
+            .title {
+                font-weight: 600;
+            }
+            .content {
+                padding: 0.5em;
+            }
+            img {
+                width: 150px;
+            }
+        }
+    }
+    .description {
+        color: #242424;
+        font-size: 15px;
+        margin-bottom: 10px;
+        text-align: center;
+    }
+    .links {
+        text-align: center;
+        a {
+            color: #409eff;
+        }
+    }
+}
+</style>