Vue 3 + Element Plus + Vite,12 页面(PC 7 页 + 移动端 5 页), 暖色亲和视觉风格,手机模拟框小程序预览,完整模拟数据 + CRUD 操作。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
57 lines
2.6 KiB
Vue
57 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<h2 style="margin:0 0 20px;font-size:20px;">系统设置</h2>
|
|
|
|
<el-tabs v-model="activeTab">
|
|
<el-tab-pane label="管理员账号" name="admins">
|
|
<div class="card-soft">
|
|
<el-table :data="store.admins" stripe style="width:100%;">
|
|
<el-table-column prop="username" label="用户名" width="150" />
|
|
<el-table-column prop="role" label="角色" width="150" />
|
|
<el-table-column prop="lastLogin" label="最后登录" width="200" />
|
|
</el-table>
|
|
</div>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="操作日志" name="logs">
|
|
<div class="card-soft">
|
|
<el-table :data="store.logs" stripe style="width:100%;" max-height="500">
|
|
<el-table-column prop="time" label="时间" width="170" />
|
|
<el-table-column prop="action" label="操作类型" width="110">
|
|
<template #default="{ row }">
|
|
<el-tag v-if="row.action.includes('删除')" type="danger" size="small">{{ row.action }}</el-tag>
|
|
<el-tag v-else-if="row.action.includes('新增')" type="success" size="small">{{ row.action }}</el-tag>
|
|
<el-tag v-else type="warning" size="small">{{ row.action }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="target" label="操作对象" width="140" />
|
|
<el-table-column prop="detail" label="详情" min-width="250" />
|
|
</el-table>
|
|
</div>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="系统参数" name="params">
|
|
<div class="card-soft">
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="系统版本">v1.0.0 原型</el-descriptions-item>
|
|
<el-descriptions-item label="每日标准工时">10 小时</el-descriptions-item>
|
|
<el-descriptions-item label="满分标准">10 分</el-descriptions-item>
|
|
<el-descriptions-item label="日薪基准">100 元/天</el-descriptions-item>
|
|
<el-descriptions-item label="打卡有效范围">项目位置 500 米内</el-descriptions-item>
|
|
<el-descriptions-item label="上班打卡截止">08:00</el-descriptions-item>
|
|
<el-descriptions-item label="下班打卡时间">18:00 左右</el-descriptions-item>
|
|
<el-descriptions-item label="服务器">阿里云 ECS</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { store } from '../../stores/index.js'
|
|
|
|
const activeTab = ref('admins')
|
|
</script>
|