feat: 角色创建与赋权、文件管理单页多级目录与上传可下载、api上传目录可写卷

Made-with: Cursor
2026-03-18 18:26:08 +08:00
parent 07f55e0139
commit 7a97ba8c66
11 changed files with 586 additions and 80 deletions
--- a/admin/src/views/files/FileManage.vue
+++ b/admin/src/views/files/FileManage.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="file-manage">
+    <el-card>
+      <template #header>
+        <span>文件管理</span>
+      </template>
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="图片与图标" name="images">
+          <p class="tip">图片与图标统一在此管理，支持可下载/不可下载。功能开发中。</p>
+        </el-tab-pane>
+        <el-tab-pane label="功能模块" name="module">
+          <div class="module-toolbar">
+            <el-select v-model="siteId" placeholder="选择站点" filterable style="width: 220px; margin-right: 12px" @change="onSiteChange">
+              <el-option v-for="s in sites" :key="s.id" :label="s.name" :value="s.id" />
+            </el-select>
+            <el-button :disabled="!siteId" @click="showNewFolder = true">新建文件夹</el-button>
+            <el-upload :show-file-list="false" :disabled="!siteId" :before-upload="beforeUpload">
+              <el-button type="primary" :disabled="!siteId" :loading="uploading">上传文件</el-button>
+            </el-upload>
+          </div>
+          <el-alert v-if="!siteId" title="请先选择站点" type="info" style="margin: 12px 0" />
+
+          <template v-else>
+            <div class="breadcrumb-wrap">
+              <el-breadcrumb separator="/">
+                <el-breadcrumb-item @click="currentPath = ''"><a href="javascript:;">根目录</a></el-breadcrumb-item>
+                <el-breadcrumb-item v-for="(p, i) in pathParts" :key="i">
+                  <a href="javascript:;" @click="currentPath = pathParts.slice(0, i + 1).join('/')">{{ p }}</a>
+                </el-breadcrumb-item>
+              </el-breadcrumb>
+            </div>
+            <div class="subdirs" v-if="subDirs && subDirs.length">
+              <span class="label">子目录：</span>
+              <el-button v-for="d in subDirs" :key="d" link type="primary" @click="enterDir(d)">{{ d }}/</el-button>
+            </div>
+            <el-table :data="list" v-loading="loading" stripe style="margin-top: 12px">
+              <el-table-column label="文件名" prop="name" min-width="180" />
+              <el-table-column label="存储路径" prop="file_path" min-width="200" show-overflow-tooltip />
+              <el-table-column label="可下载" width="80">
+                <template #default="{ row }">{{ row.downloadable ? '是' : '否' }}</template>
+              </el-table-column>
+              <el-table-column label="大小" width="100">
+                <template #default="{ row }">{{ formatSize(row.size) }}</template>
+              </el-table-column>
+              <el-table-column label="上传时间" prop="created_at" width="180" />
+              <el-table-column label="操作" width="100" fixed="right">
+                <template #default="{ row }">
+                  <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-empty v-if="!loading && list.length === 0 && (!subDirs || !subDirs.length)" description="当前目录为空，可上传文件或新建文件夹" />
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+
+    <!-- 上传前选择是否可下载 -->
+    <el-dialog v-model="uploadDialogVisible" title="上传文件" width="400px" :close-on-click-modal="false">
+      <el-form label-width="100px">
+        <el-form-item label="当前目录">
+          <span>{{ currentPath || '根目录' }}</span>
+        </el-form-item>
+        <el-form-item label="允许下载">
+          <el-switch v-model="uploadDownloadable" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="uploadDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="uploading" @click="doUpload">确定上传</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 新建文件夹 -->
+    <el-dialog v-model="showNewFolder" title="新建文件夹" width="400px">
+      <el-form label-width="80px">
+        <el-form-item label="目录名">
+          <el-input v-model="newFolderName" placeholder="当前目录下新建，可填多级如 a/b" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showNewFolder = false">取消</el-button>
+        <el-button type="primary" @click="createFolder">创建</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getSites, getSiteAssets, uploadSiteAsset, deleteSiteAsset, createSiteFolder } from '../../api/admin'
+
+const activeTab = ref('module')
+const siteId = ref('')
+const sites = ref([])
+const list = ref([])
+const subDirs = ref([])
+const loading = ref(false)
+const currentPath = ref('')
+const uploading = ref(false)
+const uploadDialogVisible = ref(false)
+const uploadDownloadable = ref(true)
+const pendingFile = ref(null)
+const showNewFolder = ref(false)
+const newFolderName = ref('')
+
+const pathParts = computed(() => {
+  const p = currentPath.value
+  if (!p) return []
+  return p.split('/').filter(Boolean)
+})
+
+const fetchSites = async () => {
+  try {
+    const res = await getSites()
+    sites.value = res.list || []
+    if (sites.value.length && !siteId.value) siteId.value = sites.value[0].id
+  } catch (e) {
+    ElMessage.error(e.message)
+  }
+}
+
+const fetchList = async () => {
+  if (!siteId.value) {
+    list.value = []
+    subDirs.value = []
+    return
+  }
+  loading.value = true
+  try {
+    const res = await getSiteAssets(siteId.value, currentPath.value || undefined)
+    list.value = res.list || []
+    subDirs.value = res.sub_dirs || []
+  } catch (e) {
+    ElMessage.error(e.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+const onSiteChange = () => {
+  currentPath.value = ''
+  fetchList()
+}
+
+const enterDir = (name) => {
+  currentPath.value = currentPath.value ? currentPath.value + '/' + name : name
+}
+
+watch([siteId, currentPath], fetchList)
+
+const beforeUpload = (file) => {
+  pendingFile.value = file
+  uploadDownloadable.value = true
+  uploadDialogVisible.value = true
+  return false
+}
+
+const doUpload = async () => {
+  if (!pendingFile.value || !siteId.value) return
+  uploading.value = true
+  try {
+    await uploadSiteAsset(siteId.value, pendingFile.value, {
+      folder: currentPath.value || undefined,
+      downloadable: uploadDownloadable.value
+    })
+    ElMessage.success('上传成功')
+    uploadDialogVisible.value = false
+    pendingFile.value = null
+    fetchList()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || e.message || '上传失败')
+  } finally {
+    uploading.value = false
+  }
+}
+
+const createFolder = async () => {
+  const name = (newFolderName.value || '').trim()
+  if (!name) {
+    ElMessage.warning('请输入目录名')
+    return
+  }
+  const fullPath = currentPath.value ? currentPath.value + '/' + name : name
+  try {
+    await createSiteFolder(siteId.value, fullPath)
+    ElMessage.success('创建成功')
+    showNewFolder.value = false
+    newFolderName.value = ''
+    fetchList()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || e.message)
+  }
+}
+
+const handleDelete = async (row) => {
+  await ElMessageBox.confirm('确定删除该文件？', '提示', { type: 'warning' })
+  try {
+    await deleteSiteAsset(siteId.value, row.id)
+    ElMessage.success('删除成功')
+    fetchList()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || e.message)
+  }
+}
+
+const formatSize = (bytes) => {
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+}
+
+onMounted(() => fetchSites().then(() => fetchList()))
+</script>
+
+<style scoped>
+.file-manage .tip { color: #666; font-size: 14px; }
+.module-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+.breadcrumb-wrap { margin-top: 12px; }
+.subdirs { margin-top: 8px; font-size: 13px; color: #666; }
+.subdirs .label { margin-right: 8px; }
+</style>
--- a/admin/src/views/settings/RolePermissions.vue
+++ b/admin/src/views/settings/RolePermissions.vue
@@ -4,14 +4,22 @@
      <template #header>
        <div class="card-header">
          <span>角色权限管理</span>
-          <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
+          <div>
+            <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
+            <el-button type="success" @click="showCreate = true">创建角色</el-button>
+          </div>
        </div>
      </template>
-      <p class="tip">超级管理员(9527)拥有全部权限且不可修改。为其他角色勾选其可用的后台权限。</p>
+      <p class="tip">超级管理员(9527)拥有全部权限且不可修改。为其他角色勾选其可用的后台权限；可创建自定义角色并赋权。</p>
      <el-table v-loading="loading" :data="list" border stripe>
-        <el-table-column prop="role_name" label="角色" width="140" />
+        <el-table-column prop="role_name" label="角色" width="160">
+          <template #default="{ row }">
+            <el-input v-if="row.is_custom" v-model="row.role_name" size="small" placeholder="角色名" style="width: 120px" />
+            <span v-else>{{ row.role_name }}</span>
+          </template>
+        </el-table-column>
        <el-table-column prop="role_id" label="role_id" width="100" />
-        <el-table-column label="权限">
+        <el-table-column label="权限" min-width="400">
          <template #default="{ row }">
            <span v-if="row.role_id === 9527" class="perm-all">（全部权限，不可修改）</span>
            <div v-else class="perm-checkboxes">
@@ -26,20 +34,48 @@
            </div>
          </template>
        </el-table-column>
+        <el-table-column label="操作" width="100" fixed="right">
+          <template #default="{ row }">
+            <el-button v-if="row.is_custom" link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            <span v-else>—</span>
+          </template>
+        </el-table-column>
      </el-table>
    </el-card>
+
+    <el-dialog v-model="showCreate" title="创建角色" width="500px">
+      <el-form label-width="90px">
+        <el-form-item label="角色名称" required>
+          <el-input v-model="createForm.role_name" placeholder="请输入角色名称" />
+        </el-form-item>
+        <el-form-item label="权限">
+          <div class="perm-checkboxes">
+            <el-checkbox v-for="p in allPermissions" :key="p.key" v-model="createForm._checked[p.key]">
+              {{ p.name }}
+            </el-checkbox>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showCreate = false">取消</el-button>
+        <el-button type="primary" :loading="creating" @click="handleCreate">创建</el-button>
+      </template>
+    </el-dialog>
  </div>
 </template>

 <script setup>
-import { ref, reactive, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
-import { getRolePermissionsList, updateRolePermissions } from '../../api/admin'
+import { ref, reactive, onMounted, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getRolePermissionsList, updateRolePermissions, createRole, deleteRole } from '../../api/admin'

 const list = ref([])
 const allPermissions = ref([])
 const loading = ref(false)
 const saving = ref(false)
+const showCreate = ref(false)
+const creating = ref(false)
+const createForm = reactive({ role_name: '', _checked: {} })

 function buildChecked(permissions) {
  const o = {}
@@ -71,7 +107,9 @@ const handleSave = async () => {
    for (const row of list.value) {
      if (row.role_id === 9527) continue
      const permissions = allPermissions.value.filter((p) => row._checked[p.key]).map((p) => p.key)
-      await updateRolePermissions(row.role_id, { permissions })
+      const payload = { permissions }
+      if (row.is_custom && row.role_name) payload.role_name = row.role_name
+      await updateRolePermissions(row.role_id, payload)
    }
    ElMessage.success('保存成功')
  } catch (e) {
@@ -81,6 +119,50 @@ const handleSave = async () => {
  }
 }

+const resetCreateForm = () => {
+  createForm.role_name = ''
+  createForm._checked = {}
+  allPermissions.value.forEach((p) => {
+    createForm._checked[p.key] = false
+  })
+}
+
+const handleCreate = async () => {
+  const name = (createForm.role_name || '').trim()
+  if (!name) {
+    ElMessage.warning('请输入角色名称')
+    return
+  }
+  creating.value = true
+  try {
+    const permissions = allPermissions.value.filter((p) => createForm._checked[p.key]).map((p) => p.key)
+    await createRole({ role_name: name, permissions })
+    ElMessage.success('创建成功')
+    showCreate.value = false
+    resetCreateForm()
+    fetchList()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || e.message)
+  } finally {
+    creating.value = false
+  }
+}
+
+const handleDelete = async (row) => {
+  await ElMessageBox.confirm('确定删除该角色？删除后使用该角色的用户需重新分配角色。', '提示', { type: 'warning' })
+  try {
+    await deleteRole(row.role_id)
+    ElMessage.success('删除成功')
+    fetchList()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || e.message)
+  }
+}
+
+watch(showCreate, (v) => {
+  if (v) resetCreateForm()
+})
+
 onMounted(fetchList)
 </script>