@sugarat/easypicker2-client 2.4.1

package/src/components/HomeHeader/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <nav class="navbar">
+      <div class="right-menu">
+        <label for="nav-open">
+          <span class="menu-icon">
+            <el-icon :size="28">
+              <Fold />
+            </el-icon>
+          </span>
+        </label>
+      </div>
+      <input type="checkbox" id="nav-open" />
+      <div id="miniMenu">
+        <ul class="nav-list">
+          <li v-for="({ href, text }, idx) in links" :key="idx">
+            <router-link :to="href">{{ text }}</router-link>
+          </li>
+          <li>
+            <a
+              href="https://docs.ep.sugarat.top/plan/wish.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              >需求墙</a
+            >
+          </li>
+          <!-- <li>
+            <a
+              href="https://docs.ep.sugarat.top/introduction/about/index.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              >关于</a
+            >
+          </li> -->
+          <!-- <li>
+            <a
+              href="https://github.com/ATQQ/easypicker2-client"
+              target="_blank"
+              rel="noopener noreferrer"
+              >GitHub</a
+            >
+          </li> -->
+          <li>
+            <a
+              href="https://docs.ep.sugarat.top/plan/todo.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              >近期规划</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://docs.ep.sugarat.top/plan/log.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              >更新日志</a
+            >
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import { Fold } from '@element-plus/icons-vue'
+
+const $route = useRoute()
+const links = reactive([])
+onMounted(() => {
+  const { path } = $route
+  const navList = [
+    {
+      href: '/',
+      text: '首页'
+    },
+    {
+      href: '/login',
+      text: '登录'
+    },
+    {
+      href: '/register',
+      text: '快速注册'
+    }
+  ]
+  for (const nav of navList) {
+    if (nav.href !== path) {
+      links.push(nav)
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+#nav-open {
+  position: absolute;
+  z-index: -1;
+}
+.navbar {
+  color: #fff;
+  padding: 12px 10px 10px 10px;
+
+  .right-menu {
+    margin-right: 15px;
+    display: none;
+    .menu-icon {
+      font-size: 28px;
+    }
+  }
+  .nav-list {
+    display: flex;
+    justify-content: left;
+    li {
+      text-align: center;
+      list-style: none;
+      color: #fff;
+      margin: 0 20px;
+    }
+    a {
+      color: #fff;
+      opacity: 0.8;
+      &:hover {
+        opacity: 1;
+        text-shadow: 0 0 3px #eee;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .navbar {
+    .right-menu {
+      display: block;
+      float: right;
+      font-size: 20px;
+    }
+    #nav-open:checked + #miniMenu {
+      .nav-list {
+        display: flex;
+      }
+    }
+    .nav-list {
+      display: none;
+      flex-direction: column;
+      li {
+        margin-top: 6px;
+      }
+    }
+  }
+  #miniMenu {
+    position: absolute;
+    right: 10px;
+    top: 40px;
+  }
+}
+</style>

package/src/components/InfosForm/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-form :disabled="disabled" :label-position="labelPosition || 'top'">
+    <el-form-item
+      class="ellipsis"
+      v-for="(info, idx) in infos"
+      :key="idx"
+      :label="info.type === 'text' ? '' : info.text"
+    >
+      <div class="fixed-text" v-if="info.type === 'text'">
+        {{ info.text }}
+      </div>
+      <el-input
+        v-if="info.type === 'input'"
+        :maxlength="maxInputLength"
+        clearable
+        show-word-limit
+        :placeholder="`请输入 ${info.text}`"
+        v-model="info.value"
+      ></el-input>
+      <el-radio-group v-if="info.type === 'radio'" v-model="info.value">
+        <el-radio
+          v-for="(r, idx) in info.children"
+          :key="idx"
+          :label="r.text"
+          >{{ r.text }}</el-radio
+        >
+      </el-radio-group>
+      <el-select
+        default-first-option
+        clearable
+        filterable
+        v-if="info.type === 'select'"
+        v-model="info.value"
+        :placeholder="`请选择 ${info.text}`"
+      >
+        <el-option
+          v-for="(r, idx) in info.children"
+          :key="idx"
+          :label="r.text"
+          :value="r.text"
+        />
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+defineProps<{
+  infos: InfoItem[]
+  disabled: boolean
+  labelPosition?: 'left' | 'right' | 'top'
+}>()
+
+const maxInputLength = +import.meta.env.VITE_APP_INPUT_MAX_LENGTH || 10
+</script>
+<style scoped lang="scss">
+:deep(div.el-form-item > label) {
+  font-weight: bold;
+  &::before {
+    content: '* ';
+    color: red;
+  }
+}
+
+:deep(div.el-form-item__content > .el-select) {
+  flex: 1;
+}
+.fixed-text {
+  background-color: #f5f7fa;
+  padding: 0 10px;
+  width: 100%;
+  text-align: left;
+}
+</style>

package/src/components/MessageList/index.vue

@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+import { ref, reactive, onMounted, watch, computed } from 'vue'
+import { useStore } from 'vuex'
+import { formatDate } from '@/utils/stringUtil'
+import { SuperUserApi } from '@/apis'
+
+const props = defineProps<{
+  data: SuperUserApiTypes.MessageItem[]
+  autoShow?: boolean
+}>()
+
+const dialogMessage = reactive({
+  show: false,
+  title: '系统消息',
+  text: '内容'
+})
+const activeMessage = ref<SuperUserApiTypes.MessageItem>(null)
+const handleViewDialogMessage = (v: SuperUserApiTypes.MessageItem) => {
+  activeMessage.value = v
+  dialogMessage.text = v.text
+  // TODO: 魔法数字问题
+  // TODO：支持更多的消息类型
+  dialogMessage.title = v.type === 0 ? '【系统消息】' : '【私信】'
+  dialogMessage.show = true
+}
+
+const readMessage = () => {
+  if (activeMessage.value.read) {
+    dialogMessage.show = false
+    return
+  }
+  SuperUserApi.readMessage(activeMessage.value.id).then(() => {
+    activeMessage.value.read = true
+    dialogMessage.show = false
+  })
+}
+
+watch(
+  () => props.data.length,
+  () => {
+    if (!props.autoShow) {
+      return
+    }
+    const showItem = props.data.find((v) => !v.read)
+    if (showItem) {
+      handleViewDialogMessage(showItem)
+    }
+  }
+)
+
+// TODO：换成自定义hook
+const $store = useStore()
+const isMobile = computed(() => $store.getters['public/isMobile'])
+</script>
+<template>
+  <div v-if="!data.length" class="empty">暂无更多消息 ღ( ´･ᴗ･` )比心</div>
+  <ul class="message-list">
+    <li
+      v-for="d in data"
+      :key="d.id"
+      :class="{
+        read: d.read
+      }"
+      @click="handleViewDialogMessage(d)"
+    >
+      <p class="text">{{ d.text }}</p>
+      <p class="date">{{ formatDate(new Date(d.date)) }}</p>
+    </li>
+  </ul>
+  <el-dialog
+    center
+    show-close
+    append-to-body
+    v-model="dialogMessage.show"
+    :close-on-click-modal="false"
+    :title="dialogMessage.title"
+    width="30%"
+    :fullscreen="isMobile"
+  >
+    <div class="message-text" v-html="dialogMessage.text"></div>
+    <template #footer>
+      <p class="dialog-date">
+        时间：{{ formatDate(new Date(activeMessage.date)) }}
+      </p>
+      <span>
+        <el-button
+          type="default"
+          @click="
+            () => {
+              dialogMessage.show = false
+            }
+          "
+        >
+          下次提醒
+        </el-button>
+        <el-button type="primary" @click="readMessage"> 确定 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.message-list {
+  list-style: none;
+  max-height: 500px;
+  overflow-y: scroll;
+  li {
+    border-bottom: 1px solid #ddd;
+    padding: 10px;
+    cursor: pointer;
+    &.read {
+      opacity: 0.5;
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+    &:last-child {
+      border-bottom: none;
+    }
+
+    p.text {
+      font-size: 16px;
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+    p.date {
+      font-size: 14px;
+      margin-top: 4px;
+    }
+  }
+}
+.empty {
+  text-align: center;
+  padding: 10px;
+}
+
+.dialog-date {
+  font-size: 14px;
+  text-align: right;
+  padding: 10px;
+  color: grey;
+}
+</style>
+<style lang="scss">
+.message-text {
+  overflow-y: scroll;
+  max-height: 500px;
+  ul,
+  ol {
+    list-style: none;
+  }
+}
+</style>

package/src/components/MessagePanel/index.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { Bell } from '@element-plus/icons-vue'
+import { computed, reactive, onMounted, ref } from 'vue'
+import { SuperUserApi } from '@/apis'
+import MessageList from '@/components/MessageList/index.vue'
+
+const activeTab = ref<'all' | 'no'>('all')
+const messageData = reactive<SuperUserApiTypes.MessageItem[]>([])
+
+const noReadMessage = computed(() => messageData.filter((v) => !v.read))
+onMounted(() => {
+  SuperUserApi.getMessageList().then((v) => {
+    messageData.push(...v.data)
+  })
+})
+</script>
+<template>
+  <div class="message-panel">
+    <el-popover placement="bottom-end" :width="375" trigger="hover">
+      <template #reference>
+        <el-badge :value="noReadMessage.length || ''" :max="99">
+          <el-button :icon="Bell" circle />
+        </el-badge>
+      </template>
+      <div>
+        <el-tabs v-model="activeTab">
+          <el-tab-pane :label="`未读 ${noReadMessage.length || ''}`" name="no">
+            <message-list auto-show :data="noReadMessage" />
+          </el-tab-pane>
+          <el-tab-pane :label="`全部 ${messageData.length || ''}`" name="all">
+            <message-list :data="messageData" />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-popover>
+  </div>
+</template>
+<style lang="scss" scoped>
+.message-panel {
+  margin-right: 10px;
+}
+</style>

package/src/components/Praise/index.vue

@@ -0,0 +1,102 @@
+<template>
+    <span class="praise" @click="openPraise">
+        <!-- 赞赏弹窗 -->
+        <slot />
+        <el-dialog append-to-body v-model="showPraise" title="😄 嘻嘻 😄" :fullscreen="isMobile">
+            <p class="praise-line">目前的服务开销主要在 “文件存储” 与 "资源下载"两方面</p>
+            <p class="praise-line">存储 0.15 元/GB/月，下载0.29 元/GB</p>
+            <p class="praise-line">如果你觉得应用不错，可以支持一下👍🏻</p>
+            <div>
+                <table>
+                    <thead>
+                        <tr>
+                            <th v-for="(v, idx) in praiseImg" :key="idx">{{ v.title }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td v-for="(v, idx) in praiseImg" :key="idx">
+                                <el-image preview-teleported style="width: 100px; height: 100px" :src="v.url"
+                                    :preview-src-list="praiseImg.map(v => v.url)" :initial-index="idx" fit="cover" />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button type="success" @click="Thanks">这次一定</el-button>
+                    <el-button type="default" @click="NextPraise">下次一定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </span>
+</template>
+<script setup lang="ts">
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { computed, reactive, ref } from 'vue'
+import { useStore } from 'vuex'
+
+const $store = useStore()
+const showPraise = ref(false)
+const openPraise = () => {
+  showPraise.value = true
+}
+
+const praiseImg = reactive([
+  {
+    url: 'https://img.cdn.sugarat.top/mdImg/MTY1MTU0NzQ0MjMzNA==651547442334',
+    title: '微信',
+  },
+  {
+    url: 'https://img.cdn.sugarat.top/mdImg/MTY0Nzc1NTYyOTE5Mw==647755629193',
+    title: '微信赞赏',
+  },
+  {
+    url: 'https://img.cdn.sugarat.top/mdImg/MTY1MTU0NzQyOTg0OA==651547429848',
+    title: '支付宝',
+  },
+])
+const Thanks = () => {
+  ElMessageBox.alert(`
+  <p class="tc">
+    <img width="140px" src="https://img.cdn.sugarat.top/mdImg/MTY1MTUwNjkwNDc4OQ==thanks.gif" />
+  </p>
+  <p class="tc">
+    <img width="240px" src="https://img.cdn.sugarat.top/mdImg/MTY0Nzc2MDE3MzM1NA==647760173354" />
+  </p>
+  `, '💐 谢谢老板 💐', {
+    confirmButtonText: '不客气',
+    dangerouslyUseHTMLString: true,
+  })
+}
+const NextPraise = () => {
+  showPraise.value = false
+  ElMessage.success('下次一定！下次一定！')
+}
+
+const isMobile = computed(() => $store.getters['public/isMobile'])
+
+</script>
+<style scoped>
+.praise{
+    cursor: pointer;
+}
+.praise-line {
+    margin-bottom: 10px;
+}
+
+table{
+      display: block;
+    border-collapse: collapse;
+    margin: 1rem 0;
+    overflow-x: auto;
+}
+tr{
+  border:1px solid #dfe2e5;
+}
+th,td{
+  border:1px solid #8885;
+  padding: 0.6em 1em;
+}
+</style>

package/src/components/QrCode.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-image style="width: 150px; height: 150px" :src="src" :preview-src-list="srcList"/>
+</template>
+<script>
+export default {
+  name: 'QrCode',
+  props: {
+    value: String,
+  },
+  data() {
+    return {
+      src: '',
+      srcList: [],
+    }
+  },
+  watch: {
+    value(to) {
+      if (!to) {
+        return
+      }
+      this.src = this.createEwm(to)
+      this.srcList = [this.src]
+    },
+  },
+  methods: {
+    createEwm(text, config) {
+      // eslint-disable-next-line no-undef
+      const canvasImg = new AraleQRCode({
+        text,
+        size: 400,
+        foreground: '#000',
+        ...config,
+      })
+      return canvasImg.toDataURL('image/png')
+    },
+  },
+  mounted() {
+    if (this.value) {
+      this.src = this.createEwm(this.value)
+      this.srcList = [this.src]
+    }
+  },
+}
+</script>

package/src/components/linkDialog.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <el-dialog
+      :fullscreen="isMobile"
+      @close="handleClose"
+      :title="title"
+      v-model="showModel"
+      center
+    >
+      <!-- 链接 -->
+      <div>
+        <el-input placeholder="生成的链接" v-model="shareLink">
+          <template #prepend>
+            <el-button type="primary" @click="createShortLink"
+              >生成短链</el-button
+            >
+          </template>
+          <template #append>
+            <el-button type="primary" @click="copyLink">复制</el-button>
+          </template>
+        </el-input>
+      </div>
+      <!-- 二维码 -->
+      <div style="margin-top: 10px; text-align: center">
+        <qr-code :value="shareLink"></qr-code>
+      </div>
+      <!-- <template #footer>
+          <span class="dialog-footer">
+              <el-button type="primary" @click="$emit('update:value',false)">关闭</el-button>
+          </span>
+      </template>-->
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts">
+import { ElMessage } from 'element-plus'
+import { computed, defineComponent, ref, watchEffect } from 'vue'
+import QrCode from '@components/QrCode.vue'
+import { useStore } from 'vuex'
+import { copyRes, getShortUrl } from '@/utils/stringUtil'
+
+export default defineComponent({
+  name: 'linkDialog',
+  components: {
+    QrCode
+  },
+  props: {
+    title: {
+      type: String,
+      default: '链接面板'
+    },
+    value: {
+      type: Boolean
+    },
+    link: {
+      type: String,
+      default: ''
+    },
+    download: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props, context) {
+    const shareLink = ref('')
+    const showModel = ref(false)
+    const copyLink = () => {
+      copyRes(shareLink.value)
+    }
+    watchEffect(() => {
+      shareLink.value = props.link
+    })
+    watchEffect(() => {
+      showModel.value = props.value
+      if (showModel.value && props.download) {
+        setTimeout(() => {
+          ElMessage.success('如未自动开始下载，请复制链接到浏览器中执行下载')
+        }, 200)
+      }
+    })
+    const handleClose = () => {
+      context.emit('update:value', false)
+    }
+    const createShortLink = () => {
+      getShortUrl(shareLink.value).then((v) => {
+        shareLink.value = v
+        ElMessage.success('短链生成成功')
+      })
+    }
+
+    const $store = useStore()
+    const isMobile = computed(() => $store.getters['public/isMobile'])
+
+    return {
+      shareLink,
+      createShortLink,
+      copyLink,
+      handleClose,
+      showModel,
+      isMobile
+    }
+  }
+})
+</script>