af-mobile-client-vue3 1.3.1 → 1.3.2-2.1

package/CLAUDE.md

@@ -182,3 +182,8 @@ This is a main application for micro-frontend architecture:
 - **Vue TSC** for type checking
 - **Commitlint** for commit message standards
 - **Lint-staged** for pre-commit hooks
+
+## 注意事项
+
+- 此项目作为组件库项目 所以没有开启自动引入 不能自动引入 vue 中的 ref/compute 等
+- 此项目为了统一业务项目使用，所以 使用 @af-mobile-client-vue3/ 表示 src 而不是 @/

package/README.md

@@ -13,6 +13,7 @@
 <p align="center">指南非常地详细，并非说明上手多么地复杂，只是更好地使用它做的说明而已</p>
 
 ## 需要注意的地方
+
 - 本项目作为微前端框架micro-app的主应用，虽然同样派生自example项目，但example项目主要用于子应用的快速建设，因此本项目在微前端接入代码方面和example表现不一致
 
 ## 特性
@@ -102,7 +103,7 @@ pnpm build
 支持现代浏览器
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
-|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
+| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
 |                                                                                             not support                                                                                              |                                                                                            last 2 versions                                                                                             |                                                                                                  last 2 versions                                                                                                  |                                                                                                last 2 versions                                                                                                |                                                                                                last 2 versions                                                                                                |
 
 ### 新增页面

package/compress.js

@@ -1,36 +1,36 @@
-import fs from 'node:fs'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import * as tar from 'tar'
-
-// 当前文件所在目录
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-// 压缩源目录名（即 build 后生成的目录名）
-const outputName = `dist_af-library-mobile-web`
-
-// 源目录路径
-const cwd = path.join(__dirname, 'dist', outputName)
-
-// 输出 tar.gz 文件路径
-const outputPath = path.join(__dirname, 'dist', `${outputName}.tar.gz`)
-
-if (!fs.existsSync(cwd)) {
-  console.error('❌ 目录不存在:', cwd)
-  // eslint-disable-next-line node/prefer-global/process
-  process.exit(1)
-}
-
-tar.c(
-  {
-    gzip: true,
-    file: outputPath,
-    cwd,
-  },
-  ['.'],
-).then(() => {
-  console.log(`✅ 压缩完成: ${outputPath}`)
-}).catch((err) => {
-  console.error('❌ 压缩失败:', err)
-})
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import * as tar from 'tar'
+
+// 当前文件所在目录
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// 压缩源目录名（即 build 后生成的目录名）
+const outputName = `dist_af-library-mobile-web`
+
+// 源目录路径
+const cwd = path.join(__dirname, 'dist', outputName)
+
+// 输出 tar.gz 文件路径
+const outputPath = path.join(__dirname, 'dist', `${outputName}.tar.gz`)
+
+if (!fs.existsSync(cwd)) {
+  console.error('❌ 目录不存在:', cwd)
+  // eslint-disable-next-line node/prefer-global/process
+  process.exit(1)
+}
+
+tar.c(
+  {
+    gzip: true,
+    file: outputPath,
+    cwd,
+  },
+  ['.'],
+).then(() => {
+  console.log(`✅ 压缩完成: ${outputPath}`)
+}).catch((err) => {
+  console.error('❌ 压缩失败:', err)
+})

package/package.json

@@ -1,114 +1,114 @@
-{
-  "name": "af-mobile-client-vue3",
-  "type": "module",
-  "version": "1.3.1",
-  "packageManager": "pnpm@10.13.1",
-  "description": "Vue + Vite component lib",
-  "engines": {
-    "node": ">=20.19.0"
-  },
-  "scripts": {
-    "dev": "cross-env MOCK_SERVER_PORT=8086 vite",
-    "compress": "node ./compress.js",
-    "build:dev": "vue-tsc --noEmit && vite build --mode development",
-    "build:pro": "vue-tsc --noEmit && vite build --mode production && pnpm run compress",
-    "preview": "vite preview",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "release": "bumpp --commit --push --tag",
-    "typecheck": "vue-tsc --noEmit",
-    "commitlint": "commitlint --edit",
-    "prepare": "simple-git-hooks"
-  },
-  "dependencies": {
-    "@iconify/vue": "4.3.0",
-    "@micro-zoe/micro-app": "1.0.0-rc.26",
-    "@unhead/vue": "2.0.12",
-    "@vant/area-data": "^2.0.0",
-    "@vant/touch-emulator": "^1.4.0",
-    "@vant/use": "^1.6.0",
-    "@vueuse/core": "^13.5.0",
-    "axios": "^1.10.0",
-    "crypto-js": "^4.2.0",
-    "dayjs": "^1.11.13",
-    "echarts": "^5.6.0",
-    "lodash-es": "^4.17.21",
-    "nprogress": "^0.2.0",
-    "ol": "^10.5.0",
-    "pinia": "^3.0.3",
-    "pinia-plugin-persistedstate": "^4.4.1",
-    "resize-detector": "^0.3.0",
-    "vant": "^4.9.21",
-    "vconsole": "^3.15.1",
-    "vue": "^3.5.17",
-    "vue-i18n": "^11.1.10",
-    "vue-router": "^4.5.1",
-    "vue3-hash-calendar": "^1.1.3"
-  },
-  "devDependencies": {
-    "@antfu/eslint-config": "4.17.0",
-    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
-    "@commitlint/types": "^19.8.1",
-    "@iconify/json": "2.2.318",
-    "@iconify/utils": "^2.3.0",
-    "@intlify/unplugin-vue-i18n": "^6.0.8",
-    "@types/crypto-js": "^4.2.2",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.0.14",
-    "@types/nprogress": "^0.2.3",
-    "@unocss/eslint-config": "66.3.3",
-    "@vitejs/plugin-legacy": "^7.0.1",
-    "@vitejs/plugin-vue": "^6.0.0",
-    "autoprefixer": "^10.4.21",
-    "bumpp": "^10.2.0",
-    "consola": "^3.4.2",
-    "cross-env": "^7.0.3",
-    "eslint": "^9.31.0",
-    "eslint-plugin-format": "^1.0.1",
-    "less": "^4.4.0",
-    "lint-staged": "^16.1.2",
-    "mockjs": "^1.1.0",
-    "postcss-mobile-forever": "^5.0.0",
-    "rollup": "^4.45.1",
-    "simple-git-hooks": "^2.13.0",
-    "tar": "^7.4.3",
-    "terser": "^5.43.1",
-    "typescript": "^5.8.3",
-    "unocss": "66.3.3",
-    "vite": "^7.0.5",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-mock-dev-server": "^1.9.1",
-    "vite-plugin-pwa": "^1.0.1",
-    "vite-plugin-sitemap": "^0.8.2",
-    "vite-plugin-vconsole": "^2.1.1",
-    "vite-plugin-vue-devtools": "^7.7.7",
-    "vue-tsc": "^3.0.2"
-  },
-  "pnpm": {
-    "allowedDeprecatedVersions": {
-      "glob": "7.2.3",
-      "inflight": "1.0.6",
-      "sourcemap-codec": "1.4.8"
-    },
-    "peerDependencyRules": {
-      "allowedVersions": {}
-    },
-    "onlyBuiltDependencies": [
-      "core-js",
-      "esbuild",
-      "simple-git-hooks",
-      "unrs-resolver"
-    ]
-  },
-  "resolutions": {
-    "vite": "^7.0.5"
-  },
-  "simple-git-hooks": {
-    "pre-commit": "pnpm lint-staged",
-    "commit-msg": "pnpm commitlint $1"
-  },
-  "lint-staged": {
-    "*": "eslint --fix"
-  }
-}
+{
+  "name": "af-mobile-client-vue3",
+  "type": "module",
+  "version": "1.3.22.1",
+  "packageManager": "pnpm@10.13.1",
+  "description": "Vue + Vite component lib",
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "scripts": {
+    "dev": "cross-env MOCK_SERVER_PORT=8086 vite",
+    "compress": "node ./compress.js",
+    "build:dev": "vue-tsc --noEmit && vite build --mode development && pnpm run compress",
+    "build:pro": "vue-tsc --noEmit && vite build --mode production && pnpm run compress",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "release": "bumpp --commit --push --tag",
+    "typecheck": "vue-tsc --noEmit",
+    "commitlint": "commitlint --edit",
+    "prepare": "simple-git-hooks"
+  },
+  "dependencies": {
+    "@iconify/vue": "4.3.0",
+    "@micro-zoe/micro-app": "1.0.0-rc.26",
+    "@unhead/vue": "2.0.12",
+    "@vant/area-data": "^2.0.0",
+    "@vant/touch-emulator": "^1.4.0",
+    "@vant/use": "^1.6.0",
+    "@vueuse/core": "^13.5.0",
+    "axios": "^1.10.0",
+    "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.13",
+    "echarts": "^5.6.0",
+    "lodash-es": "^4.17.21",
+    "nprogress": "^0.2.0",
+    "ol": "^10.5.0",
+    "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.4.1",
+    "resize-detector": "^0.3.0",
+    "vant": "^4.9.21",
+    "vconsole": "^3.15.1",
+    "vue": "^3.5.17",
+    "vue-i18n": "^11.1.10",
+    "vue-router": "^4.5.1",
+    "vue3-hash-calendar": "^1.1.3"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "4.17.0",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@commitlint/types": "^19.8.1",
+    "@iconify/json": "2.2.318",
+    "@iconify/utils": "^2.3.0",
+    "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@types/crypto-js": "^4.2.2",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^24.0.14",
+    "@types/nprogress": "^0.2.3",
+    "@unocss/eslint-config": "66.3.3",
+    "@vitejs/plugin-legacy": "^7.0.1",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "autoprefixer": "^10.4.21",
+    "bumpp": "^10.2.0",
+    "consola": "^3.4.2",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.31.0",
+    "eslint-plugin-format": "^1.0.1",
+    "less": "^4.4.0",
+    "lint-staged": "^16.1.2",
+    "mockjs": "^1.1.0",
+    "postcss-mobile-forever": "^5.0.0",
+    "rollup": "^4.45.1",
+    "simple-git-hooks": "^2.13.0",
+    "tar": "^7.4.3",
+    "terser": "^5.43.1",
+    "typescript": "^5.8.3",
+    "unocss": "66.3.3",
+    "vite": "^7.0.5",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-mock-dev-server": "^1.9.1",
+    "vite-plugin-pwa": "^1.0.1",
+    "vite-plugin-sitemap": "^0.8.2",
+    "vite-plugin-vconsole": "^2.1.1",
+    "vite-plugin-vue-devtools": "^7.7.7",
+    "vue-tsc": "^3.0.2"
+  },
+  "pnpm": {
+    "allowedDeprecatedVersions": {
+      "glob": "7.2.3",
+      "inflight": "1.0.6",
+      "sourcemap-codec": "1.4.8"
+    },
+    "peerDependencyRules": {
+      "allowedVersions": {}
+    },
+    "onlyBuiltDependencies": [
+      "core-js",
+      "esbuild",
+      "simple-git-hooks",
+      "unrs-resolver"
+    ]
+  },
+  "resolutions": {
+    "vite": "^7.0.5"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged",
+    "commit-msg": "pnpm commitlint $1"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}

package/postcss.config.ts

@@ -17,7 +17,7 @@ export default {
 
     // https://github.com/wswmsword/postcss-mobile-forever
     'postcss-mobile-forever': {
-      appSelector: '#app',
+      appSelector: '#system-app',
       viewportWidth: 375,
       maxDisplayWidth: 800,
       border: true,

package/src/App.vue

@@ -53,7 +53,7 @@ const themeVars: ConfigProviderThemeVars = reactive({
     <router-view v-slot="{ Component }">
       <section class="app-wrapper">
         <keep-alive :include="keepAliveRouteNames">
-          <component :is="Component" />
+          <component :is="Component" :key="$route.fullPath" />
         </keep-alive>
       </section>
     </router-view>

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

@@ -42,7 +42,7 @@ function onBack() {
 <template>
   <VanNavBar
     v-show="showNavBar"
-    :title="title"
+    :title="title as string"
     :fixed="true"
     clickable placeholder
     :left-arrow="showLeftArrow"

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

@@ -3,8 +3,6 @@ import {
   Button as VanButton,
   Checkbox as VanCheckbox,
   CheckboxGroup as VanCheckboxGroup,
-  Grid as VanGrid,
-  GridItem as VanGridItem,
   Radio as VanRadio,
   RadioGroup as VanRadioGroup,
 } from 'vant'
@@ -132,24 +130,24 @@ function valueChange(value: string | string[]) {
     display: none;
   }
 
-  :deep(.van-checkbox)  {
+  :deep(.van-checkbox) {
     width: 100%;
   }
-  :deep(.van-radio__icon)  {
+  :deep(.van-radio__icon) {
     display: none;
   }
-  :deep(.van-radio)  {
+  :deep(.van-radio) {
     width: 100%;
   }
-  :deep(.van-button)  {
+  :deep(.van-button) {
     width: 100%;
-    background-color: rgb(247,248,250);
+    background-color: rgb(247, 248, 250);
     white-space: nowrap;
   }
-  :deep(.van-checkbox__label)  {
+  :deep(.van-checkbox__label) {
     width: 100%;
   }
-  :deep(.van-radio__label)  {
+  :deep(.van-radio__label) {
     width: 100%;
   }
 }

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

@@ -169,7 +169,7 @@ const resultLabel = computed(() => {
 .dh-field {
   width: 100%;
   padding: 0;
-  background:#fff;
+  background: #fff;
   .dh-cell.van-cell {
     padding: 10px 0;
   }

package/src/components/data/CardContainer/CardContainer.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import CardHeader from './CardHeader.vue'
+
+const props = defineProps({
+  shadow: {
+    type: Boolean,
+    default: true,
+  },
+  className: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  collapsible: {
+    type: Boolean,
+    default: false,
+  },
+  defaultCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const isCollapsed = ref(props.defaultCollapsed)
+
+function handleToggle(collapsed: boolean) {
+  isCollapsed.value = collapsed
+}
+
+// 过渡动画钩子函数
+function onEnter(el: HTMLElement) {
+  el.style.height = '0'
+  el.style.overflow = 'hidden'
+  el.style.opacity = '0'
+  el.style.transformOrigin = 'top'
+  el.style.transform = 'scaleY(0.8)'
+
+  // 触发回流
+  void el.offsetHeight
+
+  el.style.transition = 'height 0.2s ease, opacity 0.2s ease, transform 0.2s ease'
+  el.style.height = `${el.scrollHeight}px`
+  el.style.opacity = '1'
+  el.style.transform = 'scaleY(1)'
+}
+
+function onAfterEnter(el: HTMLElement) {
+  el.style.height = ''
+  el.style.overflow = ''
+  el.style.transition = ''
+  el.style.transformOrigin = ''
+}
+
+function onBeforeLeave(el: HTMLElement) {
+  el.style.height = `${el.scrollHeight}px`
+  el.style.overflow = 'hidden'
+  el.style.transformOrigin = 'top'
+
+  // 触发回流
+  void el.offsetHeight
+}
+
+function onLeave(el: HTMLElement) {
+  el.style.transition = 'height 0.2s ease, opacity 0.2s ease, transform 0.2s ease'
+  el.style.height = '0'
+  el.style.opacity = '0'
+  el.style.transform = 'scaleY(0.8)'
+}
+watch(() => props.defaultCollapsed, (newVal) => {
+  isCollapsed.value = newVal
+})
+</script>
+
+<template>
+  <div class="card-container" :class="[shadow ? 'with-shadow' : '', className]">
+    <CardHeader
+      v-if="title"
+      :title="title"
+      :collapsible="collapsible"
+      :default-collapsed="defaultCollapsed"
+      @toggle="handleToggle"
+    />
+    <transition
+      name="collapse-transition"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+    >
+      <div v-show="!isCollapsed" class="card-content">
+        <slot />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.card-container {
+  background-color: #fff;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  padding: 10px;
+  // margin-bottom: 0;
+
+  &.with-shadow {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  }
+}
+
+.card-content {
+  will-change: height, opacity, transform;
+  transform-origin: top;
+}
+</style>

package/src/components/data/CardContainer/CardHeader.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  collapsible: {
+    type: Boolean,
+    default: false,
+  },
+  defaultCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['toggle'])
+
+const isCollapsed = ref(props.defaultCollapsed)
+
+function toggleCollapse() {
+  if (props.collapsible) {
+    isCollapsed.value = !isCollapsed.value
+    emit('toggle', isCollapsed.value)
+  }
+}
+</script>
+
+<template>
+  <div class="card-header" @click="toggleCollapse">
+    <div class="card-header__title">
+      <slot name="icon">
+        <van-icon v-if="icon" class="card-header__icon" :name="icon" />
+      </slot>
+      <h4 class="card-header__text">
+        {{ title }}
+      </h4>
+    </div>
+    <div class="card-header__extra">
+      <slot name="extra" />
+      <van-icon
+        v-if="collapsible"
+        class="card-header__collapse-icon"
+        :name="isCollapsed ? 'arrow-down' : 'arrow-up'"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #f0f0f0;
+
+  &__title {
+    display: flex;
+    align-items: center;
+  }
+
+  &__icon {
+    margin-right: 8px;
+    font-size: 14px;
+    color: #666;
+  }
+
+  &__text {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+  }
+
+  &__extra {
+    display: flex;
+    align-items: center;
+  }
+
+  &__collapse-icon {
+    margin-left: 8px;
+    font-size: 14px;
+    color: #666;
+    cursor: pointer;
+
+    &:hover {
+      color: #333;
+    }
+  }
+}
+</style>