CocoClassHelpDocs/components/HomeContent.vue

<script setup lang="ts">
import Search from "./Search/index.vue";
import HomeCard, { HomeCardContent } from "./HomeCard";
import HomeSection, { HomeSectionContent } from "./HomeSection";
import { ArrowRightBold } from "@element-plus/icons-vue";
import IconNotebook from "~icons/ccrbi-plain/notebook";
import IconBook from "~icons/ccrbi-plain/book";
import IconDirectory from "~icons/ccrbi-plain/directory";
import IconXieTongJianGou from "~icons/ccrbi-colored/xie-tong-jian-gou";
import IconAiZhuShou from "~icons/ccrbi-colored/ai-zhu-shou";
import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
import { useData, withBase, useRouter } from "vitepress";
import path from "path-browserify";
import { useBreakpoints } from "@vueuse/core";
import { computed } from 'vue'


const { localeIndex } = useData();
const router = useRouter();
const withLink = (href: string) => {
  return withBase(
    path.join("/", localeIndex.value === "root" ? "" : localeIndex.value, "docs", href)
  );
};
const breakpoints = useBreakpoints({
  tablet: 640,
  laptop: 1024,
  desktop: 1280,
})
const isMobile = computed(() => breakpoints.isSmaller('tablet'))

const cardNewerbgStyle = computed(() => {
  if (isMobile.value) {
    return {
      left: 0,
      right: 0,
      bottom: '8px',
      margin: 'auto',
      width: '134px',
      height: '74px',
    }
  }
  return {
    right: '16px',
    bottom: '24px',
    width: '268px',
    height: '148px',
  }
})

const cardLoginbgStyle = computed(() => {
  if (isMobile.value) {
    return {
      left: 0,
      right: 0,
      bottom: '8px',
      margin: 'auto',
      width: '64px',
      height: '64px',
    }
  }
  return {
    right: '40px',
    bottom: '24px',
    width: '128px',
    height: '128px',
  }
})

const cardUsualQuestionbgStyle = computed(() => {
  if (isMobile.value) {
    return {
      right: '24px',
      top: 0,
      bottom: 0,
      margin: 'auto',
      width: '102px',
      height: '102px',
    }
  }
  return {
    right: '10px',
    bottom: '0',
    width: '122px',
    height: '128px',
  }
})

const cardAIHowbgStyle = computed(() => {
  if (isMobile.value) {
    return {
      right: '24px',
      top: 0,
      bottom: 0,
      margin: 'auto',
      width: '133px',
      height: '74px',
    }
  }
  return {
    right: '17px',
    bottom: '0',
    width: '167px',
    height: '92px',
  }
})
</script>

<template>
  <div class="home-content">
    <HomeSection>
      <template #title>
        <h1 :style="{ fontSize: isMobile ? '24px' : undefined }">您好，需要提供什么帮助？</h1>
      </template>
      <HomeSectionContent>
        <Search />
      </HomeSectionContent>
    </HomeSection>

    <HomeSection title="新手入门">
      <HomeSectionContent :span="12">
        <HomeCard color="skyblue" :backgroundStyle="cardNewerbgStyle" :link="withLink('')">
          <template #background>
            <img src="@/assets/images/card1.png" />
          </template>
          <template #title>
            <HomeCard.Title showArrow> 平台概览 </HomeCard.Title>
          </template>
          <HomeCardContent v-if="!isMobile">
            <ul>
              <li>什么是可可智慧教育平台？</li>
              <li>功能概览</li>
            </ul>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>
      <HomeSectionContent :span="12">
        <HomeCard color="primary" :backgroundStyle="cardLoginbgStyle" :link="withLink('#登录')">
          <template #background>
            <img src="@/assets/images/card2.png" />
          </template>
          <template #title>
            <HomeCard.Title showArrow> 用户登录 </HomeCard.Title>
          </template>
          <HomeCardContent v-if="!isMobile">
            <ul>
              <li>如何获取账户？</li>
              <li>如何登录？</li>
            </ul>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>
    </HomeSection>

    <HomeSection title="平台使用">
      <HomeSectionContent :span="24">
        <HomeCard title="基础使用">
          <HomeCardContent :span="isMobile ? 24 : 8">
            <HomeCard color="white" :link="withLink('课程创建')">
              <template #title>
                <HomeCard.Title>
                  <IconNotebook color="#3681FC" />
                  创建课程
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                教师通过个人、协同的方式创建多种模式下的平台数字化课程。
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="isMobile ? 24 : 8">
            <HomeCard color="white" :link="withLink('课程授课')">
              <template #title>
                <HomeCard.Title>
                  <IconBook color="#FF822B" />
                  实施课程
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                开展数字化课程教学与学习，在实施中进行学习证据采集。
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="isMobile ? 24 : 8">
            <HomeCard color="white" :link="undefined">
              <template #title>
                <HomeCard.Title>
                  <IconDirectory color="#34CEAE" />
                  <el-badge value="即将上线"> 创建项目 </el-badge>
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                以项目式学习探究创建项目、记录项目、管理项目。
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>

      <HomeSectionContent :span="24">
        <HomeCard title="进阶使用">
          <!-- <HomeCardContent :span="8">
            <HomeCard color="white" :link="withLink('TODO1')">
              <template #title>
                <HomeCard.Title>
                  <IconXieTongJianGou />
                  协同建构
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                师生以协同建构（CocoNote）开展计算机支持下的协作问题解决。
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent> -->
          <HomeCardContent :span="isMobile ? 24 : 8">
            <HomeCard color="white" :link="withLink('教师管理')">
              <template #title>
                <HomeCard.Title>
                  <IconAiChuangJian />
                  教师管理
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                创建可重复使用的表单，组织团队资料收集与汇总。
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="isMobile ? 24 : 8">
            <HomeCard color="white" :link="withLink('AI工具')">
              <template #title>
                <HomeCard.Title>
                  <IconAiZhuShou />
                  AI助手
                </HomeCard.Title>
              </template>
              <HomeCardContent> 使用生成式人工智能技术提供对话式工具。 </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="isMobile ? 24 : 8">
            <HomeCard color="white" :link="withLink('综合看板')">
              <template #title>
                <HomeCard.Title>
                  <IconAiChuangJian />
                  综合看板
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                汇总平台使用数据，并以可视化的形式进行查看。
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>
    </HomeSection>

    <HomeSection title="更多资源">
      <!-- <HomeSectionContent :span="12">
        <HomeCard title="课程案例">
          <HomeCardContent :span="24">
            <ul class="fancy-list">
              <li @click="router.go(withLink('TODO'))">
                <el-text class="flex-1" size="large" truncated>
                  Self element set wadslfkjsa;ldkjf;lsdkjf;lsdajf;lasdkjf;ladskjfidth
                  100px
                </el-text>
                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
              </li>
              <li @click="router.go(withLink('TODO'))">
                <el-text class="flex-1" size="large" truncated>
                  Self element set wadslfkjsa;ldkjf;lsdkjf;lsdajf;lasdkjf;ladskjfidth
                  100px
                </el-text>
                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
              </li>
              <li @click="router.go(withLink('TODO'))">
                <el-text class="flex-1" size="large" truncated>
                  Self element set wadslfkjsa;ldkjf;lsdkjf;lsdajf;lasdkjf;ladskjfidth
                  100px
                </el-text>
                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
              </li>
            </ul>
          </HomeCardContent>
          <HomeCardContent :span="24">
            <el-button round size="large"
              >查看更多<el-icon class="el-icon--right"><ArrowRightBold /></el-icon
            ></el-button>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent> -->

      <!-- <HomeSectionContent :span="12">
        <HomeCard title="项目案例" :span="12">
          <HomeCardContent :span="24">
            <ul class="fancy-list">
              <li>
                <el-text class="flex-1" size="large" truncated>
                  Self element set wadslfkjsa;ldkjf;lsdkjf;lsdajf;lasdkjf;ladskjfidth
                  100px
                </el-text>
                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
              </li>
              <li>
                <el-text class="flex-1" size="large" truncated>
                  Self element set wadslfkjsa;ldkjf;lsdkjf;lsdajf;lasdkjf;ladskjfidth
                  100px
                </el-text>
                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
              </li>
              <li>
                <el-text class="flex-1" size="large" truncated>
                  Self element set wadslfkjsa;ldkjf;lsdkjf;lsdajf;lasdkjf;ladskjfidth
                  100px
                </el-text>
                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
              </li>
            </ul>
          </HomeCardContent>
          <HomeCardContent :span="24">
            <el-button round size="large"
              >查看更多<el-icon class="el-icon--right"><ArrowRightBold /></el-icon
            ></el-button>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent> -->

      <HomeSectionContent>
        <HomeCard>
          <HomeCardContent :span="isMobile ? 24 : 12">
            <HomeCard title="常见问题" color="white" :backgroundStyle="cardUsualQuestionbgStyle" :link="undefined">
              <template #title>
                <HomeCard.Title>
                  <el-badge value="即将上线"> 常见问题 </el-badge>
                </HomeCard.Title>
              </template>
              <template #background>
                <img src="@/assets/images/card3.png" />
              </template>
              <HomeCardContent>
                <!-- TODO -->
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <!-- <HomeCardContent :span="8">
            <HomeCard
              title="更新日志"
              color="white"
              :backgroundStyle="{
                right: '0',
                bottom: '0',
                width: '160px',
                height: '128px',
              }"
              :link="withLink('TODO1')"
            >
              <template #background>
                <img src="@/assets/images/card4.png" />
              </template>
              <HomeCardContent>

              </HomeCardContent>
            </HomeCard>
          </HomeCardContent> -->
          <HomeCardContent :span="isMobile ? 24 : 12">
            <HomeCard title="如何与AI对话" color="white" :backgroundStyle="cardAIHowbgStyle" :link="undefined">
              <template #title>
                <HomeCard.Title>
                  <el-badge value="即将上线"> 如何与AI对话 </el-badge>
                </HomeCard.Title>
              </template>
              <template #background>
                <img src="@/assets/images/card5.png" />
              </template>
              <HomeCardContent>
                <!-- TODO -->
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>
    </HomeSection>
  </div>
</template>

<style lang="scss" scoped>
@use '@/.vitepress/theme/screen' as *;

.home-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding-top: 80px;

  @include breakpoint(mobile) {
    gap: 32px;
    padding-top: 50px;
  }
}

.fancy-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;

  li {
    display: flex;
    height: 38px;
    align-items: center;
    transition: all 0.2s;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 4px;
    margin: 0;
    cursor: pointer;

    &::before {
      content: "•";
      margin: 0 8px;
    }

    &:hover {
      // border: 1px solid #3681fc;
      border-color: #3681fc;
      background: #ffffff;
    }

    span {
      flex: 1;
    }
  }
}

.el-button:not(:hover) {
  background-color: transparent;
  border: 1px solid #aeccfe;
}
</style>