af-mobile-client-vue3 1.0.70 → 1.0.71

package/.cursorrules

@@ -0,0 +1,61 @@
+# 你是一个编程TypeScript & Vue 3 & Vant4 高手 指导我写出高质量的代码
+
+## 技术栈规范
+- 首先基于 readme 文件了解项目内容
+- 基于 Vue 3 + TypeScript + Vant 4 开发
+- 使用 Composition API 和 `<script setup>` 语法
+- 使用 Vite 作为构建工具
+- 使用 Pinia 进行状态管理
+
+## 代码风格
+1. 组件编写
+- 使用 Composition API 和 `<script setup>` 语法糖
+- 组件名使用 PascalCase 命名
+- 组件文件使用 .vue 扩展名
+- 每个组件应该只包含一个根元素
+
+2. TypeScript 规范
+- 使用 TypeScript 类型标注
+- 优先使用 interface 定义类型
+- 使用 type 定义联合类型或交叉类型
+- Props 必须指定类型
+
+3. 命名规范
+- 组件名: PascalCase (如 UserProfile)
+- 变量名: camelCase (如 userName)
+- 布尔值变量: 使用 is/has/should 前缀 (如 isLoading)
+- 事件处理函数: 使用 handle 前缀 (如 handleSubmit)
+- CSS 类名: 使用 kebab-case (如 user-profile)
+
+4. 代码组织
+- 按功能模块化组织代码
+- 复用逻辑使用组合式函数 (composables)
+- 保持单一职责原则
+- 避免重复代码,提取共用逻辑
+
+5. Vant 组件使用
+- 按需引入 Vant 组件
+- 使用 Vant 提供的类型定义
+- 遵循 Vant 的设计规范
+- 这是一个组件库项目 所以你不能使用自动导入 不能忽略 import,必须要显示声明import
+
+6. 注释规范
+- 组件顶部添加功能说明
+- 复杂逻辑需要添加注释
+- 类型定义需要添加注释
+- API 接口需要添加注释
+
+7. 性能优化
+- 合理使用 computed 和 watch
+- 避免不必要的组件渲染
+- 使用 v-show 替代频繁切换的 v-if
+- 大列表使用虚拟滚动
+
+## 目录结构
+遵循项目既定的目录结构:
+- components/: 可复用组件
+- views/: 页面组件
+- composables/: 组合式函数
+- stores/: Pinia 状态管理
+- types/: TypeScript 类型定义
+- utils/: 工具函数

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.0.70",
+  "version": "1.0.71",
   "description": "Vue + Vite component lib",
   "license": "MIT",
   "engines": {

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

@@ -1,132 +1,151 @@
-<script setup lang="ts">
-import {ref, defineEmits, defineProps, defineModel, computed} from 'vue';
-import {
-  CheckboxGroup as VanCheckboxGroup,
-  Checkbox as VanCheckbox,
-  Radio as VanRadio,
-  RadioGroup as VanRadioGroup,
-  Grid as VanGrid,
-  GridItem as VanGridItem,
-  Button as VanButton
-} from 'vant'
-const props = defineProps({
-  columns:{
-    type: Object,
-    default: () => {
-      return []
-    }
-  },
-  columnsFieldNames:{
-    type:Object,
-    default: ()=> {
-      return {
-        text: 'label',
-        value: 'value'
-      }
-    }
-  },
-  gutter:{ // 格子之间的间距，默认单位为px
-    type: Number,
-    default: 8
-  },
-  columnNum:{ // 列数
-    type: Number,
-    default: 4
-  },
-  multiple:{ // 是否多选
-    type: Boolean,
-    default: false
-  }
-})
-const emit = defineEmits(['change'])
-const checked = defineModel()
-const classSel = (colRow) => {
-  if(typeof checked.value === 'string' || Array.isArray(checked.value)){
-    return checked.value.includes(colRow[props.columnsFieldNames.value])
-  }else if( typeof checked.value === 'undefined'){
-    return false
-  }else{
-    return checked.value === colRow[props.columnsFieldNames.value]
-  }
-}
-// multiple:true ====  value:string[]
-// multiple:false ====  value:string
-function valueChange(value){
-  const list = props.columns.filter( (item) => {
-    if(props.multiple){
-      return value.includes(item[props.columnsFieldNames.value])
-    }else{
-      return value === item[props.columnsFieldNames.value]
-    }
-  })
-  emit('change', value, list)
-}
-</script>
-<template>
-  <div id="XGridDropOption">
-    <template v-if="props.multiple">
-      <VanCheckboxGroup v-model="checked" direction="horizontal" @change="valueChange">
-        <VanGrid :gutter="props.gutter" :border="false" :column-num="props.columnNum">
-          <VanGridItem v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]">
-            <template #default>
-              <VanCheckbox :name="colRow[props.columnsFieldNames.value]">
-                <VanButton type="default" size="small" :class="{'select-text-col':classSel(colRow)}">{{colRow[props.columnsFieldNames.text]}}</VanButton>
-              </VanCheckbox>
-            </template>
-          </VanGridItem>
-        </VanGrid>
-      </VanCheckboxGroup>
-    </template>
-    <template v-else>
-      <VanRadioGroup v-model="checked" direction="horizontal" @change="valueChange">
-        <VanGrid :gutter="props.gutter" :border="false" :column-num="props.columnNum">
-          <VanGridItem v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]">
-            <template #default>
-              <van-radio :name="colRow[props.columnsFieldNames.value]">
-                <VanButton type="default" size="small" :class="{'select-text-col':classSel(colRow)}">{{colRow[props.columnsFieldNames.text]}}</VanButton>
-              </van-radio>
-            </template>
-          </VanGridItem>
-        </VanGrid>
-      </VanRadioGroup>
-    </template>
-  </div>
-</template>
-<style scoped lang="less">
-#XGridDropOption{
-  width: 100%;
-  --van-grid-item-content-padding: 2px;
-  --van-padding-sm: 0px;
-  --van-checkbox-label-margin: 0px;
-  --van-radio-label-margin: 0px;
-  --van-button-default-border-color: 'rgb(247,248,250)';
-  .van-grid {
-    width: 100%;
-  }
-  .select-text-col{
-    color: blue;
-  }
-  :deep(.van-checkbox__icon)  {
-    display: none;
-  }
-  :deep(.van-checkbox)  {
-    width: 100%;
-  }
-  :deep(.van-radio__icon)  {
-    display: none;
-  }
-  :deep(.van-radio)  {
-    width: 100%;
-  }
-  :deep(.van-button)  {
-    width: 100%;
-    background-color: rgb(247,248,250);
-  }
-  :deep(.van-checkbox__label)  {
-    width: 100%;
-  }
-  :deep(.van-radio__label)  {
-    width: 100%;
-  }
-}
-</style>
+<script setup lang="ts">
+import { defineEmits, defineModel, defineProps } from 'vue'
+import {
+  Button as VanButton,
+  Checkbox as VanCheckbox,
+  CheckboxGroup as VanCheckboxGroup,
+  Grid as VanGrid,
+  GridItem as VanGridItem,
+  Radio as VanRadio,
+  RadioGroup as VanRadioGroup,
+} from 'vant'
+
+interface ColumnItem {
+  [key: string]: string | number
+}
+
+interface ColumnsFieldNames {
+  text: string
+  value: string
+}
+
+const props = defineProps({
+  columns: {
+    type: Array as () => ColumnItem[],
+    default: () => [] as ColumnItem[],
+  },
+  columnsFieldNames: {
+    type: Object as () => ColumnsFieldNames,
+    default: () => ({
+      text: 'label',
+      value: 'value',
+    }),
+  },
+  gutter: {
+    type: Number,
+    default: 8,
+  },
+  columnNum: {
+    type: Number,
+    default: 4,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  change: [value: string | string[], list: ColumnItem[]]
+}>()
+
+const checked = defineModel<string | string[]>()
+
+function classSel(colRow: ColumnItem): boolean {
+  if (typeof checked.value === 'string' || Array.isArray(checked.value))
+    return checked.value.includes(String(colRow[props.columnsFieldNames.value]))
+  else if (typeof checked.value === 'undefined')
+    return false
+  else
+    return checked.value === String(colRow[props.columnsFieldNames.value])
+}
+
+function valueChange(value: string | string[]) {
+  const list = props.columns.filter((item) => {
+    if (props.multiple)
+      return value.includes(String(item[props.columnsFieldNames.value]))
+
+    else
+      return value === item[props.columnsFieldNames.value]
+  })
+  emit('change', value, list)
+}
+</script>
+
+<template>
+  <div id="XGridDropOption">
+    <template v-if="props.multiple">
+      <VanCheckboxGroup v-model="checked as string[]" direction="horizontal" @change="valueChange">
+        <VanGrid :gutter="props.gutter" :border="false" :column-num="props.columnNum">
+          <VanGridItem v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]">
+            <template #default>
+              <VanCheckbox :name="colRow[props.columnsFieldNames.value]">
+                <VanButton type="default" size="small" :class="{ 'select-text-col': classSel(colRow) }">
+                  {{ colRow[props.columnsFieldNames.text] }}
+                </VanButton>
+              </VanCheckbox>
+            </template>
+          </VanGridItem>
+        </VanGrid>
+      </VanCheckboxGroup>
+    </template>
+    <template v-else>
+      <VanRadioGroup v-model="checked" direction="horizontal" @change="valueChange">
+        <VanGrid :gutter="props.gutter" :border="false" :column-num="props.columnNum">
+          <VanGridItem v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]">
+            <template #default>
+              <VanRadio :name="colRow[props.columnsFieldNames.value]">
+                <VanButton type="default" size="small" :class="{ 'select-text-col': classSel(colRow) }">
+                  {{ colRow[props.columnsFieldNames.text] }}
+                </VanButton>
+              </VanRadio>
+            </template>
+          </VanGridItem>
+        </VanGrid>
+      </VanRadioGroup>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="less">
+#XGridDropOption {
+  width: 100%;
+  --van-grid-item-content-padding: 2px;
+  --van-padding-sm: 0px;
+  --van-checkbox-label-margin: 0px;
+  --van-radio-label-margin: 0px;
+  --van-button-default-border-color: 'rgb(247,248,250)';
+
+  .van-grid {
+    width: 100%;
+  }
+
+  .select-text-col {
+    color: blue;
+  }
+
+  :deep(.van-checkbox__icon) {
+    display: none;
+  }
+
+  :deep(.van-checkbox)  {
+    width: 100%;
+  }
+  :deep(.van-radio__icon)  {
+    display: none;
+  }
+  :deep(.van-radio)  {
+    width: 100%;
+  }
+  :deep(.van-button)  {
+    width: 100%;
+    background-color: rgb(247,248,250);
+  }
+  :deep(.van-checkbox__label)  {
+    width: 100%;
+  }
+  :deep(.van-radio__label)  {
+    width: 100%;
+  }
+}
+</style>