diff --git a/.husky/pre-commit b/.husky/pre-commit
index 5d9040a163db55ceb539a4516ba48264526a24cd..1bf519316d47f706580871c338fcb5dea7855f10 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,5 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
-PATH="/usr/local/bin:$PATH"
 
-pnpm lint
+pnpm lint
\ No newline at end of file
diff --git a/.prettierrc.js b/.prettierrc.js
index b29443061457a40d38e55208a3d82d85f6b4eb69..b3d9a25c2e20c226646b7abd86f28ed157bf7968 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,5 +1,5 @@
 module.exports = {
-  printWidth: 120,
+  printWidth: 80,
   useTabs: false,
   singleQuote: true,
   tabWidth: 2,
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index 3dc5b08bcdc96b1536eec0cff46a39d54235aa12..0000000000000000000000000000000000000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "recommendations": ["johnsoncodehk.volar"]
-}
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index c88a2e752c0d29b73b151b18539dc9c75495cfe8..0000000000000000000000000000000000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "eslint.validate": ["javascript", "javascriptreact", "vue"]
-}
diff --git a/package.json b/package.json
index af6fb3ecf0e768fbcc906ba68e69b918b1868c46..440fdaea23e4220cf1db777255734b36aaf084cb 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint --ext .js,.vue src"
+    "lint": "eslint --ext .js,.vue src",
+    "prepare": "husky install"
   },
   "repository": {
     "type": "git",
@@ -27,14 +28,14 @@
     "@vitejs/plugin-vue": "^2.0.0",
     "@vue/eslint-config-prettier": "^7.0.0",
     "eslint": "^8.8.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.4.1",
-    "husky": "^7.0.0",
     "prettier": "^2.5.1",
     "sass": "^1.49.7",
     "unplugin-auto-import": "^0.5.11",
     "unplugin-vue-components": "^0.17.18",
     "vite": "^2.7.2",
-    "vite-plugin-svg-icons": "^2.0.1"
+    "vite-plugin-svg-icons": "^2.0.1",
+    "husky": "^7.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71adda4913637ed7136b430fd5abcabeb1e581b5..d2c96da223dc4f6e179302625d886e33befc53e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,7 +7,7 @@ specifiers:
   echarts: ^5.3.0
   element-plus: ^2.0.1
   eslint: ^8.8.0
-  eslint-config-prettier: ^8.3.0
+  eslint-plugin-prettier: ^4.0.0
   eslint-plugin-vue: ^8.4.1
   husky: ^7.0.0
   normalize.css: ^8.0.1
@@ -34,7 +34,7 @@ devDependencies:
   '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/2.1.0_vite@2.7.13+vue@3.2.29
   '@vue/eslint-config-prettier': registry.npmmirror.com/@vue/eslint-config-prettier/7.0.0_eslint@8.8.0+prettier@2.5.1
   eslint: registry.npmmirror.com/eslint/8.8.0
-  eslint-config-prettier: registry.npmmirror.com/eslint-config-prettier/8.3.0_eslint@8.8.0
+  eslint-plugin-prettier: registry.npmmirror.com/eslint-plugin-prettier/4.0.0_eslint@8.8.0+prettier@2.5.1
   eslint-plugin-vue: registry.npmmirror.com/eslint-plugin-vue/8.4.1_eslint@8.8.0
   husky: registry.npmmirror.com/husky/7.0.4
   prettier: registry.npmmirror.com/prettier/2.5.1
@@ -1217,6 +1217,25 @@ packages:
       prettier-linter-helpers: registry.npmmirror.com/prettier-linter-helpers/1.0.0
     dev: true
 
+  registry.npmmirror.com/eslint-plugin-prettier/4.0.0_eslint@8.8.0+prettier@2.5.1:
+    resolution: {integrity: sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz}
+    id: registry.npmmirror.com/eslint-plugin-prettier/4.0.0
+    name: eslint-plugin-prettier
+    version: 4.0.0
+    engines: {node: '>=6.0.0'}
+    peerDependencies:
+      eslint: '>=7.28.0'
+      eslint-config-prettier: '*'
+      prettier: '>=2.0.0'
+    peerDependenciesMeta:
+      eslint-config-prettier:
+        optional: true
+    dependencies:
+      eslint: registry.npmmirror.com/eslint/8.8.0
+      prettier: registry.npmmirror.com/prettier/2.5.1
+      prettier-linter-helpers: registry.npmmirror.com/prettier-linter-helpers/1.0.0
+    dev: true
+
   registry.npmmirror.com/eslint-plugin-vue/8.4.1_eslint@8.8.0:
     resolution: {integrity: sha512-nmWOhNmDx9TZ+yP9ZhezTkZUupSHsYA2TocRm+efPSXMOyFrVczVlaIuQcLBjCtI8CbkBiUQ3VcyQsjlIhDrhA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-8.4.1.tgz}
     id: registry.npmmirror.com/eslint-plugin-vue/8.4.1
diff --git a/src/App.vue b/src/App.vue
index edba34313d9f2f47f39506e19181246366ab358b..41847ed63e3e7a531ea5e9da4cdcc42328b83f70 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,14 @@
 <template>
   <header>
-    <AppHeader :active-nav="activeNav" :nav-items="navItems" @nav-click="handleNavClick">
+    <app-header
+      :active-nav="activeNav"
+      :nav-items="navItems"
+      @nav-click="handleNavClick"
+    >
       <template #logo>
         <img src="@/assets/openeuler-logo.png" alt="" style="height: 100%" />
       </template>
-    </AppHeader>
+    </app-header>
   </header>
   <main>
     <router-view></router-view>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 22db4382ba6b4c4084c1e5914be8d58789a948c7..a149d5e66c37ac14cdeba260d801fba234009f5c 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,16 +1,5 @@
-<template>
-  <div class="header">
-    <div class="header-logo">
-      <slot name="logo"></slot>
-    </div>
-    <div class="header-tool">
-      <HeaderNav :nav-items="navItems" :default-active="activeNav" @nav-click="handleNavClick"></HeaderNav>
-    </div>
-  </div>
-</template>
-
 <script setup>
-import HeaderNav from './HeaderNav.vue';
+import HeaderNav from './ONav.vue';
 
 defineProps({
   navItems: {
@@ -25,13 +14,28 @@ defineProps({
   },
 });
 
-const emits = defineEmits(['navClick']);
+const emits = defineEmits(['nav-click']);
 
 const handleNavClick = (id) => {
-  emits('navClick', id);
+  emits('nav-click', id);
 };
 </script>
 
+<template>
+  <div class="header">
+    <div class="header-logo">
+      <slot name="logo"></slot>
+    </div>
+    <div class="header-tool">
+      <header-nav
+        :nav-items="navItems"
+        :default-active="activeNav"
+        @nav-click="handleNavClick"
+      ></header-nav>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .header {
   max-width: 1168px;
diff --git a/src/components/DevelopmentLanguage.vue b/src/components/DevelopmentLanguage.vue
index 762aa2f8fb7f4f57baadcf14cb8439e3400d12b4..6f5126068aadfef02a14a7348d1a1d1a99997d21 100644
--- a/src/components/DevelopmentLanguage.vue
+++ b/src/components/DevelopmentLanguage.vue
@@ -1,29 +1,27 @@
+<script setup>
+const info = [
+  { title: 'Java', count: 29 },
+  { title: 'C', count: 25 },
+  { title: 'C/C++', count: 10 },
+  { title: 'Go', count: 10 },
+  { title: 'Python', count: 6 },
+];
+</script>
+
 <template>
   <div class="development-language">
-    <div>
-      <p>Java<span>29%</span></p>
-    </div>
-    <div>
-      <p>C<span>25%</span></p>
-    </div>
-    <div>
-      <p>C/C++<span>10%</span></p>
-    </div>
-    <div>
-      <p>Go<span>10%</span></p>
-    </div>
-    <div>
-      <p>Go<span>10%</span></p>
+    <div v-for="item in info" :key="item.title" class="item">
+      <p class="text">
+        {{ item.title }}<span class="val">{{ item.count + '%' }}</span>
+      </p>
     </div>
   </div>
 </template>
 
-<script setup></script>
-
 <style lang="scss" scoped>
 .development-language {
   position: relative;
-  div {
+  .item {
     position: absolute;
     border-radius: 50%;
     display: flex;
@@ -34,14 +32,15 @@
 
     animation: 0.5s ease-out backwards;
     animation-name: fadeinT;
-    p {
+    .text {
       text-align: center;
+      .val {
+        display: block;
+        font-size: 24px;
+        margin-top: 8px;
+      }
     }
-    span {
-      display: block;
-      font-size: 24px;
-      margin-top: 8px;
-    }
+
     &:nth-child(1) {
       background-color: #0a2255;
       width: 260px;
diff --git a/src/components/IconText.vue b/src/components/IconText.vue
index 4d41d3b74058c660e94e0c69ae16b18b20b02e64..d974d755f232394b2ed3a7511dab31ab65c4c4b8 100644
--- a/src/components/IconText.vue
+++ b/src/components/IconText.vue
@@ -1,15 +1,3 @@
-<template>
-  <div class="icon-text">
-    <div class="icon-text-left">
-      <SvgIcon :name="icon"></SvgIcon>
-    </div>
-    <div class="icon-text-right">
-      <p>{{ title }}</p>
-      <p>{{ formatNumber(amount) }}</p>
-    </div>
-  </div>
-</template>
-
 <script setup>
 import { toRefs } from 'vue';
 import { formatNumber } from '../shared/utils';
@@ -32,6 +20,18 @@ const props = defineProps({
 const { icon, title, amount } = toRefs(props);
 </script>
 
+<template>
+  <div class="icon-text">
+    <div class="icon-text-left">
+      <svg-icon :name="icon"></svg-icon>
+    </div>
+    <div class="icon-text-right">
+      <p>{{ title }}</p>
+      <p>{{ formatNumber(amount) }}</p>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .icon-text {
   display: flex;
@@ -42,12 +42,14 @@ const { icon, title, amount } = toRefs(props);
   .icon-text-left {
     display: flex;
     align-items: center;
-    font-size: 80px;
+    font-size: 90px;
     height: 100%;
   }
 
   .icon-text-right {
     margin-left: 20px;
+    display: grid;
+    align-content: space-evenly;
     p {
       color: #fff;
       font-size: 36px;
diff --git a/src/components/AppBanner.vue b/src/components/OBanner.vue
similarity index 72%
rename from src/components/AppBanner.vue
rename to src/components/OBanner.vue
index dd9986a7700bb21ea885757f55a73face8c05564..e932ea0b48ef3b98a269715a0fb85e652762d86e 100644
--- a/src/components/AppBanner.vue
+++ b/src/components/OBanner.vue
@@ -1,18 +1,18 @@
+<script setup></script>
+
 <template>
-  <div class="banner">
-    <div class="banner-wrap">
+  <div class="o-banner">
+    <div class="o-banner-wrap">
       <slot></slot>
     </div>
   </div>
 </template>
 
-<script setup></script>
-
 <style lang="scss" scoped>
-.banner {
+.o-banner {
   width: 100%;
   background: #060612;
-  .banner-wrap {
+  .o-banner-wrap {
     max-width: 1168px;
     padding: 0 24px;
     margin: 0 auto;
diff --git a/src/components/HeaderNav.vue b/src/components/ONav.vue
similarity index 88%
rename from src/components/HeaderNav.vue
rename to src/components/ONav.vue
index 73a706b66256ed1c3ee81d9df8c305e8212405f7..aaf8e3b1013a8f7b41400da4b2f3f9feb77544bd 100644
--- a/src/components/HeaderNav.vue
+++ b/src/components/ONav.vue
@@ -1,19 +1,3 @@
-<template>
-  <nav class="header-nav">
-    <ul class="nav-list">
-      <li
-        v-for="item in navItems"
-        :key="item.id"
-        class="nav-item"
-        :class="[activeItem === item.id ? 'active' : '']"
-        @click="handleClick(item.id)"
-      >
-        {{ item.label }}
-      </li>
-    </ul>
-  </nav>
-</template>
-
 <script setup>
 import { ref, toRefs, watch } from 'vue';
 
@@ -40,21 +24,37 @@ watch(defaultActive, (val) => {
   activeItem.value = val;
 });
 
-const emits = defineEmits(['navClick']);
+const emits = defineEmits(['nav-click']);
 
 const handleClick = (id) => {
   activeItem.value = id;
-  emits('navClick', id);
+  emits('nav-click', id);
 };
 </script>
 
+<template>
+  <nav class="o-nav">
+    <ul class="o-nav-list">
+      <li
+        v-for="item in navItems"
+        :key="item.id"
+        class="o-nav-item"
+        :class="[activeItem === item.id ? 'active' : '']"
+        @click="handleClick(item.id)"
+      >
+        {{ item.label }}
+      </li>
+    </ul>
+  </nav>
+</template>
+
 <style lang="scss" scoped>
 $color: #ffffff;
-.header-nav {
+.o-nav {
   height: 100%;
-  .nav-list {
+  .o-nav-list {
     height: 100%;
-    .nav-item {
+    .o-nav-item {
       position: relative;
       display: inline-flex;
       align-items: center;
diff --git a/src/components/Radiogroup.vue b/src/components/ORadioButton.vue
similarity index 82%
rename from src/components/Radiogroup.vue
rename to src/components/ORadioButton.vue
index 3111cc539906fe5adb70c40b611c06b7400be998..d7738b8bd852a43a1d24069c3e78a46f9fd0e081 100644
--- a/src/components/Radiogroup.vue
+++ b/src/components/ORadioButton.vue
@@ -1,45 +1,47 @@
-<template>
-  <div ref="radiogroup" class="radio-group">
-    <label
-      v-for="item in grouplist"
-      :key="item.id"
-      class="radio-button"
-      :class="item.label == activeItem ? 'active' : ''"
-      @click="radioButtonChange(item.label)"
-      ><span class="inner">{{ item.label }}</span></label
-    >
-  </div>
-</template>
-
 <script setup>
 import { toRefs, ref } from 'vue';
+
 const props = defineProps({
-  grouplist: {
+  radioItem: {
     type: Array,
     default() {
       return null;
     },
   },
-  actives: {
+  radioActive: {
     type: String,
     default() {
       return '';
     },
   },
 });
-const emit = defineEmits(['click']);
-const { actives, grouplist } = toRefs(props);
-const activeItem = ref(actives.value);
+const emit = defineEmits(['radio-click']);
+const { radioActive, radioItem } = toRefs(props);
+const activeItem = ref(radioActive.value);
 
 // 选中事件
-function radioButtonChange(item) {
-  if (item != actives.value) {
+const radioButtonChange = (item) => {
+  if (item != radioActive.value) {
     activeItem.value = item;
-    emit('click', item);
+    emit('radio-click', item);
   }
-}
+};
 </script>
-<style lang="scss">
+
+<template>
+  <div ref="radiogroup" class="radio-group">
+    <label
+      v-for="item in radioItem"
+      :key="item.id"
+      class="radio-button"
+      :class="item.label == activeItem ? 'active' : ''"
+      @click="radioButtonChange(item.label)"
+      ><span class="inner">{{ item.label }}</span></label
+    >
+  </div>
+</template>
+
+<style lang="scss" scoped>
 :root {
   --color-primary: #409eff;
 }
diff --git a/src/components/PartnersRankBar.vue b/src/components/PartnersRankBar.vue
deleted file mode 100644
index 0fe6d84ad8fa1c2c45bbced0f2522d6964298a2d..0000000000000000000000000000000000000000
--- a/src/components/PartnersRankBar.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import * as echarts from 'echarts';
-import { formatNumber } from '../shared/utils';
-const chartDom = ref(null);
-
-onMounted(() => {
-  chartBar();
-});
-
-// chart bar 图表
-function chartBar() {
-  const chartInit = echarts.init(chartDom.value);
-  const chartOption = {
-    tooltip: {
-      trigger: 'axis',
-    },
-    grid: {
-      left: '1%',
-      right: '0%',
-      bottom: '3%',
-      containLabel: true,
-    },
-    xAxis: {
-      type: 'value',
-      boundaryGap: [0, 0.01],
-    },
-    yAxis: {
-      type: 'category',
-      data: ['华为', '麒麟软件', '中科院软件研究所', '通信软件', '中国联通软件研究所', '润和软件'],
-      inverse: true,
-      offset: 140,
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        formatter: function (value, index) {
-          return index + 1 + '{flag|' + value + '}';
-        },
-        rich: {
-          flag: {
-            fontSize: 14,
-            padding: 8,
-            color: '#000',
-          },
-        },
-        align: 'left',
-        color: '#999',
-        fontSize: 14,
-      },
-    },
-    series: [
-      {
-        type: 'bar',
-        data: [98180, 63414, 42159, 11000, 8341, 4807],
-        label: {
-          show: true,
-          color: '#fff',
-          position: 'insideRight',
-          distance: 10,
-          formatter: function (params) {
-            let value = formatNumber(params.value);
-            return value;
-          },
-        },
-        itemStyle: {
-          color: '#0062dc',
-          shadowBlur: 10,
-          shadowColor: 'RGBA(0, 98, 220, .6)',
-          shadowOffsetY: 3,
-        },
-      },
-    ],
-  };
-
-  chartOption && chartInit.setOption(chartOption);
-}
-
-// rank radio
-const rankRadio = ref('PR');
-const rankRadioChange = function (val) {
-  console.log(val);
-};
-</script>
-<template>
-  <el-row>
-    <el-col :span="12">
-      <h3>Partnerships</h3>
-    </el-col>
-    <el-col :span="12">
-      <div class="rankRadio">
-        Rank by
-        <el-radio-group v-model="rankRadio" @change="rankRadioChange">
-          <el-radio-button label="PR"></el-radio-button>
-          <el-radio-button label="Issue"></el-radio-button>
-          <el-radio-button label="Review"></el-radio-button>
-        </el-radio-group>
-      </div>
-    </el-col>
-  </el-row>
-  <div ref="chartDom" style="height: 500px; width: 100%"></div>
-</template>
-<style lang="scss" scoped>
-.rankRadio {
-  text-align: right;
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  color: #999;
-  .el-radio-group {
-    margin-left: 12px;
-  }
-}
-</style>
diff --git a/src/components/TextChart.vue b/src/components/charts/ChartCard.vue
similarity index 88%
rename from src/components/TextChart.vue
rename to src/components/charts/ChartCard.vue
index ec654a5d50a22f037c5af2423d85dded6ed21afd..bddc28747c231ab04874477e0f4177399efb1be5 100644
--- a/src/components/TextChart.vue
+++ b/src/components/charts/ChartCard.vue
@@ -1,25 +1,6 @@
-<template>
-  <div class="card-chart">
-    <div class="card-box">
-      <p class="card-title">{{ title }}</p>
-      <div class="card-total">
-        <strong class="num">{{ formatNumber(total) }}</strong
-        >in total
-      </div>
-    </div>
-    <div class="chart-box">
-      <p>
-        <span class="num">{{ amount }}</span
-        >in last 24h
-      </p>
-      <ChartView :options="setOptions()" :height="'70px'"></ChartView>
-    </div>
-  </div>
-</template>
-
 <script setup>
-import { ref, toRefs, watch } from 'vue';
-import { formatNumber } from '../shared/utils';
+import { ref, toRefs, watch, computed } from 'vue';
+import { formatNumber } from '../../shared/utils';
 const props = defineProps({
   title: {
     type: String,
@@ -35,15 +16,15 @@ const props = defineProps({
   },
   options: {
     type: Array,
-    default: null,
+    default: () => {
+      return [];
+    },
   },
 });
 
-const { title, total, options, amount } = toRefs(props);
+const { title, total, amount, options } = toRefs(props);
 const seriesData = ref(options.value);
-
-// 图表数据
-function setOptions() {
+const setOptions = computed(() => {
   return {
     xAxis: {
       type: 'category',
@@ -91,7 +72,8 @@ function setOptions() {
       },
     ],
   };
-}
+});
+
 // 监听数据变动
 watch(
   options,
@@ -105,6 +87,25 @@ watch(
 );
 </script>
 
+<template>
+  <div class="card-chart">
+    <div class="card-box">
+      <p class="card-title">{{ title }}</p>
+      <div class="card-total">
+        <strong class="num">{{ formatNumber(total) }}</strong
+        >in total
+      </div>
+    </div>
+    <div class="chart-box">
+      <p>
+        <span class="num">{{ amount }}</span
+        >in last 24h
+      </p>
+      <chart-module :options="setOptions" :height="'70px'"></chart-module>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .card-chart {
   display: flex;
diff --git a/src/components/Chart.vue b/src/components/charts/ChartModule.vue
similarity index 85%
rename from src/components/Chart.vue
rename to src/components/charts/ChartModule.vue
index c5ec98e2c96732c091a54ad9386a953716e959a4..ebab14b6f735dea0001aadf8a56c3121e5a39e9d 100644
--- a/src/components/Chart.vue
+++ b/src/components/charts/ChartModule.vue
@@ -1,5 +1,13 @@
 <script setup>
-import { onMounted, onUnmounted, ref, watch, toRefs, computed } from 'vue';
+import {
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+  toRefs,
+  computed,
+  nextTick,
+} from 'vue';
 import * as echarts from 'echarts';
 const props = defineProps({
   options: {
@@ -25,12 +33,13 @@ const chartDom = ref(null);
 const chart = ref(null);
 const { options, width, height } = toRefs(props);
 const optionsItem = ref(options.value);
+
 // 初始化图表
-function initChart() {
+const initChart = () => {
   chart.value = echarts.init(chartDom.value);
   chart.value.setOption(optionsItem.value);
-}
-// 样式数据
+};
+// 动态样式设置
 const style = computed(() => {
   return {
     height: height.value,
@@ -39,16 +48,18 @@ const style = computed(() => {
 });
 
 // 销毁图表
-function destroyChart() {
+const destroyChart = () => {
   if (!chart.value) {
     return;
   }
   chart.value.dispose();
   chart.value = null;
-}
+};
 
 onMounted(() => {
-  initChart();
+  nextTick(() => {
+    initChart();
+  });
 });
 
 watch(
@@ -71,14 +82,16 @@ watch(
   },
   { deep: true }
 );
+
 onUnmounted(() => {
-  //   console.log('我被销毁了！！');
   destroyChart();
 });
 </script>
+
 <template>
   <div ref="chartDom" class="chartDom" :style="style"></div>
 </template>
+
 <style lang="scss" scoped>
 .chartDom {
   width: 100%;
diff --git a/src/components/ContributorsRankLine.vue b/src/components/charts/LineContributorsRank.vue
similarity index 83%
rename from src/components/ContributorsRankLine.vue
rename to src/components/charts/LineContributorsRank.vue
index b3b638f2898d98c5082660a3d918aad7b4e6583a..ac2b1260564622bd81772b01bbdbe34c0c7cdac9 100644
--- a/src/components/ContributorsRankLine.vue
+++ b/src/components/charts/LineContributorsRank.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, toRefs, watch } from 'vue';
+import { ref, toRefs, watch, computed } from 'vue';
 
 const props = defineProps({
   options: {
@@ -14,7 +14,7 @@ const { options } = toRefs(props);
 const optionsItem = ref(options.value);
 
 // 动态处理数据
-function seriesOpt(data) {
+const seriesOpt = (data) => {
   const list = [];
   for (let i = 0; i < data.length; i++) {
     list.push({
@@ -33,13 +33,29 @@ function seriesOpt(data) {
     });
   }
   return list;
-}
+};
 
 // 图表数据
-function setOptions() {
+const setOptions = computed(() => {
   // x上下轴
-  const xAxisDataTop = ['2021.06', '2021.06', '2021.06', '2021.06', '2021.06', '2021.06', '2021.06'];
-  const xAxisDataBottom = ['2021.06', '2021.06', '2021.06', '2021.06', '2021.06', '2021.06', '2021.06'];
+  const xAxisDataTop = [
+    '2021.06',
+    '2021.06',
+    '2021.06',
+    '2021.06',
+    '2021.06',
+    '2021.06',
+    '2021.06',
+  ];
+  const xAxisDataBottom = [
+    '2021.06',
+    '2021.06',
+    '2021.06',
+    '2021.06',
+    '2021.06',
+    '2021.06',
+    '2021.06',
+  ];
 
   return {
     tooltip: {
@@ -107,7 +123,8 @@ function setOptions() {
     },
     series: seriesOpt(optionsItem.value),
   };
-}
+});
+
 // 监听数据变动
 watch(
   options,
@@ -120,7 +137,9 @@ watch(
   { deep: true }
 );
 </script>
+
 <template>
-  <ChartView :options="setOptions()" :height="'500px'"></ChartView>
+  <chart-module :options="setOptions" :height="'500px'"></chart-module>
 </template>
+
 <style lang="scss" scoped></style>
diff --git a/src/components/EnterpriseLine.vue b/src/components/charts/LinePartnershipsTotal.vue
similarity index 82%
rename from src/components/EnterpriseLine.vue
rename to src/components/charts/LinePartnershipsTotal.vue
index aba7332f7c017ca6dc631eb04dceeb5ed9dd4941..3b47cadfb477be39df75145baf21c10c235d44fb 100644
--- a/src/components/EnterpriseLine.vue
+++ b/src/components/charts/LinePartnershipsTotal.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, toRefs, watch } from 'vue';
+import { ref, toRefs, watch, computed } from 'vue';
 
 const props = defineProps({
   options: {
@@ -14,8 +14,16 @@ const { optData } = toRefs(props.options);
 const optionsItem = ref(optData.value);
 
 // chart bar 图表
-function setOptions() {
-  const xAxisData = ['2021.06', '2021.06', '2021.06', '2021.06', '2021.06', '2021.06', '2021.06'];
+const setOptions = computed(() => {
+  const xAxisData = [
+    '2021.06',
+    '2021.06',
+    '2021.06',
+    '2021.06',
+    '2021.06',
+    '2021.06',
+    '2021.06',
+  ];
 
   return {
     tooltip: {
@@ -70,7 +78,8 @@ function setOptions() {
       },
     ],
   };
-}
+});
+
 // 监听数据变动
 watch(
   optData,
@@ -83,7 +92,9 @@ watch(
   { deep: true }
 );
 </script>
+
 <template>
-  <ChartView :options="setOptions()" :height="'220px'"></ChartView>
+  <chart-module :options="setOptions" :height="'220px'"></chart-module>
 </template>
+
 <style lang="scss" scoped></style>
diff --git a/src/components/ContributorsCharts.vue b/src/components/charts/MixChartContributors.vue
similarity index 33%
rename from src/components/ContributorsCharts.vue
rename to src/components/charts/MixChartContributors.vue
index 9fc7a83cacb1991e2d964710b58e86098ab338f7..14ae6a76077312adef05a8f8182e74c7b45c0d22 100644
--- a/src/components/ContributorsCharts.vue
+++ b/src/components/charts/MixChartContributors.vue
@@ -1,30 +1,14 @@
-<template>
-  <div class="card-chart">
-    <div class="card-box">
-      <p class="title">All Contributors</p>
-      <div class="total">
-        <strong class="num">{{ formatNumber(total) }}</strong
-        >in total
-      </div>
-      <p class="text">
-        <span class="amount">{{ amount }}</span
-        >in last 24h
-      </p>
-      <div>
-        <div ref="pieDom" class="chart-pie"></div>
-      </div>
-    </div>
-    <div class="chart-box">
-      <p>Increment Trend</p>
-      <ChartView :options="setOptions()" :height="'180px'"></ChartView>
-    </div>
-  </div>
-</template>
-
 <script setup>
-import { ref, toRefs, watch } from 'vue';
-import { formatNumber } from '../shared/utils';
+import { toRefs, watch, ref, computed } from 'vue';
+import { formatNumber } from '../../shared/utils';
+
 const props = defineProps({
+  title: {
+    type: String,
+    default() {
+      return '';
+    },
+  },
   total: {
     type: String,
     default() {
@@ -37,22 +21,24 @@ const props = defineProps({
       return '';
     },
   },
-  seriesData: {
-    type: Array,
+  lineData: {
+    type: Object,
     default() {
       return null;
     },
   },
-  seriesData1: {
-    type: Array,
+  pieData: {
+    type: Object,
     default() {
       return null;
     },
   },
 });
-const { total, seriesData, seriesData1, amount } = toRefs(props);
 
-// 图表数据
+const { title, total, amount, lineData, pieData } = toRefs(props);
+
+// 图表数据 line
+const lineOptions = ref(lineData.value);
 const seriesOption = {
   type: 'line',
   smooth: true,
@@ -64,7 +50,8 @@ const seriesOption = {
     shadowOffsetY: 8,
   },
 };
-function setOptions() {
+
+const setLineOptions = computed(() => {
   return {
     xAxis: {
       type: 'category',
@@ -83,77 +70,167 @@ function setOptions() {
     },
     series: [
       {
-        data: seriesData.value,
+        data: lineOptions.value.line1,
         ...seriesOption,
         color: 'rgba(0,112,241)',
       },
       {
-        data: seriesData1.value,
+        data: lineOptions.value.line2,
         ...seriesOption,
         color: 'rgba(39, 148, 103)',
       },
     ],
   };
-}
-// 监听数据变动
+});
+
+// 监听数据变动 line
+watch(
+  lineData,
+  (newVal) => {
+    if (lineOptions.value === newVal) {
+      return;
+    }
+    lineOptions.value = newVal;
+  },
+  { deep: true }
+);
+
+// 图表数据 pie
+const pieOptions = ref(pieData.value);
+const pieTotal = 100;
+const setPieOptions = computed(() => {
+  return {
+    series: [
+      {
+        name: '通过率' + pieOptions.value.pieVal + '%',
+        type: 'pie',
+        radius: ['90%', '96%'],
+        showEmptyCircle: true,
+        label: {
+          show: true,
+          position: 'center',
+          fontSize: '15',
+          color: '#fff',
+        },
+        emphasis: {
+          scale: false,
+        },
+        data: [
+          {
+            value: pieOptions.value.pieVal, //需要显示的数据
+            name: pieOptions.value.pieVal + '%',
+            itemStyle: {
+              color: 'rgb(45, 180, 124)',
+            },
+          },
+          {
+            value: pieTotal - pieOptions.value.pieVal,
+            itemStyle: {
+              color: 'rgb(40, 45, 53)',
+            },
+          },
+        ],
+      },
+    ],
+  };
+});
+
+// 监听数据变动 pie
 watch(
-  [seriesData, seriesData1],
+  pieData,
   (newVal) => {
-    if (seriesData.value === newVal || seriesData1.value === newVal) {
+    if (pieOptions.value === newVal) {
       return;
     }
-    seriesData.value = newVal;
-    seriesData1.value = newVal;
+    pieOptions.value = newVal;
   },
   { deep: true }
 );
 </script>
 
+<template>
+  <div class="mix-chart">
+    <div class="mix-total">
+      <p class="title">{{ title }}</p>
+      <div class="total">
+        <strong class="num">{{ formatNumber(total) }}</strong
+        >in total
+      </div>
+      <p class="text">
+        <span class="amount">{{ amount }}</span
+        >in last 24h
+      </p>
+    </div>
+
+    <div class="chart-pie">
+      <chart-module
+        :options="setPieOptions"
+        :width="'80px'"
+        :height="'80px'"
+      ></chart-module>
+      <div class="chart-pie-info">
+        <p class="title">{{ pieData.title }}</p>
+        <p class="total">
+          <span class="num">{{ pieData.total }}</span> in total
+        </p>
+        <p class="text">
+          <span class="amount">{{ pieData.amount }}</span> last 24h
+        </p>
+      </div>
+    </div>
+
+    <div class="chart-box">
+      <p class="title">Increment Trend</p>
+      <chart-module :options="setLineOptions" :height="'180px'"></chart-module>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
-.card-chart {
+.mix-chart {
   display: grid;
-  grid-template-columns: 250px auto;
+  grid-template-columns: auto auto auto;
   border-radius: 10px;
   padding: 20px;
   background-color: #161820;
-  .card-box {
-    width: 300px;
-    .title {
+  .chart-box {
+    grid-column: 2 / 4;
+    grid-row: 1 / 3;
+  }
+  .title {
+    font-size: 16px;
+    color: rgb(198, 207, 220);
+    margin-bottom: 10px;
+    line-height: 24px;
+  }
+  .text {
+    font-size: 12px;
+    color: #999;
+    margin-top: 10px;
+    .amount {
+      color: #ccc;
       font-size: 14px;
-      color: #aaa;
-      margin-bottom: 10px;
-      line-height: 24px;
+      margin-right: 3px;
     }
-    .text {
-      font-size: 12px;
-      color: #999;
-      margin-top: 10px;
-    }
-    .total {
-      font-size: 12px;
-      color: #999;
-      .num {
-        font-size: 30px;
-        color: #fff;
-        margin-right: 3px;
-      }
+  }
+  .total {
+    font-size: 12px;
+    color: #999;
+    .num {
+      font-size: 30px;
+      color: #fff;
+      margin-right: 3px;
     }
   }
-  .chartBox {
-    flex: 1;
-    p {
-      font-size: 12px;
-      color: #999;
-      line-height: 24px;
-      .amount {
-        color: #fff;
-        margin-right: 3px;
+  .chart-pie {
+    display: flex;
+    &-info {
+      padding-left: 12px;
+      .num {
+        color: rgb(198, 207, 220);
+        font-size: 18px;
       }
     }
-    .chart {
-      width: 100%;
-      height: 180px;
-    }
   }
 }
 </style>
diff --git a/src/components/EnterpriseTreemap.vue b/src/components/charts/TreemapPartnershipsDevelopers.vue
similarity index 82%
rename from src/components/EnterpriseTreemap.vue
rename to src/components/charts/TreemapPartnershipsDevelopers.vue
index 1f959dede4f4e0cfebb5c12b84d30ff2677eace8..9140decd04b4f4a228070a1395a976265f48e30a 100644
--- a/src/components/EnterpriseTreemap.vue
+++ b/src/components/charts/TreemapPartnershipsDevelopers.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, toRefs, watch } from 'vue';
+import { ref, toRefs, watch, computed } from 'vue';
 
 const props = defineProps({
   options: {
@@ -12,14 +12,19 @@ const props = defineProps({
 
 const { seriesData } = toRefs(props.options);
 const optionsItem = ref(seriesData.value);
-// chart bar 图表
-function setOptions() {
+
+// chart treemap
+const setOptions = computed(() => {
   return {
     label: {
       position: 'insideTopLeft',
       formatter: function (params) {
         let arr = [
-          '{value|' + params.data.value + '} {label|' + params.data.label + '} ',
+          '{value|' +
+            params.data.value +
+            '} {label|' +
+            params.data.label +
+            '} ',
           '{name|' + params.name + '}',
         ];
         //   console.log(params);
@@ -64,7 +69,8 @@ function setOptions() {
       },
     ],
   };
-}
+});
+
 // 监听数据变动
 watch(
   seriesData,
@@ -77,8 +83,9 @@ watch(
   { deep: true }
 );
 </script>
+
 <template>
-  <h1>合作企业开发者数量占比</h1>
-  <ChartView :options="setOptions()" :height="'500px'"></ChartView>
+  <chart-module :options="setOptions" :height="'500px'"></chart-module>
 </template>
+
 <style lang="scss" scoped></style>
diff --git a/src/main.js b/src/main.js
index 10c5c8fd383220cd58c0822a5f7fbc7a89876a2b..7c0c326f1eb23093650713a69adff0669960842b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,11 +9,11 @@ import 'normalize.css/normalize.css';
 import './styles/base.scss';
 
 import SvgIcon from '@/components/SvgIcon.vue';
-import ChartView from '@/components/Chart.vue';
+import ChartModule from '@/components/charts/ChartModule.vue';
 
 const app = createApp(App);
 
 app.component('SvgIcon', SvgIcon);
-app.component('ChartView', ChartView);
+app.component('ChartModule', ChartModule);
 
 app.use(router).use(store).mount('#app');
diff --git a/src/service/options.js b/src/service/options.js
index 0cd359cf00bd8f4ef95e8c23ffb817d18bdbeb94..adfc3536edbe5b3f47c37a1a256ef6d5cbc3c2b7 100644
--- a/src/service/options.js
+++ b/src/service/options.js
@@ -1,4 +1,4 @@
-export const prOpt = [
+export const prOptions = [
   {
     name: 'prOpt',
     data: [1, 1, 1, 1, 1, 1, 1],
@@ -24,7 +24,7 @@ export const prOpt = [
     data: [, , 6, 6, 6, 6, 6],
   },
 ];
-export const issuseOpt = [
+export const issuseOptions = [
   {
     name: 'issuseOpt',
     data: [1, 1, 1, 1, 1, 1, 1],
@@ -50,7 +50,7 @@ export const issuseOpt = [
     data: [, , 6, 6, 6, 6, 6],
   },
 ];
-export const commitOpt = [
+export const commitOptions = [
   {
     name: 'commitOpt',
     data: [1, 1, 1, 1, 1, 1, 1],
diff --git a/src/views/Contributors.vue b/src/views/Contributors.vue
index e5febc0d70177bed98b02f6a658c1524b78f5d5e..6586998b495adf541f91a27160ed834c557a2253 100644
--- a/src/views/Contributors.vue
+++ b/src/views/Contributors.vue
@@ -1,79 +1,15 @@
-<template>
-  <AppBanner>
-    <div class="banner-content">
-      <div class="banner-title">
-        <p>Explore the data of</p>
-        <h3>Contributors</h3>
-      </div>
-      <div class="contributors-panel">
-        <div class="panel-left">
-          <ContributorsCharts
-            class="panel-left-chart"
-            :total="allData.total"
-            :amount="allData.amount"
-            :series-data="allData.seriesData"
-            :series-data1="allData.seriesData1"
-          ></ContributorsCharts>
-          <div class="panel-box">
-            <IconText :icon="starInfo.icon" :title="starInfo.title" :amount="starInfo.amount"></IconText>
-            <IconText :icon="watchInfo.icon" :title="watchInfo.title" :amount="watchInfo.amount"></IconText>
-            <IconText :icon="forkInfo.icon" :title="forkInfo.title" :amount="forkInfo.amount"></IconText>
-          </div>
-        </div>
-        <div class="panel-right">
-          <TextChart
-            class="panel-right-card"
-            :title="prData.title"
-            :amount="prData.amount"
-            :total="prData.total"
-            :options="prData.options"
-          />
-          <TextChart
-            class="panel-right-card"
-            :title="IssuseData.title"
-            :amount="IssuseData.amount"
-            :total="IssuseData.total"
-            :options="IssuseData.options"
-          />
-          <TextChart
-            class="panel-right-card"
-            :title="commitsData.title"
-            :amount="commitsData.amount"
-            :total="commitsData.total"
-            :options="commitsData.options"
-          />
-        </div>
-      </div>
-    </div>
-  </AppBanner>
-
-  <div class="wrap">
-    <div class="developers-box">
-      <div class="developers-option">
-        <h3>Contributors</h3>
-        <RadioGroup :grouplist="grouplist" :actives="radioActive" @click="radioEvent"></RadioGroup>
-      </div>
-      <ContributorsRankLine :options="optionLine" />
-    </div>
-    <div class="development-panel">
-      <h3>开发语言占比排名</h3>
-      <DevelopmentLanguage class="development-panel-content" />
-    </div>
-  </div>
-</template>
-
 <script setup>
-import AppBanner from '@/components/AppBanner.vue';
-import ContributorsRankLine from '@/components/ContributorsRankLine.vue';
+import OBanner from '@/components/OBanner.vue';
+import LineContributorsRank from '@/components/charts/LineContributorsRank.vue';
 import DevelopmentLanguage from '@/components/DevelopmentLanguage.vue';
-import RadioGroup from '@/components/RadioGroup.vue';
+import ORadioButton from '@/components/ORadioButton.vue';
 import { ref } from 'vue';
-import TextChart from '../components/TextChart.vue';
-import ContributorsCharts from '../components/ContributorsCharts.vue';
+import ChartCard from '../components/charts/ChartCard.vue';
+import MixChartContributors from '../components/charts/MixChartContributors.vue';
 import IconText from '../components/IconText.vue';
-import { prOpt, issuseOpt, commitOpt } from '../service/options';
+import { prOptions, issuseOptions, commitOptions } from '../service/options';
 // 单选按钮传参
-const grouplist = [
+const radioItem = [
   {
     id: 'pr',
     label: 'PR',
@@ -90,18 +26,18 @@ const grouplist = [
 const radioActive = ref('PR');
 
 // ranking 回调
-const optionLine = ref(prOpt);
+const optionLine = ref(prOptions);
 const radioEvent = (item) => {
   radioActive.value = item;
   switch (item) {
     case 'PR':
-      optionLine.value = prOpt;
+      optionLine.value = prOptions;
       break;
     case 'Issuse':
-      optionLine.value = issuseOpt;
+      optionLine.value = issuseOptions;
       break;
     case 'Commit':
-      optionLine.value = commitOpt;
+      optionLine.value = commitOptions;
       break;
   }
 };
@@ -132,12 +68,94 @@ const watchInfo = ref({ icon: 'temp', title: 'Watch', amount: 18900 });
 const forkInfo = ref({ icon: 'temp', title: 'Fork', amount: 29100 });
 
 const allData = ref({
+  title: 'All Contributors',
   total: '14500',
   amount: '121',
-  seriesData: [5, 30, 40, 33, 43, 52, 55],
-  seriesData1: [1, 20, 30, 23, 33, 42, 47],
+  lineData: {
+    line1: [5, 30, 40, 33, 43, 52, 55],
+    line2: [1, 20, 30, 23, 33, 42, 47],
+  },
+  pieData: {
+    total: '6352',
+    amount: '121',
+    title: 'Active Contributors',
+    pieVal: '68',
+  },
 });
 </script>
+
+<template>
+  <o-banner>
+    <div class="banner-content">
+      <div class="banner-title">
+        <p>Explore the data of</p>
+        <h3 class="title">Contributors</h3>
+      </div>
+      <div class="contributors-container">
+        <mix-chart-contributors
+          :title="allData.title"
+          :total="allData.total"
+          :amount="allData.amount"
+          :line-data="allData.lineData"
+          :pie-data="allData.pieData"
+        ></mix-chart-contributors>
+
+        <chart-card
+          :title="prData.title"
+          :amount="prData.amount"
+          :total="prData.total"
+          :options="prData.options"
+        />
+        <chart-card
+          :title="IssuseData.title"
+          :amount="IssuseData.amount"
+          :total="IssuseData.total"
+          :options="IssuseData.options"
+        />
+        <chart-card
+          :title="commitsData.title"
+          :amount="commitsData.amount"
+          :total="commitsData.total"
+          :options="commitsData.options"
+        />
+        <icon-text
+          :icon="starInfo.icon"
+          :title="starInfo.title"
+          :amount="starInfo.amount"
+        ></icon-text>
+        <icon-text
+          :icon="watchInfo.icon"
+          :title="watchInfo.title"
+          :amount="watchInfo.amount"
+        ></icon-text>
+        <icon-text
+          :icon="forkInfo.icon"
+          :title="forkInfo.title"
+          :amount="forkInfo.amount"
+        ></icon-text>
+      </div>
+    </div>
+  </o-banner>
+
+  <div class="wrap">
+    <div class="developers-box">
+      <div class="developers-option">
+        <h3 class="title">Contributors</h3>
+        <o-radio-button
+          :radio-item="radioItem"
+          :radio-active="radioActive"
+          @radio-click="radioEvent"
+        ></o-radio-button>
+      </div>
+      <line-contributors-rank :options="optionLine" />
+    </div>
+    <div class="development-panel">
+      <h3 class="title">开发语言占比排名</h3>
+      <development-language class="development-panel-content" />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .banner-content {
   padding: 30px 0;
@@ -149,7 +167,7 @@ const allData = ref({
     padding: 40px 0;
     font-size: 18px;
     color: #fff;
-    h3 {
+    .title {
       font-size: 30px;
       font-weight: bold;
       margin-top: 10px;
@@ -163,37 +181,21 @@ const allData = ref({
     align-items: center;
   }
 }
-.contributors-panel {
-  display: flex;
-  justify-content: space-between;
-  .panel-left {
-    flex: 1;
-    margin-right: 10px;
-    &-chart {
-      margin-bottom: 10px;
-      height: 250px;
-    }
-    .panel-box {
-      display: grid;
-      grid-template-columns: auto auto auto;
-      row-gap: 10px;
-      column-gap: 10px;
-    }
+.contributors-container {
+  display: grid;
+  grid-template-columns: auto auto auto 300px;
+  gap: 10px;
+  .mix-chart {
+    grid-column: 1 / 4;
+    grid-row: 1 / 3;
   }
-  .panel-right {
-    width: 320px;
-    display: grid;
-    grid-template-columns: auto;
-    row-gap: 10px;
-    column-gap: 10px;
-    &-card {
-      height: 120px;
-    }
+  .icon-text {
+    grid-area: 3;
   }
 }
 .development-panel {
   margin-top: 60px;
-  h3 {
+  .title {
     font-size: 18px;
     margin-bottom: 40px;
   }
diff --git a/src/views/OverView.vue b/src/views/OverView.vue
index c2d8c87b3eb439c6d3f1f3138312dcde65fcbfdf..fdcfb2d7c5fc672efbc4528969a8937ec9065c5a 100644
--- a/src/views/OverView.vue
+++ b/src/views/OverView.vue
@@ -1,24 +1,6 @@
-<template>
-  <AppBanner>
-    <div class="banner-content">
-      <div class="content-title">
-        <p>The Real-time State of</p>
-        <h3>openEuler Community</h3>
-      </div>
-      <div class="content-grid">
-        <IconText :icon="usersInfo.icon" style="grid-row: 1/3"></IconText>
-        <IconText :icon="develoersInfo.icon" :title="develoersInfo.title" :amount="develoersInfo.amount"></IconText>
-        <IconText :icon="sigsInfo.icon" :title="sigsInfo.title" :amount="sigsInfo.amount"></IconText>
-        <IconText :icon="productsInfo.icon" :title="productsInfo.title" :amount="productsInfo.amount"></IconText>
-        <IconText :icon="vendorsInfo.icon" :title="vendorsInfo.title" :amount="vendorsInfo.amount"></IconText>
-      </div>
-    </div>
-  </AppBanner>
-</template>
-
 <script setup>
 import { ref } from 'vue';
-import AppBanner from '../components/AppBanner.vue';
+import OBanner from '../components/OBanner.vue';
 import IconText from '../components/IconText.vue';
 
 const usersInfo = ref({ icon: 'temp', title: 'Developers', amount: 404000 });
@@ -28,6 +10,40 @@ const productsInfo = ref({ icon: 'temp', title: 'Products', amount: 8744 });
 const vendorsInfo = ref({ icon: 'temp', title: 'OS Vendors', amount: 11 });
 </script>
 
+<template>
+  <o-banner>
+    <div class="banner-content">
+      <div class="content-title">
+        <p>The Real-time State of</p>
+        <h3>openEuler Community</h3>
+      </div>
+      <div class="content-grid">
+        <icon-text :icon="usersInfo.icon" style="grid-row: 1/3"></icon-text>
+        <icon-text
+          :icon="develoersInfo.icon"
+          :title="develoersInfo.title"
+          :amount="develoersInfo.amount"
+        ></icon-text>
+        <icon-text
+          :icon="sigsInfo.icon"
+          :title="sigsInfo.title"
+          :amount="sigsInfo.amount"
+        ></icon-text>
+        <icon-text
+          :icon="productsInfo.icon"
+          :title="productsInfo.title"
+          :amount="productsInfo.amount"
+        ></icon-text>
+        <icon-text
+          :icon="vendorsInfo.icon"
+          :title="vendorsInfo.title"
+          :amount="vendorsInfo.amount"
+        ></icon-text>
+      </div>
+    </div>
+  </o-banner>
+</template>
+
 <style lang="scss" scoped>
 .banner-content {
   padding: 30px 0 80px 0px;
diff --git a/src/views/Partnerships.vue b/src/views/Partnerships.vue
index 58a3016c42df8c8982cdf312fd05844064fd80b8..5bda58986adb6517c253c3af9ba5ccb739216a74 100644
--- a/src/views/Partnerships.vue
+++ b/src/views/Partnerships.vue
@@ -1,14 +1,6 @@
-<template>
-  <div class="wrap">
-    <EnterpriseLine :options="lineData" />
-    <br />
-    <EnterpriseTreemap :options="treeData" />
-  </div>
-</template>
-
 <script setup>
-import EnterpriseLine from '../components/EnterpriseLine.vue';
-import EnterpriseTreemap from '../components/EnterpriseTreemap.vue';
+import LinePartnershipsTotal from '../components/charts/LinePartnershipsTotal.vue';
+import TreemapPartnershipsDevelopers from '../components/charts/TreemapPartnershipsDevelopers.vue';
 import { ref } from 'vue';
 const lineData = ref({
   optData: [0, 1, 6, 20, 46, 122, 352],
@@ -75,4 +67,23 @@ const treeData = ref({
 });
 </script>
 
-<style lang="scss" scoped></style>
+<template>
+  <div class="wrap">
+    <line-partnerships-total :options="lineData" />
+    <br />
+    <div class="partnerships-developers">
+      <h3 class="title">合作企业开发者数量占比</h3>
+      <treemap-partnerships-developers :options="treeData" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.partnerships-developers {
+  margin-top: 40px;
+  .title {
+    font-size: 18px;
+    margin-bottom: 20px;
+  }
+}
+</style>