289 lines
12 KiB
HTML
289 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>图片收集小程序 - 原型汇总</title>
|
|
<!-- 引入Vue.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
|
|
<!-- 引入Element UI CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/index.css">
|
|
<!-- 引入Element UI JavaScript -->
|
|
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/index.js"></script>
|
|
<!-- 引入Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
.preview-container {
|
|
height: 70vh;
|
|
width: 100%;
|
|
border: 1px solid #e4e7ed;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.preview-container iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
.nav-item {
|
|
cursor: pointer;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
transition: all 0.3s;
|
|
}
|
|
.nav-item:hover {
|
|
background-color: #f5f7fa;
|
|
}
|
|
.nav-item.active {
|
|
background-color: #ecf5ff;
|
|
color: #1989fa;
|
|
}
|
|
.role-badge {
|
|
margin-left: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<el-container style="min-height: 100vh;">
|
|
<el-header style="background-color: #1989fa; color: white;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<h1 style="margin: 0; font-size: 20px;">图片收集小程序界面原型</h1>
|
|
<div>
|
|
<el-tag type="success">版本 1.0</el-tag>
|
|
</div>
|
|
</div>
|
|
</el-header>
|
|
|
|
<el-container>
|
|
<el-aside width="250px" style="background-color: #f5f7fa; padding: 20px;">
|
|
<el-card>
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>页面导航</span>
|
|
</div>
|
|
</template>
|
|
|
|
<div style="margin-bottom: 20px;">
|
|
<h3 style="font-size: 16px; margin-bottom: 10px;">小程序页面</h3>
|
|
<div class="nav-item" :class="{active: activePage === 'login'}" @click="openPage('login')">
|
|
<i class="fa fa-sign-in mr-2"></i>登录页
|
|
</div>
|
|
<div class="nav-item" :class="{active: activePage === 'user-home'}" @click="openPage('user-home')">
|
|
<i class="fa fa-home mr-2"></i>普通用户首页
|
|
<el-tag size="small" type="primary" class="role-badge">用户</el-tag>
|
|
</div>
|
|
<div class="nav-item" :class="{active: activePage === 'dept-home'}" @click="openPage('dept-home')">
|
|
<i class="fa fa-home mr-2"></i>部门负责人首页
|
|
<el-tag size="small" type="warning" class="role-badge">部门</el-tag>
|
|
</div>
|
|
<div class="nav-item" :class="{active: activePage === 'admin-home'}" @click="openPage('admin-home')">
|
|
<i class="fa fa-home mr-2"></i>管理员/信息员首页
|
|
<el-tag size="small" type="danger" class="role-badge">管理员</el-tag>
|
|
</div>
|
|
<div class="nav-item" :class="{active: activePage === 'image-upload'}" @click="openPage('image-upload')">
|
|
<i class="fa fa-upload mr-2"></i>上传页
|
|
</div>
|
|
<div class="nav-item" :class="{active: activePage === 'image-detail'}" @click="openPage('image-detail')">
|
|
<i class="fa fa-image mr-2"></i>图片详情页
|
|
</div>
|
|
<div class="nav-item" :class="{active: activePage === 'message-list'}" @click="openPage('message-list')">
|
|
<i class="fa fa-list mr-2"></i>消息列表页
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 style="font-size: 16px; margin-bottom: 10px;">后台管理页面</h3>
|
|
<div class="nav-item" :class="{active: activePage === 'user-management'}" @click="openPage('后台管理页面/user-management')">
|
|
<i class="fa fa-users mr-2"></i>用户管理
|
|
</div>
|
|
<div class="nav-item" :class="{active: activePage === 'department-management'}" @click="openPage('后台管理页面/department-management')">
|
|
<i class="fa fa-building mr-2"></i>部门管理
|
|
</div>
|
|
<div class="nav-item" :class="{active: activePage === 'image-management'}" @click="openPage('后台管理页面/image-management')">
|
|
<i class="fa fa-picture-o mr-2"></i>图片管理
|
|
</div>
|
|
<div class="nav-item" :class="{active: activePage === 'task-management'}" @click="openPage('后台管理页面/task-management')">
|
|
<i class="fa fa-tasks mr-2"></i>任务管理
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card style="margin-top: 20px;">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>用户角色说明</span>
|
|
</div>
|
|
</template>
|
|
<el-table :data="roles" style="width: 100%;">
|
|
<el-table-column prop="name" label="角色" width="80"></el-table-column>
|
|
<el-table-column prop="description" label="描述"></el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-aside>
|
|
|
|
<el-main>
|
|
<el-card>
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>{{ currentPageTitle }}</span>
|
|
<el-button type="text" @click="refreshPreview" size="small">
|
|
<i class="fa fa-refresh"></i> 刷新
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="preview-container">
|
|
<iframe :src="currentPageUrl" ref="previewFrame"></iframe>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px;">
|
|
<h3 style="font-size: 16px; margin-bottom: 10px;">页面说明</h3>
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="页面名称">{{ currentPageTitle }}</el-descriptions-item>
|
|
<el-descriptions-item label="文件路径">{{ currentPageUrl }}</el-descriptions-item>
|
|
<el-descriptions-item label="功能描述">{{ currentPageDescription }}</el-descriptions-item>
|
|
<el-descriptions-item label="适用角色">{{ currentPageRoles }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card style="margin-top: 20px;">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>更新日志</span>
|
|
</div>
|
|
</template>
|
|
<el-timeline>
|
|
<el-timeline-item timestamp="2023-10-01" placement="top">
|
|
<el-card>
|
|
<h4>版本 1.0</h4>
|
|
<p>初始原型版本，使用Element UI实现所有页面</p>
|
|
</el-card>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</el-card>
|
|
</el-main>
|
|
</el-container>
|
|
|
|
<el-footer style="text-align: center; padding: 20px; background-color: #f5f7fa;">
|
|
<p>© 2023 图片收集小程序原型设计</p>
|
|
</el-footer>
|
|
</el-container>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
activePage: 'login',
|
|
currentPageUrl: '小程序页面/login.html',
|
|
currentPageTitle: '登录页',
|
|
currentPageDescription: '用户登录入口，支持手机号验证码登录',
|
|
currentPageRoles: '所有用户',
|
|
roles: [
|
|
{
|
|
name: '管理员',
|
|
description: '系统最高权限，管理用户、部门、任务等'
|
|
},
|
|
{
|
|
name: '信息员',
|
|
description: '管理任务，查看统计数据'
|
|
},
|
|
{
|
|
name: '部门负责人',
|
|
description: '审核部门内图片，查看部门数据'
|
|
},
|
|
{
|
|
name: '普通用户',
|
|
description: '上传图片，查看分配任务'
|
|
}
|
|
],
|
|
pageInfo: {
|
|
'login': {
|
|
title: '登录页',
|
|
description: '用户登录入口，支持手机号验证码登录',
|
|
roles: '所有用户'
|
|
},
|
|
'user-home': {
|
|
title: '普通用户首页',
|
|
description: '显示待完成任务、已上传图片列表和快速上传入口',
|
|
roles: '普通用户'
|
|
},
|
|
'dept-home': {
|
|
title: '部门负责人首页',
|
|
description: '显示部门待审核图片、部门统计和部门切换功能',
|
|
roles: '部门负责人'
|
|
},
|
|
'admin-home': {
|
|
title: '管理员/信息员首页',
|
|
description: '显示待处理任务、统计图表和任务进度查询入口',
|
|
roles: '管理员、信息员'
|
|
},
|
|
'image-upload': {
|
|
title: '上传页',
|
|
description: '支持图片选择、预览、信息填写和提交',
|
|
roles: '普通用户'
|
|
},
|
|
'image-detail': {
|
|
title: '图片详情页',
|
|
description: '显示图片大图、详细信息和操作按钮',
|
|
roles: '所有用户（权限不同显示不同操作）'
|
|
},
|
|
'message-list': {
|
|
title: '消息列表页',
|
|
description: '显示系统通知和消息',
|
|
roles: '所有用户'
|
|
},
|
|
'后台管理页面/user-management': {
|
|
title: '用户管理',
|
|
description: '管理系统用户，包括增删改查和角色分配',
|
|
roles: '管理员'
|
|
},
|
|
'后台管理页面/department-management': {
|
|
title: '部门管理',
|
|
description: '管理部门结构，支持部门树形展示和编辑',
|
|
roles: '管理员'
|
|
},
|
|
'后台管理页面/image-management': {
|
|
title: '图片管理',
|
|
description: '管理所有上传的图片，支持搜索、筛选和批量操作',
|
|
roles: '管理员、信息员'
|
|
},
|
|
'后台管理页面/task-management': {
|
|
title: '任务管理',
|
|
description: '管理系统任务，支持创建、编辑、删除和进度查询',
|
|
roles: '管理员、信息员'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
openPage(page) {
|
|
this.activePage = page;
|
|
this.currentPageUrl = page.includes('后台管理页面') ? page + '.html' : '小程序页面/' + page + '.html';
|
|
|
|
if (this.pageInfo[page]) {
|
|
this.currentPageTitle = this.pageInfo[page].title;
|
|
this.currentPageDescription = this.pageInfo[page].description;
|
|
this.currentPageRoles = this.pageInfo[page].roles;
|
|
}
|
|
},
|
|
refreshPreview() {
|
|
this.$refs.previewFrame.src = this.currentPageUrl;
|
|
}
|
|
},
|
|
mounted() {
|
|
// 确保所有原型文件都已创建
|
|
console.log('图片收集小程序原型汇总页面加载完成');
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |