chore: update

.env

 VITE_LOGIN_URL=https://login.ezijing.com/auth/login/index
+VITE_LAB_URL=https://digitalmarketinglab.ezijing.com
\ No newline at end of file

.env.dev

 VITE_LOGIN_URL=https://login.ezijing.com/auth/login/index
+VITE_LAB_URL=https://digitalmarketinglab.ezijing.com
\ No newline at end of file

.env.test

 VITE_LOGIN_URL=https://login2.ezijing.com/auth/login/index
+VITE_LAB_URL=https://digitalmarketinglab.ezijing.com
\ No newline at end of file

src/assets/styles/element/index.scss

@@ -5,6 +5,9 @@
     'primary': (
       'base': #aa1941
     )
+  ),
+  $dialog: (
+    'border-radius': '8px'
   )
 );
 

src/components/base/AppList.vue

@@ -8,26 +8,22 @@ interface IRemoteProps {
   callback?: any
 }
 
-const props = withDefaults(
-  defineProps<{
-    remote?: IRemoteProps
-    filters?: any[]
-    moreFilters?: any[]
-    columns?: any[]
-    data?: any[]
-    hasPagination?: boolean
-    limit?: number
-    isLimit?: boolean
-  }>(),
-  {
-    isLimit: false,
-    hasPagination: true,
-    limit: 10,
-    data() {
-      return []
-    }
-  }
-)
+interface Props {
+  remote?: IRemoteProps
+  filters?: any[]
+  filterForm?: any
+  columns?: any[]
+  data?: any[]
+  hasPagination?: boolean
+  limit?: number
+}
+const props = withDefaults(defineProps<Props>(), {
+  hasPagination: true,
+  limit: 10,
+  filters: () => [],
+  columns: () => [],
+  data: () => []
+})
 
 const filterFormRef = ref()
 const loading = ref(false)
@@ -60,11 +56,7 @@ const fetchList = (isReset = false) => {
   // 翻页参数设置
   if (props.hasPagination) {
     requestParams.page = page.currentPage
-    if (props.isLimit === true) {
-      requestParams.limit = page.size
-    } else {
-      requestParams['per-page'] = page.size
-    }
+    requestParams['per-page'] = page.size
   }
   // 接口请求之前
   if (beforeRequest) {
@@ -133,7 +125,7 @@ defineExpose({ refetch, tableRef })
     <div class="table-list-hd">
       <!-- 筛选 -->
       <div class="table-list-filter" v-if="filters && filters.length">
-        <el-form :inline="true" :model="params" ref="filterFormRef" @submit.prevent>
+        <el-form :inline="true" :model="params" v-bind="filterForm" ref="filterFormRef" @submit.prevent>
           <template v-for="item in filters" :key="item.prop">
             <el-form-item :label="item.label" :prop="item.prop">
               <template v-if="item.slots">
@@ -175,19 +167,21 @@ defineExpose({ refetch, tableRef })
       </div>
       <div class="table-list-hd-aside"><slot name="header-aside" /></div>
     </div>
+    <div class="table-list-buttons"><slot name="header-buttons"></slot></div>
     <slot></slot>
     <!-- 主体 -->
     <div class="table-list-bd">
       <slot name="body" v-bind="{ data: dataList }">
         <el-table
+          stripe
+          :header-cell-style="{ background: '#ededed' }"
           :data="dataList"
           v-loading="loading"
           v-bind="$attrs"
           style="height: 100%"
           ref="tableRef"
-          :header-cell-style="{ background: '#EFEFEF' }"
         >
-          <el-table-column v-bind="item || {}" v-for="item in columns" :key="item.prop">
+          <el-table-column align="center" v-bind="item || {}" v-for="item in columns" :key="item.prop">
             <template #default="scope" v-if="item.slots || item.computed">
               <slot :name="item.slots" v-bind="scope" v-if="item.slots"></slot>
               <div v-html="item.computed(scope)" v-if="item.computed"></div>
@@ -234,6 +228,12 @@ defineExpose({ refetch, tableRef })
 .table-list-filter {
   flex: 1;
 }
+.table-list-buttons {
+  margin-bottom: 20px;
+  &:empty {
+    display: none;
+  }
+}
 // .table-list-bd {
 //   flex: 1;
 // }
@@ -249,4 +249,8 @@ defineExpose({ refetch, tableRef })
 .el-table-column--selection .cell {
   padding: 0 14px !important;
 }
+.el-button a {
+  margin: -8px -15px;
+  padding: 8px 15px;
+}
 </style>

src/components/base/AppUpload.vue

@@ -105,7 +105,7 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
         <el-icon><Plus /></el-icon>
       </template>
       <template v-else>
-        <el-button type="primary" class="app-upload-btn">点击上传</el-button>
+        <el-button round class="app-upload-btn">本地文件</el-button>
       </template>
     </template>
     <div class="avatar-uploader" v-else>

src/components/layout/menus.ts

@@ -8,7 +8,7 @@ export const menus: IMenuItem[] = [
       {
         icon: Tickets,
         name: '实验指导书管理',
-        path: '/admin/lab/guides'
+        path: '/admin/lab/book'
       },
       {
         icon: Tickets,
@@ -28,39 +28,21 @@ export const menus: IMenuItem[] = [
     ]
   },
   {
-    name: '智能陪练',
-    path: '/course'
-  },
-  {
-    name: '大赛训练',
-    path: '/admin',
-    children: [
-      {
-        icon: Tickets,
-        name: '讲师管理',
-        path: '/admin/teacher'
-      }
-    ]
+    name: '技能大赛',
+    path: '/admin/contest'
   },
   {
     name: '大赛成绩',
-    path: '/admin',
-    children: [
-      {
-        icon: Tickets,
-        name: '讲师管理',
-        path: '/admin/teacher'
-      }
-    ]
+    path: '/admin/contest/score'
   },
   {
     name: '系统管理',
-    path: '/system',
+    path: '/admin/system',
     children: [
       {
         icon: Tickets,
         name: '实验管理',
-        path: '/system/cover'
+        path: '/admin/system/experiment'
       }
     ]
   }

src/modules/admin/lab/book/api.ts

+import httpRequest from '@/utils/axios'
+
+// 获取学员列表
+export function getBookList(params?: { name?: string; lab_id?: string; page?: number; page_size?: number }) {
+  return httpRequest.get('/api/lab/backend/book/index', { params })
+}

src/modules/admin/lab/book/components/FormDialog.vue

+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import AppUpload from '../../../../../components/base/AppUpload.vue'
+
+interface Props {
+  data?: any
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update'): void
+}>()
+
+const title = $computed(() => {
+  return '新增实验指导书'
+})
+
+const formRef = $ref<FormInstance>()
+const form = reactive({ title: '', file: [], status: 1 })
+watchEffect(() => {
+  Object.assign(form, props.data)
+})
+const rules = ref<FormRules>({
+  title: [{ required: true, message: '请输入问题描述', trigger: 'blur' }],
+  content: [{ required: true, message: '请输入问题详情', trigger: 'blur' }]
+})
+// 提交
+function handleSubmit() {
+  formRef?.validate().then(update)
+}
+// 修改
+const update = () => {
+  // submitSuggestion(form).then(() => {
+  //   ElMessage({ message: '提交成功', type: 'success' })
+  //   emit('update')
+  //   formRef?.resetFields()
+  // })
+}
+</script>
+
+<template>
+  <el-dialog :title="title" :close-on-click-modal="false" width="600px">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
+      <el-form-item label="实验指导书文件" prop="title">
+        <AppUpload v-model="form.file">
+          <template #tip>实验指导书文件支持格式包含：doc docx xls xlsx pdf ppt pptx，大小不超过50M</template>
+        </AppUpload>
+      </el-form-item>
+      <el-form-item label="实验指导书名称" prop="content">
+        <el-input v-model="form.title"></el-input>
+      </el-form-item>
+      <el-form-item label="关联实验课程" prop="files">
+        <el-input v-model="form.title" />
+      </el-form-item>
+      <el-form-item label="关联实验" prop="files">
+        <el-select v-model="form.title" />
+      </el-form-item>
+      <el-form-item label="有效状态" prop="files">
+        <el-radio-group v-model="form.status" class="ml-4">
+          <el-radio label="1">有效</el-radio>
+          <el-radio label="2">失效</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+        <el-checkbox label="我已阅读并同意"></el-checkbox>
+        <a
+          href="https://view.officeapps.live.com/op/view.aspx?src=https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/%E7%B4%AB%E8%8D%86%E6%95%99%E8%82%B2%E7%94%A8%E6%88%B7%E5%85%A5%E9%A9%BB%E5%8F%8A%E7%BD%91%E7%BB%9C%E6%95%99%E5%AD%A6%E8%B5%84%E6%BA%90%E5%8D%8F%E8%AE%AE(1).docx"
+          target="_blank"
+          >《紫荆教育用户入驻及网络教学资源协议》</a
+        >
+      </el-form-item>
+      <el-row justify="center">
+        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
+        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
+      </el-row>
+    </el-form>
+  </el-dialog>
+</template>

src/modules/admin/lab/book/components/ListItem.vue

+<script setup lang="ts">
+interface Props {
+  data: any
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="list-item">
+    <div class="icon"></div>
+    <div class="list-item-main">
+      <h2>基金产品（中）（初级）</h2>
+      <h6>失效</h6>
+      <p>文件大小：1MB</p>
+      <p>观看次数：165次</p>
+      <p>创建人：张三丰</p>
+      <p>创建时间：2022-03-21 15:36:07</p>
+    </div>
+    <div class="cover">
+      <div class="cover-inner">
+        <el-button type="primary" round auto-insert-space>查看</el-button>
+        <el-button type="primary" round auto-insert-space>编辑</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.list-item {
+  position: relative;
+  display: flex;
+  padding: 20px;
+  background: #f2f2f2;
+  border-radius: 5px;
+  overflow: hidden;
+  &:hover {
+    .cover {
+      display: block;
+    }
+  }
+  .cover {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    .el-button {
+      width: 130px;
+      margin: 10px;
+    }
+  }
+  .cover-inner {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

src/modules/admin/lab/book/index.ts

+import type { RouteRecordRaw } from 'vue-router'
+import AppLayout from '@/components/layout/Index.vue'
+
+export const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/admin/lab',
+    component: AppLayout,
+    redirect: '/admin/lab/book',
+    children: [
+      { path: 'book', component: () => import('./views/Index.vue') },
+      { path: 'book/:id', component: () => import('./views/View.vue'), props: true }
+    ]
+  }
+]

src/modules/admin/lab/book/views/Index.vue

+<script setup lang="ts">
+import { CirclePlusFilled } from '@element-plus/icons-vue'
+import ListItem from '../components/ListItem.vue'
+import FormDialog from '../components/FormDialog.vue'
+// import { getBookList } from '../api'
+
+// 列表配置
+const listOptions = {
+  // remote: {
+  //   httpRequest: getBookList,
+  //   params: { name: '', lab_id: '' }
+  // },
+  filters: [
+    { type: 'input', prop: 'name', label: '实验指导书名称', placeholder: '请输入实验指导书名称' },
+    { type: 'select', prop: 'lab_id', label: '关联实验', placeholder: '请选择关联实验' }
+  ],
+  columns: [{ label: '名称', prop: 'name' }],
+  data: [{}, {}, {}, {}, {}, {}, {}]
+}
+
+let dialogVisible = $ref(false)
+function handleAdd() {
+  dialogVisible = true
+}
+</script>
+
+<template>
+  <AppCard title="实验指导书管理">
+    <AppList v-bind="listOptions">
+      <template #header-buttons>
+        <el-button type="primary" round :icon="CirclePlusFilled" @click="handleAdd">新增实验指导书</el-button>
+      </template>
+      <template #body="{ data }">
+        <div class="list-card">
+          <ListItem v-for="item in data" :data="item" :key="item.id"></ListItem>
+        </div>
+      </template>
+    </AppList>
+    <FormDialog v-model="dialogVisible"></FormDialog>
+  </AppCard>
+</template>
+
+<style lang="scss" scoped>
+.list-card {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+</style>

src/modules/admin/lab/book/views/View.vue

+<script setup lang="ts"></script>
+
+<template>
+  <AppCard title="查看实验指导书">
+    <el-descriptions>
+      <el-descriptions-item label="实验指导书名称">kooriookami</el-descriptions-item>
+      <el-descriptions-item label="文件大小">18100000000</el-descriptions-item>
+      <el-descriptions-item label="观看次数">Suzhou</el-descriptions-item>
+      <el-descriptions-item label="关联实验课程">kooriookami</el-descriptions-item>
+      <el-descriptions-item label="关联实验">18100000000</el-descriptions-item>
+      <el-descriptions-item label="有效状态">Suzhou</el-descriptions-item>
+      <el-descriptions-item label="创建人">Suzhou</el-descriptions-item>
+      <el-descriptions-item label="创建时间">Suzhou</el-descriptions-item>
+    </el-descriptions>
+  </AppCard>
+</template>

src/modules/admin/lab/discuss/api.ts

+import httpRequest from '@/utils/axios'
+
+// 获取学员列表
+export function getBookList(params?: { name?: string; lab_id?: string; page?: number; page_size?: number }) {
+  return httpRequest.get('/api/lab/backend/book/index', { params })
+}

src/modules/admin/lab/discuss/views/Index.vue

+<script setup lang="ts">
+// import { getBookList } from '../api'
+
+// 列表配置
+const listOptions = {
+  // remote: {
+  //   httpRequest: getBookList,
+  //   params: { name: '', lab_id: '' }
+  // },
+  filterForm: { labelWidth: 100 },
+  filters: [
+    { type: 'select', prop: 'lab_id', label: '实验课程名称', placeholder: '请选择实验课程名称' },
+    { type: 'select', prop: 'lab_id', label: '实验名称', placeholder: '请选择实验名称' },
+    { type: 'select', prop: 'lab_id', label: '专业', placeholder: '请选择专业' },
+    { type: 'select', prop: 'lab_id', label: '班级', placeholder: '请选择班级' },
+    { type: 'input', prop: 'name', label: '学生姓名', placeholder: '请输入学生姓名' }
+  ],
+  columns: [
+    { label: '序号', type: 'index', width: 60 },
+    { label: '实验名称', prop: 'name' },
+    { label: '专业', prop: 'name' },
+    { label: '班级', prop: 'name' },
+    { label: '姓名', prop: 'name' },
+    { label: '学号', prop: 'name' },
+    { label: '标题', prop: 'name' },
+    { label: '评论数量', prop: 'name' },
+    { label: '是否回复', prop: 'name' },
+    { label: '更新时间', prop: 'name' },
+    { label: '操作', slots: 'table-x' }
+  ],
+  data: [{}]
+}
+</script>
+
 <template>
-  <AppCard title="实验讨论交流"></AppCard>
+  <AppCard title="实验讨论交流">
+    <AppList v-bind="listOptions">
+      <template #table-x>
+        <el-button>评论</el-button>
+      </template>
+    </AppList>
+  </AppCard>
 </template>

src/modules/admin/lab/guides/views/Index.vue

-<template>
-  <AppCard title="实验指导书管理"></AppCard>
-</template>

src/modules/admin/lab/score/api.ts

+import httpRequest from '@/utils/axios'
+
+// 获取学员列表
+export function getBookList(params?: { name?: string; lab_id?: string; page?: number; page_size?: number }) {
+  return httpRequest.get('/api/lab/backend/book/index', { params })
+}

src/modules/admin/lab/score/views/Index.vue

+<script setup lang="ts">
+import { Upload, Promotion } from '@element-plus/icons-vue'
+// import { getBookList } from '../api'
+
+const LAB_URL = import.meta.env.VITE_LAB_URL
+
+// 列表配置
+const listOptions = {
+  // remote: {
+  //   httpRequest: getBookList,
+  //   params: { name: '', lab_id: '' }
+  // },
+  filterForm: { labelWidth: 100 },
+  filters: [
+    { type: 'select', prop: 'lab_id', label: '实验课程名称', placeholder: '请选择实验课程名称' },
+    { type: 'select', prop: 'lab_id', label: '实验名称', placeholder: '请选择实验名称' },
+    { type: 'select', prop: 'lab_id', label: '专业', placeholder: '请选择专业' },
+    { type: 'select', prop: 'lab_id', label: '班级', placeholder: '请选择班级' },
+    { type: 'input', prop: 'name', label: '学生姓名', placeholder: '请输入学生姓名' }
+  ],
+  columns: [
+    { label: '序号', type: 'index', width: 60 },
+    { label: '所属专业', prop: 'name' },
+    { label: '所属班级', prop: 'name' },
+    { label: '姓名', prop: 'name' },
+    { label: '学号', prop: 'name' },
+    { label: '实验名称', prop: 'name' },
+    { label: '提交状态', prop: 'name' },
+    { label: '实验成绩', prop: 'name' },
+    { label: '更新时间', prop: 'name' },
+    { label: '操作', slots: 'table-x' }
+  ],
+  data: [{}]
+}
+</script>
+
 <template>
-  <AppCard title="实验成绩管理"></AppCard>
+  <AppCard title="实验成绩管理">
+    <AppList v-bind="listOptions">
+      <template #header-buttons>
+        <el-row justify="space-between">
+          <el-button type="primary" round :icon="Upload">批量导入</el-button>
+          <a :href="LAB_URL" target="_blank">
+            <el-button type="primary" round :icon="Promotion">进入实验室</el-button>
+          </a>
+        </el-row>
+      </template>
+      <template #table-x>
+        <el-button>打分</el-button>
+      </template>
+    </AppList>
+  </AppCard>
 </template>

src/modules/admin/lab/video/api.ts

+import httpRequest from '@/utils/axios'
+
+// 获取学员列表
+export function getBookList(params?: { name?: string; lab_id?: string; page?: number; page_size?: number }) {
+  return httpRequest.get('/api/lab/backend/book/index', { params })
+}

src/modules/admin/lab/video/components/FormDialog.vue

+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import AppUpload from '../../../../../components/base/AppUpload.vue'
+
+interface Props {
+  data?: any
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update'): void
+}>()
+
+const title = $computed(() => {
+  return '新增实验指导书'
+})
+
+const formRef = $ref<FormInstance>()
+const form = reactive({ title: '', file: [], status: 1 })
+watchEffect(() => {
+  Object.assign(form, props.data)
+})
+const rules = ref<FormRules>({
+  title: [{ required: true, message: '请输入问题描述', trigger: 'blur' }],
+  content: [{ required: true, message: '请输入问题详情', trigger: 'blur' }]
+})
+// 提交
+function handleSubmit() {
+  formRef?.validate().then(update)
+}
+// 修改
+const update = () => {
+  // submitSuggestion(form).then(() => {
+  //   ElMessage({ message: '提交成功', type: 'success' })
+  //   emit('update')
+  //   formRef?.resetFields()
+  // })
+}
+</script>
+
+<template>
+  <el-dialog :title="title" :close-on-click-modal="false" width="600px">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
+      <el-form-item label="实验指导书文件" prop="title">
+        <AppUpload v-model="form.file">
+          <template #tip>实验指导书文件支持格式包含：doc docx xls xlsx pdf ppt pptx，大小不超过50M</template>
+        </AppUpload>
+      </el-form-item>
+      <el-form-item label="实验指导书名称" prop="content">
+        <el-input v-model="form.title"></el-input>
+      </el-form-item>
+      <el-form-item label="关联实验课程" prop="files">
+        <el-input v-model="form.title" />
+      </el-form-item>
+      <el-form-item label="关联实验" prop="files">
+        <el-select v-model="form.title" />
+      </el-form-item>
+      <el-form-item label="有效状态" prop="files">
+        <el-radio-group v-model="form.status" class="ml-4">
+          <el-radio label="1">有效</el-radio>
+          <el-radio label="2">失效</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+        <el-checkbox label="我已阅读并同意"></el-checkbox>
+        <a
+          href="https://view.officeapps.live.com/op/view.aspx?src=https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/%E7%B4%AB%E8%8D%86%E6%95%99%E8%82%B2%E7%94%A8%E6%88%B7%E5%85%A5%E9%A9%BB%E5%8F%8A%E7%BD%91%E7%BB%9C%E6%95%99%E5%AD%A6%E8%B5%84%E6%BA%90%E5%8D%8F%E8%AE%AE(1).docx"
+          target="_blank"
+          >《紫荆教育用户入驻及网络教学资源协议》</a
+        >
+      </el-form-item>
+      <el-row justify="center">
+        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
+        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
+      </el-row>
+    </el-form>
+  </el-dialog>
+</template>

src/modules/admin/lab/video/components/ListItem.vue

+<script setup lang="ts">
+interface Props {
+  data: any
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="list-item">
+    <div class="icon"></div>
+    <div class="list-item-main">
+      <h2>基金产品（中）（初级）</h2>
+      <h6>失效</h6>
+      <p>文件大小：1MB</p>
+      <p>观看次数：165次</p>
+      <p>创建人：张三丰</p>
+      <p>创建时间：2022-03-21 15:36:07</p>
+    </div>
+    <div class="cover">
+      <div class="cover-inner">
+        <el-button type="primary" round auto-insert-space>查看</el-button>
+        <el-button type="primary" round auto-insert-space>编辑</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.list-item {
+  position: relative;
+  display: flex;
+  padding: 20px;
+  background: #f2f2f2;
+  border-radius: 5px;
+  overflow: hidden;
+  &:hover {
+    .cover {
+      display: block;
+    }
+  }
+  .cover {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    .el-button {
+      width: 130px;
+      margin: 10px;
+    }
+  }
+  .cover-inner {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

src/modules/admin/lab/video/views/Index.vue

+<script setup lang="ts">
+import { CirclePlusFilled } from '@element-plus/icons-vue'
+import ListItem from '../components/ListItem.vue'
+// import { getBookList } from '../api'
+
+// 列表配置
+const listOptions = {
+  // remote: {
+  //   httpRequest: getBookList,
+  //   params: { name: '', lab_id: '' }
+  // },
+  filters: [
+    { type: 'input', prop: 'name', label: '操作视频名称', placeholder: '请输入操作视频名称' },
+    { type: 'select', prop: 'lab_id', label: '关联实验', placeholder: '请选择关联实验' }
+  ],
+  columns: [{ label: '名称', prop: 'name' }],
+  data: [{}]
+}
+</script>
+
 <template>
-  <AppCard title="实验操作视频管理"></AppCard>
+  <AppCard title="实验操作视频管理">
+    <AppList v-bind="listOptions">
+      <template #header-buttons>
+        <el-button type="primary" round :icon="CirclePlusFilled">新增操作视频</el-button>
+      </template>
+      <template #body="{ data }">
+        <div class="list-card">
+          <ListItem v-for="item in data" :data="item" :key="item.id"></ListItem>
+        </div>
+      </template>
+    </AppList>
+  </AppCard>
 </template>
+
+<style lang="scss" scoped>
+.list-card {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+</style>

src/modules/admin/lab/video/views/View.vue

+<script setup lang="ts"></script>
+
+<template>
+  <AppCard title="查看实验指导书">
+    <el-descriptions>
+      <el-descriptions-item label="实验指导书名称">kooriookami</el-descriptions-item>
+      <el-descriptions-item label="文件大小">18100000000</el-descriptions-item>
+      <el-descriptions-item label="观看次数">Suzhou</el-descriptions-item>
+      <el-descriptions-item label="关联实验课程">kooriookami</el-descriptions-item>
+      <el-descriptions-item label="关联实验">18100000000</el-descriptions-item>
+      <el-descriptions-item label="有效状态">Suzhou</el-descriptions-item>
+      <el-descriptions-item label="创建人">Suzhou</el-descriptions-item>
+      <el-descriptions-item label="创建时间">Suzhou</el-descriptions-item>
+    </el-descriptions>
+  </AppCard>
+</template>

src/modules/admin/system/experiment/api.ts

+import httpRequest from '@/utils/axios'
+
+// 获取实验列表
+export function getExperimentList(params?: { name?: string; lab_id?: string; page?: number; page_size?: number }) {
+  return httpRequest.get('/api/lab/backend/book/index', { params })
+}

src/modules/admin/system/experiment/components/FormDialog.vue

+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+
+interface Props {
+  data?: any
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update'): void
+}>()
+
+const title = $computed(() => {
+  return '新增实验'
+})
+
+const formRef = $ref<FormInstance>()
+const form = reactive({ title: '', status: 1 })
+watchEffect(() => {
+  Object.assign(form, props.data)
+})
+const rules = ref<FormRules>({
+  title: [{ required: true, message: '请输入问题描述', trigger: 'blur' }],
+  content: [{ required: true, message: '请输入问题详情', trigger: 'blur' }]
+})
+// 提交
+function handleSubmit() {
+  formRef?.validate().then(update)
+}
+// 修改
+const update = () => {
+  // submitSuggestion(form).then(() => {
+  //   ElMessage({ message: '提交成功', type: 'success' })
+  //   emit('update')
+  //   formRef?.resetFields()
+  // })
+}
+</script>
+
+<template>
+  <el-dialog :title="title" :close-on-click-modal="false" width="600px">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
+      <el-form-item label="实验所属部门/学校" prop="title">
+        <el-select v-model="form.title"></el-select>
+      </el-form-item>
+      <el-form-item label="实验课程" prop="content">
+        <el-select v-model="form.title"></el-select>
+      </el-form-item>
+      <el-form-item label="实验名称" prop="files">
+        <el-input v-model="form.title" />
+      </el-form-item>
+      <el-form-item label="实验学时" prop="files">
+        <el-input v-model="form.title" />
+      </el-form-item>
+      <el-form-item label="指导教师" prop="files">
+        <el-input v-model="form.title" />
+      </el-form-item>
+      <el-form-item label="实验类型" prop="files">
+        <el-select v-model="form.title"></el-select>
+      </el-form-item>
+      <el-form-item label="实验总成绩" prop="files">
+        <el-input v-model="form.title" />
+      </el-form-item>
+      <el-form-item label="有效状态" prop="files">
+        <el-radio-group v-model="form.status" class="ml-4">
+          <el-radio label="1">有效</el-radio>
+          <el-radio label="2">失效</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-row justify="center">
+        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
+        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
+      </el-row>
+    </el-form>
+  </el-dialog>
+</template>

src/modules/admin/system/experiment/components/SelectClassDialog.vue

+<script setup lang="ts">
+// 列表配置
+const listOptions = {
+  // remote: {
+  //   httpRequest: getExperimentList,
+  //   params: { name: '' }
+  // },
+  columns: [
+    { type: 'selection' },
+    { label: '序号', type: 'index', width: 60 },
+    { label: '学号', prop: 'name' },
+    { label: '姓名', prop: 'name' },
+    { label: '性别', prop: 'name' },
+    { label: '所属部门/学校', prop: 'name' },
+    { label: '专业', prop: 'name' },
+    { label: '班级', prop: 'name' }
+  ],
+  data: [{}]
+}
+</script>
+<template>
+  <el-dialog title="关联班级">
+    <AppList v-bind="listOptions"></AppList>
+    <el-row justify="center">
+      <el-button type="primary" round>关联选择班级</el-button>
+      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
+    </el-row>
+  </el-dialog>
+</template>

src/modules/admin/system/experiment/components/SelectStudentDialog.vue

+<script setup lang="ts">
+// 列表配置
+const listOptions = {
+  // remote: {
+  //   httpRequest: getExperimentList,
+  //   params: { name: '' }
+  // },
+  columns: [
+    { type: 'selection' },
+    { label: '序号', type: 'index', width: 60 },
+    { label: '班级代码', prop: 'name' },
+    { label: '班级名称', prop: 'name' },
+    { label: '所属部门/学校', prop: 'name' },
+    { label: '人数', prop: 'name' },
+    { label: '专业', prop: 'name' }
+  ],
+  data: [{}]
+}
+</script>
+<template>
+  <el-dialog title="添加小组成员">
+    <AppList v-bind="listOptions"></AppList>
+    <el-row justify="center">
+      <el-button type="primary" round>添加选择学生</el-button>
+      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
+    </el-row>
+  </el-dialog>
+</template>

src/modules/admin/system/experiment/components/StudentGroupDialog.vue

+<script setup lang="ts">
+import { CirclePlusFilled } from '@element-plus/icons-vue'
+import StudentGroupFormDialog from './StudentGroupFormDialog.vue'
+// 列表配置
+const listOptions = {
+  // remote: {
+  //   httpRequest: getExperimentList,
+  //   params: { name: '' }
+  // },
+  columns: [
+    { label: '序号', type: 'index', width: 60 },
+    { label: '小组名称', prop: 'name' },
+    { label: '成员人数', prop: 'name' },
+    { label: '操作', slots: 'table-x' }
+  ],
+  data: [{}]
+}
+const dialogVisible = $ref(false)
+</script>
+<template>
+  <el-dialog title="学生分组">
+    <AppList v-bind="listOptions">
+      <template #header-buttons>
+        <el-button type="primary" round :icon="CirclePlusFilled" @click="dialogVisible = true">新增分组</el-button>
+      </template>
+      <template #table-x>
+        <el-button type="primary" link>小组成员</el-button>
+      </template>
+    </AppList>
+    <StudentGroupFormDialog v-model="dialogVisible" append-to-body></StudentGroupFormDialog>
+  </el-dialog>
+</template>

src/modules/admin/system/experiment/components/StudentGroupFormDialog.vue

+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+
+interface Props {
+  data?: any
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update'): void
+}>()
+
+const title = $computed(() => {
+  return '新增实验'
+})
+
+const formRef = $ref<FormInstance>()
+const form = reactive({ title: '', status: 1 })
+watchEffect(() => {
+  Object.assign(form, props.data)
+})
+const rules = ref<FormRules>({
+  title: [{ required: true, message: '请输入问题描述', trigger: 'blur' }],
+  content: [{ required: true, message: '请输入问题详情', trigger: 'blur' }]
+})
+// 提交
+function handleSubmit() {
+  formRef?.validate().then(update)
+}
+// 修改
+const update = () => {
+  // submitSuggestion(form).then(() => {
+  //   ElMessage({ message: '提交成功', type: 'success' })
+  //   emit('update')
+  //   formRef?.resetFields()
+  // })
+}
+</script>
+
+<template>
+  <el-dialog title="新增实验分组" :close-on-click-modal="false" width="600px">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
+      <el-form-item label="实验名称" prop="title"></el-form-item>
+      <el-form-item label="实验小组名称" prop="content">
+        <el-input v-model="form.title"></el-input>
+      </el-form-item>
+      <el-row justify="center">
+        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
+        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
+      </el-row>
+    </el-form>
+  </el-dialog>
+</template>

src/modules/admin/system/experiment/components/StudentListDialog.vue

+<script setup lang="ts">
+// 列表配置
+const listOptions = {
+  // remote: {
+  //   httpRequest: getExperimentList,
+  //   params: { name: '' }
+  // },
+  columns: [
+    { label: '序号', type: 'index', width: 60 },
+    { label: '学号', prop: 'name' },
+    { label: '姓名', prop: 'name' },
+    { label: '性别', prop: 'name' },
+    { label: '所属部门/学校', prop: 'name' },
+    { label: '专业', prop: 'name' },
+    { label: '班级', prop: 'name' }
+  ],
+  data: [{}]
+}
+</script>
+<template>
+  <el-dialog title="查看班级学生">
+    <AppList v-bind="listOptions"></AppList>
+    <el-row justify="center">
+      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
+    </el-row>
+  </el-dialog>
+</template>

src/modules/admin/system/experiment/index.ts

+import type { RouteRecordRaw } from 'vue-router'
+import AppLayout from '@/components/layout/Index.vue'
+
+export const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/admin/system',
+    component: AppLayout,
+    redirect: '/admin/system/experiment',
+    children: [
+      { path: 'experiment', component: () => import('./views/Index.vue') },
+      { path: 'experiment/:id', component: () => import('./views/View.vue'), props: true }
+    ]
+  }
+]

src/modules/admin/system/experiment/views/Index.vue

+<script setup lang="ts">
+import { CirclePlusFilled } from '@element-plus/icons-vue'
+import FormDialog from '../components/FormDialog.vue'
+// import { getExperimentList } from '../api'
+
+// 列表配置
+const listOptions = {
+  // remote: {
+  //   httpRequest: getExperimentList,
+  //   params: { name: '' }
+  // },
+  filters: [{ type: 'input', prop: 'name', label: '实验名称', placeholder: '请输入实验名称' }],
+  columns: [
+    { label: '序号', type: 'index', width: 60 },
+    { label: '实验课程名称', prop: 'name' },
+    { label: '实验名称', prop: 'name' },
+    { label: '实验学时', prop: 'name' },
+    { label: '指导教师', prop: 'name' },
+    { label: '实验类型', prop: 'name' },
+    { label: '实验总成绩', prop: 'name' },
+    { label: '更新人', prop: 'name' },
+    { label: '更新时间', prop: 'name' },
+    { label: '操作', slots: 'table-x', width: 300 }
+  ],
+  data: [{}]
+}
+
+let dialogVisible = $ref(false)
+
+function handleAdd() {
+  dialogVisible = true
+}
+function handleUpdate() {
+  dialogVisible = true
+}
+</script>
+
+<template>
+  <AppCard title="实验管理">
+    <AppList v-bind="listOptions">
+      <template #header-buttons>
+        <el-button type="primary" round :icon="CirclePlusFilled" @click="handleAdd">新增实验</el-button>
+      </template>
+      <template #table-x>
+        <el-button type="primary" round>
+          <router-link to="/admin/system/experiment/123" target="_blank">查看</router-link>
+        </el-button>
+        <el-button type="primary" round>
+          <router-link to="/admin/system/experiment/123" target="_blank">关联班级与分组</router-link>
+        </el-button>
+        <el-button type="primary" round @click="handleUpdate">编辑</el-button>
+      </template>
+    </AppList>
+  </AppCard>
+  <FormDialog v-model="dialogVisible"></FormDialog>
+</template>

src/modules/admin/system/experiment/views/View.vue

+<script setup lang="ts">
+import { CirclePlusFilled } from '@element-plus/icons-vue'
+import SelectClassDialog from '../components/SelectClassDialog.vue'
+import StudentGroupDialog from '../components/StudentGroupDialog.vue'
+import StudentListDialog from '../components/StudentListDialog.vue'
+interface Props {
+  id: string
+}
+defineProps<Props>()
+
+// 列表配置
+const listOptions = {
+  // remote: {
+  //   httpRequest: getExperimentList,
+  //   params: { name: '' }
+  // },
+  columns: [
+    { label: '序号', type: 'index', width: 60 },
+    { label: '专业名称', prop: 'name' },
+    { label: '班级名称', prop: 'name' },
+    { label: '学生人数', prop: 'name' },
+    { label: '更新时间', prop: 'name' },
+    { label: '操作', slots: 'table-x', width: 300 }
+  ],
+  data: [{}]
+}
+const selectClassVisible = $ref(false)
+const studentGroupVisible = $ref(false)
+const studentListVisible = $ref(false)
+</script>
+
+<template>
+  <AppCard title="实验管理">
+    <el-descriptions>
+      <el-descriptions-item label="实验名称">kooriookami</el-descriptions-item>
+      <el-descriptions-item label="实验课程">18100000000</el-descriptions-item>
+      <el-descriptions-item label="所属机构/学校">Suzhou</el-descriptions-item>
+    </el-descriptions>
+    <AppList v-bind="listOptions">
+      <template #header-buttons>
+        <el-button type="primary" round :icon="CirclePlusFilled" @click="selectClassVisible = true">关联班级</el-button>
+      </template>
+      <template #table-x>
+        <el-button type="primary" round @click="studentListVisible = true">查看学生</el-button>
+        <el-button type="primary" round @click="studentGroupVisible = true">学生分组</el-button>
+        <el-button type="primary" round>移除</el-button>
+      </template>
+    </AppList>
+  </AppCard>
+  <!-- 关联班级 -->
+  <SelectClassDialog v-model="selectClassVisible"></SelectClassDialog>
+  <!-- 学生分组 -->
+  <StudentGroupDialog v-model="studentGroupVisible"></StudentGroupDialog>
+  <!-- 查看学生 -->
+  <StudentListDialog v-model="studentListVisible"></StudentListDialog>
+</template>

src/modules/admin/lab/guides/index.ts → src/modules/protocol/index.ts

@@ -3,9 +3,9 @@ import AppLayout from '@/components/layout/Index.vue'
 
 export const routes: Array<RouteRecordRaw> = [
   {
-    path: '/admin/lab',
+    path: '/',
     component: AppLayout,
-    redirect: '/admin/lab/guides',
-    children: [{ path: 'guides', component: () => import('./views/Index.vue') }]
+    props: { sidebar: false },
+    children: [{ path: '', component: () => import('./views/Index.vue') }]
   }
 ]

vite.config.ts

@@ -4,7 +4,7 @@ import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import checker from 'vite-plugin-checker'
+// import checker from 'vite-plugin-checker'
 import AutoImport from 'unplugin-auto-import/vite'
 
 export default defineConfig(({ mode }) => ({
@@ -15,8 +15,8 @@ export default defineConfig(({ mode }) => ({
       imports: ['vue', 'vue/macros', 'vue-router', '@vueuse/core'],
       dts: true,
       eslintrc: { enabled: true }
-    }),
-    checker({ vueTsc: true, eslint: { lintCommand: 'eslint "./src/**/*.{vue,js,jsx,ts,tsx}"' } })
+    })
+    // checker({ vueTsc: true, eslint: { lintCommand: 'eslint "./src/**/*.{vue,js,jsx,ts,tsx}"' } })
   ],
   server: {
     open: true,