af-mobile-client-vue3 1.2.27 → 1.2.29

package/CLAUDE.md

@@ -0,0 +1,184 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a Vue 3 mobile client application (`af-mobile-client-vue3`) built as a smart gas system (智慧燃气) mobile application. It serves as a micro-frontend main application with comprehensive business components and dynamic form capabilities.
+
+## Development Commands
+
+```bash
+# Install dependencies
+pnpm install
+
+# Development server (with mock server on port 8086)
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Build for development environment
+pnpm build:dev
+
+# Lint and type checking
+pnpm lint
+
+# Auto-fix linting issues
+pnpm lint:fix
+
+# Type checking only
+pnpm typecheck
+
+# Version release
+pnpm release
+```
+
+## Technology Stack
+
+- **Vue 3** with Composition API and `<script setup>` syntax
+- **TypeScript** for type safety
+- **Vite** as build tool (port 7190)
+- **Vant 4** as primary UI component library
+- **Pinia** for state management with persistence
+- **pnpm** as package manager (requires Node.js >=20.19.0)
+- **UnoCSS** for atomic CSS utilities
+- **@micro-zoe/micro-app** for micro-frontend architecture
+
+## Code Style & Standards
+
+From `.cursorrules`:
+
+- Use Composition API and `<script setup>` syntax
+- Component names: PascalCase (e.g., `UserProfile`)
+- Variables: camelCase (e.g., `userName`)
+- Boolean variables: use `is/has/should` prefix (e.g., `isLoading`)
+- Event handlers: use `handle` prefix (e.g., `handleSubmit`)
+- CSS classes: kebab-case (e.g., `user-profile`)
+- **Must explicitly import Vant components** - auto-import is disabled for this component library project
+- Use `interface` for type definitions, `type` for unions/intersections
+- Props must specify types
+
+## Architecture
+
+### Directory Structure
+
+```
+src/
+├── components/
+│   ├── core/           # Core UI components (NavBar, Tabbar, Uploader)
+│   ├── data/           # Business data components
+│   │   ├── XReportForm/     # Dynamic form with JSON configuration
+│   │   ├── XReportGrid/     # Data grid with reporting
+│   │   ├── XForm/           # General form components
+│   │   └── XOlMap/          # OpenLayers map integration
+│   └── layout/         # Layout components
+├── stores/             # Pinia state management
+├── utils/              # Utility functions
+├── views/              # Page components
+├── router/             # Vue Router configuration
+└── api/               # API layer
+```
+
+### Key Business Components
+
+**XReportForm Component** (`src/components/data/XReportForm/index.vue`):
+
+- Dynamic form generation from JSON configuration
+- Supports field types: `input`, `datePicker`, `timePicker`, `dateTimeSecondsPicker`, `curDateInput`, `signature`, `images`, `inputs`, `inputColumns`
+- Built-in validation with custom error messages
+- Slot-based extensibility for complex layouts
+- Integration with file upload and signature capture
+
+**XReportGrid Component**:
+
+- Data grid with reporting capabilities
+- Print functionality integration
+- Design mode for form configuration
+
+**XOlMap Component**:
+
+- OpenLayers integration for GIS functionality
+- Location picker with coordinate transformation
+
+### State Management
+
+- **Pinia stores** with persistence via `pinia-plugin-persistedstate`
+- **User store**: Authentication, permissions, user data
+- **Settings store**: Application configuration
+- **Route cache store**: Performance optimization
+
+### API Layer
+
+- **Axios-based HTTP client** with interceptors
+- **Request/Response transformers** for v3/v4 API compatibility
+- **Automatic token management** and error handling
+- **Mock server integration** for development
+
+## Development Workflow
+
+### Server Configuration
+
+- Development server runs on port 7190
+- Mock server runs on port 8086
+- Multiple API proxy endpoints configured in `vite.config.ts`
+
+### Build Process
+
+- Code splitting: `third` (node_modules), `views` (business pages)
+- Assets organized in `static/` directory with hashing
+- CSS code splitting disabled for mobile optimization
+- Legacy browser support via `@vitejs/plugin-legacy`
+
+### Git Hooks
+
+- Pre-commit: `pnpm lint-staged` (ESLint auto-fix)
+- Commit message: `pnpm commitlint` (conventional commits)
+
+## Micro-Frontend Integration
+
+This is a main application for micro-frontend architecture:
+
+- Uses `@micro-zoe/micro-app` for micro-app management
+- Child apps register in `microApps.ts`
+- Supports dynamic loading and routing
+- Unmount function available at `window.unmount`
+
+## Mobile-Specific Features
+
+- **@vant/touch-emulator** for desktop development
+- **postcss-mobile-forever** for viewport handling
+- **vite-plugin-pwa** for PWA capabilities
+- **VConsole** for mobile debugging
+- Dark mode support throughout the application
+
+## Common Patterns
+
+### Adding New Field Types to XReportForm
+
+1. Add type to `generateDefaultRequiredMessage()` function
+2. Add case in `formatConfigToForm()` switch statement
+3. Add template section in the component template
+4. Follow existing patterns for validation and data binding
+
+### Component Development
+
+- Use `<script setup lang="ts">` syntax
+- Explicitly import Vant components
+- Define props with TypeScript interfaces
+- Use `defineEmits` for events
+- Follow existing component structure patterns
+
+### API Integration
+
+- Use the existing HTTP client in `src/utils/http/`
+- Follow v3/v4 API patterns established in the codebase
+- Handle errors consistently with existing patterns
+
+## Testing & Quality
+
+- **ESLint** with `@antfu/eslint-config`
+- **TypeScript** strict mode
+- **Vue TSC** for type checking
+- **Commitlint** for commit message standards
+- **Lint-staged** for pre-commit hooks

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.2.27",
+  "version": "1.2.29",
   "packageManager": "pnpm@10.12.3",
   "description": "Vue + Vite component lib",
   "engines": {

package/src/components/core/ImageUploader/index.vue

@@ -1,159 +1,159 @@
-<script setup lang="ts">
-import { deleteFile } from '@af-mobile-client-vue3/services/api/common'
-import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
-import {
-  Button as vanButton,
-  Uploader as vanUploader,
-} from 'vant'
-import { ref, watch } from 'vue'
-
-const props = defineProps({
-  imageList: Array<any>,
-  outerIndex: { default: undefined },
-  authority: { default: 'user' },
-  uploadMode: { default: 'server' },
-  attr: { type: Object as () => { addOrEdit?: string }, default: () => ({}) },
-})
-const emit = defineEmits(['updateFileList'])
-
-const imageList = ref<Array<any>>(props.imageList ?? [])
-
-// 同步 props.imageList 到内部 imageList，保证每次变化都响应
-watch(() => props.imageList, (newVal) => {
-  imageList.value = Array.isArray(newVal) ? [...newVal] : []
-}, { immediate: true })
-
-// 触发拍照
-function triggerCamera() {
-  mobileUtil.execute({
-    funcName: 'takePicture',
-    param: {},
-    callbackFunc: (result: any) => {
-      if (result.status === 'success') {
-        handlePhotoUpload(result.data)
-      }
-    },
-  })
-}
-
-// 处理拍照后的上传
-function getImageMimeType(fileName: string): string {
-  const ext = fileName.split('.').pop()?.toLowerCase()
-  if (ext === 'jpg' || ext === 'jpeg')
-    return 'image/jpeg'
-  if (ext === 'png')
-    return 'image/png'
-  if (ext === 'gif')
-    return 'image/gif'
-  return 'image/png' // 默认
-}
-
-function handlePhotoUpload(photoData: any) {
-  // 添加临时预览
-  const mimeType = getImageMimeType(photoData.filePath)
-  const tempFile = {
-    uid: Date.now() + Math.random().toString(36).substr(2, 5),
-    name: photoData.filePath.split('/').pop(),
-    status: 'uploading',
-    message: '上传中...',
-    url: `data:${mimeType};base64,${photoData.content}`,
-  }
-
-  if (!imageList.value) {
-    imageList.value = [tempFile]
-  }
-  else {
-    imageList.value.push(tempFile)
-  }
-
-  const param = {
-    resUploadMode: props.uploadMode,
-    pathKey: 'Default',
-    formType: 'image',
-    useType: 'Default',
-    resUploadStock: '1',
-    filename: photoData.name,
-    filesize: photoData.size,
-    f_operator: 'server',
-    imgPath: photoData.filePath,
-    urlPath: `/api/${import.meta.env.VITE_APP_SYSTEM_NAME}/resource/upload`,
-  }
-  // 上传到服务器
-  mobileUtil.execute({
-    funcName: 'uploadResource',
-    param,
-    callbackFunc: (result: any) => {
-      if (result.status === 'success') {
-        const index = imageList.value.findIndex(item => item.uid === tempFile.uid)
-        if (index !== -1) {
-          imageList.value[index].uid = result.data.id
-          imageList.value[index].id = result.data.id
-          delete imageList.value[index].message
-          imageList.value[index].status = 'done'
-          imageList.value[index].url = result.data.f_downloadpath
-        }
-      }
-      else {
-        const index = imageList.value.findIndex(item => item.uid === tempFile.uid)
-        if (index !== -1) {
-          imageList.value[index].status = 'failed'
-          imageList.value[index].message = '上传失败'
-        }
-      }
-
-      if (props.outerIndex !== undefined)
-        emit('updateFileList', imageList.value.filter(item => item.status === 'done'), props.outerIndex)
-      else
-        emit('updateFileList', imageList.value.filter(item => item.status === 'done'))
-    },
-  })
-}
-
-// 删除图片
-function deleteFileFunction(file: any) {
-  if (file.id) {
-    deleteFile({ ids: [file.id], f_state: '删除' }).then((res: any) => {
-      if (res.msg !== undefined) {
-        const targetIndex = imageList.value.findIndex(item => item.id === file.id)
-        if (targetIndex !== -1) {
-          imageList.value.splice(targetIndex, 1)
-          if (props.outerIndex !== undefined)
-            emit('updateFileList', imageList.value.filter(item => item.status === 'done'), props.outerIndex)
-          else
-            emit('updateFileList', imageList.value.filter(item => item.status === 'done'))
-        }
-      }
-    })
-  }
-}
-</script>
-
-<template>
-  <div class="uploader-container">
-    <van-button
-      v-if="props.attr?.addOrEdit !== 'readonly'"
-      icon="photograph"
-      type="primary"
-      @click="triggerCamera"
-    >
-      拍照
-    </van-button>
-
-    <van-uploader
-      v-model="imageList"
-      :show-upload="false"
-      :deletable="props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin'"
-      :multiple="props.authority === 'admin'"
-      :preview-image="true"
-      :before-delete="props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin' ? deleteFileFunction : undefined"
-    />
-  </div>
-</template>
-
-<style scoped lang="less">
-.uploader-container {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-</style>
+<script setup lang="ts">
+import { deleteFile } from '@af-mobile-client-vue3/services/api/common'
+import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
+import {
+  Button as vanButton,
+  Uploader as vanUploader,
+} from 'vant'
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  imageList: Array<any>,
+  outerIndex: { default: undefined },
+  authority: { default: 'user' },
+  uploadMode: { default: 'server' },
+  attr: { type: Object as () => { addOrEdit?: string }, default: () => ({}) },
+})
+const emit = defineEmits(['updateFileList'])
+
+const imageList = ref<Array<any>>(props.imageList ?? [])
+
+// 同步 props.imageList 到内部 imageList，保证每次变化都响应
+watch(() => props.imageList, (newVal) => {
+  imageList.value = Array.isArray(newVal) ? [...newVal] : []
+}, { immediate: true })
+
+// 触发拍照
+function triggerCamera() {
+  mobileUtil.execute({
+    funcName: 'takePicture',
+    param: {},
+    callbackFunc: (result: any) => {
+      if (result.status === 'success') {
+        handlePhotoUpload(result.data)
+      }
+    },
+  })
+}
+
+// 处理拍照后的上传
+function getImageMimeType(fileName: string): string {
+  const ext = fileName.split('.').pop()?.toLowerCase()
+  if (ext === 'jpg' || ext === 'jpeg')
+    return 'image/jpeg'
+  if (ext === 'png')
+    return 'image/png'
+  if (ext === 'gif')
+    return 'image/gif'
+  return 'image/png' // 默认
+}
+
+function handlePhotoUpload(photoData: any) {
+  // 添加临时预览
+  const mimeType = getImageMimeType(photoData.filePath)
+  const tempFile = {
+    uid: Date.now() + Math.random().toString(36).substr(2, 5),
+    name: photoData.filePath.split('/').pop(),
+    status: 'uploading',
+    message: '上传中...',
+    url: `data:${mimeType};base64,${photoData.content}`,
+  }
+
+  if (!imageList.value) {
+    imageList.value = [tempFile]
+  }
+  else {
+    imageList.value.push(tempFile)
+  }
+
+  const param = {
+    resUploadMode: props.uploadMode,
+    pathKey: 'Default',
+    formType: 'image',
+    useType: 'Default',
+    resUploadStock: '1',
+    filename: photoData.name,
+    filesize: photoData.size,
+    f_operator: 'server',
+    imgPath: photoData.filePath,
+    urlPath: `/api/${import.meta.env.VITE_APP_SYSTEM_NAME}/resource/upload`,
+  }
+  // 上传到服务器
+  mobileUtil.execute({
+    funcName: 'uploadResource',
+    param,
+    callbackFunc: (result: any) => {
+      if (result.status === 'success') {
+        const index = imageList.value.findIndex(item => item.uid === tempFile.uid)
+        if (index !== -1) {
+          imageList.value[index].uid = result.data.id
+          imageList.value[index].id = result.data.id
+          delete imageList.value[index].message
+          imageList.value[index].status = 'done'
+          imageList.value[index].url = result.data.f_downloadpath
+        }
+      }
+      else {
+        const index = imageList.value.findIndex(item => item.uid === tempFile.uid)
+        if (index !== -1) {
+          imageList.value[index].status = 'failed'
+          imageList.value[index].message = '上传失败'
+        }
+      }
+
+      if (props.outerIndex !== undefined)
+        emit('updateFileList', imageList.value.filter(item => item.status === 'done'), props.outerIndex)
+      else
+        emit('updateFileList', imageList.value.filter(item => item.status === 'done'))
+    },
+  })
+}
+
+// 删除图片
+function deleteFileFunction(file: any) {
+  if (file.id) {
+    deleteFile({ ids: [file.id], f_state: '删除' }).then((res: any) => {
+      if (res.msg !== undefined) {
+        const targetIndex = imageList.value.findIndex(item => item.id === file.id)
+        if (targetIndex !== -1) {
+          imageList.value.splice(targetIndex, 1)
+          if (props.outerIndex !== undefined)
+            emit('updateFileList', imageList.value.filter(item => item.status === 'done'), props.outerIndex)
+          else
+            emit('updateFileList', imageList.value.filter(item => item.status === 'done'))
+        }
+      }
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="uploader-container">
+    <van-button
+      v-if="props.attr?.addOrEdit !== 'readonly'"
+      icon="photograph"
+      type="primary"
+      @click="triggerCamera"
+    >
+      拍照
+    </van-button>
+
+    <van-uploader
+      v-model="imageList"
+      :show-upload="false"
+      :deletable="props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin'"
+      :multiple="props.authority === 'admin'"
+      :preview-image="true"
+      :before-delete="props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin' ? deleteFileFunction : undefined"
+    />
+  </div>
+</template>
+
+<style scoped lang="less">
+.uploader-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

package/src/components/data/XCellList/index.vue

@@ -146,6 +146,14 @@ const slots = useSlots()
 // 当前组件实例（不推荐使用，可能会在后续的版本更迭中调整，暂时用来绑定函数的上下文）
 const currInst = getCurrentInstance()
 
+// 列表底部的文字显示
+function finishedBottomText() {
+  if (buttonState.value?.add && buttonState.value.add === true && (filterButtonPermissions('add').state === false || ((filterButtonPermissions('add').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('add').roleStr))))))
+    return '已加载全部内容，如需新增请点击右上角的 + 号'
+  else
+    return '已加载全部内容'
+}
+
 onBeforeMount(() => {
   initComponent()
 })
@@ -584,7 +592,7 @@ defineExpose({
             v-model:loading="loading"
             class="list_main"
             :finished="finished"
-            finished-text="已加载全部内容"
+            :finished-text="finishedBottomText()"
             :immediate-check="isInitQuery"
             @load="onLoad"
           >

package/src/components/data/XForm/index.vue

@@ -13,7 +13,7 @@ import {
   CellGroup as VanCellGroup,
   Form as VanForm,
 } from 'vant'
-import { computed, defineEmits, defineProps, nextTick, onBeforeMount, reactive, ref, watch } from 'vue'
+import { computed, defineEmits, defineProps, inject, nextTick, onBeforeMount, reactive, ref, watch } from 'vue'
 
 interface FormItem {
   addOrEdit: string
@@ -74,6 +74,9 @@ const props = withDefaults(defineProps<{
 const emits = defineEmits(['onSubmit', 'xFormItemEmitFunc'])
 const userStore = useUserStore()
 
+// inject
+const formDataChange = inject('formDataChange', null)
+
 // 核心状态
 const xFormRef = ref<FormInstance>()
 const loaded = ref(false)
@@ -287,6 +290,16 @@ watch(() => props.formData, (newVal) => {
   }
 })
 
+watch(
+  () => form.value,
+  (val) => {
+    if (typeof formDataChange === 'function') {
+      formDataChange(val)
+    }
+  },
+  { deep: true },
+)
+
 // 组件挂载时初始化
 onBeforeMount(() => {
   initializeForm()

package/src/components/data/XFormGroup/index.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
 import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
-import {
-  Button as VanButton,
-  Tab as VanTab,
-  Tabs as VanTabs,
-} from 'vant'
-import { defineEmits, defineProps, onBeforeMount, ref, watch } from 'vue'
+import { Button as VanButton, Tab as VanTab, Tabs as VanTabs } from 'vant'
+import { defineEmits, defineProps, onBeforeMount, onMounted, ref, watch } from 'vue'
 
 const props = withDefaults(defineProps<{
   configName?: string
@@ -34,16 +30,12 @@ const submitGroup = ref(false)
 const submitSimple = ref(false)
 const isInit = ref(false)
 const initStatus = ref(false)
-const propsData = ref({})
+const propsData = ref<Form>({})
 
 // 组件初始化函数
 function init(params: Form) {
   initStatus.value = true
   propsData.value = {
-    // configName: '',
-    // serviceName: undefined,
-    // groupFormData: () => ({}),
-    // mode: '查询',
     configName: props.configName,
     serviceName: props.serviceName,
     groupFormData: props.groupFormData,
@@ -53,7 +45,6 @@ function init(params: Form) {
   formData.value = propsData.value.groupFormData
   getConfigByName(propsData.value.configName, (result) => {
     if (result?.groups) {
-      // submitGroup.value = true
       groupItems.value = result.groups
       result.groups.forEach((group) => {
         if (!formData.value[group.groupName])
@@ -63,7 +54,7 @@ function init(params: Form) {
       })
     }
     else {
-      submitSimple.value = result.showSubmitBtn
+      submitSimple.value = result?.showSubmitBtn
       groupItems.value = [{ ...result }]
     }
     isInit.value = true
@@ -85,24 +76,29 @@ async function submit() {
   emit('submit', formData.value)
 }
 
-// function initXForm(index: number) {
-// 获取自身示例
-// refs[`xFormListRef-${index}`].init({})
-// }
+// 动态计算 offsetTop = var(--van-nav-bar-height) + 10px
+const offsetTop = ref(0)
+onMounted(() => {
+  const root = document.documentElement
+  const navBarHeight = getComputedStyle(root).getPropertyValue('--van-nav-bar-height')
+  offsetTop.value = Number.parseInt(navBarHeight, 10) || 60 + 10
+})
 
 defineExpose({ init })
 </script>
 
 <template>
   <div v-if="isInit" id="x-form-group">
-    <VanTabs scrollspy sticky>
+    <VanTabs scrollspy sticky :offset-top="offsetTop">
       <VanTab
         v-for="(item, index) in groupItems"
         :key="item.groupName ? (item.groupName + index) : index"
         :title="item.describe ? item.describe : item.tableName "
       >
-        <div class="x-form-group-item">
-          <!--          :ref="`xFormListRef-${index}`" -->
+        <div
+          class="x-form-group-item"
+          :class="{ 'is-last': index === groupItems.length - 1 }"
+        >
           <XForm
             ref="xFormListRef"
             :is-group-form="true"
@@ -125,10 +121,23 @@ defineExpose({ init })
 
 <style scoped lang="less">
 #x-form-group {
+  display: flex;
+  flex-direction: column;
   background-color: rgb(247, 248, 250);
-  padding-bottom: 10px;
+  height: calc(100vh - var(--van-nav-bar-height) - 20px);
+  flex: 1;
+  overflow-y: auto;
+  // 让 Tabs 区域自适应剩余空间
+  .van-tabs {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
   .x-form-group-item {
-    margin: 20px 0;
+    margin-bottom: 20px;
   }
 }
+.x-form-group-item.is-last {
+  min-height: calc(100vh - var(--van-nav-bar-height) - 40px);
+}
 </style>