资源概括，课堂实录页面添加

src/views/recycleBin/index.vue

@@ -6,11 +6,11 @@
 </template>
 
 <script setup>
-	// 这里可以引入所需的逻辑和组件
+// 这里可以引入所需的逻辑和组件
 </script>
 
 <style scoped>
-	.page-container {
-		padding: 20px;
-	}
+.page-container {
+	padding: 20px;
+}
 </style>

src/views/resourceOverview/index.vue

@@ -1,16 +1,261 @@
 <template>
-	<div class="page-container">
-		<!-- 页面内容将放在这里 -->
-		<span>资源概览</span>
+	<div class="dashboard-container">
+		<!-- 搜索框和下拉选择器 -->
+		<a-row type="flex" justify="end" style="margin: 20px 0">
+			<a-col :span="12">
+				<a-select v-model:value="selectedOption" style="width: 100px" placeholder="请选择">
+					<a-select-option value="all">全部</a-select-option>
+					<!-- 其他选项... -->
+				</a-select>
+				<a-input-search
+					v-model:value="searchKeyword"
+					placeholder="请输入关键字"
+					style="width: 600px; margin-left: 10px"
+					@search="handleSearch"
+				>
+					<template #enterButton>
+						<a-button type="primary">搜索</a-button>
+					</template>
+				</a-input-search>
+			</a-col>
+		</a-row>
+
+		<!-- 左侧内容 -->
+		<a-row type="flex">
+			<a-col :span="14" class="left-content">
+				<!-- 存储空间 -->
+				<div class="storage-space">
+					<div id="storage-chart" style="width: 200px; height: 250px"></div>
+					<div class="storage-info">
+						<p>总容量：{{ totalCapacity }}G</p>
+						<p>已使用：{{ usedCapacity }}G</p>
+						<p>可用容量：{{ availableCapacity }}G</p>
+						<a-button type="primary" @click="applyExpansion">申请扩容</a-button>
+					</div>
+				</div>
+				<!-- 资源总量 -->
+				<div class="resource-total">
+					<div class="resource-title">
+						<span class="marginright5">资源总量</span>
+						<span class="fonsize28">{{ resourceTotal }}</span>
+					</div>
+					<div class="resource-stats">
+						<div
+							v-for="(item, index) in resourceStats"
+							:key="index"
+							:style="{ width: item.width, background: item.color, height: '20px' }"
+						></div>
+					</div>
+					<div class="resource-labels">
+						<span v-for="(label, index) in resourceLabels" :key="index" :style="{ color: label.color }">
+							<span
+								:style="{
+									backgroundColor: label.color,
+									display: 'inline-block',
+									width: '10px',
+									height: '10px',
+									marginRight: '5px'
+								}"
+							></span>
+							{{ label.text }}
+						</span>
+					</div>
+				</div>
+			</a-col>
+
+			<!-- 右侧内容 -->
+			<a-col :span="10" class="right-content">
+				<h3>浏览历史</h3>
+				<ul class="history-list">
+					<li v-for="(history, index) in historyList" :key="index">
+						<span class="history-time">{{ history.date }}</span>
+						<span class="history-file">{{ history.file }}</span>
+					</li>
+				</ul>
+			</a-col>
+		</a-row>
 	</div>
 </template>
 
-<script setup>
-	// 这里可以引入所需的逻辑和组件
-</script>
+  <script setup>
+import * as echarts from 'echarts'
+import { ref, onMounted } from 'vue'
+// import { ARow, ACol, ASelect, ASelectOption, AInputSearch, AButton } from 'ant-design-vue'
+
+// 响应式数据
+const totalCapacity = ref(20)
+const usedCapacity = ref(2)
+const availableCapacity = ref(18)
+const resourceTotal = ref(36)
+const resourceStats = ref([
+	{ width: '44%', color: '#5470c6' },
+	{ width: '6%', color: '#91cc75' },
+	{ width: '25%', color: '#fac858' },
+	{ width: '25%', color: '#c4ccd3' }
+])
+const resourceLabels = ref([
+	{ text: '视频:16', color: '#5470c6' },
+	{ text: '音频:0', color: '#f04864' },
+	{ text: '图片:2', color: '#91cc75' },
+	{ text: '文档:9', color: '#fac858' },
+	{ text: '其他:9', color: '#c4ccd3' }
+])
+const historyList = ref([
+	{ date: '2024-09-24 16:12:24', file: '现代教育技术应用-6.mp4' },
+	{ date: '2024-09-24 13:38:52', file: '怎样写出较高水平的学术文章.mp4' },
+	{ date: '2024-09-23 16:44:14', file: 'etl.yml' },
+	{ date: '2024-09-23 13:53:59', file: '学术论文书写套路.mp4' },
+	{ date: '2024-09-23 13:53:55', file: '怎样找到值得研究的问题.mp4' },
+	{ date: '2024-09-21 14:56:16', file: '第一讲 当代艺术概况.pptx' },
+	{ date: '2024-09-21 14:08:57', file: '论文汇总.xlsx' },
+	{ date: '2024-09-20 12:03:35', file: '现代教育技术应用-6-字幕.srt' }
+])
+
+// 搜索相关数据
+const selectedOption = ref('all')
+const searchKeyword = ref('')
+
+// 方法
+const applyExpansion = () => {
+	console.log('申请扩容')
+}
+
+const handleSearch = () => {
+	console.log('搜索:', selectedOption.value, searchKeyword.value)
+	// 这里可以添加实际的搜索逻辑
+}
 
-<style scoped>
-	.page-container {
-		padding: 20px;
+// 生命周期钩子
+onMounted(() => {
+	initChart()
+})
+
+// 图表初始化
+const initChart = () => {
+	const chartDom = document.getElementById('storage-chart')
+	const myChart = echarts.init(chartDom)
+	const option = {
+		series: [
+			{
+				type: 'pie',
+				radius: ['40%', '70%'],
+				avoidLabelOverlap: false,
+				itemStyle: {
+					borderRadius: 10,
+					borderColor: '#fff',
+					borderWidth: 2
+				},
+				label: {
+					show: false,
+					position: 'center'
+				},
+				emphasis: {
+					label: {
+						show: true,
+						fontSize: '15',
+						fontWeight: 'bold'
+					}
+				},
+				labelLine: {
+					show: false
+				},
+				data: [
+					{ value: usedCapacity.value, name: '已使用' },
+					{ value: availableCapacity.value, name: '可用容量' }
+				]
+			}
+		]
 	}
+
+	myChart.setOption(option)
+}
+</script>
+
+  <style scoped>
+.dashboard-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.left-content {
+	padding: 40px 60px;
+	box-sizing: border-box;
+}
+.right-content {
+	padding: 40px;
+	box-sizing: border-box;
+}
+
+.storage-space {
+	display: flex;
+	align-items: center;
+}
+
+#storage-chart {
+	margin-right: 20px;
+}
+
+.storage-info {
+	display: flex;
+	flex-direction: column;
+}
+
+.resource-total {
+	margin-top: 20px;
+}
+
+.resource-stats {
+	display: flex;
+	height: 20px;
+}
+
+.resource-stats > div {
+	height: 100%;
+}
+
+.resource-labels {
+	display: flex;
+	margin-top: 10px;
+}
+
+.resource-labels > span {
+	margin-right: 20px;
+}
+
+.history-list {
+	list-style: none;
+	padding: 0;
+}
+
+.history-list li {
+	position: relative;
+	padding-left: 20px;
+	margin-bottom: 15px;
+}
+
+.history-list li::before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 8px;
+	width: 8px;
+	height: 8px;
+	background-color: #ccc;
+	border-radius: 50%;
+}
+
+.history-time {
+	color: #999;
+	margin-right: 10px;
+}
+
+.history-file {
+	font-size: 14px;
+}
+.fonsize28 {
+	font-size: 28px;
+}
+.marginright5 {
+	margin-right: 5px;
+}
 </style>

src/views/transcriptClass/index.vue

@@ -0,0 +1,97 @@
+<template>
+	<div class="dashboard-container">
+		<!-- 页面标题 -->
+		<!-- <a-row type="flex" justify="end" align="middle" style="margin-bottom: 20px"> -->
+		<a-row type="flex" justify="space-between" align="middle" style="margin-bottom: 20px">
+			<a-col>
+				<span style="font-size: 16px; font-weight: bold">课堂实录</span>
+			</a-col>
+			<a-col>
+				<a-input-search
+					v-model:value="searchValue"
+					placeholder="请输入课程名称"
+					style="width: 300px"
+					@search="handleSearch"
+				>
+					<template #enterButton>
+						<a-button type="primary">搜索</a-button>
+					</template>
+				</a-input-search>
+			</a-col>
+		</a-row>
+
+		<!-- 表格内容 -->
+		<a-table :columns="columns" :data-source="dataSource" :pagination="false">
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'courseName'">
+					{{ record.courseName }}
+				</template>
+				<template v-else-if="column.dataIndex === 'teacherName'">
+					{{ record.teacherName }}
+				</template>
+				<template v-else-if="column.dataIndex === 'organization'">
+					{{ record.organization }}
+				</template>
+				<template v-else-if="column.dataIndex === 'courseLevel'">
+					{{ record.courseLevel }}
+				</template>
+				<template v-else-if="column.dataIndex === 'videoCount'">
+					{{ record.videoCount }}
+				</template>
+			</template>
+		</a-table>
+	</div>
+</template>
+
+  <script setup>
+import { ref } from 'vue'
+
+// 表格列配置
+const columns = [
+	{
+		title: '课程名称',
+		dataIndex: 'courseName',
+		key: 'courseName'
+	},
+	{
+		title: '教师名称',
+		dataIndex: 'teacherName',
+		key: 'teacherName'
+	},
+	{
+		title: '所属组织',
+		dataIndex: 'organization',
+		key: 'organization'
+	},
+	{
+		title: '课程层次',
+		dataIndex: 'courseLevel',
+		key: 'courseLevel'
+	},
+	{
+		title: '视频数量',
+		dataIndex: 'videoCount',
+		key: 'videoCount'
+	}
+]
+
+// 表格数据源
+const dataSource = ref([])
+
+// 搜索框值
+const searchValue = ref('')
+
+// 搜索处理函数
+const handleSearch = (value) => {
+	console.log('搜索:', value)
+	// 这里可以添加实际的搜索逻辑
+}
+</script>
+
+  <style scoped>
+.dashboard-container {
+	padding: 20px;
+}
+
+/* 自定义样式 */
+</style>