befly-admin-ui 1.8.16 → 1.8.18

package/components/detailPanel.vue

@@ -0,0 +1,195 @@
+<template>
+    <div class="detail-panel">
+        <div class="detail-content">
+            <div v-if="data">
+                <div v-for="field in normalizedFields" :key="field.colKey" class="detail-item">
+                    <div class="detail-label">{{ field.title }}</div>
+                    <div class="detail-value">
+                        <!-- 状态字段特殊处理 -->
+                        <template v-if="field.colKey === 'state'">
+                            <TTag v-if="data.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
+                            <TTag v-else-if="data.state === 2" shape="round" theme="warning" variant="light-outline">禁用</TTag>
+                            <TTag v-else-if="data.state === 0" shape="round" theme="danger" variant="light-outline">已删除</TTag>
+                        </template>
+                        <!-- 自定义插槽 -->
+                        <template v-else-if="$slots[field.colKey]">
+                            <slot :name="field.colKey" :value="data[field.colKey]" :row="data"></slot>
+                        </template>
+                        <!-- 默认显示 -->
+                        <template v-else>
+                            {{ formatValue(data[field.colKey], field) }}
+                        </template>
+                    </div>
+                </div>
+            </div>
+            <div v-else class="detail-empty">
+                <div class="empty-icon">📋</div>
+                <div class="empty-text">{{ emptyText }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { Tag as TTag } from "tdesign-vue-next";
+
+const props = defineProps({
+    /**
+     * 当前行数据
+     */
+    data: {
+        type: Object,
+        default: null
+    },
+    /**
+     * 字段配置（columns 格式）：[{ colKey: 'id', title: 'ID' }]
+     * 自动过滤 row-select、operation 等非数据列
+     */
+    fields: {
+        type: Array,
+        required: true
+    },
+    /**
+     * 需要过滤的列 key
+     */
+    excludeKeys: {
+        type: Array,
+        default: () => ["row-select", "operation", "index"]
+    },
+    /**
+     * 空数据时的提示文字
+     */
+    emptyText: {
+        type: String,
+        default: "暂无数据"
+    }
+});
+
+/**
+ * 标准化字段配置（仅 columns：colKey/title）
+ * 注意：模板对“嵌套 ref（对象属性里的 computed/ref）”不会自动解包，
+ * 所以这里必须暴露为顶层 computed，避免 v-for 误迭代 computed 对象本身。
+ */
+const normalizedFields = computed(() => {
+    const row = props.data && typeof props.data === "object" ? props.data : null;
+    const dataId = row && Object.hasOwn(row, "id") ? row.id : undefined;
+
+    const rawFields = props.fields;
+    const inputFields = Array.isArray(rawFields) ? rawFields : [];
+    const excludeKeys = Array.isArray(props.excludeKeys) ? props.excludeKeys : [];
+
+    const fields = inputFields
+        .filter((item) => {
+            return Boolean(item) && typeof item === "object";
+        })
+        .map((item) => {
+            const colKey = item.colKey;
+            if (item.colKey.length === 0) {
+                return null;
+            }
+            if (excludeKeys.includes(item.colKey)) {
+                return null;
+            }
+
+            return {
+                colKey: item.colKey,
+                title: item.title || item.colKey,
+                default: item.default,
+                formatter: item.formatter
+            };
+        })
+        .filter((item) => {
+            return Boolean(item);
+        });
+
+    // 约定：页面表格不展示 id，但右侧详情始终展示 id（如果 data.id 存在）
+    if (typeof dataId !== "undefined" && !fields.some((f) => f.colKey === "id")) {
+        fields.unshift({
+            colKey: "id",
+            title: "ID",
+            default: "-",
+            formatter: undefined
+        });
+    }
+
+    const safeFields = fields.filter((item) => {
+        if (!item || typeof item !== "object") {
+            return false;
+        }
+        return item.colKey?.length > 0;
+    });
+
+    return safeFields;
+});
+
+function formatValue(value, field) {
+    if (value === null || value === undefined || value === "") {
+        return field.default || "-";
+    }
+    if (field.formatter) {
+        const result = field.formatter(value);
+        return result;
+    }
+    return value;
+}
+</script>
+
+<style scoped lang="scss">
+.detail-panel {
+    height: 100%;
+    overflow: auto;
+    background: var(--bg-color-container);
+}
+
+.detail-content {
+    padding: var(--spacing-md);
+}
+
+.detail-item {
+    margin-bottom: var(--spacing-sm);
+    padding: var(--spacing-sm) 0;
+    border-bottom: 1px solid var(--border-color-light);
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border-bottom: none;
+    }
+}
+
+.detail-label {
+    color: var(--text-secondary);
+    margin-bottom: 6px;
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+}
+
+.detail-value {
+    color: var(--text-primary);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    word-break: break-all;
+    line-height: 1.5;
+}
+
+.detail-empty {
+    text-align: center;
+    padding: var(--spacing-xl) 0;
+    color: var(--text-placeholder);
+}
+
+.empty-icon {
+    font-size: 40px;
+    margin-bottom: var(--spacing-sm);
+    opacity: 0.5;
+}
+
+.empty-text {
+    font-size: var(--font-size-sm);
+}
+</style>

package/components/pageDialog.vue

@@ -0,0 +1,199 @@
+<template>
+    <TDialog v-model:visible="innerVisible" :header="props.title === '' ? true : props.title" :width="props.width" placement="center" attach="body" :close-btn="false" :footer="true" :confirm-loading="props.confirmLoading" :close-on-overlay-click="false" :close-on-esc-keydown="false" @close="onDialogClose" @confirm="onDialogConfirm" @cancel="onDialogCancel">
+        <template #footer>
+            <div class="dialog-footer">
+                <TButton variant="outline" @click="onFooterClose">关闭</TButton>
+                <TPopconfirm v-if="props.isConfirm" content="确定要提交吗？" :disabled="props.confirmLoading" @confirm="onFooterConfirm">
+                    <TButton theme="primary" :loading="props.confirmLoading">确定</TButton>
+                </TPopconfirm>
+            </div>
+        </template>
+        <div class="dialog-wrapper">
+            <slot :visible="innerVisible" :open="open" :close="close" :toggle="toggle" />
+        </div>
+    </TDialog>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+import { Button as TButton, Dialog as TDialog, Popconfirm as TPopconfirm } from "tdesign-vue-next";
+
+defineOptions({
+    inheritAttrs: false
+});
+
+const openDelay = 100;
+const closeDelay = 300;
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: undefined
+    },
+    title: {
+        type: String,
+        default: ""
+    },
+    width: {
+        type: String,
+        default: "600px"
+    },
+    confirmLoading: {
+        type: Boolean,
+        default: false
+    },
+    isConfirm: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const emit = defineEmits(["update:modelValue", "close", "confirm", "cancel"]);
+
+let openDelayTimer = null;
+let closeDelayTimer = null;
+
+function clearTimer(timer) {
+    if (timer) {
+        clearTimeout(timer);
+    }
+    return null;
+}
+
+// 所有弹框约定：始终使用 v-if + v-model(modelValue)
+const innerVisible = ref(false);
+
+function open() {
+    emit("update:modelValue", true);
+}
+
+function close() {
+    openDelayTimer = clearTimer(openDelayTimer);
+    closeDelayTimer = clearTimer(closeDelayTimer);
+
+    innerVisible.value = false;
+    // 延迟通知上层关闭：配合 v-if，保证离场动画播完再卸载
+    closeDelayTimer = setTimeout(() => {
+        emit("update:modelValue", false);
+        closeDelayTimer = null;
+    }, closeDelay);
+}
+
+function toggle() {
+    if (innerVisible.value) {
+        close();
+        return;
+    }
+    open();
+}
+
+function createEventContext(trigger) {
+    return {
+        trigger: trigger,
+        visible: innerVisible.value,
+        open: open,
+        close: close,
+        toggle: toggle,
+        getVisible: () => innerVisible.value
+    };
+}
+
+function applyModelValue(value) {
+    if (value) {
+        // 关键点：先渲染为 false，再延迟 true，保证 v-if + 初次 visible=true 时也能触发进入动画
+        openDelayTimer = clearTimer(openDelayTimer);
+        innerVisible.value = false;
+        openDelayTimer = setTimeout(() => {
+            innerVisible.value = true;
+            openDelayTimer = null;
+        }, openDelay);
+        return;
+    }
+
+    openDelayTimer = clearTimer(openDelayTimer);
+    innerVisible.value = false;
+}
+
+onMounted(() => {
+    if (props.modelValue === true) {
+        applyModelValue(true);
+    }
+});
+
+onBeforeUnmount(() => {
+    openDelayTimer = clearTimer(openDelayTimer);
+    closeDelayTimer = clearTimer(closeDelayTimer);
+});
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        if (value !== true && value !== false) {
+            return;
+        }
+
+        applyModelValue(value);
+    },
+    { immediate: false }
+);
+
+function closeByTrigger(trigger) {
+    // 固定交互：confirm 不自动关闭（等待异步提交成功后由调用侧 context.close() 决定关闭）
+    if (trigger === "confirm") {
+        return;
+    }
+    // cancel/close 自动关闭
+    close();
+}
+
+function onDialogClose() {
+    const context = createEventContext("close");
+    closeByTrigger("close");
+    emit("close", context);
+}
+
+function onDialogConfirm() {
+    const context = createEventContext("confirm");
+    emit("confirm", context);
+    closeByTrigger("confirm");
+}
+
+function onDialogCancel() {
+    const context = createEventContext("cancel");
+    emit("cancel", context);
+    closeByTrigger("cancel");
+}
+
+function onFooterConfirm() {
+    const context = createEventContext("confirm");
+    emit("confirm", context);
+    closeByTrigger("confirm");
+}
+
+function onFooterClose() {
+    const context = createEventContext("cancel");
+    emit("cancel", context);
+    closeByTrigger("cancel");
+}
+
+defineExpose({
+    open: open,
+    close: close,
+    toggle: toggle,
+    getVisible: () => innerVisible.value
+});
+</script>
+
+<style lang="scss" scoped>
+.dialog-wrapper {
+    background-color: var(--bg-color-page);
+    padding: var(--spacing-md);
+    border-radius: var(--border-radius);
+}
+.dialog-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+</style>