af-mobile-client-vue3 1.1.53 → 1.2.1

package/src/router/index.ts

@@ -1,12 +1,14 @@
-import type { RouteLocationNormalized } from 'vue-router'
+import type { EnhancedRouteLocation } from '@af-mobile-client-vue3/router/types'
 import routes from '@af-mobile-client-vue3/router/routes'
-import useRouteCache from '@af-mobile-client-vue3/stores/modules/routeCache'
-import useRouteTransitionNameStore from '@af-mobile-client-vue3/stores/modules/routeTransitionName'
+import useRouteCacheStore from '@af-mobile-client-vue3/stores/modules/routeCache'
 import setPageTitle from '@af-mobile-client-vue3/utils/set-page-title'
+import NProgress from 'nprogress'
 // https://router.vuejs.org/zh/
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import 'nprogress/nprogress.css'
 
+NProgress.configure({ showSpinner: true, parent: '#system-app' })
+
 const baseUrl = import.meta.env.VITE_APP_PUBLIC_PATH
 // 创建路由实例并传递 `routes` 配置
 const router = createRouter({
@@ -14,48 +16,20 @@ const router = createRouter({
   routes,
 })
 
-export interface toRouteType extends RouteLocationNormalized {
-  meta: {
-    title?: string
-    noCache?: boolean
-    index?: number
-  }
-}
+router.beforeEach((to: EnhancedRouteLocation) => {
+  NProgress.start()
 
-router.beforeEach((to: toRouteType, _from: toRouteType, next) => {
-  const toDepth = to.path.split('/').length
-  const fromDepth = _from.path.split('/').length
-  // 路由过渡动画
-  const routeTransitionNameStore = useRouteTransitionNameStore()
-  let name: string
-  if (toDepth > fromDepth || to.name === '404') {
-    console.warn('in')
-    // 进入动画
-    name = 'slide-fadein-left'
-  }
-  else if (toDepth < fromDepth) {
-    // 返回动画
-    name = 'slide-fadein-right'
-  }
-  else {
-    const toIndex = to.meta.index ? to.meta.index : 0
-    const fromIndex = _from.meta.index ? _from.meta.index : 0
-    if (toIndex > fromIndex)
-      name = 'slide-right'
-    else if (toIndex < fromIndex)
-      name = 'slide-left'
-    else
-      name = ''
-  }
-  routeTransitionNameStore.setName(name)
   // 路由缓存
-  useRouteCache().addRoute(to)
+  const routeCacheStore = useRouteCacheStore()
+  routeCacheStore.addRoute(to)
+
   // 页面 title
   setPageTitle(to.meta.title)
-  next()
 })
 
-router.afterEach(() => {})
+router.afterEach(() => {
+  NProgress.done()
+})
 
 // 导出路由实例，并在 `main.ts` 挂载
 export default router

package/src/router/routes.ts

@@ -2,8 +2,6 @@ import type { RouteRecordRaw } from 'vue-router'
 import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
 import XReport from '@af-mobile-client-vue3/components/data/XReportGrid/XReport.vue'
 import GridView from '@af-mobile-client-vue3/layout/GridView/index.vue'
-import PageLayout from '@af-mobile-client-vue3/layout/PageLayout.vue'
-import SingleLayout from '@af-mobile-client-vue3/layout/SingleLayout.vue'
 import NotFound from '@af-mobile-client-vue3/views/common/NotFound.vue'
 import EvaluateRecordView from '@af-mobile-client-vue3/views/component/EvaluateRecordView/index.vue'
 import IconifyView from '@af-mobile-client-vue3/views/component/IconifyView/index.vue'
@@ -21,12 +19,12 @@ import XReportGridView from '@af-mobile-client-vue3/views/component/XReportGridV
 import XRequestView from '@af-mobile-client-vue3/views/component/XRequestView/index.vue'
 import XSignatureView from '@af-mobile-client-vue3/views/component/XSignatureView/index.vue'
 import login from '@af-mobile-client-vue3/views/user/login/index.vue'
+import my from '@af-mobile-client-vue3/views/user/my/index.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'root',
-    component: PageLayout,
     redirect: { name: 'Component' },
     children: [
       {
@@ -51,7 +49,6 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/Component',
     name: 'Component',
-    component: SingleLayout,
     redirect: { name: 'ComponentView' },
     children: [
       {
@@ -153,6 +150,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'login',
     component: login,
   },
+  {
+    path: '/user/my',
+    name: 'userProfile',
+    component: my,
+  },
   {
     path: '/404',
     name: '404',

package/src/stores/index.ts

@@ -1,7 +1,11 @@
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
+import useRouteCacheStore from './modules/routeCache'
+import useUserStore from './modules/user'
+
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
 
+export { useRouteCacheStore, useUserStore }
 export default pinia

package/src/stores/modules/routeCache.ts

@@ -1,4 +1,4 @@
-import type { EnhancedRouteLocation } from '@af-mobile-client-vue3//router/types'
+import type { EnhancedRouteLocation } from '@af-mobile-client-vue3/router/types'
 import type { RouteRecordName } from 'vue-router'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'

package/src/stores/modules/user.ts

@@ -8,6 +8,7 @@ import {
   APP_PERMISSIONS_KEY,
   APP_ROLES_KEY,
   APP_ROUTES_KEY,
+  APP_WEB_CONFIG_KEY,
   CURRENT_USER,
 } from '@af-mobile-client-vue3/stores/mutation-type'
 import crypto from '@af-mobile-client-vue3/utils/crypto'
@@ -185,17 +186,17 @@ export const useUserStore = defineStore('app-user', () => {
     }
     setToken(undefined)
     setUserInfo(null)
-    // Storage.remove(ACCESS_TOKEN)
-    // Storage.remove(CURRENT_USER)
-    // Storage.remove(APP_LOGIN_KEY)
-    // Storage.remove(APP_PERMISSIONS_KEY)
-    // Storage.remove(APP_ROLES_KEY)
-    // Storage.remove(APP_ROUTES_KEY)
-    // 开始清空缓存
+    Storage.remove(CURRENT_USER)
+    Storage.remove(ACCESS_TOKEN)
+    Storage.remove(APP_LOGIN_KEY)
+    Storage.remove(APP_PERMISSIONS_KEY)
+    Storage.remove(APP_ROLES_KEY)
+    Storage.remove(APP_ROUTES_KEY)
+    Storage.remove(APP_WEB_CONFIG_KEY)
+    Storage.remove('LoginTicket')
+    await indexedDB.clearDB()
+    await useSettingStore().init()
     try {
-      Storage.clear()
-      await indexedDB.clearDB()
-      await useSettingStore().init()
       // 添加页面刷新
       await router.replace('/login')
       window.location.reload()

package/src/styles/app.less

@@ -1,72 +1,31 @@
-:root {
-  --base-interval-0: 7px;
-  --base-interval-1: 14px;
-  --base-interval-2: 28px;
-}
-
-:root:root {
-  // 覆盖 primary 颜色
-  --van-blue: #2563EB;
-}
-
-#system-app {
-  min-height: 100vh;
-  position: relative;
-  overflow-x: hidden;
-}
-
-html {
-  background: var(--van-gray-1);
-  color-scheme: light;
-}
-
 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }
 
-.slide-fadein-left-enter-active,
-.slide-fadein-left-leave-active,
-.slide-fadein-right-enter-active,
-.slide-fadein-right-leave-active {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s;
-}
-
-.slide-fadein-left-enter-from,
-.slide-fadein-right-leave-to {
-  transform: translateX(20px);
-  opacity: 0;
+html {
+  background: var(--van-gray-1);
+  font-size: var(--van-font-size-lg);
+  color-scheme: light;
 }
 
-.slide-fadein-left-leave-to,
-.slide-fadein-right-enter-from {
-  transform: translateX(-20px);
-  opacity: 0;
+html.dark {
+  background: #222;
+  color-scheme: dark;
 }
 
-.slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
-  will-change: transform;
-  transition: transform .3s;
+#system-app {
   height: 100%;
-  width: 100%;
-  top: 0;
-  position: absolute;
-  backface-visibility: hidden;
+  position: relative;
 }
 
-.slide-right-enter-from,
-.slide-left-leave-to {
-  transform: translateX(100%);
+::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
 }
 
-.slide-right-leave-to,
-.slide-left-enter-from {
-  transform: translateX(-100%);
-}
+// 解决Tabbar的固定定位被覆盖的问题
+.van-tabbar--fixed {
+  position: fixed !important;
+}

package/src/styles/login.less

@@ -1,3 +1,25 @@
+html:not(.dark) {
+  .form {
+    .form_field {
+      :deep(.van-field__label) {
+        color: rgb(88, 88, 88);
+      }
+      :deep(.van-field__body) {
+        background: rgb(251, 251, 251);
+        box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.1);
+        color: rgb(71, 71, 71);
+      }
+      :deep(.van-cell) {
+        background: #ffffff;
+      }
+    }
+    .extra_setting {
+      .extra_setting_for_remember_password {
+        color: rgb(88, 88, 88);
+      }
+    }
+  }
+}
 .form {
   width: 100%;
   padding: 0 40px;
@@ -6,7 +28,6 @@
     padding-left: 0;
     :deep(.van-field__label) {
       opacity: 0.7;
-      color: rgb(88, 88, 88);
       font-size: 16px;
       font-weight: 400;
       line-height: 23px;
@@ -16,9 +37,6 @@
     :deep(.van-field__body) {
       height: 40px;
       border-radius: 5px;
-      background: rgb(251, 251, 251);
-      box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.1);
-      color: rgb(71, 71, 71);
       font-size: 16px;
       font-weight: 400;
       padding: 8px 10px;
@@ -31,7 +49,6 @@
     line-height: 12px;
     .extra_setting_for_remember_password {
       opacity: 0.7;
-      color: rgb(88, 88, 88);
       span {
         position: relative;
         bottom: 3px;
@@ -66,9 +83,6 @@
       color: rgb(56, 149, 250);
     }
   }
-  :deep(.van-cell) {
-    background: #ffffff;
-  }
   :deep(.van-cell:after) {
     border-bottom: none;
   }

package/src/styles/var.less

@@ -0,0 +1,16 @@
+/**
+  注意：为什么要写两个重复的 :root？
+  由于 vant 中的主题变量也是在 :root 下声明的，所以在有些情况下会由于优先级的问题无法成功覆盖。
+  通过 :root:root 可以显式地让你所写内容的优先级更高一些，从而确保主题变量的成功覆盖。
+**/
+
+:root:root {
+  // van-cell-group
+  --van-cell-group-inset-padding: 0;
+  // 覆盖 primary 颜色
+  --van-blue: #2563eb;
+  // 自定义变量
+  --base-interval-0: 7px;
+  --base-interval-1: 14px;
+  --base-interval-2: 28px;
+}

package/src/{vue-router.d.ts → types/vue-router.d.ts}

@@ -4,6 +4,8 @@ declare module 'vue-router' {
     title?: string
     /** i18n key */
     i18n?: string
+    /** keepalive */
+    keepAlive?: boolean
   }
 }
 export {}

package/src/utils/i18n.ts

@@ -1,41 +1,72 @@
-// // import { createI18n } from 'vue-i18n'
-// import enUS from 'vant/es/locale/lang/en-US'
-// import zhCN from 'vant/es/locale/lang/zh-CN'
-//
-// /**
-//  * All i18n resources specified in the plugin `include` option can be loaded
-//  * at once using the import syntax
-//  */
-// // import messages from '@intlify/unplugin-vue-i18n/messages'
-// import { Locale, type PickerColumn } from 'vant'
-//
-// // export const i18n = createI18n({
-// //   locale: localStorage.getItem('language') || navigator.language,
-// //   fallbackLocale: 'zhCN',
-// //   messages,
-// // })
-//
-// /** 多语言 picker columns */
-// export const languageColumns: PickerColumn = [
-//   { text: '简体中文', value: 'zh-CN' },
-//   { text: 'English', value: 'en-US' },
-// ]
-//
-// /** 当前语言 */
-// export const locale = computed({
-//   get() {
-//     return (i18n.global.locale as unknown as Ref<string>).value
-//   },
-//   set(language: string) {
-//     localStorage.setItem('language', language);
-//     (i18n.global.locale as unknown as Ref<string>).value = language
-//     Locale.use(language)
-//   },
-// })
-//
-// // 载入 vant 语言包
-// Locale.use('zh-CN', zhCN)
-// Locale.use('en-US', enUS)
-//
-// // 根据当前语言切换 vant 语言包
-// Locale.use(locale.value)
+import type { PickerColumn } from 'vant'
+import { Locale } from 'vant'
+import enUS from 'vant/es/locale/lang/en-US'
+import zhCN from 'vant/es/locale/lang/zh-CN'
+import { computed } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+const FALLBACK_LOCALE = 'zh-CN'
+
+const vantLocales = {
+  'zh-CN': zhCN,
+  'en-US': enUS,
+}
+
+export const languageColumns: PickerColumn = [
+  { text: '简体中文', value: 'zh-CN' },
+  { text: 'English', value: 'en-US' },
+]
+
+export const i18n = setupI18n()
+type I18n = typeof i18n
+
+export const locale = computed({
+  get() {
+    return i18n.global.locale.value
+  },
+  set(language: string) {
+    setLang(language, i18n)
+  },
+})
+
+function setupI18n() {
+  const locale = getI18nLocale()
+  const i18n = createI18n({
+    locale,
+    legacy: false,
+  })
+  setLang(locale, i18n)
+  return i18n
+}
+
+async function setLang(lang: string, i18n: I18n) {
+  await loadLocaleMsg(lang, i18n)
+
+  document.querySelector('html').setAttribute('lang', lang)
+  localStorage.setItem('language', lang)
+  i18n.global.locale.value = lang
+
+  // 设置 vant 组件语言包
+  Locale.use(lang, vantLocales[lang])
+}
+
+// 加载本地语言包
+async function loadLocaleMsg(locale: string, i18n: I18n) {
+  const messages = await import(`../locales/${locale}.json`)
+  i18n.global.setLocaleMessage(locale, messages.default)
+}
+
+// 获取当前语言对应的语言包名称
+function getI18nLocale() {
+  const storedLocale = localStorage.getItem('language') || navigator.language
+
+  const langs = languageColumns.map(v => v.value as string)
+
+  // 存在当前语言的语言包 或 存在当前语言的任意地区的语言包
+  const foundLocale = langs.find(v => v === storedLocale || v.indexOf(storedLocale) === 0)
+
+  // 若未找到，则使用 默认语言包
+  const locale = foundLocale || FALLBACK_LOCALE
+
+  return locale
+}

package/src/utils/inline-px-to-vw.ts

@@ -0,0 +1,28 @@
+/**
+ * 支持行内样式 px 转 vw
+ * 本文件代码来自于 scale-view 开源项目
+ * 源代码链接：https://github.com/wswmsword/scale-view
+ * 非常感谢作者 @wswmsword 的支持
+ */
+
+import { round } from 'lodash-es'
+
+// 理想宽度，设计稿的宽度
+const idealWidth = 375
+
+// 表示伸缩视图的最大宽度
+const maxWidth = 800
+
+/**
+ * 限制大小的 vw 转换
+ * @param {number} n
+ */
+export default function vw(n: number) {
+  if (n === 0)
+    return n
+
+  const vwN = round(n * 100 / idealWidth, 3)
+  const maxN = round(n * maxWidth / idealWidth, 3)
+  const cssF = n > 0 ? 'min' : 'max'
+  return `${cssF}(${vwN}vw, ${maxN}px)`
+}

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

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

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

@@ -1,24 +1,107 @@
 <script setup lang="ts">
 import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
-import { ref } from 'vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { defineEmits, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-// 巡检计划
-defineOptions({
-  name: 'PatrolPlan',
-})
-
+// 定义事件
+const emit = defineEmits(['deleteRow'])
+// 访问路由
 const router = useRouter()
-const configName = ref('crud_patroltask_managePhoneCRUD')
-const xCellListRefPatrolPlan = ref()
+// 获取默认值
+const idKey = ref('o_id')
+
+// 简易crud表单测试
+const configName = ref('lngChargeAuditMobileCRUD')
+const serviceName = ref('af-gaslink')
+
+// 资源权限测试
+// const configName = ref('crud_sources_test')
+// const serviceName = ref('af-system')
+
+// 实际业务测试
+// const configName = ref('lngChargeAuditMobileCRUD')
+// const serviceName = ref('af-gaslink')
+
+// 跳转到详情页面
+// function toDetail(item) {
+//   router.push({
+//     name: 'XCellDetailView',
+//     params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
+//     query: {
+//       operName: item[operNameKey.value],
+//       method:item[methodKey.value],
+//       requestMethod:item[requestMethodKey.value],
+//       operatorType:item[operatorTypeKey.value],
+//       operUrl:item[operUrlKey.value],
+//       operIp:item[operIpKey.value],
+//       costTime:item[costTimeKey.value],
+//       operTime:item[operTimeKey.value],
+//
+//       title: item[titleKey.value],
+//       businessType: item[businessTypeKey.value],
+//       status:item[statusKey.value]
+//     }
+//   })
+// }
+
+// 跳转到表单——以表单组来渲染纯表单
+function toDetail(item) {
+  router.push({
+    name: 'XFormGroupView',
+    query: {
+      id: item[idKey.value],
+      // id: item.rr_id,
+      // o_id: item.o_id,
+    },
+  })
+}
+
+// 新增功能
+// function addOption(totalCount) {
+//   router.push({
+//     name: 'XFormView',
+//     params: { id: totalCount, openid: totalCount },
+//     query: {
+//       configName: configName.value,
+//       serviceName: serviceName.value,
+//       mode: '新增',
+//     },
+//   })
+// }
+
+// 修改功能
+// function updateRow(result) {
+//   router.push({
+//     name: 'XFormView',
+//     params: { id: result.o_id, openid: result.o_id },
+//     query: {
+//       configName: configName.value,
+//       serviceName: serviceName.value,
+//       mode: '修改',
+//     },
+//   })
+// }
+
+// 删除功能
+function deleteRow(result) {
+  emit('deleteRow', result.o_id)
+}
 </script>
 
 <template>
-  <XCellList
-    ref="xCellListRefPatrolPlan"
-    service-name="af-linepatrol"
-    :config-name="configName"
-  />
+  <NormalDataLayout id="XCellListView" title="工作计划">
+    <template #layout_content>
+      <XCellList
+        :config-name="configName"
+        :service-name="serviceName"
+        :fix-query-form="{ o_f_oper_name: 'edu_test' }"
+        :id-key="idKey"
+        @to-detail="toDetail"
+        @delete-row="deleteRow"
+      />
+    </template>
+  </NormalDataLayout>
 </template>
 
 <style scoped lang="less">

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

@@ -6,8 +6,15 @@ import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 // 纯表单
-const configName = ref('AddConstructionForm')
-const serviceName = ref('af-linepatrol')
+const configName = ref('form_check_test')
+const serviceName = ref('af-system')
+
+// const configName = ref("计划下发Form")
+// const serviceName = ref("af-linepatrol")
+
+// 表单组
+// const configName = ref('lngChargeAuditMobileFormGroup')
+// const serviceName = ref('af-gaslink')
 
 const formData = ref({})
 const formGroup = ref(null)
@@ -18,6 +25,36 @@ function submit(_result) {
     history.back()
   })
 }
+
+// 表单组——数据
+// function initComponents () {
+//   runLogic('getlngChargeAuditMobileFormGroupData', {id: 29}, 'af-gaslink').then((res) => {
+//     formData.value = {...res}
+//   })
+// }
+
+// 纯表单——数据
+// function initComponents() {
+//   formData.value = { plan_name: 'af-llllll', plan_point: '1号点位', plan_single: '1号点位', plan_range: '2024-12-12' }
+// }
+
+// function initComponents() {
+//   runLogic('getlngChargeAuditMobileFormGroupData', { id: route.query?.id, o_id: route.query?.o_id }, 'af-gaslink').then((res) => {
+//     console.log('res------', res)
+//     formData.value = { ...res }
+// formGroup.value.init({
+//   configName: configName.value,
+//   serviceName: serviceName.value,
+//   groupFormData: { ...res },
+//   mode: "新增"
+// })
+//     isInit.value = true
+//   })
+// }
+
+// onBeforeMount(() => {
+//   initComponents()
+// })
 </script>
 
 <template>