ow

uniapp/youjiala/src/components/folder-name-dialog/folder-name-dialog.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+/**
+ * 新建文件夹命名对话框：居中卡片（标题 + 输入 + 取消/创建），
+ * 只负责收集名称——非法字符校验、CreateDmsFolder 接口与结果提示由页面分流。
+ * 提交成功后由父级收起 visible；submitting 期间禁用按钮防连点。
+ */
+import { useLocale } from "uview-pro";
+import { computed, ref, watch } from "vue";
+
+const props = defineProps({
+    /** 对话框是否展开 */
+    visible: {
+        type: Boolean,
+        default: false,
+    },
+    /** 创建请求在途：置灰两个按钮 */
+    submitting: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits<{
+    /** 取消/遮罩关闭 */
+    (e: "close"): void;
+    /** 点了创建且名称非空 */
+    (e: "confirm", name: string): void;
+}>();
+
+const { t } = useLocale();
+
+const name = ref("");
+
+/** 空白名不算可提交 */
+const canSubmit = computed(() => name.value.trim().length > 0);
+
+// 每次展开清掉上次的残留输入（对话框实例常驻 tab 页）
+watch(
+    () => props.visible,
+    (on) => {
+        if (on) {
+            name.value = "";
+        }
+    },
+);
+
+function onConfirm(): void {
+    if (!props.submitting && canSubmit.value) {
+        emit("confirm", name.value.trim());
+    }
+}
+</script>
+
+<template>
+    <!-- u-popup 只认 modelValue（v-model）；提交中禁点遮罩防误关 -->
+    <u-popup :model-value="props.visible" mode="center" round="24" :close-on-click-overlay="!props.submitting"
+        @close="emit('close')">
+        <view class="folder-name-dialog">
+            <text class="folder-name-dialog__title">
+                {{ t("FilePage.addFolder") }}
+            </text>
+            <input v-model="name" class="folder-name-dialog__input" :placeholder="t('FilePage.folderPlaceholder')"
+                :maxlength="50" :disabled="props.submitting" confirm-type="done" @confirm="onConfirm">
+            <view class="folder-name-dialog__actions">
+                <view class="folder-name-dialog__btn" @click="emit('close')">
+                    <text class="folder-name-dialog__btn-text">
+                        {{ t("FilePage.folderCancel") }}
+                    </text>
+                </view>
+                <view class="folder-name-dialog__btn folder-name-dialog__btn--primary"
+                    :class="{ 'folder-name-dialog__btn--muted': !canSubmit || props.submitting }" @click="onConfirm">
+                    <text class="folder-name-dialog__btn-text folder-name-dialog__btn-text--primary">
+                        {{ t("FilePage.folderConfirm") }}
+                    </text>
+                </view>
+            </view>
+        </view>
+    </u-popup>
+</template>
+
+<style lang="scss" scoped>
+.folder-name-dialog {
+    width: 560rpx;
+    padding: 40rpx 32rpx 32rpx;
+    background-color: #ffffff;
+
+    &__title {
+        display: block;
+        padding-bottom: 28rpx;
+        font-size: 32rpx;
+        font-weight: 600;
+        color: #1f2329;
+        text-align: center;
+    }
+
+    &__input {
+        box-sizing: border-box;
+        width: 100%;
+        height: 80rpx;
+        padding: 0 24rpx;
+        border: 2rpx solid #e6e7ea;
+        border-radius: 16rpx;
+        font-size: 28rpx;
+        color: #1f2329;
+        background-color: #f7f8fa;
+    }
+
+    &__actions {
+        display: flex;
+        gap: 20rpx;
+        margin-top: 32rpx;
+    }
+
+    &__btn {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        height: 76rpx;
+        border-radius: 999rpx;
+        background-color: #f5f6f8;
+
+        &--primary {
+            background-color: #2b8fff;
+        }
+
+        /* 名称为空或提交中：主按钮置灰（仍可点，由 onConfirm 拦截） */
+        &--muted {
+            background-color: #b9d6ff;
+        }
+    }
+
+    &__btn-text {
+        font-size: 28rpx;
+        color: #5c626b;
+
+        &--primary {
+            color: #ffffff;
+        }
+    }
+}
+</style>