af-mobile-client-vue3 1.0.54

package/src/utils/routerUtil.ts

@@ -0,0 +1,271 @@
+import type { RouteRecordRaw } from 'vue-router'
+import useUserStore from '@af-mobile-client-vue3/stores/modules/user.js'
+import routes from '@af-mobile-client-vue3/router/routes'
+import router from '@af-mobile-client-vue3/router'
+
+/**
+ * 根据 路由配置 和 路由组件注册 解析路由
+ * @param routesConfig 路由配置
+ * @param routerMap 本地路由组件注册配置
+ */
+function parseRoutes(routesConfig, routerMap) {
+  const routes = []
+  routesConfig.forEach((item) => {
+    // 获取注册在 routerMap 中的 router，初始化 routeCfg
+    let router: any
+    let routeCfg: any
+    if (typeof item === 'string') {
+      router = routerMap[item]
+      routeCfg = { path: (router && router.path) || item, router: item }
+    }
+    else if (typeof item === 'object') {
+      // 当没有设置路由对象名或者设置的是blank路由对象时, 给空界面, path为名称
+      if (!item.router || item.router === 'blank') {
+        router = routerMap.blank
+        item.path = encodeURI(item.name)
+      }
+      else {
+        router = routerMap[item.router]
+      }
+      // 查看是否是单页面
+      if (item.meta && item.meta.singlePage) {
+        router = routerMap.singlePage
+        item.path = encodeURI(item.name)
+      }
+      // 当没在动态路由对象中找到时, 不添加到路由
+      // if (!router) return
+      routeCfg = item
+    }
+    if (!router) {
+      console.warn(`can't find register for router ${routeCfg.router}, please register it in advance.`)
+      router = typeof item === 'string' ? { path: item, name: item } : item
+    }
+    // 从 router 和 routeCfg 解析路由
+    const meta = {
+      authority: router.authority,
+      icon: router.icon,
+      page: router.page,
+      link: router.link,
+      params: router.params,
+      query: router.query,
+      ...router.meta,
+    }
+    const cfgMeta = {
+      authority: routeCfg.authority,
+      icon: routeCfg.icon,
+      page: routeCfg.page,
+      link: routeCfg.link,
+      params: routeCfg.params,
+      query: routeCfg.query,
+      ...routeCfg.meta,
+    }
+    Object.keys(cfgMeta).forEach((key) => {
+      if (cfgMeta[key] === undefined || cfgMeta[key] === null || cfgMeta[key] === '')
+        delete cfgMeta[key]
+    })
+    Object.assign(meta, cfgMeta)
+    const route = {
+      path: routeCfg.path || router.path || routeCfg.router,
+      name: routeCfg.name || router.name,
+      component: router.component || router,
+      redirect: routeCfg.redirect || router.redirect,
+      meta: { ...meta, authority: meta.authority || '*' },
+      beforeEnter: undefined,
+      children: undefined,
+    }
+    if (router.beforeEnter)
+      route.beforeEnter = router.beforeEnter
+
+    if (routeCfg.invisible || router.invisible)
+      route.meta.invisible = true
+
+    if (routeCfg.children && routeCfg.children.length > 0)
+      route.children = parseRoutes(routeCfg.children, routerMap)
+
+    // 当没有子并且自己时blank(空界面)时, 不添加到路由
+    if (route.component.name === 'blank' && route.children && route.children.length <= 0)
+      return
+    routes.push(route)
+  })
+  return routes
+}
+
+/**
+ * 加载路由
+ * @param routesConfig {[{router: string, children: [{router: string, children: string[]}, {router: string, children: string[]}, {router: string, authority: string, name: string, icon: string}, {path: string, router: string, name: string, icon: string, link: string}, {path: string, router: string, name: string, icon: string, link: string}]}]} 路由配置
+ */
+function loadRoutes(routesConfig?: any) {
+  // 如果 routesConfig 有值，则更新到本地，否则从本地获取
+  if (routesConfig)
+    useUserStore().setRoutesConfig(routesConfig)
+  else
+    routesConfig = useUserStore().getRoutesConfig()
+
+  if (routesConfig && routesConfig.length > 0) {
+    const newRoutes = parseRoutes(routesConfig, routes)
+    // 设置路由首页
+    newRoutes[0].redirect = '/'
+    const finalRoutes = mergeRoutes(routes, newRoutes)
+    formatRoutes(finalRoutes)
+    finalRoutes.forEach((row) => {
+      router.addRoute(row)
+    })
+  }
+}
+
+/**
+ * 合并路由
+ * @param target
+ * @param source
+ */
+function mergeRoutes(target: Array<RouteRecordRaw>, source: Array<RouteRecordRaw>) {
+  const routesMap: RouteRecordRaw = {} as RouteRecordRaw
+
+  target.forEach(item => routesMap[item.path] = item)
+
+  source.forEach(item => routesMap[item.path] = item)
+  return Object.values(routesMap)
+}
+
+/**
+ * 格式化路由
+ * @param routes 路由配置
+ */
+function formatRoutes(routes) {
+  routes.forEach((route) => {
+    const { path } = route
+    if (!path.startsWith('/') && path !== '*')
+      route.path = `/${path}`
+  })
+  formatAuthority(routes)
+}
+
+/**
+ * 格式化路由的权限配置
+ * @param routes 路由
+ * @param pAuthorities 父级路由权限配置集合
+ */
+function formatAuthority(routes, pAuthorities = []) {
+  routes.forEach((route) => {
+    const meta = route.meta
+    const defaultAuthority = pAuthorities[pAuthorities.length - 1] || { permission: '*' }
+    if (meta) {
+      let authority: any = {}
+      if (!meta.authority) {
+        authority = defaultAuthority
+      }
+      else if (typeof meta.authority === 'string' || Array.isArray(meta.authority)) {
+        authority.permission = meta.authority
+      }
+      else if (typeof meta.authority === 'object') {
+        authority = meta.authority
+        const { role } = authority
+        if (typeof role === 'string')
+          authority.role = [role]
+
+        if (!authority.permission && !authority.role)
+          authority = defaultAuthority
+      }
+      meta.authority = authority
+    }
+    else {
+      const authority = defaultAuthority
+      route.meta = { authority }
+    }
+    route.meta.pAuthorities = pAuthorities
+    if (route.children)
+      formatAuthority(route.children, [...pAuthorities, route.meta.authority])
+  })
+}
+
+/**
+ * 加载导航守卫
+ * @param guards
+ */
+function loadGuards(guards, _router) {
+  const { beforeEach, afterEach } = guards
+  beforeEach.forEach((guard) => {
+    if (guard && typeof guard === 'function')
+      _router.beforeEach((to, from, next) => guard(to, from, next))
+  })
+  afterEach.forEach((guard) => {
+    if (guard && typeof guard === 'function')
+      _router.afterEach((to, from) => guard(to, from))
+  })
+}
+
+/**
+ * 资源服务路由转新路由
+ * @param func
+ */
+function funcToRouter(func) {
+  return [{
+    router: 'root',
+    children: positionRouter(parsefunc(func)),
+  }]
+}
+
+function parsefunc(func) {
+  const tree = []
+  for (const row of func) {
+    const route = {
+      router: row.link,
+      meta: {
+        singlePage: row.navigate,
+      },
+      position: row.position - 1,
+      icon: row.icon,
+      name: row.name,
+      params: undefined,
+      children: undefined,
+    }
+    if (row.link.includes('$')) {
+      route.router = row.link.split('$')[1]
+      route.params = row.link.split('$')[0]
+    }
+    if (row.children && row.children.length > 0)
+      route.children = parsefunc(row.children)
+
+    tree.push(route)
+  }
+  // 如果是 microapp 作为子应用路由应该是平铺的 树状结构由父项目处理
+  if (window.__MICRO_APP_ENVIRONMENT__)
+    return flattenTree(tree)
+
+  return tree
+}
+
+function flattenTree(tree) {
+  let flat = []
+  for (const node of tree) {
+    const { children, ...rest } = node
+    flat.push(rest)
+    if (children && children.length > 0)
+      flat = flat.concat(flattenTree(children))
+  }
+  return flat
+}
+
+/**
+ * 资源服务路由排序
+ */
+function positionRouter(r) {
+  let router = r.sort((a, b) => a.position - b.position)
+  router = arrRemoveEmpty(router)
+  return router
+}
+
+/**
+ * 数组去空值
+ */
+function arrRemoveEmpty(arr) {
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i] === '' || typeof (arr[i]) == 'undefined') {
+      arr.splice(i, 1)
+      i--
+    }
+  }
+  return arr
+}
+
+export { parseRoutes, loadRoutes, formatAuthority, loadGuards, formatRoutes, funcToRouter }

package/src/utils/set-page-title.ts

@@ -0,0 +1,7 @@
+import { pageDefaultTitle } from '@af-mobile-client-vue3/settings'
+
+export default function setPageTitle(routerTitle?: any): void {
+  window.document.title = routerTitle
+    ? `${routerTitle} | ${pageDefaultTitle}`
+    : `${pageDefaultTitle}`
+}

package/src/utils/validate.ts

@@ -0,0 +1,6 @@
+/**
+ * @param {string} path
+ */
+export function isExternal(path: string) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}

package/src/views/chat/index.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Button as VanButton,
+  Col as VanCol,
+  Divider as VanDivider,
+  List as VanList,
+  Row as VanRow,
+  SwipeCell as VanSwipeCell,
+  Tab as VanTab,
+  Tabs as VanTabs,
+} from 'vant/es'
+
+const active = ref(0)
+const list = ref([])
+const loading = ref(false)
+const finished = ref(false)
+
+function onLoad() {
+  // 异步更新数据
+  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  setTimeout(() => {
+    for (let i = 0; i < 10; i++)
+      list.value.push(list.value.length + 1)
+
+    // 加载状态结束
+    loading.value = false
+
+    // 数据全部加载完成
+    if (list.value.length >= 20)
+      finished.value = true
+  }, 500)
+}
+</script>
+
+<template>
+  <main class="chat_main h-full w-full">
+    <div class="header">
+      <VanRow class="header_row" justify="space-between">
+        <VanCol class="header_title_col">
+          <p>消息</p>
+        </VanCol>
+        <VanCol>
+          <van-icon class="header_search_icon" name="search" />
+        </VanCol>
+      </VanRow>
+    </div>
+    <div class="content">
+      <VanTabs v-model:active="active">
+        <VanDivider />
+        <VanTab title="消息">
+          <VanList
+            v-model:loading="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+          >
+            <VanSwipeCell v-for="item in list" :key="item" :title="item">
+              <div class="message_card">
+                <VanRow :gutter="12" class="message_row">
+                  <VanCol>
+                    <img alt="header_img" class="header_img" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg">
+                  </VanCol>
+                  <VanCol class="message_card_col">
+                    <div class="message_card_main">
+                      <VanRow justify="space-between">
+                        <VanCol>
+                          <p class="message_sender_name">
+                            测试人
+                          </p>
+                        </VanCol>
+                        <VanCol>
+                          <span class="message_sender_time">18分钟前</span>
+                        </VanCol>
+                      </VanRow>
+                      <p class="message_content">
+                        <span>轻舟已过万重山</span>
+                      </p>
+                    </div>
+                    <VanDivider class="content_divider" />
+                  </VanCol>
+                </VanRow>
+              </div>
+              <template #right>
+                <VanButton square text="删除" type="danger" class="delete-button" />
+              </template>
+            </VanSwipeCell>
+          </VanList>
+        </VanTab>
+        <VanTab title="同事">
+          内容 1
+        </VanTab>
+        <VanTab title="部门">
+          内容 1
+        </VanTab>
+      </VanTabs>
+    </div>
+  </main>
+</template>
+
+<style scoped lang="less">
+.chat_main {
+  padding: var(--base-interval-1);
+  .header {
+    p {
+      margin: 0;
+      font-size: 24px;
+      font-weight: bold;
+    }
+    .header_row {
+      align-items: center;
+      .header_title_col {
+        flex-grow: 1;
+      }
+      .header_search_icon {
+        font-size: 26px;
+      }
+    }
+  }
+  .content {
+    .message_card {
+      .message_row {
+        .header_img {
+          width: 40px;
+          height: 40px;
+          border-radius: 5px;
+          vertical-align: middle;
+        }
+        .message_card_col {
+          flex-grow: 1;
+          .message_sender_name {
+            margin: 0 0 3px;
+            font-size: 16px;
+            font-weight: bold;
+          }
+          .message_sender_time {
+            font-size: 12px;
+            color: #999;
+          }
+          .message_content {
+            margin: 0;
+            font-size: 12px;
+            color: #666;
+          }
+        }
+      }
+      .content_divider {
+        margin: 12px 0;
+      }
+    }
+  }
+}
+</style>

package/src/views/common/LoadError.vue

@@ -0,0 +1,64 @@
+<script setup>
+import SvgIcon from '@af-mobile-client-vue3/components/core/SvgIcon/index.vue'
+</script>
+
+<template>
+  <div class="load_error_main">
+    <div class="container">
+      <SvgIcon name="loadError" class="loadError" />
+    </div>
+    <div class="text">
+      似乎出了点问题，下拉再试试
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.load_error_main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--van-background-2);
+  border-radius: var(--van-radius-lg);
+  padding-top: 20vh;
+  padding-bottom: 30vh;
+}
+
+.container {
+  width: 100px;
+  height: 100px;
+  animation: fadeIn 0.8s ease-in-out;
+  .loadError {
+    width: 100px;
+    height: 100px;
+    vertical-align: middle;
+  }
+}
+
+.text {
+  margin-top: 25px;
+  font-size: 14px;
+  color: #333;
+  animation: fadeIn 1.2s ease-in-out;
+}
+</style>

package/src/views/common/NotFound.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { Button as VanButton } from 'vant'
+import SvgIcon from '@af-mobile-client-vue3/components/core/SvgIcon/index.vue'
+</script>
+
+<template>
+  <div class="not_found_main">
+    <div class="container">
+      <SvgIcon name="notFound" class="notFound" />
+    </div>
+    <div class="text">
+      本来无一物，何处惹尘埃
+    </div>
+    <div class="button_group">
+      <VanButton type="primary" size="small" @click="$router.replace('/home')">
+        返回首页
+      </VanButton>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.not_found_main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+  padding-top: 30vh;
+}
+
+.container {
+  width: 128px;
+  height: 128px;
+  animation: fadeInUp 0.8s ease-in-out;
+  .notFound {
+    width: 128px;
+    height: 128px;
+    vertical-align: middle;
+  }
+}
+
+.text {
+  margin-bottom: 20px;
+  font-size: 14px;
+  color: #333;
+  animation: fadeIn 1.2s ease-in-out;
+}
+</style>

package/src/views/component/EvaluateRecordView/index.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Icon as VanIcon,
+} from 'vant'
+
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+
+const configName = ref('get_evaluate_by_id')
+</script>
+
+<template>
+  <NormalDataLayout title="评价纪录">
+    <template #layout_header_row_right_col>
+      <VanIcon class="header_row_icon" name="filter-o" />
+    </template>
+    <template #layout_content>
+      <XCellList :config-name="configName" id-key="t_id" service-name="af-revenue" />
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped lang="less">
+.header_row_icon {
+  font-size: 18px;
+}
+//.van-tabs {
+//  display: flex;
+//  flex-flow: column;
+//  height: 100%;
+//}
+//:deep(.van-tabs__content) {
+//  flex: 1;
+//}
+//:deep(.van-tab__panel) {
+//  height: 100%;
+//  max-height: 100vh;
+//}
+</style>