Merge branch 'master' of https://gitcode.com/hk_openRepo/OpenRepo_Portal into dev-shenjianbin

2025-03-15 17:17:53 +08:00
parent 310ff85f70 482449d09a
commit 1467b74c5e
6 changed files with 331 additions and 228 deletions
--- a/src/components/AdvanceSearch/index.vue
+++ b/src/components/AdvanceSearch/index.vue
@@ -1,70 +1,109 @@
 <template>
-  <div style="padding: 12PX;">
-    <span class="title">高级筛选</span>
-    <d-form style="margin-top: 20px" layout="vertical">
+  <div>
+    <slot name="title"></slot>
+    <d-form :layout="props.layout" :label-size="'lg'">
      <d-row :gutter="16">
        <d-col :span="8">
          <d-form-item field="license" label="license">
-            <d-input placeholder="请输入license" v-model="formData.license"/>
+            <d-input placeholder="请输入license名称" v-model="formData.licenseName"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="name" label="软件/组件名称">
-            <d-input placeholder="请输入软件/组件名称" v-model="formData.name"/>
+            <d-input placeholder="请输入软件/组件名称" v-model="formData.searchWord"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
-          <d-form-item field="licenseStrength" label="license强弱" help-tips="license强弱说明">
-            <d-input v-model="formData.licenseStrength"/>
+          <d-form-item field="licenseRisk" label="license集成风险" help-tips="license集成风险说明">
+            <d-select :options="licenseRiskList" v-model="formData.licenseStrengths"></d-select>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row :gutter="16">
        <d-col :span="8">
          <d-form-item field="version" label="软件版本">
-            <d-input v-model="formData.version"/>
+            <d-input v-model="formData.softwareVersion"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="dependency" label="依赖软件">
-            <d-input v-model="formData.dependency"/>
+            <d-input v-model="formData.dependentSoftware"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="language" label="编程语言">
-            <d-input v-model="formData.language"/>
+            <d-select :options="languageList" v-model="formData.programmingLanguage"></d-select>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row :gutter="16">
        <d-col :span="8">
          <d-form-item field="date" label="版本发布日期">
-            <d-input v-model="formData.date"/>
+            <d-range-date-picker-pro v-model="formData.dateRange"  style="width: 100%;"/>
          </d-form-item>
        </d-col>
      </d-row>
-      <gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
-        <d-button variant="solid" @click="submitForm">搜索</d-button>
-        <d-button @click="cancel">取消</d-button>
-      </gc-form-operation>
+
+      <slot name="operation">
+        <gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
+          <d-button variant="solid" @click="submitForm">搜索</d-button>
+          <d-button @click="cancel">取消</d-button>
+        </gc-form-operation>
+      </slot>
    </d-form>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, defineEmits } from 'vue';
+import { ref, defineEmits, defineProps, watch } from 'vue';
+const props = defineProps({
+  layout: {
+    type: String,
+    default: 'horizontal'
+  },
+  modelValue: {
+    type: Object,
+    default: () => ({
+      licenseName: '',
+      searchWord: '',
+      licenseStrengths: '',
+      softwareVersion: '',
+      dependentSoftware: '',
+      programmingLanguage: '',
+      dateRange: ['', '']
+    })
+  }
+})
+const emit = defineEmits(['submit', 'cancel', 'update:modelValue']);
+const languageList = ref([]);
+const licenseRiskList = ref([
+  {
+    name: '高',
+    value: 'high'
+  },
+  {
+    name: '中',
+    value: 'medium'
+  },
+  {
+    name: '低',
+    value: 'low'
+  }
+])

-const emit = defineEmits(['submit', 'cancel']);
+const formData = ref({...props.modelValue});

-const formData = ref({
-  license: '',
-  name: '',
-  licenseStrength: '',
-  version: '',
-  dependency: '',
-  language: '',
-  date: ''
-});
+watch(() => props.modelValue, (newVal) => {
+  if (JSON.stringify(newVal) !== JSON.stringify(formData.value)) {
+    formData.value = {...newVal};
+  }
+}, { deep: true });
+
+watch(formData, (newVal) => {
+  if (JSON.stringify(newVal) !== JSON.stringify(props.modelValue)) {
+    emit('update:modelValue', {...newVal});
+  }
+}, { deep: true });

 const submitForm = () => {
  emit('submit', formData.value);
@@ -72,21 +111,48 @@ const submitForm = () => {

 const cancel = () => {
  formData.value = {
-    license: '',
-    name: '',
-    licenseStrength: '',
-    version: '',
-    dependency: '',
-    language: '',
-    date: ''
+    licenseName: '',
+    searchWord: '',
+    licenseStrengths: '',
+    softwareVersion: '',
+    dependentSoftware: '',
+    programmingLanguage: '',
+    dateRange: ['', '']
  }
  emit('cancel');
+  emit('update:modelValue', formData.value);
 }
+
+const getLanguageList = () => {
+  const mockData = [
+      {
+          "key": "c++",
+          "name": "C++"
+      },
+      {
+          "key": "C",
+          "name": "C"
+      },
+      {
+          "key": "PYTHON",
+          "name": "PYTHON"
+      },
+      {
+          "key": "JAVA",
+          "name": "JAVA"
+      }
+  ]
+
+  languageList.value = mockData.map(item => {
+    return {
+      name: item.name,
+      value: item.key
+    }
+  })
+}
+getLanguageList();
 </script>

 <style scoped lang="scss">
-.title {
-  font-size: 16px;
-  font-weight: bold;
-}
+
 </style>
--- a/src/components/ChartLine/index.vue
+++ b/src/components/ChartLine/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <d-row class="mt-3">
+    <d-col :span="12">
+      <d-chart :option="optionConChart" style="width: 100%; height: 400px"></d-chart>
+      <p class="text-center mt-translate-y">国家/地球分布</p>
+    </d-col>
+    <d-col :span="12">
+      <d-chart :option="optionOrgChart" style="width: 100%; height: 400px"></d-chart>
+      <p class="text-center mt-translate-y">组织/公司分布</p>
+    </d-col>
+  </d-row>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { DChart } from 'vue-devui/echarts';
+const optionConChart = reactive({
+  tooltip: {
+    show: true,
+    trigger: 'item'
+  },
+  xAxis: {
+    type: 'category',
+    data: ['美国', '中国', '德国', '瑞士', '法国', '英国', '印度', '日本', '荷兰', '俄罗斯']
+  },
+  yAxis: {
+    // 给y轴添加单位后缀
+    axisLabel: {
+      formatter: '{value}%'
+    },
+    name: '单位',
+    type: 'value'
+  },
+  series: [
+    {
+      data: [12, 14.8, 23.6, 18.6, 17.3, 13.1, 16, 11.8, 13.9, 16.4],
+      type: 'bar',
+      barWidth: '40%',
+      // 给label添加单位后缀
+      label: {
+        show: true,
+        position: 'top',
+        formatter: '{c}%'
+      },
+      itemStyle: {
+        color: '#2070F3',
+        borderRadius: [5, 5, 0, 0]
+      }
+    }
+  ]
+});
+
+const optionOrgChart = reactive({
+  tooltip: {
+    show: true,
+    trigger: 'item'
+  },
+  xAxis: {
+    type: 'category',
+    data: ['公司1', '公司2', '公司3', '公司4', '公司5', '公司6', '公司7', '公司8', '公司9', '公司10']
+  },
+  yAxis: {
+    // 给y轴添加单位后缀
+    axisLabel: {
+      formatter: '{value}%'
+    },
+    name: '单位',
+    type: 'value'
+  },
+  series: [
+    {
+      data: [12, 14.8, 23.6, 18.6, 17.3, 13.1, 16, 11.8, 13.9, 16.4],
+      type: 'bar',
+      barWidth: '40%',
+      // 给label添加单位后缀
+      label: {
+        show: true,
+        position: 'top',
+        formatter: '{c}%'
+      },
+      itemStyle: {
+        color: '#2CB8C9',
+        borderRadius: [5, 5, 0, 0]
+      }
+    }
+  ]
+});
+</script>
+
+<style scoped lang="scss">
+.mt-translate-y {
+  transform: translateY(-30px);
+}
+</style>
--- a/src/router/interceptor.ts
+++ b/src/router/interceptor.ts
@@ -41,7 +41,7 @@ const isRepoVisited = (id: string): boolean => {
 // };
 const fromHomeWeb = ['home', 'search', 'gStar', 'gStarApply', 'explore'];

-export const injectRouter = router => {
+export const injectRouter = (router) => {
  const account = useAccountStore();

  router.beforeEach(async (to, from) => {
@@ -56,7 +56,7 @@ export const injectRouter = router => {
        path_name: Array.isArray(namespace) ? namespace.join('/') : namespace
      };
      let res = await reqCatch(getPathType, params);
-      if (!res.error) {
+      if (!res.error && res.data) {
        res = res?.data?.data;

        if (res?.type === null) {
@@ -77,15 +77,18 @@ export const injectRouter = router => {
    const BASE_URL = (import.meta as any).env.VITE_HOST;
    const beforeRef = sessionStorage.getItem('ref');
    const ref = beforeRef || document.referrer || '';
-    if (!fromHomeWeb.includes(to.name)) { // 设置全局ref
+    if (!fromHomeWeb.includes(to.name)) {
+      // 设置全局ref
      window.page_ref = ref;
      sessionStorage.setItem('ref', BASE_URL + to.fullPath);
    }

    // 获取组织详情
-    if (to.meta.type === 'org' || globalStore.namespaceType === 1) { // 组织相关页面 || 组织主页
+    if (to.meta.type === 'org' || globalStore.namespaceType === 1) {
+      // 组织相关页面 || 组织主页
      const { orgId } = useOrgId('%2F', to.params.namespace);
-      if (orgId.value !== currentOrgId) { // 第一次进入或切换组织时调用接口
+      if (orgId.value !== currentOrgId) {
+        // 第一次进入或切换组织时调用接口
        const { setOrgInfo, setAccessLevel, setVisibility } = orgInfoStore();
        const res = await reqCatch(getOrg, { orgId: orgId.value, with_full_path: true });
        if (!res.error) {
@@ -94,7 +97,8 @@ export const injectRouter = router => {
        if (res?.error?.error_code === 404) {
          return { name: '404' };
        }
-        if (res?.error?.error_code === 403) { // 403代表无私有组织权限
+        if (res?.error?.error_code === 403) {
+          // 403代表无私有组织权限
          setAccessLevel(0);
          setVisibility('private');
          return { name: '403' };
@@ -137,8 +141,8 @@ export const injectRouter = router => {
            ['DISCUSSION', 'repoDiscussion'],
            ['COMMUNITY', 'reqCommunity']
          ]);
-          modules.forEach(item => {
-            if ((to.name === moduleRouteConfig.get(item.key)) && item.value === '0') {
+          modules.forEach((item) => {
+            if (to.name === moduleRouteConfig.get(item.key) && item.value === '0') {
              globalStore.setIsNotFound(true);
            }
          });
@@ -204,15 +208,18 @@ export const injectRouter = router => {
    }

    // 验证登录权限
-    if (to.meta.needLogin) { // 是否需要登录
-      if (account.isLogin) { // 已登录
+    if (to.meta.needLogin) {
+      // 是否需要登录
+      if (account.isLogin) {
+        // 已登录
        return true;
      } else {
        emitEvent('login', { triggerType: to.meta?.loginType, Authorization: Boolean(to?.meta?.Authorization) });
        return false;
      }
    } else {
-      if (account.isLogin && to.meta.loginHidden) { // 已登录，不能访问某些页面，进行跳转处理（如：登录注册）
+      if (account.isLogin && to.meta.loginHidden) {
+        // 已登录，不能访问某些页面，进行跳转处理（如：登录注册）
        const toOauth = to.name === 'oauth' && /(.*)_(.*)/.exec(to.query?.state); // 三方授权不跳转
        const fromAtomGit = to.query.installation_id && /atomgit.com/.test(document.referrer); // 来自AtomGit应用的跳转
        if (toOauth || fromAtomGit) return true;
@@ -223,7 +230,8 @@ export const injectRouter = router => {
  });
  router.afterEach((to, from) => {
    // 上报PV
-    if (to.fullPath === '/' || to.fullPath !== from.fullPath) { // 同地址切换不上报
+    if (to.fullPath === '/' || to.fullPath !== from.fullPath) {
+      // 同地址切换不上报
      if (!(to.name === 'repo' || to.name === 'repoDir') || (from.fullPath === '/' && to.name === 'repoDir')) {
        // 子应用单独处理
        if (fromHomeWeb.includes(to.name)) return;
--- a/src/views/Jyh/Home/index.vue
+++ b/src/views/Jyh/Home/index.vue
@@ -6,10 +6,33 @@
        <h1>可信开源代码库</h1>
      </div>
      <div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
-        <d-input ref="searchInput" placeholder="请输入搜索关键字" @focus="inputFocus" @blur="inputBlur"
+        <d-input ref="searchInput" placeholder="请输入搜索关键字" @focus="inputFocus" @blur="inputBlur" :autocomplete="'off'"
        v-model="searchStr">
          <template #prepend>
-            <d-select v-model="searchType" :options="searchOptions"></d-select>
+            <d-dropdown @toggle="onCateToggle($event)">
+              <div class="flex items-center gap-1 cursor-pointer">
+                {{ selectedCate }} 
+                <d-icon :rotate="cateRotate" name="icon-chevron-down-2"></d-icon>
+              </div>
+              <template #menu>
+                <ul class="list-menu">
+                  <li class="menu-item" @click="onCategoryChange('组件/软件')">组件/软件</li>
+                  <d-dropdown :position="position" :offset="0">
+                    <li class="menu-item">
+                      行业
+                      <i class="icon icon-chevron-right"></i>
+                    </li>
+                    <template #menu>
+                      <ul class="list-menu">
+                        <li class="menu-item" v-for="option in industryOptions" @click="onCategoryChange(option)">
+                            {{ option }}
+                        </li>
+                      </ul>
+                    </template>
+                  </d-dropdown>
+                </ul>
+              </template>
+            </d-dropdown>
          </template>
          <template #append>
            <div class="advanced-search" @click="openAdvancedSearch">
@@ -20,9 +43,13 @@
          </template>
        </d-input>
        <d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" close-scope="'blank'"
-        :offset="offset">
+        :offset="offset" :clickOutside="closeOutside">
          <div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px'}">
-            <AdvanceSearch @submit="submit($event)" @cancel="isOpen = false"/>
+            <AdvanceSearch @submit="submit($event)" @cancel="isOpen = false" class="p-20" :layout="'vertical'">
+              <template #title>
+                <span class="title">高级筛选</span>
+              </template>
+            </AdvanceSearch>
          </div>
        </d-dropdown-menu>
        <d-button color="primary" variant="solid" @click="search">搜索</d-button>
@@ -34,15 +61,15 @@
            <img src="@/assets/imgs/home/informIcon@2x.png">
            <span>信息公示</span>
          </div>
-          <a class="devui-link">更多 ></a>
+          <a class="devui-link" @click="checkMore">更多 ></a>
        </div>
        <div class="info-content">
          <d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">
-            <d-timeline-item style="cursor: pointer;" v-for="(item, index) in infoList" :key="index"
+            <d-timeline-item v-for="(item, index) in infoList" :key="index"
            :dot-color="item.dotColor" :line-color="'var(--devui-form-control-line-hover)'">
              <template #default>
                <div style="display: flex; justify-content: space-between;">
-                  <div>{{ item.text }}</div>
+                  <div class="cursor-pointer" @click="openWarningDetail(item.text)">{{ item.text }}</div>
                  <div style="display: flex;  align-items: center; gap: 8px;">
                    <d-icon name="icon-time"></d-icon>
                    {{ item.time }}
@@ -69,11 +96,14 @@ const route = useRoute();
 const router = useRouter();
 const inputGlow = ref(false);
 const searchStr = ref('');
+const position = ref(['right-start', 'right-end']);
+const industryOptions = ref(['通信', '军工', '金融', '能源'])
 const searchType = ref('组件/软件');
 const searchOptions = ref(['组件/软件']);
 const offset = ref({ mainAxis: 7 , crossAxis: -10 });
 const isOpen = ref(false);
 const rotate = ref(0);
+const cateRotate = ref(0);
 const infoList = ref([
  {
    text: '公告1',
@@ -97,7 +127,7 @@ const infoList = ref([

 const homeSearch = ref(null);
 const dropdownWidth = ref(0);
-
+const selectedCate = ref('组件/软件');

 const searchInput = ref(null);
 const openAdvancedSearch = () => {
@@ -106,9 +136,13 @@ const openAdvancedSearch = () => {
  inputGlow.value = isOpen.value;
 };

+const closeOutside = () => {
+  return false
+}
+
 const submit = (formData) => {
  isOpen.value = false;
-  router.push({ name: 'Search', query: { ...formData }});
+  router.push({ name: 'Search', query: { ...formData, searchType: selectedCate.value }});
 };

 const inputFocus = () => {
@@ -129,6 +163,22 @@ const search = () => {
  router.push({ name: 'Search', query: { val: searchStr.value || '', type: route?.query?.type || 'License' }});
 };

+const onCategoryChange = (cate) => {
+  selectedCate.value = cate;
+}
+
+const onCateToggle = (event) => {
+  cateRotate.value = event ? 180 : 0;
+}
+
+const checkMore = () => {
+  router.push({ name: 'PersonalCenter' });
+}
+
+const openWarningDetail = (event) => {
+  console.log(event)
+}
+
 let resizeObserver: ResizeObserver | null = null;

 onMounted(() => {
@@ -295,5 +345,27 @@ onBeforeUnmount(() => {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }

+.menu-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 4px;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--devui-list-item-hover-bg, #f2f5fc);
+      color: var(--devui-list-item-hover-text, #526ecc);
+    }
+}

+.list-menu {
+    padding: 8px;
+    margin: 0;
+    width: 100px;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 500;
+}
 </style>
--- a/src/views/Jyh/Search/Components/OssQuery.vue
+++ b/src/views/Jyh/Search/Components/OssQuery.vue
@@ -1,86 +1,15 @@
 <template>
  <div class="secret-container">
    <div class="search-form">
-      <d-form
-        label-size="lg"
-        class="jyh-form"
-        ref="formRef"
-        :data="formData"
-        :pop-postion="['right']"
-        :rules="formRules"
-      >
-        <d-row :gutter="25" type="flex" class="docs-devui-row mb-4">
-          <d-col style="flex: 1">
-            <d-form-item field="title" label="当前页面搜索关键字" :show-feedback="false">
-              <d-input
-                style="width: 100%"
-                v-model="formData.title"
-                placeholder="License编码模糊搜索"
-                maxLength="50"
-                minLength="2"
-              />
-            </d-form-item>
-          </d-col>
-          <d-col style="flex: 1">
-            <d-form-item field="type" label="主/依赖类型" :show-feedback="false">
-              <gc-checkbox-group class="jyh-checkbox-group" v-model="formData.type" :options="typeOptions" direction="row"></gc-checkbox-group>
-            </d-form-item>
-          </d-col>
-          <d-col style="flex: 1">
-            <d-form-item field="version" label="选型版本火车名称" help-tips="选型版本火车名称" :show-feedback="false">
-              <d-select class="jyh-select-multiple" v-model="formData.version" :multiple="true" :options="typeOptions" :allow-clear="true" />
-            </d-form-item>
-          </d-col>
-          <d-col style="flex: 1">
-            <d-form-item field="title" label="软件编码" :show-feedback="false">
-              <d-input
-                style="width: 100%"
-                v-model="formData.code"
-                placeholder="软件编码模糊搜索"
-                maxLength="50"
-                minLength="2"
-              />
-            </d-form-item>
-          </d-col>
-        </d-row>
-        <d-row :gutter="25" type="flex" class="docs-devui-row mb-5">
-          <d-col style="flex: 1">
-            <d-form-item field="name" label="软件名称" :show-feedback="false">
-              <d-input
-                style="width: 100%"
-                v-model="formData.name"
-                placeholder="软件名称模糊搜索"
-                maxLength="50"
-                minLength="2"
-              />
-            </d-form-item>
-          </d-col>
-          <d-col style="flex: 1">
-            <d-form-item field="versionCode" label="版本编码" :show-feedback="false">
-              <d-input
-                style="width: 100%"
-                v-model="formData.versionCode"
-                placeholder="版本编码模糊搜索"
-                maxLength="50"
-                minLength="2"
-              />
-            </d-form-item>
-          </d-col>
-          <d-col style="flex: 1">
-            <d-form-item field="pulishTime" label="发布时间" :show-feedback="false">
-              <d-date-picker-pro v-model="formData.pulishTime" :showTime="true"
-                                 placeholder="请选择日期与时间"
-                                 format="YYYY-MM-DD HH:mm:ss" />
-            </d-form-item>
-          </d-col>
-          <d-col style="flex: 1"></d-col>
-        </d-row>
-        <gc-form-operation class="jyh-form-operation">
-          <d-button class="mr-2" variant="solid">筛选</d-button>
-          <d-button variant="solid" color="secondary">清空</d-button>
-        </gc-form-operation>
-        <d-button class="output-btn" icon="icon-share" variant="text">导出</d-button>
-      </d-form>
+      <AdvanceSearch v-model="newFormData" class="px-20">
+        <template #operation>
+          <gc-form-operation class="jyh-form-operation">
+            <d-button class="mr-2" variant="solid">筛选</d-button>
+            <d-button variant="solid" color="secondary">清空</d-button>
+          </gc-form-operation>
+          <d-button class="output-btn" icon="icon-share" variant="text">导出</d-button>
+        </template>
+      </AdvanceSearch>
    </div>
    <div class="mt-3 px-20">
      <d-table class="jyh-table" v-if="tableData.length" :striped="false" :data="tableData" table-layout="auto">
@@ -173,9 +102,10 @@
 </template>

 <script setup lang="ts">
+import AdvanceSearch from '@/components/AdvanceSearch/index.vue'
 import SettingTitle from '@/components/Setting/SettingTitle/index.vue';
 import SettingText from '@/components/Setting/SettingText/index.vue';
-import { ref,reactive } from 'vue';
+import { ref,reactive, onMounted } from 'vue';
 import { getGroupClaList, setGroupClaStatus, deleteGroupCla } from '@/api/cla';
 import { useRouter, useRoute } from 'vue-router';
 import { GModal } from '@/components/Setting/index';
@@ -202,6 +132,16 @@ const riskOptions = reactive(['低', '中', '高']);
 const useTypeOptions = reactive(['软件', '文档', '文档+软件']);
 const isUseOptions = reactive(['是', '否']);

+const newFormData = ref({
+  licenseName: '',
+  searchWord: '',
+  licenseStrengths: '',
+  softwareVersion: '',
+  dependentSoftware: '',
+  programmingLanguage: '',
+  dateRange: ['', '']
+})
+
 const pager = ref({
  total: 10,
  pageIndex: 1,
@@ -219,7 +159,7 @@ const openDelete = (row: any) => {
 };

 const router = useRouter();
-
+const route = useRoute();
 // 跳转
 const gotoDetail = (row) => {
  // 后续请换成params，暂时params传参没传过去
@@ -296,6 +236,13 @@ const setClaStatus = async (row: any) => {
 const signCla = (row: any) => {
  router.push('/cla/' + row.object_id);
 };
+
+onMounted(() => {
+  const query: any = route.query;
+  newFormData.value = {
+    ...query
+  };
+});
 </script>

 <style scoped lang="scss">
@@ -354,7 +301,6 @@ const signCla = (row: any) => {

 .search-form {
  position: relative;
-  padding: 12px 20px 12px 0;
  border-radius: 8px 0px 8px 8px;
  //background: #F2F5FC;

--- a/src/views/Jyh/Version/Detail/CommunityInfo.vue
+++ b/src/views/Jyh/Version/Detail/CommunityInfo.vue
@@ -31,95 +31,15 @@
    <Card simple class="jyh-card mb-4">
      <div class="card-title">贡献者分布</div>
      <p class="card-desc">有关Pull Request创建者的公司信息和地区分布(使用公共GitHub信息进行分析)</p>
-      <d-row class="mt-3">
-        <d-col :span="12">
-          <d-chart :option="optionConChart" style="width: 100%; height: 400px"></d-chart>
-          <p class="text-center mt-translate-y">国家/地球分布</p>
-        </d-col>
-        <d-col :span="12">
-          <d-chart :option="optionOrgChart" style="width: 100%; height: 400px"></d-chart>
-          <p class="text-center mt-translate-y">组织/公司分布</p>
-        </d-col>
-      </d-row>
+      <div class="mt-3">
+        <chart-line />
+      </div>
    </Card>
  </div>
 </template>

 <script setup>
-import { ref, reactive } from 'vue';
-import { DChart } from 'vue-devui/echarts';
-
-const optionConChart = reactive({
-  tooltip: {
-    show: true,
-    trigger: 'item'
-  },
-  xAxis: {
-    type: 'category',
-    data: ['美国', '中国', '德国', '瑞士', '法国', '英国', '印度', '日本', '荷兰', '俄罗斯']
-  },
-  yAxis: {
-    // 给y轴添加单位后缀
-    axisLabel: {
-      formatter: '{value}%'
-    },
-    name: '单位',
-    type: 'value'
-  },
-  series: [
-    {
-      data: [12, 14.8, 23.6, 18.6, 17.3, 13.1, 16, 11.8, 13.9, 16.4],
-      type: 'bar',
-      barWidth: '40%',
-      // 给label添加单位后缀
-      label: {
-        show: true,
-        position: 'top',
-        formatter: '{c}%'
-      },
-      itemStyle: {
-        color: '#2070F3',
-        borderRadius: [5, 5, 0, 0]
-      }
-    }
-  ]
-});
-
-const optionOrgChart = reactive({
-  tooltip: {
-    show: true,
-    trigger: 'item'
-  },
-  xAxis: {
-    type: 'category',
-    data: ['公司1', '公司2', '公司3', '公司4', '公司5', '公司6', '公司7', '公司8', '公司9', '公司10']
-  },
-  yAxis: {
-    // 给y轴添加单位后缀
-    axisLabel: {
-      formatter: '{value}%'
-    },
-    name: '单位',
-    type: 'value'
-  },
-  series: [
-    {
-      data: [12, 14.8, 23.6, 18.6, 17.3, 13.1, 16, 11.8, 13.9, 16.4],
-      type: 'bar',
-      barWidth: '40%',
-      // 给label添加单位后缀
-      label: {
-        show: true,
-        position: 'top',
-        formatter: '{c}%'
-      },
-      itemStyle: {
-        color: '#2CB8C9',
-        borderRadius: [5, 5, 0, 0]
-      }
-    }
-  ]
-});
+import ChartLine from '@/components/ChartLine/index.vue';
 </script>

 <style scoped lang="scss">
@@ -127,7 +47,4 @@ const optionOrgChart = reactive({
  font-size: 12px;
  color: #808080;
 }
-.mt-translate-y {
-  transform: translateY(-30px);
-}
 </style>