wordpress-theme-aksrt/assets/admin/src/pages/permissions/AttachmentPermissions.vue

<template>
  <div class="aksrt-page-container">
    <PageHeader
      title="附件治理"
      desc="管理各类上传文件的大小、安全限制和审核策略；准入权限请在“基本权限”中配置。"
    >
      <template #actions>
        <n-space>
          <n-button quaternary @click="goModeration">审核策略</n-button>
        </n-space>
      </template>
    </PageHeader>

    <n-spin :show="loading" style="width:100%; min-height:200px;">
      <!-- Summary -->
      <n-card class="aksrt-section-card">
        <div class="aksrt-section-header">
          <h3>上传策略总览</h3>
        </div>
        <n-grid :cols="3" :x-gap="12" :y-gap="12">
          <n-grid-item v-for="item in summaryItems" :key="item.key">
            <div class="aksrt-attach__summary">
              <FaIcon :icon="item.icon" :size="16" :color="item.enabled ? '#52c41a' : 'var(--aksrt-color-muted)'" />
              <div>
                <strong>{{ item.label }}</strong>
                <p>{{ item.enabled ? '已启用' : '已关闭' }}</p>
              </div>
            </div>
          </n-grid-item>
        </n-grid>
      </n-card>

      <!-- Avatar & Cover -->
      <n-card class="aksrt-section-card">
        <div class="aksrt-section-header">
          <h3>用户资料卡背景图</h3>
        </div>
        <n-form :model="form" label-placement="left" label-width="200" class="aksrt-form">
          <n-form-item label="头像/用户资料卡背景图大小上限 (MB)">
            <n-input-number v-model:value="form.avatar_max_size" :min="1" :max="10" style="max-width:160px;" />
          </n-form-item>
        </n-form>
      </n-card>

      <!-- Content uploads -->
      <n-card class="aksrt-section-card">
        <div class="aksrt-section-header">
          <h3>内容上传</h3>
        </div>
        <n-form :model="form" label-placement="left" label-width="200" class="aksrt-form">
          <n-form-item label="投稿图片大小上限 (MB)">
            <n-input-number v-model:value="form.submit_image_max_size" :min="1" :max="20" style="max-width:160px;" />
          </n-form-item>

          <n-form-item label="评论图片大小上限 (MB)">
            <n-input-number v-model:value="form.comment_image_max_size" :min="1" :max="10" style="max-width:160px;" />
          </n-form-item>
        </n-form>
      </n-card>

      <!-- Resource attachments -->
      <n-card class="aksrt-section-card">
        <div class="aksrt-section-header">
          <h3>资源附件</h3>
        </div>
        <n-form :model="form" label-placement="left" label-width="200" class="aksrt-form">
          <n-form-item label="资源附件大小上限 (MB)">
            <n-input-number v-model:value="form.resource_max_size" :min="1" :max="200" style="max-width:160px;" />
          </n-form-item>
        </n-form>
      </n-card>

      <div class="aksrt-form-actions">
        <n-button type="primary" :loading="saving" @click="handleSave">保存配置</n-button>
      </div>
    </n-spin>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import api from '@/api'
import PageHeader from '@/components/PageHeader.vue'
import FaIcon from '@/components/form/FaIcon.vue'

const router = useRouter()
const message = useMessage()

const loading = ref(true)
const saving = ref(false)

const form = reactive({
  avatar_max_size: 2,
  submit_image_max_size: 5,
  comment_image_max_size: 2,
  resource_max_size: 50,
})

const summaryItems = computed(() => [
  { key: 'profile', icon: 'fa fas fa-id-card', label: '资料卡图片', enabled: true },
  { key: 'submit', icon: 'fa fas fa-edit', label: '投稿图片', enabled: true },
  { key: 'comment', icon: 'fa fas fa-comment-dots', label: '评论图片', enabled: true },
  { key: 'resource', icon: 'fa fas fa-file-archive', label: '资源附件', enabled: true },
])

function go(path) {
  router.push(path)
}

function goModeration() { router.push('/permissions/moderation') }

async function load() {
  loading.value = true
  try {
    const permissionRes = await api.getPermissionsAttachmentSettings()

    const permission = permissionRes?.data ?? permissionRes ?? {}

    // Map permission fields
    form.avatar_max_size = Number(permission.avatar_max_size || 2)
    form.submit_image_max_size = Number(permission.submit_image_max_size || 5)
    form.comment_image_max_size = Number(permission.comment_image_max_size || 2)
    form.resource_max_size = Number(permission.resource_max_size || 50)
  } catch (error) {
    message.error(error.message || '加载附件权限失败')
  } finally {
    loading.value = false
  }
}

async function handleSave() {
  saving.value = true
  try {
    await api.savePermissionsAttachmentSettings({
      avatar_max_size: form.avatar_max_size,
      submit_image_max_size: form.submit_image_max_size,
      comment_image_max_size: form.comment_image_max_size,
      resource_max_size: form.resource_max_size,
    })
    message.success('附件治理配置已保存')
  } catch (error) {
    message.error(error.message || '保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(load)
</script>

<style scoped>
.aksrt-attach__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 6px;
  background: #fafafa;
}

.aksrt-attach__summary strong {
  display: block;
  font-size: 13px;
  color: var(--aksrt-color-text);
}

.aksrt-attach__summary p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--aksrt-color-muted);
}
</style>