feat: home content

components/CustomLayout.vue

@@ -4,6 +4,8 @@ import { watchEffect, computed } from "vue";
 import DefaultTheme from "vitepress/theme";
 import { useI18n } from "vue-i18n";
 import { useData, withBase } from "vitepress";
+
+import { Right } from "@element-plus/icons-vue";
 import i18n from "@/plugins/i18n";
 
 const Layout = DefaultTheme.Layout;
@@ -14,8 +16,8 @@ watchEffect(() => {
   i18n.global.locale.value = lang.value;
 });
 const docsLink = computed(() => {
-  return withBase( `/${localeIndex.value === 'root' ? '' : localeIndex.value + '/'}docs` )
-})
+  return withBase(`/${localeIndex.value === "root" ? "" : localeIndex.value + "/"}docs`);
+});
 </script>
 <template>
   <Layout>
@@ -23,16 +25,28 @@ const docsLink = computed(() => {
       <a :href="docsLink" class="content-before">{{ t("帮助中心") }}</a>
     </template>
     <template #nav-bar-content-after>
-      <a :href="docsLink" class="content-after">{{ t("CocoClass") }}</a>
+      <a href="https://cloud.cocorobo.cn" class="content-after">
+        {{ t("可可智慧教育平台") }}
+        <el-icon color="white" size="18" class="content-after__arrow">
+          <Right />
+        </el-icon>
+      </a>
     </template>
   </Layout>
 </template>
 <i18n locale="zh-HK">
 {
-  "帮助中心": "幫助中心"
+  "帮助中心": "幫助中心",
+  "可可智慧教育平台": "可可智慧教育平台"
+}
+</i18n>
+<i18n locale="en-US">
+{
+  "帮助中心": "Help Center",
+  "可可智慧教育平台": "CocoClass"
 }
 </i18n>
-<style scoped>
+<style scoped lang="scss">
 .content-before {
   color: #2e5aa8;
   font-size: 16px;
@@ -42,7 +56,16 @@ const docsLink = computed(() => {
 }
 .content-after {
   color: #2e5aa8;
-  padding: 0 12px;
-  /* TODO */
+  padding: 4px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1.5px solid #2e5aa8;
+  border-radius: 100px;
+  &__arrow {
+    padding: 2px;
+    background: #2e5aa8;
+    border-radius: 50%;
+  }
 }
 </style>

components/Edit/VideoToolBarItem.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { defineProps } from "vue";
+import { VideoCamera } from "@element-plus/icons-vue";
+import { NormalToolbar } from "md-editor-v3";
+
+const props = defineProps<{
+  insert?: Function;
+}>();
+
+const onClick = () => {
+  console.log("video");
+  // TODO
+  // emitHandler('video');
+  props.insert?.(() => ({
+    targetValue: "hello video",
+  }));
+};
+</script>
+<template>
+  <NormalToolbar title="video" @onClick="onClick">
+    <template #trigger>
+      <VideoCamera width="18" />
+    </template>
+  </NormalToolbar>
+</template>

components/Edit/index.vue

@@ -23,6 +23,7 @@ import type {
   AllowDropType,
   NodeDropType,
 } from "element-plus/es/components/tree/src/tree.type";
+import VideoToolBarItem from './VideoToolBarItem.vue'
 
 import path from "path-browserify";
 
@@ -37,6 +38,7 @@ const s3 = new S3Client({
 const SIDEBAR_SORTED_MAP_KEY = "SIDEBAR_SORTED_MAP.json";
 
 const tree$ = ref<InstanceType<typeof ElTree>>();
+const editor$ = ref<InstanceType<typeof MdEditor>>();
 
 const langSelect = ref<"zh-CN" | "zh-HK" | "en-US">("zh-CN");
 const langKeyPrefix = computed(() => {
@@ -409,16 +411,55 @@ onUnmounted(() => {
       </el-tree>
     </div>
     <MdEditor
+      ref="editor$"
       editorId="helpdocs-editor"
       v-model="text"
       v-loading="textLoading"
       :disabled="!currentOpenData"
-      :toolbarsExclude="['github']"
+      :toolbars="[
+        'bold',
+        'underline',
+        'italic',
+        'strikeThrough',
+        '-',
+        'title',
+        'sub',
+        'sup',
+        'quote',
+        'unorderedList',
+        'orderedList',
+        'task',
+        '-',
+        'codeRow',
+        'code',
+        'link',
+        'image',
+        0,
+        'table',
+        'mermaid',
+        'katex',
+        '-',
+        'revoke',
+        'next',
+        'save',
+        '=',
+        'prettier',
+        'pageFullscreen',
+        'fullscreen',
+        'preview',
+        'previewOnly',
+        'htmlPreview',
+        'catalog',
+      ]"
       previewTheme="custom"
       class="vp-doc"
       @save="onSave"
       @uploadImg="onUploadImg"
-    />
+    >
+      <template #defToolbars>
+        <VideoToolBarItem />
+      </template>
+    </MdEditor>
   </div>
   <AppendModal
     v-model:show="showAppendModal"

components/HomeCard/HomeCard.vue

@@ -64,7 +64,7 @@ const onClick = () => {
 </template>
 
 <style lang="scss" scoped>
-h2 {
+:slotted(:deep(h2)), h2 {
   border: none;
   margin: 0;
   padding: 0;

components/HomeContent.vue

@@ -16,7 +16,7 @@ const { localeIndex } = useData();
 const router = useRouter();
 const withLink = (href: string) => {
   return withBase(
-    path.join('/', localeIndex.value === "root" ? "" : localeIndex.value, "docs", href)
+    path.join("/", localeIndex.value === "root" ? "" : localeIndex.value, "docs", href)
   );
 };
 </script>
@@ -39,7 +39,7 @@ const withLink = (href: string) => {
             width: '268px',
             height: '148px',
           }"
-          :link="withLink('TODO1')"
+          :link="withLink('')"
         >
           <template #background>
             <img src="@/assets/images/card1.png" />
@@ -63,7 +63,7 @@ const withLink = (href: string) => {
             width: '128px',
             height: '128px',
           }"
-          :link="withLink('TODO1')"
+          :link="withLink('#登录')"
         >
           <template #background>
             <img src="@/assets/images/card2.png" />
@@ -85,7 +85,7 @@ const withLink = (href: string) => {
       <HomeSectionContent :span="24">
         <HomeCard title="基础使用">
           <HomeCardContent :span="8">
-            <HomeCard color="white" :link="withLink('TODO1')">
+            <HomeCard color="white" :link="withLink('课程创建')">
               <template #title>
                 <HomeCard.Title>
                   <IconNotebook color="#3681FC" />
@@ -98,7 +98,7 @@ const withLink = (href: string) => {
             </HomeCard>
           </HomeCardContent>
           <HomeCardContent :span="8">
-            <HomeCard color="white" :link="withLink('课程授课#课程实施')">
+            <HomeCard color="white" :link="withLink('课程授课')">
               <template #title>
                 <HomeCard.Title>
                   <IconBook color="#FF822B" />
@@ -111,11 +111,11 @@ const withLink = (href: string) => {
             </HomeCard>
           </HomeCardContent>
           <HomeCardContent :span="8">
-            <HomeCard color="white" :link="withLink('TODO1')">
+            <HomeCard color="white" :link="undefined">
               <template #title>
                 <HomeCard.Title>
                   <IconDirectory color="#34CEAE" />
-                  创建项目
+                  <el-badge value="即将上线"> 创建项目 </el-badge>
                 </HomeCard.Title>
               </template>
               <HomeCardContent>
@@ -128,7 +128,7 @@ const withLink = (href: string) => {
 
       <HomeSectionContent :span="24">
         <HomeCard title="进阶使用">
-          <HomeCardContent :span="8">
+          <!-- <HomeCardContent :span="8">
             <HomeCard color="white" :link="withLink('TODO1')">
               <template #title>
                 <HomeCard.Title>
@@ -140,28 +140,41 @@ const withLink = (href: string) => {
                 师生以协同建构（CocoNote）开展计算机支持下的协作问题解决。
               </HomeCardContent>
             </HomeCard>
+          </HomeCardContent> -->
+          <HomeCardContent :span="8">
+            <HomeCard color="white" :link="withLink('教师管理')">
+              <template #title>
+                <HomeCard.Title>
+                  <IconAiChuangJian />
+                  教师管理
+                </HomeCard.Title>
+              </template>
+              <HomeCardContent>
+                创建可重复使用的表单，组织团队资料收集与汇总。
+              </HomeCardContent>
+            </HomeCard>
           </HomeCardContent>
           <HomeCardContent :span="8">
-            <HomeCard color="white" :link="withLink('TODO1')">
+            <HomeCard color="white" :link="undefined">
               <template #title>
                 <HomeCard.Title>
                   <IconAiZhuShou />
-                  AI助手
+                  <el-badge value="即将上线"> AI助手 </el-badge>
                 </HomeCard.Title>
               </template>
               <HomeCardContent> 使用生成式人工智能技术提供对话式工具。 </HomeCardContent>
             </HomeCard>
           </HomeCardContent>
           <HomeCardContent :span="8">
-            <HomeCard color="white" :link="withLink('TODO1')">
+            <HomeCard color="white" :link="withLink('综合看板')">
               <template #title>
                 <HomeCard.Title>
                   <IconAiChuangJian />
-                  教师管理
+                  综合看板
                 </HomeCard.Title>
               </template>
               <HomeCardContent>
-                创建可重复使用的表单，组织团队资料收集与汇总。
+                汇总平台使用数据，并以可视化的形式进行查看。
               </HomeCardContent>
             </HomeCard>
           </HomeCardContent>
@@ -170,7 +183,7 @@ const withLink = (href: string) => {
     </HomeSection>
 
     <HomeSection title="更多资源">
-      <HomeSectionContent :span="12">
+      <!-- <HomeSectionContent :span="12">
         <HomeCard title="课程案例">
           <HomeCardContent :span="24">
             <ul class="fancy-list">
@@ -203,9 +216,9 @@ const withLink = (href: string) => {
             ></el-button>
           </HomeCardContent>
         </HomeCard>
-      </HomeSectionContent>
+      </HomeSectionContent> -->
 
-      <HomeSectionContent :span="12">
+      <!-- <HomeSectionContent :span="12">
         <HomeCard title="项目案例" :span="12">
           <HomeCardContent :span="24">
             <ul class="fancy-list">
@@ -238,11 +251,11 @@ const withLink = (href: string) => {
             ></el-button>
           </HomeCardContent>
         </HomeCard>
-      </HomeSectionContent>
+      </HomeSectionContent> -->
 
       <HomeSectionContent>
         <HomeCard>
-          <HomeCardContent :span="8">
+          <HomeCardContent :span="12">
             <HomeCard
               title="常见问题"
               color="white"
@@ -252,8 +265,13 @@ const withLink = (href: string) => {
                 width: '122px',
                 height: '128px',
               }"
-              :link="withLink('TODO1')"
+              :link="undefined"
             >
+              <template #title>
+                <HomeCard.Title>
+                  <el-badge value="即将上线"> 常见问题 </el-badge>
+                </HomeCard.Title>
+              </template>
               <template #background>
                 <img src="@/assets/images/card3.png" />
               </template>
@@ -262,7 +280,7 @@ const withLink = (href: string) => {
               </HomeCardContent>
             </HomeCard>
           </HomeCardContent>
-          <HomeCardContent :span="8">
+          <!-- <HomeCardContent :span="8">
             <HomeCard
               title="更新日志"
               color="white"
@@ -278,11 +296,11 @@ const withLink = (href: string) => {
                 <img src="@/assets/images/card4.png" />
               </template>
               <HomeCardContent>
-                <!-- TODO -->
+
               </HomeCardContent>
             </HomeCard>
-          </HomeCardContent>
-          <HomeCardContent :span="8">
+          </HomeCardContent> -->
+          <HomeCardContent :span="12">
             <HomeCard
               title="如何与AI对话"
               color="white"
@@ -292,8 +310,13 @@ const withLink = (href: string) => {
                 width: '167px',
                 height: '92px',
               }"
-              :link="withLink('TODO1')"
+              :link="undefined"
             >
+              <template #title>
+                <HomeCard.Title>
+                  <el-badge value="即将上线"> 如何与AI对话 </el-badge>
+                </HomeCard.Title>
+              </template>
               <template #background>
                 <img src="@/assets/images/card5.png" />
               </template>