@gindow/vant-go 1.0.0

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@gindow/vant-go",
+  "version": "1.0.0",
+  "description": "基于 Vant 的移动端扩展组件库",
+  "type": "module",
+  "license": "MIT",
+  "main": "./dist/vant-go.cjs",
+  "types": "./dist/vant-go.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/vant-go.d.ts",
+      "import": "./dist/vant-go.mjs",
+      "require": "./dist/vant-go.cjs"
+    },
+    "./resolver": {
+      "types": "./dist/resolver.d.ts",
+      "import": "./dist/resolver.mjs",
+      "require": "./dist/resolver.cjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "vue-tsc --noEmit && vite build"
+  },
+  "peerDependencies": {
+    "@gindow/vue": "^1.0.3",
+    "@iconify/vue": "^5.0.0",
+    "vant": "^4.9.24",
+    "vue": "^3.5.0",
+    "vue-router": "^4.0.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "@iconify/vue": "^5.0.1",
+    "@types/node": "^22.20.0",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "^6.0.3",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vant": "^4.9.24",
+    "vite": "^8.1.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.38",
+    "vue-router": "^5.1.0",
+    "vue-tsc": "^3.3.5"
+  }
+}

package/src/components/VaxAssetPreview.vue

@@ -0,0 +1,38 @@
+<template>
+  <van-image-preview v-model:show="show" :images="assetUrls" :start-position="initialIndex" @change="onChange">
+    <template #image="{ src }">
+      <van-image fit="contain" :src="src" class="w-full">
+        <template #error>
+          <div class="flex flex-col justify-center items-center">
+            <vax-icon icon="file-question" :size="40" color="#093" />
+            <div>{{ currentAsset?.title }}</div>
+          </div>
+        </template>
+      </van-image>
+    </template>
+  </van-image-preview>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { computed, ref } from 'vue'
+import type { IAsset } from '../types'
+
+const show = defineModel('show', { type: Boolean, default: false })
+
+const props = defineProps({
+  asset: { type: Object as PropType<IAsset>, default: () => ({}) },
+  assets: { type: Array as PropType<IAsset[]>, default: () => [] },
+})
+
+const assetUrls = computed(() => props.assets.map(item => item.shrink ?? item?.url))
+
+const initialIndex = computed(() => props.assets.findIndex(item => item.id === props.asset?.id) ?? 0)
+const index = ref(initialIndex.value === -1 ? 0 : initialIndex.value)
+const currentAsset = computed(() => props.assets[index.value])
+
+const onChange = (value: number) => index.value = value
+</script>
+
+<style scoped>
+</style>

package/src/components/VaxAvatar.vue

@@ -0,0 +1,16 @@
+<template>
+  <van-image :src :round :width="pixel" :height="pixel" />
+</template>
+
+<script setup lang="ts">
+import avatar from '../assets/avatar.png'
+
+const { size, src } = defineProps({
+  src: { type: String, default: avatar },
+  size: { type: [String, Number], default: 'normal' },
+  round: { type: Boolean, default: true },
+})
+
+const sizes = { small: 24, normal: 48, large: 72 }
+const pixel = computed(() => typeof size === 'number' ? size : (sizes[size as keyof typeof sizes] || sizes.normal))
+</script>

package/src/components/VaxButton.vue

@@ -0,0 +1,21 @@
+<template>
+  <van-button v-bind="$attrs">
+    <span class="flex-center gap-2">
+      <vax-icon v-if="icon" :icon :size :color :strokeWidth />
+      <slot />
+    </span>
+  </van-button>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  icon: { type: String, default: '' },
+  iconSize: { type: Number, default: 14 },
+  iconColor: { type: String, default: '' },
+  iconStrokeWidth: { type: Number },
+})
+
+const size = computed(() => props.iconSize)
+const color = computed(() => props.iconColor)
+const strokeWidth = computed(() => props.iconStrokeWidth)
+</script>

package/src/components/VaxCaptcha.vue

@@ -0,0 +1,60 @@
+<template>
+  <van-field type="tel" v-model="phone" name="phone" :label="label ? t('auth.phone') : ''" :placeholder="t('auth.enterPhone')" center required clearable :rules="[{ required: true }]">
+    <template #button>
+      <van-button class="captcha" type="primary" :disabled="!!waiting" @click.stop="getCaptcha">{{ waiting > 0 ? waiting : t('auth.getOTP') }}</van-button>
+    </template>
+  </van-field>
+  <van-field type="number" v-model="captcha" :label="label ? t('auth.otp') : ''" :placeholder="t('auth.enterOTP')" center required clearable :rules="[{ required: true }]" />
+  <van-action-sheet v-model:show="show" :actions :cancel-text="t('cancel')" @select="select" />
+</template>
+
+<script setup lang="ts">
+import { useLocale } from '../locale'
+import { Validate } from '../utils/validate'
+import { useCaptcha } from '../hooks/useCaptcha'
+import { useMessage } from '../hooks/useMessage'
+
+const { method, whatsApp, onSend } = defineProps({
+  method: { type: String, default: '' },
+  label: { type: Boolean, default: false }, // 是否显示 Label
+  whatsApp: { type: Boolean, default: false }, // 是否使用 WhatsApp
+  onSend: { type: Function as PropType<(data: any) => Promise<void>>, required: true }
+})
+
+const phone = defineModel('phone', { type: String, required: true })
+const captcha = defineModel('captcha', { type: String, required: true })
+
+const { t } = useLocale()
+const { success, error } = useMessage()
+const { waiting, send } = useCaptcha(onSend)
+
+const channel = ref('sms')
+const sent = ref(false)
+const show = ref(false)
+const actions = computed(() => [
+  { name: t('auth.viaWhatsApp'), value: 'whatsapp' },
+  { name: t('auth.viaPhone'), value: 'sms' },
+])
+
+function sendOTP() {
+  return send({ method, phone: phone.value, channel: channel.value }).then(() => {
+    captcha.value = ''
+    sent.value = true
+    success(t('message.otpSent'))
+  }).catch(({ message }: { message: string }) => error(message))
+}
+
+// 获取验证码
+function getCaptcha() {
+  if (!Validate.phone(phone.value)) return error(t('message.phoneInvalid'))
+  if (whatsApp) show.value = true
+  else sendOTP()
+}
+
+// 选择通道
+function select({ value }: { value: string }) {
+  channel.value = value
+  show.value = false
+  sendOTP()
+}
+</script>

package/src/components/VaxCell.vue

@@ -0,0 +1,35 @@
+<template>
+  <van-cell center :title :value :label :to :titleClass :valueClass :labelClass :isLink @click="onClick">
+    <template v-if="$slots.icon || icon" #icon>
+      <slot name="icon">
+        <vax-icon v-if="icon" :icon
+          :size="iconSize" :color="iconColor"
+          :background="iconBackground" :stroke-width="iconStrokeWidth" />
+      </slot>
+    </template>
+    <template v-if="$slots.title" #title><slot name="title" /></template>
+    <template v-if="$slots.label" #label><slot name="label" /></template>
+    <template v-if="$slots.value" #value><slot name="value" /></template>
+  </van-cell>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  icon: { type: String },
+  iconSize: { type: Number },
+  iconColor: { type: String },
+  iconBackground: { type: String },
+  iconStrokeWidth: { type: Number },
+  title: { type: String },
+  label: { type: String },
+  value: { type: [String, Number] },
+  titleClass: { type: String },
+  valueClass: { type: String },
+  labelClass: { type: String },
+  isLink: { type: Boolean },
+  to: { type: String },
+  onClick: { type: Function as PropType<() => void> },
+})
+
+const isLink = computed(() => props.isLink || !! props.to)
+</script>

package/src/components/VaxCellGroup.vue

@@ -0,0 +1,50 @@
+<template>
+  <van-cell-group class="vax-card menu" :class="{ compact }" :title>
+    <template v-if="$slots.title" #title><slot name="title" /></template>
+    <slot />
+    <vax-cell v-for="(item, key) in items" :key v-bind="item"
+      :is-link="item.isLink ?? isLink"
+      :title-class="item.titleClass ?? titleClass"
+      :value-class="item.valueClass ?? valueClass"
+      :label-class="item.labelClass ?? labelClass"
+      :icon-size="item.iconSize ?? iconSize"
+      :icon-color="item.iconColor ?? iconColor"
+      :icon-background="item.iconBackground ?? iconBackground"
+      :icon-stroke-width="item.iconStrokeWidth ?? iconStrokeWidth" />
+  </van-cell-group>
+</template>
+
+<script setup lang="ts">
+import vaxCell from './VaxCell.vue'
+
+interface IVaxCardItem {
+  icon?: string
+  iconSize?: number
+  iconColor?: string
+  iconBackground?: string
+  iconStrokeWidth?: number
+  title: string
+  value?: string | number
+  label?: string
+  to?: string
+  titleClass?: string
+  valueClass?: string
+  labelClass?: string
+  isLink?: boolean
+  onClick?: () => void
+}
+
+defineProps({
+  title: { type: String, default: '' },
+  iconSize: { type: Number },
+  iconColor: { type: String },
+  iconBackground: { type: String },
+  iconStrokeWidth: { type: Number },
+  items: { type: Array as PropType<IVaxCardItem[]>, default: () => [] },
+  titleClass: { type: String },
+  valueClass: { type: String },
+  labelClass: { type: String },
+  isLink: { type: Boolean },
+  compact: { type: Boolean, default: false }
+})
+</script>

package/src/components/VaxEmpty.vue

@@ -0,0 +1,18 @@
+<template>
+  <van-empty :image :imageSize :description>
+    <slot />
+  </van-empty>
+</template>
+
+<script setup lang="ts">
+import { useLocale } from '../locale'
+
+const props = defineProps({
+  image: { type: String, default: 'default' },
+  imageSize: { type: Number },
+  description: { type: String },
+})
+
+const { t } = useLocale()
+const description = computed(() => props.description ?? t('empty.noData'))
+</script>

package/src/components/VaxField.vue

@@ -0,0 +1,69 @@
+<template>
+  <van-cell :title="label" :value center is-link @click="edit">
+    <template #icon>
+      <vax-icon :icon class="mr-2" />
+    </template>
+  </van-cell>
+  <!-- Text -->
+  <van-dialog v-model:show="show" :title="label" show-cancel-button @confirm="confirm" @cancel="cancel">
+    <van-field v-model="field" :type="(type as FieldType)" />
+  </van-dialog>
+  <!-- Date -->
+  <van-popup v-model:show="showData" position="bottom">
+    <van-date-picker :model-value="dates" :title="label" @confirm="dateConfirm" @cancel="showData = false" />
+  </van-popup>
+  <!-- Select -->
+  <van-popup v-model:show="showSelect" position="bottom">
+    <van-picker :columns :title="label" @confirm="pickerConfirm" @cancel="showSelect = false" />
+  </van-popup>
+</template>
+
+<script setup lang="ts">
+import type { FieldType } from 'vant'
+
+const { readonly, type, columns } = defineProps({
+  icon: { type: String },
+  label: { type: String },
+  type: { type: String, default: 'text' },
+  readonly: { type: Boolean, default: false },
+  columns: { type: Array as PropType<{ text: string; value: string }[]>, default: () => [] }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const model = defineModel<string | number>()
+const value = computed(() => {
+  if (type === 'select') return columns.find(item => item.value === model.value)?.text || ''
+  else return model.value
+})
+
+// Text
+const show = ref(false)
+const field = ref(model.value)
+const cancel = () => field.value = model.value
+const confirm = () => model.value = field.value
+const edit = () => {
+  if (readonly) return
+  else if (type === 'date') showData.value = true
+  else if (type === 'select') showSelect.value = true
+  else show.value = true
+}
+
+// Data
+const showData = ref(false)
+const dates = computed(() => {
+  const date = new Date()
+  return [ String(date.getFullYear()), String(date.getMonth() + 1), String(date.getDate()) ]
+})
+const dateConfirm = ({ selectedValues }: { selectedValues: string[] }) => {
+  model.value = selectedValues.join('-')
+  showData.value = false
+}
+
+// Picker
+const showSelect = ref(false)
+const pickerConfirm = ({ selectedValues }: { selectedValues: string[] }) => {
+  model.value = selectedValues[0]
+  showSelect.value = false
+}
+</script>

package/src/components/VaxIcon.vue

@@ -0,0 +1,31 @@
+<template>
+  <span v-if="icon" class="i-icon inline-flex items-center gap-1" :style="{ background, color, padding }" :class="{ 'rounded-full': round }">
+    <Icon :icon="name" :width="size" :height="size" :aria-hidden="null" />
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+const props = defineProps({
+  vendor: { type: String, default: 'icon-park-outline' },
+  icon: { type: String, default: '' },
+  size: { type: Number, default: 16 },
+  strokeWidth: { type: Number, default: 3 },
+  color: { type: String },
+  background: { type: String },
+  padding: { type: String },
+  round: { type: Boolean },
+  disabled: { type: Boolean },
+})
+
+const name = computed(() => props.icon.indexOf(':') !== -1 ? props.icon : `${props.vendor}:${props.icon}`)
+const color = computed(() => props.disabled ? 'var(--van-text-color-3)' : props.color || (props.background ? '#FFF' : undefined))
+const round = props.round || (props.background ? true : false)
+const padding = props.padding ? parseInt(props.padding) + 'px' : (props.background ? '8px' : '0')
+</script>
+
+<style scoped>
+:deep(g), :deep(path) { stroke-width: v-bind(strokeWidth) }
+</style>

package/src/components/VaxLoading.vue

@@ -0,0 +1,32 @@
+<template>
+  <Teleport to="body" :disabled="!fullscreen">
+    <div class="vax-loading flex-center p-4" :class="{ 'vax-loading--fullscreen': fullscreen }">
+      <van-loading :type :size :color :vertical>
+        <slot>{{ text }}</slot>
+      </van-loading>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { LoadingType } from 'vant'
+
+defineProps({
+  type: { type: String as PropType<LoadingType>, default: 'circular' },
+  size: { type: Number, default: 48 },
+  color: { type: String, default: '#ccc' },
+  vertical: { type: Boolean, default: false },
+  text: { type: String, default: '' },
+  fullscreen: { type: Boolean, default: false },
+})
+</script>
+
+<style>
+.vax-loading--fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  padding: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
+</style>

package/src/components/VaxNavBar.vue

@@ -0,0 +1,28 @@
+<template>
+  <van-nav-bar :leftArrow :leftText @click-left="onClickLeft">
+    <template v-if="$slots.right" #right>
+      <slot name="right"></slot>
+    </template>
+  </van-nav-bar>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  back: { type: Boolean, default: false },
+  leftArrow: { type: Boolean, default: false },
+  leftText: { type: String, default: '' },
+  clickLeft: { type: Function, default: () => {} },
+})
+
+const textAlign = computed(() => props.leftText ? 'center' : 'left')
+const leftArrow = computed(() => props.leftArrow || props.back)
+const paddingLeft = computed(() => props.leftText || leftArrow.value ? '0' : '16px')
+
+const router = useRouter()
+const onClickLeft = () => props.back ? router.back() : props.clickLeft()
+</script>
+
+<style scoped>
+.van-nav-bar :deep(.van-nav-bar__content > div) { position: static; }
+.van-nav-bar :deep(.van-nav-bar__title) { flex: 1; max-width: 100%; text-align: v-bind(textAlign); padding-left: v-bind(paddingLeft); }
+</style>

package/src/components/VaxPage.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="vax-page">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.vax-page { padding: var(--ex-page-padding, 16px) 0; }
+</style>

package/src/components/VaxSelect.vue

@@ -0,0 +1,78 @@
+<template>
+  <van-field v-bind="$attrs" :model-value="value" colon readonly is-link @click="onShow">
+    <template #input>
+      <span v-if="!multiple">{{ model }}</span>
+      <van-space v-else>
+        <van-tag v-for="item in (model as string[])" plain type="primary">{{ item }}</van-tag>
+      </van-space>
+    </template>
+  </van-field>
+  <van-popup v-model:show="show" destroy-on-close position="bottom" round>
+    <!-- 单选 -->
+    <van-picker v-if="!multiple" v-model="pickerValue" :columns="columns" @confirm="onConfirm" @cancel="show = false" />
+    <!-- 多选 -->
+    <template v-else>
+      <div class="van-picker__toolbar">
+        <van-button class="border-none! bg-white!" @click="show = false">{{ t('cancel') }}</van-button>
+        <van-button class="border-none! bg-white!" plain type="primary" @click="confirm">{{ t('confirm') }}</van-button>
+      </div>
+      <van-checkbox-group v-model="checkboxValue" direction="vertical" class="h-[264px] overflow-auto">
+        <van-cell-group>
+          <van-cell
+            v-for="(item, index) in options"
+            clickable
+            :title="item"
+            @click="toggle(index)">
+            <template #right-icon>
+              <van-checkbox :ref="(el) => checkboxRefs[index] = el" :name="item" @click.stop />
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </van-checkbox-group>
+    </template>
+  </van-popup>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { CheckboxInstance } from 'vant'
+import { computed, ref } from 'vue'
+import { useLocale } from '../locale'
+
+const model = defineModel({ type: [String, Number, Array] as PropType<string | number | number[] | string[]> })
+const value = computed(() => multiple ? Array.isArray(model.value) ? model.value.join(',') : '' : model.value as string | number)
+
+const { multiple, options } = defineProps({
+  multiple: { type: Boolean, default: false },
+  options: { type: Array as PropType<string[]>, default: () => [] },
+})
+
+const { t } = useLocale()
+
+const show = ref(false)
+const onShow = () => {
+  if (multiple) {
+    checkboxValue.value = (model.value as string[]) ?? []
+  } else {
+    pickerValue.value = model.value ? [model.value] as string[] : []
+  }
+  show.value = true
+}
+
+// 单选
+const pickerValue = ref<string[] | number[]>([])
+const columns = computed(() => options?.map((value) => ({ text: value, value })) || [])
+const onConfirm = ({ selectedValues }: { selectedValues: string[] }) => {
+  show.value = false
+  model.value = selectedValues[0]
+}
+
+// 多选
+const checkboxValue = ref<string[] | number[]>([])
+const checkboxRefs = ref<(CheckboxInstance | any)[]>([])
+const toggle = (index: number) => checkboxRefs.value[index]?.toggle()
+const confirm = () => {
+  show.value = false
+  model.value = checkboxValue.value
+}
+</script>

package/src/components/VaxTabbar.vue

@@ -0,0 +1,49 @@
+<template>
+  <van-tabbar v-model="active" placeholder safe-area-inset-bottom>
+    <van-tabbar-item v-for="{ to, name, icon, title, flashed, dot } in data" replace :to :name :dot>
+      <template v-if="!flashed" #icon>
+        <vax-icon :icon :size />
+      </template>
+      <div v-if="!flash || flashed" :class="{ flashed }" class="mt-1.5 font-bold">{{ title }}</div>
+    </van-tabbar-item>
+  </van-tabbar>
+</template>
+
+<script setup lang="ts">
+import { Tabbar as vanTabbar, TabbarItem as vanTabbarItem } from 'vant'
+import VaxIcon from './VaxIcon.vue'
+
+const props = defineProps({
+  menu: { type: Array<{ title?: string, icon: string, to: string, dot?: boolean }>, required: true, default: () => ([]) },
+  flash: { type: Boolean, default: false },
+})
+
+const data = computed(() => props.menu.map(item => ({
+  title: item.title,
+  to: item.to,
+  name: item.to,
+  icon: item.icon,
+  flashed: props.flash && item.title && active.value === item.to,
+  dot: item.dot,
+})))
+
+// 当前路由
+const route = useRoute()
+const routePath = computed(() => {
+  let routePath = ''
+  props.menu.forEach(({ to }) => {
+    if ((route.path + '/').indexOf(to) !== -1 && to.length > routePath.length) routePath = to
+  })
+  return routePath
+})
+
+const active = ref(routePath.value)
+const size = computed(() => props.flash ? 22 : 20)
+
+watchEffect(() => active.value = routePath.value)
+</script>
+
+<style scoped>
+.van-tabbar .van-tabbar-item { --van-tabbar-item-icon-margin-bottom: 0 }
+.van-tabbar .flashed { margin-top: 0; font-size: 14px; }
+</style>

package/src/components/VaxTabs.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="vax-tabs" :class="{ 'vax-tabs--sticky': sticky }">
+    <button v-for="{ name, label, badge } in tabs" :key="name" type="button" class="vax-tab" :class="{ active: name === active }" @click="onPick(name)">
+      <van-badge :content="badge" class="badge">{{ label }}</van-badge>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface IVaxTab {
+  name: string
+  label: string
+  badge?: number | string
+}
+
+const { tabs } = defineProps({
+  tabs: { type: Array as () => IVaxTab[], required: true },
+  sticky: { type: Boolean, default: false },
+})
+
+const active = defineModel<string>('active', { required: true })
+
+function onPick(name: string) {
+  if (active.value !== name) active.value = name
+}
+</script>
+
+<style scoped>
+.vax-tabs {
+  display: flex;
+  gap: 4px;
+  margin: 12px 16px;
+  padding: 4px;
+  background: var(--van-gray-2);
+  border-radius: 10px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.vax-tabs::-webkit-scrollbar { display: none; }
+.vax-tabs--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--van-gray-2);
+}
+.vax-tab {
+  position: relative;
+  flex: 1;
+  min-width: max-content;
+  padding: 8px 14px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--van-text-color-2);
+  cursor: pointer;
+  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
+  white-space: nowrap;
+}
+.vax-tab:active { transform: scale(0.98); }
+.vax-tab.active { background: var(--van-background-2); color: var(--van-text-color); font-weight: 600; }
+.vax-tab .badge { --van-badge-background: var(--van-primary-color); }
+.vax-tab .badge :deep(.van-badge--top-right) { right: -8px; }
+</style>