Merge branch 'master' of https://gitcode.com/hk_openRepo/OpenRepo_Portal into junjie_dev

# Conflicts:
#	src/api/jyh/index.ts
#	src/components/AdvanceSearch/index.vue
#	src/views/Jyh/Home/index.vue

src/views/Jyh/Search/Components/CountryModal.vue

@@ -0,0 +1,84 @@
+<template>
+  <d-modal
+    title="贡献者分布"
+    v-model="visible"
+    class="file-search-modal"
+    :style="{ width: '800px' }"
+    @close="handleClose"
+  >
+    <Card simple class="jyh-card mb-4" style="box-shadow: none;padding: 0">
+      <d-chart :option="optionConChart" style="width: 100%; height: 400px"></d-chart>
+      <p class="text-center mt-translate-y">国家/地球分布</p>
+    </Card>
+    <template #footer>
+      <d-modal-footer style="text-align: center;">
+        <d-button variant="solid" color="primary"  @click="handleClose">确认</d-button>
+        <d-button @click="handleClose">取消</d-button>
+      </d-modal-footer>
+    </template>
+  </d-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, defineExpose, 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 visible = ref(false);
+
+// 打开模态框
+const openModal = () => {
+  visible.value = true;
+};
+
+// 关闭模态框
+const handleClose = () => {
+  visible.value = false;
+};
+
+// 暴露方法，供父组件调用
+defineExpose({
+  openModal,
+});
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+</style>

src/views/Jyh/Search/Components/OrgModal.vue

@@ -0,0 +1,84 @@
+<template>
+  <d-modal
+    title="贡献者分布"
+    v-model="visible"
+    class="file-search-modal"
+    :style="{ width: '800px' }"
+    @close="handleClose"
+  >
+    <Card simple class="jyh-card mb-4" style="box-shadow: none;padding: 0">
+      <d-chart :option="optionOrgChart" style="width: 100%; height: 400px"></d-chart>
+      <p class="text-center mt-translate-y">组织/公司分布</p>
+    </Card>
+    <template #footer>
+      <d-modal-footer style="text-align: center;">
+        <d-button variant="solid" color="primary"  @click="handleClose">确认</d-button>
+        <d-button @click="handleClose">取消</d-button>
+      </d-modal-footer>
+    </template>
+  </d-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, defineExpose, reactive } from 'vue';
+import { DChart } from 'vue-devui/echarts';
+
+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]
+      }
+    }
+  ]
+});
+
+// 控制模态框显示/隐藏
+const visible = ref(false);
+
+// 打开模态框
+const openModal = () => {
+  visible.value = true;
+};
+
+// 关闭模态框
+const handleClose = () => {
+  visible.value = false;
+};
+
+// 暴露方法，供父组件调用
+defineExpose({
+  openModal,
+});
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+</style>

src/views/Jyh/Search/Components/OssQuery.vue

@@ -4,7 +4,7 @@
       <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 class="mr-2" variant="solid">搜索</d-button>
             <d-button variant="solid" color="secondary">清空</d-button>
           </gc-form-operation>
           <div class="left-btn">
@@ -16,7 +16,7 @@
         </template>
       </AdvanceSearch>
     </div>
-    <div class="mt-3 px-20">
+    <div class="mt-3 px-20 min-h-[600px]">
       <d-table :key="tableKey" class="jyh-table" v-if="tableData.length" :striped="false" :data="tableData" table-layout="auto">
         <!-- 索引列 -->
         <d-column type="index" width="40"></d-column>
@@ -40,6 +40,9 @@
               <template v-else-if="column.key === 'version'">
                 <a @click="gotoDetail(scope.row)">{{ scope.row.version }}</a>
               </template>
+              <template v-else-if="column.key === 'releaseDate'">
+                <span>{{ formatTime(scope.row.releaseDate, 'YYYY-MM-DD') }}</span>
+              </template>
               <template v-else-if="column.key === 'softwareVersion'">
                 <a @click="gotoDetail(scope.row)">{{ scope.row.softwareVersion }}</a>
               </template>
@@ -53,15 +56,19 @@
                 <d-tag type="success">{{ scope.row.programmingLanguage }}</d-tag>
               </template>
               <template v-else-if="column.key === 'contributorCountries'">
-                <span class="mr-2">美国 3.57%</span>
-                <d-tag color="gray">+3</d-tag>
+                <div style="cursor: pointer" @click="openCountryModal(column)">
+                  <span class="mr-2">美国 3.57%</span>
+                  <d-tag color="gray">+3</d-tag>
+                </div>
               </template>
               <template v-else-if="column.key === 'contributorOrganizations'">
-                <span class="mr-2">microsoft 3.57%</span>
-                <d-tag color="gray">+3</d-tag>
+                <div style="cursor: pointer" @click="openOrgModal(column)">
+                  <span class="mr-2">microsoft 3.57%</span>
+                  <d-tag color="gray">+3</d-tag>
+                </div>
               </template>
-              <template v-else-if="column.key === 'sourceCodeDownload'">
-                <a>{{ scope.row.sourceCodeDownload }}</a>
+              <template v-else-if="column.key === 'sourceDownloadUrl'">
+                <a>{{ scope.row.sourceDownloadUrl }}</a>
               </template>
               <template v-else>
                 {{ scope.row[column.key] }}
@@ -88,6 +95,12 @@
       <span class="inline-block text-G900 text-sm font-normal leading-[20px] break-all">你确认删除此项：{{ item.cla_name }}
         ？</span>
     </GModal>
+
+    <!-- 引入子组件 -->
+    <CountryModal ref="countryModalRef" />
+
+    <!-- 引入子组件 -->
+    <OrgModal ref="orgModalRef" />
   </div>
 </template>
 
@@ -104,245 +117,21 @@ import { reqCatch } from '@/utils/catch';
 import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
 import { Message } from 'vue-devui';
 import { storeToRefs } from 'pinia';
+import CountryModal from './CountryModal.vue'
+import OrgModal from './OrgModal.vue'
 import { useAccountStore } from '@/stores/user';
+const { formatTime } = useTimeFormat();
+import { releasePage } from '@/api/jyh';
+import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
 const { namespace } = getOrgInfo();
 const userInfo = useAccountStore();
 const { isLogin } = storeToRefs(userInfo);
 
 // 定义 tableKey，用于强制刷新表格
 const tableKey = ref(0);
-const tableData = ref([
-  {
-    softwareName: 'eslint-plugin-import',
-    softwareVersion: '2.29.0',
-    releaseDate: '2025-03-10',
-    licenseCount: 3,
-    dependencyCount: 15,
-    productComponentUsage: ['供应链系统A', '供应链系统B'],
-    codeSize: '150KB',
-    vulnerabilityCount: 5,
-    industryCategory: '软件开发工具',
-    developer: 'ESLint团队',
-    contributorCountries: ['美国', '中国', '德国'],
-    contributorOrganizations: ['Google', 'Microsoft', 'Alibaba'],
-    programmingLanguage: 'JavaScript',
-    communityHash: 'a1b2c3d4',
-    softwareScore: 8.5,
-    sourceCodeDownload: 'https://github.com/eslint/eslint-plugin-import',
-    copyright: 'MIT License',
-    externalVulnerabilitySource: 'CVE-2025-1234',
-    versionDescription: '修复了若干安全漏洞',
-    compatibilityRisk: '低',
-    communityEOL: '2028-12-31',
-  },
-  {
-    softwareName: 'react',
-    softwareVersion: '18.2.0',
-    releaseDate: '2025-02-15',
-    licenseCount: 1,
-    dependencyCount: 10,
-    productComponentUsage: ['供应链系统C'],
-    codeSize: '500KB',
-    vulnerabilityCount: 2,
-    industryCategory: '前端框架',
-    developer: 'Facebook',
-    contributorCountries: ['美国', '加拿大', '英国'],
-    contributorOrganizations: ['Facebook', 'Netflix', 'Airbnb'],
-    programmingLanguage: 'JavaScript',
-    communityHash: 'e5f6g7h8',
-    softwareScore: 9.0,
-    sourceCodeDownload: 'https://github.com/facebook/react',
-    copyright: 'MIT License',
-    externalVulnerabilitySource: 'CVE-2025-5678',
-    versionDescription: '新增了并发渲染功能',
-    compatibilityRisk: '中',
-    communityEOL: '2030-12-31',
-  },
-  {
-    softwareName: 'vue',
-    softwareVersion: '3.2.0',
-    releaseDate: '2025-01-20',
-    licenseCount: 1,
-    dependencyCount: 8,
-    productComponentUsage: ['供应链系统D'],
-    codeSize: '300KB',
-    vulnerabilityCount: 1,
-    industryCategory: '前端框架',
-    developer: 'Evan You',
-    contributorCountries: ['中国', '美国', '日本'],
-    contributorOrganizations: ['Alibaba', 'Tencent', 'Baidu'],
-    programmingLanguage: 'JavaScript',
-    communityHash: 'i9j0k1l2',
-    softwareScore: 9.2,
-    sourceCodeDownload: 'https://github.com/vuejs/vue',
-    copyright: 'MIT License',
-    externalVulnerabilitySource: 'CVE-2025-9101',
-    versionDescription: '优化了性能',
-    compatibilityRisk: '低',
-    communityEOL: '2029-12-31',
-  },
-  {
-    softwareName: 'webpack',
-    softwareVersion: '5.75.0',
-    releaseDate: '2025-04-05',
-    licenseCount: 2,
-    dependencyCount: 20,
-    productComponentUsage: ['供应链系统E'],
-    codeSize: '1MB',
-    vulnerabilityCount: 3,
-    industryCategory: '构建工具',
-    developer: 'Webpack团队',
-    contributorCountries: ['美国', '德国', '俄罗斯'],
-    contributorOrganizations: ['Google', 'Microsoft', 'Yandex'],
-    programmingLanguage: 'JavaScript',
-    communityHash: 'm3n4o5p6',
-    softwareScore: 8.8,
-    sourceCodeDownload: 'https://github.com/webpack/webpack',
-    copyright: 'MIT License',
-    externalVulnerabilitySource: 'CVE-2025-1122',
-    versionDescription: '修复了构建性能问题',
-    compatibilityRisk: '高',
-    communityEOL: '2027-12-31',
-  },
-  {
-    softwareName: 'babel',
-    softwareVersion: '7.20.0',
-    releaseDate: '2025-03-25',
-    licenseCount: 1,
-    dependencyCount: 12,
-    productComponentUsage: ['供应链系统F'],
-    codeSize: '400KB',
-    vulnerabilityCount: 4,
-    industryCategory: '编译器',
-    developer: 'Babel团队',
-    contributorCountries: ['美国', '英国', '印度'],
-    contributorOrganizations: ['Facebook', 'Netflix', 'Uber'],
-    programmingLanguage: 'JavaScript',
-    communityHash: 'q7r8s9t0',
-    softwareScore: 8.7,
-    sourceCodeDownload: 'https://github.com/babel/babel',
-    copyright: 'MIT License',
-    externalVulnerabilitySource: 'CVE-2025-3344',
-    versionDescription: '新增了对新语法的支持',
-    compatibilityRisk: '中',
-    communityEOL: '2026-12-31',
-  },
-  {
-    softwareName: 'typescript',
-    softwareVersion: '5.0.0',
-    releaseDate: '2025-05-01',
-    licenseCount: 1,
-    dependencyCount: 5,
-    productComponentUsage: ['供应链系统G'],
-    codeSize: '2MB',
-    vulnerabilityCount: 0,
-    industryCategory: '编程语言',
-    developer: 'Microsoft',
-    contributorCountries: ['美国', '中国', '加拿大'],
-    contributorOrganizations: ['Microsoft', 'Google', 'Alibaba'],
-    programmingLanguage: 'TypeScript',
-    communityHash: 'u1v2w3x4',
-    softwareScore: 9.5,
-    sourceCodeDownload: 'https://github.com/microsoft/TypeScript',
-    copyright: 'Apache License 2.0',
-    externalVulnerabilitySource: '无',
-    versionDescription: '新增了装饰器功能',
-    compatibilityRisk: '低',
-    communityEOL: '2035-12-31',
-  },
-  {
-    softwareName: 'jest',
-    softwareVersion: '29.0.0',
-    releaseDate: '2025-06-10',
-    licenseCount: 1,
-    dependencyCount: 18,
-    productComponentUsage: ['供应链系统H'],
-    codeSize: '600KB',
-    vulnerabilityCount: 2,
-    industryCategory: '测试工具',
-    developer: 'Facebook',
-    contributorCountries: ['美国', '德国', '法国'],
-    contributorOrganizations: ['Facebook', 'Netflix', 'Spotify'],
-    programmingLanguage: 'JavaScript',
-    communityHash: 'y5z6a7b8',
-    softwareScore: 9.1,
-    sourceCodeDownload: 'https://github.com/facebook/jest',
-    copyright: 'MIT License',
-    externalVulnerabilitySource: 'CVE-2025-5566',
-    versionDescription: '优化了测试性能',
-    compatibilityRisk: '中',
-    communityEOL: '2032-12-31',
-  },
-  {
-    softwareName: 'docker',
-    softwareVersion: '24.0.0',
-    releaseDate: '2025-07-15',
-    licenseCount: 1,
-    dependencyCount: 25,
-    productComponentUsage: ['供应链系统I'],
-    codeSize: '10MB',
-    vulnerabilityCount: 6,
-    industryCategory: '容器化工具',
-    developer: 'Docker Inc.',
-    contributorCountries: ['美国', '英国', '澳大利亚'],
-    contributorOrganizations: ['Docker Inc.', 'Google', 'Amazon'],
-    programmingLanguage: 'Go',
-    communityHash: 'c9d0e1f2',
-    softwareScore: 9.3,
-    sourceCodeDownload: 'https://github.com/docker/docker',
-    copyright: 'Apache License 2.0',
-    externalVulnerabilitySource: 'CVE-2025-7788',
-    versionDescription: '新增了对ARM架构的支持',
-    compatibilityRisk: '高',
-    communityEOL: '2030-12-31',
-  },
-  {
-    softwareName: 'kubernetes',
-    softwareVersion: '1.28.0',
-    releaseDate: '2025-08-20',
-    licenseCount: 1,
-    dependencyCount: 30,
-    productComponentUsage: ['供应链系统J'],
-    codeSize: '15MB',
-    vulnerabilityCount: 8,
-    industryCategory: '容器编排工具',
-    developer: 'CNCF',
-    contributorCountries: ['美国', '中国', '德国'],
-    contributorOrganizations: ['Google', 'Red Hat', 'IBM'],
-    programmingLanguage: 'Go',
-    communityHash: 'g3h4i5j6',
-    softwareScore: 9.4,
-    sourceCodeDownload: 'https://github.com/kubernetes/kubernetes',
-    copyright: 'Apache License 2.0',
-    externalVulnerabilitySource: 'CVE-2025-9900',
-    versionDescription: '优化了集群管理功能',
-    compatibilityRisk: '高',
-    communityEOL: '2033-12-31',
-  },
-  {
-    softwareName: 'postgresql',
-    softwareVersion: '15.0.0',
-    releaseDate: '2025-09-25',
-    licenseCount: 1,
-    dependencyCount: 7,
-    productComponentUsage: ['供应链系统K'],
-    codeSize: '8MB',
-    vulnerabilityCount: 3,
-    industryCategory: '数据库',
-    developer: 'PostgreSQL团队',
-    contributorCountries: ['美国', '加拿大', '日本'],
-    contributorOrganizations: ['PostgreSQL Inc.', 'Amazon', 'Microsoft'],
-    programmingLanguage: 'C',
-    communityHash: 'k7l8m9n0',
-    softwareScore: 9.6,
-    sourceCodeDownload: 'https://github.com/postgres/postgres',
-    copyright: 'PostgreSQL License',
-    externalVulnerabilitySource: 'CVE-2025-1122',
-    versionDescription: '新增了JSONB索引功能',
-    compatibilityRisk: '低',
-    communityEOL: '2035-12-31',
-  },
-]);
+const countryVisible = ref(false);
+const orgVisible = ref(false);
+const tableData = ref([]);
 const formData = ref({ title: '',type: '', useType: '',formData:'',select: '',time1:null,name:'',versionCode:'',pulishTime:'' });
 const typeOptions = reactive(['主软件', '依赖软件']);
 const riskOptions = reactive(['低', '中', '高']);
@@ -377,35 +166,60 @@ const openDelete = (row: any) => {
 const columns = ref([
   { key: 'softwareName', label: '软件名称', visible: true, filterable: true, sortable: false },
   { key: 'softwareVersion', label: '软件版本', visible: true, filterable: true, sortable: false },
-  { key: 'releaseDate', label: '版本发布时间', visible: true, filterable: true, sortable: true },
+  { key: 'securityScore', label: '软件评分', visible: true, filterable: false, sortable: true },
   { key: 'licenseCount', label: 'License数量', visible: true, filterable: false, sortable: false },
-  { key: 'dependencyCount', label: '依赖软件数', visible: true, filterable: false, sortable: false },
+  { key: 'industryCategory', label: '行业类型', visible: true, filterable: true, sortable: false },
+  { key: 'primaryLanguage', label: '编程语言', visible: true, filterable: true, sortable: false },
+  { key: 'codeLines', label: '代码量', visible: true, filterable: false, sortable: false },
+  { key: 'sourceDownloadUrl', label: '源码包下载地址', visible: true, filterable: false, sortable: false },
+  { key: 'releaseDate', label: '版本发布时间', visible: false, filterable: true, sortable: true },
+  { key: 'dependencyCount', label: '依赖软件数', visible: false, filterable: false, sortable: false },
   { key: 'productComponentUsage', label: '产品成分使用量', visible: false, filterable: false, sortable: false },
-  { key: 'codeSize', label: '代码量', visible: true, filterable: false, sortable: false },
-  { key: 'vulnerabilityCount', label: '漏洞数量', visible: true, filterable: false, sortable: false },
-  { key: 'industryCategory', label: '行业分类', visible: true, filterable: true, sortable: false },
-  { key: 'developer', label: '开发商', visible: false, filterable: true, sortable: false },
-  { key: 'contributorCountries', label: '贡献者国家/地区分布', visible: true, filterable: false, sortable: false },
-  { key: 'contributorOrganizations', label: '贡献者组织/公司分布', visible: true, filterable: false, sortable: false },
-  { key: 'programmingLanguage', label: '编程语言', visible: false, filterable: true, sortable: false },
+  { key: 'vulnerabilityCount', label: '漏洞数量', visible: false, filterable: false, sortable: false },
+  { key: 'communityName', label: '开发商', visible: false, filterable: true, sortable: false },
+  { key: 'contributorCountries', label: '贡献者国家/地区分布', visible: false, filterable: false, sortable: false },
+  { key: 'contributorOrganizations', label: '贡献者组织/公司分布', visible: false, filterable: false, sortable: false },
   { key: 'communityHash', label: '社区hash值', visible: false, filterable: false, sortable: false },
-  { key: 'softwareScore', label: '软件评分', visible: false, filterable: false, sortable: true },
-  { key: 'sourceCodeDownload', label: '源码包下载地址', visible: true, filterable: false, sortable: false },
   { key: 'copyright', label: 'CopyRight', visible: false, filterable: false, sortable: false },
   { key: 'externalVulnerabilitySource', label: '外部漏洞源的软件名称', visible: false, filterable: true, sortable: false },
   { key: 'versionDescription', label: '版本描述', visible: false, filterable: false, sortable: false },
   { key: 'compatibilityRisk', label: '兼容性风险描述', visible: false, filterable: false, sortable: false },
-  { key: 'communityEOL', label: '社区EOL时间', visible: false, filterable: true, sortable: true },
+  { key: 'eolDate', label: '社区EOL时间', visible: false, filterable: true, sortable: true },
 ]);
 
 // 定义 showColumnList 状态
 const showColumnList = ref(false);
+// 获取子组件的引用
+const countryModalRef = ref(null);
+const orgModalRef = ref(null);
 
+// 打开模态框的方法
+const openCountryModal = () => {
+  if (countryModalRef.value) {
+    countryModalRef.value.openModal(); // 调用子组件的方法
+  }
+};
+// 打开模态框的方法
+const openOrgModal = () => {
+  if (orgModalRef.value) {
+    orgModalRef.value.openModal(); // 调用子组件的方法
+  }
+};
 // 更新 showColumnList 的方法
 const updateShowColumnList = (newValue) => {
   showColumnList.value = newValue;
   tableKey.value++; // 更新 tableKey，强制刷新表格
 };
+// 更新 showColumnList 的方法
+const openCountryChart = (row) => {
+  // selectRow.value = row;
+  countryVisible.value = true;
+};
+// 更新 showColumnList 的方法
+const openOrgChart = (row) => {
+  // selectRow.value = row;
+  orgVisible.value = true;
+};
 
 const router = useRouter();
 const route = useRoute();
@@ -413,7 +227,7 @@ const route = useRoute();
 const gotoDetail = (row) => {
   // 后续请换成params，暂时params传参没传过去
   router.push({
-    path: 'repoDetail/' + row.version
+    path: 'repoDetail/' + row.id
   });
 };
 // 分页
@@ -486,6 +300,19 @@ const signCla = (row: any) => {
   router.push('/cla/' + row.object_id);
 };
 
+const getReleaseList = async() => {
+  const { data, error } = await releasePage({ ...newFormData.value, current: pager.value.pageIndex,size: pager.value.pageSize  });
+  if (!error && data) {
+    debugger
+    tableData.value = data.data.records;
+    pager.value.total = data.data.total;
+  }
+};
+
+onMounted(async() => {
+  getReleaseList();
+});
+
 onMounted(() => {
   const query: any = route.query;
   newFormData.value = {

src/views/Jyh/Search/index.vue

@@ -6,10 +6,10 @@
       <gc-breadcrumb-item><span class="cur-title">开源软件列表</span></gc-breadcrumb-item>
     </d-breadcrumb>
     <d-tabs class="jyh-tabs" type="wrapped" v-model="selectTab">
-      <d-tab id="OssQuery" title="开源软件查询">
+      <d-tab id="OssQuery" title="软件列表">
         <OssQuery/>
       </d-tab>
-      <d-tab id="BatchVerify" title="批量校验">
+      <d-tab id="BatchVerify" title="软件校验">
         <BatchVerify/>
       </d-tab>
     </d-tabs>