chore: move site dir

30 files changed, 976 insertions, 0 deletions

diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..88a4d52
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,7 @@
+<template>
+    <router-view />
+</template>
+
+<script lang="ts">
+export default {}
+</script>
\ No newline at end of file
diff --git a/src/assets/Hydroroll-small.svg b/src/assets/Hydroroll-small.svg
new file mode 100644
index 0000000..242c16c
--- /dev/null
+++ b/src/assets/Hydroroll-small.svg
@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 193.2 193.2"
+  viewBox="0 0 193.2 193.2" xmlns:xlink="http://www.w3.org/1999/xlink" width="193.2" height="193.2">
+
+  <defs>
+    <g id="1">
+      <path d="M43.21,112.8c-1.44,0.57-3.07-0.13-3.64-1.56c-0.28-0.69-0.26-1.44,0-2.08c2.24-5.61,1.78-11.23,1.36-16.84l-0.85-8.42
+	c-0.21-2.81-0.3-5.61-0.23-8.42c0.16-5.61,1.17-11.23,1.14-16.84c-0.02-5.61-0.29-11.23-1.43-16.84c-0.29-1.44,0.64-2.84,2.08-3.13
+	c1.44-0.29,2.84,0.64,3.13,2.08c0.07,0.35,0.07,0.72,0,1.05c-1.13,5.61-1.41,11.23-1.42,16.84c-0.03,5.61,0.98,11.23,1.14,16.84
+	c0.08,2.81-0.02,5.61-0.23,8.42l-0.85,8.42c-0.41,5.61-0.88,11.23,1.36,16.84C45.35,110.6,44.65,112.23,43.21,112.8z"
+        fill="black" />
+
+    </g>
+    <g id="2">
+      <path d="M53.19,137.35
+	c0.04,1.07-0.8,1.98-1.87,2.02c-1.07,0.04-1.98-0.8-2.02-1.87c0-0.05,0-0.1,0-0.14c0.25-6.89,1.81-13.79,1.27-20.68
+	c-0.36-6.89-1.94-13.79-1.83-20.68c-0.08-6.89,1.96-13.79,1.84-20.68c0.05-3.45-0.2-6.89-0.55-10.34
+	c-0.32-3.45-0.57-6.89-0.74-10.34c-0.05-1.07,0.78-1.99,1.85-2.04c1.07-0.05,1.99,0.78,2.04,1.85c0,0.06,0,0.13,0,0.19
+	c-0.16,3.45-0.42,6.89-0.74,10.34c-0.35,3.45-0.59,6.89-0.55,10.34c-0.11,6.89,1.92,13.79,1.84,20.68
+	c0.11,6.89-1.47,13.79-1.83,20.68C51.38,123.57,52.94,130.46,53.19,137.35z" fill="black" />
+
+    </g>
+    <g id="3">
+      <path d="M60.94,168.46c-1.44,0.34-2.88-0.54-3.22-1.98
+	c-0.1-0.42-0.09-0.85,0-1.24c1.23-5.14,1.54-10.29,1.63-15.43c0.09-5.14-0.6-10.29-1.03-15.43c-1.05-10.29,0.54-20.58,1.09-30.86
+	c0.79-10.29-1.71-20.57-0.66-30.86c1.37-10.29,1.28-20.58-1.03-30.86c-0.32-1.44,0.58-2.86,2.02-3.19s2.86,0.58,3.19,2.02
+	c0.09,0.39,0.08,0.8,0,1.17c-2.3,10.29-2.4,20.58-1.03,30.86c1.06,10.29-1.44,20.57-0.66,30.86c0.55,10.29,2.14,20.58,1.09,30.86
+	c-0.44,5.14-1.12,10.29-1.03,15.43c0.09,5.14,0.4,10.29,1.63,15.43C63.26,166.67,62.37,168.12,60.94,168.46z"
+        fill="black" />
+
+    </g>
+    <g id="4">
+      <path d="M71.74,103.51
+	c-0.45,8.15-1.96,16.29-1.79,24.44c0,4.07,0.4,8.15,0.72,12.22c0.31,4.07,0.5,8.15,0.66,12.22c0.04,1.07-0.8,1.98-1.87,2.02
+	c-1.07,0.04-1.98-0.8-2.02-1.87c0-0.05,0-0.1,0-0.15c0.16-4.07,0.35-8.15,0.66-12.22c0.32-4.07,0.72-8.15,0.72-12.22
+	c0.18-8.15-1.34-16.29-1.79-24.44c-0.2-4.07-0.23-8.15,0.27-12.22c0.46-4.07,1.27-8.15,1.48-12.22c0.74-8.15-1.65-16.29-1.34-24.44
+	c0.04-1.07,0.95-1.91,2.02-1.87c1.02,0.04,1.83,0.87,1.87,1.87c0.31,8.15-2.08,16.29-1.34,24.44c0.22,4.07,1.02,8.15,1.48,12.22
+	C71.97,95.36,71.94,99.44,71.74,103.51z" fill="black" />
+
+    </g>
+
+    <mask id="holes">
+      <rect width="193.2" height="193.2" fill="white" />
+      <use xlink:href="#1" x="0" y="0"></use>
+      <use xlink:href="#1" x="108.8601" y="0"></use>
+      <use xlink:href="#2" x="0" y="0"></use>
+      <use xlink:href="#2" x="90.71" y="0"></use>
+      <use xlink:href="#3" x="0" y="0"></use>
+      <use xlink:href="#3" x="18.1403" y="0"></use>
+      <use xlink:href="#3" x="36.2818" y="0"></use>
+      <use xlink:href="#3" x="54.4218" y="0"></use>
+      <use xlink:href="#3" x="72.57" y="0"></use>
+      <use xlink:href="#4" x="0" y="0"></use>
+      <use xlink:href="#4" x="18.1454" y="0"></use>
+      <use xlink:href="#4" x="36.2885" y="0"></use>
+      <use xlink:href="#4" x="54.4354" y="0"></use>
+    </mask>
+  </defs>
+  <g mask="url(#holes)">
+    <circle cx="96.6" cy="96.6" r="96.6" fill="white" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/Protocol.drawio b/src/assets/Protocol.drawio
new file mode 100644
index 0000000..b40856d
--- /dev/null
+++ b/src/assets/Protocol.drawio
@@ -0,0 +1,108 @@
+<mxfile host="app.diagrams.net" modified="2023-11-12T14:57:18.767Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0" etag="G_84eQ0I08kxqrNatI08" version="22.1.0" type="github">
+  <diagram name="第 1 页" id="DbrYLnWHicfqinQ0lKZM">
+    <mxGraphModel dx="1723" dy="569" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="LuNNE2to9U-IEG8vZego-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-1" target="LuNNE2to9U-IEG8vZego-6">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-1" value="平台" style="swimlane;fontStyle=1;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry y="84" width="140" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-2" value="dingtalk" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="LuNNE2to9U-IEG8vZego-1">
+          <mxGeometry y="30" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-3" value="qq" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="LuNNE2to9U-IEG8vZego-1">
+          <mxGeometry y="60" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-4" value="kook" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="LuNNE2to9U-IEG8vZego-1">
+          <mxGeometry y="90" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.75;entryDx=0;entryDy=0;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-6" target="LuNNE2to9U-IEG8vZego-11">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.75;entryDx=0;entryDy=0;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-6" target="LuNNE2to9U-IEG8vZego-12">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-6" value="中间件" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="190" y="114" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-8" target="LuNNE2to9U-IEG8vZego-16">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-8" value="dingtalk ob11" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="438" y="107" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-11" target="LuNNE2to9U-IEG8vZego-16">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-11" value="qq ob11" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="440" y="10" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-12" target="LuNNE2to9U-IEG8vZego-16">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-12" value="kook ob11" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="440" y="200" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.017;entryY=0.633;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-6" target="LuNNE2to9U-IEG8vZego-8">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-16" value="Ob11 Dice Bot" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
+          <mxGeometry x="710" y="98" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.75;entryDx=0;entryDy=0;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-20" target="LuNNE2to9U-IEG8vZego-24">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-20" target="LuNNE2to9U-IEG8vZego-25">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.75;entryDx=0;entryDy=0;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-20" target="LuNNE2to9U-IEG8vZego-26">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-20" value="平台" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="-10" y="420" width="140" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-21" value="dingtalk" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="LuNNE2to9U-IEG8vZego-20">
+          <mxGeometry y="30" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-22" value="qq" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="LuNNE2to9U-IEG8vZego-20">
+          <mxGeometry y="60" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-23" value="kook" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="LuNNE2to9U-IEG8vZego-20">
+          <mxGeometry y="90" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-33" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-24" target="LuNNE2to9U-IEG8vZego-30">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-24" value="中间件 protocol dingtalk" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="200" y="340" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-34" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-25">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="390" y="480" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-25" value="中间件 protocol qq" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="200" y="450" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-35" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-26" target="LuNNE2to9U-IEG8vZego-30">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-26" value="中间件 protocol kook" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="200" y="550" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-32" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="LuNNE2to9U-IEG8vZego-30" target="LuNNE2to9U-IEG8vZego-31">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-30" value="Protocol" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="390" y="450" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="LuNNE2to9U-IEG8vZego-31" value="Protocol&lt;br&gt;&amp;nbsp;Dice Bot" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
+          <mxGeometry x="620" y="440" width="80" height="80" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/src/assets/base.css b/src/assets/base.css
new file mode 100644
index 0000000..9c513a5
--- /dev/null
+++ b/src/assets/base.css
@@ -0,0 +1,97 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  /*背景色*/
+  /*--vt-c-white: #ffffff;*/
+  --vt-c-white: #001F3A;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  /*文字色*/
+  /*--vt-c-indigo: #2c3e50;*/
+  --vt-c-indigo: rgba(255,255,255,0.5);
+
+  --vt-c-divider-light-1: rgba(60, 60, 60);
+  /*边框色*/
+  /*--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);*/
+  --vt-c-divider-light-2: rgba(150, 150, 150);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  /*小标题色*/
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+
+  --vt-c-background: #0000aa;
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+
+  --icon-highlight: linear-gradient(to right, #00F8F3, #00BDEF);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-white);
+    --color-background-soft: var(--vt-c-white-soft);
+    --color-background-mute: var(--vt-c-white-mute);
+
+    --color-border: var(--vt-c-divider-light-2);
+    --color-border-hover: var(--vt-c-divider-light-1);
+
+    --color-heading: var(--vt-c-text-light-1);
+    --color-text: var(--vt-c-text-light-1);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico
new file mode 100644
index 0000000..dd63670
--- /dev/null
+++ b/src/assets/favicon.ico
diff --git a/src/assets/image/logo.png b/src/assets/image/logo.png
new file mode 100644
index 0000000..8b5a14c
--- /dev/null
+++ b/src/assets/image/logo.png
diff --git a/src/assets/main.css b/src/assets/main.css
new file mode 100644
index 0000000..890703f
--- /dev/null
+++ b/src/assets/main.css
@@ -0,0 +1,72 @@
+@import './base.css';
+
+#app {
+  max-width: 90dvi;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  /*高亮色*/
+  /*color: hsla(160, 100%, 37%, 1);*/
+  color: #00BDEF;
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    /*background-color: hsla(160, 100%, 37%, 0.2);*/
+	color: #00F8F3;
+	text-decoration: underline;
+  }
+}
+
+@media screen and (orientation:landscape) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
+
+.item i {
+	background: linear-gradient(to right, #00F8F3, #00BDEF);
+}
+.item{
+  transition: 0.4s;
+}
+.item:hover{
+	background-color:rgba(255,255,255,0.05);
+}
+.details h3,
+.item i{
+	color:#ffffff;
+}
+
+/*滚动条优化*/
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 0;
+}
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.15);
+  transition: color 0.2s ease;
+}
diff --git a/src/assets/video/bg.mp4 b/src/assets/video/bg.mp4
new file mode 100644
index 0000000..37e71d2
--- /dev/null
+++ b/src/assets/video/bg.mp4
diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue
new file mode 100644
index 0000000..2dc8b05
--- /dev/null
+++ b/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue
new file mode 100644
index 0000000..6d4791c
--- /dev/null
+++ b/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue
new file mode 100644
index 0000000..c3a4f07
--- /dev/null
+++ b/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue
new file mode 100644
index 0000000..7452834
--- /dev/null
+++ b/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue
new file mode 100644
index 0000000..660598d
--- /dev/null
+++ b/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git a/src/layouts/default/AppBar.vue b/src/layouts/default/AppBar.vue
new file mode 100644
index 0000000..4d0660e
--- /dev/null
+++ b/src/layouts/default/AppBar.vue
@@ -0,0 +1,13 @@
+<template>
+  <v-app-bar flat>
+    <v-app-bar-title>
+      <v-icon icon="mdi-circle-slice-6" />
+
+      Essentials Preset
+    </v-app-bar-title>
+  </v-app-bar>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue
new file mode 100644
index 0000000..e642631
--- /dev/null
+++ b/src/layouts/default/Default.vue
@@ -0,0 +1,12 @@
+<template>
+  <v-app>
+    <default-bar />
+
+    <default-view />
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+  import DefaultBar from './AppBar.vue'
+  import DefaultView from './View.vue'
+</script>
diff --git a/src/layouts/default/View.vue b/src/layouts/default/View.vue
new file mode 100644
index 0000000..8e9e414
--- /dev/null
+++ b/src/layouts/default/View.vue
@@ -0,0 +1,9 @@
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..6bb9085
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,38 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+
+// Components
+import App from './App.vue'
+
+// Composable
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+import './assets/main.css'
+import VMdPreview from '@kangc/v-md-editor/lib/preview';
+import '@kangc/v-md-editor/lib/style/preview.css';
+import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
+import '@kangc/v-md-editor/lib/theme/style/github.css';
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+// highlights
+import hljs from 'highlight.js';
+
+VMdPreview.use(githubTheme, {
+  Hljs: hljs,
+});
+
+
+
+
+const app = createApp(App)
+app.use(VMdPreview)
+app.use(ElementPlus)
+registerPlugins(app)
+app.mount('#app')
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
new file mode 100644
index 0000000..baa02f3
--- /dev/null
+++ b/src/plugins/index.ts
@@ -0,0 +1,20 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+import pinia from '../store'
+import router from '../router'
+
+// Types
+import type { App } from 'vue'
+
+export function registerPlugins (app: App) {
+  app
+    .use(vuetify)
+    .use(router)
+    .use(pinia)
+}
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
new file mode 100644
index 0000000..c276519
--- /dev/null
+++ b/src/plugins/vuetify.ts
@@ -0,0 +1,26 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    themes: {
+      light: {
+        colors: {
+          primary: '#1867C0',
+          secondary: '#5CBBF6',
+        },
+      },
+    },
+  },
+})
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..38c65fd
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,21 @@
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('@/views/index/index.vue'),
+  },
+  {
+    path: '/:path(.*)',
+    name: '404',
+    component: () => import('@/views/404.vue'),
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+})
+
+export default router
diff --git a/src/store/app.ts b/src/store/app.ts
new file mode 100644
index 0000000..7429543
--- /dev/null
+++ b/src/store/app.ts
@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..1536252
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
new file mode 100644
index 0000000..3e36a27
--- /dev/null
+++ b/src/styles/settings.scss
@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );
diff --git a/src/views/404.vue b/src/views/404.vue
new file mode 100644
index 0000000..7462697
--- /dev/null
+++ b/src/views/404.vue
@@ -0,0 +1,18 @@
+<template>
+    <div>404</div>
+</template>
+
+<script lang='ts'>
+export default {
+    setup() {
+        return {}
+    },
+    beforeCreate() {
+        location.href = '/'
+    }
+}
+</script>
+
+<style lang='scss' scoped>
+
+</style>
diff --git a/src/views/index/Left.vue b/src/views/index/Left.vue
new file mode 100644
index 0000000..f774223
--- /dev/null
+++ b/src/views/index/Left.vue
@@ -0,0 +1,84 @@
+<script lang="ts">
+export default {
+  data(){
+    return{
+      day:0,
+      hour:0,
+      min:0,
+      sec:0,
+      timer:0
+    }
+  },
+  props:{
+    msg:{
+      type:String,
+      require:true
+    },
+    date:{
+      type:Date,
+      default:new Date('2024-07-14T12:00:00Z')
+    }
+  },
+  methods:{
+    getTime(){
+      this.timer=window.setTimeout(()=>{
+        const date1 = new Date();
+        const date2 = new Date(this.date);
+        const timeDiff = Math.abs(date2.getTime() - date1.getTime());
+        this.day = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
+        this.hour = Math.floor(timeDiff / (1000 * 60 * 60)%24);
+        this.min = Math.floor((timeDiff / (1000 * 60)) % 60);
+        this.sec = Math.floor((timeDiff / 1000) % 60);
+        this.getTime()
+      },1000)
+    }
+  },
+  beforeMount() {
+    this.getTime()
+  }
+
+}
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      距离水系公测计划：
+    </h3>
+    <h2>
+      {{ day }} 天 {{ hour }} 时 {{ min }} 分 {{ sec }} 秒
+    </h2>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h2 {
+  text-align: center;
+}
+.greetings h3 {
+  text-align: center;
+}
+
+@media screen and (orientation:landscape) {
+  .greetings h1,
+  .greetings h2 {
+    text-align: left;
+  }
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>
diff --git a/src/views/index/Notepad/changelog.ts b/src/views/index/Notepad/changelog.ts
new file mode 100644
index 0000000..111f8f2
--- /dev/null
+++ b/src/views/index/Notepad/changelog.ts
@@ -0,0 +1,16 @@
+import axios from 'axios';
+
+export const getChangeLog = async() =>
+{
+  const changeLog = axios.get('https://api.github.com/repos/HydroRoll-Team/HydroRoll/releases/latest')
+  .then(res => {
+    console.log(res.data);
+    const ChangeLogMessage ="## "+ res.data['tag_name']+"\n"+res.data['body'];
+    return ChangeLogMessage;
+  })
+  .catch(err => {
+    console.log(err);
+    return err.toString();
+  })
+  return changeLog;
+}
diff --git a/src/views/index/Notepad/index.vue b/src/views/index/Notepad/index.vue
new file mode 100644
index 0000000..fde6e90
--- /dev/null
+++ b/src/views/index/Notepad/index.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "1",
+    },
+    message: {
+      type: String,
+      require: true
+    },
+    date: {
+      type: Date,
+      default: new Date('2024-07-14T12:00:00Z')
+    }
+  },
+}
+</script>
+
+
+<template>
+  <div class="details" style="overflow-y:scroll;overflow-x:hidden;height:100%">
+    <h3>
+      {{ title }}
+    </h3>
+    <v-md-preview :text="message" ></v-md-preview>
+  </div>
+</template>
+
+
+<style scoped>
+
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+.details {
+  flex: 1;
+  width: 60dvw;
+  float: right;
+}
+
+@media screen and (orientation:landscape) {
+  .details {
+    flex: 1;
+    width: 30dvw;
+  }
+}
+</style>
diff --git a/src/views/index/Right.vue b/src/views/index/Right.vue
new file mode 100644
index 0000000..d76397e
--- /dev/null
+++ b/src/views/index/Right.vue
@@ -0,0 +1,160 @@
+<script lang="ts">
+import Notepad from './Notepad/index.vue'
+import DocumentationIcon from '@/components/icons/IconDocumentation.vue'
+import { getChangeLog } from './Notepad/changelog'
+
+
+export default {
+  data() {
+    return {
+      mainPage: 0,
+      tooltip: [
+        "ChangeLog",
+        "What's new?",
+        "敬请期待",
+        "敬请期待",
+      ],
+      title: "",
+      message:"",
+      changeLogMessage:"",
+    }
+  },
+  components: {
+    Notepad,
+    DocumentationIcon
+  },
+  methods: {
+    change_page(n: number) {
+      this.mainPage = n;
+      this.title = this.tooltip[n];
+      switch (n) {
+        case 0:
+          this.message = this.changeLogMessage;
+          break;
+        default:
+          this.message = "敬请期待";
+          break;
+      }
+    },
+    getBgColor(index: number) {
+      if (index < this.mainPage) {
+        return "var(--color-border)"
+      } else if (index == this.mainPage) {
+        return "var(--icon-highlight)"
+      } else {
+        return "var(--color-border-hover)"
+      }
+    }
+  },
+  beforeCreate() {
+    getChangeLog().then(res => {
+      this.changeLogMessage = res;
+      this.change_page(this.mainPage);
+    })
+  },
+}
+
+</script>
+
+<template>
+  <div class="messageBar">
+    <div class="options">
+      <li v-for="(item, index) in tooltip" :key="index" class="item">
+        <el-tooltip :content="item" placement="left" >
+          <i :style="{background:getBgColor(index)}" @mouseover="change_page(index)">
+            <DocumentationIcon/>
+          </i>
+        </el-tooltip>
+      </li>
+    </div>
+    <div class="messageBox">
+      <Notepad :title="title" :message="message"/>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+
+.messageBar {
+  display: flex;
+  height: 500px;
+  margin-top: 2rem;
+  position: relative;
+  flex-direction: row;
+}
+
+.messageBar .options{
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 32px;
+  color: var(--color-text);
+}
+
+.messageBar .options .item{
+  display: flex;
+  margin: auto;
+}
+
+.messageBar .messageBox {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+i {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  color: var(--color-text);
+  width: 50px;
+  height: 50px;
+  border-radius: 8px;
+}
+
+@media screen and (orientation:landscape) {
+  .messageBar {
+    margin-top: 0;
+    padding: 5rem 0 5rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    left: -21px;
+    position: absolute;
+    border-radius: 8px;
+    width: 40px;
+    height: 40px;
+  }
+
+  // 黑线
+  .messageBar:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  // 画白线
+  .messageBar:after {
+    content: ' ';
+    border-left: 1px solid var(--vt-c-divider-dark-2);
+    position: absolute;
+    left: 0;
+    top: calc(15%);
+    height: calc(75%);
+    z-index: -10;
+  }
+
+  .messageBar:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
new file mode 100644
index 0000000..003f752
--- /dev/null
+++ b/src/views/index/index.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import Left from './Left.vue'
+import Right from './Right.vue'
+</script>
+
+<script lang="ts">
+export default {
+  data() {
+    return {
+      isplay: false
+    }
+  },
+  methods: {
+    PlayOn() {
+      this.isplay = true
+    }
+  }
+}
+</script>
+
+<template>
+  <header>
+    <img src="@/assets/Hydroroll-small.svg" 
+      alt="Vue logo" 
+      class="logo" 
+      width="125" height="125" />
+
+    <div class="wrapper">
+      <Left msg="饼在画了!" />
+    </div>
+  </header>
+
+  <main class="main">
+    <video loop=true preload="auto" muted="true" autoplay @canplay="PlayOn" v-show="isplay" >
+      <source src="@/assets/video/bg.mp4" type="video/mp4" />
+    </video>
+    <Right />
+  </main>
+</template>
+
+<style scoped>
+header {
+  display: flex;
+  flex-flow: column;
+  line-height: 1.5;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media screen and (orientation:landscape) {
+  header {
+    place-items: center;
+    flex-flow: row;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
+
+video{
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto; 
+  z-index: -100;
+  filter: grayscale(20%);
+}
+</style>
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..7d17c38
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+declare module '@kangc/v-md-editor/lib/preview';
+declare module '@kangc/v-md-editor/lib/theme/github.js';
+declare module 'prismjs';