diff --git a/src/components/visualHtml/index.vue b/src/components/visualHtml/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..55aaf6730a37c89377fdada109edacdb4ea10f9a
--- /dev/null
+++ b/src/components/visualHtml/index.vue
@@ -0,0 +1,33 @@
+<script setup>
+    import {reactive,onMounted} from 'vue'
+    import CommitLine from './commit/index.vue'
+    import ArticleBar from './article/index.vue'
+    import Author from '../Author.vue'
+    import HubPie from './hub/index.vue'
+    import {articleData} from './data/data.js'
+    const state=reactive({
+        title:'',
+        articleData:[]
+    })
+
+    const getRenderBarData= ()=>{
+        state.articleData=[...articleData]
+        state.articleData.sort((a,b)=>new Date(a.postTime)-new Date(b.postTime))
+    }
+    onMounted(()=>{
+        getRenderBarData()
+    })
+</script>
+<template>
+    <div style="padding:20px;">
+        <Author/>
+        <div>
+            {{state.title}}
+            <div>
+                <CommitLine />
+                <ArticleBar :tableData="state.articleData" />
+                <HubPie />
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file