feat(action-sheet): 实现 ActionSheet 动作面板组件

examples/uni/src/pages-feedback/action-sheet/base.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+
+const options = [
+  { name: '选项一', value: 1 },
+  { name: '选项二', value: 2 },
+  { name: '选项三', value: 3 },
+]
+
+function handleSelect(option: any) {
+  uni.showToast({
+    title: `选择了：${option.name}`,
+    icon: 'none',
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 p-4">
+    <SkButton @click="visible = true">
+      基础用法
+    </SkButton>
+  </div>
+
+  <SkActionSheet
+    v-model:visible="visible"
+    :options="options"
+    @select="handleSelect"
+  />
+</template>

examples/uni/src/pages-feedback/action-sheet/cancel.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible1 = ref(false)
+const visible2 = ref(false)
+
+const options = [
+  { name: '选项一', value: 1 },
+  { name: '选项二', value: 2 },
+  { name: '选项三', value: 3 },
+]
+
+function handleSelect(option: any) {
+  uni.showToast({
+    title: `选择了：${option.name}`,
+    icon: 'none',
+  })
+}
+
+function handleCancel() {
+  uni.showToast({
+    title: '取消了操作',
+    icon: 'none',
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 p-4">
+    <SkButton @click="visible1 = true">
+      默认取消按钮
+    </SkButton>
+
+    <SkButton @click="visible2 = true">
+      自定义取消文本
+    </SkButton>
+  </div>
+
+  <SkActionSheet
+    v-model:visible="visible1"
+    :options="options"
+    @select="handleSelect"
+    @cancel="handleCancel"
+  />
+
+  <SkActionSheet
+    v-model:visible="visible2"
+    :options="options"
+    cancel-text="关闭"
+    @select="handleSelect"
+    @cancel="handleCancel"
+  />
+</template>

examples/uni/src/pages-feedback/action-sheet/controlled.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+const selectedOption = ref('')
+
+const options = [
+  { name: '选项一', value: 1 },
+  { name: '选项二', value: 2 },
+  { name: '选项三', value: 3 },
+]
+
+function handleSelect(option: any) {
+  selectedOption.value = option.name
+  // 手动控制关闭
+  visible.value = false
+}
+
+function handleCancel() {
+  uni.showToast({
+    title: '取消选择',
+    icon: 'none',
+  })
+}
+
+function handleClose() {
+  // ActionSheet 已关闭
+}
+
+function handleOpen() {
+  // ActionSheet 已打开
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 p-4">
+    <SkButton @click="visible = true">
+      受控模式
+    </SkButton>
+
+    <div
+      v-if="selectedOption"
+      class="text-secondary text-body-small"
+    >
+      当前选择：{{ selectedOption }}
+    </div>
+  </div>
+
+  <SkActionSheet
+    v-model:visible="visible"
+    :options="options"
+    :close-on-click-action="false"
+    @select="handleSelect"
+    @cancel="handleCancel"
+    @open="handleOpen"
+    @close="handleClose"
+  />
+</template>

examples/uni/src/pages-feedback/action-sheet/custom.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible1 = ref(false)
+const visible2 = ref(false)
+const visible3 = ref(false)
+
+const options = [
+  { name: '选项一', value: 1 },
+  { name: '选项二', value: 2 },
+  { name: '选项三', value: 3 },
+]
+
+function handleSelect(option: any) {
+  uni.showToast({
+    title: `选择了：${option.name}`,
+    icon: 'none',
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 p-4">
+    <SkButton @click="visible1 = true">
+      无圆角
+    </SkButton>
+
+    <SkButton @click="visible2 = true">
+      紧凑间距
+    </SkButton>
+
+    <SkButton @click="visible3 = true">
+      自定义层级
+    </SkButton>
+  </div>
+
+  <SkActionSheet
+    v-model:visible="visible1"
+    :options="options"
+    :round="false"
+    @select="handleSelect"
+  />
+
+  <SkActionSheet
+    v-model:visible="visible2"
+    :options="options"
+    spacing="compact"
+    title="紧凑间距示例"
+    @select="handleSelect"
+  />
+
+  <SkActionSheet
+    v-model:visible="visible3"
+    :options="options"
+    :z-index="2000"
+    title="自定义 z-index"
+    description="层级设置为 2000"
+    @select="handleSelect"
+  />
+</template>

examples/uni/src/pages-feedback/action-sheet/description.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+
+const options = [
+  {
+    name: '拍照',
+    description: '使用相机拍摄照片',
+    value: 'camera',
+  },
+  {
+    name: '从相册选择',
+    description: '从手机相册中选择图片',
+    value: 'album',
+  },
+  {
+    name: '从文件选择',
+    description: '从文件管理器中选择',
+    value: 'file',
+  },
+]
+
+function handleSelect(option: any) {
+  uni.showToast({
+    title: `选择了：${option.name}`,
+    icon: 'none',
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 p-4">
+    <SkButton @click="visible = true">
+      带描述文字
+    </SkButton>
+  </div>
+
+  <SkActionSheet
+    v-model:visible="visible"
+    title="请选择上传方式"
+    :options="options"
+    @select="handleSelect"
+  />
+</template>

examples/uni/src/pages-feedback/action-sheet/destructive.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+
+const options = [
+  { name: '编辑', value: 'edit' },
+  { name: '分享', value: 'share' },
+  { name: '删除', value: 'delete', destructive: true },
+]
+
+function handleSelect(option: any) {
+  if (option.destructive) {
+    uni.showModal({
+      title: '确认删除',
+      content: '此操作不可恢复',
+      success: (res) => {
+        if (res.confirm) {
+          uni.showToast({
+            title: '已删除',
+            icon: 'success',
+          })
+        }
+      },
+    })
+  }
+  else {
+    uni.showToast({
+      title: `选择了：${option.name}`,
+      icon: 'none',
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 p-4">
+    <SkButton @click="visible = true">
+      危险操作样式
+    </SkButton>
+  </div>
+
+  <SkActionSheet
+    v-model:visible="visible"
+    title="选择操作"
+    :options="options"
+    @select="handleSelect"
+  />
+</template>

examples/uni/src/pages-feedback/action-sheet/disabled.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+
+const options = [
+  { name: '选项一', value: 1 },
+  { name: '选项二（禁用）', value: 2, disabled: true },
+  { name: '选项三', value: 3 },
+  { name: '选项四（禁用）', value: 4, disabled: true },
+]
+
+function handleSelect(option: any) {
+  uni.showToast({
+    title: `选择了：${option.name}`,
+    icon: 'none',
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 p-4">
+    <SkButton @click="visible = true">
+      禁用选项
+    </SkButton>
+  </div>
+
+  <SkActionSheet
+    v-model:visible="visible"
+    title="部分选项已禁用"
+    :options="options"
+    @select="handleSelect"
+  />
+</template>

examples/uni/src/pages-feedback/action-sheet/icon.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+
+const options = [
+  {
+    name: '微信',
+    icon: 'wechat',
+    value: 'wechat',
+  },
+  {
+    name: '朋友圈',
+    icon: 'moments',
+    value: 'moments',
+  },
+  {
+    name: '微博',
+    icon: 'weibo',
+    value: 'weibo',
+  },
+  {
+    name: 'QQ',
+    icon: 'qq',
+    value: 'qq',
+  },
+]
+
+function handleSelect(option: any) {
+  uni.showToast({
+    title: `分享到：${option.name}`,
+    icon: 'none',
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 p-4">
+    <SkButton @click="visible = true">
+      带图标
+    </SkButton>
+  </div>
+
+  <SkActionSheet
+    v-model:visible="visible"
+    title="分享到"
+    :options="options"
+    @select="handleSelect"
+  />
+</template>