feat(navigation): 导航状态改为三态:下线(0)、上线(1)、即将上线(2)

- 后端 NavigationStatusNames 更新为三个状态
- 前端表格状态列从 switch 改为 tag+dropdown
- 搜索和表单的状态选项同步更新
This commit is contained in:
zpc 2026-02-23 13:49:58 +08:00
parent fdf4fc7eca
commit 65fae9d24e
2 changed files with 43 additions and 19 deletions

View File

@ -560,8 +560,9 @@ public class ContentService : IContentService
/// </summary>
private static readonly Dictionary<int, string> NavigationStatusNames = new()
{
{ 0, "即将上线" },
{ 1, "已上线" }
{ 0, "下线" },
{ 1, "上线" },
{ 2, "即将上线" }
};
/// <summary>

View File

@ -29,8 +29,9 @@
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
<el-option label="已上线" :value="1" />
<el-option label="即将上线" :value="0" />
<el-option label="上线" :value="1" />
<el-option label="下线" :value="0" />
<el-option label="即将上线" :value="2" />
</el-select>
</el-form-item>
<el-form-item>
@ -81,17 +82,25 @@
</el-table-column>
<!-- 状态 -->
<el-table-column label="状态" width="120" align="center">
<el-table-column label="状态" width="140" align="center">
<template #default="{ row }">
<el-switch
v-model="row.status"
:active-value="1"
:inactive-value="0"
active-text="已上线"
inactive-text="即将上线"
:loading="row._statusLoading"
@change="(val: number) => handleStatusChange(row, val)"
/>
<el-dropdown trigger="click" @command="(val: number) => handleStatusChange(row, val)">
<el-tag
:type="statusTagType(row.status)"
style="cursor: pointer;"
:loading="row._statusLoading"
>
{{ statusLabel(row.status) }}
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</el-tag>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="1" :disabled="row.status === 1">上线</el-dropdown-item>
<el-dropdown-item :command="0" :disabled="row.status === 0">下线</el-dropdown-item>
<el-dropdown-item :command="2" :disabled="row.status === 2">即将上线</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
@ -191,8 +200,9 @@
<el-form-item label="状态" prop="status" required>
<el-select v-model="state.formData.status" placeholder="请选择状态">
<el-option label="已上线" :value="1" />
<el-option label="即将上线" :value="0" />
<el-option label="上线" :value="1" />
<el-option label="下线" :value="0" />
<el-option label="即将上线" :value="2" />
</el-select>
</el-form-item>
</el-form>
@ -213,7 +223,7 @@
* @description 管理小程序首页导航入口卡片支持图标上传跳转配置和状态管理
*/
import { reactive, ref, onMounted } from 'vue'
import { Plus, Search, Refresh, Edit, Delete, Picture } from '@element-plus/icons-vue'
import { Plus, Search, Refresh, Edit, Delete, Picture, ArrowDown } from '@element-plus/icons-vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import {
getNavigationList,
@ -297,6 +307,18 @@ function getDefaultFormData(): NavigationFormData {
}
}
/** 状态文本映射 */
function statusLabel(status: number): string {
const map: Record<number, string> = { 0: '下线', 1: '上线', 2: '即将上线' }
return map[status] ?? '未知'
}
/** 状态标签颜色映射 */
function statusTagType(status: number): '' | 'success' | 'info' | 'warning' | 'danger' {
const map: Record<number, '' | 'success' | 'info' | 'warning' | 'danger'> = { 0: 'info', 1: 'success', 2: 'warning' }
return map[status] ?? 'info'
}
// ============ API Functions ============
async function loadList() {
@ -373,13 +395,14 @@ function handleEdit(row: NavigationItem) {
}
async function handleStatusChange(row: NavigationItem & { _statusLoading?: boolean }, status: number) {
const oldStatus = row.status
row._statusLoading = true
try {
const res = await updateNavigationStatus({ id: row.id, status })
if (res.code === 0) {
ElMessage.success(status === 1 ? '已上线' : '已设为即将上线')
row.status = status
ElMessage.success(`已设为${statusLabel(status)}`)
} else {
row.status = status === 1 ? 0 : 1
throw new Error(res.message || '状态更新失败')
}
} catch (error) {