于添上传

src/api/portal/index.js

@@ -0,0 +1,12 @@
+// 文件模块相关接口
+import { moduleRequest } from '@/utils/reSourceRequest'
+
+const request = moduleRequest(`/api/webapp/`)
+
+/**
+ * 获取文件列表相关接口
+ */
+// 获取文件列表（区分文件路径）
+export const list = (p) => request('disk/courseinfo/page', p, 'get')
+// 获取文件列表（区分文件类型）
+// export const getFileListByType = (p) => request('file/selectfilebyfiletype', p, 'get')

src/utils/tool.js

@@ -194,4 +194,28 @@ tool.snowyUuid = () => {
 	return 'xn' + uuid.slice(2)
 }
 
+//格式化时间秒
+tool.formatTimestamp = (timestamp) => {
+	const date = new Date(timestamp)
+	const year = date.getFullYear()
+	const month = String(date.getMonth() + 1).padStart(2, '0')
+	const day = String(date.getDate()).padStart(2, '0')
+	const hours = String(date.getHours()).padStart(2, '0')
+	const minutes = String(date.getMinutes()).padStart(2, '0')
+	const seconds = String(date.getSeconds()).padStart(2, '0')
+	return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+
+//格式化时间秒
+tool.formatTimesYearMonthDay = (timestamp) => {
+	const date = new Date(timestamp)
+	const year = date.getFullYear()
+	const month = String(date.getMonth() + 1).padStart(2, '0')
+	const day = String(date.getDate()).padStart(2, '0')
+	const hours = String(date.getHours()).padStart(2, '0')
+	const minutes = String(date.getMinutes()).padStart(2, '0')
+	const seconds = String(date.getSeconds()).padStart(2, '0')
+	return `${year}-${month}-${day}`
+}
+
 export default tool

src/views/portal/index.vue

@@ -20,7 +20,6 @@
 	import ResourceDetails from '@/views/resourceDetails/index.vue'
 
 	const indexType = ref('resourceDetails')
-
 	const onChangeCurrent = (current) => {
 		indexType.value = current
 	}

src/views/resourceCenter/components/ComplexChoices.vue

@@ -6,15 +6,37 @@
 			<!-- <a-radio-group v-model:value="selectedDept" >
 				<a-radio-button v-for="dept in selectedDepts" :key="dept" :value="dept">{{ dept }}</a-radio-button>
 			</a-radio-group> -->
-			<MyRadioButtonGroup ref="Dept" v-model="selectedDept" @change="handleSelectedDept">
-				<MyRadioButton
-					v-for="(item, index) in selectedDepts"
-					:key="index"
-					:value="item"
-					:label="item"
-					:index="index"
-				></MyRadioButton>
-			</MyRadioButtonGroup>
+			<div style="display: flex; flex-direction: column">
+				<MyRadioButtonGroup ref="Dept" v-model="selectedDept" @change="handleSelectedDept">
+					<MyRadioButtonOffOut
+						v-for="(item, index) in selectedDepts"
+						:key="index"
+						:value="item"
+						:label="item"
+						:index="index"
+					></MyRadioButtonOffOut>
+				</MyRadioButtonGroup>
+				<div style="height: 10px"></div>
+				<MyRadioButtonGroup ref="Big" v-model="selectedDeptBig" @change="handleSelectedCourses">
+					<MyRadioButton
+						v-for="(item, index) in selectedDeptBigs"
+						:key="index"
+						:value="item"
+						:label="item"
+						:index="index"
+					></MyRadioButton>
+				</MyRadioButtonGroup>
+				<div style="height: 10px"></div>
+				<MyRadioButtonGroup ref="Smail" v-model="selectedDeptSmail" @change="handleSelectedCourses">
+					<MyRadioButton
+						v-for="(item, index) in selectedDeptSmails"
+						:key="index"
+						:value="item"
+						:label="item"
+						:index="index"
+					></MyRadioButton>
+				</MyRadioButtonGroup>
+			</div>
 		</div>
 		<div style="height: 10px"></div>
 		<div class="line"></div>
@@ -81,11 +103,19 @@
 		<!-- 已选条件 -->
 		<div class="filter-group">
 			<span class="filter-group-title">已选条件:</span>
-			<a-tag v-for="tag in selectedTags" :key="tag" closable @close="handleTagClose(tag)">
-				{{ tag }}
-			</a-tag>
+			<div style="display: flex; align-items: center; margin-top: 7px">
+				<a-tag
+					v-for="tag in selectedTags"
+					style="display: flex; justify-content: center; align-items: center"
+					:key="tag"
+					closable
+					@close="handleTagClose(tag)"
+				>
+					{{ tag }}
+				</a-tag>
 
-			<span v-if="selectedTags.length > 0" class="clean" @click="handleClean">清除筛选</span>
+				<span v-if="selectedTags.length > 0" class="clean" @click="handleClean">清除筛选</span>
+			</div>
 		</div>
 	</div>
 </template>
@@ -94,12 +124,17 @@
 	import { ref, computed } from 'vue'
 	import MyRadioButtonGroup from '../components/MyRadioButtonGroup.vue'
 	import MyRadioButton from '../components/MyRadioButton.vue'
+	import MyRadioButtonOffOut from '../components/MyRadioButtonOffOut.vue'
 
 	const selectedDept = ref('')
+	const selectedDeptBig = ref('')
+	const selectedDeptSmail = ref('')
 	const selectedCourse = ref('')
 	const selectedType = ref('')
 	const selectedFormat = ref('')
 	const Dept = ref(null)
+	const Big = ref(null)
+	const Smail = ref(null)
 	const Course = ref(null)
 	const Type = ref(null)
 	const Format = ref(null)
@@ -107,25 +142,30 @@
 	const selectedTags = ref([])
 	const selectedTagKeys = ref([])
 
-	const selectedDepts = ref([
-		'全部',
-		'航空理论系',
-		'军事理论系',
-		'政治工作系',
-		'机务工程系',
-		'航空机务系',
-		'航空理论系1',
-		'军事理论系1',
-		'政治工作系1',
-		'机务工程系1',
-		'航空机务系1',
-		'航空理论系2',
-		'军事理论系2',
-		'政治工作系2',
-		'机务工程系2',
-		'航空机务系2',
-		'航空理论系3'
+	const selectedDepts = ref(['不限', '学校本级', '一旅', '二旅', '三旅', '四旅', '五旅', '维修厂'])
+	const selectedDeptBigs = ref([
+		'参谋部',
+		'政治工作部',
+		'保障部',
+		'理论训练系',
+		'轰运飞行人员改装系',
+		'职业教育中心',
+		'教学考评中心',
+		'教研保障中心',
+		'服务保障中心',
+		'教学评价办公室'
 	])
+	const selectedDeptSmails = ref([
+		'三级架构a',
+		'三级架构b',
+		'三级架构c',
+		'三级架构d',
+		'三级架构e',
+		'三级架构f',
+		'三级架构g',
+		'三级架构h'
+	])
+
 	const selectedCourses = ref([
 		'全部',
 		'初级飞行训练',
@@ -150,6 +190,8 @@
 	const selectedFormats = ref(['全部', 'ppt', 'word', 'excel', 'pdf', 'mp4', 'zip', 'rar'])
 
 	const handleSelectedDept = (e) => {
+		Big.value.setClean(selectedDeptBigs.value[0])
+		Smail.value.setClean(selectedDeptSmails.value[0])
 		updateSelectedTags()
 	}
 	const handleSelectedCourses = (e) => {
@@ -177,7 +219,7 @@
 		// 	...(selectedType.value !== '全部' ? { key: 'Type', list: [selectedType.value] } : []),
 		// 	...(selectedFormat.value !== '全部' ? { key: 'Format', list: [selectedFormat.value] } : [])
 		// ]
-		if (selectedDept.value !== '全部') {
+		if (selectedDept.value !== '不限') {
 			selectedTags.value.push(...[selectedDept.value])
 			selectedTagKeys.value.push('Dept')
 		}
@@ -199,7 +241,7 @@
 	// 删除已选条件
 	const handleTagClose = (tag) => {
 		if (tag === selectedDept.value) {
-			selectedDept.value = '全部'
+			selectedDept.value = '不限'
 		} else if (tag === selectedCourse.value) {
 			selectedCourse.value = '全部'
 		} else if (tag === selectedType.value) {
@@ -211,15 +253,17 @@
 	}
 	const handleClean = () => {
 		selectedTags.value = []
-		selectedDept.value = '全部'
+		selectedDept.value = '不限'
 		selectedCourse.value = '全部'
 		selectedType.value = '全部'
 		selectedFormat.value = '全部'
 
-		Dept.value.setClean()
-		Course.value.setClean()
-		Type.value.setClean()
-		Format.value.setClean()
+		Dept.value.setClean('不限')
+		Big.value.setClean(selectedDeptBigs.value[0])
+		Smail.value.setClean(selectedDeptSmails.value[0])
+		Course.value.setClean('全部')
+		Type.value.setClean('全部')
+		Format.value.setClean('全部')
 		updateSelectedTags()
 	}
 
@@ -232,7 +276,10 @@
 <style scoped>
 	.filter-bar {
 		border: 1px solid #00000011; /* 灰色细边框 */
-		padding: 20px;
+		padding-left: 20px;
+		padding-right: 20px;
+		padding-top: 5px;
+		padding-bottom: 20px;
 	}
 
 	.filter-group {

src/views/resourceCenter/components/MyRadioButton.vue

@@ -94,7 +94,8 @@
 		color: black;
 	}
 	.my-radio-button {
-		min-width: 100px;
+		padding-left: 15px;
+		padding-right: 15px;
 		display: flex;
 		justify-content: center;
 		align-items: center;

src/views/resourceCenter/components/MyRadioButtonGroup.vue

@@ -36,8 +36,8 @@
 	}
 	provide('MyRadioGroupContext', groupContext)
 
-	const setClean = () => {
-		valueRef.value = '全部'
+	const setClean = (text) => {
+		valueRef.value = text
 	}
 
 	defineExpose({

src/views/resourceCenter/components/MyRadioButtonOffOut.vue

@@ -0,0 +1,118 @@
+<template>
+	<div class="my-radio-button" :class="{ active: isActive }" @click="handleClick">
+		<span style="font-size: 12px">{{ label }}</span>
+	</div>
+</template>
+
+<script setup>
+	import { ref, inject } from 'vue'
+	// 注入来自父组件的数据
+	const group = inject('MyRadioGroupContext')
+	const clickType = ref('noClickType')
+	const title = ref('')
+	// 判断是否是当前选中项
+	// const isActive = computed(() => props.value === group.value)
+	const isActive = ref(false)
+
+	const props = defineProps({
+		value: {
+			required: true
+		},
+		label: {
+			type: String,
+			default: ''
+		},
+		index: {
+			type: Number
+		}
+	})
+	// 监听 group.value 的变化
+	watch(
+		() => group.value.value,
+		(newVal, oldVal) => {
+			console.log('group.value changed:', newVal, oldVal)
+			isActive.value = newVal === props.value
+		}
+	)
+
+	const setData = (data) => {
+		title.value = data
+	}
+	const getData = (data) => {
+		return title.value
+	}
+	const setClick = () => {
+		clickType.value = 'clickType'
+	}
+	const setNoClick = () => {
+		clickType.value = 'noClickType'
+	}
+
+	const handleClick = () => {
+		console.log(
+			'点击了 子布局',
+			' isActive.value ',
+			isActive.value,
+			' props.value ',
+			props.value,
+			' group.value ',
+			group.value
+		)
+		if (!isActive.value) {
+			group.changeValue(props.value)
+		}
+	}
+
+	onMounted(() => {
+		if (props.index == 0) {
+			isActive.value = true
+		}
+	})
+</script>
+
+<style scoped>
+	.clickType {
+		border-radius: 20px;
+		background: rgb(45, 130, 226);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 50px;
+		min-width: 100px;
+	}
+	.clickType span {
+		color: white;
+	}
+	.noClickType {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 50px;
+		min-width: 100px;
+	}
+	.noClickType span {
+		color: black;
+	}
+	.my-radio-button {
+		padding-left: 15px;
+		padding-right: 15px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 30px;
+		margin: 1px;
+		border: 1px solid #ffffff00;
+		border-radius: 5px;
+		/* border: 1px solid #d9d9d9; */
+		/* border-radius: 4px; */
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+	.my-radio-button.active {
+		background-color: #deecfa;
+		color: #1890ff;
+		border-color: #1890ff;
+		border: 1px solid #1890ff;
+		border-radius: 30px;
+	}
+</style>

src/views/resourceCenter/components/ResourceList.vue

@@ -21,20 +21,20 @@
 						</div>
 					</div>
 					<div style="display: flex; flex-direction: column; padding: 5px 10px">
-						<span style="font-size: 16px; font-weight: bold">{{ item.title }}</span>
+						<span style="font-size: 16px; font-weight: bold">{{ item.courseName }}</span>
 						<span style="font-size: 12px">{{ item.description }}</span>
 						<span style="font-size: 12px">{{ item.name }}</span>
 						<div style="display: flex; justify-content: space-between">
 							<div style="display: flex; justify-content: center; align-items: center">
 								<FieldTimeOutlined />
 								<div style="width: 5px"></div>
-								<span style="font-size: 12px">{{ item.time }}</span>
+								<span style="font-size: 12px">{{ tool.formatTimestamp(item.publishTime) }}</span>
 							</div>
 
 							<div style="display: flex; justify-content: center; align-items: center">
 								<EyeOutlined />
 								<div style="width: 5px"></div>
-								<span style="font-size: 12px">{{ item.look }}</span>
+								<span style="font-size: 12px">{{ item.viewCount }}</span>
 							</div>
 						</div>
 					</div>
@@ -50,7 +50,7 @@
 
 		<div style="height: 20px"></div>
 		<div style="display: flex; width: 100%; align-items: center; justify-content: center">
-			<a-pagination v-model:current="currentPage" :total="total" show-size-changer />
+			<a-pagination v-model:current="currentPage.current" :total="total" @change="onChange" show-size-changer />
 		</div>
 		<div style="height: 20px"></div>
 	</div>
@@ -59,24 +59,29 @@
 <script setup>
 	import { ref } from 'vue'
 	import TabSwitcher from './TabSwitcher.vue'
+	import { list } from '@/api/portal'
+	import tool from '@/utils/tool'
 	const total = ref(1024)
 	const tabKey = ref('new')
-	const currentPage = ref(1)
-	const resources = [
-		{ id: 1, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		{ id: 2, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		{ id: 3, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		{ id: 4, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		{ id: 5, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		{ id: 6, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		{ id: 7, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		{ id: 8, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		{ id: 9, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		{ id: 10, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		{ id: 11, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		{ id: 12, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 }
+	const currentPage = reactive({
+		current: 1,
+		size: 10
+	})
+	const resources = ref([
+		// { id: 1, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
+		// { id: 2, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
+		// { id: 3, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
+		// { id: 4, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
+		// { id: 5, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
+		// { id: 6, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
+		// { id: 7, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
+		// { id: 8, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
+		// { id: 9, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
+		// { id: 10, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
+		// { id: 11, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
+		// { id: 12, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 }
 		// 更多数据...
-	]
+	])
 
 	const selectTab = (key) => {
 		console.log('现在是点了tab', key)
@@ -87,6 +92,80 @@
 	const onSearch = (value) => {
 		console.log('搜索了', value)
 	}
+	const onChange = (page, pageSize) => {
+		console.log('翻页', page, pageSize)
+		getList()
+	}
+
+	// watch(currentPage.value.current, (newValue) => {
+	// 	console.log('变化了', newValue)
+	// 	// getList()
+	// })
+
+	const getList = () => {
+		list(currentPage)
+			.then((res) => {
+				console.log('下面列表获取', res)
+				if (res.code == 200) {
+					resources.value = res.data.records
+					total.value = res.data.total
+					currentPage.current = res.data.current
+					// "size": 20,
+					//                 "current": 1,
+					//   "pages": 1
+				}
+
+				// {
+				//     "code": 200,
+				//     "msg": "操作成功",
+				//     "data": {
+				//         "records": [
+				//             {
+				//                 "publishTime": 1750820852119,
+				//                 "courseName": "转手绢",
+				//                 "collegeIdName": "二人转研究学院",
+				//                 "teacherId": "1936984714123436034",
+				//                 "coverImageId": "1936957954687279104",
+				//                 "collegeId": "1",
+				//                 "timeLimitType": "0",
+				//                 "viewCount": 0,
+				//                 "courseId": "1937091089341124610",
+				//                 "teacherIdName": "老师"
+				//             },
+				//             {
+				//                 "publishTime": 1750820875604,
+				//                 "courseName": "胸口碎大石",
+				//                 "collegeIdName": "二人转研究学院",
+				//                 "teacherId": "1936984714123436034",
+				//                 "coverImageId": "1937056330116354050",
+				//                 "coverImagePath": "http://localhost:9003/api/webapp/dev/file/download?id=1937056330116354050",
+				//                 "collegeId": "1",
+				//                 "timeLimitType": "0",
+				//                 "viewCount": 10000,
+				//                 "courseId": "1937326992873689089",
+				//                 "teacherIdName": "老师"
+				//             }
+				//         ],
+				//         "total": 2,
+				//         "size": 20,
+				//         "current": 1,
+				//         "orders": [],
+				//         "optimizeCountSql": true,
+				//         "searchCount": true,
+				//         "maxLimit": null,
+				//         "countId": null,
+				//         "pages": 1
+				//     }
+				// }
+			})
+			.catch((err) => {
+				console.log(err)
+			})
+	}
+
+	onMounted(() => {
+		getList()
+	})
 </script>
 
 <style scoped>

src/views/resourceCenter/components/SidebarRecommend.vue

@@ -5,18 +5,18 @@
 			<div v-for="(item, index) in recommendations" :key="index" class="recommend-item" @click="handlerItem(item)">
 				<div class="item"></div>
 				<div style="display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px">
-					<span style="font-weight: bold; font-size: 12px; margin-top: 5px">{{ item.title }}</span>
+					<span style="font-weight: bold; font-size: 12px; margin-top: 5px">{{ item.courseName }}</span>
 					<div style="display: flex; justify-content: center; align-items: space-between">
 						<div style="display: flex; justify-content: center; align-items: center">
 							<FieldTimeOutlined />
 							<div style="width: 5px"></div>
-							<span style="font-size: 12px">{{ item.time }}</span>
+							<span style="font-size: 12px">{{ tool.formatTimesYearMonthDay(item.publishTime) }}</span>
 						</div>
 						<div style="width: 20px"></div>
 						<div style="display: flex; justify-content: center; align-items: center">
 							<EyeOutlined />
 							<div style="width: 5px"></div>
-							<span style="font-size: 12px">{{ item.look }}</span>
+							<span style="font-size: 12px">{{ item.viewCount }}</span>
 						</div>
 					</div>
 				</div>
@@ -27,17 +27,86 @@
 
 <script setup>
 	const emit = defineEmits(['handlerItem'])
+	import { list } from '@/api/portal'
+	import tool from '@/utils/tool'
+	const currentPage = reactive({
+		current: 1,
+		size: 6
+	})
+	const recommendations = ref([
+		// { id: '1', title: '资源名称', time: '05-22', look: '10000' },
+		// { id: '2', title: '资源名称', time: '05-22', look: '10000' },
+		// { id: '3', title: '资源名称', time: '05-22', look: '10000' },
+		// { id: '4', title: '资源名称', time: '05-22', look: '10000' },
+		// { id: '5', title: '资源名称', time: '05-22', look: '10000' },
+		// { id: '6', title: '资源名称', time: '05-22', look: '10000' }
+	])
 
-	const recommendations = [
-		{ id: '1', title: '资源名称', time: '05-22', look: '10000' },
-		{ id: '2', title: '资源名称', time: '05-22', look: '10000' },
-		{ id: '3', title: '资源名称', time: '05-22', look: '10000' },
-		{ id: '4', title: '资源名称', time: '05-22', look: '10000' },
-		{ id: '5', title: '资源名称', time: '05-22', look: '10000' },
-		{ id: '6', title: '资源名称', time: '05-22', look: '10000' }
-		// 更多数据...
-	]
+	// 更多数据...
 
+	const getList = () => {
+		list(currentPage)
+			.then((res) => {
+				console.log('下面列表获取', res)
+				if (res.code == 200) {
+					recommendations.value = res.data.records
+					currentPage.current = res.data.current
+					// "size": 20,
+					//                 "current": 1,
+					//   "pages": 1
+				}
+
+				// {
+				//     "code": 200,
+				//     "msg": "操作成功",
+				//     "data": {
+				//         "records": [
+				//             {
+				//                 "publishTime": 1750820852119,
+				//                 "courseName": "转手绢",
+				//                 "collegeIdName": "二人转研究学院",
+				//                 "teacherId": "1936984714123436034",
+				//                 "coverImageId": "1936957954687279104",
+				//                 "collegeId": "1",
+				//                 "timeLimitType": "0",
+				//                 "viewCount": 0,
+				//                 "courseId": "1937091089341124610",
+				//                 "teacherIdName": "老师"
+				//             },
+				//             {
+				//                 "publishTime": 1750820875604,
+				//                 "courseName": "胸口碎大石",
+				//                 "collegeIdName": "二人转研究学院",
+				//                 "teacherId": "1936984714123436034",
+				//                 "coverImageId": "1937056330116354050",
+				//                 "coverImagePath": "http://localhost:9003/api/webapp/dev/file/download?id=1937056330116354050",
+				//                 "collegeId": "1",
+				//                 "timeLimitType": "0",
+				//                 "viewCount": 10000,
+				//                 "courseId": "1937326992873689089",
+				//                 "teacherIdName": "老师"
+				//             }
+				//         ],
+				//         "total": 2,
+				//         "size": 20,
+				//         "current": 1,
+				//         "orders": [],
+				//         "optimizeCountSql": true,
+				//         "searchCount": true,
+				//         "maxLimit": null,
+				//         "countId": null,
+				//         "pages": 1
+				//     }
+				// }
+			})
+			.catch((err) => {
+				console.log(err)
+			})
+	}
+
+	onMounted(() => {
+		getList()
+	})
 	const handlerItem = (item) => {
 		emit('handlerItem', item)
 	}

src/views/resourceDetails/components/VideoDetails.vue

@@ -0,0 +1,342 @@
+<template>
+	<div>
+		<h1>{{ resName }}</h1>
+		<div style="height: 25px"></div>
+		<div class="user-info-container">
+			<div class="video-info" style="width: 850px">
+				<div style="width: 850px; height: 350px; background-color: aqua"></div>
+				<div style="height: 20px"></div>
+				<!-- 用户信息部分 -->
+				<div class="user-info" style="display: flex; flex-direction: column">
+					<div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
+						<div style="display: flex; align-items: center">
+							<div class="user-avatar"></div>
+							<div class="user-details">
+								<div class="user-name">作者名称</div>
+								<div class="publish-time">2025-07-25 10:17</div>
+							</div>
+						</div>
+
+						<div style="display: flex; align-items: center">
+							<div class="metrics">
+								<div class="metric-item">
+									<span>100000</span>
+									<span>播放量</span>
+								</div>
+								<div class="liene"></div>
+								<div class="metric-item">
+									<span>1000</span>
+									<span>评论</span>
+								</div>
+								<div class="liene"></div>
+								<div class="metric-item">
+									<span>1000</span>
+									<span>收藏</span>
+								</div>
+							</div>
+							<div style="width: 10px"></div>
+							<div class="actions">
+								<div style="display: flex; align-items: center">
+									<ExportOutlined />
+									<div style="width: 10px"></div>
+									<button class="share-btn">分享资源</button>
+								</div>
+								<div style="width: 10px"></div>
+								<div style="display: flex; align-items: center">
+									<StarOutlined />
+									<div style="width: 10px"></div>
+									<button class="favorite-btn">收藏资源</button>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- 课程信息部分 -->
+					<div class="course-info">
+						<p>
+							课程信息：瑞幸即将展开裁员，裁员名单已经确定。瑞幸裁员的消息早在一周前传出。裁员过后，瑞幸的员工或许并不好找工作，瑞幸在厦门的待遇比较高，这些简历其他企业比较难接下。
+						</p>
+					</div>
+				</div>
+			</div>
+			<div class="resInfo">
+				<div style="display: flex; align-items: center">
+					<div class="resInfoTitile"></div>
+					<span style="display: block; font-weight: bold">课程信息</span>
+				</div>
+				<div style="display: flex; justify-content: center; align-items: center; height: 40px">
+					<span style="display: block; font-weight: bold">资源名称</span>
+				</div>
+				<div style="display: flex; align-items: center">
+					<span style="font-weight: bold; margin-right: 10px">授课老师: </span>
+					<span style="display: block">{{ teacherName }}</span>
+				</div>
+				<div style="display: flex; align-items: center">
+					<span style="font-weight: bold; margin-right: 10px">所属院系: </span>
+					<span style="display: block">{{ department }}</span>
+				</div>
+				<div style="display: flex; align-items: center">
+					<span style="font-weight: bold; margin-right: 10px">所属专业: </span>
+					<span style="display: block">{{ major }}</span>
+				</div>
+				<div style="display: flex; align-items: center">
+					<span style="font-weight: bold; margin-right: 10px">课程类型: </span>
+					<span style="display: block">{{ courseType }}</span>
+				</div>
+				<div style="display: flex; align-items: center">
+					<span style="font-weight: bold; margin-right: 10px">课件格式: </span>
+					<span style="display: block">{{ videoFormat }}</span>
+				</div>
+				<div style="display: flex; align-items: center">
+					<span style="font-weight: bold; margin-right: 10px">视频时长: </span>
+					<span style="display: block">{{ videoDuration }}</span>
+				</div>
+				<div style="display: flex; align-items: center">
+					<span style="font-weight: bold; margin-right: 10px">视频大小: </span>
+					<span style="display: block">{{ videoSize }}</span>
+				</div>
+				<div style="display: flex; align-items: center">
+					<span style="font-weight: bold; margin-right: 10px">发布时间: </span>
+					<span style="display: block">{{ releaseTime }}</span>
+				</div>
+				<div style="display: flex; flex-direction: column">
+					<span style="font-weight: bold; margin-right: 10px">课程介绍: </span>
+					<br />
+					<span style="display: block">{{ courseDescription }}</span>
+				</div>
+				<br />
+				<span>资源标签</span>
+				<div style="display: flex; width: 100%; flex-wrap: wrap">
+					<a-tag style="margin-top: 5px" v-for="tag in tags" :key="tag">{{ tag }}</a-tag>
+				</div>
+			</div>
+		</div>
+
+		<div class="tallList">
+			<div>
+				<span style="font-weight: bold; font-size: 14px">发表评论</span>
+				<span class="tallListInfo">文明上网理性发言,请遵守评论服务协议</span>
+			</div>
+			<div>
+				<div style="display: flex">
+					<div style="display: flex">
+						<div style="width: 30px; height: 30px; background: #1e90ff; border-radius: 50%"></div>
+						<span style="display: block; font-size: 12px">未登录</span>
+					</div>
+
+					<a-textarea placeholder="请输入内容" :rows="4" style="margin-top: 5px" v-model="textAreaValue" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import { Tag, Typography, Space } from 'ant-design-vue'
+	const resName = ref('资源名称')
+
+	const teacherName = ref('王某某')
+	const department = ref('学院本级-航空机务教研室-三级架构名')
+	const major = ref('初级飞行训练')
+	const courseType = ref('必修')
+	const videoFormat = ref('MP4')
+	const videoDuration = ref('59:34')
+	const videoSize = ref('598M')
+	const releaseTime = ref('2025-10-01 11:33:59')
+	const courseDescription = ref(
+		'“我们正步入一个数据或许比软件更重要的新时代。——Tim O’ Reilly” 运用数据是精准刻画事物、呈现发展规律的主要手段，分析数据展示规律，把思想变得更精细！——“弹指之间·享受创新”，通过4周学习，你将掌握利用Python语言表示、清洗、统计和展示数据的能力。'
+	)
+	const tags = ref(['标签名称1', '标签名称2', '标签名称3', '标签名称4', '标签名称5'])
+
+	const emit = defineEmits(['selectTab'])
+	const listUnpublishedView = ref(null)
+
+	const onQuery = (form) => {
+		console.log('查询内容', form)
+		//....
+
+		// listUnpublishedView.value.setData(tableData.value)
+	}
+
+	const getList = () => {
+		//....
+		// listUnpublishedView.value.setData(tableData.value)
+	}
+
+	onMounted(() => {
+		getList()
+	})
+</script>
+
+<style scoped>
+	.tab-switcher {
+		display: flex;
+		border-radius: 20px;
+		border: 1px solid #1e90ff;
+		overflow: hidden;
+	}
+
+	.tab-switcher div {
+		padding: 2px 20px;
+		background-color: #f5f5f5;
+
+		cursor: pointer;
+	}
+
+	.tab-switcher div.active {
+		background-color: #1e90ff;
+		color: white;
+	}
+
+	.tab-switcher div:not(:last-child) {
+	}
+
+	.user-info {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: 200px;
+		border: 1px solid #dfe2e5;
+		padding: 20px;
+	}
+
+	.resource-container {
+		width: 850px;
+		margin: 0 auto;
+		padding: 20px;
+		border: 1px solid #dfe2e5;
+	}
+
+	.user-avatar {
+		width: 40px;
+		height: 40px;
+		background: #1e90ff;
+		border-radius: 50%;
+		margin-right: 10px;
+	}
+
+	.user-details {
+		flex: 1;
+	}
+
+	.user-name {
+		font-size: 13px;
+		font-weight: bold;
+	}
+
+	.publish-time {
+		font-size: 12px;
+		color: #999;
+		margin-top: 5px;
+	}
+
+	.metrics {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.metric-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+
+	.metric-item span:first-child {
+		font-size: 18px;
+		font-weight: bold;
+	}
+
+	.metric-item span:last-child {
+		font-size: 12px;
+		color: #666;
+	}
+
+	.actions {
+		display: flex;
+	}
+
+	.share-btn,
+	.favorite-btn {
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+	}
+
+	.course-info {
+		margin-top: 20px;
+		line-height: 1.6;
+	}
+
+	.liene {
+		height: 35px;
+		width: 1px;
+		background: #00000018;
+	}
+
+	.resource-container {
+		width: 850px;
+		margin: 0 auto;
+		padding: 20px;
+		border: 1px solid #dfe2e5;
+	}
+
+	h1 {
+		text-align: center;
+		margin-bottom: 20px;
+	}
+
+	.ant-descriptions {
+		margin-top: 20px;
+	}
+
+	.ant-typography-title {
+		margin-top: 20px;
+	}
+
+	.ant-typography-paragraph {
+		margin-top: 10px;
+	}
+
+	.ant-space {
+		margin-top: 10px;
+	}
+	.video-info {
+		height: 100%; /* 确保填满容器高度 */
+	}
+	.resInfo {
+		margin-left: 10px;
+		width: 350px;
+		height: 570px;
+		border: 1px solid #dfe2e5;
+		padding: 10px;
+	}
+
+	.user-info-container {
+		display: flex;
+	}
+
+	.resInfoTitile {
+		width: 5px;
+		height: 14px;
+		background-color: cadetblue;
+		margin-right: 5px;
+	}
+
+	.tallList {
+		display: flex;
+		flex-direction: column;
+		width: 850px;
+		height: 200px;
+		border: 1px solid #dfe2e5;
+		padding: 20px;
+		margin-top: 10px;
+	}
+
+	.tallListInfo {
+		color: rgba(0, 0, 0, 0.116);
+		font-size: 12px;
+	}
+</style>

src/views/resourceDetails/index.vue

@@ -1,24 +1,11 @@
 <template>
-	<div class="content">
-		<a-tabs v-model:activeKey="activeKey" type="card">
-			<a-tab-pane key="1" tab="未发布">
-				<UnpublishedView />
-			</a-tab-pane>
-			<a-tab-pane key="2" tab="待审核">
-				<!-- <ListUnpublishedView /> -->
-			</a-tab-pane>
-			<a-tab-pane key="3" tab="已发布">
-				<!-- <ListUnpublishedView /> -->
-			</a-tab-pane>
-			<a-tab-pane key="4" tab="回收站">
-				<!-- <ListUnpublishedView /> -->
-			</a-tab-pane>
-		</a-tabs>
+	<div>
+		<VideoDetails />
 	</div>
 </template>
 
 <script setup>
-	import UnpublishedView from './components/UnpublishedView.vue'
+	import VideoDetails from './components/VideoDetails.vue'
 
 	const handlerItemSidebar = (item) => {
 		// emit('handlerItemSidebar', item)