diff --git a/examples/uni/src/pages-feedback/action-sheet/base.vue b/examples/uni/src/pages-feedback/action-sheet/base.vue
new file mode 100644
index 0000000..3f21c76
--- /dev/null
+++ b/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>
diff --git a/examples/uni/src/pages-feedback/action-sheet/cancel.vue b/examples/uni/src/pages-feedback/action-sheet/cancel.vue
new file mode 100644
index 0000000..ded87fa
--- /dev/null
+++ b/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>
diff --git a/examples/uni/src/pages-feedback/action-sheet/controlled.vue b/examples/uni/src/pages-feedback/action-sheet/controlled.vue
new file mode 100644
index 0000000..b56724e
--- /dev/null
+++ b/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>
diff --git a/examples/uni/src/pages-feedback/action-sheet/custom.vue b/examples/uni/src/pages-feedback/action-sheet/custom.vue
new file mode 100644
index 0000000..db88cbc
--- /dev/null
+++ b/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>
diff --git a/examples/uni/src/pages-feedback/action-sheet/description.vue b/examples/uni/src/pages-feedback/action-sheet/description.vue
new file mode 100644
index 0000000..9bdf5dd
--- /dev/null
+++ b/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>
diff --git a/examples/uni/src/pages-feedback/action-sheet/destructive.vue b/examples/uni/src/pages-feedback/action-sheet/destructive.vue
new file mode 100644
index 0000000..f4d4022
--- /dev/null
+++ b/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>
diff --git a/examples/uni/src/pages-feedback/action-sheet/disabled.vue b/examples/uni/src/pages-feedback/action-sheet/disabled.vue
new file mode 100644
index 0000000..85775ee
--- /dev/null
+++ b/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>
diff --git a/examples/uni/src/pages-feedback/action-sheet/icon.vue b/examples/uni/src/pages-feedback/action-sheet/icon.vue
new file mode 100644
index 0000000..2140964
--- /dev/null
+++ b/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>
diff --git a/examples/uni/src/pages.json b/examples/uni/src/pages.json
index bb82f30..39d2ed8 100644
--- a/examples/uni/src/pages.json
+++ b/examples/uni/src/pages.json
@@ -637,6 +637,38 @@
     {
       "root": "pages-feedback",
       "pages": [
+        {
+          "path": "action-sheet/base",
+          "type": "page"
+        },
+        {
+          "path": "action-sheet/cancel",
+          "type": "page"
+        },
+        {
+          "path": "action-sheet/controlled",
+          "type": "page"
+        },
+        {
+          "path": "action-sheet/custom",
+          "type": "page"
+        },
+        {
+          "path": "action-sheet/description",
+          "type": "page"
+        },
+        {
+          "path": "action-sheet/destructive",
+          "type": "page"
+        },
+        {
+          "path": "action-sheet/disabled",
+          "type": "page"
+        },
+        {
+          "path": "action-sheet/icon",
+          "type": "page"
+        },
         {
           "path": "dialog/base",
           "type": "page"
@@ -733,4 +765,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/skiyee-uni-ui/src/components/sk-action-sheet.vue b/packages/skiyee-uni-ui/src/components/sk-action-sheet.vue
new file mode 100644
index 0000000..eb37227
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/components/sk-action-sheet.vue
@@ -0,0 +1,323 @@
+<script lang="ts">
+/**
+ * sk-action-sheet 组件 - 动作面板组件
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @example
+ * ```vue
+ * <sk-action-sheet v-model="visible" :options="options">
+ * </sk-action-sheet>
+ * ```
+ *
+ * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/feedback/action-sheet
+ */
+
+import type { SkActionSheetUcvProps } from '../styles'
+
+export interface ActionSheetOption {
+  /**
+   * 选项名称
+   */
+  name: string;
+  /**
+   * 选项描述
+   */
+  description?: string;
+  /**
+   * 选项图标
+   */
+  icon?: string;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * 是否为危险操作
+   */
+  destructive?: boolean;
+  /**
+   * 选项值
+   */
+  value?: any;
+}
+
+export interface SkActionSheetProps {
+  /**
+   * 默认是否可见 (非受控)
+   */
+  defaultVisible?: boolean;
+  /**
+   * 选项列表
+   */
+  options: ActionSheetOption[];
+  /**
+   * 取消按钮文本
+   * @default '取消'
+   */
+  cancelText?: string;
+  /**
+   * 标题
+   */
+  title?: string;
+  /**
+   * 描述文本
+   */
+  description?: string;
+  /**
+   * 点击选项后是否关闭
+   * @default true
+   */
+  closeOnClickAction?: boolean;
+  /**
+   * 点击取消按钮后是否关闭
+   * @default true
+   */
+  closeOnClickCancel?: boolean;
+  /**
+   * 点击遮罩层后是否关闭
+   * @default true
+   */
+  closeOnClickOverlay?: boolean;
+  /**
+   * 是否显示安全区域
+   * @default true
+   */
+  safeAreaInsetBottom?: boolean;
+  /**
+   * 是否显示圆角
+   * @default true
+   */
+  round?: boolean;
+  /**
+   * 层级
+   * @default 1100
+   */
+  zIndex?: number;
+  /**
+   * 间距类型
+   * @default 'normal'
+   */
+  spacing?: SkActionSheetUcvProps['spacing'];
+  /**
+   * 用于拓展当前基础样式
+   */
+  clax?: SkActionSheetUcvProps['clax'];
+}
+
+export interface SkActionSheetEmits {
+  /**
+   * 选择选项时触发
+   */
+  (name: 'select', option: ActionSheetOption, index: number): void;
+  /**
+   * 点击取消按钮时触发
+   */
+  (name: 'cancel'): void;
+  /**
+   * 关闭时触发
+   */
+  (name: 'close'): void;
+  /**
+   * 打开时触发
+   */
+  (name: 'open'): void;
+}
+
+export interface SkActionSheetSlots {
+  /**
+   * 自定义标题
+   */
+  title?: () => any;
+  /**
+   * 自定义描述
+   */
+  description?: () => any;
+  /**
+   * 自定义选项内容
+   */
+  option?: (props: { option: ActionSheetOption; index: number }) => any;
+  /**
+   * 自定义取消按钮
+   */
+  cancel?: () => any;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { SkActionSheetUcv } from '../styles'
+import SkIcon from './sk-icon.vue'
+import SkOverlay from './sk-overlay.vue'
+
+defineOptions({
+  inheritAttrs: false,
+  options: {
+    virtualHost: true,
+  },
+})
+
+const props = withDefaults(defineProps<SkActionSheetProps>(), {
+  defaultVisible: false,
+  cancelText: '取消',
+  closeOnClickAction: true,
+  closeOnClickCancel: true,
+  closeOnClickOverlay: true,
+  safeAreaInsetBottom: true,
+  round: true,
+  zIndex: 1100,
+  spacing: 'normal',
+})
+
+const visibleModel = defineModel<boolean>('visible', { default: false })
+
+const emits = defineEmits<SkActionSheetEmits>()
+
+defineSlots<SkActionSheetSlots>()
+
+// 受控/非受控模式处理
+if (visibleModel.value === false && props.defaultVisible) {
+  visibleModel.value = props.defaultVisible
+}
+
+// 计算是否有标题或描述
+const hasHeader = computed(() => props.title || props.description)
+
+// 计算是否有图标
+const hasIcon = computed(() => props.options.some(option => option.icon))
+
+// 计算是否有描述
+const hasDescription = computed(() => props.options.some(option => option.description))
+
+// 计算是否显示取消按钮
+const hasCancel = computed(() => !!props.cancelText)
+
+// 计算样式类
+const classes = computed(() => {
+  const computedProps = {
+    ...props,
+    hasIcon: hasIcon.value,
+    hasDescription: hasDescription.value,
+    hasCancel: hasCancel.value,
+  }
+  return SkActionSheetUcv(computedProps)
+})
+
+// 处理选项点击
+function handleOptionClick(option: ActionSheetOption, index: number) {
+  if (option.disabled) {
+    return
+  }
+
+  emits('select', option, index)
+
+  if (props.closeOnClickAction) {
+    visibleModel.value = false
+  }
+}
+
+// 处理取消按钮点击
+function handleCancelClick() {
+  emits('cancel')
+
+  if (props.closeOnClickCancel) {
+    visibleModel.value = false
+  }
+}
+
+// 处理打开事件
+function handleOpen() {
+  emits('open')
+}
+
+// 处理关闭事件
+function handleClose() {
+  emits('close')
+}
+</script>
+
+<template>
+  <SkOverlay
+    v-model:visible="visibleModel"
+    placement="bottom"
+    animation="slide-up"
+    :z-index="zIndex"
+    :dismissable="closeOnClickOverlay"
+    @open="handleOpen"
+    @close="handleClose"
+  >
+    <div :class="classes.root()">
+      <!-- 标题区域 -->
+      <div
+        v-if="hasHeader"
+        :class="classes.header()"
+      >
+        <slot name="title">
+          <span
+            v-if="title"
+            :class="classes.title()"
+          >{{ title }}</span>
+        </slot>
+        <slot name="description">
+          <span
+            v-if="description"
+            :class="classes.description()"
+          >{{ description }}</span>
+        </slot>
+      </div>
+
+      <!-- 选项列表 -->
+      <div :class="classes.optionList()">
+        <div
+          v-for="(option, index) in options"
+          :key="index"
+          :class="classes.option({ disabled: option.disabled })"
+          @tap="handleOptionClick(option, index)"
+        >
+          <slot
+            name="option"
+            :option="option"
+            :index="index"
+          >
+            <SkIcon
+              v-if="option.icon"
+              :name="option.icon"
+              :class="classes.optionIcon()"
+            />
+            <div :class="classes.optionContent()">
+              <span :class="classes.optionName({ optionVariant: option.destructive ? 'destructive' : 'default' })">
+                {{ option.name }}
+              </span>
+              <span
+                v-if="option.description"
+                :class="classes.optionDescription()"
+              >
+                {{ option.description }}
+              </span>
+            </div>
+          </slot>
+        </div>
+      </div>
+
+      <!-- 取消按钮 -->
+      <div
+        v-if="hasCancel"
+        :class="classes.cancel()"
+        @tap="handleCancelClick"
+      >
+        <slot name="cancel">
+          <span :class="classes.cancelText()">{{ cancelText }}</span>
+        </slot>
+      </div>
+
+      <!-- 安全区域 -->
+      <div
+        v-if="safeAreaInsetBottom"
+        :class="classes.safeArea()"
+      />
+    </div>
+  </SkOverlay>
+</template>
diff --git a/packages/skiyee-uni-ui/src/styles/index.ts b/packages/skiyee-uni-ui/src/styles/index.ts
index cd3dee8..3beffc0 100644
--- a/packages/skiyee-uni-ui/src/styles/index.ts
+++ b/packages/skiyee-uni-ui/src/styles/index.ts
@@ -6,6 +6,9 @@
  * @github https://github.com/skiyee
  */
 
+export type { SkActionSheetUcvProps } from './sk-action-sheet'
+export { SkActionSheetUcv } from './sk-action-sheet'
+
 export type { SkBadgeUcvProps } from './sk-badge'
 export { SkBadgeUcv } from './sk-badge'
 
diff --git a/packages/skiyee-uni-ui/src/styles/sk-action-sheet.ts b/packages/skiyee-uni-ui/src/styles/sk-action-sheet.ts
new file mode 100644
index 0000000..e08b08c
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/styles/sk-action-sheet.ts
@@ -0,0 +1,125 @@
+// @unocss-include
+/**
+ * sk-action-sheet 由 @skiyee/ucv 生成的样式组件
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @example
+ * ```ts
+ * const classes = SkActionSheetUcv(props)
+ * ```
+ *
+ * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/feedback/action-sheet
+ */
+import type { InferProps } from '@skiyee/ucv'
+
+import { ucv } from '@skiyee/ucv'
+
+export const SkActionSheetUcv = ucv({
+  element: {
+    root: 'box-border flex flex-col bg-surface w-full',
+    header: 'flex flex-col items-center text-center border-b border-divider',
+    title: 'font-medium text-primary text-body-large',
+    description: 'text-secondary text-body-small sk-unit:mt-4',
+    optionList: 'flex flex-col',
+    option: 'flex items-center justify-center cursor-pointer transition-colors duration-200 active:bg-hover border-b border-divider',
+    optionContent: 'flex flex-col items-center justify-center flex-1',
+    optionIcon: 'text-primary',
+    optionName: 'text-primary text-body-medium',
+    optionDescription: 'text-secondary text-body-small sk-unit:mt-2',
+    cancel: 'flex items-center justify-center cursor-pointer transition-colors duration-200 active:bg-hover bg-surface',
+    cancelText: 'font-medium text-primary text-body-medium',
+    safeArea: 'w-full',
+  },
+  variants: {
+    round: {
+      true: {
+        root: 'rounded-t-large',
+      },
+      false: {
+        root: 'rounded-none',
+      },
+    },
+    spacing: {
+      compact: {
+        header: 'sk-unit:(px-16 py-12)',
+        option: 'sk-unit:(px-16 py-12)',
+        cancel: 'sk-unit:(px-16 py-12)',
+      },
+      normal: {
+        header: 'sk-unit:(px-16 py-16)',
+        option: 'sk-unit:(px-16 py-16)',
+        cancel: 'sk-unit:(px-16 py-16)',
+      },
+    },
+    optionVariant: {
+      default: {
+        optionName: 'text-primary',
+      },
+      destructive: {
+        optionName: 'text-danger',
+      },
+    },
+    disabled: {
+      true: {
+        option: 'opacity-50 cursor-not-allowed active:bg-transparent',
+      },
+    },
+    hasIcon: {
+      true: {
+        option: 'sk-unit:gap-12',
+      },
+    },
+    hasDescription: {
+      true: {
+        optionContent: 'items-start',
+      },
+    },
+    hasCancel: {
+      true: {
+        root: 'sk-unit:pb-0',
+      },
+      false: {
+        root: '',
+      },
+    },
+    safeAreaInsetBottom: {
+      true: {
+        safeArea: 'pb-safe',
+      },
+      false: {
+        safeArea: 'sk-unit:pb-0',
+      },
+    },
+  },
+  cases: [
+    // 圆角与取消按钮间距
+    {
+      when: { round: true, hasCancel: true },
+      use: {
+        cancel: 'sk-unit:mt-8',
+      },
+    },
+    // 最后一个选项去除底部边框
+    {
+      when: { hasCancel: false },
+      use: {
+        option: 'last:border-b-0',
+      },
+    },
+  ],
+  defaults: {
+    round: true,
+    spacing: 'normal',
+    optionVariant: 'default',
+    disabled: false,
+    hasIcon: false,
+    hasDescription: false,
+    hasCancel: true,
+    safeAreaInsetBottom: true,
+  },
+})
+
+export type SkActionSheetUcvProps = InferProps<typeof SkActionSheetUcv>