@sugarat/easypicker2-client 2.4.1

package/src/pages/wish/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="wish">
+    <!-- 顶部导航栏 -->
+    <header>
+      <HomeHeader />
+    </header>
+    <main>
+      <h1 class="title">需求墙</h1>
+      <p class="des">通过投票决定下一个新功能是什么</p>
+      <p class="des">票数越多优先级越高</p>
+      <p class="des">当然你也可以提出你的需求，让大家来投票</p>
+      <div class="tip-wrap">
+        <p v-if="isLogin" class="des">
+          Go Go Go!
+          <strong @click="handleOpenFeature" class="feature-btn">我要提需求</strong>
+        </p>
+        <p v-else class="des">
+          提需求&投票，请先
+          <strong>
+            <router-link to="/login">登录</router-link>
+          </strong>
+        </p>
+        <br>
+        <p class="des">目前需求面板还未开发完成，</p>
+        <p class="des">可先直接加群进行反馈</p>
+        <p style="text-align: center;">
+          <img style="width: 290px;" src="https://img.cdn.sugarat.top/mdImg/MTY0OTkwMDk2MzQ3OQ==649900963479" alt="QQ群">
+        </p>
+      </div>
+    </main>
+
+    <el-dialog title="需求信息" v-model="dialogVisible" :fullscreen="isMobile">
+      <el-form :model="formData">
+        <el-form-item label="需求" :label-width="formLabelWidth">
+          <el-input placeholder="一句简单明了的话概括一下" v-model="formData.title"></el-input>
+        </el-form-item>
+        <el-form-item label="详细描述" :label-width="formLabelWidth">
+          <el-input placeholder="用朴素的话语进一步描述你的需求" type="textarea" v-model="formData.des"></el-input>
+        </el-form-item>
+        <el-form-item label="联系方式" :label-width="formLabelWidth">
+          <el-input placeholder="邮箱，QQ，微信等任意方式均可" v-model="formData.contact"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleAddFeature">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <footer>
+      <!-- 底部导航栏 -->
+      <HomeFooter />
+    </footer>
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  ref, onMounted, computed, reactive,
+} from 'vue'
+import HomeHeader from '@components/HomeHeader/index.vue'
+import HomeFooter from '@components/HomeFooter/index.vue'
+import { useStore } from 'vuex'
+import { ElMessage } from 'element-plus'
+import { WishApi } from '@/apis'
+
+const $store = useStore()
+const isLogin = computed(() => $store.state.user.isLogin)
+const isMobile = computed(() => $store.getters['public/isMobile'])
+
+const formLabelWidth = '80px'
+const dialogVisible = ref(false)
+const formData = reactive({
+  title: '',
+  des: '',
+  contact: '',
+})
+const handleOpenFeature = () => {
+  dialogVisible.value = true
+}
+
+const vaildFormData = () => {
+  if (formData.title.length === 0) {
+    ElMessage.error('需求标题不能为空')
+    return false
+  }
+  if (formData.des.length === 0) {
+    ElMessage.error('需求详细描述，不能为空')
+    return false
+  }
+  return true
+}
+const handleAddFeature = () => {
+  // 信息校验
+  if (!vaildFormData()) {
+    return
+  }
+  dialogVisible.value = false
+  // 提交信息
+  WishApi.addWish(formData).then((res) => {
+    ElMessage.success('提交成功，感谢你的反馈（需求进入审核阶段）')
+  })
+  // 初始化 表单内容
+  formData.title = ''
+  formData.des = ''
+  formData.contact = ''
+}
+
+onMounted(() => {
+  $store.dispatch('user/getLoginStatus')
+})
+</script>
+
+<style lang="scss" scoped>
+header {
+  display: block;
+  overflow: hidden;
+}
+
+.wish {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
+  min-height: 100vh;
+  main{
+    min-height: 70vh;
+  }
+}
+
+.title {
+  color: aliceblue;
+  text-align: center;
+  font-weight: lighter;
+  font-size: 48px;
+  padding-top: 5vh;
+}
+
+.des {
+  color: aliceblue;
+  text-align: center;
+  font-weight: lighter;
+  font-size: 16px;
+  padding: 0 10px 10px 10px;
+
+  a {
+    color: aliceblue;
+  }
+}
+
+.feature-btn {
+  cursor: pointer;
+}
+</style>

package/src/router/Interceptor/index.ts

@@ -0,0 +1,112 @@
+import { Router } from 'vue-router'
+import axios from 'axios'
+import $store from '@/store'
+import { PublicApi, SuperOverviewApi, UserApi } from '@/apis'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    // 是否管理员页面
+    isAdmin?: boolean
+    isSystem?: boolean
+    // 是否需要登录
+    requireLogin?: boolean
+    // 路由title
+    title?: string
+    // 是否可以禁用
+    allowDisabled?: boolean
+  }
+}
+
+function registerRouteGuard(router: Router) {
+  /**
+   * 全局前置守卫
+   */
+  router.beforeEach((to, from) => {
+    // 上报PV
+    const { fullPath } = to
+    PublicApi.reportPv(fullPath)
+
+    if (!import.meta.env.VITE_APP_PV_PATH.includes(window.location.hostname)) {
+      axios.get(
+        `//${
+          import.meta.env.VITE_APP_PV_PATH
+        }/public/report/pv?path=${encodeURIComponent(window.location.href)}`
+      )
+    }
+
+    // 更改title
+    window.document.title = `${import.meta.env.VITE_APP_TITLE} ${to.meta.title}`
+
+    // if (to.meta.requireLogin) {
+    //   if (from.path === '/') {
+    //     return from
+    //   }
+    //   return false
+    // }
+    return true
+  })
+
+  /**
+   * 全局解析守卫
+   */
+  router.beforeResolve(async (to) => {
+    if (to.meta.isAdmin || to.meta.isSystem) {
+      try {
+        const powerData = (await UserApi.checkPower()).data
+        $store.commit('user/setSuperAdmin', powerData.power)
+        $store.commit('user/setSystem', powerData.system)
+        if (to.meta.isSystem) {
+          return (
+            powerData.system || {
+              name: '404'
+            }
+          )
+        }
+
+        if (to.meta.isAdmin) {
+          return (
+            powerData.power || {
+              name: '404'
+            }
+          )
+        }
+      } catch (error) {
+        // if (error instanceof NotAllowedError) {
+        //     // ... 处理错误，然后取消导航
+        //     return false
+        // } else {
+        //     // 意料之外的错误，取消导航并把错误传给全局处理器
+        //     throw error
+        // }
+        console.error(error)
+        return false
+      }
+    }
+    return true
+  })
+
+  /**
+   * 全局后置守卫
+   */
+  router.afterEach((to, from, failure) => {
+    if (to.meta.allowDisabled) {
+      SuperOverviewApi.checkDisabledRoute(to.path).then((v) => {
+        if (v.data.status) {
+          router.replace({
+            name: 'disable',
+            query: {
+              title: to.meta.title || to.path
+            }
+          })
+        }
+      })
+    }
+    // 改标题,监控上报一些基础信息
+    // sendToAnalytics(to.fullPath)
+    if (failure) {
+      console.error(failure)
+    }
+  })
+}
+
+export default registerRouteGuard

package/src/router/index.ts

@@ -0,0 +1,13 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import registerRouteGuard from './Interceptor'
+import routes from './routes'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.VITE_ROUTER_BASE as string),
+  routes
+})
+
+// 注册路由守卫
+registerRouteGuard(router)
+
+export default router

package/src/router/routes/index.ts

@@ -0,0 +1,197 @@
+import { RouteRecordRaw } from 'vue-router'
+import Home from '@/pages/home/index.vue'
+import Login from '@/pages/login/index.vue'
+import Register from '@/pages/register/index.vue'
+// import Wish from '@/pages/wish/index.vue'
+
+const NotFind = () => import('@/pages/404/index.vue')
+const Reset = () => import('@/pages/reset/index.vue')
+const About = () => import('@/pages/about/index.vue')
+const Author = () => import('@/pages/callme/index.vue')
+const Feedback = () => import('@/pages/feedback/index.vue')
+const Dashboard = () => import('@/pages/dashboard/index.vue')
+const Files = () => import('@/pages/dashboard/files/index.vue')
+const Config = () => import('@/pages/dashboard/config/index.vue')
+const Tasks = () => import('@/pages/dashboard/tasks/index.vue')
+const Manage = () => import('@/pages/dashboard/manage/index.vue')
+const Overview = () => import('@/pages/dashboard/manage/overview/index.vue')
+const User = () => import('@/pages/dashboard/manage/user/index.vue')
+const Wish = () => import('@/pages/dashboard/manage/wish/index.vue')
+const Task = () => import('@/pages/task/index.vue')
+const Disabled = () => import('@/pages/disabled/index.vue')
+const DashboardConfig = () =>
+  import('@/pages/dashboard/manage/config/index.vue')
+
+const routes: RouteRecordRaw[] = [
+  // 404
+  {
+    path: '/:pathMatch(.*)*',
+    name: '404',
+    component: NotFind,
+    meta: {
+      title: '404'
+    }
+  },
+  {
+    path: '/disabled',
+    name: 'disable',
+    component: Disabled
+  },
+  {
+    path: '/',
+    name: 'home',
+    component: Home,
+    meta: {
+      title: '首页',
+      allowDisabled: true
+    }
+  },
+  // {
+  //   path: '/wish',
+  //   name: 'wish',
+  //   component: Wish,
+  //   meta: {
+  //     title: '需求墙',
+  //   },
+  // },
+  {
+    path: '/login',
+    name: 'login',
+    component: Login,
+    meta: {
+      title: '登录'
+    }
+  },
+  {
+    path: '/register',
+    name: 'register',
+    component: Register,
+    meta: {
+      title: '注册',
+      allowDisabled: true
+    }
+  },
+  {
+    path: '/reset',
+    name: 'reset',
+    component: Reset,
+    meta: {
+      title: '找回密码',
+      allowDisabled: true
+    }
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: About,
+    meta: {
+      title: '关于'
+    }
+  },
+  {
+    path: '/author',
+    name: 'author',
+    component: Author,
+    meta: {
+      title: '联系作者'
+    }
+  },
+  {
+    path: '/feedback',
+    name: 'feedback',
+    component: Feedback,
+    meta: {
+      title: '建议反馈'
+    }
+  },
+  {
+    path: '/task/:key',
+    name: 'task',
+    component: Task,
+    meta: {
+      title: '文件提交'
+    }
+  },
+  {
+    path: '/dashboard',
+    name: 'dashboard',
+    component: Dashboard,
+    redirect: {
+      name: 'tasks'
+    },
+    children: [
+      {
+        name: 'config',
+        path: 'config',
+        component: Config,
+        meta: {
+          title: '服务状态维护',
+          isSystem: true
+        }
+      },
+      {
+        name: 'files',
+        path: 'files',
+        component: Files,
+        meta: {
+          title: '文件列表'
+        }
+      },
+      {
+        name: 'tasks',
+        path: 'tasks',
+        component: Tasks,
+        meta: {
+          title: '任务列表'
+        }
+      },
+      {
+        name: 'manage',
+        path: 'manage',
+        component: Manage,
+        redirect: {
+          name: 'overview'
+        },
+        children: [
+          {
+            name: 'overview',
+            path: 'overview',
+            component: Overview,
+            meta: {
+              title: '应用概况',
+              isAdmin: true
+            }
+          },
+          {
+            name: 'user',
+            path: 'user',
+            component: User,
+            meta: {
+              title: '用户列表',
+              isAdmin: true
+            }
+          },
+          {
+            name: 'wish',
+            path: 'wish',
+            component: Wish,
+            meta: {
+              title: '需求管理',
+              isAdmin: true
+            }
+          },
+          {
+            name: 'dashboard-config',
+            path: 'config',
+            component: DashboardConfig,
+            meta: {
+              title: '配置面板',
+              isAdmin: true
+            }
+          }
+        ]
+      }
+    ]
+  }
+]
+export default routes

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/store/index.ts

@@ -0,0 +1,17 @@
+import { createStore } from 'vuex'
+import user from './modules/user'
+import category from './modules/category'
+import task from './modules/task'
+import publicModule from './modules/public'
+
+// Create a new store instance.
+const store = createStore({
+  modules: {
+    user,
+    category,
+    task,
+    public: publicModule
+  }
+})
+
+export default store

package/src/store/modules/category.ts

@@ -0,0 +1,44 @@
+import { Module } from 'vuex'
+import { CategoryApi } from '@/apis'
+
+interface State {
+  categoryList: any[]
+}
+
+const store: Module<State, unknown> = {
+  namespaced: true,
+  state() {
+    return {
+      categoryList: []
+    }
+  },
+  mutations: {
+    updateCategory(state, payload) {
+      state.categoryList = payload
+    }
+  },
+  actions: {
+    getCategory(context) {
+      CategoryApi.getList().then((res) => {
+        context.commit('updateCategory', res.data.categories)
+      })
+    },
+    createCategory(context, name) {
+      return CategoryApi.createNew(name).then((res) => {
+        context.dispatch('getCategory')
+        return res
+      })
+    },
+    deleteCategory(context, k) {
+      return CategoryApi.deleteOne(k).then((res) => {
+        const idx = context.state.categoryList.findIndex((v) => v.k === k)
+        if (idx >= 0) {
+          context.state.categoryList.splice(idx, 1)
+        }
+        return res
+      })
+    }
+  }
+}
+
+export default store

package/src/store/modules/public.ts

@@ -0,0 +1,27 @@
+import { Module } from 'vuex'
+
+interface State {
+  clientWidth: number
+}
+
+const store: Module<State, unknown> = {
+  namespaced: true,
+  state() {
+    return {
+      clientWidth: 701
+    }
+  },
+  getters: {
+    isMobile(state) {
+      return state.clientWidth <= 700
+    }
+  },
+  // 只能同步
+  mutations: {
+    setWidth(state, width = 701) {
+      state.clientWidth = width
+    }
+  }
+}
+
+export default store

package/src/store/modules/task.ts

@@ -0,0 +1,55 @@
+import { Module } from 'vuex'
+import { TaskApi } from '@/apis'
+
+interface State {
+  taskList: any[]
+}
+
+const store: Module<State, unknown> = {
+  namespaced: true,
+  state() {
+    return {
+      taskList: []
+    }
+  },
+  mutations: {
+    updateTask(state, payload) {
+      state.taskList = payload
+    }
+  },
+  actions: {
+    getTask(context) {
+      TaskApi.getList().then((res) => {
+        context.commit('updateTask', res.data.tasks)
+      })
+    },
+    createTask(context, payload) {
+      const { name, category } = payload
+      return TaskApi.create(name, category).then((res) => {
+        context.dispatch('getTask')
+        return res
+      })
+    },
+    deleteTask(context, k) {
+      return TaskApi.deleteOne(k).then((res) => {
+        const idx = context.state.taskList.findIndex((v) => v.key === k)
+        const targetTask = context.state.taskList[idx]
+        if (targetTask && targetTask.category === 'trash') {
+          context.state.taskList.splice(idx, 1)
+        } else {
+          targetTask.category = 'trash'
+        }
+        return res
+      })
+    },
+    updateTask(context, payload) {
+      const { key, name, category } = payload
+      return TaskApi.updateBaseInfo(key, name, category).then((res) => {
+        context.dispatch('getTask')
+        return res
+      })
+    }
+  }
+}
+
+export default store

package/src/store/modules/user.ts

@@ -0,0 +1,57 @@
+import { Module } from 'vuex'
+import { UserApi } from '@/apis'
+
+interface State {
+  token: string
+  isSuperAdmin: boolean
+  isLogin: boolean
+  system: boolean
+}
+
+const store: Module<State, unknown> = {
+  namespaced: true,
+  state() {
+    return {
+      token: localStorage.getItem('token') as string,
+      isSuperAdmin: false,
+      isLogin: false,
+      system: localStorage.getItem('token') === 'true'
+    }
+  },
+  // 只能同步
+  mutations: {
+    setToken(state, payload) {
+      state.token = payload
+      if (payload) {
+        localStorage.setItem('token', payload)
+      } else {
+        localStorage.removeItem('token')
+      }
+    },
+    setSystem(state, payload) {
+      state.system = payload
+      if (payload) {
+        localStorage.setItem('system', payload)
+      } else {
+        localStorage.removeItem('system')
+      }
+    },
+    setSuperAdmin(state, payload) {
+      state.isSuperAdmin = payload
+    },
+    setLoginStatue(state, payload) {
+      state.isLogin = payload?.isLogin
+    }
+  },
+  actions: {
+    getLoginStatus(context) {
+      UserApi.checkLoginStatus().then((res) => {
+        context.commit('setLoginStatue', {
+          isLogin: res.data
+        })
+      })
+    }
+  }
+}
+
+export default store

package/src/utils/elementUI.ts

@@ -0,0 +1,8 @@
+import { App } from '@vue/runtime-core'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
+export default function mountElementUI(app: App<Element>) {
+  app.use(ElementPlus, { locale: zhCn })
+}