web-home

schoolNewsWeb/src/views/public/article/card/HotArticleCard.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="article-card">
+    <div class="article-image">
+      <div class="image-placeholder"></div>
+      <div class="article-tag">精选文章</div>
+    </div>
+    <div class="article-content">
+      <h3 class="article-title">新时代中国特色社会主义发展历程</h3>
+      <p class="article-desc">
+        习近平新时代中国特色社会主义思想是当代中国马克思主义、二十一世纪马克思主义，是中华文化和中国精神的时代精华，其核心要义与实践要求内涵丰富、意义深远。
+      </p>
+      <div class="article-footer">
+        <div class="meta-tag">
+          <el-icon><Document /></el-icon>
+          <span>热门文章</span>
+        </div>
+        <span class="view-count">2.1w次浏览</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Document } from '@element-plus/icons-vue';
+</script>
+
+<style lang="scss" scoped>
+.article-card {
+  background: #FFFFFF;
+  border-radius: 0.625em;
+  overflow: hidden;
+  box-shadow: 0px 0.5em 1.25em 0px rgba(164, 182, 199, 0.2);
+  transition: all 0.3s;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    transform: translateY(-0.25em);
+    box-shadow: 0px 0.75em 1.75em 0px rgba(164, 182, 199, 0.3);
+  }
+
+  .article-image {
+    width: 100%;
+    aspect-ratio: 384 / 221;
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+
+    .image-placeholder {
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      position: relative;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: url('data:image/svg+xml,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)" /></svg>');
+      }
+    }
+
+    .article-tag {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: #D1AD79;
+      border-radius: 0px 0px 0.625em 0px;
+      padding: 0.2em 1.6em;
+      min-width: 5.4em;
+      min-height: 2.1em;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      
+      font-family: 'PingFang SC';
+      font-weight: 600;
+      font-size: 0.875em;
+      line-height: 1.57;
+      color: #FFFFFF;
+    }
+  }
+
+  .article-content {
+    padding: 5.2% 5.7% 5.7% 5.7%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .article-title {
+      font-family: 'PingFang SC';
+      font-weight: 600;
+      font-size: 1.25em;
+      line-height: 1.4;
+      color: #141F38;
+      margin: 0 0 0.2em 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+
+    .article-desc {
+      font-family: 'PingFang SC';
+      font-weight: 400;
+      font-size: 0.875em;
+      line-height: 1.57;
+      color: rgba(0, 0, 0, 0.3);
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      line-clamp: 4;
+      -webkit-box-orient: vertical;
+    }
+
+    .article-footer {
+      margin-top: 1.25em;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .meta-tag {
+        display: flex;
+        align-items: center;
+        gap: 0.25em;
+
+        .el-icon {
+          width: 1em;
+          height: 1em;
+          color: #FFFFFF;
+        }
+
+        span {
+          font-family: 'PingFang SC';
+          font-weight: 500;
+          font-size: 0.875em;
+          line-height: 1.57;
+          color: #C62828;
+        }
+      }
+
+      .view-count {
+        font-family: 'PingFang SC';
+        font-weight: 400;
+        font-size: 0.875em;
+        line-height: 1.57;
+        color: rgba(0, 0, 0, 0.3);
+      }
+    }
+  }
+}
+</style>
+

schoolNewsWeb/src/views/public/article/card/IdeologicalArticleCard.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="ideological-card">
+    <div class="card-image">
+      <div class="image-placeholder"></div>
+    </div>
+    <div class="date-box">
+      <div class="day">10</div>
+      <div class="month">2025.10</div>
+    </div>
+    <div class="card-content">
+      <h3 class="card-title">学校召开"习近平新时代中国特色社会主义思想概论"课程集体备课会</h3>
+      <p class="card-desc">
+        深入贯彻习近平总书记关于思政课建设的重要论述，持续推进思政课教学改革创新。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss" scoped>
+.ideological-card {
+  background: #FFFFFF;
+  border-radius: 0.625em;
+  overflow: hidden;
+  box-shadow: 0px 0.5em 1.25em 0px rgba(164, 182, 199, 0.2);
+  transition: all 0.3s;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &:hover {
+    transform: translateY(-0.25em);
+    box-shadow: 0px 0.75em 1.75em 0px rgba(164, 182, 199, 0.3);
+  }
+
+  .card-image {
+    width: 100%;
+    aspect-ratio: 384 / 221;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    .image-placeholder {
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+      position: relative;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: url('data:image/svg+xml,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.2)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23dots)" /></svg>');
+      }
+    }
+  }
+
+  .date-box {
+    position: absolute;
+    top: calc(57.55% - 3.5em);
+    left: 5.7%;
+    width: 18.75%;
+    aspect-ratio: 1 / 1;
+    background: #C62828;
+    border-radius: 0.25em;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.3em;
+    padding: 0.4em 0.3em;
+    box-sizing: border-box;
+    z-index: 10;
+
+    .day {
+      font-family: 'PingFang SC';
+      font-weight: 600;
+      font-size: 1.875em;
+      line-height: 0.73;
+      color: #FFFFFF;
+      text-align: center;
+      width: 100%;
+    }
+
+    .month {
+      font-family: 'PingFang SC';
+      font-weight: 400;
+      font-size: 0.875em;
+      line-height: 1.57;
+      color: #FFFFFF;
+      text-align: center;
+      width: 100%;
+    }
+  }
+
+  .card-content {
+    padding: 17.4% 5.7% 5.7% 5.7%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .card-title {
+      font-family: 'PingFang SC';
+      font-weight: 600;
+      font-size: 1.25em;
+      line-height: 1.4;
+      color: #141F38;
+      margin: 0 0 0.25em 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    .card-desc {
+      font-family: 'PingFang SC';
+      font-weight: 400;
+      font-size: 0.875em;
+      line-height: 1.57;
+      color: rgba(0, 0, 0, 0.3);
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+</style>
+

schoolNewsWeb/src/views/public/article/card/index.ts

@@ -0,0 +1,2 @@
+export { default as HotArticleCard } from './HotArticleCard.vue';
+export { default as IdeologicalArticleCard } from './IdeologicalArticleCard.vue';

schoolNewsWeb/src/views/public/article/index.ts

@@ -1,2 +1,3 @@
 export { default as ArticleAddView } from './ArticleAddView.vue';
-export { default as ArticleShowView } from './ArticleShowView.vue';
+export { default as ArticleShowView } from './ArticleShowView.vue';
+export * from './card';

schoolNewsWeb/src/views/public/banner/BannerAdd.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="banner-add"></div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+</style>

schoolNewsWeb/src/views/public/banner/BannerCard.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="banner-card">
+    <div class="banner-content" @click="handleLearn">
+      <!-- <img :src="FILE_DOWNLOAD_URL + props.banner.imageUrl" alt="banner" class="banner-image"> -->
+       <span>test</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Banner } from '@/types';
+import { FILE_DOWNLOAD_URL } from '@/config';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const props = defineProps<{
+    banner: Banner;
+}>();
+
+function handleLearn() {
+    if (props.banner.linkType === 1) {
+        router.push(`/resource/${props.banner.linkID}`);
+    } else if (props.banner.linkType === 2) {
+        router.push(`/course/${props.banner.linkID}`);
+    } else if (props.banner.linkType === 3) {
+        window.open(props.banner.linkUrl, '_blank');
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.banner-card {
+  width: 100%;
+  height: 100%;
+
+  .banner-content {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    background-color: red;
+
+    .banner-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+      display: block;
+    }
+
+    .banner-overlay {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 60px 120px;
+      display: flex;
+      align-items: flex-end;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
+
+      .learn-btn {
+        width: 120px;
+        height: 39px;
+        background: #FFFFFF;
+        border-radius: 12px;
+        border: none;
+        font-family: 'PingFang SC';
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 22.4px;
+        color: #C62828;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.9);
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+      }
+    }
+  }
+}
+</style>

schoolNewsWeb/src/views/public/banner/index.ts

@@ -0,0 +1,3 @@
+// 导出目录下组件
+export { default as BannerAdd } from './BannerAdd.vue';
+export { default as BannerCard } from './BannerCard.vue';

schoolNewsWeb/src/views/public/editor/index.ts

@@ -0,0 +1 @@
+export { default as RichTextEditorView } from './RichTextEditorView.vue'

schoolNewsWeb/src/views/public/error/index.ts

@@ -0,0 +1,4 @@
+// 导出错误页面
+export { default as Error403 } from './403.vue'
+export { default as Error404 } from './404.vue'
+export { default as Error500 } from './500.vue'

schoolNewsWeb/src/views/public/index.ts

@@ -0,0 +1,7 @@
+export * from './article'
+export * from './banner'
+export * from './course'
+export * from './editor'
+export * from './error'
+export * from './login'
+export * from './task'

schoolNewsWeb/src/views/public/login/index.ts

@@ -0,0 +1,3 @@
+export { default as Login } from './Login.vue'
+export { default as Register } from './Register.vue'
+export { default as ForgotPassword } from './ForgotPassword.vue'

schoolNewsWeb/src/views/public/task/LearningProgress.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="learning-progress">
+    <div class="progress-header">
+      <div class="header-left">
+        <h3 class="progress-title">学习进度</h3>
+        <p class="update-time">更新时间：2025-09-25 18:30:00</p>
+      </div>
+      <div class="tab-buttons">
+        <button v-for="(tab, index) in tabs" :key="index" :class="['tab-btn', { active: activeTab === index }]"
+          @click="handleTabChange(index)">
+          {{ tab }}
+        </button>
+      </div>
+    </div>
+
+    <div class="chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import * as echarts from 'echarts';
+import type { EChartsOption } from 'echarts';
+
+const tabs = ref(['今日', '近一周', '近一月']);
+const activeTab = ref(0);
+const chartRef = ref<HTMLElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+
+// 模拟不同时间段的数据
+const chartDataMap = {
+  0: [
+    { name: '党史', value: 43, highlight: false },
+    { name: '理论', value: 58, highlight: false },
+    { name: '政策', value: 34, highlight: false },
+    { name: '思政', value: 20, highlight: false },
+    { name: '文化', value: 52, highlight: true }
+  ],
+  1: [
+    { name: '党史', value: 68, highlight: true },
+    { name: '理论', value: 52, highlight: false },
+    { name: '政策', value: 45, highlight: false },
+    { name: '思政', value: 38, highlight: false },
+    { name: '文化', value: 41, highlight: false }
+  ],
+  2: [
+    { name: '党史', value: 85, highlight: true },
+    { name: '理论', value: 72, highlight: false },
+    { name: '政策', value: 58, highlight: false },
+    { name: '思政', value: 65, highlight: false },
+    { name: '文化', value: 43, highlight: false }
+  ]
+};
+
+const chartData = computed(() => chartDataMap[activeTab.value as keyof typeof chartDataMap]);
+
+// 图表配置
+function getChartOption(): EChartsOption {
+  const data = chartData.value;
+  
+  return {
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      borderColor: 'transparent',
+      textStyle: {
+        color: '#fff',
+        fontSize: 12
+      },
+      formatter: function(params: any) {
+        const item = params[0];
+        return `${item.name}: ${item.value}%`;
+      }
+    },
+    grid: {
+      left: '0',
+      right: '20px',
+      top: '20px',
+      bottom: '40px',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: data.map(item => item.name),
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#979797',
+        fontSize: 14,
+        fontFamily: 'PingFang SC'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 100,
+      interval: 20,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#979797',
+        fontSize: 14,
+        fontFamily: 'PingFang SC'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#D4D4D5',
+          type: 'dashed'
+        }
+      }
+    },
+    series: [{
+      type: 'bar',
+      data: data.map(item => ({
+        value: item.value,
+        itemStyle: {
+          color: item.highlight ? '#FF6B6B' : '#C62828',
+          borderRadius: [8, 8, 0, 0]
+        }
+      })),
+      barWidth: 40,
+      label: {
+        show: false
+      }
+    }]
+  };
+}
+
+const chartOption = computed(getChartOption);
+
+// 初始化图表
+function initChart() {
+  if (!chartRef.value) return;
+
+  chartInstance = echarts.init(chartRef.value);
+  chartInstance.setOption(chartOption.value);
+
+  // 自动调整大小
+  window.addEventListener('resize', handleResize);
+}
+
+// 处理窗口大小变化
+function handleResize() {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+}
+
+// 处理标签切换
+function handleTabChange(index: number) {
+  activeTab.value = index;
+  if (chartInstance) {
+    chartInstance.setOption(chartOption.value, true);
+  }
+}
+
+// 监听配置变化
+watch(() => chartOption.value, () => {
+  if (chartInstance) {
+    chartInstance.setOption(chartOption.value, true);
+  }
+}, { deep: true });
+
+onMounted(() => {
+  initChart();
+});
+
+onUnmounted(() => {
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+  window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style lang="scss" scoped>
+.learning-progress {
+  width: 100%;
+  height: 371px;
+  background: #FFFFFF;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  padding: 30px 30px 40px 30px;
+
+  .progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 30px;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .progress-title {
+      font-family: 'PingFang SC';
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 38px;
+      color: #141F38;
+      margin: 0;
+    }
+
+    .update-time {
+      font-family: 'PingFang SC';
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      color: #B4B8BF;
+      margin: 0;
+    }
+  }
+
+  .tab-buttons {
+    display: flex;
+    gap: 4px;
+    background: #F9F9F9;
+    border: 1px solid #EBEBEB;
+    border-radius: 8px;
+    padding: 4px;
+
+    .tab-btn {
+      padding: 8px;
+      min-width: 71px;
+      height: 40px;
+      background: transparent;
+      border: none;
+      border-radius: 6px;
+      font-family: 'PingFang SC';
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 22px;
+      color: #B4B8BF;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &.active {
+        background: #FFFFFF;
+        color: #C62828;
+      }
+
+      &:hover:not(.active) {
+        color: #141F38;
+      }
+    }
+  }
+}
+
+  .chart-container {
+    height: 243px;
+  }
+</style>

schoolNewsWeb/src/views/public/task/LearningTaskList.vue

@@ -434,8 +434,8 @@ async function loadTaskList() {
   
   try {
     const pageParam: PageParam = {
-      page: pagination.value.current,
-      size: pagination.value.pageSize
+      pageNumber: pagination.value.current,
+      pageSize: pagination.value.pageSize
     };
     
     const filter: any = {};

schoolNewsWeb/src/views/public/task/index.ts

@@ -1,3 +1,4 @@
 export { default as LearningTaskAdd } from './LearningTaskAdd.vue';
 export { default as LearningTaskList } from './LearningTaskList.vue';
-export { default as LearingTaskDetail } from './LearingTaskDetail.vue';
+export { default as LearingTaskDetail } from './LearningTaskDetail.vue';
+export { default as LearningProgress } from './LearningProgress.vue';