Merge branch 'feat/random' of qweasdzxcpkh/CocoClassHelpDocs into master

.vitepress/config.mts

@@ -1,22 +1,96 @@
 import { fileURLToPath, URL } from "node:url";
 import { defineConfig } from "vitepress";
-import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
+import Icons from "unplugin-icons/vite";
+// import Components from 'unplugin-vue-components/vite'
+import { FileSystemIconLoader } from "unplugin-icons/loaders";
+import {
+  SVG,
+  cleanupSVG,
+  parseColors,
+  runSVGO,
+  deOptimisePaths,
+  importDirectory,
+} from "@iconify/tools";
+import { compareColors, stringToColor } from "@iconify/utils/lib/colors";
+
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "CocoBlockly帮助文档",
   description: "Cococlass help documents",
   srcDir: "pages",
+  // themeConfig: {
+  //   search: {
+  //     provider: "local",
+  //   },
+  // },
 
   vite: {
     publicDir: "../public",
     plugins: [
-      /* ... */
       VueI18nPlugin({
         /* options */
         // locale messages resource pre-compile option
         // include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
       }),
+      Icons({
+        compiler: "vue3",
+        customCollections: {
+          "ccrbi-plain": FileSystemIconLoader(
+            "assets/icons/plain",
+            async (svgStr) => {
+              const svg = new SVG(svgStr);
+              cleanupSVG(svg);
+
+
+              parseColors(svg, {
+                defaultColor: "currentColor",
+                callback: (attr, colorStr, color) => {
+                  // console.log('Color:', colorStr, color);
+                  // 普通图标
+                  return "currentColor";
+
+                  // Change black to 'currentColor'
+                  // const blackColor = stringToColor("black");
+                  // if (color && compareColors(color, blackColor!)) {
+                  //   return "currentColor";
+                  // }
+
+                  // switch (color?.type) {
+                  //   case "none":
+                  //   case "current":
+                  //     return color;
+                  // }
+                  // throw new Error(
+                  //   `Unexpected color "${colorStr}" in attribute ${attr}`
+                  // );
+                },
+              });
+
+              // Optimise, but do not change shapes because they are animated
+              runSVGO(svg, {
+                keepShapes: true,
+              });
+              return svg.toMinifiedString({});
+            }
+          ),
+          "ccrbi-colored": FileSystemIconLoader(
+            "assets/icons/colored",
+            async (svgStr) => {
+              const svg = new SVG(svgStr);
+              cleanupSVG(svg);
+
+
+              // Optimise, but do not change shapes because they are animated
+              runSVGO(svg, {
+                keepShapes: true,
+              });
+              return svg.toMinifiedString({});
+            }
+          ),
+        },
+      }),
     ],
     resolve: {
       alias: [
@@ -26,7 +100,10 @@ export default defineConfig({
             new URL("../components/CustomNavBar.vue", import.meta.url)
           ),
         },
-        { find: '@/', replacement: fileURLToPath(new URL('../', import.meta.url)) },
+        {
+          find: "@/",
+          replacement: fileURLToPath(new URL("../", import.meta.url)),
+        },
       ],
     },
   },
@@ -38,9 +115,6 @@ export default defineConfig({
         logo: "/logo.png",
         siteTitle: false,
         // https://vitepress.dev/reference/default-theme-config
-        // search: {
-        //   provider: 'local'
-        // },
         // nav: [
         //   { text: 'Home', link: '/' },
         //   { text: 'Examples', link: '/markdown-examples' }
@@ -54,9 +128,8 @@ export default defineConfig({
           },
           {
             text: "电子模块基本教学",
-            items: [
-              { text: "todo", link: "/docs" },
-            ],
+            collapsed: true,
+            items: [{ text: "todo", link: "/docs" }],
           },
         ],
         // socialLinks: [
@@ -71,9 +144,6 @@ export default defineConfig({
         logo: "/logo.png",
         siteTitle: false,
         // https://vitepress.dev/reference/default-theme-config
-        // search: {
-        //   provider: 'local'
-        // },
         // nav: [
         //   { text: 'Home', link: '/' },
         //   { text: 'Examples', link: '/markdown-examples' }
@@ -87,9 +157,8 @@ export default defineConfig({
           },
           {
             text: "電子模組基本教學",
-            items: [
-              { text: "todo", link: "/zh-HK/docs" },
-            ],
+            collapsed: true,
+            items: [{ text: "todo", link: "/zh-HK/docs" }],
           },
         ],
         // socialLinks: [

.vitepress/theme/index.ts

@@ -1,8 +1,10 @@
 // https://vitepress.dev/guide/custom-theme
 import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
+import ElementPlus from 'element-plus'
 import CustomLayout from "../../components/CustomLayout.vue";
 import i18n from "../../plugins/i18n";
+import 'element-plus/dist/index.css'
 import "./style.css";
 
 export default {
@@ -10,6 +12,7 @@ export default {
   Layout: CustomLayout,
   enhanceApp({ app, router, siteData }) {
     app.use(i18n);
+    app.use(ElementPlus)
     // ...
   },
 } satisfies Theme;

README.md

@@ -12,6 +12,21 @@ npm run docs:dev
 
 把需要新增的文档放在 `pages/docs/` `pages/{语言}/docs/` 下，必须为 markdown 文档
 
+## 组件库
+
+element-ui plus
+
 ## 样式定制
 
-See https://vitepress.dev/zh/guide/extending-default-theme#customizing-css
+主要是[ vitepress ](https://vitepress.dev/zh/guide/extending-default-theme#customizing-css)和[ element-ui ](https://element-plus.org/zh-CN/guide/theming.html)的样式变量覆盖
+
+
+### icons
+
+使用[ unplugin-icons ](https://github.com/unplugin/unplugin-icons?tab=readme-ov-file)和[ iconify ](https://iconify.design/docs)
+
+#### 新增icon
+
+- 导出 figma svg，放在 assets/icons 目录下，是plain还是colored看情况而定
+  - plain: 单色图标，可以通过css color属性设置颜色
+  - colored: 双色图标，固定颜色，一般是多种颜色的图标

assets/icons/colored/ai-chuang-jian.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 2V16H16.1622C16.8757 14.04 18.8973 12.64 21.2162 12.64C21.8108 12.64 22.4649 12.752 23 12.92V2H1ZM6.47027 8.552L5.63784 9.336L4.80541 8.552L3.61622 7.432L4.44865 6.648L5.63784 7.768L8.13514 5.36L8.96757 6.144L6.47027 8.552Z" fill="white"/>
+<path d="M1 2H23V4.33333H1V2ZM12.2973 7.83333H17.6487C18.0054 7.83333 18.2432 8.06667 18.2432 8.41667C18.2432 8.76667 18.0054 9 17.6487 9H12.2973C11.9405 9 11.7027 8.76667 11.7027 8.41667C11.7027 8.06667 11.9405 7.83333 12.2973 7.83333Z" fill="#3681FC"/>
+<path d="M9.00006 5.84514L6.63742 8.21134L5.86819 9.00007L5.09896 8.21134L4.00006 7.02824L4.76929 6.23951L5.86819 7.36627L8.17589 5.00007L9.00006 5.84514Z" fill="#17C469"/>
+<path d="M12.5454 12.0001H17.4545C17.7818 12.0001 17.9999 12.2001 17.9999 12.5001C17.9999 12.8001 17.7818 13.0001 17.4545 13.0001H12.5454C12.2181 13.0001 11.9999 12.8001 11.9999 12.5001C11.9999 12.2001 12.2181 12.0001 12.5454 12.0001Z" fill="#3681FC"/>
+<path d="M6.00006 15C4.90915 15 4.00006 14.0909 4.00006 13C4.00006 11.9091 4.90915 11 6.00006 11C7.09097 11 8.00006 11.9091 8.00006 13C8.00006 14.0909 7.09097 15 6.00006 15ZM6.00006 11.9697C5.45461 11.9697 4.96976 12.4545 4.96976 13C4.96976 13.5454 5.45461 14.0303 6.00006 14.0303C6.54552 14.0303 7.03036 13.5454 7.03036 13C7.03036 12.4545 6.54552 11.9697 6.00006 11.9697Z" fill="#E67F36"/>
+<path d="M22.8571 13.2C22.5143 12.8571 22.1714 12.5714 21.7143 12.4C21.2 12.1714 20.6286 12 20 12C18.4 12 17.0286 12.9143 16.4 14.2857C16.2286 14.6286 16.1143 15.0286 16.0571 15.4286C16 15.6 16 15.8286 16 16C16 18.2286 17.7714 20 20 20C22.2286 20 24 18.2286 24 16C24 14.9143 23.5429 13.9429 22.8571 13.2ZM21.7143 16.5714H20.5714V17.7143C20.5714 18 20.2857 18.2857 20 18.2857C19.7143 18.2857 19.4286 18 19.4286 17.7143V16.5714H18.2857C18 16.5714 17.7143 16.2857 17.7143 16C17.7143 15.7143 18 15.4286 18.2857 15.4286H19.4286V14.2857C19.4286 14 19.7143 13.7143 20 13.7143C20.2857 13.7143 20.5714 14 20.5714 14.2857V15.4286H21.7143C22 15.4286 22.2857 15.7143 22.2857 16C22.2857 16.2857 22 16.5714 21.7143 16.5714Z" fill="#17C469"/>
+<path d="M23 16C23 16.375 22.625 16.75 22.25 16.75H20.75V18.25C20.75 18.625 20.375 19 20 19C19.625 19 19.25 18.625 19.25 18.25V16.75H17.75C17.375 16.75 17 16.375 17 16C17 15.625 17.375 15.25 17.75 15.25H19.25V13.75C19.25 13.375 19.625 13 20 13C20.375 13 20.75 13.375 20.75 13.75V15.25H22.25C22.625 15.25 23 15.625 23 16Z" fill="white"/>
+</svg>

assets/icons/colored/ai-zhu-shou.svg

@@ -0,0 +1,24 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_66_1228)">
+<path d="M7.07946 8.19832C6.90621 8.91332 6.81429 9.66014 6.81429 10.4286C6.81429 14.1096 8.92393 17.2981 12 18.8506C10.7248 19.4945 9.28339 19.8571 7.75714 19.8571C6.11343 19.8571 4.56832 19.4364 3.22239 18.697L2.71757 17.9046C1.63014 16.1989 1 14.1729 1 12C1 6.67993 4.77693 2.24182 9.79568 1.22118C10.5079 1.07621 11.2449 1 12 1C12.7551 1 13.4921 1.07621 14.2043 1.22118C13.4296 1.39168 12.6903 1.65764 12 2.0065C9.56586 3.23496 7.73711 5.48761 7.07946 8.19832Z" fill="url(#paint0_linear_66_1228)"/>
+<path d="M21.2824 17.9046C21.3787 17.3652 21.4286 16.8097 21.4286 16.2429C21.4286 12.8387 19.6246 9.85618 16.9205 8.19832C15.4882 7.32028 13.8032 6.81428 12 6.81428C10.1968 6.81428 8.51182 7.32028 7.07947 8.19832C7.73711 5.4876 9.56586 3.23496 12 2.0065C12.6903 1.65764 13.4296 1.39168 14.2043 1.22118C19.2231 2.24182 23 6.67993 23 12C23 14.1729 22.3699 16.1989 21.2824 17.9046Z" fill="url(#paint1_linear_66_1228)"/>
+<path d="M21.4286 16.2429C21.4286 16.8455 21.3724 17.4348 21.2636 18.006L20.69 18.7446C18.6778 21.3339 15.5334 23 12 23C8.46664 23 5.32221 21.3339 3.31 18.7446C4.6351 19.4545 6.14918 19.8571 7.75714 19.8571C9.3651 19.8571 10.7248 19.4945 12 18.8506C15.0761 17.2981 17.1857 14.1096 17.1857 10.4286C17.1857 9.66014 17.0938 8.91332 16.9205 8.19832C19.6246 9.85618 21.4286 12.8387 21.4286 16.2429Z" fill="url(#paint2_linear_66_1228)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_66_1228" x1="2.08625" y1="17.5609" x2="16.3151" y2="3.332" gradientUnits="userSpaceOnUse">
+<stop stop-color="#364EE7"/>
+<stop offset="1" stop-color="#938DFF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_66_1228" x1="10.2781" y1="3.05935" x2="23.2027" y2="15.9844" gradientUnits="userSpaceOnUse">
+<stop stop-color="#364EE7"/>
+<stop offset="1" stop-color="#2CCAFF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_66_1228" x1="17.852" y1="8.73614" x2="9.47471" y2="23.2459" gradientUnits="userSpaceOnUse">
+<stop stop-color="#364EE7"/>
+<stop offset="1" stop-color="#4DE69A"/>
+</linearGradient>
+<clipPath id="clip0_66_1228">
+<rect width="22" height="22" fill="white" transform="translate(1 1)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/colored/xie-tong-jian-gou.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.6343 10.1622C17.3919 10.3252 17.1799 10.5224 17.0033 10.7433L10.5091 7.86424C10.7666 7.04655 10.6807 6.12106 10.1961 5.34281C9.34808 3.97824 7.59898 3.58911 6.28904 4.47516C4.97911 5.36121 4.60556 7.18064 5.45614 8.54521C5.88268 9.23144 6.53639 9.67052 7.24815 9.82565L7.6116 17.1717C7.27591 17.2427 6.9478 17.3794 6.6424 17.5871C5.33246 18.4706 4.95891 20.2926 5.80949 21.6572C6.65754 23.0218 8.40665 23.4109 9.71658 22.5248C10.8524 21.7597 11.2814 20.2874 10.8246 19.0227L17.1875 14.7265C18.1113 15.6783 19.5752 15.8676 20.711 15.1025C22.0209 14.2191 22.3944 12.397 21.5439 11.0325C20.6933 9.66789 18.9442 9.27877 17.6343 10.1622ZM9.3607 9.41286C9.55505 9.2814 9.73173 9.1289 9.88316 8.958L16.4429 11.8659C16.2915 12.4496 16.3142 13.078 16.5262 13.6643L10.1633 17.9631C9.78725 17.5766 9.32284 17.3137 8.82562 17.1928L8.45965 9.81513C8.77262 9.73888 9.07802 9.60479 9.3607 9.41286Z" fill="black" fill-opacity="0.26"/>
+<path d="M2.80453 9.71989C3.52589 10.8326 4.65972 11.6132 5.9566 11.8899C7.25349 12.1666 8.60718 11.9168 9.71989 11.1955C10.8326 10.4741 11.6132 9.34028 11.8899 8.0434C12.1666 6.74651 11.9168 5.39282 11.1955 4.28011C10.4741 3.1674 9.34028 2.38682 8.0434 2.1101C6.74651 1.83337 5.39282 2.08317 4.28011 2.80453C3.1674 3.52589 2.38682 4.65972 2.1101 5.9566C1.83337 7.25349 2.08317 8.60718 2.80453 9.71989Z" fill="#EE3E3E"/>
+<path d="M4.64361 22.1759C4.92935 22.6167 5.29912 22.9969 5.73179 23.2947C6.16446 23.5926 6.65156 23.8023 7.16528 23.9119C7.679 24.0216 8.20929 24.0289 8.72585 23.9336C9.24242 23.8383 9.73515 23.6421 10.1759 23.3564C10.6167 23.0706 10.9969 22.7009 11.2947 22.2682C11.5926 21.8355 11.8023 21.3484 11.9119 20.8347C12.0216 20.321 12.0289 19.7907 11.9336 19.2741C11.8383 18.7576 11.6421 18.2648 11.3564 17.8241C11.0706 17.3833 10.7009 17.0031 10.2682 16.7053C9.83554 16.4074 9.34844 16.1977 8.83472 16.0881C8.321 15.9784 7.79071 15.9711 7.27415 16.0664C6.75758 16.1617 6.26485 16.3579 5.82408 16.6436C5.38331 16.9294 5.00314 17.2991 4.70528 17.7318C4.40741 18.1645 4.19768 18.6516 4.08806 19.1653C3.97845 19.679 3.97109 20.2093 4.06641 20.7259C4.16173 21.2424 4.35786 21.7352 4.64361 22.1759Z" fill="#FFCC00"/>
+<path d="M15.5632 14.4039C15.8132 14.7895 16.1368 15.1222 16.5153 15.3828C16.8939 15.6435 17.3201 15.827 17.7696 15.9229C18.2191 16.0189 18.6831 16.0253 19.1351 15.9419C19.5871 15.8585 20.0183 15.6869 20.404 15.4369C20.7896 15.1868 21.1223 14.8633 21.3829 14.4847C21.6435 14.1061 21.8271 13.6799 21.923 13.2304C22.0189 12.7809 22.0253 12.3169 21.9419 11.8649C21.8585 11.4129 21.6868 10.9818 21.4368 10.5961C21.1868 10.2105 20.8632 9.87779 20.4847 9.61715C20.1061 9.35651 19.6799 9.17299 19.2304 9.07707C18.7809 8.98114 18.3169 8.9747 17.8649 9.0581C17.4129 9.1415 16.9817 9.31311 16.596 9.56314C16.2104 9.81316 15.8777 10.1367 15.6171 10.5153C15.3565 10.8939 15.1729 11.3201 15.077 11.7696C14.9811 12.2191 14.9747 12.6831 15.0581 13.1351C15.1415 13.5871 15.3132 14.0182 15.5632 14.4039Z" fill="#3681FC"/>
+</svg>

assets/icons/plain/book.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.75 4.48911L21.7294 21.1713C21.7286 21.8974 21.1512 22.4883 20.4424 22.4883H6.79955L6.80235 22.5H5.74789C5.10325 22.4997 4.46854 22.4036 3.91982 22.0376C3.01061 21.4316 2.43797 20.5825 2.30264 19.4612C2.26371 19.1391 2.25278 18.9793 2.25252 18.6543C2.24947 14.2028 2.24896 9.7514 2.25227 5.29996C2.25277 4.68537 2.34436 4.09164 2.59341 3.51745C2.83661 2.95656 3.21693 2.53954 3.67662 2.16787C4.28284 1.67761 4.97733 1.50037 5.72957 1.50011C9.27887 1.49907 15.9544 1.50558 18.0465 1.5108C18.4019 1.51158 18.6891 1.80688 18.6891 2.17099V14.9373C18.6891 15.3025 18.4004 15.5986 18.044 15.5986C16.0348 15.5988 9.8426 15.5991 6.56983 15.5975C3.25254 15.5975 3.22507 21.1825 6.49758 21.1825L6.49809 21.1843H20.4427C20.4511 21.1843 20.4577 21.1775 20.4577 21.1689L20.4783 4.48677C20.4788 4.12708 20.7635 3.83595 21.1143 3.83595H21.115C21.4661 3.83699 21.7505 4.12917 21.75 4.48911ZM17.9112 17.5536H7.12797C6.77665 17.5536 6.49199 17.8453 6.49199 18.2052C6.49199 18.5651 6.77665 18.8568 7.12797 18.8568H17.9112C18.2625 18.8568 18.5472 18.5651 18.5472 18.2052C18.5472 17.8453 18.2623 17.5536 17.9112 17.5536Z" fill="#FF822B"/>
+</svg>

assets/icons/plain/directory.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2867 12.2802H10.7726C10.2298 12.2802 9.79548 11.8335 9.79548 11.275C9.79548 10.7166 10.2298 10.2699 10.7726 10.2699H17.2867C17.8295 10.2699 18.2638 10.7166 18.2638 11.275C18.2638 11.8335 17.8295 12.2802 17.2867 12.2802ZM6.15845 15.2398C6.15845 15.8541 6.59273 16.3008 7.18985 16.3008C7.78697 16.3008 8.22125 15.7982 8.22125 15.2398C8.22125 14.6814 7.78697 14.1788 7.18985 14.1788C6.59273 14.1788 6.15845 14.6255 6.15845 15.2398ZM6.15845 11.275C6.15845 11.8893 6.59273 12.336 7.18985 12.336C7.78697 12.336 8.22125 11.8335 8.22125 11.275C8.22125 10.7166 7.78697 10.214 7.18985 10.214C6.59273 10.214 6.15845 10.7166 6.15845 11.275ZM17.2867 16.245H10.7726C10.2298 16.245 9.79548 15.7982 9.79548 15.2398C9.79548 14.6814 10.2298 14.2347 10.7726 14.2347H14.0296H17.2867C17.8295 14.2347 18.2638 14.6814 18.2638 15.2398C18.2638 15.7982 17.8295 16.245 17.2867 16.245ZM21.738 19.4838V6.91939C21.738 5.41166 20.3809 5.52335 20.3809 5.52335H12.7268C12.2926 5.52335 12.0211 5.29998 12.0211 5.29998C12.0211 5.29998 11.6954 4.74156 11.0983 3.8481C10.5555 2.84295 9.84977 3.01047 9.84977 3.01047H3.93281C2.25 3.01047 2.25 4.62988 2.25 4.62988V19.3721C2.25 21.2149 3.6071 20.9915 3.6071 20.9915H20.5437C21.9551 20.9915 21.738 19.4838 21.738 19.4838Z" fill="#34CEAE"/>
+</svg>

assets/icons/plain/notebook.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.85 3.04669C19.95 3.04669 19.2 3.80545 19.2 4.71595V5.39883H22.5V4.71595C22.5 3.76751 21.75 3.04669 20.85 3.04669ZM19.2 5.77821H22.5V19.5496H19.2V5.77821ZM20.85 21.75L22.3875 19.8152H19.275L20.85 21.75ZM14.8875 2.25H4.575C2.8875 2.25 1.5 3.6537 1.5 5.36089V18.4494C1.5 20.1566 2.8875 21.5603 4.575 21.5603H14.8875C16.575 21.5603 17.9625 20.1566 17.9625 18.4494V5.36089C17.9625 3.6537 16.575 2.25 14.8875 2.25ZM6.6 17.0078H5.2875V15.7558H6.6V17.0078ZM6.6 12.607H5.2875V11.3551H6.6V12.607ZM6.6 8.20623H5.2875V6.95428H6.6V8.20623ZM14.175 17.0078H7.6125V15.7558H14.1375V17.0078H14.175ZM14.175 12.607H7.6125V11.3551H14.1375V12.607H14.175ZM14.175 8.20623H7.6125V6.95428H14.1375V8.20623H14.175Z" fill="#3681FC"/>
+</svg>

components/HomeContent.vue

@@ -1,18 +1,78 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import Search from "./Search/index.vue";
+import { ArrowRightBold } from "@element-plus/icons-vue";
 const count = ref(0);
 </script>
 <template>
   <div class="home-content">
-    <span>{{ count }}</span>
-    <button @click="count++">test</button>
+    <h1>您好，需要提供什么帮助？</h1>
+    <Search />
+    <h1>新手入门</h1>
+    <section>
+      <div class="card type1">
+        <h2>
+          平台概览<el-icon><ArrowRightBold /></el-icon>
+        </h2>
+        <span class="content">TODO</span>
+      </div>
+
+      <div class="card">
+        <h2>
+          平台概览<el-icon><ArrowRightBold /></el-icon>
+        </h2>
+        <span class="content">TODO</span>
+      </div>
+    </section>
   </div>
 </template>
 
 <style lang="scss" scoped>
+h2 {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
 .home-content {
   display: flex;
   flex-direction: column;
   align-items: center;
+  section {
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    width: 100%;
+    gap: 20px;
+  }
+  .card {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    border-radius: 20px;
+    padding: 32px;
+    background: #f5f9ff;
+    border: 1px solid #e2eeff;
+    min-height: 240px;
+    &.type1 {
+      background-color: #f6fdff;
+      border: 1px solid #e3f8f4;
+    }
+    h2 {
+      display: flex;
+      align-items: center;
+      .el-icon {
+        width: 24px;
+        height: 24px;
+        margin-left: 8px;
+        color: #00000042;
+      }
+    }
+    .content {
+      font-size: 14px;
+      font-weight: 400;
+    }
+  }
 }
 </style>

components/Search/index.vue

@@ -0,0 +1,139 @@
+<script lang="ts">
+export default {
+  name: "Search",
+};
+</script>
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import { watchDebounced, useFocus } from "@vueuse/core";
+import { useI18n } from "vue-i18n";
+import _ from "lodash";
+
+const { t } = useI18n();
+
+const input = ref("");
+const input$ = ref();
+const { focused } = useFocus(computed(() => input$.value?.input));
+const suggestions = ref<unknown[]>([]);
+const loading = ref(false);
+
+const suggestionVisible = computed(() => {
+  // TEST
+  // return true
+  const isValidData = suggestions.value.length > 0;
+  return focused.value && (isValidData || loading.value);
+});
+
+watch(
+  () => input.value,
+  (val) => {
+    console.log(input$.value);
+    loading.value = !!val;
+    if (!val) {
+      suggestions.value = [];
+    }
+  }
+);
+
+const fetchSuggestions = (mock) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      // MOCK
+      // TODO should we use local search and gpt search together?
+      resolve(["vue", "react", mock]);
+    }, 1000);
+  });
+};
+
+watchDebounced(
+  () => input.value,
+  async (taggedInput) => {
+    if (!taggedInput) {
+      return;
+    }
+    const result = await fetchSuggestions(taggedInput);
+    if (taggedInput === input.value) {
+      suggestions.value = result as unknown[];
+      loading.value = false;
+    }
+  },
+  { debounce: 500 }
+);
+</script>
+<template>
+  <div class="search-container">
+    <el-popover
+      :visible="suggestionVisible"
+      :show-arrow="false"
+      :offset="0"
+      :teleported="false"
+      width="100%"
+    >
+      <template #reference>
+        <div class="search-trigger" :class="{ 'has-content': suggestionVisible }">
+          <el-input
+            :ref="(el) => (input$ = el)"
+            v-model="input"
+            clearable
+            :prefix-icon="Search"
+            :placeholder="t('请输入关键词，如：课程、协同、AI')"
+          ></el-input>
+        </div>
+      </template>
+      <div class="search-content">
+        <template v-if="loading">
+          <span>loading</span>
+        </template>
+        <template v-else>
+          <ul>
+            <li v-for="(suggest, _index) in suggestions" :key="_index">{{ suggest }}</li>
+          </ul>
+        </template>
+      </div>
+    </el-popover>
+  </div>
+</template>
+<i18n locale="zh-HK">
+{
+  "请输入关键词，如：课程、协同、AI": "TODO",
+}
+</i18n>
+<style lang="scss" scoped>
+.search-container {
+  width: 514px;
+  position: relative;
+  .search-trigger {
+    border: 1px solid #aeccfe;
+    padding: 1px;
+    width: 100%;
+    height: 52px;
+    border-radius: 26px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    overflow: hidden;
+    transition: all 0.2s;
+    :deep(.el-input) {
+      .el-input__wrapper {
+        box-shadow: none;
+      }
+    }
+    &:has(input:focus) {
+      border: none;
+      box-shadow: var(--el-box-shadow-light);
+    }
+    &.has-content {
+      border-bottom: 1px solid #e2eeff;
+      border-radius: 26px 26px 0 0;
+    }
+  }
+  :deep(.el-popover) {
+    border-radius: 0 0 26px 26px;
+    border: none;
+    clip-path: inset(0px -10px -10px -10px);
+  }
+  .search-content {
+  }
+}
+</style>

package.json

@@ -7,10 +7,16 @@
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@types/node": "^20.14.2",
+    "@vue/compiler-sfc": "^3.4.29",
     "sass": "^1.77.5",
+    "unplugin-icons": "^0.19.0",
     "vitepress": "^1.2.3"
   },
   "dependencies": {
+    "@iconify/tools": "^4.0.4",
+    "@vueuse/core": "^10.11.0",
+    "element-plus": "^2.7.5",
+    "lodash": "^4.17.21",
     "vue-i18n": "^9.13.1"
   }
 }

pages/zh-HK/index.md

@@ -3,6 +3,8 @@
 layout: home
 ---
 
-### test
+<script setup lang="ts">
+import HomeContent from '@/components/HomeContent.vue'
+</script>
 
-help
+<HomeContent />

tsconfig.json

@@ -66,6 +66,9 @@
     "skipLibCheck": true,
 
     "paths": { "@/*": ["./*"] },
-    "lib": ["ES2020", "DOM", "DOM.Iterable"]
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": [
+      "unplugin-icons/types/vue",
+    ]
   },
 }