181 lines
4.1 KiB
Plaintext
181 lines
4.1 KiB
Plaintext
|
|
<template>
|
|
<view class="admin-page">
|
|
<view class="action-bar">
|
|
<button class="btn primary" @click="handlePublish">发布版本</button>
|
|
</view>
|
|
|
|
<view class="admin-card content-card">
|
|
<view class="admin-table">
|
|
<!-- 表头 -->
|
|
<view class="table-header">
|
|
<view class="col col-version"><text>版本号</text></view>
|
|
<view class="col col-platform"><text>平台类型</text></view>
|
|
<view class="col col-info"><text>升级信息</text></view>
|
|
<view class="col col-force"><text>是否强制</text></view>
|
|
<view class="col col-date"><text>发布日期</text></view>
|
|
<view class="col col-url"><text>下载地址</text></view>
|
|
<view class="col col-ops"><text>操作</text></view>
|
|
</view>
|
|
|
|
<!-- 表格内容 -->
|
|
<view class="table-body">
|
|
<view v-if="versionList.length === 0" class="table-empty">
|
|
<text class="empty-txt">暂无数据</text>
|
|
</view>
|
|
<view v-for="item in versionList" :key="item.id" class="table-row">
|
|
<view class="col col-version"><text>{{ item.version }}</text></view>
|
|
<view class="col col-platform"><text>{{ item.platform }}</text></view>
|
|
<view class="col col-info"><text>{{ item.info }}</text></view>
|
|
<view class="col col-force"><text>{{ item.isForce ? '是' : '否' }}</text></view>
|
|
<view class="col col-date"><text>{{ item.date }}</text></view>
|
|
<view class="col col-url"><text class="link">{{ item.url }}</text></view>
|
|
<view class="col col-ops">
|
|
<text class="op-link" @click="handleEdit(item)">编辑</text>
|
|
<text class="op-split">|</text>
|
|
<text class="op-link delete" @click="handleDelete(item)">删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
|
|
interface VersionItem {
|
|
id: number
|
|
version: string
|
|
platform: string
|
|
info: string
|
|
isForce: boolean
|
|
date: string
|
|
url: string
|
|
}
|
|
|
|
const versionList = ref<VersionItem[]>([])
|
|
|
|
const handlePublish = () => {
|
|
uni.showToast({ title: '暂不支持发布', icon: 'none' })
|
|
}
|
|
|
|
const handleEdit = (item: VersionItem) => {
|
|
console.log('Edit', item)
|
|
}
|
|
|
|
const handleDelete = (item: VersionItem) => {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要删除该版本吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.showToast({ title: '删除成功', icon: 'success' })
|
|
}
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.admin-page {
|
|
/* 使用 Layout 的背景和内边距 */
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.action-bar {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.btn.primary {
|
|
width: 100px !important;
|
|
height: 36px !important;
|
|
line-height: 36px !important;
|
|
background: #1890ff !important;
|
|
color: #fff !important;
|
|
font-size: 14px !important;
|
|
border-radius: 4px !important;
|
|
text-align: center !important;
|
|
border: none;
|
|
}
|
|
|
|
.content-card {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.admin-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.table-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background: #fafafa;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.col {
|
|
padding: 12px 15px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&.col-version { width: 100px; }
|
|
&.col-platform { width: 120px; }
|
|
&.col-info { flex: 1; }
|
|
&.col-force { width: 100px; }
|
|
&.col-date { width: 150px; }
|
|
&.col-url { width: 200px; }
|
|
&.col-ops { width: 120px; justify-content: center; }
|
|
}
|
|
|
|
.table-header .col {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.table-empty {
|
|
padding: 100px 0;
|
|
text-align: center;
|
|
width: 100%;
|
|
|
|
.empty-txt {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.link {
|
|
color: #1890ff;
|
|
}
|
|
|
|
.op-link {
|
|
color: #1890ff;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
|
|
&.delete {
|
|
color: #ff4d4f;
|
|
}
|
|
}
|
|
|
|
.op-split {
|
|
margin: 0 8px;
|
|
color: #e8e8e8;
|
|
}
|
|
</style>
|
|
|