ow

uniapp/youjiala/src/components/file-add-sheet/file-add-sheet.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * 新建操作面板：点悬浮「+」弹出的底部抽屉，只两项——上传文件 / 新建文件夹
+ * （对应旧系统 OperatorStation 的 UploadOutlined + FolderAddOutlined 能力）。
+ * 组件只渲染与派发 action，真实上传/建目录由页面接 DMS 接口。
+ */
+import { useLocale } from "uview-pro";
+import { computed } from "vue";
+
+interface AddAction {
+  key: string;
+  label: string;
+  icon: string;
+}
+
+defineProps({
+  /** 面板是否展开 */
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  /** 抽屉关闭（遮罩/下滑） */
+  (e: "close"): void;
+  /** 点了某项新建动作 */
+  (e: "action", key: string): void;
+}>();
+
+const { t } = useLocale();
+
+// computed：切换语言后文案跟随重算（tab 页组件实例常驻，setup 只跑一次）
+const actions = computed<AddAction[]>(() => [
+  { key: "upload", label: t("FilePage.addUpload"), icon: "arrow-up-fill" },
+  { key: "folder", label: t("FilePage.addFolder"), icon: "plus-circle-fill" },
+]);
+</script>
+
+<template>
+  <!-- u-popup 只认 modelValue（v-model），绑 :show 会静默弹不出 -->
+  <u-popup :model-value="visible" mode="bottom" round="24" @close="emit('close')">
+    <view class="file-add-sheet">
+      <text class="file-add-sheet__title">
+        {{ t("FilePage.addTitle") }}
+      </text>
+      <view v-for="action in actions" :key="action.key" class="file-add-sheet__row" @tap="emit('action', action.key)">
+        <u-icon :name="action.icon" size="40" color="#2b8fff" />
+        <text class="file-add-sheet__row-text">
+          {{ action.label }}
+        </text>
+      </view>
+      <view class="file-add-sheet__safe" />
+    </view>
+  </u-popup>
+</template>
+
+<style lang="scss" scoped>
+.file-add-sheet {
+  padding: 40rpx 32rpx 0;
+  background-color: #ffffff;
+
+  &__title {
+    display: block;
+    padding: 0 8rpx 24rpx;
+    font-size: 26rpx;
+    color: #8f959e;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 24rpx;
+    margin-bottom: 16rpx;
+    padding: 30rpx 32rpx;
+    border-radius: 20rpx;
+    background-color: #f5f6f8;
+  }
+
+  &__row-text {
+    font-size: 30rpx;
+    color: #1f2329;
+  }
+
+  /* 底部留白：贴屏安全区（H5 无 env 时也有 32rpx 呼吸） */
+  &__safe {
+    height: calc(32rpx + env(safe-area-inset-bottom));
+  }
+}
+</style>