schoolNews/schoolNewsWeb/src/views/admin/manage/content/ColumnManagementView.vue

<template>
  <AdminLayout 
    title="内容管理" 
    subtitle="管理网站横幅、栏目、标签等内容信息"
  >
    <div class="column-management">
      <div class="action-bar">
        <el-button type="primary" @click="showCreateDialog">+ 新增栏目</el-button>
      </div>

      <el-table :data="columns" style="width: 100%" row-key="id" :tree-props="{children: 'children'}">
        <el-table-column prop="name" label="栏目名称" min-width="200" />
        <el-table-column prop="code" label="栏目编码" width="150" />
        <el-table-column prop="sort" label="排序" width="80" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status ? 'success' : 'info'">
              {{ row.status ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="editColumn(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteColumn(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </AdminLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElButton, ElTable, ElTableColumn, ElTag, ElMessage } from 'element-plus';
import { AdminLayout } from '@/views/admin';

defineOptions({
  name: 'ColumnManagementView'
});

const columns = ref<any[]>([]);

onMounted(() => {
  loadColumns();
});

function loadColumns() {
  // TODO: 加载栏目数据
}

function showCreateDialog() {
  // TODO: 显示创建栏目对话框
}

function editColumn(row: any) {
  // TODO: 编辑栏目
}

function deleteColumn(row: any) {
  // TODO: 删除栏目
  ElMessage.success('删除成功');
}
</script>

<style lang="scss" scoped>
.column-management {
  background: #FFFFFF;
  padding: 20px;
  border-radius: 14px;
}

.action-bar {
  margin-bottom: 20px;
}
</style>